# 华南区销售战报 · 今日实时

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

## 这是什么

销售战报 · 今日实时，群里一点开就是最新数

## 什么时候用

一天里数字一直在变、要发到群里让大家随时点开看的东西：门店销售战报、活动当日成交、团购接龙进度、商机看板。数字放在数据表里，改表页面就跟着变，不用重发。门店巡检、工单这种一条条追加的记录选 sample-store-patrol；每天早上发一期、内容整页换新的行业早报选 sample-daily-brief 或 sample-ai-morning；每周一次的项目进度选 sample-weekly-report。

## 用户对助手说的原话

帮我做一个今天的销售战报网页，发到店长群里大家随时点开看：深色底，页头是公司和大区名、标题「销售战报 · 今日实时」、日期，右上角一个带呼吸绿点的「实时 · 更新于几点」；第一块是今日销售额的大数字（从 0 滚上去），下面一条完成进度条，标出按营业时间应达到的位置，写领先或落后时间进度多少；接着订单数、客单价、高峰时段三格；一张分时销售曲线（8 点到 22 点，带刻度和网格，最后一个点标「进行中」）；右边是门店排行（名次、店名、店长、销售额、单数、一条比例条，名次上升标 ▲）和「刚刚成交」最近 6 笔。所有数字放在一张数据表里（每行一种：目标、门店、整点、成交），页面读这张表算合计，每 30 秒刷新一次，改表不用重发页面；电脑上左右两栏，手机上一栏。

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

## 照着做一份

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

## 页面结构

- 今日销售额
- 分时销售
- 门店排行
- 刚刚成交

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

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

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

- 页面读数据表（fetch ./_data/sales.json）渲染：改表不用重发页面、链接不变
- 页面每 30 秒自己刷新一次，排名变化有换位动画，新成交从上面滑进来
- 阅读回执（谁看了 / 看到哪一节）

## 发之前要备好

- 数据表 sales（列 kind / name / person / label / value / orders / time；kind 是 meta 目标与更新时刻、rank 门店、hour 整点销售、order 最新成交；append_open 不用开）：发之前用 set_data 建好，之后每次有新数只改这张表、不用重发页面
- 数据要定时进表：让助手按时（比如每 30 分钟）把收银系统导出的数整表写进 sales（需要助手那边能设定时任务）

## 模板说明（README）

官网首页「大家正在用活页做这些」里那张销售战报的样例包。公司「青禾饮品」、门店、店长、金额均为虚构。

## 演示哪个特色

**页面读数据表，改表不用重发页面。**

- 页里的每个数字都来自数据表 `sales`：页面用最普通的 `fetch('./_data/sales.json')` 读它，前端算合计、完成率、客单价、高峰时段和排名。
  有新数时只调 `set_data` 整表替换，**不发新版本、链接不变**；页面每 30 秒（以及从后台切回来时）自己再读一次。
- 刷新时有三处动效：大数字从旧值滚到新值、排名换位（FLIP）并标 ▲、新成交从上面滑进来；`prefers-reduced-motion` 时全部直接终态。全页循环动画只有页头那个呼吸绿点。
- 页里还内联了一份发布时的数据快照（`<script type="application/json" id="snap">`）：页面先画快照、再读表，读不到表（本地直开、网络抖动）时停在快照上，页头写「暂未刷新 · 14:32 的数据」，不会一屏空白。
- 阅读回执：四节 `today` / `hours` / `stores` / `latest` 的 `id` = `data-track-section` = `manifest.sections[].anchor`。
- 深色看板（`color-scheme:dark`）：只有一套深色，读者切浅色时它保持深色，这是这一份的形态。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 数据表 `sales`（`_data/sales.json` 是同一份示例行） | 一行一种东西，`kind` 区分：`meta` 一行（`label` 日期、`value` 今日目标、`time` 更新时刻）；`rank` 每店一行（`name` 店名、`person` 店长、`value` 销售额、`orders` 单数）；`hour` 每个整点一行（`label` 两位小时、`value` 该小时销售额）；`order` 最新成交若干行（`time`、`name` 店、`label` 商品、`value` 金额）。合计由页面从 `rank` 行加出来，`hour` 行之和应等于它 |
| 页头 `.org` / `h1` | 公司与大区名、标题 |
| 时间进度 | 脚本里按 08:00–22:00 营业算（`8*60`、`14*60` 两处），营业时间不同就改这两个数；分时曲线的横轴 `slots=15` 与刻度 `[8,10,…,22]` 跟着改 |
| `#snap` 快照 | 发布时把当时的表内容贴进去（可选）；不想要就整段删掉，读不到表时会显示黄色提示条 |
| 页脚 | 平台标志与名称（与 `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/sales.json`），`hold: true` 先看预览。
2. 建表（表不随版本走，发一次就行）：

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

3. 之后每次更新：`get_data table=sales` 拿 `revision`，`set_data` 整表替换。**不要**为了改数字再 `publish_file`。
   定时更新交给助手的定时任务（例如每 30 分钟从收银导出写一次）。
4. 给谁看：默认仅自己可见；发到店长群用 `set_visibility`（`passcode` 口令，或 `public`）。

## 素材

- `cover.webp`：分享卡封面，由成品页截出。`thumb.webp`：画廊缩略图，由 `examples/verify-shots.mjs --write-thumb` 截出，不进发布包。