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

# 结果总览卡片结构合并前端实施记录

**日期**: 2026-03-27

## 本次改动

- 将结果总览页顶部原本分离的 `风险仪表盘` 与 `风险人员总览` 收拢为同一个 `风险总览` 主卡片。
- 保留 `OverviewStats.vue` 与 `RiskPeopleSection.vue` 两个子组件职责，仅移除重复壳层和重复标题。
- 将第二张主卡片标题统一为 `风险模型`。
- 将第三张主卡片标题统一为 `风险明细`。
- 将顶部统计卡片最后一项文案统一为 `无预警人数`。

## 变更文件

- `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/RiskModelSection.vue`
- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
- `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
- `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-summary-actions.test.js`
- `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js`
- `ruoyi-ui/tests/unit/preliminary-check-card-corners.test.js`

## 实现说明

### 1. 风险总览主卡片

- 在 `PreliminaryCheck.vue` 中新增统一的 `risk-overview-card` 外层容器。
- `OverviewStats` 放在上半部分，`RiskPeopleSection` 放在下半部分，形成单卡片阅读流。
- 顶部主标题统一为 `风险总览`，副标题用于说明当前卡片覆盖统计与人员总览两类信息。

### 2. 统计区瘦身

- `OverviewStats.vue` 不再承担独立白卡和标题壳层职责。
- 统计区仅保留 5 个统计小卡片的展示逻辑，继续复用 `icon`、`label`、`value`、`tone` 字段。

### 3. 风险人员区收口

- `RiskPeopleSection.vue` 去掉独立标题块，只保留导出按钮与表格内容。
- 通过顶部留白和分割线让其自然成为 `风险总览` 卡片的下半部分。
- 表格字段、查看详情事件和核心异常标签逻辑保持不变。

### 4. 其他主区块标题统一

- `RiskModelSection.vue` 顶部主标题统一为 `风险模型`。
- `RiskDetailSection.vue` 顶部主标题统一为 `风险明细`。
- 模型区筛选、联动、分页以及明细区表格逻辑均未调整。

## 未改动边界

- 未新增或修改前端接口调用。
- 未调整 `currentData.summary`、`currentData.riskPeople`、`currentData.riskModels`、`currentData.riskDetails` 数据结构。
- 未新增 `中风险人员TOP10` 或其他额外区块。
- 未改动项目分析弹窗、风险模型联动逻辑和风险明细字段。