feat: 实现业务视图页面
登录、模型调优、评测、推理、对比、模型管理、数据集、数据处理、工具、系统（硬件/日志/训练日志）等全部业务页面视图。
This commit is contained in:
caoxiaozhu
307
frontend/src/views/eval/EvalView.vue
Normal file
307
frontend/src/views/eval/EvalView.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import DataTablePage from '@/components/DataTablePage.vue'
|
||||
import {
|
||||
getEvalList,
|
||||
deleteEval,
|
||||
getDimensionList,
|
||||
deleteDimension,
|
||||
} from '@/api/modules/eval'
|
||||
import { DIMENSION_TYPE_MAP } from '@/constants'
|
||||
import type { EvalTask, Dimension } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const activeTab = ref('tasks')
|
||||
|
||||
const evalLoading = ref(false)
|
||||
const evalList = ref<EvalTask[]>([])
|
||||
const dimLoading = ref(false)
|
||||
const dimensionList = ref<Dimension[]>([])
|
||||
|
||||
// 排行榜（原项目为 mock 数据）
|
||||
const leaderboard = ref([
|
||||
{ rank: 1, name: 'GPT-4', score: 92.5 },
|
||||
{ rank: 2, name: 'Claude-3', score: 90.1 },
|
||||
{ rank: 3, name: 'Qwen-Max', score: 85.3 },
|
||||
])
|
||||
|
||||
async function loadEvalList() {
|
||||
evalLoading.value = true
|
||||
try {
|
||||
evalList.value = (await getEvalList()) || []
|
||||
} catch {
|
||||
evalList.value = []
|
||||
} finally {
|
||||
evalLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDimensions() {
|
||||
dimLoading.value = true
|
||||
try {
|
||||
dimensionList.value = (await getDimensionList()) || []
|
||||
} catch {
|
||||
dimensionList.value = []
|
||||
} finally {
|
||||
dimLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteEval(row: any) {
|
||||
await ElMessageBox.confirm('确定要删除这个评测任务吗？', '确认删除', { type: 'warning' })
|
||||
await deleteEval(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadEvalList()
|
||||
}
|
||||
|
||||
async function handleDeleteDimension(row: any) {
|
||||
await ElMessageBox.confirm('确定要删除这个评测维度吗？', '确认删除', { type: 'warning' })
|
||||
await deleteDimension(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadDimensions()
|
||||
}
|
||||
|
||||
function editDimension(row: any) {
|
||||
router.push(`/model-eval/dimension/${row.id}/edit`)
|
||||
}
|
||||
|
||||
function handleCreateClick() {
|
||||
if (activeTab.value === 'tasks') {
|
||||
router.push('/model-eval/create')
|
||||
} else if (activeTab.value === 'dimensions') {
|
||||
router.push('/model-eval/dimension/create')
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
if (activeTab.value === 'tasks') {
|
||||
loadEvalList()
|
||||
} else if (activeTab.value === 'dimensions') {
|
||||
loadDimensions()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadEvalList()
|
||||
loadDimensions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="eval-page">
|
||||
<!-- 评测任务 -->
|
||||
<DataTablePage
|
||||
v-if="activeTab === 'tasks'"
|
||||
title=""
|
||||
:data="evalList"
|
||||
:loading="evalLoading"
|
||||
:delete-fn="handleDeleteEval"
|
||||
create-text="创建评测任务"
|
||||
@create="handleCreateClick"
|
||||
row-key="id"
|
||||
@refresh="loadEvalList"
|
||||
>
|
||||
<template #title>
|
||||
<div class="capsule-tabs">
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'tasks' }" @click="activeTab = 'tasks'">评测任务</button>
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'leaderboard' }" @click="activeTab = 'leaderboard'">排行榜</button>
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'dimensions' }" @click="activeTab = 'dimensions'">评测维度</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #toolbar-extra>
|
||||
<div class="eval-header-actions">
|
||||
<el-link class="action-guide" :underlined="false">
|
||||
<i class="fa fa-file-text-o" style="margin-right: 4px;" />使用指南
|
||||
</el-link>
|
||||
<button class="action-refresh" @click="handleRefresh" title="刷新">
|
||||
<i class="fa fa-refresh" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #columns>
|
||||
<el-table-column label="任务名称" prop="eval_task_name" align="center" />
|
||||
<el-table-column label="评测模型" prop="model_name" align="center" />
|
||||
<el-table-column label="数据集" prop="dataset" align="center" />
|
||||
<el-table-column label="指标" prop="metric" align="center" />
|
||||
<el-table-column label="评分" prop="score" width="100" align="center" />
|
||||
<el-table-column label="状态" prop="status" width="100" align="center" />
|
||||
<el-table-column label="创建时间" align="center" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ row.create_time ? new Date(row.create_time).toLocaleString('zh-CN') : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<el-button link type="danger" size="small" @click="handleDeleteEval(row)">删除</el-button>
|
||||
</template>
|
||||
</DataTablePage>
|
||||
|
||||
<!-- 排行榜 -->
|
||||
<DataTablePage
|
||||
v-if="activeTab === 'leaderboard'"
|
||||
title=""
|
||||
:data="leaderboard"
|
||||
row-key="rank"
|
||||
>
|
||||
<template #title>
|
||||
<div class="capsule-tabs">
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'tasks' }" @click="activeTab = 'tasks'">评测任务</button>
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'leaderboard' }" @click="activeTab = 'leaderboard'">排行榜</button>
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'dimensions' }" @click="activeTab = 'dimensions'">评测维度</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #toolbar-extra>
|
||||
<div class="eval-header-actions">
|
||||
<el-link class="action-guide" :underlined="false">
|
||||
<i class="fa fa-file-text-o" style="margin-right: 4px;" />使用指南
|
||||
</el-link>
|
||||
<button class="action-refresh" @click="handleRefresh" title="刷新">
|
||||
<i class="fa fa-refresh" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #columns>
|
||||
<el-table-column label="排名" prop="rank" width="80" align="center" />
|
||||
<el-table-column label="模型名称" prop="name" align="center" />
|
||||
<el-table-column label="综合评分" prop="score" align="center" />
|
||||
</template>
|
||||
</DataTablePage>
|
||||
|
||||
<!-- 评测维度 -->
|
||||
<DataTablePage
|
||||
v-if="activeTab === 'dimensions'"
|
||||
title=""
|
||||
:data="dimensionList"
|
||||
:loading="dimLoading"
|
||||
:delete-fn="handleDeleteDimension"
|
||||
create-text="添加维度"
|
||||
@create="handleCreateClick"
|
||||
row-key="id"
|
||||
@refresh="loadDimensions"
|
||||
>
|
||||
<template #title>
|
||||
<div class="capsule-tabs">
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'tasks' }" @click="activeTab = 'tasks'">评测任务</button>
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'leaderboard' }" @click="activeTab = 'leaderboard'">排行榜</button>
|
||||
<button class="capsule-tab-item" :class="{ active: activeTab === 'dimensions' }" @click="activeTab = 'dimensions'">评测维度</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #toolbar-extra>
|
||||
<div class="eval-header-actions">
|
||||
<el-link class="action-guide" :underlined="false">
|
||||
<i class="fa fa-file-text-o" style="margin-right: 4px;" />使用指南
|
||||
</el-link>
|
||||
<button class="action-refresh" @click="handleRefresh" title="刷新">
|
||||
<i class="fa fa-refresh" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #columns>
|
||||
<el-table-column label="维度名称" prop="name" align="center" />
|
||||
<el-table-column label="类型" align="center" width="160">
|
||||
<template #default="{ row }">
|
||||
{{ DIMENSION_TYPE_MAP[row.type] || row.type }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" prop="description" show-overflow-tooltip align="center" />
|
||||
<el-table-column label="状态" align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.is_active" type="success" size="small">启用</el-tag>
|
||||
<el-tag v-else type="info" size="small">禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<el-button link type="primary" size="small" @click="editDimension(row)">编辑</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDeleteDimension(row)">删除</el-button>
|
||||
</template>
|
||||
</DataTablePage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.eval-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 胶囊切换栏样式 */
|
||||
.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; /* Primary color */
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.eval-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.action-guide {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #1e293b;
|
||||
}
|
||||
}
|
||||
|
||||
.action-refresh {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
color: #1e293b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user