diff --git a/docs/design/2026-03-19-results-overview-page-design.md b/docs/design/2026-03-19-results-overview-page-design.md
new file mode 100644
index 00000000..27bb775d
--- /dev/null
+++ b/docs/design/2026-03-19-results-overview-page-design.md
@@ -0,0 +1,357 @@
+# 结果总览页面前端设计文档
+
+**日期**: 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 项目结构
+- 便于后续从静态展示平滑过渡到真实接口实现