# MVP页面地图与组合规则

版本：v0.16
状态：第一阶段 MVP 页面模型、通用组件与装配方式已确认；三页响应式原型为设计参考

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-07-28 | v0.1 | 重大：新建页面体系 | 依据 `00-C端交付总览与阶段路线图` 锁定 MVP 的项目首页、周边地图页、户型列表页，以及三页的组合、导航、状态与验收边界。 |
| 2026-07-28 | v0.2 | 重大：页面模型调整 | 按“页面可分可合”原则重构：三个页面均为可独立访问、可组合交付的同级页面单元；项目首页更名为项目概览页，删除首页/二级页、父子关系、系统顶栏和固定返回路径。 |
| 2026-07-28 | v0.3 | 重大：移动端优先 | 新增移动端优先及截图使用规则；页面先按手机端确定内容顺序和触控操作，再扩展 PAD/PC，现有 VISTA C 截图不作为新布局参考。 |
| 2026-07-28 | v0.4 | 重大：导航与组合退出 MVP | 确认 MVP 只交付三个独立分享页面；导航作为未来通用组件，采用页面入口按钮打开全屏内容，但本期不开发、不展示入口，也不验收页面集合。 |
| 2026-07-28 | v0.5 | 重大：分享退出 MVP | 确认分享属于未来通用组件；MVP 保留页面独立访问 URL，但不交付页面内分享入口、复制链接、渠道面板、分享预览配置或分享追踪。 |
| 2026-07-28 | v0.6 | 重大：国际化退出 MVP | 确认 MVP 不开发语言切换、自动翻译和跨语言回退；每个页面实例仅按一种确定的发布语言展示页面、Widget 和组件内容。 |
| 2026-07-28 | v0.7 | 重大：项目联系组件定稿 | 确认三个页面末尾固定显示联系入口，点击后弹窗展示官网、邮箱、电话中的有效项；至少一项有效是页面发布前置。 |
| 2026-07-29 | v0.8 | 重大：顾客登录与页面授权进入 MVP | 三个页面均支持公开访问和顾客登录后访问；受限页面无有效会话时调用登录组件，登录成功后按 B 端授权校验当前页面实例。 |
| 2026-07-29 | v0.9 | 重大：整页状态范围定稿 | MVP 只定义 403、404 两个整页状态；未登录、会话过期和登录失败由登录组件承接。 |
| 2026-07-29 | v0.10 | 重大：登录分支与顾客记录定稿 | 页面进入流程增加指定顾客、免密码、邮箱加密码三种登录分支；登录成功后保存最少的顾客识别信息，供后续数据上报关联顾客。 |
| 2026-07-29 | v0.11 | 重大：免密码设置归属定稿 | 免密码改为“用户分享设置”中的顾客级统一设置；同一顾客的所有分享页面共用，页面和单条链接不能覆盖。 |
| 2026-07-29 | v0.12 | 重大：B端流程边界定稿 | 页面登录流程直接读取现有 B 端分享验证结果；MVP 不新增或修改 B 端业务流程、设置页面和分享生成方式。 |
| 2026-07-29 | v0.12 | 非重大：原型交付同步 | 三个同级页面已分别提供独立响应式原型入口，原型总入口仅用于评审选页，不进入顾客产品界面。 |
| 2026-07-29 | v0.13 | 重大：页面装配技术边界定稿 | 页面改为由 PageDefinition 有序声明 Widget 实例和通用组件实例，经统一 PageRenderer 与注册表装配；禁止继续按路由手写彼此独立的整页业务组件。 |
| 2026-07-29 | v0.14 | 重大：项目概览内容规则调整 | M-01 删除项目标识和装饰文案，开发主体改称开发商名称；封面整图显示并使用默认底图降级，纯文本长介绍支持可中断自动滚屏。 |
| 2026-07-29 | v0.15 | 重大：项目 Logo 与导航进入 MVP | 三页增加独立项目 Logo 和页面导航通用组件；导航以单一入口全屏展开，只显示同一集合内当前顾客可访问的同级页面。 |
| 2026-08-03 | v0.16 | 引用迁移 | 项目 Logo 与页面导航组件引用迁移到合并后的当前组件需求目录；页面组合规则不变。 |

## 1. 文档目的与范围

本文件定义 MVP 三个页面单元的独立交付与同级组合规则。每页均可通过自身 URL 独立使用；同一发布页面集合存在其他可访问页面时，通过页面导航组件切换。

本文件不定义 Widget 内部字段、数据来源、地图交互、户型卡片或导航组件内部细节；这些内容分别进入 M-01、M-20、M-10 的 Widget PRD及通用组件 PRD。

适用范围仅限：

- C-MVP-01 项目概览页
- C-MVP-02 周边地图页
- C-MVP-03 户型列表页
- MVP 顾客登录通用组件与页面级权限判断
- MVP 统一的 403、404 访问结果
- 为未来页面组合保留的非功能性兼容约束

## 2. 核心设计原则：页面可分可合

### 2.1 页面单元

每个页面都是一个完整的交付单元，必须满足：

1. 有独立访问入口和稳定页面标识。
2. 不依赖另一个页面先加载或提供上下文。
3. 独立访问时可以完成本页核心用户任务。
4. 自行处理本页加载、空数据和局部异常。
5. 独立读取线上访问模式；公开页面匿名直达，受限页面登录后校验当前页面授权。
6. 未登录调用登录组件，登录后无权落入 403，页面无效落入 404。
7. 不把其他页面称为父页面、子页面、首页、二级页或详情页。

### 2.2 页面组合边界

“页面可合”在 MVP 中以最小方式实现，不改变页面同级和独立访问原则。

- 页面导航属于通用组件，不属于 Widget，也不进入 A 端 Widget 注册、排序或内容配置。
- 页面保留一个导航入口按钮；点击后全屏打开导航内容。
- 导航只显示同一发布页面集合中已发布、有效且当前顾客可访问的页面。
- 页面没有其他可访问目标时隐藏导航入口，不交付空按钮、禁用按钮或单项菜单。
- 集合顺序只表达导航展示顺序，不建立首页、父子或默认返回关系。
- 页面集合与顺序的既有 B 端来源由技术方案映射；MVP 不新增 B 端编辑流程。
- 组合使用必须复用本期页面、Widget 和数据，不得复制集合专用页面或改变本页业务范围。

### 2.3 与 VISTA C 设计系统的关系

本期仍采用 VISTA C 的内容优先、主体内容不被控制项遮挡、全屏导航、卡片页面和图片查看等组件原则。

现有 VISTA C 设计系统已有全屏导航和非首页导航，但本项目采用的“单入口按钮打开全屏导航”仍需结合新的同级页面模型补充，因此：

- MVP 不采用现有首页/非首页层级或系统顶栏，但复用全屏导航的液态玻璃语言、关闭操作、当前项高亮和“不遮挡主体内容”原则。
- 本项目的同级页面集合、独立项目 Logo、单一入口位置和响应式布局为 **待设计系统补充**。
- 项目 Logo 和导航入口先按两个组件实现；不得因旧 VISTA 外观在设计定稿前合并。

### 2.4 移动端优先与截图使用

- 320px、375px 是页面内容和核心操作的第一验收视口；768px、1024px、1440px 用于验证 PAD/PC 响应式扩展。
- 移动端先确定内容优先级、纵向顺序、触控目标、滚动行为、图片查看和局部错误位置。
- PAD/PC 只扩展列数、并列关系和可视范围，不改变页面任务、Widget 数据、操作结果和空/错状态。
- `截图/C端实际Demo/` 用于识别现有功能和内容：例如地图的项目锚点、POI 分类与点位卡，户型的卡片字段、筛选和大图查看。截图中的横屏导航、浮动工具、卡片网格、比较和样板间按钮不自动进入 MVP。
- 新页面不得复刻现有 VISTA C 的桌面构图后再压缩到手机。

## 3. 页面地图

```mermaid
flowchart LR
    D["任一独立页面链接"] --> V{"页面存在且已发布？"}
    V -- "否" --> E404["404"]
    V -- "是" --> A{"允许未登录访问？"}
    A -- "是" --> P["进入对应页面"]
    A -- "否" --> S{"顾客登录有效？"}
    S -- "否" --> G{"链接已指定顾客？"}
    G -- "是" --> H{"该顾客统一设为免密码？"}
    H -- "是" --> SAVE["确认顾客并保存本地顾客记录"]
    H -- "否" --> PW["只输入密码"]
    G -- "否" --> EP["输入顾客邮箱和密码"]
    PW --> LOGINOK{"登录通过？"}
    EP --> LOGINOK
    LOGINOK -- "否" --> RETRY["组件内提示并重试"]
    LOGINOK -- "是" --> SAVE
    SAVE --> R{"顾客可以访问当前页面？"}
    S -- "是" --> R
    R -- "是" --> P
    R -- "否" --> E403["403"]
    P --> N{"同一集合还有其他可访问页面？"}
    N -- "是" --> NAV["显示导航入口，点击后全屏展开"]
    N -- "否" --> SOLO["隐藏导航入口，页面独立使用"]
```

图中不存在由项目概览页指向其他页面的父子关系。MVP 三页均通过各自链接独立进入；权限通过后，页面导航组件可提供同级页面集合入口。

## 4. 页面清单与装配边界

| 页面标识 | 页面名称 | 核心用户结果 | 主 Widget | 页面固定/内部组件 |
| --- | --- | --- | --- | --- |
| C-MVP-01 | 项目概览页 | 识别项目身份并理解项目介绍和核心价值。 | M-01 项目概览 | 项目 Logo、页面导航、顾客登录（受限时）、项目联系。 |
| C-MVP-02 | 周边地图页 | 围绕固定项目位置理解已配置的周边 POI。 | M-20 周边地图 | 项目 Logo、页面导航、顾客登录（受限时）、地图分类切换、POI 信息卡、项目联系。 |
| C-MVP-03 | 户型列表页 | 浏览可公开户型并查看户型图大图。 | M-10 户型卡片列表 | 项目 Logo、页面导航、顾客登录（受限时）、户型卡片、图片查看器、项目联系。 |

页面文档只负责装配哪个 Widget、页面级访问与页面状态；Widget 内部内容、动作与降级规则不得在本文件重复定义。

### 4.1 页面配置与运行层

- 每个业务页面以一份页面配置描述，至少包含页面标识、路由、页面样式、有序 Widget 实例清单和通用组件实例清单。
- 每个 Widget 实例至少包含实例标识 `id`、Widget 类型 `type` 和本实例输入 `props`；同一 Widget 类型可以在不同页面或同一页面拥有不同实例输入。
- 统一页面运行层按配置顺序读取实例，再由 Widget 注册表将 `type` 映射到具体实现；页面运行层不得包含 M-01、M-20、M-10 的业务规则。
- 项目联系等通用组件使用独立注册表，不伪装成 Widget；顾客登录、权限判断、403、404 位于业务页面运行层之前。
- 每个 Widget 实例单独进行渲染错误隔离；实例未注册或运行失败时，仅在该实例位置显示局部错误，不升级为整页 403/404。
- 当前三页各只有一个业务 Widget 是 MVP 产品范围。运行层必须支持有序装配多个 Widget，但这不代表 MVP 新增多 Widget 页面，也不代表所有项目固定拥有相同三页集合。
- 原型 URL 的 `mode`、`empty`、`map` 参数只用于验证不同 Widget 实例/异常场景；正式产品由已发布页面配置和业务数据决定，不以 URL 参数代替后台配置。

## 5. MVP 独立交付规则

- 每个页面通过自身稳定链接直接进入。
- 每个页面独立读取当前线上发布快照中的 `anonymous_access`，不读取编辑中未发布的访问方式。
- 公开页面允许匿名直达；受限页面没有有效登录时先调用顾客登录组件。
- 链接指定顾客时读取该顾客在“用户分享设置”中的统一免密码设置；普通顾客只输入密码，免密码顾客不显示输入框。
- 链接未指定顾客时输入顾客邮箱和密码；通过邮箱找到顾客后，普通顾客需要密码正确，免密码顾客不判断密码是否正确。
- 同一顾客所有分享页面共用一份免密码设置，页面和单条分享链接不能覆盖；修改后在该顾客下次登录时统一生效。
- 指定顾客、顾客邮箱、密码、免密码状态和页面访问结果均来自现有 B 端分享验证；C 端不新增 B 端设置或操作步骤。
- 顾客登录成功后必须检查该顾客能否访问当前页面；登录成功不等于自动有权。
- 登录成功后在当前浏览器保存系统生成的顾客识别编号，供后续数据上报关联顾客；不保存密码，不把邮箱作为默认上报参数。
- 未登录、登录失效、邮箱或密码错误不进入状态页；登录后无权进入 403，页面不存在、未发布、已下线或链接无效进入 404。
- 登录和权限通过前不得渲染项目 Widget、联系方式或受限摘要。
- 页面通过独立导航组件展示同一集合内可访问页面；不在 Widget 内增加跨页入口，也不展示分享入口或语言切换入口。
- 浏览器返回遵循用户实际来源，不跳转至项目概览页。
- 页面在本页会话内保留必要的筛选、滚动或地图临时状态。
- 页面主要内容结束后固定显示项目联系入口；点击后打开联系方式弹窗。
- 项目公共官网、邮箱和电话至少有一项有效，否则页面不得发布。
- 页面实例使用一种确定的发布语言；页面文案、Widget 内容和通用组件文案使用同一语言上下文。
- 当前发布语言的必需内容缺失时按内容缺失或发布校验处理，不自动改用其他语言。

## 6. 页面组合兼容约束

- 页面不读取“我是不是首页”之类的层级状态。
- 页面不得要求必须存在项目概览页、地图页或户型页。
- 页面不得把返回项目概览页作为完成本页任务的必要动作。
- Widget 不能因加入导航或页面组合而改变业务范围。
- 页面通过通用组件挂载项目 Logo 和导航，不在 Widget 内复制。
- 页面集合成员和顺序由已发布结果提供；导航仅展示当前身份可访问页面，无权限项不显示。
- 关闭导航后恢复当前页面的滚动、筛选、地图或查看状态。
- 分享属于未来通用组件，不得拆进 M-01、M-20 或 M-10；其入口、复制链接、渠道、预览信息和追踪规则另行定义。
- 语言切换属于未来通用组件，不得拆进三个 Widget；多语言版本、语言选择和回退规则在后续阶段定义。

## 7. 各页面的页面级状态

本节只定义页面状态，不定义 Widget 内部状态。

| 页面 | 正常页面状态 | 页面级不可用 | Widget 局部状态 |
| --- | --- | --- | --- |
| 项目概览页 | 公开直达，或顾客登录且有本页权限；M-01 可完成项目认知任务。 | 未登录时调用登录组件；已登录无权进入 403；项目/页面无效进入 404。 | M-01 可选素材缺失或局部图片失败，由 M-01 降级。 |
| 周边地图页 | 公开直达，或顾客登录且有本页权限；M-20 具备项目位置和可用 POI。 | 未登录时调用登录组件；已登录无权进入 403；项目/页面无效进入 404。 | Google 服务失败、单类 POI 失败由 M-20 局部处理。 |
| 户型列表页 | 公开直达，或顾客登录且有本页权限；M-10 可读取可公开户型集合。 | 未登录时调用登录组件；已登录无权进入 403；项目/页面无效进入 404。 | 户型为空、单张图失败、图片查看失败由 M-10 或图片查看器处理。 |

## 8. MVP 验收标准

| AC | Given | When | Then |
| --- | --- | --- | --- |
| AC-01 | 任一页面已独立发布 | 用户通过本页链接进入 | 无需经过项目概览页即可完成本页核心任务。 |
| AC-02 | 页面或项目不存在、未发布、链接失效 | 用户直接访问 | 进入统一 404，不跳转到项目概览页兜底。 |
| AC-03 | 受限页面尚未有效登录 | 用户直接访问 | 调用顾客登录组件，不渲染受限内容，也不进入 403。 |
| AC-04 | Google 地图或户型图片局部失败 | 用户仍在对应页面 | 只处理 Widget/组件局部错误，其他页面框架和项目联系组件保持可用。 |
| AC-05 | 页面集合存在其他可访问页面 | 用户查看并打开导航 | 只出现一个导航入口；全屏内容只显示可访问的同级页面，不出现分享或语言切换。 |
| AC-06 | 页面进入移动端验收 | 在 320px、375px 打开 | 不依赖横向滚动或桌面悬浮控件即可完成核心任务。 |
| AC-07 | 同一页面扩展到 PAD/PC | 在 768px、1024px、1440px 打开 | 内容顺序和业务规则保持一致，仅调整布局密度与并列方式。 |
| AC-08 | 页面实例指定一种发布语言 | 用户打开任一页面 | 页面文案、Widget 内容和组件文案使用同一语言，不自动混入其他语言。 |
| AC-09 | 项目有至少一种有效公共联系方式 | 用户点击页面末尾联系入口 | 弹窗打开并仅展示有效的官网、邮箱、电话项。 |
| AC-10 | 官网、邮箱、电话均缺失或无效 | 尝试发布任一页面 | 发布被阻止，不生成空弹窗或无效入口。 |
| AC-11 | 顾客登录成功且拥有当前页面授权 | 完成 C 端校验 | 进入原目标页面，不跳转项目概览页。 |
| AC-12 | 顾客登录成功但没有当前页面授权 | 完成 C 端校验 | 进入 403，不显示项目或页面摘要。 |
| AC-13 | 页面不存在、未发布、已下线或链接无效 | 任意身份访问 | 进入 404，不显示旧发布内容。 |
| AC-14 | 检查 MVP 整页状态 | 遍历访问异常 | 只存在 403、404；登录失败和登录失效留在登录组件。 |
| AC-15 | 链接指定普通顾客 | 打开受限页面 | 只显示密码。 |
| AC-16 | 链接指定顾客，且该顾客统一设为免密码 | 打开受限页面 | 不显示登录输入框，直接确认顾客并检查页面权限。 |
| AC-17 | 链接未指定顾客 | 打开受限页面 | 显示顾客邮箱和密码；免密码顾客不判断密码是否正确。 |
| AC-18 | 任一种登录成功 | 检查浏览器本地记录 | 保存顾客识别编号，不保存密码，不把邮箱作为默认上报参数。 |
| AC-19 | 顾客切换、退出或登录失效 | 状态变化 | 清除原顾客记录。 |
| AC-20 | 同一顾客分享多个页面 | 分别打开并完成登录 | 所有页面使用该顾客“用户分享设置”中的同一份免密码设置。 |
| AC-21 | 修改某顾客的免密码设置 | 该顾客再次登录已有或新分享页面 | 所有分享页面使用修改后的设置，其他顾客不受影响。 |
| AC-22 | 检查 MVP 对 B 端的影响 | C 端接入分享验证 | 沿用 B 端已有业务流程，不新增 B 端页面、字段或操作步骤。 |
| AC-23 | 任一 MVP 页面配置已发布 | 页面运行层加载配置 | 按 Widget 实例清单顺序通过注册表装配，页面路由不直接选择手写整页业务组件。 |
| AC-24 | 某个 Widget 实例未注册或渲染失败 | 同页仍存在其他实例或项目联系组件 | 只在失败实例位置显示局部错误，其余已成功实例继续可用，不进入 403/404。 |
| AC-25 | 当前页面没有其他可访问页面 | 页面渲染 | 导航入口隐藏，页面仍可通过自身 URL 独立完成核心任务。 |
| AC-26 | 项目 Logo 有效或缺失 | 页面渲染 | 有效时由独立通用组件显示；缺失或失败时隐藏，不以 HOMEVISTA Logo 代替。 |
| AC-27 | 导航打开后关闭 | 页面此前已有滚动、筛选、地图或查看状态 | 原页面状态保留，焦点回到导航入口。 |

## 9. 明确不做

- 固定首页、二级页、父子页面、面包屑层级和系统顶栏。
- 强制从项目概览页进入地图或户型列表。
- 在项目概览页内固化地图页、户型页入口。
- 新增或改造 B 端页面集合编辑流程、固定首页、默认返回页和父子层级。
- 让项目 Logo 兼作导航入口；该项待设计定稿后另行确认。
- 分享入口、复制链接、渠道面板、分享预览配置和分享追踪。
- 语言切换入口、多语言版本管理、自动翻译和跨语言回退。
- 顾客注册、找回/重置密码、验证码、社交登录、顾客中心和全局账号菜单。
- 401、410、429 及 5xx 产品状态页。
- 为未来独立模式和组合模式开发两套页面或两套 Widget。
- 复用现有 VISTA C 桌面布局、卡片列数、浮动工具位置或系统顶栏。

## 10. 后续文档归属

| 事项 | 归属 |
| --- | --- |
| 三个页面的用户用例、页面装配、页面状态和验收 | 本目录的三份页面 PRD |
| M-01、M-20、M-10 的内容、数据、交互和局部异常 | `02-Widget体系/` |
| MVP 的项目联系组件、顾客登录组件、户型卡片、图片查看器 | `03-通用组件体系/` |
| 项目 Logo 与页面导航组件 | `03-通用组件体系/01-项目识别组件PRD.md`、`02-页面导航组件PRD.md` |
| 未来分享组件 | 核心能力补齐阶段的 `03-通用组件体系/` |
| 未来语言切换组件与多语言规则 | 核心能力补齐阶段的 `03-通用组件体系/` 和数据规则文档 |
| 项目、POI、户型和联系方式的数据含义 | `04-项目内容数据与素材字典.md` |
| 403 触发与访问对象 | `05-权限与访问控制规则.md` |
| 403、404 页面本身 | `06-系统状态与错误页规则.md` |

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

- 不得把“项目概览页”重新命名或实现为首页。
- 不得引用 VISTA C 现有首页/非首页导航和系统顶栏来恢复页面层级。
- MVP 原型分别显示项目 Logo 与导航入口；导航采用“单一入口按钮打开全屏内容”的通用组件模型。
- 原型可用三个 MVP 页面模拟页面集合，但不得把三页写成所有项目固定配置；入口位置、内容布局和动效为待设计系统补充。
- MVP 原型不得显示分享按钮或分享弹窗；VISTA C 已有分享弹窗类别，但详细规格不完整，未来组件仍需标记为待设计系统补充。
- MVP 原型不得显示语言切换入口；VISTA C 已有 i18n 弹窗类别，但详细规格不完整，未来组件仍需标记为待设计系统补充。
- 受限页面原型必须先验证登录前不泄露内容、登录后重新授权、403 切换账号和 404 不展示项目信息。
- 新增第四个页面或任何页面依赖前，必须先修改 `00-C端交付总览与阶段路线图.md` 并新增重大修订记录。