From 20e3c06fa5ff06151348f54a53d950f2cedc74e2 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 14:27:45 +0800
Subject: [PATCH] fix: relocate promotion task toolbar

---
 src/views/test/promotion.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/test/promotion.vue b/src/views/test/promotion.vue
index 508ebbc..8370b2e 100644
--- a/src/views/test/promotion.vue
+++ b/src/views/test/promotion.vue
@@ -6,7 +6,7 @@
         <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="task-card promotion-phase">
         <header class="workbench-head">
@@ -14,7 +14,7 @@
             <p class="section-eyebrow">STEP {{ String(activeStep).padStart(2, "0") }}</p>
             <h2>{{ stepTitle }}</h2>
           </div>
-          <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
+          <TrainingTaskToolbar class="promotion-toolbar" :task-key="TASK_KEY" />
         </header>
 
         <nav class="step-tabs" aria-label="投放效果评估与优化步骤">
@@ -172,7 +172,7 @@ import { computed, onMounted, ref } from "vue";
 import { ArrowRight, Document, Minus, Plus } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 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 { getStudentTrainingAnswer, saveStudentTrainingAnswer, validatePromotionEffectOptimizationStepOne, validatePromotionEffectOptimizationStepTwo, validatePromotionEffectOptimizationStepThree, validatePromotionEffectOptimizationStepFour } from "@/api/studentTrainingAnswer";
@@ -275,7 +275,8 @@ onMounted(async () => { try { const result = await getTrainingTaskByKey(TASK_KEY
 </script>
 
 <style scoped lang="scss">
-.promotion-page{display:grid;grid-template-columns:minmax(720px,1fr) 340px;gap:24px;min-height:calc(100vh - 76px);padding:24px;color:#eef5ff;background:#06111d}.training-core{min-width:0;padding:28px;border:1px solid rgba(0,180,255,.25);border-radius:30px;background:rgba(8,18,28,.6)}.task-header{margin-bottom:24px}.task-badge{display:inline-flex;gap:8px;align-items:center;padding:5px 14px;border:1px solid rgba(99,217,255,.55);border-radius:999px;color:#dff5ff;background:rgba(17,126,178,.36);font-size:12px;font-weight:700}.task-header h1{margin:12px 0 0;color:#fff;font-size:30px}.task-card{margin-top:28px;padding:24px;border:1px solid rgba(82,174,226,.42);border-radius:24px;background:rgba(0,25,42,.64)}.workbench-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(0,180,255,.2)}.section-eyebrow{margin:0;color:#71dfff;font-size:12px;font-weight:800}.workbench-head h2{margin:4px 0 0;color:#fff;font-size:24px}.step-tabs{display:flex;gap:10px;margin:20px 0}.step-tabs button{min-height:36px;padding:0 15px;border:1px solid rgba(99,183,222,.42);border-radius:8px;color:#a8cde0;background:rgba(3,27,43,.56);font:inherit;font-size:13px;font-weight:800;cursor:pointer}.step-tabs button.active{border-color:#48d5ff;color:#fff;background:rgba(9,125,177,.7)}.budget-form,.strategy-form,.performance-form{padding-top:4px}.total-budget-field,.roi-inputs{display:flex;align-items:center;gap:12px;color:#effaff;font-size:17px;font-weight:800}.total-budget-field :deep(.el-input-number){width:250px}.total-budget-field em{font-style:normal}.lead{margin:22px 0;color:#d6ecf8;font-size:16px;line-height:1.9}.table-actions{display:flex;justify-content:flex-end;gap:12px;margin:0 0 16px}.table-actions :deep(.el-button){min-width:110px;height:42px;font-weight:800}.table-wrap,.strategy-table-wrap,.performance-table-wrap{overflow-x:auto;border:1px solid rgba(99,183,222,.46);border-radius:14px}.budget-table,.strategy-table,.reference-table,.performance-table{width:100%;border-collapse:collapse}.budget-table{min-width:1300px}.strategy-table{min-width:860px}.performance-table{min-width:1080px}.budget-table th,.budget-table td,.strategy-table th,.strategy-table td,.reference-table th,.reference-table td,.performance-table th,.performance-table td{padding:12px;border-right:1px solid rgba(99,183,222,.35);border-bottom:1px solid rgba(99,183,222,.35);vertical-align:middle}.budget-table th,.strategy-table th,.reference-table th,.performance-table th{white-space:nowrap;color:#effaff;background:#0c9dd6;font-size:14px}.budget-table td,.strategy-table td,.reference-table td,.performance-table td{min-width:170px;background:rgba(2,21,34,.58)}.budget-table td:first-child,.budget-table td:nth-child(2){min-width:155px}.budget-table :deep(.el-select),.budget-table :deep(.el-input-number),.strategy-table :deep(.el-select),.performance-table :deep(.el-input-number){width:100%}.budget-table :deep(.el-input__wrapper),.strategy-table :deep(.el-input__wrapper),.performance-table :deep(.el-input__wrapper){box-shadow:0 0 0 1px rgba(111,190,225,.3) inset;background:#102233}.budget-table :deep(.el-input__inner),.strategy-table :deep(.el-input__inner),.performance-table :deep(.el-input__inner){color:#fff}.computed-money{color:#7ce4ff;text-align:right;font-variant-numeric:tabular-nums;font-weight:900}.budget-table tfoot th,.budget-table tfoot td{border-bottom:0;background:rgba(7,49,72,.74)}.budget-table tfoot td{color:#b7dfed;text-align:center;font-weight:800}.budget-table .total-error{color:#ff9898}.table-note{font-size:12px;font-weight:400}.strategy-table th:first-child{min-width:116px}.strategy-table td{min-width:240px}.strategy-table small{display:block;margin-top:8px;color:#8cb7cb;font-size:12px;text-align:right}.empty-row{text-align:center;color:#95b2c3}.hint{margin:18px 0 0;color:#95b2c3;line-height:1.85}.source-warning{margin:14px 0 0;color:#ffb6a2}.strategy-reference{margin-top:22px;border:1px solid rgba(99,183,222,.35);border-radius:12px;padding:0 14px;background:rgba(7,49,72,.26)}.strategy-reference :deep(.el-collapse){border:0}.strategy-reference :deep(.el-collapse-item__header){height:50px;border:0;color:#dff5ff;background:transparent;font-weight:800}.strategy-reference :deep(.el-collapse-item__wrap){border:0;background:transparent}.reference-table-wrap{overflow-x:auto;margin-bottom:14px;border:1px solid rgba(99,183,222,.35);border-radius:8px}.reference-table{min-width:780px}.reference-table td:first-child{min-width:520px;line-height:1.65}.roi-baseline{padding:18px;margin-top:18px;border:1px solid rgba(99,183,222,.36);border-radius:14px;background:rgba(8,42,64,.36)}.subsection-title{color:#fff;font-size:18px;font-weight:900}.roi-baseline p,.performance-data>p{color:#c8e5f1;line-height:1.75}.roi-inputs{flex-wrap:wrap;justify-content:space-between;padding:14px 0}.roi-inputs label{display:flex;align-items:center;gap:10px}.roi-inputs :deep(.el-input-number){width:150px}.roi-inputs label>span{color:#97bdce;font-size:13px}.formula-note{margin-bottom:0}.performance-data{margin-top:28px}.performance-table th:first-child{min-width:110px}.performance-table .total-row th,.performance-table .total-row td{background:rgba(7,78,108,.55);font-weight:800}.footer-actions{display:flex;justify-content:center;gap:16px;margin-top:30px}.footer-actions :deep(.el-button){min-width:156px;height:44px;font-weight:800}.footer-actions :deep(.el-button .el-icon){margin-left:5px}@media (max-width:1100px){.promotion-page{grid-template-columns:1fr}}@media (max-width:720px){.promotion-page{padding:14px}.training-core{padding:18px}.task-card{padding:18px}.workbench-head,.total-budget-field,.roi-inputs,.table-actions,.footer-actions{align-items:stretch;flex-direction:column}.total-budget-field :deep(.el-input-number),.roi-inputs :deep(.el-input-number),.table-actions :deep(.el-button),.footer-actions :deep(.el-button){width:100%}}
+.promotion-page{display:grid;grid-template-columns:minmax(720px,1fr) 340px;gap:24px;min-height:calc(100vh - 76px);padding:24px;color:#eef5ff;background:#06111d}.training-core{min-width:0;padding:28px;border:1px solid rgba(0,180,255,.25);border-radius:30px;background:rgba(8,18,28,.6)}.task-header{margin-bottom:24px}.task-badge{display:inline-flex;gap:8px;align-items:center;padding:5px 14px;border:1px solid rgba(99,217,255,.55);border-radius:999px;color:#dff5ff;background:rgba(17,126,178,.36);font-size:12px;font-weight:700}.task-header h1{margin:12px 0 0;color:#fff;font-size:30px}.task-card{margin-top:28px;padding:24px;border:1px solid rgba(82,174,226,.42);border-radius:24px;background:rgba(0,25,42,.64)}.workbench-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(0,180,255,.2)}.promotion-toolbar{align-self:center;justify-content:flex-end;max-width:100%}.section-eyebrow{margin:0;color:#71dfff;font-size:12px;font-weight:800}.workbench-head h2{margin:4px 0 0;color:#fff;font-size:24px}.step-tabs{display:flex;gap:10px;margin:20px 0}.step-tabs button{min-height:36px;padding:0 15px;border:1px solid rgba(99,183,222,.42);border-radius:8px;color:#a8cde0;background:rgba(3,27,43,.56);font:inherit;font-size:13px;font-weight:800;cursor:pointer}.step-tabs button.active{border-color:#48d5ff;color:#fff;background:rgba(9,125,177,.7)}.budget-form,.strategy-form,.performance-form{padding-top:4px}.total-budget-field,.roi-inputs{display:flex;align-items:center;gap:12px;color:#effaff;font-size:17px;font-weight:800}.total-budget-field :deep(.el-input-number){width:250px}.total-budget-field em{font-style:normal}.lead{margin:22px 0;color:#d6ecf8;font-size:16px;line-height:1.9}.table-actions{display:flex;justify-content:flex-end;gap:12px;margin:0 0 16px}.table-actions :deep(.el-button){min-width:110px;height:42px;font-weight:800}.table-wrap,.strategy-table-wrap,.performance-table-wrap{overflow-x:auto;border:1px solid rgba(99,183,222,.46);border-radius:14px}.budget-table,.strategy-table,.reference-table,.performance-table{width:100%;border-collapse:collapse}.budget-table{min-width:1300px}.strategy-table{min-width:860px}.performance-table{min-width:1080px}.budget-table th,.budget-table td,.strategy-table th,.strategy-table td,.reference-table th,.reference-table td,.performance-table th,.performance-table td{padding:12px;border-right:1px solid rgba(99,183,222,.35);border-bottom:1px solid rgba(99,183,222,.35);vertical-align:middle}.budget-table th,.strategy-table th,.reference-table th,.performance-table th{white-space:nowrap;color:#effaff;background:#0c9dd6;font-size:14px}.budget-table td,.strategy-table td,.reference-table td,.performance-table td{min-width:170px;background:rgba(2,21,34,.58)}.budget-table td:first-child,.budget-table td:nth-child(2){min-width:155px}.budget-table :deep(.el-select),.budget-table :deep(.el-input-number),.strategy-table :deep(.el-select),.performance-table :deep(.el-input-number){width:100%}.budget-table :deep(.el-input__wrapper),.strategy-table :deep(.el-input__wrapper),.performance-table :deep(.el-input__wrapper){box-shadow:0 0 0 1px rgba(111,190,225,.3) inset;background:#102233}.budget-table :deep(.el-input__inner),.strategy-table :deep(.el-input__inner),.performance-table :deep(.el-input__inner){color:#fff}.computed-money{color:#7ce4ff;text-align:right;font-variant-numeric:tabular-nums;font-weight:900}.budget-table tfoot th,.budget-table tfoot td{border-bottom:0;background:rgba(7,49,72,.74)}.budget-table tfoot td{color:#b7df5d;text-align:center;font-weight:800}.budget-table .total-error{color:#ff9898}.table-note{font-size:12px;font-weight:400}.strategy-table th:first-child{min-width:116px}.strategy-table td{min-width:240px}.strategy-table small{display:block;margin-top:8px;color:#8cb7cb;font-size:12px;text-align:right}.empty-row{text-align:center;color:#95b2c3}.hint{margin:18px 0 0;color:#95b2c3;line-height:1.85}.source-warning{margin:14px 0 0;color:#ffb6a2}.strategy-reference{margin-top:22px;border:1px solid rgba(99,183,222,.35);border-radius:12px;padding:0 14px;background:rgba(7,49,72,.26)}.strategy-reference :deep(.el-collapse){border:0}.strategy-reference :deep(.el-collapse-item__header){height:50px;border:0;color:#dff5ff;background:transparent;font-weight:800}.strategy-reference :deep(.el-collapse-item__wrap){border:0;background:transparent}.reference-table-wrap{overflow-x:auto;margin-bottom:14px;border:1px solid rgba(99,183,222,.35);border-radius:8px}.reference-table{min-width:780px}.reference-table td:first-child{min-width:520px;line-height:1.65}.roi-baseline{padding:18px;margin-top:18px;border:1px solid rgba(99,183,222,.36);border-radius:14px;background:rgba(8,42,64,.36)}.subsection-title{color:#fff;font-size:18px;font-weight:900}.roi-baseline p,.performance-data>p{color:#c8e5f1;line-height:1.75}.roi-inputs{flex-wrap:wrap;justify-content:space-between;padding:14px 0}.roi-inputs label{display:flex;align-items:center;gap:10px}.roi-inputs :deep(.el-input-number){width:150px}.roi-inputs label>span{color:#97bdce;font-size:13px}.formula-note{margin-bottom:0}.performance-data{margin-top:28px}.performance-table th:first-child{min-width:110px}.performance-table .total-row th,.performance-table .total-row td{background:rgba(7,78,108,.55);font-weight:800}.footer-actions{display:flex;justify-content:center;gap:16px;margin-top:30px}.footer-actions :deep(.el-button){min-width:156px;height:44px;font-weight:800}.footer-actions :deep(.el-button .el-icon){margin-left:5px}@media (max-width:1100px){.promotion-page{grid-template-columns:1fr}}@media (max-width:720px){.promotion-page{padding:14px}.training-core{padding:18px}.task-card{padding:18px}.workbench-head,.total-budget-field,.roi-inputs,.table-actions,.footer-actions{align-items:stretch;flex-direction:column}.promotion-toolbar{width:100%;justify-content:flex-start}.total-budget-field :deep(.el-input-number),.roi-inputs :deep(.el-input-number),.table-actions :deep(.el-button),.footer-actions :deep(.el-button){width:100%}}
+.budget-table tfoot td{color:#b7dfed}
 /* 统一为标准实训页步骤条：编号圆点、状态说明和连接箭头。 */
 .step-tabs{display:flex;align-items:center;gap:8px;margin:20px 0 28px;padding:18px 22px;overflow-x:auto;border:1px solid rgba(0,180,255,.3);border-radius:22px;background:rgba(1,18,31,.62)}.step-tabs .step-tab{display:flex;flex:1 1 0;align-items:center;min-width:145px;min-height:66px;gap:10px;padding:8px 12px;border:1px solid rgba(68,141,177,.35);border-radius:12px;color:#9ab3d0;background:rgba(3,27,43,.52);font:inherit;text-align:left;cursor:pointer;transition:.2s ease}.step-tabs .step-tab:hover{border-color:rgba(89,223,255,.82);color:#fff;background:rgba(8,92,131,.52);transform:translateY(-1px)}.step-tabs .step-tab:focus-visible{outline:2px solid #72e8ff;outline-offset:3px}.step-tabs .step-marker{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border:1px solid rgba(101,176,208,.6);border-radius:50%;color:#a6c4d9;background:rgba(3,25,40,.8);font-size:12px;font-weight:900}.step-tabs .step-copy{display:grid;min-width:0;gap:4px}.step-tabs .step-copy b{overflow:hidden;font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.step-tabs .step-copy small{color:#66b6d4;font-size:10px;font-weight:800;letter-spacing:.06em}.step-tabs .step-tab.active{border-color:#53d8fb;color:#fff;background:linear-gradient(135deg,rgba(7,156,207,.85),rgba(13,105,161,.92));box-shadow:inset 0 0 24px rgba(77,213,255,.22)}.step-tabs .step-tab.active .step-marker{border-color:#72e8ff;color:#fff;background:linear-gradient(135deg,#08b7e8,#1375d0);box-shadow:0 0 0 5px rgba(25,179,237,.14),0 0 18px rgba(46,208,255,.58)}.step-tabs .step-tab.complete{color:#dffbff}.step-tabs .step-tab.complete .step-marker{border-color:rgba(84,230,221,.85);color:#062b37;background:#6ef0e1}.step-tabs .step-connector{position:relative;flex:0 0 24px;height:2px;background:rgba(86,198,235,.48)}.step-tabs .step-connector::after{position:absolute;top:50%;right:0;width:7px;height:7px;border-top:1px solid #73b1ce;border-right:1px solid #73b1ce;content:'';transform:translateY(-50%) rotate(45deg)}
 @media(max-width:720px){.step-tabs{align-items:stretch;flex-direction:column;padding:14px}.step-tabs .step-tab{flex:0 0 auto;width:100%}.step-tabs .step-connector{flex:0 0 18px;width:2px;height:18px;margin-left:18px}.step-tabs .step-connector::after{top:auto;right:auto;bottom:0;left:50%;transform:translateX(-50%) rotate(135deg)}}