# 户型列表页 PRD

版本：v0.12
状态：第一阶段 MVP 页面与通用组件范围已确认；响应式原型为设计参考，待开发

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-07-28 | v0.1 | 初始创建 | 按“页面可分可合”原则创建户型列表页 PRD。 |
| 2026-07-28 | v0.2 | 重大：内容与移动端重写 | 以 M-10 的筛选、列表/滑动/单卡片、大图查看和移动端操作流程重写；从现有截图提取功能，不继承桌面网格布局，并继续排除比较与样板间。 |
| 2026-07-28 | v0.3 | 重大：导航退出 MVP | 确认本页 MVP 仅通过独立链接交付，不显示导航入口或页面集合；未来导航作为通用组件挂载，不改变 M-10。 |
| 2026-07-28 | v0.4 | 重大：分享退出 MVP | 确认分享属于未来通用组件；本页 MVP 仅保留独立访问 URL，不显示分享入口或分享弹窗。 |
| 2026-07-28 | v0.5 | 重大：国际化退出 MVP | 确认本页 MVP 不显示语言切换入口；筛选、户型和组件文案统一使用页面实例的发布语言，不做跨语言回退。 |
| 2026-07-28 | v0.6 | 重大：项目联系组件定稿 | 将原联系页脚改为页尾联系入口；点击后弹窗展示官网、邮箱、电话中的有效项，至少一项有效是本页发布前置。 |
| 2026-07-29 | v0.7 | 重大：筛选条件定稿 | MVP 筛选条件确认为户型名称/类型、面积和 LDK，继续排除内览等条件。 |
| 2026-07-29 | v0.8 | 重大：展示模式定稿 | 列表、卡片滑动、单卡片由 M-10 Widget 实例明确决定，不由页面或户型数量自动切换。 |
| 2026-07-29 | v0.9 | 重大：面积区间定稿 | 面积筛选从全量可用户型自动生成 10㎡区间并隐藏空区间，不提供手工区间配置。 |
| 2026-07-29 | v0.10 | 重大：大图手势定稿 | 明确手机与 PAD/PC 的缩放、平移、恢复适配和关闭规则，双击缩放不进入 MVP。 |
| 2026-07-29 | v0.11 | 重大：顾客登录与权限进入 MVP | 本页支持公开访问和顾客登录后访问；受限访问先调用登录组件，登录后无本页授权进入 403，页面无效进入 404。 |
| 2026-07-29 | v0.11 | 非重大：原型交付同步 | 已完成筛选、列表/滑动/单卡片三种实例模式、空状态和户型图查看器的响应式交互原型。 |
| 2026-07-29 | v0.12 | 重大：项目 Logo 与导航进入 MVP | 本页增加独立项目 Logo 组件和“入口按钮＋全屏展开”导航组件；导航只显示同一集合内当前顾客可访问的同级页面，不改变 M-10。 |

## 1. 页面目标与范围

户型列表页让顾客浏览项目可公开户型，使用户型名称/类型、面积和 LDK 条件缩小范围，并查看户型图大图。MVP 通过本页独立 URL 访问。

本页只有一个业务 Widget：**M-10 户型卡片列表 Widget**。户型卡片、筛选面板和图片查看器是 M-10 使用的组件，不拆成独立页面或 Widget。项目 Logo、页面导航和项目联系是页面通用组件；顾客登录组件在页面展示前处理受限访问。它们均不属于 M-10。

## 2. 页面 Widget 与内容结构

进入户型内容前先按 [`../05-权限与访问控制规则.md`](../05-权限与访问控制规则.md) 完成访问判断。受限页面必须在请求户型集合、筛选选项和户型图前调用 [`../03-通用组件体系/13-顾客登录组件PRD.md`](../03-通用组件体系/13-顾客登录组件PRD.md)，登录且有本页授权后才加载 M-10。

| 顺序 | 页面对象 | 本页使用内容 | 用户动作 | 详细规则来源 |
| --- | --- | --- | --- | --- |
| 页面层 | 项目 Logo 组件 | 有效项目 Logo；缺失或加载失败时隐藏 | 只识别项目，不触发导航 | [`../03-通用组件体系/01-项目识别组件PRD.md`](../03-通用组件体系/01-项目识别组件PRD.md) |
| 页面层 | 页面导航组件 | 入口按钮与可访问同级页面的全屏导航 | 打开/关闭、切换页面 | [`../03-通用组件体系/02-页面导航组件PRD.md`](../03-通用组件体系/02-页面导航组件PRD.md) |
| 1 | 户型页面标题/结果摘要 | 页面名称、当前结果数量（有可靠口径时） | 理解当前户型范围 | [`../02-Widget体系/Widget需求/02-户型卡片列表Widget-PRD.md`](../02-Widget体系/Widget需求/02-户型卡片列表Widget-PRD.md) |
| 2 | M-10 筛选 | 户型名称/类型、自动 10㎡面积区间、LDK；选项由 Widget 全量可用数据产生 | 选择、确认、重置 | 同上 |
| 3 | M-10 户型内容 | Widget 实例决定列表、卡片滑动或单卡片模式；户型图、名称、LDK、面积及可选说明 | 滚动/滑动、打开大图 | 同上 |
| 4 | 图片查看器 | 当前户型的大图 | 缩放、平移、恢复适配、关闭 | [`../03-通用组件体系/04-媒体查看器组件PRD.md`](../03-通用组件体系/04-媒体查看器组件PRD.md) |
| 5 | 项目联系组件 | 页尾联系入口；弹窗内展示有效的项目公共官网、邮箱、电话 | 打开/关闭弹窗，访问官网、发邮件或拨打电话 | [`../03-通用组件体系/03-项目联系组件PRD.md`](../03-通用组件体系/03-项目联系组件PRD.md) |

比较、样板间/WALK/VR、价格、住户状态和收藏不进入本页。

## 3. 移动端优先布局

### 3.1 手机端 320px / 375px

1. 项目 Logo 与导航入口不得遮挡页面标题、筛选入口或户型卡片操作。
2. 页面标题和筛选入口位于户型内容之前。
3. 筛选包含户型名称/类型、面积和 LDK，使用底部面板或全宽弹层；选项触控区域必须可操作，不复用桌面右上角小弹窗。
4. 多户型列表模式默认单列纵向卡片；卡片滑动模式一次突出一张卡片并显示下一张的部分提示；单卡片模式直接展示一张完整卡片。
5. 卡片先显示户型图，再显示户型名称、LDK/格局、面积和可选说明；不把关键信息压成桌面卡片缩略字。
6. 点击户型图打开全屏图片查看器；手机支持双指缩放、放大后平移、恢复适配和关闭，双击不缩放。
7. 关闭图片查看器后恢复原卡片、筛选和滚动位置。

### 3.2 PAD / PC 响应式扩展

- 768px：多户型列表可扩展为两列；滑动和单卡片模式保持其模式语义。
- 1024px、1440px：可按可读宽度增加列数或并列筛选区，但不得直接照搬现有 VISTA 的七列紧凑卡片网格。
- 所有端使用相同筛选条件、户型数据、卡片动作和大图查看规则。

## 4. 核心用户用例

### UC-FP-01 浏览并筛选多个户型

**前置条件：** 页面已发布；M-10 至少有一个可公开户型。

**主流程：**

1. 用户在手机打开户型列表页。
2. 页面展示当前户型集合。
3. 用户打开筛选，选择户型名称/类型、面积和/或 LDK 并确认。
4. M-10 更新结果并回到结果起始位置。
5. 用户浏览符合条件的户型卡片。

**成功结果：** 用户能通过基础条件缩小户型范围，并理解每张卡片的核心信息。

### UC-FP-02 在不同展示模式浏览

- 列表模式：用户纵向滚动浏览一组户型。
- 卡片滑动模式：用户横向滑动逐张浏览，当前卡片明确，不能误认为已到末尾。
- 单卡片模式：只展示一个户型，不显示无意义的滑动、分页和结果切换。

三种模式使用同一 M-10、同一户型数据和同一筛选规则。具体模式由 Widget 实例决定；页面和户型数量不得自动改写模式。

### UC-FP-03 查看户型图大图

1. 用户点击卡片中的户型图或查看大图动作。
2. 图片查看器全屏打开对应图纸。
3. 用户通过约定的缩放、平移和恢复适配操作查看细节并关闭。
4. 页面恢复打开前的筛选、卡片和滚动位置。

**异常：** 大图失败时在查看器内提示并允许关闭；列表不丢失。

### UC-FP-04 筛选无结果或运行时空数据

- 筛选无结果：显示当前条件和重置操作。
- 运行时没有可公开户型：显示真实空状态，不生成示例卡片，不自动跳转其他页面。
- 个别户型缺失必需内容：不进入可浏览集合。

### UC-FP-05 登录后查看受限户型

1. 顾客打开不允许未登录访问的户型列表页。
2. 页面在请求户型集合和图片前调用顾客登录组件。
3. 登录成功后校验当前顾客对本页面实例的授权。
4. 有授权时加载原户型列表页；无授权时进入 403。
5. 页面不存在、未发布、已下线或链接无效时进入 404。

## 5. 页面状态

| 状态 | 页面处理 |
| --- | --- |
| 正常多户型 | 按 Widget 实例配置的列表或滑动模式显示。 |
| 正常单户型 | 按 Widget 实例模式显示；隐藏无意义的分页、滑动提示和筛选维度。 |
| 筛选无结果 | 显示空结果与重置筛选。 |
| 运行时无可公开户型 | 显示页面空状态，不自动跳转其他页面。 |
| 单张大图失败 | 图片查看器局部错误，可关闭返回。 |
| M-10 不可启用 | 阻止页面发布。 |
| 项目 Logo 缺失或失败 | 隐藏项目 Logo，不影响户型内容或导航。 |
| 没有其他可访问页面 | 隐藏导航入口，户型页仍独立可用。 |
| 受限页面尚未有效登录 | 调用顾客登录组件；不请求或渲染户型集合、筛选和图片。 |
| 已登录但无本页授权 | 进入统一 403。 |
| 项目/页面不存在、未发布、已下线或链接无效 | 进入统一 404。 |

## 6. 验收标准

| AC | Given | When | Then |
| --- | --- | --- | --- |
| AC-FP-01 | 320px、375px 多户型数据 | 用户浏览 | 卡片核心信息清晰可读，不依赖桌面七列网格或横向页面滚动。 |
| AC-FP-02 | 用户按户型/面积/LDK 筛选 | 确认条件 | 三个维度按 AND 组合，结果只包含匹配户型，并可一键重置。 |
| AC-FP-03 | Widget 实例配置列表/滑动/单卡片任一模式 | 用户打开页面 | 按配置模式展示，使用同一数据和规则，不由页面或数量自动改写。 |
| AC-FP-04 | 用户查看大图后关闭 | 原页面仍在会话中 | 恢复原筛选、卡片和滚动位置。 |
| AC-FP-05 | 筛选无结果 | 用户查看页面 | 显示条件和重置，不推荐不存在的户型。 |
| AC-FP-06 | 768px、1024px、1440px | 页面响应式扩展 | 可增加列数，但卡片内容、顺序、动作和状态不变。 |
| AC-FP-07 | 检查全部可见动作 | 用户操作 | 不出现比较、样板间、WALK/VR、价格、收藏或预约。 |
| AC-FP-08 | 页面实例指定一种发布语言 | 用户筛选并浏览户型 | 筛选项、户型名称/说明和组件文案使用同一语言，不自动混入其他语言。 |
| AC-FP-09 | 页面正常发布且联系方式有效 | 用户点击页尾联系入口 | 弹窗打开并只展示有效的官网、邮箱、电话项；关闭后保留筛选、卡片和滚动位置。 |
| AC-FP-10 | 全量可用户型具有不同面积 | 页面显示面积筛选 | 以 10㎡左闭右开区间展示，空区间隐藏，筛选过程中区间稳定。 |
| AC-FP-11 | 用户在手机或 PAD/PC 查看大图 | 执行对应缩放、平移、恢复适配和关闭操作 | 图纸可查看，双击不缩放；关闭后恢复原筛选、卡片和滚动位置。 |
| AC-FP-12 | 本页允许未登录访问 | 匿名顾客打开 | 直接加载 M-10，不出现登录组件。 |
| AC-FP-13 | 本页不允许未登录访问且顾客尚未登录 | 打开链接 | 先显示登录组件，不请求或泄露户型数量、名称、图纸和筛选选项。 |
| AC-FP-14 | 顾客登录成功 | 完成当前页面授权校验 | 有授权加载原户型页；无授权进入 403。 |
| AC-FP-15 | 页面集合存在其他可访问页面 | 用户打开并关闭导航 | 全屏导航只显示可访问同级页面；关闭后筛选、卡片、查看器和滚动状态保持。 |
| AC-FP-16 | 页面显示项目 Logo 与导航入口 | 用户浏览或筛选 | 两个组件彼此独立，且不遮挡标题、筛选和户型核心操作。 |
| AC-FP-17 | 当前没有其他可访问页面 | 页面渲染 | 导航入口隐藏，户型页仍可通过自身 URL 完成任务。 |

## 7. 明确不做与待确认

**明确不做：** Logo 与导航入口复用、固定首页/父子页面、分享入口、语言切换入口、自动翻译、复制链接、渠道面板、比较、样板间按钮、WALK/VR、价格、住户房号和销售状态、收藏、单户型详情页、预约、顾客注册/找回密码、401 及 5xx 状态页和埋点。

**待确认：**

- 导航集合的既有 B 端来源待技术方案映射；项目 Logo 与导航入口的最终位置待设计稿确定。

## 8. 截图证据

- `截图/C端实际Demo/04-間取図/04-間取図.jpg`：现有户型卡片可见图纸、户型名、格局、面积和可选说明。
- `02-户型点击详情.jpg`：证明户型图需要大图查看。
- `04-选择菜单.jpg`：证明现有能力包含 LDK 和面积筛选；户型名称/类型筛选按本轮产品确认进入 MVP，“内览”筛选不进入 MVP。
- 截图中的比较、内览按钮、顶部工具和桌面多列网格均不进入新布局。

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

- 页面布局以移动端规则为准；筛选、展示模式和卡片内容以 M-10 Widget PRD为准。
- 不得因截图存在比较、样板间或内览入口而加入 MVP。
- 页面分别挂载项目 Logo 和导航组件；导航打开、关闭不得改变筛选、卡片、图片查看或滚动状态。
- MVP 原型不显示分享占位；未来分享组件不得进入 M-10 或改变筛选、卡片和图片查看状态。
- MVP 原型不显示语言切换占位；M-10 只消费页面传入的一种发布语言。
- 受限页面登录和授权通过前不得请求户型集合、户型图或生成筛选项。
- 原型先验证 320px、375px 的筛选、单列/滑动卡片和全屏大图，再扩展至 PAD/PC。