新增结果总览项目分析弹窗设计文档

docs/design/2026-03-25-results-overview-project-analysis-dialog-design.md

@@ -0,0 +1,453 @@
+# 结果总览项目分析弹窗设计文档
+
+**日期**: 2026-03-25  
+**模块**: 初核项目详情 - 结果总览  
+**作者**: Codex  
+**状态**: 已批准
+
+## 1. 概述
+
+本设计用于补齐 `结果总览` 页面中两处人员列表的“查看项目”能力：
+
+- `风险人员总览`
+- `命中模型涉及人员列表`
+
+点击后，统一打开同一个“项目分析”弹窗，在弹窗内展示人员分析工作台。视觉方向以用户提供的截图为基准，采用“左侧人物档案 + 右侧分析页签”的工作台布局；同时对左侧信息栏做适度收敛，避免在弹窗内重复完整页面级导航。
+
+本轮目标是先完成前端高保真弹窗与基础切换能力，内容允许基于现有结果总览数据和静态占位组装，不在本轮扩展后端接口。
+
+## 2. 设计范围
+
+### 2.1 包含内容
+
+- 在 `结果总览` 页内新增统一的“项目分析”弹窗交互
+- 两个入口列表共用一套弹窗壳子与信息架构
+- 弹窗内保留 5 个页签：
+  - 异常明细
+  - 资产分析
+  - 征信摘要
+  - 关系图谱
+  - 资金流向
+- 默认页签为 `异常明细`
+- 左侧侧栏展示当前人员基础信息、命中模型摘要、排查记录摘要
+- 右侧 `异常明细` 页签按截图风格做完整高保真布局
+- 其余 4 个页签提供可切换的高保真静态承载
+
+### 2.2 不包含内容
+
+- 不新增后端接口
+- 不改造项目详情页路由或导航结构
+- 不把弹窗拆成新页面或新页签
+- 不在本轮接通 5 个页签的真实分析链路
+- 不扩展导出、权限、审批流等截图之外的新业务流程
+- 不补充兜底、降级或兼容性分支方案
+
+## 3. 当前上下文
+
+当前结果总览主入口与相关区块如下：
+
+- `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue`
+- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue`
+- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue`
+
+当前状态：
+
+1. 两个区块的操作列都已有“查看详情”按钮位
+2. 现有按钮尚未绑定统一弹窗交互
+3. `RiskPeopleSection.vue` 已具备人员基础信息、风险等级、核心异常点等展示字段
+4. `RiskModelSection.vue` 已具备人员信息、命中模型、异常标签等展示字段
+5. 结果总览当前真实接口仅覆盖仪表盘、风险人员总览、模型卡片与模型命中人员列表，不足以支撑完整项目分析工作台
+
+因此，本轮设计应遵循最短路径实现：只在现有前端链路上新增统一弹窗，不扩散到后端。
+
+## 4. 设计目标
+
+### 4.1 业务目标
+
+- 让用户在结果总览中直接查看某名人员对应的项目分析内容
+- 让两个入口汇聚到同一个分析弹窗，避免形成两套详情语义
+- 保持“从列表进入分析工作台”的浏览连贯性
+
+### 4.2 交互目标
+
+- 点击后立即打开弹窗，不跳页、不二次确认
+- 默认落在最有信息密度的 `异常明细` 页签
+- 若入口来自模型命中列表，应在弹窗顶部和侧栏中体现当前命中模型上下文
+
+### 4.3 视觉目标
+
+- 高保真贴近用户截图中的工作台气质
+- 左栏稍微简化，避免页面级导航感过强
+- 与当前结果总览页保持同一套蓝灰白色系和风险标签语义，不做成另一套产品
+
+## 5. 视觉方向
+
+### 5.1 Visual Thesis
+
+以“调查工作台”为核心视觉意图，整体观感应当克制、聚焦、带有分析场景的秩序感，而不是普通业务弹窗。
+
+### 5.2 Content Plan
+
+- 首屏：人物身份与风险背景
+- 主体：异常明细主视图
+- 支撑：模型摘要、排查记录摘要、辅助页签
+- 收束：让用户在一次打开中快速判断“这个人为什么值得继续查”
+
+### 5.3 Interaction Thesis
+
+- 打开弹窗后直接进入异常明细首屏，形成明确阅读起点
+- 页签切换保持轻量、稳定，不做过多动画干扰
+- 来源于模型命中列表时，强调当前模型上下文，形成“从哪里来、为什么点进来”的连贯感
+
+## 6. 方案比较
+
+### 6.1 方案 A：工作台式高保真弹窗
+
+结构：
+
+- 左侧人物档案
+- 右侧五页签工作区
+- 异常明细为主视图
+
+优点：
+
+- 与用户截图最接近
+- 能承载“查看项目”所需的分析工作台语义
+- 后续逐步接真实页签数据时不需要推翻结构
+
+缺点：
+
+- 前端结构比普通详情弹窗更复杂
+- 需要严格控制左栏信息量，避免显得臃肿
+
+### 6.2 方案 B：顶部信息带 + 页签主区
+
+结构：
+
+- 顶部统一人物信息带
+- 下方五页签区域
+
+优点：
+
+- 结构规整
+- 实现复杂度较低
+
+缺点：
+
+- 与截图差距较大
+- 人员档案沉浸感较弱
+
+### 6.3 方案 C：轻量明细弹窗
+
+结构：
+
+- 人员概要
+- 单屏明细区
+
+优点：
+
+- 实现最轻
+
+缺点：
+
+- 无法承载用户明确要求的完整页签工作台
+- 容易退化成普通表格弹窗
+
+### 6.4 方案结论
+
+采用 **方案 A：工作台式高保真弹窗**，同时将左侧栏从“完整工作台导航”收敛为“人物分析侧栏”，保证高保真方向正确且信息密度适中。
+
+## 7. 信息架构设计
+
+### 7.1 打开入口
+
+以下两个入口统一打开同一个弹窗：
+
+1. `风险人员总览` 的操作列
+2. `命中模型涉及人员列表` 的操作列
+
+### 7.2 弹窗顶栏
+
+顶栏内容建议为：
+
+- 主标题：`项目分析`
+- 次级上下文：`姓名 | 工号 | 命中模型数/当前模型`
+- 关闭按钮
+
+不在顶栏继续放置页面级返回、导出报告等完整页面操作，避免弹窗承担页面壳子职责。
+
+### 7.3 左侧人物分析侧栏
+
+左侧侧栏只保留三组信息：
+
+1. **人员基础信息**
+   - 姓名
+   - 工号
+   - 部门
+   - 风险等级
+   - 所属项目
+2. **命中模型摘要**
+   - 命中模型数
+   - 模型名称摘要
+   - 核心异常标签
+3. **排查记录摘要**
+   - 最近状态
+   - 简要备注或占位摘要
+
+不保留完整项目侧边导航，不复刻截图中的“返回项目 / 生成报告 / 关注 / 推荐对象信息 / 排查记录”全量信息层级。
+
+### 7.4 右侧主工作区
+
+右侧主区保留五页签：
+
+1. 异常明细
+2. 资产分析
+3. 征信摘要
+4. 关系图谱
+5. 资金流向
+
+默认进入 `异常明细`，并作为本轮内容最完整的主视图。
+
+## 8. 页面节奏与视觉结构
+
+### 8.1 外层弹窗
+
+- 使用大尺寸弹窗，宽度建议约 `1360px`
+- 内容区高度按视口收敛，采用内部滚动
+- 外层视觉重心在内容区，不依赖厚重边框和多层卡片堆叠
+
+### 8.2 左侧侧栏
+
+- 背景色较主内容区略暖或略灰
+- 信息块之间通过分隔线与留白组织
+- 不使用过多卡片和阴影，避免产生“页面套页面”感
+
+### 8.3 右侧页签工作区
+
+- 页签条作为稳定导航带
+- 页签下方以“白底大区块 + 表格/摘要”的工作台形式展开
+- `异常明细` 首屏强调三件事：
+  1. 当前人员风险背景
+  2. 异常明细主列表
+  3. 若干需要继续追查的异常摘要块
+
+### 8.4 与当前结果总览页关系
+
+- 保持同一套产品色与风险标签语义
+- 弹窗整体更沉浸、更聚焦
+- 不把结果总览主页面的四大区块原样塞进弹窗
+
+## 9. 页签内容设计
+
+### 9.1 异常明细页签
+
+该页签为本轮主视图，按截图节奏组织：
+
+- 顶部异常分组标题
+- 主表格区：展示交易时间、本方账号、对方账号、摘要/交易类型、交易金额、标记状态等
+- 补充摘要区：如频繁转账账户异常、关联交易异常等块级摘要
+- 底部操作区按需保留，但不在本轮扩展真实业务动作
+
+此页签允许使用当前行数据 + 本地静态映射方式组装高保真内容。
+
+### 9.2 资产分析页签
+
+- 展示高保真静态结构
+- 体现资产概览、资产异动或资产分布分析的阅读节奏
+- 本轮不接真实接口
+
+### 9.3 征信摘要页签
+
+- 展示高保真静态结构
+- 体现授信、负债、逾期、查询记录等摘要位
+- 本轮不接真实接口
+
+### 9.4 关系图谱页签
+
+- 展示高保真静态结构
+- 体现中心人物、关系节点、关系类型与摘要说明
+- 本轮不接真实接口
+
+### 9.5 资金流向页签
+
+- 展示高保真静态结构
+- 体现流入流出方向、关键对手方、异常流向摘要
+- 本轮不接真实接口
+
+## 10. 组件拆分方案
+
+### 10.1 入口编排组件
+
+保留：
+
+- `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue`
+
+职责：
+
+- 继续作为结果总览页面主入口
+- 统一维护项目分析弹窗开关状态
+- 保存当前选中人员、入口来源、来源上下文
+
+### 10.2 列表区块组件
+
+涉及：
+
+- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue`
+- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue`
+
+职责调整：
+
+- 将“查看项目”改为触发事件
+- 向上抛出当前行信息
+- 不在区块内部自行维护弹窗状态
+
+### 10.3 新增统一弹窗组件
+
+建议新增：
+
+- `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+
+职责：
+
+- 渲染大尺寸项目分析弹窗
+- 负责左侧人物分析侧栏
+- 负责右侧五页签导航与切换
+- 管理默认页签与关闭行为
+
+### 10.4 新增轻量子组件
+
+建议按需拆分为：
+
+- `ProjectAnalysisSidebar.vue`
+- `ProjectAnalysisAbnormalTab.vue`
+- `ProjectAnalysisPlaceholderTab.vue`
+
+拆分原则：
+
+- 服务于文件聚焦，不做过度抽象
+- 异常明细单独成块，其他静态页签可共用一套占位骨架
+
+## 11. 数据策略
+
+### 11.1 本轮数据来源
+
+本轮不新增后端接口，数据优先来自当前结果总览已拿到的列表行数据：
+
+- `风险人员总览` 当前行
+- `命中模型涉及人员列表` 当前行
+
+### 11.2 左栏字段来源
+
+优先映射：
+
+- 姓名
+- 工号
+- 部门
+- 风险等级
+- 命中模型数
+- 命中模型名称
+- 异常标签
+
+若来源于模型命中列表，则补充“当前命中模型”上下文；若来源于风险人员总览，则按人员风险概览口径展示。
+
+### 11.3 右侧内容来源
+
+- `异常明细`：由当前行信息 + 本地静态映射组合生成
+- 其余页签：由静态高保真结构承载，不伪装成真实分析结果
+
+### 11.4 缺字段策略
+
+- 缺工号、部门、身份证号等字段时展示 `-`
+- 缺异常标签时展示“暂无异常标签”
+- 不在前端额外推导用户未提供的数据
+
+## 12. 交互设计
+
+### 12.1 打开行为
+
+- 点击“查看项目”后立即打开弹窗
+- 不跳页
+- 不弹二次确认
+- 默认进入 `异常明细`
+- 默认滚动到弹窗顶部
+
+### 12.2 来源感知
+
+若入口来自 `命中模型涉及人员列表`：
+
+- 顶部摘要展示当前命中模型
+- 左侧命中模型摘要中强调当前模型
+
+若入口来自 `风险人员总览`：
+
+- 以人员风险背景为主，不额外强调某一模型
+
+### 12.3 页签切换
+
+- 五个页签均可点击切换
+- 本轮只有 `异常明细` 是完整主视图
+- 其他页签只承担高保真承载，不做真实联动
+
+### 12.4 关闭与重开
+
+- 关闭时清空当前选中人员和来源上下文
+- 再次打开时始终回到 `异常明细`
+- 不保留上次停留页签
+
+## 13. 状态设计
+
+### 13.1 打开前
+
+- 页面原有列表与筛选行为保持不变
+
+### 13.2 打开后
+
+- 弹窗内部独立滚动
+- 不影响结果总览页当前筛选、分页与卡片选中状态
+
+### 13.3 空态
+
+- 左栏缺字段时以 `-` 占位
+- 标签为空时显示统一空文案
+- 静态页签若无内容，使用高保真占位结构而不是纯 `el-empty`
+
+### 13.4 异常态
+
+本轮不扩展新的接口错误处理流，沿用前端静态组装范围，不引入额外异常流程。
+
+## 14. 验证要点
+
+本轮验证聚焦前端静态与交互边界：
+
+1. 两个入口都能打开同一个弹窗
+2. 不同来源可以正确带出当前行信息
+3. 默认页签为 `异常明细`
+4. 页签切换稳定，关闭重开后重置为默认页签
+5. 左栏字段缺失、标签为空、标签过长时布局不塌
+6. 弹窗桌面端宽度和常见页面宽度下布局稳定
+7. 结果总览原有模型筛选、分页、标签高亮不受影响
+
+## 15. 实施边界结论
+
+本方案采用最短路径实现：
+
+1. 不新增后端接口
+2. 不扩展用户需求之外的新业务流程
+3. 不做兼容性或补丁式平行方案
+4. 只在结果总览现有前端链路上增加统一项目分析弹窗
+
+该方案满足以下要求：
+
+- 逻辑单一
+- 入口统一
+- 风格贴近用户截图
+- 后续具备逐页签接入真实能力的扩展空间
+
+## 16. 后续计划入口
+
+设计确认后，下一步应输出两份实施计划：
+
+- 后端实施计划：说明本轮后端保持不改动或仅补充边界说明
+- 前端实施计划：说明弹窗、事件抛出、组件拆分、静态高保真页签和验证步骤
+
+本轮实际开发应优先编写前端实施计划，并在计划中明确“不新增后端接口”的边界。