# 青禾连锁 · 10 月经营数据大屏

> 活页公开模板 `sample-ops-screen` · 场景: 数据看板 · 战报 · 行业: 零售门店 / 制造供应链
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/Yfh8qN7ZIOGJ · 详情: https://space.24haowan.com/examples/sample-ops-screen

## 这是什么

经营数据大屏 · 月度复盘投到会议室大屏上讲

## 什么时候用

月度 / 季度经营复盘要投到会议室大屏或电视上讲时选它：一屏装下销售额、按日走势、片区达成、品类结构、门店排行、会员转化和异常预警，数字放在一张数据表里，改表不用重发、链接不变；手机上自动改成竖排卡片，会后发到群里照样能看。一天里数字一直在变、群里随时点开看实时进度的销售战报选 sample-sales-live；要逐条交办、回收处置进度的监测日报选 sample-monitor-daily；写成文字结论为主的周报选 sample-weekly-report。

## 用户对助手说的原话

帮我把这个月的经营数据做成一块投到会议室大屏上讲的数据大屏网页：深色、克制的科技感，电脑上 1440 宽一屏装下，用网格排开——左上是本月销售额的大读数（数字滚动出来），下面一条对目标的达成进度、环比和同比，再加客流、客单价、店均三个小数；中间是按日营收与客流（上下两块共用一条日期轴，节假日打底色，标日均线，点任意一天看明细）；右上是品类结构环形图；下面一排是片区达成率（用 SVG 画一张抽象的片区分块地图，颜色深浅表示达成率，圆点是门店、低于 90% 的标红，点片区看门店明细）、门店销售额 TOP10（自动依次高亮一轮）、会员增长漏斗（每一步标转化率）；最底下一条异常预警滚动条。进入时各块依次点亮，之后只有预警条在滚动。所有数字放在一张数据表里（每行一种：门店、每日、品类、漏斗、对比数、预警），页面读这张表算合计，改表不用重发；手机上改成竖排卡片，图单独画一套。

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

## 照着做一份

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

## 页面结构

- 本月销售额
- 按日营收与客流
- 品类结构
- 片区达成率
- 门店 TOP10
- 会员增长
- 异常预警

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

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

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

- 页面读数据表（fetch ./_data/metrics.json）渲染：改表不用重发页面、链接不变；读不到表时停在页内快照并标明
- 大屏一屏布局（1440 宽及以上一屏装下）+ 手机竖排卡片版，同一份数据
- 图表可点：点任意一天看营收 / 客流 / 客单价，点片区看门店明细
- 阅读回执（谁看了 / 看到哪一节）

## 发之前要备好

- 数据表 metrics（列 kind / key / label / value / value2 / note；kind 是 meta 月份与更新时刻、kpi 对比数、region 片区、store 门店、day 每日、cat 品类、funnel 漏斗、alert 预警；append_open 不用开）：发之前用 set_data 建好，之后每月只改这张表、不用重发页面

## 模板说明（README）

按 `core/space/examples/QUALITY.md` 做。连锁「青禾连锁」、36 家门店、片区、店名、金额、会员数都是虚构的。

## 演示哪个特色

**页面读数据表，改表不用重发；大屏优先，手机上改竖排卡片。**

- 页里的每个数字都来自数据表 `metrics`：页面用最普通的 `fetch('./_data/metrics.json')` 读它，前端算合计、达成率、环比同比、客单价、片区汇总、TOP10 和转化率。
  下个月复盘只调 `set_data` 整表替换，**不发新版本、链接不变**；会议室大屏上一直开着这一页，刷新一下就是新数。
- 页里内联了一份发布时的数据快照（`<script type="application/json" id="snap">`）：先画快照、再读表；读不到表（本地直开、网络抖动）时停在快照上，页头写「页内快照 · 数据更新于 …」，不会一屏空白。正文里的数字和图也按快照预排好了，脚本不跑也完整可读。
- 大屏主场景：1440×900 及以上一屏装下七块（网格 12 列）；1181 以下改两栏，760 以下改竖排卡片（同一份数据，图在手机上按手机宽度重画，不是缩小）。
- 动效：进入时各块依次点亮（销售额数字滚出来、曲线描出来、柱子长出来、环形扫一圈、片区逐块亮），TOP10 依次高亮一轮后停在第 1 名；之后全页只有底部预警条在循环滚动（悬停暂停，手机上是静态列表）。`prefers-reduced-motion` 时全部直接终态。
- 阅读回执：七块 `overview` / `daily` / `mix` / `regions` / `stores` / `members` / `alerts` 的 `id` = `data-track-section` = `manifest.sections[].anchor`。
- 设计方向（QUALITY §1.1）：风格「数据看板」。深墨蓝底 `#0B1220`、细线框 `#1D2940`，营收用琥珀 `#E3A73F`、客流用钢蓝 `#4C9BE8`，片区用单一蓝色从暗到亮表示达成率，低于 90% 的门店用柔和珊瑚红点 `#E8796E` 标出；数字用系统里的 DIN 系等宽数字。最大声的只有一个：左上角的销售额大读数。
  品类五色是一组过了色盲可分校验的配色，每个色块旁都直接写名称和占比。
- 营收与客流没有画成双纵轴叠在一张图里（两种量纲叠在一起容易误读），而是上下两块共用一条日期轴，十字线同时穿过两块。
- 只有一套深色是这一份的本色（系统深色或浅色都显示深色）；投影仪偏亮时把 manifest 的 `theme` 改成 `"light"`，页面换成浅底那一套（`:root[data-theme="light"]`）。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 数据表 `metrics`（`_data/metrics.json` 是同一份示例行） | 一行一种东西，`kind` 区分，列固定为 `kind / key / label / value / value2 / note`：<br>`meta` 一行：`label` 月份 `2026-10`、`note` 更新时刻（页头显示）<br>`kpi` 几行：`last_month`（`value` 上月销售额）、`last_year`（`value` 去年同月销售额、`value2` 当时门店数）、`last_month_visits`（上月客流）、`members`（会员总数）<br>`region` 每个片区一行：`key` 片区代码（`H/N/E/W/S/R`，对应地图上六块）、`label` 片区名<br>`store` 每店一行：`key` 所属片区、`label` 店名、`value` 本月销售额（元）、`value2` 本月目标（元）<br>`day` 每天一行：`key` 日、`value` 当日营收（元）、`value2` 当日客流（人次）、`note` 节假日名（同名的连续几天打一块底色）<br>`cat` 每个品类一行（最多 5 个）：`label`、`value`<br>`funnel` 每一步一行（按顺序）：`label`、`value`<br>`alert` 每条预警一行：`key` 级别 `high` / `mid` / `info`、`label` 一句话 |
| 合计口径 | 销售额与目标 = 各 `store` 行之和；客流 = 各 `day` 行 `value2` 之和。`day` 的 `value` 之和、`cat` 的 `value` 之和应等于门店合计（示例数据三者完全相等），改数时自己核一遍 |
| 地图 `SHAPE` / `CEN`（脚本里） | 六块片区的多边形（560×380 坐标）和标签中心点。片区数量不同就改这两张表，`region` 行的 `key` 与这里一一对应 |
| 页头 `.org` / `.facts` | 公司与部门（内联 SVG 标志）、会议名称与日期；标题和数据周期按 `meta` 行与 `day` 行填出 |
| `预警` 文案 | `alert` 行里的数字是手写的句子，改数据表时一起改，别和上面的图对不上 |
| `#snap` 快照 | 发布时把当时的表内容贴进去（可选）。正文里预排的数字和图只在脚本不跑时露出：页面暴露了 `window.__OPS_PRE(rows)`，返回各块与运行时同一套函数画出的静态 HTML，可用它重新预排；没余力就只换快照，脚本会按快照重画 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的大屏时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；块增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 怎么发出去

1. 先发页面（包里有 `_data/`，用 CLI 整目录推；或 `publish_file` 传 `files`：`index.html` + `_data/metrics.json`），`hold: true` 先看预览。
2. 建表（表不随版本走，发一次就行）：

```
set_data  proposal_id: <id>  table: "metrics"  rows: <_data/metrics.json 的内容>  revision: 0
```

3. **改表不用重发**：下个月 `get_data table=metrics` 拿 `revision`，`set_data` 整表替换，大屏上刷新就是新数。**不要**为了改数字再 `publish_file`。
   想让助手每月 1 号自己做：设一个定时任务，写清「从经营报表导出各店销售额、目标、每日营收客流、品类、会员漏斗，整表写进 metrics」。
4. 给谁看：默认仅自己可见；会议室电脑和群里的同事用 `set_visibility`（`passcode` 口令可看，或 `public`）。

## 素材

- 没有位图：标志、地图、图表全部是内联 SVG。
- `thumb.webp` / `phone.webp`：由 `examples/verify-shots.mjs` 从成品截出，不进发布包。

## 纪律

- 数字是示例，发之前整表换掉；页脚那句「示例内容，均为虚构」删掉。
- 预警写事实和口径（达成率、控制线），不写对人的评价。