# 三年级（2）班 · 秋季研学通知

> 活页公开模板 `sample-class-notice` · 场景: 报名 · 投票 · 接龙 · 行业: 教育培训
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/-GDHnFwhpkdC · 详情: https://space.24haowan.com/examples/sample-class-notice

## 这是什么

通知回执 · 发到家长群，要每位家长确认

## 什么时候用

班主任、社团、培训班发一份通知，要每一位家长（学员）都回一句「收到 / 参加不参加」，并且要一眼看出还差谁没回，选它：研学、春秋游、家长会、体检、放假安排。名单只显示学号后两位，不露孩子姓名。要收报名、按线路分名额的，选 sample-event-signup；请人来参加婚宴、聚会并收出席回执的，选 sample-invitation；要大家投票评比的，选 sample-vote-rank。

## 用户对助手说的原话

帮我做一份班级通知的网页，发到家长群里让每位家长回执：三年级（2）班秋季研学，11 月 6 日去湿地自然学校，全班 42 人。手机竖屏为主；电脑上左边是通知单和正文，右边固定一块回执统计。首屏是一张像纸质通知单的卡片：学校抬头和文号、宋体大标题、一句给家长的话、时间 / 地点 / 费用 / 回执截止四格要点、班主任署名，底边一条虚线裁切的「回执联」点了跳到页末；旁边一个回执进度环，写「已确认 31 / 42 位家长」、参加几人不参加几人，再列还没回执的学号后两位（不写孩子姓名），打开页面时进度环从 0 长到当前值。往下依次是：当天行程时间线（时刻、做什么、一句说明）、要带的东西（能勾选的清单，只在页面上勾，不保存，下面写不要带什么）、安全须知（点开折叠的五条）、费用说明（一条构成色条和明细表，写清怎么交、不参加不用交）。最后是回执表单：学号后两位、家长称呼、参加 / 不参加、备注（过敏、晕车），提交后存进一张数据表，页面读这张表把已回执的学号从名单里划掉、进度环跟着涨，并出一张盖着红色「回执已收到」印章的回执联，印章有盖下去的动画。颜色清爽，少用底色块，节与节用细线分隔。以后行程有变就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 通知
- 当天行程
- 要带的东西
- 安全须知
- 费用说明
- 回执

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

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

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

- 页内回执写回数据表（原生表单 POST ./_data/receipts 打底，脚本在时页内提交），提交后就地盖章
- 页面读回回执表：进度环、已确认人数、未回执学号后两位三处同源，家长一打开就知道还差谁
- 同一链接更新不变（改行程、补通知都在这一页），阅读回执看看家长看到了哪一节
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 receipts（列 student / parent / attend / note，append_open=true）：文末回执表单写进这里，student 填学号后两位，页面读回算已确认人数和未回执名单；发布前先用 set_data 建好，截止后把 append_open 关掉
- 回执表的行会被页面读到，备注里可能有过敏等健康信息：建议用 set_visibility 设成 passcode，口令只发在本班家长群

## 模板说明（README）

模板市场第三轮补齐的模板之一（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。虚构的「青檀路小学」三年级（2）班秋季研学通知，班主任发到家长群，每位家长在页末回执。示例内容均为虚构。

## 演示哪个特色

**通知发出去，谁回了、谁还没回，一打开就看得见 —— 回执写回数据表，页面读回算进度。**

- **记忆点**是首屏那张像纸质通知单的卡片：学校抬头和文号、宋体标题、时间 / 地点 / 费用 / 回执截止四格要点、班主任署名，底边一条打孔虚线的「回执联」，点了跳到页末表单。旁边（电脑上是右侧固定栏）是回执进度环，打开时从 0 长到「已确认 31 / 42 位家长」。
- **未回执名单只显示学号后两位**（`03 07 12 …`），不显示孩子姓名；家长看见自己孩子的号就知道该填了。
- 提交回执后：那个学号从名单里缩掉、进度环和人数跟着涨，下面出一张回执联，红色「回执已收到」印章盖下去（CSS 动画），支持的手机轻震一下。再次打开页面时，读到自己交过的那一行（`_mine`）会直接显示盖好章的回执联。
- **数字自洽**：脚本里的 `MISSING`（发页时还没回执的 11 个学号）与 `ABSENT`（已回执里不参加的 2 人）是初值，页面读 `./_data/receipts.json` 把读到的学号从 `MISSING` 里划掉；进度环、已确认人数、参加 / 不参加、名单四处同一个来源。同一个学号交两次按最后一次算，不重复计数。
- 「要带的东西」是能勾的清单，只在本页勾，不保存；安全须知用原生 `<details>` 折叠。
- 降级：脚本不跑时进度环和名单按页面里写的初值静态显示，文末原生表单（`<form method="post" action="./_data/receipts">`）照样能交；`prefers-reduced-motion` 时动效停在终态。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| `.head` | 学校标志、校名、班级、文号和发文日期 |
| `.sheet h1` / `.greet` | 通知标题、给家长的一句话 |
| `.keys` 四格 | 时间、地点、费用、回执截止（截止时间同步改脚本里的 `DUE` 与 `OPEN`） |
| 脚本 `TOTAL` / `MISSING` / `ABSENT` | 全班人数、发页时还没回执的学号、已回执里不参加的人数；`.stats` 里的静态数字、`stroke-dashoffset`（= 326.73 × 未回执数 / 总人数）与名单同步改，脚本不跑时看到的就是它们。新发的通知 `MISSING` 写全班、`ABSENT` 写 0 |
| `select[name=student]` | 学号选项，与 `TOTAL` 一致 |
| `#plan` / `#bring` / `#safety` / `#fee` | 行程、要带的东西、安全须知、费用明细（色条 `viewBox` 宽度 = 合计金额，每段 `width` = 金额） |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的通知时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

## 数据表

回执写进数据表 `receipts`（列 `student` 学号后两位 / `parent` 家长称呼 / `attend` 参加或不参加 / `note` 备注，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "receipts"  columns: ["student","parent","attend","note"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=receipts` 读回，把备注里的过敏、晕车整理给随队老师。到截止时间用 `set_data` 传 `append_open: false` 关掉写回（页面会提示「回执已经截止了」）。
注意：页面会读整张表，备注可能有健康信息 —— 建议 `set_visibility` 设成 `passcode`，口令只发在本班家长群。本地 `space-cli serve` 会把回执写进包里的 `_data/receipts.json`，试完记得改回 `[]`。

## 怎么发出去

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

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。确认后设好口令，把链接转进家长群。

## 素材

- 没有位图：校徽、剪刀、印章都是内联 SVG；学校、湿地学校、老师与学号均为虚构。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。