From 3c815e6d2752fbc2d5ec80dc3e4aed19913cd0cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=B2=85?= <907037276@qq.com>
Date: Mon, 31 Aug 2026 16:34:40 +0800
Subject: [PATCH] fix: align product factors toolbar layout

---
 .../product-development-factors.vue           | 47 +++++++++++++------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/views/foundation/product-development-factors.vue b/src/views/foundation/product-development-factors.vue
index 3b77b40..596ea9b 100644
--- a/src/views/foundation/product-development-factors.vue
+++ b/src/views/foundation/product-development-factors.vue
@@ -9,17 +9,15 @@
         <h1 class="task-title">{{ taskTitle }}</h1>
       </section>
 
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
+      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" :show-toolbar="false" />
 
       <section class="factors-workbench">
-      <div class="workbench-head workbench-head--actions-only">
-          <div class="workbench-actions">
-            <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
-            <button type="button" class="outline-action" @click="exportOutcome">
-              <el-icon><Download /></el-icon>
-              导出实训成果
-            </button>
+      <div class="workbench-head">
+          <div>
+            <p class="workbench-eyebrow">PRODUCT DEVELOPMENT · KEY FACTORS</p>
+            <h2>{{ trainingSteps[currentStep] || taskTitle }}</h2>
           </div>
+          <TrainingTaskToolbar class="product-factors-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
         </div>
 
         <nav v-if="trainingSteps.length" class="step-indicator" aria-label="实训步骤">
@@ -137,14 +135,14 @@
 </template>
 
 <script setup>
-import { Download, Operation, RefreshLeft } from "@element-plus/icons-vue";
+import { Operation, RefreshLeft } from "@element-plus/icons-vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import { checkProductDevelopmentFactorsStepOne, checkProductDevelopmentFactorsStepTwo, checkProductDevelopmentFactorsStepThree, checkProductDevelopmentFactorsStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
 import useUserStore from "@/store/modules/user";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
-import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
 import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
+import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";
 
 const { proxy } = getCurrentInstance();
 const TASK_KEY = "product-development-factors";
@@ -1078,10 +1076,31 @@ function exportOutcome() {
   }
 
 }
-.workbench-head--actions-only {
+.workbench-eyebrow {
+  margin: 0 0 6px;
+  color: #59dcff;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .1em;
+}
+
+.workbench-head h2 {
+  margin: 0;
+  color: #fff;
+  font-size: 25px;
+  line-height: 1.25;
+}
+
+.product-factors-toolbar {
+  flex: 0 0 auto;
   justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+  max-width: 100%;
+}
+
+@media (max-width: 900px) {
+  .product-factors-toolbar {
+    width: 100%;
+    justify-content: flex-start;
+  }
 }
 </style>