ccdi/docs/plans/frontend/2026-03-30-project-detail-risk-people-export-frontend-implementation.md

# Project Detail Risk People Export Frontend Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
>
> **Repo note:** 本仓库 `AGENTS.md` 明确禁止开启 subagent，执行本计划时请在当前会话使用 `superpowers:executing-plans`。

**Goal:** 为项目详情“结果总览 -> 风险总览”人员列表的“导出”按钮接通真实下载动作，让前端按当前项目导出全部风险人员，同时不影响现有分页和“查看项目”行为。

**Architecture:** 前端继续使用 `PreliminaryCheck.vue -> RiskPeopleSection.vue` 现有结构，不新增导出弹窗、导出状态管理或 API 封装层。实现采用仓库现成的 `this.download(...)` 模式，直接在 `RiskPeopleSection.vue` 中根据 `projectId` 触发 `/ccdi/project/overview/risk-people/export` 下载，保持改动集中在结果总览人员组件和静态结构回归测试中。

**Tech Stack:** Vue 2, Element UI, SCSS, 若依前端 `download` 插件, Node `assert` 结构测试

---

### Task 1: 锁定风险人员导出按钮的前端契约

**Files:**
- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js`
- Create: `ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js`

- [ ] **Step 1: 先写失败测试，锁定导出方法、下载路径和文件名**

```javascript
[
  "handleRiskPeopleExport",
  "this.download(",
  "ccdi/project/overview/risk-people/export",
  "projectId: this.projectId",
  "风险人员总览_",
].forEach((token) => assert(source.includes(token), token));
```

```javascript
assert(source.includes("@click=\"handleRiskPeopleExport\""), "导出按钮必须绑定导出事件");
```

- [ ] **Step 2: 运行前端结构测试，确认当前按钮还只是静态文案**

Run:

```bash
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
```

Expected:

- FAIL，提示缺少 `handleRiskPeopleExport`
- FAIL，提示“导出”按钮尚未绑定 `@click`

- [ ] **Step 3: 提交当前失败测试基线到工作区，不提交 Git**

工作区保持红灯，继续下一任务实现，不要在此步提前提交。

### Task 2: 在 `RiskPeopleSection.vue` 中接通最短路径导出

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js`

- [ ] **Step 1: 写最小实现，只在组件内接通下载**

```vue
<el-button size="mini" type="text" @click="handleRiskPeopleExport">导出</el-button>
```

```javascript
handleRiskPeopleExport() {
  if (!this.projectId) {
    return;
  }
  this.download(
    "ccdi/project/overview/risk-people/export",
    {
      projectId: this.projectId,
    },
    `风险人员总览_${this.projectId}_${new Date().getTime()}.xlsx`
  );
},
```

- [ ] **Step 2: 保持现有分页与查看项目逻辑不变**

重点确认实现时不要改动：

- `loadRiskPeoplePage`
- `handlePageChange`
- `handleViewProject`
- `sectionData -> localRows` 的 watch 逻辑

- [ ] **Step 3: 跑前端结构回归测试**

Run:

```bash
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js
node ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
```

Expected:

- PASS
- 导出按钮已接通
- 分页与“查看项目”相关断言不受影响

- [ ] **Step 4: 提交本任务**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue \
  ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js \
  ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js \
  ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js \
  ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
git commit -m "接通风险总览人员列表前端导出"
```

### Task 3: 补齐前端验证记录与实施留痕

**Files:**
- Create: `docs/reports/implementation/2026-03-30-project-detail-risk-people-export-frontend-record.md`
- Create: `docs/tests/records/2026-03-30-project-detail-risk-people-export-frontend-verification.md`
- Verify: `docs/design/2026-03-30-project-detail-risk-people-export-design.md`

- [ ] **Step 1: 跑本次前端最小回归集**

Run:

```bash
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js
node ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
```

Expected:

- PASS

- [ ] **Step 2: 记录测试结果**

在 `docs/tests/records/2026-03-30-project-detail-risk-people-export-frontend-verification.md` 记录：

- 执行命令
- 通过情况
- 按钮下载路径
- 分页与查看项目未受影响的结论

- [ ] **Step 3: 记录实施内容**

在 `docs/reports/implementation/2026-03-30-project-detail-risk-people-export-frontend-record.md` 记录：

- 为什么直接使用 `this.download(...)`
- 为什么不额外新增 `projectOverview.js` 导出封装
- 本次只修改 `RiskPeopleSection.vue`
- 文件名和下载参数口径

- [ ] **Step 4: 提交本任务**

```bash
git add docs/reports/implementation/2026-03-30-project-detail-risk-people-export-frontend-record.md \
  docs/tests/records/2026-03-30-project-detail-risk-people-export-frontend-verification.md
git commit -m "补充风险总览人员导出前端记录"
```

### 最终验证

- [ ] 运行前端回归：

```bash
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js
node ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
```

- [ ] 确认以下结果：
  - `RiskPeopleSection.vue` 的“导出”按钮已接通真实下载动作
  - 下载参数仅包含 `projectId`
  - 当前分页不会影响导出范围
  - “查看项目”和分页逻辑仍正常

- [ ] 准备执行时，只暂存本次任务相关前端文件后再提交