Merge branch 'fix/supplier-step-header-layout'

src/views/channel/supplier.vue

@@ -8,7 +8,6 @@
           <h1>{{ taskTitle }}</h1>
           <p>分别从试产与量产场景评估供应渠道，形成可执行的采购与风险管理建议。</p>
         </div>
-        <TrainingTaskToolbar class="supplier-toolbar" :task-key="TASK_KEY" />
       </header>
 
       <TrainingTaskBrief
@@ -19,6 +18,14 @@
         :show-toolbar="false"
       />
 
+      <header class="step-workbench-header">
+        <div>
+          <p class="eyebrow">SUPPLIER CHANNEL EVALUATION</p>
+          <h2>{{ currentStepTitle }}</h2>
+        </div>
+        <TrainingTaskToolbar class="supplier-toolbar" :task-key="TASK_KEY" />
+      </header>
+
       <nav class="step-nav" aria-label="供应渠道评估步骤">
         <button :class="['step-tab', { active: currentStep === 1, complete: currentStep > 1 }]" :aria-current="currentStep === 1 ? 'step' : undefined" @click="currentStep = 1">
           <span class="step-marker">01</span><span class="step-copy"><b>设置评估权重</b><small>{{ currentStep === 1 ? '当前步骤 →' : '点击切换 →' }}</small></span>
@@ -35,8 +42,6 @@
 
       <template v-if="currentStep === 1">
         <section class="intro-card">
-          <p class="step-caption">Step 01</p>
-          <h2>设置两种采购场景的评估权重</h2>
           <p>试产更关注交付周期和采购灵活性；量产更关注采购成本和品质可靠性。每个场景的权重合计必须为 100%。</p>
         </section>
 
@@ -81,8 +86,6 @@
 
       <template v-else-if="currentStep === 2">
         <section class="intro-card compact">
-          <p class="step-caption">Step 02</p>
-          <h2>为供应渠道评分并比较结果</h2>
           <p>每项评分为 0–10 分，渠道名称和评分均由学生填写；系统会按第一步已保存的权重自动计算加权总分。</p>
         </section>
 
@@ -117,8 +120,6 @@
 
       <template v-else>
         <section class="intro-card compact">
-          <p class="step-caption">Step 03</p>
-          <h2>渠道优选、采购建议与供应风险</h2>
           <p>最优和次优渠道由第二步的加权评分自动排名生成，学生需要分析差异、形成采购建议，并完成供应风险评估。</p>
         </section>
 
@@ -226,6 +227,11 @@ const currentStudyTip = computed(() => {
   };
   return tips[currentStep.value] || tips[1];
 });
+const currentStepTitle = computed(() => ({
+  1: "设置两种采购场景的评估权重",
+  2: "为供应渠道评分并比较结果",
+  3: "渠道优选、采购建议与供应风险",
+})[currentStep.value] || "供应渠道评估");
 const progressItems = computed(() => [
   { text: "设置评估权重", status: stepOneSaved.value ? "done" : currentStep.value === 1 ? "doing" : "" },
   { text: "渠道评分与对比", status: stepTwoSaved.value ? "done" : currentStep.value === 2 ? "doing" : "" },
@@ -528,6 +534,7 @@ onMounted(async () => {
 .supplier-page .training-core { box-sizing: border-box; min-width: 0; width: 100%; margin: 0; padding: 28px; border: 1px solid rgba(0, 180, 255, .25); border-radius: 36px; background: rgba(8, 18, 28, .6); box-shadow: inset 0 1px 0 rgba(169, 229, 255, .08), 0 22px 48px rgba(0, 0, 0, .22); }
 .supplier-page .workspace-shell { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
 .workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.supplier-toolbar { align-self: center; justify-content: flex-end; max-width: 100%; }
+.step-workbench-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 24px 0 18px; padding: 0 0 18px; border-bottom: 1px solid rgba(0, 180, 255, .2); }.step-workbench-header h2 { margin: 5px 0 0; color: #fff; font-size: 24px; font-weight: 800; line-height: 1.3; }
 .eyebrow, .step-caption { margin: 0 0 7px; color: #63dcff; font-weight: 700; letter-spacing: .1em; }
 .workspace-header h1, .intro-card h2 { margin: 0; color: #fff; }.workspace-header h1 { margin-top: 12px; font-size: 30px; font-weight: 900; line-height: 1.3; }
 .workspace-header p:not(.eyebrow), .intro-card > p:last-child { margin: 10px 0 0; color: #9db4c4; line-height: 1.75; }
@@ -560,7 +567,7 @@ onMounted(async () => {
 .analysis-panel + .analysis-panel { margin-top: 20px; }.ranking-table { min-width: 940px; }.ranking-table th:first-child { width: 18%; }.ranking-table th:nth-child(2), .ranking-table th:nth-child(3) { width: 19%; }.scene-name { color: #71dcfb !important; font-weight: 700; }.rank-result { display: flex; flex-direction: column; gap: 5px; }.rank-result strong { color: #f3fbff; }.rank-result span { color: #62cef1; font-size: 13px; }
 .recommendation-card { margin-top: 20px; }.recommendation-card label { display: block; margin-bottom: 9px; color: #e7f5fb; font-weight: 700; }.recommendation-card :deep(.el-textarea__inner) { min-height: 130px !important; color: #e7f6fd; background: rgba(2, 15, 24, .7); box-shadow: 0 0 0 1px #315f75 inset; }
 .risk-heading { align-items: flex-end; }.row-actions { display: flex; gap: 10px; }.panel-tip { margin: -4px 0 16px; color: #9db8c6; line-height: 1.7; }.risk-table { min-width: 1080px; }.risk-table th:nth-child(1) { width: 15%; }.risk-table th:nth-child(2) { width: 29%; }.risk-table th:nth-child(3) { width: 16%; }.risk-table :deep(.el-select) { width: 100%; }.default-risk-row :deep(.el-input__inner), .default-risk-row :deep(.el-textarea__inner), .default-risk-row :deep(.el-select__selected-item) { color: #b7cbd6; font-style: italic; }
-@media (max-width: 980px) { .weights-grid { grid-template-columns: 1fr; }.step-nav { grid-template-columns: 1fr; gap: 8px; }.step-nav i { display: none; }.workspace-header { flex-direction: column; }.supplier-toolbar { width: 100%; justify-content: flex-start; }.risk-heading { align-items: flex-start; flex-direction: column; }.split-actions { gap: 12px; }.supplier-page { padding: 12px; }.workspace-shell { padding: 16px; } }
+@media (max-width: 980px) { .weights-grid { grid-template-columns: 1fr; }.step-nav { grid-template-columns: 1fr; gap: 8px; }.step-nav i { display: none; }.workspace-header,.step-workbench-header { flex-direction: column; }.supplier-toolbar { width: 100%; justify-content: flex-start; }.risk-heading { align-items: flex-start; flex-direction: column; }.split-actions { gap: 12px; }.supplier-page { padding: 12px; }.workspace-shell { padding: 16px; } }
 .step-tab.active { background: linear-gradient(115deg, rgba(4, 109, 155, 0.78), rgba(5, 62, 102, 0.64)); }
 .step-connector { position: relative; height: 2px; overflow: visible; background: rgba(86, 198, 235, .48); }
 .step-connector::after { position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; border-top: 1px solid #73b1ce; border-right: 1px solid #73b1ce; content: ''; transform: translateY(-50%) rotate(45deg); }