# KANPAI 原型 · 画面工人规则书（v0.1 · 2026-10-15）

> 给手机 APP／iPad／电脑网页三个画面工人。基础层（token、组件、种子、样板）已经写好，你只写画面 HTML。
> **规则写死，照做即可；拿不准的地方停下来问，不要自己发明。**
>
> 必读顺序：本文件 → `shared/preview.html`（浏览器打开，组件长什么样）→ `shared/SEED.md`（数字从哪来）→ `shared/base.css` 每个组件上方的注释（完整片段）。
> 业务内容只来自 SOP：`Bar-Pro/docs/review-2026-10-10/bar_sop_2026-10-10.txt`。

---

## 0. 一句话

YOAKE 是「晨光里的纸桌」，KANPAI 是「夜の帳と月」——同一张纸、同一支墨、同一道金线，只是翻到夜里。
**店内（手机・iPad）＝夜 `night`；电脑后台＝紙 `paper`，是第二天早上店长在办公室看的那张纸。**
**金额是主角**：每张账单画面一眼看到 应收／已收／未收。

---

## 1. 文件与命名

```
prototype/
  index.html                 总入口（已写好）
  shared/                    基础层（只读，别改；要改先提出来）
    tokens.css  base.css  seed.json  SEED.md  DESIGN.md  preview.html  fonts/
  phone/   index.html  01-seats.html …      ← 手机工人
  ipad/    index.html  01-floor.html …      ← iPad 工人
  desktop/ index.html  01-daily.html …      ← 电脑工人
  _shots/<端>/                截图（自检用）
```

- 文件名＝**两位序号＋英文短名**（小写、连字符）。`index.html` 就是「00 画面一览」。
- 必须用下表的文件名（总入口和画面地图已经按这些名字留了位置）。

| 端 | 序号 | 文件 | 画面 | SOP 依据 | 数据时刻 |
|---|---|---|---|---|---|
| 手机 | 00 | `phone/index.html` | 画面一览 | — | — |
| | 01 | `phone/01-seats.html` | 座位与今日 | 三·开店动作2；一·5；二 | 22:40 |
| | 02 | `phone/02-open.html` | 开单 | 四 步骤 5–7；一·1・3・6；情况 1、2、4、19 | 20:12（田中 健）|
| | 03 | `phone/03-bill.html` | 账单（本次接待） | 四 账单变化表；一·2；情况 5、20、21 | 22:40（田中 健 4,600）|
| | 04 | `phone/04-order.html` | 加单 | 四 步骤 9–16；情况 5、6、26、32、34 | 22:40 |
| | 05 | `phone/05-price-note.html` | 商品改价与备注 | 情况 23、24、25；一·7・8 | 21:40（山崎12年 改价）|
| | 06 | `phone/06-checkout.html` | 结账（分账与付款） | 情况 15–18、36、37、38 | 22:52（田中 健）／T2 |
| | 07 | `phone/07-partial-debt.html` | 结账·部分付款与欠款 | 情况 41、42、39、40 | 23:10（陈 伟）|
| | 08 | `phone/08-storage.html` | 存酒 | 情况 7、8、10、11、12 | 22:40（山本 隆）|
| | 09 | `phone/09-customer.html` | 客户搜索与建档 | 一·6；情况 2、3 | 22:40 |
| | 10 | `phone/10-voice-note.html` | 语音备注 | 十四；一·8 | 任意 |
| | 11 | `phone/11-staff.html` | 当前员工与切换 | 三·开店动作1；情况 49；十二·闭店动作17 | 22:40 |
| iPad | 00 | `ipad/index.html` | 画面一览 | — | — |
| | 01 | `ipad/01-floor.html` | 座位全景＋当前账单 | 三·开店动作2；十二·闭店动作1；四 | 22:40 |
| | 02 | `ipad/02-open.html` | 开单 | 四 步骤 5–7；情况 1、15、19 | 22:10（T3）|
| | 03 | `ipad/03-order-split.html` | 加单分栏（批量分配给客人1・客人2） | 情况 6、5、26 | 22:14（T3）|
| | 04 | `ipad/04-checkout.html` | 结账 | 情况 15–18、36–38 | 23:30（T2）|
| | 05 | `ipad/05-authz.html` | 改价授权与权限 | 情况 23、24、25、35；十三 更正 | 21:40 |
| | 06 | `ipad/06-storage.html` | 存酒管理与交接 | 情况 7–14；三·开店动作5；十二·闭店动作9 | 闭店前 |
| | 07 | `ipad/07-cellar.html` | 酒仓（加减瓶・开瓶・空瓶・入库・损耗） | 十一 库存动作 1–6；十二·闭店动作10 | 闭店前 |
| | 08 | `ipad/08-closing.html` | 闭店核对（17 步） | 十二 闭店动作 1–17 | 03:35 |
| | 09 | `ipad/09-opening.html` | 开店检查（5 步） | 三 开店动作 1–5 | 19:05 |
| 电脑 | 00 | `desktop/index.html` | 画面一览 | — | — |
| | 01 | `desktop/01-daily.html` | 日报 | 十二·闭店动作15；十五·定期4 | 闭店后 |
| | 02 | `desktop/02-periodic.html` | 周报月报 | 十五·定期动作4 | 闭店后 |
| | 03 | `desktop/03-customers.html` | 客户档案 | 一·6；情况 3；十五·定期2；十二·闭店动作12 | 闭店后 |
| | 04 | `desktop/04-products.html` | 商品与价格 | 情况 35；一·2；十六 | 闭店后 |
| | 05 | `desktop/05-performance.html` | 担当业绩 | 一·10；情况 32、33；十二·闭店动作8；十五·定期3 | 闭店后 |
| | 06 | `desktop/06-inventory.html` | 库存・采购・盘点 | 十一；十五·定期1；十二·闭店动作10・11 | 闭店后 |
| | 07 | `desktop/07-audit.html` | 更正与审计记录 | 十三；情况 28–31、43、45；十二·闭店动作7 | 闭店后 |
| | 08 | `desktop/08-staff.html` | 员工与权限 | 三·开店动作1；十二·闭店动作17；十三 出勤 | 闭店后 |
| | 09 | `desktop/09-closing-archive.html` | 日结归档 | 十二·闭店动作14；十三 日结 | 闭店后 |
| | 10 | `desktop/10-storage-ledger.html` | 存酒台账 | 六；十五·定期2 | 闭店后 |

---

## 2. 页面骨架（复制即用）

### 2.1 手机（夜）

```html
<!doctype html>
<html lang="zh-CN" data-theme="night" data-device="phone">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KANPAI · 手机 · 03 账单</title>
<link rel="stylesheet" href="../shared/tokens.css">
<link rel="stylesheet" href="../shared/base.css">
</head>
<body class="k-stage k-stage--phone">
  <header class="k-proto">
    <a href="index.html">← 手机画面一览</a>
    <span class="k-proto__title">KANPAI 原型 · 手机 · 03 账单</span>
    <span class="k-proto__pager"><a href="02-open.html">上一页</a><a href="04-order.html">下一页</a></span>
  </header>

  <div class="k-device k-device--phone">
    <div class="k-app">
      <p class="k-statusline"><span>22:40</span><span>营业日 10/14（水）</span><span>李 明</span></p>
      <header class="k-topbar">
        <a class="k-topbar__back" href="01-seats.html" aria-label="返回座位"><span class="k-icon k-icon--back"></span></a>
        <div class="k-topbar__titles"><h1 class="k-topbar__title">C3 · <span lang="ja">田中 健</span></h1><p class="k-topbar__sub">20:12 开单 · 1 人 · 新客</p></div>
      </header>
      <main class="k-app__main">
        …画面内容…
      </main>
      <div class="k-actionbar">…（可选）主操作…</div>
      <nav class="k-bottomnav" aria-label="主导航">
        <a class="k-bottomnav__item is-current" aria-current="page" href="01-seats.html"><span class="k-icon k-icon--seats"></span>座位</a>
        <a class="k-bottomnav__item" href="04-order.html"><span class="k-icon k-icon--order"></span>加单</a>
        <a class="k-bottomnav__item" href="08-storage.html"><span class="k-icon k-icon--bottle"></span>存酒</a>
        <a class="k-bottomnav__item" href="09-customer.html"><span class="k-icon k-icon--users"></span>客户</a>
        <a class="k-bottomnav__item" href="11-staff.html"><span class="k-icon k-icon--me"></span>我</a>
      </nav>
    </div>
  </div>

  <footer class="k-stage__notes">
    <p class="k-note"><span class="k-note__label">原型注记</span><span class="k-note__sop">SOP 四 账单变化表；情况 5</span>静态原型・无功能・数据为虚构种子（seed.json v01）。</p>
  </footer>
</body>
</html>
```

- 底部导航 5 个入口固定：座位→01、加单→04、存酒→08、客户→09、我→11。哪个画面属于哪个入口，就给哪个加 `is-current` ＋ `aria-current="page"`（02/03/05/06/07 属于「座位」，10 属于「客户」或当前所在入口）。
- `k-statusline` 只写一行：时间・营业日・当前员工。**不画刘海、假电量、假信号、假 Home 条。**

### 2.2 iPad（夜）

```html
<html lang="zh-CN" data-theme="night" data-device="ipad">
…
<body class="k-stage k-stage--ipad">
  <header class="k-proto">…← iPad 画面一览…</header>
  <div class="k-device k-device--ipad">
    <div class="k-split">
      <p class="k-statusline"><span>22:40</span><span>营业日 10/14（水）· 共用 iPad</span><span>佐藤 美咲 · 店长</span></p>
      <header class="k-topbar">
        <div class="k-topbar__titles"><h1 class="k-topbar__title">座位全景</h1></div>
        <nav class="k-topbar__nav">
          <a class="is-current" aria-current="page" href="01-floor.html">座位</a><a href="02-open.html">开单</a><a href="03-order-split.html">加单</a>
          <a href="04-checkout.html">结账</a><a href="05-authz.html">授权</a><a href="06-storage.html">存酒</a>
          <a href="07-cellar.html">酒仓</a><a href="08-closing.html">闭店</a><a href="09-opening.html">开店</a>
        </nav>
        <div class="k-topbar__actions"><a class="k-btn k-btn--secondary k-btn--sm" href="…">切换员工</a></div>
      </header>
      <main class="k-split__main">左：座位全景 / 商品 / 清单</main>
      <aside class="k-split__side">右：当前账单（k-guest-tabs ＋ k-lines ＋ k-amounts--rows）</aside>
    </div>
  </div>
  <footer class="k-stage__notes"><p class="k-note">…</p></footer>
</body>
```

- 共用 iPad：状态行右侧必须写**当前操作员工**（SOP 开店动作1、情况 49）。
- 右栏放不下 5 列账单 → `k-lines` 会自动堆叠成两行，正常。

### 2.3 电脑（紙）

```html
<html lang="zh-CN" data-theme="paper" data-device="desktop">
…
<body>
  <header class="k-proto k-proto--bar">
    <a href="index.html">← 电脑画面一览</a><span class="k-proto__title">KANPAI 原型 · 电脑 · 01 日报</span>
    <span class="k-proto__pager"><a href="index.html">上一页</a><a href="02-periodic.html">下一页</a></span>
  </header>
  <div class="k-page">
    <nav class="k-sidenav" aria-label="后台导航">
      <div class="k-sidenav__brand"><span class="k-wordmark">KANPAI</span><span class="k-sidenav__store">ALMA TOKYO</span></div>
      <div class="k-sidenav__group"><p class="k-sidenav__label">营业</p>
        <a class="k-sidenav__link" aria-current="page" href="01-daily.html"><span class="k-icon k-icon--dashboard"></span>日报</a>
        <a class="k-sidenav__link" href="02-periodic.html"><span class="k-icon k-icon--chart"></span>周报月报</a>
        <a class="k-sidenav__link" href="09-closing-archive.html"><span class="k-icon k-icon--archive"></span>日结归档</a></div>
      <div class="k-sidenav__group"><p class="k-sidenav__label">客户与酒</p>
        <a class="k-sidenav__link" href="03-customers.html"><span class="k-icon k-icon--users"></span>客户档案</a>
        <a class="k-sidenav__link" href="10-storage-ledger.html"><span class="k-icon k-icon--bottle"></span>存酒台账</a></div>
      <div class="k-sidenav__group"><p class="k-sidenav__label">商品与库存</p>
        <a class="k-sidenav__link" href="04-products.html"><span class="k-icon k-icon--tag"></span>商品与价格</a>
        <a class="k-sidenav__link" href="06-inventory.html"><span class="k-icon k-icon--box"></span>库存・采购・盘点</a></div>
      <div class="k-sidenav__group"><p class="k-sidenav__label">人员与记录</p>
        <a class="k-sidenav__link" href="05-performance.html"><span class="k-icon k-icon--star"></span>担当业绩</a>
        <a class="k-sidenav__link" href="08-staff.html"><span class="k-icon k-icon--shield"></span>员工与权限</a>
        <a class="k-sidenav__link" href="07-audit.html"><span class="k-icon k-icon--list"></span>更正与审计记录</a></div>
      <p class="k-sidenav__foot">佐藤 美咲 · 店长</p>
    </nav>
    <main class="k-page__main">
      <header class="k-pagehead">
        <div class="k-pagehead__titles"><p class="k-eyebrow">DAILY REPORT</p><h1>日报 · 2026-10-14（水）</h1><p class="k-pagehead__meta">营业日截止 10/15 06:00</p></div>
        <div class="k-pagehead__actions">…</div>
      </header>
      …内容放在 k-sheet / k-card / k-table-wrap 里（文字和控件放在纸片上，画布只做底）…
      <p class="k-note">…</p>
    </main>
  </div>
</body>
```

### 2.4 各端「00 画面一览」

同一端的主题（手机/iPad 用夜＋`<body class="k-stage">`，不需要取景框，内容包在 `<main class="k-page__main k-page__main--solo">` 里；电脑用紙＋同样的 `k-page__main--solo`，不需要侧栏）。内容：页标题＋一句说明＋每个画面一张 `<a class="k-card">`（序号用 `k-eyebrow`，画面名用 `k-card__title`，下面一行 `k-caption` 写 SOP 依据），最后放回总入口的链接 `../index.html` 和 `k-note`。

---

## 3. 主题与引用

- 主题只挂在 `<html>`：`data-theme="night"`（手机・iPad）或 `data-theme="paper"`（电脑）。
- 设备字阶挂在 `<html>`：`data-device="phone" | "ipad" | "desktop"`。
- 每页只引两个 CSS，顺序固定：`../shared/tokens.css` → `../shared/base.css`。
- 不加 `<style>`、不加别的 CSS 文件、不引外部字体或 CDN（原型要能整包离线发给商务）。确实缺组件 → 提出来，由基础层补，不要在页面里自造。
- 布局用 `k-stack / k-cluster / k-spread / k-grid / k-grid--auto`；唯一允许的 `style` 属性是设置列数：`style="--k-cols:3"`。
- **小票预览**是记录类内容，夜里也是一张纸：`<div class="k-receipt" data-theme="paper">`。

---

## 4. 组件速查（完整片段在 base.css 各节注释里；样子看 preview.html）

| 类 | 用途 | 关键点 |
|---|---|---|
| `k-stage` `k-proto` `k-device--phone/--ipad` `k-stage__notes` `k-note` | 原型外壳 | 每页都有 k-proto（返回一览）和 k-note（SOP 编号） |
| `k-app` `k-statusline` `k-topbar` `k-app__main` `k-actionbar` `k-bottomnav` | 手机布局 | 底部导航 5 个固定入口 |
| `k-split` `k-split__main` `k-split__side` `k-topbar__nav` | iPad 布局 | 右栏＝当前账单 |
| `k-page` `k-sidenav` `k-pagehead` `k-sechead` | 电脑布局 | 页头底边金线 |
| `k-sheet` `k-card` `k-receipt` | 面 | 圆角 20 / 16 / 4（小票） |
| `k-btn --primary/--secondary/--ghost/--danger --sm/--lg/--block/--icon` | 按钮 | 一屏最多一个 primary |
| `k-field` `k-input` `k-input--num` `k-select` `k-textarea` `k-search` `k-check` | 表单 | 金额输入用 `k-input--num` |
| `k-chip --vacant/--active/--due/--check/--debt/--settled/--gold/--accent` | 状态胶囊 | 见 §6 语义表 |
| `k-tag` `k-tag--ink` | 账单行里的记录标签 | 首杯／改价／赠送／代录／员工饮品／存酒／整瓶 |
| `k-count` `k-avatar--1..4` `k-who` | 计数、人员头像 | 头像色固定对应 4 位员工 |
| `k-seats` `k-seat --vacant/--active/--due/--stale` | 座位格 | 金额＝目前未收 |
| `k-cats` `k-cat` `k-products` `k-product .is-fav/.is-selected/.is-out` `k-product__qty` | 分类与商品 | 缺货用 `<span>` 不可点 |
| `k-lines` `k-lines__head` `k-line --seat/--info/--void .is-new` | 账单行 | 改动的原价用 `<s>` |
| `k-amounts --rows/--lg/--debt/--settled` | 应收/已收/未收 | **每个账单画面必有** |
| `k-guest-tabs` `k-guest-tab --all/--add` | 客人分页 | 当前＝金线 |
| `k-stepper` `k-seg` | 数量、分段 | 已选＝靛蓝 |
| `k-pays` `k-pay .is-selected/.is-pending/.is-disabled` `k-change` | 付款渠道、找零 | 渠道 4 个固定 |
| `k-bottles` `k-bottle --active/--check/--done` | 存酒瓶卡 | 瓶号金字 |
| `k-voice .is-listening/.is-transcribed` | 语音备注 | 所有备注同一个样子 |
| `k-authz` `k-authz--granted` `k-pin` | 授权、PIN | 不写真实 PIN |
| `k-steps` `k-step .is-done/.is-issue/.is-current` | 清单步骤 | 编号两位 |
| `k-kpis` `k-kpi --hero/--debt/--check` | KPI | 数字只来自种子 |
| `k-table-wrap` `k-table` `.is-num` `.is-flag/.is-debt` | 数据表 | 4px、罫线、数字右对齐 |
| `k-chart` 及 `__grid/__axis/__line/__area/__dot/__bar/__s1..s4` `k-legend` | 手写 SVG 图表 | 颜色只用类名 |
| `k-list` `k-row` `k-row--link` `k-hl` `k-kv` `k-alert --active/--check/--debt/--settled` `k-empty` | 列表、键值、提示、空状态 | 提示条正文保持墨色 |
| `k-icon k-icon--<名>` | 图标 | 名单见 base.css §3 |
| `k-num` `k-money` `k-yen` `k-num--xl/lg/md/sm` `k-eyebrow` `k-caption` `k-muted` `k-gold` `k-link` | 文字工具 | 数字一律 `k-num`/`k-money` |

**交互约定**：能跳转的用 `<a href>`（链到下一个画面）；不跳转的控件用 `<span>`/`<div>` 套同样的类，**不要用 `<button>`**——静态原型里不出现「像能点、点了没反应」的按钮。输入框、文本框可以真实可输入（不保存）。

**导航当前位置＝月金线**（底部导航、客人分页、顶栏分区、左侧导航）；**选项已选＝靛蓝**（分段、分类、商品、付款渠道、语言胶囊）。不要混用。

---

## 5. 金额与数字

1. 日元整数、千分位逗号、**不带小数**、价格税込。不写「円」「元」「JPY」。
2. 金额元素：`<span class="k-money"><span class="k-yen">¥</span>4,600</span>`。表格、账单行里的单价/成交价可以不带 ¥（列头已说明），合计与三联必须带。
3. 负数用全角减号「−」（U+2212）：首杯 `−1,000`、改价让利 `−200`、现金差额 `−¥1,000`。
4. 改价：原价 `<s>1,500</s>` 划线 ＋ `k-tag` 改价 ＋ 成交价 `1,300`，三者同时可见；授权人写在 `k-line__meta`。
5. 首杯：菜单价 `<s>1,300</s>` ＋ `k-tag` 首杯 `−1,000` ＋ 成交价 `300`。赠送：菜单价划线、成交价 `0`。存酒取用：成交价写「不计费」（`k-line--info`）。
6. 账单画面三联 `k-amounts` 必须出现：接待中未收是金字（正常）；结束后还有余额用 `k-amounts--debt`＋「欠款」；结清用 `k-amounts--settled`。
7. 数字全部来自 `seed.json`。种子没有的指标写「—」并在 k-note 写「种子未提供」。**不编百分比、不编环比、不编排名。**
8. 时间 `HH:MM`；跨午夜写 `00:20` 并可加「次日」。日期 `10/14（水）`。

---

## 6. 状态色语义（全端一致）

| 状态 | 类 | 用在 |
|---|---|---|
| 空位／已结束 | `--vacant` | 座位空、接待已结束 |
| 使用中 | `--active`（靛蓝） | 座位使用中、接待中、存酒取用中 |
| 待结账 | `--due`（芥末） | 客人叫结账 |
| 待核对 | `--check`（芥末＋虚线＋!） | 存酒找不到、支付状态不明、现金差额待查、日结待核对 |
| 欠款／遗留 | `--debt`（赤陶） | 已结束未结清、上一营业日遗留未处理 |
| 已结清／已完成 | `--settled`（橄榄＋✓） | 结清、步骤完成、店长已授权、渠道一致 |
| 中性信息 | 无修饰 `k-chip` | 可取用、未開封、新客/老客等 |

颜色永远配文字，不靠颜色单独表达。一屏里没有要区分的状态时，不出现状态色。

---

## 7. 文案口吻

- 界面文字中文；**商品名、客人名按真实场景用日文或中文**，并加 `lang`：`<span lang="ja">ジントニック</span>`、`<span lang="ja">山本 隆</span>`、`<span lang="zh">陈 伟</span>`（页面默认 zh，中文名可以不加）。
- 短、动词开头：「开单」「加单」「结账」「保存订单」「确认收款」「请店长授权」「记为待核对」「归位」。
- 用 SOP 原词：席料（=座位费）、首杯优惠、应收／已收／未收、担当、代录、存酒、取用、归位、待核对、日结、补收、找零。
- 不说「智能」「赋能」「一键」「AI 自动」「无缝」；不写营销口号；不写「功能完成」类的假承诺。
- 错误／提示说清楚发生了什么＋下一步：「PIN 不正确，请重试」「QR 状态不明，先在终端查询交易」。
- SOP 里**尚未确定的规则**（存酒权限、当天再次入店、欠款条件、提成比例等）不要画成确定的功能；需要露出时写「规则待定（SOP 十六）」。

---

## 8. 禁止事项

1. **裸色值**：页面里不出现 `#xxxxxx`、`rgb()`、`hsl()`、颜色关键字、`fill="#…"`。颜色只能通过类名（进而通过 token）。
2. **斜体标题**、合成斜体；`<em>` 已被改成粗体，不要再加 `font-style`。
3. **假 chrome**：刘海、灵动岛、假状态栏（电量/信号）、Home 条、浏览器地址栏、红黄绿圆点窗口条。
4. **种子外的数字**：人名、金额、件数、时间都从 seed.json 来。
5. **任何功能 JS**：不写 `<script>`。画面之间只用 `<a href>`。（基础层也没有 JS。）
6. 外部资源：CDN、Google Fonts、在线图片、图标库链接。
7. AI 生成图、图库插画、emoji 当图标。图标只用 `k-icon`。
8. 在页面里写 `<style>` 或 `style="…"`（唯一例外 `--k-cols`）。
9. 把店内看单写成「显示屏／KDS」；写「沿用已上线系统」；暗示卖硬件。
10. `<button>` 做静默无反应的按钮。

---

## 9. 每页必备（缺一项即不合格）

- [ ] `<html>` 上有 `lang="zh-CN"`、`data-theme`、`data-device`
- [ ] `<title>`：`KANPAI · <端> · <序号> <画面名>`
- [ ] 顶部 `k-proto`：返回本端画面一览的链接（`index.html`）＋上一页/下一页
- [ ] 底部 `k-note`：`<span class="k-note__sop">` 写对应 SOP 编号（格式见下）＋一句说明（演示的是哪个接待、哪个时刻）
- [ ] 账单类画面有 `k-amounts`
- [ ] 所有数字能在 seed.json 里找到
- [ ] 手机页能在 390 宽下不横向滚动；电脑页 1280 宽下不横向滚动（表格自己在 `k-table-wrap` 里滚）

**SOP 编号格式**：`SOP 四 步骤 9–16；情况 5、6` ／ `SOP 三·开店动作 1–5` ／ `SOP 十二·闭店动作 3、4` ／ `SOP 十四`。章用汉字数字，情况用阿拉伯数字。

---

## 10. 各画面要点（取数指引）

**手机（李 明，22:40）**
- 01 座位与今日：顶部 `k-amounts` 用 `live_snapshot.totals`（65,500／34,200／31,300）；12 个 `k-seat` 照 `live_snapshot.seats`；C3 是待结账。
- 02 开单：田中 健 一人、C3、标记新客、勾选「保存客户档案」；席料 2,000 确认；客人信息可跳过（「客人1」＋识别备注 `k-voice`）。
- 03 账单：v01 的 4 行＋三联 4,600／0／4,600；首杯已用；「加单」「结账」两个出口。
- 04 加单：`k-guest-tabs`（选客人）＋`k-cats`＋`k-products`＋数量默认 1＋担当默认当前员工（可改，代录示例见 v06）。
- 05 改价与备注：山崎12年 1,500→1,300，李 明 无权限 → `k-authz` 锁态 → 店长授权后解锁态；备注 `k-voice`。座位费改价、赠送入口也在这里（赠送需店长权限）。
- 06 结账：田中 健 现金 10,000 → 找零 5,400（`k-change`）；另可展示 T2 的 `k-seg` 各自消费／平均 AA（每人 2,400）／一人支付。
- 07 部分付款与欠款：陈 伟 应收 4,600、现金 3,000、未收 1,600，`k-amounts--debt`，欠款说明 `k-voice`（中文），店长 佐藤 在场处理、允许离店；「谁有权允许欠款」SOP 未定，不要画成权限规则。
- 08 存酒：山本 隆 的 2 瓶（22:40：#K-0231 取用中；#K-0244 是 23:20 才建，22:40 画面不要出现，或在 k-note 说明演示的是闭店后状态）；陈 伟 #K-0198 待核对。
- 09 客户搜索与建档：搜「ヤマ」→ 山本 隆（别名 ヤマさん）；同名/表记不同时列候选；暂不确定用临时客人。
- 10 语音备注：中文／日本語／English 三个胶囊只亮一个；正在听 → 已转写可修改；提示「不会改变金额、数量或付款状态」。
- 11 当前员工与切换：李 明 19:02 上班；切换到共用 iPad 时选员工＋PIN；下班打卡。

**iPad（佐藤 美咲／共用）**
- 01 座位全景＋当前账单：左 12 座位（`k-seat--lg`），右栏选中座位的账单（`k-amounts--rows`）。
- 03 加单分栏：T3 客人1・客人2 同时点单——客人1 ハイボール（首杯后 0）、客人2 モスコミュール（首杯后 300），一次保存（情况 6）。
- 05 改价授权：3 件改价列表（`events.price_changes`）＋`k-pin`＋权限表（4 人 × 改价/赠送/退款/日结）。
- 06 存酒管理：3 瓶＋当晚变动＋交接备注。07 酒仓：`inventory` 表＋5 条 `inventory_events`＋补货 3 项。
- 08 闭店核对：照抄 `closing_check.steps` 17 步状态；现金核对块用 `cash`；渠道核对用 `channels`。
- 09 开店检查：`opening_check` 5 步；C8 遗留用 `k-seat--stale`。

**电脑（佐藤 美咲，10/15 早上）**
- 01 日报：KPI 四个（应收 113,700／已收 112,100／未收 1,600／现金差额 −1,000）＋渠道表＋事件汇总＋商品销售（`sales_by_product`）＋日结状态「待核对」。
- 02 周报月报：`trend_7d` 折线（标「虚构」）；月度数字种子没有 → 「—」。
- 03 客户档案：12 个档案；陈 伟 欠款；山本 隆 别名与存酒。
- 04 商品与价格：10 个商品，成本标「估算」；首杯对象一列；ジンジャーハイボール 暂不可售。
- 05 担当业绩：`sales_by_rep`；代录 1 件；提成「规则待定」。
- 06 库存・采购・盘点：`inventory`、`purchases`、`reorder`；盘点差异种子没有 → 「—」。
- 07 更正与审计记录：`audit_log` 18 条；更正 0、取消 0、退款 0 也要显示出来。
- 08 员工与权限：`staff`＋`attendance`。
- 09 日结归档：`trend_7d.days` 的 close_status（10/14 待核对＋3 项待处理）。
- 10 存酒台账：`storage` 全部历史。

---

## 11. 自检（交付前自己跑）

```bash
cd /Users/sanritu/WorkDev/NextDay-Pro/Bar-Pro/prototype
# 1) 裸色值 / style / script / button / 外链
grep -nE '#[0-9A-Fa-f]{3,8}\b|rgba?\(|hsla?\(|<script|<button|https?://' phone/*.html ipad/*.html desktop/*.html
grep -nE 'style="' phone/*.html ipad/*.html desktop/*.html | grep -v -- '--k-cols'
# 2) 每页都有 k-note 和返回一览
for f in phone/*.html ipad/*.html desktop/*.html; do grep -q 'k-note' $f || echo "缺 k-note: $f"; grep -q 'href="index.html"' $f || echo "缺返回一览: $f"; done
# 3) 截图（手机 1440×1000；iPad 1440×1000；电脑 1440×1200）
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu --hide-scrollbars \
  --virtual-time-budget=10000 --window-size=1440,1000 --screenshot=_shots/phone/03-bill.png "file://$PWD/phone/03-bill.html"
```

> **390 宽截图的坑（2026-10-15）**：Chrome 155 headless 最小窗宽 500px，`--window-size=390` 触发不了 ≤480 的全屏样式。要截手机全屏态，用 Playwright 自带的 `chrome-headless-shell`（`~/Library/Caches/ms-playwright/chromium_headless_shell-*/…`），或在浏览器开发者工具里用设备模拟。

第一条 grep 应该没有输出（瓶号「#K-0231」不会被匹配）。截图后自己看一眼：字体是否加载（标题是明朝、数字是窄体）、有没有溢出、三联金额是否一眼可见。

---

## 12. 品牌图标位（2026-10-15 追加）

- 客户品牌 ALMA TOKYO 的角色图标在 `shared/brand/`（副本；唯一来源 `~/WorkDev/logo/design/alma-tokyo/`）。用 `<img class="k-brandmark ...">`，尺寸修饰 `--sm 28 / 默认 32 / --lg 56 / --xl 96`。
- 夜主题顶栏用 `icon-circle-dark-markonly.svg`；紙主题与「这是 APP」的展示位用 `icon-circle-light-markonly.svg`；只有总入口用含字样的 `icon-circle-light.svg`（96px 才读得出字）。
- 禁止：改紫色、加投影或渐变、描边、把角色拉伸（手册 p12）；不要把主标识山形缩到 30px 以下（p8 数字端最小 30px）。