YG_FT/frontend/src/views/eval/EvalCreateView.vue

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import PageCard from '@/components/PageCard.vue'
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 { DatasetItem, Dimension, GpuInfo, ModelItem, TrainedModel } from '@/types'

type StepExposed = { validate: () => Promise<boolean> }

const router = useRouter()
const loading = ref(false)
const submitting = ref(false)
const currentStep = ref(0)
const taskStepRef = ref<StepExposed>()
const ruleStepRef = ref<StepExposed>()

const WIZARD_STEPS = [
  { title: '任务配置', description: '选择模型、算力与评测数据' },
  { title: '评测规则', description: '选择或创建评测维度' },
] as const

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 taskForm = ref<EvalTaskSetupDraft>({
  eval_task_name: '',
  model_id: '',
  gpu_id: '',
  data_source: 'dataset',
  dataset_id: '',
  leaderboard: false,
})

const ruleForm = ref<EvalRuleSetupDraft>({
  ruleMode: 'new',
  dimension_id: '',
  newDimension: {
    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,
  },
})

watch(
  () => ruleForm.value.newDimension,
  () => {
    createdDimensionId.value = ''
  },
  { deep: true },
)

async function loadData() {
  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: `Custom_Dim_${Date.now()}`,
    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 (loading.value || submitting.value) return
  const ruleValid = await ruleStepRef.value?.validate()
  if (!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
  }
}

async function handleNext() {
  if (loading.value || submitting.value) return
  const taskValid = await taskStepRef.value?.validate()
  if (!taskValid) {
    ElMessage.warning('请检查并完善任务配置')
    return
  }
  currentStep.value = 1
}

function handleBack() {
  if (submitting.value) return
  currentStep.value = 0
}

function handleCancel() {
  router.back()
}

onMounted(loadData)
</script>

<template>
  <PageCard title="新建评测任务" subtitle="完成任务配置与评测规则设置后启动评测">
    <div class="create-wizard-layout">
      <main v-loading="loading" class="wizard-main">
        <div class="wizard-steps-container" aria-label="评测任务创建步骤">
          <div class="custom-wizard-steps">
            <template v-for="(step, index) in WIZARD_STEPS" :key="step.title">
              <div
                v-if="index !== 0"
                class="step-connector"
                :class="{ 'is-active': currentStep >= index }"
              ></div>
              <div
                class="step-item"
                :class="{
                  'is-active': currentStep === index,
                  'is-completed': currentStep > index,
                }"
                :aria-current="currentStep === index ? 'step' : undefined"
              >
                <div class="step-node">
                  <div class="step-icon" aria-hidden="true">
                    <i v-if="currentStep > index" class="fa fa-check" />
                    <span v-else>{{ index + 1 }}</span>
                  </div>
                  <div class="step-text">
                    <div class="step-title">{{ step.title }}</div>
                    <div class="step-description">{{ step.description }}</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>

        <div class="wizard-content">
        <EvalTaskSetupStep
          v-if="currentStep === 0"
          ref="taskStepRef"
          v-model="taskForm"
          :trained-models="trainedModels"
          :eval-datasets="evalDatasets"
          :gpus="gpus"
          :loading="loading"
          :disabled="submitting"
        />
        <EvalRuleSetupStep
          v-else
          ref="ruleStepRef"
          v-model="ruleForm"
          :dimensions="dimensions"
          :eval-models="evalModels"
          :loading="loading"
          :disabled="submitting"
        />
        </div>
      </main>

      <footer class="wizard-footer">
        <el-button
          v-if="currentStep === 1"
          class="footer-back"
          :disabled="submitting"
          @click="handleBack"
        >
          <i class="fa fa-arrow-left footer-button-icon" />返回：任务配置
        </el-button>
        <el-button v-else class="footer-back" :disabled="submitting" @click="handleCancel">
          取消
        </el-button>

        <el-button
          v-if="currentStep === 0"
          type="primary"
          :disabled="loading || submitting"
          @click="handleNext"
        >
          下一步：评测规则<i class="fa fa-arrow-right footer-button-icon is-right" />
        </el-button>
        <el-button
          v-else
          type="primary"
          :loading="submitting"
          :disabled="loading || submitting"
          @click="handleSubmit"
        >
          创建并启动评测
        </el-button>
      </footer>
      </div>
  </PageCard>
</template>

<style scoped>
.create-wizard-layout {
  display: flex;
  flex-direction: column;
  min-height: 620px;
  margin: -20px;
  background: #fff;
}

.wizard-main {
  flex: 1;
  padding: 32px;
}

.wizard-steps-container {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px dashed #e2e8f0;
}

.custom-wizard-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

.step-item {
  display: flex;
  flex: none;
  align-items: center;
}

.step-connector {
  flex: 1;
  height: 2px;
  margin: 0 20px;
  background: #e2e8f0;
  transition: background-color 0.2s ease;
}

.step-connector.is-active {
  background: #5146e5;
}

.step-node {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-icon {
  display: flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
  transition: all 0.2s ease;
}

.step-title {
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.step-description {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 12px;
  white-space: nowrap;
}

.step-item.is-active .step-icon {
  border-color: #5146e5;
  background: #eef2ff;
  color: #5146e5;
}

.step-item.is-active .step-title,
.step-item.is-completed .step-title {
  color: #1e293b;
}

.step-item.is-completed .step-icon {
  border-color: #5146e5;
  background: #5146e5;
  color: #fff;
}

.wizard-content {
  max-width: 920px;
  min-height: 400px;
  margin: 0 auto;
}

.wizard-footer {
  display: flex;
  min-height: 64px;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 32px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 -4px 6px -1px rgb(15 23 42 / 2%);
}

.footer-back {
  margin-right: auto;
}

.footer-button-icon {
  margin-right: 6px;
}

.footer-button-icon.is-right {
  margin-right: 0;
  margin-left: 6px;
}

@media (max-width: 760px) {
  .wizard-main {
    padding: 24px 20px;
  }

  .custom-wizard-steps {
    padding: 0;
  }

  .step-connector {
    margin: 0 10px;
  }

  .step-description {
    display: none;
  }

  .wizard-footer {
    padding: 0 20px;
  }
}
</style>