# 豆豆家 · 本周计划

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

## 这是什么

家庭周计划 · 每周日更新发到家庭群

## 什么时候用

一家人共用、每周（甚至每天）更新同一个链接的东西：谁接送孩子、兴趣班、孩子的零用钱、家务打卡、一周菜单、疫苗家长会提醒，发到有长辈的家庭群。要读者认领、留言时照文末这张 pickup 表做。只记一个孩子的学习计划和每日打卡选 sample-study-plan；请亲戚来吃饭、收出席回执选 sample-invitation；几天的出游行程选 sample-weekend-trip。

## 用户对助手说的原话

帮我做一份我们家的本周计划，发成一个网页链接到家庭群给爸妈和爷爷奶奶看，字号大一点：页头写谁家、上学期第几周、日期范围和谁整理；第一节是一条本周日历，周一到周日横排，左边固定三行「接送 / 兴趣班 / 家里」，每一格写谁负责、几点，用不同颜色的小圆点区分家里每个人（上面放图例），今天那一列高亮、已过去的几天淡一点，还没人管的那格标「待认领」，手机上整条可以左右滑；然后是孩子的零用钱：一个大字余额，一句「上周余额 + 本周收入 − 支出」，一张本周收支明细（金额自己算对），一条储蓄目标进度条（比如攒够多少钱买什么），再画一张近几周余额的折线图带目标虚线；接着是家务打卡，每样一行、周一到周日一排圆点（做了 / 没做 / 还没到）；然后一周晚饭谁做；再列本周提醒（疫苗、家长会、缴费），左边一条细色线；最后做一张「认领接送 / 留言」表单：哪一天、您是谁（点选）、想说的话，一个发送按钮，存进一张数据表，页面读这张表列出留言，有人认领了就把日历上「待认领」那格换成他。少用底色块，用细线分隔；温暖但别幼稚。以后每周日更新到同一个链接。

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

## 照着做一份

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

## 页面结构

- 谁接谁送
- 零用钱
- 家务打卡
- 晚饭
- 别忘了
- 认领 · 留言

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

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

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

- 页内认领 / 留言回写数据表（原生表单 POST ./_data/pickup），页面读回：列出留言，把「待认领」那天改成认领人
- 同一链接持续更新（每周日换下一周，平时零用钱、打卡随时改）
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 pickup（列 day / who / note，append_open=true）：文末认领接送 / 留言写进这里，发之前先用 set_data 建好；每周日更新下一周时，把上周的行读回归档后用 set_data 清空

## 模板说明（README）

只进画廊的样例（活页模板市场第一波，K1DG；总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
示例内容均为虚构（人名、学校、社区医院、公园都是编的）；页面没有位图，图标与图表都是内联 SVG。

## 演示哪个特色

**同一个链接每周更新 + 文末认领 / 留言写回数据表。**

- 记忆点：「这一周谁接、谁送」那条本周日历（CSS grid，周一到周日横排，左侧一列固定行名「接送 / 兴趣班 / 家里」，`position:sticky`）。
  小圆点颜色 = 家里谁负责（爸爸 / 妈妈 / 爷爷 / 奶奶 / 全家），上面一行图例；「今天」那一列浅色高亮 + 顶部一条色线 + 「今天」小标（全页唯一的循环动效，`prefers-reduced-motion` 时停），已过去的几天变淡。
  手机上每天一列 128px、整条横向滑动（只在 `.strip` 里滚，正文不溢出），脚本把今天滚进视野。
- 「今天」写死在 `#cal` 的 `data-today`（发出那天）；脚本在时如果读者本机日期落在本周，就挪到真正的今天（晚饭清单同步高亮）。
- 零用钱：大字余额 = 上周日余额 126.50 + 本周收入 34.00 − 支出 17.50 = 143.00；储蓄目标 180，进度 79%；近五周余额折线（内联 SVG，电脑 / 手机各一套坐标，带目标虚线，进视野时长出来）。
- 文末「认领接送 · 留言」是原生表单 `<form action="./_data/pickup" method="post">`（不跑脚本也能提交）；脚本在时页内提交，
  并读 `./_data/pickup.json` 列出留言，有人认领了周四，就把日历上「待认领」那格换成认领人。

## 数据表

`pickup`（列 `day` / `who` / `note`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="pickup" revision=0 rows=[] columns=["day","who","note"] append_open=true
```

读回：`list_data_rows table=pickup`。`day` 的值是表单里的选项文字（如 `周四 10/29`、`只留言`），页面按 `周四 10/29` 判断认领。
每周日换下一周时：读回上周的行留底，再用 `set_data` 清空，表单里的日期选项同步改成新一周还没人接的那几天。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `h1` / `.sub` / `.facts` | 谁家、更新时间、学期第几周与日期范围、发给谁、谁整理 |
| `.legend` 与 `.m.dad / .mom / .ye / .nai` | 家里有谁、各用什么颜色（`:root` 与两处暗色变量里的 `--dad` 等同改） |
| `#cal`（本周日历） | `data-today` 改成发出那天；每一天四格（`.dh` 日期头 + `.r1` 接送 + `.r2` 兴趣班 + `.r3` 家里），`data-d` 写 `YYYY-MM-DD`；没人管的那格用 `.it.open`「待认领」，并保留 `id="open-thu"`（或改脚本里的 id 与日期） |
| 「零用钱」 | `.big` 余额、`.calc` 那句算式、`.ledger` 明细与本周合计、`.goal` 目标与 `.bar span` 的 `width`（= 已攒 ÷ 目标）；折线 `svg.bal.wide / .narrow` 的点按「日期比例」重算，`aria-label` 同改 |
| 「家务打卡」 | 每样一行：`.d.y` 做了 / `.d.n` 没做 / `.d.f` 还没到 / `.d.x` 那天不用做；右边 `本周` 计数 |
| 「晚饭」「别忘了」 | 每天一行（`data-d` 同日历，今天自动高亮）；提醒每条一行，日期写在 `.when` |
| 「认领 · 留言」 | 「哪一天」的选项换成新一周还没人接的日子；「您是」换成家里的人；字段名要和 `pickup` 的列一致 |
| 页脚 | 平台标志与名称（与 `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-family-week \
  --proposal <proposal_id> --manifest core/space/examples/sample-family-week/manifest.json --hold
# 先建 pickup 表 → 预览确认 → publish_version → 链接发到家庭群
```

每周日晚改成下一周、平时零用钱和打卡有变化：改完再推一次到**同一个** `proposal_id`，链接不变，家里人收藏这一个就行。
验收截图：`node --import tsx examples/verify-shots.mjs sample-family-week --write-thumb`（QUALITY.md §7）。