YG-Soft/YG_FT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现业务视图页面

Browse Source 
登录、模型调优、评测、推理、对比、模型管理、数据集、数据处理、工具、系统（硬件/日志/训练日志）等全部业务页面视图。
This commit is contained in:
caoxiaozhu
2026-07-10 16:45:55 +08:00
parent c1893cf82c
commit 6f6609dae5
30 changed files with 9383 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
frontend/src/views/data-process/DataProcessListView.vue Normal file
View File

@@ -0,0 +1,211 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DataTablePage from '@/components/DataTablePage.vue'
import ModelStatusTag from '@/components/ModelStatusTag.vue'
/** 数据处理任务类型 */
interface DataProcessTask {
id: number | string
name: string
status: string
process_type: string
source_dataset: string
output_dataset?: string
create_time?: string
}
// TODO: 接入真实接口前，先用本地 mock 数据
const router = useRouter()
const dataList = ref<DataProcessTask[]>([
{
id: 1,
name: '客服问答数据清洗',
status: 'completed',
process_type: '去重清洗',
source_dataset: '客服对话原始集',
output_dataset: '客服对话清洗集',
create_time: '2026-07-08 14:23:00',
},
{
id: 2,
name: '指令微调数据构造',
status: 'running',
process_type: '指令构造',
source_dataset: '通用语料库',
output_dataset: 'SFT 指令集',
create_time: '2026-07-09 09:10:00',
},
{
id: 3,
name: '敏感信息脱敏处理',
status: 'pending',
process_type: '脱敏处理',
source_dataset: '用户反馈数据',
create_time: '2026-07-09 16:45:00',
},
{
id: 4,
name: '多轮对话拼接',
status: 'failed',
process_type: '格式转换',
source_dataset: '单轮问答集',
create_time: '2026-07-10 08:30:00',
},
])
const activeTab = ref('all')
const filteredDataList = computed(() => {
let list = dataList.value
if (activeTab.value !== 'all') {
if (activeTab.value === 'processing') {
list = list.filter(item => item.status === 'running' || item.status === 'pending')
} else if (activeTab.value === 'completed') {
list = list.filter(item => item.status === 'completed')
} else if (activeTab.value === 'failed') {
list = list.filter(item => item.status === 'failed')
}
}
return list
})
/** 新建数据处理任务 */
function handleCreate() {
router.push('/data-process/create')
}
/** 查看任务详情（功能开发中） */
function viewDetail(_row: DataProcessTask) {
ElMessage.info('查看详情功能开发中...')
}
/** 删除任务（功能开发中） */
function handleDelete(_row: DataProcessTask) {
ElMessage.info('删除功能开发中...')
}
function formatDateTime(value?: string) {
if (!value) return '-'
return new Date(value).toLocaleString('zh-CN', { hour12: false })
}
</script>
<template>
<div class="data-process-page" style="height: 100%;">
<DataTablePage
title=""
:data="filteredDataList"
searchable
:search-fields="['name']"
create-text="新建数据处理任务"
create-to="/data-process/create"
row-key="id"
:page-size="10"
>
<template #title>
<!-- 胶囊切换控件 -->
<div class="capsule-tabs">
<button
class="capsule-tab-item"
:class="{ active: activeTab === 'all' }"
@click="activeTab = 'all'"
>
全部任务
</button>
<button
class="capsule-tab-item"
:class="{ active: activeTab === 'processing' }"
@click="activeTab = 'processing'"
>
处理中
</button>
<button
class="capsule-tab-item"
:class="{ active: activeTab === 'completed' }"
@click="activeTab = 'completed'"
>
已完成
</button>
</div>
</template>
<template #columns>
<el-table-column label="任务名称" prop="name" align="center" show-overflow-tooltip />
<el-table-column label="任务状态" align="center" width="110">
<template #default="{ row }">
<ModelStatusTag :status="row.status" />
</template>
</el-table-column>
<el-table-column label="处理类型" align="center" width="140">
<template #default="{ row }">{{ row.process_type || '-' }}</template>
</el-table-column>
<el-table-column label="源数据集" align="center" show-overflow-tooltip>
<template #default="{ row }">{{ row.source_dataset || '-' }}</template>
</el-table-column>
<el-table-column label="输出数据集" align="center" show-overflow-tooltip>
<template #default="{ row }">{{ row.output_dataset || '-' }}</template>
</el-table-column>
<el-table-column label="创建时间" align="center" width="190">
<template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
</el-table-column>
</template>
<template #actions="{ row }">
<div class="action-buttons">
<el-button type="primary" link size="small" @click="viewDetail(row)">
<i class="fa fa-file-text-o" style="margin-right: 4px" />详情
</el-button>
<el-button type="danger" link size="small" @click="handleDelete(row)">
<i class="fa fa-trash-o" style="margin-right: 4px" />删除
</el-button>
</div>
</template>
</DataTablePage>
</div>
</template>
<style scoped lang="scss">
/* 胶囊切换栏样式 */
.capsule-tabs {
display: flex;
background: #f1f5f9;
padding: 3px;
border-radius: 8px;
gap: 2px;
border: 1px solid #e2e8f0;
}
.capsule-tab-item {
border: 0;
background: transparent;
padding: 6px 20px;
font-size: 13px;
font-weight: 500;
color: #64748b;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s ease;
outline: none;
&:hover {
color: #1e293b;
}
&.active {
background: #fff;
color: #4f46e5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
font-weight: 600;
}
}
.action-buttons {
display: flex;
justify-content: center;
gap: 8px;
}
</style>