feat: 实现业务视图页面
登录、模型调优、评测、推理、对比、模型管理、数据集、数据处理、工具、系统（硬件/日志/训练日志）等全部业务页面视图。
This commit is contained in:
caoxiaozhu
290
frontend/src/views/eval/DimensionCreateView.vue
Normal file
290
frontend/src/views/eval/DimensionCreateView.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { MdEditor } from 'md-editor-v3'
|
||||
import 'md-editor-v3/lib/style.css'
|
||||
import PageCard from '@/components/PageCard.vue'
|
||||
import {
|
||||
createDimension,
|
||||
updateDimension,
|
||||
getDimension,
|
||||
} from '@/api/modules/eval'
|
||||
import { getModelList } from '@/api/modules/model'
|
||||
import { EVAL_METHODS, EVAL_METHOD_PROMPTS } from '@/constants/dimension'
|
||||
import { DIMENSION_TYPE_MAP } from '@/constants'
|
||||
import type { DimensionType, ModelItem } from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const formRef = ref<FormInstance>()
|
||||
const submitting = ref(false)
|
||||
const isEdit = computed(() => !!route.params.id)
|
||||
const editId = computed(() => route.params.id as string | undefined)
|
||||
|
||||
const evalModels = ref<ModelItem[]>([])
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
type: '' as DimensionType | '',
|
||||
description: '',
|
||||
eval_model: '',
|
||||
eval_method: '' as string | string[],
|
||||
eval_prompt: '',
|
||||
is_active: true,
|
||||
is_default: false,
|
||||
// text_similarity
|
||||
bleu_n: 1,
|
||||
output_precision: 3,
|
||||
// metric
|
||||
score_min: 0,
|
||||
score_max: 5,
|
||||
pass_threshold: 3,
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入维度名称', trigger: 'blur' },
|
||||
{ max: 50, message: '不超过 50 字符', trigger: 'blur' },
|
||||
],
|
||||
type: [{ required: true, message: '请选择指标类型', trigger: 'change' }],
|
||||
eval_model: [{ required: true, message: '请选择大模型', trigger: 'change' }],
|
||||
eval_prompt: [{ required: true, message: '请填写评估 Prompt', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const typeOptions = Object.entries(DIMENSION_TYPE_MAP).map(([value, label]) => ({ value, label }))
|
||||
|
||||
/** 当前类型下的评估方法选项 */
|
||||
const currentMethods = computed(() => (form.type ? EVAL_METHODS[form.type] || [] : []))
|
||||
|
||||
/** 是否文本相似度类型（多选评估方法） */
|
||||
const isTextSimilarity = computed(() => form.type === 'text_similarity')
|
||||
|
||||
/** 切换指标类型时重置相关字段 */
|
||||
watch(
|
||||
() => form.type,
|
||||
(t) => {
|
||||
if (!t) return
|
||||
const methods = EVAL_METHODS[t] || []
|
||||
const first = methods[0]?.value || ''
|
||||
form.eval_method = isTextSimilarity.value ? [first] : first
|
||||
// 切换 Prompt
|
||||
if (form.type !== 'text_similarity' && EVAL_METHOD_PROMPTS[first]) {
|
||||
form.eval_prompt = EVAL_METHOD_PROMPTS[first]
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
/** 评估方法变化时更新 Prompt */
|
||||
watch(
|
||||
() => form.eval_method,
|
||||
(m) => {
|
||||
if (form.type === 'text_similarity' || !m) return
|
||||
const method = Array.isArray(m) ? m[0] : m
|
||||
if (method && EVAL_METHOD_PROMPTS[method]) {
|
||||
form.eval_prompt = EVAL_METHOD_PROMPTS[method]
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
async function loadEditData() {
|
||||
if (!editId.value) return
|
||||
try {
|
||||
const dim: any = await getDimension(editId.value)
|
||||
// 补全所有字段回填（修复原项目回填不完整 bug）
|
||||
Object.assign(form, {
|
||||
name: dim.name || '',
|
||||
type: dim.type || '',
|
||||
description: dim.description || '',
|
||||
eval_model: dim.eval_model || '',
|
||||
eval_method: dim.eval_method || (dim.type ? EVAL_METHODS[dim.type]?.[0]?.value : ''),
|
||||
eval_prompt: dim.eval_prompt || '',
|
||||
is_active: dim.is_active !== false,
|
||||
is_default: !!dim.is_default,
|
||||
bleu_n: dim.bleu_n ?? 1,
|
||||
output_precision: dim.output_precision ?? 3,
|
||||
score_min: dim.score_min ?? 0,
|
||||
score_max: dim.score_max ?? 5,
|
||||
pass_threshold: dim.pass_threshold ?? 3,
|
||||
})
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
async function loadModels() {
|
||||
try {
|
||||
const all = (await getModelList()) || []
|
||||
evalModels.value = all.filter((m) => m.purpose === 'evaluation')
|
||||
} catch {
|
||||
evalModels.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitting.value = true
|
||||
try {
|
||||
const data: any = {
|
||||
name: form.name,
|
||||
type: form.type,
|
||||
description: form.description,
|
||||
eval_model: form.type === 'text_similarity' ? null : form.eval_model,
|
||||
eval_method: form.eval_method,
|
||||
eval_prompt: form.type === 'text_similarity' ? null : form.eval_prompt,
|
||||
is_active: form.is_active,
|
||||
is_default: form.is_default,
|
||||
create_time: new Date().toISOString(),
|
||||
}
|
||||
if (form.type === 'text_similarity') {
|
||||
data.bleu_n = form.bleu_n
|
||||
data.output_precision = form.output_precision
|
||||
}
|
||||
if (form.type === 'metric') {
|
||||
data.score_min = form.score_min
|
||||
data.score_max = form.score_max
|
||||
data.pass_threshold = form.pass_threshold
|
||||
}
|
||||
if (isEdit.value && editId.value) {
|
||||
await updateDimension(editId.value, data)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createDimension(data)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
router.push('/model-eval')
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadModels()
|
||||
loadEditData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageCard :title="isEdit ? '编辑评测维度' : '添加评测维度'">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="130px" style="max-width: 760px">
|
||||
<el-form-item label="维度名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入维度名称" maxlength="50" show-word-limit />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="指标类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择指标类型" style="width: 100%">
|
||||
<el-option v-for="opt in typeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.description" type="textarea" :rows="2" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 分类型 / 指标型：需要选择大模型和评估方法 -->
|
||||
<template v-if="form.type === 'classification' || form.type === 'metric'">
|
||||
<el-form-item label="选择大模型" prop="eval_model">
|
||||
<el-select v-model="form.eval_model" placeholder="请选择评测模型" filterable style="width: 100%">
|
||||
<el-option v-for="m in evalModels" :key="m.id" :label="m.name" :value="m.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="评估方式" prop="eval_method">
|
||||
<el-radio-group v-model="(form.eval_method as string)">
|
||||
<el-radio v-for="m in currentMethods" :key="m.value" :value="m.value">
|
||||
{{ m.name }}
|
||||
<span class="method-desc">{{ m.desc }}</span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="评估 Prompt" prop="eval_prompt">
|
||||
<MdEditor v-model="form.eval_prompt" language="zh-CN" :toolbars-exclude="['github', 'save']" style="height: 320px" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 文本相似度：多选评估方法 + BLEU/精度配置 -->
|
||||
<template v-if="form.type === 'text_similarity'">
|
||||
<el-form-item label="评估方式">
|
||||
<el-checkbox-group v-model="(form.eval_method as string[])">
|
||||
<el-checkbox v-for="m in currentMethods" :key="m.value" :value="m.value">
|
||||
{{ m.name }}
|
||||
<span class="method-desc">{{ m.desc }}</span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="BLEU n-gram">
|
||||
<el-select v-model="form.bleu_n" style="width: 160px">
|
||||
<el-option :value="1" label="1-gram" />
|
||||
<el-option :value="2" label="2-gram" />
|
||||
<el-option :value="3" label="3-gram" />
|
||||
<el-option :value="4" label="4-gram" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="输出精度">
|
||||
<el-select v-model="form.output_precision" style="width: 160px">
|
||||
<el-option :value="1" label="1 位小数" />
|
||||
<el-option :value="2" label="2 位小数" />
|
||||
<el-option :value="3" label="3 位小数" />
|
||||
<el-option :value="4" label="4 位小数" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 指标型：评分范围 + 通过阈值 -->
|
||||
<template v-if="form.type === 'metric'">
|
||||
<el-form-item label="评分最小值">
|
||||
<el-input-number v-model="form.score_min" :min="0" :step="1" style="width: 160px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="评分最大值">
|
||||
<el-input-number v-model="form.score_max" :min="0" :step="1" style="width: 160px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="通过阈值">
|
||||
<div style="width: 100%">
|
||||
<el-slider
|
||||
v-model="form.pass_threshold"
|
||||
:min="form.score_min"
|
||||
:max="form.score_max"
|
||||
:step="0.5"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-form-item label="启用该维度">
|
||||
<el-switch v-model="form.is_active" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设为默认">
|
||||
<el-switch v-model="form.is_default" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">
|
||||
{{ isEdit ? '保存' : '创建' }}
|
||||
</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</PageCard>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.method-desc {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
</style>
|
||||
177
frontend/src/views/eval/EvalCreateView.vue
Normal file
177
frontend/src/views/eval/EvalCreateView.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import PageCard from '@/components/PageCard.vue'
|
||||
import { startEval } from '@/api/modules/eval'
|
||||
import { getDimensionList } from '@/api/modules/eval'
|
||||
import { getTrainedModels } from '@/api/modules/model'
|
||||
import { getDatasetList } from '@/api/modules/dataset'
|
||||
import { getSystemInfo } from '@/api/modules/system'
|
||||
import type { Dimension, TrainedModel, DatasetItem, GpuInfo } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const formRef = ref<FormInstance>()
|
||||
const submitting = ref(false)
|
||||
|
||||
const trainedModels = ref<TrainedModel[]>([])
|
||||
const evalDatasets = ref<DatasetItem[]>([])
|
||||
const dimensions = ref<Dimension[]>([])
|
||||
const gpus = ref<GpuInfo[]>([])
|
||||
|
||||
const form = reactive({
|
||||
eval_task_name: '',
|
||||
eval_type: 'custom' as 'custom' | 'baseline',
|
||||
model_id: '' as string | number,
|
||||
gpu_id: '',
|
||||
data_source: 'dataset' as 'dataset' | 'inference',
|
||||
dataset_id: '' as string | number,
|
||||
dimension_id: '' as string | number,
|
||||
leaderboard: false, // 修复原项目字段名 bug（原读 leader 恒 false）
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
eval_task_name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
|
||||
model_id: [{ required: true, message: '请选择评测模型', trigger: 'change' }],
|
||||
gpu_id: [{ required: true, message: '请选择 GPU', trigger: 'change' }],
|
||||
dimension_id: [{ required: true, message: '请选择评测维度', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const showEvalRules = computed(() => form.eval_type === 'custom')
|
||||
const showDataset = computed(() => form.data_source === 'dataset')
|
||||
|
||||
/** 选中维度详情 */
|
||||
const selectedDimension = computed(() =>
|
||||
dimensions.value.find((d) => d.id == form.dimension_id),
|
||||
)
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const [models, dims, allDs, sys] = await Promise.all([
|
||||
getTrainedModels(),
|
||||
getDimensionList(),
|
||||
getDatasetList(),
|
||||
getSystemInfo(),
|
||||
])
|
||||
trainedModels.value = models?.models || []
|
||||
dimensions.value = dims || []
|
||||
evalDatasets.value = (allDs || []).filter((d: DatasetItem) => d.type === 'eval')
|
||||
gpus.value = sys?.gpu || []
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitting.value = true
|
||||
try {
|
||||
await startEval({
|
||||
eval_task_name: form.eval_task_name,
|
||||
eval_type: form.eval_type,
|
||||
model_id: form.model_id,
|
||||
gpu_id: form.gpu_id,
|
||||
dataset_id: form.dataset_id,
|
||||
dimension_id: form.dimension_id,
|
||||
data_source: form.data_source,
|
||||
leaderboard: form.leaderboard,
|
||||
})
|
||||
ElMessage.success('评测任务已启动')
|
||||
router.push('/model-eval')
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageCard title="新建评测">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" style="max-width: 720px">
|
||||
<el-form-item label="任务名称" prop="eval_task_name">
|
||||
<el-input v-model="form.eval_task_name" placeholder="请输入任务名称" maxlength="50" show-word-limit />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="评测方式">
|
||||
<el-radio-group v-model="form.eval_type">
|
||||
<el-radio-button value="custom">自定义评测</el-radio-button>
|
||||
<el-radio-button value="baseline">基线评测</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="评测模型" prop="model_id">
|
||||
<el-select v-model="form.model_id" placeholder="请选择已训练模型" filterable style="width: 100%">
|
||||
<el-option
|
||||
v-for="m in trainedModels"
|
||||
:key="m.id"
|
||||
:label="m.name"
|
||||
:value="m.id"
|
||||
:disabled="!m.merged"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选择 GPU" prop="gpu_id">
|
||||
<el-select v-model="form.gpu_id" placeholder="请选择 GPU" style="width: 100%">
|
||||
<el-option v-for="(g, idx) in gpus" :key="idx" :label="`${g.name} (GPU ${idx})`" :value="idx" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据来源">
|
||||
<el-radio-group v-model="form.data_source">
|
||||
<el-radio value="dataset">评测数据集</el-radio>
|
||||
<el-radio value="inference">推理结果集</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="showDataset" label="评测数据集" prop="dataset_id">
|
||||
<el-select v-model="form.dataset_id" placeholder="请选择评测数据集" filterable style="width: 100%">
|
||||
<el-option v-for="d in evalDatasets" :key="d.id" :label="d.name" :value="d.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 评测规则（仅 custom 显示） -->
|
||||
<template v-if="showEvalRules">
|
||||
<el-divider content-position="left">评测规则</el-divider>
|
||||
<el-form-item label="评测维度" prop="dimension_id">
|
||||
<el-select
|
||||
v-model="form.dimension_id"
|
||||
placeholder="请选择评测维度"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option v-for="d in dimensions" :key="d.id" :label="d.name" :value="d.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="selectedDimension" label="维度详情">
|
||||
<el-descriptions :column="1" border size="small">
|
||||
<el-descriptions-item label="评估模型">{{ selectedDimension.eval_model || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="评估方法">
|
||||
{{ Array.isArray(selectedDimension.eval_method) ? selectedDimension.eval_method.join(', ') : selectedDimension.eval_method || '-' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-form-item label="加入排行榜">
|
||||
<el-switch v-model="form.leaderboard" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">启动评测</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</PageCard>
|
||||
</template>
|
||||
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