From d2112564e589bea738e5809161d625b18114f839 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 15:25:35 +0800
Subject: [PATCH] fix: align architecture task toolbar layout

---
 src/views/product/structure.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/views/product/structure.vue b/src/views/product/structure.vue
index aab438b..7b5e2d3 100644
--- a/src/views/product/structure.vue
+++ b/src/views/product/structure.vue
@@ -6,18 +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="task-card">
         <div class="workbench-head">
           <div>
-            <p class="section-eyebrow">智能硬件架构训练</p>
-            <h3>从底层到顶层完成模块化分层</h3>
-          </div>
-          <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>
+            <p class="section-eyebrow">Smart hardware architecture</p>
+            <h3>{{ trainingSteps[currentStep - 1] || '产品架构设计' }}</h3>
           </div>
+          <TrainingTaskToolbar class="architecture-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
         </div>
 
         <nav class="step-indicator" aria-label="产品架构设计步骤">
@@ -158,7 +155,7 @@ import { checkProductArchitectureDesignStepOne, checkProductArchitectureDesignSt
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
-import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
+import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";
 import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { SCENARIO_FIELDS, getCompletedScenarioCount, getRowsForScenarioValidation, getScenarioValidationMessage } from "./productArchitectureScenarioValidation.mjs";
 
@@ -390,4 +387,9 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildAnswer(),
 .flow-workspace{max-width:1000px;margin:0 auto}.flow-caption{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:#71dfff;font-size:12px;font-weight:800}.flow-caption i{flex:1;height:1px;background:linear-gradient(90deg,#167da9,#71dfff)}.flow-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.flow-card{display:grid;grid-template-columns:32px 22px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px 18px;border:1px solid rgba(102,194,232,.42);border-radius:14px;background:linear-gradient(100deg,rgba(21,91,125,.5),rgba(12,39,58,.8));cursor:grab;transition:.2s}.flow-card:hover,.flow-card.dragging{border-color:#6de5ff;box-shadow:0 10px 22px rgba(0,0,0,.22);transform:translateY(-2px)}@media (max-width:720px){.flow-list{grid-template-columns:1fr}.flow-card{grid-template-columns:30px 17px minmax(0,1fr)}.flow-card .move-actions{grid-column:3;grid-template-columns:repeat(2,32px)}}
 .scene-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;color:#d9efff;font-weight:800}.scene-toolbar em{color:#71dfff;font-style:normal;font-size:12px}.scene-toolbar__actions{display:flex;gap:8px}.scenario-table-wrap{overflow:auto;border:1px solid rgba(102,194,232,.42);border-radius:14px;background:rgba(3,22,36,.6)}.scenario-table{width:100%;min-width:1400px;border-collapse:collapse;table-layout:fixed}.scenario-table th{padding:13px 8px;border-right:1px solid rgba(102,194,232,.42);border-bottom:1px solid rgba(102,194,232,.42);color:#dff7ff;background:rgba(14,126,177,.48);font-size:14px;line-height:1.45}.scenario-table th small{color:#9edff5;font-size:12px}.scenario-table td{padding:9px;border-right:1px solid rgba(102,194,232,.28);border-bottom:1px solid rgba(102,194,232,.28);vertical-align:middle}.scenario-table th:first-child,.scenario-table td:first-child{width:52px}.scenario-table th:nth-child(2),.scenario-table td:nth-child(2){width:170px}.scenario-index{color:#71dfff;font-weight:900;text-align:center}.scenario-table :deep(.el-textarea__inner){min-height:82px!important;border:0;border-radius:8px;color:#edfaff;background:rgba(9,51,75,.52);box-shadow:none;line-height:1.55}.scenario-table :deep(.el-textarea__inner::placeholder){color:#91b7c9}.scenario-table tr:last-child td{border-bottom:0}.scenario-table th:last-child,.scenario-table td:last-child{border-right:0}@media (max-width:720px){.scene-toolbar{align-items:flex-start;flex-direction:column}.scene-toolbar__actions{width:100%}.scene-toolbar__actions .btn-nav{flex:1}}
 .architecture-image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.architecture-image-card{min-width:0;padding:16px;border:1px solid rgba(102,194,232,.42);border-radius:16px;background:linear-gradient(145deg,rgba(13,71,98,.55),rgba(3,23,38,.82))}.architecture-image-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px;color:#fff;font-weight:900}.architecture-image-card__head small{color:#7ce4ff;font-size:12px}.architecture-image-trigger{display:grid;place-items:center;align-content:center;gap:7px;min-height:154px;border:1px dashed rgba(105,221,255,.65);border-radius:12px;color:#e8fbff;background:rgba(5,73,104,.22);cursor:pointer;text-align:center;transition:.2s}.architecture-image-trigger:hover{border-color:#77edff;background:rgba(8,122,169,.28)}.architecture-image-trigger input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.architecture-image-trigger .el-icon{font-size:24px;color:#76e5ff}.architecture-image-trigger span{color:#a3d9e9;font-size:12px}.architecture-image-preview{margin:13px 0 0}.architecture-image-preview :deep(.el-image){display:block;width:100%;height:170px;overflow:hidden;border:1px solid rgba(109,229,255,.5);border-radius:10px;background:#fff;cursor:zoom-in}.architecture-image-preview figcaption{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:9px;color:#add8e8;font-size:12px}.architecture-image-preview figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.architecture-image-preview button,.architecture-guide button{border:0;border-radius:7px;padding:5px 9px;color:#fff;background:#0d91c7;font:inherit;cursor:pointer}.architecture-guide{margin-top:24px;padding:18px 22px;border-left:3px solid #27c8ff;border-radius:0 14px 14px 0;color:#c9e8f5;background:rgba(11,79,109,.22);line-height:1.75}.architecture-guide h4{margin:0 0 8px;color:#fff}.architecture-guide ol{margin:0 0 10px;padding-left:20px}.architecture-guide li{margin:5px 0}@media (max-width:1000px){.architecture-image-grid{grid-template-columns:1fr}}
+.architecture-toolbar { flex: 0 0 auto; justify-content: flex-end; max-width: 100%; }
+
+@media (max-width: 720px) {
+  .architecture-toolbar { width: 100%; justify-content: flex-start; }
+}
 </style>