# 拾叶咖啡烘焙室 · 店务台

> 活页公开模板 `livepage-app` · 场景: 小工具 · 轻应用 · 行业: 餐饮茶饮 / 零售门店
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/UsTW9lg1ro-S · 详情: https://space.24haowan.com/examples/livepage-app

## 这是什么

小店店务台 · 能读能写的轻应用

## 什么时候用

要做的不只是一页文档，而是每天在用的小应用：经营数字、商品与库存、订单登记、项目看板、打卡、投票。数据放在表里，改表页面即变，看的人能写回。只收一次报名选 sample-event-signup。

## 用户对助手说的原话

帮我给我们小店做一页每天在用的店务台，发成一个网页链接：顶部写店名和一个「刷新数据」按钮；第一块是经营，四个数字（本月订单金额、订单数、待发货、没做完的事）加一张近 7 天销售额柱状图（带平均线），下面是按状态筛的待办；第二块是商品与库存（可售 = 库存减未发货订单）、最近订单表，和一张让客人登记想要什么的小表单；第三块是本周在推的项目和状态；第四块是店务打卡，每件事一行、右边最近 7 天的格子、一个「做完了」按钮；最后是给熟客的新品投票，显示票数条。数据都放在数据表里，以后我只说改哪个数，页面不用重发。手机上图表换一套坐标。

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

## 照着做一份

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

## 页面结构

- 今天
- 经营
- 商品与订单
- 项目
- 店务打卡
- 新豆投票
- 怎么更新
- 自己做一个

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

- https://space.24haowan.com/examples/livepage-app/source/index.html（入口）

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

- 9 张数据表（页面 fetch ./_data/<表>.json 取数）
- 读者经原生表单写回三张表（订单意向 / 打卡 / 投票）
- 改表不重发页面，链接不变

## 发之前要备好

- 数据表 orders / daily_sales / todos / products / weekly_board / habits（只读，append_open=false）：店里每天改表更新
- 数据表 order_intake（列 sku / qty / name / note）、checkins（列 habit / name / day）、signup（列 choice / name / note），均 append_open=true：三张表单写进这里

## 模板说明（README）

线上：`https://space.24haowan.com/s/UsTW9lg1ro-S`（页面 `01M2Y4ZNW6GTK7NAR1T8MJWFHJ`，public，
已列入 `deploy/deployment-prod.yaml` 的 `DEMO_PROPOSALS`）。首页三语「内容一直在变」一节的
「数据也能换」条目链到它。技能包《活页·轻应用》（`doc/open-skills/livepage-app.md`）把它当标准示例。

这份目录是**发布包的源**：`index.html` 单文件（样式脚本全内联，顶部粘性 tab 跟着滚动高亮）+ `manifest.json` + `_data/` 示例数据。
2026-09-23 按 `core/space/examples/QUALITY.md` 重做（EPIC #9032 C5，#9038）：从「五个功能的清单」改成一家虚构咖啡烘焙室每天在用的一页
（经营 / 商品与订单 / 项目 / 店务打卡 / 新豆投票），版式换成细线分隔的数据看板，取数写回换成最普通的写法。示例内容均为虚构。
九张表挂在页面上（包里 `_data/` 是同名回落，本地 serve 与没建表时读它）：

| 表 | 列 | 写回 | 页面怎么用 |
|---|---|---|---|
| `orders` | order_no, sku, qty, amount, status, customer, created | 关 | 经营四个数（金额 / 单数 / 待发货）、最近订单表；与 products 合算可售库存 |
| `daily_sales` | day, amount | 关 | 近 7 日销售柱图 |
| `todos` | task, owner, due, status | 关 | 待办清单，按状态筛 |
| `products` | sku, name, price, stock, category, emoji | 关 | 商品清单，按分类筛（emoji 列页面已不用）；可售 = stock − 待发货订单 qty |
| `order_intake` | sku, qty, name, note | **开** | 「登记想要的」表单写一行；最近意向列表 |
| `weekly_board` | project, owner, status, progress, updated | 关 | 项目看板，按状态筛 |
| `habits` | habit, target | 关 | 打卡墙的习惯定义 |
| `checkins` | habit, name, day | **开** | 每件事一个「做完了」提交按钮（`name=habit`）写一行；按天汇总成 7 天格子 |
| `signup` | choice, name, note | **开** | 新豆投票；`GET` 回来的行已并入过审的读者行，按 choice 计票 |

改示例页：改这里的文件 → `node cli/space-cli.mjs push examples/livepage-app --proposal 01M2Y4ZNW6GTK7NAR1T8MJWFHJ --manifest examples/livepage-app/manifest.json --hold`
→ 预览 → `publish`。改数据不用发页面：`get_data` 拿修订号 → `set_data` 整表替换。

本地先看（#8657）：`node cli/space-cli.mjs serve examples/livepage-app --closed orders,daily_sales,todos,products,weekly_board,habits`
（`--closed` 与线上的写回开关对齐：只有 `order_intake` / `checkins` / `signup` 开着）。`_data/` 里是线上九张表底表的快照（2026-09-22 取），
本地写回会追加进这些文件 —— 试完 `git checkout examples/livepage-app/_data` 还原。随包推上去也无妨：线上有同名表时读的是活数据，包里的只是回落。

页面取数只用 `fetch('./_data/<表>.json')`（修订号在响应头 `X-Space-Revision`）；写回是三张原生表单
`<form action="./_data/<表>" method="post">`（`order_intake` / `checkins` / `signup`）：不跑脚本也能提交（303 回到本页带 `?space_submitted=<表>`），
脚本在时改成 fetch POST 一行 JSON、就地显示结果。错误按响应体 `error.code` 给人话（`append_closed` / `append_rate_limited` /
`forbidden` / `table_not_found` / `moderation_unavailable`）；直接双击打开文件时 fetch 失败，页面提示「要在查看页里打开」。
不再用旧 SDK `space.data.get / append`（它仍可用，是可选的兼容层）。

★ 改了 `_data/` 里的示例数据，线上九张表要同步整表替换（`set_data`），否则线上仍是旧故事。打卡格子按「今天往前 7 天」画，
`checkins` 的示例日期会随时间变旧，发布前顺手挪到最近一周。

改这一页之前先读这三条（2026-09-22 返工，#8534）——它的定位是**样板**不是手册，三条都由
`core/space/src/upload/example-deck.test.ts` 的 `examples/livepage-app` 一组咬着，违反当场红：

- **命令行与 SDK 片段一律待在 `<details class="code-fold">` 里**，正文（非折叠区）不出现 `<pre>`；
  外观与 Markdown 页面里的命令行折叠同一套（`core/space/src/publish/markdown.ts`，#8533）。
- **小标题（眉标 / h2 / h3）里不印内部表名**——上面那张表是给维护者看的，页面上的读者不需要知道。
- **页面里不放复制提示词**（#9036 · `examples/QUALITY.md` §6.1）：「复制一份」只走 Agent 的 `copy_proposal`
  （阅读页「我也要一份」已于 C4 退役），末节指向专家「活页轻应用搭建助手」
  （`doc/open-skills/experts/agents/livepage-app-builder.md`，搭建提示词的单一真源）。
  原先的 `data-track="copy_prompt"` 按钮已随之删除，运营台按标签泛出的点击里这一行从此不再增长。