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