# 巷口小馆 · 秋冬菜单

> 活页公开模板 `sample-restaurant-menu` · 场景: 产品图册 · 公司介绍 · 行业: 餐饮茶饮
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/xb1rcw_4MDMS · 详情: https://space.24haowan.com/examples/sample-restaurant-menu

## 这是什么

扫码菜单 · 贴在桌上，客人扫码点菜下单

## 什么时候用

小馆子、茶饮店、食堂、民宿早餐要一张贴在桌上的二维码菜单：客人扫开按分类看菜、点菜、写口味、直接下单，店里在数据表里收单，选它。菜价常调、季节换菜单也选它（链接不变，桌上的码不用重印）。要把产品、规格和价格发给批发客户询价选 sample-product-catalog；只收报名不算钱选 sample-event-signup。

## 用户对助手说的原话

帮我做一份贴在桌上扫码点菜的菜单网页：我开一家小馆子，秋冬菜单有招牌、热菜、凉菜、主食、饮品五类，十几道菜。页头是店名、地址、菜单名、供应日期、午市晚市时间和桌号（从二维码链接里带的桌号读）；下面一行「今天点得最多」前三，读点单表现算；然后一条吸顶的分类横滑栏，滚动时高亮跟着走；每道菜一只俯视角的盘子插画（全用内联矢量图画，不用照片）、菜名、一句像店主说的介绍、辣度（几个小辣椒）、价格，招牌菜带一个「推荐」小印章，右边一个「+」，点了变成加减份数，加菜时一个小圆点飞进点菜单；手机上底部固定一条显示份数和合计，点开是清单，能改份数、选口味（少辣、不要香菜这类）、写备注、选桌号；电脑上三栏菜品网格，右边固定一栏点菜单。下单存到一张数据表（桌号、点了什么、合计、备注），提交后出一个大大的取餐号和小票。合计只按每道菜的价格现算。版式像杂志，标题用宋体，少用底色块，用细线分隔。以后调价、换季就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 今天点得最多
- 招牌
- 热菜
- 凉菜
- 主食
- 饮品
- 点菜单

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

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

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

- 页内下单写回数据表（原生表单 POST ./_data/orders 打底，脚本在时页内提交、就地出取餐号）
- 页面读回今天的单，算「今天点得最多」前三
- 同一链接更新不变（调价、换季节菜单后桌上的二维码不用重印），阅读回执看客人翻到了哪一类
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 orders（列 table / items / total / note，append_open=true）：点菜单的「下单」写进这里（items 形如「巷口红烧肉×2、米饭×3」，total 是元），页面读回算「今天点得最多」；发布前先用 set_data 建好，打烊后可以把 append_open 关掉
- 每张桌子一个二维码，链接末尾带 ?table=07 这样的桌号（不带就默认 07，客人在点菜单里也能改）

## 模板说明（README）

模板市场第三轮补齐的场景之一（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。虚构的「巷口小馆」秋冬菜单：贴在桌角的二维码，客人扫开就点菜、下单、拿取餐号。示例内容均为虚构。

## 演示哪个特色

**桌上的码扫开就能点 —— 下单写回数据表，页面读回算「今天点得最多」。**

- **记忆点**是每道菜一只俯视角的盘子：全是内联 SVG 现画（顶部 `<symbol id="d-…">`，菜品之间不重样），招牌菜带一枚斜着的「推荐」印章；页头那盘红烧肉冒着热气（全页唯一的循环动画）。点「+」时一颗小圆点从按钮飞进点菜单，底部条轻轻一跳。
- 分类栏吸顶横滑（招牌 / 热菜 / 凉菜 / 主食 / 饮品），滚动时高亮跟着走，并把当前那格滑进可见区。
- 点菜单：手机上是底部固定条（份数 + 合计 + 点了哪几道），点开是抽屉清单，能加减份数、勾口味（少辣 / 不要香菜 / 不要葱蒜 / 凉菜先上）、写备注、选桌号；电脑上三栏菜品网格，右边一栏点菜单固定不动。
- **金额自洽**：价格只写在每道菜的 `data-price`，份数、行小计、合计、小票全由脚本从它现算（例：红烧肉 ×2 + 黄牛肉 ×1 + 米饭 ×3 = 96 + 42 + 6 = ¥144）。
- 发出去之后：「下单」写进数据表 `orders`（`table` / `items` / `total` / `note`），提交后出取餐号（A + 今天第几单，基础 41 单）和一张小票；页面读 `./_data/orders.json`，把今天的单按菜名加到基础份数上，算「今天点得最多」前三。调价、换季菜单就更新同一页，桌上的码不用重印。
- 降级：脚本不跑时菜单完整可读，点菜单是一张原生表单（`<form method="post" action="./_data/orders">`：桌号、想点什么、备注），照样能下单；`prefers-reduced-motion` 时热气、飞点、抽屉动画都停。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.shop` / `h1` / `.facts` | 店名、地址、菜单名、供应日期、营业时间 |
| 分类 `section.cat` | 每类一个 `<section id data-track-section>`，`header p` 是一句说明；改了 id 要同改 `.tabs` 的链接和 `manifest.json` 的 `sections` |
| 每道菜 `li.dish` | `data-id`（对应插画 `#d-<id>`）、`data-name`（写进 `items` 的菜名，读回也按它对）、`data-price`（唯一的价格来源，元）；`.desc` 一句介绍、`.sp` 辣度、`.seal` 推荐印章、`.price small` 单位 |
| 插画 `<symbol id="d-…">` | 120×120 俯视盘子，一道菜一个；换成你自己的菜就照着画，或者换成随包的 WebP 菜品图（`<img alt>`，≤ 300 KB） |
| 脚本里的 `BASE` / `BASE_ORDERS` | 「今天点得最多」的基础份数与今天已出单数（新店写 `{}` 和 0，只看读回） |
| 点菜单 `select[name=table]` | 桌号列表；二维码链接带 `?table=07`（或 `?t=07`）会自动选中 |
| `#chips` | 常用口味标签，勾选的会拼在备注前面 |
| `.fine` / `.ticket .tip` | 结账方式、出餐说明 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的菜单时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

## 数据表

下单写进数据表 `orders`（一单一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "orders"  columns: ["table","items","total","note"]  rows: []  append_open: true  revision: 0
```

`items` 形如 `巷口红烧肉×2、米饭×3`，`total` 是元。后厨 / 前台用 `list_data_rows table=orders`（或 `wait_for_feedback kinds=["row"]` 等新单）读单；打烊后用 `set_data` 传 `append_open: false` 关掉（页面会提示「现在不接单了」）。本地 `space-cli serve` 会把提交写进包里的 `_data/orders.json`，试完记得改回 `[]`。

## 怎么发出去

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

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
确认后 `set_visibility` 设成 `public`，每张桌子打一个二维码（链接末尾带 `?table=<桌号>`）贴在桌角。

## 素材

- 没有位图：菜品插画、店标、辣椒图标都是内联 SVG；店名、地址、菜品、价格与份数均为虚构。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。