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

## 一、目的

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

## 二、参考页面结构

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

\\\html
<main class=\"xxx-core\">
  <section class=\"task-header\">         <!-- 任务头部信息 + 标题 -->
    ...
  </section>

  <section class=\"task-action-strip\">  <!-- 工具栏操作按钮区 -->
    <TrainingTaskToolbar :task-key=\"TASK_KEY\" :on-export=\"exportOutcome\" />
  </section>

  <section class=\"xxx-workbench\">      <!-- 工作台内容 + 步骤 -->
    ...
  </section>
</main>
\\\

---

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

### 问题描述

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

### 调整方案

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

### 删除前必须检查的事项

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

#### 检查清单

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

2. **检查功能绑定**：
   - 确认删除后提交功能的调用链路是否完整
   - 确保顶部组件的提交方法与当前页面的数据状态关联正确

3. **保留清空功能**：
   - \"清空填写\"/\"清空本步\"按钮不调用提交方法，可以保留

### 具体修改

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

**当前代码：**
\\\html
<div class=\"task-actions\">
  <button type=\"button\" class=\"btn-nav btn-submit\" :disabled=\"saving\" @click=\"submitTraining\">
    提交任务<el-icon><CircleCheck /></el-icon>
  </button>
  <button type=\"button\" class=\"btn-nav\" :disabled=\"saving\" @click=\"resetTraining\">
    清空填写
  </button>
</div>
\\\

**修改为：**
\\\html
<div class=\"task-actions\">
  <button type=\"button\" class=\"btn-nav\" :disabled=\"saving\" @click=\"resetTraining\">
    清空填写
  </button>
</div>
\\\

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

**当前代码：**
\\\html
<div class=\"task-actions\">
  <button type=\"button\" class=\"btn-nav btn-submit\" :disabled=\"checking || !stepThreePassed\" @click=\"submitTraining\">
    提交任务<el-icon><CircleCheck /></el-icon>
  </button>
  <button type=\"button\" class=\"btn-nav\" :disabled=\"checking\" @click=\"resetStepFour\">
    清空本步
  </button>
</div>
\\\

**修改为：**
\\\html
<div class=\"task-actions\">
  <button type=\"button\" class=\"btn-nav\" :disabled=\"checking\" @click=\"resetStepFour\">
    清空本步
  </button>
</div>
\\\

### 调整对照表

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

### 执行检查清单

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