From b6b7dbda317422dd557a4f76f682cffe741117da 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:23:49 +0800
Subject: [PATCH] fix: align after-sales task toolbar layout

---
 src/views/product/after-sales-service.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/views/product/after-sales-service.vue b/src/views/product/after-sales-service.vue
index 80f69ae..1788916 100644
--- a/src/views/product/after-sales-service.vue
+++ b/src/views/product/after-sales-service.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">After-sales diagnostic routing</p>
-            <h2>售后故障类型分类</h2>
-          </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">After-sales service design</p>
+            <h2>{{ trainingSteps[currentStep - 1] || '售后服务流程设计' }}</h2>
           </div>
+          <TrainingTaskToolbar class="after-sales-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
         </div>
 
         <nav class="step-indicator" aria-label="售后服务流程设计步骤">
@@ -193,9 +190,9 @@
 
 <script setup>
 import { computed, defineComponent, getCurrentInstance, h, onMounted, ref } from "vue";
-import { ArrowLeft, ArrowRight, Download, RefreshLeft, Service } from "@element-plus/icons-vue";
+import { ArrowLeft, ArrowRight, RefreshLeft, Service } from "@element-plus/icons-vue";
 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 { checkAfterSalesServiceStepOne, checkAfterSalesServiceStepTwo, checkAfterSalesServiceStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
@@ -458,4 +455,9 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ currentStep:
 .fault-select-label { grid-column: 2; justify-content: flex-start; white-space: nowrap; }
 .fault-select-label span { white-space: nowrap; }
 .fault-select-label select { width: 126px; max-width: none; flex: 0 0 126px; }
+.after-sales-toolbar { flex: 0 0 auto; justify-content: flex-end; max-width: 100%; }
+
+@media (max-width: 720px) {
+  .after-sales-toolbar { width: 100%; justify-content: flex-start; }
+}
 </style>