# 青檐便利 · 门店巡检播报

> 活页公开模板 `sample-store-patrol` · 场景: 监测日报 · 行业: 零售门店
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/bwdYvRbXZcVF · 详情: https://space.24haowan.com/examples/sample-store-patrol

## 这是什么

门店巡检播报 · 巡一家追加一张卡片，店长在页面上标记整改

## 什么时候用

一天里一条条往上加的现场记录：门店巡检、督导巡店、安全巡查、设备点检、工地日检。每条是一张卡片（门店、时间、检查项打勾打叉、一句说明），被点名的人在页面上直接回一句「已整改」。只是看数字涨落的战报选 sample-sales-live；每天整页换新的早报 / 监测日报选 sample-daily-brief；需要领导逐项确认的周报选 sample-weekly-report。

## 用户对助手说的原话

帮我做一个门店巡检播报网页，督导每巡完一家我就让你追加一条，发到店长群里：页头吸顶，写连锁品牌名「巡检播报」、今天日期和一个「实时」小标；下面三格：今日已巡几家 / 共几家（带进度条）、待整改几项（红字）、整改率；再一排「全部 / 待整改 / 已整改」筛选按钮和最后同步时间。正文是卡片流，新的在最上面：每张写门店名、几点、巡检员，右上角一个状态标（正常 / 待整改 / 已整改），左边一张小的现场示意图，右边检查项逐条打勾或打叉（不合格的标红），下面一句说明；待整改的卡片底下有一个「标记已整改」按钮，店长一点就写进一张数据表，卡片当场变成已整改。卡片流下面列今天还没巡到的门店（店名和片区），最后写今天查哪几项、各自的标准。巡检记录放在一张数据表里，页面每 30 秒读一次，有新卡片从上面滑进来并弹一句「刚刚新增 1 条」。手机上一栏，电脑上居中窄栏。

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

## 照着做一份

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

## 页面结构

- 巡检记录
- 还没巡到的门店
- 今天查这几项

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

- https://space.24haowan.com/examples/sample-store-patrol/source/index.html（入口）
- https://space.24haowan.com/examples/sample-store-patrol/source/cover.webp

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

- 页面读数据表 patrol（fetch ./_data/patrol.json）：每追加一行，页面 30 秒内长出一张新卡片并提示「刚刚新增」，不用重发页面
- 页内回写数据表：卡片上的「标记已整改」是原生表单 POST ./_data/fixes，页面读回后把那张卡改成「已整改」、整改率跟着变
- 按状态筛选（全部 / 待整改 / 已整改）与还没巡到的门店清单

## 发之前要备好

- 数据表 patrol（列 id / store / time / inspector / status / checks / note / scene；checks 写成「检查项|✓;检查项|✗」，status 是 正常 / 待整改 / 已整改，scene 是 fridge / shelf / price / door 四种示意图之一；append_open 不用开）：巡检记录写这里，督导每巡完一家就追加一行
- 数据表 fixes（列 patrol_id / store，append_open=true）：卡片上的「标记已整改」写进这里；要只让店里的人点，加 members_only=true

## 模板说明（README）

官网首页「大家正在用活页做这些」里那张巡检播报的样例包。品牌「青檐便利」、门店、巡检员均为虚构（门店名借用广州的路名、片区）。

## 演示哪个特色

**一条条往上追加的数据表 + 读者在页面上写回。**

- 巡检记录在数据表 `patrol`：督导每巡完一家，助手往表里追加一行（`set_data` 整表替换），页面每 30 秒读一次 `./_data/patrol.json`，
  新的一行从上面滑进来、背景闪一下，并弹出「刚刚新增 1 条」。**不发新版本、链接不变。**
- 待整改的卡片底下是一张原生表单 `<form method="post" action="./_data/fixes">`（隐藏字段 `patrol_id` / `store`）：不跑脚本也能提交；
  脚本在时改成页内提交，成功后那张卡当场变「已整改」、整改率跟着变。页面读 `./_data/fixes.json` 回填状态，审核拦下（`_status: held`）的不算。
- 页头的「已巡 8/12」与文末「还没巡到的门店」由脚本里的路线 `ROUTE`（12 家）减去表里出现过的门店算出。
- 内联快照 `#snap`：读不到表时（本地直开、网络抖动）先画发布时那份，不会一屏空白。
- 阅读回执：三节 `records` / `pending` / `standard`（吸顶的页头不参与，否则它永远是「当前节」）。
- 浅色为主，暗色两处（`prefers-color-scheme:dark` + `:root[data-theme="dark"]`），manifest `theme: "system"`。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 数据表 `patrol`（`_data/patrol.json` 是同一份示例行） | 每行一家：`id`（唯一，页面靠它判「新增」）、`store`、`time`（HH:MM，按它倒序）、`inspector`、`status`（正常 / 待整改 / 已整改）、`checks`（`检查项|✓;检查项|✗`）、`note`、`scene`（`fridge` / `shelf` / `price` / `door` 四张内联示意图之一） |
| 脚本里的 `ROUTE` | 今天要巡的门店与片区，按路线顺序；总数跟着它变 |
| 「今天查这几项」 | 你们的检查标准，一项一行 |
| 页头 `h1` | 品牌名 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的播报时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 数据表

- `patrol`（列 `id` / `store` / `time` / `inspector` / `status` / `checks` / `note` / `scene`）：只有作者写，`append_open` 不用开。
- `fixes`（列 `patrol_id` / `store`，`append_open=true`）：「标记已整改」写这里。只想让店里的人点就再加 `members_only=true`。

```
set_data  proposal_id: <id>  table: "patrol"  rows: <_data/patrol.json 的内容>  revision: 0
set_data  proposal_id: <id>  table: "fixes"   columns: ["patrol_id","store"]  rows: []  append_open: true  revision: 0
```

谁点了整改用 `list_data_rows table=fixes` 读回。本地 `space-cli serve` 会把提交写进包里的 `_data/fixes.json`，试完记得改回 `[]`。

## 怎么发出去

1. 整目录推（CLI），或 `publish_file` 传 `files`：`index.html` + `_data/patrol.json` + `_data/fixes.json`，`hold: true` 先看预览。
2. 按上面建两张表。
3. 督导每报一家：`get_data table=patrol` 拿 `revision`，在 rows 里加一行再 `set_data`。不用重发页面。
4. 给谁看：`set_visibility`（发到店长群用 `passcode` 或 `public`）。

## 素材

- 现场图是页内的简笔 SVG 示意，不是照片。`cover.webp` 由成品首屏截出；`thumb.webp` 由 `examples/verify-shots.mjs --write-thumb` 截出，不进发布包。