# 豆包的寄养日报 · 第 4 天

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

## 这是什么

宠物寄养日报 · 每晚发给主人的同一个链接

## 什么时候用

宠物店、寄养家庭、上门喂养每天给主人汇报一只猫狗的状况：吃了多少、遛了几次、精神怎样、还有几天接回，同一个链接每晚更新，主人能留言。只是一次性的店铺介绍或报价选 service-landing；要收报名选 sample-event-signup；行程类的家庭出行选 sample-weekend-trip。

## 用户对助手说的原话

帮我做一个宠物寄养日报网页，宠物店每晚发给寄养中的狗狗主人，同一个链接每天更新：页头是店名和寄养单号、每晚几点更新；首屏写今天日期、一句今天的状态当标题，一个很大的「寄养第 4 天 / 共 7 天」数字，下面七个爪印表示进度，五个表情组成的精神刻度点亮今天那一档，再写离接回还有几天和接回时间，旁边画一只狗狗插画（会摇尾巴）；接着是今天的数据：每顿饭的时间和吃了几成（进度条）、遛弯次数和时长（一条按钟点画的时间条）、喝水、便便、体温、精神；然后是从早到晚的时间轴；三张拍立得样式的今日照片，点开放大；护理员一句话；往日日报按天折叠，每天一行摘要可以展开；最后让主人留言：填称呼和一句话，留言存到一张数据表，页面上显示成聊天气泡，店员的回复显示在另一侧，下面写门店电话。电脑上首屏左右排、下面分两栏，手机上一栏。

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

## 照着做一份

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

## 页面结构

- 今天的豆包
- 今天的数据
- 时间轴
- 今日照片
- 护理员的话
- 往日日报
- 留言

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

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

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

- 同一个链接每晚更新，主人收藏一次就行
- 主人留言经原生表单写回数据表 messages（POST ./_data/messages），页面读回成气泡
- 店员用工作区账号在页面上留言，读回时显示为店里的回复

## 发之前要备好

- 数据表 messages（列 name / text，append_open=true）：主人留言写进这里，店员用工作区账号在页面上发的那几行显示为店里的回复；寄养结束后把 append_open 关掉

## 模板说明（README）

宠物店 / 寄养家庭每晚给寄养中的猫狗主人发一页日报：同一个链接每天更新，主人在微信里点开就是今天的。示例内容均为虚构（店名「毛球之家」、柯基豆包、苏女士、护理员小周、门店电话都是编的；照片位是内联 SVG 插画）。

## 演示哪个特色

**链接不变、每晚更新，加一个主人留言写回数据表。**

- 首屏是这一份的记忆点：寄养第几天 / 共几天的大数字、七个爪印进度、五档表情的精神刻度、离接回还有几天，旁边是宠物本人（插画，尾巴会摇；`prefers-reduced-motion` 时不动）。
- 今日数据（喂食几顿与每顿吃了几成、遛弯次数与时长的内联 SVG 时间条、喝水、便便、体温、精神）、当天时间轴、三张拍立得照片（点开放大）、护理员一句话、往日日报（`<details>` 折叠，每天一行摘要）。
- 文末是原生表单 `<form action="./_data/messages" method="post">`（`name` / `text`）：不跑脚本也能提交（服务端 303 回到本页并带 `?space_submitted=messages`）；脚本在时 `fetch` 页内提交、就地显示「收到了」。
- 页面 `fetch('./_data/messages.json')` 读回留言，按 `_at` 排序显示成气泡；**店员（工作区成员）登录后在页面上写的那几行带 `_by`，显示在右侧、是店里的回复**。表单上面那两条气泡是写死在页面里的昨天的对话，改成你自己的或删掉。
- 电脑上首屏左右排、下面两栏（左：数据 + 时间轴，右：照片 + 一句话 + 往日）；手机上一栏，插画移到最上面。

## 表

| 表 | 列 | 读者写回 `append_open` | 页面怎么用 |
|---|---|---|---|
| `messages` | `name`, `text` | **开** | 主人留言写进来；读回显示成气泡，带 `_by` 的行是店员回复 |

发之前先建表：

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

读留言：`list_data_rows table=messages`。寄养结束后把开关关掉：`set_data table="messages" revision=<当前> append_open=false`（页面会印「留言已经关了」）。
本地 `space-cli serve` 会把提交写进包里的 `_data/messages.json`，试完记得改回 `[]`。

## 改哪里变成我的

- **每天要改的**（都在 `index.html`）：页头「今天已更新」、首屏日期与标题、大数字和 `寄养第 N 天`、`.paws` 里把下一个爪印改成 `done` / `now`、精神刻度把 `on` 挪到对应那一档、接回倒计时；今日数据、时间轴、护理员的话；把昨天的内容收成「往日日报」里最上面的一条 `<details>`（摘要一句 + 展开一段）。`manifest.json` 的 `title` / `share.desc` 一起改。
- **照片**：三张 `.pola` 里的 `<svg>` 是插画占位，换成真照片：`<img src="photo-1.webp" alt="早饭前乖乖坐好">`（WebP，长边 ≤ 1600px、每张 ≤ 300 KB），图随包上传；`data-cap` 是放大后的说明。
- **店与宠物**：页头店名、寄养单号；插画里的柯基是 `<symbol id="corgi">`，换猫或别的狗就改这一处的颜色和耳朵；`figcaption` 里的品种、年龄、体重。
- **联系方式**：表单下面那行门店电话与营业时间。
- 配色在 `:root` 的变量里（青绿 `--teal` 管数据与回复，蜜桃 `--peach` 管宠物与饭量，蜂蜜 `--honey` 管接回提醒），暗色两处一起改。

## 怎么发出去

1. 第一次：建页面，上传这个目录（`index.html`、`manifest.json`、`_data/messages.json`），按上面建好 `messages` 表，把链接发给主人（主人收藏这一个链接即可）。
2. 之后每晚：改好 `index.html` 发一个新版本，链接不变；想让主人收到提醒就推一下（或让主人点页面上的「关注更新」）。
3. 看留言、回复：`list_data_rows table=messages`；店员用工作区账号在页面上发一句，就显示成店里的回复。