# 陈屿 & 林晚 · 婚礼请帖

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

## 这是什么

婚礼请帖 · 发到家族群和朋友群

## 什么时候用

结婚请人来喝喜酒：婚礼请帖、订婚宴、回门宴，要发到家族群和朋友群、让人愿意转发截图的那种。有两人的故事、当天按时刻排的流程、怎么到、穿什么，文末收出席回执和祝福留言（数据表 rsvp）—— 发之前问一句用户要不要收回执，点头就照这份做。周岁宴、寿宴、乔迁这类家常饭局选更短的 sample-invitation；按场次分名额收报名选 sample-event-signup；几天的出行安排选 sample-weekend-trip。

## 用户对助手说的原话

帮我做一份婚礼请帖，发成一个网页链接到家族群和朋友群：封面像一只刚打开的信封，信封盖翻开、中间一枚写着两人各一个字的小圆印，两个人的名字用大号宋体一个字一个字浮出来，下面是日期、仪式和午宴的时刻、一句话；封面下面一行地点、仪式、回执截止、有事找谁。接着「我们的故事」三四个年份节点，每个配一幅线描小插画（不用照片），电脑上横排、手机上竖排；然后「婚礼当天」按时刻排迎宾、仪式、合影、午宴、敬酒、散场，仪式那行用强调色，再写一句下雨怎么办；「地点与交通」画一张北向上的手绘风路线示意图，从地铁口沿路走到酒店门口，标出步行距离和分钟数、车库入口、江边草坪，下面三步文字路线、长按可复制的地址加一个复制按钮、开车和打车各一句；再写着装建议（几个颜色色点、别穿一身白）和几条小提示；最后一张回执表单：能来 / 来不了、大人几位、小朋友几位、称呼、想对我们说的话，一个发送按钮，回复存到一张数据表里，页面读这张表显示几家能来、共几位大人几位小朋友，并把留言列成祝福（别写死数字）。配色柔和，别用大红配金，暗色也要好看；动效只留封面那一下，系统要求减少动效时直接显示终态；手机上路线图单独画一套。有变动就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 我们的故事
- 婚礼当天
- 地点与交通
- 着装与小提示
- 回执

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

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

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

- 页内回执回写数据表（原生表单 POST ./_data/rsvp），页面统计几家能来、几位大人几位小朋友，并列出祝福留言
- 同一链接更新不变（下雨改室内、婚礼后补照片都在这一页）
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 rsvp（列 name / attend / adults / kids / note，append_open=true）：文末回执与祝福留言写进这里，发之前先用 set_data 建好；过了回执截止日把 append_open 关掉

## 模板说明（README）

只进画廊的样例（活页模板市场第一波，K1DG；总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
示例内容均为虚构（新人、伴娘、酒店、街道、地铁站、江名都是编的）；页里没有照片，插画与路线图都是内联 SVG 手画的，无真人、无品牌。

## 演示哪个特色

**文末回执写回数据表 + 祝福留言读回 + 有变动更新同一个链接。**

- 记忆点：封面那只信封 —— 信封盖翻开、印着「屿晚」的小圆印落下、两人的名字一个字一个字浮出来。纯 CSS，不到 1 秒走完；
  `prefers-reduced-motion` 时直接是终态，脚本不跑也完整。全页只有这一处动效，其余安静：节与节之间细线分隔，不铺底色块。
- 「我们的故事」四个年份节点，每个配一幅线描小插画（书、伞、小屋和猫、江与月），电脑上横排一条虚线串起来，手机上改竖排。
- 「婚礼当天」按时刻排（10:30 迎宾 → 11:18 仪式 → 12:08 午宴 → 14:30 散场），仪式那一行用强调色，下面一句雨天备案。
- 「地点与交通」是手绘风路线示意（北向上）：地铁口 → 沿路 → 过路口 → 酒店门口，步行距离与分钟数、车库入口、江边草坪，
  目的地一颗心。电脑与手机各一套坐标。地址那行 `user-select:all`，微信里长按即可整行复制；脚本在时另有「复制地址」按钮。
- 回执是原生表单 `<form action="./_data/rsvp" method="post">`（不跑脚本也能提交）；脚本在时页内提交，
  并读 `./_data/rsvp.json` 统计「几家能来、大人几位、小朋友几位」，再把带留言的回执列成祝福（最多 8 条，审核挂起的别人的行不显示）。选「来不了」时人数按 0 记。
- 和 `sample-invitation`（周岁宴）的区别：这份是婚礼，多了故事、着装、信封封面和祝福墙；周岁宴那份更短、更家常。

## 数据表

`rsvp`（列 `name` / `attend` / `adults` / `kids` / `note`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="rsvp" revision=0 rows=[] columns=["name","attend","adults","kids","note"] append_open=true
```

读回：`list_data_rows table=rsvp`。`attend` 的值是 `能来` / `来不了`（页面按 `能来` 计数），`note` 是祝福留言。过了回执截止日把 `append_open` 关掉。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` | 标志行的两人名字、发出日期 |
| 封面 `.env` | `.seal` 圆印里的两个字；`h1` 里两人名字（每个字一个 `<span style="--i:n">`，n 依次加一）；`.date` 日期与时刻；`.line` 一句话 |
| `.facts` | 地点 / 仪式 / 回执截止 / 有事找谁 |
| 「我们的故事」`.story` | 每个 `<li>` = 一幅小插画 SVG + 年月 + 小标题 + 一两句；三到五个节点都排得下 |
| 「婚礼当天」`.day` | 每行 = 时刻 + 做什么 + 一句小字；最要紧的那一行加 `class="key"`；`.rain` 雨天备案 |
| 「地点与交通」`svg.map`（`.wide` / `.narrow`） | 路名、江、酒店方块（`path.bd`）、步行虚线（`path.walk`）、地铁口、车库、心形目的地；比例尺按「路线总长像素 ÷ 实际米数」重算；`aria-label` 同改 |
| 三步路线 / 地址 / 开车打车 | `.steps` 三行、`.addr` 里的地址与 `data-copy`、`.go` 两行 |
| 「着装与小提示」 | `.dress` 的色点（`--c`）与色名、`.tips` 逐条 |
| 「回执」 | 截止日、人数选项；表单字段名要和 `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-wedding-invite \
  --proposal <proposal_id> --manifest core/space/examples/sample-wedding-invite/manifest.json --hold
# 先建 rsvp 表 → 预览确认 → publish_version → 链接发到家族群和朋友群
```

改时间、下雨改室内、婚礼后补照片：改完再推一次到**同一个** `proposal_id`，链接不变。
验收截图：`node --import tsx examples/verify-shots.mjs sample-wedding-invite --write-thumb`（QUALITY.md §7）。