Merge branch 'fix/market-opportunity-toolbar-layout'

src/views/product/market-opportunity-selection.vue

@@ -2,9 +2,15 @@
   <div class="opportunity-page student-training-shell">
     <main class="opportunity-core">
       <header class="task-header"><span>产品规划与设计 · MARKET SIGNALS</span><h1>{{ taskTitle }}</h1></header>
-      <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="workbench">
-        <div class="workbench-actions"><TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" /><button class="btn" type="button" @click="exportOutcome"><el-icon><Download /></el-icon> 导出实训成果</button></div>
+        <div class="workbench-head">
+          <div>
+            <p class="workbench-eyebrow">PRODUCT PLANNING · MARKET SIGNALS</p>
+            <h2>{{ trainingSteps[currentStep - 1] || taskTitle }}</h2>
+          </div>
+          <TrainingTaskToolbar class="market-opportunity-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
+        </div>
         <nav class="step-indicator" aria-label="市场机会识别与选品步骤"><template v-for="(step, index) in trainingSteps" :key="step"><button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(index + 1)"><b>{{ String(index + 1).padStart(2, '0') }}</b><span><strong>{{ step }}</strong><small>{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</small></span></button><i v-if="index < trainingSteps.length - 1" /></template></nav>
         <section class="step-card">
           <template v-if="currentStep === 1">
@@ -67,14 +73,14 @@
 
 <script setup>
 import * as XLSX from "xlsx";
-import { Download, RefreshLeft, UploadFilled } from "@element-plus/icons-vue";
+import { RefreshLeft, UploadFilled } from "@element-plus/icons-vue";
 import { checkMarketOpportunitySelectionStepOne, checkMarketOpportunitySelectionStepTwo, checkMarketOpportunitySelectionStepThree, checkMarketOpportunitySelectionStepFour, checkMarketOpportunitySelectionStepFive, checkMarketOpportunitySelectionStepSix, deleteStudentTrainingAnswer, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import { isStudentDemo } from "@/utils/studentDemo";
 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 TASK_KEY = "market-opportunity-selection";
 const SCORE_CALCULATION_GUIDE_URL = "/file/training-materials/market-opportunity-selection/6.综合得分计算操作说明.docx";
@@ -190,5 +196,9 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ taskName: tas
 .visual-guide { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:22px; }.visual-guide .download-stack { align-content:center; }.visual-guide .download-stack .btn { border-radius:8px; }
 .insight-table th:first-child { width:18%; }.insight-table th:nth-child(2) { width:16%; }.insight-table th:nth-child(3),.insight-table th:nth-child(4) { width:33%; }.insight-table td { padding:12px; vertical-align:top; }.insight-table td:first-child { vertical-align:middle; }.insight-table input { display:inline-block; width:105px; margin:0; text-align:center; }.insight-table .percent { margin-left:7px; color:#78d9f7; }.insight-table textarea { display:block; box-sizing:border-box; width:100%; min-height:106px; resize:vertical; border:1px solid rgba(115,220,255,.58); border-radius:7px; padding:10px 12px; color:#e9faff; background:#09293c; font:inherit; line-height:1.65; }.insight-table textarea::placeholder { color:#77a8bc; }.insight-guide { margin-top:24px; padding:18px 22px; border-left:3px solid #31d1ff; color:#c9e9f4; background:rgba(8,78,108,.18); line-height:1.75; }.insight-guide h3 { margin:0 0 7px; color:#fff; font-size:16px; }.insight-guide p { margin:5px 0; }
 .conclusion-field { display:grid; gap:10px; }.conclusion-field label { color:#d9f5ff; font-weight:800; }.conclusion-field textarea { box-sizing:border-box; width:100%; min-height:280px; resize:vertical; border:1px solid rgba(115,220,255,.58); border-radius:12px; padding:16px 18px; color:#e9faff; background:linear-gradient(135deg,rgba(9,41,60,.96),rgba(2,27,43,.84)); font:inherit; font-size:16px; line-height:1.8; }.conclusion-field textarea::placeholder { color:#77a8bc; }
-@media (max-width:720px) { .visual-guide { grid-template-columns:1fr; } }
+.workbench-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid rgba(0,180,255,.2); }
+.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; }
+.market-opportunity-toolbar { flex:0 0 auto; justify-content:flex-end; max-width:100%; }
+@media (max-width:720px) { .visual-guide { grid-template-columns:1fr; }.workbench-head { align-items:flex-start; flex-direction:column; }.market-opportunity-toolbar { width:100%; justify-content:flex-start; } }
 </style>