From 03d4c9fbd83cca0e99d3304d40b15b3813cb5f52 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Mon, 13 Jul 2026 10:31:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=84=E6=B5=8B=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=88=86=E6=AD=A5=E5=90=91=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

任务配置与评测规则拆分为两个独立步骤，新增步骤导航条与下一步/返回流程，逐步校验任务配置后再进入规则设置，提交时仅校验规则项。
---
 frontend/src/views/eval/EvalCreateView.vue | 276 ++++++++++++++++++---
 1 file changed, 235 insertions(+), 41 deletions(-)

diff --git a/frontend/src/views/eval/EvalCreateView.vue b/frontend/src/views/eval/EvalCreateView.vue
index 216fd70..648b35a 100644
--- a/frontend/src/views/eval/EvalCreateView.vue
+++ b/frontend/src/views/eval/EvalCreateView.vue
@@ -16,9 +16,15 @@ 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[]>([])
@@ -131,10 +137,9 @@ async function resolveDimensionId() {
 
 async function handleSubmit() {
   if (loading.value || submitting.value) return
-  const taskValid = await taskStepRef.value?.validate()
   const ruleValid = await ruleStepRef.value?.validate()
-  if (!taskValid || !ruleValid) {
-    ElMessage.warning('请检查并完善所有必填项')
+  if (!ruleValid) {
+    ElMessage.warning('请检查并完善评测规则')
     return
   }
 
@@ -161,6 +166,21 @@ async function handleSubmit() {
   }
 }
 
+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()
 }
@@ -170,10 +190,38 @@ onMounted(loadData)
 
 <template>
   <PageCard title="新建评测任务" subtitle="完成任务配置与评测规则设置后启动评测">
-    <div v-loading="loading" class="form-container">
-      <div class="section-card">
-        <div class="section-title">任务基本配置</div>
+    <div class="create-wizard-layout">
+      <main v-loading="loading" class="wizard-main">
+        <div class="wizard-steps-container" aria-label="评测任务创建步骤">
+          <div class="custom-wizard-steps">
+            <div
+              v-for="(step, index) in WIZARD_STEPS"
+              :key="step.title"
+              class="step-item"
+              :class="{
+                'is-active': currentStep === index,
+                'is-completed': currentStep > index,
+              }"
+              :aria-current="currentStep === index ? 'step' : undefined"
+            >
+              <div v-if="index !== 0" class="step-connector"></div>
+              <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>
+          </div>
+        </div>
+
+        <div class="wizard-content">
         <EvalTaskSetupStep
+          v-if="currentStep === 0"
           ref="taskStepRef"
           v-model="taskForm"
           :trained-models="trainedModels"
@@ -182,11 +230,8 @@ onMounted(loadData)
           :loading="loading"
           :disabled="submitting"
         />
-      </div>
-
-      <div class="section-card">
-        <div class="section-title">评测规则设置</div>
         <EvalRuleSetupStep
+          v-else
           ref="ruleStepRef"
           v-model="ruleForm"
           :dimensions="dimensions"
@@ -194,52 +239,201 @@ onMounted(loadData)
           :loading="loading"
           :disabled="submitting"
         />
-      </div>
-    </div>
+        </div>
+      </main>
 
-    <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>
+      <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>
-.form-container {
+.create-wizard-layout {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  min-height: 620px;
+  margin: -20px;
+  background: #fff;
 }
 
-.section-card {
-  padding: 24px;
-  border-radius: 8px;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
+.wizard-main {
+  flex: 1;
+  padding: 32px;
 }
 
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #111827;
-  margin-bottom: 24px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #e5e7eb;
+.wizard-steps-container {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px dashed #e2e8f0;
 }
 
-.form-footer {
+.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: 1;
+  align-items: center;
+}
+
+.step-item:first-child {
+  flex: 0;
+}
+
+.step-connector {
+  flex: 1;
+  height: 2px;
+  margin: 0 20px;
+  background: #e2e8f0;
+  transition: background-color 0.2s ease;
+}
+
+.step-item.is-active .step-connector,
+.step-item.is-completed .step-connector {
+  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;
-  margin-top: 32px;
-  padding-top: 24px;
-  border-top: 1px solid #e5e7eb;
+  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>