wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b7db711906017e7bd0736f1117007145f293ab38
ccdi/docs/design/2026-03-27-results-overview-card-merge-design.md

7.5 KiB
Raw Blame History

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

日期: 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/ 下的前端实施计划
Reference in New Issue View Git Blame Copy Permalink