# 桂语花园 · 小区公告栏

> 活页公开模板 `sample-estate-notice` · 场景: 监测日报 · 行业: 房产家居 / 政务国企
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/zI1goKgD7q5- · 详情: https://space.24haowan.com/examples/sample-estate-notice

## 这是什么

小区公告栏 · 物业 / 社区每周更新，发到业主群

## 什么时候用

物业服务中心、社区居委会、街道网格员要把本周的停水停电、电梯检修、垃圾分类新规、设施搬迁这些零碎通知放进同一个链接，每周换一次发到业主群，顺手收报修，选它：首屏一块软木公告栏，点一张公告取下来看全文，顶部天气提醒按真实预报现算。只发一份通知、要每户都回执确认的，选 sample-class-notice；要收活动报名、按名额截止的，选 sample-event-signup；要每天早上发天气和本地城事给粉丝群的，选 sample-city-morning。

## 用户对助手说的原话

帮我做一个小区公告栏网页，发到业主群，每周更新同一个链接：页头是物业服务中心名字、小区名和「小区公告栏」、第几周和更新日期。顶部一条「本周天气提醒」：用 Open-Meteo 的免费天气接口取小区所在城市未来 7 天预报，按规则写两三条提醒（降雨概率 60% 以上提醒收衣服、地库低洼车位挪车；最高 33° 以上提醒高温；早晚温差 10° 以上或比前一天降 6° 以上提醒添衣），下面一排 7 天小格（星期、图标、最高最低温、降雨概率），写明数据来源和更新时间，页面里先内联一份今天的快照，接口取不到时照样显示。主体是一块软木公告栏：木框、软木纹理，上面用彩色图钉钉着 6 张微微歪着、颜色不同的公告纸（停水通知、电梯检修、垃圾分类新规、快递柜搬迁、消防演练，再加一张胶带贴的失物招领便签），每张有类型标签、宋体标题、时间地点和一句摘要；点一张，图钉先拔起来、纸从板上被取下来放大到屏幕中间看全文（有文号和落款），关掉再钉回去。然后是「在线报修」：本周报修条数大数字、已完成 / 处理中 / 待上门的进度条、最近 5 条（只写楼栋和类型），下面一张报修表单（楼栋、房号、问题类型、说说情况、方便上门的时间），提交后存进数据表，页面读回把条数和列表加上，并出一张回执。最后是物业值班电话，点了直接拨。颜色清爽，手机上一栏，电脑上左边公告栏铺宽、右栏放天气和报修。

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

## 照着做一份

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

## 页面结构

- 本周天气提醒
- 本周公告
- 本周报修进度
- 在线报修
- 物业值班

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

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

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

- 记忆点：软木板上图钉钉着几张微微歪着的公告纸，点一张，图钉先被拔起、纸被「取下来」放大看全文（Web Animations），关掉再钉回去；脚本不跑时全文直接展开
- 外部数据是真的：「本周天气提醒」用 Open-Meteo 真实 7 天预报（以杭州天气为例），按规则生成提醒（降雨概率 ≥ 60% 收衣服、地库防水；最高 ≥ 33° 高温；日温差 ≥ 10° 或比前一天低 ≥ 6° 添衣），页面内联快照先画、实时数据 3 秒超时、失败写明「数据更新于」
- 在线报修写回数据表 repair（原生表单 POST ./_data/repair 打底，脚本在时页内提交、就地出回执），页面读回本周报修条数与处理进度条，最近几条只露楼栋和类型
- 同一个链接每周五换一版公告，业主群里收藏一次就够；值班电话点了直接拨

## 发之前要备好

- 数据表 repair（列 building / room / type / desc / slot，append_open=true）：在线报修写进这里，页面读回本周新登记的条数和楼栋、类型；发布前先用 set_data 建好。处理进度（已完成 / 处理中）在页面脚本的 BASE 里，由服务中心每周更新时改
- 报修行里有房号和问题描述，页面能读到整张表：建议用 set_visibility 设成 passcode，口令只发在本小区业主群
- 天气接口 api.open-meteo.com（免费、无需 key，署名「天气数据：Open-Meteo.com（CC BY 4.0）」）：发布回执会把它列为站外域名，这是事实说明、不是提醒；每周更新时顺手刷新页面里的天气快照

## 模板说明（README）

模板市场「监测日报」那一组的一份（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
虚构小区「桂语花园」、虚构物业「澄湖物业 · 桂语花园服务中心」第 44 周的公告栏，每周五更新同一个链接发到业主群。小区、公告、电话、报修记录均为虚构；**天气是真的**（Open-Meteo，以杭州天气为例）。

## 演示哪个特色

**一块会动的软木公告栏 + 真实天气生成的提醒 + 报修写回数据表并读回。**

- **记忆点**是那块软木板：木框、软木纹理（几层 `radial-gradient` 斑点），彩色图钉（内联 SVG `<symbol id="pin">`，颜色走 `--pin`）钉着 6 张微微歪着（`--r`）的公告纸，失物招领那张是胶带贴的黄便签。进入视野时纸一张张钉上来（只一次）；点一张，图钉先被拔起，纸从板上的位置被「取下来」飞到屏幕中间放大看全文（Web Animations，FLIP 算法，纸上留一个钉孔），「看完了，钉回去」原路飞回、图钉重新按下。`prefers-reduced-motion` 时直接开合不做动画。
- 脚本不跑时：每张纸的全文（文号、正文、落款）直接展开在板上，内容完整可读。
- **本周天气提醒**两层加载：① `<script type="application/json" id="wx-snap">` 里是做页那天 `curl` 抓的真实快照，首屏先画；② 脚本再 `fetch` 实时数据（`AbortSignal.timeout(3000)`，老内核用 `AbortController` 兜），成功就整块重算、来源行变「实时 · 更新于 HH:MM」，失败留快照写「数据更新于 <快照时间>」。提醒按规则从数据推出（最多 3 条）：降雨概率 ≥ 60% 的日子连成一段 → 收衣服、地库低洼车位挪车；最高 ≥ 33° → 高温；最高温比前一天低 ≥ 6° → 骤降添衣；日温差 ≥ 10° → 早晚温差带外套；都没有就写「天气平稳」。手机上天气先压成一行（几条提醒的短句 + 来源和更新时间），点「展开」才出提醒卡片带和 7 天小格，让首屏留给公告栏；电脑上整块竖排在右栏。
- 发出去之后：「在线报修」是原生表单 `<form method="post" action="./_data/repair">`，写进数据表 `repair`；脚本在时页内提交、就地出回执（「你是本周第 N 条报修」）。页面读 `./_data/repair.json`，把本周（北京时间周一零点起）新登记的条数加进大数字、进度条和最近 5 条，**只露楼栋和类型**，房号、描述不上页面。
- 电脑上：左栏是公告栏（≥ 1180px 三列纸）和它下面的「本周报修进度」（`.leftcol` 包着这两节），右栏依次是天气、报修表单、值班电话，两栏高度大致齐平；手机上一栏：天气（一行）→ 公告栏 → 报修进度 → 报修表单 → 值班。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` | 物业 / 社区名、标志（内联 SVG）、小区名 `h1`、第几周和更新日期 |
| 公告纸 `.notes > .note` | 每张一个 `<article class="note">`：`style` 里 `--r`（倾斜角度，±3° 以内）、`--paper`（纸色：`--p-white` / `--p-blue` / `--p-green` / `--p-pink` / `--p-yellow`）、`--pin`（图钉色）、`--i`（入场顺序）；`.tag` 类型标签（颜色 class `t-water` 等）、`h3` 标题、`.meta` 时间地点、`.no` 文号、`.sum` 板上那句摘要、`.full` 全文与 `.sign` 落款；`.open` 按钮的 `aria-label` 跟标题一起改。便签用 `class="note sticky"` + `.tape` 代替图钉。张数随意，板子会自己排 |
| 城市 | 脚本里 `LAT` / `LON` 换成小区所在城市坐标；`#weather` 里「以杭州天气为例」一起改（小区在真实城市就写城市名） |
| 天气快照 `#wx-snap` | 见下一节；`#weather` 里写死的提醒和 7 天小格是脚本不跑时的兜底，换快照时照着改 |
| 提醒规则与文案 | 脚本 `render()` 里 rain / hot / cold / swing / calm 五段：阈值和句子（B2 车位那句换成你小区的实际情况） |
| 报修进度 | 脚本里 `BASE`：本周已有的报修和处理状态（`done` 已完成 / `doing` 处理中 / `wait` 待上门），服务中心每周更新时改；表单新登记的显示为「刚登记」 |
| 报修表单 `form.fix` | 楼栋选项、问题类型（`.chips` 里的 radio，`value` 就是写进表的值）、上门时间段 |
| 值班 `#duty` | 电话（`href="tel:…"` 与显示的号码一起改）、负责人、服务中心地址和开放时间 |
| 配色 | `:root` 一套、暗色两处（`:root[data-theme="dark"]` 与 `prefers-color-scheme`）；软木 `--cork` / `--cork-d` / `--cork-l`、木框 `--frame` |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的公告栏时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字，每周把 desc 改成本周最要紧的那件事）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 天气快照（每周更新时刷新它）

快照放在页面里（不放 `_data`），格式就是 Open-Meteo 返回的 `current` + `daily` 两块，外加两个字段：

```json
{ "place": "杭州", "fetched": "2026-10-30T13:45",
  "current": { "time": "2026-10-30T13:45", "temperature_2m": 23.0, "weather_code": 2 },
  "daily": { "time": [7 天], "temperature_2m_max": [...], "temperature_2m_min": [...], "weather_code": [...], "precipitation_probability_max": [...] } }
```

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

```bash
curl -s 'https://api.open-meteo.com/v1/forecast?latitude=30.27&longitude=120.15&current=temperature_2m,weather_code&daily=temperature_2m_max,temperature_2m_min,weather_code,precipitation_probability_max&timezone=Asia%2FShanghai&forecast_days=7'
```

每周五的更新：抓一次 → 整段替换 `#wx-snap`（`fetched` 写抓取时间）→ 换掉过期的公告纸、改 `BASE` 里的报修进度、页头周数 → 发新版本。

## 数据表

在线报修写进数据表 `repair`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "repair"  columns: ["building","room","type","desc","slot"]  rows: []  append_open: true  revision: 0
```

服务中心用 `list_data_rows table=repair` 读回（每行带提交时间），派单后把状态写进下周的 `BASE`。表里有房号和描述，页面脚本能读到整张表：建议 `set_visibility` 设成 `passcode`，口令只发在本小区业主群。本地 `space-cli serve` 会把提交写进包里的 `_data/repair.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`（`every: "week"`）。
发布回执里 `external_origins` 会列出 `api.open-meteo.com`——这是「页面会连哪些站外域名」的事实说明，不是提醒。

## 素材

- 没有位图：软木纹理是 CSS 渐变，图钉、图标、标志都是内联 SVG；小区、物业、街道社区、公告内容、电话（`0571-0000` 开头，不是有效号码）均为虚构。天气数据来自 Open-Meteo.com（CC BY 4.0）。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。