xiaoshu/src/components/doc-gen-logs/LogsBaseInfo.vue

<template>
    <div class="logs-base-info" :class="container_klass">
        <div class="base-info-content">
            <div>
                <div class="st-field-label">状态</div>
                <div class="st-field-value filed-text-status" :class="status_text_klass">{{info.status}}</div>
            </div>

            <div>
                <div class="st-field-label">运行时间</div>
                <div class="st-field-value">{{ time_display }}</div>
            </div>

            <div>
                <div class="st-field-label">总TOKEN数</div>
                <div class="st-field-value">{{ info.total_tokens }} Tokens</div>
            </div>
        </div>

        <div v-if="show_error" class="error-container">{{ info.error }}</div>
    </div>
</template>
<script setup>
import { ref, inject, computed, nextTick } from "vue";

/**
 * 文档报告相关的记录详情
 * 日志详情
 */
const props = defineProps({
    info: Object
});



// "total_tokens": 100,  // 花费token数
// "created_at": 1735817402, // 开始时间
// "finished_at": 1735817402, // 结束时间
// "status": "succeeded", // 工作流状态
// "error": "",   // 错误日志

const show_error = computed(() => {
    const info = props.info || {};

    if (info.error) {
        return true;
    }

    return false;
});


/**
 * 转换为秒
 */
const time_display = computed(() => {
    const info = props.info || {};

    const dis = info.finished_at - info.created_at;

    const str = Number(dis/1000).toFixed(3);

    return `${str}s`;
});

const container_klass = computed(() => {
    const info = props.info || {};

    // return 'status-running'
    // return 'status-succeeded'
    // return 'status-partial_succeeded'
    // return 'status-exception'
    // return 'status-failed'
    // return 'status-stopped'

    return `status-${info.status}`;
});

const status_text_klass = computed(() => {
    const info = props.info || {};

    // return 'text-running'
    // return 'text-succeeded'
    // return 'text-partial_succeeded'
    // return 'text-exception'
    // return 'text-failed'
    // return 'text-stopped'

    return `text-${info.status}`;

});

</script>
<style lang="scss" scoped>
.logs-base-info{


    border-radius: 10px;
    padding: 10px;
    // color: #fff;
    color: #676f83;
    font-size: 14px;

    border-width: 2px;
    border-style: solid;
}
.base-info-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.status-running {
    background-color: #155aef;
}

.status-succeeded {
    // background-color: #079455;
    background-color: #ecfdf3;
    border-color: rgba(23, 178, 106, .8);

}

.status-partial_succeeded {
    background-color: #079455;
}

.status-exception {
    background-color: #f79009;
}

.status-failed {
    // background-color: #dc6803;
    background-color: #fef3f2;
    border-color: #dc6803;
}

.status-stopped {
    background-color: #f79009;
}
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------

.st-field-label{
    font-size: 12px;
}
.st-field-value{
    font-weight: 500;
}


// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
.filed-text-status {
    font-weight: bold;
}
.text-running {
    color: #155aef;
}

.text-succeeded {
    color: #079455;
}

.text-partial_succeeded {
    color: #079455;
}

.text-exception {
    color: #f79009;
}

.text-failed {
    // color: #dc6803;
    color: #dc6803;
}

.text-stopped {
    color: #f79009;
}

// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------
// ----------------------------------------------

.error-container{
    font-size: 12px;
    color: #d92d20;
}
</style>