ccdi/docs/plans/frontend/2026-03-20-results-overview-risk-people-merge-frontend-implementation.md

# Results Overview Risk People Merge 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.

**Goal:** 移除结果总览页面中的中高风险人员 TOP10 区块，并在风险人员总览中新增风险等级与命中模型数展示。

**Architecture:** 继续沿用 `PreliminaryCheck.vue` 作为结果总览入口，不新增页面组件层级、不做前端字段拼装。前端只消费 `dashboard + riskPeople` 两类真实接口，删除页面对 `topRiskPeople` 的依赖，并将风险等级标签和命中模型数并入风险人员总览单表。

**Tech Stack:** Vue 2, Element UI, Node.js

---

### Task 1: 先锁定前端接口依赖收口预期

**Files:**
- Modify: `ruoyi-ui/tests/unit/project-overview-api.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js`

- [ ] **Step 1: Write the failing test**

更新 API 与页面集成断言：

- `project-overview-api.test.js` 保留 `getOverviewDashboard`、`getOverviewRiskPeople` 断言，并移除 `getOverviewTopRiskPeople` 与 `/top-risk-people` 依赖
- `preliminary-check-api-integration.test.js` 改为断言 `PreliminaryCheck.vue` 只引用 `getOverviewDashboard`、`getOverviewRiskPeople` 和 `Promise.all`

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-overview-api.test.js
node tests/unit/preliminary-check-api-integration.test.js
```

Expected:

- `FAIL`
- 原因是当前 API 文件和入口页面仍保留 TOP10 请求

- [ ] **Step 3: Commit the test expectation update**

```bash
git add ruoyi-ui/tests/unit/project-overview-api.test.js ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
git commit -m "锁定结果总览页面接口收口预期"
```

### Task 2: 移除页面对 TOP10 接口的依赖

**Files:**
- Modify: `ruoyi-ui/src/api/ccdi/projectOverview.js`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`

- [ ] **Step 1: Update the API module**

删除 `getOverviewTopRiskPeople` 导出，仅保留：

- `getOverviewDashboard`
- `getOverviewRiskPeople`

不要改动两个保留接口的 URL 和调用方式。

- [ ] **Step 2: Update page data loading**

在 `PreliminaryCheck.vue` 中：

- 删除 `getOverviewTopRiskPeople` 的 import
- 将 `Promise.all` 从 3 个请求收口为 2 个请求
- 移除 `topRiskPeopleData` 相关变量
- `hasOverviewData` 仅依据 `dashboardData.stats` 与 `riskPeopleData.overviewList`

- [ ] **Step 3: Update mock and state data**

在 `preliminaryCheck.mock.js` 中：

- 为 `overviewList` 示例数据补齐 `riskLevel`、`riskLevelType`、`modelCount`
- 删除页面展示层对 `topRiskList` 的依赖
- 保持空态、加载态结构可直接复用

- [ ] **Step 4: Run focused frontend tests**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-overview-api.test.js
node tests/unit/preliminary-check-api-integration.test.js
node tests/unit/preliminary-check-states.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/project-overview-api.test.js ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
git commit -m "移除结果总览页面TOP10接口依赖"
```

### Task 3: 将人员区块收口为单表并补充新增列

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

- [ ] **Step 1: Write/update the failing test**

调整静态断言：

- `preliminary-check-summary-and-people.test.js` 去掉对 `中高风险人员TOP10` 的文案断言，增加对 `风险等级`、`命中模型数` 的断言
- `preliminary-check-risk-people-binding.test.js` 去掉 `sectionData.topRiskList` 依赖，改为断言 `overviewList` 同时绑定 `riskCount`、`riskPoint`、`riskLevelType`、`modelCount`

- [ ] **Step 2: Run test to verify it fails**

Run:

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

Expected:

- `FAIL`
- 原因是当前组件仍包含第二个 TOP10 区块

- [ ] **Step 3: Implement the single-table UI**

在 `RiskPeopleSection.vue` 中：

- 删除第二个 `block`
- 在风险人员总览表格中新增 `风险等级` 列，沿用 `el-tag` + `scope.row.riskLevelType`
- 新增 `命中模型数` 列，直接绑定 `modelCount`
- 保留 `疑似违规数`、`核心异常点` 和 `查看详情` 回退逻辑
- 适度调整列宽与块间距，但不要重做整体视觉风格

- [ ] **Step 4: Run focused UI tests**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-layout.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
git commit -m "收口结果总览风险人员展示区块"
```

### Task 4: 做结果总览前端回归并补文档

**Files:**
- Create: `docs/reports/implementation/2026-03-20-results-overview-risk-people-merge-frontend-implementation.md`
- Create: `docs/tests/records/2026-03-20-results-overview-risk-people-merge-frontend-verification.md`
- Verify: `docs/design/2026-03-20-results-overview-risk-people-merge-design.md`

- [ ] **Step 1: Run final regression checks**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-overview-api.test.js
node tests/unit/preliminary-check-api-integration.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-states.test.js
node tests/unit/preliminary-check-layout.test.js
```

Expected:

- `PASS`
- 页面已不再依赖 TOP10 接口和 TOP10 区块

- [ ] **Step 2: Write implementation record**

记录本次前端改动内容：

- 页面移除 TOP10 区块
- 风险人员总览新增风险等级与命中模型数
- 页面请求从三路接口收口为两路接口

- [ ] **Step 3: Write verification record**

记录命令、执行时间、结果与结论，说明未启动额外前端长期进程；如临时启动调试服务，验证结束后需主动停止。

- [ ] **Step 4: Commit**

```bash
git add docs/reports/implementation/2026-03-20-results-overview-risk-people-merge-frontend-implementation.md docs/tests/records/2026-03-20-results-overview-risk-people-merge-frontend-verification.md
git commit -m "补充风险人员总览收口前端实施记录"
```