ccdi/docs/plans/frontend/2026-03-20-results-overview-employee-result-table-frontend-implementation.md

# Results Overview Employee Result Table 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:** 在后端切换到结果总览员工结果表出数后，保持结果总览页现有交互、文案和接口消费方式不变，并补充前端回归保护，确保风险仪表盘、风险人员总览、模型区展示持续稳定。

**Architecture:** 前端不新增路由、不新增页面、不调整结果总览现有组件拆分。保持 `PreliminaryCheck.vue`、`RiskPeopleSection.vue`、`RiskModelSection.vue` 继续消费当前接口返回结构，前端工作的重点放在 API/组件契约回归测试与最小必要的归一化兼容，而不是重做 UI 交互。

**Tech Stack:** Vue 2, Element UI, Axios (`@/utils/request`), Node.js

---

### Task 1: 锁定结果总览前端 API 契约不变

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

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

补充 API 静态断言，锁定以下约束：

- 仍使用现有接口路径：
  - `/ccdi/project/overview/dashboard`
  - `/ccdi/project/overview/risk-people`
  - `/ccdi/project/overview/risk-models/cards`
  - `/ccdi/project/overview/risk-models/people`
- 结果总览前端不感知后端底层是否改为结果表
- 模型人员接口仍透传：
  - `projectId`
  - `modelCodes`
  - `matchMode`
  - `keyword`
  - `deptId`
  - `pageNum`
  - `pageSize`

- [ ] **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 契约不变”的预期

- [ ] **Step 3: Write minimal implementation**

如现有 API 封装已经满足约束，则只补测试，不修改源码。

如果测试暴露出接口参数或路径未被稳定消费，再做最小调整，要求：

- 不新增新 API 方法
- 不改变接口名称
- 不改变组件调用方式

- [ ] **Step 4: Run test to verify it passes**

Run:

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

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/tests/unit/project-overview-api.test.js ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js ruoyi-ui/src/api/ccdi/projectOverview.js
git commit -m "锁定结果总览前端接口契约"
```

### Task 2: 锁定结果总览页面展示契约与回归边界

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

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

补充组件回归断言，锁定以下边界：

- 风险仪表盘仍展示：
  - 总人数
  - 高风险
  - 中风险
  - 低风险
  - 无风险人员
- 风险人员总览仍展示：
  - 姓名
  - 身份证号
  - 所属部门
  - 风险等级
  - 命中模型数
  - 核心异常点
- 模型区仍支持：
  - 模型卡片统计
  - `ANY / ALL`
  - 关键字筛选
  - 部门筛选
  - 异常标签展示
- 页面不重新引入已移除的 TOP10 区块

- [ ] **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-model-and-detail.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js
```

Expected:

- `FAIL`
- 原因是测试尚未完整覆盖“后端改为结果表出数后前端展示不变”的场景

- [ ] **Step 3: Write minimal implementation**

优先只改测试。

如果测试发现组件对空数组、字段顺序或字段缺省值存在脆弱依赖，再在以下文件中做最小兼容处理：

- `PreliminaryCheck.vue`
- `RiskPeopleSection.vue`
- `RiskModelSection.vue`

兼容处理原则：

- 只做空值归一化
- 只做字段缺省保护
- 不改变现有交互、布局、文案和样式

- [ ] **Step 4: Run test to verify it passes**

Run:

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

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
git commit -m "补充结果总览前端展示回归保护"
```

### Task 3: 执行结果总览前端专项回归验证

**Files:**
- Create: `docs/reports/implementation/2026-03-20-results-overview-employee-result-table-frontend-implementation.md`
- Create: `docs/tests/records/2026-03-20-results-overview-employee-result-table-frontend-verification.md`
- Verify: `docs/design/2026-03-20-results-overview-employee-result-table-design.md`

- [ ] **Step 1: Run focused frontend regression 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-summary-and-people.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
node tests/unit/preliminary-check-risk-people-binding.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js
```

Expected:

- `PASS`
- 证明结果总览页前端契约与交互边界在后端数据源改造后保持稳定

- [ ] **Step 2: Write implementation and verification records**

实施记录需说明：

- 前端未新增页面和交互
- 前端重点是锁定 API 与展示契约
- 若有源码调整，仅为最小兼容处理

验证记录需写明：

- 执行日期
- 执行命令
- 每条命令结果
- 最终结论

- [ ] **Step 3: Commit**

```bash
git add docs/reports/implementation/2026-03-20-results-overview-employee-result-table-frontend-implementation.md docs/tests/records/2026-03-20-results-overview-employee-result-table-frontend-verification.md
git commit -m "补充结果总览员工结果表前端验证记录"
```