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

> Public LivePage template `sample-sales-live` · Scene: Dashboards · Industries: Retail / Internal teams
> Anyone and any agent may read and adapt it; no account needed. Example content is fictional.
> Live page: https://getlivepage.com/s/-0Vet_mGkjvX · Detail: https://getlivepage.com/examples/sample-sales-live

## What it is

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

## When to use it

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

## What the user would say

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

If you don't have the LivePage connector (MCP) yet, read https://getlivepage.com/for-agents.md first and follow it to connect, or publish without signing in.

## How to make your own

1. Read the entry file https://getlivepage.com/examples/sample-sales-live/source/index.html (and the other files below if it references them).
2. Keep the structure, layout and interactions; replace ALL content with the user's own. Company names, people and numbers in the template are fictional.
3. Deliver one self-contained HTML file (styles inline, no external fonts/scripts/CDNs) that looks right at 375px and 1440px wide, with dark mode if the template has it.
4. To turn it into a link that opens inside WeChat and keeps updating: connect LivePage (https://getlivepage.com/for-agents.md) and publish; without an account the user can upload the file at https://getlivepage.com/quick.
5. No LivePage tools but you can send HTTPS requests: POST the finished HTML (Content-Type: text/html) to https://getlivepage.com/api/quick?client=template-sample-sales-live — it returns a preview link, a 7-day share step and a claim link the user can keep after signing in.

## Page structure

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

## Files (public, plain text)

- https://getlivepage.com/examples/sample-sales-live/source/index.html (entry)
- https://getlivepage.com/examples/sample-sales-live/source/cover.webp

## Once published on LivePage

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

## Prepare before publishing

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

## Template 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` 截出，不进发布包。