From cda1028c48980dc8dce30d87ee2c1ebd43b956b8 Mon Sep 17 00:00:00 2001 From: wkc <978997012@qq.com> Date: Wed, 25 Mar 2026 19:44:11 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E9=A1=B9=E7=9B=AE=E5=88=86?= =?UTF-8?q?=E6=9E=90=E5=BC=B9=E7=AA=97=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...ysis-dialog-display-optimization-design.md | 73 ++++++++++++++----- ...splay-optimization-design-update-record.md | 36 +++++++++ 2 files changed, 89 insertions(+), 20 deletions(-) create mode 100644 docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design-update-record.md diff --git a/docs/design/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design.md b/docs/design/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design.md index e8e0056c..e37f99bb 100644 --- a/docs/design/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design.md +++ b/docs/design/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design.md @@ -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. 统一标签、摘要、页签和表格视觉语言 -该方案满足用户确认的三项核心诉求： +该方案满足用户确认的核心诉求： - 去除套娃感 -- 调顺分栏比例和留白 +- 压缩顶部留白并放大首屏展示 +- 调顺分栏比例 +- 改为统一滚动 +- 让左下角标签完整展示 - 统一整体展示效果 同时保持当前接口与业务路径不变，属于符合现有边界的最短路径优化方案。 diff --git a/docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design-update-record.md b/docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design-update-record.md new file mode 100644 index 00000000..62abf996 --- /dev/null +++ b/docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design-update-record.md @@ -0,0 +1,36 @@ +# 结果总览项目分析弹窗展示优化设计补充记录 + +## 变更日期 + +- 2026-03-25 + +## 变更范围 + +- 设计文档：`docs/design/2026-03-25-results-overview-project-analysis-dialog-display-optimization-design.md` + +## 记录内容 + +### 1. 用户补充问题确认 + +- 顶部留白过大，首屏有效内容不足。 +- 左右布局比例不对，左侧侧栏被拉得过高。 +- 左下角“核心异常标签”无法全部展示。 + +### 2. 方案收敛结果 + +- 延续既有“项目分析”弹窗与五页签结构，不改业务入口和数据链路。 +- 在三种布局方向中，确认采用“放大工作台版”。 +- 明确本轮按最短路径实现，不新增兼容性或补丁式方案。 + +### 3. 新增设计约束 + +- 弹窗尺寸进一步放大，并明显压缩顶部空白。 +- 弹窗内容区改为统一滚动，左右两栏一起移动。 +- 左侧侧栏按内容自然结束，不再被右侧主区强制拉长。 +- “当前命中模型”并入头部信息带，不再单独占一行。 +- 左下角“核心异常标签”必须支持完整换行展示，不允许截断或隐藏。 + +## 结果 + +- 已完成展示优化设计文档补充，设计口径与用户确认保持一致。 +- 本轮仍停留在设计阶段，尚未进入实施计划和代码改动阶段。