From 3ed78f36f58b9193e17d7ecfcca2b10791a80fe7 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:27:15 +0800
Subject: [PATCH] fix: align product process toolbar layout

---
 .../foundation/product-development-process.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/views/foundation/product-development-process.vue b/src/views/foundation/product-development-process.vue
index f6d736b..1b5fc38 100644
--- a/src/views/foundation/product-development-process.vue
+++ b/src/views/foundation/product-development-process.vue
@@ -6,14 +6,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="process-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 · PROCESS</p>
+            <h2>{{ trainingSteps[currentStep - 1] || taskTitle }}</h2>
           </div>
+          <TrainingTaskToolbar class="product-process-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
         </div>
 
         <nav v-if="trainingSteps.length" class="step-indicator" aria-label="产品开发主要流程步骤">
@@ -172,8 +173,8 @@ import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 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 userStore = useUserStore();
@@ -634,7 +635,10 @@ function exportOutcome() {
 .step-warning { margin: 0 0 16px; padding: 10px 14px; border: 1px solid rgba(255, 173, 93, .62); border-radius: 10px; color: #ffd19f; background: rgba(187, 102, 27, .16); }.schedule-table { min-width: 1020px; }.schedule-table .stage-cell { width: 7%; }.schedule-table .task-no-cell { width: 7%; }.schedule-table .task-cell { width: 18%; }.classification-cell { width: 12%; color: #eafaff; font-weight: 800; text-align: center; }.schedule-table th:nth-child(5), .schedule-table td:nth-child(5), .schedule-table th:nth-child(6), .schedule-table td:nth-child(6) { width: 18%; }.schedule-table .dependency-input { min-width: 0; }.schedule-table .dependency-input::placeholder { color: rgba(168, 220, 233, .68); opacity: 1; }.schedule-table th:nth-child(7), .schedule-table td:nth-child(7) { width: 20%; }.schedule-table input:disabled { cursor: not-allowed; opacity: .6; }
 .gantt-upload-panel { display: grid; justify-items: center; gap: 22px; min-height: 320px; padding: 32px 16px; border: 1px dashed rgba(71, 204, 255, .55); border-radius: 18px; background: radial-gradient(circle at center, rgba(15, 119, 163, .16), transparent 55%); }.gantt-upload-trigger { display: grid; place-items: center; align-content: center; gap: 9px; width: 280px; height: 138px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #0ba6e0, #0877ad); cursor: pointer; box-shadow: 0 14px 30px rgba(5, 126, 180, .24); }.gantt-upload-trigger input { position: absolute; width: 1px; height: 1px; opacity: 0; }.gantt-upload-trigger .el-icon { font-size: 26px; }.gantt-upload-trigger span { color: #cbefff; font-size: 12px; }.gantt-upload-trigger.disabled { cursor: not-allowed; opacity: .55; }.gantt-preview { width: min(100%, 760px); margin: 0; text-align: center; }.gantt-preview img { display: block; width: 100%; max-height: 410px; object-fit: contain; border: 1px solid rgba(84, 211, 255, .5); border-radius: 12px; background: #fff; cursor: zoom-in; }.gantt-preview figcaption { margin-top: 8px; color: #a8dce9; font-size: 13px; }.gantt-guide { margin-top: 26px; padding: 18px 22px; border-left: 3px solid #23c4ff; border-radius: 0 14px 14px 0; color: #d4edf6; background: rgba(12, 75, 104, .22); }.gantt-guide h4 { margin: 0 0 14px; color: #fff; }.gantt-guide ol { margin: 0; padding-left: 20px; }.gantt-guide li { margin: 11px 0; line-height: 1.7; }.gantt-guide button { margin-left: 12px; border: 0; border-radius: 6px; padding: 5px 10px; color: #fff; background: #109ed4; cursor: pointer; }
 .process-reflection { display: grid; gap: 28px; }.reflection-field { display: grid; gap: 12px; color: #d8edf4; font-size: 16px; line-height: 1.7; }.reflection-field span { color: #f1fbff; font-weight: 600; }.reflection-field textarea { min-height: 190px; resize: vertical; padding: 14px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 14px; color: #eef5ff; background: #0f1a24; font: inherit; line-height: 1.7; }.reflection-field textarea:focus { outline: 0; border-color: rgba(92, 224, 255, .7); box-shadow: 0 0 0 3px rgba(0, 174, 255, .13); }.reflection-field textarea:disabled { cursor: not-allowed; opacity: .55; }.reflection-question { color: #f1fbff; font-size: 16px; font-weight: 600; line-height: 1.8; }.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }.scenario-grid .reflection-field textarea { min-height: 180px; }.process-reflection.disabled { opacity: .72; }
+.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-process-toolbar { flex:0 0 auto; justify-content:flex-end; max-width:100%; }
 
 @media (max-width: 1100px) { .product-process { grid-template-columns: 1fr; } }
-@media (max-width: 900px) { .product-process { padding: 14px 14px 18px; }.process-core { padding: 18px; border-radius: 24px; }.workbench-head, .workbench-actions, .task-actions, .step-indicator, .step-title-row { flex-direction: column; align-items: stretch; }.workbench-actions :deep(.material-download), .outline-action { width: 100%; }.step-indicator { width: 100%; margin: 0 0 32px; padding: 16px; overflow-x: visible; border-radius: 20px; }.step-tab { flex: 0 0 auto; width: 100%; min-width: 0; }.step-connector { flex: 0 0 20px; align-self: flex-start; width: 2px; min-width: 0; height: 20px; margin: 4px 0 4px 18px; }.step-connector::after { top: auto; right: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }.step-chip { display: none; }.scenario-grid { grid-template-columns: 1fr; gap: 18px; }.task-actions { gap: 14px; }.btn-nav { width: 100%; } }
+@media (max-width: 900px) { .product-process { padding: 14px 14px 18px; }.process-core { padding: 18px; border-radius: 24px; }.workbench-head, .workbench-actions, .task-actions, .step-indicator, .step-title-row { flex-direction: column; align-items: stretch; }.product-process-toolbar { width:100%; justify-content:flex-start; }.workbench-actions :deep(.material-download), .outline-action { width: 100%; }.step-indicator { width: 100%; margin: 0 0 32px; padding: 16px; overflow-x: visible; border-radius: 20px; }.step-tab { flex: 0 0 auto; width: 100%; min-width: 0; }.step-connector { flex: 0 0 20px; align-self: flex-start; width: 2px; min-width: 0; height: 20px; margin: 4px 0 4px 18px; }.step-connector::after { top: auto; right: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }.step-chip { display: none; }.scenario-grid { grid-template-columns: 1fr; gap: 18px; }.task-actions { gap: 14px; }.btn-nav { width: 100%; } }
 </style>