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

结果总览查看详情窗口整体展示优化设计

日期: 2026-03-25
模块: 初核项目详情 - 结果总览 - 项目分析弹窗
作者: Codex
状态: 已确认

1. 概述

当前 结果总览 页中的“查看详情”弹窗已经具备统一入口、基础左右分栏和真实详情加载能力，但整体视觉仍存在以下问题：

• 弹窗内部存在明显“页面套页面”感，整体偏重
• 顶部留白过大，首屏可见内容不足
• 左右分栏比例与留白不够舒展，主内容区压缩感较强
• 左侧侧栏被主区高度强行拉长，人物档案区显得拖沓
• 左下角“核心异常标签”在多标签场景下无法完整展示
• 头部、侧栏、页签、表格、标签之间未形成统一的工作台视觉语言

本次设计只聚焦“整体展示效果优化”，允许对弹窗头部、侧栏组织和主区阅读节奏做明显重排，但不改变现有业务入口、路由和接口边界。

2. 设计范围

2.1 包含内容

• 重构 ProjectAnalysisDialog.vue 的整体视觉骨架
• 重排弹窗头带、左侧档案面板、右侧主工作区的层级关系
• 统一异常明细、占位页签、标签、摘要块、表格的视觉语言
• 保留现有“查看详情”入口与默认页签行为
• 保留现有真实详情接口调用链路

2.2 不包含内容

• 不新增后端接口
• 不调整结果总览列表层字段、按钮位置和交互入口
• 不新增页面、路由或抽屉式替代方案
• 不扩展导出、审批、关注等本轮需求之外的功能
• 不增加兼容性、补丁式或降级分支方案

3. 当前上下文

当前相关文件主要包括：

• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue

当前实现特点：

1. 弹窗外层采用 el-dialog，内部再包一层 project-analysis-shell
2. 当前使用右侧主区独立滚动，左侧侧栏不滚动，造成阅读节奏割裂
3. 左侧和右侧虽已收进同一外壳，但仍有较强“卡片拼装”感
4. “当前命中模型”作为独立提示块出现在主区顶部，容易打断阅读
5. 侧栏以字段表单式平铺为主，人物档案感不足
6. 异常明细区块、占位页签和侧栏之间的边框、背景、圆角节奏不统一

4. 设计目标

4.1 视觉目标

• 去除“弹窗里再套一页”的套娃感
• 压缩顶部无效留白，让首屏尽量多展示真实内容
• 让窗口更像一个完整的分析工作台，而不是多张卡片临时拼接
• 在保持当前产品色系下，形成更稳定、更克制的调查分析气质

4.2 交互目标

• 用户打开弹窗后，首屏先看清“是谁、风险怎样、为什么点进来”
• 弹窗内容区统一滚动，左右两栏保持同一阅读路径
• 默认仍进入 异常明细，不改变用户现有操作路径
• 来源于模型命中列表时，上下文提示应更自然地并入头部信息

4.3 实现目标

• 维持现有数据链路与组件职责，不扩散到后端与页面壳层
• 将改动边界收敛在弹窗及其直属子组件内

5. 视觉方向

5.1 Visual Thesis

以“沉浸式分析工作台”为核心方向，整体界面强调一层主壳、两块功能面和连续阅读流，避免多层容器叠加造成的后台表单感。

5.2 Content Plan

1. 首屏识别人和风险上下文
2. 主体展示项目内异常分析内容
3. 辅助承载其余四个分析页签
4. 在一次打开中完成快速判断与继续追查的阅读起点

5.3 Interaction Thesis

• 通过头部信息头带建立进入时的第一落点
• 通过左侧档案面板维持人物语义，不让侧栏沦为字段表单
• 通过主区摘要条和页签导航建立清晰、稳定的操作路径

6. 方案比较

6.1 方案 A：去壳化微调版

做法：

• 保留当前左右分栏与页签布局
• 仅去掉部分边框、圆角和外层容器感

优点：

• 改动边界最小

缺点：

• 只能缓解表层问题
• 套娃感和层级割裂无法根治

6.2 方案 B：沉浸式分析工作台

做法：

• 保留左右工作台语义
• 弹窗本身作为唯一主壳，并显著放大工作区尺寸
• 头部、侧栏、主区阅读节奏全部重排
• 改为统一滚动，侧栏标签区完整展开

优点：

• 能同时解决套娃感、比例失衡和风格碎片化问题
• 与当前业务场景最匹配
• 后续继续补真实页签内容时不需要再次推翻结构

缺点：

• 结构调整比简单样式修饰更明显

6.3 方案 C：单栏纵向叙事版

做法：

• 弱化或取消侧栏
• 全部内容按纵向单列展开

优点：

• 阅读路径最直接

缺点：

• 不符合当前“分析工作台”场景
• 会削弱多页签和多模块并存时的效率感

6.4 结论

采用 方案 B：沉浸式分析工作台。

原因：

1. 能一次性解决顶部留白、左右比例、标签展示不全和套娃感几类问题
2. 保留左右工作台语义，不偏离当前业务场景
3. 不需要引入新接口或新页面，仍然是最短路径实现

7. 总体设计

7.1 外层骨架

弹窗整体改为“三段式节奏”：

1. 顶部信息头带
2. 主体工作区
3. 底部留白收束

其中，el-dialog 内容区直接承担唯一外壳职责，不再在内部额外包一层大白卡式 shell 容器。

尺寸策略调整为：

• 弹窗整体尺寸较当前版本进一步放大，以“尽量多展示首屏内容”为优先目标
• 顶部与视口的空白显著压缩，不再保留当前过大的上边距观感
• 高度控制仍以视口内完整可操作为前提，不引入页面级滚动穿透问题

7.2 主体布局

主体仍保留左右分栏，但重设比例与层次：

• 左侧：固定窄栏，宽度约 300px ~ 320px
• 右侧：自适应主工作区
• 左右两区不再依赖粗边框硬切，而是通过背景层次、留白和局部分隔建立边界
• 左侧不再被右侧主区高度强行拉满，应按自身内容自然结束
• 弹窗内容区改为统一纵向滚动，左右两栏随同一滚动容器一起移动

7.3 头部信息头带

头部替代原有简单弹窗标题，组织方式如下：

• 左侧主信息：
  • 姓名
  • 风险等级状态
  • 工号 / 部门 / 所属项目
• 右侧操作：
  • 关闭按钮
• 右侧补充上下文：
  • 若入口来自模型命中列表，则展示“当前命中模型”

“当前命中模型”不再占用主区独立一行，而是并入头带完成来源说明。

7.4 左侧人物档案面板

左栏改为“人物档案面板”，按以下顺序组织：

1. 人物身份区
2. 命中模型摘要区
3. 核心异常标签区

具体原则：

• 不再使用强表单感的左右对齐字段列表作为主要视觉形式
• 通过人物姓名、风险等级徽标和简洁元信息建立识别性
• 核心异常标签作为独立内容块完整展示
• 标签区必须占满可用宽度，并支持从左到右自动换行
• 不允许通过截断、隐藏或压缩到单列的方式“勉强塞下”
• 如果某组信息不足，则保持简洁，不硬凑空块

7.5 右侧主工作区

主区改为连续阅读流：

1. 头部信息头带
2. 页签导航
3. 当前页签主体内容

其中头带优先展示当前人员在本项目内最关键的进入上下文，包括：

• 姓名
• 风险等级
• 工号 / 部门 / 所属项目
• 当前命中模型（仅模型入口显示）

7.6 异常明细页签

异常明细 仍为默认页签和主视图，组织节奏调整为：

1. 分组标题与一句摘要
2. 异常明细表格
3. 对象异常或补充摘要区

目标是让主表格继续作为信息中心，同时不再被多余边框和零散块状结构打断。

滚动规则调整为：

• 不再保留主区内部独立滚动容器
• 表格、对象卡片和分页都放回统一文档流
• 用户滚动一次即可连续浏览左侧档案和右侧内容，不再出现左右阅读节奏脱节

7.7 其他页签

资产分析、征信摘要、关系图谱、资金流向 四个页签本轮仍可保持静态承载，但视觉上统一为同一套工作台区块，不再采用简单占位板式呈现。

8. 视觉规范

8.1 背景与层次

• 最外层弹窗：唯一主壳
• 左栏背景：较主区略深的浅灰蓝面
• 主区背景：白色或极浅白底
• 关键内容块：局部轻边框或轻底色区分

避免同屏重复出现多层边框、圆角和阴影。

8.2 圆角与边框

• 圆角只保留在外层弹窗和主区关键块
• 大面积容器减少边框存在感
• 优先通过留白、标题层级、背景差和局部轻分隔线建立秩序

8.3 间距体系

统一使用三档垂直节奏：

• 紧凑信息：8px
• 区块内常规间距：16px
• 大区块间距：24px

主区和侧栏的左右内边距保持同一基线，避免视觉错位。

8.4 标签与状态

• 风险等级、异常标签、命中模型提示统一为浅底色、细边框、小圆角体系
• 左侧“核心异常标签”需优先保证完整可读，再考虑一屏展示数量
• 不混用重阴影和高饱和整块底色
• 不同标签的差异主要通过语义色和轻度背景体现

8.5 表格

• 表格仍是主工作区核心阅读面
• 弱化网格感，减少厚边框
• 通过表头层级、行高、次级文字颜色和金额色建立信息密度

9. 交互与状态

9.1 保持不变

• 风险人员总览 与 命中模型涉及人员列表 的“查看详情”入口不变
• 默认页签仍为 异常明细
• 仍使用现有详情接口按需拉取真实数据

9.2 调整点

• 加载态与报错态并入主区头部附近，减少打断感
• 来源为模型命中列表时，模型上下文移入头带
• 弹窗内容区改为统一滚动，左侧与右侧保持同一浏览路径
• 打开弹窗后的首屏信息顺序改为：
  • 人员识别
  • 风险背景
  • 当前来源上下文
  • 详细分析内容

10. 影响范围

本轮前端改动预计收敛在以下文件：

• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
• ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue

必要时补充弹窗结构与视觉契约相关单测，但不涉及：

• 后端接口
• 项目详情页路由
• 结果总览列表层逻辑
• 其他业务模块详情弹窗

11. 验收标准

1. 打开弹窗后，用户能在首屏快速识别“是谁、风险怎样、为什么点进来”，且顶部空白明显收紧
2. 弹窗尺寸相较当前版本明显放大，但仍保持在视口内稳定展示
3. 窗口整体不再呈现“弹窗里再套一页”的视觉感受
4. 左右分栏比例更稳定，右侧主区成为明确视觉中心
5. 弹窗内容区统一滚动，不再保留右侧独立滚动
6. 左侧侧栏不再被主区强制拉成整块长面板
7. 左下角“核心异常标签”在多标签、长标签场景下可完整换行展示
8. 头带、侧栏、页签、表格、标签形成统一工作台语言
9. 不改变当前业务入口、接口和默认页签行为

12. 结论

本次设计采用“沉浸式分析工作台”作为结果总览查看详情窗口的整体优化方向：

1. 去掉多余外壳，收口为一层主壳
2. 重排头带、侧栏和主区节奏
3. 统一标签、摘要、页签和表格视觉语言

该方案满足用户确认的核心诉求：

• 去除套娃感
• 压缩顶部留白并放大首屏展示
• 调顺分栏比例
• 改为统一滚动
• 让左下角标签完整展示
• 统一整体展示效果

同时保持当前接口与业务路径不变，属于符合现有边界的最短路径优化方案。