dianshang-qianduan/按钮位置统一调整执行文档.md

按钮位置统一调整执行文档

一、目的

将 \产品影响因素分析\ 和 \产品开发流程\ 实训页面的工具栏按钮（素材按钮 + 导出按钮）从 \workbench-head\ 内移到 \ ask-header\ 同级别的 \ ask-action-strip\ 区域，参考页面 \新产品需求调研\ 的标准布局。

二、参考页面结构

ew-product-survey.vue\ 的标准布局：

\\html

...

...

\\\

---

七、删除下方步骤中重复的"提交任务"按钮

问题描述

顶部 \TrainingTaskToolbar\ 组件已包含"提交任务"按钮，但 Step 4 步骤下方也出现了相同的按钮，导致按钮重复。

调整方案

按钮	位置	操作
"提交任务"	顶部 \TrainingTaskToolbar\	保留
"提交任务"	步骤下方	删除（重复）
"清空填写"/"清空本步"	步骤下方	保留

删除前必须检查的事项

重要：删除按钮前，必须确认该按钮绑定的 \submitTraining\ 方法名是否与顶部组件一致，避免误删导致提交功能失效。

检查清单

1. 确认方法名一致性：

   • 检查步骤内按钮绑定的提交方法名（如 @click="submitTraining"\）
   • 对比 \TrainingTaskToolbar\ 组件内部的提交方法名
   • 两者方法名必须一致才能安全删除重复按钮

2. 检查功能绑定：

   • 确认删除后提交功能的调用链路是否完整
   • 确保顶部组件的提交方法与当前页面的数据状态关联正确

3. 保留清空功能：

   • "清空填写"/"清空本步"按钮不调用提交方法，可以保留

具体修改

\product-development-factors.vue\（第133行附近）

当前代码： \\html

提交任务 清空填写

\\\

修改为： \\html

清空填写

\\\

\product-development-process.vue\（第170行附近）

当前代码： \\html

提交任务 清空本步

\\\

修改为： \\html

清空本步

\\\

调整对照表

文件	位置	操作	保留功能
\product-development-factors.vue\	Step 4 下方 task-actions	删除"提交任务"按钮	"清空填写"按钮
\product-development-process.vue\	Step 4 下方 task-actions	删除"提交任务"按钮	"清空本步"按钮

执行检查清单

• 确认步骤内按钮绑定的 @click="submitTraining"\ 与 \TrainingTaskToolbar\ 组件内的提交方法名一致
• 确认顶部 \TrainingTaskToolbar\ 的提交功能正常可用
• 确认删除后"清空填写"/"清空本步"按钮仍然保留
• 删除重复的"提交任务"按钮代码
• 测试提交功能是否正常工作

---

八、产品发布渠道评估 + 产品问题诊断与迭代 调整

8.1 diagnosis.vue（产品问题诊断与迭代）

问题描述

TrainingTaskToolbar 组件嵌套在 task-header 内，导致工具栏随头部一起有边框和背景，不符合标准布局。

调整方案

将 TrainingTaskToolbar 从 task-header 内移到 task-header 同级的独立 task-action-strip 区域。

具体修改

当前代码（第19-20行）：

<section class="task-header">
  ...
  <TrainingTaskToolbar class="diagnosis-toolbar" :task-key="TASK_KEY" :on-submit="submitTask" :on-reset="resetTraining" :on-export="exportTrainingOutcome" />
</section>

修改为：

<section class="task-header">
  ...
</section>

<section class="task-action-strip">
  <TrainingTaskToolbar :task-key="TASK_KEY" :on-submit="submitTask" :on-reset="resetTraining" :on-export="exportTrainingOutcome" />
</section>

CSS 调整

删除旧的 .diagnosis-toolbar 样式，替换为：

/* 操作工具栏横条：内联布局，去掉悬浮和边框 */
.task-action-strip {
  margin: 0;
  padding: 10px 16px;

  :deep(.training-task-toolbar) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
}

响应式样式更新（720px断点）：

@media (max-width: 720px) {
  .task-action-strip {
    :deep(.training-task-toolbar) { justify-content: stretch; }
    :deep(.training-task-toolbar > *) { flex: 1 1 auto; }
  }
}

调整对照表

文件	修改项	操作
diagnosis.vue	模板结构	将 TrainingTaskToolbar 从 task-header 内移到 task-action-strip
diagnosis.vue	CSS 样式	删除 .diagnosis-toolbar，新增 .task-action-strip

---

8.2 promotion.vue（产品发布渠道评估）

问题描述

TrainingTaskToolbar 已有独立的 task-action-strip 区域，但缺少回调属性，导致点击"提交任务"按钮时无法正确调用页面内的提交方法。

调整方案

添加 :on-submit、on-reset 和 :on-export 回调属性，并实现对应的方法。

具体修改

1. 导入 deleteStudentTrainingAnswer

import { deleteStudentTrainingAnswer, getStudentTrainingAnswer, saveStudentTrainingAnswer, ... } from "@/api/studentTrainingAnswer";

2. 添加回调方法

async function submitTask() { return submitEvaluation(); }
async function resetTraining() {
  if (saving.value || validating.value) return;
  try {
    await deleteStudentTrainingAnswer(TASK_KEY);
    restoreBudget();
    syncStrategyRows();
    restorePerformance();
    restoreEvaluation();
    ElMessage.success("已清空全部实训步骤，可以重新开始");
  } catch (error) {
    ElMessage.error("重新实训失败，请稍后重试");
  }
}
function exportOutcome() { ElMessage.info("导出功能正在开发中"); }

3. 更新 TrainingTaskToolbar 模板

<TrainingTaskToolbar :task-key="TASK_KEY" :on-submit="submitTask" :on-reset="resetTraining" :on-export="exportOutcome" />

调整对照表

文件	修改项	操作
promotion.vue	导入	添加 deleteStudentTrainingAnswer
promotion.vue	方法	添加 submitTask、resetTraining、exportOutcome
promotion.vue	模板	更新 TrainingTaskToolbar 添加回调属性

---

8.3 test/index.vue（产品发布渠道评估）

问题描述

该页面原本使用 TrainingMaterialButton 组件而非标准的 TrainingTaskToolbar，导致缺少"提交任务"、"重新实训"和"导出实训成果"等按钮功能，不符合统一规范。

调整方案

将 TrainingMaterialButton 替换为 TrainingTaskToolbar，并添加对应的回调方法。

具体修改

1. 替换导入

// 替换前
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";

// 替换后
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";

2. 添加导入

import { deleteStudentTrainingAnswer, ... } from "@/api/studentTrainingAnswer";

3. 添加回调方法

async function submitTask() { return validateRankingStep(); }
async function resetTraining() {
  if (saving.value || validating.value) return;
  try {
    await deleteStudentTrainingAnswer(TASK_KEY);
    weightRows.value = defaultWeightRows();
    channelRows.value = defaultChannelRows();
    scoreRows.value = [];
    rankingRows.value = [];
    coreChannelAnalysis.value = "";
    activeStep.value = 1;
    ElMessage.success("已清空全部实训步骤，可以重新开始");
  } catch (error) {
    ElMessage.error("重新实训失败，请稍后重试");
  }
}
function exportOutcome() { ElMessage.info("导出功能正在开发中"); }

4. 更新模板

<!-- 替换前 -->
<section class="task-action-strip">
  <TrainingMaterialButton ... />
</section>

<!-- 替换后 -->
<section class="task-action-strip">
  <TrainingTaskToolbar :task-key="TASK_KEY" :on-submit="submitTask" :on-reset="resetTraining" :on-export="exportOutcome" />
</section>

5. CSS 样式更新

• 移除 .material-button 相关样式
• 更新 .task-action-strip 为 TrainingTaskToolbar 布局样式
• 添加 .task-toolbar-button 和 .task-toolbar-button--submit 按钮样式

调整对照表

文件	修改项	操作
test/index.vue	导入	替换 TrainingMaterialButton 为 TrainingTaskToolbar，添加 deleteStudentTrainingAnswer
test/index.vue	方法	添加 submitTask、resetTraining、exportOutcome
test/index.vue	模板	更新 task-action-strip 使用 TrainingTaskToolbar
test/index.vue	CSS	更新 task-action-strip 和按钮样式