267 lines
7.5 KiB
Markdown
267 lines
7.5 KiB
Markdown
# 结果总览卡片结构合并设计文档
|
||
|
||
**日期**: 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/` 下的前端实施计划
|