# 云栖湾 · 三期在售房源

> 活页公开模板 `sample-property-listing` · 场景: 产品图册 · 公司介绍 · 行业: 房产家居
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/xFQ49fY1AXMx · 详情: https://space.24haowan.com/examples/sample-property-listing

## 这是什么

楼盘房源 · 置业顾问发给客户的户型与价格

## 什么时候用

卖房、租房、卖装修套餐这类「一个项目里有几种户型 / 几种房型」要发给客户看的：楼盘在售房源、公寓出租、民宿房型、样板间介绍。记忆点是可以点的户型平面图，再配月供计算器、周边配套和在售价格表，文末预约看房。只卖一类实物商品、按款式列图和起订量选 sample-product-catalog；给一个客户出合作方案和报价选 sample-client-proposal；只介绍一个场所怎么走、开放时间选 sample-visitor-guide。

## 用户对助手说的原话

帮我做一份楼盘在售房源页，发成一个网页链接给看房客户：页头是楼盘名、一句写给这位客户的话、置业顾问、售楼处地址、交付时间，三个大数字卖点（离地铁多少米、离公园多少米、得房率），旁边一张楼盘区位插画；接着是最重要的户型一节：三个户型做成标签切换，每个户型一张同一比例尺的平面图，房间是可以点的色块，点了高亮并显示这间的面积和一句说明，切换户型时有过渡动画，电脑上平面图放大在左、右边列建面、套内、得房率、面宽、在售楼栋和参考总价；然后一个月供计算器（总价、首付比例、年利率、年限，按等额本息算出月供、首付、贷款额和总利息，可以一键带入各户型参考价）；再画一张周边配套示意图（以楼盘为圆心画距离圈，标出地铁、学校、商场、公园、医院，旁边列出距离和步行时间）；然后一张在售楼栋表（楼栋、户型、楼层、在售套数、单价区间、总价区间）；最后一张预约看房表单（户型、日期时段、称呼、手机号），提交后存到数据表，页面上显示一张预约确认。配色清爽，标题用宋体，少用底色块、用细线分隔；手机上户型图占满宽、参数放在图下面，表格改成一行一套。价格变了就更新同一个链接。

如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-property-listing/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://space.24haowan.com/for-agents.md）后发布；没有账号也可以让用户在 https://space.24haowan.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-property-listing ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 楼盘概况
- 户型
- 算算月供
- 周边配套
- 在售楼栋
- 预约看房

## 文件（公开，纯文本）

- https://space.24haowan.com/examples/sample-property-listing/source/index.html（入口）

## 发成活页之后还能做的

- 页内预约看房回写数据表（原生表单 POST ./_data/visits），发布者用 list_data_rows 读回
- 同一链接更新不变（每周调价、卖掉的楼栋在这一页改）
- 阅读回执（客户在哪个户型、月供那一节停得久）
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 visits（列 name / phone / layout / date，append_open=true）：文末预约看房写进这里，发之前先用 set_data 建好；页面不读回这张表（里面有客户手机号），用 list_data_rows 看谁约了哪天
- 联系方式类数据表建议设 members_only=true 或口令可看：页面读回会把已过审的行返回给每位读者（官方示例成品就是 members_only，访客的提交不会入表）

## 模板说明（README）

只进画廊的样例（总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 做。
示例内容均为虚构：楼盘「云栖湾」、开发商「栖湾置业」、学校、地铁站、商场、价格都是编的，示例，非真实楼盘。页面里没有位图，插画与平面图都是内联 SVG。

## 演示哪个特色

**可以点的户型图 + 页内预约看房写回数据表 + 价格变了更新同一个链接。**

- 记忆点：「户型」一节。三个户型（89 / 115 / 143㎡）的平面图画在**同一个比例尺**上（每米 36 个 SVG 单位），大小一眼能比；
  房间是可以点的色块，点了高亮，下方显示这间的面积和一句说明，右侧房间清单同步高亮。脚本在时切户型有过渡动画（旧图淡出、房间依次落位），
  手机上左右滑平面图也能切；脚本不跑时三张平面图依次排开，照样完整可读。`prefers-reduced-motion` 时不播动画。
- 面积前后自洽：每个房间的面积由它的长宽算出，套内面积 = 各房间之和，得房率 = 套内 ÷ 建面（三款都是 81%）。改户型时照这个关系重算。
- 「算算月供」按等额本息：月供 = 贷款额 × 月利率 × (1+月利率)^月数 ÷ ((1+月利率)^月数 − 1)。默认 513 万、首付三成、3.05%、30 年 → 每月 ¥15,237，这组结果直接写在页里，脚本不跑也对。
- 文末预约看房是原生表单 `<form action="./_data/visits" method="post">`：不跑脚本也能提交；脚本在时页内提交，就地出一张预约确认（日期、户型、一句顾问的话）。
  **页面不读回 visits**：读回会把所有客户的手机号下发给每个读者。发布者用 `list_data_rows table=visits` 看谁约了哪天。
- 首屏插画里楼群依次升起、湖面波纹轻轻漂动（全页唯一的循环动效）；周边示意图第一次进入视野时点位依次出现。

## 数据表

`visits`（列 `name` / `phone` / `layout` / `date`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="visits" revision=0 rows=[] columns=["name","phone","layout","date"] append_open=true
```

`layout` 的值是 `A 户型 89㎡` 这样的整句，`date` 是 `11 月 1 日（周日）上午` 这样的时段。本地 `space-cli serve` 会把提交写进包里的 `_data/visits.json`，试完改回 `[]`。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `h1` / `.sub` / `.facts` / `.num` | 楼盘与开发商、写给客户的一句话、顾问、售楼处、交付时间、三个卖点数字；「示例，非真实楼盘」那枚标签发自己的楼盘时删掉 |
| 首屏插画 `svg.scape` | 楼的位置与高度（`g.tw`，在售的那几栋加 `ph3`）、湖与远山、两处地名 |
| 「户型」`article.lay` × 3 | 每款一个 `<svg class="plan">`：`g.rm` 是一个房间（`rect` 的长宽按同一比例尺画，`data-area` / 文字里的面积同改，`data-note` 是点开后那句说明）；`dl.spec` 的建面、套内、得房率、面宽、在售、参考总价；`ul.rlist` 房间清单。户型数变了，`.tabs` 的按钮和预约表单的户型选项同改 |
| 「算算月供」 | `.quick` 三个参考总价按钮（`data-total`，单位万）、各滑杆的 `min` / `max` / `value`，以及写在页里的默认结果（`#r-month` 等，改默认值时按公式重算） |
| 「周边配套」`svg.near`（`.wide` / `.narrow`） | 每个点按「方位角 + 直线距离」落在距离圈上（x = 圆心 + 距离 × 比例 × sin 方位，y = 圆心 − 距离 × 比例 × cos 方位）；电脑那套标「类别 · 距离」，手机那套只标类别；右侧 `ul.poi` 写全名与步行时间；`aria-label` 同改 |
| 「在售楼栋」`table.tbl` | 每行一栋：户型、楼层、在售套数、单价区间、总价区间（总价 = 建面 × 单价）；合计套数要和页头那句一致。手机上每行排成两列的一条 |
| 「预约看房」 | 日期时段的选项、顾问那句提示、提交后确认里的那句话；字段名要和 `visits` 的列一致 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的房源页时整段删掉 |
| `manifest.json` | `title` / `share.*`（微信卡片上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 怎么发出去

```bash
node core/space/cli/space-cli.mjs push core/space/examples/sample-property-listing \
  --proposal <proposal_id> --manifest core/space/examples/sample-property-listing/manifest.json --hold
# 先建 visits 表 → 预览确认 → publish_version → 链接发给客户
```

每周调价、某栋卖完：改完再推一次到**同一个** `proposal_id`，链接不变，客户收藏的那一个就是最新的。
阅读回执能看到客户在哪个户型、月供那一节停得久（`get_session_timeline`，节的锚点就是每个 `<section>` 的 `data-track-section`），回访时心里有数。
验收截图：`node --import tsx examples/verify-shots.mjs sample-property-listing --write-thumb --write-phone`（QUALITY.md §7）。