# 户型卡片列表 Widget PRD

版本：v0.2
优先级：P0  
状态：已完成产品定义，待原型与实现验收

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-03 | v0.1 | 初始创建 / 重大重构 | 按当前 Widget 规范重写户型卡片列表；保留筛选与图纸查看，并新增“有已关联样板间时显示入口”的规则。 |
| 2026-08-11 | v0.2 | 重大：多楼栋并列分组 | 多栋项目按楼栋同时分组展示户型，不再以顾客侧楼栋切换替代并列浏览。 |

## 1. 基本信息

| 属性 | 定义 |
| --- | --- |
| Widget 名称 | 户型卡片列表 |
| 唯一标识 | `floorplan-card-list` |
| 分类 | 住户产品 |
| 一句话介绍 | 让顾客按户型、面积和格局筛选已公开户型，阅读摘要并查看户型图；有对应样板间时可继续体验。 |
| 封面图 | 代表性户型图或户型空间图；为类型级展示素材，不绑定某一项目的交易信息。 |
| 设计图 | 可附列表、筛选及大图查看设计示意；示例数据须标注“设计示意”。 |

## 2. 目标与场景

目标顾客为正在比较居住面积、格局与空间条件的潜在购房顾客。适用于户型浏览内容区域，也可作为独立户型浏览页的主内容。

顾客任务是缩小候选户型范围、比较摘要并查看图纸细节；若某户型已关联可公开样板间，可进入该样板间。完成结果是顾客获得可用于下一步比较或线下咨询的候选户型认知，不承诺实时房源、价格或销售状态。

## 3. 内容与数据

| 内容 | 必需性 | 内容来源与选择 | 有效条件 |
| --- | --- | --- | --- |
| 户型稳定标识 | 必需 | 项目户型集合 | 仅用于结果和操作状态关联，不向顾客展示。 |
| 户型名称/类型 | 必需 | 已发布户型资料 | 当前语言有名称。 |
| 户型图 | 必需 | 可公开户型图 | 可加载；无有效图纸的户型不进入集合。 |
| 面积、LDK/格局 | 必需 | 户型资料 | 为可筛选的有效数值/文本。 |
| 户型说明/标签 | 可选 | 户型资料 | 缺失时隐藏。 |
| 所属楼栋 | 条件必需 | 户型与楼栋的已发布关联 | 多栋项目必须有效；单栋项目不展示分组标题。 |
| 已关联样板间入口 | 条件必需 | 户型与样板间的公开关联 | 仅在关联样板间已发布且可达时显示。 |

内容选择为项目内已公开户型的多选集合，可按推荐顺序排序；未配置顺序时使用项目默认顺序。当前语言的必需内容缺失，不得跨语言补齐。

## 4. 使用与配置

| 配置项 | 规则 |
| --- | --- |
| 户型集合 | 选择一个或多个可公开户型；个别对象失效则从结果移除。 |
| 展示模式 | 列表、卡片滑动、单卡片；未配置或非法时默认列表。 |
| 筛选 | 可启用户型类型、面积、LDK；某维度少于两个有效选项时隐藏。 |
| 面积区间 | 以选中集合自动形成 10㎡ 区间并隐藏空区间，不接受手工区间。 |
| 样板间入口 | 默认启用；可关闭。关闭后不显示入口但不影响户型本身。 |
| 楼栋分组 | 多栋项目按楼栋并列显示分组；同一户型仅归入其有效所属楼栋。单栋项目不显示分组标题或切换控件。 |
| 无效配置 | 无有效户型时显示 Widget 级空状态；单卡片模式选择多个户型时默认取第一项并记录待配置修正。 |

## 5. C端 UI 与交互

默认层级为：结果摘要 → 筛选器 → 按楼栋并列分组的户型卡片 → 图纸查看/样板间入口。多栋项目同时显示各楼栋分组，不以顾客侧楼栋切换替代；单栋项目省略分组标题。列表模式纵向排列；卡片滑动模式可左右浏览；单卡片模式不显示筛选和无意义分页。

筛选维度各自单选并可回到“全部”，跨维度采用 AND 关系。点击户型图或“查看大图”打开通用图片查看器，不改变当前页面位置；图片查看器失败仅显示局部失败。点击样板间入口进入关联目标，目标失效时入口不出现。筛选无结果时保留筛选条件并显示“没有符合条件的户型”，提供清除筛选。窄屏中筛选器使用 VISTA C 筛选弹层/抽屉，卡片单列或横滑；遵守 VISTA C 卡片、媒体查看器和按钮规范。

## 6. 用户用例与验收

**UC-01 筛选户型**：顾客选择面积与 LDK，查看同步更新的户型结果，并能清除筛选回到完整集合。

**UC-02 查看图纸与样板间**：顾客打开某户型大图；若该户型存在已发布样板间，顾客可从该卡片进入体验。

| 验收编号 | 验收条件 |
| --- | --- |
| AC-01 | 仅显示已选择、可公开且当前语言必需内容完整的户型。 |
| AC-02 | 户型类型、面积、LDK 的选项均由当前有效集合生成；筛选结果符合三维 AND 关系。 |
| AC-03 | 无结果时保留条件并可一键清除；不显示空白卡片。 |
| AC-04 | 大图在通用查看器内打开和关闭，失败不影响列表和筛选。 |
| AC-05 | 样板间入口仅在“关联存在、已发布、可达、且实例未关闭”四项均满足时显示。 |
| AC-06 | 移动端筛选、卡片浏览和图纸查看可完成同一任务，无需横向滚动页面。 |
| AC-07 | 多栋项目的各楼栋户型同时按分组显示；单栋项目不显示楼栋分组标题或切换控件。 |