# 奶奶 80 岁生日祝福墙

> 活页公开模板 `sample-wish-wall` · 场景: 互动玩法 · 行业: 个人家庭 / 企业内部
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/-sY-lGswthTE · 详情: https://space.24haowan.com/examples/sample-wish-wall

## 这是什么

生日祝福墙 · 家族群每人留一句，当天投到电视上

## 什么时候用

给长辈过大寿、给同事过生日、给退休的老领导送行，想让一群人每人留一句、当天在电视或会议室大屏上一起看，选它：首屏是一只会吹灭的蛋糕，大家的祝福当弹幕飘。要请人来吃饭、收出席回执选 sample-invitation（婚礼选 sample-wedding-invite）；按场次报名、限名额选 sample-event-signup。

## 用户对助手说的原话

帮我做一个生日祝福墙网页，发到家族群里让每个人给奶奶留一句，生日那天投到电视上看：首屏是关了灯的夜色背景，正中一只现画的两层生日蛋糕，插着 8 和 0 两根数字蜡烛，火苗一直轻轻摇、往上飘火星，上面写「奶奶，80 岁生日快乐」和奶奶的名字、寿宴日期地点；背景里大家的祝福当弹幕从右往左飘（称呼、关系、一句话，几条跑道速度错开、互相不重叠）；蛋糕下面一个「吹蜡烛」按钮，点了火灭、冒一缕烟、两边炸出彩带，再放一句生日歌（点了才响，有静音键），旁边写已有几位家人留言、可以展开看全部；往下是留言表单（称呼、和奶奶的关系、一句祝福，给三句常用祝福一点就填），存进一张数据表，弹幕从这张表读，提交后自己那条马上变成一条高亮的弹幕飞过；再往下是「奶奶的 80 年」时间轴，六个年份节点，每个配一幅线描小插画，滑到时一笔一笔画出来。手机竖屏为主，电脑上居中一块手机大小的舞台，加一个「全屏投屏」按钮，进去只剩蛋糕和弹幕；系统要求减少动效时弹幕改成列表，不跑脚本时祝福也要完整显示。

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

## 照着做一份

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

## 页面结构

- 生日蛋糕
- 给奶奶写一句
- 奶奶的 80 年

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

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

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

- 页内留言写回数据表（原生表单 POST ./_data/wishes），页面读回 ./_data/wishes.json 把每一条变成弹幕，自己刚写的那条立刻高亮飞过
- 电脑上一键全屏投屏，生日当天投到电视上，新留言随时加进来
- 微信卡片（share.title / share.desc），发到家族群里点开就能写

## 发之前要备好

- 数据表 wishes（列 name / relation / text，append_open=true）：留言表单写进这里，首屏弹幕从这里读回；发之前先用 set_data 建好，过完生日把 append_open 关掉

## 模板说明（README）

模板市场「富媒体 H5」一波的画廊样例（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
故事：周家奶奶沈秀兰 80 岁，大孙女小满做了这一页发到家族群，每人留一句，11 月 8 日中午在饭店包间的电视上放。人名、镇名、饭店名均为虚构。

## 演示哪个特色

**页内留言写回数据表，再读回来变成弹幕 + 当天全屏投到电视上。**

- **记忆点**是首屏：关了灯的夜色里一只 canvas 现画的两层蛋糕，插着「8」「0」两根数字蜡烛，火苗一直在摇、往上飘火星（全页唯一的循环动画）。点「吹蜡烛」（或直接点蛋糕）火灭、冒烟、两边炸出彩带，同时用 Web Audio 合成一句生日歌 —— 只在点按之后发声，左边有静音键；手机支持的话轻震一下。再点一次「重新点上」。
- 背景是祝福**弹幕**：每条跑道速度固定且各不相同（快的追不上慢的），前一条的尾巴离开右边才放下一条，所以不重叠；一打开每条跑道就有一条已经飘在半路。弹幕的来源是页面里写好的 `<ul class="wall">`（14 条示例）加数据表 `wishes` 读回的行，按称呼 + 内容去重。「看全部」把它们摊成一张列表。
- 发出去之后：「给奶奶写一句」是原生表单 `<form method="post" action="./_data/wishes">`，不跑脚本也能提交；脚本在时页内提交，页面滚回首屏，自己那条变成一条金色高亮弹幕立刻飞过，并加进列表、计数加一。
- 电脑上（鼠标 + 宽屏）多一个「全屏投屏」按钮：铺满整块屏、字放大、只剩蛋糕和弹幕，Esc 或右边的叉退出。新留言随时加进来，刷新一下就飘。
- 降级：不跑脚本时首屏是一张静态 SVG 蛋糕 + 完整的祝福列表；`prefers-reduced-motion` 时同样显示静态蛋糕和列表，吹蜡烛只是让火苗消失，时间轴插画直接画好。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 首屏 `.top` | `.fam` 家里的称呼、`h1` 寿星和岁数（`<em>` 是金色数字）、`.meta` 名字 / 日期 / 地点 |
| canvas 蜡烛 | 脚本 `drawCake` 里 `digit('8', …)` / `digit('0', …)` 两根数字蜡烛；不跑脚本时那张 `.cake-static` SVG 里的两个 `<text>` 也一起改 |
| 示例祝福 `<ul class="wall">` | 一条一个 `<li><b>称呼</b><i>关系</i>一句话</li>`；发自己的页时可以只留两三条开个头，其余等家人来写。`.count` 里的数字脚本会重算，但不跑脚本时显示页面里写的 |
| 「给奶奶写一句」 | 表单字段名 `name` / `relation` / `text` 就是表里的列名；`.lead` 写清什么时候、在哪儿放；`.quick` 三句常用祝福；`.hint` 截止时间 |
| 时间轴 `.years` | 六个 `<li>`：年份、岁数、一句标题、一句话，配一幅线描 `<svg>`（每条线带 `pathLength="1"`，进入视野时一笔一笔画出来）；`.now` 是今年那一句 |
| 电脑左侧 `.aside` | 生日当天怎么投屏的三步 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的页时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（家族群里卡片上的字） |

同事生日、老领导退休、毕业送别都能用：把蛋糕上的数字、标题和时间轴换掉就行。

## 数据表

留言写进数据表 `wishes`（一条一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "wishes"  columns: ["name","relation","text"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=wishes` 读回；有不合适的留言用 `set_data_row_status` 收回。过完生日把 `append_open` 关掉，页面留着当纪念。
本地 `space-cli serve` 会把提交写进包里的 `_data/wishes.json`，试完记得改回 `[]`。

## 怎么发出去

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

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
给谁看：默认仅自己可见；发到家族群前用 `set_visibility` 改成 `passcode`（口令发在群里）或按用户的意思公开。

## 素材

- 没有位图：蛋糕、火苗、烟和彩带是 canvas 现画的，时间轴插画和图标是内联 SVG；生日歌是 Web Audio 现合成的几个音。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机大图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。