# 小满一岁啦 · 成长相册

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

## 这是什么

成长相册 · 宝宝一岁的翻书相册，发到家族群

## 什么时候用

孩子满一岁、毕业、宠物到家一周年这类「一段时间、按月记」的回顾，想让家里人像翻一本书那样一页页看、看完留一句话，选它。要收亲友回执、问几位到场，选 sample-invitation 或 sample-reunion-invite；要每周更新的家庭安排，选 sample-family-week。

## 用户对助手说的原话

帮我给孩子做一本一岁成长相册，发成网页链接发到家族群：做成一本能翻的书，手机上一页一页左右滑或点书页翻，翻页时页面绕书脊转、带一层阴影，电脑上双页摊开；封面是孩子名字和「一岁啦」，一幅孩子牵着数字气球的插画和「翻开」按钮；扉页写出生日期时间、出生体重身长和爸妈的一段话；接着每个月一页，共 12 页：很大的月龄数字、日期和这个月学会的事、一幅画孩子在做这件事的简笔插画（不用真照片）、身高体重和比上个月长了多少、一句爸妈的话；然后一页「给孩子写一句」，亲戚填称呼和一句话提交，存到数据表、贴成便利贴墙；封底是这一年的生长曲线，身高和体重两条折线，背后衬同月龄参考范围的阴影，点某个月显示当月数字并能翻到那一页。颜色清爽，插画用简单的几何形状；脚本不跑时所有页按顺序竖排也能看完。

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

## 照着做一份

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

## 页面结构

- 封面
- 十二个月
- 给小满写一句
- 生长曲线

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

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

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

- 3D 翻书：手机竖屏一页一页翻，电脑上双页摊开；脚本不跑时 16 页按顺序竖排
- 最后一页留言（原生表单写进数据表 notes，页面读回贴成便利贴墙）
- 同一个链接接着加页（第二年往后续，不用重发）
- 阅读回执（家族群里谁翻过）

## 发之前要备好

- 数据表 notes（列 name / text，append_open=true）：「给小满写一句」那页的表单写进这里，页面读回贴成便利贴，发布前先用 set_data 建好

## 模板说明（README）

模板市场第二波「富媒体 H5」样例之一（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。示例数据均为虚构。

## 演示哪个特色

**一本在微信里就能翻的书 + 最后一页亲友留言写回数据表。**

- **记忆点**是这本书本身：手机竖屏一页一页翻（左右滑、点书页右侧 / 左侧、底部 ‹ ›），电脑上双页摊开（键盘 ← → 也行）。翻页用 CSS 3D：每一叶绕书脊 `rotateY(-180deg)`，正反两面 `backface-visibility:hidden`，翻的那一下整页罩一层由深到浅的阴影；书脊一侧常驻一道浅阴影。封面第一次露面会轻轻掀起一角再落下；封面那只「1」字气球是全页唯一的循环动画。`prefers-reduced-motion` 时翻页直接切换、动画全停。
- 共 16 页：封面 → 扉页（出生那天）→ 12 个月（每月一页：月龄大字、一幅内联 SVG 插画、身高体重与比上个月、一句爸妈的话）→「给小满写一句」→ 封底生长曲线。
- 封底曲线：身高 / 体重两条折线，背后衬同月龄女宝宝 P3–P97 的阴影，第一次翻到时线条画出来；点任一个月，两条线上那一点一起亮，下面一行显示当月数字和那个月学会的事，「翻到这一页」直接翻过去。手机 / 电脑各一套坐标（`.gc-m` 300 宽、`.gc-d` 380 宽）。
- 翻页声是 Web Audio 现合成的一小段沙沙声，只在读者自己翻页时响，顶栏右上角可以关。
- 发出去之后：「给小满写一句」是原生表单，写进数据表 `notes`；脚本在时页内提交、当场贴上一张便利贴，并读 `./_data/notes.json` 把大家写的话都贴回墙上。第二年接着往后加页，同一个链接再发一版，家族群里不用重发；阅读回执能看到谁翻过。
- 脚本不跑时，16 页按顺序竖排，内容完整、表单照样能提交。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 顶栏 `.top .who` | 相册名 |
| 封面 `.cover` | `.c-top` 家里的称呼、`h1` 标题、`.c-sub` 起止日期、`.c-by` 编者；气球上的数字在 `.t-one` |
| 扉页 `.fly` | 名字、出生日期时间、出生体重身长、`.letter` 那段话 |
| 每月一页 `article.month` | `id`：1 个月那页是 `months`（目录锚点），其余 `m2`…`m12`（封底「翻到这一页」靠它）；`.mnum b` 月龄、`time` 日期、`h2` 这个月学会的事、`.ill svg` 插画（换成自己画的或 WebP 图，记得写 `alt`）、`.read` 身高体重与「比上个月」、`blockquote` 一句话和署名、`.pno` 页码 |
| 「给小满写一句」`#notes` | 标题、说明、墙上预先贴的几张 `.wall li`；表单 `action="./_data/notes"`，字段名就是表里的列名 `name` / `text` |
| 封底 `#curve` | `.grow` 一年长了多少；两张 `svg.gc`（每个点、阴影、刻度都是写死的坐标，换数据要两套一起改）；脚本里的 `DATA`（`h` 身高、`w` 体重、`t` 每月一句）给点按读数用 |
| 页脚（封底底部） | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的相册时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；`sections` 的 `anchor` 与页面里的 `id` / `data-track-section` 一一对应 |

加减页数不用改脚本：脚本按 `#book` 下面的 `article.page` 顺序装订（手机一页一叶，电脑两页一叶），页数是奇数时电脑上最后一叶背面留白。

## 数据表

「给小满写一句」写进数据表 `notes`（一次一行，`append_open=true`）。发之前先建表：

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

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

## 怎么发出去

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

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

## 素材

- 没有照片、没有位图：插画全是内联 SVG 几何图形现画的；人名、日期、身高体重均为虚构，参考区间只作量级示意。
- `thumb.webp` / `phone.webp`：画廊缩略图与落地页手机图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。