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

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

日期: 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. 后续计划入口

设计确认后，下一步应输出两份实施计划：

• 后端实施计划：说明本轮后端保持不改动或仅补充边界说明
• 前端实施计划：说明弹窗、事件抛出、组件拆分、静态高保真页签和验证步骤

本轮实际开发应优先编写前端实施计划，并在计划中明确“不新增后端接口”的边界。