# MVP Widget清单与页面引用关系

版本：v0.14
状态：第一阶段 MVP 范围与配置驱动装配方式已确认

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-07-28 | v0.1 | 初始创建 / 重大范围确认 | 建立三个 MVP Widget 与三个页面的引用关系；确认移动端优先，以及现有 VISTA C 截图只作为功能和内容证据、不作为布局参考。 |
| 2026-07-28 | v0.2 | 重大：导航退出 MVP | 从三个页面的 MVP 装配中移除页面集合导航；导航保留为未来通用组件，不属于 Widget，也不作为本期页面验收项。 |
| 2026-07-28 | v0.3 | 重大：分享退出 MVP | 确认分享属于未来通用组件，不拆入三个 Widget，也不在 MVP 页面装配中显示分享入口。 |
| 2026-07-28 | v0.4 | 重大：国际化退出 MVP | 确认语言切换属于未来通用组件；三个 Widget 在 MVP 中只消费页面实例确定的一种发布语言，不做翻译或跨语言回退。 |
| 2026-07-28 | v0.5 | 重大：项目联系组件定稿 | 明确项目联系不属于 Widget；三个页面末尾统一挂载联系入口，点击后通过通用弹窗展示有效官网、邮箱和电话。 |
| 2026-07-29 | v0.6 | 重大：M-20 首次说明定稿 | 地图注意事项有定义时在当前页面浏览会话首次进入弹出，未定义时不显示。 |
| 2026-07-29 | v0.7 | 重大：M-10 筛选条件定稿 | 户型筛选条件确认为户型名称/类型、面积和 LDK。 |
| 2026-07-29 | v0.8 | 重大：M-10 展示模式定稿 | 列表、卡片滑动和单卡片由 Widget 实例决定，不由页面或数量自动切换。 |
| 2026-07-29 | v0.9 | 重大：M-10 面积区间定稿 | 面积区间依据全量可用户型自动生成 10㎡区间并隐藏空区间。 |
| 2026-07-29 | v0.10 | 重大：图片查看器手势定稿 | 明确手机和 PAD/PC 的缩放、平移、恢复适配及关闭规则，双击缩放不进入 MVP。 |
| 2026-07-29 | v0.11 | 重大：顾客登录与权限进入 MVP | 顾客登录组件作为三个页面共用的访问前置进入 MVP；Widget 只在页面权限通过后加载，不自行实现页面权限。 |
| 2026-07-29 | v0.12 | 重大：Widget 实例装配方式定稿 | 明确页面通过有序 Widget 实例清单与 Widget 注册表生成；实例独立接收数据和模式、独立隔离渲染错误，通用组件使用单独清单。 |
| 2026-07-29 | v0.13 | 重大：M-01 内容边界调整 | M-01 删除项目标识、项目 Logo 和装饰文案，开发主体改称开发商名称；同步封面整图、默认底图和纯文本长文滚屏规则。 |
| 2026-07-29 | v0.14 | 重大：页面通用组件范围调整 | 项目 Logo 与页面导航进入 MVP 通用组件体系，三个页面统一挂载；两者暂时独立，导航只展示可访问的同级页面。 |

## 1. 文档目的

本文件用于核对 MVP 页面实际使用哪些 Widget、每个 Widget 承担什么用户任务，以及现有截图中的功能哪些进入本期、哪些明确排除。

## 2. 页面与 Widget 一一对应

| 页面 | 主 Widget | Widget 核心任务 | 页面内其他对象 |
| --- | --- | --- | --- |
| 项目概览页 | M-01 项目概览 | 通过完整封面图和纯文本介绍建立项目认知。 | 项目 Logo、页面导航、顾客登录（受限时）、项目联系。 |
| 周边地图页 | M-20 周边地图 | 通过项目锚点、分类和 POI 理解周边关系。 | 项目 Logo、页面导航、顾客登录（受限时）、项目联系。 |
| 户型列表页 | M-10 户型卡片列表 | 筛选、浏览户型并查看户型图大图。 | 项目 Logo、页面导航、顾客登录（受限时）、图片查看器、项目联系。 |

每个页面只承载一个业务 Widget。项目 Logo、页面导航、顾客登录、项目联系、筛选控件、POI 卡片、户型卡片和图片查看器均不是新增业务 Widget。登录和页面权限检查通过前不得加载业务 Widget；Widget 不读取本地顾客记录，也不自行判断当前顾客权限。分享和语言切换属于未来通用组件，MVP 不渲染其入口。

上述“一页一个业务 Widget”是 MVP 页面配置结果，不是页面运行层限制。页面必须通过有序实例清单生成，而不是由路由直接选择一个手写整页组件：

- Widget 实例：`id + type + props`；`id` 区分同类实例，`type` 由 Widget 注册表解析，`props` 只传入本实例需要的数据和展示模式。
- 页面运行层：只负责实例顺序、注册表查找、通用组件挂载和局部错误隔离，不复制 Widget 业务规则。
- Widget 内部：自行管理筛选、地图视图、查看器开关等局部交互状态，但不自行读取页面权限或决定页面级 403/404。
- 通用组件：通过独立清单和注册表装配；项目联系不进入 Widget 注册表，登录与权限在业务内容渲染前处理。
- 异常隔离：单个 Widget 未注册或渲染失败时仅替换该实例；其他 Widget 和项目联系组件继续可用。

## 3. Widget清单

| Widget | 必需内容 | 核心功能 | MVP 明确排除 |
| --- | --- | --- | --- |
| M-01 项目概览 | 项目名称、完整封面图、纯文本项目介绍；开发商名称可选。 | 图文展示、可中断的长文自动滚屏、默认底图降级。 | 项目标识、项目 Logo、装饰文案、封面裁切、地图/户型入口、预约、视频背景、复杂卖点矩阵。 |
| M-20 周边地图 | 项目位置、至少一个公开 POI、POI 分类、Google 服务配置；注意事项可选。 | 有定义时首次注意事项、自动初始范围、地图缩放/拖动、项目锚点、分类切换、点位选择、可选图片的 POI 信息卡、回到项目位置、局部失败重试。 | 搜索、用户定位、路线、距离/时间承诺、政府图层、外部地图。 |
| M-10 户型卡片列表 | 至少一个可公开户型；户型图、名称/类型、LDK、面积。 | 户型/自动面积区间/LDK 筛选、Widget 实例决定列表/卡片滑动/单卡片模式、大图查看、状态恢复。 | 比较、样板间、WALK/VR、价格、住户状态、收藏。 |

## 4. 截图引用结论

| 截图证据 | 可复用功能事实 | 不继承内容 |
| --- | --- | --- |
| `01-首页与通用交互/01-首页-主界面.jpg`、`02-左侧导航展开.jpg` | 项目主视觉、项目 Logo 与全屏导航是当前 C 端的重要内容和功能证据。 | 全屏桌面构图、Logo 与菜单组合外观、旧导航层级、悬浮语言/分享工具。 |
| `16-周辺マップ/16-周辺マップ.jpg` | 首次注意事项、项目锚点、POI 分类、点位标记、点位图片/摘要。 | 弹窗尺寸、桌面悬浮面板位置、旧导航和工具布局。 |
| `04-間取図/04-間取図.jpg` | 户型卡片包含图纸、名称、格局、面积、可选说明。 | 七列桌面网格、比较、内览按钮、顶部工具。 |
| `04-間取図/02-户型点击详情.jpg` | 户型图需要大图查看。 | 旧全屏详情布局、比较和内览入口。 |
| `04-間取図/04-选择菜单.jpg` | 现有能力包含 LDK 和面积筛选；户型名称/类型筛选按本轮确认增加。 | 内览筛选及截图中写死的面积区间。 |

## 5. 移动端优先规则

- Widget 首先按 320px、375px 定义内容顺序、触控动作和局部状态。
- 768px、1024px、1440px 只扩展列数、并列关系和可视范围。
- 同一 Widget 不按设备拆成多个注册对象，也不使用不同数据口径。
- 每个 Widget 使用所在页面实例传入的发布语言；MVP 不自动翻译或跨语言回退。
- 现有截图为桌面端证据，不能被直接缩小为移动端方案。

## 6. 文档责任边界

- 页面 PRD：定义页面使用哪个 Widget、Widget 在页面中的顺序、页面级状态和移动端页面结构。
- Widget PRD：定义 Widget 内容来源、A 端配置、功能、状态、响应式能力和验收。
- 通用组件 PRD：MVP 定义项目 Logo、页面导航、顾客登录、项目联系、卡片、筛选面板和图片查看器的复用规则；分享和语言切换在核心能力补齐阶段另行定义。
- 数据字典：统一定义项目、POI、户型和联系资料的业务含义，不在 Widget 中写 API URL。
- 权限规则：统一决定页面公开/受限、登录和 B 端页面授权；不得复制进各 Widget。

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

- 截图可用于核对功能，不得作为新页面像素级或布局级事实源。
- 页面 PRD和 Widget PRD必须同时核对；任何功能只能有一个详细规则归属。
- 不得以页面路由直接选择手写整页业务组件；必须经页面配置、统一页面运行层和 Widget 注册表装配。
- Widget 实例的展示模式和数据必须来自实例输入；不得让 Widget 通过页面名称或全局变量猜测自己属于哪个页面。
- 新增第四个 Widget 前必须先更新 `00-C端交付总览与阶段路线图.md`。