# 栖木咖啡门店开店手册

> 活页公开模板 `sample-handbook` · 场景: 手册 · 指南 · 行业: 餐饮茶饮 / 企业内部
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/i4ged8A7hqfm · 详情: https://space.24haowan.com/examples/sample-handbook

## 这是什么

操作手册 / 指南 · 一步一步教人做事

## 什么时候用

要让人照着做的东西：新人上岗手册、操作规程、培训材料、使用指南、办事流程。分章带目录，手机上一路往下读。要在几个选项里给建议选 sample-analysis-report；每周同步进度选 sample-weekly-report。

## 用户对助手说的原话

把这份操作流程整理成一份给新员工的操作手册，发成一个网页链接：页头是公司抬头和手册要素（适用范围、用时、负责人、更新日期），下面一个按时间先后排的目录，每行一章、点了能跳过去；每章是编号的步骤（加粗一句做什么，下面一句为什么或注意什么），要点提示用左侧一条琥珀色细线；设备或参数用一张表格，手机上每一行改成竖排小卡片；最关键的那个操作参数画成一张图，把几次试做的结果和目标范围画在一起；最后一章是可以自己勾的检查清单，页末一张「确认已读」表单（名字、门店、没看懂的地方）存到一张数据表里。少用底色块，用细线分隔。以后手册改版就更新到同一个链接。

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

## 照着做一份

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

## 页面结构

- 到店与安全
- 开机与预热
- 磨豆校准
- 备料
- 开门前检查
- 确认已读

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

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

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

- 页内目录，点了直接跳到那一章
- 读完在页末确认（原生表单写进数据表 acks）
- 手册改版后更新同一条链接，旧链接不失效

## 发之前要备好

- 数据表 acks（列 name / store / question，append_open=true）：页末「确认已读」表单写进这里，发之前先建好

## 模板说明（README）

EPIC #9032 C8 新增的画廊样例（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。示例数据均为虚构。

## 演示哪个特色

**长手册在手机上好读 + 读完回写数据表 + 链接不变。**

- **分章 + 页内目录**：页头下面是一个按时间先后排的目录（`nav.toc`），每行整行可点、跳到对应一章；壳页左下角的目录也来自同一组锚点（`manifest.sections`）。
- **分步与要点提示**：每章是编号的步骤（真的有先后才编号），要点提示是左侧一条琥珀细线，不铺底色。
- **宽表在手机上变小卡**：设备表在电脑上是 4 列表格；手机上每一行变成一张竖排小卡，列名来自每格的 `data-label`（发布回执 `compat_table_overflow` 为 0）。
- **记忆点**是「磨豆校准」那张图：三杯试萃的时间和目标范围 25–30 秒画在一起，箭头标出每次怎么调。内联 SVG，手机 / 电脑各一套坐标；脚本在时第一次进入视野三杯依次出现，脚本不跑时图照常完整。
- 发出去之后：页末「确认已读」是原生表单，写进数据表 `acks`，培训负责人用 `list_data_rows` 看谁读完了、哪里没看懂；阅读回执能看到谁在哪一章停得久。手册改版时同一个页面再发一个版本，链接不变，群里的旧链接也不失效。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `h1` / `.facts` | 公司抬头（内联 SVG 标志）、文档编号与版本、适用 / 用时 / 负责人 / 更新日期 |
| 目录 `nav.toc` | 每章一行：`href="#<锚点>"`、时间或序号、章名、用时；章增减时与下面的 `<section>`、`manifest.sections` 三处同改 |
| 每章 `.steps` | 一个 `<li>` 一步：`<b>` 一句做什么、`<span>` 一句为什么；`.tip` 是要点提示 |
| 设备表 `table` | 每行一台设备，`<td data-label="…">` 必须和表头同名（手机小卡靠它显示列名） |
| 校准图 `svg.dial` | 两段内联 SVG（`.dial.wide` 电脑 728 宽 / `.dial.narrow` 手机 343 宽）。横轴 15–40 秒线性映射；目标范围是 `rect.band`；每杯一个 `<g class="shot">`，落进范围的加 `ok`。改数字时两段都改，`aria-label` 同步。不需要图就整段删掉 |
| 开门前检查 `.checks` | 自己对照的清单，原生复选框，不提交 |
| 「确认已读」 | 原生 `<form class="ack" action="./_data/acks">`：字段 `name` / `store` / `question` 就是表里的列名；门店下拉换成你们的门店。末尾脚本把它改成页内提交并显示「已收到」 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的手册时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

## 数据表

页末「确认已读」写进数据表 `acks`（列 `name` / `store` / `question`，一次提交一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "acks"  columns: ["name","store","question"]  rows: []  append_open: true  revision: 0
```

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

## 怎么发出去

有数据表，用 CLI 整目录推最省事：

```bash
export SPACE_TOKEN=sk-space-…            # MCP create_cli_token
node core/space/cli/space-cli.mjs push core/space/examples/sample-handbook \
  --proposal <proposal_id> --manifest core/space/examples/sample-handbook/manifest.json --hold
```

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
手册改版：同一个页面再推一个版本（传 `proposal_id`），链接不变。给谁看：默认仅自己可见；发到员工群用 `set_visibility`（`passcode` 口令可看）。

## 素材

- 没有位图，标志与图表都是内联 SVG；「栖木咖啡」、门店名与人名均为虚构，参数只作示意。
- `thumb.webp`：画廊缩略图，由 `examples/verify-shots.mjs --write-thumb` 从成品截出，不进发布包。