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

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

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

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

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