# 今日健康天气 · 青桐里卫生服务站

> 活页公开模板 `sample-health-weather` · 场景: 资讯早报 · 行业: 医疗健康 / 政务国企
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/-ChwkvwueSvM · 详情: https://space.24haowan.com/examples/sample-health-weather

## 这是什么

社区健康早报 · 卫生站每天早上发到居民群的健康指数卡

## 什么时候用

社区卫生服务站、家庭医生团队、药房、养老机构、社区居委会想每天早上给慢病老人、带娃家庭发一条「今天该注意什么」：五张由真实天气按规则算出等级、点一下翻面看原因和建议的健康指数卡，加本周出诊义诊和量血压打卡，选它。只想给粉丝群发城市天气早安和本地城事（穿衣带伞、没有健康建议），选 sample-city-morning；要发行业资讯、往期可翻选 sample-daily-brief；只要一张就诊流程或院区指引选 sample-clinic-guide。

## 用户对助手说的原话

帮我做一份社区卫生服务站每天早上发到居民群的「今日健康天气」，发成一个网页链接：页头是卫生站和家庭医生团队的名字、期号、日期，右上角一个「字放大」按钮（老人看得清），下面一句「今天已有几位街坊量了血压」；接着是今天的天气一行（用 Open-Meteo 的免费天气接口取我们城市的实时天气，连昨天一起取，页面里先内联一份今天的快照，取不到也照样显示，写明数据来源和更新时间）；主角是五张能点一下翻面的健康指数卡：感冒风险、紫外线、晨练适宜度、慢病提醒（温差和骤降对高血压、心脑血管）、带娃出门，每张正面是很大的等级字和四格刻度、一句医生口吻的提示，背面是为什么是这一档（预报里的真实数字）、具体建议和谁要特别留意；等级按温差、比昨天降温、体感温度、降雨概率、紫外线、风力的规则算，规则写在卡片下面可以展开看；然后一张未来 3 天的最高最低气温小图，标出昨天和每天的慢病提醒等级，配一句总结；再是本周出诊和义诊安排（每天的项目、时间、医生、要带什么，标出今天），加地址和什么情况要拨 120；最后「今天量血压了吗」打卡：点选年龄段、高压区间、今天感觉，存到数据表，页面读回今天几人打卡和血压分布，打完给一句建议。字号偏大、颜色清爽；手机上卡片左右滑，电脑上卡片网格铺开、右边一栏放出诊安排。每天早上更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 今日健康指数
- 未来 3 天
- 本周出诊与义诊
- 今天量血压了吗

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

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

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

- 外部数据是真的：天气来自 Open-Meteo（免费、无需 key，含昨天用来算降温），页面内联一份当天快照先画首屏，脚本再取实时数据（3 秒超时），失败就保留快照并写明「数据更新于」
- 五张指数卡（感冒风险、紫外线、晨练、慢病提醒、带娃出门）的等级由页面里写明、可展开查看的规则算出，点一下 3D 翻面看真实读数和医生建议；手机左右滑、电脑三列网格
- 未来 3 天气温图（手机、电脑两套坐标）带每天的慢病提醒等级；本周出诊与义诊按日期标出今天
- 「今天量血压了吗」写回数据表 checkin（列 age / sbp / feel，不收姓名），页面读回今天几人打卡、高压分布，就地给一句建议；有「字放大」，老人看得清
- 同一个链接每天早上更新快照和出诊安排，居民群里收藏一次就够

## 发之前要备好

- 数据表 checkin（列 age / sbp / feel，append_open=true）：文末「今天量血压了吗」写进这里，页面读回今天几人打卡、高压分布（按每行的提交时间算北京时间的今天）；发布前先用 set_data 建好
- 天气接口 api.open-meteo.com（免费、无需 key，署名「天气数据：Open-Meteo.com（CC BY 4.0）」）：发布回执会把它列为站外域名，这是事实说明、不是提醒；每天更新时顺手刷新页面里的天气快照

## 模板说明（README）

模板市场「资讯早报」那一组的一份（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
虚构的「青桐里社区卫生服务站 · 林晓禾家庭医生团队」第 186 期，每天早上发到居民群：「今日健康天气」。卫生站、医生、出诊安排均为虚构；**天气是真的**（Open-Meteo，以成都天气为例）。

## 演示哪个特色

**真实天气按页内写明的规则算成健康指数卡 + 两层加载 + 打卡写回数据表并读回。**

- **记忆点**是五张指数卡：感冒风险、紫外线、晨练适宜度、慢病提醒（温差 / 骤降对高血压、心脑血管）、带娃出门。正面是等级大字（颜色随等级：绿 / 琥珀 / 橙 / 红）、四格刻度、一句医生口吻的提示；**点一下 3D 翻面**，背面是「为什么是这一档」（预报里的真实读数）、医生的建议、谁要特别留意。手机上 `scroll-snap` 左右滑、下面有小圆点；电脑上三列网格铺开，第一格是今天的天气。打开时卡片依次浮起、第一张轻轻「探」一下提示能翻（只一次；`prefers-reduced-motion` 时都不动）。
- 等级规则写在页面里（「这五张卡怎么算的」可展开），与脚本里 `CARDS[].lv` 一一对应：温差、比昨天降温（`past_days=1` 取昨天）、体感最高 / 最低、降雨概率、紫外线指数最大值（按国内 5 级：最弱 / 弱 / 中等 / 强 / 很强）、最大风速。正面刻度下印出四档名字，当前一档加粗。
- 「未来 3 天」是内联 SVG 图（手机 343 / 电脑 780 两套坐标）：最高 / 最低气温两条线和温差带，前面淡色一列是昨天，每天下面是天气图标、降雨概率和那天的慢病提醒等级；第一次进入视野时线画出来。下面一句总结由数据现算。
- **两层加载**：① `<script type="application/json" id="wx-snap">` 里是做页那天用 `curl` 抓的真实快照，首屏先画它；② 脚本再 `fetch` 实时数据（`AbortSignal.timeout(3000)`），成功就重算五张卡和图、来源行改成「实时 · 更新于 HH:MM」（亮绿点），失败就留快照、写「数据更新于 <快照时间>」。署名「天气数据：Open-Meteo.com（CC BY 4.0）· 以成都天气为例」始终在首屏。
- 「本周出诊与义诊」按日期自动标出今天、过去的几天变淡；电脑上是钉住的右栏。下面一条细琥珀色线写急救提醒（拨 120 的几种情况）。
- **老人友好**：正文 17px 起，按钮和选项都 ≥ 44px 高；页头「字放大」把全页字号放到 125%（只记在本次会话里）。
- 发出去之后：文末「今天量血压了吗」是原生表单 `<form method="post" action="./_data/checkin">`，三组大按钮（年龄段、高压区间、感觉），写进数据表 `checkin`；脚本在时页内提交，就地给出「今天第 N 位打卡」和按高压区间、感觉给的一句建议（胸口发闷会提醒拨 120），并读 `./_data/checkin.json` 算今天几人打卡、其中几位 60 岁以上、高压分布；页头那句「今天已有 N 位街坊量了血压」同步。「今天」按每行 `_at` 换成北京时间算。
- 脚本不跑时：五张卡正反两面上下排开、图和总结是快照那天写死的，表单照常提交。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `.head` | 机构名、团队名、标志（内联 SVG）、期号、日期 |
| 城市 | 脚本顶部 `LAT` / `LON` / `CITY`；`#today` 来源行里的「以成都天气为例」。地点虚构时用一个真实城市的坐标并写明「以 XX 天气为例」 |
| 天气快照 `#wx-snap` | 见下一节；`data-static` 的几块（今天天气、卡片、图、总结）是脚本不跑时的兜底，换城市时按快照改一遍 |
| 指数卡 | 脚本里 `CARDS`：每张的 `labels`（四档叫法）、`lv`（规则）、`key`（正面那行读数）、`tip`（正面一句）、`why` / `adv` / `who`（背面）。改了规则，同改页面里「这五张卡怎么算的」那段 `<dl>` |
| 配色 | CSS 变量 `--l0`…`--l3`（四档颜色）与 `--l0b`…`--l3b`（正面底色）；暗色在两处（`:root[data-theme="dark"]` 与 `prefers-color-scheme`） |
| 本周出诊 `#clinic` | 每天一个 `<li data-d="YYYY-MM-DD">`：星期、项目、时间、医生、要带什么；义诊用 `.tg.free` 标签；地址、开诊时间、急救提醒 |
| 打卡 `#checkin` | 三组 `radio` 的 `value` 就是写进表的值；改了高压区间同改脚本 `SBP` / `COLOR` / `ADV` |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的早报时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 天气快照（每天定时任务刷新它）

快照放在页面里（不放 `_data`），格式就是 Open-Meteo 返回的 `current` + `daily` 两块（`daily` 共 5 天：昨天、今天和后面 3 天），外加 `place`、`fetched` 两个字段：

```json
{ "place": "成都市区", "fetched": "2026-10-30T13:42",
  "current": { "time": "…", "temperature_2m": 20.6, "apparent_temperature": 21.6, "relative_humidity_2m": 57, "weather_code": 2, "wind_speed_10m": 1.8 },
  "daily": { "time": [5 天], "temperature_2m_max": [...], "temperature_2m_min": [...], "apparent_temperature_max": [...], "apparent_temperature_min": [...],
             "weather_code": [...], "precipitation_probability_max": [...], "uv_index_max": [...], "wind_speed_10m_max": [...] } }
```

抓法（与页面脚本里的 `API` 同一条，换坐标即可）：

```bash
curl -s 'https://api.open-meteo.com/v1/forecast?latitude=30.66&longitude=104.07&current=temperature_2m,apparent_temperature,relative_humidity_2m,weather_code,wind_speed_10m&daily=temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,weather_code,precipitation_probability_max,uv_index_max,wind_speed_10m_max&timezone=Asia%2FShanghai&past_days=1&forecast_days=4'
```

每天早上的任务：抓一次 → 整段替换 `#wx-snap`（`fetched` 写抓取时间）→ 改期号、日期，周一换本周出诊 → 发新版本。只换快照不改静态兜底也能用（脚本一跑就按快照重算），但不跑脚本的读者看到的是旧字。

## 数据表

文末打卡写进数据表 `checkin`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "checkin"  columns: ["age","sbp","feel"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=checkin` 读回（每行带提交时间，按天数就是每天的打卡人数；不收姓名，只有年龄段、高压区间和感觉）。本地 `space-cli serve` 会把提交写进包里的 `_data/checkin.json`，试完记得改回 `[]`。

## 怎么发出去

单文件，最省事的是 MCP `publish_file`（不需要终端）：

```
publish_file
  filename: "index.html"
  content: <index.html 全文>
  title: "今日健康天气 · 青桐里卫生服务站"
  manifest: <manifest.json 的内容，去掉 entry>
  hold: true            # 先看预览，确认后 publish_version
```

再按上面建表。**每天更新**：同一个页面再调一次 `publish_file`，传 `proposal_id` 而不是 `title`，链接不变；要每天早上自动做一版并推到自己微信，用 `report_task`。
发布回执里 `external_origins` 会列出 `api.open-meteo.com`——这是「页面会连哪些站外域名」的事实说明，不是提醒。
给谁看：默认仅自己可见；发到居民群用 `set_visibility`（`public` 要你明确同意）。

## 素材

- 没有位图：图标、标志、图表都是内联 SVG；卫生站、医生、地址、出诊安排均为虚构，只作示意。健康建议是生活提醒，不是诊断。天气数据来自 Open-Meteo.com（CC BY 4.0）。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。