# 相识二十年 · 四班老同学聚会

> 活页公开模板 `sample-reunion-invite` · 场景: 邀请函 · 行业: 个人家庭 / 教育培训
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/1r8VCPiSuNAK · 详情: https://space.24haowan.com/examples/sample-reunion-invite

## 这是什么

同学会邀请 · 老同学聚会、校友会、战友聚会

## 什么时候用

同学会、校友会、战友聚会这类要收费用、要看谁报了名的聚会选这份：行程分一两天、AA 预算按报名人数摊、发到群里大家报名后页面列出已报名的名字和城市。只请人来吃一顿饭、收个出席回执（周岁宴、寿宴、乔迁）选 sample-invitation；婚礼选婚礼请帖模板；按线路或场次分名额收报名选 sample-event-signup；纯出行安排、不收报名选 sample-weekend-trip。

## 用户对助手说的原话

帮我给高中同学二十周年聚会做一份邀请，发成一个网页链接到班级群：页头写学校和班级、谁发的、一句大字标题，下面一行时间、集合地点、人均费用和报名截止日；封面画一块教室黑板，粉笔字写着离聚会还有几天，黑板两边贴两张卡片——「当年」一间教室坐满的座位、「现在」大家分散在哪几座城市、各几个人，前景两张课桌，一张放课本一张放手机；接着按时间排两天行程（第一天返校参观、和老师座谈、合影、晚宴，第二天郊游、送站）；然后一张 AA 费用表（每项怎么算、按 30 人的金额、合计），下面一行不同报名人数下的人均，再写只来一天、家属、小朋友怎么收、谁来收、什么时候交、事后怎么公布账目；再写各个地点的地址和几家住宿建议；然后「谁报了名」从报名表读回，列出每人的名字和城市、几人来两天几人只来一天、带几位家属（别写死）；最后一张报名表单：来几天、名字、城市、带不带家属、备注，存到一张数据表。颜色清爽，少用底色块，用细线分隔；手机上黑板封面单独画一套。有变动就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 活动安排
- 费用
- 地点与住宿
- 谁报了名
- 报名

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

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

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

- 页末报名回写数据表（原生表单 POST ./_data/rsvp），「谁报了名」读回名字与城市、统计几天和家属人数
- 按实际报名人数现算人均（读同一张 rsvp 表）
- 同一链接更新不变（定下人均、补合影、公布账目都在这一页）
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 rsvp（列 name / city / days / family / note，append_open=true）：文末报名写进这里，「谁报了名」读回名字与城市；发之前先用 set_data 建好，过了报名截止日把 append_open 关掉

## 模板说明（README）

只进画廊的样例（活页模板市场第一波，K1DG；总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
示例内容均为虚构（学校、班级、老师、同学、酒店、饭店、湖名都是编的）；全页没有位图，封面是内联 SVG。

## 演示哪个特色

**页末报名写回数据表 + 页面读回「谁报了名」+ 有变动更新同一个链接。**

- 记忆点：封面那块教室黑板（内联 SVG）—— 粉笔字写着「距离返校还有 38 天」，左右贴着「当年」（46 个座位坐满一间教室）与「现在」（散在六个地方，各几个人）两张卡片，前景两张课桌。
  电脑与手机各一套坐标；手机那套把两张卡片挪到黑板下面、去掉课桌。倒计时天数由脚本按当天重算（发出日到活动日之间才改，脚本不跑时停在发出那天的 38）。粉笔下划线进场时画一次，`prefers-reduced-motion` 时直接终态，全页没有循环动画。
- 报名是原生表单 `<form action="./_data/rsvp" method="post">`（不跑脚本也能提交）；脚本在时页内提交、就地显示「报上了」。
- 「谁报了名」读 `./_data/rsvp.json`，列出每人的名字与城市（只显示这两项，备注不公开），统计两天 / 只来第一天的人数和家属人数；脚本不跑或表读不到时，那一节显示一句静态说明。
- 「费用」末尾同样读这张表：两天都来的人数到 15 人以上时，按 `503 + 5,306 ÷ 人数` 现算人均（503 = 每人自己那份，5,306 = 平摊的固定开支），少于 15 人时说一句「先按 30 人估」。

## 数据表

`rsvp`（列 `name` / `city` / `days` / `family` / `note`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="rsvp" revision=0 rows=[] columns=["name","city","days","family","note"] append_open=true
```

读回：`list_data_rows table=rsvp`。`days` 的值是 `两天都来` / `只来第一天`；`family` 是 `不带` / `带 1 位` / `带 2 位` / `带 3 位`（页面取其中的数字算家属人数）。
过了报名截止日把 `append_open` 关掉。本地 `space-cli serve` 会把提交写进包里的 `_data/rsvp.json`，试完改回 `[]`。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `h1` / `.sub` / `.facts` | 学校班级（左上角黑板小标是内联 SVG）、谁发的、发出日期、标题、一句话、时间 / 集合 / 人均 / 报名截止 |
| 封面 `svg.cover`（`.wide` / `.narrow`） | 黑板上的日期、值日、`.cd` 里的天数；「当年」卡片的座位数（`circle.seat`，8 个一排）；「现在」卡片的城市与人数（圆点半径约 1.5 + √人数 × 1.2）；两段 `aria-label` 同改 |
| 脚本里的 `EVENT` / `SENT` | 活动日与发出日（UTC 日期），倒计时只在这两天之间重算 |
| 「活动安排」`.days` | 每天一个 `.day`，`h3` 写日期和一句概括，`ol.tl` 每行 = 时间 + 做什么（+ 一句小字）；重头戏那行加 `key` |
| 「费用」 | `table.cost` 每行 = 项目 / 怎么算 / 按 N 人的金额，合计自己算一遍；`.per` 那一行是不同人数下的人均（= 每人那份 + 固定开支 ÷ 人数）；脚本里 `503` 与 `5306` 跟着改；只来一天 / 家属 / 小朋友的价、谁收钱、截止日 |
| 「地点与住宿」 | `.places` 每行 = 一个地点或一家住处（价钱、离哪儿多远、怎么订）；`.aside` 放最要紧的那句（末班车） |
| 「谁报了名」 | 一般不用改；`#empty` 那句静态说明、空表时的那句玩笑可以换 |
| 「报名」 | 截止日、天数选项；表单字段名要和 `rsvp` 的列一致 |
| 页脚 | 平台标志与名称（与 `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-reunion-invite \
  --proposal <proposal_id> --manifest core/space/examples/sample-reunion-invite/manifest.json --hold
# 先建 rsvp 表 → 预览确认 → publish_version → 链接发到班级群
```

单文件也可以用 MCP `publish_file`（`filename: "index.html"`，`hold: true`），不需要终端。
截止后定下人均、聚会后补合影和账目：改完再推一次到**同一个** `proposal_id`，链接不变。
验收截图：`node --import tsx examples/verify-shots.mjs sample-reunion-invite --write-thumb`（QUALITY.md §7）。