358 lines
10 KiB
Markdown
358 lines
10 KiB
Markdown
|
# 结果总览页面前端设计文档
|
||
|
|
|
||
|
|
**日期**: 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 项目结构
|
||
|
|
- 便于后续从静态展示平滑过渡到真实接口实现
|