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

**日期**: 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 项目结构
- 便于后续从静态展示平滑过渡到真实接口实现
