wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c33f411c8bbb84d734cd50325be7a8c760b38263
ccdi/docs/design/2026-03-19-results-overview-page-design.md

10 KiB
Raw Blame History

结果总览页面前端设计文档

日期: 2026-03-19 模块: 初核项目详情 - 结果总览 作者: Codex 状态: 已批准

概述

本文档用于沉淀 结果总览 页面的前端设计方案。设计依据为原型图 assets/结果总览.png，目标是在现有项目详情页壳子内，完成结果总览内容区的高保真静态页面设计。

本次设计只覆盖前端内容展示，不包含真实接口接入、后端数据结构设计，也不扩展原型图之外的业务流程。

设计范围

包含内容

  • 沿用现有项目详情页外层壳子，仅替换 结果总览 内容区
  • 高保真还原原型图中的页面结构与视觉层级
  • 覆盖以下页面状态：
    • 主展示态
    • 空数据态
    • 加载态
  • 输出适合当前 Vue 2 + Element UI 项目的组件拆分方案

不包含内容

  • 不改造项目详情页顶部标题区和页签导航
  • 不接入真实接口
  • 不新增原型图之外的弹窗、跳转或额外交互流程
  • 不补充兜底、降级或兼容性扩展方案

当前上下文

当前 结果总览 入口组件为：

  • ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue

当前文件仍为占位实现，仅显示“结果总览功能开发中...”。项目详情页通过 detail.vue 中的动态组件切换机制挂载该组件，因此本次设计应保持入口文件与挂载方式不变，在 PreliminaryCheck.vue 内完成页面编排。

设计原则

1. 高保真复刻原型

  • 信息分区、模块顺序、表格结构、操作位尽量按原型图呈现
  • 不主动重排信息架构
  • 不将总览页改造成 tab 页或多路由页

2. 只覆盖内容区

  • 页面仍运行在现有项目详情页中
  • 标题、返回按钮、顶部页签继续沿用现有实现
  • 本设计只负责 结果总览 区域的视觉和结构

3. 视觉不受现有默认样式约束

  • 页面可独立定制浅灰背景、白色卡片、强调色、标签色和表格视觉
  • 允许在 Element UI 基础上增加定制样式，以接近原型观感
  • 但仍应优先复用现有组件能力，避免引入新 UI 依赖

4. 保持最短实现路径

  • 页面以本地 mock 数据驱动
  • 组件拆分服务于结构清晰和后续接口替换，不做额外抽象
  • 所有设计均面向当前单页目标，不外扩到其他业务页面

页面信息架构

页面采用纵向长页面布局，自上而下分为 4 个独立分析区块：

1. 风险总览

页面顶部显示标题行与右侧操作位，下方展示统计卡片组。该区域用于快速传达项目风险总体情况，是用户进入页面后的第一视觉焦点。

建议保留原型中的以下展示元素：

  • 页面标题
  • 右侧操作按钮
  • 统计卡片横排
  • 关键指标数值与状态色

2. 风险人员

该区域分为上下两个子块：

  • 风险人员总览
  • 中高风险人员 TOP10

两个子块均使用卡片包裹表格，右上角保留操作位，表格行尾保留“查看详情”。上半块用于展示命中名单概况，下半块用于强调重点对象排行。

3. 风险模型

该区域同样分为上下两个子块：

  • 模型预警次数统计
  • 命中模型涉及人员列表

上半块使用模型摘要卡方式展示不同模型的命中次数、涉及人数及操作位；下半块使用筛选条 + 表格 + 分页的结构，展示命中模型下的相关人员。

4. 风险明细

该区域分为上下两个子块：

  • 涉险交易明细
  • 异常账户人员信息

两块均使用表格呈现，保留原型中金额颜色区分、标签展示及操作列结构，用于支撑用户从总览继续查看具体风险明细。

布局设计

整体布局

  • 内容区使用浅灰背景，形成与顶部详情壳子的视觉分层
  • 每个大区块使用独立白色卡片承载
  • 区块之间保持稳定纵向间距
  • 每个区块内部遵循“标题栏 / 操作区 / 主体内容区”的统一结构

统计卡布局

  • 统计卡采用单行横排布局
  • 每个卡片包含图标、指标名、数值与辅助说明
  • 卡片高度统一，避免因字数不同导致顶部基线不齐

表格区布局

  • 表格上方统一保留区块标题与操作入口
  • 多个表格区之间不做复杂嵌套，保持纵向串联
  • 分页控件右下对齐，贴近原型阅读习惯

筛选区布局

  • 风险模型区的筛选条位于表格上方
  • 使用紧凑型筛选布局，避免筛选器喧宾夺主
  • 筛选组件与原型字段顺序保持一致

页面状态设计

主展示态

主展示态为默认呈现状态，页面所有区块均展示样例数据。

展示要求：

  • 顶部统计卡显示明确数值
  • 风险人员榜单显示表格数据、操作列和分页
  • 风险模型区显示模型卡、筛选条、表格和分页
  • 风险明细区显示交易和账户人员两块表格
  • 所有按钮、筛选项、分页在视觉上完整可见

允许在静态页面阶段增加本地假交互，例如：

  • 分页切换
  • 筛选条件切换
  • 标签激活态切换

但不延伸为真实接口调用流程。

空数据态

空数据态采用“按区块独立判空”的方式，而不是整页统一空态。

规则如下：

  • 顶部统计卡无数据时显示 0
  • 表格区无数据时显示统一空态占位
  • 模型卡无数据时显示空卡容器或空文案
  • 某一个区块为空时，不影响其他区块正常展示

该方案更符合总览页特性，也更贴合未来真实数据场景。

加载态

加载态采用分区块骨架屏，不使用整页单一 loading。

表现形式建议如下：

  • 统计区显示若干骨架卡
  • 表格区显示表头 + 多行骨架内容
  • 模型卡显示矩形骨架块
  • 页面外层布局保持稳定，避免内容闪动和大幅位移

交互边界

本次设计只定义页面展示交互，不扩展原型图外的业务逻辑。

允许保留的交互：

  • 操作按钮视觉态
  • 表格行 hover
  • 标签高亮
  • 分页切换
  • 本地筛选联动

不纳入本次设计的内容：

  • 真实导出流程
  • 详情弹窗流程
  • 权限控制
  • 接口错误处理流
  • 原型未体现的补充说明区或辅助引导区

组件拆分方案

为保持当前挂载结构稳定，同时避免单文件过大，建议采用“页面编排组件 + 区块组件 + 本地 mock 文件”的组织方式。

1. 页面入口组件

文件：

  • ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue

职责：

  • 作为结果总览主容器
  • 管理主展示态、空数据态、加载态
  • 组织各区块组件顺序
  • 注入 mock 数据
  • 控制整体布局与分区间距

2. 顶部总览组件

建议新增组件，例如：

  • OverviewStats.vue

职责：

  • 渲染页面标题行
  • 渲染右侧操作区
  • 渲染统计卡片组
  • 封装统计卡的颜色、图标、数字样式

3. 风险人员区组件

建议新增组件，例如：

  • RiskPeopleSection.vue

职责：

  • 渲染风险人员总览表格
  • 渲染中高风险人员 TOP10 表格
  • 统一处理区块标题、表格操作列与分页布局

4. 风险模型区组件

建议新增组件，例如：

  • RiskModelSection.vue

职责：

  • 渲染模型摘要卡
  • 渲染筛选区
  • 渲染命中模型涉及人员表格
  • 处理本地 mock 筛选态与分页态

5. 风险明细区组件

建议新增组件，例如：

  • RiskDetailSection.vue

职责：

  • 渲染涉险交易明细表
  • 渲染异常账户人员信息表
  • 统一金额颜色、标签样式、操作列表现

6. 本地 mock 数据文件

建议新增本地数据文件，例如：

  • preliminaryCheck.mock.js

职责：

  • 提供主展示态示例数据
  • 提供空数据态示例数据
  • 提供分页与筛选的前端假数据源

样式设计要点

色彩

  • 页面背景：浅灰
  • 卡片背景：白色
  • 主强调色：延续原型中的蓝色体系
  • 风险等级：通过标签色或数值色体现差异
  • 金额正负值：使用不同颜色区分

卡片

  • 卡片圆角和阴影适度增强，贴近原型
  • 统计卡和区块卡在视觉层级上区分，但不出现风格割裂

表格

  • 表头背景、行间距、操作列色值贴近原型
  • 重要数值和状态信息优先通过颜色和字重建立层级
  • 避免默认 Element UI 表格样式直接裸用

响应策略

  • 优先保证桌面端呈现接近原型
  • 内容宽度随当前详情页内容区域自适应
  • 不在本次设计中扩展移动端重构方案

数据组织建议

虽然当前为静态前端页面，但为了后续实现平滑接入真实数据，建议按区块组织 mock 数据：

  • summary: 顶部指标卡数据
  • riskPeople: 风险人员总览与 TOP10 数据
  • riskModels: 模型摘要卡与模型命中人员数据
  • riskDetails: 涉险交易与异常账户人员数据

每个区块都应具备：

  • loading
  • isEmpty
  • list
  • pagination

这样在后续切换真实接口时，可以保持组件入参结构基本稳定。

测试关注点

本次设计阶段建议后续实现时至少验证以下内容：

  1. 结果总览 页签进入后，内容区正常替换占位页
  2. 主展示态下 4 个区块顺序、标题、内容与原型一致
  3. 空数据态只影响对应区块，不影响其他区块展示
  4. 加载态使用骨架屏，且不会导致页面结构跳变
  5. 自定义样式不会破坏当前项目详情页外层结构

文件落点建议

本设计对应的主要实现文件建议包括：

  • 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

结论

本方案采用“原型分块复刻”的最短路径设计：保留现有项目详情页壳子，仅重做 结果总览 内容区，按原型拆分为风险总览、风险人员、风险模型、风险明细四大区块，并覆盖主展示态、空数据态、加载态。

该设计满足以下目标：

  • 高保真还原原型
  • 不引入原型外流程
  • 适配当前 Vue 2 + Element UI 项目结构
  • 便于后续从静态展示平滑过渡到真实接口实现
Reference in New Issue View Git Blame Copy Permalink