diff --git a/.claude/memory/MEMORY.md b/.claude/memory/MEMORY.md
index 7f6eb62..bc896f7 100644
--- a/.claude/memory/MEMORY.md
+++ b/.claude/memory/MEMORY.md
@@ -1,4 +1,4 @@
-_Last synced: 2026-08-10 | Base commit: `deb4752`_
+_Last synced: 2026-08-10 | Base commit: `32bd018`_
 
 # 记忆索引
 | 文件 | 描述 | 类型 | 最后更新 |
diff --git a/.claude/memory/decisions.md b/.claude/memory/decisions.md
index be2fbbc..fe6dfec 100644
--- a/.claude/memory/decisions.md
+++ b/.claude/memory/decisions.md
@@ -150,3 +150,28 @@ body {
 
 - **日期**：2026-08-10
 - **首次落地**：commit deb4752
+
+## 待机页副屏人脸识别监控区(收银员侧实时反馈)
+
+**结论**：收银员屏待机页(`02-standby.html`)左下区域由原「开始结算」按钮改为「副屏人脸识别监控区」,展示副屏识别状态(三态:成功/光线不足/位置不对)+ 模拟副屏画面(人形剪影 + 检测框 + LIVE 实时指示)。结算流程入口由副屏识别事件自动驱动,不再由收银员手动点击触发。
+
+**Why**：
+- 原「开始结算」按钮与"副屏识别→自动加载订单"的实际业务路径重复,容易让收银员误以为需要主动触发结算
+- 副屏识别成功率受光线/站位影响,但收银员屏此前没有对应的实时反馈区,无法主动提示顾客"请正对摄像头""请补光"等引导
+- 收银员是识别失败的最终处理人(决定何时提示顾客调整),必须在收银员屏有显式的状态可视化
+
+**How to apply**：
+- 三态统一用 `face-monitor--{success|warning|info}` 修饰符 + `border-color` + `box-shadow` 联动
+  - `success` 识别成功:绿框 + ✅ 徽标 + 脱敏用户名(如"张*明")+ 会员等级/工号
+  - `warning` 光线不足:黄框 + 💡 徽标 + "环境亮度低于识别阈值,请补光" + `faceWarnBlink` 闪烁动画
+  - `info` 位置不对:蓝框 + 🎯 徽标 + "请顾客正对摄像头并保持 50-80cm 距离" + 扫描线动画(`scanMove` 2.2s 循环)
+- 模拟副屏画面固定 200×140px 黑色摄像头视角块:用 `radial-gradient` 实现人形剪影 + `border-dashed` + 四角 `.face-preview__corner` 强调检测框
+- 原型演示用 4 秒轮播;**后端真实场景下应替换为副屏识别事件驱动**(状态变化由 WebSocket/SDK 推送,而非定时器)
+- 时钟区相应精简:年月日已由右上角 `topMeta` 承担,左下时钟区只显示「时分秒 + 餐次标签」,餐次按当前小时自动切换(早餐 6-10 / 午餐 10-14 / 晚餐 16-21 / 其他时段"欢迎光临")
+- 底部入口区原「🖨️ 小票打印」改为「🍽️ 用餐管理」(功能待开发,占位 `javascript:void(0)`)
+
+**See Also**：
+- [[project_progress.md]] — 2026-08-10 第二批次里程碑条目记录待机页重构范围
+
+- **日期**：2026-08-10
+- **首次落地**：commit 32bd018
diff --git a/.claude/memory/lint_report.md b/.claude/memory/lint_report.md
index e21ebdf..d433432 100644
--- a/.claude/memory/lint_report.md
+++ b/.claude/memory/lint_report.md
@@ -7,7 +7,7 @@ last_updated: 2026-08-10
 
 # 记忆健康检查报告
 
-> _执行时间: 2026-08-10 | Base commit: `deb4752` | Last synced: 2026-08-10_
+> _执行时间: 2026-08-10 | Base commit: `32bd018` | Last synced: 2026-08-10_
 
 ## 健康概览
 
@@ -16,19 +16,21 @@ last_updated: 2026-08-10
 | 孤儿检测 | ✅ | 0 | — |
 | 幽灵检测 | ✅ | 0 | — |
 | 引用存在性检测（3A） | ✅ | 0 | 0 |
-| 双链对称性检测（3B） | ✅ | 1 | 0 |
+| 双链对称性检测（3B） | ✅ | 0 | 0 |
 | 内容矛盾检测 | ✅ | — | 0 |
 | 过期检测 | ⚠ | — | 3 待处理 |
 | 可推断内容污染 | ⚠ | — | 1 待处理 |
 | frontmatter 完整性 | ⚠ | — | 4 待处理 |
 
-**AUTO-FIX 已执行 1 项 | NEED-HUMAN 待处理 8 项**
+**AUTO-FIX 已执行 0 项 | NEED-HUMAN 待处理 8 项**
+
+> 本次为 2026-08-10 第二批次 sync 后的复查。新增 1 条决策（待机页副屏人脸识别监控区）+ 1 条里程碑条目，交叉引用闭环验证通过，无 AUTO-FIX 需执行；前期遗留的 8 项 NEED-HUMAN 维持原判定（结构性稳定内容/历史污染/统一性可选）。
 
 ---
 
 ## AUTO-FIX 已执行清单
 
-- [x] 双链对称性补全：`project_progress.md` 2026-08-10 里程碑条目末尾追加反向引用 `[[decisions.md#收银设备用户类型徽标三态体系]]` 与 `[[decisions.md#补齐明细页业务路径修正：少记来源 = 未识别取餐记录]]`，闭环 decisions → progress 的两条新增决策引用
+_本次无 AUTO-FIX 执行项（所有结构性检查通过）。_
 
 ---
 
@@ -54,7 +56,7 @@ last_updated: 2026-08-10
 
 - **文件**：`project_progress.md` 第 109~168 行「近期里程碑」区段（历史条目）
 - **问题**：历史里程碑条目仍含大量具体文件路径（如 `din-ingredient.html`、`prod-clean-order`、`canteen-nutrition-scale/02-dish-display.html`）与 commit hash（`445d824`、`d00208a`、`4fd44f1` 等），按 memory-update 规则「Git 历史（可用 git log 查）」不应写入记忆文件
-- **本次执行**：新增的 2026-08-10、2026-08-07 两条里程碑仍保留文件名（属变更范围说明，便于跨模块追溯，未全量罗列），历史 110~168 行污染条目未清理
+- **本次执行**：新增的 2026-08-10 两条里程碑仍保留文件名（属变更范围说明，便于跨模块追溯，未全量罗列），历史 110~168 行污染条目未清理
 - **建议**：人工审查 110~168 行历史里程碑，保留结论性描述、删除具体文件路径与 commit hash，让用户能通过 `git log --since=2026-07` 自查细节
 
 ### [WARN] frontmatter 缺失 — 4 个文件
@@ -74,5 +76,6 @@ last_updated: 2026-08-10
 - `decisions.md#餐厅终端设备 PAD 居中外壳设计模式` → `[[feedback.md#PAD 终端页面内禁止可见滚动条]]` ✅ 目标存在，双向闭环
 - `feedback.md#PAD 终端页面内禁止可见滚动条` → `[[decisions.md#餐厅终端设备 PAD 居中外壳设计模式]]` ✅ 目标存在，双向闭环
 - `decisions.md#规格体系统一化改造（跨设备端 + Web 端 + 辅助页）` → `[[feedback.md]]` ✅ 目标存在（占位引用「暂无直接关联条目」，非对称但属预期）
-- `decisions.md#收银设备用户类型徽标三态体系` → `[[project_progress.md]]` ✅ 目标存在，本次 AUTO-FIX 后双向闭环
-- `decisions.md#补齐明细页业务路径修正：少记来源 = 未识别取餐记录` → `[[project_progress.md]]` ✅ 目标存在，本次 AUTO-FIX 后双向闭环
+- `decisions.md#收银设备用户类型徽标三态体系` → `[[project_progress.md]]` ✅ 目标存在，双向闭环（前次 AUTO-FIX 完成）
+- `decisions.md#补齐明细页业务路径修正：少记来源 = 未识别取餐记录` → `[[project_progress.md]]` ✅ 目标存在，双向闭环（前次 AUTO-FIX 完成）
+- `decisions.md#待机页副屏人脸识别监控区(收银员侧实时反馈)` → `[[project_progress.md]]` ✅ 目标存在，双向闭环（本次 memory-update 同步建立）
diff --git a/.claude/memory/project_progress.md b/.claude/memory/project_progress.md
index ea53617..b67d587 100644
--- a/.claude/memory/project_progress.md
+++ b/.claude/memory/project_progress.md
@@ -3,7 +3,7 @@ name: 项目进度
 description: 各模块原型开发进度与里程碑
 type: project
 last_updated: 2026-08-10
-commit: deb4752
+commit: 32bd018
 ---
 
 # 项目进度
@@ -106,6 +106,7 @@ Web 管理端和员工端 APP 的其余模块（系统管理、运动管理、
 - 覆盖模块：18 个（含三端+其他终端）
 
 ## 近期里程碑
+- 2026-08-10：结算设备待机页新增副屏人脸识别监控区 + 多页面冗余元素精简（commit 32bd018）——①`02-standby.html` 左下「开始结算」按钮区改为「副屏人脸识别监控区」三态轮播演示（成功/光线不足/位置不对），含模拟副屏画面(人形剪影+检测框+LIVE 指示)与时钟精简、底部「小票打印」入口改名为「用餐管理」(功能待开发占位)；②`03-checkout.html` 删除顶栏「本单应付」、余额信息卡「会员等级」、清空按钮及相关 CSS/JS；③`07-statistics.html` KPI 对比文案统一为「较昨日午餐」、支付方式柱状图标签语义化(余额支付/现金支付/餐券抵扣)；④`08-reconcile.html` 删除差额汇总「企业补贴优惠」行；⑤`user-02-checkout-sync.html` 删除热量环「略少 76%」提示；⑥`user-04-success.html` 删除二维码「今日已有 1,284 人查看」营销文案。（相关决策：[[decisions.md#待机页副屏人脸识别监控区(收银员侧实时反馈)]]）
 - 2026-08-10：收银设备新增用户类型徽标体系 + 补齐明细页重构（commit deb4752）——①主屏(03/04/05/06/07)与副屏(user-02/03/04)统一用户类型徽标三态配色（会员=蓝金渐变金边 / 临时=灰底 / 内部员工=蓝底），订单列表(05)新增「用户类型」列、订单详情(06)新增独立顾客信息卡片并清理语义陈旧的"顾客类型=企业员工"项；②订单详情(06)移除「补齐明细」操作入口（支付后改走退款流程，避免操作歧义）；③补齐明细页(08)重构：左侧订单由卡片堆叠改为表格化(对齐 03-checkout)，「添加商品」Tab 重构为「补齐未识别」从未匹配取餐记录直接加入（业务路径修正：少记来源=未识别记录而非菜品库）；④导航页"结算设备"改名为"结算台"。（相关决策：[[decisions.md#收银设备用户类型徽标三态体系]]、[[decisions.md#补齐明细页业务路径修正：少记来源 = 未识别取餐记录]]）
 - 2026-08-07：体重管理 Web 端新增人员测量记录页 + 多页面同步调整（commit fdeb8a2）——新增 `personnel-measure-record.html`（人员测量记录）；原 `history-personnel-list.html` 重命名为 `personnel-overview-record.html`（人员概览记录）；过程管理多页面（行动记录/总览/总览详情/活动统计）字段与交互调整；档案/设备/异常等多页同步微调。
 - 2026-08-06：结算设备全流程原型补齐 + 餐线营养秤双屏取餐合并（commit 51661ab）——结算设备新增收银员屏与用户屏两组共 13 个页面，覆盖登录→待机→收银→支付→订单/详情/统计/对账/小票 完整业务闭环与对应的用户侧待机/同步/支付/成功状态；导航页重构为左右双屏(用户屏/收银员屏)布局。餐线营养秤将原双屏大屏页与双屏小屏页合并为单页双屏布局(同页左右两区)。营养秤 5 个二级页统一返回按钮 history.back() 兜底逻辑、菜品展示与单屏取餐页样式微调。
diff --git a/CLAUDE.md b/CLAUDE.md
index 2536059..10343be 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,4 +1,4 @@
-<!-- Last updated: 2026-08-10 | Commit: deb4752 -->
+<!-- Last updated: 2026-08-10 | Commit: 32bd018 -->
 # 项目约束
 
 本项目所有工作必须严格遵守 `项目背景.md` 中定义的全部规范，包括：
diff --git a/other-module/canteen-device/checkout-device/02-standby.html b/other-module/canteen-device/checkout-device/02-standby.html
index 83e4667..2b274a1 100644
--- a/other-module/canteen-device/checkout-device/02-standby.html
+++ b/other-module/canteen-device/checkout-device/02-standby.html
@@ -585,11 +585,11 @@
             <div class="entry-card__desc">今日数据可视化</div>
           </div>
         </a>
-        <a class="entry-card" href="javascript:void(0)" onclick="alert('用餐管理功能待开发')">
+        <a class="entry-card" href="10-meal-center.html">
           <div class="entry-card__icon entry-card__icon--gold">&#x1F37D;&#xFE0F;</div>
           <div class="entry-card__text">
-            <div class="entry-card__title">用餐管理</div>
-            <div class="entry-card__desc">用餐记录/餐次管理</div>
+            <div class="entry-card__title">餐次管理</div>
+            <div class="entry-card__desc">开餐/结束用餐/历史记录</div>
           </div>
         </a>
         <a class="entry-card" href="javascript:void(0)" onclick="alert('设置功能待开发')">
diff --git a/other-module/canteen-device/checkout-device/10-meal-center.html b/other-module/canteen-device/checkout-device/10-meal-center.html
new file mode 100644
index 0000000..efee42b
--- /dev/null
+++ b/other-module/canteen-device/checkout-device/10-meal-center.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1280, initial-scale=1.0">
+  <title>结算设备 - 餐次管理 | 蚁熊智能餐养平台</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
+      background: #05080f;
+      color: #fff;
+      min-height: 100vh;
+      min-width: 1280px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .device-frame {
+      width: 1280px;
+      height: 720px;
+      background: #0e1326;
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* 顶部导航 */
+    .top-bar {
+      display: flex;
+      align-items: center;
+      height: 44px;
+      background: #1a2b4a;
+      padding: 0 20px;
+      flex-shrink: 0;
+    }
+    .back-btn {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+    .back-btn:hover { color: #fff; }
+    .top-bar__title {
+      flex: 1;
+      text-align: center;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .top-bar__meta {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* 主内容区 */
+    .main-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 28px 56px;
+      overflow: hidden;
+    }
+
+    /* 顶部餐次状态摘要 */
+    .meal-summary {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 14px 20px;
+      background: rgba(26, 43, 74, 0.5);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 12px;
+      margin-bottom: 24px;
+    }
+    .meal-summary__icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: rgba(74, 144, 217, 0.18);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+    .meal-summary__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+    .meal-summary__title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #fff;
+    }
+    .meal-summary__sub {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.55);
+    }
+    .meal-summary__time {
+      font-size: 22px;
+      font-weight: 600;
+      font-family: Menlo, Consolas, monospace;
+      color: #4ade80;
+      letter-spacing: 1px;
+    }
+
+    /* 导航卡片容器 */
+    .nav-cards {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 28px;
+      min-height: 0;
+    }
+
+    /* 导航卡片 */
+    .nav-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 260px;
+      padding: 32px 24px 24px;
+      border-radius: 16px;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.25s;
+      border: 1px solid;
+      text-align: center;
+    }
+    .nav-card:hover {
+      transform: translateY(-3px);
+    }
+
+    /* 开餐开关卡(绿色主调) */
+    .nav-card--active {
+      background: linear-gradient(180deg, rgba(74, 222, 128, 0.12) 0%, rgba(26, 43, 74, 0.4) 100%);
+      border-color: rgba(74, 222, 128, 0.35);
+    }
+    .nav-card--active:hover {
+      background: linear-gradient(180deg, rgba(74, 222, 128, 0.2) 0%, rgba(26, 43, 74, 0.55) 100%);
+      border-color: rgba(74, 222, 128, 0.55);
+      box-shadow: 0 8px 24px rgba(74, 222, 128, 0.15);
+    }
+
+    /* 历史记录卡(蓝色主调) */
+    .nav-card--history {
+      background: linear-gradient(180deg, rgba(74, 144, 217, 0.12) 0%, rgba(26, 43, 74, 0.4) 100%);
+      border-color: rgba(74, 144, 217, 0.35);
+    }
+    .nav-card--history:hover {
+      background: linear-gradient(180deg, rgba(74, 144, 217, 0.2) 0%, rgba(26, 43, 74, 0.55) 100%);
+      border-color: rgba(74, 144, 217, 0.55);
+      box-shadow: 0 8px 24px rgba(74, 144, 217, 0.15);
+    }
+
+    .nav-card__icon {
+      width: 56px;
+      height: 56px;
+      border-radius: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      margin-bottom: 16px;
+    }
+    .nav-card--active .nav-card__icon {
+      background: rgba(74, 222, 128, 0.2);
+    }
+    .nav-card--history .nav-card__icon {
+      background: rgba(74, 144, 217, 0.2);
+    }
+
+    .nav-card__title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 6px;
+    }
+    .nav-card__desc {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.55);
+      line-height: 1.6;
+      margin-bottom: 16px;
+    }
+
+    /* 状态标签 */
+    .nav-card__pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 12px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+    }
+    .nav-card__pill--live {
+      background: rgba(74, 222, 128, 0.18);
+      color: #4ade80;
+      border: 1px solid rgba(74, 222, 128, 0.35);
+    }
+    .nav-card__pill--count {
+      background: rgba(74, 144, 217, 0.18);
+      color: #60a5fa;
+      border: 1px solid rgba(74, 144, 217, 0.35);
+    }
+    .nav-card__pill .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      animation: dotBlink 1.4s infinite;
+    }
+    @keyframes dotBlink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+
+    /* Toast 提示条 */
+    .toast {
+      position: absolute;
+      top: 60px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-20px);
+      padding: 10px 22px;
+      background: rgba(74, 222, 128, 0.95);
+      color: #0e1326;
+      border-radius: 22px;
+      font-size: 13px;
+      font-weight: 600;
+      box-shadow: 0 8px 24px rgba(74, 222, 128, 0.3);
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s;
+      z-index: 100;
+    }
+    .toast--show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  </style>
+</head>
+<body>
+
+  <div class="device-frame">
+
+    <!-- 顶部导航 -->
+    <div class="top-bar">
+      <a class="back-btn" href="02-standby.html">&#x25C0; 返回待机</a>
+      <span class="top-bar__title">餐次管理</span>
+      <span class="top-bar__meta" id="topMeta">2026-08-10 周一</span>
+    </div>
+
+    <!-- Toast 提示 -->
+    <div class="toast" id="toast">余量处置已提交 ✓</div>
+
+    <!-- 主内容 -->
+    <div class="main-area">
+
+      <!-- 当前餐次状态摘要 -->
+      <div class="meal-summary">
+        <div class="meal-summary__icon">&#x1F96A;</div>
+        <div class="meal-summary__body">
+          <div class="meal-summary__title">当前餐次 · 午餐</div>
+          <div class="meal-summary__sub">数味餐厅 · 一楼 | 共 3 条餐线 · 28 道菜</div>
+        </div>
+        <div class="meal-summary__time" id="liveClock">12:30:45</div>
+      </div>
+
+      <!-- 导航卡片区 -->
+      <div class="nav-cards">
+
+        <!-- 餐次开关 -->
+        <a class="nav-card nav-card--active" href="11-meal-active.html?meal=lunch">
+          <div class="nav-card__icon">&#x1F50A;</div>
+          <div class="nav-card__title">餐次开关</div>
+          <div class="nav-card__desc">查看开餐信息 · 餐品余量<br>通知补餐 · 结束用餐</div>
+          <span class="nav-card__pill nav-card__pill--live">
+            <span class="dot"></span> 开餐中
+          </span>
+        </a>
+
+        <!-- 历史记录 -->
+        <a class="nav-card nav-card--history" href="13-meal-history.html">
+          <div class="nav-card__icon">&#x1F4DC;</div>
+          <div class="nav-card__title">历史记录</div>
+          <div class="nav-card__desc">查看餐次开餐/补餐<br>闭餐/余量处置流程 · 点击查看明细</div>
+          <span class="nav-card__pill nav-card__pill--count">今日 2 餐次</span>
+        </a>
+
+      </div>
+
+    </div>
+
+  </div>
+
+  <script>
+    /* ============ 实时时钟(只显示时分秒) ============ */
+    function updateClock() {
+      var now = new Date();
+      var hh = String(now.getHours()).padStart(2, '0');
+      var mm = String(now.getMinutes()).padStart(2, '0');
+      var ss = String(now.getSeconds()).padStart(2, '0');
+      document.getElementById('liveClock').textContent = hh + ':' + mm + ':' + ss;
+
+      /* 右上角元信息:年月日 + 周几 */
+      var year = now.getFullYear();
+      var month = String(now.getMonth() + 1).padStart(2, '0');
+      var date = String(now.getDate()).padStart(2, '0');
+      var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()];
+      document.getElementById('topMeta').textContent = year + '-' + month + '-' + date + ' ' + weekDay;
+    }
+    updateClock();
+    setInterval(updateClock, 1000);
+
+    /* ============ URL 参数驱动的 Toast 提示 ============
+       场景:从 12-meal-end-surplus.html 提交余量处置后跳回本页时
+       携带 ?toast=submitted 参数,本页解析后显示"余量处置已提交"提示
+    */
+    (function () {
+      var params = new URLSearchParams(window.location.search);
+      var toastKey = params.get('toast');
+      if (toastKey === 'submitted') {
+        var toast = document.getElementById('toast');
+        setTimeout(function () {
+          toast.classList.add('toast--show');
+          setTimeout(function () {
+            toast.classList.remove('toast--show');
+          }, 2400);
+        }, 400);
+      }
+      /* 清除 URL 中的 toast 参数,避免刷新重复触发 */
+      if (toastKey) {
+        history.replaceState(null, '', window.location.pathname);
+      }
+    })();
+  </script>
+
+</body>
+</html>
diff --git a/other-module/canteen-device/checkout-device/11-meal-active.html b/other-module/canteen-device/checkout-device/11-meal-active.html
new file mode 100644
index 0000000..31b776c
--- /dev/null
+++ b/other-module/canteen-device/checkout-device/11-meal-active.html
@@ -0,0 +1,714 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1280, initial-scale=1.0">
+  <title>结算设备 - 开餐中详情 | 蚁熊智能餐养平台</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
+      background: #05080f;
+      color: #fff;
+      min-height: 100vh;
+      min-width: 1280px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .device-frame {
+      width: 1280px;
+      height: 720px;
+      background: #0e1326;
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* 顶部导航 */
+    .top-bar {
+      display: flex;
+      align-items: center;
+      height: 44px;
+      background: #1a2b4a;
+      padding: 0 20px;
+      flex-shrink: 0;
+    }
+    .back-btn {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+    .back-btn:hover { color: #fff; }
+    .top-bar__title {
+      flex: 1;
+      text-align: center;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .top-bar__meta {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* 主内容区 */
+    .main-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 16px 28px 18px;
+      overflow: hidden;
+    }
+
+    /* 开餐信息条 */
+    .meal-info-bar {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding: 14px 18px;
+      background: linear-gradient(135deg, rgba(74, 222, 128, 0.12) 0%, rgba(26, 43, 74, 0.6) 100%);
+      border: 1px solid rgba(74, 222, 128, 0.3);
+      border-radius: 14px;
+      margin-bottom: 14px;
+    }
+    .meal-info-bar__icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background: rgba(74, 222, 128, 0.22);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22px;
+    }
+    .meal-info-bar__body {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      flex-wrap: wrap;
+    }
+    .meal-info-item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .meal-info-item__label {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .meal-info-item__value {
+      font-size: 13px;
+      color: #fff;
+      font-weight: 600;
+    }
+    .meal-info-item__value--green { color: #4ade80; }
+    .meal-info-item__value--gold { color: #fbbf24; }
+    .meal-info-divider {
+      width: 1px;
+      height: 28px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+    .meal-info-bar__live {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 14px;
+      background: rgba(74, 222, 128, 0.18);
+      border: 1px solid rgba(74, 222, 128, 0.4);
+      border-radius: 14px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #4ade80;
+    }
+    .meal-info-bar__live::before {
+      content: "";
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #4ade80;
+      animation: dotBlink 1.4s infinite;
+    }
+    @keyframes dotBlink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+
+    /* 餐线 Tab 切换 */
+    .line-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .line-tab {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      background: rgba(26, 43, 74, 0.5);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 18px;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .line-tab:hover {
+      background: rgba(74, 144, 217, 0.12);
+      color: #fff;
+    }
+    .line-tab.is-active {
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.35), rgba(74, 144, 217, 0.18));
+      border-color: rgba(74, 144, 217, 0.6);
+      color: #fff;
+      font-weight: 600;
+    }
+    .line-tab__count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 18px;
+      height: 16px;
+      padding: 0 5px;
+      background: rgba(255, 255, 255, 0.12);
+      border-radius: 8px;
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.7);
+    }
+    .line-tab.is-active .line-tab__count {
+      background: rgba(74, 144, 217, 0.45);
+      color: #fff;
+    }
+
+    /* 餐品列表区(可滚动但隐藏滚动条) */
+    .dish-list-wrap {
+      flex: 1;
+      overflow-y: auto;
+      scrollbar-width: none;
+      padding-right: 4px;
+      margin-right: -4px;
+    }
+    .dish-list-wrap::-webkit-scrollbar { display: none; }
+
+    .dish-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+    }
+
+    /* 餐品卡 */
+    .dish-card {
+      display: flex;
+      gap: 12px;
+      padding: 12px;
+      background: rgba(26, 43, 74, 0.5);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 12px;
+      transition: all 0.2s;
+    }
+    .dish-card:hover {
+      background: rgba(74, 144, 217, 0.08);
+      border-color: rgba(74, 144, 217, 0.3);
+    }
+    .dish-card__img {
+      width: 64px;
+      height: 64px;
+      border-radius: 10px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.15), rgba(26, 43, 74, 0.6));
+      border: 1px solid rgba(255, 255, 255, 0.06);
+    }
+    .dish-card__body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+    .dish-card__head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 6px;
+    }
+    .dish-card__name {
+      font-size: 13px;
+      font-weight: 600;
+      color: #fff;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .dish-card__tag {
+      font-size: 9px;
+      padding: 2px 6px;
+      border-radius: 6px;
+      background: rgba(74, 144, 217, 0.18);
+      color: #60a5fa;
+      flex-shrink: 0;
+    }
+    .dish-card__metrics {
+      display: flex;
+      gap: 10px;
+      margin-top: 2px;
+    }
+    .metric {
+      display: flex;
+      align-items: baseline;
+      gap: 2px;
+      font-size: 10px;
+    }
+    .metric__label {
+      color: rgba(255, 255, 255, 0.45);
+    }
+    .metric__value {
+      font-size: 12px;
+      font-weight: 700;
+      color: #fff;
+    }
+    .metric__value--red { color: #ef4444; }
+    .metric__value--green { color: #4ade80; }
+    .metric__value--gold { color: #fbbf24; }
+
+    /* 余量进度条(可视化余量比例) */
+    .stock-bar {
+      height: 4px;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 2px;
+      margin-top: 4px;
+      overflow: hidden;
+    }
+    .stock-bar__fill {
+      height: 100%;
+      border-radius: 2px;
+      transition: width 0.4s;
+    }
+    .stock-bar__fill--ok { background: linear-gradient(90deg, #4ade80, #22c55e); }
+    .stock-bar__fill--mid { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
+    .stock-bar__fill--low { background: linear-gradient(90deg, #ef4444, #dc2626); }
+
+    /* 操作按钮(通知补餐) */
+    .dish-card__action {
+      display: flex;
+      gap: 6px;
+      margin-top: 6px;
+    }
+    .dish-btn {
+      flex: 1;
+      padding: 5px 8px;
+      background: rgba(251, 191, 36, 0.15);
+      border: 1px solid rgba(251, 191, 36, 0.35);
+      border-radius: 6px;
+      color: #fbbf24;
+      font-size: 11px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+    }
+    .dish-btn:hover {
+      background: rgba(251, 191, 36, 0.28);
+      border-color: rgba(251, 191, 36, 0.55);
+    }
+    .dish-btn.is-done {
+      background: rgba(74, 222, 128, 0.18);
+      border-color: rgba(74, 222, 128, 0.4);
+      color: #4ade80;
+      cursor: default;
+    }
+
+    /* 底部固定操作区 */
+    .footer-actions {
+      display: flex;
+      gap: 14px;
+      padding-top: 14px;
+      margin-top: 14px;
+      border-top: 1px solid rgba(255, 255, 255, 0.06);
+    }
+    .footer-btn {
+      flex: 1;
+      height: 50px;
+      border-radius: 12px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      border: 1px solid;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: all 0.2s;
+      text-decoration: none;
+    }
+    .footer-btn--secondary {
+      background: rgba(255, 255, 255, 0.04);
+      border-color: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.75);
+    }
+    .footer-btn--secondary:hover {
+      background: rgba(255, 255, 255, 0.08);
+      color: #fff;
+    }
+    .footer-btn--danger {
+      background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
+      border-color: #ef4444;
+      color: #fff;
+      box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
+    }
+    .footer-btn--danger:hover {
+      background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
+      box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5);
+    }
+
+    /* 二次确认对话框 */
+    .modal-overlay {
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(5, 8, 15, 0.75);
+      backdrop-filter: blur(6px);
+      z-index: 50;
+      display: none;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal-overlay.is-show { display: flex; }
+    .modal {
+      width: 460px;
+      background: #1a2b4a;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 16px;
+      padding: 24px;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
+    }
+    .modal__title {
+      font-size: 17px;
+      font-weight: 700;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .modal__desc {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+      line-height: 1.6;
+      margin-bottom: 18px;
+    }
+    .modal__desc strong { color: #ef4444; }
+    .modal__actions {
+      display: flex;
+      gap: 10px;
+    }
+    .modal__btn {
+      flex: 1;
+      height: 38px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      border: 1px solid;
+      transition: all 0.2s;
+    }
+    .modal__btn--cancel {
+      background: rgba(255, 255, 255, 0.05);
+      border-color: rgba(255, 255, 255, 0.12);
+      color: rgba(255, 255, 255, 0.75);
+    }
+    .modal__btn--cancel:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+    .modal__btn--confirm {
+      background: linear-gradient(135deg, #ef4444, #f97316);
+      border-color: #ef4444;
+      color: #fff;
+    }
+
+    /* Toast */
+    .toast {
+      position: absolute;
+      top: 60px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-20px);
+      padding: 10px 22px;
+      background: rgba(251, 191, 36, 0.95);
+      color: #0e1326;
+      border-radius: 22px;
+      font-size: 13px;
+      font-weight: 600;
+      box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s;
+      z-index: 60;
+    }
+    .toast--show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  </style>
+</head>
+<body>
+
+  <div class="device-frame">
+
+    <!-- 顶部导航 -->
+    <div class="top-bar">
+      <a class="back-btn" href="10-meal-center.html">&#x25C0; 返回餐次管理</a>
+      <span class="top-bar__title">开餐中 · <span id="mealTitle">午餐</span></span>
+      <span class="top-bar__meta" id="topMeta">2026-08-10 周一</span>
+    </div>
+
+    <!-- Toast -->
+    <div class="toast" id="toast">已通知后厨补做宫保鸡丁 📢</div>
+
+    <!-- 主内容 -->
+    <div class="main-area">
+
+      <!-- 开餐信息条 -->
+      <div class="meal-info-bar">
+        <div class="meal-info-bar__icon">&#x1F50A;</div>
+        <div class="meal-info-bar__body">
+          <div class="meal-info-item">
+            <span class="meal-info-item__label">操作人</span>
+            <span class="meal-info-item__value">张三 · CS001</span>
+          </div>
+          <div class="meal-info-divider"></div>
+          <div class="meal-info-item">
+            <span class="meal-info-item__label">餐厅</span>
+            <span class="meal-info-item__value">数味餐厅 · 一楼</span>
+          </div>
+          <div class="meal-info-divider"></div>
+          <div class="meal-info-item">
+            <span class="meal-info-item__label">开餐时间</span>
+            <span class="meal-info-item__value">11:00:23</span>
+          </div>
+          <div class="meal-info-divider"></div>
+          <div class="meal-info-item">
+            <span class="meal-info-item__label">已开餐</span>
+            <span class="meal-info-item__value meal-info-item__value--green" id="elapsed">32 分</span>
+          </div>
+          <div class="meal-info-divider"></div>
+          <div class="meal-info-item">
+            <span class="meal-info-item__label">本餐次订单</span>
+            <span class="meal-info-item__value meal-info-item__value--gold">96 单</span>
+          </div>
+        </div>
+        <span class="meal-info-bar__live">开餐中</span>
+      </div>
+
+      <!-- 餐线 Tab -->
+      <div class="line-tabs" id="lineTabs">
+        <span class="line-tab is-active" data-line="A" onclick="switchLine(this)">A 区中餐线 <span class="line-tab__count">12</span></span>
+        <span class="line-tab" data-line="B" onclick="switchLine(this)">B 区中餐线 <span class="line-tab__count">9</span></span>
+        <span class="line-tab" data-line="C" onclick="switchLine(this)">C 区快餐线 <span class="line-tab__count">7</span></span>
+      </div>
+
+      <!-- 餐品列表 -->
+      <div class="dish-list-wrap">
+        <div class="dish-grid" id="dishGrid">
+          <!-- JS 动态渲染 -->
+        </div>
+      </div>
+
+      <!-- 底部固定操作 -->
+      <div class="footer-actions">
+        <a class="footer-btn footer-btn--secondary" href="10-meal-center.html">&#x25C0; 返回</a>
+        <button class="footer-btn footer-btn--danger" onclick="showEndModal()">
+          &#x26D4; 结束用餐
+        </button>
+      </div>
+
+    </div>
+
+    <!-- 二次确认对话框 -->
+    <div class="modal-overlay" id="endModal">
+      <div class="modal">
+        <div class="modal__title">&#x26D4; 确认结束用餐?</div>
+        <div class="modal__desc">
+          结束后顾客将<strong>无法继续取餐结算</strong>,本餐次进入收尾流程。<br>
+          系统将引导你完成各餐线餐品的<strong>余量处置</strong>(员工福利/捐赠/废弃/加工再利用)。
+        </div>
+        <div class="modal__actions">
+          <button class="modal__btn modal__btn--cancel" onclick="hideEndModal()">取消</button>
+          <a class="modal__btn modal__btn--confirm" href="12-meal-end-surplus.html?meal=lunch" style="text-decoration:none;display:inline-flex;align-items:center;justify-content:center;">确认结束 · 去处置余量</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <script>
+    /* ============ 餐品 Mock 数据(按餐线分组) ============
+       每个餐线维护 7-12 道菜,字段:
+         name     菜名
+         emoji    菜图片占位 emoji
+         pricePer 100g 单价(元)
+         planned  计划制作(kg)
+         sold     已售(kg)
+         line     所属餐线
+         type     类别(stall 档口 / line 餐线)
+    */
+    var DISHES = {
+      A: [
+        { name: '宫保鸡丁', emoji: '🍗', pricePer: 3.5, planned: 8.5, sold: 7.8, type: 'line' },
+        { name: '番茄炒蛋', emoji: '🍳', pricePer: 2.8, planned: 6.2, sold: 5.9, type: 'line' },
+        { name: '白米饭',   emoji: '🍚', pricePer: 1.2, planned: 15.0, sold: 12.0, type: 'line' },
+        { name: '红烧肉',   emoji: '🥩', pricePer: 5.8, planned: 7.0, sold: 6.5, type: 'line' },
+        { name: '清炒西兰花', emoji: '🥦', pricePer: 2.5, planned: 4.5, sold: 3.8, type: 'line' },
+        { name: '麻婆豆腐', emoji: '🥘', pricePer: 3.2, planned: 5.5, sold: 4.5, type: 'line' },
+        { name: '糖醋里脊', emoji: '🍤', pricePer: 4.8, planned: 6.0, sold: 5.5, type: 'line' },
+        { name: '紫菜蛋花汤', emoji: '🍲', pricePer: 1.5, planned: 8.0, sold: 6.0, type: 'line' },
+        { name: '凉拌黄瓜', emoji: '🥒', pricePer: 1.8, planned: 3.5, sold: 2.5, type: 'line' },
+        { name: '土豆丝',   emoji: '🥔', pricePer: 2.0, planned: 5.0, sold: 4.5, type: 'line' },
+        { name: '鱼香肉丝', emoji: '🍖', pricePer: 4.2, planned: 5.8, sold: 4.0, type: 'line' },
+        { name: '蒸南瓜',   emoji: '🎃', pricePer: 2.2, planned: 3.0, sold: 1.0, type: 'line' }
+      ],
+      B: [
+        { name: '蒜蓉菠菜', emoji: '🥬', pricePer: 2.6, planned: 4.8, sold: 3.5, type: 'line' },
+        { name: '黄焖鸡',   emoji: '🍗', pricePer: 5.5, planned: 7.2, sold: 6.8, type: 'line' },
+        { name: '酸菜鱼',   emoji: '🐟', pricePer: 6.8, planned: 8.0, sold: 7.0, type: 'line' },
+        { name: '回锅肉',   emoji: '🥩', pricePer: 5.2, planned: 5.5, sold: 4.0, type: 'line' },
+        { name: '蛋炒饭',   emoji: '🍚', pricePer: 2.5, planned: 6.0, sold: 5.5, type: 'line' },
+        { name: '干煸豆角', emoji: '🫘', pricePer: 2.8, planned: 4.0, sold: 3.0, type: 'line' },
+        { name: '银耳莲子汤', emoji: '🥣', pricePer: 1.8, planned: 5.0, sold: 3.0, type: 'line' },
+        { name: '水煮肉片', emoji: '🌶️', pricePer: 5.8, planned: 6.5, sold: 5.8, type: 'line' },
+        { name: '蒜蓉生菜', emoji: '🥗', pricePer: 2.2, planned: 3.8, sold: 3.0, type: 'line' }
+      ],
+      C: [
+        { name: '牛肉面',   emoji: '🍜', pricePer: 8.5, planned: 5.0, sold: 4.5, type: 'stall' },
+        { name: '炸酱面',   emoji: '🍝', pricePer: 6.5, planned: 4.5, sold: 4.0, type: 'stall' },
+        { name: '馄饨',     emoji: '🥟', pricePer: 5.5, planned: 4.0, sold: 3.5, type: 'stall' },
+        { name: '扬州炒饭', emoji: '🍚', pricePer: 6.8, planned: 5.5, sold: 5.0, type: 'stall' },
+        { name: '盖浇饭',   emoji: '🍱', pricePer: 8.0, planned: 6.0, sold: 5.5, type: 'stall' },
+        { name: '酸辣粉',   emoji: '🌶️', pricePer: 5.0, planned: 4.0, sold: 3.5, type: 'stall' },
+        { name: '煎饺',     emoji: '🥟', pricePer: 4.5, planned: 3.5, sold: 2.0, type: 'stall' }
+      ]
+    };
+
+    /* ============ 渲染餐品卡 ============ */
+    function renderDishes(lineKey) {
+      var list = DISHES[lineKey] || [];
+      var html = '';
+      list.forEach(function (dish, idx) {
+        /* 余量计算 */
+        var surplus = +(dish.planned - dish.sold).toFixed(1);
+        var surplusRate = +(surplus / dish.planned * 100).toFixed(0);
+        var soldRate = +(dish.sold / dish.planned * 100).toFixed(0);
+
+        /* 余量状态判定 */
+        var stockCls = 'stock-bar__fill--ok';
+        var surplusValCls = 'metric__value--green';
+        if (surplusRate <= 10) {
+          stockCls = 'stock-bar__fill--low';
+          surplusValCls = 'metric__value--red';
+        } else if (surplusRate <= 25) {
+          stockCls = 'stock-bar__fill--mid';
+          surplusValCls = 'metric__value--gold';
+        }
+
+        /* 餐品类别徽标 */
+        var typeTag = dish.type === 'stall' ? '档口' : '餐线';
+
+        html += ''
+          + '<div class="dish-card">'
+          + '  <div class="dish-card__img">' + dish.emoji + '</div>'
+          + '  <div class="dish-card__body">'
+          + '    <div class="dish-card__head">'
+          + '      <span class="dish-card__name">' + dish.name + '</span>'
+          + '      <span class="dish-card__tag">' + typeTag + '</span>'
+          + '    </div>'
+          + '    <div class="dish-card__metrics">'
+          + '      <div class="metric"><span class="metric__label">余量</span>'
+          + '        <span class="metric__value ' + surplusValCls + '">' + surplus + 'kg</span></div>'
+          + '      <div class="metric"><span class="metric__label">已售</span>'
+          + '        <span class="metric__value metric__value--gold">' + dish.sold.toFixed(1) + 'kg</span></div>'
+          + '    </div>'
+          + '    <div class="stock-bar"><div class="stock-bar__fill ' + stockCls + '" style="width:' + (100 - soldRate) + '%;"></div></div>'
+          + '    <div class="dish-card__action">'
+          + '      <button class="dish-btn" data-name="' + dish.name + '" onclick="notifySupply(this)">'
+          + '        📢 通知补餐'
+          + '      </button>'
+          + '    </div>'
+          + '  </div>'
+          + '</div>';
+      });
+      document.getElementById('dishGrid').innerHTML = html;
+    }
+
+    /* ============ 餐线 Tab 切换 ============ */
+    function switchLine(el) {
+      var siblings = el.parentNode.querySelectorAll('.line-tab');
+      siblings.forEach(function (s) { s.classList.remove('is-active'); });
+      el.classList.add('is-active');
+      renderDishes(el.getAttribute('data-line'));
+    }
+
+    /* ============ 通知补餐 ============ */
+    function notifySupply(btn) {
+      if (btn.classList.contains('is-done')) return;
+      var name = btn.getAttribute('data-name');
+      btn.classList.add('is-done');
+      btn.innerHTML = '✓ 已通知';
+      showToast('已通知后厨补做 ' + name + ' 📢');
+    }
+
+    /* ============ Toast 提示 ============ */
+    var toastTimer = null;
+    function showToast(text) {
+      var toast = document.getElementById('toast');
+      toast.textContent = text;
+      toast.classList.add('toast--show');
+      if (toastTimer) clearTimeout(toastTimer);
+      toastTimer = setTimeout(function () {
+        toast.classList.remove('toast--show');
+      }, 2200);
+    }
+
+    /* ============ 二次确认对话框 ============ */
+    function showEndModal() {
+      document.getElementById('endModal').classList.add('is-show');
+    }
+    function hideEndModal() {
+      document.getElementById('endModal').classList.remove('is-show');
+    }
+
+    /* ============ 实时时钟 + 开餐时长 ============ */
+    function updateClock() {
+      var now = new Date();
+      var year = now.getFullYear();
+      var month = String(now.getMonth() + 1).padStart(2, '0');
+      var date = String(now.getDate()).padStart(2, '0');
+      var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()];
+      document.getElementById('topMeta').textContent = year + '-' + month + '-' + date + ' ' + weekDay;
+    }
+    updateClock();
+    setInterval(updateClock, 30000);
+
+    /* ============ URL 参数解析(餐次) ============ */
+    (function () {
+      var params = new URLSearchParams(window.location.search);
+      var meal = params.get('meal') || 'lunch';
+      var mealMap = { breakfast: '早餐', lunch: '午餐', dinner: '晚餐' };
+      document.getElementById('mealTitle').textContent = mealMap[meal] || '午餐';
+    })();
+
+    /* ============ 初始渲染:A 区餐线 ============ */
+    renderDishes('A');
+  </script>
+
+</body>
+</html>
diff --git a/other-module/canteen-device/checkout-device/12-meal-end-surplus.html b/other-module/canteen-device/checkout-device/12-meal-end-surplus.html
new file mode 100644
index 0000000..f139a9f
--- /dev/null
+++ b/other-module/canteen-device/checkout-device/12-meal-end-surplus.html
@@ -0,0 +1,876 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1280, initial-scale=1.0">
+  <title>结算设备 - 余量处置 | 蚁熊智能餐养平台</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
+      background: #05080f;
+      color: #fff;
+      min-height: 100vh;
+      min-width: 1280px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .device-frame {
+      width: 1280px;
+      height: 720px;
+      background: #0e1326;
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* 顶部导航 */
+    .top-bar {
+      display: flex;
+      align-items: center;
+      height: 44px;
+      background: #1a2b4a;
+      padding: 0 20px;
+      flex-shrink: 0;
+    }
+    .back-btn {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+    .back-btn:hover { color: #fff; }
+    .top-bar__title {
+      flex: 1;
+      text-align: center;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .top-bar__meta {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* 主内容区 */
+    .main-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 14px 24px 16px;
+      overflow: hidden;
+    }
+
+    /* 顶部信息条 */
+    .end-banner {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding: 12px 18px;
+      background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(26, 43, 74, 0.6) 100%);
+      border: 1px solid rgba(239, 68, 68, 0.35);
+      border-radius: 12px;
+      margin-bottom: 12px;
+    }
+    .end-banner__icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: rgba(239, 68, 68, 0.22);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+    .end-banner__body { flex: 1; }
+    .end-banner__title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #fff;
+      margin-bottom: 2px;
+    }
+    .end-banner__desc {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .end-banner__time {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 2px;
+    }
+    .end-banner__time-label {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .end-banner__time-value {
+      font-size: 13px;
+      color: #fbbf24;
+      font-weight: 600;
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* 工具栏(批量操作) */
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 14px;
+      background: rgba(26, 43, 74, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 10px;
+      margin-bottom: 12px;
+    }
+    .toolbar__select-all {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.8);
+      user-select: none;
+    }
+    .toolbar__select-all input { cursor: pointer; accent-color: #4a90d9; }
+    .toolbar__divider {
+      width: 1px;
+      height: 22px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+    .toolbar__label {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .toolbar__select {
+      height: 28px;
+      padding: 0 28px 0 10px;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 12px;
+      outline: none;
+      cursor: pointer;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      min-width: 130px;
+    }
+    .toolbar__select:focus { border-color: #4a90d9; }
+    .toolbar__btn {
+      height: 28px;
+      padding: 0 14px;
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.4), rgba(74, 144, 217, 0.25));
+      border: 1px solid rgba(74, 144, 217, 0.5);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .toolbar__btn:hover {
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.6), rgba(74, 144, 217, 0.4));
+    }
+    .toolbar__btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .toolbar__spacer { flex: 1; }
+    .toolbar__hint {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    /* 表格容器 */
+    .table-wrap {
+      flex: 1;
+      overflow-y: auto;
+      scrollbar-width: none;
+      background: rgba(26, 43, 74, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 12px;
+    }
+    .table-wrap::-webkit-scrollbar { display: none; }
+
+    .surplus-table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .surplus-table thead {
+      position: sticky;
+      top: 0;
+      background: #1a2b4a;
+      z-index: 2;
+    }
+    .surplus-table thead th {
+      padding: 10px 8px;
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.7);
+      font-weight: 600;
+      text-align: left;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      white-space: nowrap;
+    }
+    .surplus-table tbody td {
+      padding: 10px 8px;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.85);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      vertical-align: middle;
+    }
+    .surplus-table tbody tr:hover { background: rgba(74, 144, 217, 0.06); }
+    .surplus-table tbody tr:last-child td { border-bottom: none; }
+
+    /* 列宽 */
+    .col-ck { width: 36px; text-align: center; }
+    .col-name { width: 130px; }
+    .col-line { width: 80px; }
+    .col-num { width: 80px; text-align: right; }
+    .col-rate { width: 80px; text-align: right; }
+    .col-method { width: 130px; }
+    .col-amount { width: 90px; }
+    .col-note { width: auto; }
+
+    /* 复选框 */
+    .row-ck {
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+      accent-color: #4a90d9;
+      vertical-align: middle;
+    }
+
+    /* 餐线徽标 */
+    .line-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 8px;
+      font-size: 10px;
+      font-weight: 600;
+    }
+    .line-badge--A { background: rgba(74, 144, 217, 0.18); color: #60a5fa; }
+    .line-badge--B { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
+    .line-badge--C { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
+
+    /* 余量数字(红色) */
+    .num-surplus { color: #ef4444; font-weight: 700; }
+    .num-made { color: #fff; font-weight: 600; }
+    .num-sold { color: #4ade80; font-weight: 600; }
+    .num-rate { color: #fbbf24; font-weight: 600; }
+
+    /* 行内下拉(处置方式) */
+    .method-select {
+      width: 100%;
+      height: 26px;
+      padding: 0 22px 0 8px;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 11px;
+      outline: none;
+      cursor: pointer;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 6px center;
+    }
+    .method-select:focus { border-color: #4a90d9; }
+    .method-select.is-welfare { border-color: rgba(74, 144, 217, 0.5); color: #60a5fa; }
+    .method-select.is-donate { border-color: rgba(74, 222, 128, 0.5); color: #4ade80; }
+    .method-select.is-waste { border-color: rgba(239, 68, 68, 0.5); color: #ef4444; }
+    .method-select.is-reprocess { border-color: rgba(168, 85, 247, 0.5); color: #c084fc; }
+    .method-select.is-locker { border-color: rgba(251, 146, 60, 0.5); color: #fb923c; }
+
+    /* 处置量输入 */
+    .amount-input {
+      width: 70px;
+      height: 26px;
+      padding: 0 6px;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 6px;
+      color: #fbbf24;
+      font-size: 12px;
+      font-weight: 600;
+      outline: none;
+      text-align: right;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .amount-input:focus { border-color: #4a90d9; color: #fff; }
+
+    /* 备注输入 */
+    .note-input {
+      width: 100%;
+      height: 26px;
+      padding: 0 8px;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 11px;
+      outline: none;
+    }
+    .note-input:focus { border-color: #4a90d9; }
+    .note-input::placeholder { color: rgba(255, 255, 255, 0.3); }
+
+    /* 汇总栏 */
+    .summary-bar {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      padding: 12px 18px;
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.15), rgba(26, 43, 74, 0.6));
+      border: 1px solid rgba(74, 144, 217, 0.3);
+      border-radius: 10px;
+      margin-top: 12px;
+    }
+    .summary-item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .summary-item__label {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.55);
+    }
+    .summary-item__value {
+      font-size: 18px;
+      font-weight: 700;
+      color: #fff;
+    }
+    .summary-item__value--red { color: #ef4444; }
+    .summary-item__value--gold { color: #fbbf24; }
+    .summary-item__value--green { color: #4ade80; }
+    .summary-spacer { flex: 1; }
+
+    /* 底部固定操作区 */
+    .footer-actions {
+      display: flex;
+      gap: 14px;
+      padding-top: 12px;
+    }
+    .footer-btn {
+      flex: 1;
+      height: 46px;
+      border-radius: 12px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      border: 1px solid;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: all 0.2s;
+      text-decoration: none;
+    }
+    .footer-btn--secondary {
+      background: rgba(255, 255, 255, 0.04);
+      border-color: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.75);
+    }
+    .footer-btn--secondary:hover {
+      background: rgba(255, 255, 255, 0.08);
+      color: #fff;
+    }
+    .footer-btn--submit {
+      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+      border-color: #22c55e;
+      color: #fff;
+      box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
+    }
+    .footer-btn--submit:hover {
+      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
+      box-shadow: 0 8px 22px rgba(34, 197, 94, 0.5);
+    }
+
+    /* 二次确认对话框 */
+    .modal-overlay {
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(5, 8, 15, 0.75);
+      backdrop-filter: blur(6px);
+      z-index: 50;
+      display: none;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal-overlay.is-show { display: flex; }
+    .modal {
+      width: 480px;
+      background: #1a2b4a;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 16px;
+      padding: 24px;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
+    }
+    .modal__title {
+      font-size: 17px;
+      font-weight: 700;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .modal__summary {
+      padding: 12px 14px;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      margin-bottom: 18px;
+    }
+    .modal__summary-line {
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+      padding: 3px 0;
+    }
+    .modal__summary-label { color: rgba(255, 255, 255, 0.65); }
+    .modal__summary-value { color: #fff; font-weight: 600; }
+    .modal__actions {
+      display: flex;
+      gap: 10px;
+    }
+    .modal__btn {
+      flex: 1;
+      height: 38px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      border: 1px solid;
+      transition: all 0.2s;
+    }
+    .modal__btn--cancel {
+      background: rgba(255, 255, 255, 0.05);
+      border-color: rgba(255, 255, 255, 0.12);
+      color: rgba(255, 255, 255, 0.75);
+    }
+    .modal__btn--cancel:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+    .modal__btn--confirm {
+      background: linear-gradient(135deg, #22c55e, #16a34a);
+      border-color: #22c55e;
+      color: #fff;
+    }
+
+    /* Toast */
+    .toast {
+      position: absolute;
+      top: 60px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-20px);
+      padding: 10px 22px;
+      background: rgba(74, 222, 128, 0.95);
+      color: #0e1326;
+      border-radius: 22px;
+      font-size: 13px;
+      font-weight: 600;
+      box-shadow: 0 8px 24px rgba(74, 222, 128, 0.3);
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s;
+      z-index: 60;
+    }
+    .toast--show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  </style>
+</head>
+<body>
+
+  <div class="device-frame">
+
+    <!-- 顶部导航 -->
+    <div class="top-bar">
+      <a class="back-btn" href="11-meal-active.html?meal=lunch">&#x25C0; 返回开餐详情</a>
+      <span class="top-bar__title">余量处置 · <span id="mealTitle">午餐</span></span>
+      <span class="top-bar__meta" id="topMeta">2026-08-10 周一</span>
+    </div>
+
+    <!-- Toast -->
+    <div class="toast" id="toast">余量处置已提交 ✓</div>
+
+    <!-- 主内容 -->
+    <div class="main-area">
+
+      <!-- 顶部信息条 -->
+      <div class="end-banner">
+        <div class="end-banner__icon">&#x26D4;</div>
+        <div class="end-banner__body">
+          <div class="end-banner__title">午餐已结束 · 请处置各餐线餐品余量</div>
+          <div class="end-banner__desc">参考后台余量处置规则:每道菜需选择处置方式(员工福利/捐赠/废弃/加工再利用/存入智能货柜)</div>
+        </div>
+        <div class="end-banner__time">
+          <span class="end-banner__time-label">开餐 - 结束</span>
+          <span class="end-banner__time-value">11:00:23 - 14:02:15</span>
+        </div>
+      </div>
+
+      <!-- 工具栏 -->
+      <div class="toolbar">
+        <label class="toolbar__select-all">
+          <input type="checkbox" id="selectAll" onchange="toggleAll(this)">
+          全选
+        </label>
+        <div class="toolbar__divider"></div>
+        <span class="toolbar__label">批量处置方式:</span>
+        <select class="toolbar__select" id="batchMethod">
+          <option value="">请选择...</option>
+          <option value="welfare">员工福利</option>
+          <option value="donate">捐赠</option>
+          <option value="waste">废弃</option>
+          <option value="reprocess">加工再利用</option>
+          <option value="locker">存入智能货柜</option>
+        </select>
+        <button class="toolbar__btn" onclick="applyBatch()">应用到选中项</button>
+        <div class="toolbar__spacer"></div>
+        <span class="toolbar__hint" id="selectCount">已选 0 项</span>
+      </div>
+
+      <!-- 余量处置表格 -->
+      <div class="table-wrap">
+        <table class="surplus-table">
+          <colgroup>
+            <col class="col-ck">
+            <col class="col-name">
+            <col class="col-line">
+            <col class="col-num">
+            <col class="col-num">
+            <col class="col-num">
+            <col class="col-rate">
+            <col class="col-method">
+            <col class="col-amount">
+            <col class="col-note">
+          </colgroup>
+          <thead>
+            <tr>
+              <th class="col-ck"></th>
+              <th>餐品名称</th>
+              <th>餐线</th>
+              <th style="text-align:right;">实际制作(kg)</th>
+              <th style="text-align:right;">已售(kg)</th>
+              <th style="text-align:right;">余量(kg)</th>
+              <th style="text-align:right;">余量率</th>
+              <th>处置方式</th>
+              <th>处置量(kg)</th>
+              <th>备注</th>
+            </tr>
+          </thead>
+          <tbody id="surplusTbody">
+            <!-- JS 动态渲染 -->
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 汇总栏 -->
+      <div class="summary-bar">
+        <div class="summary-item">
+          <span class="summary-item__label">总余量</span>
+          <span class="summary-item__value summary-item__value--red" id="totalSurplus">0.0 kg</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-item__label">已处置</span>
+          <span class="summary-item__value summary-item__value--green" id="totalDisposed">0.0 kg</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-item__label">待处置</span>
+          <span class="summary-item__value summary-item__value--gold" id="totalPending">0.0 kg</span>
+        </div>
+        <div class="summary-spacer"></div>
+        <div class="summary-item">
+          <span class="summary-item__label">处置方式分布</span>
+          <span class="summary-item__value" style="font-size:13px;font-weight:500;" id="methodDist">—</span>
+        </div>
+      </div>
+
+      <!-- 底部操作 -->
+      <div class="footer-actions">
+        <a class="footer-btn footer-btn--secondary" href="11-meal-active.html?meal=lunch">&#x25C0; 放弃处置</a>
+        <button class="footer-btn footer-btn--submit" onclick="showSubmitModal()">
+          ✓ 提交余量处置
+        </button>
+      </div>
+
+    </div>
+
+    <!-- 提交确认对话框 -->
+    <div class="modal-overlay" id="submitModal">
+      <div class="modal">
+        <div class="modal__title">✓ 确认提交余量处置</div>
+        <div class="modal__summary" id="modalSummary">
+          <!-- JS 动态渲染 -->
+        </div>
+        <div class="modal__actions">
+          <button class="modal__btn modal__btn--cancel" onclick="hideSubmitModal()">取消</button>
+          <button class="modal__btn modal__btn--confirm" onclick="submitForm()">确认提交</button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <script>
+    /* ============ 余量处置 Mock 数据 ============
+       复用 prod-proc-surplus.html 后台的处置方式四选项
+       每条字段:
+         id      行 ID
+         name    餐品名
+         line    所属餐线
+         made    实际制作(kg)
+         sold    已售(kg)
+         emoji   图标
+    */
+    var SURPLUS_DATA = [
+      { id: 1,  name: '宫保鸡丁',   line: 'A', made: 8.5,  sold: 7.8,  emoji: '🍗' },
+      { id: 2,  name: '番茄炒蛋',   line: 'A', made: 6.2,  sold: 5.9,  emoji: '🍳' },
+      { id: 3,  name: '白米饭',     line: 'A', made: 15.0, sold: 12.0, emoji: '🍚' },
+      { id: 4,  name: '红烧肉',     line: 'A', made: 7.0,  sold: 6.5,  emoji: '🥩' },
+      { id: 5,  name: '清炒西兰花', line: 'A', made: 4.5,  sold: 3.8,  emoji: '🥦' },
+      { id: 6,  name: '麻婆豆腐',   line: 'A', made: 5.5,  sold: 4.5,  emoji: '🥘' },
+      { id: 7,  name: '糖醋里脊',   line: 'A', made: 6.0,  sold: 5.5,  emoji: '🍤' },
+      { id: 8,  name: '紫菜蛋花汤', line: 'A', made: 8.0,  sold: 6.0,  emoji: '🍲' },
+      { id: 9,  name: '蒜蓉菠菜',   line: 'B', made: 4.8,  sold: 3.5,  emoji: '🥬' },
+      { id: 10, name: '黄焖鸡',     line: 'B', made: 7.2,  sold: 6.8,  emoji: '🍗' },
+      { id: 11, name: '酸菜鱼',     line: 'B', made: 8.0,  sold: 7.0,  emoji: '🐟' },
+      { id: 12, name: '回锅肉',     line: 'B', made: 5.5,  sold: 4.0,  emoji: '🥩' },
+      { id: 13, name: '蛋炒饭',     line: 'B', made: 6.0,  sold: 5.5,  emoji: '🍚' },
+      { id: 14, name: '牛肉面',     line: 'C', made: 5.0,  sold: 4.5,  emoji: '🍜' },
+      { id: 15, name: '炸酱面',     line: 'C', made: 4.5,  sold: 4.0,  emoji: '🍝' },
+      { id: 16, name: '馄饨',       line: 'C', made: 4.0,  sold: 3.5,  emoji: '🥟' },
+      { id: 17, name: '扬州炒饭',   line: 'C', made: 5.5,  sold: 5.0,  emoji: '🍚' },
+      { id: 18, name: '盖浇饭',     line: 'C', made: 6.0,  sold: 5.5,  emoji: '🍱' },
+      { id: 19, name: '酸辣粉',     line: 'C', made: 4.0,  sold: 3.5,  emoji: '🌶️' },
+      { id: 20, name: '煎饺',       line: 'C', made: 3.5,  sold: 2.0,  emoji: '🥟' }
+    ];
+
+    /* 处置方式字典 */
+    var METHOD_MAP = {
+      'welfare':   { label: '员工福利',   cls: 'is-welfare' },
+      'donate':    { label: '捐赠',       cls: 'is-donate' },
+      'waste':     { label: '废弃',       cls: 'is-waste' },
+      'reprocess': { label: '加工再利用', cls: 'is-reprocess' },
+      'locker':    { label: '存入智能货柜', cls: 'is-locker' }
+    };
+
+    /* ============ 渲染表格 ============ */
+    function renderTable() {
+      var html = '';
+      SURPLUS_DATA.forEach(function (item) {
+        var surplus = +(item.made - item.sold).toFixed(1);
+        var rate = +(surplus / item.made * 100).toFixed(1);
+
+        html += ''
+          + '<tr data-id="' + item.id + '">'
+          + '  <td class="col-ck"><input type="checkbox" class="row-ck" onchange="updateSummary()" data-id="' + item.id + '"></td>'
+          + '  <td><span style="margin-right:4px;">' + item.emoji + '</span>' + item.name + '</td>'
+          + '  <td><span class="line-badge line-badge--' + item.line + '">' + item.line + ' 区</span></td>'
+          + '  <td style="text-align:right;" class="num-made">' + item.made.toFixed(1) + '</td>'
+          + '  <td style="text-align:right;" class="num-sold">' + item.sold.toFixed(1) + '</td>'
+          + '  <td style="text-align:right;" class="num-surplus">' + surplus.toFixed(1) + '</td>'
+          + '  <td style="text-align:right;" class="num-rate">' + rate + '%</td>'
+          + '  <td>'
+          + '    <select class="method-select" onchange="onMethodChange(this,' + item.id + ')" data-id="' + item.id + '">'
+          + '      <option value="">未处置</option>'
+          + '      <option value="welfare">员工福利</option>'
+          + '      <option value="donate">捐赠</option>'
+          + '      <option value="waste">废弃</option>'
+          + '      <option value="reprocess">加工再利用</option>'
+          + '      <option value="locker">存入智能货柜</option>'
+          + '    </select>'
+          + '  </td>'
+          + '  <td><input type="number" class="amount-input" step="0.1" min="0" max="' + surplus.toFixed(1) + '" value="' + surplus.toFixed(1) + '" data-id="' + item.id + '"></td>'
+          + '  <td><input type="text" class="note-input" placeholder="如:加班餐/捐赠予..." data-id="' + item.id + '"></td>'
+          + '</tr>';
+      });
+      document.getElementById('surplusTbody').innerHTML = html;
+      updateSummary();
+    }
+
+    /* ============ 全选/取消全选 ============ */
+    function toggleAll(masterCk) {
+      var cks = document.querySelectorAll('.row-ck');
+      cks.forEach(function (ck) { ck.checked = masterCk.checked; });
+      updateSummary();
+    }
+
+    /* ============ 处置方式变更联动样式 ============ */
+    function onMethodChange(sel, id) {
+      var cls = sel.value ? METHOD_MAP[sel.value].cls : '';
+      sel.className = 'method-select ' + cls;
+      updateSummary();
+    }
+
+    /* ============ 批量应用处置方式 ============ */
+    function applyBatch() {
+      var batchVal = document.getElementById('batchMethod').value;
+      if (!batchVal) {
+        showToast('请先选择批量处置方式', true);
+        return;
+      }
+      var checkedCks = document.querySelectorAll('.row-ck:checked');
+      if (checkedCks.length === 0) {
+        showToast('请先勾选要批量处置的餐品', true);
+        return;
+      }
+      checkedCks.forEach(function (ck) {
+        var id = ck.getAttribute('data-id');
+        var sel = document.querySelector('.method-select[data-id="' + id + '"]');
+        sel.value = batchVal;
+        sel.className = 'method-select ' + METHOD_MAP[batchVal].cls;
+      });
+      updateSummary();
+      showToast('已应用到 ' + checkedCks.length + ' 项 ✓');
+    }
+
+    /* ============ 更新汇总栏 ============ */
+    function updateSummary() {
+      var totalSurplus = 0;
+      var totalDisposed = 0;
+      var methodCount = { welfare: 0, donate: 0, waste: 0, reprocess: 0, locker: 0 };
+      var checkedCount = 0;
+
+      SURPLUS_DATA.forEach(function (item) {
+        var surplus = +(item.made - item.sold).toFixed(1);
+        totalSurplus += surplus;
+
+        var sel = document.querySelector('.method-select[data-id="' + item.id + '"]');
+        var amountInput = document.querySelector('.amount-input[data-id="' + item.id + '"]');
+        var ck = document.querySelector('.row-ck[data-id="' + item.id + '"]');
+
+        if (ck.checked) checkedCount++;
+
+        if (sel.value) {
+          var amount = parseFloat(amountInput.value) || 0;
+          totalDisposed += amount;
+          if (methodCount.hasOwnProperty(sel.value)) {
+            methodCount[sel.value] += amount;
+          }
+        }
+      });
+
+      totalSurplus = +totalSurplus.toFixed(1);
+      totalDisposed = +totalDisposed.toFixed(1);
+      var pending = +(totalSurplus - totalDisposed).toFixed(1);
+
+      document.getElementById('totalSurplus').textContent = totalSurplus.toFixed(1) + ' kg';
+      document.getElementById('totalDisposed').textContent = totalDisposed.toFixed(1) + ' kg';
+      document.getElementById('totalPending').textContent = pending.toFixed(1) + ' kg';
+      document.getElementById('selectCount').textContent = '已选 ' + checkedCount + ' 项';
+
+      /* 处置方式分布 */
+      var parts = [];
+      Object.keys(methodCount).forEach(function (k) {
+        if (methodCount[k] > 0) {
+          parts.push(METHOD_MAP[k].label + ' ' + methodCount[k].toFixed(1) + 'kg');
+        }
+      });
+      document.getElementById('methodDist').textContent = parts.length ? parts.join(' / ') : '—';
+    }
+
+    /* ============ 提交二次确认 ============ */
+    function showSubmitModal() {
+      var disposedCount = 0;
+      var totalDisposed = 0;
+      var methodCount = { welfare: 0, donate: 0, waste: 0, reprocess: 0, locker: 0 };
+
+      SURPLUS_DATA.forEach(function (item) {
+        var sel = document.querySelector('.method-select[data-id="' + item.id + '"]');
+        var amountInput = document.querySelector('.amount-input[data-id="' + item.id + '"]');
+        if (sel.value) {
+          disposedCount++;
+          var amount = parseFloat(amountInput.value) || 0;
+          totalDisposed += amount;
+          if (methodCount.hasOwnProperty(sel.value)) {
+            methodCount[sel.value] += amount;
+          }
+        }
+      });
+
+      if (disposedCount === 0) {
+        showToast('请至少为 1 道菜选择处置方式', true);
+        return;
+      }
+
+      var totalSurplus = SURPLUS_DATA.reduce(function (sum, item) {
+        return sum + (item.made - item.sold);
+      }, 0);
+      var pending = +(totalSurplus - totalDisposed).toFixed(1);
+
+      var html = ''
+        + '<div class="modal__summary-line"><span class="modal__summary-label">总余量</span>'
+        + '  <span class="modal__summary-value" style="color:#ef4444;">' + totalSurplus.toFixed(1) + ' kg</span></div>'
+        + '<div class="modal__summary-line"><span class="modal__summary-label">本次处置</span>'
+        + '  <span class="modal__summary-value" style="color:#4ade80;">' + totalDisposed.toFixed(1) + ' kg (' + disposedCount + ' 道)</span></div>'
+        + '<div class="modal__summary-line"><span class="modal__summary-label">待后续处置</span>'
+        + '  <span class="modal__summary-value" style="color:#fbbf24;">' + pending.toFixed(1) + ' kg</span></div>';
+
+      Object.keys(methodCount).forEach(function (k) {
+        if (methodCount[k] > 0) {
+          html += '<div class="modal__summary-line"><span class="modal__summary-label">· ' + METHOD_MAP[k].label + '</span>'
+            + '<span class="modal__summary-value">' + methodCount[k].toFixed(1) + ' kg</span></div>';
+        }
+      });
+
+      document.getElementById('modalSummary').innerHTML = html;
+      document.getElementById('submitModal').classList.add('is-show');
+    }
+    function hideSubmitModal() {
+      document.getElementById('submitModal').classList.remove('is-show');
+    }
+
+    /* ============ 提交跳转(模拟) ============ */
+    function submitForm() {
+      /* 实际场景:POST 数据到后端 → 成功后跳转 */
+      window.location.href = '10-meal-center.html?toast=submitted';
+    }
+
+    /* ============ Toast 提示 ============ */
+    var toastTimer = null;
+    function showToast(text, isWarn) {
+      var toast = document.getElementById('toast');
+      toast.textContent = text;
+      toast.style.background = isWarn ? 'rgba(239,68,68,0.95)' : 'rgba(74,222,128,0.95)';
+      toast.style.color = isWarn ? '#fff' : '#0e1326';
+      toast.classList.add('toast--show');
+      if (toastTimer) clearTimeout(toastTimer);
+      toastTimer = setTimeout(function () {
+        toast.classList.remove('toast--show');
+      }, 2200);
+    }
+
+    /* ============ 日期显示 ============ */
+    function updateDate() {
+      var now = new Date();
+      var year = now.getFullYear();
+      var month = String(now.getMonth() + 1).padStart(2, '0');
+      var date = String(now.getDate()).padStart(2, '0');
+      var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()];
+      document.getElementById('topMeta').textContent = year + '-' + month + '-' + date + ' ' + weekDay;
+    }
+    updateDate();
+
+    /* ============ URL 参数解析(餐次) ============ */
+    (function () {
+      var params = new URLSearchParams(window.location.search);
+      var meal = params.get('meal') || 'lunch';
+      var mealMap = { breakfast: '早餐', lunch: '午餐', dinner: '晚餐' };
+      document.getElementById('mealTitle').textContent = mealMap[meal] || '午餐';
+    })();
+
+    /* ============ 初始渲染 ============ */
+    renderTable();
+  </script>
+
+</body>
+</html>
diff --git a/other-module/canteen-device/checkout-device/13-meal-history.html b/other-module/canteen-device/checkout-device/13-meal-history.html
new file mode 100644
index 0000000..5286b69
--- /dev/null
+++ b/other-module/canteen-device/checkout-device/13-meal-history.html
@@ -0,0 +1,1606 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1280, initial-scale=1.0">
+  <title>结算设备 - 餐次历史记录 | 蚁熊智能餐养平台</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
+      background: #05080f;
+      color: #fff;
+      min-height: 100vh;
+      min-width: 1280px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .device-frame {
+      width: 1280px;
+      height: 720px;
+      background: #0e1326;
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* 顶部导航 */
+    .top-bar {
+      display: flex;
+      align-items: center;
+      height: 44px;
+      background: #1a2b4a;
+      padding: 0 20px;
+      flex-shrink: 0;
+    }
+    .back-btn {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+    .back-btn:hover { color: #fff; }
+    .top-bar__title {
+      flex: 1;
+      text-align: center;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .top-bar__meta {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* 主内容:左右两栏 */
+    .main-area {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 280px 1fr;
+      gap: 16px;
+      padding: 16px 20px;
+      overflow: hidden;
+    }
+
+    /* 左侧:餐次列表 */
+    .meal-list {
+      display: flex;
+      flex-direction: column;
+      background: rgba(26, 43, 74, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+    .meal-list__header {
+      padding: 12px 14px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .meal-list__title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .meal-list__title::before {
+      content: "";
+      width: 3px;
+      height: 12px;
+      background: #4a90d9;
+      border-radius: 2px;
+    }
+    .meal-list__count {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.55);
+      padding: 2px 6px;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 8px;
+    }
+
+    /* 日期分组 */
+    .meal-list__body {
+      flex: 1;
+      overflow-y: auto;
+      scrollbar-width: none;
+      padding: 8px 0;
+    }
+    .meal-list__body::-webkit-scrollbar { display: none; }
+
+    .date-group {
+      margin-bottom: 8px;
+    }
+    .date-group__title {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.45);
+      padding: 8px 14px 4px;
+      letter-spacing: 0.5px;
+    }
+
+    .meal-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 14px;
+      cursor: pointer;
+      transition: all 0.2s;
+      border-left: 3px solid transparent;
+    }
+    .meal-item:hover {
+      background: rgba(74, 144, 217, 0.08);
+    }
+    .meal-item.is-active {
+      background: rgba(74, 144, 217, 0.15);
+      border-left-color: #4a90d9;
+    }
+    .meal-item__emoji {
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      background: rgba(255, 255, 255, 0.06);
+      flex-shrink: 0;
+    }
+    .meal-item__body {
+      flex: 1;
+      min-width: 0;
+    }
+    .meal-item__name {
+      font-size: 12px;
+      color: #fff;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+    .meal-item__meta {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .meal-item__status {
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 6px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+    .meal-item__status--done {
+      background: rgba(148, 163, 184, 0.15);
+      color: #cbd5e1;
+    }
+    .meal-item__status--live {
+      background: rgba(74, 222, 128, 0.18);
+      color: #4ade80;
+    }
+    .meal-item__status--pending {
+      background: rgba(255, 255, 255, 0.06);
+      color: rgba(255, 255, 255, 0.4);
+    }
+
+    /* 右侧:流程详情 */
+    .detail-panel {
+      display: flex;
+      flex-direction: column;
+      background: rgba(26, 43, 74, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .detail-header {
+      padding: 14px 18px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      flex-wrap: wrap;
+      flex-shrink: 0;
+    }
+    .detail-header__title {
+      font-size: 16px;
+      font-weight: 700;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .detail-header__pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 10px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+    }
+    .detail-header__pill--done {
+      background: rgba(148, 163, 184, 0.18);
+      color: #cbd5e1;
+    }
+    .detail-header__pill--live {
+      background: rgba(74, 222, 128, 0.18);
+      color: #4ade80;
+    }
+    .detail-header__pill--live::before {
+      content: "";
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: #4ade80;
+      animation: dotBlink 1.4s infinite;
+    }
+    @keyframes dotBlink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+    .detail-header__spacer { flex: 1; }
+    .detail-header__info {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.65);
+    }
+    .detail-header__info-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .detail-header__info-item strong {
+      color: #fff;
+      font-weight: 600;
+    }
+
+    /* 明细视图副头部（返回 + 节点摘要） */
+    .detail-subhead {
+      display: none;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 18px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+      flex-shrink: 0;
+      background: rgba(0, 0, 0, 0.15);
+    }
+    .detail-subhead--show { display: flex; }
+    .detail-subhead__back {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      transition: color 0.2s;
+      white-space: nowrap;
+    }
+    .detail-subhead__back:hover { color: #fff; }
+    .detail-subhead__badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 10px;
+      border-radius: 8px;
+      font-size: 11px;
+      font-weight: 700;
+    }
+    .detail-subhead__badge--start   { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
+    .detail-subhead__badge--add     { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
+    .detail-subhead__badge--close   { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
+    .detail-subhead__badge--dispose { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
+    .detail-subhead__title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #fff;
+    }
+    .detail-subhead__time {
+      margin-left: auto;
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.5);
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* 时间轴容器 */
+    .timeline-wrap {
+      flex: 1;
+      overflow-y: auto;
+      scrollbar-width: none;
+      padding: 16px 24px 24px;
+    }
+    .timeline-wrap::-webkit-scrollbar { display: none; }
+
+    .timeline {
+      position: relative;
+      padding-left: 28px;
+    }
+    .timeline::before {
+      content: "";
+      position: absolute;
+      left: 11px;
+      top: 8px;
+      bottom: 8px;
+      width: 2px;
+      background: linear-gradient(180deg,
+        rgba(74, 222, 128, 0.4) 0%,
+        rgba(251, 191, 36, 0.3) 40%,
+        rgba(148, 163, 184, 0.3) 70%,
+        rgba(168, 85, 247, 0.3) 100%
+      );
+    }
+
+    .tl-node {
+      position: relative;
+      padding: 8px 0 18px 18px;
+    }
+    .tl-node:last-child { padding-bottom: 0; }
+
+    /* 节点圆点 */
+    .tl-node__dot {
+      position: absolute;
+      left: -28px;
+      top: 10px;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      border: 2px solid #0e1326;
+      z-index: 2;
+    }
+    .tl-node__dot--start   { background: #4ade80; box-shadow: 0 0 12px rgba(74, 222, 128, 0.4); }
+    .tl-node__dot--add     { background: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }
+    .tl-node__dot--close   { background: #94a3b8; box-shadow: 0 0 8px rgba(148, 163, 184, 0.3); }
+    .tl-node__dot--dispose { background: #a855f7; box-shadow: 0 0 12px rgba(168, 85, 247, 0.4); }
+
+    /* 节点卡片 */
+    .tl-node__card {
+      padding: 12px 16px;
+      background: rgba(0, 0, 0, 0.25);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 10px;
+      transition: all 0.2s;
+      cursor: pointer;
+      position: relative;
+    }
+    .tl-node__card:hover {
+      background: rgba(0, 0, 0, 0.35);
+      border-color: rgba(255, 255, 255, 0.15);
+    }
+    .tl-node__card.is-focused {
+      border-color: rgba(74, 144, 217, 0.5);
+      box-shadow: 0 0 12px rgba(74, 144, 217, 0.2);
+    }
+
+    .tl-node__head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 6px;
+      gap: 10px;
+    }
+    .tl-node__title {
+      font-size: 13px;
+      font-weight: 700;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .tl-node__time {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.55);
+      font-family: Menlo, Consolas, monospace;
+    }
+    .tl-node__desc {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.65);
+      line-height: 1.5;
+      margin-bottom: 6px;
+    }
+    .tl-node__desc strong { color: #fff; font-weight: 600; }
+    .tl-node__tags {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .tl-node__open {
+      margin-left: auto;
+      font-size: 10px;
+      color: rgba(74, 144, 217, 0.7);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    .tl-node__card:hover .tl-node__open { color: #60a5fa; }
+
+    .tl-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 2px 8px;
+      border-radius: 6px;
+      font-size: 10px;
+      font-weight: 600;
+    }
+    .tl-tag--green  { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
+    .tl-tag--blue   { background: rgba(74, 144, 217, 0.18); color: #60a5fa; }
+    .tl-tag--gold   { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
+    .tl-tag--gray   { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
+    .tl-tag--red    { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
+    .tl-tag--purple { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
+
+    /* ====== 明细视图通用样式 ====== */
+
+    /* 明细汇总条 */
+    .detail-summary {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 14px;
+    }
+    .ds-card {
+      flex: 1;
+      min-width: 140px;
+      padding: 10px 14px;
+      background: rgba(0, 0, 0, 0.2);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .ds-card__label {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .ds-card__value {
+      font-size: 15px;
+      font-weight: 700;
+      color: #fff;
+    }
+    .ds-card__value--green { color: #4ade80; }
+    .ds-card__value--gold  { color: #fbbf24; }
+    .ds-card__value--blue  { color: #60a5fa; }
+
+    /* 明细表格 */
+    .detail-table-wrap {
+      overflow: hidden;
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 8px;
+    }
+    .detail-table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+      font-size: 11px;
+    }
+    .detail-table thead th {
+      position: sticky;
+      top: 0;
+      background: #1a2b4a;
+      color: rgba(255, 255, 255, 0.55);
+      font-weight: 600;
+      font-size: 10px;
+      text-align: left;
+      padding: 9px 10px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      white-space: nowrap;
+    }
+    .detail-table tbody td {
+      padding: 9px 10px;
+      color: rgba(255, 255, 255, 0.8);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .detail-table tbody tr:hover td {
+      background: rgba(74, 144, 217, 0.06);
+    }
+    .detail-table tbody tr:last-child td {
+      border-bottom: none;
+    }
+    .detail-table__total td {
+      border-top: 1px solid rgba(251, 191, 36, 0.3) !important;
+      color: #fbbf24 !important;
+      font-weight: 700;
+      background: rgba(251, 191, 36, 0.05) !important;
+    }
+    .detail-table .col-num {
+      text-align: right;
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* 餐线徽标 */
+    .line-badge {
+      display: inline-block;
+      padding: 1px 7px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 600;
+    }
+    .line-badge--A { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
+    .line-badge--B { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
+    .line-badge--C { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
+
+    /* 处置方式汇总卡片网格 */
+    .dmethod-grid {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+    .dmethod-card {
+      flex: 1;
+      padding: 12px 14px;
+      border-radius: 10px;
+      border: 1px solid;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      text-align: center;
+    }
+    .dmethod-card--welfare   { background: rgba(74, 144, 217, 0.08); border-color: rgba(74, 144, 217, 0.2); }
+    .dmethod-card--donate    { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.2); }
+    .dmethod-card--waste     { background: rgba(239, 68, 68, 0.08);  border-color: rgba(239, 68, 68, 0.2); }
+    .dmethod-card--reprocess { background: rgba(168, 85, 247, 0.08); border-color: rgba(168, 85, 247, 0.2); }
+    .dmethod-card__label {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.55);
+    }
+    .dmethod-card__value {
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+    }
+    .dmethod-card__count {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.45);
+    }
+    .dmethod-card--welfare   .dmethod-card__value { color: #60a5fa; }
+    .dmethod-card--donate    .dmethod-card__value { color: #4ade80; }
+    .dmethod-card--waste     .dmethod-card__value { color: #ef4444; }
+    .dmethod-card--reprocess .dmethod-card__value { color: #c084fc; }
+
+    /* 筛选 tab */
+    .filter-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .filter-tab {
+      padding: 4px 12px;
+      border-radius: 14px;
+      font-size: 11px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.5);
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .filter-tab:hover {
+      color: rgba(255, 255, 255, 0.8);
+      border-color: rgba(255, 255, 255, 0.15);
+    }
+    .filter-tab.is-active {
+      color: #fff;
+      background: rgba(74, 144, 217, 0.2);
+      border-color: rgba(74, 144, 217, 0.4);
+    }
+
+    /* 处置方式徽标 */
+    .method-badge {
+      display: inline-block;
+      padding: 1px 8px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 600;
+    }
+    .method-badge--welfare   { background: rgba(74, 144, 217, 0.18); color: #60a5fa; }
+    .method-badge--donate    { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
+    .method-badge--waste     { background: rgba(239, 68, 68, 0.18);  color: #ef4444; }
+    .method-badge--reprocess { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
+
+    /* 节点卡片内的处置方式紧凑网格 */
+    .dispose-compact {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 4px 10px;
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px dashed rgba(255, 255, 255, 0.08);
+    }
+    .dispose-compact__item {
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+      gap: 4px;
+    }
+    .dispose-compact__label { color: rgba(255, 255, 255, 0.5); }
+    .dispose-compact__value { color: #fff; font-weight: 600; }
+
+    /* 底部统计卡 */
+    .detail-footer {
+      padding: 14px 20px;
+      border-top: 1px solid rgba(255, 255, 255, 0.06);
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.08), rgba(26, 43, 74, 0.4));
+      flex-shrink: 0;
+    }
+    .footer-stat {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .footer-stat__label {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.55);
+    }
+    .footer-stat__value {
+      font-size: 16px;
+      font-weight: 700;
+      color: #fff;
+      display: flex;
+      align-items: baseline;
+      gap: 2px;
+    }
+    .footer-stat__value--green { color: #4ade80; }
+    .footer-stat__value--gold  { color: #fbbf24; }
+    .footer-stat__value--red   { color: #ef4444; }
+    .footer-stat__unit {
+      font-size: 10px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.55);
+    }
+    .footer-divider {
+      width: 1px;
+      height: 28px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+  </style>
+</head>
+<body>
+
+  <div class="device-frame">
+
+    <!-- 顶部导航 -->
+    <div class="top-bar">
+      <a class="back-btn" href="10-meal-center.html">&#x25C0; 返回餐次管理</a>
+      <span class="top-bar__title">餐次历史记录</span>
+      <span class="top-bar__meta" id="topMeta">2026-08-10 周一</span>
+    </div>
+
+    <!-- 主内容:左右两栏 -->
+    <div class="main-area">
+
+      <!-- 左侧:餐次列表 -->
+      <div class="meal-list">
+        <div class="meal-list__header">
+          <span class="meal-list__title">餐次列表</span>
+          <span class="meal-list__count" id="totalCount">5 餐次</span>
+        </div>
+        <div class="meal-list__body" id="mealListBody">
+          <!-- JS 动态渲染 -->
+        </div>
+      </div>
+
+      <!-- 右侧:流程详情 -->
+      <div class="detail-panel">
+        <div class="detail-header" id="detailHeader">
+          <!-- JS 动态渲染 -->
+        </div>
+        <!-- 明细视图副头部（节点下钻时显示） -->
+        <div class="detail-subhead" id="detailSubhead">
+          <span class="detail-subhead__back" onclick="backToTimeline()">&#x25C0; 返回时间轴</span>
+          <span class="detail-subhead__badge" id="subheadBadge"></span>
+          <span class="detail-subhead__title" id="subheadTitle"></span>
+          <span class="detail-subhead__time" id="subheadTime"></span>
+        </div>
+        <div class="timeline-wrap">
+          <div class="timeline" id="timeline">
+            <!-- JS 动态渲染：时间轴 / 明细视图 -->
+          </div>
+        </div>
+        <div class="detail-footer" id="detailFooter">
+          <!-- JS 动态渲染 -->
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+  <script>
+    /* ============ 节点类型字典（精简为 4 种） ============ */
+    var NODE_TYPES = {
+      start:   { dotCls: 'tl-node__dot--start',   dotIcon: '▶', badgeCls: 'detail-subhead__badge--start',   label: '开餐' },
+      add:     { dotCls: 'tl-node__dot--add',     dotIcon: '➕', badgeCls: 'detail-subhead__badge--add',     label: '补餐' },
+      close:   { dotCls: 'tl-node__dot--close',   dotIcon: '✕', badgeCls: 'detail-subhead__badge--close',   label: '闭餐' },
+      dispose: { dotCls: 'tl-node__dot--dispose', dotIcon: '♻', badgeCls: 'detail-subhead__badge--dispose', label: '余量处置' }
+    };
+
+    /* 处置方式映射 */
+    var METHOD_MAP = {
+      welfare:   { label: '员工福利', cls: 'method-badge--welfare',   cardCls: 'dmethod-card--welfare' },
+      donate:    { label: '捐赠',     cls: 'method-badge--donate',    cardCls: 'dmethod-card--donate' },
+      waste:     { label: '废弃',     cls: 'method-badge--waste',     cardCls: 'dmethod-card--waste' },
+      reprocess: { label: '加工再利用', cls: 'method-badge--reprocess', cardCls: 'dmethod-card--reprocess' }
+    };
+
+    /* ============ 历史餐次 Mock 数据 ============
+       每条餐次含 4 类流程节点：start / add / close / dispose
+       节点详情载荷：
+         start   → detail: { firstOrder?, dishes[] }
+         add     → supply: { dish, line, dishEmoji, triggerLeftover, addAmount, reason, operator, status }
+         close   → closeDetail: { lines: [{ line, name, closeTime, orders, revenue, avgPer }] }
+         dispose → dispose: { total, operator, methods[], records[] }
+       餐次级 endTime 合并原"结束用餐"节点
+    */
+    var MEAL_HISTORY = [
+      /* ---- 08-10 午餐（进行中，无 dispose） ---- */
+      {
+        id: '2026-08-10-lunch',
+        date: '2026-08-10',
+        dateLabel: '今日',
+        mealKey: 'lunch',
+        mealName: '午餐',
+        emoji: '🍱',
+        status: 'live',
+        statusLabel: '进行中',
+        operator: '张三',
+        restaurant: '数味餐厅 · 一楼',
+        timeRange: '11:00:23 - 进行中',
+        endTime: null,
+        nodes: [
+          {
+            type: 'start', time: '11:00:23',
+            title: '开餐',
+            desc: '操作人 <strong>张三 · CS001</strong> 开启<strong>午餐</strong>餐次，涉及 <strong>3 条餐线 28 道菜</strong>',
+            tags: [
+              { cls: 'tl-tag--green', text: 'A 区中餐线' },
+              { cls: 'tl-tag--gold', text: 'B 区中餐线' },
+              { cls: 'tl-tag--purple', text: 'C 区快餐线' }
+            ],
+            detail: {
+              firstOrder: { time: '11:32:10', line: 'A', customer: '张*明', amount: 27.50 },
+              dishes: [
+                { name: '宫保鸡丁',      line: 'A', serveTime: '11:01:12', maker: '王师傅', operator: '张三', planned: 8.5, sold: 7.8 },
+                { name: '鱼香肉丝',      line: 'A', serveTime: '11:01:18', maker: '王师傅', operator: '张三', planned: 7.0, sold: 6.2 },
+                { name: '番茄炒蛋',      line: 'B', serveTime: '11:00:45', maker: '李师傅', operator: '张三', planned: 6.0, sold: 4.5 },
+                { name: '白米饭',        line: 'A', serveTime: '11:00:30', maker: '赵师傅', operator: '张三', planned: 15.0, sold: 12.0 },
+                { name: '清炒西兰花',    line: 'B', serveTime: '11:01:05', maker: '李师傅', operator: '张三', planned: 5.0, sold: 4.0 },
+                { name: '红烧肉',        line: 'A', serveTime: '11:01:22', maker: '王师傅', operator: '张三', planned: 6.5, sold: 5.8 },
+                { name: '麻婆豆腐',      line: 'B', serveTime: '11:01:30', maker: '李师傅', operator: '张三', planned: 4.5, sold: 3.9 },
+                { name: '糖醋排骨',      line: 'A', serveTime: '11:02:00', maker: '王师傅', operator: '张三', planned: 5.0, sold: 4.2 },
+                { name: '酸辣土豆丝',    line: 'B', serveTime: '11:02:10', maker: '李师傅', operator: '张三', planned: 4.0, sold: 3.3 },
+                { name: '回锅肉',        line: 'C', serveTime: '11:00:55', maker: '陈师傅', operator: '张三', planned: 5.5, sold: 4.8 },
+                { name: '水煮鱼',        line: 'A', serveTime: '11:02:20', maker: '王师傅', operator: '张三', planned: 4.0, sold: 3.2 },
+                { name: '干煸豆角',      line: 'C', serveTime: '11:01:40', maker: '陈师傅', operator: '张三', planned: 3.5, sold: 2.8 },
+                { name: '蒜蓉生菜',      line: 'B', serveTime: '11:01:50', maker: '李师傅', operator: '张三', planned: 4.0, sold: 3.1 },
+                { name: '紫菜蛋花汤',    line: 'A', serveTime: '11:00:40', maker: '王师傅', operator: '张三', planned: 10.0, sold: 8.0 }
+              ]
+            }
+          },
+          {
+            type: 'add', time: '12:05:45',
+            title: '补餐 · 番茄炒蛋',
+            desc: '<strong>B 区中餐线 · 番茄炒蛋</strong> 余量降至 0.8kg（预警阈值），后厨补做 <strong>3.0kg</strong>',
+            tags: [
+              { cls: 'tl-tag--gold', text: '自动预警' },
+              { cls: 'tl-tag--green', text: '已通知后厨' }
+            ],
+            supply: { dish: '番茄炒蛋', line: 'B', dishEmoji: '🍳', triggerLeftover: 0.8, addAmount: 3.0, reason: '自动预警', operator: '张三', status: '已补做' }
+          },
+          {
+            type: 'add', time: '12:48:20',
+            title: '补餐 · 白米饭',
+            desc: '<strong>A 区中餐线 · 白米饭</strong> 余量降至 3.0kg，后厨补做 <strong>5.0kg</strong>',
+            tags: [
+              { cls: 'tl-tag--gold', text: '手动通知' },
+              { cls: 'tl-tag--green', text: '已通知后厨' }
+            ],
+            supply: { dish: '白米饭', line: 'A', dishEmoji: '🍚', triggerLeftover: 3.0, addAmount: 5.0, reason: '手动通知', operator: '张三', status: '已补做' }
+          },
+          {
+            type: 'close', time: '13:15:00',
+            title: '闭餐 · B 区中餐线',
+            desc: '<strong>B 区中餐线</strong> 闭餐，停止取餐；A 区 / C 区继续服务',
+            tags: [{ cls: 'tl-tag--gray', text: 'B 区闭餐' }],
+            closeDetail: { lines: [
+              { line: 'B', name: 'B 区中餐线', closeTime: '13:15:00', orders: 32, revenue: 870.00, avgPer: 27.19 }
+            ]}
+          },
+          {
+            type: 'close', time: '13:45:30',
+            title: '闭餐 · A 区中餐线',
+            desc: '<strong>A 区中餐线</strong> 闭餐，仅剩 C 区快餐线服务',
+            tags: [{ cls: 'tl-tag--gray', text: 'A 区闭餐' }],
+            closeDetail: { lines: [
+              { line: 'A', name: 'A 区中餐线', closeTime: '13:45:30', orders: 41, revenue: 1130.50, avgPer: 27.57 }
+            ]}
+          }
+        ],
+        footer: { totalOrders: 96, totalRevenue: 2614.50, avgPer: 27.23, surplus: '进行中' }
+      },
+
+      /* ---- 08-10 早餐（已结束） ---- */
+      {
+        id: '2026-08-10-breakfast',
+        date: '2026-08-10',
+        dateLabel: '今日',
+        mealKey: 'breakfast',
+        mealName: '早餐',
+        emoji: '🥐',
+        status: 'done',
+        statusLabel: '已结束',
+        operator: '李四',
+        restaurant: '数味餐厅 · 一楼',
+        timeRange: '06:30:00 - 09:15:32',
+        endTime: '09:15:32',
+        nodes: [
+          {
+            type: 'start', time: '06:30:00',
+            title: '开餐',
+            desc: '操作人 <strong>李四 · CS002</strong> 开启<strong>早餐</strong>餐次，涉及 <strong>2 条餐线 14 道菜</strong>',
+            tags: [
+              { cls: 'tl-tag--green', text: 'A 区早餐线' },
+              { cls: 'tl-tag--gold', text: 'B 区早餐线' }
+            ],
+            detail: {
+              firstOrder: { time: '06:48:15', line: 'A', customer: '王*强', amount: 12.50 },
+              dishes: [
+                { name: '豆浆',        line: 'A', serveTime: '06:30:10', maker: '孙师傅', operator: '李四', planned: 8.0, sold: 6.5 },
+                { name: '油条',        line: 'A', serveTime: '06:30:20', maker: '孙师傅', operator: '李四', planned: 5.0, sold: 4.2 },
+                { name: '鲜肉包',      line: 'B', serveTime: '06:30:05', maker: '周师傅', operator: '李四', planned: 6.0, sold: 5.0 },
+                { name: '鸡蛋饼',      line: 'A', serveTime: '06:30:35', maker: '孙师傅', operator: '李四', planned: 4.0, sold: 3.3 },
+                { name: '小米粥',      line: 'B', serveTime: '06:30:15', maker: '周师傅', operator: '李四', planned: 6.0, sold: 5.1 },
+                { name: '馒头',        line: 'B', serveTime: '06:30:25', maker: '周师傅', operator: '李四', planned: 5.0, sold: 4.0 },
+                { name: '花卷',        line: 'A', serveTime: '06:30:45', maker: '孙师傅', operator: '李四', planned: 3.5, sold: 2.8 },
+                { name: '茶叶蛋',      line: 'A', serveTime: '06:30:08', maker: '孙师傅', operator: '李四', planned: 4.0, sold: 3.5 }
+              ]
+            }
+          },
+          {
+            type: 'add', time: '07:25:30',
+            title: '补餐 · 豆浆',
+            desc: '<strong>A 区早餐线 · 豆浆</strong> 余量降至 1.2kg，后厨补做 <strong>3.0kg</strong>',
+            tags: [
+              { cls: 'tl-tag--gold', text: '自动预警' },
+              { cls: 'tl-tag--green', text: '已通知后厨' }
+            ],
+            supply: { dish: '豆浆', line: 'A', dishEmoji: '🥛', triggerLeftover: 1.2, addAmount: 3.0, reason: '自动预警', operator: '李四', status: '已补做' }
+          },
+          {
+            type: 'close', time: '08:50:00',
+            title: '闭餐 · 全部餐线',
+            desc: '<strong>A 区 / B 区早餐线</strong> 全部闭餐',
+            tags: [{ cls: 'tl-tag--gray', text: '全部闭餐' }],
+            closeDetail: { lines: [
+              { line: 'A', name: 'A 区早餐线', closeTime: '08:50:00', orders: 78, revenue: 995.00, avgPer: 12.76 },
+              { line: 'B', name: 'B 区早餐线', closeTime: '08:50:00', orders: 64, revenue: 825.00, avgPer: 12.89 }
+            ]}
+          },
+          {
+            type: 'dispose', time: '09:32:18',
+            title: '余量处置完成',
+            desc: '本餐次共处置余量 <strong>12.4kg</strong>，操作人 <strong>李四</strong>',
+            tags: [
+              { cls: 'tl-tag--purple', text: '处置完成' },
+              { cls: 'tl-tag--green', text: '交叉核对正常' }
+            ],
+            dispose: {
+              total: 12.4, operator: '李四',
+              methods: [
+                { key: 'welfare',   label: '员工福利', amount: 5.2, count: 3 },
+                { key: 'donate',    label: '捐赠',     amount: 4.8, count: 2 },
+                { key: 'waste',     label: '废弃',     amount: 1.4, count: 2 },
+                { key: 'reprocess', label: '加工再利用', amount: 1.0, count: 1 }
+              ],
+              records: [
+                { time: '09:33:10', dish: '油条',     line: 'A', method: 'welfare',   amount: 2.0, receiver: '员工 · 王建国',   operator: '李四', note: '加班餐' },
+                { time: '09:34:05', dish: '鲜肉包',   line: 'B', method: 'welfare',   amount: 1.8, receiver: '员工 · 陈小红',   operator: '李四', note: '值班餐' },
+                { time: '09:35:20', dish: '鸡蛋饼',   line: 'A', method: 'welfare',   amount: 1.4, receiver: '员工 · 赵大鹏',   operator: '李四', note: '' },
+                { time: '09:36:45', dish: '小米粥',   line: 'B', method: 'donate',    amount: 3.0, receiver: '浐灞社区服务站',   operator: '李四', note: '捐赠凭证已上传' },
+                { time: '09:37:30', dish: '馒头',     line: 'B', method: 'donate',    amount: 1.8, receiver: '浐灞社区服务站',   operator: '李四', note: '' },
+                { time: '09:38:15', dish: '花卷',     line: 'A', method: 'waste',     amount: 0.9, receiver: '—',              operator: '李四', note: '临期食品' },
+                { time: '09:39:00', dish: '茶叶蛋',   line: 'A', method: 'waste',     amount: 0.5, receiver: '—',              operator: '李四', note: '破壳损耗' },
+                { time: '09:40:10', dish: '豆浆',     line: 'A', method: 'reprocess', amount: 1.0, receiver: '后厨 · 孙师傅',   operator: '李四', note: '员工餐再利用' }
+              ]
+            }
+          }
+        ],
+        footer: { totalOrders: 142, totalRevenue: 1820.00, avgPer: 12.82, surplus: '12.4 kg' }
+      },
+
+      /* ---- 08-09 晚餐 ---- */
+      {
+        id: '2026-08-09-dinner',
+        date: '2026-08-09',
+        dateLabel: '昨日',
+        mealKey: 'dinner',
+        mealName: '晚餐',
+        emoji: '🍜',
+        status: 'done',
+        statusLabel: '已结束',
+        operator: '张三',
+        restaurant: '数味餐厅 · 一楼',
+        timeRange: '17:00:00 - 20:08:45',
+        endTime: '20:08:45',
+        nodes: [
+          {
+            type: 'start', time: '17:00:00',
+            title: '开餐',
+            desc: '操作人 <strong>张三 · CS001</strong> 开启<strong>晚餐</strong>餐次，涉及 <strong>3 条餐线 24 道菜</strong>',
+            tags: [
+              { cls: 'tl-tag--green', text: 'A 区中餐线' },
+              { cls: 'tl-tag--gold', text: 'B 区中餐线' },
+              { cls: 'tl-tag--purple', text: 'C 区快餐线' }
+            ],
+            detail: {
+              firstOrder: { time: '17:21:50', line: 'C', customer: '陈*芳', amount: 8.50 },
+              dishes: [
+                { name: '宫保鸡丁',    line: 'A', serveTime: '17:00:30', maker: '王师傅', operator: '张三', planned: 7.0, sold: 6.3 },
+                { name: '鱼香肉丝',    line: 'A', serveTime: '17:00:45', maker: '王师傅', operator: '张三', planned: 6.5, sold: 5.7 },
+                { name: '番茄炒蛋',    line: 'B', serveTime: '17:00:20', maker: '李师傅', operator: '张三', planned: 6.0, sold: 5.0 },
+                { name: '白米饭',      line: 'A', serveTime: '17:00:10', maker: '赵师傅', operator: '张三', planned: 12.0, sold: 10.5 },
+                { name: '红烧肉',      line: 'A', serveTime: '17:01:00', maker: '王师傅', operator: '张三', planned: 5.5, sold: 4.8 },
+                { name: '牛肉面',      line: 'C', serveTime: '17:00:50', maker: '陈师傅', operator: '张三', planned: 8.0, sold: 6.5 },
+                { name: '酸辣粉',      line: 'C', serveTime: '17:01:10', maker: '陈师傅', operator: '张三', planned: 5.0, sold: 4.2 },
+                { name: '蛋炒饭',      line: 'C', serveTime: '17:00:35', maker: '陈师傅', operator: '张三', planned: 4.5, sold: 3.8 },
+                { name: '清炒西兰花',  line: 'B', serveTime: '17:01:20', maker: '李师傅', operator: '张三', planned: 4.0, sold: 3.2 },
+                { name: '麻婆豆腐',    line: 'B', serveTime: '17:01:30', maker: '李师傅', operator: '张三', planned: 4.0, sold: 3.5 }
+              ]
+            }
+          },
+          {
+            type: 'add', time: '18:15:22',
+            title: '补餐 · 牛肉面',
+            desc: '<strong>C 区快餐线 · 牛肉面</strong> 余量降至 0.5kg（预警阈值），后厨补做 <strong>2.5kg</strong>',
+            tags: [
+              { cls: 'tl-tag--gold', text: '自动预警' },
+              { cls: 'tl-tag--green', text: '已通知后厨' }
+            ],
+            supply: { dish: '牛肉面', line: 'C', dishEmoji: '🍜', triggerLeftover: 0.5, addAmount: 2.5, reason: '自动预警', operator: '张三', status: '已补做' }
+          },
+          {
+            type: 'close', time: '19:30:00',
+            title: '闭餐 · 全部餐线',
+            desc: '<strong>A 区 / B 区 / C 区</strong> 全部闭餐',
+            tags: [{ cls: 'tl-tag--gray', text: '全部闭餐' }],
+            closeDetail: { lines: [
+              { line: 'A', name: 'A 区中餐线', closeTime: '19:30:00', orders: 58, revenue: 1340.00, avgPer: 23.10 },
+              { line: 'B', name: 'B 区中餐线', closeTime: '19:30:00', orders: 49, revenue: 1150.00, avgPer: 23.47 },
+              { line: 'C', name: 'C 区快餐线', closeTime: '19:30:00', orders: 61, revenue: 1360.00, avgPer: 22.30 }
+            ]}
+          },
+          {
+            type: 'dispose', time: '20:25:10',
+            title: '余量处置完成',
+            desc: '本餐次共处置余量 <strong>22.6kg</strong>，操作人 <strong>张三</strong>',
+            tags: [
+              { cls: 'tl-tag--purple', text: '处置完成' },
+              { cls: 'tl-tag--red', text: '损耗超标 5.1kg' }
+            ],
+            dispose: {
+              total: 22.6, operator: '张三',
+              methods: [
+                { key: 'welfare',   label: '员工福利', amount: 8.0, count: 4 },
+                { key: 'donate',    label: '捐赠',     amount: 6.5, count: 3 },
+                { key: 'waste',     label: '废弃',     amount: 5.1, count: 4 },
+                { key: 'reprocess', label: '加工再利用', amount: 3.0, count: 2 }
+              ],
+              records: [
+                { time: '20:26:10', dish: '宫保鸡丁',   line: 'A', method: 'welfare',   amount: 2.5, receiver: '员工 · 王建国',   operator: '张三', note: '加班餐' },
+                { time: '20:27:00', dish: '鱼香肉丝',   line: 'A', method: 'welfare',   amount: 2.0, receiver: '员工 · 李小红',   operator: '张三', note: '' },
+                { time: '20:27:50', dish: '白米饭',     line: 'A', method: 'welfare',   amount: 2.0, receiver: '员工 · 赵大鹏',   operator: '张三', note: '' },
+                { time: '20:28:40', dish: '清炒西兰花', line: 'B', method: 'donate',    amount: 2.5, receiver: '浐灞社区服务站',   operator: '李四', note: '捐赠凭证已上传' },
+                { time: '20:29:15', dish: '番茄炒蛋',   line: 'B', method: 'donate',    amount: 2.2, receiver: '浐灞社区服务站',   operator: '李四', note: '' },
+                { time: '20:29:50', dish: '麻婆豆腐',   line: 'B', method: 'donate',    amount: 1.8, receiver: '爱心食堂',         operator: '李四', note: '' },
+                { time: '20:30:05', dish: '酸辣粉',     line: 'C', method: 'waste',     amount: 2.1, receiver: '—',              operator: '张三', note: '临期食品' },
+                { time: '20:30:40', dish: '蛋炒饭',     line: 'C', method: 'waste',     amount: 1.5, receiver: '—',              operator: '张三', note: '' },
+                { time: '20:31:10', dish: '红烧肉',     line: 'A', method: 'waste',     amount: 0.8, receiver: '—',              operator: '张三', note: '过夜损耗' },
+                { time: '20:31:45', dish: '牛肉面',     line: 'C', method: 'waste',     amount: 0.7, receiver: '—',              operator: '张三', note: '' },
+                { time: '20:32:30', dish: '番茄炒蛋',   line: 'B', method: 'reprocess', amount: 1.5, receiver: '后厨 · 李师傅',   operator: '李四', note: '次日员工餐' },
+                { time: '20:33:10', dish: '白米饭',     line: 'A', method: 'reprocess', amount: 1.5, receiver: '后厨 · 赵师傅',   operator: '张三', note: '员工餐再利用' },
+                { time: '20:34:00', dish: '鱼香肉丝',   line: 'A', method: 'welfare',   amount: 1.5, receiver: '员工 · 张伟',     operator: '张三', note: '' }
+              ]
+            }
+          }
+        ],
+        footer: { totalOrders: 168, totalRevenue: 3850.00, avgPer: 22.92, surplus: '22.6 kg' }
+      },
+
+      /* ---- 08-09 午餐（无 add/close 节点） ---- */
+      {
+        id: '2026-08-09-lunch',
+        date: '2026-08-09',
+        dateLabel: '昨日',
+        mealKey: 'lunch',
+        mealName: '午餐',
+        emoji: '🍱',
+        status: 'done',
+        statusLabel: '已结束',
+        operator: '李四',
+        restaurant: '数味餐厅 · 一楼',
+        timeRange: '11:00:00 - 14:05:20',
+        endTime: '14:05:20',
+        nodes: [
+          {
+            type: 'start', time: '11:00:00',
+            title: '开餐',
+            desc: '操作人 <strong>李四 · CS002</strong> 开启<strong>午餐</strong>餐次，涉及 <strong>3 条餐线 28 道菜</strong>',
+            tags: [
+              { cls: 'tl-tag--green', text: 'A 区中餐线' },
+              { cls: 'tl-tag--gold', text: 'B 区中餐线' },
+              { cls: 'tl-tag--purple', text: 'C 区快餐线' }
+            ],
+            detail: {
+              firstOrder: { time: '11:25:10', line: 'A', customer: '刘*华', amount: 32.50 },
+              dishes: [
+                { name: '宫保鸡丁',    line: 'A', serveTime: '11:00:30', maker: '王师傅', operator: '李四', planned: 8.0, sold: 7.5 },
+                { name: '糖醋排骨',    line: 'A', serveTime: '11:00:50', maker: '王师傅', operator: '李四', planned: 6.0, sold: 5.2 },
+                { name: '红烧狮子头',  line: 'B', serveTime: '11:01:10', maker: '李师傅', operator: '李四', planned: 5.0, sold: 4.3 },
+                { name: '番茄炒蛋',    line: 'B', serveTime: '11:00:40', maker: '李师傅', operator: '李四', planned: 7.0, sold: 6.0 },
+                { name: '白米饭',      line: 'A', serveTime: '11:00:15', maker: '赵师傅', operator: '李四', planned: 14.0, sold: 12.0 },
+                { name: '葱爆羊肉',    line: 'C', serveTime: '11:01:25', maker: '陈师傅', operator: '李四', planned: 4.5, sold: 3.8 },
+                { name: '蚝油生菜',    line: 'C', serveTime: '11:01:40', maker: '陈师傅', operator: '李四', planned: 3.5, sold: 2.9 },
+                { name: '辣子鸡',      line: 'C', serveTime: '11:02:00', maker: '陈师傅', operator: '李四', planned: 5.0, sold: 4.1 },
+                { name: '麻婆豆腐',    line: 'B', serveTime: '11:01:55', maker: '李师傅', operator: '李四', planned: 4.0, sold: 3.4 },
+                { name: '紫菜蛋花汤',  line: 'A', serveTime: '11:00:20', maker: '王师傅', operator: '李四', planned: 8.0, sold: 7.0 }
+              ]
+            }
+          },
+          {
+            type: 'dispose', time: '14:28:42',
+            title: '余量处置完成',
+            desc: '本餐次共处置余量 <strong>28.6kg</strong>，操作人 <strong>李四</strong>',
+            tags: [
+              { cls: 'tl-tag--purple', text: '处置完成' },
+              { cls: 'tl-tag--green', text: '交叉核对正常' }
+            ],
+            dispose: {
+              total: 28.6, operator: '李四',
+              methods: [
+                { key: 'welfare',   label: '员工福利', amount: 10.0, count: 5 },
+                { key: 'donate',    label: '捐赠',     amount: 8.5, count: 3 },
+                { key: 'waste',     label: '废弃',     amount: 6.6, count: 4 },
+                { key: 'reprocess', label: '加工再利用', amount: 3.5, count: 2 }
+              ],
+              records: [
+                { time: '14:29:10', dish: '宫保鸡丁',   line: 'A', method: 'welfare',   amount: 3.0, receiver: '员工 · 王建国',   operator: '李四', note: '加班餐' },
+                { time: '14:29:50', dish: '糖醋排骨',   line: 'A', method: 'welfare',   amount: 2.5, receiver: '员工 · 陈小红',   operator: '李四', note: '' },
+                { time: '14:30:30', dish: '番茄炒蛋',   line: 'B', method: 'welfare',   amount: 2.0, receiver: '员工 · 赵大鹏',   operator: '李四', note: '' },
+                { time: '14:31:10', dish: '白米饭',     line: 'A', method: 'welfare',   amount: 1.5, receiver: '员工 · 张伟',     operator: '李四', note: '' },
+                { time: '14:32:00', dish: '麻婆豆腐',   line: 'B', method: 'welfare',   amount: 1.0, receiver: '员工 · 刘洋',     operator: '李四', note: '' },
+                { time: '14:33:20', dish: '红烧狮子头', line: 'B', method: 'donate',    amount: 3.5, receiver: '浐灞社区服务站',   operator: '李四', note: '捐赠凭证已上传' },
+                { time: '14:34:00', dish: '辣子鸡',     line: 'C', method: 'donate',    amount: 3.0, receiver: '爱心食堂',         operator: '李四', note: '' },
+                { time: '14:34:40', dish: '蚝油生菜',   line: 'C', method: 'donate',    amount: 2.0, receiver: '爱心食堂',         operator: '李四', note: '' },
+                { time: '14:35:30', dish: '葱爆羊肉',   line: 'C', method: 'waste',     amount: 2.5, receiver: '—',              operator: '李四', note: '临期食品' },
+                { time: '14:36:10', dish: '紫菜蛋花汤', line: 'A', method: 'waste',     amount: 2.1, receiver: '—',              operator: '李四', note: '' },
+                { time: '14:36:50', dish: '白米饭',     line: 'A', method: 'waste',     amount: 1.2, receiver: '—',              operator: '李四', note: '' },
+                { time: '14:37:30', dish: '番茄炒蛋',   line: 'B', method: 'waste',     amount: 0.8, receiver: '—',              operator: '李四', note: '' },
+                { time: '14:38:20', dish: '白米饭',     line: 'A', method: 'reprocess', amount: 2.0, receiver: '后厨 · 赵师傅',   operator: '李四', note: '员工餐' },
+                { time: '14:39:00', dish: '宫保鸡丁',   line: 'A', method: 'reprocess', amount: 1.5, receiver: '后厨 · 王师傅',   operator: '李四', note: '' }
+              ]
+            }
+          }
+        ],
+        footer: { totalOrders: 132, totalRevenue: 3050.00, avgPer: 23.10, surplus: '28.6 kg' }
+      },
+
+      /* ---- 08-09 早餐（无 add/close 节点） ---- */
+      {
+        id: '2026-08-09-breakfast',
+        date: '2026-08-09',
+        dateLabel: '昨日',
+        mealKey: 'breakfast',
+        mealName: '早餐',
+        emoji: '🥐',
+        status: 'done',
+        statusLabel: '已结束',
+        operator: '王五',
+        restaurant: '数味餐厅 · 一楼',
+        timeRange: '06:30:00 - 09:18:00',
+        endTime: '09:18:00',
+        nodes: [
+          {
+            type: 'start', time: '06:30:00',
+            title: '开餐',
+            desc: '操作人 <strong>王五 · CS003</strong> 开启<strong>早餐</strong>餐次，涉及 <strong>2 条餐线 12 道菜</strong>',
+            tags: [
+              { cls: 'tl-tag--green', text: 'A 区早餐线' },
+              { cls: 'tl-tag--gold', text: 'B 区早餐线' }
+            ],
+            detail: {
+              dishes: [
+                { name: '豆浆',    line: 'A', serveTime: '06:30:10', maker: '孙师傅', operator: '王五', planned: 6.0, sold: 5.2 },
+                { name: '油条',    line: 'A', serveTime: '06:30:25', maker: '孙师傅', operator: '王五', planned: 4.0, sold: 3.5 },
+                { name: '鲜肉包',  line: 'B', serveTime: '06:30:05', maker: '周师傅', operator: '王五', planned: 5.0, sold: 4.2 },
+                { name: '鸡蛋饼',  line: 'A', serveTime: '06:30:40', maker: '孙师傅', operator: '王五', planned: 3.5, sold: 2.8 },
+                { name: '小米粥',  line: 'B', serveTime: '06:30:15', maker: '周师傅', operator: '王五', planned: 5.0, sold: 4.5 },
+                { name: '馒头',    line: 'B', serveTime: '06:30:30', maker: '周师傅', operator: '王五', planned: 4.0, sold: 3.3 },
+                { name: '花卷',    line: 'A', serveTime: '06:30:50', maker: '孙师傅', operator: '王五', planned: 3.0, sold: 2.4 },
+                { name: '茶叶蛋',  line: 'A', serveTime: '06:30:08', maker: '孙师傅', operator: '王五', planned: 3.5, sold: 2.9 }
+              ]
+            }
+          },
+          {
+            type: 'dispose', time: '09:35:24',
+            title: '余量处置完成',
+            desc: '本餐次共处置余量 <strong>8.4kg</strong>，操作人 <strong>王五</strong>',
+            tags: [{ cls: 'tl-tag--purple', text: '处置完成' }],
+            dispose: {
+              total: 8.4, operator: '王五',
+              methods: [
+                { key: 'welfare',   label: '员工福利', amount: 4.0, count: 2 },
+                { key: 'donate',    label: '捐赠',     amount: 2.4, count: 2 },
+                { key: 'waste',     label: '废弃',     amount: 1.0, count: 2 },
+                { key: 'reprocess', label: '加工再利用', amount: 1.0, count: 1 }
+              ],
+              records: [
+                { time: '09:36:10', dish: '豆浆',   line: 'A', method: 'welfare',   amount: 2.5, receiver: '员工 · 王建国',   operator: '王五', note: '加班餐' },
+                { time: '09:37:00', dish: '鲜肉包', line: 'B', method: 'welfare',   amount: 1.5, receiver: '员工 · 陈小红',   operator: '王五', note: '' },
+                { time: '09:38:20', dish: '小米粥', line: 'B', method: 'donate',    amount: 1.5, receiver: '浐灞社区服务站',   operator: '王五', note: '捐赠凭证已上传' },
+                { time: '09:39:00', dish: '馒头',   line: 'B', method: 'donate',    amount: 0.9, receiver: '浐灞社区服务站',   operator: '王五', note: '' },
+                { time: '09:40:10', dish: '油条',   line: 'A', method: 'waste',     amount: 0.6, receiver: '—',              operator: '王五', note: '临期' },
+                { time: '09:40:50', dish: '花卷',   line: 'A', method: 'waste',     amount: 0.4, receiver: '—',              operator: '王五', note: '' },
+                { time: '09:41:30', dish: '鸡蛋饼', line: 'A', method: 'reprocess', amount: 1.0, receiver: '后厨 · 孙师傅',   operator: '王五', note: '员工餐' }
+              ]
+            }
+          }
+        ],
+        footer: { totalOrders: 98, totalRevenue: 1250.00, avgPer: 12.76, surplus: '8.4 kg' }
+      }
+    ];
+
+    /* ============ 全局状态 ============ */
+    var currentMealId = null;
+    var currentView = 'timeline';   // 'timeline' | 'detail'
+    var viewNodeIndex = -1;
+    var disposeFilter = 'all';
+
+    /* ============ 渲染左侧餐次列表 ============ */
+    function renderMealList() {
+      var groups = {};
+      MEAL_HISTORY.forEach(function (meal) {
+        if (!groups[meal.date]) groups[meal.date] = [];
+        groups[meal.date].push(meal);
+      });
+
+      var html = '';
+      Object.keys(groups).forEach(function (date) {
+        var meals = groups[date];
+        var label = meals[0].dateLabel + ' · ' + date.slice(5);
+        html += '<div class="date-group">';
+        html += '<div class="date-group__title">' + label + '</div>';
+        meals.forEach(function (meal) {
+          var statusCls = meal.status === 'live' ? 'meal-item__status--live'
+                        : meal.status === 'pending' ? 'meal-item__status--pending'
+                        : 'meal-item__status--done';
+          html += ''
+            + '<div class="meal-item" data-id="' + meal.id + '" onclick="selectMeal(\'' + meal.id + '\')">'
+            + '  <div class="meal-item__emoji">' + meal.emoji + '</div>'
+            + '  <div class="meal-item__body">'
+            + '    <div class="meal-item__name">' + meal.mealName + '</div>'
+            + '    <div class="meal-item__meta">' + meal.timeRange + '</div>'
+            + '  </div>'
+            + '  <span class="meal-item__status ' + statusCls + '">' + meal.statusLabel + '</span>'
+            + '</div>';
+        });
+        html += '</div>';
+      });
+
+      document.getElementById('mealListBody').innerHTML = html;
+      document.getElementById('totalCount').textContent = MEAL_HISTORY.length + ' 餐次';
+    }
+
+    /* ============ 选中餐次 ============ */
+    function selectMeal(mealId) {
+      currentMealId = mealId;
+      currentView = 'timeline';
+      viewNodeIndex = -1;
+      disposeFilter = 'all';
+
+      document.querySelectorAll('.meal-item').forEach(function (el) {
+        el.classList.toggle('is-active', el.getAttribute('data-id') === mealId);
+      });
+
+      var meal = getMeal();
+      if (!meal) return;
+
+      renderDetailHeader(meal);
+      renderTimeline(meal);
+      renderFooter(meal);
+      document.getElementById('detailSubhead').classList.remove('detail-subhead--show');
+    }
+
+    function getMeal() {
+      return MEAL_HISTORY.find(function (m) { return m.id === currentMealId; });
+    }
+
+    /* ============ 右侧头部 ============ */
+    function renderDetailHeader(meal) {
+      var pillCls = meal.status === 'live' ? 'detail-header__pill--live' : 'detail-header__pill--done';
+      var html = ''
+        + '<div class="detail-header__title">' + meal.emoji + ' ' + meal.mealName + ' · ' + meal.date + '</div>'
+        + '<span class="detail-header__pill ' + pillCls + '">' + meal.statusLabel + '</span>'
+        + '<div class="detail-header__spacer"></div>'
+        + '<div class="detail-header__info">'
+        + '  <div class="detail-header__info-item">操作人 <strong>' + meal.operator + '</strong></div>'
+        + '  <div class="detail-header__info-item">餐厅 <strong>' + meal.restaurant + '</strong></div>'
+        + '  <div class="detail-header__info-item">' + meal.timeRange + '</div>'
+        + '</div>';
+      document.getElementById('detailHeader').innerHTML = html;
+    }
+
+    /* ============ 时间轴渲染 ============ */
+    function renderTimeline(meal) {
+      var html = '<div class="timeline">';
+      meal.nodes.forEach(function (node, idx) {
+        var typeInfo = NODE_TYPES[node.type] || NODE_TYPES.start;
+        var focused = (idx === viewNodeIndex) ? ' is-focused' : '';
+
+        var tagsHtml = (node.tags || []).map(function (t) {
+          return '<span class="tl-tag ' + t.cls + '">' + t.text + '</span>';
+        }).join('');
+
+        /* 余量处置节点在卡片底部显示紧凑汇总 */
+        var disposeCompactHtml = '';
+        if (node.type === 'dispose' && node.dispose && node.dispose.methods) {
+          var items = node.dispose.methods.map(function (d) {
+            return '<div class="dispose-compact__item"><span class="dispose-compact__label">' + d.label + '</span>'
+              + '<span class="dispose-compact__value">' + d.amount + ' kg</span></div>';
+          }).join('');
+          disposeCompactHtml = '<div class="dispose-compact">' + items + '</div>';
+        }
+
+        html += ''
+          + '<div class="tl-node">'
+          + '  <div class="tl-node__dot ' + typeInfo.dotCls + '">' + typeInfo.dotIcon + '</div>'
+          + '  <div class="tl-node__card' + focused + '" onclick="openNodeDetail(' + idx + ')">'
+          + '    <div class="tl-node__head">'
+          + '      <div class="tl-node__title">' + node.title + '</div>'
+          + '      <div class="tl-node__time">' + node.time + '</div>'
+          + '    </div>'
+          + '    <div class="tl-node__desc">' + node.desc + '</div>'
+          + '    <div class="tl-node__tags">' + tagsHtml + '<span class="tl-node__open">查看明细 ›</span></div>'
+          + disposeCompactHtml
+          + '  </div>'
+          + '</div>';
+      });
+      html += '</div>';
+      document.getElementById('timeline').innerHTML = html;
+    }
+
+    /* ============ 底部统计 ============ */
+    function renderFooter(meal) {
+      var f = meal.footer;
+      var surplusColor = f.surplus === '进行中' ? 'footer-stat__value--gold' : 'footer-stat__value--red';
+      var surplusText = f.surplus === '进行中' ? '进行中' : f.surplus;
+      var html = ''
+        + '<div class="footer-stat"><span class="footer-stat__label">本餐次订单</span>'
+        + '  <span class="footer-stat__value">' + f.totalOrders + '<span class="footer-stat__unit">单</span></span></div>'
+        + '<div class="footer-divider"></div>'
+        + '<div class="footer-stat"><span class="footer-stat__label">本餐次营收</span>'
+        + '  <span class="footer-stat__value footer-stat__value--green">¥' + f.totalRevenue.toFixed(2) + '</span></div>'
+        + '<div class="footer-divider"></div>'
+        + '<div class="footer-stat"><span class="footer-stat__label">客单价</span>'
+        + '  <span class="footer-stat__value footer-stat__value--gold">¥' + f.avgPer.toFixed(2) + '</span></div>'
+        + '<div class="footer-divider"></div>'
+        + '<div class="footer-stat"><span class="footer-stat__label">余量处置</span>'
+        + '  <span class="footer-stat__value ' + surplusColor + '">' + surplusText + '</span></div>';
+      document.getElementById('detailFooter').innerHTML = html;
+    }
+
+    /* ============ 打开节点明细 ============ */
+    function openNodeDetail(idx) {
+      var meal = getMeal();
+      if (!meal) return;
+
+      viewNodeIndex = idx;
+      currentView = 'detail';
+      disposeFilter = 'all';
+
+      var node = meal.nodes[idx];
+      var typeInfo = NODE_TYPES[node.type] || NODE_TYPES.start;
+
+      /* 设置副头部 */
+      var subhead = document.getElementById('detailSubhead');
+      subhead.classList.add('detail-subhead--show');
+      document.getElementById('subheadBadge').className = 'detail-subhead__badge ' + typeInfo.badgeCls;
+      document.getElementById('subheadBadge').textContent = typeInfo.label;
+      document.getElementById('subheadTitle').textContent = node.title;
+      document.getElementById('subheadTime').textContent = node.time;
+
+      /* 渲染明细内容 */
+      var html = '';
+      switch (node.type) {
+        case 'start':   html = renderStartDetail(node); break;
+        case 'add':     html = renderAddDetail(meal); break;
+        case 'close':   html = renderCloseDetail(meal); break;
+        case 'dispose': html = renderDisposeDetail(node); break;
+        default:        html = '<div style="padding:20px;color:rgba(255,255,255,0.5)">暂无明细数据</div>';
+      }
+
+      document.getElementById('timeline').innerHTML = html;
+      /* 滚动到顶部 */
+      document.querySelector('.timeline-wrap').scrollTop = 0;
+    }
+
+    /* ============ 返回时间轴 ============ */
+    function backToTimeline() {
+      var meal = getMeal();
+      if (!meal) return;
+
+      currentView = 'timeline';
+      disposeFilter = 'all';
+      document.getElementById('detailSubhead').classList.remove('detail-subhead--show');
+      renderTimeline(meal);
+      document.querySelector('.timeline-wrap').scrollTop = 0;
+    }
+
+    /* ============ 开餐明细 ============ */
+    function renderStartDetail(node) {
+      var d = node.detail || {};
+      var dishes = d.dishes || [];
+      var fo = d.firstOrder;
+
+      /* 汇总条 */
+      var lines = {};
+      dishes.forEach(function (d) { lines[d.line] = true; });
+      var lineCount = Object.keys(lines).length;
+
+      var html = '<div class="detail-summary">';
+      html += '<div class="ds-card"><span class="ds-card__label">开餐时间</span><span class="ds-card__value">' + node.time + '</span></div>';
+      html += '<div class="ds-card"><span class="ds-card__label">餐线数</span><span class="ds-card__value ds-card__value--blue">' + lineCount + ' 条</span></div>';
+      html += '<div class="ds-card"><span class="ds-card__label">菜品数</span><span class="ds-card__value ds-card__value--green">' + dishes.length + ' 道</span></div>';
+      if (fo) {
+        html += '<div class="ds-card"><span class="ds-card__label">首单 · ' + fo.time + '</span>'
+          + '<span class="ds-card__value ds-card__value--gold">¥' + fo.amount.toFixed(2)
+          + ' <span style="font-size:10px;font-weight:400;color:rgba(255,255,255,0.5)">' + fo.customer + ' · ' + fo.line + '区</span></span></div>';
+      } else {
+        html += '<div class="ds-card"><span class="ds-card__label">首单</span><span class="ds-card__value" style="color:rgba(255,255,255,0.35)">—</span></div>';
+      }
+      html += '</div>';
+
+      /* 表格 */
+      html += '<div class="detail-table-wrap"><table class="detail-table">';
+      html += '<colgroup><col style="width:17%"><col style="width:9%"><col style="width:14%"><col style="width:12%"><col style="width:12%"><col style="width:18%" class="col-num"><col style="width:18%" class="col-num"></colgroup>';
+      html += '<thead><tr><th>菜品</th><th>餐线</th><th>上餐时间</th><th>制作人</th><th>操作人</th><th class="col-num">计划量 (kg)</th><th class="col-num">已售 (kg)</th></tr></thead>';
+      html += '<tbody>';
+      dishes.forEach(function (d) {
+        html += '<tr>'
+          + '<td>' + d.name + '</td>'
+          + '<td><span class="line-badge line-badge--' + d.line + '">' + d.line + '区</span></td>'
+          + '<td>' + d.serveTime + '</td>'
+          + '<td>' + d.maker + '</td>'
+          + '<td>' + d.operator + '</td>'
+          + '<td class="col-num">' + d.planned.toFixed(1) + '</td>'
+          + '<td class="col-num">' + d.sold.toFixed(1) + '</td>'
+          + '</tr>';
+      });
+      html += '</tbody></table></div>';
+      return html;
+    }
+
+    /* ============ 补餐明细（聚合所有 add 节点） ============ */
+    function renderAddDetail(meal) {
+      var addNodes = meal.nodes.filter(function (n) { return n.type === 'add'; });
+      var supplies = [];
+      addNodes.forEach(function (n) {
+        if (n.supply) supplies.push(n.supply);
+      });
+
+      if (supplies.length === 0) {
+        return '<div style="padding:20px;color:rgba(255,255,255,0.5)">暂无补餐记录</div>';
+      }
+
+      var totalAmount = 0, autoCount = 0, manualCount = 0;
+      supplies.forEach(function (s) {
+        totalAmount += s.addAmount;
+        if (s.reason === '自动预警') autoCount++;
+        else manualCount++;
+      });
+
+      var html = '<div class="detail-summary">';
+      html += '<div class="ds-card"><span class="ds-card__label">补餐次数</span><span class="ds-card__value ds-card__value--blue">' + supplies.length + ' 次</span></div>';
+      html += '<div class="ds-card"><span class="ds-card__label">累计补做量</span><span class="ds-card__value ds-card__value--gold">' + totalAmount.toFixed(1) + ' kg</span></div>';
+      html += '<div class="ds-card"><span class="ds-card__label">自动预警</span><span class="ds-card__value ds-card__value--green">' + autoCount + ' 次</span></div>';
+      html += '<div class="ds-card"><span class="ds-card__label">手动通知</span><span class="ds-card__value">' + manualCount + ' 次</span></div>';
+      html += '</div>';
+
+      html += '<div class="detail-table-wrap"><table class="detail-table">';
+      html += '<colgroup><col style="width:13%"><col style="width:15%"><col style="width:10%"><col style="width:14%" class="col-num"><col style="width:13%" class="col-num"><col style="width:12%"><col style="width:11%"><col style="width:12%"></colgroup>';
+      html += '<thead><tr><th>时间</th><th>餐品</th><th>餐线</th><th class="col-num">触发余量 (kg)</th><th class="col-num">补做量 (kg)</th><th>原因</th><th>操作人</th><th>状态</th></tr></thead>';
+      html += '<tbody>';
+      supplies.forEach(function (s, i) {
+        var reasonCls = s.reason === '自动预警' ? 'tl-tag--gold' : 'tl-tag--gray';
+        var statusCls = s.status === '已补做' ? 'tl-tag--green' : 'tl-tag--gold';
+        html += '<tr>'
+          + '<td>' + (addNodes[i] ? addNodes[i].time : '—') + '</td>'
+          + '<td>' + (s.dishEmoji || '') + ' ' + s.dish + '</td>'
+          + '<td><span class="line-badge line-badge--' + s.line + '">' + s.line + '区</span></td>'
+          + '<td class="col-num">' + s.triggerLeftover.toFixed(1) + '</td>'
+          + '<td class="col-num">' + s.addAmount.toFixed(1) + '</td>'
+          + '<td><span class="tl-tag ' + reasonCls + '">' + s.reason + '</span></td>'
+          + '<td>' + s.operator + '</td>'
+          + '<td><span class="tl-tag ' + statusCls + '">' + s.status + '</span></td>'
+          + '</tr>';
+      });
+      html += '</tbody></table></div>';
+      return html;
+    }
+
+    /* ============ 闭餐明细（聚合所有 close 节点） ============ */
+    function renderCloseDetail(meal) {
+      var closeNodes = meal.nodes.filter(function (n) { return n.type === 'close'; });
+      var allLines = [];
+      closeNodes.forEach(function (n) {
+        if (n.closeDetail && n.closeDetail.lines) {
+          allLines = allLines.concat(n.closeDetail.lines);
+        }
+      });
+
+      if (allLines.length === 0) {
+        return '<div style="padding:20px;color:rgba(255,255,255,0.5)">暂无闭餐记录</div>';
+      }
+
+      var totalOrders = 0, totalRevenue = 0;
+      allLines.forEach(function (l) {
+        totalOrders += l.orders;
+        totalRevenue += l.revenue;
+      });
+      var overallAvg = totalOrders > 0 ? (totalRevenue / totalOrders) : 0;
+
+      var endInfo = meal.endTime
+        ? ('<span class="ds-card__value" style="font-size:13px">' + meal.endTime + ' <span style="font-size:10px;font-weight:400;color:rgba(255,255,255,0.5)">· ' + meal.operator + '</span></span>')
+        : '<span class="ds-card__value ds-card__value--gold">进行中</span>';
+
+      var html = '<div class="detail-summary">';
+      html += '<div class="ds-card"><span class="ds-card__label">结束用餐</span>' + endInfo + '</div>';
+      html += '<div class="ds-card"><span class="ds-card__label">覆盖餐线</span><span class="ds-card__value ds-card__value--blue">' + allLines.length + ' 条</span></div>';
+      html += '<div class="ds-card"><span class="ds-card__label">总订单</span><span class="ds-card__value">' + totalOrders + ' 单</span></div>';
+      html += '<div class="ds-card"><span class="ds-card__label">总营收</span><span class="ds-card__value ds-card__value--green">¥' + totalRevenue.toFixed(2) + '</span></div>';
+      html += '</div>';
+
+      html += '<div class="detail-table-wrap"><table class="detail-table">';
+      html += '<colgroup><col style="width:24%"><col style="width:22%"><col style="width:18%" class="col-num"><col style="width:18%" class="col-num"><col style="width:18%" class="col-num"></colgroup>';
+      html += '<thead><tr><th>餐线</th><th>闭餐时间</th><th class="col-num">订单数</th><th class="col-num">营收</th><th class="col-num">客单价</th></tr></thead>';
+      html += '<tbody>';
+      allLines.forEach(function (l) {
+        html += '<tr>'
+          + '<td><span class="line-badge line-badge--' + l.line + '">' + l.line + '区</span> ' + l.name + '</td>'
+          + '<td>' + l.closeTime + '</td>'
+          + '<td class="col-num">' + l.orders + '</td>'
+          + '<td class="col-num">¥' + l.revenue.toFixed(2) + '</td>'
+          + '<td class="col-num">¥' + l.avgPer.toFixed(2) + '</td>'
+          + '</tr>';
+      });
+      /* 合计行 */
+      html += '<tr class="detail-table__total">'
+        + '<td>合计</td><td>' + allLines.length + ' 条餐线</td>'
+        + '<td class="col-num">' + totalOrders + '</td>'
+        + '<td class="col-num">¥' + totalRevenue.toFixed(2) + '</td>'
+        + '<td class="col-num">¥' + overallAvg.toFixed(2) + '</td>'
+        + '</tr>';
+      html += '</tbody></table></div>';
+      return html;
+    }
+
+    /* ============ 余量处置明细 ============ */
+    function renderDisposeDetail(node) {
+      var d = node.dispose;
+      if (!d) {
+        return '<div style="padding:20px;color:rgba(255,255,255,0.5)">暂无处置记录</div>';
+      }
+
+      var html = '';
+
+      /* 方式汇总卡 */
+      html += '<div class="dmethod-grid">';
+      (d.methods || []).forEach(function (m) {
+        var mInfo = METHOD_MAP[m.key] || {};
+        html += '<div class="dmethod-card ' + (mInfo.cardCls || '') + '">'
+          + '<span class="dmethod-card__label">' + m.label + '</span>'
+          + '<span class="dmethod-card__value">' + m.amount.toFixed(1) + ' <span style="font-size:11px;font-weight:400">kg</span></span>'
+          + '<span class="dmethod-card__count">' + m.count + ' 笔</span>'
+          + '</div>';
+      });
+      /* 总量卡 */
+      html += '<div class="dmethod-card" style="background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)">'
+        + '<span class="dmethod-card__label">总处置量</span>'
+        + '<span class="dmethod-card__value" style="color:#fff">' + d.total.toFixed(1) + ' <span style="font-size:11px;font-weight:400">kg</span></span>'
+        + '<span class="dmethod-card__count">操作人 · ' + d.operator + '</span>'
+        + '</div>';
+      html += '</div>';
+
+      /* 筛选 tab */
+      html += '<div class="filter-tabs">';
+      var filters = [
+        { key: 'all',       label: '全部 (' + (d.records || []).length + ')' },
+        { key: 'welfare',   label: '员工福利' },
+        { key: 'donate',    label: '捐赠' },
+        { key: 'waste',     label: '废弃' },
+        { key: 'reprocess', label: '加工再利用' }
+      ];
+      filters.forEach(function (f) {
+        html += '<span class="filter-tab' + (disposeFilter === f.key ? ' is-active' : '') + '" onclick="setDisposeFilter(\'' + f.key + '\')">' + f.label + '</span>';
+      });
+      html += '</div>';
+
+      /* 记录表 */
+      var records = d.records || [];
+      if (disposeFilter !== 'all') {
+        records = records.filter(function (r) { return r.method === disposeFilter; });
+      }
+
+      html += '<div class="detail-table-wrap"><table class="detail-table">';
+      html += '<colgroup><col style="width:12%"><col style="width:13%"><col style="width:8%"><col style="width:12%"><col style="width:11%" class="col-num"><col style="width:17%"><col style="width:10%"><col style="width:17%"></colgroup>';
+      html += '<thead><tr><th>时间</th><th>餐品</th><th>餐线</th><th>处置方式</th><th class="col-num">处置量 (kg)</th><th>接收方 · 领用人</th><th>操作人</th><th>备注</th></tr></thead>';
+      html += '<tbody>';
+      if (records.length === 0) {
+        html += '<tr><td colspan="8" style="text-align:center;color:rgba(255,255,255,0.4);padding:20px">暂无该类型的处置记录</td></tr>';
+      } else {
+        records.forEach(function (r) {
+          var mInfo = METHOD_MAP[r.method] || {};
+          html += '<tr>'
+            + '<td>' + r.time + '</td>'
+            + '<td>' + r.dish + '</td>'
+            + '<td><span class="line-badge line-badge--' + r.line + '">' + r.line + '区</span></td>'
+            + '<td><span class="method-badge ' + (mInfo.cls || '') + '">' + (mInfo.label || r.method) + '</span></td>'
+            + '<td class="col-num">' + r.amount.toFixed(1) + '</td>'
+            + '<td>' + r.receiver + '</td>'
+            + '<td>' + r.operator + '</td>'
+            + '<td>' + (r.note || '—') + '</td>'
+            + '</tr>';
+        });
+      }
+      html += '</tbody></table></div>';
+      return html;
+    }
+
+    /* ============ 筛选切换 ============ */
+    function setDisposeFilter(key) {
+      disposeFilter = key;
+      var meal = getMeal();
+      if (!meal) return;
+      var node = meal.nodes[viewNodeIndex];
+      if (!node || node.type !== 'dispose') return;
+      document.getElementById('timeline').innerHTML = renderDisposeDetail(node);
+    }
+
+    /* ============ 日期显示 ============ */
+    function updateDate() {
+      var now = new Date();
+      var year = now.getFullYear();
+      var month = String(now.getMonth() + 1).padStart(2, '0');
+      var date = String(now.getDate()).padStart(2, '0');
+      var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()];
+      document.getElementById('topMeta').textContent = year + '-' + month + '-' + date + ' ' + weekDay;
+    }
+    updateDate();
+
+    /* ============ 初始化 ============ */
+    (function () {
+      var params = new URLSearchParams(window.location.search);
+      var date = params.get('date');
+      var mealKey = params.get('meal');
+      var targetId = date && mealKey ? (date + '-' + mealKey) : null;
+      var matched = targetId && MEAL_HISTORY.find(function (m) { return m.id === targetId; });
+      renderMealList();
+      selectMeal(matched ? matched.id : MEAL_HISTORY[0].id);
+    })();
+  </script>
+
+</body>
+</html>
diff --git a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md
index 4e2a321..5f37c47 100644
--- a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md
+++ b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md
@@ -1,5 +1,44 @@
 # 结算设备 CHANGELOG
 
+## 2026-08-10 | 餐次管理模块新增(10-13 四页联动)
+
+### 业务背景
+原 `02-standby.html` 待机页底部「餐次管理」按钮(commit 32bd018 中由"小票打印"改名而来)一直为 `javascript:void(0)` 占位状态,功能未实现。本次落地完整的餐次管理业务闭环:开餐 → 上餐/加餐/闭餐 → 结束用餐 → 余量处置 → 历史回溯。
+
+### 变更清单
+- **入口改名**(`02-standby.html`):底部第 3 张入口卡片文案由「用餐管理 - 用餐记录/餐次管理」改为「餐次管理 - 开餐/结束用餐/历史记录」,跳转目标由占位改为 `10-meal-center.html`
+- **新增 4 个页面**:
+  - `10-meal-center.html` 餐次管理入口页:左右两个大卡(左餐次开关 + 右历史记录),含当前餐次状态摘要条与实时时钟;URL 参数 `?toast=submitted` 驱动提交成功的 Toast 提示
+  - `11-meal-active.html` 开餐中详情页:开餐信息条(操作人/餐厅/开餐时间/已开时长/订单数) + 餐线 Tab(A/B/C 三区切换) + 餐品图文卡(余量进度条/余量阈值配色/已售份数) + 「通知补餐」按钮(含 toast 反馈 + 按钮态切换) + 底部「结束用餐」按钮(二次确认弹窗 → 跳余量处置页)
+  - `12-meal-end-surplus.html` 余量处置引导页:顶部信息条 + 批量操作工具栏(全选/批量处置方式下拉/应用到选中项) + 表格化余量列表(餐品/餐线/实制/已售/余量/余量率/处置方式/处置量/备注) + 汇总栏(总余量/已处置/待处置/处置方式分布) + 提交二次确认弹窗
+  - `13-meal-history.html` 历史记录页:左 30% 餐次列表(按日期分组 + 状态徽标) + 右 70% 流程时间轴(开餐→上餐→加餐→闭餐→结束→余量处置六类节点,色编码 + 节点卡片 + 处置明细) + 底部统计(订单/营收/客单价/余量)
+- **导航页同步**(`index.html`):收银员屏区追加 4 张卡片(10-13),其中 10 标记「新」核心徽标
+
+### 业务路径
+```
+02-standby.html (待机页,入口改名 + 跳转)
+   └─ 10-meal-center.html (二级入口:左开餐开关 + 右历史记录)
+         ├─ 11-meal-active.html?meal=lunch (开餐中:餐线 Tab + 餐品列表 + 通知补餐 + 结束用餐)
+         │     └─ 12-meal-end-surplus.html?meal=lunch (余量处置:批量处置 + 提交跳回 10)
+         └─ 13-meal-history.html (历史:左餐次列表 + 右时间轴)
+```
+
+### 设计要点
+- **余量处置四选项**(员工福利/捐赠/废弃/加工再利用)严格对齐后台 `web-admin/nutrition/prod-proc-surplus.html` 的处置方式体系,确保前后台业务语义一致
+- **余量阈值三态**:≤10% 红色(紧急补餐)/ ≤25% 金色(预警)/ >25% 绿色(正常),通过 `stock-bar__fill--{ok|mid|low}` 修饰符联动配色
+- **餐次状态三态**:进行中(绿色脉冲)/ 已结束(灰色)/ 未开餐(占位)
+- **时间轴节点六类**:开餐(绿▶)/ 上餐(蓝🍽)/ 加餐(金➕)/ 闭餐(灰✕)/ 结束(红⏹)/ 处置(紫♻),通过渐变竖线串联
+- **URL 参数驱动**:`?meal=lunch|breakfast|dinner` 切换餐次上下文,`?toast=submitted` 触发提交成功 Toast,`?date=2026-08-09&meal=lunch` 跳转历史指定餐次
+- **批量处置交互**:复选框 + 顶部下拉"批量应用处置方式",处置方式变更联动下拉配色(福利蓝/捐赠绿/废弃红/再利用紫)
+- **二次确认**:结束用餐(弹窗 → 跳余量处置)、提交处置(弹窗 → 显示处置汇总 → 跳餐次管理并触发 Toast)
+
+### 不变更
+- 现有 9 个收银员屏页面(01-09)与 4 个用户屏页面(user-01~04)结构与样式保持不变
+- 用户类型徽标体系、支付方式徽标体系保持不变
+- 副屏人脸识别监控区三态轮播逻辑保持不变
+
+---
+
 ## 2026-08-10 | 待机页(02)新增副屏人脸识别监控区 + 入口改名
 
 ### 业务背景
diff --git a/other-module/canteen-device/checkout-device/index.html b/other-module/canteen-device/checkout-device/index.html
index 1389623..bce940c 100644
--- a/other-module/canteen-device/checkout-device/index.html
+++ b/other-module/canteen-device/checkout-device/index.html
@@ -311,6 +311,38 @@
               <div class="card__desc">餐后小票预览与打印</div>
             </div>
           </a>
+          <a class="card" href="10-meal-center.html">
+            <span class="card__status card__status--core">10 新</span>
+            <div class="card__icon">&#x1F37D;&#xFE0F;</div>
+            <div class="card__body">
+              <div class="card__title">餐次管理</div>
+              <div class="card__desc">开餐开关 / 历史记录入口</div>
+            </div>
+          </a>
+          <a class="card" href="11-meal-active.html?meal=lunch">
+            <span class="card__status card__status--done">11</span>
+            <div class="card__icon">&#x1F50A;</div>
+            <div class="card__body">
+              <div class="card__title">开餐中详情</div>
+              <div class="card__desc">开餐信息 + 餐线餐品 + 补餐 + 结束</div>
+            </div>
+          </a>
+          <a class="card" href="12-meal-end-surplus.html?meal=lunch">
+            <span class="card__status card__status--done">12</span>
+            <div class="card__icon">&#x26D4;</div>
+            <div class="card__body">
+              <div class="card__title">余量处置</div>
+              <div class="card__desc">结束用餐引导 · 批量处置</div>
+            </div>
+          </a>
+          <a class="card" href="13-meal-history.html">
+            <span class="card__status card__status--done">13</span>
+            <div class="card__icon">&#x1F4DC;</div>
+            <div class="card__body">
+              <div class="card__title">餐次历史记录</div>
+              <div class="card__desc">开餐/补餐/闭餐/余量处置 · 点击查看明细</div>
+            </div>
+          </a>
         </div>
       </div>