frontend/src/views/eval/EvalCreateView.vue

@@ -194,9 +194,13 @@ onMounted(loadData)
       <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
-              v-for="(step, index) in WIZARD_STEPS"
-              :key="step.title"
                 class="step-item"
                 :class="{
                   'is-active': currentStep === index,
@@ -204,7 +208,6 @@ onMounted(loadData)
                 }"
                 :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" />
@@ -216,6 +219,7 @@ onMounted(loadData)
                   </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-connector.is-active {
-.step-item.is-completed .step-connector {
   background: #5146e5;
 }