feat: 评测模块新增详情页与创建向导

新增 EvalTaskDetail 与逐样本结果类型,Mock 与适配器补充评测详情接口,路由注册详情页并将维度创建并入向导;EvalCreateView 改为分步向导(任务配置、规则设置、维度表单),新增 EvalDetailView 展示综合得分与样本判定,列表补充详情入口,配套两份回归脚本。
This commit is contained in:
caoxiaozhu
2026-07-12 15:39:59 +08:00
parent c0f5f4a30a
commit 71ce26fff6
15 changed files with 1912 additions and 303 deletions

View File

@@ -1,91 +1,165 @@
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ElMessage } 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 EvalTaskSetupStep, { type EvalTaskSetupDraft } from './create/EvalTaskSetupStep.vue'
import EvalRuleSetupStep, { type EvalRuleSetupDraft } from './create/EvalRuleSetupStep.vue'
import { createDimension, getDimensionList, startEval } from '@/api/modules/eval'
import { getTrainedModels, getModelList } from '@/api/modules/model'
import { getDatasetList } from '@/api/modules/dataset'
import { getSystemInfo } from '@/api/modules/system'
import type { Dimension, TrainedModel, DatasetItem, GpuInfo } from '@/types'
import type { DatasetItem, Dimension, GpuInfo, ModelItem, TrainedModel } from '@/types'
type StepExposed = { validate: () => Promise<boolean> }
const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)
const submitting = ref(false)
const taskStepRef = ref<StepExposed>()
const ruleStepRef = ref<StepExposed>()
const trainedModels = ref<TrainedModel[]>([])
const evalDatasets = ref<DatasetItem[]>([])
const dimensions = ref<Dimension[]>([])
const evalModels = ref<ModelItem[]>([])
const gpus = ref<GpuInfo[]>([])
const createdDimensionId = ref<string | number>('')
const form = reactive({
const taskForm = ref<EvalTaskSetupDraft>({
eval_task_name: '',
eval_type: 'custom' as 'custom' | 'baseline',
model_id: '' as string | number,
model_id: '',
gpu_id: '',
data_source: 'dataset' as 'dataset' | 'inference',
dataset_id: '' as string | number,
dimension_id: '' as string | number,
leaderboard: false, // 修复原项目字段名 bug原读 leader 恒 false
data_source: 'dataset',
dataset_id: '',
leaderboard: 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 ruleForm = ref<EvalRuleSetupDraft>({
ruleMode: 'existing',
dimension_id: '',
newDimension: {
name: '',
type: '',
description: '',
eval_model: '',
eval_method: '',
eval_prompt: '',
is_active: true,
is_default: false,
bleu_n: 1,
output_precision: 3,
score_min: 0,
score_max: 5,
pass_threshold: 3,
},
})
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),
watch(
() => ruleForm.value.newDimension,
() => {
createdDimensionId.value = ''
},
{ deep: true },
)
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
loading.value = true
const results = await Promise.allSettled([
getTrainedModels(),
getDimensionList(),
getDatasetList(),
getSystemInfo(),
getModelList(),
])
if (results[0].status === 'fulfilled') trainedModels.value = results[0].value?.models || []
if (results[1].status === 'fulfilled') dimensions.value = results[1].value || []
if (results[2].status === 'fulfilled') {
evalDatasets.value = (results[2].value || []).filter((dataset) => dataset.type === 'eval')
}
if (results[3].status === 'fulfilled') gpus.value = results[3].value?.gpu || []
if (results[4].status === 'fulfilled') {
evalModels.value = (results[4].value || []).filter((model) => model.purpose === 'evaluation')
}
const failedCount = results.filter((result) => result.status === 'rejected').length
if (failedCount > 0) {
ElMessage.error(`部分基础数据加载失败(${failedCount} 项),请刷新页面后重试`)
}
loading.value = false
}
function buildDimensionPayload() {
const draft = ruleForm.value.newDimension
const payload: Partial<Dimension> = {
name: draft.name,
type: draft.type,
description: draft.description,
eval_model: draft.type === 'text_similarity' ? undefined : draft.eval_model,
eval_method: draft.eval_method,
eval_prompt: draft.type === 'text_similarity' ? undefined : draft.eval_prompt,
is_active: draft.is_active,
is_default: draft.is_default,
create_time: new Date().toISOString(),
}
if (draft.type === 'text_similarity') {
payload.bleu_n = draft.bleu_n
payload.output_precision = draft.output_precision
}
if (draft.type === 'metric') {
payload.score_min = draft.score_min
payload.score_max = draft.score_max
payload.pass_threshold = draft.pass_threshold
}
return payload
}
async function resolveDimensionId() {
if (ruleForm.value.ruleMode === 'baseline') return ''
if (ruleForm.value.ruleMode === 'existing') return ruleForm.value.dimension_id
if (createdDimensionId.value !== '') return createdDimensionId.value
const created = await createDimension(buildDimensionPayload())
if (created?.id === undefined || created.id === null || created.id === '') {
throw new Error('评测维度已提交,但未返回维度 ID无法启动评测任务')
}
createdDimensionId.value = created.id
return created.id
}
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
}
})
if (loading.value || submitting.value) return
const taskValid = await taskStepRef.value?.validate()
const ruleValid = await ruleStepRef.value?.validate()
if (!taskValid || !ruleValid) {
ElMessage.warning('请检查并完善所有必填项')
return
}
submitting.value = true
try {
const dimensionId = await resolveDimensionId()
await startEval({
eval_task_name: taskForm.value.eval_task_name,
eval_type: ruleForm.value.ruleMode === 'baseline' ? 'baseline' : 'custom',
model_id: taskForm.value.model_id,
gpu_id: taskForm.value.gpu_id,
dataset_id: taskForm.value.data_source === 'dataset' ? taskForm.value.dataset_id : '',
dimension_id: dimensionId,
data_source: taskForm.value.data_source,
leaderboard: taskForm.value.leaderboard,
})
ElMessage.success('评测任务已创建并启动')
router.push('/model-eval')
} catch (error) {
const message = error instanceof Error ? error.message : '创建评测任务失败,请稍后重试'
ElMessage.error(message)
} finally {
submitting.value = false
}
}
function handleCancel() {
@@ -96,82 +170,77 @@ 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>
<PageCard title="新建评测任务" subtitle="完成任务配置与评测规则设置后启动评测">
<div v-loading="loading" class="form-container">
<div class="section-card">
<div class="section-title">任务基本配置</div>
<EvalTaskSetupStep
ref="taskStepRef"
v-model="taskForm"
:trained-models="trainedModels"
:eval-datasets="evalDatasets"
:gpus="gpus"
:loading="loading"
:disabled="submitting"
/>
</div>
<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>
<div class="section-card">
<div class="section-title">评测规则设置</div>
<EvalRuleSetupStep
ref="ruleStepRef"
v-model="ruleForm"
:dimensions="dimensions"
:eval-models="evalModels"
:loading="loading"
:disabled="submitting"
/>
</div>
</div>
<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>
<div class="form-footer">
<el-button :disabled="submitting" @click="handleCancel">取消</el-button>
<el-button
type="primary"
:loading="submitting"
:disabled="loading"
@click="handleSubmit"
>
创建并启动评测
</el-button>
</div>
</PageCard>
</template>
<style scoped>
.form-container {
display: flex;
flex-direction: column;
gap: 24px;
}
.section-card {
padding: 24px;
border-radius: 8px;
background: #f9fafb;
border: 1px solid #e5e7eb;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
.form-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
</style>