# 青岭环线七日自驾 · 路书

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

## 这是什么

自驾路书 · 发给同行的几家人

## 什么时候用

多日自驾、分段开车的行程：环线自驾、高原 / 山区自驾、几台车结伴出行，读者最关心每天开多少公里、几个小时、翻多高的垭口、哪里加油、哪里住、要注意什么（高反、限速、冬季防滑）。路上有变化更新同一个链接，文末收「路况和变更」（数据表 updates）。坐高铁 / 飞机、在城市之间换住处的家庭出行选 sample-weekend-trip；按名额收报名选 sample-event-signup；请人来吃饭、来参加选 sample-invitation。

## 用户对助手说的原话

把我们这次多日自驾做成一份路书，发成一个网页链接给同行的几家人：页头写谁家出行、日期、出行人、几台车谁开、总里程；接着做一个路书总览：一张路线示意图，每天一段换一种颜色、段上标第几天、垭口标出来，下面一张按里程比例画的海拔剖面，标出最高点和 4,000 米参照线，点某一天地图和剖面只亮那一段；然后按天写行程，每天写里程、开车多久、最高海拔、住处海拔、在哪加油、住哪、必看什么，再加一条注意事项（高反、限速、冬季防滑之类）；再列花费（油费、路桥、住宿、门票）和几家各出多少；然后一份打勾的装备清单、紧急联系和注意事项；最后放一张小表单，让大家写哪一天、有什么路况或变更，存到一张表里并在页面上列出来。手机上地图和剖面单独画一套。路上有变化就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 路书总览
- 每天怎么走
- 花费和分摊
- 装备清单
- 紧急联系和注意事项
- 路况和变更

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

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

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

- 同一链接更新不变（路上有变化只更新这一页）
- 页内留言回写数据表（原生表单 POST ./_data/updates），页面读回最新的变化
- 口令可看（发到出行群）

## 发之前要备好

- 数据表 updates（列 day / note，append_open=true）：文末「路况和变更」写进这里，发之前先用 set_data 建好
- 发到出行群时建议设口令（set_visibility passcode）

## 模板说明（README）

只进画廊的样例（`/examples/sample-road-trip`），按 `core/space/examples/QUALITY.md` 从头做（模板市场 K1DG 第一波）。
示例内容均为虚构：地名（锦川、泸溪镇、折云山口、青岭镇、雪措湖、嘉绒寨、鹰嘴垭口、卧云镇）、人名、客栈名都是编的，
里程、海拔、油价、门票只按川西一类高原自驾的量级估算，**不能当真实路况用**。页面里没有图片，图都是内联 SVG。

## 演示哪个特色

**路上有变化更新同一个链接 + 文末「路况和变更」写回数据表 `updates`。**

- 记忆点：**路书总览**。上面一张路线示意图（每天一段一种颜色、段中圆标是第几天、三个垭口用三角标出），下面一张海拔剖面（横轴按里程比例，4,000 m 虚线参照，四个高点标数字）；
  点下面那排「1–7」任何一天，地图和剖面只亮那一段，读数换成那天的里程 / 开车时长 / 最高海拔，带一个跳到那天详情的链接；再点一次还原。
  电脑和手机各一套坐标（`.wide` / `.narrow`），不是等比缩放；脚本不跑时两张图照常完整。
- 每天一行：大号日序（颜色同地图那一段）、出发时间、里程 / 开车 / 海拔 / 住处海拔四个数，再是加油、住宿、必看，最后一条左侧色线的提醒（高反 / 限速 / 防滑 / 落石 / 返程）。
- 「花费和分摊」：油费、路桥按车，住宿按房间，门票按人头，合计与三家各出多少前后自洽（3,861 + 3,180 + 3,075 = 10,116）。
- 文末「路况和变更」是原生表单 `<form action="./_data/updates" method="post">`（选哪一天 + 一句变化），不跑脚本也能提交；脚本在时页内提交，并读 `./_data/updates.json` 列出最近 8 条（新的在上）。
- 发给同行的几家人建议设口令：`set_visibility visibility="passcode"`。

## 数据表

`updates`（列 `day` / `note`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="updates" revision=0 rows=[] columns=["day","note"] append_open=true
```

读回：`list_data_rows table=updates`。`day` 的值是 `全程` 或 `第 N 天`。看完路上的留言，把要改的写进页面、再推一版到同一个页面。

## 改哪里变成我的

页面由数据生成，最省事的改法是改数字再重算坐标；直接手改 HTML 时注意下面几处同步：

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `h1` / `.facts` | 谁家出行、更新日期、路线名、日期 / 出行人 / 总里程 / 车辆 |
| 路线示意图 `svg.map`（`.wide` 760×344 / `.narrow` 343×372） | 每个地点一个 `.node`；每天一条 `path.seg.dN`（`data-day` = 第几天）+ 段中 `.badge`；垭口是 `.pass`。示意图不按比例，只要相对方位对 |
| 海拔剖面 `svg.prof` | 横坐标 = 左边距 + 累计公里 ÷ 总里程 × 绘图宽；纵坐标 0–5,000 m。每天一条 `path.pl.dN` + `path.area.dN` + 高亮带 `rect.band.dN`；两套坐标都要重算 |
| 脚本里的 `DAYS` | 点某天时读数那一行的文字（标题、里程、时长、最高海拔） |
| 「每天怎么走」 | 每天一个 `article.day#dN`，四个数与剖面、`DAYS` 一致 |
| 「花费和分摊」 | 表格逐项改，合计、三家各出多少、条形长度（按最多那家 = 100）一起改 |
| 「装备清单」 | `li.ok` 已备 / `li.no` 未备，右边写谁负责；改了数量同步改「已备 N 项」 |
| 「紧急联系」 | 司机、对讲机频道、沿途医院、下撤规则 |
| 「路况和变更」 | 下拉里的天数与日期 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的路书时整段删掉 |
| `manifest.json` | `title` / `share.*`（微信卡片上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 怎么发出去

```bash
# 先建 updates 表（见上），再推页面
node core/space/cli/space-cli.mjs push core/space/examples/sample-road-trip \
  --proposal <proposal_id> --manifest core/space/examples/sample-road-trip/manifest.json --hold
# 预览确认 → publish_version → set_visibility passcode → 口令和链接一起发到出行群
```

路上有变化：改完再推一次到**同一个** `proposal_id`，链接不变。
验收截图：`node --import tsx examples/verify-shots.mjs sample-road-trip --write-thumb`（QUALITY.md §7）。