From 67a101077ef00654b2531df7a4c16fa2f26bb2da 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:08:23 +0800
Subject: [PATCH] fix: align competitive analysis toolbar layout

---
 .../demand/competitive-environment-analysis.vue  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/views/demand/competitive-environment-analysis.vue b/src/views/demand/competitive-environment-analysis.vue
index 6892db2..b69237e 100644
--- a/src/views/demand/competitive-environment-analysis.vue
+++ b/src/views/demand/competitive-environment-analysis.vue
@@ -2,9 +2,15 @@
   <div class="competitive-analysis-page student-training-shell">
     <main class="analysis-core">
       <section class="task-header"><div class="task-badge"><el-icon><TrendCharts /></el-icon> 核心实训 · 市场洞察与需求分析</div><h1>{{ 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="analysis-workbench">
-        <div class="workbench-head"><TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" /><button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon> 导出实训成果</button></div>
+        <div class="workbench-head">
+          <div>
+            <p class="workbench-eyebrow">MARKET INSIGHT · COMPETITIVE ANALYSIS</p>
+            <h2>{{ trainingSteps[currentStep - 1] || taskTitle }}</h2>
+          </div>
+          <TrainingTaskToolbar class="competitive-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
+        </div>
         <nav class="step-indicator" aria-label="竞争环境分析步骤"><template v-for="(step, index) in trainingSteps" :key="`${index}-${step}`"><button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(index + 1)"><span class="step-marker">{{ String(index + 1).padStart(2, '0') }}</span><span class="step-copy"><strong>{{ step }}</strong><small>{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</small></span></button><i v-if="index < trainingSteps.length - 1" class="step-connector" /></template></nav>
         <section class="step-card">
           <template v-if="currentStep === 1">
@@ -45,14 +51,14 @@
 </template>
 
 <script setup>
-import { Download, RefreshLeft, TrendCharts } from "@element-plus/icons-vue";
+import { RefreshLeft, TrendCharts } from "@element-plus/icons-vue";
 import { checkCompetitiveEnvironmentAnalysisStepOne, checkCompetitiveEnvironmentAnalysisStepTwo, checkCompetitiveEnvironmentAnalysisStepThree, checkCompetitiveEnvironmentAnalysisStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
 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 TASK_KEY = "competitive-environment-analysis";
 const { proxy } = getCurrentInstance();
@@ -99,5 +105,5 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n
 </script>
 
 <style lang="scss" scoped>
-.competitive-analysis-page { display: grid; grid-template-columns: minmax(720px,1fr) 340px; gap: 24px; min-height: calc(100vh - 106px); padding: 24px; color: #e8f7ff; background: #06111d; }.analysis-core { min-width: 0; border: 1px solid rgba(0,180,255,.25); background: rgba(8,18,28,.6); box-shadow: 0 22px 48px rgba(0,0,0,.22); }.task-header { padding: 22px 28px 4px; }.task-badge,.step-title-row p { color: #65dcff; font-weight: 700; }.task-header h1 { margin: 10px 0 0; color: #fff; font-size: 28px; }.analysis-workbench { margin: 24px; padding: 22px; border: 1px solid rgba(33,194,255,.35); border-radius: 20px; background: rgba(1,24,39,.72); }.workbench-head { display: flex; justify-content: flex-end; gap: 12px; }.outline-action,.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #2cc9ff; border-radius: 999px; padding: 10px 18px; color: #dff8ff; background: rgba(8,87,121,.55); cursor: pointer; }.step-indicator { display: flex; align-items: center; gap: 12px; margin: 28px 0; padding: 12px; border: 1px solid rgba(30,190,255,.28); border-radius: 22px; }.step-tab { display: flex; align-items: center; flex: 1; gap: 10px; min-width: 0; padding: 10px; border: 0; border-radius: 16px; color: #96c6d8; background: transparent; text-align: left; cursor: pointer; }.step-tab.active { color: #fff; background: linear-gradient(110deg,#148fc6,#0879aa); }.step-marker { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #4ed7ff; border-radius: 50%; font-weight: 800; }.step-copy { display: grid; gap: 4px; min-width: 0; }.step-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.step-copy small { color: #5ec9ed; }.step-connector { flex: 0 0 25px; height: 2px; background: rgba(83,204,255,.4); }.step-card { padding: 24px; border: 1px solid rgba(31,185,249,.32); border-radius: 18px; background: rgba(1,21,34,.65); }.step-title-row { display: flex; justify-content: space-between; align-items: flex-start; }.step-title-row p { margin: 0; }.step-title-row h2 { margin: 5px 0 0; color: #fff; font-size: 24px; }.step-title-row > span { border: 1px solid #38caff; border-radius: 999px; padding: 7px 12px; color: #9aeaff; }.step-desc { margin: 24px 0; color: #c5e4ef; font-size: 16px; line-height: 1.8; }.research-guide { margin: 22px 0 18px; padding: 16px 18px; border-left: 3px solid #35cfff; color: #c5e4ef; background: rgba(13,95,129,.16); line-height: 1.8; }.research-guide p { margin: 0 0 8px; }.research-guide ol { margin: 0 0 8px; padding-left: 24px; }.research-guide li + li { margin-top: 6px; }.step-warning { margin: 12px 0; color: #ffd58e; }.swot-table-wrap,.strategy-table-wrap,.priority-table-wrap { overflow-x: auto; }.swot-table { width: 100%; min-width: 720px; border-collapse: collapse; }.swot-table th,.swot-table td,.strategy-table th,.strategy-table td,.priority-table th,.priority-table td { border: 1px solid rgba(139,213,241,.45); }.swot-table th,.strategy-table th,.priority-table th { padding: 14px; color: #fff; background: #079ed9; font-size: 16px; }.swot-table th:first-child,.swot-table td:first-child { width: 8%; text-align: center; }.swot-table th:nth-child(2),.dimension-cell { width: 18%; text-align: center; font-weight: 700; }.swot-table textarea,.strategy-table textarea,.priority-table textarea,.risk-grid textarea,.conclusion-textarea { box-sizing: border-box; display: block; width: 100%; min-height: 136px; resize: vertical; border: 0; padding: 16px; color: #e9faff; background: transparent; font: inherit; line-height: 1.7; }.swot-table textarea:focus,.strategy-table textarea:focus,.priority-table textarea:focus,.risk-grid textarea:focus,.conclusion-textarea:focus { outline: 2px solid rgba(57,207,255,.4); outline-offset: -2px; }.swot-table textarea:disabled,.strategy-table textarea:disabled,.priority-table textarea:disabled,.risk-grid textarea:disabled,.conclusion-textarea:disabled { cursor: not-allowed; color: #8aa8b5; background: rgba(255,255,255,.03); }.strategy-table { width: 100%; min-width: 980px; border-collapse: collapse; }.strategy-table th:first-child,.strategy-table .strategy-type { width: 18%; text-align: center; font-weight: 700; }.strategy-table th:nth-child(2) { width: 28%; }.strategy-table .logic-cell { padding: 12px 14px; color: #cdebf5; line-height: 1.7; }.strategy-table .logic-cell p { margin: 0 0 10px; }.strategy-table .logic-cell p:last-child { margin-bottom: 0; }.strategy-table .logic-cell strong { color: #68dcff; font-size: 13px; }.decision-section { margin-top: 30px; padding: 20px; border: 1px solid rgba(66,203,252,.24); border-radius: 14px; background: linear-gradient(130deg,rgba(10,55,79,.32),rgba(2,20,34,.24)); }.decision-section h3 { margin: 0; color: #fff; font-size: 18px; }.decision-section > p { margin: 12px 0 16px; color: #c5e4ef; line-height: 1.7; }.section-tip { color: #82dcfa !important; }.radio-options { display: flex; flex-wrap: wrap; gap: 14px 30px; }.radio-options label { display: inline-flex; align-items: center; gap: 8px; color: #dff6ff; cursor: pointer; }.radio-options input { width: 17px; height: 17px; accent-color: #16bcf0; }.priority-table { width: 100%; min-width: 820px; border-collapse: collapse; }.priority-table th:first-child,.priority-table td:first-child { width: 16%; text-align: center; }.priority-table th:nth-child(2) { width: 42%; }.priority-table select { min-width: 90px; border: 1px solid rgba(102,218,255,.55); border-radius: 6px; padding: 8px 10px; color: #e9faff; background: #09293c; font: inherit; }.priority-strategy { padding: 14px 16px; color: #d9f2fb; line-height: 1.65; }.priority-strategy strong { color: #69dcff; }.priority-strategy p { margin: 7px 0 0; white-space: pre-line; }.priority-table textarea { min-height: 112px; }.risk-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.risk-grid label { display: grid; gap: 10px; color: #e7f8ff; font-weight: 700; }.risk-grid textarea { min-height: 154px; border: 1px solid rgba(139,213,241,.45); background: rgba(0,0,0,.08); }.conclusion-textarea { min-height: 190px; border: 1px solid rgba(139,213,241,.45); background: rgba(0,0,0,.08); }.task-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }.btn-primary { border-color: #36d9ff; background: linear-gradient(110deg,#0eaae4,#0572ac); font-weight: 700; }.btn:disabled { cursor: not-allowed; opacity: .6; }.step-placeholder { padding: 90px 20px; text-align: center; color: #a8cfdd; }.step-placeholder p { color: #fff; font-size: 20px; } @media (max-width:1280px) { .competitive-analysis-page { grid-template-columns: 1fr; }.step-indicator { overflow-x: auto; }.step-tab { min-width: 190px; } } @media (max-width:720px) { .competitive-analysis-page { padding: 12px; }.analysis-workbench { margin: 12px; padding: 14px; }.task-header { padding: 18px; }.workbench-head { justify-content: flex-start; flex-wrap: wrap; }.step-title-row > span { display: none; }.risk-grid { grid-template-columns: 1fr; } }
+.competitive-analysis-page { display: grid; grid-template-columns: minmax(720px,1fr) 340px; gap: 24px; min-height: calc(100vh - 106px); padding: 24px; color: #e8f7ff; background: #06111d; }.analysis-core { min-width: 0; border: 1px solid rgba(0,180,255,.25); background: rgba(8,18,28,.6); box-shadow: 0 22px 48px rgba(0,0,0,.22); }.task-header { padding: 22px 28px 4px; }.task-badge,.step-title-row p { color: #65dcff; font-weight: 700; }.task-header h1 { margin: 10px 0 0; color: #fff; font-size: 28px; }.analysis-workbench { margin: 24px; padding: 22px; border: 1px solid rgba(33,194,255,.35); border-radius: 20px; background: rgba(1,24,39,.72); }.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; }.competitive-toolbar { flex:0 0 auto; justify-content:flex-end; max-width:100%; }.outline-action,.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #2cc9ff; border-radius: 999px; padding: 10px 18px; color: #dff8ff; background: rgba(8,87,121,.55); cursor: pointer; }.step-indicator { display: flex; align-items: center; gap: 12px; margin: 28px 0; padding: 12px; border: 1px solid rgba(30,190,255,.28); border-radius: 22px; }.step-tab { display: flex; align-items: center; flex: 1; gap: 10px; min-width: 0; padding: 10px; border: 0; border-radius: 16px; color: #96c6d8; background: transparent; text-align: left; cursor: pointer; }.step-tab.active { color: #fff; background: linear-gradient(110deg,#148fc6,#0879aa); }.step-marker { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #4ed7ff; border-radius: 50%; font-weight: 800; }.step-copy { display: grid; gap: 4px; min-width: 0; }.step-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.step-copy small { color: #5ec9ed; }.step-connector { flex: 0 0 25px; height: 2px; background: rgba(83,204,255,.4); }.step-card { padding: 24px; border: 1px solid rgba(31,185,249,.32); border-radius: 18px; background: rgba(1,21,34,.65); }.step-title-row { display: flex; justify-content: space-between; align-items: flex-start; }.step-title-row p { margin: 0; }.step-title-row h2 { margin: 5px 0 0; color: #fff; font-size: 24px; }.step-title-row > span { border: 1px solid #38caff; border-radius: 999px; padding: 7px 12px; color: #9aeaff; }.step-desc { margin: 24px 0; color: #c5e4ef; font-size: 16px; line-height: 1.8; }.research-guide { margin: 22px 0 18px; padding: 16px 18px; border-left: 3px solid #35cfff; color: #c5e4ef; background: rgba(13,95,129,.16); line-height: 1.8; }.research-guide p { margin: 0 0 8px; }.research-guide ol { margin: 0 0 8px; padding-left: 24px; }.research-guide li + li { margin-top: 6px; }.step-warning { margin: 12px 0; color: #ffd58e; }.swot-table-wrap,.strategy-table-wrap,.priority-table-wrap { overflow-x: auto; }.swot-table { width: 100%; min-width: 720px; border-collapse: collapse; }.swot-table th,.swot-table td,.strategy-table th,.strategy-table td,.priority-table th,.priority-table td { border: 1px solid rgba(139,213,241,.45); }.swot-table th,.strategy-table th,.priority-table th { padding: 14px; color: #fff; background: #079ed9; font-size: 16px; }.swot-table th:first-child,.swot-table td:first-child { width: 8%; text-align: center; }.swot-table th:nth-child(2),.dimension-cell { width: 18%; text-align: center; font-weight: 700; }.swot-table textarea,.strategy-table textarea,.priority-table textarea,.risk-grid textarea,.conclusion-textarea { box-sizing: border-box; display: block; width: 100%; min-height: 136px; resize: vertical; border: 0; padding: 16px; color: #e9faff; background: transparent; font: inherit; line-height: 1.7; }.swot-table textarea:focus,.strategy-table textarea:focus,.priority-table textarea:focus,.risk-grid textarea:focus,.conclusion-textarea:focus { outline: 2px solid rgba(57,207,255,.4); outline-offset: -2px; }.swot-table textarea:disabled,.strategy-table textarea:disabled,.priority-table textarea:disabled,.risk-grid textarea:disabled,.conclusion-textarea:disabled { cursor: not-allowed; color: #8aa8b5; background: rgba(255,255,255,.03); }.strategy-table { width: 100%; min-width: 980px; border-collapse: collapse; }.strategy-table th:first-child,.strategy-table .strategy-type { width: 18%; text-align: center; font-weight: 700; }.strategy-table th:nth-child(2) { width: 28%; }.strategy-table .logic-cell { padding: 12px 14px; color: #cdebf5; line-height: 1.7; }.strategy-table .logic-cell p { margin: 0 0 10px; }.strategy-table .logic-cell p:last-child { margin-bottom: 0; }.strategy-table .logic-cell strong { color: #68dcff; font-size: 13px; }.decision-section { margin-top: 30px; padding: 20px; border: 1px solid rgba(66,203,252,.24); border-radius: 14px; background: linear-gradient(130deg,rgba(10,55,79,.32),rgba(2,20,34,.24)); }.decision-section h3 { margin: 0; color: #fff; font-size: 18px; }.decision-section > p { margin: 12px 0 16px; color: #c5e4ef; line-height: 1.7; }.section-tip { color: #82dcfa !important; }.radio-options { display: flex; flex-wrap: wrap; gap: 14px 30px; }.radio-options label { display: inline-flex; align-items: center; gap: 8px; color: #dff6ff; cursor: pointer; }.radio-options input { width: 17px; height: 17px; accent-color: #16bcf0; }.priority-table { width: 100%; min-width: 820px; border-collapse: collapse; }.priority-table th:first-child,.priority-table td:first-child { width: 16%; text-align: center; }.priority-table th:nth-child(2) { width: 42%; }.priority-table select { min-width: 90px; border: 1px solid rgba(102,218,255,.55); border-radius: 6px; padding: 8px 10px; color: #e9faff; background: #09293c; font: inherit; }.priority-strategy { padding: 14px 16px; color: #d9f2fb; line-height: 1.65; }.priority-strategy strong { color: #69dcff; }.priority-strategy p { margin: 7px 0 0; white-space: pre-line; }.priority-table textarea { min-height: 112px; }.risk-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.risk-grid label { display: grid; gap: 10px; color: #e7f8ff; font-weight: 700; }.risk-grid textarea { min-height: 154px; border: 1px solid rgba(139,213,241,.45); background: rgba(0,0,0,.08); }.conclusion-textarea { min-height: 190px; border: 1px solid rgba(139,213,241,.45); background: rgba(0,0,0,.08); }.task-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }.btn-primary { border-color: #36d9ff; background: linear-gradient(110deg,#0eaae4,#0572ac); font-weight: 700; }.btn:disabled { cursor: not-allowed; opacity: .6; }.step-placeholder { padding: 90px 20px; text-align: center; color: #a8cfdd; }.step-placeholder p { color: #fff; font-size: 20px; } @media (max-width:1280px) { .competitive-analysis-page { grid-template-columns: 1fr; }.step-indicator { overflow-x: auto; }.step-tab { min-width: 190px; } } @media (max-width:720px) { .competitive-analysis-page { padding: 12px; }.analysis-workbench { margin: 12px; padding: 14px; }.task-header { padding: 18px; }.workbench-head { align-items:flex-start; flex-direction:column; }.competitive-toolbar { width:100%; justify-content:flex-start; }.step-title-row > span { display: none; }.risk-grid { grid-template-columns: 1fr; } }
 </style>