ccdi/docs/design/2026-03-27-results-overview-card-merge-design.md

# 结果总览卡片结构合并设计文档

**日期**: 2026-03-27  
**模块**: 初核项目详情 - 结果总览  
**作者**: Codex  
**状态**: 已确认

## 1. 概述

当前结果总览页顶部存在两个连续区块：

- `风险仪表盘`
- `风险人员总览`

两者都服务于同一类“项目风险总览”信息，但当前被拆成两个独立白卡，导致首屏结构割裂，标题层级重复，且统计卡片虽然已有 `label` 与 `icon` 数据字段，视觉上没有形成统一的“总览卡片”语义。

本次需求要求在不新增页面元素、不扩展中风险 TOP10 等新区域的前提下，把现有结果总览页面中的顶部两块内容收拢为同一个大卡片，并统一后续区块命名。

## 2. 设计范围

### 2.1 包含内容

- 将 `风险仪表盘` 与 `风险人员总览` 合并为一个 `风险总览` 卡片
- 为结果总览顶部 5 个统计卡片补充明确标题与小图标展示
- 将第二个卡片标题统一为 `风险模型`
- 将第三个卡片标题统一为 `风险明细`
- 补充本次设计文档与设计记录

### 2.2 不包含内容

- 不新增 `中风险人员TOP10`、`高风险人员清单` 等额外区块
- 不新增或修改后端接口
- 不修改统计口径、人员表格字段含义与查看详情链路
- 不调整风险模型区和风险明细区的业务内容
- 不做兼容性、补丁式或降级方案分支

## 3. 当前上下文

当前结果总览页主要由以下组件组成：

- `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`

当前实现特点如下：

1. `OverviewStats.vue` 独立渲染外层白卡、标题、副标题与统计卡片行。
2. `RiskPeopleSection.vue` 独立渲染另一张白卡，内部包含标题、副标题、导出按钮与风险人员表格。
3. `preliminaryCheck.mock.js` 和真实接口装配中，顶部统计项已经具备 `label`、`icon`、`tone` 字段。
4. 风险模型区和风险明细区已经作为独立区块存在，后续继续保留。

## 4. 设计目标

### 4.1 视觉目标

- 顶部信息收拢为一个清晰的“风险总览”首屏卡片
- 让统计卡片与风险人员表格形成上下连续的总览阅读流
- 去掉 `风险仪表盘` 与 `风险人员总览` 的重复壳层与重复标题感
- 统一页面主区块命名，形成：
  - `风险总览`
  - `风险模型`
  - `风险明细`

### 4.2 实现目标

- 沿用当前组件和数据结构，不新增接口与平行组件体系
- 将改动控制在结果总览前端视图层
- 保持现有导出、查看详情、模型联动等交互行为不变

## 5. 方案比较

### 5.1 方案 A：父层合并，保留子组件职责

做法：

- 在 `PreliminaryCheck.vue` 中新增统一的 `风险总览` 外层卡片
- `OverviewStats.vue` 仅负责统计卡片内容
- `RiskPeopleSection.vue` 仅负责风险人员表格内容
- 两个子组件不再各自渲染独立白卡壳层

优点：

- 最短路径实现
- 不改数据结构
- 组件职责仍然清晰
- 风险最小，最符合“按当前页面元素合并”的要求

缺点：

- 需要同步收掉两个子组件原有的外层样式壳

### 5.2 方案 B：把统计区直接并入风险人员组件

做法：

- 由 `RiskPeopleSection.vue` 同时负责标题、统计卡片、人员表格

优点：

- 页面结构集中在一个组件中，阅读更直观

缺点：

- 组件职责变重
- 后续维护与复用性变差

### 5.3 方案 C：新增组合组件承接三段结构

做法：

- 新建结果总览组合组件，内部再调用统计与人员子块

优点：

- 语义完整

缺点：

- 对本次小范围需求来说偏重
- 会增加一层额外封装，不是最短路径

### 5.4 结论

采用 **方案 A：父层合并，保留子组件职责**。

原因：

1. 与当前组件拆分方式最匹配
2. 不引入多余封装
3. 能在最小改动下完成结构合并和标题统一

## 6. 总体设计

### 6.1 页面区块结构

结果总览页主内容区调整为三张主卡片：

1. `风险总览`
2. `风险模型`
3. `风险明细`

其中第一张 `风险总览` 卡片内部结构为：

1. 卡片标题栏：`风险总览`
2. 第一部分：5 个统计小卡片
3. 第二部分：原 `风险人员总览` 表格与导出按钮

### 6.2 风险总览卡片

`风险总览` 卡片承接原来的两块内容，但只保留一层外壳。

内容顺序固定为：

1. 标题栏
2. 统计卡片区
3. 风险人员表格区

说明：

- 不再单独显示 `风险仪表盘` 标题与副标题
- 不再单独显示 `风险人员总览` 作为平级卡片标题
- 风险人员列表继续展示当前已有字段和操作入口

### 6.3 统计卡片展示

顶部 5 个统计小卡片继续沿用当前数据项，不改口径：

- 总人数
- 高风险
- 中风险
- 低风险
- 无预警人数

每个卡片统一采用：

- 左侧小图标
- 右侧标题
- 下方主数值

图标、颜色继续复用现有 `icon` 与 `tone` 字段，不额外设计新的数据协议。

### 6.4 风险模型卡片

第二张主卡片标题统一为 `风险模型`。

约束：

- 保持当前风险模型区内容、筛选、联动和查看详情行为不变
- 本次仅调整标题命名和与首卡片的层级关系，不扩展新功能

### 6.5 风险明细卡片

第三张主卡片标题统一为 `风险明细`。

约束：

- 保持当前风险明细区内容和行为不变
- 本次仅统一标题和页面主区块语义

## 7. 组件改动边界

### 7.1 `PreliminaryCheck.vue`

- 负责重新编排顶部区块
- 将 `OverviewStats` 与 `RiskPeopleSection` 包进统一的 `风险总览` 容器
- 保持 `RiskModelSection` 与 `RiskDetailSection` 继续作为独立区块

### 7.2 `OverviewStats.vue`

- 去掉自身独立大卡片壳层与原 `风险仪表盘` 标题、副标题
- 保留统计卡片栅格内容
- 完成统计卡片“标题 + 小图标 + 数值”展示

### 7.3 `RiskPeopleSection.vue`

- 去掉自身独立白卡壳层
- 作为 `风险总览` 卡片中的下半部分存在
- 保留当前导出按钮、表格字段与查看详情事件

### 7.4 `RiskModelSection.vue`

- 区块标题调整为 `风险模型`
- 其余数据与交互逻辑保持不变

### 7.5 `RiskDetailSection.vue`

- 区块标题调整为 `风险明细`
- 其余数据与交互逻辑保持不变

## 8. 数据与交互约束

本次设计不调整以下内容：

- `currentData.summary`
- `currentData.riskPeople`
- `currentData.riskModels`
- `currentData.riskDetails`

也就是说：

1. 不新增后端接口
2. 不改接口拼装逻辑
3. 不改统计卡片数量与字段口径
4. 不改风险人员表格字段含义
5. 不改模型区和风险明细区的业务行为

## 9. 验证口径

实施后需验证以下结果：

1. 首屏顶部只保留一个 `风险总览` 大卡片
2. `风险总览` 内同时包含统计卡片区和风险人员表格区
3. 5 个统计卡片都展示标题与小图标，数值与现有口径一致
4. 风险人员列表导出、查看详情与表格字段正常
5. 第二个卡片标题为 `风险模型`
6. 第三个卡片标题为 `风险明细`
7. 其他区块位置和现有交互不受影响

## 10. 后续动作

待用户审阅本设计文档后，继续输出两份实施计划：

- `docs/plans/backend/` 下的后端实施计划
- `docs/plans/frontend/` 下的前端实施计划