# 广州早安 · 今日城事

> 活页公开模板 `sample-city-morning` · 场景: 资讯早报 · 行业: 自媒体营销 / 个人家庭
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/VAfKX3Xs0SOS · 详情: https://space.24haowan.com/examples/sample-city-morning

## 这是什么

城市早报 · 每天早上发到粉丝群的天气早安卡和本地城事

## 什么时候用

本地生活号、社区群、楼盘业主群、门店会员群想每天早上发一条「今天穿什么、带不带伞、城里有什么事」，首屏是跟着真实天气变的动态天空，末尾让大家打个早安卡，选它。要给客户或团队发行业资讯、往期可翻，选 sample-daily-brief；只做 AI 圈新闻早报选 sample-ai-morning；要的是收盘行情复盘选 sample-market-recap。

## 用户对助手说的原话

帮我做一份每天早上发到粉丝群的城市早报，发成一个网页链接：页头是本地号的名字、期号和日期；首屏是一块会跟着真实天气变的天空插画（用 Open-Meteo 的免费天气接口取这座城市的实时天气，晴天有太阳和光点、多云和阴天有云在飘、下雨有雨丝、打雷会闪一下），上面压一个很大的现在气温、天气和体感、今天最低最高和降雨概率，再按数据推出三条提示：穿什么、带不带伞、要不要防晒，底下写明数据来源和更新时间；页面里先内联一份今天的天气快照，接口取不到时照样显示。接着是未来 7 天的横滑小卡（星期、图标、最高最低温的小竖条、降雨概率）和一句话总结；然后「今日城事」5 条本地资讯卡片（地铁、展览、菜价、交通管制、民生，每条一个分类、时间和两三句话）；再推荐一个「今天去哪」，带日落时间；最后一个「早安打卡」：填称呼、点一个心情，存到数据表，页面读回今天几人打卡和心情分布，打完出一张早安卡。颜色清爽，手机上一屏先看到天气，电脑上左边天气右边内容。每天早上更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 今天天气
- 未来 7 天
- 今日城事
- 今天去哪
- 早安打卡

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

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

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

- 外部数据是真的：天气来自 Open-Meteo（免费、无需 key），页面内联一份当天快照先画首屏，脚本再取实时数据（3 秒超时），失败就保留快照并写明「数据更新于」
- 首屏天空按 weather_code 切成晴 / 多云 / 阴 / 雨 / 雷雨，canvas 现画阳光粒子、飘云、雨丝；穿衣、带伞、防晒三条提示由数据推出来
- 早安打卡写回数据表 checkins（列 name / mood），页面读回今天几人打卡、心情分布，打完就地出一张早安卡
- 同一个链接每天 7:00 更新城事和快照，粉丝群里收藏一次就够

## 发之前要备好

- 数据表 checkins（列 name / mood，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`）。
虚构本地生活号「早茶前五分钟」第 418 期，每天 7:00 发到粉丝群：「广州早安 · 今日城事」。城事、去处、公众号均为虚构；**天气是真的**（Open-Meteo）。

## 演示哪个特色

**真实天气两层加载 + 首屏动态天空 + 打卡写回数据表并读回。**

- **记忆点**是首屏那块天空：按 Open-Meteo 的 `weather_code` 切成晴 / 多云 / 阴 / 雨 / 雷雨（雪也有一套，用不太上），`<canvas>` 现画阳光粒子、飘云、雨丝、雷雨时偶尔闪一下（全页唯一的循环动画；`prefers-reduced-motion` 时停在一帧；离开视野或切到后台时暂停）。云的位置用固定种子排，只放在大读数上方，不压字。
- 天空上压一个很大的现在气温、天气、体感（比气温高 3° 以上写「有点闷」），今天最低 – 最高、降雨概率、湿度；三条提示由数据推出来：穿什么（按今天最高温分档）、带不带伞（按降雨概率和天气代码）、防晒（按紫外线指数）。
- **两层加载**：① `<script type="application/json" id="wx-snap">` 里是做页那天用 `curl` 抓的真实快照，首屏先画它（微信里、断网、海外接口慢都立刻有数）；② 脚本再 `fetch` 实时数据（`AbortSignal.timeout(3000)`，老内核用 `AbortController` 兜），成功就整块替换、来源行变成「实时 · 更新于 HH:MM」（亮绿点），失败就留快照、写「数据更新于 <快照时间>」。来源署名「天气数据：Open-Meteo.com（CC BY 4.0）」始终在首屏和 7 天卡下面。
- 未来 7 天横滑小卡（`scroll-snap`，电脑上 7 列排开）：星期、图标、最高 / 最低温，中间一根小竖条标出当天温度在 7 天里的位置，降雨概率 ≥ 30% 的水滴变蓝；上面一句话总结由数据现算。
- 「今天去哪」里的日落时间也取自同一份天气数据；那句「天色怎么样」按天空切换（下雨就改推室内）。
- 发出去之后：文末「早安打卡」是原生表单 `<form method="post" action="./_data/checkins">`，写进数据表 `checkins`（`name` / `mood`）；脚本在时页内提交、就地翻出一张早安卡（日期、天气、称呼、心情、「你是今天第 N 位」），并读 `./_data/checkins.json` 算今天几人打卡、五种心情的分布和最近 5 位。「今天」按每行 `_at` 换成北京时间算，零点重新数。点心情有一下回弹和 `navigator.vibrate` 轻震（不支持就跳过）。
- 脚本不跑时：页面里写死的就是快照那天的完整内容（读数、提示、7 天卡、城事），表单照常提交。
- 电脑上：左边天空卡片钉住（`position:sticky`），右边宽屏排 7 天、城事两列、去哪图文并排、打卡和统计并排。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` | 账号名、一句定位（`.acct small`）、标志（内联 SVG）、期号与日期（`.issue`） |
| 城市 | 脚本顶部 `LAT` / `LON` 换成你的城市坐标；首屏 `h1`「广州早安」、来源行「广州市区」、早安卡里的「广州」一起改。地点是虚构的时候，用一个真实城市的坐标并在来源行写「以 XX 天气为例」 |
| 天气快照 `#wx-snap` | 见下一节；静态文字（`data-w="…"` 那些元素、7 天卡 `.week`）是脚本不跑时的兜底，换城市时按快照改一遍 |
| 提示文案 | 脚本 `render()` 里 `wear` / `umb` / `uv` 三段的分档和句子；天气叫法、图标、天空分别在 `name()` / `icon()` / `sky()` |
| 天空配色 | CSS `.hero[data-sky="…"]` 的 `--h-sky`（渐变）、`--h-ink`（字色）、`--cloud` / `--cloud2` / `--drop`；暗色在两处（`:root[data-theme="dark"]` 与 `prefers-color-scheme`）。预览别的天气：链接后面加 `?sky=clear`（或 `partly` / `cloudy` / `rain` / `storm` / `snow`） |
| 今日城事 `.news` | 每条一个 `<li class="c-分类">`：`.cat` 里的图标、分类名、时间；`h3` 标题、`p` 两三句话。分类色是 `.c-metro` 等五个 class |
| 今天去哪 `#go` | 插画（内联 SVG）、标题、路线；`data-w="goline"` 的三种天色句子在脚本里 |
| 早安打卡 | 心情选项是 `.moods` 里五个 `radio`（`value` 就是写进表的值），同改脚本里的 `MOODS` / `FACE` / `COLOR`；表情图标是 `<symbol id="f-…">` |
| 页脚 | 平台标志与名称（与 `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` 两块，外加两个字段：

```json
{ "place": "广州市区", "fetched": "2026-10-29T06:21",
  "current": { "time": "2026-10-29T06:15", "temperature_2m": 24.9, "apparent_temperature": 28.3, "relative_humidity_2m": 75, "weather_code": 3, "wind_speed_10m": 4.3 },
  "daily": { "time": [7 天], "temperature_2m_max": [...], "temperature_2m_min": [...], "weather_code": [...],
             "precipitation_probability_max": [...], "uv_index_max": [...], "sunrise": [...], "sunset": [...] } }
```

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

```bash
curl -s 'https://api.open-meteo.com/v1/forecast?latitude=23.13&longitude=113.26&current=temperature_2m,apparent_temperature,relative_humidity_2m,weather_code,wind_speed_10m&daily=temperature_2m_max,temperature_2m_min,weather_code,precipitation_probability_max,uv_index_max,sunrise,sunset&timezone=Asia%2FShanghai&forecast_days=7'
```

每天早上的任务：抓一次 → 整段替换 `#wx-snap` 的内容（`fetched` 写抓取时间）→ 换掉当天的城事、去处、期号 → 发新版本。只换快照不改静态文字也能用（脚本一跑就按快照重画），但不跑脚本的读者看到的是旧字，最好一起改。

## 数据表

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

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

用 `list_data_rows table=checkins` 读回（每行带提交时间，按天数就是每天的打卡人数）。本地 `space-cli serve` 会把提交写进包里的 `_data/checkins.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`，链接不变；要每天 7:00 自动做一版并推到自己微信，用 `report_task`。
发布回执里 `external_origins` 会列出 `api.open-meteo.com`——这是「页面会连哪些站外域名」的事实说明，不是提醒。
给谁看：默认仅自己可见；发到粉丝群用 `set_visibility`（`public` 要你明确同意）。

## 素材

- 没有位图：天空是 canvas 现画，图标、表情、江边插画都是内联 SVG；公众号、城事、展馆名、价格均为虚构，只作示意。天气数据来自 Open-Meteo.com（CC BY 4.0）。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。