# 见山小院 · 林小满的入住指南

> 活页公开模板 `sample-homestay-guide` · 场景: 行程 · 攻略 · 行业: 旅游出行 / 个人家庭
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/Sj_igX2jFhSv · 详情: https://space.24haowan.com/examples/sample-homestay-guide

## 这是什么

民宿入住指南 · 入住前一天发给客人的房卡式指南

## 什么时候用

民宿、客栈、短租房东在客人入住前一天发一条链接：怎么走、几点入住、门锁密码、Wi-Fi、这几天天气和周边吃喝，离店前顺手收一条评价，选它。要给家人排几天的行程和预算选 sample-weekend-trip；景区、园区的游客导览地图选 sample-visitor-guide；自驾路书选 sample-road-trip；只要一张城市天气早安卡选 sample-city-morning。

## 用户对助手说的原话

帮我做一份民宿入住指南，入住前一天发给客人，发成一个网页链接：首屏是一张像实体房卡的卡片（民宿名和标志、房间名、客人姓名人数、住几号到几号），点一下或往上滑会 3D 翻到背面，背面是房号、入住退房时间和距入住还有多久，翻卡时有一声可以关掉的「嘀」；往下依次是：入住与退房（一个很大的倒计时、入住几点起退房几点前、早到了怎么办）；怎么找到我们（一张手画风格的路线示意图，标出下车点、步行路线和民宿位置，下面三步文字指路，地址一键复制）；进门与上网（院门密码是一块遮住的卡，入住当天才能按住查看，Wi-Fi 名称密码一键复制）；这几天的天气（用 Open-Meteo 免费天气接口取民宿所在城市未来 7 天，页面里先内联一份今天的快照，接口取不到也能显示；画一张最高最低温的温度带图，把客人住的那几天标出来，再根据那几天的数据用房东的口吻写一句提醒，比如下雨带伞、早晚温差大要带外套，附穿衣、带伞、防晒几条，写明数据来源和更新时间）；周边吃喝玩 5 个推荐（类型、店名、一句话、走几分钟）；入住须知点开看；最后「住得怎么样」：打 1–5 星、选一个最喜欢的、写一句想改进的，存到数据表，页面读回平均星级和条数。颜色安静，手机上首屏只有房卡，电脑上左边房卡右边指南。下一位客人来时改日期再更新同一个链接。

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

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-homestay-guide/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-homestay-guide ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 房卡
- 入住与退房
- 怎么找到我们
- 进门与上网
- 这几天的天气
- 周边吃喝玩
- 入住须知
- 住得怎么样

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

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

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

- 首屏一张实体房卡，点一下 / 上滑 3D 翻到背面（房号、入住退房时间、倒计时），带一声可静音的「嘀」和轻震
- 入住倒计时、标题问候、院门密码遮罩都按北京时间现算：入住当天才能按住看密码，退房后自动显示已失效
- 外部数据是真的：天气来自 Open-Meteo（免费、无需 key），页面内联一份当天快照先画，脚本再取实时数据（3 秒超时），失败就保留快照并写明「数据更新于」；按客人住的那几天推出一句房东口吻的提醒（下雨带伞 / 早晚温差 / 晨雾 / 防晒）
- 路线示意图（内联 SVG，手机电脑各一套坐标，进入视野时描一遍路线）+ 地址、Wi-Fi 一键复制
- 离店前评价写回数据表 review（星级 / 最喜欢 / 想改进），页面读回平均星级、条数和大家最喜欢的一项
- 下一位客人改几行日期再发一版，同一个页面一直用

## 发之前要备好

- 数据表 review（列 stars / fav / improve，append_open=true）：文末「住得怎么样」写进这里，页面读回平均星级、条数和最喜欢的一项；发布前先用 set_data 建好
- 天气接口 api.open-meteo.com（免费、无需 key，署名「天气数据：Open-Meteo.com（CC BY 4.0）」）：发布回执会把它列为站外域名，这是事实说明、不是提醒；每换一位客人时顺手刷新页面里的天气快照
- 门锁密码写在页面源码里，遮罩只防旁边的人瞄一眼：真用时把页面设成口令可看（set_visibility passcode），客人退房后换掉门锁密码

## 模板说明（README）

画廊「生活」分组的模板（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。民宿、房东、店名、电话与密码均为虚构；天气是真实数据，以大理古城为例。

## 演示哪个特色

**一张会翻的房卡 + 跟着真实天气说话的房东。**

- **记忆点**是首屏那张房卡：手机上一屏只有它，点一下（或左右拖、往上滑）就 3D 翻到背面 —— 房号、入住退房时间、距入住还有多久；上滑会顺手把页面带到指南。翻卡有一声两下的「嘀」（Web Audio 现合成，只在点按后响，右上角可静音）和轻震；电脑上鼠标悬停时卡片随指针微微倾斜、反光跟着走。卡片轻轻浮动是全页唯一的循环动画，`prefers-reduced-motion` 时停、翻卡不带过渡。脚本不跑时房卡停在正面，下面一行「往下看入住指南」。
- **天气那一句**：取大理古城未来 7 天（Open-Meteo），挑出客人住的那几天，按降雨概率 / 早晚温差 / 晨雾推出一句房东口吻的话（「你在的这几天不太会下雨，但早晚温差有 11 度……」），再给穿衣、带伞、早上、防晒几条；温度带图把住的那几天标成浅底「你在大理」。
- **时间都是现算的**（北京时间）：标题问候（明天大理见 / 欢迎回家 / 谢谢来住）、倒计时、院门密码——入住当天 0 点前是遮罩、摇一下；当天到退房前按住才显示、松手盖上；退房后显示「已失效」。
- **发出去之后**：文末「住得怎么样」是原生表单，写进数据表 `review`；脚本在时页内提交、就地出一张谢卡，并读 `./_data/review.json` 算平均星级、条数和大家最喜欢的一项。下一位客人改几行再发一版，同一个页面一直用。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 脚本里的 `STAY` | `checkin` / `checkout`（带 `+08:00`）、`codeFrom`（从几点起能看密码）、`code`（门锁密码）、`nights`（住的那几天，天气图标浅底和提醒都看它） |
| 房卡 `.front` / `.back` | 民宿名、地址、房间名、客人姓名人数、日期、房号、房东电话；`data-c="card"` 那行由脚本改写 |
| 页头 `h1` / `.facts` 与舞台 `.greet` | 问候语里的客人名字（脚本里 `greet()` 那一行也有）、房间与日期、房东电话 |
| 入住与退房 `.times` / `.tip` | 入住退房时刻；`.tip` 是「早到了怎么办」（入住中、离店后脚本会换成另两句） |
| 路线图 `.map` | 两套 SVG：`.m-m` 手机（343 宽）、`.m-d` 电脑（640 宽），各自的下车点、路线 `path.route`、步行虚线、民宿图钉坐标和文字；`aria-label` 写全路线 |
| `ol.steps` / `.addr` | 三步指路；`data-copy-src="addr"` 是复制出去的地址 |
| 进门与上网 | 遮罩里的提示语（`data-door-say`，脚本按日期改）；Wi-Fi 的 `data-copy-src="ssid"` / `"wpw"` |
| 天气 | 脚本里的 `API`（`latitude` / `longitude` 换成你的城市）；`#wx-snap` 是快照（见下）；`advise()` 里的几句提醒（伞架、晨雾、海拔）按你那里的情况改 |
| 周边 `.near` | 5 条：类型、店名、一句话、多远 |
| 入住须知 `details` | 每条一个标题、一个摘要、一段说明 |
| 住得怎么样 | 字段名就是表里的列名（`stars` / `fav` / `improve`）；「最喜欢的」选项改了要同改脚本里的 `FAVSAY` |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的指南时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

### 天气快照

`<script type="application/json" id="wx-snap">` 里是一份 Open-Meteo 的原样返回，多两个键：`place`（地名）和 `fetched`（抓取的北京时间，`YYYY-MM-DDTHH:MM`）。首屏先用它画，脚本再取实时数据，3 秒没回来就留着快照并写「数据更新于 X 月 X 日 HH:MM」。换客人时抓一次新的贴进去：

```bash
curl -s 'https://api.open-meteo.com/v1/forecast?latitude=25.69&longitude=100.16&current=temperature_2m,weather_code&daily=temperature_2m_max,temperature_2m_min,weather_code,precipitation_probability_max&timezone=Asia%2FShanghai&forecast_days=7'
```

页面里写死的那句提醒、四条建议和温度图（`data-wx` 那几处）是用同一份快照、同一段 `WX` 代码算出来的，脚本不跑时显示它们；改了快照最好一起重算（把 `/*<wx>*/` 与 `/*</wx>*/` 之间的代码在 node 里跑一遍 `WX.html(快照, STAY.nights, 今天, false)`）。

## 数据表

文末评价写进数据表 `review`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "review"  columns: ["stars","fav","improve"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=review` 读回。本地 `space-cli serve` 会把提交写进包里的 `_data/review.json`，试完记得改回 `[]`。

## 怎么发出去

```bash
export SPACE_TOKEN=sk-space-…            # MCP create_cli_token
node core/space/cli/space-cli.mjs push core/space/examples/sample-homestay-guide \
  --proposal <proposal_id> --manifest core/space/examples/sample-homestay-guide/manifest.json --hold
```

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
**门锁密码写在页面源码里**，遮罩只防旁人瞄一眼：发给客人时用 `set_visibility` 设成 `passcode`（口令可看），客人退房后换掉门锁密码，下一位客人改 `STAY` 再发一版。

## 素材

- 没有位图：房卡、群山、路线图、天气与周边图标全是内联 SVG；提示音由 Web Audio 现合成。
- 天气数据：Open-Meteo.com（CC BY 4.0），坐标为大理古城；民宿与店铺为虚构，路线图是示意、不按比例。
- `thumb.webp` / `phone.webp`：由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。