# PRD：C-2.11 资料集图片沉浸查看优化

## 1. 需求背景

当前 C 端资料集页面支持用户左右滑动切换图片，并可放大、缩小查看图片细节。为了最大化画布区域，页面中的 Logo、菜单、返回、翻译、分享、底部缩略图栏等操作控件均浮动展示在图片画布上。

客户反馈：在查看建筑外观、室内图、平面图等资料时，浮动控件可能遮挡图片中的重要信息，影响沉浸式浏览体验，存在错过重要画面信息的风险。

本次需求仅关联 C-2.11 版本，不涉及 B 端和后台。

## 2. 需求目标

在不大幅调整现有 UI 布局的前提下，让用户可以更完整、沉浸地查看资料集图片。

| 目标 | 说明 |
|---|---|
| 减少遮挡 | 沉浸态下隐藏页面顶部按钮，仅保留恢复入口，降低顶部控件对主内容的遮挡 |
| 保持低成本 | 不重构页面布局，不新增大面积工具栏 |
| 保留操作效率 | 底部文件列表仍按原方式使用；用户可通过沉浸按钮恢复顶部按钮 |
| 兼容 PC / Pad | 同一套页面，根据鼠标和触摸屏操作差异适配 |
| 移动端不改动 | 手机移动端当前不存在顶部按钮遮挡问题，本次版本不做修改 |

## 3. 适用范围

| 项目 | 说明 |
|---|---|
| 版本 | C-2.11 |
| 端 | C 端 |
| 页面 | 存在大图浏览场景的页面 |
| 涉及能力 | 图片切换、图片缩放、浮动控件展示/隐藏 |

本次适用页面包括：

| 页面类型 | 说明 |
|---|---|
| 资料集图片查看页 | 当前资料集图片大图浏览页面 |
| 资料集 PDF 详情页 | PDF 内容的大图查看页面 |
| 户型图大图模式及比较 | 户型图单图放大查看、户型图比较页面 |
| IFRAME 嵌入模式 | 菜单进入、样板间 WALK / VR、3D、GIS、家具摆放等嵌入式浏览场景 |

## 4. 用户用例

以下用户用例适用于本次范围内所有支持沉浸模式的大图浏览页面，包括资料集图片查看页、资料集 PDF 详情页、户型图大图模式及比较、IFRAME 嵌入模式等。

### 用例 1：PC 用户主动进入沉浸模式

| 项目 | 内容 |
|---|---|
| 用户 | PC 端访客 |
| 场景 | 用户进入任一支持沉浸模式的大图浏览页面，希望降低页面操作控件的视觉干扰 |
| 前置条件 | 页面显示右上角功能按钮组 |
| 用户目标 | 主动进入沉浸模式，尽可能完整地查看页面主内容 |
| 操作路径 | 用户点击右上角“沉浸查看”功能按钮 |
| 结果 | 左上 Logo / 菜单、右上按钮组完全隐藏且不可交互；如果菜单处于打开状态，则主动收起；新增沉浸按钮保留为低透明度可见；底部文件列表自动收起，页面进入沉浸查看状态 |

### 用例 2：PC 用户在沉浸状态下使用底部内容区

| 项目 | 内容 |
|---|---|
| 用户 | PC 端访客 |
| 场景 | 用户在沉浸模式下需要操作页面底部内容区 |
| 前置条件 | 当前页面处于沉浸模式 |
| 用户目标 | 在不退出沉浸模式的情况下继续使用底部内容区 |
| 操作路径 | 用户点击原有底部列表控制按钮展开底部文件列表 -> 用户点击目标图片完成切换 |
| 结果 | 图片切换完成后，底部图片切换列表栏自动收起，页面继续保持沉浸态；这与常态下切换图片后列表栏维持原有展开 / 收起状态不同 |

### 用例 3：PC 用户退出沉浸模式

| 项目 | 内容 |
|---|---|
| 用户 | PC 端访客 |
| 场景 | 用户想恢复默认页面控件展示 |
| 前置条件 | 页面处于沉浸查看状态 |
| 用户目标 | 退出沉浸模式 |
| 操作路径 | 用户点击低透明度显示的“恢复”按钮 |
| 结果 | 页面恢复默认控件显示状态；底部图片切换列表栏继承退出前的实时状态。由于进入沉浸态时列表栏默认收起，且沉浸态下完成图片切换后列表栏会自动收起，因此大多数情况下退出时列表栏为收起状态；仅当用户在沉浸态下主动展开列表栏后，未切换图片且未再次收起，便直接退出沉浸模式时，列表栏保持展开 |

### 用例 4：Pad 用户进入沉浸模式

| 项目 | 内容 |
|---|---|
| 用户 | Pad 端销售人员 / 客户 |
| 场景 | 销售人员使用 Pad 展示任一支持沉浸模式的大图浏览页面 |
| 前置条件 | 用户进入支持沉浸模式的页面 |
| 用户目标 | 展示图片时尽量减少界面干扰 |
| 操作路径 | 用户进入页面 -> 控件默认显示 -> 用户点击沉浸按钮 |
| 结果 | 左上 Logo / 菜单、右上按钮组完全隐藏且不可交互；如果菜单处于打开状态，则主动收起；新增沉浸按钮保留为低透明度可见；底部文件列表自动收起，页面进入沉浸展示状态 |

### 用例 5：Pad 用户退出沉浸模式

| 项目 | 内容 |
|---|---|
| 用户 | Pad 端用户 |
| 场景 | 用户沉浸查看图片后，想恢复正常界面 |
| 前置条件 | 页面处于沉浸模式 |
| 用户目标 | 退出沉浸模式 |
| 操作路径 | 用户点击恢复按钮 |
| 结果 | 左上 Logo / 菜单、右上按钮组恢复常态显示；底部图片切换列表栏继承退出前的实时状态。由于进入沉浸态时列表栏默认收起，且沉浸态下完成图片切换后列表栏会自动收起，因此大多数情况下退出时列表栏为收起状态；仅当用户在沉浸态下主动展开列表栏后，未切换图片且未再次收起，便直接退出沉浸模式时，列表栏保持展开 |

### 用例 6：Pad 用户在沉浸状态下继续执行页面内浏览操作

| 项目 | 内容 |
|---|---|
| 用户 | Pad 端用户 |
| 场景 | 用户正在沉浸浏览页面，继续执行该页面本身支持的浏览操作 |
| 前置条件 | 当前页面支持沉浸模式，且页面本身存在可继续执行的浏览操作 |
| 用户目标 | 在沉浸状态下继续完成页面内浏览 |
| 操作路径 | 用户继续执行页面本身支持的滑动、缩放、拖动等浏览操作 |
| 结果 | 页面内浏览操作正常执行，且页面保持当前沉浸状态 |

### 用例 7：用户离开当前页面后重新进入

| 项目 | 内容 |
|---|---|
| 用户 | PC / Pad 端用户 |
| 场景 | 用户在沉浸模式下离开当前页面，后续再次进入同一页面或其他支持沉浸模式的页面 |
| 前置条件 | 当前页面处于沉浸模式 |
| 用户目标 | 重新进入页面时获得默认、可预期的界面状态 |
| 操作路径 | 用户离开当前页面 -> 再次进入同一页面或其他支持沉浸模式的页面 |
| 结果 | 系统不记录上一次的沉浸态；重新进入页面后，默认以常态展示 |

## 5. 功能说明

本次新增“资料集图片沉浸查看机制”。

页面仍保留现有浮动控件布局，不新增固定工具栏，不改变主画布结构。

沉浸查看时：

| 控件 | 常态 | 沉浸态 |
|---|---|---|
| 左上 Logo / 菜单 | 正常显示；菜单可处于关闭或打开状态 | 完全隐藏且不可交互；若菜单为打开状态，则进入沉浸态时先主动关闭 |
| 右上按钮组 | 正常显示 | 完全隐藏且不可交互 |
| 底部图片切换列表栏 | 根据常规操作可处于展开或收起状态 | 进入沉浸态时统一收起 |
| 底部列表控制按钮 | 正常显示 | 不受沉浸态控制，保持原有状态与功能 |
| 右下角画笔 | 按原页面规则显示 | 保持原有状态不变，确保用户在沉浸模式下使用画笔不受影响 |
| 左右切换提示 | 如现有页面有则保留 | 保持原有状态不变 |
| 当前图片内容 | 正常展示 | 减少被顶部控件视觉遮挡 |
| 沉浸 / 恢复按钮 | 显示“沉浸查看”按钮 | 按钮切换为“恢复”状态，并保留低透明度可见，点击后退出沉浸模式 |

规则说明：

- 沉浸模式仅控制页面顶部控件，不控制底部列表控制按钮。
- 进入沉浸态时，左上 Logo / 菜单、右上按钮组完全隐藏且不可交互。
- 若左上菜单在进入沉浸态前处于打开状态，进入沉浸态时应先主动关闭。
- 新增的沉浸按钮在进入沉浸态后切换为“恢复”状态，并保留低透明度可见，作为恢复顶部按钮的固定入口。
- 进入沉浸态时，底部图片切换列表栏统一收起，以优先释放主内容展示空间；底部列表控制按钮保持原有状态与功能，不受沉浸态控制。
- 底部图片切换列表栏的展开 / 收起仍由用户通过控制按钮主动操作，不因鼠标经过而自动展开。
- 沉浸态下，用户通过底部图片切换列表栏完成图片切换后，列表栏自动收起，页面继续保持沉浸态。
- 恢复按钮低透明度建议设计基准值为 10%，视觉稿阶段可在 5%-10% 范围内微调。
- 不改变页面 DOM 主结构，不移动控件位置。
- 顶部已隐藏按钮在沉浸态下不可点击；用户需先点击恢复按钮退出沉浸态，方可再次使用顶部按钮。

## 6. 状态定义

| 状态 | 说明 |
|---|---|
| 常态 | 用户刚进入页面，控件正常显示 |
| 沉浸态 | 页面顶部按钮完全隐藏且不可交互；沉浸按钮切换为低透明度“恢复”入口；底部图片切换列表栏收起；底部列表控制按钮保持原有状态 |

## 7. 交互规则

| 操作 | PC | Pad |
|---|---|---|
| 进入页面 | 默认显示现有全部浮动控件 | 默认显示现有全部浮动控件 |
| 进入沉浸态 | 点击右上角“沉浸查看”按钮 | 点击右上角“沉浸查看”按钮 |
| 退出沉浸态 | 点击低透明度显示的“恢复”按钮 | 点击低透明度显示的“恢复”按钮 |
| 沉浸态下操作顶部控件 | 顶部按钮完全隐藏且不可交互 | 顶部按钮完全隐藏且不可交互 |
| 沉浸态下操作底部列表 | 按原有方式点击底部列表控制按钮，展开 / 收起列表 | 按原有方式点击底部列表控制按钮，展开 / 收起列表 |
| 沉浸态下切换图片 | 通过底部列表完成切换后，列表自动收起，页面继续保持沉浸态 | 通过底部列表完成切换后，列表自动收起，页面继续保持沉浸态 |
| 原页面手势 / 操作 | 滚轮缩放时页面保持当前状态 | 左右滑动、双指缩放、拖动画布时，页面保持当前状态 |

补充说明：

- 在现有右上浮动按钮组中增加“沉浸查看”按钮；进入沉浸态后，该按钮切换为“恢复”按钮。
- PC / Pad 均不新增 hover、单击画布或其他额外恢复手势；恢复顶部按钮的唯一入口为低透明度显示的“恢复”按钮。

## 8. 移动端范围

移动端本期不增加沉浸模式逻辑。

原因：

- 当前移动端页面不存在顶部按钮遮挡图片的问题。
- 本次需求重点解决 PC / Pad 同一套资料集页面中的浮动控件遮挡问题。
- 为控制版本范围和实现成本，移动端保持现状。

## 9. 特殊场景规则

| 场景 | 规则 |
|---|---|
| 用户正在缩放图片 | 页面保持当前状态 |
| 用户正在拖动画布 | 页面保持当前状态，不打断拖动行为 |
| 用户连续左右滑动 | 保持图片切换流畅，页面维持当前状态 |
| 图片只有一张 | 底部图片切换列表栏按现有规则展示；进入沉浸态后仍统一收起 |
| 用户刷新页面 | 默认恢复常态 |
| 用户离开当前页面后再次进入 | 不记录上一次沉浸态，默认以常态展示 |

## 10. 验收标准

1. PC / Pad 端均支持通过“沉浸查看”按钮进入、通过“恢复”按钮退出沉浸态。
2. 本版本仅支持按钮触发沉浸态，不支持 3 秒无操作、图片缩放、单双击画布或其他手势自动进入 / 退出。
3. 进入沉浸态后，左上 Logo / 菜单、右上按钮组完全隐藏且不可交互；若菜单已打开则主动关闭。
4. 进入沉浸态后，新增沉浸按钮切换为“恢复”状态，并保留低透明度可见，用户可通过点击该按钮恢复顶部按钮。
5. 沉浸模式不控制底部列表控制按钮；进入沉浸态时仅自动收起底部图片切换列表栏。
6. 沉浸态下展开底部列表并完成图片切换后，列表自动收起，页面继续保持沉浸态。
7. 退出沉浸态时，顶部控件恢复常态；底部图片切换列表栏继承退出前的实时状态。
8. 用户离开当前页面后再次进入时，不记录上一次沉浸态，默认以常态展示。
9. 现有图片切换、缩放、拖动、返回、分享、翻译等原有功能不受影响。
10. 移动端本期不增加沉浸模式逻辑。

## 11. UI 设计需求

需补充以下设计产出：

| 设计项 | 说明 |
|---|---|
| 沉浸查看按钮 | 设计常态下的入口样式、图标、位置，以及进入沉浸态后的“恢复”按钮样式 |
| 顶部控件隐藏态 | 设计左上 Logo / 菜单、右上按钮组完全隐藏后的页面表现 |
| 恢复按钮低透明度状态 | 设计沉浸态下“恢复”按钮的低透明度表现，保证可识别但不明显遮挡内容 |
| 左上菜单处理 | 设计菜单打开状态进入沉浸态后，菜单主动关闭的状态 |
| 底部图片切换列表栏 | 设计沉浸态进入时的收起状态、展开后的状态，以及图片切换完成后再次收起的表现 |
| 底部列表控制按钮 | 确认在沉浸态下保持原状态不变后的整体视觉协调性 |
| 右下角画笔 | 确认沉浸态下保持原状态不变后的整体视觉协调性 |
| PC / Pad 适配 | 输出 PC 与 Pad 两端在同一套页面下的状态稿，明确恢复入口一致、底部列表操作一致 |