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