454 lines
13 KiB
Markdown
454 lines
13 KiB
Markdown
# 结果总览项目分析弹窗设计文档
|
||
|
||
**日期**: 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. 后续计划入口
|
||
|
||
设计确认后，下一步应输出两份实施计划：
|
||
|
||
- 后端实施计划：说明本轮后端保持不改动或仅补充边界说明
|
||
- 前端实施计划：说明弹窗、事件抛出、组件拆分、静态高保真页签和验证步骤
|
||
|
||
本轮实际开发应优先编写前端实施计划，并在计划中明确“不新增后端接口”的边界。
|