Merge branch 'fix/comprehensive-toolbar-layout'

src/views/training/GenericTrainingPage.vue

@@ -6,24 +6,20 @@
         <h1 class="task-title">{{ page.title }}</h1>
       </section>
 
-      <TrainingTaskBrief :background="page.background" :goals="page.goals" :requirements="page.requirements" :show-material="false" />
+      <TrainingTaskBrief :background="page.background" :goals="page.goals" :requirements="page.requirements" :show-toolbar="false" />
 
       <section class="task-card">
-        <div class="workbench-head workbench-head--actions-only">
-        <div class="workbench-actions">
-          <el-button
-            class="material-download"
-            :plain="!page.material?.url"
-            @click="handleMaterialDownload"
-          >
-            <el-icon><Download /></el-icon>
-            {{ page.material?.name || "案例文档" }}
-          </el-button>
-          <el-button class="outline-action" @click="exportOutcome">
-            <el-icon><Download /></el-icon>
-            导出实训成果
-          </el-button>
-        </div>
+        <div class="workbench-head">
+          <div>
+            <p class="workbench-eyebrow">COMPREHENSIVE TRAINING · WORKFLOW</p>
+            <h2>{{ activeStepName || page.title }}</h2>
+          </div>
+          <TrainingTaskToolbar
+            class="comprehensive-training-toolbar"
+            :material-name="page.material?.name"
+            :material-url="page.material?.url"
+            :on-export="exportOutcome"
+          />
         </div>
 
         <nav v-if="isComprehensiveTurnNavigation" class="comprehensive-turn-nav" aria-label="实训步骤">
@@ -414,12 +410,13 @@
 </template>
 
 <script setup>
-import { Download, Upload } from "@element-plus/icons-vue";
+import { Upload } from "@element-plus/icons-vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { getStudentTrainingPage } from "./studentTrainingPages";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
+import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";
 import { isStudentDemo } from "@/utils/studentDemo";
 
 const route = useRoute();
@@ -1536,24 +1533,6 @@ function submitTask() {
   return saveAnswer("SUBMIT");
 }
 
-function handleMaterialDownload() {
-  const material = page.value.material;
-  if (!material?.url) {
-    proxy?.$modal?.msgWarning?.("暂无案例文档");
-    return;
-  }
-  const link = document.createElement("a");
-  link.href = material.url;
-  link.target = "_blank";
-  link.rel = "noopener";
-  if (material.name) {
-    link.download = material.name;
-  }
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
-
 async function resetTraining() {
   form.value = buildInitialForm();
   workRows.value = buildInitialRows();
@@ -1755,6 +1734,7 @@ function exportOutcome() {
   padding-bottom: 18px;
   border-bottom: 1px solid rgba(0, 180, 255, 0.2);
 
+  h2,
   h3 {
     margin: 4px 0 8px;
     color: #ffffff;
@@ -1772,6 +1752,21 @@ function exportOutcome() {
   }
 }
 
+.workbench-eyebrow {
+  margin: 0 0 6px !important;
+  color: #59dcff !important;
+  font-size: 12px !important;
+  font-weight: 800 !important;
+  letter-spacing: 0.1em;
+  line-height: 1.4 !important;
+}
+
+.comprehensive-training-toolbar {
+  flex: 0 0 auto;
+  max-width: 100%;
+  justify-content: flex-end;
+}
+
 .workbench-actions {
   display: flex;
   flex: 0 0 auto;
@@ -2540,6 +2535,11 @@ function exportOutcome() {
     flex-direction: column;
   }
 
+  .comprehensive-training-toolbar {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .form-grid {
     grid-template-columns: 1fr;
   }
@@ -2643,13 +2643,6 @@ function exportOutcome() {
 
 }
 
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
-}
-
 .comprehensive-step-card {
   margin-top: 32px;
   padding: 22px;