ccdi/docs/plans/frontend/2026-03-27-results-overview-card-merge-frontend-implementation.md

# Results Overview Card Merge Frontend Implementation Plan

> **For agentic workers:** REQUIRED: This repo forbids subagents, so use superpowers:executing-plans in the current session. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 将结果总览页顶部的 `风险仪表盘` 与 `风险人员总览` 合并为一个 `风险总览` 大卡片，并将后续两个主区块标题统一为 `风险模型` 与 `风险明细`，同时补齐统计卡片标题与小图标展示。

**Architecture:** 保持 `PreliminaryCheck.vue` 作为结果总览唯一入口，不新增接口、不重组数据装配。实现只收敛在 `PreliminaryCheck.vue`、`OverviewStats.vue`、`RiskPeopleSection.vue`、`RiskModelSection.vue`、`RiskDetailSection.vue` 五个前端组件与对应静态断言测试中，按“TDD 锁结构 -> 合并总览卡片 -> 统一区块标题 -> 聚焦回归与文档留痕”的顺序推进。

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

---

### Task 1: 锁定结果总览卡片合并与标题统一契约

**Files:**
- Modify: `ruoyi-ui/tests/unit/preliminary-check-layout.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-summary-visuals.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js`

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

更新现有静态断言，锁定以下契约：

- `PreliminaryCheck.vue` 中存在统一的 `风险总览` 容器，例如 `risk-overview-card`
- `OverviewStats` 与 `RiskPeopleSection` 继续存在，但被收进同一个总览容器
- `OverviewStats.vue` 不再包含 `风险仪表盘`、`风险总体数据概览` 文案
- `RiskPeopleSection.vue` 不再把 `风险人员总览` 作为独立大卡片标题
- mock 数据中的最后一个统计卡片文案改为 `无预警人数`
- `RiskModelSection.vue` 顶层标题改为 `风险模型`
- `RiskDetailSection.vue` 顶层标题改为 `风险明细`

示例断言片段：

```js
assert(entry.includes("risk-overview-card"), "结果总览页缺少统一风险总览容器");
assert(entry.includes("风险总览"), "结果总览页缺少风险总览标题");
assert(!stats.includes("风险仪表盘"), "统计区不应继续保留风险仪表盘标题");
assert(mockSource.includes('label: "无预警人数"'), "最后一个统计项应为无预警人数");
assert(model.includes("风险模型"), "第二张主卡片标题应为风险模型");
assert(detail.includes("风险明细"), "第三张主卡片标题应为风险明细");
```

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

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-layout.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-summary-visuals.test.js
node tests/unit/preliminary-check-overview-spacing.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
```

Expected:

- `FAIL`
- 原因是当前页面仍保留 `风险仪表盘` 独立壳层与旧区块标题

- [ ] **Step 3: Commit the contract update**

```bash
git add ruoyi-ui/tests/unit/preliminary-check-layout.test.js ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js ruoyi-ui/tests/unit/preliminary-check-summary-visuals.test.js ruoyi-ui/tests/unit/preliminary-check-overview-spacing.test.js ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
git commit -m "锁定结果总览卡片合并结构断言"
```

### Task 2: 合并风险总览卡片并收掉重复壳层

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

- [ ] **Step 1: Implement the merged overview shell**

在 `PreliminaryCheck.vue` 中：

- 新增统一的 `风险总览` 外层卡片结构
- 先渲染统计区，再渲染风险人员区
- 保持 `currentData.summary`、`currentData.riskPeople` 的传参与现有事件绑定不变

在 `OverviewStats.vue` 中：

- 去掉独立 `section-card`、旧标题组和旧副标题
- 只保留统计卡片栅格内容
- 保留每个统计项的 `icon`、`label`、`value` 与 `tone` 绑定

在 `RiskPeopleSection.vue` 中：

- 去掉自身独立白卡壳层
- 保留导出按钮、表格字段、查看详情事件与风险标签逻辑
- 不重做现有表格列与数据语义

在 `preliminaryCheck.mock.js` 中：

- 将最后一个统计项文案改为 `无预警人数`
- 保持 5 个统计项顺序不变

- [ ] **Step 2: Run focused tests**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-layout.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-summary-visuals.test.js
node tests/unit/preliminary-check-overview-spacing.test.js
node tests/unit/preliminary-check-states.test.js
```

Expected:

- `PASS`

- [ ] **Step 3: If any test fails, fix only within the merged overview scope**

修正原则：

- 不新增接口或额外数据装配
- 不把 `OverviewStats` 与 `RiskPeopleSection` 合并成单个大组件
- 不引入设计文档之外的新区块或新交互

- [ ] **Step 4: Re-run the same focused tests**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-layout.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-summary-visuals.test.js
node tests/unit/preliminary-check-overview-spacing.test.js
node tests/unit/preliminary-check-states.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/OverviewStats.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
git commit -m "合并结果总览顶部风险总览卡片"
```

### Task 3: 统一风险模型与风险明细主卡片标题

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js`

- [ ] **Step 1: Implement title normalization**

在 `RiskModelSection.vue` 中：

- 将第一块主标题改为 `风险模型`
- 下面的子标题与内容区块保持现有语义，不扩功能

在 `RiskDetailSection.vue` 中：

- 将第一块主标题改为 `风险明细`
- 下面的两张子表格块保持现有语义、导出按钮和展示逻辑

- [ ] **Step 2: Run title-related tests**

Run:

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

Expected:

- `PASS`

- [ ] **Step 3: Verify no unintended model/detail behavior changed**

额外人工核对以下内容仍成立：

- 风险模型区的卡片筛选、任意触发 / 同时触发切换、分页与查看详情入口仍在
- 风险明细区的两张表仍保留现有字段、金额格式与操作列

- [ ] **Step 4: Re-run model/detail regression**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-and-detail.test.js
node tests/unit/preliminary-check-model-card-grid.test.js
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js
node tests/unit/preliminary-check-project-analysis-entry.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
git commit -m "统一结果总览模型与明细区块标题"
```

### Task 4: 做前端回归并补充实施记录

**Files:**
- Create: `docs/reports/implementation/2026-03-27-results-overview-card-merge-frontend-record.md`
- Create: `docs/tests/records/2026-03-27-results-overview-card-merge-frontend-verification.md`
- Verify: `docs/design/2026-03-27-results-overview-card-merge-design.md`

- [ ] **Step 1: Run the focused frontend regression suite**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-layout.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-summary-visuals.test.js
node tests/unit/preliminary-check-overview-spacing.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
node tests/unit/preliminary-check-model-card-grid.test.js
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js
node tests/unit/preliminary-check-project-analysis-entry.test.js
node tests/unit/preliminary-check-states.test.js
npm run build:prod
```

Expected:

- 所有 `node` 静态断言 `PASS`
- `npm run build:prod` 成功完成

- [ ] **Step 2: Optional manual page check**

如需人工验证，再执行：

```bash
cd ruoyi-ui
npm run dev
```

人工检查：

- 首屏顶部只保留一个 `风险总览` 大卡片
- 统计小卡片显示图标、标题、数值
- 第二张主卡片标题为 `风险模型`
- 第三张主卡片标题为 `风险明细`

验证结束后必须主动停止前端进程，避免端口残留。

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

在 `docs/tests/records/2026-03-27-results-overview-card-merge-frontend-verification.md` 记录：

- 执行命令
- 执行日期
- 是否进行了 `npm run dev` 人工检查
- 如启动了前端进程，何时停止、如何停止
- 最终验证结论

- [ ] **Step 4: Write the implementation record**

在 `docs/reports/implementation/2026-03-27-results-overview-card-merge-frontend-record.md` 记录：

- 合并 `风险仪表盘` 与 `风险人员总览` 的实现方式
- 统计卡片标题与小图标补齐方式
- `风险模型`、`风险明细` 标题统一情况
- 本轮未改动的边界说明

- [ ] **Step 5: Commit**

```bash
git add docs/reports/implementation/2026-03-27-results-overview-card-merge-frontend-record.md docs/tests/records/2026-03-27-results-overview-card-merge-frontend-verification.md
git commit -m "补充结果总览卡片合并前端实施记录"
```

## Done When

- 顶部 `风险仪表盘` 与 `风险人员总览` 已合并为单个 `风险总览` 主卡片
- 5 个统计卡片均显示标题与小图标，最后一个指标文案为 `无预警人数`
- 第二个主卡片标题为 `风险模型`
- 第三个主卡片标题为 `风险明细`
- 现有数据装配、导出、查看详情、模型联动与风险明细展示行为未被破坏
- 已留下前端实施记录与验证记录