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

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

@@ -0,0 +1,266 @@
+# 结果总览卡片结构合并设计文档
+
+**日期**: 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/` 下的前端实施计划

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

@@ -0,0 +1,35 @@
+# 结果总览卡片结构合并设计记录
+
+**日期**: 2026-03-27
+
+## 本次产出
+
+- 新增设计文档 `docs/design/2026-03-27-results-overview-card-merge-design.md`
+- 明确结果总览页面主区块统一为 `风险总览`、`风险模型`、`风险明细`
+
+## 关键确认结论
+
+- `风险仪表盘` 与 `风险人员总览` 合并为同一个 `风险总览` 大卡片
+- 不新增 `中风险人员TOP10` 等额外区块
+- 第二个卡片标题统一为 `风险模型`
+- 第三个卡片标题统一为 `风险明细`
+- 统计卡片需要补齐标题与小图标展示
+
+## 设计结论
+
+- 前端采用“父层合并、子组件瘦身”的最短路径方案
+- `OverviewStats.vue` 保留统计卡片职责，不再单独承担整块白卡壳
+- `RiskPeopleSection.vue` 保留风险人员表格职责，作为 `风险总览` 卡片下半部分
+- 风险模型区与风险明细区仅统一标题和层级，不改业务行为
+
+## 边界约束
+
+- 不新增或修改后端接口
+- 不改变统计口径
+- 不修改风险人员表格字段含义与查看详情链路
+- 不扩展本轮需求之外的页面元素
+
+## 说明
+
+- 本次仅完成设计沉淀，尚未进入代码实施
+- 后续需基于该设计继续输出前后端实施计划