Merge branch 'fix/pricing-toolbar-placement'

src/views/product/price.vue

@@ -11,19 +11,12 @@
         :goals="taskGoals"
         :requirements="taskRequirement"
         :show-material="false"
+        :show-toolbar="false"
       />
 
       <section class="price-workbench">
         <div class="workbench-head workbench-head--actions-only">
-          <div class="workbench-actions">
+          <TrainingTaskToolbar class="pricing-toolbar" :task-key="TASK_KEY" :on-export="exportPriceOutcome" />
-            <TrainingMaterialButton
-              :material-name="taskConfig?.materialName"
-              :material-url="taskConfig?.materialUrl"
-            />
-            <button type="button" class="outline-action" @click="exportPriceOutcome">
-              <el-icon><Download /></el-icon>导出实训成果
-            </button>
-          </div>
         </div>
 
         <nav class="step-indicator" aria-label="新产品定价步骤">
@@ -459,10 +452,9 @@
 </template>
 
 <script setup>
-import { Download } from "@element-plus/icons-vue";
 import { computed, getCurrentInstance, onMounted, reactive, ref } from "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 {
   getStudentTrainingAnswer,
@@ -1607,6 +1599,12 @@ onMounted(async () => {
     margin-left: auto;
   }
 
+  .pricing-toolbar {
+    align-self: center;
+    justify-content: flex-end;
+    max-width: 100%;
+  }
+
   .outline-action {
     display: inline-flex;
     align-items: center;
@@ -2227,6 +2225,11 @@ onMounted(async () => {
     .footer-actions {
       justify-content: flex-end;
     }
+
+    .pricing-toolbar {
+      width: 100%;
+      justify-content: flex-start;
+    }
   }
 }
 /* PSM dark theme */