# 页面导航组件 PRD

版本：v0.1
状态：第一阶段 MVP 范围已确认；页面集合来源待技术映射，视觉规格待设计定稿
组件标识：C-COM-05

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-07-29 | v0.1 | 初始创建 / 重大范围确认 | 将“入口按钮＋全屏展开导航”纳入第一阶段 MVP，定义三个同级页面的切换、权限过滤、独立页面降级和状态恢复规则；确认与项目 Logo 暂时分离。 |

## 1. 文档目的与适用对象

本文档用于产品、设计、开发、测试及 Codex 统一实现 C 端页面导航。

适用页面：

- 项目概览页
- 周边地图页
- 户型列表页

页面导航是页面通用组件，不是 Widget，不进入 A 端 Widget 注册或 Widget 内容排序。它不把任何页面定义为首页、子页面或系统顶栏。

## 2. 产品目标

当多个同级页面组成一次发布页面集合时，导航帮助顾客从当前页面切换到该集合内其他可访问页面；当页面单独发布或没有其他可访问页面时，页面仍能独立完成任务。

组件由两个部分组成：

1. 页面上的单一导航入口按钮。
2. 点击后覆盖当前视口的全屏导航内容。

## 3. MVP 范围与边界

### 3.1 包含

- 三个 MVP 页面统一挂载导航组件。
- 当前集合存在其他可访问页面时显示单一入口按钮。
- 点击入口后全屏打开导航。
- 展示当前页面和同一集合内其他已发布、有效且顾客有权访问的同级页面。
- 标识当前页面；选择其他页面后进入目标页面。
- 关闭导航后回到原页面并恢复其滚动、筛选、地图或查看状态。
- 手机、PAD、PC 响应式使用。
- 与项目 Logo 保持独立。

### 3.2 明确不做

- 固定首页、二级页、父子层级、面包屑或系统顶栏。
- 把项目概览页固定为导航起点或返回目标。
- 在导航中展示未发布、失效或顾客无权限的页面。
- 通过点击项目 Logo 打开导航。
- 分享、语言切换、预约、账号菜单、顾客信息和运营链接。
- 导航项拖拽配置、页面集合编辑等 B 端流程。
- 页面访问埋点和导航点击埋点。

## 4. 核心规则

### 4.1 页面同级与集合

- 导航只消费当前发布结果中的页面集合，不自行决定哪些页面应组合。
- 集合内页面均为同级页面；顺序只表达导航展示顺序，不表达父子关系。
- 当前页面必须通过自身 URL 直接访问；导航不是访问当前页的前置。
- 页面不在任何集合中，或权限过滤后只剩当前页时，隐藏导航入口，不显示空菜单或单项菜单。
- 页面集合由哪个既有 B 端发布对象提供，属于技术映射待确认；MVP 不因此新增 B 端业务流程。

### 4.2 权限与可见项

- 页面权限和登录在打开业务内容前完成。
- 导航仅接收当前顾客可以访问的页面清单；公开访问时仅展示允许当前匿名访问的页面。
- 无权限项不显示为禁用态，避免泄露页面名称和项目能力。
- 若目标页面在导航打开后被下线、取消授权或链接失效，进入既有 403 或 404 规则，不在导航组件内发明新状态页。

### 4.3 打开、关闭与切换

- 入口按钮具有明确“打开导航”的可访问名称。
- 全屏导航必须有明确关闭按钮；`Esc`、系统返回或设计稿规定的关闭手势不得导致用户离开当前页面。
- 当前页面项需要明确标识；点击当前项不重复加载页面。
- 切换目标页面后使用目标页面自身 URL，不把目标嵌入当前 Widget。
- 关闭导航后恢复打开前的页面状态和焦点。

## 5. 用户用例

### UC-NAV-01 在页面集合中切换

1. 顾客进入任一有权访问的页面。
2. 页面集合中还有其他可访问页面，入口按钮显示。
3. 顾客点击入口，全屏导航打开。
4. 导航标识当前页面并列出其他可访问的同级页面。
5. 顾客选择目标页面，进入该页面自身 URL。

### UC-NAV-02 关闭导航并继续当前任务

1. 顾客在地图筛选、户型浏览或长文阅读过程中打开导航。
2. 顾客点击关闭、按 `Esc` 或使用系统返回。
3. 导航关闭，焦点回到入口按钮。
4. 原页面的滚动、筛选、地图或查看状态保持不变。

### UC-NAV-03 独立页面无可切换目标

1. 当前页面不在集合中，或集合内其他页面均未发布、失效或无权限。
2. 页面隐藏导航入口。
3. 当前 Widget 和其他通用组件正常使用，页面仍可独立完成任务。

## 6. 状态

| 状态 | 触发 | 处理 |
| --- | --- | --- |
| 入口可见 | 至少存在一个其他可访问页面 | 显示单一导航入口。 |
| 入口隐藏 | 没有其他可访问页面 | 不显示空按钮或占位。 |
| 展开 | 用户打开导航 | 全屏显示有效页面项，锁定背景误触，保留当前页状态。 |
| 当前项 | 页面项等于当前页面 | 明确标识，不重复加载。 |
| 目标失效 | 切换时目标已无权或无效 | 按 403/404 统一规则处理。 |
| 组件失败 | 导航清单或组件运行失败 | 不影响当前页面 Widget；隐藏入口或显示可关闭的局部提示，不升级整页错误。 |

## 7. 响应式与设计系统

- 320px、375px：入口不得遮挡项目 Logo、主要内容和核心操作；全屏导航在一个视口内可关闭，页面项可纵向滚动。
- 768px、1024px、1440px：可以增加页面项列数和留白，但页面清单、权限和切换结果不变。
- 现有 VISTA C 全屏导航的液态玻璃语言、关闭按钮、当前项高亮和“不遮挡主体内容”原则可以作为设计依据。
- 本项目采用同级页面集合，且 Logo 与入口暂时分离；入口位置、页面卡片规格、空白区、动效和焦点样式为 **待设计系统补充**。
- 原型仅是结构与交互参考，不锁定最终布局。

## 8. 验收标准

| AC | Given | When | Then |
| --- | --- | --- | --- |
| AC-NAV-01 | 集合中至少有两个当前顾客可访问页面 | 打开任一页面 | 显示一个导航入口，点击后全屏展开。 |
| AC-NAV-02 | 全屏导航已打开 | 检查页面项 | 只显示同一集合中已发布、有效且当前顾客有权访问的页面。 |
| AC-NAV-03 | 当前页面项显示 | 用户点击当前项 | 不重复加载；当前项保持明确标识。 |
| AC-NAV-04 | 用户在页面产生滚动、筛选或地图状态 | 打开后关闭导航 | 原页面状态保留，焦点回到入口。 |
| AC-NAV-05 | 没有其他可访问页面 | 页面渲染 | 导航入口隐藏，当前页面仍独立可用。 |
| AC-NAV-06 | 顾客无权访问某页面 | 打开导航 | 不显示该页面名称、摘要或禁用卡片。 |
| AC-NAV-07 | 用户选择其他页面 | 导航执行切换 | 进入目标页面自身 URL，不产生首页/子页关系。 |
| AC-NAV-08 | 320px、375px、768px、1024px、1440px | 打开与关闭导航 | 入口不遮挡关键内容，全屏内容可滚动且始终可关闭。 |
| AC-NAV-09 | 检查 Logo 和导航 | 页面正常显示 | 两者是独立组件；点击 Logo 不打开导航。 |

## 9. 待确认事项

- 页面集合与顺序从现有 B 端哪个已发布对象读取，待技术方案映射；MVP 不新增 B 端业务流程。
- 入口按钮位置、图标、全屏导航卡片布局、转场动效及项目 Logo 的相对位置待设计稿确定。
- 设计定稿后是否将项目 Logo 与导航入口组合或复用，需另行作为重大需求变更确认。

## 10. 供 Codex 使用的执行说明

- 不得把项目概览页写成 HOME 或固定返回页。
- 不得在导航内展示无权限页面的禁用占位。
- 不得把导航项写入 M-01、M-20、M-10 的内容配置。
- 原型可使用三个 MVP 页面作为示例集合，但不得把该示例写成所有项目固定都有三页。