From 42f2efb449b7e58f7efb6d7231dc00d11897067d Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Mon, 13 Jul 2026 17:12:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=AF=84=E6=B5=8B=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E6=AD=A5=E9=AA=A4=E5=AF=BC=E8=88=AA=E6=9D=A1=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

步骤连接符独立为单独元素并随完成状态高亮，修复窄屏连接线显示。
---
 frontend/src/views/eval/EvalCreateView.vue | 53 +++++++++++-----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/eval/EvalCreateView.vue b/frontend/src/views/eval/EvalCreateView.vue
index 648b35a..e9b2601 100644
--- a/frontend/src/views/eval/EvalCreateView.vue
+++ b/frontend/src/views/eval/EvalCreateView.vue
@@ -194,28 +194,32 @@ onMounted(loadData)
       <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>
+            <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>
-            </div>
+            </template>
           </div>
         </div>
 
@@ -308,14 +312,10 @@ onMounted(loadData)
 
 .step-item {
   display: flex;
-  flex: 1;
+  flex: none;
   align-items: center;
 }
 
-.step-item:first-child {
-  flex: 0;
-}
-
 .step-connector {
   flex: 1;
   height: 2px;
@@ -324,8 +324,7 @@ onMounted(loadData)
   transition: background-color 0.2s ease;
 }
 
-.step-item.is-active .step-connector,
-.step-item.is-completed .step-connector {
+.step-connector.is-active {
   background: #5146e5;
 }