# 团子的第 365 天

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

## 这是什么

宠物日记 · 毛孩子到家一周年，发到家人群和朋友圈

## 什么时候用

猫狗到家一周年、生日、绝育满月这类「给毛孩子记一年」的页面：首屏一只会动、能点的主角，往下是按月的拍立得墙、体重曲线、趣味数据和疫苗驱虫提醒，亲友看完送一根骨头、留一句话，选它。给小孩做一岁成长相册、想一页页翻书看，选 sample-growth-album；只想收亲友的祝福弹幕，选 sample-wish-wall；要每周更新的家庭安排，选 sample-family-week。

## 用户对助手说的原话

帮我给我家狗做一页到家一周年的日记，发到家人群和朋友圈：首屏大标题「<名字>的第 365 天」和到家日期，正中一只用 SVG 画的狗（照它的品种和毛色），会眨眼、摇尾巴，点它会合成一声狗叫（点了才出声，右上角能静音）并跳一下，下面一行体重、月龄、收到几根骨头；电脑上狗居中放大，左边档案卡和今天早上做了什么，右边骨头数和下一次驱虫，卡片微微歪着。往下是「它的一年」：每月一张拍立得，一幅它在做那件事的简笔 SVG 插画（不用真照片）、日期和一句话，卡片轻微倾斜、滚到时依次落下；然后是每月称一次的体重曲线，衬上这个品种成年体重的参考带，点某个月看当月；「之最」六个趣味数字（拆家次数、最爱玩具、散步里程、最快冲到门口……）；疫苗与驱虫时间线按真实日期画，标出今天和下一次还有几天；最后是「送它一根骨头」，写称呼和一句话提交，存进数据表，页面读回显示骨头数和留言气泡。颜色清爽，可爱但别幼稚；脚本不跑时内容和表单都完整。

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

## 照着做一份

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

## 页面结构

- 团子
- 团子的一年
- 体重
- 团子之最
- 疫苗与驱虫
- 送一根骨头

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

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

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

- 首屏一只内联 SVG 画的柯基：眨眼、摇尾巴，点它会叫一声（Web Audio 现合成，点了才响，可静音）并跳一下
- 拍立得卡片墙：12 张按月的 SVG 插画，轻微倾斜、滚动入场
- 体重曲线（手机 / 电脑各一套坐标，点某个月看当月）与按真实日期比例的疫苗驱虫时间线，标出今天和下一次
- 「送一根骨头」原生表单写进数据表 treats，页面读回骨头数与留言气泡
- 同一个链接接着更新（第二年往后续写，不用重发）

## 发之前要备好

- 数据表 treats（列 name / text，append_open=true）：「送一根骨头」的表单写进这里，页面读回骨头数与留言气泡，发布前先用 set_data 建好

## 模板说明（README）

模板市场「补齐空缺」那一轮的样例之一（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。示例数据均为虚构。

## 演示哪个特色

**一只能点的主角 + 看完送一根骨头写回数据表。**

- **记忆点**是首屏那只用内联 SVG 画的柯基「团子」：眼睛隔几秒眨一下、尾巴一直在摇（全页唯一的循环动画，`prefers-reduced-motion` 时全停）；点它会叫一声并跳一下，旁边冒一个「汪！」。叫声是 Web Audio 现合成的（锯齿波 + 方波过带通滤波，频率往下滑），**只在读者点了之后才响**，右上角可以静音；支持的手机会轻震一下。标题里的「365」打开时从 1 数上来。
- 电脑上团子居中放大，两侧各两张微微歪着的卡片：档案、今天早上；骨头数和最新一句留言、下一次驱虫。手机上两侧卡片收起，换成标题下面一行「体重 · 月龄 · 骨头数」。
- 往下：「团子的一年」12 张拍立得（每张一幅 SVG 插画，共用一个 `<symbol id="pup">` 小柯基 + 当月道具），轻微倾斜，滚到时依次落下；体重曲线（每月 29 号称一次，衬成年柯基 10–12 公斤参考带，手机 / 电脑各一套坐标，点某个月看当月）；「团子之最」六个数；疫苗与驱虫时间线按真实日期比例画，标出今天和下一次，上方一条提示写明还有几天。
- 发出去之后：「送一根骨头」是原生表单，写进数据表 `treats`；脚本在时页内提交，碗里当场多一根骨头、小柯基跳一下，并读 `./_data/treats.json` 把大家的话贴成气泡、骨头数跟着加。第二年接着往下写，同一个链接再发一版，群里不用重发；阅读回执能看到谁看过。
- 脚本不跑时，所有内容按顺序完整显示，表单照样能提交。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 首屏 `#hello` | `.h-kick` 到家日期与今天、`h1` 名字和天数（`.n365`，脚本会从 1 数到这个数，改了这里脚本里的 `365` 也一起改）、`.h-who` 谁记的、`.facts` 三个数 |
| 团子本身 `svg.dog` | 毛色在 CSS 变量 `--fur` / `--fur2` / `--white` / `--ear`；换成猫就改耳朵（`.ears`）和尾巴（`.tail`）的路径；项圈牌上的字在 `<text>` 里 |
| 两侧卡片 `.h-side` | 档案（品种、生日、到家、年龄、体重）、今天早上、骨头数、下一次提醒；只在电脑上显示 |
| 叫声 | 脚本里的 `woof()`：起始频率 640、下滑到一半、时长 0.16 秒；`SAY` 是气泡里轮换的话 |
| 拍立得 `#year .wall` | 每张 `li.pol`：`--r` 倾斜角度、`time` 年月、`span` 那句话、`svg` 里的插画（换成 WebP 图记得写 `alt`） |
| 体重 `#weight` | 两张 `svg.wc`（坐标写死，换数据两套一起改）；脚本里的 `KG` 给点按读数用 |
| 团子之最 `#best` | 六个 `li`：图标、名目、数字、单位、一句明细 |
| 疫苗与驱虫 `#care` | `.next` 接下来两件事和还有几天；两张 `svg.cc`（按日期比例算好的坐标）；`.done` 打过的针 |
| 送骨头 `#treats` | 标题、说明、预先写好的几个气泡 `.bubbles li`（骨头数从它们的个数起算）；表单 `action="./_data/treats"`，字段名就是列名 `name` / `text` |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的页面时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；`sections` 的 `anchor` 与页面里的 `id` / `data-track-section` 一一对应 |

## 数据表

「送一根骨头」写进数据表 `treats`（一次一行，`append_open=true`；`text` 可以空，页面上显示成「送了团子一根骨头。」）。发之前先建表：

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

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

## 怎么发出去

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

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

## 素材

- 没有照片、没有位图：团子和 12 张拍立得都是内联 SVG 几何图形现画的；名字、日期、体重、数字均为虚构，成年柯基体重区间只作量级示意。
- `thumb.webp` / `phone.webp`：画廊缩略图与落地页手机图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。