补充项目分析弹窗展示优化设计

This commit is contained in:
wkc
2026-03-25 19:44:11 +08:00
parent 60f935da27
commit cda1028c48
2 changed files with 89 additions and 20 deletions

View File

@@ -10,7 +10,10 @@
当前 `结果总览` 页中的“查看详情”弹窗已经具备统一入口、基础左右分栏和真实详情加载能力,但整体视觉仍存在以下问题:
- 弹窗内部存在明显“页面套页面”感,整体偏重
- 顶部留白过大,首屏可见内容不足
- 左右分栏比例与留白不够舒展,主内容区压缩感较强
- 左侧侧栏被主区高度强行拉长,人物档案区显得拖沓
- 左下角“核心异常标签”在多标签场景下无法完整展示
- 头部、侧栏、页签、表格、标签之间未形成统一的工作台视觉语言
本次设计只聚焦“整体展示效果优化”,允许对弹窗头部、侧栏组织和主区阅读节奏做明显重排,但不改变现有业务入口、路由和接口边界。
@@ -45,22 +48,25 @@
当前实现特点:
1. 弹窗外层采用 `el-dialog`,内部再包一层 `project-analysis-shell`
2. 左侧和右侧虽已收进同一外壳,但仍有较强“卡片拼装”感
3. “当前命中模型”作为独立提示块出现在主区顶部,容易打断阅读
4. 侧栏以字段表单式平铺为主,人物档案感不足
5. 异常明细区块、占位页签和侧栏之间的边框、背景、圆角节奏不统一
2. 当前使用右侧主区独立滚动,左侧侧栏不滚动,造成阅读节奏割裂
3. 左侧和右侧虽已收进同一外壳,但仍有较强“卡片拼装”感
4. “当前命中模型”作为独立提示块出现在主区顶部,容易打断阅读
5. 侧栏以字段表单式平铺为主,人物档案感不足
6. 异常明细区块、占位页签和侧栏之间的边框、背景、圆角节奏不统一
## 4. 设计目标
### 4.1 视觉目标
- 去除“弹窗里再套一页”的套娃感
- 压缩顶部无效留白,让首屏尽量多展示真实内容
- 让窗口更像一个完整的分析工作台,而不是多张卡片临时拼接
- 在保持当前产品色系下,形成更稳定、更克制的调查分析气质
### 4.2 交互目标
- 用户打开弹窗后,首屏先看清“是谁、风险怎样、为什么点进来”
- 弹窗内容区统一滚动,左右两栏保持同一阅读路径
- 默认仍进入 `异常明细`,不改变用户现有操作路径
- 来源于模型命中列表时,上下文提示应更自然地并入头部信息
@@ -111,8 +117,9 @@
做法:
- 保留左右工作台语义
- 弹窗本身作为唯一主壳
- 弹窗本身作为唯一主壳,并显著放大工作区尺寸
- 头部、侧栏、主区阅读节奏全部重排
- 改为统一滚动,侧栏标签区完整展开
优点:
@@ -146,7 +153,7 @@
原因:
1. 能一次性解决当前最核心的 `A/C/D`类问题
1. 能一次性解决顶部留白、左右比例、标签展示不全和套娃感几类问题
2. 保留左右工作台语义,不偏离当前业务场景
3. 不需要引入新接口或新页面,仍然是最短路径实现
@@ -162,6 +169,12 @@
其中,`el-dialog` 内容区直接承担唯一外壳职责,不再在内部额外包一层大白卡式 `shell` 容器。
尺寸策略调整为:
- 弹窗整体尺寸较当前版本进一步放大,以“尽量多展示首屏内容”为优先目标
- 顶部与视口的空白显著压缩,不再保留当前过大的上边距观感
- 高度控制仍以视口内完整可操作为前提,不引入页面级滚动穿透问题
### 7.2 主体布局
主体仍保留左右分栏,但重设比例与层次:
@@ -169,6 +182,8 @@
- 左侧:固定窄栏,宽度约 `300px ~ 320px`
- 右侧:自适应主工作区
- 左右两区不再依赖粗边框硬切,而是通过背景层次、留白和局部分隔建立边界
- 左侧不再被右侧主区高度强行拉满,应按自身内容自然结束
- 弹窗内容区改为统一纵向滚动,左右两栏随同一滚动容器一起移动
### 7.3 头部信息头带
@@ -191,28 +206,31 @@
1. 人物身份区
2. 命中模型摘要区
3. 排查状态或辅助提示
3. 核心异常标签
具体原则:
- 不再使用强表单感的左右对齐字段列表作为主要视觉形式
- 通过人物姓名、风险等级徽标和简洁元信息建立识别性
- 核心异常标签按统一标签语言展示
- 核心异常标签作为独立内容块完整展示
- 标签区必须占满可用宽度,并支持从左到右自动换行
- 不允许通过截断、隐藏或压缩到单列的方式“勉强塞下”
- 如果某组信息不足,则保持简洁,不硬凑空块
### 7.5 右侧主工作区
主区改为连续阅读流:
1. 风险摘要条
1. 头部信息头带
2. 页签导航
3. 当前页签主体内容
其中风险摘要条优先展示当前人员在本项目内最值得关注的 2 至 3 项信息,例如
其中头带优先展示当前人员在本项目内最关键的进入上下文,包括
- 命中模型数
- 异常标签数
- 异常分组数或重点异常数
- 姓名
- 风险等级
- 工号 / 部门 / 所属项目
- 当前命中模型(仅模型入口显示)
### 7.6 异常明细页签
@@ -224,6 +242,12 @@
目标是让主表格继续作为信息中心,同时不再被多余边框和零散块状结构打断。
滚动规则调整为:
- 不再保留主区内部独立滚动容器
- 表格、对象卡片和分页都放回统一文档流
- 用户滚动一次即可连续浏览左侧档案和右侧内容,不再出现左右阅读节奏脱节
### 7.7 其他页签
`资产分析``征信摘要``关系图谱``资金流向` 四个页签本轮仍可保持静态承载,但视觉上统一为同一套工作台区块,不再采用简单占位板式呈现。
@@ -258,6 +282,7 @@
### 8.4 标签与状态
- 风险等级、异常标签、命中模型提示统一为浅底色、细边框、小圆角体系
- 左侧“核心异常标签”需优先保证完整可读,再考虑一屏展示数量
- 不混用重阴影和高饱和整块底色
- 不同标签的差异主要通过语义色和轻度背景体现
@@ -279,6 +304,7 @@
- 加载态与报错态并入主区头部附近,减少打断感
- 来源为模型命中列表时,模型上下文移入头带
- 弹窗内容区改为统一滚动,左侧与右侧保持同一浏览路径
- 打开弹窗后的首屏信息顺序改为:
- 人员识别
- 风险背景
@@ -303,11 +329,15 @@
## 11. 验收标准
1. 打开弹窗后,用户能在首屏快速识别“是谁、风险怎样、为什么点进来”
2. 窗口整体不再呈现“弹窗里再套一页”的视觉感受
3. 左右分栏比例更稳定,右侧主区成为明确视觉中心
4. 头带、侧栏、页签、表格、标签形成统一工作台语言
5. 不改变当前业务入口、接口和默认页签行为
1. 打开弹窗后,用户能在首屏快速识别“是谁、风险怎样、为什么点进来”,且顶部空白明显收紧
2. 弹窗尺寸相较当前版本明显放大,但仍保持在视口内稳定展示
3. 窗口整体不再呈现“弹窗里再套一页”的视觉感受
4. 左右分栏比例更稳定,右侧主区成为明确视觉中心
5. 弹窗内容区统一滚动,不再保留右侧独立滚动
6. 左侧侧栏不再被主区强制拉成整块长面板
7. 左下角“核心异常标签”在多标签、长标签场景下可完整换行展示
8. 头带、侧栏、页签、表格、标签形成统一工作台语言
9. 不改变当前业务入口、接口和默认页签行为
## 12. 结论
@@ -317,10 +347,13 @@
2. 重排头带、侧栏和主区节奏
3. 统一标签、摘要、页签和表格视觉语言
该方案满足用户确认的三项核心诉求:
该方案满足用户确认的核心诉求:
- 去除套娃感
- 调顺分栏比例和留白
- 压缩顶部留白并放大首屏展示
- 调顺分栏比例
- 改为统一滚动
- 让左下角标签完整展示
- 统一整体展示效果
同时保持当前接口与业务路径不变,属于符合现有边界的最短路径优化方案。

View File

@@ -0,0 +1,36 @@
# 结果总览项目分析弹窗展示优化设计补充记录
## 变更日期
- 2026-03-25
## 变更范围
- 设计文档:`docs/design/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design.md`
## 记录内容
### 1. 用户补充问题确认
- 顶部留白过大,首屏有效内容不足。
- 左右布局比例不对,左侧侧栏被拉得过高。
- 左下角“核心异常标签”无法全部展示。
### 2. 方案收敛结果
- 延续既有“项目分析”弹窗与五页签结构,不改业务入口和数据链路。
- 在三种布局方向中,确认采用“放大工作台版”。
- 明确本轮按最短路径实现,不新增兼容性或补丁式方案。
### 3. 新增设计约束
- 弹窗尺寸进一步放大,并明显压缩顶部空白。
- 弹窗内容区改为统一滚动,左右两栏一起移动。
- 左侧侧栏按内容自然结束,不再被右侧主区强制拉长。
- “当前命中模型”并入头部信息带,不再单独占一行。
- 左下角“核心异常标签”必须支持完整换行展示,不允许截断或隐藏。
## 结果
- 已完成展示优化设计文档补充,设计口径与用户确认保持一致。
- 本轮仍停留在设计阶段,尚未进入实施计划和代码改动阶段。