feat: 实现业务视图页面
登录、模型调优、评测、推理、对比、模型管理、数据集、数据处理、工具、系统（硬件/日志/训练日志）等全部业务页面视图。
This commit is contained in:
caoxiaozhu
215
frontend/src/views/data-process/create/GenerationStep.vue
Normal file
215
frontend/src/views/data-process/create/GenerationStep.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<script setup lang="ts">
|
||||
import type { GenerationState, ProcessType } from './types'
|
||||
|
||||
defineProps<{
|
||||
taskName: string
|
||||
processType: ProcessType
|
||||
fileName: string
|
||||
previewCount: number
|
||||
modifiedCount: number
|
||||
generation: GenerationState
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
stop: []
|
||||
retry: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="generation-step">
|
||||
<div class="generation-layout">
|
||||
<div class="summary-panel">
|
||||
<div class="panel-heading">
|
||||
<strong>任务摘要</strong>
|
||||
<span>已完成预览确认</span>
|
||||
</div>
|
||||
<dl>
|
||||
<div><dt>任务名称</dt><dd>{{ taskName }}</dd></div>
|
||||
<div><dt>数据类型</dt><dd>{{ processType === 'unstructured' ? '非结构化数据' : '结构化数据' }}</dd></div>
|
||||
<div><dt>源文件</dt><dd>{{ fileName }}</dd></div>
|
||||
<div><dt>预览条目</dt><dd>{{ previewCount.toLocaleString() }} 条</dd></div>
|
||||
<div><dt>已修改</dt><dd>{{ modifiedCount.toLocaleString() }} 条</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="run-panel" :class="`is-${generation.status}`">
|
||||
<div class="run-icon">
|
||||
<i v-if="generation.status === 'success'" class="fa fa-check" />
|
||||
<i v-else-if="generation.status === 'failed'" class="fa fa-exclamation" />
|
||||
<i v-else-if="generation.status === 'running'" class="fa fa-cog fa-spin" />
|
||||
<i v-else class="fa fa-play" />
|
||||
</div>
|
||||
<h3>
|
||||
{{ generation.status === 'idle' ? '准备开始处理'
|
||||
: generation.status === 'running' ? '正在生成数据'
|
||||
: generation.status === 'success' ? '数据生成完成'
|
||||
: '生成已停止' }}
|
||||
</h3>
|
||||
<p>{{ generation.message }}</p>
|
||||
<el-progress
|
||||
v-if="generation.status !== 'idle'"
|
||||
:percentage="generation.progress"
|
||||
:stroke-width="10"
|
||||
:status="generation.status === 'success' ? 'success' : undefined"
|
||||
/>
|
||||
<div class="run-meta">
|
||||
<span>解析源数据</span>
|
||||
<span>应用预览修改</span>
|
||||
<span>生成标准结果</span>
|
||||
</div>
|
||||
<el-button v-if="generation.status === 'running'" plain type="warning" @click="emit('stop')">
|
||||
停止生成
|
||||
</el-button>
|
||||
<el-button v-if="generation.status === 'failed'" plain type="primary" @click="emit('retry')">
|
||||
重新生成
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.generation-step {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.generation-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.summary-panel,
|
||||
.run-panel {
|
||||
border: 1px solid #e2e5ec;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.summary-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 17px;
|
||||
background: #fbfcfe;
|
||||
border-bottom: 1px solid #e8ebf0;
|
||||
|
||||
strong {
|
||||
color: #344054;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #2ca66a;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
padding: 8px 17px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 13px 0;
|
||||
border-bottom: 1px solid #eef0f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: #8a93a3;
|
||||
}
|
||||
|
||||
dd {
|
||||
max-width: 65%;
|
||||
overflow: hidden;
|
||||
color: #344054;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.run-panel {
|
||||
display: flex;
|
||||
min-height: 360px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 34px 48px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
h3 {
|
||||
margin: 18px 0 8px;
|
||||
color: #2e3646;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
min-height: 22px;
|
||||
margin: 0 0 24px;
|
||||
color: #7b8495;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-progress) {
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.run-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
color: #5b50f2;
|
||||
font-size: 22px;
|
||||
background: #f0efff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.run-panel.is-success .run-icon {
|
||||
color: #2ca66a;
|
||||
background: #eaf8f1;
|
||||
}
|
||||
|
||||
.run-panel.is-failed .run-icon {
|
||||
color: #d97706;
|
||||
background: #fff7e8;
|
||||
}
|
||||
|
||||
.run-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
color: #98a2b3;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.generation-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user