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

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

## 一、目的

将 \产品影响因素分析\ 和 \产品开发流程\ 实训页面的工具栏按钮（素材按钮 + 导出按钮）从 \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\ 的提交功能正常可用
- [ ] 确认删除后\"清空填写\"/\"清空本步\"按钮仍然保留
- [ ] 删除重复的\"提交任务\"按钮代码
- [ ] 测试提交功能是否正常工作

---

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

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

#### 问题描述

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

#### 调整方案

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

#### 具体修改

**当前代码（第19-20行）：**
```html
<section class="task-header">
  ...
  <TrainingTaskToolbar class="diagnosis-toolbar" :task-key="TASK_KEY" :on-submit="submitTask" :on-reset="resetTraining" :on-export="exportTrainingOutcome" />
</section>
```

**修改为：**
```html
<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` 样式，替换为：**
```css
/* 操作工具栏横条：内联布局，去掉悬浮和边框 */
.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断点）：**
```css
@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**
```javascript
import { deleteStudentTrainingAnswer, getStudentTrainingAnswer, saveStudentTrainingAnswer, ... } from "@/api/studentTrainingAnswer";
```

**2. 添加回调方法**
```javascript
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 模板**
```html
<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. 替换导入**
```javascript
// 替换前
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";

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

**2. 添加导入**
```javascript
import { deleteStudentTrainingAnswer, ... } from "@/api/studentTrainingAnswer";
```

**3. 添加回调方法**
```javascript
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. 更新模板**
```html
<!-- 替换前 -->
<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 和按钮样式 |