Merge branch 'fix/diagnosis-toolbar-placement'

src/views/assessment/diagnosis.vue

@@ -2,9 +2,9 @@
   <div class="diagnosis-page student-training-shell">
     <main class="diagnosis-core">
       <section class="task-header"><span>核心实训 · 产品上线与运营推广</span><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="workbench">
-        <div class="workbench-top"><div><p>产品问题诊断与迭代</p><h2>{{ currentStep === 1 ? '全链路转化漏斗诊断' : currentStep === 2 ? '用户评论根因分析' : 'AB 测试验证方案' }}</h2></div><TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" /></div>
+        <div class="workbench-top"><div><p>产品问题诊断与迭代</p><h2>{{ currentStep === 1 ? '全链路转化漏斗诊断' : currentStep === 2 ? '用户评论根因分析' : 'AB 测试验证方案' }}</h2></div><TrainingTaskToolbar class="diagnosis-toolbar" :task-key="TASK_KEY" /></div>
         <nav class="step-tabs" aria-label="产品问题诊断步骤"><button type="button" :class="['step-tab', { active: currentStep === 1, complete: currentStep > 1 }]" :aria-current="currentStep === 1 ? 'step' : undefined" @click="currentStep = 1"><span class="step-marker">01</span><span class="step-copy"><b>全链路漏斗诊断</b><small>{{ currentStep === 1 ? '当前步骤 →' : '点击切换 →' }}</small></span></button><span class="step-connector" aria-hidden="true" /><button type="button" :class="['step-tab', { active: currentStep === 2, complete: currentStep > 2 }]" :aria-current="currentStep === 2 ? 'step' : undefined" @click="currentStep = 2"><span class="step-marker">02</span><span class="step-copy"><b>用户评论根因分析</b><small>{{ currentStep === 2 ? '当前步骤 →' : '点击切换 →' }}</small></span></button><span class="step-connector" aria-hidden="true" /><button type="button" :class="['step-tab', { active: currentStep === 3 }]" :aria-current="currentStep === 3 ? 'step' : undefined" @click="currentStep = 3"><span class="step-marker">03</span><span class="step-copy"><b>AB测试验证</b><small>{{ currentStep === 3 ? '当前步骤 →' : '点击切换 →' }}</small></span></button></nav>
 
         <template v-if="currentStep === 1">
@@ -47,7 +47,7 @@ import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref
 import * as echarts from "echarts";
 import "echarts-wordcloud";
 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 { getTrainingTaskByKey } from "@/api/trainingTask";
 import { analyzeProductDiagnosisIterationStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile, validateProductDiagnosisIterationStepOne, validateProductDiagnosisIterationStepTwo, validateProductDiagnosisIterationStepThree } from "@/api/studentTrainingAnswer";
@@ -127,4 +127,6 @@ onMounted(async () => { try { taskConfig.value = (await getTrainingTaskByKey(TAS
 .workbench .step-tabs .step-connector::after{width:8px;height:8px;border-color:#73c8e7}
 .sentiment-table td:last-child{white-space:nowrap}.sentiment-table td:last-child :deep(.el-input-number){display:inline-flex;width:calc(100% - 32px);vertical-align:middle}.sentiment-table td:last-child .unit{display:inline-flex;align-items:center;height:32px;margin-left:6px;vertical-align:middle}
 @media(max-width:1100px){.diagnosis-page{grid-template-columns:1fr}}@media(max-width:720px){.diagnosis-page{padding:12px}.diagnosis-core{padding:16px;border-radius:20px}.workbench{padding:16px}.workbench-top,.table-toolbar,.sentiment-actions{align-items:stretch;flex-direction:column}.step-tabs{align-items:stretch;flex-direction:column}.step-tabs button{flex:0 0 auto;width:100%}.step-tabs i{flex:0 0 12px;width:2px;height:12px;margin-left:17px}.diagnosis-materials__item,.ab-materials{align-items:stretch;flex-direction:column}.top-issues>div{grid-template-columns:1fr}.chart-preview{align-items:flex-start;flex-direction:column}.chart-preview :deep(.el-image){width:100%;height:170px}}
+.diagnosis-toolbar{align-self:center;justify-content:flex-end;max-width:100%}
+@media(max-width:720px){.diagnosis-toolbar{width:100%;justify-content:flex-start}}
 </style>