﻿# C端全部 Widget 清单

版本：v0.18

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-06 | v0.1 | 初始创建 | 以当前确认的 Widget 范围、属性字段与配置口径建立独立清单；此前编辑不计入本文件修订历史。 |
| 2026-08-06 | v0.2 | 重大：新增 WALK / VR Widget | WALK 与 VR 恢复为两个独立 Widget，归入建筑与空间。 |
| 2026-08-06 | v0.3 | 数据来源调整 | 购置费用与贷款试算的数据来源调整为购房费用。 |
| 2026-08-06 | v0.4 | 数据来源调整 | 3D大楼、360转大楼、日影、平面色彩切换、平面家具摆放的数据来源调整为定制。 |
| 2026-08-06 | v0.4 | 文档编号与引用同步 | 正式编号调整为 02；作为 Widget 范围基线，供《01-Widget开发清单与优先级》分配优先级。 |
| 2026-08-07 | v0.5 | Demo 对照补充 | 新增 Widget Demo 对照说明，首批记录户型卡片列表的参考入口、已观察内容与目标能力。 |
| 2026-08-07 | v0.6 | Demo 对照修订 | 总表增加独立标题；户型卡片列表改用“户型图” Demo 作为参考，并新增住户表 Widget 的 Demo 对照说明。 |
| 2026-08-07 | v0.7 | 住户表规则补充 | 明确可售住户详情、共有部入口及多栋项目的单栋切换规则。 |
| 2026-08-07 | v0.8 | 户型卡片交互补充 | 明确户型卡片支持查看大图模式。 |
| 2026-08-07 | v0.9 | 全量 Demo 对照补充 | 按总表顺序补齐全部 24 个 Widget 的 Demo 参考、关键信息与关键交互；异常入口单列为待核对。 |
| 2026-08-07 | v0.10 | 项目概览边界修订 | 明确项目概览为新增 Widget，仅展示封面图与项目简介；移除通用导航和语言切换入口。 |
| 2026-08-10 | v0.11 | 重大：内容与交互口径收敛 | 按内容来源白名单重整 24 个 Widget 的关键信息和关键交互；Demo 降为非需求性的核对参考，并列出待回写的 PRD 差异。 |
| 2026-08-11 | v0.12 | 重大：WALK / VR 退出 Widget 范围 | 删除 WALK、VR 两个独立 Widget；二者调整为由业务 Widget 传入内容并调用沉浸内容承载与控制组件的内容类型。 |
| 2026-08-11 | v0.13 | 重大：多建筑展示规则与关键内容补充 | 项目概览、户型卡片列表、周边地图、楼层信息补齐关键内容；断面图与立面图、楼层信息改为单建筑切换；共有部列表改为按建筑分组同时展示且不提供筛选。 |
| 2026-08-11 | v0.14 | 共有部内容口径收敛 | 删除未经确认的位置、类别、用途摘要、使用说明等字段；保留名称、代表图、建筑分组与有效体验入口。 |
| 2026-08-11 | v0.15 | 样板间内容口径收敛 | 删除未经确认的摘要、位置、设计主题、关联户型、图集与筛选；保留名称、代表图和有效 WALK/VR 入口。 |
| 2026-08-11 | v0.16 | 眺望集关键信息补充 | 辅助性文字说明纳入关键信息；有内容时固定显示在页面左上角。 |
| 2026-08-11 | v0.17 | 购房费用计算器模式新增 | 在贷款试算外，新增基于购房费用数据的购房费用计算器模式。 |
| 2026-08-11 | v0.18 | 待回写差异收口 | 核对并回写项目概览、户型卡片列表、住户表及项目概览数据消费规则，删除临时差异章节。 |

本文件定义当前 C端 Widget 的全量范围与基础属性，不单独分配开发优先级。优先级以《[01-Widget开发清单与优先级](01-Widget开发清单与优先级.md)》为准。

## 全部 Widget 列表

| 序号 | 名称 | 分类 | 简介 | 内容配置方式 | 内容数据来源 | 支持的展示模式 |
| --- | --- | --- | --- | --- | --- | --- |
| 01 | 项目概览 | 项目基础 | 帮助顾客识别项目，并理解基础介绍和核心价值。 | 自动带入 | 基础信息 | 大 |
| 02 | 户型卡片列表 | 住户产品 | 支持筛选和浏览户型、查看图纸，并在已关联样板间时继续体验。 | 需要配置 | 户型 | 微、小、中、大 |
| 03 | 周边地图 | 周边环境 | 展示项目与周边设施的关系，以及路线、距离和时间参考。 | 自动带入 | 周边地图 | 微、小、大 |
| 04 | 住户展示 | 住户产品 | 围绕一个指定住户，连续展示户型、位置、外景与关联样板间体验。 | 需要配置 | 住户 | 微、小、中、大 |
| 05 | 断面图与立面图 | 建筑与空间 | 帮助顾客理解建筑立面、楼层垂直关系与空间层次。 | 自动带入 | 建筑图纸 | 微、小、大 |
| 06 | 楼层信息 | 建筑与空间 | 支持浏览楼层平面及已关联对象。 | 自动带入 | 楼层 | 微、小、大 |
| 07 | 共有部列表 | 建筑与空间 | 支持浏览公共空间，并进入相关资料或体验。 | 自动带入 | 共有部 | 微、小、大 |
| 08 | 3D大楼 | 建筑与空间 | 展示建筑外观、楼栋和空间关系。 | 自动带入 | 定制 | 微、小、大 |
| 09 | 样板间列表 | 住户产品 | 支持浏览样板间，并进入关联体验或素材。 | 需要配置 | 样板间 | 微、小、中、大 |
| 10 | 户型卡片 | 住户产品 | 快速展示已配置户型的摘要与图纸，不展示住户信息。 | 需要配置 | 户型 | 微、小、中、大 |
| 11 | 住户表 | 住户产品 | 用表格方式展示大楼所有住户信息。 | 自动带入 | 住户 | 微、小、大 |
| 12 | 眺望集 | 周边环境 | 按楼层、朝向或位置浏览眺望素材。 | 自动带入 | 眺望 | 微、小、大 |
| 13 | 资料集 | 资料内容 | 按资料集分类发现和查看项目资料。 | 需要配置 | 资料文件夹 | 微、小、大 |
| 14 | 单个文件夹展示 | 资料内容 | 在画廊、概念集等场景直接浏览指定资料集。 | 需要配置 | 资料文件夹 | 微、小、中、大 |
| 15 | 360转大楼 | 建筑与空间 | 支持环视查看整体建筑形象。 | 自动带入 | 定制 | 微、小、大 |
| 16 | 日影 | 周边环境 | 按日期和时刻查看日照与阴影资料。 | 自动带入 | 定制 | 微、小、大 |
| 17 | 活动日历 | 资料内容 | 帮助顾客发现项目或案场活动，并了解活动状态。 | 自动带入 | 活动 | 微、小、大 |
| 18 | 来场预约 | 转化流程 | 支持提交来场意向，并反馈已受理或待确认状态。 | 自动带入 | 预约配置 | 微、小、大 |
| 19 | 平面色彩切换 | 住户产品 | 比较同一平面空间的不同色彩方案。 | 自动带入 | 定制 | 微、小、大 |
| 20 | 3D色彩切换 | 住户产品 | 比较同一三维空间的不同色彩方案。 | 自动带入 | 三维色彩方案 | 微、小、大 |
| 21 | 平面家具摆放 | 住户产品 | 查看或调整户型的预设家具方案。 | 自动带入 | 定制 | 微、小、大 |
| 22 | 购置费用与贷款试算 | 住户产品 | 帮助顾客理解购置费用，并按个人假设进行贷款试算。 | 自动带入 | 购房费用 | 微、小、大 |

## Widget 内容与交互关键概要

本章节是总表中各 Widget 的顾客可见内容和关键交互摘要，正式口径以各 Widget PRD 及其明确引用的内容数据为准。Demo 页面只用于核对旧系统能力，不构成新增字段、交互或视觉规格的依据；通用组件提供的可选槽位也不得扩大本章节的内容范围。

### 01. 项目概览

**Demo 核对参考（非需求）**：Demo 首页仅可参考封面内容；导航、语言切换等均为通用组件，不属于本 Widget。

**关键信息**：项目封面图、项目简介文字、项目地址、开发商名称。

**关键交互**：默认展示封面图与简介；封面可铺满展示，但客户要求完整显示时，设计必须支持不裁切。具体布局、留白和适配方式由设计确定。

### 02. 户型卡片列表

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/mold" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/mold</a>

**关键信息**：已发布户型的名称/类型、户型图、面积、LDK/格局、可选说明或标签；仅在关联样板间已发布且可达时显示入口。

**关键交互**：按户型类型、面积、LDK 筛选；查看户型大图；进入有效样板间。多栋项目按楼栋并列分组，同时展示各楼栋的户型；单栋项目不显示无意义的分组标题。

### 03. 周边地图

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/PeripheralFacilities" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/PeripheralFacilities</a>

**关键信息**：项目锚点与名称、公开 POI、顾客可读分类、名称和地址/位置说明；路线、距离和时间仅在路线服务可用时展示。地图控制包括指北针、回到当前位置、路线显示开关、放大/缩小、街景模式，以及卫星视图/交通视图切换。

**关键交互**：缩放或平移地图；使用指北针恢复朝向、回到当前位置、显示或隐藏路线、进入街景模式、切换卫星或交通视图；切换分类；选择地图标记或列表项查看 POI；在可用时查看路线。

### 04. 住户展示

**Demo 核对参考（非需求）**：当前 VISTA 没有与“住户展示”完全对应的页面；该页面可由一个或多个 Widget 装配，不得以住户表的可售住户弹窗替代本 Widget。

**关键信息**：一个指定住户的房号、关联户型图、名称、面积、LDK/格局及已公开摘要；可选展示该住户精确关联的楼层位置、外景、样板间、WALK/VR 体验和费用试算入口。

**关键交互**：查看户型图或外景大图；进入有效的关联体验；在可用时进入独立费用试算。顾客侧不切换、筛选、比较或跳转其他住户。

### 05. 断面图与立面图

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/facadeSection" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/facadeSection</a>

**关键信息**：当前建筑名称、已发布图纸、图纸名称和类型、图例，以及有效关联标记。

**关键交互**：在多建筑项目中切换当前建筑；切换当前建筑的图纸、放大、缩小和平移；点击有效关联标记进入目标。单次仅展示一栋建筑的内容，不同时混排多栋建筑图纸。

### 06. 楼层信息

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/storey" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/storey</a>；点击 3 楼可核对较完整的楼层内容。

**关键信息**：当前建筑名称、楼层名称、当前楼层平面图、已定义说明、当前楼层住户信息，以及有效关联标记、外景查看入口。

**关键交互**：在多建筑项目中切换当前建筑，再切换该建筑的楼层；查看当前楼层住户及其位置；从有效外景入口查看关联眺望；查看对应平面及有效关联对象的位置或入口；可放大查看图纸。单次仅展示一栋建筑的楼层内容，不同时混排多栋建筑。

### 07. 共有部列表

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/publicArea" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/publicArea</a>

**关键信息**：所属建筑、共有部名称、代表图，以及有效 WALK/VR 入口；可在内容已提供时查看关联图集。多建筑项目按建筑分组同时展示。

**关键交互**：查看共有部详情和大图；仅在关联体验已发布、可访问时进入 WALK 或 VR。C端不提供筛选功能。

### 08. 3D大楼

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/iframePath/670" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/iframePath/670</a>

**关键信息**：可公开的 3D 建筑内容和项目名称；可选楼栋名称、热点、说明及关联内容。

**关键交互**：拖拽旋转、缩放、复位视角；查看热点说明或进入其有效关联目标。

### 09. 样板间列表

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/sampleRoom" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/sampleRoom</a>

**关键信息**：样板间名称、代表图，以及有效 WALK/VR 入口。

**关键交互**：打开样板间详情、查看大图；仅在关联体验已发布、可访问时进入 WALK 或 VR。C端不提供筛选功能。

### 10. 户型卡片

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/mold" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/mold</a> 的单卡内容仅作参考。

**关键信息**：一个已配置户型的名称、图纸、面积、LDK/格局，以及可选说明和标签；不展示住户信息、销售状态、费用或样板间入口。

**关键交互**：查看户型大图。

### 11. 住户表

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/HouseMold" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/HouseMold</a>

**关键信息**：按当前楼栋、楼层和住户位置组织的住户；每个住户显示房号、户型代号、LDK/格局、面积和可售/不可售状态。选中可售住户时，可显示其已定义摘要。

**关键交互**：按户型类型、面积等条件筛选；多栋项目一次只显示一栋楼，并通过楼栋切换查看其他楼栋；可售住户打开详情弹窗，不可售住户不进入详情；共有部不进入住户详情，而是在有效关联存在时进入 WALK/VR。

### 12. 眺望集

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/outdoorScene/panorama" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/outdoorScene/panorama</a>

**关键信息**：可浏览眺望素材、拍摄楼层或相对高度、朝向或拍摄位置中的至少一项，以及顾客可读标签和辅助性文字说明；拍摄日期、关联住户可选。辅助性文字说明有内容时显示在页面左上角。

**关键交互**：按已提供条件筛选或切换素材；全屏查看并浏览相邻有效素材。

### 13. 资料集

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/folder" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/folder</a>

**关键信息**：资料集名称、代表图或资料类型标识，以及资料名称和类型；说明、标签和资料数量可选。

**关键交互**：打开资料集，以列表或网格浏览资料；按类型进入图片、视频、PDF 或已支持的查看器。

### 14. 单个文件夹展示

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/folder" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/folder</a> 中打开单个文件夹的结果仅作参考。

**关键信息**：一个已配置资料集的主题名称（如启用）及其图片、视频、PDF 或其他已支持资料。

**关键交互**：在当前资料流中浏览；按资料类型打开单项查看；不返回文件夹选择页。

### 15. 360转大楼

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/iframePath/393" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/iframePath/393</a>

**关键信息**：一个有效建筑环视内容、顾客可读角度提示，以及可选封面和操作提示。

**关键交互**：拖动或滑动旋转；播放/暂停、复位和退出；自动播放仅在实例已配置时启用。

### 16. 日影

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/iframePath/647" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/iframePath/647</a>

**关键信息**：可浏览日影素材、日期/时刻标签和资料说明；方位、季节和分析条件仅在项目已发布资料中存在时展示。

**关键交互**：选择日期和时刻；在启用时播放/暂停；全屏查看。

### 17. 活动日历

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/calendar" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/calendar</a>

**关键信息**：已发布活动的名称、起止时间、状态和详情摘要；地点、封面、类别、名额/说明和有效预约入口可选。

**关键交互**：在日历与列表间切换、筛选、查看活动详情；仅在活动可报名、未满额且目标可达时进入预约或联系入口。

### 18. 来场预约

**Demo 核对参考（非需求）**：当前 Demo 未定位稳定的独立预约入口。

**关键信息**：预约说明、隐私/同意说明、可预约时段或意向选项、联系方式字段；姓名、人数、备注和希望户型等按配置可选。

**关键交互**：填写并校验资料、明确同意后提交；提交成功仅反馈已受理或待确认。无可用时段、配置缺失或提交失败时，提供修正、重试或联系出口。

### 19. 平面色彩切换

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/splitScreen" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/splitScreen</a>

**关键信息**：一个户型或空间上下文、至少两套同视角平面 CG 方案、方案名称及可选色材说明。

**关键交互**：切换方案、放大查看；在实例启用时，以左右或叠加方式比较同一视角方案。

### 20. 3D色彩切换

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/iframePath/479" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/iframePath/479</a>

**关键信息**：一个已发布三维/全景空间、至少两套同空间方案和方案名称；说明、材质清单和默认视点可选。

**关键交互**：浏览空间、切换方案和复位视角；画布不支持时显示替代提示及退出/返回。

### 21. 平面家具摆放

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/iframePath/1926" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/iframePath/1926</a>

**关键信息**：一个已配置户型的平面、当前布局、家具图例和可用布局方案。

**关键交互**：切换布局、放大平面、查看家具说明；仅在实例开启可调整时，允许拖动可调整家具并一键重置。

### 22. 购置费用与贷款试算

**Demo 核对参考（非需求）**：<a href="https://demo.homevista.jp/loanModel" target="_blank" rel="noopener noreferrer">https://demo.homevista.jp/loanModel</a>

**关键信息**：贷款试算的顾客融资输入与结果；购房费用计算器的费用计算结果、试算参考说明和咨询入口。购房费用的具体计算项与规则以已配置的购房费用数据为准。

**关键交互**：在已启用的贷款试算与购房费用计算器模式间切换；输入或调整当前模式所需假设；计算或重新试算；在带入住户失效时切换为纯贷款参考试算。
