Merge branch 'fix/differentiation-toolbar-layout'

src/views/product/differentiation.vue

@@ -9,17 +9,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 workbench-head--actions-only">
-          <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>
+        <div class="workbench-head">
+          <div>
+            <p class="section-eyebrow">Value proposition positioning</p>
+            <h3>{{ activeStepName || taskTitle }}</h3>
           </div>
+          <TrainingTaskToolbar class="product-positioning-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
         </div>
 
         <nav v-if="configuredSteps.length" class="step-indicator" aria-label="产品价值主张及定位步骤">
@@ -255,7 +253,7 @@
 import { computed, getCurrentInstance, onMounted, ref } from "vue";
 import { ArrowLeft, ArrowRight, CircleCheck, Download, Operation, UploadFilled } 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 { getTrainingTaskByKey } from "@/api/trainingTask";
 import { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, checkProductValuePositioningStepThree, checkProductValuePositioningStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
@@ -753,6 +751,12 @@ async function handleValueCanvasUpload(event) {
   flex-shrink: 0;
 }
 
+.product-positioning-toolbar {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  max-width: 100%;
+}
+
 .outline-action,
 .btn-nav {
   display: inline-flex;
@@ -1389,6 +1393,7 @@ async function handleValueCanvasUpload(event) {
   .outline-action,
   .btn-nav,
   .training-actions :deep(.training-action) { width: 100%; }
+  .product-positioning-toolbar { width: 100%; justify-content: flex-start; }
   .step-indicator {
     align-items: stretch;
     flex-direction: column;