From deb475222c7fc7cbffbb44a80ec93ed2f65e9dea Mon Sep 17 00:00:00 2001
From: fengpu <18691763612@163.com>
Date: Mon, 10 Aug 2026 10:46:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=B6=E9=93=B6=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7=E7=B1=BB=E5=9E=8B=E5=BE=BD?=
 =?UTF-8?q?=E6=A0=87=E4=BD=93=E7=B3=BB=20+=20=E8=A1=A5=E9=BD=90=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86=E9=A1=B5=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 主屏(03/04/05/06/07)与副屏(user-02/03/04)统一用户类型徽标:会员/临时/员工三种配色
- 订单列表(05)与订单详情(06)增加用户类型展示,新增顾客信息卡片
- 订单详情(06)移除"补齐明细"入口(支付后不再适用)
- 补齐明细页(08)重构为表格化结构,新增"未识别取餐记录"作为少记加入来源
- 导航页"结算设备"改名为"结算台"

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../checkout-device/03-checkout.html          | 1620 +++++++++++++----
 .../checkout-device/04-pay-success.html       |  251 ++-
 .../checkout-device/05-orders.html            |  124 +-
 .../checkout-device/06-order-detail.html      |  341 +++-
 .../checkout-device/07-statistics.html        |  811 ++++-----
 .../checkout-device/08-reconcile.html         | 1127 +++++++-----
 .../checkout-device/doc/CHANGELOG.md          |  304 ++++
 .../user-02-checkout-sync.html                |  373 +++-
 .../checkout-device/user-03-paying.html       | 1010 +++++++++-
 .../checkout-device/user-04-success.html      |  418 +++--
 other-module/canteen-device/index.html        |    2 +-
 11 files changed, 4900 insertions(+), 1481 deletions(-)

diff --git a/other-module/canteen-device/checkout-device/03-checkout.html b/other-module/canteen-device/checkout-device/03-checkout.html
index cf9d47a..ad5ae71 100644
--- a/other-module/canteen-device/checkout-device/03-checkout.html
+++ b/other-module/canteen-device/checkout-device/03-checkout.html
@@ -57,6 +57,7 @@
       font-size: 12px;
       color: rgba(255, 255, 255, 0.5);
       font-family: Menlo, Consolas, monospace;
+      margin-left: 14px;
     }
 
     /* 用户信息条(顶部第二条) */
@@ -128,25 +129,37 @@
       font-family: Menlo, Consolas, monospace;
       font-weight: 700;
     }
-    .user-bar__level {
-      padding: 5px 12px;
-      background: linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(251, 146, 60, 0.2));
-      border: 1px solid rgba(251, 191, 36, 0.55);
-      border-radius: 12px;
+    /* 用户类型徽标(参考 user-02 风格,支持会员/临时/员工三种) */
+    .user-type {
+      padding: 6px 14px;
+      border-radius: 14px;
       font-size: 12px;
-      color: #fbbf24;
       font-weight: 700;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      line-height: 1.2;
+      text-align: center;
+      line-height: 1.3;
+      letter-spacing: 0.5px;
       flex-shrink: 0;
     }
-    .user-bar__level small {
-      font-size: 9px;
-      color: rgba(251, 191, 36, 0.85);
-      font-weight: 500;
-      margin-top: 1px;
+    .user-type--member {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.28), rgba(251, 191, 36, 0.32));
+      border: 1px solid rgba(251, 191, 36, 0.55);
+      color: #fbbf24;
+      box-shadow: 0 2px 8px rgba(251, 191, 36, 0.18);
+    }
+    .user-type--member .level {
+      color: #fde68a;
+      font-weight: 800;
+      margin-left: 4px;
+    }
+    .user-type--temp {
+      background: rgba(148, 163, 184, 0.18);
+      border: 1px solid rgba(148, 163, 184, 0.45);
+      color: #cbd5e1;
+    }
+    .user-type--staff {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(74, 144, 217, 0.14));
+      border: 1px solid rgba(96, 165, 250, 0.5);
+      color: #60a5fa;
     }
 
     /* 主内容:三列 */
@@ -221,70 +234,54 @@
       color: #fff;
     }
 
-    /* 商品列表区 */
+    /* 商品列表区(参考 user-02 表格化风格,删除热量列,无自动滚动) */
     .items-list {
       flex: 1;
       overflow-y: auto;
-      padding: 10px 28px 14px;
+      padding: 10px 24px 12px;
       scrollbar-width: none;
     }
     .items-list::-webkit-scrollbar { display: none; }
 
-    /* 表头 */
-    .table-head {
-      display: grid;
-      grid-template-columns: 24px auto 1fr auto;
-      gap: 10px;
-      padding: 6px 14px;
+    /* 餐品明细表格(无热量列:序号 / 类别 / 餐品名称 / 单价 / 取餐量 / 金额) */
+    .items-table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .items-table th,
+    .items-table td {
+      padding: 9px 8px;
+      text-align: left;
+      vertical-align: middle;
+    }
+    /* 列宽分配(共 6 列,总宽 ~830px,与左栏宽度匹配) */
+    .items-table col.col-seq    { width: 40px; }
+    .items-table col.col-cat    { width: 64px; }
+    .items-table col.col-name   { width: auto; }
+    .items-table col.col-unit   { width: 110px; }
+    .items-table col.col-weight { width: 100px; }
+    .items-table col.col-price  { width: 100px; }
+
+    .items-table thead th {
       font-size: 11px;
-      color: rgba(255, 255, 255, 0.4);
+      color: rgba(255, 255, 255, 0.5);
       letter-spacing: 1px;
       font-weight: 500;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-      margin-bottom: 4px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      padding-bottom: 8px;
     }
-    .table-head__name { text-align: left; }
-    .table-head__weight { text-align: center; justify-self: center; }
-    .table-head__price { text-align: right; }
+    .items-table thead th.col-cat-h,
+    .items-table thead th.col-weight-h { text-align: center; }
+    .items-table thead th.col-unit-h,
+    .items-table thead th.col-price-h { text-align: right; }
 
-    /* 分组标题 */
-    .zone-header {
-      font-size: 13px;
-      color: rgba(255, 255, 255, 0.6);
-      font-weight: 600;
-      letter-spacing: 0.5px;
-      padding: 6px 0 8px;
-      border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
-      margin-bottom: 6px;
-      margin-top: 8px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .zone-header__count {
-      padding: 1px 8px;
-      background: rgba(74, 144, 217, 0.18);
-      border-radius: 10px;
-      font-size: 11px;
-      color: #60a5fa;
-      font-weight: 500;
-    }
+    .items-table tbody td { border-bottom: 1px dashed rgba(255, 255, 255, 0.05); }
+    .items-table tbody tr:hover td { background: rgba(74, 144, 217, 0.08); }
 
-    /* 商品行 */
-    .item-card {
-      display: grid;
-      grid-template-columns: 24px auto 1fr auto;
-      gap: 10px;
-      padding: 8px 14px;
-      background: rgba(26, 43, 74, 0.35);
-      border: 1px solid rgba(255, 255, 255, 0.04);
-      border-radius: 8px;
-      margin-bottom: 4px;
-      align-items: center;
-    }
-    .item-card__seq {
-      width: 22px;
-      height: 22px;
+    .cell-seq {
+      width: 24px;
+      height: 24px;
       border-radius: 50%;
       background: rgba(74, 144, 217, 0.18);
       border: 1px solid rgba(74, 144, 217, 0.35);
@@ -292,18 +289,11 @@
       font-size: 11px;
       font-weight: 700;
       font-family: Menlo, Consolas, monospace;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
-      flex-shrink: 0;
     }
-    .item-card__info {
-      display: flex;
-      align-items: baseline;
-      gap: 8px;
-      min-width: 0;
-    }
-    .item-card__name {
+    .cell-name {
       font-size: 15px;
       color: #fff;
       font-weight: 600;
@@ -311,25 +301,52 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .item-card__unit-price {
+    /* 类别徽标:餐线 / 档口 */
+    .cell-cat {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px 0;
+      width: 48px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 1px;
+      line-height: 1.4;
+    }
+    .cell-cat--line {
+      background: rgba(96, 165, 250, 0.18);
+      border: 1px solid rgba(96, 165, 250, 0.45);
+      color: #60a5fa;
+    }
+    .cell-cat--booth {
+      background: rgba(251, 146, 60, 0.18);
+      border: 1px solid rgba(251, 146, 60, 0.45);
+      color: #fb923c;
+    }
+    .cell-unit {
+      text-align: right;
       font-size: 12px;
       color: rgba(255, 255, 255, 0.55);
       font-family: Menlo, Consolas, monospace;
-      flex-shrink: 0;
+      white-space: nowrap;
     }
-    .item-card__weight {
-      font-size: 12px;
+    .cell-weight {
+      text-align: center;
       color: #0AC4A8;
       font-family: Menlo, Consolas, monospace;
+      font-size: 13px;
+      white-space: nowrap;
+    }
+    .cell-weight__pill {
+      display: inline-block;
       padding: 2px 10px;
       background: rgba(10, 196, 168, 0.12);
       border-radius: 10px;
-      white-space: nowrap;
-      text-align: center;
-      min-width: 76px;
-      justify-self: center;
+      min-width: 70px;
     }
-    .item-card__price {
+    .cell-price {
+      text-align: right;
       font-size: 16px;
       color: #0AC4A8;
       font-weight: 700;
@@ -337,28 +354,43 @@
       white-space: nowrap;
     }
 
-    /* 统一小计条 */
-    .subtotal-bar {
-      margin-top: 10px;
-      padding: 12px 16px;
-      background: linear-gradient(90deg, rgba(10, 196, 168, 0.12), rgba(74, 144, 217, 0.08));
-      border: 1px solid rgba(10, 196, 168, 0.3);
+    /* 合计行(固定底部,与表头列对齐,无热量列) */
+    .items-footer {
+      margin-top: 8px;
+      border-top: 1.5px solid rgba(10, 196, 168, 0.4);
+      background: linear-gradient(90deg, rgba(10, 196, 168, 0.14), rgba(74, 144, 217, 0.08));
       border-radius: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
     }
-    .subtotal-bar__count {
+    .items-footer table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .items-footer td {
+      padding: 12px 8px;
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.75);
+      vertical-align: middle;
+    }
+    .items-footer td.col-seq-f    { width: 40px; }
+    .items-footer td.col-cat-f    { width: 64px; }
+    .items-footer td.col-name-f   { width: auto; }
+    .items-footer td.col-unit-f   { width: 110px; }
+    .items-footer td.col-weight-f { width: 100px; text-align: center; }
+    .items-footer td.col-price-f  { width: 100px; text-align: right; }
+    .footer-label {
       font-size: 13px;
       color: rgba(255, 255, 255, 0.7);
+      letter-spacing: 1px;
+      font-weight: 600;
     }
-    .subtotal-bar__count strong {
-      color: #fff;
+    .footer-value {
       font-size: 15px;
+      color: #fff;
+      font-weight: 700;
       font-family: Menlo, Consolas, monospace;
-      margin: 0 2px;
     }
-    .subtotal-bar__amount {
+    .footer-amount {
       font-size: 22px;
       font-weight: 700;
       color: #0AC4A8;
@@ -393,14 +425,14 @@
     }
     .pay-col__body::-webkit-scrollbar { display: none; }
 
-    .pay-col__section { padding: 14px 20px; }
+    .pay-col__section { padding: 6px 14px; }
     .pay-col__section + .pay-col__section { border-top: 1px solid rgba(255, 255, 255, 0.06); }
 
     .section-label {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.5);
       letter-spacing: 1px;
-      margin-bottom: 10px;
+      margin-bottom: 4px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -414,19 +446,19 @@
     }
 
     /* 金额汇总 */
-    .amount-block { padding: 4px 0 0; }
+    .amount-block { padding: 1px 0 0; }
     .amount-row {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
-      padding: 4px 0;
-      font-size: 13px;
+      padding: 2px 0;
+      font-size: 12.5px;
     }
     .amount-row__label { color: rgba(255, 255, 255, 0.6); }
     .amount-row__value { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
     .amount-row--total {
-      margin-top: 6px;
-      padding-top: 10px;
+      margin-top: 3px;
+      padding-top: 6px;
       border-top: 1px dashed rgba(255, 255, 255, 0.12);
     }
     .amount-row--total .amount-row__label {
@@ -440,21 +472,21 @@
       font-weight: 700;
     }
 
-    /* 支付方式 Tab */
+    /* 支付方式 Tab(3 列:在线/现金/余额,代金券独立为优惠入口) */
     .pay-tabs {
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(3, 1fr);
       gap: 8px;
     }
     .pay-tab {
-      padding: 14px 10px;
+      padding: 8px 6px;
       background: rgba(26, 43, 74, 0.4);
       border: 1px solid rgba(255, 255, 255, 0.08);
       border-radius: 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 6px;
+      gap: 3px;
       cursor: pointer;
       transition: all 0.2s;
       text-align: center;
@@ -468,38 +500,10 @@
       border-color: #4a90d9;
       box-shadow: 0 0 0 1px rgba(74, 144, 217, 0.4), 0 4px 14px rgba(74, 144, 217, 0.25);
     }
-    .pay-tab__icon { font-size: 26px; }
+    .pay-tab__icon { font-size: 22px; }
     .pay-tab__name { font-size: 12px; color: rgba(255, 255, 255, 0.85); font-weight: 600; }
     .pay-tab.active .pay-tab__name { color: #fff; }
 
-    /* 支付详情区 */
-    .pay-detail {
-      margin-top: 10px;
-      padding: 14px;
-      background: rgba(0, 0, 0, 0.2);
-      border: 1px solid rgba(255, 255, 255, 0.06);
-      border-radius: 10px;
-      font-size: 12px;
-      color: rgba(255, 255, 255, 0.75);
-      line-height: 1.7;
-      min-height: 76px;
-    }
-    .pay-detail__title {
-      font-weight: 600;
-      color: #fff;
-      margin-bottom: 4px;
-      font-size: 13px;
-    }
-    .pay-detail__hint {
-      color: rgba(255, 255, 255, 0.55);
-      font-size: 11px;
-    }
-    .pay-detail__status {
-      margin-top: 6px;
-      font-size: 11px;
-      color: #60a5fa;
-    }
-
     /* 餐券输入区 */
     .coupon-input-row {
       display: flex;
@@ -537,6 +541,267 @@
       transform: translateY(-1px);
     }
 
+    /* 现金实收输入区 */
+    .cash-input-row {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      margin-top: 6px;
+      padding: 7px 12px;
+      background: rgba(0, 0, 0, 0.25);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 8px;
+    }
+    .cash-input-row__label {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.65);
+      flex-shrink: 0;
+    }
+    .cash-input {
+      flex: 1;
+      padding: 6px 10px;
+      background: rgba(0, 0, 0, 0.35);
+      border: 1px solid rgba(74, 144, 217, 0.3);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 15px;
+      font-weight: 700;
+      font-family: Menlo, Consolas, monospace;
+      outline: none;
+      min-width: 0;
+    }
+    .cash-input:focus { border-color: #4a90d9; }
+    .cash-input::placeholder { color: rgba(255, 255, 255, 0.3); font-weight: 400; }
+
+    /* 快捷金额按钮 */
+    .quick-cash {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 4px;
+      margin-top: 5px;
+    }
+    .quick-cash__btn {
+      padding: 5px 4px;
+      background: rgba(26, 43, 74, 0.5);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 11px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .quick-cash__btn:hover {
+      background: rgba(74, 144, 217, 0.15);
+      border-color: rgba(74, 144, 217, 0.4);
+      color: #fff;
+    }
+    .quick-cash__btn--exact {
+      background: rgba(10, 196, 168, 0.15);
+      border-color: rgba(10, 196, 168, 0.4);
+      color: #0AC4A8;
+    }
+    .quick-cash__btn--exact:hover {
+      background: rgba(10, 196, 168, 0.25);
+      color: #fff;
+    }
+
+    /* 找零/补差结果区(精简单行版,避免溢出) */
+    .cash-result {
+      display: none;
+      margin-top: 5px;
+      padding: 5px 12px;
+      border-radius: 8px;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .cash-result.show { display: flex; }
+    .cash-result--change {
+      background: linear-gradient(135deg, rgba(82, 196, 26, 0.15), rgba(10, 196, 168, 0.08));
+      border: 1px solid rgba(82, 196, 26, 0.4);
+    }
+    .cash-result--diff {
+      background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(245, 34, 45, 0.05));
+      border: 1px solid rgba(251, 146, 60, 0.45);
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .cash-result__main {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      flex: 1;
+      min-width: 0;
+    }
+    .cash-result__label {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 12px;
+    }
+    .cash-result__value {
+      font-family: Menlo, Consolas, monospace;
+      font-weight: 800;
+      color: #4ade80;
+      font-size: 18px;
+    }
+    .cash-result--diff .cash-result__value {
+      color: #fb923c;
+    }
+    .cash-result__action {
+      padding: 4px 12px;
+      background: linear-gradient(135deg, #fb923c, #f97316);
+      border: none;
+      border-radius: 6px;
+      color: #fff;
+      font-size: 11.5px;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-family: inherit;
+      text-align: center;
+      width: 100%;
+      margin-top: 4px;
+    }
+    .cash-result__action:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 14px rgba(251, 146, 60, 0.35);
+    }
+
+    /* 金额汇总新分行 */
+    .amount-row__value--coupon { color: #fbbf24; }
+    .amount-row__value--balance-deduct { color: #0AC4A8; }
+    .amount-row__value--diff { color: #fb923c; }
+
+    /* 混合支付状态条 */
+    .mixed-progress {
+      display: none;
+      margin-bottom: 8px;
+      padding: 7px 10px;
+      background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(74, 144, 217, 0.08));
+      border: 1px solid rgba(251, 146, 60, 0.4);
+      border-radius: 8px;
+    }
+    .mixed-progress.show { display: block; }
+    .mixed-progress__head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 5px;
+    }
+    .mixed-progress__title {
+      font-size: 12px;
+      font-weight: 700;
+      color: #fb923c;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .mixed-progress__step {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.55);
+      padding: 2px 8px;
+      background: rgba(0, 0, 0, 0.25);
+      border-radius: 8px;
+    }
+    .mixed-progress__steps {
+      display: grid;
+      grid-template-columns: 1fr 16px 1fr;
+      gap: 6px;
+      align-items: center;
+    }
+    .mixed-progress__step-card {
+      padding: 6px 8px;
+      border-radius: 6px;
+      font-size: 11px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .mixed-progress__step-card--done {
+      background: rgba(82, 196, 26, 0.15);
+      border: 1px solid rgba(82, 196, 26, 0.4);
+      color: #4ade80;
+    }
+    .mixed-progress__step-card--pending {
+      background: rgba(251, 146, 60, 0.12);
+      border: 1px solid rgba(251, 146, 60, 0.4);
+      color: #fb923c;
+    }
+    .mixed-progress__step-amount {
+      font-family: Menlo, Consolas, monospace;
+      font-weight: 700;
+      color: #fff;
+    }
+    .mixed-progress__connector {
+      height: 2px;
+      background: linear-gradient(90deg, #4ade80, #fb923c);
+      border-radius: 1px;
+    }
+
+    /* 余额不足时的应补差额行 + 补差按钮(内嵌于 balance-info) */
+    .balance-info__diff-row {
+      display: none;
+      margin-top: 6px;
+      padding: 6px 10px;
+      background: rgba(251, 146, 60, 0.12);
+      border-left: 2px solid #fb923c;
+      border-radius: 4px;
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.85);
+      align-items: center;
+      gap: 6px;
+    }
+    .balance-info__diff-row.show { display: flex; }
+    .balance-info__diff-value {
+      margin-left: auto;
+      color: #fb923c;
+      font-size: 18px;
+      font-weight: 800;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .balance-info__actions {
+      display: none;
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px dashed rgba(251, 146, 60, 0.3);
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    .balance-info__actions.show { display: grid; }
+    .balance-info__action {
+      padding: 10px 6px;
+      background: rgba(26, 43, 74, 0.6);
+      border: 1px solid rgba(74, 144, 217, 0.4);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+      text-align: center;
+      font-family: inherit;
+    }
+    .balance-info__action:hover {
+      background: rgba(74, 144, 217, 0.3);
+      border-color: #4a90d9;
+      transform: translateY(-1px);
+    }
+    /* 补差方式选中态(混合支付进行中标识当前选择) */
+    .balance-info__action--active {
+      background: linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(251, 146, 60, 0.22));
+      border-color: #fbbf24;
+      box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18);
+      cursor: default;
+      transform: none;
+    }
+    .balance-info__action-icon { font-size: 18px; line-height: 1; }
+    .balance-info__action-name {
+      display: block;
+      font-size: 12px;
+      color: #fff;
+      font-weight: 600;
+      margin-top: 3px;
+    }
+
     /* 餐券详情卡 */
     .coupon-detail {
       display: none;
@@ -597,8 +862,8 @@
     /* 余额支付信息卡 */
     .balance-info {
       display: none;
-      margin-top: 10px;
-      padding: 12px;
+      margin-top: 8px;
+      padding: 10px 12px;
       background: linear-gradient(135deg, rgba(10, 196, 168, 0.12), rgba(74, 144, 217, 0.06));
       border: 1px solid rgba(10, 196, 168, 0.35);
       border-radius: 10px;
@@ -608,7 +873,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 6px 0;
+      padding: 3px 0;
     }
     .balance-info__row + .balance-info__row {
       border-top: 1px dashed rgba(255, 255, 255, 0.08);
@@ -641,8 +906,8 @@
       font-weight: 700;
     }
     .balance-info__tip {
-      margin-top: 8px;
-      padding: 6px 8px;
+      margin-top: 6px;
+      padding: 5px 8px;
       background: rgba(82, 196, 26, 0.1);
       border-left: 2px solid #4ade80;
       border-radius: 4px;
@@ -650,6 +915,132 @@
       color: rgba(255, 255, 255, 0.78);
     }
 
+    /* ============ 代金券独立入口(金额汇总区下方) ============ */
+    .coupon-entry {
+      margin-top: 5px;
+      padding: 7px 12px;
+      background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 146, 60, 0.04));
+      border: 1px dashed rgba(251, 191, 36, 0.4);
+      border-radius: 10px;
+    }
+    .coupon-entry--active {
+      background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 146, 60, 0.08));
+      border: 1px solid rgba(251, 191, 36, 0.55);
+      border-style: solid;
+    }
+    .coupon-entry__head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+    }
+    .coupon-entry__title {
+      font-size: 12px;
+      color: #fbbf24;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .coupon-entry__value {
+      font-size: 16px;
+      color: #fbbf24;
+      font-weight: 800;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .coupon-entry__btn {
+      padding: 5px 12px;
+      background: rgba(251, 191, 36, 0.2);
+      border: 1px solid rgba(251, 191, 36, 0.5);
+      border-radius: 8px;
+      color: #fbbf24;
+      font-size: 11px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-family: inherit;
+    }
+    .coupon-entry__btn:hover {
+      background: rgba(251, 191, 36, 0.35);
+      color: #fff;
+    }
+    .coupon-entry__btn--cancel {
+      background: rgba(255, 255, 255, 0.06);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.7);
+    }
+    .coupon-entry__btn--cancel:hover {
+      background: rgba(245, 34, 45, 0.18);
+      border-color: rgba(245, 34, 45, 0.45);
+      color: #ff6b6b;
+    }
+    .coupon-entry__input-row {
+      display: flex;
+      gap: 6px;
+      margin-top: 8px;
+    }
+    .coupon-entry__meta {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.55);
+      margin-top: 5px;
+      line-height: 1.4;
+      display: none !important; /* 默认隐藏,演示预载场景下不展示券号(信息冗余),真实环境可显示 */
+    }
+    .coupon-entry__meta strong { color: #fff; font-family: Menlo, Consolas, monospace; }
+
+    /* ============ 原型演示控制徽标(嵌入 top-bar 右侧,作为演示工具条) ============ */
+    .demo-control {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 3px 6px 3px 10px;
+      background: rgba(15, 8, 35, 0.85);
+      border: 1px solid rgba(167, 139, 250, 0.5);
+      border-radius: 14px;
+      backdrop-filter: blur(6px);
+      box-shadow: 0 2px 8px rgba(167, 139, 250, 0.2);
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .demo-control__label {
+      font-weight: 600;
+      color: #a7b3ff;
+      letter-spacing: 0.5px;
+    }
+    .demo-control__btn {
+      padding: 3px 9px;
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 12px;
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      transition: all 0.2s;
+      font-family: inherit;
+      white-space: nowrap;
+    }
+    .demo-control__btn:hover {
+      color: #fff;
+      background: rgba(167, 139, 250, 0.15);
+      border-color: rgba(167, 139, 250, 0.5);
+    }
+    .demo-control__btn.active {
+      background: rgba(167, 139, 250, 0.4);
+      color: #fff;
+      border-color: rgba(167, 139, 250, 0.7);
+      box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
+    }
+    .demo-control__btn--toggle {
+      background: rgba(251, 191, 36, 0.15);
+      border-color: rgba(251, 191, 36, 0.4);
+      color: #fbbf24;
+    }
+    .demo-control__btn--toggle.on {
+      background: rgba(251, 191, 36, 0.5);
+      color: #fff;
+      box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
+    }
+
     /* 底部操作按钮(固定) */
     .pay-col__actions {
       flex-shrink: 0;
@@ -731,24 +1122,34 @@
 
   <div class="device-frame">
 
-    <!-- 顶部导航 -->
+    <!-- 顶部导航(左侧:返回+订单号;中间:标题;右侧:演示控制) -->
     <div class="top-bar">
       <a class="back-btn" href="02-standby.html">&#x25C0; 取消结算</a>
+      <span class="top-bar__meta top-bar__meta--left" id="topMeta">订单号:CO-20260806-031</span>
       <span class="top-bar__title">订单结算</span>
-      <span class="top-bar__meta" id="topMeta">订单号:CO-20260806-031</span>
+      <!-- 原型演示控制徽标(嵌入 top-bar 右侧,用于演示不同支付场景) -->
+      <div class="demo-control">
+        <span class="demo-control__label">&#x1F3A8; 演示</span>
+        <button class="demo-control__btn active" data-scene="normal" onclick="switchScene('normal')">余额充足</button>
+        <button class="demo-control__btn" data-scene="low-balance" onclick="switchScene('low-balance')">余额不足</button>
+        <button class="demo-control__btn demo-control__btn--toggle" id="couponToggle" onclick="toggleCouponPreset()">代金券预载</button>
+        <button class="demo-control__btn" onclick="resetDemo()">&#x21BB;</button>
+      </div>
     </div>
 
-    <!-- 用户信息条 -->
+    <!-- 用户信息条(参考 user-02 风格:无隐私保护、无部门、用户类型徽标) -->
     <div class="user-bar">
       <div class="user-bar__avatar">&#x1F464;&#x200D;&#x1F33E;</div>
       <div class="user-bar__main">
         <div class="user-bar__name-row">
-          <span class="user-bar__name">张*明</span>
+          <span class="user-bar__name">张小明</span>
           <span class="user-bar__empno">EMP002346</span>
         </div>
-        <span class="user-bar__sub">研发中心 · 二荤餐线</span>
       </div>
       <div class="user-bar__spacer"></div>
+      <div class="user-type user-type--member">
+        会员用户<span class="level">&#xB7; 金牌 LV5</span>
+      </div>
       <div class="user-bar__meta">
         <div class="user-bar__meta-item">
           <span>账户余额</span>
@@ -756,13 +1157,9 @@
         </div>
         <div class="user-bar__meta-item">
           <span>本单应付</span>
-          <strong id="topPayable">&#xFFE5;41.60</strong>
+          <strong id="topPayable">&#xFFE5;64.40</strong>
         </div>
       </div>
-      <div class="user-bar__level">
-        金牌会员
-        <small>LV5</small>
-      </div>
     </div>
 
     <!-- 主内容 -->
@@ -773,7 +1170,7 @@
         <div class="items-col__header">
           <div class="items-col__title">
             &#x1F6CD;&#xFE0F; 取餐明细
-            <span class="items-col__count" id="itemCount">5 件</span>
+            <span class="items-col__count" id="itemCount">7 件</span>
           </div>
           <div class="items-col__actions">
             <a class="header-btn header-btn--primary" href="08-reconcile.html">
@@ -786,75 +1183,128 @@
         </div>
 
         <div class="items-list" id="itemsList">
-          <!-- 表头 -->
-          <div class="table-head">
-            <span>#</span>
-            <span class="table-head__name">餐品名称 / 单价</span>
-            <span class="table-head__weight">取餐量</span>
-            <span class="table-head__price">金额</span>
-          </div>
+          <!-- 表头(独立表格,固定在列表顶部) -->
+          <table class="items-table">
+            <colgroup>
+              <col class="col-seq">
+              <col class="col-cat">
+              <col class="col-name">
+              <col class="col-unit">
+              <col class="col-weight">
+              <col class="col-price">
+            </colgroup>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th class="col-cat-h">类别</th>
+                <th>餐品名称</th>
+                <th class="col-unit-h">单价</th>
+                <th class="col-weight-h">取餐量</th>
+                <th class="col-price-h">金额</th>
+              </tr>
+            </thead>
+          </table>
 
-          <!-- 餐线菜品 -->
-          <div class="zone-header">
-            <span>&#x1F95C; 餐线菜品</span>
-            <span class="zone-header__count">2 件</span>
-          </div>
-          <div class="item-card">
-            <div class="item-card__seq">1</div>
-            <div class="item-card__info">
-              <span class="item-card__name">清炒时蔬</span>
-              <span class="item-card__unit-price">&#xFFE5;4.00/100g</span>
-            </div>
-            <span class="item-card__weight">取 150g</span>
-            <div class="item-card__price">&#xFFE5;6.00</div>
-          </div>
-          <div class="item-card">
-            <div class="item-card__seq">2</div>
-            <div class="item-card__info">
-              <span class="item-card__name">米饭</span>
-              <span class="item-card__unit-price">&#xFFE5;1.60/100g</span>
-            </div>
-            <span class="item-card__weight">取 250g</span>
-            <div class="item-card__price">&#xFFE5;4.00</div>
-          </div>
+          <!-- 餐品行(主体) -->
+          <table class="items-table">
+            <colgroup>
+              <col class="col-seq">
+              <col class="col-cat">
+              <col class="col-name">
+              <col class="col-unit">
+              <col class="col-weight">
+              <col class="col-price">
+            </colgroup>
+            <tbody>
+              <tr>
+                <td><span class="cell-seq">1</span></td>
+                <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                <td><div class="cell-name">清炒时蔬</div></td>
+                <td class="cell-unit">&#xFFE5;4.00/100g</td>
+                <td class="cell-weight"><span class="cell-weight__pill">150g</span></td>
+                <td class="cell-price">&#xFFE5;6.00</td>
+              </tr>
+              <tr>
+                <td><span class="cell-seq">2</span></td>
+                <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                <td><div class="cell-name">米饭</div></td>
+                <td class="cell-unit">&#xFFE5;1.60/100g</td>
+                <td class="cell-weight"><span class="cell-weight__pill">250g</span></td>
+                <td class="cell-price">&#xFFE5;4.00</td>
+              </tr>
+              <tr>
+                <td><span class="cell-seq">3</span></td>
+                <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                <td><div class="cell-name">红烧肉</div></td>
+                <td class="cell-unit">&#xFFE5;12.00/100g</td>
+                <td class="cell-weight"><span class="cell-weight__pill">180g</span></td>
+                <td class="cell-price">&#xFFE5;21.60</td>
+              </tr>
+              <tr>
+                <td><span class="cell-seq">4</span></td>
+                <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                <td><div class="cell-name">鱼香肉丝</div></td>
+                <td class="cell-unit">&#xFFE5;7.50/100g</td>
+                <td class="cell-weight"><span class="cell-weight__pill">160g</span></td>
+                <td class="cell-price">&#xFFE5;12.00</td>
+              </tr>
+              <tr>
+                <td><span class="cell-seq">5</span></td>
+                <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                <td><div class="cell-name">冬瓜排骨汤</div></td>
+                <td class="cell-unit">&#xFFE5;1.00/100g</td>
+                <td class="cell-weight"><span class="cell-weight__pill">300g</span></td>
+                <td class="cell-price">&#xFFE5;3.00</td>
+              </tr>
+              <tr>
+                <td><span class="cell-seq">6</span></td>
+                <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                <td><div class="cell-name">卤鸡腿</div></td>
+                <td class="cell-unit">&#xFFE5;15.00/100g</td>
+                <td class="cell-weight"><span class="cell-weight__pill">120g</span></td>
+                <td class="cell-price">&#xFFE5;18.00</td>
+              </tr>
+              <tr>
+                <td><span class="cell-seq">7</span></td>
+                <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                <td><div class="cell-name">凉拌木耳</div></td>
+                <td class="cell-unit">&#xFFE5;6.00/100g</td>
+                <td class="cell-weight"><span class="cell-weight__pill">80g</span></td>
+                <td class="cell-price">&#xFFE5;4.80</td>
+              </tr>
+            </tbody>
+          </table>
 
-          <!-- 档口菜品 -->
-          <div class="zone-header">
-            <span>&#x2696;&#xFE0F; 档口菜品</span>
-            <span class="zone-header__count">3 件</span>
-          </div>
-          <div class="item-card">
-            <div class="item-card__seq">3</div>
-            <div class="item-card__info">
-              <span class="item-card__name">红烧肉</span>
-              <span class="item-card__unit-price">&#xFFE5;12.00/100g</span>
-            </div>
-            <span class="item-card__weight">取 180g</span>
-            <div class="item-card__price">&#xFFE5;21.60</div>
-          </div>
-          <div class="item-card">
-            <div class="item-card__seq">4</div>
-            <div class="item-card__info">
-              <span class="item-card__name">鱼香肉丝</span>
-              <span class="item-card__unit-price">&#xFFE5;7.50/100g</span>
-            </div>
-            <span class="item-card__weight">取 160g</span>
-            <div class="item-card__price">&#xFFE5;12.00</div>
-          </div>
-          <div class="item-card">
-            <div class="item-card__seq">5</div>
-            <div class="item-card__info">
-              <span class="item-card__name">冬瓜排骨汤</span>
-              <span class="item-card__unit-price">&#xFFE5;1.00/100g</span>
-            </div>
-            <span class="item-card__weight">取 300g</span>
-            <div class="item-card__price">&#xFFE5;3.00</div>
-          </div>
-
-          <!-- 统一小计条 -->
-          <div class="subtotal-bar">
-            <div class="subtotal-bar__count">餐品种类 <strong>5</strong> 项 · 总重量 <strong>1040</strong>g · 餐线 <strong>2</strong> · 档口 <strong>3</strong></div>
-            <div class="subtotal-bar__amount">&#xFFE5;46.60</div>
+          <!-- 合计行(底部固定,与表头列对齐) -->
+          <div class="items-footer">
+            <table>
+              <colgroup>
+                <col style="width:40px">
+                <col style="width:64px">
+                <col>
+                <col style="width:110px">
+                <col style="width:100px">
+                <col style="width:100px">
+              </colgroup>
+              <tbody>
+                <tr>
+                  <td class="col-seq-f"></td>
+                  <td class="col-cat-f"></td>
+                  <td class="col-name-f">
+                    <span class="footer-label">合计</span>
+                  </td>
+                  <td class="col-unit-f">
+                    <span class="footer-value">7 项</span>
+                  </td>
+                  <td class="col-weight-f">
+                    <span class="footer-value">1240g</span>
+                  </td>
+                  <td class="col-price-f">
+                    <span class="footer-amount">&#xFFE5;69.40</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
@@ -868,18 +1318,50 @@
           <!-- 金额汇总 -->
           <div class="pay-col__section">
             <div class="section-label">金额汇总</div>
+
+            <!-- 混合支付进度条(进入混合态时显示) -->
+            <div class="mixed-progress" id="mixedProgress">
+              <div class="mixed-progress__head">
+                <span class="mixed-progress__title">&#x1F500; 混合支付进行中</span>
+                <span class="mixed-progress__step" id="mixedStepTxt">第 1 / 2 步</span>
+              </div>
+              <div class="mixed-progress__steps">
+                <div class="mixed-progress__step-card mixed-progress__step-card--done" id="mixedStep1">
+                  <span id="mixedStep1Label">&#x2705; 余额已扣</span>
+                  <span class="mixed-progress__step-amount" id="mixedStep1Amt">&#xFFE5;0.00</span>
+                </div>
+                <div class="mixed-progress__connector"></div>
+                <div class="mixed-progress__step-card mixed-progress__step-card--pending" id="mixedStep2">
+                  <span id="mixedStep2Label">&#x23F3; 待在线补差</span>
+                  <span class="mixed-progress__step-amount" id="mixedStep2Amt">&#xFFE5;0.00</span>
+                </div>
+              </div>
+            </div>
+
             <div class="amount-block">
               <div class="amount-row">
                 <span class="amount-row__label">合计</span>
-                <span class="amount-row__value" id="totalAmount">&#xFFE5;46.60</span>
+                <span class="amount-row__value" id="totalAmount">&#xFFE5;69.40</span>
               </div>
               <div class="amount-row">
-                <span class="amount-row__label">优惠(企业补贴)</span>
+                <span class="amount-row__label">优惠</span>
                 <span class="amount-row__value" style="color:#4ade80;">-&#xFFE5;5.00</span>
               </div>
+              <div class="amount-row" id="rowCoupon" style="display:none;">
+                <span class="amount-row__label">代金券抵扣</span>
+                <span class="amount-row__value amount-row__value--coupon" id="couponDeductAmt">-&#xFFE5;0.00</span>
+              </div>
               <div class="amount-row amount-row--total">
                 <span class="amount-row__label">应付金额</span>
-                <span class="amount-row__value" id="payableAmount">&#xFFE5;41.60</span>
+                <span class="amount-row__value" id="payableAmount">&#xFFE5;64.40</span>
+              </div>
+              <div class="amount-row" id="rowBalanceDeduct" style="display:none;">
+                <span class="amount-row__label">余额抵扣</span>
+                <span class="amount-row__value amount-row__value--balance-deduct" id="balanceDeductAmt">-&#xFFE5;0.00</span>
+              </div>
+              <div class="amount-row" id="rowDiff" style="display:none;">
+                <span class="amount-row__label" id="diffLabel">待付补差</span>
+                <span class="amount-row__value amount-row__value--diff" id="diffAmt">&#xFFE5;0.00</span>
               </div>
             </div>
           </div>
@@ -896,79 +1378,109 @@
                 <div class="pay-tab__icon">&#x1F4B6;</div>
                 <div class="pay-tab__name">现金</div>
               </div>
-              <div class="pay-tab" data-pay="coupon" onclick="switchPay('coupon')">
-                <div class="pay-tab__icon">&#x1F3AB;</div>
-                <div class="pay-tab__name">餐券/补贴码</div>
-              </div>
               <div class="pay-tab" data-pay="balance" onclick="switchPay('balance')">
                 <div class="pay-tab__icon">&#x1F4B0;</div>
                 <div class="pay-tab__name">余额支付</div>
               </div>
             </div>
 
-            <!-- 支付详情切换区 -->
-            <div class="pay-detail" id="payDetail"></div>
-
-            <!-- 餐券输入区 -->
-            <div class="coupon-input-row" id="couponInputRow" style="display:none;">
-              <input type="text" class="coupon-input" id="couponInput" placeholder="请输入餐券/补贴码" maxlength="16">
-              <button class="coupon-verify-btn" onclick="verifyCoupon()">验证</button>
-            </div>
-
-            <!-- 餐券详情卡 -->
-            <div class="coupon-detail" id="couponDetail">
-              <div class="coupon-detail__head">
-                <span class="coupon-detail__title">&#x1F3AB; 企业餐券</span>
-                <span class="coupon-detail__value">&#xFFE5;10.00</span>
+            <!-- 现金实收输入区 -->
+            <div id="cashInputWrap" style="display:none;">
+              <div class="cash-input-row">
+                <span class="cash-input-row__label">实收现金</span>
+                <input type="number" class="cash-input" id="cashReceived" placeholder="0.00" min="0" step="0.01" oninput="onCashInput()">
               </div>
-              <div class="coupon-detail__row">
-                <span>券号</span>
-                <strong>MQ202608-A47H9X</strong>
+              <div class="quick-cash">
+                <button class="quick-cash__btn" onclick="setQuickCash(20)">&#xFFE5;20</button>
+                <button class="quick-cash__btn" onclick="setQuickCash(50)">&#xFFE5;50</button>
+                <button class="quick-cash__btn" onclick="setQuickCash(100)">&#xFFE5;100</button>
+                <button class="quick-cash__btn" onclick="setQuickCash(200)">&#xFFE5;200</button>
+                <button class="quick-cash__btn" onclick="setQuickCash(500)">&#xFFE5;500</button>
+                <button class="quick-cash__btn quick-cash__btn--exact" onclick="setQuickCashExact()">Exact</button>
               </div>
-              <div class="coupon-detail__row">
-                <span>适用范围</span>
-                <strong>全场通用</strong>
+              <!-- 找零结果(精简单行版) -->
+              <div class="cash-result cash-result--change" id="cashResultChange">
+                <div class="cash-result__main">
+                  <span class="cash-result__label">&#x1F4B2; 找零</span>
+                  <span class="cash-result__value" id="crChangeAmount">&#xFFE5;0.00</span>
+                </div>
               </div>
-              <div class="coupon-detail__row">
-                <span>有效期至</span>
-                <strong>2026-08-31</strong>
-              </div>
-              <div class="coupon-detail__summary">
-                <span class="coupon-detail__summary-label">券后应付</span>
-                <span class="coupon-detail__summary-value" id="couponAfterAmount">&#xFFE5;31.60</span>
+              <!-- 补差结果(差额+按钮) -->
+              <div class="cash-result cash-result--diff" id="cashResultDiff">
+                <div class="cash-result__main">
+                  <span class="cash-result__label">&#x26A0;&#xFE0F; 实收不足,待补差额</span>
+                  <span class="cash-result__value" id="crDiffAmount">&#xFFE5;0.00</span>
+                </div>
+                <button class="cash-result__action" onclick="startCashOnlineMixed()">
+                  &#x1F4F1; 差额用在线支付收取
+                </button>
               </div>
             </div>
 
             <!-- 余额支付信息卡 -->
             <div class="balance-info" id="balanceInfo">
               <div class="balance-info__row">
-                <span class="balance-info__label">&#x1F451; 会员等级</span>
-                <span class="balance-info__level">金牌会员 LV5</span>
+                <span class="balance-info__label">&#x1F451; 会员等级 <span class="balance-info__level">金牌会员 LV5</span></span>
+                <span class="balance-info__label">&#x1F4B0; 账户余额 <span class="balance-info__value balance-info__value--highlight" id="balanceAvail">&#xFFE5;128.50</span></span>
               </div>
               <div class="balance-info__row">
-                <span class="balance-info__label">&#x1F4B0; 账户余额</span>
-                <span class="balance-info__value balance-info__value--highlight">&#xFFE5;128.50</span>
+                <span class="balance-info__label">&#x1F4B8; 应付金额 <span class="balance-info__value" id="balancePayable">&#xFFE5;64.40</span></span>
+                <span class="balance-info__label">&#x1F4BE; 扣款后余额 <span class="balance-info__value" id="balanceAfter">&#xFFE5;64.10</span></span>
               </div>
-              <div class="balance-info__row">
-                <span class="balance-info__label">&#x1F4B8; 应付金额</span>
-                <span class="balance-info__value">&#xFFE5;41.60</span>
+              <!-- 应补差额行(余额不足时显示,红色突出) -->
+              <div class="balance-info__diff-row" id="balanceDiffRow">
+                <span>&#x26A0;&#xFE0F; 应补差额</span>
+                <span class="balance-info__diff-value" id="balanceDiffValue">&#xFFE5;0.00</span>
               </div>
-              <div class="balance-info__row">
-                <span class="balance-info__label">&#x1F4BE; 扣款后余额</span>
-                <span class="balance-info__value">&#xFFE5;86.90</span>
+              <!-- 补差方式按钮(余额不足时显示,与余额信息同卡) -->
+              <div class="balance-info__actions" id="balanceActions">
+                <button class="balance-info__action" id="makeupOnlineBtn" onclick="chooseMixed('online')">
+                  <div class="balance-info__action-icon">&#x1F4F1;</div>
+                  <span class="balance-info__action-name">在线补差</span>
+                </button>
+                <button class="balance-info__action" id="makeupCashBtn" onclick="chooseMixed('cash')">
+                  <div class="balance-info__action-icon">&#x1F4B6;</div>
+                  <span class="balance-info__action-name">现金补差</span>
+                </button>
               </div>
-              <div class="balance-info__tip">
+              <div class="balance-info__tip" id="balanceTip">
                 &#x2705; 余额充足,可直接扣款支付
               </div>
             </div>
           </div>
+
+          <!-- 代金券(独立入口,与支付方式并列,抵扣关系) -->
+          <div class="pay-col__section">
+            <div class="coupon-entry" id="couponEntry">
+              <!-- 默认:添加按钮 -->
+              <div class="coupon-entry__head" id="couponEntryDefault">
+                <span class="coupon-entry__title">&#x1F3AB; 代金券 / 餐券</span>
+                <button class="coupon-entry__btn" onclick="showCouponInput()">+ 添加代金券</button>
+              </div>
+              <!-- 输入态 -->
+              <div class="coupon-entry__input-row" id="couponEntryInput" style="display:none;">
+                <input type="text" class="coupon-input" id="couponInput" placeholder="请输入代金券码" maxlength="16">
+                <button class="coupon-verify-btn" onclick="verifyCoupon()">验证</button>
+                <button class="coupon-entry__btn coupon-entry__btn--cancel" onclick="hideCouponInput()">取消</button>
+              </div>
+              <!-- 已核销态 -->
+              <div class="coupon-entry__head" id="couponEntryActive" style="display:none;">
+                <span class="coupon-entry__title">&#x1F3AB; 代金券已应用</span>
+                <span class="coupon-entry__value" id="couponEntryValue">&#xFFE5;10.00</span>
+                <button class="coupon-entry__btn coupon-entry__btn--cancel" onclick="removeCoupon()">&#x2716; 取消</button>
+              </div>
+              <div class="coupon-entry__meta" id="couponEntryMeta" style="display:none;">
+                券号 <strong id="couponEntryCode">MQ202608-A47H9X</strong> · 全场通用 · 有效期至 <strong>2026-08-31</strong>
+              </div>
+            </div>
+          </div>
         </div>
 
         <!-- 底部按钮(固定) -->
         <div class="pay-col__actions">
           <a class="btn btn--ghost" href="02-standby.html">取消</a>
-          <button class="btn btn--primary" onclick="confirmPay()">
-            &#x2705; 确认收款 <span id="btnAmount">&#xFFE5;41.60</span>
+          <button class="btn btn--primary" id="confirmBtn" onclick="confirmPay()">
+            &#x2705; 确认收款 <span id="btnAmount">&#xFFE5;64.40</span>
           </button>
         </div>
       </div>
@@ -982,70 +1494,294 @@
 
   <script>
     /* ==================== 当前订单数据 ==================== */
-    var ORDER_TOTAL = 46.60;
-    var ORDER_DISCOUNT = 5.00;
-    var ORDER_PAYABLE = ORDER_TOTAL - ORDER_DISCOUNT;
-    var COUPON_VALUE = 10.00;
-    var USER_BALANCE = 128.50;
+    var ORDER_TOTAL = 69.40;
+    var ORDER_DISCOUNT = 5.00;       /* 企业补贴 */
+    var ORDER_PAYABLE = ORDER_TOTAL - ORDER_DISCOUNT;  /* 64.40 */
+    var COUPON_VALUE = 10.00;        /* 代金券面值 */
+    var USER_BALANCE = 128.50;       /* 会员账户余额 */
     var USER_LEVEL = '金牌会员 LV5';
 
-    /* 支付方式 hint */
-    var payDetailMap = {
-      online: {
-        title: '&#x1F4F1; 在线支付',
-        hint: '请顾客打开微信/支付宝付款码,将屏幕对准扫码器',
-        status: '等待扫码...'
-      },
-      cash: {
-        title: '&#x1F4B6; 现金支付',
-        hint: '请收银员按实收金额现金收款,订单确认后点击「确认收款」',
-        status: '待收银'
-      },
-      coupon: {
-        title: '&#x1F3AB; 餐券/补贴码',
-        hint: '请输入顾客出示的餐券或补贴码进行核验,核验通过后自动抵扣',
-        status: '请输入券码'
-      },
-      balance: {
-        title: '&#x1F4B0; 余额支付',
-        hint: '从顾客会员账户余额扣款,自动应用会员等级优惠',
-        status: '账户信息已加载'
-      }
-    };
+    /* 全局状态:currentPay 为当前支付方式 Tab;couponApplied 为是否已核销代金券;
+       mixedMode 为混合支付状态(null=未混合 | 'bl-online' | 'bl-cash' | 'cash-online');
+       mixedStep 表示当前混合支付进行到第几步(1=主支付 2=补差)。 */
+    var currentPay = 'online';
+    var couponApplied = false;
+    var mixedMode = null;
+    var mixedStep = 0;
+    var cashReceived = 0;  /* 现金实收金额 */
 
-    /* 切换支付方式 */
+    /* 计算当前应付金额(考虑代金券抵扣) */
+    function getEffectivePayable() {
+      return couponApplied ? Math.max(0, ORDER_PAYABLE - COUPON_VALUE) : ORDER_PAYABLE;
+    }
+
+    /* 切换支付方式 Tab */
     function switchPay(type) {
+      /* 如果当前正在混合支付进行中,不允许直接切换 */
+      if (mixedMode && mixedStep === 1) {
+        showToast('混合支付进行中,请先完成或取消', 'warn');
+        return;
+      }
+      currentPay = type;
       document.querySelectorAll('.pay-tab').forEach(function(el) {
         el.classList.toggle('active', el.dataset.pay === type);
       });
-      var info = payDetailMap[type];
-      document.getElementById('payDetail').innerHTML =
-        '<div class="pay-detail__title">' + info.title + '</div>'
-        + '<div class="pay-detail__hint">' + info.hint + '</div>'
-        + '<div class="pay-detail__status">&#x25CF; ' + info.status + '</div>';
 
-      document.getElementById('couponInputRow').style.display = (type === 'coupon') ? 'flex' : 'none';
-      if (type !== 'coupon') document.getElementById('couponDetail').classList.remove('show');
-      document.getElementById('balanceInfo').classList.toggle('show', type === 'balance');
+      /* 控制各专属区块显隐(代金券为独立优惠入口,不随 Tab 切换;
+         balanceInfo 由 refreshBalanceInfo 统一管理) */
+      document.getElementById('cashInputWrap').style.display = (type === 'cash') ? 'block' : 'none';
 
+      /* 切换时重置现金输入与混合态 */
+      if (type !== 'cash') {
+        cashReceived = 0;
+        document.getElementById('cashReceived').value = '';
+        document.getElementById('cashResultChange').classList.remove('show');
+        document.getElementById('cashResultDiff').classList.remove('show');
+      }
+      if (mixedMode && mixedStep !== 1) resetMixedState();
+
+      refreshAmountSummary();
       refreshBtnAmount();
+      refreshBalanceInfo();
+    }
+
+    /* 刷新金额汇总区(代金券/余额抵扣/待付补差) */
+    function refreshAmountSummary() {
+      var effPayable = getEffectivePayable();
+      /* 代金券抵扣行 */
+      var rowCoupon = document.getElementById('rowCoupon');
+      if (couponApplied) {
+        rowCoupon.style.display = 'flex';
+        document.getElementById('couponDeductAmt').innerHTML = '-&#xFFE5;' + COUPON_VALUE.toFixed(2);
+      } else {
+        rowCoupon.style.display = 'none';
+      }
+      /* 应付金额 */
+      document.getElementById('payableAmount').innerHTML = '&#xFFE5;' + effPayable.toFixed(2);
+      document.getElementById('totalAmount').innerHTML = '&#xFFE5;' + ORDER_TOTAL.toFixed(2);
+
+      /* 余额抵扣行 + 待付补差行(仅在混合态或余额支付且余额充足时显示) */
+      var rowBal = document.getElementById('rowBalanceDeduct');
+      var rowDiff = document.getElementById('rowDiff');
+      var diffLabel = document.getElementById('diffLabel');
+      var balDeductAmt = 0;
+      var diffAmt = 0;
+
+      if (mixedMode === 'bl-online' || mixedMode === 'bl-cash') {
+        balDeductAmt = Math.min(USER_BALANCE, effPayable);
+        diffAmt = Math.max(0, effPayable - USER_BALANCE);
+        rowBal.style.display = 'flex';
+        rowDiff.style.display = 'flex';
+        diffLabel.textContent = (mixedMode === 'bl-online') ? '待在线补差' : '待现金补差';
+      } else if (currentPay === 'balance' && USER_BALANCE >= effPayable) {
+        balDeductAmt = effPayable;
+        rowBal.style.display = 'flex';
+        rowDiff.style.display = 'none';
+      } else if (mixedMode === 'cash-online') {
+        balDeductAmt = cashReceived;
+        diffAmt = Math.max(0, effPayable - cashReceived);
+        rowBal.style.display = 'flex';
+        document.getElementById('amount-row__label-cash') && (diffLabel.textContent = '待在线补差');
+        rowDiff.style.display = 'flex';
+        diffLabel.textContent = '待在线补差';
+      } else {
+        rowBal.style.display = 'none';
+        rowDiff.style.display = 'none';
+      }
+
+      document.getElementById('balanceDeductAmt').innerHTML = '-&#xFFE5;' + balDeductAmt.toFixed(2);
+      document.getElementById('diffAmt').innerHTML = '&#xFFE5;' + diffAmt.toFixed(2);
+
+      /* 混合支付进度条 */
+      var mp = document.getElementById('mixedProgress');
+      if (mixedMode) {
+        mp.classList.add('show');
+        var step1Label, step1Amt, step2Label, step2Amt;
+        if (mixedMode === 'bl-online' || mixedMode === 'bl-cash') {
+          step1Label = '&#x2705; 余额已扣';
+          step1Amt = balDeductAmt;
+          step2Label = (mixedMode === 'bl-online') ? '&#x23F3; 待在线补差' : '&#x23F3; 待现金补差';
+          step2Amt = diffAmt;
+        } else { /* cash-online */
+          step1Label = '&#x2705; 现金已收';
+          step1Amt = cashReceived;
+          step2Label = '&#x23F3; 待在线补差';
+          step2Amt = diffAmt;
+        }
+        document.getElementById('mixedStep1Label').innerHTML = step1Label;
+        document.getElementById('mixedStep1Amt').innerHTML = '&#xFFE5;' + step1Amt.toFixed(2);
+        document.getElementById('mixedStep2Label').innerHTML = step2Label;
+        document.getElementById('mixedStep2Amt').innerHTML = '&#xFFE5;' + step2Amt.toFixed(2);
+        document.getElementById('mixedStepTxt').textContent = '第 ' + Math.max(1, mixedStep) + ' / 2 步';
+        /* 步骤卡片状态切换 */
+        var card1 = document.getElementById('mixedStep1');
+        var card2 = document.getElementById('mixedStep2');
+        card1.className = 'mixed-progress__step-card ' + (mixedStep >= 1 ? 'mixed-progress__step-card--done' : 'mixed-progress__step-card--pending');
+        card2.className = 'mixed-progress__step-card ' + (mixedStep >= 2 ? 'mixed-progress__step-card--done' : 'mixed-progress__step-card--pending');
+      } else {
+        mp.classList.remove('show');
+      }
     }
 
     /* 刷新底部按钮金额与顶部应付 */
     function refreshBtnAmount() {
-      var couponEl = document.getElementById('couponDetail');
-      var shown = couponEl.classList.contains('show');
-      var activeType = document.querySelector('.pay-tab.active').dataset.pay;
-      var amount = ORDER_PAYABLE;
-      if (activeType === 'coupon' && shown) {
-        amount = Math.max(0, ORDER_PAYABLE - COUPON_VALUE);
+      var effPayable = getEffectivePayable();
+      var btn = document.getElementById('confirmBtn');
+      var btnAmount = document.getElementById('btnAmount');
+      var amountToShow = effPayable;
+      var prefix = '&#x2705; 确认收款 ';
+
+      if (mixedMode === 'bl-online' || mixedMode === 'bl-cash') {
+        if (mixedStep < 2) {
+          /* 等待补差 */
+          btn.disabled = true;
+          btn.style.opacity = '0.6';
+          btn.style.cursor = 'not-allowed';
+          prefix = (mixedMode === 'bl-online') ? '&#x23F3; 等待在线扫码补差 ' : '&#x23F3; 等待现金补差 ';
+          amountToShow = Math.max(0, effPayable - USER_BALANCE);
+        } else {
+          btn.disabled = false;
+          btn.style.opacity = '';
+          btn.style.cursor = '';
+          prefix = '&#x2705; 确认收款 ';
+          amountToShow = effPayable;
+        }
+      } else if (mixedMode === 'cash-online') {
+        if (mixedStep < 2) {
+          btn.disabled = true;
+          btn.style.opacity = '0.6';
+          btn.style.cursor = 'not-allowed';
+          prefix = '&#x23F3; 等待在线扫码补差 ';
+          amountToShow = Math.max(0, effPayable - cashReceived);
+        } else {
+          btn.disabled = false;
+          btn.style.opacity = '';
+          btn.style.cursor = '';
+          amountToShow = effPayable;
+        }
+      } else if (currentPay === 'cash' && cashReceived > 0) {
+        /* 现金找零场景 */
+        btn.disabled = false;
+        btn.style.opacity = '';
+        btn.style.cursor = '';
+        if (cashReceived >= effPayable) {
+          var change = cashReceived - effPayable;
+          prefix = '&#x1F4B6; 确认收款 &#xFFE5;' + effPayable.toFixed(2) + ' · 找零 ';
+          amountToShow = change;
+        } else {
+          /* 实收不足,无法直接确认,需走补差 */
+          btn.disabled = true;
+          btn.style.opacity = '0.6';
+          btn.style.cursor = 'not-allowed';
+          prefix = '&#x26A0;&#xFE0F; 实收不足,请补差或调整 ';
+          amountToShow = effPayable - cashReceived;
+        }
+      } else {
+        btn.disabled = false;
+        btn.style.opacity = '';
+        btn.style.cursor = '';
       }
-      document.getElementById('btnAmount').innerHTML = '&#xFFE5;' + amount.toFixed(2);
-      document.getElementById('couponAfterAmount').innerHTML = '&#xFFE5;' + amount.toFixed(2);
-      document.getElementById('topPayable').innerHTML = '&#xFFE5;' + amount.toFixed(2);
+
+      btnAmount.innerHTML = '&#xFFE5;' + amountToShow.toFixed(2);
+      btn.innerHTML = prefix + '<span id="btnAmount">&#xFFE5;' + amountToShow.toFixed(2) + '</span>';
+
+      /* 同步顶部应付金额 */
+      document.getElementById('topPayable').innerHTML = '&#xFFE5;' + effPayable.toFixed(2);
     }
 
-    /* 验证餐券 */
+    /* 刷新余额信息卡(余额支付 Tab 下显示;混合支付进行中也保留,仅切换提示文案与按钮选中态) */
+    function refreshBalanceInfo() {
+      var effPayable = getEffectivePayable();
+      var balInfoEl = document.getElementById('balanceInfo');
+      /* 余额信息卡仅在余额支付 Tab 下显示;混合支付进行中也保留显示 */
+      balInfoEl.classList.toggle('show', currentPay === 'balance');
+      document.getElementById('balanceAvail').innerHTML = '&#xFFE5;' + USER_BALANCE.toFixed(2);
+      document.getElementById('balancePayable').innerHTML = '&#xFFE5;' + effPayable.toFixed(2);
+
+      var diffRow = document.getElementById('balanceDiffRow');
+      var diffValueEl = document.getElementById('balanceDiffValue');
+      var actionsEl = document.getElementById('balanceActions');
+      var tip = document.getElementById('balanceTip');
+      var onlineBtn = document.getElementById('makeupOnlineBtn');
+      var cashBtn = document.getElementById('makeupCashBtn');
+
+      /* 混合支付进行中:保留余额区与按钮,仅切换提示文案 + 标识所选补差方式 */
+      if (mixedMode) {
+        document.getElementById('balanceAfter').innerHTML = '&#xFFE5;0.00';
+        diffValueEl.innerHTML = '&#xFFE5;' + (effPayable - USER_BALANCE).toFixed(2);
+        diffRow.classList.add('show');
+        actionsEl.classList.add('show');
+        /* 选中态:仅当前补差方式高亮 */
+        onlineBtn.classList.toggle('balance-info__action--active', mixedMode === 'bl-online');
+        cashBtn.classList.toggle('balance-info__action--active', mixedMode === 'bl-cash');
+        /* tip 文案随补差进度更新 */
+        if (mixedStep >= 2) {
+          tip.innerHTML = (mixedMode === 'bl-online') ? '&#x2705; 在线补差已完成' : '&#x2705; 现金补差已完成';
+          tip.style.background = 'rgba(82, 196, 26, 0.1)';
+          tip.style.borderLeftColor = '#4ade80';
+        } else {
+          tip.innerHTML = (mixedMode === 'bl-online') ? '&#x23F3; 等待在线扫码补差' : '&#x23F3; 等待现金补差确认';
+          tip.style.background = 'rgba(251, 191, 36, 0.12)';
+          tip.style.borderLeftColor = '#fbbf24';
+        }
+        return;
+      }
+
+      /* 非混合态:清除选中 */
+      onlineBtn.classList.remove('balance-info__action--active');
+      cashBtn.classList.remove('balance-info__action--active');
+
+      if (USER_BALANCE >= effPayable) {
+        /* 余额充足:扣款后余额 = 余额 - 应付;隐藏差额行与补差按钮 */
+        document.getElementById('balanceAfter').innerHTML = '&#xFFE5;' + (USER_BALANCE - effPayable).toFixed(2);
+        diffRow.classList.remove('show');
+        actionsEl.classList.remove('show');
+        tip.innerHTML = '&#x2705; 余额充足,可直接扣款支付';
+        tip.style.background = 'rgba(82, 196, 26, 0.1)';
+        tip.style.borderLeftColor = '#4ade80';
+      } else {
+        /* 余额不足:扣款后余额 = 0;显示应补差额行(红色突出)与补差按钮 */
+        document.getElementById('balanceAfter').innerHTML = '&#xFFE5;0.00';
+        diffValueEl.innerHTML = '&#xFFE5;' + (effPayable - USER_BALANCE).toFixed(2);
+        diffRow.classList.add('show');
+        actionsEl.classList.add('show');
+        tip.innerHTML = '&#x26A0;&#xFE0F; 账户余额不足,请选择补差方式';
+        tip.style.background = 'rgba(251, 146, 60, 0.12)';
+        tip.style.borderLeftColor = '#fb923c';
+      }
+    }
+
+    /* ============ 代金券独立入口(三态切换) ============ */
+    /* 默认态 → 输入态:点击「+ 添加代金券」 */
+    function showCouponInput() {
+      document.getElementById('couponEntryDefault').style.display = 'none';
+      document.getElementById('couponEntryInput').style.display = 'flex';
+      document.getElementById('couponEntryActive').style.display = 'none';
+      document.getElementById('couponEntryMeta').style.display = 'none';
+      setTimeout(function() { document.getElementById('couponInput').focus(); }, 50);
+    }
+
+    /* 输入态 → 默认态:点击「取消」 */
+    function hideCouponInput() {
+      document.getElementById('couponEntryDefault').style.display = 'flex';
+      document.getElementById('couponEntryInput').style.display = 'none';
+      document.getElementById('couponInput').value = '';
+    }
+
+    /* 已核销态 → 默认态:点击「✖ 取消」 */
+    function removeCoupon() {
+      couponApplied = false;
+      document.getElementById('couponEntryDefault').style.display = 'flex';
+      document.getElementById('couponEntryActive').style.display = 'none';
+      document.getElementById('couponEntryMeta').style.display = 'none';
+      document.getElementById('couponEntry').classList.remove('coupon-entry--active');
+      showToast('代金券已取消', 'warn');
+      refreshAmountSummary();
+      refreshBtnAmount();
+      refreshBalanceInfo();
+    }
+
+    /* 验证代金券:输入态 → 已核销态 */
     function verifyCoupon() {
       var code = document.getElementById('couponInput').value.trim();
       if (!code) {
@@ -1058,34 +1794,162 @@
       }
       if (code.toUpperCase() === 'INVALID') {
         showToast('券码无效或已过期', 'error');
-        document.getElementById('couponDetail').classList.remove('show');
         return;
       }
-      showToast('券码核验成功,已抵扣 &#xFFE5;' + COUPON_VALUE.toFixed(2), 'success');
-      document.getElementById('couponDetail').classList.add('show');
+      /* 切换到已核销态 */
+      couponApplied = true;
+      document.getElementById('couponEntryInput').style.display = 'none';
+      document.getElementById('couponEntryActive').style.display = 'flex';
+      document.getElementById('couponEntryMeta').style.display = 'block';
+      document.getElementById('couponEntry').classList.add('coupon-entry--active');
+      document.getElementById('couponEntryValue').innerHTML = '&#xFFE5;' + COUPON_VALUE.toFixed(2);
+      document.getElementById('couponEntryCode').textContent = code.toUpperCase();
+      showToast('代金券核验成功,已抵扣 &#xFFE5;' + COUPON_VALUE.toFixed(2), 'success');
+      refreshAmountSummary();
+      refreshBtnAmount();
+      refreshBalanceInfo();
+    }
+
+    /* 现金实收输入 */
+    function onCashInput() {
+      var v = parseFloat(document.getElementById('cashReceived').value) || 0;
+      cashReceived = v;
+      updateCashResult();
+      refreshAmountSummary();
       refreshBtnAmount();
     }
 
-    /* 确认收款 */
-    function confirmPay() {
-      var activeType = document.querySelector('.pay-tab.active').dataset.pay;
-      var msgMap = {
-        online: '在线支付成功',
-        cash: '现金收款完成',
-        coupon: '餐券核销成功',
-        balance: '余额扣款成功'
-      };
-      if (activeType === 'balance' && USER_BALANCE < ORDER_PAYABLE) {
-        showToast('账户余额不足,请提醒顾客充值或选择其他支付方式', 'error');
+    /* 快捷金额按钮 */
+    function setQuickCash(amount) {
+      document.getElementById('cashReceived').value = amount.toFixed(2);
+      onCashInput();
+    }
+    function setQuickCashExact() {
+      var effPayable = getEffectivePayable();
+      document.getElementById('cashReceived').value = effPayable.toFixed(2);
+      onCashInput();
+    }
+
+    /* 更新现金找零/补差结果区(精简单行版) */
+    function updateCashResult() {
+      var effPayable = getEffectivePayable();
+      var changeEl = document.getElementById('cashResultChange');
+      var diffEl = document.getElementById('cashResultDiff');
+      if (cashReceived <= 0) {
+        changeEl.classList.remove('show');
+        diffEl.classList.remove('show');
         return;
       }
-      showToast(msgMap[activeType] + ',即将跳转支付成功页', 'success');
+      if (cashReceived >= effPayable) {
+        /* 找零场景 */
+        changeEl.classList.add('show');
+        diffEl.classList.remove('show');
+        document.getElementById('crChangeAmount').innerHTML = '&#xFFE5;' + (cashReceived - effPayable).toFixed(2);
+      } else {
+        /* 实收不足,进入补差场景 */
+        changeEl.classList.remove('show');
+        diffEl.classList.add('show');
+        document.getElementById('crDiffAmount').innerHTML = '&#xFFE5;' + (effPayable - cashReceived).toFixed(2);
+      }
+    }
+
+    /* 启动"现金+在线"混合:从现金Tab的"差额在线收取"按钮触发 */
+    function startCashOnlineMixed() {
+      var effPayable = getEffectivePayable();
+      if (cashReceived <= 0 || cashReceived >= effPayable) {
+        showToast('当前无需补差', 'warn');
+        return;
+      }
+      mixedMode = 'cash-online';
+      mixedStep = 1;
+      showToast('已进入混合支付,等待顾客扫码补差 &#xFFE5;' + (effPayable - cashReceived).toFixed(2), 'success');
+      refreshAmountSummary();
+      refreshBtnAmount();
+      refreshBalanceInfo();
+      /* 模拟用户扫码完成补差(原型用,实际由后端回调) */
       setTimeout(function() {
-        window.location.href = '04-pay-success.html';
+        mixedStep = 2;
+        showToast('在线补差成功', 'success');
+        refreshAmountSummary();
+        refreshBtnAmount();
+        refreshBalanceInfo();
+      }, 1500);
+    }
+
+    /* 用户在余额信息卡中点击在线/现金补差 */
+    function chooseMixed(subType) {
+      mixedMode = (subType === 'online') ? 'bl-online' : 'bl-cash';
+      mixedStep = 1;
+      showToast('已进入混合支付,余额扣款 &#xFFE5;' + USER_BALANCE.toFixed(2) + ',等待补差', 'success');
+      refreshAmountSummary();
+      refreshBtnAmount();
+      refreshBalanceInfo();
+      /* 模拟补差完成 */
+      var delay = (subType === 'online') ? 1500 : 1200;
+      setTimeout(function() {
+        mixedStep = 2;
+        showToast(subType === 'online' ? '在线补差成功' : '现金补差已确认', 'success');
+        refreshAmountSummary();
+        refreshBtnAmount();
+        refreshBalanceInfo();
+      }, delay);
+    }
+
+    /* 重置混合支付状态 */
+    function resetMixedState() {
+      mixedMode = null;
+      mixedStep = 0;
+    }
+
+    /* 确认收款(主入口) */
+    function confirmPay() {
+      var btn = document.getElementById('confirmBtn');
+      if (btn.disabled) return;
+      var effPayable = getEffectivePayable();
+
+      /* 混合支付未完成不允许确认 */
+      if (mixedMode && mixedStep < 2) {
+        showToast('请先完成补差支付', 'warn');
+        return;
+      }
+
+      /* 现金支付校验 */
+      if (currentPay === 'cash' && !mixedMode) {
+        if (cashReceived <= 0) {
+          showToast('请输入实收现金金额', 'warn');
+          return;
+        }
+        if (cashReceived < effPayable) {
+          showToast('实收现金不足,请点击「差额用在线支付收取」', 'warn');
+          return;
+        }
+      }
+
+      var msg = '收款成功';
+      if (mixedMode === 'bl-online') msg = '余额+在线混合收款成功';
+      else if (mixedMode === 'bl-cash') msg = '余额+现金混合收款成功';
+      else if (mixedMode === 'cash-online') msg = '现金+在线混合收款成功';
+      else if (currentPay === 'cash') msg = '现金收款完成,找零 &#xFFE5;' + (cashReceived - effPayable).toFixed(2);
+      else if (currentPay === 'online') msg = '在线支付成功';
+      else if (currentPay === 'balance') msg = '余额扣款成功';
+
+      showToast(msg + ',即将跳转支付成功页', 'success');
+      /* 根据当前支付方式与混合态计算 04 成功页的 method 参数(与 user-04-success 的 methodConfig 键名对齐) */
+      var successMethod = 'online';
+      if (mixedMode === 'bl-online') successMethod = 'mixed-bl-online';
+      else if (mixedMode === 'bl-cash') successMethod = 'mixed-bl-cash';
+      else if (mixedMode === 'cash-online') successMethod = 'mixed-cash-online';
+      else if (currentPay === 'balance') successMethod = 'balance';
+      else if (currentPay === 'cash') successMethod = 'cash-change';
+      else if (currentPay === 'online') successMethod = 'online';
+      setTimeout(function() {
+        var url = '04-pay-success.html?method=' + successMethod;
+        if (couponApplied) url += '&coupon=1';
+        window.location.href = url;
       }, 1200);
     }
 
-    /* 清空 */
+    /* 清空订单 */
     function clearAll() {
       if (confirm('确定清空当前订单所有商品吗?')) {
         document.getElementById('itemsList').innerHTML =
@@ -1095,7 +1959,7 @@
       }
     }
 
-    /* Toast */
+    /* Toast 提示 */
     function showToast(msg, type) {
       var el = document.getElementById('toast');
       el.innerHTML = msg;
@@ -1108,6 +1972,96 @@
       el._timer = setTimeout(function() { el.classList.remove('show'); }, 2200);
     }
 
+    /* ==================== 原型演示场景控制 ==================== */
+    /* 场景说明:
+       - normal      余额充足(USER_BALANCE=128.50),走单支付,演示常规流程
+       - low-balance 余额不足(USER_BALANCE=20.00),走混合支付,演示余额+在线/现金补差
+       代金券预载为独立开关,可叠加在任一场景上。 */
+    var DEMO_SCENES = {
+      'normal':      { balance: 128.50, level: '金牌会员 LV5' },
+      'low-balance': { balance: 20.00,  level: '金牌会员 LV5' }
+    };
+    var currentScene = 'normal';
+    var couponPreset = false;  /* 代金券预载开关 */
+
+    /* 切换演示场景:更新余额并刷新所有依赖金额的区块 */
+    function switchScene(scene) {
+      if (!DEMO_SCENES[scene]) return;
+      currentScene = scene;
+      var cfg = DEMO_SCENES[scene];
+      USER_BALANCE = cfg.balance;
+      /* 更新场景按钮高亮 */
+      document.querySelectorAll('.demo-control__btn[data-scene]').forEach(function(el) {
+        el.classList.toggle('active', el.dataset.scene === scene);
+      });
+      /* 重置混合支付态,避免场景切换后状态错乱 */
+      resetMixedState();
+      /* 更新顶部账户余额显示 */
+      document.getElementById('topBalance').innerHTML = '&#xFFE5;' + USER_BALANCE.toFixed(2);
+      /* 刷新所有金额相关区块 */
+      refreshAmountSummary();
+      refreshBtnAmount();
+      refreshBalanceInfo();
+      var label = (scene === 'low-balance') ? '余额不足场景(¥20.00)' : '余额充足场景(¥128.50)';
+      showToast('已切换至: ' + label, 'success');
+    }
+
+    /* 代金券预载开关:直接将代金券置于已核销态 */
+    function toggleCouponPreset() {
+      couponPreset = !couponPreset;
+      var toggleBtn = document.getElementById('couponToggle');
+      toggleBtn.classList.toggle('on', couponPreset);
+      if (couponPreset) {
+        /* 直接进入已核销态 */
+        couponApplied = true;
+        document.getElementById('couponEntryDefault').style.display = 'none';
+        document.getElementById('couponEntryInput').style.display = 'none';
+        document.getElementById('couponEntryActive').style.display = 'flex';
+        document.getElementById('couponEntryMeta').style.display = 'block';
+        document.getElementById('couponEntry').classList.add('coupon-entry--active');
+        document.getElementById('couponEntryValue').innerHTML = '&#xFFE5;' + COUPON_VALUE.toFixed(2);
+        document.getElementById('couponEntryCode').textContent = 'MQ202608-PRESET';
+        showToast('代金券已预载(¥' + COUPON_VALUE.toFixed(2) + ')', 'success');
+      } else {
+        /* 取消预载,回到默认态 */
+        couponApplied = false;
+        document.getElementById('couponEntryDefault').style.display = 'flex';
+        document.getElementById('couponEntryActive').style.display = 'none';
+        document.getElementById('couponEntryMeta').style.display = 'none';
+        document.getElementById('couponEntry').classList.remove('coupon-entry--active');
+        showToast('代金券预载已取消', 'warn');
+      }
+      refreshAmountSummary();
+      refreshBtnAmount();
+      refreshBalanceInfo();
+    }
+
+    /* 重置演示:回到默认场景,清空代金券与现金输入 */
+    function resetDemo() {
+      /* 代金券 */
+      if (couponApplied) {
+        couponApplied = false;
+        couponPreset = false;
+        document.getElementById('couponToggle').classList.remove('on');
+        document.getElementById('couponEntryDefault').style.display = 'flex';
+        document.getElementById('couponEntryActive').style.display = 'none';
+        document.getElementById('couponEntryMeta').style.display = 'none';
+        document.getElementById('couponEntry').classList.remove('coupon-entry--active');
+        document.getElementById('couponInput').value = '';
+      }
+      /* 现金 */
+      cashReceived = 0;
+      var cashInputEl = document.getElementById('cashReceived');
+      if (cashInputEl) cashInputEl.value = '';
+      /* 混合态 */
+      resetMixedState();
+      /* 场景 */
+      switchScene('normal');
+      /* 支付方式回到在线 */
+      switchPay('online');
+      showToast('演示已重置', 'success');
+    }
+
     /* 初始化 */
     switchPay('online');
   </script>
diff --git a/other-module/canteen-device/checkout-device/04-pay-success.html b/other-module/canteen-device/checkout-device/04-pay-success.html
index 1d1ee73..4ea7ed8 100644
--- a/other-module/canteen-device/checkout-device/04-pay-success.html
+++ b/other-module/canteen-device/checkout-device/04-pay-success.html
@@ -123,6 +123,97 @@
       margin-top: 10px;
     }
 
+    /* 账户信息条(余额/混合/找零场景显示) */
+    .account-info {
+      width: 100%;
+      max-width: 380px;
+      padding: 12px 16px;
+      background: linear-gradient(90deg, rgba(74, 144, 217, 0.18), rgba(10, 196, 168, 0.1));
+      border: 1px solid rgba(74, 144, 217, 0.35);
+      border-radius: 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      animation: slideUp 0.5s ease;
+    }
+    @keyframes slideUp {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .account-info__col {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+      min-width: 0;
+    }
+    .account-info__label {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.55);
+      letter-spacing: 0.5px;
+    }
+    .account-info__value {
+      font-size: 17px;
+      font-weight: 700;
+      color: #fff;
+      font-family: Menlo, Consolas, monospace;
+      line-height: 1.1;
+    }
+    .account-info__value--expense { color: #fb923c; }
+    .account-info__value--balance { color: #4ade80; }
+    .account-info__value--change { color: #fbbf24; }
+    .account-info__divider {
+      width: 1px;
+      height: 30px;
+      background: rgba(255, 255, 255, 0.15);
+      flex-shrink: 0;
+    }
+    .account-info.account-info--wide { max-width: 460px; }
+    .account-info.account-info--cash {
+      background: linear-gradient(90deg, rgba(82, 196, 26, 0.18), rgba(251, 191, 36, 0.1));
+      border-color: rgba(82, 196, 26, 0.4);
+    }
+
+    /* 演示切换器(原型展示用,实际部署可移除) */
+    .demo-switcher {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      z-index: 10;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 6px;
+      max-width: 540px;
+      background: rgba(0, 0, 0, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 22px;
+      backdrop-filter: blur(8px);
+      justify-content: flex-end;
+    }
+    .demo-switcher__btn {
+      padding: 5px 14px;
+      background: transparent;
+      border: none;
+      border-radius: 16px;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      transition: all 0.25s;
+      font-family: inherit;
+      white-space: nowrap;
+    }
+    .demo-switcher__btn:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.06);
+    }
+    .demo-switcher__btn.active {
+      background: rgba(82, 196, 26, 0.35);
+      color: #fff;
+      box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+    }
+
     /* 订单基础信息 */
     .success-meta {
       width: 100%;
@@ -300,6 +391,16 @@
 
   <div class="device-frame">
 
+    <!-- 演示切换按钮(原型展示用,实际部署可移除) -->
+    <div class="demo-switcher">
+      <button class="demo-switcher__btn active" data-method="online">在线支付</button>
+      <button class="demo-switcher__btn" data-method="balance">余额支付</button>
+      <button class="demo-switcher__btn" data-method="mixed-bl-online">余额+在线</button>
+      <button class="demo-switcher__btn" data-method="mixed-bl-cash">余额+现金</button>
+      <button class="demo-switcher__btn" data-method="mixed-cash-online">现金+在线</button>
+      <button class="demo-switcher__btn" data-method="cash-change">现金找零</button>
+    </div>
+
     <!-- 顶部导航 -->
     <div class="top-bar">
       <div class="top-bar__left"></div>
@@ -314,14 +415,17 @@
       <div class="success-col">
         <div class="success-icon">&#x2714;</div>
 
-        <div class="success-title">支付成功</div>
+        <div class="success-title" id="successTitle">支付成功</div>
 
         <div class="success-amount">
           <div class="success-amount__label">实付金额</div>
-          <div class="success-amount__value">&#xFFE5;41.60</div>
-          <div class="success-pay-method">&#x1F4F1; 在线支付 · 微信支付</div>
+          <div class="success-amount__value" id="successAmount">&#xFFE5;41.60</div>
+          <div class="success-pay-method" id="payMethodBadge">&#x1F4F1; 在线支付 · 微信支付</div>
         </div>
 
+        <!-- 账户信息条(余额/混合/找零场景显示;由 JS 按支付方式动态注入) -->
+        <div class="account-info" id="accountInfo" style="display:none;"></div>
+
         <div class="success-meta">
           <div class="meta-row">
             <span class="meta-row__label">订单号</span>
@@ -400,12 +504,143 @@
   </div>
 
   <script>
-    /* 8 秒后提示开始下一单 */
-    setTimeout(function() {
-      if (confirm('订单已完成,是否开始下一单?')) {
-        window.location.href = '02-standby.html';
+    /* ==================== 订单数据(与 03-checkout 金额一致) ==================== */
+    var ORDER_TOTAL = 46.60;
+    var ORDER_DISCOUNT = 5.00;      /* 企业补贴 */
+    var ORDER_PAYABLE = ORDER_TOTAL - ORDER_DISCOUNT;  /* 41.60 */
+    var USER_BALANCE = 128.50;
+    var DEMO_BALANCE_FOR_MIXED = 20.00;   /* 混合支付演示余额 */
+    var DEMO_CASH_RATIO = 0.6;            /* 现金+在线的现金比例 */
+    var DEMO_CASH_RECEIVED = 50.00;       /* 现金找零演示实收 */
+
+    /* ==================== 支付方式成功态配置 ==================== */
+    /* title: 成功大标题 */
+    /* badge: 金额下方的支付方式徽章 */
+    /* accountHtml: 账户信息条 HTML(空字符串=隐藏) */
+    var methodConfig = {
+      /* 在线支付 */
+      online: {
+        title: '支付成功',
+        badge: '&#x1F4F1; 在线支付 · 微信 · 已到账',
+        accountHtml: ''
+      },
+      /* 余额支付 */
+      balance: {
+        title: '扣款成功',
+        badge: '&#x1F4B0; 余额支付 · 已从会员账户扣除',
+        accountHtml: accountRow('账户余额 · 原余额', '&#xFFE5;' + USER_BALANCE.toFixed(2), '')
+                   + accountDivider()
+                   + accountRow('本单消费', '-&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('扣款后余额', '&#xFFE5;' + (USER_BALANCE - ORDER_PAYABLE).toFixed(2), 'balance')
+      },
+      /* 余额 + 在线 */
+      'mixed-bl-online': {
+        title: '支付成功',
+        badge: '&#x1F4B0; 余额 + &#x1F4F1; 在线 · 混合支付完成',
+        accountHtml: accountRow('余额扣款', '-&#xFFE5;' + DEMO_BALANCE_FOR_MIXED.toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('在线支付', '-&#xFFE5;' + (ORDER_PAYABLE - DEMO_BALANCE_FOR_MIXED).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('实付合计', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'balance'),
+        wide: true
+      },
+      /* 余额 + 现金 */
+      'mixed-bl-cash': {
+        title: '支付成功',
+        badge: '&#x1F4B0; 余额 + &#x1F4B6; 现金 · 混合支付完成',
+        accountHtml: accountRow('余额扣款', '-&#xFFE5;' + DEMO_BALANCE_FOR_MIXED.toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('现金支付', '-&#xFFE5;' + (ORDER_PAYABLE - DEMO_BALANCE_FOR_MIXED).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('实付合计', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'balance'),
+        wide: true,
+        cash: true
+      },
+      /* 现金 + 在线 */
+      'mixed-cash-online': {
+        title: '支付成功',
+        badge: '&#x1F4B6; 现金 + &#x1F4F1; 在线 · 混合支付完成',
+        accountHtml: accountRow('现金支付', '-&#xFFE5;' + (ORDER_PAYABLE * DEMO_CASH_RATIO).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('在线支付', '-&#xFFE5;' + (ORDER_PAYABLE * (1 - DEMO_CASH_RATIO)).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('实付合计', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'balance'),
+        wide: true,
+        cash: true
+      },
+      /* 现金找零 */
+      'cash-change': {
+        title: '支付成功',
+        badge: '&#x1F4B6; 现金支付 · 收银员已确认',
+        accountHtml: accountRow('应付金额', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), '')
+                   + accountDivider()
+                   + accountRow('实收现金', '&#xFFE5;' + DEMO_CASH_RECEIVED.toFixed(2), '')
+                   + accountDivider()
+                   + accountRow('找零', '&#xFFE5;' + (DEMO_CASH_RECEIVED - ORDER_PAYABLE).toFixed(2), 'change'),
+        wide: true,
+        cash: true
       }
-    }, 8000);
+    };
+
+    /* 账户信息条单元格构造器 */
+    function accountRow(label, value, modifier) {
+      var cls = modifier ? ' account-info__value--' + modifier : '';
+      return '<div class="account-info__col">'
+           +   '<span class="account-info__label">' + label + '</span>'
+           +   '<span class="account-info__value' + cls + '">' + value + '</span>'
+           + '</div>';
+    }
+    function accountDivider() {
+      return '<div class="account-info__divider"></div>';
+    }
+
+    /* 按支付方式应用配置 */
+    function switchDemo(method) {
+      var cfg = methodConfig[method];
+      if (!cfg) return;
+      document.getElementById('successTitle').textContent = cfg.title;
+      document.getElementById('successAmount').innerHTML = '&#xFFE5;' + ORDER_PAYABLE.toFixed(2);
+      document.getElementById('payMethodBadge').innerHTML = cfg.badge;
+      var accountEl = document.getElementById('accountInfo');
+      if (cfg.accountHtml) {
+        accountEl.innerHTML = cfg.accountHtml;
+        accountEl.style.display = 'flex';
+        accountEl.classList.toggle('account-info--wide', !!cfg.wide);
+        accountEl.classList.toggle('account-info--cash', !!cfg.cash);
+      } else {
+        accountEl.style.display = 'none';
+        accountEl.innerHTML = '';
+      }
+      document.querySelectorAll('.demo-switcher__btn').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.method === method);
+      });
+    }
+
+    /* 演示切换器事件 + URL 同步 */
+    document.querySelectorAll('.demo-switcher__btn').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        switchDemo(btn.dataset.method);
+        var url = new URL(window.location.href);
+        url.searchParams.set('method', btn.dataset.method);
+        window.history.replaceState({}, '', url.toString());
+      });
+    });
+
+    /* URL 参数驱动:支持 ?method=xxx 从收银员屏 03 跳转携带支付方式 */
+    function loadFromUrl() {
+      var params = new URLSearchParams(window.location.search);
+      var method = params.get('method');
+      var valid = ['online', 'balance', 'mixed-bl-online', 'mixed-bl-cash', 'mixed-cash-online', 'cash-change'];
+      if (method && valid.indexOf(method) !== -1) {
+        switchDemo(method);
+      } else {
+        switchDemo('online');
+      }
+    }
+
+    /* 初始化(优先 URL 参数,无参数时默认展示在线支付) */
+    loadFromUrl();
   </script>
 
 </body>
diff --git a/other-module/canteen-device/checkout-device/05-orders.html b/other-module/canteen-device/checkout-device/05-orders.html
index a926a0f..a3e4049 100644
--- a/other-module/canteen-device/checkout-device/05-orders.html
+++ b/other-module/canteen-device/checkout-device/05-orders.html
@@ -148,8 +148,8 @@
 
     .order-row {
       display: grid;
-      grid-template-columns: 40px 1.3fr 70px 0.9fr 1.1fr 110px 95px 95px 130px;
-      gap: 10px;
+      grid-template-columns: 36px 1.2fr 92px 64px 64px 0.85fr 1fr 100px 86px 80px 116px;
+      gap: 8px;
       align-items: center;
       padding: 12px 14px;
       background: rgba(26, 43, 74, 0.4);
@@ -162,8 +162,8 @@
     /* 表头 */
     .order-head {
       display: grid;
-      grid-template-columns: 40px 1.3fr 70px 0.9fr 1.1fr 110px 95px 95px 130px;
-      gap: 10px;
+      grid-template-columns: 36px 1.2fr 92px 64px 64px 0.85fr 1fr 100px 86px 80px 116px;
+      gap: 8px;
       padding: 8px 14px;
       font-size: 11px;
       color: rgba(255, 255, 255, 0.45);
@@ -194,6 +194,18 @@
       font-weight: 600;
       font-family: Menlo, Consolas, monospace;
     }
+    .order-row__user {
+      font-size: 13px;
+      color: #fff;
+      font-weight: 600;
+      line-height: 1.4;
+    }
+    .order-row__user-code {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.4);
+      margin-top: 2px;
+      font-family: Menlo, Consolas, monospace;
+    }
     .order-row__sub {
       font-size: 10px;
       color: rgba(255, 255, 255, 0.4);
@@ -223,6 +235,34 @@
       color: #4ade80;
       border: 1px solid rgba(34, 197, 94, 0.35);
     }
+    /* 用户类型徽标(会员/临时/内部员工) */
+    .user-type {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 3px 8px;
+      border-radius: 11px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.3px;
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+    .user-type--member {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(251, 191, 36, 0.22));
+      border: 1px solid rgba(251, 191, 36, 0.45);
+      color: #fbbf24;
+    }
+    .user-type--temp {
+      background: rgba(148, 163, 184, 0.18);
+      border: 1px solid rgba(148, 163, 184, 0.45);
+      color: #cbd5e1;
+    }
+    .user-type--staff {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(74, 144, 217, 0.12));
+      border: 1px solid rgba(96, 165, 250, 0.45);
+      color: #60a5fa;
+    }
     .order-row__items {
       font-size: 12px;
       color: rgba(255, 255, 255, 0.85);
@@ -318,6 +358,11 @@
       color: #ff6b6b;
       border: 1px solid rgba(245, 34, 45, 0.3);
     }
+    .status-pill--partial {
+      background: rgba(251, 191, 36, 0.15);
+      color: #fbbf24;
+      border: 1px solid rgba(251, 191, 36, 0.3);
+    }
 
     /* 空状态 */
     .empty {
@@ -419,6 +464,7 @@
         <select class="filter-select">
           <option>全部状态</option>
           <option>正常</option>
+          <option>部分退款</option>
           <option>已退款</option>
         </select>
         <select class="filter-select">
@@ -430,7 +476,7 @@
         </select>
         <div class="filter-bar__search">
           <span>&#x1F50D;</span>
-          <input type="text" placeholder="搜索订单号 / 顾客姓名">
+          <input type="text" placeholder="用户名/编码/支付流水号">
         </div>
         <div class="filter-bar__stat">
           午餐单数:<strong>5</strong>
@@ -443,7 +489,9 @@
         <!-- 表头(静态保留,不被 JS 覆盖) -->
         <div class="order-head" id="orderHead">
           <div>#</div>
-          <div>订单号 / 状态</div>
+          <div>用户信息</div>
+          <div>用户类型</div>
+          <div>状态</div>
           <div>餐次</div>
           <div>商品</div>
           <div>支付流水号</div>
@@ -475,10 +523,12 @@
 
   <script>
     /* ==================== Mock 订单数据(当前餐次:午餐) ==================== */
+    /* userType: member(会员) | temp(临时) | staff(内部员工) */
     var mockOrders = [
       {
         id: 'CO-20260806-031', mealType: 'lunch', mealLabel: '午餐',
-        cashier: '张三',
+        userName: '雷二', userCode: 'ER-566212', userType: 'member',
+        cashier: '雷二',
         itemCount: 5, itemsSummary: '红烧肉/清炒时蔬/鱼香肉丝/米饭/...',
         payable: 41.60,
         txnNo: 'WX2608061232509987',
@@ -488,6 +538,7 @@
       },
       {
         id: 'CO-20260806-030', mealType: 'lunch', mealLabel: '午餐',
+        userName: '张三', userCode: 'ER-566198', userType: 'staff',
         cashier: '张三',
         itemCount: 4, itemsSummary: '宫保鸡丁/番茄炒蛋/米饭/...',
         payable: 32.50,
@@ -498,17 +549,20 @@
       },
       {
         id: 'CO-20260806-029', mealType: 'lunch', mealLabel: '午餐',
-        cashier: '张三',
+        userName: '李四', userCode: 'ER-566145', userType: 'member',
+        cashier: '李四',
         itemCount: 3, itemsSummary: '麻婆豆腐/番茄炒蛋/米饭',
         payable: 18.50,
+        refundedAmount: 10.00,
         txnNo: 'MQ26080612180056',
         payMethod: '餐券/补贴码', payIcon: '&#x1F3AB;',
         payTime: '12:18:42',
-        printed: true, status: 'normal'
+        printed: true, status: 'partial'
       },
       {
         id: 'CO-20260806-028', mealType: 'lunch', mealLabel: '午餐',
-        cashier: '张三',
+        userName: '王五', userCode: 'TMP-0088', userType: 'temp',
+        cashier: '王五',
         itemCount: 3, itemsSummary: '清蒸鲈鱼/蒜蓉西兰花/紫米饭',
         payable: 34.00,
         txnNo: 'WX2608061210304452',
@@ -518,7 +572,8 @@
       },
       {
         id: 'CO-20260806-027', mealType: 'lunch', mealLabel: '午餐',
-        cashier: '张三',
+        userName: '赵六', userCode: 'ER-565820', userType: 'staff',
+        cashier: '赵六',
         itemCount: 4, itemsSummary: '鱼香肉丝/麻婆豆腐/米饭/...',
         payable: 24.70,
         txnNo: 'CASH26080612021899',
@@ -528,6 +583,13 @@
       }
     ];
 
+    /* 用户类型配置(徽标文案 + 配色) */
+    var USER_TYPE_CONFIG = {
+      member: { label: '会员用户', cls: 'user-type--member' },
+      temp:   { label: '临时用户', cls: 'user-type--temp' },
+      staff:  { label: '内部员工', cls: 'user-type--staff' }
+    };
+
     function renderOrders() {
       var listEl = document.getElementById('orderRows');
       if (mockOrders.length === 0) {
@@ -538,9 +600,22 @@
       var html = mockOrders.map(function(o, idx) {
         var mealTagClass = 'meal-tag--' + o.mealType;
         var refundedClass = o.status === 'refunded' ? ' refunded' : '';
-        var statusPill = o.status === 'refunded'
-          ? '<span class="status-pill status-pill--refunded">已退款</span>'
-          : '<span class="status-pill status-pill--normal">正常</span>';
+        /* 状态徽章:正常 / 部分退款 / 已退款 */
+        var statusPill;
+        if (o.status === 'refunded') {
+          statusPill = '<span class="status-pill status-pill--refunded">已退款</span>';
+        } else if (o.status === 'partial') {
+          statusPill = '<span class="status-pill status-pill--partial">部分退款</span>';
+        } else {
+          statusPill = '<span class="status-pill status-pill--normal">正常</span>';
+        }
+
+        /* 用户信息:姓名 | 编号 */
+        var userHtml = '<div class="order-row__user">' + o.userName + ' | ' + o.userCode + '</div>';
+
+        /* 用户类型徽标 */
+        var typeCfg = USER_TYPE_CONFIG[o.userType] || USER_TYPE_CONFIG.temp;
+        var userTypeHtml = '<span class="user-type ' + typeCfg.cls + '">' + typeCfg.label + '</span>';
 
         /* 商品汇总显示:餐品 x N */
         var itemsHtml = '<div class="order-row__items">&#x1F37D;&#xFE0F; 餐品 x' + o.itemCount + '</div>'
@@ -553,20 +628,27 @@
         /* 支付时间(独立一列) */
         var payTimeHtml = '<div class="order-row__txn">' + o.payTime + '</div>';
 
-        /* 操作按钮 - 退款按钮携带 action=refund 参数跳转详情页 */
-        var detailHref = '06-order-detail.html?id=' + o.id;
-        var refundHref = '06-order-detail.html?id=' + o.id + '&action=refund';
+        /* 操作按钮 - 已退款不再支持退款;部分退款支持「继续退款」(二次退款) */
+        var detailParams = 'id=' + o.id
+          + (o.status ? '&status=' + o.status : '')
+          + (o.refundedAmount ? '&refunded=' + o.refundedAmount : '')
+          + '&payable=' + o.payable.toFixed(2)
+          + '&userType=' + o.userType
+          + '&userName=' + encodeURIComponent(o.userName)
+          + '&userCode=' + encodeURIComponent(o.userCode);
+        var detailHref = '06-order-detail.html?' + detailParams;
+        var refundHref = '06-order-detail.html?' + detailParams + '&action=refund';
         var actions = o.status === 'refunded'
           ? '<a class="action-btn" href="' + detailHref + '">详情</a>'
           : '<a class="action-btn" href="' + detailHref + '">详情</a>'
-            + '<a class="action-btn action-btn--gold" href="09-receipt-preview.html?id=' + o.id + '">打印</a>'
+            + '<a class="action-btn action-btn--gold" href="09-receipt-preview.html?id=' + o.id + '">打印小票</a>'
             + '<a class="action-btn action-btn--danger" href="' + refundHref + '">去退款</a>';
 
         return '<div class="order-row' + refundedClass + '" onclick="window.location.href=\'' + detailHref + '\'">'
           + '<div class="order-row__index">#' + (idx + 1) + '</div>'
-          + '<div>'
-            + '<div class="order-row__id">' + o.id + statusPill + '</div>'
-          + '</div>'
+          + '<div>' + userHtml + '</div>'
+          + '<div>' + userTypeHtml + '</div>'
+          + '<div>' + statusPill + '</div>'
           + '<div><span class="meal-tag ' + mealTagClass + '">' + o.mealLabel + '</span></div>'
           + '<div>' + itemsHtml + '</div>'
           + '<div>' + txnHtml + '</div>'
diff --git a/other-module/canteen-device/checkout-device/06-order-detail.html b/other-module/canteen-device/checkout-device/06-order-detail.html
index 0292659..598c81a 100644
--- a/other-module/canteen-device/checkout-device/06-order-detail.html
+++ b/other-module/canteen-device/checkout-device/06-order-detail.html
@@ -141,6 +141,11 @@
       color: #ff6b6b;
       border: 1px solid rgba(245, 34, 45, 0.3);
     }
+    .status-pill--partial {
+      background: rgba(251, 191, 36, 0.15);
+      color: #fbbf24;
+      border: 1px solid rgba(251, 191, 36, 0.3);
+    }
 
     /* 信息网格 */
     .info-grid {
@@ -172,6 +177,67 @@
       border: 1px solid rgba(37, 99, 235, 0.35);
     }
 
+    /* 用户类型徽标(与 05-orders 同款样式) */
+    .user-type {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px 10px;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.3px;
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+    .user-type--member {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(251, 191, 36, 0.22));
+      border: 1px solid rgba(251, 191, 36, 0.45);
+      color: #fbbf24;
+    }
+    .user-type--temp {
+      background: rgba(148, 163, 184, 0.18);
+      border: 1px solid rgba(148, 163, 184, 0.45);
+      color: #cbd5e1;
+    }
+    .user-type--staff {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(74, 144, 217, 0.12));
+      border: 1px solid rgba(96, 165, 250, 0.45);
+      color: #60a5fa;
+    }
+
+    /* 顾客信息卡(订单头下方独立卡片,展示用户类型/姓名/编号) */
+    .customer-card {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+    .customer-card__field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .customer-card__label {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.5);
+      letter-spacing: 0.5px;
+    }
+    .customer-card__value {
+      font-size: 14px;
+      color: #fff;
+      font-weight: 600;
+    }
+    .customer-card__value--code {
+      font-family: Menlo, Consolas, monospace;
+      font-size: 13px;
+    }
+    .customer-card__divider {
+      width: 1px;
+      height: 18px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
     /* 商品明细表 */
     .item-table {
       width: 100%;
@@ -523,6 +589,39 @@
     .refund-record.show { display: block; }
     .refund-record strong { color: #ff6b6b; }
 
+    /* 部分退款金额提示(可二次退款时显示) */
+    .refund-progress {
+      padding: 12px;
+      background: rgba(251, 191, 36, 0.08);
+      border: 1px solid rgba(251, 191, 36, 0.3);
+      border-radius: 8px;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.75);
+      line-height: 1.6;
+    }
+    .refund-progress__title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #fbbf24;
+      margin-bottom: 8px;
+    }
+    .refund-progress__row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 3px 0;
+    }
+    .refund-progress__row strong {
+      font-family: Menlo, Consolas, monospace;
+      font-size: 13px;
+    }
+    .refund-progress__row--remain {
+      margin-top: 4px;
+      padding-top: 6px;
+      border-top: 1px dashed rgba(251, 191, 36, 0.3);
+    }
+    .refund-progress__row--remain strong { font-size: 15px; }
+
     /* 关联信息 */
     .related-info {
       padding: 10px 12px;
@@ -561,12 +660,12 @@
         <div class="card">
           <div class="order-head">
             <div>
-              <div class="order-head__id">CO-20260806-031</div>
+              <div class="order-head__id" id="orderIdLabel" data-status="normal">CO-20260806-031</div>
               <div style="font-size:11px;color:rgba(255,255,255,0.4);margin-top:4px;">
                 下单:2026-08-06 12:15:30 · 支付:12:32:50
               </div>
             </div>
-            <div class="order-head__status">
+            <div class="order-head__status" id="orderStatus">
               <span class="status-pill status-pill--normal">正常</span>
               <span class="status-pill status-pill--printed">已打印</span>
             </div>
@@ -585,10 +684,6 @@
               <div class="info-item__label">收银员</div>
               <div class="info-item__value">张三 (CS001)</div>
             </div>
-            <div class="info-item">
-              <div class="info-item__label">顾客类型</div>
-              <div class="info-item__value">企业员工</div>
-            </div>
             <div class="info-item">
               <div class="info-item__label">订单件数</div>
               <div class="info-item__value">5 件</div>
@@ -597,6 +692,31 @@
               <div class="info-item__label">订单总重</div>
               <div class="info-item__value">1040g</div>
             </div>
+            <div class="info-item">
+              <div class="info-item__label">商品合计</div>
+              <div class="info-item__value">&#xFFE5;46.60</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 顾客信息卡(展示用户类型/姓名/编号三项) -->
+        <div class="card">
+          <div class="card__title">顾客信息</div>
+          <div class="customer-card" id="customerCard">
+            <div class="customer-card__field">
+              <span class="customer-card__label">用户类型</span>
+              <span class="user-type user-type--member" id="customerUserType">会员用户</span>
+            </div>
+            <div class="customer-card__divider"></div>
+            <div class="customer-card__field">
+              <span class="customer-card__label">姓名</span>
+              <span class="customer-card__value" id="customerUserName">雷二</span>
+            </div>
+            <div class="customer-card__divider"></div>
+            <div class="customer-card__field">
+              <span class="customer-card__label">编号</span>
+              <span class="customer-card__value customer-card__value--code" id="customerUserCode">ER-566212</span>
+            </div>
           </div>
         </div>
 
@@ -683,6 +803,23 @@
       <!-- 右列:操作面板 -->
       <div class="right-col">
 
+        <!-- 部分退款金额提示(部分退款订单显示) -->
+        <div class="refund-progress" id="refundProgress" style="display:none;">
+          <div class="refund-progress__title">&#x26A0;&#xFE0F; 已部分退款</div>
+          <div class="refund-progress__row">
+            <span>订单总额</span>
+            <strong id="rpTotal">&#xFFE5;0.00</strong>
+          </div>
+          <div class="refund-progress__row">
+            <span>已退金额</span>
+            <strong id="rpRefunded" style="color:#ff6b6b;">&#xFFE5;0.00</strong>
+          </div>
+          <div class="refund-progress__row refund-progress__row--remain">
+            <span>可退金额</span>
+            <strong id="rpRemain" style="color:#fbbf24;">&#xFFE5;0.00</strong>
+          </div>
+        </div>
+
         <!-- 退款记录(已退款时显示) -->
         <div class="refund-record" id="refundRecord" style="display:none;">
           <div style="margin-bottom:6px;color:#ff6b6b;font-weight:600;">&#x26A0;&#xFE0F; 已退款</div>
@@ -700,12 +837,6 @@
             <button class="btn btn--gold" onclick="window.location.href='09-receipt-preview.html'">
               &#x1F5A8;&#xFE0F; 重新打印小票
             </button>
-            <button class="btn btn--ghost" onclick="alert('已发起补齐明细流程')">
-              &#x270F;&#xFE0F; 补齐明细(漏记/多记)
-            </button>
-            <button class="btn btn--ghost" onclick="alert('订单已加入今日异常单列表')">
-              &#x26A0;&#xFE0F; 标记为异常订单
-            </button>
             <button class="btn btn--danger" onclick="toggleRefundPanel()">
               &#x1F4B8; 申请退款
             </button>
@@ -831,15 +962,21 @@
   </style>
 
   <script>
-    /* 订单原金额 */
+    /* 订单总额(原始应付) */
     var ORDER_PAYABLE = 41.60;
+    /* 已退金额(部分退款场景下 > 0) */
+    var ORDER_REFUNDED = 0;
+    /* 可退金额 = 订单总额 - 已退金额 */
+    function refundableAmount() {
+      return Math.max(0, ORDER_PAYABLE - ORDER_REFUNDED);
+    }
     /* 当前退款方式:full / partial */
     var currentRefundType = 'full';
 
     function toggleRefundPanel() {
       var panel = document.getElementById('refundPanel');
       panel.classList.toggle('show');
-      /* 默认重置为全额退款 */
+      /* 默认重置为全额退款(全额 = 本次退完剩余可退金额) */
       if (panel.classList.contains('show')) {
         switchRefundType('full');
       }
@@ -853,11 +990,27 @@
       });
       var wrap = document.getElementById('partialAmountWrap');
       wrap.classList.toggle('show', type === 'partial');
+      /* 二次退款场景:更新全额退款的提示文案为「可退金额」 */
+      var fullHint = document.querySelector('.refund-type__item[data-type="full"] .refund-type__hint');
+      if (fullHint) {
+        fullHint.textContent = '一键退回 ' + money(refundableAmount()) + ' 到原支付账户';
+      }
+      /* 全额退款的含义改为「退完剩余可退金额」 */
+      var fullName = document.querySelector('.refund-type__item[data-type="full"] .refund-type__name');
+      if (fullName) {
+        fullName.textContent = ORDER_REFUNDED > 0 ? '退剩余全部' : '全额退款';
+      }
+      var partialHint = document.querySelector('.refund-type__item[data-type="partial"] .refund-type__hint');
+      if (partialHint) {
+        partialHint.textContent = '手动输入退款金额(最多 ' + money(refundableAmount()) + ')';
+      }
       updateRefundDisplay();
     }
 
-    /* 部分退款:快捷金额 */
+    /* 部分退款:快捷金额(基于可退金额) */
     function setPartial(v) {
+      var remain = refundableAmount();
+      if (v > remain) v = remain;
       document.getElementById('partialAmount').value = v.toFixed(2);
       updatePartialAmount();
     }
@@ -865,11 +1018,12 @@
     function updatePartialAmount() {
       var input = document.getElementById('partialAmount');
       var v = parseFloat(input.value) || 0;
-      /* 不超过订单应付 */
-      if (v > ORDER_PAYABLE) {
-        v = ORDER_PAYABLE;
+      var remain = refundableAmount();
+      /* 不超过可退金额 */
+      if (v > remain) {
+        v = remain;
         input.value = v.toFixed(2);
-        showToast('退款金额不能超过应付金额 ¥' + ORDER_PAYABLE.toFixed(2), 'warn');
+        showToast('本次退款不能超过可退金额 ' + money(remain), 'warn');
       }
       if (v < 0) {
         v = 0;
@@ -880,8 +1034,48 @@
 
     /* 更新退款金额显示 */
     function updateRefundDisplay() {
-      var amount = currentRefundType === 'full' ? ORDER_PAYABLE : (parseFloat(document.getElementById('partialAmount').value) || 0);
-      document.getElementById('refundAmountDisplay').innerHTML = '&#xFFE5;' + amount.toFixed(2);
+      var amount = currentRefundType === 'full' ? refundableAmount() : (parseFloat(document.getElementById('partialAmount').value) || 0);
+      document.getElementById('refundAmountDisplay').innerHTML = money(amount);
+    }
+
+    /* 格式化金额为 ¥xx.xx
+     * 注意:统一返回真实 ¥ 字符(￥),不要返回 HTML 实体字符串
+     * 因为通过 textContent(如 toast)、原生 alert/confirm 弹窗、输入框 value 设置时,
+     * HTML 实体会被当作字面量显示成 "&#xFFE5;" */
+    function money(v) {
+      return '￥' + Number(v).toFixed(2);
+    }
+
+    /* 渲染已退/可退金额提示块(部分退款场景) */
+    function renderRefundProgress() {
+      var box = document.getElementById('refundProgress');
+      if (ORDER_REFUNDED > 0 && ORDER_REFUNDED < ORDER_PAYABLE) {
+        document.getElementById('rpTotal').innerHTML = money(ORDER_PAYABLE);
+        document.getElementById('rpRefunded').innerHTML = money(ORDER_REFUNDED);
+        document.getElementById('rpRemain').innerHTML = money(refundableAmount());
+        box.style.display = 'block';
+      } else {
+        box.style.display = 'none';
+      }
+    }
+
+    /* 渲染订单头状态徽章 */
+    function renderOrderStatus(status) {
+      var wrap = document.getElementById('orderStatus');
+      if (!wrap) return;
+      var pills = '';
+      if (status === 'refunded') {
+        pills = '<span class="status-pill status-pill--refunded">已退款</span>';
+      } else if (status === 'partial') {
+        pills = '<span class="status-pill status-pill--partial">部分退款</span>';
+        if (typeof ORDER_PRINTED !== 'undefined' && ORDER_PRINTED) {
+          pills += '<span class="status-pill status-pill--printed">已打印</span>';
+        }
+      } else {
+        pills = '<span class="status-pill status-pill--normal">正常</span>'
+          + '<span class="status-pill status-pill--printed">已打印</span>';
+      }
+      wrap.innerHTML = pills;
     }
 
     /* 退款原因选择 */
@@ -907,20 +1101,27 @@
       }
       var reason = reasonEl.textContent.trim();
       var note = document.getElementById('refundNote').value.trim();
-      var amount = currentRefundType === 'full' ? ORDER_PAYABLE : (parseFloat(document.getElementById('partialAmount').value) || 0);
+      var remain = refundableAmount();
+      var amount = currentRefundType === 'full' ? remain : (parseFloat(document.getElementById('partialAmount').value) || 0);
 
       if (amount <= 0) {
         showToast('退款金额必须大于 0', 'warn');
         return;
       }
-      if (amount > ORDER_PAYABLE) {
-        showToast('退款金额不能超过应付金额', 'warn');
+      if (amount > remain) {
+        showToast('本次退款不能超过可退金额 ' + money(remain), 'warn');
         return;
       }
 
-      var typeText = currentRefundType === 'full' ? '全额退款' : '部分退款';
+      /* 是否为二次退款(本次退款后是否还有剩余) */
+      var afterRemain = remain - amount;
+      var isSecond = ORDER_REFUNDED > 0;
+      var typeText = currentRefundType === 'full' ? (ORDER_REFUNDED > 0 ? '退剩余全部' : '全额退款') : '部分退款';
+
       var msg = '确认' + typeText + '?\n\n'
-        + '退款金额:¥' + amount.toFixed(2) + '\n'
+        + '本次退款金额:¥' + amount.toFixed(2) + '\n'
+        + (isSecond ? '已退金额:¥' + ORDER_REFUNDED.toFixed(2) + '\n' : '')
+        + '退款后剩余可退:¥' + afterRemain.toFixed(2) + '\n'
         + '退款原因:' + reason + '\n'
         + (note ? '备注:' + note + '\n' : '')
         + '此操作不可撤销。';
@@ -932,19 +1133,43 @@
           document.getElementById('normalActions').style.display = 'none';
           var record = document.getElementById('refundRecord');
           record.style.display = 'block';
+          /* 累计已退金额 */
+          var totalRefunded = ORDER_REFUNDED + amount;
+          var stillPartial = totalRefunded < ORDER_PAYABLE;
           /* 渲染退款记录内容 */
           record.innerHTML =
-              '<div style="margin-bottom:6px;color:#ff6b6b;font-weight:600;">&#x26A0;&#xFE0F; ' + typeText + '已发起</div>'
-            + '<div>退款金额:<strong>¥' + amount.toFixed(2) + '</strong> / ' + (currentRefundType === 'full' ? '原订单全额' : ('剩余 ¥' + (ORDER_PAYABLE - amount).toFixed(2) + ' 已结算')) + '</div>'
+              '<div style="margin-bottom:6px;color:#ff6b6b;font-weight:600;">&#x26A0;&#xFE0F; ' + (stillPartial ? '部分退款' : '全额退款') + '已发起</div>'
+            + '<div>本次退款:<strong>¥' + amount.toFixed(2) + '</strong> · 累计已退:<strong>¥' + totalRefunded.toFixed(2) + '</strong></div>'
+            + '<div>订单总额:¥' + ORDER_PAYABLE.toFixed(2) + ' / 剩余可退:¥' + afterRemain.toFixed(2) + '</div>'
             + '<div>退款方式:原路退回(微信)</div>'
             + '<div>退款时间:2026-08-06 14:30:25</div>'
             + '<div>操作人:张三 (CS001)</div>'
             + '<div>退款原因:' + reason + '</div>'
             + (note ? '<div>备注:' + note + '</div>' : '');
+          /* 若仍可二次退款,展示「继续退款」入口 */
+          if (stillPartial) {
+            record.innerHTML += '<div style="margin-top:8px;text-align:center;">'
+              + '<button class="btn btn--danger" style="padding:8px 16px;font-size:12px;" onclick="resetForSecondRefund(' + afterRemain.toFixed(2) + ',' + totalRefunded.toFixed(2) + ')">继续退款剩余 ¥' + afterRemain.toFixed(2) + '</button>'
+              + '</div>';
+          }
         }, 1200);
       }
     }
 
+    /* 二次退款:重置面板状态 */
+    function resetForSecondRefund(newRemain, totalRefunded) {
+      ORDER_REFUNDED = totalRefunded;
+      document.getElementById('normalActions').style.display = 'block';
+      var record = document.getElementById('refundRecord');
+      record.style.display = 'none';
+      /* 状态徽章更新为部分退款 */
+      renderOrderStatus('partial');
+      /* 已退/可退金额提示刷新 */
+      renderRefundProgress();
+      /* 重新打开退款面板 */
+      toggleRefundPanel();
+    }
+
     function showToast(msg, type) {
       var el = document.getElementById('toast');
       el.textContent = msg;
@@ -967,6 +1192,28 @@
       return match ? decodeURIComponent(match) : null;
     }
 
+    /* 用户类型配置(与 05-orders 同款) */
+    var USER_TYPE_CONFIG = {
+      member: { label: '会员用户', cls: 'user-type--member' },
+      temp:   { label: '临时用户', cls: 'user-type--temp' },
+      staff:  { label: '内部员工', cls: 'user-type--staff' }
+    };
+
+    /* 渲染顾客信息卡(由 URL 参数驱动,缺失则保留默认值) */
+    function renderCustomerCard() {
+      var userType = getQueryParam('userType');
+      var userName = getQueryParam('userName');
+      var userCode = getQueryParam('userCode');
+      if (userName) document.getElementById('customerUserName').textContent = decodeURIComponent(userName);
+      if (userCode) document.getElementById('customerUserCode').textContent = decodeURIComponent(userCode);
+      if (userType && USER_TYPE_CONFIG[userType]) {
+        var cfg = USER_TYPE_CONFIG[userType];
+        var el = document.getElementById('customerUserType');
+        el.textContent = cfg.label;
+        el.className = 'user-type ' + cfg.cls;
+      }
+    }
+
     (function autoInitFromUrl() {
       /* 同步订单号(若 URL 带了 id 参数,显示在订单头) */
       var orderId = getQueryParam('id');
@@ -974,6 +1221,42 @@
         var idEl = document.querySelector('.order-head__id');
         if (idEl) idEl.textContent = orderId;
       }
+      /* 渲染顾客信息卡 */
+      renderCustomerCard();
+      /* 订单状态 / 已退金额(用于演示部分退款场景)
+       *   status=partial      → 显示「部分退款」徽章
+       *   refunded=<number>   → 已退金额,影响可退金额计算
+       *   payable=<number>    → 订单总额(可选,默认 41.60)
+       * 例如:06-order-detail.html?id=CO-20260806-029&status=partial&refunded=10
+       */
+      var status = getQueryParam('status') || 'normal';
+      var payableParam = getQueryParam('payable');
+      var refundedParam = getQueryParam('refunded');
+      if (payableParam !== null) ORDER_PAYABLE = parseFloat(payableParam) || ORDER_PAYABLE;
+      if (refundedParam !== null) ORDER_REFUNDED = Math.max(0, parseFloat(refundedParam) || 0);
+
+      /* 已退款:隐藏操作面板,显示退款记录 */
+      if (status === 'refunded') {
+        document.getElementById('normalActions').style.display = 'none';
+        var record = document.getElementById('refundRecord');
+        record.style.display = 'block';
+        record.innerHTML =
+            '<div style="margin-bottom:6px;color:#ff6b6b;font-weight:600;">&#x26A0;&#xFE0F; 已退款</div>'
+          + '<div>退款金额:<strong>' + money(ORDER_PAYABLE) + '</strong></div>'
+          + '<div>退款方式:原路退回(微信)</div>'
+          + '<div>退款时间:2026-08-06 13:05:12</div>'
+          + '<div>操作人:张三 (CS001)</div>'
+          + '<div>退款原因:顾客反馈菜品口味问题</div>';
+        renderOrderStatus('refunded');
+        return;
+      }
+
+      /* 部分退款:更新状态徽章 + 显示已退/可退金额 */
+      if (status === 'partial' && ORDER_REFUNDED > 0) {
+        renderOrderStatus('partial');
+        renderRefundProgress();
+      }
+
       var action = getQueryParam('action');
       /* 退款操作:自动展开退款面板并滚动到右侧 */
       if (action === 'refund') {
@@ -989,7 +1272,7 @@
           /* 高亮提示一下退款面板 */
           panel.style.boxShadow = '0 0 0 3px rgba(245, 34, 45, 0.3)';
           setTimeout(function() { panel.style.boxShadow = ''; }, 1800);
-          showToast('请在下方填写退款信息', 'warn');
+          showToast(ORDER_REFUNDED > 0 ? '请继续填写二次退款信息' : '请在下方填写退款信息', 'warn');
         }, 200);
       }
     })();
diff --git a/other-module/canteen-device/checkout-device/07-statistics.html b/other-module/canteen-device/checkout-device/07-statistics.html
index 9084c07..60f68dd 100644
--- a/other-module/canteen-device/checkout-device/07-statistics.html
+++ b/other-module/canteen-device/checkout-device/07-statistics.html
@@ -29,14 +29,22 @@
       flex-direction: column;
     }
 
-    /* 顶部导航 */
+    /* 顶部导航:标题 + Tab 切换 + 时间 */
     .top-bar {
       display: flex;
       align-items: center;
-      height: 44px;
+      height: 48px;
       background: #1a2b4a;
       padding: 0 20px;
       flex-shrink: 0;
+      gap: 20px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    }
+    .top-bar__left {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      flex-shrink: 0;
     }
     .back-btn {
       font-size: 13px;
@@ -47,13 +55,37 @@
     }
     .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);
+      color: rgba(255, 255, 255, 0.9);
+      letter-spacing: 0.5px;
+    }
+    /* 顶部内嵌 Tab(营收/餐线切换) */
+    .top-tabs {
+      display: flex;
+      gap: 2px;
+      align-items: center;
+      margin-left: 8px;
+    }
+    .top-tab {
+      padding: 6px 16px;
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      transition: all 0.15s;
+      font-family: inherit;
+    }
+    .top-tab:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.04); }
+    .top-tab.active {
+      color: #fff;
+      background: rgba(74, 144, 217, 0.18);
+      font-weight: 600;
     }
     .top-bar__meta {
+      margin-left: auto;
       font-size: 12px;
       color: rgba(255, 255, 255, 0.5);
       font-family: Menlo, Consolas, monospace;
@@ -108,6 +140,26 @@
       font-size: 12px;
       cursor: pointer;
       font-weight: 600;
+      font-family: inherit;
+    }
+    .meal-select option { background: #1a2b4a; color: #fff; }
+    /* 自定义日期输入 */
+    .date-input {
+      padding: 6px 10px;
+      background: rgba(255, 255, 255, 0.04);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 12px;
+      font-family: Menlo, Consolas, monospace;
+      cursor: pointer;
+      color-scheme: dark;
+    }
+    .date-input:focus { outline: none; border-color: #4a90d9; }
+    .filter-bar__divider {
+      width: 1px;
+      height: 18px;
+      background: rgba(255, 255, 255, 0.1);
     }
     .filter-bar__right {
       display: flex;
@@ -116,46 +168,6 @@
       font-size: 12px;
       color: rgba(255, 255, 255, 0.55);
     }
-    .export-btn {
-      padding: 6px 12px;
-      background: rgba(82, 196, 26, 0.15);
-      border: 1px solid rgba(82, 196, 26, 0.3);
-      border-radius: 6px;
-      color: #4ade80;
-      font-size: 12px;
-      cursor: pointer;
-      transition: all 0.15s;
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .export-btn:hover { background: rgba(82, 196, 26, 0.25); }
-
-    /* 二级 Tab */
-    .sub-tabs {
-      display: flex;
-      gap: 4px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-      margin-bottom: 12px;
-    }
-    .sub-tab {
-      padding: 8px 18px;
-      font-size: 13px;
-      color: rgba(255, 255, 255, 0.6);
-      cursor: pointer;
-      border: none;
-      background: transparent;
-      border-bottom: 2px solid transparent;
-      transition: all 0.15s;
-      position: relative;
-      top: 1px;
-    }
-    .sub-tab.active {
-      color: #fff;
-      border-bottom-color: #4a90d9;
-      font-weight: 600;
-    }
 
     /* Tab 面板 */
     .tab-panel {
@@ -496,16 +508,15 @@
       margin-left: 4px;
     }
 
-    /* 餐线主区:左明细表 + 右排行 */
+    /* 餐线主区:明细表占满整行 */
     .line-main {
-      display: grid;
-      grid-template-columns: 1.6fr 1fr;
-      gap: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
       flex: 1;
       min-height: 0;
     }
-    .line-table-card,
-    .rank-card {
+    .line-table-card {
       background: rgba(26, 43, 74, 0.4);
       border: 1px solid rgba(255, 255, 255, 0.06);
       border-radius: 12px;
@@ -513,6 +524,8 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      flex: 1;
+      min-height: 0;
     }
 
     /* 表头 + 表体共用 table-layout,保证列对齐 */
@@ -528,22 +541,38 @@
       table-layout: fixed;
     }
     .line-table thead th {
-      color: rgba(255, 255, 255, 0.5);
+      color: rgba(255, 255, 255, 0.55);
       font-weight: 500;
       font-size: 11px;
       text-align: right;
-      padding: 6px 6px;
+      padding: 8px 6px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.08);
       position: sticky;
       top: 0;
       background: #1a2b4a;
       z-index: 1;
+      white-space: nowrap;
     }
-    .line-table thead th:first-child,
-    .line-table thead th:nth-child(2),
-    .line-table thead th:nth-child(3) { text-align: left; }
+    /* 第一列(营养秤编号)和第二列(菜品)左对齐 */
+    .line-table thead th:nth-child(1),
+    .line-table thead th:nth-child(2) { text-align: left; }
+    /* 可排序列:鼠标手型 + 排序图标 */
+    .line-table thead th.sortable {
+      cursor: pointer;
+      user-select: none;
+    }
+    .line-table thead th.sortable:hover { color: #fff; }
+    .line-table thead th.sortable .sort-ico {
+      display: inline-block;
+      margin-left: 3px;
+      color: rgba(255, 255, 255, 0.25);
+      font-size: 10px;
+      vertical-align: middle;
+    }
+    .line-table thead th.sortable.asc .sort-ico { color: #4a90d9; }
+    .line-table thead th.sortable.desc .sort-ico { color: #4a90d9; }
     .line-table tbody td {
-      padding: 8px 6px;
+      padding: 7px 6px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.04);
       text-align: right;
       color: #fff;
@@ -552,43 +581,26 @@
       vertical-align: middle;
     }
     .line-table tbody td:first-child,
-    .line-table tbody td:nth-child(2),
-    .line-table tbody td:nth-child(3) { text-align: left; font-family: -apple-system, "Microsoft YaHei", sans-serif; }
+    .line-table tbody td:nth-child(2) { text-align: left; }
+    .line-table tbody td:nth-child(2) { font-family: -apple-system, "Microsoft YaHei", sans-serif; }
     .line-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
-    .line-table__rank {
-      width: 30px;
-      color: rgba(255, 255, 255, 0.6) !important;
-      font-weight: 700;
-      font-family: Menlo, Consolas, monospace !important;
-    }
     .line-table__dish {
       display: flex;
       align-items: center;
       gap: 8px;
     }
     .line-table__thumb {
-      width: 26px;
-      height: 26px;
+      width: 24px;
+      height: 24px;
       border-radius: 5px;
       background: linear-gradient(135deg, rgba(74, 144, 217, 0.2), rgba(10, 196, 168, 0.2));
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 14px;
+      font-size: 13px;
       flex-shrink: 0;
     }
     .line-table__name { font-size: 12px; color: #fff; }
-    .line-table__type {
-      display: inline-block;
-      padding: 1px 6px;
-      font-size: 10px;
-      border-radius: 4px;
-      font-family: -apple-system, "Microsoft YaHei", sans-serif;
-    }
-    .type--staple { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
-    .type--meat { background: rgba(255, 107, 107, 0.18); color: #ff8888; }
-    .type--veg { background: rgba(82, 196, 26, 0.18); color: #4ade80; }
-    .type--soup { background: rgba(74, 144, 217, 0.18); color: #60a5fa; }
     .diff {
       font-weight: 600;
     }
@@ -596,120 +608,30 @@
     .diff--ok { color: #4ade80; }
     .diff--mid { color: #fbbf24; }
     .diff--zero { color: rgba(255, 255, 255, 0.45); }
-    .progress {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      justify-content: flex-end;
-    }
-    .progress__track {
-      width: 60px;
-      height: 6px;
-      background: rgba(255, 255, 255, 0.08);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-    .progress__fill {
-      height: 100%;
-      border-radius: 3px;
-      background: linear-gradient(90deg, #52c41a, #0AC4A8);
-    }
-    .progress__fill--low { background: linear-gradient(90deg, #ff6b6b, #f87171); }
-    .progress__fill--mid { background: linear-gradient(90deg, #fbbf24, #fb923c); }
-    .progress__text {
-      font-size: 11px;
-      color: rgba(255, 255, 255, 0.85);
+    /* 销售进度:仅百分比,无进度条 */
+    .progress-text-only {
       font-family: Menlo, Consolas, monospace;
-      min-width: 36px;
-      text-align: right;
+      font-weight: 600;
     }
+    .progress-text-only--low { color: #ff6b6b; }
+    .progress-text-only--mid { color: #fbbf24; }
+    .progress-text-only--ok { color: #4ade80; }
 
     /* 滚动条美化 */
     .line-table-wrap::-webkit-scrollbar { width: 6px; }
     .line-table-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
 
-    /* 销量排行 */
-    .rank-list {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      flex: 1;
-      overflow-y: auto;
-      padding-right: 4px;
-    }
-    .rank-item {
-      display: grid;
-      grid-template-columns: 22px 1fr auto;
-      align-items: center;
-      gap: 10px;
-      padding: 8px 10px;
-      background: rgba(0, 0, 0, 0.2);
-      border: 1px solid rgba(255, 255, 255, 0.04);
-      border-radius: 6px;
-    }
-    .rank-item__rank {
-      text-align: center;
-      font-size: 12px;
-      font-weight: 700;
-      color: rgba(255, 255, 255, 0.6);
-      font-family: Menlo, Consolas, monospace;
-    }
-    .rank-item__rank--1 { color: #fbbf24; font-size: 14px; }
-    .rank-item__rank--2 { color: #cbd5e1; font-size: 14px; }
-    .rank-item__rank--3 { color: #fb923c; font-size: 14px; }
-    .rank-item__main { min-width: 0; }
-    .rank-item__name {
-      font-size: 12px;
-      color: #fff;
-      margin-bottom: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .rank-item__bar-wrap {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 10px;
-      color: rgba(255, 255, 255, 0.5);
-      font-family: Menlo, Consolas, monospace;
-    }
-    .rank-item__bar {
-      flex: 1;
-      height: 5px;
-      background: rgba(255, 255, 255, 0.06);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-    .rank-item__bar-fill {
-      height: 100%;
-      background: linear-gradient(90deg, #4a90d9, #60a5fa);
-      border-radius: 3px;
-    }
-    .rank-item__bar-fill--gold { background: linear-gradient(90deg, #fbbf24, #fb923c); }
-    .rank-item__count {
-      font-size: 13px;
-      color: #4ade80;
-      font-weight: 700;
-      font-family: Menlo, Consolas, monospace;
-    }
-    .rank-item__count-unit {
-      font-size: 10px;
-      color: rgba(255, 255, 255, 0.4);
-      font-weight: 400;
-    }
-
     /* 人员类型横条 */
     .ppl-bars {
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 8px;
       width: 100%;
-      padding: 4px 4px;
+      padding: 2px 4px;
     }
     .ppl-row {
       display: grid;
-      grid-template-columns: 80px 1fr 80px;
+      grid-template-columns: 72px 1fr 110px;
       align-items: center;
       gap: 10px;
       font-size: 12px;
@@ -732,48 +654,76 @@
       color: #fff;
       font-weight: 600;
     }
+
+    /* 维度切换 pill */
+    .dim-switch {
+      display: inline-flex;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 6px;
+      padding: 2px;
+      gap: 2px;
+    }
+    .dim-switch__btn {
+      padding: 3px 10px;
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.6);
+      border: none;
+      background: transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: inherit;
+      transition: all 0.15s;
+    }
+    .dim-switch__btn.active {
+      background: rgba(74, 144, 217, 0.3);
+      color: #fff;
+      font-weight: 600;
+    }
   </style>
 </head>
 <body>
 
   <div class="device-frame">
 
-    <!-- 顶部导航 -->
+    <!-- 顶部导航:返回 + 标题 + Tab + 时间 -->
     <div class="top-bar">
-      <a class="back-btn" href="index.html">&#x25C0; 返回主页</a>
-      <span class="top-bar__title">运营数据统计</span>
+      <div class="top-bar__left">
+        <a class="back-btn" href="index.html">&#x25C0; 返回主页</a>
+        <span class="top-bar__title">运营数据统计</span>
+        <div class="top-tabs">
+          <button class="top-tab active" data-tab="revenue">&#x1F4CA; 营收统计</button>
+          <button class="top-tab" data-tab="line">&#x1F372; 餐线统计</button>
+        </div>
+      </div>
       <span class="top-bar__meta">2026-08-06 14:25</span>
     </div>
 
     <!-- 主内容 -->
     <div class="main-area">
 
-      <!-- 筛选条:日期 + 餐次 + 导出 -->
+      <!-- 筛选条:日期快捷 + 自定义日期 + 餐次 -->
       <div class="filter-bar">
         <div class="filter-bar__left">
           <div class="date-tabs">
-            <button class="date-tab active">当前餐次</button>
-            <button class="date-tab">今日全部</button>
-            <button class="date-tab">昨日</button>
-            <button class="date-tab">本周</button>
-            <button class="date-tab">自定义</button>
+            <button class="date-tab active" data-range="current">当前餐次</button>
+            <button class="date-tab" data-range="today">今日全部</button>
+            <button class="date-tab" data-range="yesterday">昨日</button>
           </div>
-          <button class="meal-select">&#x1F37D; 午餐 &#x25BC;</button>
+          <div class="filter-bar__divider"></div>
+          <input type="date" class="date-input" id="customDate" value="2026-08-06" />
+          <select class="meal-select" id="mealSelect">
+            <option value="breakfast">&#x1F305; 早餐</option>
+            <option value="lunch" selected>&#x1F37D; 午餐</option>
+            <option value="dinner">&#x1F319; 晚餐</option>
+            <option value="all">全天全部</option>
+          </select>
         </div>
         <div class="filter-bar__right">
           <span>数据更新:14:25:30</span>
-          <a class="export-btn" href="javascript:void(0)" onclick="alert('已导出午餐餐次运营数据报表')">
-            &#x1F4E5; 导出报表
-          </a>
         </div>
       </div>
 
-      <!-- 二级 Tab -->
-      <div class="sub-tabs">
-        <button class="sub-tab active" data-tab="revenue">&#x1F4CA; 营收统计</button>
-        <button class="sub-tab" data-tab="line">&#x1F372; 餐线统计</button>
-      </div>
-
       <!-- ===== Tab 1: 营收统计 ===== -->
       <div class="tab-panel active" data-panel="revenue">
 
@@ -957,31 +907,14 @@
           <div class="chart-card">
             <div class="chart-card__title">
               <span class="chart-card__title-text">就餐人员类型分布</span>
-              <span class="chart-card__hint">按订单数</span>
+              <div class="dim-switch" id="pplDimSwitch">
+                <button class="dim-switch__btn active" data-dim="order">按订单</button>
+                <button class="dim-switch__btn" data-dim="amount">按金额</button>
+              </div>
             </div>
             <div class="chart-card__body">
-              <div class="ppl-bars">
-                <div class="ppl-row">
-                  <span class="ppl-row__label">企业员工</span>
-                  <div class="ppl-row__track">
-                    <div class="ppl-row__fill" style="width:60%; background:linear-gradient(90deg,#4a90d9,#60a5fa);"></div>
-                  </div>
-                  <span class="ppl-row__value">58 单 · 60%</span>
-                </div>
-                <div class="ppl-row">
-                  <span class="ppl-row__label">外部访客</span>
-                  <div class="ppl-row__track">
-                    <div class="ppl-row__fill" style="width:30%; background:linear-gradient(90deg,#fbbf24,#fb923c);"></div>
-                  </div>
-                  <span class="ppl-row__value">29 单 · 30%</span>
-                </div>
-                <div class="ppl-row">
-                  <span class="ppl-row__label">临时人员</span>
-                  <div class="ppl-row__track">
-                    <div class="ppl-row__fill" style="width:10%; background:linear-gradient(90deg,#52c41a,#0AC4A8);"></div>
-                  </div>
-                  <span class="ppl-row__value">9 单 · 10%</span>
-                </div>
+              <div class="ppl-bars" id="pplBars">
+                <!-- 由 JS 动态渲染 -->
               </div>
             </div>
           </div>
@@ -1017,247 +950,44 @@
           </div>
         </div>
 
-        <!-- 异常提示条 -->
-        <div class="alert-bar">
-          <span class="alert-bar__icon">&#x26A0;&#xFE0F;</span>
-          <span>检测到 <span class="alert-bar__count">4</span> 道菜品产销差异 &gt; 0.3 kg(疑似损耗/丢失):</span>
-          <span class="alert-bar__dishes">宫保鸡丁、清蒸鲈鱼、香菇鸡汤、凉拌黄瓜</span>
-        </div>
-
-        <!-- 主区:左明细表 + 右排行 -->
+        <!-- 主区:明细表占满整行 -->
         <div class="line-main">
 
           <!-- 餐线明细表 -->
           <div class="line-table-card">
             <div class="chart-card__title">
-              <span class="chart-card__title-text">餐线明细(制作 / 销售 / 剩余)</span>
-              <span class="chart-card__hint">午餐餐次 · 按销量降序 · 单位 kg</span>
+              <span class="chart-card__title-text">餐线明细(制作 / 销售 / 取餐 / 产销差额)</span>
+              <span class="chart-card__hint">午餐餐次 · 点击列头排序</span>
             </div>
             <div class="line-table-wrap">
-              <table class="line-table">
+              <table class="line-table" id="lineTable">
                 <thead>
                   <tr>
-                    <th style="width:30px;">#</th>
-                    <th style="width:28%;">菜品</th>
-                    <th style="width:13%;">类型</th>
-                    <th>制作量</th>
-                    <th>已售</th>
-                    <th>剩余</th>
-                    <th>产销差值</th>
-                    <th style="width:130px;">销售进度</th>
-                  </tr>
-                  <!--
-                    产销差值 = 制作量 − 已售 − 剩余
-                    正数:疑似损耗/丢失(红色)
-                    0   :账实一致(灰色)
-                    负数:数据异常(黄色)
-                  -->
+                    <th class="sortable" data-key="scaleNo">营养秤编号<span class="sort-ico">▲▼</span></th>
+                    <th style="width:17%;">菜品</th>
+                    <th class="sortable" data-key="salesAmount">销售额<span class="sort-ico">▲▼</span></th>
+                    <th class="sortable" data-key="made">制作量<span class="sort-ico">▲▼</span></th>
+                    <th class="sortable" data-key="sold">已售<span class="sort-ico">▲▼</span></th>
+                    <th class="sortable" data-key="left">剩余<span class="sort-ico">▲▼</span></th>
+                    <th class="sortable" data-key="pickupTimes">取餐次数<span class="sort-ico">▲▼</span></th>
+                    <th class="sortable" data-key="pickupPeople">取餐人数<span class="sort-ico">▲▼</span></th>
+                    <th class="sortable" data-key="diffKg">产销差值<span class="sort-ico">▲▼</span></th>
+                    <th class="sortable desc" data-key="diff">产销差额<span class="sort-ico">▼</span></th>
+                    <th class="sortable" data-key="progress">销售进度<span class="sort-ico">▲▼</span></th>
                   </tr>
                 </thead>
-                <tbody>
-                  <tr>
-                    <td class="line-table__rank">1</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F35A;</div><span class="line-table__name">米饭</span></div></td>
-                    <td><span class="line-table__type type--staple">主食</span></td>
-                    <td>12.0</td><td>9.8</td><td>2.0</td>
-                    <td><span class="diff diff--warn">+0.2</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill" style="width:82%;"></div></div>
-                        <span class="progress__text">82%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">2</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F356;</div><span class="line-table__name">红烧肉</span></div></td>
-                    <td><span class="line-table__type type--meat">荤菜</span></td>
-                    <td>8.0</td><td>6.2</td><td>1.8</td>
-                    <td><span class="diff diff--zero">0.0</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill" style="width:78%;"></div></div>
-                        <span class="progress__text">78%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">3</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F966;</div><span class="line-table__name">清炒时蔬</span></div></td>
-                    <td><span class="line-table__type type--veg">素菜</span></td>
-                    <td>7.0</td><td>5.4</td><td>1.4</td>
-                    <td><span class="diff diff--warn">+0.2</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill" style="width:77%;"></div></div>
-                        <span class="progress__text">77%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">4</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F35F;</div><span class="line-table__name">鱼香肉丝</span></div></td>
-                    <td><span class="line-table__type type--meat">荤菜</span></td>
-                    <td>6.0</td><td>4.8</td><td>1.2</td>
-                    <td><span class="diff diff--zero">0.0</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill" style="width:80%;"></div></div>
-                        <span class="progress__text">80%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">5</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F372;</div><span class="line-table__name">冬瓜排骨汤</span></div></td>
-                    <td><span class="line-table__type type--soup">汤品</span></td>
-                    <td>5.0</td><td>4.2</td><td>0.9</td>
-                    <td><span class="diff diff--mid">-0.1</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill" style="width:84%;"></div></div>
-                        <span class="progress__text">84%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">6</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F35B;</div><span class="line-table__name">宫保鸡丁</span></div></td>
-                    <td><span class="line-table__type type--meat">荤菜</span></td>
-                    <td>9.0</td><td>3.6</td><td>4.8</td>
-                    <td><span class="diff diff--warn">+0.6</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill progress__fill--low" style="width:40%;"></div></div>
-                        <span class="progress__text">40%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">7</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F364;</div><span class="line-table__name">清蒸鲈鱼</span></div></td>
-                    <td><span class="line-table__type type--meat">荤菜</span></td>
-                    <td>6.0</td><td>1.6</td><td>3.8</td>
-                    <td><span class="diff diff--warn">+0.6</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill progress__fill--low" style="width:27%;"></div></div>
-                        <span class="progress__text">27%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">8</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F95D;</div><span class="line-table__name">香菇鸡汤</span></div></td>
-                    <td><span class="line-table__type type--soup">汤品</span></td>
-                    <td>8.0</td><td>2.8</td><td>4.8</td>
-                    <td><span class="diff diff--warn">+0.4</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill progress__fill--low" style="width:35%;"></div></div>
-                        <span class="progress__text">35%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">9</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F360;</div><span class="line-table__name">麻婆豆腐</span></div></td>
-                    <td><span class="line-table__type type--meat">荤菜</span></td>
-                    <td>7.0</td><td>4.4</td><td>2.6</td>
-                    <td><span class="diff diff--zero">0.0</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill progress__fill--mid" style="width:63%;"></div></div>
-                        <span class="progress__text">63%</span>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="line-table__rank">10</td>
-                    <td><div class="line-table__dish"><div class="line-table__thumb">&#x1F952;</div><span class="line-table__name">凉拌黄瓜</span></div></td>
-                    <td><span class="line-table__type type--veg">素菜</span></td>
-                    <td>3.0</td><td>0.8</td><td>1.8</td>
-                    <td><span class="diff diff--warn">+0.4</span></td>
-                    <td>
-                      <div class="progress">
-                        <div class="progress__track"><div class="progress__fill progress__fill--low" style="width:27%;"></div></div>
-                        <span class="progress__text">27%</span>
-                      </div>
-                    </td>
-                  </tr>
+                <tbody id="lineTableBody">
+                  <!-- 由 JS 动态渲染 -->
                 </tbody>
               </table>
             </div>
           </div>
 
-          <!-- 销量排行 Top 5 -->
-          <div class="rank-card">
-            <div class="chart-card__title">
-              <span class="chart-card__title-text">菜品销量排行 Top 5</span>
-              <span class="chart-card__hint">按已售 kg</span>
-            </div>
-            <div class="rank-list">
-              <div class="rank-item">
-                <span class="rank-item__rank rank-item__rank--1">1</span>
-                <div class="rank-item__main">
-                  <div class="rank-item__name">米饭</div>
-                  <div class="rank-item__bar-wrap">
-                    <span>制作 12.0</span>
-                    <div class="rank-item__bar"><div class="rank-item__bar-fill rank-item__bar-fill--gold" style="width:100%;"></div></div>
-                    <span>82%</span>
-                  </div>
-                </div>
-                <span class="rank-item__count">9.8<span class="rank-item__count-unit"> kg</span></span>
-              </div>
-              <div class="rank-item">
-                <span class="rank-item__rank rank-item__rank--2">2</span>
-                <div class="rank-item__main">
-                  <div class="rank-item__name">红烧肉</div>
-                  <div class="rank-item__bar-wrap">
-                    <span>制作 8.0</span>
-                    <div class="rank-item__bar"><div class="rank-item__bar-fill" style="width:63%;"></div></div>
-                    <span>78%</span>
-                  </div>
-                </div>
-                <span class="rank-item__count">6.2<span class="rank-item__count-unit"> kg</span></span>
-              </div>
-              <div class="rank-item">
-                <span class="rank-item__rank rank-item__rank--3">3</span>
-                <div class="rank-item__main">
-                  <div class="rank-item__name">清炒时蔬</div>
-                  <div class="rank-item__bar-wrap">
-                    <span>制作 7.0</span>
-                    <div class="rank-item__bar"><div class="rank-item__bar-fill" style="width:55%;"></div></div>
-                    <span>77%</span>
-                  </div>
-                </div>
-                <span class="rank-item__count">5.4<span class="rank-item__count-unit"> kg</span></span>
-              </div>
-              <div class="rank-item">
-                <span class="rank-item__rank">4</span>
-                <div class="rank-item__main">
-                  <div class="rank-item__name">鱼香肉丝</div>
-                  <div class="rank-item__bar-wrap">
-                    <span>制作 6.0</span>
-                    <div class="rank-item__bar"><div class="rank-item__bar-fill" style="width:49%;"></div></div>
-                    <span>80%</span>
-                  </div>
-                </div>
-                <span class="rank-item__count">4.8<span class="rank-item__count-unit"> kg</span></span>
-              </div>
-              <div class="rank-item">
-                <span class="rank-item__rank">5</span>
-                <div class="rank-item__main">
-                  <div class="rank-item__name">冬瓜排骨汤</div>
-                  <div class="rank-item__bar-wrap">
-                    <span>制作 5.0</span>
-                    <div class="rank-item__bar"><div class="rank-item__bar-fill" style="width:43%;"></div></div>
-                    <span>84%</span>
-                  </div>
-                </div>
-                <span class="rank-item__count">4.2<span class="rank-item__count-unit"> kg</span></span>
-              </div>
-            </div>
+          <!-- 异常提示条(移到列表下方) -->
+          <div class="alert-bar" id="lineAlertBar">
+            <span class="alert-bar__icon">&#x26A0;&#xFE0F;</span>
+            <span>检测到 <span class="alert-bar__count" id="alertCount">4</span> 道菜品产销差额 &gt; 10元(疑似损耗/丢失):</span>
+            <span class="alert-bar__dishes" id="alertDishes">宫保鸡丁、清蒸鲈鱼、香菇鸡汤、凉拌黄瓜</span>
           </div>
 
         </div>
@@ -1268,20 +998,203 @@
   </div>
 
   <script>
-    // 二级 Tab 切换
-    document.querySelectorAll('.sub-tab').forEach(btn => {
+    // 顶部 Tab 切换(营收/餐线)
+    document.querySelectorAll('.top-tab').forEach(btn => {
       btn.addEventListener('click', () => {
         const tab = btn.dataset.tab;
-        document.querySelectorAll('.sub-tab').forEach(b => b.classList.toggle('active', b === btn));
+        document.querySelectorAll('.top-tab').forEach(b => b.classList.toggle('active', b === btn));
         document.querySelectorAll('.tab-panel').forEach(p => {
           p.classList.toggle('active', p.dataset.panel === tab);
         });
       });
     });
-    // 日期 Tab 切换(单选样式)
+    // 日期快捷 Tab 切换(单选样式 + 同步日期输入)
     document.querySelectorAll('.date-tab').forEach(btn => {
       btn.addEventListener('click', () => {
         document.querySelectorAll('.date-tab').forEach(b => b.classList.toggle('active', b === btn));
+        const range = btn.dataset.range;
+        const today = '2026-08-06';
+        const yesterday = '2026-08-05';
+        const input = document.getElementById('customDate');
+        if (range === 'today' || range === 'current') input.value = today;
+        else if (range === 'yesterday') input.value = yesterday;
+      });
+    });
+    // 自定义日期变化时,取消快捷 Tab 选中
+    document.getElementById('customDate').addEventListener('change', e => {
+      const val = e.target.value;
+      const today = '2026-08-06';
+      const yesterday = '2026-08-05';
+      let matched = null;
+      if (val === today) matched = document.querySelector('[data-range="today"]');
+      else if (val === yesterday) matched = document.querySelector('[data-range="yesterday"]');
+      document.querySelectorAll('.date-tab').forEach(b => b.classList.toggle('active', b === matched));
+    });
+    // 餐次下拉变化提示
+    document.getElementById('mealSelect').addEventListener('change', e => {
+      const label = e.target.options[e.target.selectedIndex].textContent.trim();
+      // 原型演示:仅做提示
+    });
+
+    // ===== 就餐人员类型分布:四分类 + 订单/金额维度切换 =====
+    const PPL_DATA = {
+      order: [
+        { label: '会员用户', value: 42, unit: '单', percent: 44, color: 'linear-gradient(90deg,#fbbf24,#fb923c)' },
+        { label: '内部员工', value: 30, unit: '单', percent: 31, color: 'linear-gradient(90deg,#4a90d9,#60a5fa)' },
+        { label: '普通用户', value: 15, unit: '单', percent: 16, color: 'linear-gradient(90deg,#a855f7,#c084fc)' },
+        { label: '临时用户', value: 9,  unit: '单', percent: 9,  color: 'linear-gradient(90deg,#52c41a,#0AC4A8)' }
+      ],
+      amount: [
+        { label: '会员用户', value: 1158.50, unit: '元', percent: 44, color: 'linear-gradient(90deg,#fbbf24,#fb923c)' },
+        { label: '内部员工', value: 815.40,  unit: '元', percent: 31, color: 'linear-gradient(90deg,#4a90d9,#60a5fa)' },
+        { label: '普通用户', value: 418.20,  unit: '元', percent: 16, color: 'linear-gradient(90deg,#a855f7,#c084fc)' },
+        { label: '临时用户', value: 222.40,  unit: '元', percent: 9,  color: 'linear-gradient(90deg,#52c41a,#0AC4A8)' }
+      ]
+    };
+    function formatPplValue(val, unit) {
+      if (unit === '元') {
+        return '¥' + val.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' · ';
+      }
+      return val + ' ' + unit + ' · ';
+    }
+    function renderPplBars(dim) {
+      const list = PPL_DATA[dim];
+      const wrap = document.getElementById('pplBars');
+      wrap.innerHTML = list.map(it => `
+        <div class="ppl-row">
+          <span class="ppl-row__label">${it.label}</span>
+          <div class="ppl-row__track">
+            <div class="ppl-row__fill" style="width:${it.percent}%; background:${it.color};"></div>
+          </div>
+          <span class="ppl-row__value">${formatPplValue(it.value, it.unit)}${it.percent}%</span>
+        </div>
+      `).join('');
+    }
+    renderPplBars('order');
+    document.querySelectorAll('#pplDimSwitch .dim-switch__btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('#pplDimSwitch .dim-switch__btn').forEach(b => b.classList.toggle('active', b === btn));
+        renderPplBars(btn.dataset.dim);
+      });
+    });
+
+    // ===== 餐线明细表:动态渲染 + 列头排序 =====
+    // 字段说明:
+    //   made(制作量 kg) / sold(已售 kg) / left(剩余 kg)
+    //   salesAmount(销售额 元)= sold × 单价(简化为 mock)
+    //   pickupTimes(取餐次数) / pickupPeople(取餐人数)
+    //   scaleNo(营养秤编号) / diff(产销差额 元)
+    //   progress(销售进度 %) = sold / made
+    // 产销差额:由原 kg 改为元,负数=数据异常,正数=损耗丢失
+    const LINE_DATA = [
+      { name:'米饭',       emoji:'🍚', made:12.0, sold:9.8, left:2.0, price:3.0,  pickupTimes:42, pickupPeople:38, scaleNo:'SC-01' },
+      { name:'红烧肉',     emoji:'🍖', made:8.0,  sold:6.2, left:1.8, price:38.0, pickupTimes:24, pickupPeople:22, scaleNo:'SC-02' },
+      { name:'清炒时蔬',   emoji:'🥦', made:7.0,  sold:5.4, left:1.4, price:12.0, pickupTimes:22, pickupPeople:20, scaleNo:'SC-03' },
+      { name:'鱼香肉丝',   emoji:'🍚', made:6.0,  sold:4.8, left:1.2, price:28.0, pickupTimes:18, pickupPeople:16, scaleNo:'SC-02' },
+      { name:'冬瓜排骨汤', emoji:'🍲', made:5.0,  sold:4.2, left:0.9, price:15.0, pickupTimes:16, pickupPeople:15, scaleNo:'SC-04' },
+      { name:'宫保鸡丁',   emoji:'🍗', made:9.0,  sold:3.6, left:4.8, price:32.0, pickupTimes:14, pickupPeople:12, scaleNo:'SC-05' },
+      { name:'清蒸鲈鱼',   emoji:'🐟', made:6.0,  sold:1.6, left:3.8, price:68.0, pickupTimes:6,  pickupPeople:6,  scaleNo:'SC-05' },
+      { name:'香菇鸡汤',   emoji:'🥣', made:8.0,  sold:2.8, left:4.8, price:25.0, pickupTimes:10, pickupPeople:9,  scaleNo:'SC-04' },
+      { name:'麻婆豆腐',   emoji:'🌶️', made:7.0,  sold:4.4, left:2.6, price:18.0, pickupTimes:17, pickupPeople:15, scaleNo:'SC-03' },
+      { name:'凉拌黄瓜',   emoji:'🥒', made:3.0,  sold:0.8, left:1.8, price:8.0,  pickupTimes:4,  pickupPeople:4,  scaleNo:'SC-06' }
+    ];
+    // 计算销售额 + 产销差值(kg) + 产销差额(元) + 销售进度
+    LINE_DATA.forEach(it => {
+      it.salesAmount = +(it.sold * it.price).toFixed(2);
+      // 产销差值(kg)= 制作量 − 已售 − 剩余
+      it.diffKg = +(it.made - it.sold - it.left).toFixed(1);
+      // 产销差额(元)= 产销差值 × 单价
+      it.diff = +(it.diffKg * it.price).toFixed(2);
+      it.progress = Math.round((it.sold / it.made) * 100);
+    });
+    let sortKey = 'diff';
+    let sortDir = 'desc';
+    function fmtMoney(n) {
+      return '¥' + n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+    function diffClass(v) {
+      if (v > 0) return 'diff--warn';
+      if (v < 0) return 'diff--mid';
+      return 'diff--zero';
+    }
+    function diffSign(v) {
+      if (v > 0) return '+';
+      if (v < 0) return '-';
+      return '';
+    }
+    function progressClass(p) {
+      if (p < 50) return 'progress-text-only--low';
+      if (p < 75) return 'progress-text-only--mid';
+      return 'progress-text-only--ok';
+    }
+    function renderLineTable() {
+      // 排序
+      const sorted = [...LINE_DATA].sort((a, b) => {
+        const av = a[sortKey];
+        const bv = b[sortKey];
+        // 字符串字段(scaleNo)按字母序
+        if (typeof av === 'string' || typeof bv === 'string') {
+          return sortDir === 'asc'
+            ? String(av).localeCompare(String(bv))
+            : String(bv).localeCompare(String(av));
+        }
+        return sortDir === 'asc' ? av - bv : bv - av;
+      });
+      const tbody = document.getElementById('lineTableBody');
+      tbody.innerHTML = sorted.map(it => {
+        const dCls = diffClass(it.diff);
+        const dSign = diffSign(it.diff);
+        const dkCls = diffClass(it.diffKg);
+        const dkSign = diffSign(it.diffKg);
+        const pCls = progressClass(it.progress);
+        return `
+          <tr>
+            <td>${it.scaleNo}</td>
+            <td>
+              <div class="line-table__dish">
+                <div class="line-table__thumb">${it.emoji}</div>
+                <span class="line-table__name">${it.name}</span>
+              </div>
+            </td>
+            <td>${fmtMoney(it.salesAmount)}</td>
+            <td>${it.made.toFixed(1)}</td>
+            <td>${it.sold.toFixed(1)}</td>
+            <td>${it.left.toFixed(1)}</td>
+            <td>${it.pickupTimes}</td>
+            <td>${it.pickupPeople}</td>
+            <td><span class="diff ${dkCls}">${dkSign}${Math.abs(it.diffKg).toFixed(1)} kg</span></td>
+            <td><span class="diff ${dCls}">${dSign}${fmtMoney(Math.abs(it.diff))}</span></td>
+            <td><span class="progress-text-only ${pCls}">${it.progress}%</span></td>
+          </tr>
+        `;
+      }).join('');
+      // 更新表头排序状态
+      document.querySelectorAll('#lineTable thead th.sortable').forEach(th => {
+        th.classList.remove('asc', 'desc');
+        const ico = th.querySelector('.sort-ico');
+        if (th.dataset.key === sortKey) {
+          th.classList.add(sortDir);
+          ico.textContent = sortDir === 'asc' ? '▲' : '▼';
+        } else {
+          ico.textContent = '▲▼';
+        }
+      });
+      // 更新异常提示条:产销差额 > 10元
+      const warnItems = LINE_DATA.filter(it => it.diff >= 10).sort((a, b) => b.diff - a.diff);
+      document.getElementById('alertCount').textContent = warnItems.length;
+      document.getElementById('alertDishes').textContent = warnItems.map(it => it.name).join('、') || '无';
+    }
+    renderLineTable();
+    document.querySelectorAll('#lineTable thead th.sortable').forEach(th => {
+      th.addEventListener('click', () => {
+        const key = th.dataset.key;
+        if (sortKey === key) {
+          sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+        } else {
+          sortKey = key;
+          sortDir = 'desc';
+        }
+        renderLineTable();
       });
     });
   </script>
diff --git a/other-module/canteen-device/checkout-device/08-reconcile.html b/other-module/canteen-device/checkout-device/08-reconcile.html
index e67474d..864d476 100644
--- a/other-module/canteen-device/checkout-device/08-reconcile.html
+++ b/other-module/canteen-device/checkout-device/08-reconcile.html
@@ -72,12 +72,13 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      border-right: 1px solid rgba(255, 255, 255, 0.06);
     }
     .items-col__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 12px 20px;
+      padding: 12px 24px;
       background: rgba(26, 43, 74, 0.5);
       border-bottom: 1px solid rgba(255, 255, 255, 0.06);
     }
@@ -103,11 +104,11 @@
       color: rgba(255, 255, 255, 0.5);
     }
 
-    /* Tab 切换:当前商品 / 添加商品 */
+    /* Tab 切换:当前订单 / 补齐(未识别取餐记录) */
     .tabs {
       display: flex;
       gap: 6px;
-      padding: 10px 20px;
+      padding: 10px 24px;
       background: rgba(26, 43, 74, 0.3);
       border-bottom: 1px solid rgba(255, 255, 255, 0.06);
     }
@@ -120,6 +121,21 @@
       font-size: 12px;
       cursor: pointer;
       transition: all 0.15s;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .tab__count {
+      padding: 1px 7px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 9px;
+      font-size: 10px;
+      font-weight: 700;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .tab.active .tab__count {
+      background: rgba(74, 144, 217, 0.35);
+      color: #fff;
     }
     .tab.active {
       background: rgba(74, 144, 217, 0.15);
@@ -128,95 +144,68 @@
       font-weight: 600;
     }
 
-    /* 商品列表区 */
-    .items-list {
+    /* 列表容器 */
+    .list-wrap {
       flex: 1;
       overflow-y: auto;
-      padding: 12px 16px;
+      padding: 10px 24px 12px;
       scrollbar-width: none;
     }
-    .items-list::-webkit-scrollbar { display: none; }
+    .list-wrap::-webkit-scrollbar { display: none; }
 
-    .zone-group { margin-bottom: 14px; }
+    /* ============ 表格化结构(对齐 03-checkout) ============ */
+    .items-table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .items-table th,
+    .items-table td {
+      padding: 8px 6px;
+      text-align: left;
+      vertical-align: middle;
+    }
+    /* 列宽分配(共 7 列,带操作列)
+       序号 / 类别 / 餐品名称 / 单价 / 取餐量 / 金额 / 操作 */
+    .items-table col.col-seq    { width: 36px; }
+    .items-table col.col-cat    { width: 56px; }
+    .items-table col.col-name   { width: auto; }
+    .items-table col.col-unit   { width: 100px; }
+    .items-table col.col-weight { width: 88px; }
+    .items-table col.col-price  { width: 88px; }
+    .items-table col.col-op     { width: 56px; }
 
-    /* 表头(对齐 03-checkout) */
-    .table-head {
-      display: grid;
-      grid-template-columns: 24px auto 1fr auto 32px;
-      gap: 10px;
-      padding: 6px 14px;
-      font-size: 11px;
-      color: rgba(255, 255, 255, 0.4);
-      letter-spacing: 1px;
-      font-weight: 500;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-      margin-bottom: 4px;
-    }
-    .table-head__name { text-align: left; }
-    .table-head__weight { text-align: center; justify-self: center; }
-    .table-head__price { text-align: right; }
-
-    /* 分组标题(对齐 03-checkout) */
-    .zone-header {
-      font-size: 13px;
-      color: rgba(255, 255, 255, 0.6);
-      font-weight: 600;
-      letter-spacing: 0.5px;
-      padding: 6px 0 8px;
-      border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
-      margin-bottom: 6px;
-      margin-top: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-    }
-    .zone-header__name {
-      font-size: 13px;
-      color: rgba(255, 255, 255, 0.6);
-      font-weight: 600;
-      letter-spacing: 0.5px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .zone-header__count {
-      padding: 1px 8px;
-      background: rgba(74, 144, 217, 0.18);
-      border-radius: 10px;
-      font-size: 11px;
-      color: #60a5fa;
-      font-weight: 500;
-      margin-left: 6px;
-    }
-    .zone-header__total {
+    .items-table thead th {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.5);
+      letter-spacing: 1px;
+      font-weight: 500;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      padding-bottom: 8px;
+    }
+    .items-table thead th.col-cat-h,
+    .items-table thead th.col-weight-h,
+    .items-table thead th.col-op-h { text-align: center; }
+    .items-table thead th.col-unit-h,
+    .items-table thead th.col-price-h { text-align: right; }
+
+    .items-table tbody td { border-bottom: 1px dashed rgba(255, 255, 255, 0.05); }
+    .items-table tbody tr:hover td { background: rgba(74, 144, 217, 0.06); }
+    /* 状态行样式 */
+    .items-table tbody tr.added td {
+      background: rgba(82, 196, 26, 0.06);
+    }
+    .items-table tbody tr.removed td {
+      opacity: 0.5;
+    }
+    .items-table tbody tr.removed .cell-name,
+    .items-table tbody tr.removed .cell-unit,
+    .items-table tbody tr.removed .cell-weight,
+    .items-table tbody tr.removed .cell-price {
+      text-decoration: line-through;
     }
 
-    /* 商品行(对齐 03-checkout item-card 样式) */
-    .item-card {
-      display: grid;
-      grid-template-columns: 24px auto 1fr auto 28px;
-      gap: 10px;
-      padding: 8px 14px;
-      background: rgba(26, 43, 74, 0.35);
-      border: 1px solid rgba(255, 255, 255, 0.04);
-      border-radius: 8px;
-      margin-bottom: 4px;
-      align-items: center;
-    }
-    .item-card.added {
-      background: rgba(82, 196, 26, 0.08);
-      border-color: rgba(82, 196, 26, 0.3);
-    }
-    .item-card.removed {
-      opacity: 0.45;
-      background: rgba(245, 34, 45, 0.05);
-      border-color: rgba(245, 34, 45, 0.25);
-    }
-    .item-card.removed .item-card__name { text-decoration: line-through; }
-    .item-card__seq {
+    .cell-seq {
       width: 22px;
       height: 22px;
       border-radius: 50%;
@@ -226,164 +215,345 @@
       font-size: 11px;
       font-weight: 700;
       font-family: Menlo, Consolas, monospace;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
+    }
+    tr.added .cell-seq {
+      background: rgba(82, 196, 26, 0.2);
+      border-color: rgba(82, 196, 26, 0.4);
+      color: #4ade80;
+    }
+    tr.removed .cell-seq {
+      background: rgba(245, 34, 45, 0.15);
+      border-color: rgba(245, 34, 45, 0.4);
+      color: #ff6b6b;
+    }
+    .cell-cat {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px 0;
+      width: 44px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 1px;
+      line-height: 1.4;
+    }
+    .cell-cat--line {
+      background: rgba(96, 165, 250, 0.18);
+      border: 1px solid rgba(96, 165, 250, 0.45);
+      color: #60a5fa;
+    }
+    .cell-cat--booth {
+      background: rgba(251, 146, 60, 0.18);
+      border: 1px solid rgba(251, 146, 60, 0.45);
+      color: #fb923c;
+    }
+    .cell-name {
+      font-size: 14px;
+      color: #fff;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .change-badge {
+      display: inline-block;
+      padding: 1px 6px;
+      border-radius: 7px;
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
       flex-shrink: 0;
     }
-    .item-card__info {
-      display: flex;
-      align-items: baseline;
-      gap: 8px;
-      min-width: 0;
+    .change-badge--add {
+      background: rgba(82, 196, 26, 0.18);
+      color: #4ade80;
+      border: 1px solid rgba(82, 196, 26, 0.4);
     }
-    .item-card__name {
+    .change-badge--remove {
+      background: rgba(245, 34, 45, 0.18);
+      color: #ff6b6b;
+      border: 1px solid rgba(245, 34, 45, 0.4);
+    }
+    .cell-unit {
+      text-align: right;
+      font-size: 11.5px;
+      color: rgba(255, 255, 255, 0.55);
+      font-family: Menlo, Consolas, monospace;
+      white-space: nowrap;
+    }
+    .cell-weight {
+      text-align: center;
+      color: #0AC4A8;
+      font-family: Menlo, Consolas, monospace;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .cell-weight__pill {
+      display: inline-block;
+      padding: 2px 8px;
+      background: rgba(10, 196, 168, 0.12);
+      border-radius: 9px;
+      min-width: 56px;
+    }
+    tr.added .cell-weight { color: #4ade80; }
+    tr.added .cell-weight__pill { background: rgba(82, 196, 26, 0.14); }
+    tr.removed .cell-weight { color: #ff6b6b; }
+    tr.removed .cell-weight__pill { background: rgba(245, 34, 45, 0.1); }
+    .cell-price {
+      text-align: right;
       font-size: 15px;
+      color: #0AC4A8;
+      font-weight: 700;
+      font-family: Menlo, Consolas, monospace;
+      white-space: nowrap;
+    }
+    tr.added .cell-price { color: #4ade80; }
+    tr.removed .cell-price { color: #ff6b6b; }
+    .cell-op {
+      text-align: center;
+    }
+    .op-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.15s;
+      font-size: 13px;
+      font-weight: 700;
+      border: 1px solid;
+      font-family: inherit;
+      line-height: 1;
+    }
+    .op-btn--remove {
+      background: rgba(245, 34, 45, 0.12);
+      border-color: rgba(245, 34, 45, 0.35);
+      color: #ff6b6b;
+    }
+    .op-btn--remove:hover {
+      background: rgba(245, 34, 45, 0.28);
+      color: #fff;
+    }
+    .op-btn--restore {
+      background: rgba(82, 196, 26, 0.12);
+      border-color: rgba(82, 196, 26, 0.35);
+      color: #4ade80;
+    }
+    .op-btn--restore:hover {
+      background: rgba(82, 196, 26, 0.28);
+      color: #fff;
+    }
+
+    /* 合计行 */
+    .items-footer {
+      margin-top: 8px;
+      border-top: 1.5px solid rgba(10, 196, 168, 0.4);
+      background: linear-gradient(90deg, rgba(10, 196, 168, 0.14), rgba(74, 144, 217, 0.08));
+      border-radius: 10px;
+    }
+    .items-footer table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .items-footer td {
+      padding: 11px 6px;
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.75);
+      vertical-align: middle;
+    }
+    .footer-label {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      letter-spacing: 1px;
+      font-weight: 600;
+    }
+    .footer-value {
+      font-size: 14px;
+      color: #fff;
+      font-weight: 700;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .footer-amount {
+      font-size: 20px;
+      font-weight: 700;
+      color: #0AC4A8;
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    /* ============ 添加商品Tab:未识别取餐记录列表 ============ */
+    .unmatched-tip {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 146, 60, 0.06));
+      border: 1px solid rgba(251, 191, 36, 0.35);
+      border-radius: 8px;
+      font-size: 11.5px;
+      color: rgba(255, 255, 255, 0.85);
+      line-height: 1.5;
+      margin-bottom: 10px;
+    }
+    .unmatched-tip__icon { font-size: 16px; flex-shrink: 0; }
+    .unmatched-tip strong { color: #fbbf24; }
+
+    /* 分组标题 */
+    .zone-header {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.7);
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      padding: 8px 0 6px;
+      border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
+      margin-bottom: 4px;
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .zone-header__name {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .zone-header__count {
+      padding: 1px 7px;
+      background: rgba(251, 191, 36, 0.18);
+      border-radius: 9px;
+      font-size: 10px;
+      color: #fbbf24;
+      font-weight: 700;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .zone-header__meta {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.5);
+      font-weight: 500;
+    }
+
+    /* 未识别记录表格 */
+    .um-table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .um-table th,
+    .um-table td {
+      padding: 7px 6px;
+      text-align: left;
+      vertical-align: middle;
+    }
+    /* 时间 / 类别 / 餐品 / 单价 / 取餐量 / 金额 / 操作 */
+    .um-table col.col-time  { width: 64px; }
+    .um-table col.col-cat   { width: 50px; }
+    .um-table col.col-name  { width: auto; }
+    .um-table col.col-unit  { width: 92px; }
+    .um-table col.col-weight{ width: 80px; }
+    .um-table col.col-price { width: 80px; }
+    .um-table col.col-op    { width: 56px; }
+
+    .um-table thead th {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.45);
+      letter-spacing: 1px;
+      font-weight: 500;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      padding-bottom: 6px;
+    }
+    .um-table thead th.col-cat-h,
+    .um-table thead th.col-weight-h,
+    .um-table thead th.col-op-h { text-align: center; }
+    .um-table thead th.col-unit-h,
+    .um-table thead th.col-price-h { text-align: right; }
+    .um-table thead th.col-time-h { text-align: center; }
+
+    .um-table tbody td { border-bottom: 1px dashed rgba(255, 255, 255, 0.05); }
+    .um-table tbody tr:hover td { background: rgba(82, 196, 26, 0.06); }
+
+    .cell-time {
+      text-align: center;
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.6);
+      font-family: Menlo, Consolas, monospace;
+      white-space: nowrap;
+    }
+    .um-name {
+      font-size: 13px;
       color: #fff;
       font-weight: 600;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .item-card__unit-price {
-      font-size: 12px;
+    .um-unit {
+      text-align: right;
+      font-size: 11px;
       color: rgba(255, 255, 255, 0.55);
       font-family: Menlo, Consolas, monospace;
-      flex-shrink: 0;
-    }
-    .item-card__weight {
-      font-size: 12px;
-      color: #0AC4A8;
-      font-family: Menlo, Consolas, monospace;
-      padding: 2px 10px;
-      background: rgba(10, 196, 168, 0.12);
-      border-radius: 10px;
       white-space: nowrap;
+    }
+    .um-weight {
       text-align: center;
-      min-width: 76px;
-      justify-self: center;
+      color: #fb923c;
+      font-family: Menlo, Consolas, monospace;
+      font-size: 12px;
+      white-space: nowrap;
     }
-    .item-card.removed .item-card__weight {
-      color: #ff6b6b;
-      background: rgba(245, 34, 45, 0.1);
+    .um-weight__pill {
+      display: inline-block;
+      padding: 2px 8px;
+      background: rgba(251, 146, 60, 0.14);
+      border-radius: 9px;
+      min-width: 50px;
     }
-    .item-card.added .item-card__weight {
-      color: #4ade80;
-      background: rgba(82, 196, 26, 0.12);
-    }
-    .item-card__price {
-      font-size: 16px;
-      color: #0AC4A8;
+    .um-price {
+      text-align: right;
+      font-size: 14px;
+      color: #fb923c;
       font-weight: 700;
       font-family: Menlo, Consolas, monospace;
       white-space: nowrap;
     }
-    .item-card__action {
-      width: 28px;
-      height: 28px;
-      border-radius: 6px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.15s;
-      font-size: 13px;
-      border: 1px solid;
-      flex-shrink: 0;
-    }
-    .item-card__action--remove {
-      background: rgba(245, 34, 45, 0.12);
-      border-color: rgba(245, 34, 45, 0.35);
-      color: #ff6b6b;
-    }
-    .item-card__action--remove:hover { background: rgba(245, 34, 45, 0.25); }
-    .item-card__action--restore {
-      background: rgba(82, 196, 26, 0.12);
-      border-color: rgba(82, 196, 26, 0.35);
+    .op-btn--add {
+      background: rgba(82, 196, 26, 0.14);
+      border-color: rgba(82, 196, 26, 0.4);
       color: #4ade80;
     }
-    .item-card__action--restore:hover { background: rgba(82, 196, 26, 0.25); }
-
-    /* 变更标记 */
-    .change-badge {
-      display: inline-block;
-      padding: 2px 6px;
-      border-radius: 8px;
-      font-size: 9px;
-      font-weight: 700;
-      margin-left: 6px;
+    .op-btn--add:hover {
+      background: rgba(82, 196, 26, 0.3);
+      color: #fff;
     }
-    .change-badge--add {
-      background: rgba(82, 196, 26, 0.15);
-      color: #4ade80;
-    }
-    .change-badge--remove {
-      background: rgba(245, 34, 45, 0.15);
-      color: #ff6b6b;
+    .op-btn--added {
+      background: rgba(74, 144, 217, 0.15);
+      border-color: rgba(74, 144, 217, 0.35);
+      color: #60a5fa;
+      cursor: default;
+      font-size: 11px;
     }
 
-    /* 添加商品候选区 */
-    .candidate-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
-    }
-    .candidate-item {
-      padding: 10px;
-      background: rgba(26, 43, 74, 0.4);
-      border: 1px solid rgba(255, 255, 255, 0.06);
-      border-radius: 8px;
-      cursor: pointer;
-      transition: all 0.15s;
+    /* 空态 */
+    .empty-state {
       display: flex;
       flex-direction: column;
-      gap: 4px;
-      text-align: center;
+      align-items: center;
+      justify-content: center;
+      padding: 50px 20px;
+      color: rgba(255, 255, 255, 0.3);
+      gap: 10px;
     }
-    .candidate-item:hover {
-      background: rgba(82, 196, 26, 0.08);
-      border-color: rgba(82, 196, 26, 0.3);
-      transform: translateY(-1px);
-    }
-    .candidate-item__thumb {
-      font-size: 24px;
-    }
-    .candidate-item__name {
-      font-size: 12px;
-      color: #fff;
-      font-weight: 600;
-    }
-    .candidate-item__meta {
-      font-size: 10px;
-      color: rgba(255, 255, 255, 0.55);
-    }
-    .candidate-item__add {
-      margin-top: 4px;
-      padding: 4px;
-      background: rgba(82, 196, 26, 0.15);
-      border: 1px solid rgba(82, 196, 26, 0.3);
-      border-radius: 4px;
-      color: #4ade80;
-      font-size: 11px;
-      font-weight: 600;
-    }
-
-    /* 搜索栏 */
-    .search-bar {
-      padding: 0 4px 12px;
-    }
-    .search-input {
-      width: 100%;
-      padding: 8px 12px;
-      background: rgba(0, 0, 0, 0.25);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 6px;
-      color: #fff;
-      font-size: 12px;
-      outline: none;
-      font-family: inherit;
-    }
-    .search-input:focus { border-color: #4a90d9; }
+    .empty-state__icon { font-size: 42px; opacity: 0.5; }
+    .empty-state__text { font-size: 12px; }
 
     /* ============ 右列:差额汇总 ============ */
     .summary-col {
@@ -391,7 +561,6 @@
       flex-direction: column;
       padding: 18px 20px;
       background: rgba(26, 43, 74, 0.2);
-      border-left: 1px solid rgba(255, 255, 255, 0.06);
       gap: 14px;
       overflow-y: auto;
       scrollbar-width: none;
@@ -448,7 +617,7 @@
       border: 1px solid rgba(255, 255, 255, 0.06);
       border-radius: 8px;
       padding: 10px 12px;
-      max-height: 180px;
+      max-height: 220px;
       overflow-y: auto;
       scrollbar-width: none;
       font-size: 12px;
@@ -516,6 +685,35 @@
       box-shadow: 0 6px 20px rgba(251, 191, 36, 0.35);
     }
     .btn--primary:hover { transform: translateY(-1px); }
+
+    /* Toast */
+    .toast {
+      position: fixed;
+      top: 60px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-20px);
+      background: rgba(0, 0, 0, 0.85);
+      color: #fff;
+      padding: 12px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
+      white-space: nowrap;
+      pointer-events: none;
+      max-width: 90%;
+      text-align: center;
+    }
+    .toast.show {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(-50%) translateY(0);
+    }
+    .toast--success { background: rgba(82, 196, 26, 0.92); }
+    .toast--warn { background: rgba(250, 173, 22, 0.92); }
+    .toast--error { background: rgba(245, 34, 45, 0.92); }
   </style>
 </head>
 <body>
@@ -539,37 +737,23 @@
             &#x270F;&#xFE0F; 修正明细
             <span class="items-col__icon">支付前修正</span>
           </div>
-          <div class="items-col__hint">点击 - 移除多记商品,在添加候选区点 + 补齐漏记</div>
+          <div class="items-col__hint">多记:点击 - 移除&#xFF1B;少记:从「补齐未识别」Tab 加入</div>
         </div>
 
         <div class="tabs">
-          <div class="tab active" onclick="switchTab('current')">当前订单(5)</div>
-          <div class="tab" onclick="switchTab('add')">添加商品</div>
-        </div>
-
-        <!-- 当前订单商品 -->
-        <div class="items-list" id="currentList"></div>
-
-        <!-- 添加商品候选区(默认隐藏) -->
-        <div class="items-list" id="addList" style="display:none;">
-          <div class="search-bar">
-            <input type="text" class="search-input" placeholder="&#x1F50D; 搜索菜品名称..." id="searchInput" oninput="filterCandidates()">
+          <div class="tab active" id="tabCurrent" onclick="switchTab('current')">
+            当前订单 <span class="tab__count" id="currentCount">0</span>
           </div>
-          <div class="zone-group">
-            <div class="zone-header">
-              <span class="zone-header__name">&#x1F95C; 营养秤 · 餐线菜品</span>
-              <span class="zone-header__total">8 个候选</span>
-            </div>
-            <div class="candidate-grid" id="candidateScale"></div>
-          </div>
-          <div class="zone-group">
-            <div class="zone-header">
-              <span class="zone-header__name">&#x2696;&#xFE0F; 档口秤 · 档口菜品</span>
-              <span class="zone-header__total">6 个候选</span>
-            </div>
-            <div class="candidate-grid" id="candidateStall"></div>
+          <div class="tab" id="tabAdd" onclick="switchTab('add')">
+            补齐未识别 <span class="tab__count" id="unmatchedCount">0</span>
           </div>
         </div>
+
+        <!-- 当前订单(表格化,对齐 03-checkout) -->
+        <div class="list-wrap" id="currentList"></div>
+
+        <!-- 未识别取餐记录列表(添加商品 Tab) -->
+        <div class="list-wrap" id="addList" style="display:none;"></div>
       </div>
 
       <!-- 右列:差额汇总 -->
@@ -580,7 +764,7 @@
           <div class="compare-block" style="margin-top:8px;">
             <div class="compare-row compare-row--old">
               <span class="compare-row__label">原订单合计</span>
-              <span class="compare-row__value">&#xFFE5;46.60</span>
+              <span class="compare-row__value" id="originalAmount">&#xFFE5;46.60</span>
             </div>
             <div class="compare-row">
               <span class="compare-row__label">本次修正</span>
@@ -605,7 +789,7 @@
         <div>
           <div class="section-label">变更日志</div>
           <div class="change-log" id="changeLog" style="margin-top:8px;">
-            <div class="change-log__empty">暂无变更,请到左侧添加或移除商品</div>
+            <div class="change-log__empty">暂无变更,请到左侧移除多记或加入未识别记录</div>
           </div>
         </div>
 
@@ -622,203 +806,313 @@
 
   </div>
 
+  <!-- Toast -->
+  <div class="toast" id="toast"></div>
+
   <script>
     /* ==================== Mock 数据 ==================== */
+    /* 原始订单金额(从 03-checkout 同步,演示用) */
+    var ORIGINAL_TOTAL = 46.60;
+    var DISCOUNT = 5.00;
+
+    /*
+     * 当前订单明细(每条独立记录,允许同名菜品多条)
+     * status: normal | removed | added
+     * origin: recognized(已识别,原订单) | unmatched(从未识别取餐记录加入)
+     */
     var currentItems = [
-      { id: 1, name: '红烧肉', zone: '档口秤', thumb: '&#x1F356;', weight: 180, price: 12.00, status: 'normal' },
-      { id: 2, name: '清炒时蔬', zone: '营养秤', thumb: '&#x1F966;', weight: 150, price: 4.00, status: 'normal' },
-      { id: 3, name: '鱼香肉丝', zone: '档口秤', thumb: '&#x1F35F;', weight: 160, price: 7.50, status: 'normal' },
-      { id: 4, name: '米饭', zone: '营养秤', thumb: '&#x1F35A;', weight: 250, price: 1.60, status: 'normal' },
-      { id: 5, name: '冬瓜排骨汤', zone: '档口秤', thumb: '&#x1F372;', weight: 300, price: 1.00, status: 'normal' }
+      { id: 1001, name: '清炒时蔬', cat: 'line', weight: 150, unitPrice: 4.00, status: 'normal', origin: 'recognized' },
+      { id: 1002, name: '米饭',     cat: 'line', weight: 250, unitPrice: 1.60, status: 'normal', origin: 'recognized' },
+      { id: 1003, name: '红烧肉',   cat: 'booth', weight: 180, unitPrice: 12.00, status: 'normal', origin: 'recognized' },
+      { id: 1004, name: '鱼香肉丝', cat: 'booth', weight: 160, unitPrice: 7.50, status: 'normal', origin: 'recognized' },
+      { id: 1005, name: '冬瓜排骨汤', cat: 'booth', weight: 300, unitPrice: 1.00, status: 'normal', origin: 'recognized' }
     ];
 
-    var candidates = [
-      { id: 101, name: '宫保鸡丁', zone: '档口秤', thumb: '&#x1F357;', price: 9.00 },
-      { id: 102, name: '番茄炒蛋', zone: '营养秤', thumb: '&#x1F95B;', price: 5.00 },
-      { id: 103, name: '麻婆豆腐', zone: '档口秤', thumb: '&#x1F372;', price: 5.00 },
-      { id: 104, name: '紫菜蛋花汤', zone: '营养秤', thumb: '&#x1F372;', price: 2.00 },
-      { id: 105, name: '蒜蓉西兰花', zone: '营养秤', thumb: '&#x1F966;', price: 4.00 },
-      { id: 106, name: '清蒸鲈鱼', zone: '档口秤', thumb: '&#x1F41F;', price: 12.50 },
-      { id: 107, name: '紫米饭', zone: '营养秤', thumb: '&#x1F35A;', price: 1.50 },
-      { id: 108, name: '豆浆', zone: '营养秤', thumb: '&#x1F95B;', price: 1.00 },
-      { id: 109, name: '青椒土豆丝', zone: '档口秤', thumb: '&#x1F954;', price: 4.50 },
-      { id: 110, name: '回锅肉', zone: '档口秤', thumb: '&#x1F356;', price: 11.00 },
-      { id: 111, name: '凉拌黄瓜', zone: '营养秤', thumb: '&#x1F952;', price: 3.00 },
-      { id: 112, name: '番茄蛋汤', zone: '档口秤', thumb: '&#x1F372;', price: 1.50 },
-      { id: 113, name: '酸菜鱼', zone: '档口秤', thumb: '&#x1F41F;', price: 14.00 },
-      { id: 114, name: '馒头', zone: '营养秤', thumb: '&#x1F35E;', price: 0.80 }
+    /*
+     * 未识别取餐记录池(当前餐次中未匹配到人脸/账户的取餐记录)
+     * 每条带 recordId 唯一标识,加入订单后从该列表移除(用于「+ 加入」按钮)
+     * source: scale(营养秤) | stall(档口秤)
+     */
+    var unmatchedRecords = [
+      { recordId: 'U-2401', time: '12:08:12', name: '宫保鸡丁',   cat: 'booth', weight: 160, unitPrice: 9.00, source: 'stall' },
+      { recordId: 'U-2402', time: '12:08:34', name: '番茄炒蛋',   cat: 'line', weight: 120, unitPrice: 5.00, source: 'scale' },
+      { recordId: 'U-2403', time: '12:08:51', name: '紫菜蛋花汤', cat: 'line', weight: 200, unitPrice: 2.00, source: 'scale' },
+      { recordId: 'U-2404', time: '12:09:07', name: '麻婆豆腐',   cat: 'booth', weight: 140, unitPrice: 5.00, source: 'stall' },
+      { recordId: 'U-2405', time: '12:09:23', name: '米饭',       cat: 'line', weight: 200, unitPrice: 1.60, source: 'scale' },
+      { recordId: 'U-2406', time: '12:09:41', name: '清蒸鲈鱼',   cat: 'booth', weight: 220, unitPrice: 12.50, source: 'stall' },
+      { recordId: 'U-2407', time: '12:09:58', name: '凉拌黄瓜',   cat: 'line', weight: 90,  unitPrice: 3.00, source: 'scale' }
     ];
 
+    /* 变更日志 */
     var changeLog = [];
 
+    /* 已加入订单的未识别 recordId 集合(用于在补齐列表标记「已加入」) */
+    var addedRecordIds = new Set();
+
+    /* 单条小计金额 */
     function subtotal(it) {
-      return it.weight ? it.weight / 100 * it.price : it.price;
+      return it.weight ? it.weight / 100 * it.unitPrice : it.unitPrice;
     }
 
-    /* 渲染当前商品列表(对齐 03-checkout 商品行样式) */
-    function renderCurrent() {
-      var grouped = { '营养秤': [], '档口秤': [] };
-      currentItems.forEach(function(it) {
-        if (!grouped[it.zone]) grouped[it.zone] = [];
-        grouped[it.zone].push(it);
-      });
+    /* 当前订单有效件数(排除已移除) */
+    function countActive() {
+      return currentItems.filter(function(it) { return it.status !== 'removed'; }).length;
+    }
 
-      var html = '<div class="table-head">'
-        + '<span>#</span>'
-        + '<span class="table-head__name">餐品名称 / 单价</span>'
-        + '<span class="table-head__weight">取餐量</span>'
-        + '<span class="table-head__price">金额</span>'
-        + '<span></span>'
-        + '</div>';
+    /* ================ 渲染:当前订单(表格化,对齐 03-checkout) ================ */
+    function renderCurrent() {
+      var html = ''
+        + '<table class="items-table">'
+        + '  <colgroup>'
+        + '    <col class="col-seq"><col class="col-cat"><col class="col-name">'
+        + '    <col class="col-unit"><col class="col-weight"><col class="col-price"><col class="col-op">'
+        + '  </colgroup>'
+        + '  <thead>'
+        + '    <tr>'
+        + '      <th>#</th>'
+        + '      <th class="col-cat-h">类别</th>'
+        + '      <th>餐品名称</th>'
+        + '      <th class="col-unit-h">单价</th>'
+        + '      <th class="col-weight-h">取餐量</th>'
+        + '      <th class="col-price-h">金额</th>'
+        + '      <th class="col-op-h">操作</th>'
+        + '    </tr>'
+        + '  </thead>'
+        + '  <tbody>';
 
       var seq = 0;
-      ['营养秤', '档口秤'].forEach(function(zone) {
-        var items = grouped[zone] || [];
-        if (items.length === 0) return;
-        var zoneLabel = zone === '营养秤' ? '餐线菜品' : '档口菜品';
-        var zoneIcon = zone === '营养秤' ? '&#x1F95C;' : '&#x2696;&#xFE0F;';
-        var zoneTotal = items.reduce(function(s, it) {
-          return s + (it.status !== 'removed' ? subtotal(it) : 0);
-        }, 0);
+      var totalWeight = 0;
+      var totalPrice = 0;
 
+      currentItems.forEach(function(it) {
+        seq++;
+        if (it.status !== 'removed') {
+          totalWeight += it.weight;
+          totalPrice += subtotal(it);
+        }
+
+        var catLabel = it.cat === 'line' ? '餐线' : '档口';
+        var catCls = it.cat === 'line' ? 'cell-cat--line' : 'cell-cat--booth';
+
+        var badge = '';
+        if (it.status === 'added') {
+          badge = '<span class="change-badge change-badge--add">新加</span>';
+        } else if (it.status === 'removed') {
+          badge = '<span class="change-badge change-badge--remove">已移除</span>';
+        }
+
+        /* 操作按钮:已移除→恢复,新加→直接删除,正常→移除 */
+        var opBtn = '';
+        if (it.status === 'removed') {
+          opBtn = '<button class="op-btn op-btn--restore" onclick="restoreItem(' + it.id + ')" title="恢复">&#x21BA;</button>';
+        } else if (it.status === 'added') {
+          opBtn = '<button class="op-btn op-btn--remove" onclick="deleteAdded(' + it.id + ')" title="删除">&#x2715;</button>';
+        } else {
+          opBtn = '<button class="op-btn op-btn--remove" onclick="removeItem(' + it.id + ')" title="移除">&#x2212;</button>';
+        }
+
+        html += ''
+          + '<tr class="' + (it.status === 'added' ? 'added' : '') + (it.status === 'removed' ? ' removed' : '') + '">'
+          + '  <td><span class="cell-seq">' + seq + '</span></td>'
+          + '  <td><span class="cell-cat ' + catCls + '">' + catLabel + '</span></td>'
+          + '  <td><div class="cell-name">' + it.name + badge + '</div></td>'
+          + '  <td class="cell-unit">&#xFFE5;' + it.unitPrice.toFixed(2) + '/100g</td>'
+          + '  <td class="cell-weight"><span class="cell-weight__pill">' + it.weight + 'g</span></td>'
+          + '  <td class="cell-price">&#xFFE5;' + subtotal(it).toFixed(2) + '</td>'
+          + '  <td class="cell-op">' + opBtn + '</td>'
+          + '</tr>';
+      });
+
+      html += '</tbody></table>';
+
+      /* 合计行 */
+      html += ''
+        + '<div class="items-footer">'
+        + '  <table>'
+        + '    <colgroup>'
+        + '      <col style="width:36px"><col style="width:56px"><col>'
+        + '      <col style="width:100px"><col style="width:88px"><col style="width:88px"><col style="width:56px">'
+        + '    </colgroup>'
+        + '    <tbody>'
+        + '      <tr>'
+        + '        <td></td><td></td>'
+        + '        <td><span class="footer-label">合计</span></td>'
+        + '        <td style="text-align:right;"><span class="footer-value">' + countActive() + ' 项</span></td>'
+        + '        <td style="text-align:center;"><span class="footer-value">' + totalWeight + 'g</span></td>'
+        + '        <td style="text-align:right;"><span class="footer-amount">&#xFFE5;' + totalPrice.toFixed(2) + '</span></td>'
+        + '        <td></td>'
+        + '      </tr>'
+        + '    </tbody>'
+        + '  </table>'
+        + '</div>';
+
+      document.getElementById('currentList').innerHTML = html;
+      document.getElementById('currentCount').textContent = countActive();
+    }
+
+    /* ================ 渲染:未识别取餐记录列表(添加商品 Tab) ================ */
+    function renderUnmatched() {
+      var html = ''
+        + '<div class="unmatched-tip">'
+        + '  <span class="unmatched-tip__icon">&#x26A0;&#xFE0F;</span>'
+        + '  <span>以下是本餐次中<strong>未匹配到顾客</strong>的取餐记录,若属于当前订单漏记,点击 <strong>+</strong> 加入订单</span>'
+        + '</div>';
+
+      /* 分组:营养秤 / 档口秤 */
+      var groups = [
+        { key: 'scale', label: '营养秤 · 餐线取餐', icon: '&#x1F95C;' },
+        { key: 'stall', label: '档口秤 · 档口取餐', icon: '&#x2696;&#xFE0F;' }
+      ];
+
+      groups.forEach(function(g) {
+        var items = unmatchedRecords.filter(function(r) { return r.source === g.key; });
         html += '<div class="zone-group">'
           + '<div class="zone-header">'
-            + '<span class="zone-header__name">' + zoneIcon + ' ' + zoneLabel
-              + '<span class="zone-header__count">' + items.length + ' 件</span>'
-            + '</span>'
-            + '<span class="zone-header__total">小计 &#xFFE5;' + zoneTotal.toFixed(2) + '</span>'
+          +   '<span class="zone-header__name">' + g.icon + ' ' + g.label
+          +     '<span class="zone-header__count">' + items.length + ' 条</span>'
+          +   '</span>'
+          +   '<span class="zone-header__meta">最近 → 最早</span>'
           + '</div>';
 
-        items.forEach(function(it) {
-          seq++;
-          var actionBtn = it.status === 'removed'
-            ? '<div class="item-card__action item-card__action--restore" onclick="restoreItem(' + it.id + ')" title="恢复">&#x21BA;</div>'
-            : '<div class="item-card__action item-card__action--remove" onclick="removeItem(' + it.id + ')" title="移除">&#x2212;</div>';
+        if (items.length === 0) {
+          html += '<div class="empty-state" style="padding:24px 12px;">'
+            + '<div class="empty-state__icon">&#x2705;</div>'
+            + '<div class="empty-state__text">该来源暂无未识别记录</div>'
+            + '</div>';
+        } else {
+          html += ''
+            + '<table class="um-table">'
+            + '  <colgroup>'
+            + '    <col class="col-time"><col class="col-cat"><col class="col-name">'
+            + '    <col class="col-unit"><col class="col-weight"><col class="col-price"><col class="col-op">'
+            + '  </colgroup>'
+            + '  <thead>'
+            + '    <tr>'
+            + '      <th class="col-time-h">时间</th>'
+            + '      <th class="col-cat-h">类别</th>'
+            + '      <th>餐品名称</th>'
+            + '      <th class="col-unit-h">单价</th>'
+            + '      <th class="col-weight-h">取餐量</th>'
+            + '      <th class="col-price-h">金额</th>'
+            + '      <th class="col-op-h">操作</th>'
+            + '    </tr>'
+            + '  </thead>'
+            + '  <tbody>';
 
-          var badge = '';
-          if (it.status === 'added') badge = '<span class="change-badge change-badge--add">新加</span>';
-          if (it.status === 'removed') badge = '<span class="change-badge change-badge--remove">已移除</span>';
+          items.forEach(function(r) {
+            var catLabel = r.cat === 'line' ? '餐线' : '档口';
+            var catCls = r.cat === 'line' ? 'cell-cat--line' : 'cell-cat--booth';
+            var isAdded = addedRecordIds.has(r.recordId);
+            var opBtn;
+            if (isAdded) {
+              opBtn = '<span class="op-btn op-btn--added">&#x2713; 已加</span>';
+            } else {
+              opBtn = '<button class="op-btn op-btn--add" onclick="addFromUnmatched(\'' + r.recordId + '\')" title="加入订单">+</button>';
+            }
+            html += ''
+              + '<tr>'
+              + '  <td class="cell-time">' + r.time + '</td>'
+              + '  <td><span class="cell-cat ' + catCls + '">' + catLabel + '</span></td>'
+              + '  <td><div class="um-name">' + r.name + '</div></td>'
+              + '  <td class="um-unit">&#xFFE5;' + r.unitPrice.toFixed(2) + '/100g</td>'
+              + '  <td class="um-weight"><span class="um-weight__pill">' + r.weight + 'g</span></td>'
+              + '  <td class="um-price">&#xFFE5;' + subtotal(r).toFixed(2) + '</td>'
+              + '  <td class="cell-op">' + opBtn + '</td>'
+              + '</tr>';
+          });
 
-          var weightText = it.weight ? '取 ' + it.weight + 'g' : '需称重';
-          var unitPrice = it.weight ? '&#xFFE5;' + it.price.toFixed(2) + '/100g' : '&#xFFE5;' + it.price.toFixed(2) + '/份';
-
-          html += '<div class="item-card ' + (it.status === 'added' ? 'added' : '') + (it.status === 'removed' ? ' removed' : '') + '">'
-            + '<div class="item-card__seq">' + seq + '</div>'
-            + '<div class="item-card__info">'
-              + '<span class="item-card__name">' + it.name + badge + '</span>'
-              + '<span class="item-card__unit-price">' + unitPrice + '</span>'
-            + '</div>'
-            + '<span class="item-card__weight">' + weightText + '</span>'
-            + '<div class="item-card__price">&#xFFE5;' + subtotal(it).toFixed(2) + '</div>'
-            + actionBtn
-          + '</div>';
-        });
+          html += '</tbody></table>';
+        }
 
         html += '</div>';
       });
 
-      document.getElementById('currentList').innerHTML = html;
-    }
-
-    /* 渲染候选添加商品 */
-    function renderCandidates() {
-      var grouped = { '营养秤': [], '档口秤': [] };
-      candidates.forEach(function(it) {
-        grouped[it.zone].push(it);
-      });
-
-      document.getElementById('candidateScale').innerHTML = grouped['营养秤'].map(function(it) {
-        return candidateHtml(it);
-      }).join('');
-
-      document.getElementById('candidateStall').innerHTML = grouped['档口秤'].map(function(it) {
-        return candidateHtml(it);
-      }).join('');
-    }
-
-    function candidateHtml(it) {
-      return '<div class="candidate-item" data-name="' + it.name + '">'
-        + '<div class="candidate-item__thumb">' + it.thumb + '</div>'
-        + '<div class="candidate-item__name">' + it.name + '</div>'
-        + '<div class="candidate-item__meta">&#xFFE5;' + it.price.toFixed(2) + '/100g</div>'
-        + '<div class="candidate-item__add" onclick="addItem(' + it.id + ')">+ 添加</div>'
-      + '</div>';
-    }
-
-    /* 搜索过滤 */
-    function filterCandidates() {
-      var keyword = document.getElementById('searchInput').value.toLowerCase();
-      document.querySelectorAll('.candidate-item').forEach(function(el) {
-        var name = el.dataset.name.toLowerCase();
-        el.style.display = name.indexOf(keyword) >= 0 ? '' : 'none';
-      });
+      document.getElementById('addList').innerHTML = html;
+      /* Tab 计数:剩余可加入的未识别条数 */
+      var remaining = unmatchedRecords.length - addedRecordIds.size;
+      document.getElementById('unmatchedCount').textContent = remaining;
     }
 
     /* Tab 切换 */
     function switchTab(type) {
-      document.querySelectorAll('.tab').forEach(function(el, idx) {
-        el.classList.toggle('active', (type === 'current' && idx === 0) || (type === 'add' && idx === 1));
-      });
+      document.getElementById('tabCurrent').classList.toggle('active', type === 'current');
+      document.getElementById('tabAdd').classList.toggle('active', type === 'add');
       document.getElementById('currentList').style.display = type === 'current' ? '' : 'none';
       document.getElementById('addList').style.display = type === 'add' ? '' : 'none';
     }
 
-    /* 移除商品(多记) */
+    /* ================ 操作:移除(多记) ================ */
     function removeItem(id) {
-      var item = currentItems.filter(function(it) { return it.id === id; })[0];
-      if (!item) return;
-      if (item.status === 'added') {
-        /* 新加的直接删除 */
-        currentItems = currentItems.filter(function(it) { return it.id !== id; });
-        changeLog = changeLog.filter(function(l) { return l.id !== id; });
-      } else {
-        item.status = 'removed';
-        changeLog.push({
-          id: id, type: 'remove', name: item.name,
-          amount: -subtotal(item), time: getTime()
-        });
-      }
-      renderCurrent();
-      renderLog();
-      recalc();
-    }
-
-    /* 恢复商品 */
-    function restoreItem(id) {
-      var item = currentItems.filter(function(it) { return it.id === id; })[0];
-      if (!item) return;
-      item.status = 'normal';
-      changeLog = changeLog.filter(function(l) { return l.id !== id; });
-      renderCurrent();
-      renderLog();
-      recalc();
-    }
-
-    /* 添加商品 */
-    function addItem(candidateId) {
-      var cand = candidates.filter(function(c) { return c.id === candidateId; })[0];
-      if (!cand) return;
-
-      /* 弹窗输入重量 */
-      var weight = prompt('请输入 "' + cand.name + '" 的重量(克):', '150');
-      if (!weight) return;
-      var w = parseFloat(weight) || 150;
-
-      var newItem = {
-        id: Date.now(), name: cand.name, zone: cand.zone, thumb: cand.thumb,
-        weight: w, price: cand.price, status: 'added'
-      };
-      currentItems.push(newItem);
+      var it = currentItems.filter(function(x) { return x.id === id; })[0];
+      if (!it) return;
+      it.status = 'removed';
       changeLog.push({
-        id: newItem.id, type: 'add', name: cand.name,
-        amount: subtotal(newItem), time: getTime()
+        id: id, type: 'remove', name: it.name,
+        amount: -subtotal(it), time: getTime()
       });
       renderCurrent();
       renderLog();
       recalc();
+      showToast('已移除「' + it.name + '」,可点击 ↺ 恢复', 'warn');
+    }
 
-      /* 切回当前订单 Tab */
-      switchTab('current');
+    /* 恢复(已移除→正常) */
+    function restoreItem(id) {
+      var it = currentItems.filter(function(x) { return x.id === id; })[0];
+      if (!it) return;
+      it.status = 'normal';
+      changeLog = changeLog.filter(function(l) { return l.id !== id; });
+      renderCurrent();
+      renderLog();
+      recalc();
+      showToast('已恢复「' + it.name + '」', 'success');
+    }
+
+    /* 删除新加项(从未识别加入后又被删除:从订单移除,并恢复未识别列表的 + 按钮) */
+    function deleteAdded(id) {
+      var it = currentItems.filter(function(x) { return x.id === id; })[0];
+      if (!it) return;
+      currentItems = currentItems.filter(function(x) { return x.id !== id; });
+      changeLog = changeLog.filter(function(l) { return l.id !== id; });
+      /* 如果是来自未识别记录,恢复候选列表 */
+      if (it.recordId) {
+        addedRecordIds.delete(it.recordId);
+        renderUnmatched();
+      }
+      renderCurrent();
+      renderLog();
+      recalc();
+      showToast('已删除「' + it.name + '」', 'warn');
+    }
+
+    /* ================ 操作:从未识别加入(少记) ================ */
+    function addFromUnmatched(recordId) {
+      var r = unmatchedRecords.filter(function(x) { return x.recordId === recordId; })[0];
+      if (!r) return;
+      if (addedRecordIds.has(recordId)) return;
+
+      var newItem = {
+        id: Date.now() + Math.floor(Math.random() * 1000),
+        name: r.name,
+        cat: r.cat,
+        weight: r.weight,
+        unitPrice: r.unitPrice,
+        status: 'added',
+        origin: 'unmatched',
+        recordId: r.recordId
+      };
+      currentItems.push(newItem);
+      addedRecordIds.add(recordId);
+      changeLog.push({
+        id: newItem.id, type: 'add', name: r.name,
+        amount: subtotal(newItem), time: getTime()
+      });
+
+      renderCurrent();
+      renderUnmatched();
+      renderLog();
+      recalc();
+      showToast('已加入「' + r.name + '」&#xFF08;&#xFFE5;' + subtotal(newItem).toFixed(2) + '&#xFF09;', 'success');
     }
 
     function getTime() {
@@ -830,7 +1124,7 @@
     function renderLog() {
       var el = document.getElementById('changeLog');
       if (changeLog.length === 0) {
-        el.innerHTML = '<div class="change-log__empty">暂无变更,请到左侧添加或移除商品</div>';
+        el.innerHTML = '<div class="change-log__empty">暂无变更,请到左侧移除多记或加入未识别记录</div>';
         return;
       }
       el.innerHTML = changeLog.map(function(l) {
@@ -849,16 +1143,15 @@
 
     /* 重新计算金额 */
     function recalc() {
-      var original = 46.60;
       var newTotal = currentItems.reduce(function(s, it) {
         return s + (it.status === 'removed' ? 0 : subtotal(it));
       }, 0);
-      var change = newTotal - original;
-      var discount = 5.00;
-      var newPayable = newTotal - discount;
+      var change = newTotal - ORIGINAL_TOTAL;
+      var newPayable = newTotal - DISCOUNT;
 
-      document.getElementById('changeAmount').innerHTML = (change >= 0 ? '+' : '') + '&#xFFE5;' + change.toFixed(2);
-      document.getElementById('changeAmount').style.color = change >= 0 ? '#4ade80' : '#ff6b6b';
+      var changeEl = document.getElementById('changeAmount');
+      changeEl.innerHTML = (change >= 0 ? '+' : '') + '&#xFFE5;' + change.toFixed(2);
+      changeEl.style.color = change >= 0 ? '#4ade80' : '#ff6b6b';
       document.getElementById('newAmount').textContent = '¥' + newTotal.toFixed(2);
       document.getElementById('newPayable').innerHTML = '&#xFFE5;' + newPayable.toFixed(2);
 
@@ -869,18 +1162,38 @@
     /* 应用变更 */
     function applyChanges() {
       if (changeLog.length === 0) {
-        alert('暂无变更,可直接返回结算');
+        showToast('暂无变更,可直接返回结算', 'warn');
         return;
       }
-      if (confirm('确认应用本次修正?\n变更:' + changeLog.length + ' 项\n新应付金额:¥' + (currentItems.reduce(function(s, it) { return s + (it.status === 'removed' ? 0 : subtotal(it)); }, 0) - 5).toFixed(2))) {
-        alert('修正已应用,返回结算页');
-        window.location.href = '03-checkout.html';
+      var newTotal = currentItems.reduce(function(s, it) {
+        return s + (it.status === 'removed' ? 0 : subtotal(it));
+      }, 0);
+      var newPayable = newTotal - DISCOUNT;
+      if (confirm('确认应用本次修正?\n变更:' + changeLog.length + ' 项\n新应付金额:¥' + newPayable.toFixed(2))) {
+        showToast('修正已应用,返回结算页', 'success');
+        setTimeout(function() {
+          window.location.href = '03-checkout.html';
+        }, 800);
       }
     }
 
+    /* Toast */
+    function showToast(msg, type) {
+      var el = document.getElementById('toast');
+      el.innerHTML = msg;
+      el.className = 'toast';
+      if (type === 'success') el.classList.add('toast--success');
+      if (type === 'warn') el.classList.add('toast--warn');
+      if (type === 'error') el.classList.add('toast--error');
+      el.classList.add('show');
+      clearTimeout(el._timer);
+      el._timer = setTimeout(function() { el.classList.remove('show'); }, 2200);
+    }
+
     /* 初始化 */
     renderCurrent();
-    renderCandidates();
+    renderUnmatched();
+    renderLog();
     recalc();
   </script>
 
diff --git a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md
index 0ab57bd..ffcd617 100644
--- a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md
+++ b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md
@@ -1,5 +1,309 @@
 # 结算设备 CHANGELOG
 
+## 2026-08-10 | 订单列表(05)+订单详情(06)增加用户类型展示
+
+### 业务背景
+原订单列表(`05-orders.html`)仅展示「用户姓名|编号」一列,收银员无法在订单列表层面快速识别订单的顾客构成(会员 / 临时 / 内部员工),不便于做营收细分查询。订单详情页(`06-order-detail.html`)也没有独立的顾客信息区块,需要从订单头信息网格里翻找,且原信息网格里的「顾客类型=企业员工」字段语义与新分类体系(会员/临时/内部员工)不一致,数据陈旧。
+
+### 变更
+- **`05-orders.html`**:
+  - **新增「用户类型」列**:位于「用户信息」列右侧,展示紧凑型徽标(与 03-checkout 的 user-type 同款配色)
+    - `member` 会员用户 → 金蓝渐变金边
+    - `temp` 临时用户 → 灰底
+    - `staff` 内部员工 → 蓝底
+  - mock 数据每条订单新增 `userType` 字段,5 条订单覆盖三种类型(2 会员 / 2 内部员工 / 1 临时)
+  - **列宽重新分配**(10 列 → 11 列,总宽不变):从原部分列(用户信息/状态/餐次/流水号/支付时间/操作)各压缩 2-15px,腾出 92px 给用户类型列
+  - 跳转 URL 新增 `userType` / `userName` / `userCode` 三个参数,详情页据此渲染顾客信息卡
+- **`06-order-detail.html`**:
+  - **新增「顾客信息」卡片**:位于订单头卡片下方、商品明细上方,仅展示三项:
+    - 用户类型(徽标样式与列表一致)
+    - 姓名
+    - 编号(Menlo 等宽字体)
+  - 三项以竖线分隔符横向排列,卡片简洁不冗余
+  - 新增 `renderCustomerCard()` 函数,读取 URL 参数驱动填充(无参数时显示默认值,兼容旧链接)
+  - **清理冗余**:删除订单头信息网格中语义陈旧的「顾客类型=企业员工」项(与新顾客信息卡的"用户类型"语义重叠且数据不准确),替换为更有用的「商品合计 ¥46.60」
+  - 新增 `USER_TYPE_CONFIG` 配置表,与 05-orders 同款,保证两页徽标样式一致
+
+### 技术实现
+- 两页共用同一套 `user-type` CSS 与 `USER_TYPE_CONFIG` 配置(文案 + class),确保跨页视觉与语义统一
+- URL 参数采用 `encodeURIComponent` 编码用户名(支持中文),详情页 `decodeURIComponent` 解码
+- 列表→详情跳转链路完整:点击行或点「详情/去退款」按钮均携带用户类型参数,顾客信息卡可正确渲染
+
+### 不变更
+- 05-orders 的筛选栏、分页、状态徽标、餐次标签等其他列保持不变
+- 06-order-detail 的退款流程、URL 驱动的 status/refunded 参数、关联信息等保持不变
+- 03-checkout 等其他页面的 user-type 配色风格保持不变(本次只是复用,未改动原页)
+
+---
+
+## 2026-08-10 | 订单详情页(06)移除「补齐明细」操作项
+
+### 业务背景
+`06-order-detail.html` 是订单支付完成后的详情页,右列「订单操作」原包含三个按钮:重新打印小票 / 补齐明细(漏记/多记) / 申请退款。
+
+补齐明细(`08-reconcile.html`)本质是**支付前**的修正入口,返回按钮指向 `03-checkout.html`。订单已支付完成进入详情页后,补齐明细已不适用——此时如需调整金额,只能走退款流程(全额/部分退款)。保留该入口会让收银员误以为可在支付后继续修改订单,产生操作歧义。
+
+### 变更
+- **`06-order-detail.html`**:删除「订单操作」按钮组中的「补齐明细(漏记/多记)」按钮,保留:
+  - 🖨️ 重新打印小票
+  - 💸 申请退款
+
+### 不变更
+- 左列订单头、商品明细、金额汇总保持不变
+- 退款流程面板、URL 参数驱动(action=refund)、部分退款/二次退款逻辑保持不变
+- `08-reconcile.html` 自身及其入口(`03-checkout.html` 取餐明细头部的「补齐明细」按钮)保持不变 —— 补齐明细仅在支付前可用
+
+---
+
+## 2026-08-10 | 补齐明细页(08-reconcile)重构:表格化 + 未识别取餐记录加入
+
+### 业务背景
+原 `08-reconcile.html` 补齐明细页存在两个核心问题:
+1. **左侧订单明细样式**采用「分组 + 卡片堆叠」形式,与 `03-checkout.html` 表格化风格不一致,且分组标题占用了大量纵向空间,无法在 720px 内呈现完整明细。
+2. **添加商品的来源错误**:原方案弹出一个**菜品列表**(菜品库),由收银员手填重量加入。但实际业务路径是 —— 当前餐次中存在**未匹配到人脸/账户的取餐记录**(营养秤/档口秤有数据但识别不到人),这些就是「少记」的可信来源,直接从这里挑记录加入即可,不需要也不应该让收银员凭空选菜品。
+
+补齐明细的核心业务路径明确为:**多记→手动删除** + **少记→从未识别取餐记录中直接加入**。
+
+### 变更
+- **左侧当前订单(表格化,对齐 03-checkout)**:
+  - 由 `<div>` 卡片堆叠改为 `<table>` 表格化结构,列:序号 / 类别 / 餐品名称 / 单价 / 取餐量 / 金额 / 操作
+  - **同一菜品取两次会作为两条独立行显示**(不合并),满足"补齐明细中同名菜品多条记录"的场景
+  - 操作列三种按钮:`-` 移除(正常→已移除)、`↺` 恢复(已移除→正常)、`✕` 直接删除(用于新加项)
+  - 状态样式:已移除行删除线+半透明红底,新加行绿底+「新加」徽标
+  - 底部合计行同步表格化:件数 / 总重 / 总金额
+- **「添加商品」Tab 重构为「补齐未识别」**:
+  - 由原"菜品库网格 + 搜索"改为**当前餐次中未识别到人的取餐记录列表**
+  - 顶部黄色提示条说明用途:"未匹配到顾客的取餐记录,属漏记则点 + 加入"
+  - 按来源分组(营养秤 · 餐线取餐 / 档口秤 · 档口取餐),每组带条数计数
+  - 每条记录展示:时间 / 类别 / 餐品 / 单价 / 取餐量 / 金额 / 操作
+  - 点击 `+ 加入` → 直接加入左侧订单(标记「新加」),并从列表中标记「✓ 已加」(不可重复加入)
+  - 在左侧订单中删除该新加项,自动恢复未识别列表的 `+` 按钮
+- **数据模型调整**:
+  - `currentItems`:每条独立记录,新增 `origin`(recognized/unmatched)、`recordId`(关联未识别记录)、`status`(normal/removed/added)
+  - `unmatchedRecords`:未识别取餐记录池,每条带 `recordId`、`time`、`source`(scale/stall)
+  - `addedRecordIds`:Set 集合,跟踪已加入的未识别记录,避免重复加入
+- **右列差额汇总**:删除原"原订单合计/本次修正/修正后合计"中的 demo 写死数字,改为 ID 绑定,金额随操作实时变化;变更日志支持新加(绿)与移除(红)两种颜色区分
+
+### 技术实现
+- 仿照 `03-checkout.html` 的 `items-table` + `items-footer` + 列宽 `colgroup` 模式,确保两页视觉一致
+- 未识别记录列表独立 `um-table` 样式(时间列、橙色配色区分),与当前订单的绿色配色形成视觉对照,暗示"待确认"
+- 加入操作不弹窗输入重量(因为未识别记录的重量已经由秤具给出,无需收银员重新输入)
+
+### 不变更
+- 顶部导航(返回结算 + 标题 + 订单号)、右列差额汇总整体布局、变更日志样式、底部操作按钮(放弃修正 / 应用修正)保持不变
+- `ORIGINAL_TOTAL = 46.60`、`DISCOUNT = 5.00` 等金额常量与原版一致(对应 03-checkout 同一订单)
+
+---
+
+## 2026-08-07 | 收银员屏支付成功页按支付方式动态展示 + 移除自动弹窗
+
+### 业务背景
+原 `03-checkout.html` 收银员屏在 `confirmPay()` 中跳转到 `04-pay-success.html`(收银员屏成功页)时未携带任何参数,导致成功页无论收银员选了哪种支付方式(在线 / 余额 / 现金找零 / 三种混合支付),都固定展示"在线支付 · 微信支付",与实际收款方式不符。同时,旧版成功页有"8 秒后自动弹出『订单已完成,是否开始下一单?』"的逻辑,产品确认要移除。
+
+### 变更
+- **`03-checkout.html`**:`confirmPay()` 跳转 URL 改为携带 `?method=xxx` 参数,映射规则:
+  - `currentPay=online` → `method=online`
+  - `currentPay=balance`(余额充足) → `method=balance`
+  - `currentPay=cash`(实收充足找零) → `method=cash-change`
+  - `mixedMode=bl-online` → `method=mixed-bl-online`
+  - `mixedMode=bl-cash` → `method=mixed-bl-cash`
+  - `mixedMode=cash-online` → `method=mixed-cash-online`
+  - 若已核销代金券,追加 `&coupon=1`(预留)
+- **`04-pay-success.html`**(收银员屏):
+  - 新增 `methodConfig` 字典,6 种支付方式差异化展示:
+    - 标题(支付成功 / 扣款成功)
+    - 徽章文案(支付方式 + 渠道 + 状态)
+    - 账户信息条(余额/混合/找零场景显示对应明细;在线支付隐藏)
+  - 新增 `loadFromUrl()` 读取 `?method=xxx`,调用 `switchDemo()` 应用配置
+  - 新增演示切换器(右上角悬浮,6 个按钮,与 user-04 风格一致),便于原型评审
+  - **删除**原 8 秒后弹出的 `confirm('订单已完成,是否开始下一单?')` 弹窗逻辑
+- **`user-04-success.html`**(用户副屏):同步加入 `loadFromUrl()` URL 参数驱动(此前已具备 `methodConfig`,仅缺参数入口)
+
+### 技术实现
+- 收银员屏与用户副屏的 `methodConfig` 键名统一(`online` / `balance` / `mixed-bl-online` / `mixed-bl-cash` / `mixed-cash-online` / `cash-change`),与 `user-03-paying.html` 完全对齐,保证跨屏参数语义一致
+- 收银员屏成功页保留原有的左动画+右操作布局,账户信息条新增在 `success-meta` 上方,与 user-04 同样的样式 token
+
+### 不变更
+- 营养摘要卡、操作按钮(开始下一单/重打小票/订单详情)、小票打印状态等成功页既有内容保持不变
+- user-04-success 的烟花动画、营养卡、二维码引导保持不变
+
+---
+
+## 2026-08-07 | 收银屏结算页:取餐明细表格化 + 去除结算 Tab 提示信息
+
+### 业务背景
+原 `03-checkout.html` 左栏取餐明细采用"卡片堆叠 + 分组标题(餐线菜品/档口菜品)"形式,与用户副屏 `user-02-checkout-sync.html` 的表格化风格不统一,且热量列对收银员无实际意义(收银员关心的是金额与取餐量,而非营养数据)。同时三种结算 Tab(在线/现金/余额)下的「支付详情区」(pay-detail)展示了 hint+status 文案,占用空间但对收银员操作无指导价值,违反"结算台操作要简单"的核心约束。
+
+### 两项优化
+1. **取餐明细表格化(参考 user-02 风格)**:
+   - 由卡片堆叠改为 `<table>` + `<colgroup>` 列宽控制,与用户副屏视觉统一
+   - **删除热量列**(收银员场景下无意义),保留 6 列:序号 / 类别 / 餐品名称 / 单价 / 取餐量 / 金额
+   - **不做自动滚动**(收银员需要稳定查看完整明细,不能像用户屏那样循环滚动)
+   - 底部合计行(与表头列对齐):合计 / 5项 / 1040g / ¥46.60
+   - 删除「餐线菜品/档口菜品」分组标题(改为「类别」列徽标,信息密度更高)
+   - 类别徽标样式:餐线(蓝色)、档口(橙色),视觉与 user-02 完全一致
+
+2. **去除三种结算 Tab 下的提示信息**:
+   - 删除 `.pay-detail` 整块(CSS + DOM + JS 全部清理)
+   - 删除 `payDetailMap` 数据结构、`switchPay` 中的赋值逻辑
+   - 收银员切换 Tab 后直接看到对应操作区(在线扫码 / 现金输入 / 余额信息),不再有多余 hint/status 文案干扰
+
+### 视觉与交互细节
+- 表头与表体 6 列完全对齐(经浏览器验证 left 坐标一致)
+- 取餐量保持青色 pill 样式、金额青色加粗、序号圆形蓝边,延续 user-02 设计语言
+- 合计行金色顶部分隔 + 蓝绿渐变背景,与 user-02 合计行视觉统一
+- 移除 pay-detail 后,右栏腾出 ~42px 高度,反而修复了之前现金补差场景的 1px 溢出
+
+### 技术实现
+- DOM 重构:`.items-list` 内部由 `.table-head` + 多个 `.item-card` + `.zone-header` + `.subtotal-bar` 改为「表头 table + 表体 table + `.items-footer` 合计行」三段式结构
+- CSS 重写:`.items-table` 系列(列宽、表头、行 hover、cell 样式)+ `.items-footer` 系列(底部合计行)
+- JS 清理:删除 `payDetailMap` 全局对象、`switchPay` 中的 innerHTML 赋值、DOM 中的 `payDetail` 元素
+
+### 验证结果
+| 检查项 | 结果 |
+|---|---|
+| 表格列数 | 6(序号/类别/名称/单价/取餐量/金额) |
+| 表格行数 | 5(原 5 道菜) |
+| 热量列存在 | 否 |
+| 表头/表体 6 列对齐 | 全部对齐(left 坐标差 <2px) |
+| 合计行金额 | ¥46.60(与商品合计一致) |
+| payDetail 元素 | 已彻底移除 |
+| 5 个支付场景右栏溢出 | 全部 0(在线/现金找零/现金补差/代金券+余额/余额不足+混合) |
+
+---
+
+## 2026-08-07 | 收银屏结算页:右栏一屏化 + 代金券独立入口 + 演示场景控制
+
+### 业务背景
+原 `03-checkout.html` 右侧收银操作区在多个支付场景下需要滚动才能完成操作,且代金券作为支付 Tab 与"在线/现金/余额"并列在语义上不合理(代金券为抵扣关系而非支付方式)。此外,原型演示"余额不足走混合支付"场景时缺少一键切换入口,需手改代码。
+
+### 三项主要优化
+1. **右栏一屏可见**:压缩所有 padding/gap/字号,5 个核心场景(在线 / 现金找零 / 现金补差 / 代金券+余额充足 / 余额不足+混合支付)在 1280×720 PAD 内全部 ≤1px 溢出
+2. **代金券独立入口**:
+   - 支付方式 Tab 从 4 个(在线/现金/余额/代金券)精简为 3 个(在线/现金/余额)
+   - 代金券作为优惠抵扣入口独立放在金额汇总区下方,与支付方式形成"抵扣 + 支付"的并行关系
+   - 三态切换:默认态(添加按钮)→ 输入态(券码输入框)→ 已核销态(显示面值 + 取消按钮)
+3. **原型演示控制徽标**:顶部右侧嵌入演示工具条,提供 4 个按钮
+   - 「余额充足」`USER_BALANCE=128.50` 走单支付
+   - 「余额不足」`USER_BALANCE=20.00` 走混合支付(自动弹混合建议弹窗)
+   - 「代金券预载」开关,可叠加在任一场景上(直接进入已核销态)
+   - 「↻」一键重置(清空代金券 + 现金 + 混合态,回到默认场景)
+
+### 视觉与交互细节
+- **演示徽标设计**:紫罗兰边框 + 半透明黑底 + 模糊背景,与 top-bar 深蓝主色形成弱对比;选中场景按钮高亮(紫罗兰填充)
+- **代金券入口视觉**:金色虚线边框(默认)→ 金色实线(已应用),带 `🎫` 图标和面值金额,清晰传达"抵扣"语义
+- **混合支付进度条压缩**:margin-bottom 12→8,padding 10×12→7×10,内部 step-card 字号统一,适配一屏
+- **现金找零/补差结果区精简**:从 3 行(实收/应付/找零或差额)压缩为单行(找零金额或差额 + 按钮),保留核心信息
+- **余额信息卡精简**:从 5 行(等级/余额/应付/扣款后/tip)压缩为 2 行 + tip(等级与余额并列、应付与扣款后并列)
+- **混合支付态隐藏余额信息卡**:进度条已展示余额扣款信息,信息卡不再重复
+
+### 技术实现
+- 新增 JS 函数:`showCouponInput()` / `hideCouponInput()` / `removeCoupon()` 驱动 coupon-entry 三态状态机
+- 新增 JS 函数:`switchScene(scene)` / `toggleCouponPreset()` / `resetDemo()` 控制演示场景切换
+- `refreshBalanceInfo()` 在 `mixedMode` 为真时直接 `remove('show')`,避免与进度条重复
+- `refreshBalanceInfo()` 由 switchPay 统一调用,移除 switchPay 内的 `classList.toggle('show', type === 'balance')` 避免冲突
+- `chooseMixed()` / `startCashOnlineMixed()` 内补调 `refreshBalanceInfo()`,确保混合态实时隐藏余额卡
+- 移除冗余代码:删除 `payDetailMap.coupon` / `confirmPay` 中的 `currentPay === 'coupon'` 分支 / `refreshBtnAmount` 中的 `couponAfterAmount` ID 引用
+- DOM 精简:删除现金找零/补差结果区的 `crChangeReceived`/`crChangePayable`/`crDiffReceived`/`crDiffPayable` 4 个冗余 ID
+
+### 验证结果
+| 场景 | pay-col__body 溢出 |
+|---|---|
+| 默认(余额充足,在线支付) | 0px |
+| 现金找零(实收 ¥50) | 0px |
+| 现金补差(实收 ¥20,差额在线收) | 1px(无可见差异) |
+| 代金券预载 + 余额支付 | 0px |
+| 余额不足 + 混合支付(余额+在线) | 0px |
+
+---
+
+## 2026-08-07 | 用户屏支付引导页:在线支付双途径(B扫C / C扫B)
+
+### 业务背景
+在线支付实际支持两种扫码方向:
+- **B 扫 C(被扫)**:收银设备(B端)扫码器扫顾客付款码 → 顾客"出示付款码"
+- **C 扫 B(主扫)**:顾客手机扫收银设备屏幕上的收款二维码 → 顾客"扫码支付"
+
+原模板 A 仅展示 B 扫 C 单一路径,缺少 C 扫 B 的二维码引导。本次升级在所有涉及"在线支付"的模板中同步加入双途径展示,并突出 B 扫 C 为推荐路径。
+
+### 改造范围(3 处统一支持双途径)
+| 模板 | 在线支付用途 | 改造方式 |
+|---|---|---|
+| **模板 A 在线支付** | 全额在线 | 左右双栏并列展示 |
+| **模板 C1 余额+在线** | 余额扣尽后差额在线补 | pending 卡片内嵌紧凑版 |
+| **模板 C3 现金+在线** | 现金收讫后差额在线补 | pending 卡片内嵌紧凑版 |
+
+### 视觉与交互细节
+- **左侧"出示付款码"(高亮推荐,业务上为 B 扫 C)**:
+  - 青蓝主色 + 加粗边框 + 阴影发光,视觉权重明显大于右侧
+  - 标题旁加 `🔥 推荐` 金色徽章
+  - 底部加 `⚡ 出示付款码更快,推荐使用` 绿色提示条
+  - 渠道徽章:微信 / 支付宝 / 银联
+- **右侧"扫码支付"(普通弱化,业务上为 C 扫 B)**:
+  - 普通背景 + 细边框,视觉权重低
+  - 静态占位二维码 SVG(内联,与 `user-04-success` 小程序引导二维码风格一致)
+  - 渠道徽章:微信 / 支付宝(银联无主扫场景故略去)
+  - 二维码下方文案动态显示金额:`扫描二维码支付 ¥XX.XX`(代金券叠加时自动重算)
+- **用户文案**:界面中只显示"出示付款码"/"扫码支付"等业务术语,不向用户暴露"B 扫 C / C 扫 B"等内部技术标签
+
+### 技术实现
+- 抽取可复用组件 `renderScanMethods(amount, isInline)`:
+  - `amount` 决定 C 扫 B 二维码下方显示的金额
+  - `isInline=true` 时使用紧凑变体(`.scan-card--inline`),嵌入混合支付 pending 卡片内
+- 内联静态二维码 SVG 函数 `renderQRCodeSVG()`,无外部依赖(满足墨刀导入约束)
+- 混合支付整体压缩(原 22px gap → 12px,padding 22→14,图标 80→60),为内嵌扫码组件腾出空间
+- 6 套模板在 1280×720 PAD 内全部无溢出
+
+### URL 参数
+- `?method=online` 模板 A 展示双途径扫码(默认形态)
+- `?method=mixed-bl-online` / `mixed-cash-online` 自动渲染内嵌紧凑版
+
+## 2026-08-07 | 收银员屏结算页 + 用户屏支付引导页重构(支持混合支付/找零/代金券)
+
+### 业务背景
+原结算页与支付引导页只支持单一支付方式,无法覆盖实际餐厅运营中的多种场景:
+- 余额不足时需要混合支付
+- 现金支付时需要找零或差额补付
+- 代金券(原"餐券/补贴码")作为通用优惠凭证
+
+本次重构把支付方式体系升级为 **6 类支付形态 + 代金券叠加** 的统一模型,收银员屏与用户屏业务语义完全对齐。
+
+### 收银员屏 `03-checkout.html` 改造
+- **金额汇总区扩展**:新增「代金券抵扣 / 余额抵扣 / 待付补差」三行动态显示,资金构成一目了然
+- **现金 Tab 增强**:
+  - 新增「实收现金」输入框 + 6 个快捷金额按钮(¥20/50/100/200/500/Exact)
+  - 实收 ≥ 应付 → 显示**找零**金额,按钮文案 `确认收款 ¥应付 · 找零 ¥X`
+  - 实收 < 应付 → 显示**差额**金额 + 「差额用在线支付收取」按钮,进入现金+在线混合流程
+- **余额不足自动弹窗**:选「余额支付」时若余额不足,自动弹出「混合支付建议」对话框,提供「在线补差」「现金补差」二选一
+- **混合支付进度条**:进入混合态时金额汇总区顶部显示进度条,分两步展示「✅ 主支付已完成 + ⏳ 待补差」
+- **确认按钮动态切换**:单支付/找零/混合三种态切换文案与禁用状态,混合未完成时按钮禁用
+- **代金券语义统一**:原"餐券/补贴码"Tab 改名为"代金券",文案与图标统一为 🎫 代金券
+
+### 用户屏 `user-03-paying.html` 改造
+- **顶部金额条升级**:从单一应付金额扩展为分项 chip 展示(代金券/余额/现金/待付/找零),按形态动态显示
+- **6 套支付引导模板**:
+  - 模板 A `?method=online` 在线支付:大圆扫码图标 + 呼吸动效 + 支付渠道徽章
+  - 模板 B `?method=balance` 余额支付:会员卡视觉 + 余额/消费/扣款后余额展示
+  - 模板 C1 `?method=mixed-bl-online` 余额+在线:左右两栏「✅ 余额已扣 + ⏳ 请扫码补差」
+  - 模板 C2 `?method=mixed-bl-cash` 余额+现金:左右两栏「✅ 余额已扣 + ⏳ 请现金补差」
+  - 模板 C3 `?method=mixed-cash-online` 现金+在线:左右两栏「✅ 现金已收 + ⏳ 请扫码补差」
+  - 模板 D `?method=cash-change` 现金找零:大圆现金图标 + 「请等待收银员找零」+ 应付/实收/找零明细卡
+- **代金券提示条**:核销代金券后顶部金额条下方显示金色 banner,提示券号与抵扣金额
+- **演示切换器**:底部居中悬浮 7 个按钮(6 类形态 + 代金券开关),与 `user-04-success` 风格一致
+- **URL 参数双驱动**:`?method=xxx` 切换形态、`?coupon=1` 开启代金券,便于原型评审分享
+
+### 两屏业务串联
+收银员屏的支付方式状态通过业务后端同步到用户屏(原型中通过 URL 参数模拟):
+- 收银员选「余额」+ 不足弹窗选「在线补差」→ 用户屏切到 `?method=mixed-bl-online`
+- 收银员选「现金」+ 实收 100 → 用户屏切到 `?method=cash-change`,展示找零 ¥58.40
+- 收银员核销代金券 → 用户屏顶部 chip 同步显示 `🎫 券 -¥10.00`,应付金额重算
+
+### 视觉与技术细节
+- 用户屏 6 套模板在 1280×720 PAD 内全部无溢出(满足 PAD 终端禁止可见滚动条约束)
+- 含会员卡的模板(B、D)使用 `pay-panel--with-card` 紧凑变体,图标圆 120px、字号下调
+- 混合支付左右两栏卡片用 CSS 动画 `glow` 实现待付侧呼吸高亮
+- 顶部 chip 按资金类型分色:代金券金色 / 余额青色 / 现金绿色 / 待付橙色
+
 ## 2026-08-07 | U02 副屏取餐明细三栏重构
 
 ### 变更
diff --git a/other-module/canteen-device/checkout-device/user-02-checkout-sync.html b/other-module/canteen-device/checkout-device/user-02-checkout-sync.html
index 5f65a12..340dcc0 100644
--- a/other-module/canteen-device/checkout-device/user-02-checkout-sync.html
+++ b/other-module/canteen-device/checkout-device/user-02-checkout-sync.html
@@ -80,28 +80,45 @@
       color: rgba(255, 255, 255, 0.5);
       font-family: Menlo, Consolas, monospace;
     }
-    .user-card__sub {
-      font-size: 11px;
-      color: rgba(255, 255, 255, 0.55);
+    .user-card__tags {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
     }
-    .user-card__level {
-      padding: 4px 10px;
-      background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 146, 60, 0.18));
-      border: 1px solid rgba(251, 191, 36, 0.5);
-      border-radius: 12px;
-      font-size: 11px;
-      color: #fbbf24;
+    /* 用户身份标签:类型 + 会员等级(单一渐变标签)
+       - 会员用户:蓝→金渐变,后跟等级
+       - 临时用户:灰色单色
+       - 内部员工:蓝色单色 */
+    .user-card__type {
+      padding: 5px 12px;
+      border-radius: 14px;
+      font-size: 12px;
       font-weight: 700;
       text-align: center;
       line-height: 1.3;
-      flex-shrink: 0;
+      letter-spacing: 0.5px;
     }
-    .user-card__level small {
-      display: block;
-      font-size: 9px;
-      color: rgba(251, 191, 36, 0.85);
-      font-weight: 500;
-      margin-top: 1px;
+    .user-card__type--member {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.28), rgba(251, 191, 36, 0.32));
+      border: 1px solid rgba(251, 191, 36, 0.55);
+      color: #fbbf24;
+      box-shadow: 0 2px 8px rgba(251, 191, 36, 0.18);
+    }
+    .user-card__type--member .level {
+      color: #fde68a;
+      font-weight: 800;
+      margin-left: 4px;
+    }
+    .user-card__type--temp {
+      background: rgba(148, 163, 184, 0.18);
+      border: 1px solid rgba(148, 163, 184, 0.45);
+      color: #cbd5e1;
+    }
+    .user-card__type--staff {
+      background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(74, 144, 217, 0.14));
+      border: 1px solid rgba(96, 165, 250, 0.5);
+      color: #60a5fa;
     }
     .header__time {
       font-size: 13px;
@@ -158,11 +175,13 @@
       text-align: left;
       vertical-align: middle;
     }
-    /* 列宽:序号 / 餐品名称+单价 / 取餐量 / 热量 / 金额 */
+    /* 列宽:序号 / 类别 / 餐品名称 / 单价 / 取餐量 / 热量 / 金额 */
     .items-table col.col-seq    { width: 40px; }
-    .items-table col.col-name   { width: auto; }
-    .items-table col.col-weight { width: 100px; }
-    .items-table col.col-cal    { width: 110px; }
+    .items-table col.col-cat    { width: 64px; }
+    .items-table col.col-name   { width: 180px; }
+    .items-table col.col-unit   { width: 100px; }
+    .items-table col.col-weight { width: 90px; }
+    .items-table col.col-cal    { width: 100px; }
     .items-table col.col-price  { width: 92px; }
 
     .items-table thead th {
@@ -178,6 +197,7 @@
     }
     .items-table thead th.col-weight-h,
     .items-table thead th.col-cal-h { text-align: center; }
+    .items-table thead th.col-unit-h,
     .items-table thead th.col-price-h { text-align: right; }
 
     .items-table tbody td { border-bottom: 1px dashed rgba(255, 255, 255, 0.05); }
@@ -205,13 +225,35 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .cell-name small {
-      display: block;
+    /* 类别徽标:餐线 / 档口 */
+    .cell-cat {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px 0;
+      width: 48px;
+      border-radius: 4px;
       font-size: 11px;
-      color: rgba(255, 255, 255, 0.5);
+      font-weight: 700;
+      letter-spacing: 1px;
+      line-height: 1.4;
+    }
+    .cell-cat--line {
+      background: rgba(96, 165, 250, 0.18);
+      border: 1px solid rgba(96, 165, 250, 0.45);
+      color: #60a5fa;
+    }
+    .cell-cat--booth {
+      background: rgba(251, 146, 60, 0.18);
+      border: 1px solid rgba(251, 146, 60, 0.45);
+      color: #fb923c;
+    }
+    .cell-unit {
+      text-align: right;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.55);
       font-family: Menlo, Consolas, monospace;
-      font-weight: 400;
-      margin-top: 2px;
+      white-space: nowrap;
     }
     .cell-weight, .cell-cal {
       text-align: center;
@@ -286,9 +328,11 @@
       vertical-align: middle;
     }
     .items-footer td.col-seq-f    { width: 40px; text-align: left; font-size: 12px; color: rgba(255,255,255,0.55); }
-    .items-footer td.col-name-f   { width: auto; }
-    .items-footer td.col-weight-f { width: 100px; text-align: center; }
-    .items-footer td.col-cal-f    { width: 110px; text-align: center; }
+    .items-footer td.col-cat-f    { width: 64px; }
+    .items-footer td.col-name-f   { width: 180px; }
+    .items-footer td.col-unit-f   { width: 100px; }
+    .items-footer td.col-weight-f { width: 90px; text-align: center; }
+    .items-footer td.col-cal-f    { width: 100px; text-align: center; }
     .items-footer td.col-price-f  { width: 92px; text-align: right; }
     .footer-label {
       font-size: 13px;
@@ -312,12 +356,12 @@
 
     /* 右:营养 + 金额 + 二维码 */
     .side-area {
-      padding: 14px 18px;
+      padding: 12px 14px;
       background: rgba(26, 43, 74, 0.3);
       border-left: 1px solid rgba(255, 255, 255, 0.06);
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 10px;
       overflow: hidden;
     }
 
@@ -471,34 +515,39 @@
 
     /* 订单金额(中间,非常醒目) */
     .amount-card {
-      background: linear-gradient(135deg, rgba(10, 196, 168, 0.22), rgba(0, 0, 0, 0.4));
-      border: 2px solid rgba(10, 196, 168, 0.65);
+      background: linear-gradient(135deg, rgba(10, 196, 168, 0.28), rgba(0, 0, 0, 0.4));
+      border: 2px solid rgba(10, 196, 168, 0.7);
       border-radius: 14px;
-      padding: 16px;
+      padding: 14px 16px 12px;
       text-align: center;
-      box-shadow: 0 6px 24px rgba(10, 196, 168, 0.25), inset 0 0 0 1px rgba(10, 196, 168, 0.15);
+      box-shadow: 0 8px 28px rgba(10, 196, 168, 0.32), inset 0 0 0 1px rgba(10, 196, 168, 0.2);
       flex-shrink: 0;
+      position: relative;
     }
     .amount-card__label {
-      font-size: 14px;
-      color: rgba(255, 255, 255, 0.85);
-      font-weight: 600;
-      letter-spacing: 2px;
-      margin-bottom: 4px;
+      font-size: 15px;
+      color: #fff;
+      font-weight: 700;
+      letter-spacing: 4px;
+      margin-bottom: 2px;
+      text-shadow: 0 0 8px rgba(10, 196, 168, 0.4);
     }
     .amount-card__value {
-      font-size: 60px;
-      font-weight: 800;
+      font-size: 64px;
+      font-weight: 900;
       color: #0AC4A8;
       font-family: Menlo, Consolas, monospace;
       line-height: 1.05;
-      text-shadow: 0 0 32px rgba(10, 196, 168, 0.55), 0 0 8px rgba(10, 196, 168, 0.8);
+      text-shadow:
+        0 0 8px rgba(10, 196, 168, 0.9),
+        0 0 24px rgba(10, 196, 168, 0.7),
+        0 0 48px rgba(10, 196, 168, 0.45);
       letter-spacing: 1px;
     }
     .amount-card__sub {
       font-size: 12px;
-      color: rgba(255, 255, 255, 0.55);
-      margin-top: 6px;
+      color: rgba(255, 255, 255, 0.6);
+      margin-top: 4px;
     }
     .amount-card__sub strong { color: #4ade80; }
 
@@ -507,19 +556,19 @@
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 12px;
-      padding: 12px 14px;
+      padding: 10px 12px;
       display: flex;
       align-items: center;
-      gap: 14px;
+      gap: 12px;
       flex: 1;
       min-height: 0;
     }
     .qr-card__code {
-      width: 120px;
-      height: 120px;
+      width: 104px;
+      height: 104px;
       background: #fff;
       border-radius: 8px;
-      padding: 6px;
+      padding: 5px;
       flex-shrink: 0;
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
     }
@@ -529,7 +578,7 @@
       min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: 6px;
+      gap: 5px;
     }
     .qr-card__title {
       font-size: 14px;
@@ -570,11 +619,11 @@
             <span class="user-card__name">张*明</span>
             <span class="user-card__empno">EMP002346</span>
           </div>
-          <span class="user-card__sub">研发中心 · 二荤餐线</span>
         </div>
-        <div class="user-card__level">
-          金牌会员
-          <small>LV5</small>
+        <div class="user-card__tags">
+          <div class="user-card__type user-card__type--member">
+            会员用户<span class="level">· 金牌 LV5</span>
+          </div>
         </div>
       </div>
       <div class="header__time" id="nowTime">2026-08-06 12:30:45</div>
@@ -587,14 +636,16 @@
       <div class="items-area">
         <div class="items-area__title">
           &#x1F6CD;&#xFE0F; 餐品明细
-          <span class="items-area__title-count">共 5 件</span>
+          <span class="items-area__title-count">共 13 件</span>
         </div>
 
         <!-- 表头(固定) -->
         <table class="items-table">
           <colgroup>
             <col class="col-seq">
+            <col class="col-cat">
             <col class="col-name">
+            <col class="col-unit">
             <col class="col-weight">
             <col class="col-cal">
             <col class="col-price">
@@ -602,7 +653,9 @@
           <thead>
             <tr>
               <th>#</th>
-              <th>餐品名称 / 单价</th>
+              <th>类别</th>
+              <th>餐品名称</th>
+              <th class="col-unit-h">单价</th>
               <th class="col-weight-h">取餐量</th>
               <th class="col-cal-h">热量</th>
               <th class="col-price-h">金额</th>
@@ -618,7 +671,9 @@
               <table class="items-table">
                 <colgroup>
                   <col class="col-seq">
+                  <col class="col-cat">
                   <col class="col-name">
+                  <col class="col-unit">
                   <col class="col-weight">
                   <col class="col-cal">
                   <col class="col-price">
@@ -626,46 +681,130 @@
                 <tbody>
                   <tr>
                     <td><span class="cell-seq">1</span></td>
-                    <td><div class="cell-name">清炒时蔬<small>¥4.00/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">清炒时蔬</div></td>
+                    <td class="cell-unit">¥4.00/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">150g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">45 kcal</span></td>
                     <td class="cell-price">¥6.00</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">2</span></td>
-                    <td><div class="cell-name">米饭<small>¥1.60/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">米饭</div></td>
+                    <td class="cell-unit">¥1.60/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">250g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">360 kcal</span></td>
                     <td class="cell-price">¥4.00</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">3</span></td>
-                    <td><div class="cell-name">红烧肉<small>¥12.00/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">红烧肉</div></td>
+                    <td class="cell-unit">¥12.00/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">180g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">486 kcal</span></td>
                     <td class="cell-price">¥21.60</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">4</span></td>
-                    <td><div class="cell-name">鱼香肉丝<small>¥7.50/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">鱼香肉丝</div></td>
+                    <td class="cell-unit">¥7.50/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">160g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">336 kcal</span></td>
                     <td class="cell-price">¥12.00</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">5</span></td>
-                    <td><div class="cell-name">冬瓜排骨汤<small>¥1.00/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">冬瓜排骨汤</div></td>
+                    <td class="cell-unit">¥1.00/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">300g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">336 kcal</span></td>
                     <td class="cell-price">¥3.00</td>
                   </tr>
+                  <tr>
+                    <td><span class="cell-seq">6</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">番茄炒蛋</div></td>
+                    <td class="cell-unit">¥5.50/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">140g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">196 kcal</span></td>
+                    <td class="cell-price">¥7.70</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">7</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">蒸南瓜</div></td>
+                    <td class="cell-unit">¥2.80/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">120g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">48 kcal</span></td>
+                    <td class="cell-price">¥3.36</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">8</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">凉拌黄瓜</div></td>
+                    <td class="cell-unit">¥3.20/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">100g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">32 kcal</span></td>
+                    <td class="cell-price">¥3.20</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">9</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">麻婆豆腐</div></td>
+                    <td class="cell-unit">¥3.50/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">80g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">80 kcal</span></td>
+                    <td class="cell-price">¥2.80</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">10</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">拌三丝</div></td>
+                    <td class="cell-unit">¥2.50/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">70g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">35 kcal</span></td>
+                    <td class="cell-price">¥1.75</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">11</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">蒸蛋羹</div></td>
+                    <td class="cell-unit">¥3.00/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">80g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">60 kcal</span></td>
+                    <td class="cell-price">¥2.40</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">12</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">卤豆干</div></td>
+                    <td class="cell-unit">¥2.80/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">60g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">50 kcal</span></td>
+                    <td class="cell-price">¥1.68</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">13</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">紫菜蛋花汤</div></td>
+                    <td class="cell-unit">¥1.20/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">90g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">25 kcal</span></td>
+                    <td class="cell-price">¥1.08</td>
+                  </tr>
                 </tbody>
               </table>
               <!-- 表格2(无缝衔接:重复一份数据) -->
               <table class="items-table">
                 <colgroup>
                   <col class="col-seq">
+                  <col class="col-cat">
                   <col class="col-name">
+                  <col class="col-unit">
                   <col class="col-weight">
                   <col class="col-cal">
                   <col class="col-price">
@@ -673,39 +812,121 @@
                 <tbody>
                   <tr>
                     <td><span class="cell-seq">1</span></td>
-                    <td><div class="cell-name">清炒时蔬<small>¥4.00/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">清炒时蔬</div></td>
+                    <td class="cell-unit">¥4.00/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">150g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">45 kcal</span></td>
                     <td class="cell-price">¥6.00</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">2</span></td>
-                    <td><div class="cell-name">米饭<small>¥1.60/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">米饭</div></td>
+                    <td class="cell-unit">¥1.60/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">250g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">360 kcal</span></td>
                     <td class="cell-price">¥4.00</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">3</span></td>
-                    <td><div class="cell-name">红烧肉<small>¥12.00/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">红烧肉</div></td>
+                    <td class="cell-unit">¥12.00/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">180g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">486 kcal</span></td>
                     <td class="cell-price">¥21.60</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">4</span></td>
-                    <td><div class="cell-name">鱼香肉丝<small>¥7.50/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">鱼香肉丝</div></td>
+                    <td class="cell-unit">¥7.50/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">160g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">336 kcal</span></td>
                     <td class="cell-price">¥12.00</td>
                   </tr>
                   <tr>
                     <td><span class="cell-seq">5</span></td>
-                    <td><div class="cell-name">冬瓜排骨汤<small>¥1.00/100g</small></div></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">冬瓜排骨汤</div></td>
+                    <td class="cell-unit">¥1.00/100g</td>
                     <td class="cell-weight"><span class="cell-weight__pill">300g</span></td>
                     <td class="cell-cal"><span class="cell-cal__pill">336 kcal</span></td>
                     <td class="cell-price">¥3.00</td>
                   </tr>
+                  <tr>
+                    <td><span class="cell-seq">6</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">番茄炒蛋</div></td>
+                    <td class="cell-unit">¥5.50/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">140g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">196 kcal</span></td>
+                    <td class="cell-price">¥7.70</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">7</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">蒸南瓜</div></td>
+                    <td class="cell-unit">¥2.80/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">120g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">48 kcal</span></td>
+                    <td class="cell-price">¥3.36</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">8</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">凉拌黄瓜</div></td>
+                    <td class="cell-unit">¥3.20/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">100g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">32 kcal</span></td>
+                    <td class="cell-price">¥3.20</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">9</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">麻婆豆腐</div></td>
+                    <td class="cell-unit">¥3.50/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">80g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">80 kcal</span></td>
+                    <td class="cell-price">¥2.80</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">10</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">拌三丝</div></td>
+                    <td class="cell-unit">¥2.50/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">70g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">35 kcal</span></td>
+                    <td class="cell-price">¥1.75</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">11</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">蒸蛋羹</div></td>
+                    <td class="cell-unit">¥3.00/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">80g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">60 kcal</span></td>
+                    <td class="cell-price">¥2.40</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">12</span></td>
+                    <td><span class="cell-cat cell-cat--booth">档口</span></td>
+                    <td><div class="cell-name">卤豆干</div></td>
+                    <td class="cell-unit">¥2.80/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">60g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">50 kcal</span></td>
+                    <td class="cell-price">¥1.68</td>
+                  </tr>
+                  <tr>
+                    <td><span class="cell-seq">13</span></td>
+                    <td><span class="cell-cat cell-cat--line">餐线</span></td>
+                    <td><div class="cell-name">紫菜蛋花汤</div></td>
+                    <td class="cell-unit">¥1.20/100g</td>
+                    <td class="cell-weight"><span class="cell-weight__pill">90g</span></td>
+                    <td class="cell-cal"><span class="cell-cal__pill">25 kcal</span></td>
+                    <td class="cell-price">¥1.08</td>
+                  </tr>
                 </tbody>
               </table>
             </div>
@@ -717,25 +938,29 @@
           <table>
             <colgroup>
               <col style="width:40px">
-              <col>
+              <col style="width:64px">
+              <col style="width:180px">
+              <col style="width:100px">
+              <col style="width:90px">
               <col style="width:100px">
-              <col style="width:110px">
               <col style="width:92px">
             </colgroup>
             <tbody>
               <tr>
                 <td class="col-seq-f"></td>
+                <td class="col-cat-f"></td>
                 <td class="col-name-f">
                   <span class="footer-label">合计</span>
                 </td>
+                <td class="col-unit-f"></td>
                 <td class="col-weight-f">
-                  <span class="footer-value">1040g</span>
+                  <span class="footer-value">1780g</span>
                 </td>
                 <td class="col-cal-f">
-                  <span class="footer-value footer-value--cal">1563 kcal</span>
+                  <span class="footer-value footer-value--cal">2089 kcal</span>
                 </td>
                 <td class="col-price-f">
-                  <span class="footer-amount">¥46.60</span>
+                  <span class="footer-amount">¥70.57</span>
                 </td>
               </tr>
             </tbody>
@@ -818,8 +1043,8 @@
         <!-- 订单金额(醒目) -->
         <div class="amount-card">
           <div class="amount-card__label">应付金额</div>
-          <div class="amount-card__value">¥41.60</div>
-          <div class="amount-card__sub">原价 <strong>¥46.60</strong> · 优惠金额 ¥5.00</div>
+          <div class="amount-card__value">¥65.57</div>
+          <div class="amount-card__sub">原价 <strong>¥70.57</strong> · 优惠金额 ¥5.00</div>
         </div>
 
         <!-- 支付二维码 -->
diff --git a/other-module/canteen-device/checkout-device/user-03-paying.html b/other-module/canteen-device/checkout-device/user-03-paying.html
index c5eae59..aa769ce 100644
--- a/other-module/canteen-device/checkout-device/user-03-paying.html
+++ b/other-module/canteen-device/checkout-device/user-03-paying.html
@@ -31,7 +31,7 @@
 
     /* 顶部金额条 */
     .header {
-      padding: 24px 36px 20px;
+      padding: 22px 36px 18px;
       background: rgba(26, 43, 74, 0.5);
       border-bottom: 1px solid rgba(255, 255, 255, 0.06);
       display: flex;
@@ -39,7 +39,7 @@
       align-items: center;
       flex-shrink: 0;
     }
-    .header__left { display: flex; align-items: baseline; gap: 12px; }
+    .header__left { display: flex; align-items: baseline; gap: 14px; }
     .header__label {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.55);
@@ -51,6 +51,44 @@
       font-family: Menlo, Consolas, monospace;
       line-height: 1;
     }
+    /* 资金构成分项 */
+    .header__breakdown {
+      display: flex;
+      gap: 10px;
+      margin-left: 16px;
+      padding-left: 16px;
+      border-left: 1px solid rgba(255, 255, 255, 0.12);
+    }
+    .header__chip {
+      padding: 5px 12px;
+      border-radius: 14px;
+      font-size: 12px;
+      font-weight: 600;
+      font-family: Menlo, Consolas, monospace;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .header__chip--coupon {
+      background: rgba(251, 191, 36, 0.15);
+      border: 1px solid rgba(251, 191, 36, 0.4);
+      color: #fbbf24;
+    }
+    .header__chip--balance {
+      background: rgba(10, 196, 168, 0.12);
+      border: 1px solid rgba(10, 196, 168, 0.35);
+      color: #0AC4A8;
+    }
+    .header__chip--diff {
+      background: rgba(251, 146, 60, 0.15);
+      border: 1px solid rgba(251, 146, 60, 0.4);
+      color: #fb923c;
+    }
+    .header__chip--cash {
+      background: rgba(82, 196, 26, 0.12);
+      border: 1px solid rgba(82, 196, 26, 0.35);
+      color: #4ade80;
+    }
     .header__right {
       display: flex;
       align-items: center;
@@ -76,17 +114,32 @@
       50% { opacity: 0.5; transform: scale(1.3); }
     }
 
+    /* 代金券已应用提示条 */
+    .coupon-banner {
+      display: none;
+      padding: 8px 36px;
+      background: linear-gradient(90deg, rgba(251, 191, 36, 0.18), rgba(251, 146, 60, 0.08));
+      border-bottom: 1px solid rgba(251, 191, 36, 0.25);
+      font-size: 13px;
+      color: #fbbf24;
+      font-weight: 600;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+    .coupon-banner.show { display: flex; }
+
     /* 主体 */
     .body {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 30px 60px;
+      padding: 20px 60px 70px;
       overflow: hidden;
     }
 
-    /* 支付方式面板 */
+    /* ============ 通用:单支付引导面板(模板A/B/D 复用骨架) ============ */
     .pay-panel {
       width: 100%;
       max-width: 720px;
@@ -94,13 +147,17 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: 18px;
     }
-
-    /* 支付图标动画区 */
+    /* 含会员卡的紧凑变体:模板B、模板D */
+    .pay-panel--with-card { gap: 12px; }
+    .pay-panel--with-card .pay-icon-area { width: 120px; height: 120px; }
+    .pay-panel--with-card .pay-icon-area__icon { font-size: 60px; }
+    .pay-panel--with-card .pay-status__title { font-size: 24px; letter-spacing: 1px; }
+    .pay-panel--with-card .pay-status__hint { font-size: 13px; }
     .pay-icon-area {
-      width: 200px;
-      height: 200px;
+      width: 160px;
+      height: 160px;
       border-radius: 50%;
       background: radial-gradient(circle at 50% 50%, rgba(74, 144, 217, 0.25), rgba(74, 144, 217, 0.05) 70%);
       border: 2px solid rgba(74, 144, 217, 0.35);
@@ -110,7 +167,6 @@
       position: relative;
       box-shadow: 0 0 60px rgba(74, 144, 217, 0.25);
     }
-    /* 外圈呼吸 */
     .pay-icon-area::before {
       content: "";
       position: absolute;
@@ -133,14 +189,28 @@
       100% { opacity: 0; transform: scale(1.2); }
     }
     .pay-icon-area__icon {
-      font-size: 100px;
+      font-size: 80px;
       filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
     }
+    /* 余额/现金主题色变体 */
+    .pay-icon-area--balance {
+      background: radial-gradient(circle at 50% 50%, rgba(10, 196, 168, 0.28), rgba(10, 196, 168, 0.05) 70%);
+      border-color: rgba(10, 196, 168, 0.45);
+      box-shadow: 0 0 60px rgba(10, 196, 168, 0.3);
+    }
+    .pay-icon-area--balance::before { border-color: rgba(10, 196, 168, 0.22); }
+    .pay-icon-area--balance::after { border-color: rgba(10, 196, 168, 0.12); }
+    .pay-icon-area--cash {
+      background: radial-gradient(circle at 50% 50%, rgba(82, 196, 26, 0.28), rgba(82, 196, 26, 0.05) 70%);
+      border-color: rgba(82, 196, 26, 0.45);
+      box-shadow: 0 0 60px rgba(82, 196, 26, 0.28);
+    }
+    .pay-icon-area--cash::before { border-color: rgba(82, 196, 26, 0.22); }
+    .pay-icon-area--cash::after { border-color: rgba(82, 196, 26, 0.12); }
 
-    /* 支付状态文字 */
     .pay-status { display: flex; flex-direction: column; gap: 10px; }
     .pay-status__title {
-      font-size: 36px;
+      font-size: 34px;
       font-weight: 700;
       color: #fff;
       letter-spacing: 2px;
@@ -150,8 +220,6 @@
       color: rgba(255, 255, 255, 0.65);
       line-height: 1.6;
     }
-
-    /* 额度提示(在线支付/餐券) */
     .pay-method-tip {
       display: inline-flex;
       align-items: center;
@@ -163,48 +231,916 @@
       font-size: 13px;
       color: #4ade80;
     }
+
+    /* ============ 模板B:会员卡视觉 ============ */
+    .member-card {
+      width: 380px;
+      padding: 22px 26px;
+      background: linear-gradient(135deg, #1a2b4a 0%, #2a3d6a 50%, #0e1326 100%);
+      border: 1px solid rgba(251, 191, 36, 0.4);
+      border-radius: 16px;
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(251, 191, 36, 0.08);
+      position: relative;
+      overflow: hidden;
+    }
+    .member-card::before {
+      content: "";
+      position: absolute;
+      top: -60px;
+      right: -60px;
+      width: 200px;
+      height: 200px;
+      background: radial-gradient(circle, rgba(251, 191, 36, 0.25), transparent 70%);
+      pointer-events: none;
+    }
+    .member-card__head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 14px;
+      border-bottom: 1px dashed rgba(251, 191, 36, 0.25);
+      margin-bottom: 14px;
+    }
+    .member-card__name {
+      font-size: 18px;
+      font-weight: 700;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .member-card__level {
+      padding: 4px 12px;
+      background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 146, 60, 0.2));
+      border: 1px solid rgba(251, 191, 36, 0.55);
+      border-radius: 12px;
+      font-size: 11px;
+      color: #fbbf24;
+      font-weight: 700;
+    }
+    .member-card__row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      padding: 8px 0;
+    }
+    .member-card__row + .member-card__row {
+      border-top: 1px dashed rgba(255, 255, 255, 0.08);
+    }
+    .member-card__label {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .member-card__value {
+      font-size: 14px;
+      color: #fff;
+      font-weight: 600;
+      font-family: Menlo, Consolas, monospace;
+    }
+    .member-card__value--highlight {
+      font-size: 26px;
+      color: #0AC4A8;
+      font-weight: 800;
+    }
+    .member-card__value--expense {
+      color: #fb923c;
+    }
+
+    /* ============ 模板C:混合支付分屏 ============ */
+    .mixed-panel {
+      width: 100%;
+      max-width: 880px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .mixed-head {
+      text-align: center;
+      margin-bottom: 0;
+    }
+    .mixed-head__title {
+      font-size: 22px;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: 1px;
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 6px 18px;
+      background: linear-gradient(90deg, rgba(251, 146, 60, 0.18), rgba(74, 144, 217, 0.08));
+      border: 1px solid rgba(251, 146, 60, 0.35);
+      border-radius: 22px;
+    }
+    .mixed-steps {
+      display: grid;
+      grid-template-columns: 1fr 50px 1fr;
+      gap: 10px;
+      align-items: stretch;
+    }
+    .mixed-step {
+      padding: 14px 16px;
+      border-radius: 14px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      text-align: center;
+    }
+    .mixed-step--done {
+      background: linear-gradient(135deg, rgba(82, 196, 26, 0.15), rgba(10, 196, 168, 0.08));
+      border: 1px solid rgba(82, 196, 26, 0.4);
+    }
+    .mixed-step--pending {
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.15), rgba(10, 196, 168, 0.08));
+      border: 1px solid rgba(74, 144, 217, 0.4);
+      position: relative;
+    }
+    .mixed-step--pending::before {
+      content: "";
+      position: absolute;
+      inset: -2px;
+      border-radius: 14px;
+      border: 2px solid rgba(74, 144, 217, 0.5);
+      animation: glow 1.8s ease-in-out infinite;
+      pointer-events: none;
+    }
+    @keyframes glow {
+      0%, 100% { opacity: 0.4; transform: scale(1); }
+      50% { opacity: 0.9; transform: scale(1.015); }
+    }
+    .mixed-step__icon {
+      font-size: 40px;
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .mixed-step--done .mixed-step__icon {
+      background: rgba(82, 196, 26, 0.2);
+      border: 1px solid rgba(82, 196, 26, 0.4);
+    }
+    .mixed-step--pending .mixed-step__icon {
+      background: rgba(74, 144, 217, 0.2);
+      border: 1px solid rgba(74, 144, 217, 0.45);
+    }
+    .mixed-step__title {
+      font-size: 16px;
+      font-weight: 700;
+      color: #fff;
+    }
+    .mixed-step__hint {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.65);
+      line-height: 1.4;
+    }
+    .mixed-step__amount {
+      font-size: 22px;
+      font-weight: 800;
+      font-family: Menlo, Consolas, monospace;
+      padding: 2px 12px;
+      border-radius: 8px;
+    }
+    .mixed-step--done .mixed-step__amount {
+      background: rgba(82, 196, 26, 0.18);
+      color: #4ade80;
+    }
+    .mixed-step--pending .mixed-step__amount {
+      background: rgba(74, 144, 217, 0.18);
+      color: #60a5fa;
+    }
+    .mixed-step__status {
+      font-size: 11px;
+      padding: 3px 10px;
+      border-radius: 10px;
+      letter-spacing: 0.5px;
+    }
+    .mixed-step--done .mixed-step__status {
+      background: rgba(82, 196, 26, 0.2);
+      color: #4ade80;
+    }
+    .mixed-step--pending .mixed-step__status {
+      background: rgba(74, 144, 217, 0.2);
+      color: #60a5fa;
+    }
+    .mixed-connector {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      color: rgba(255, 255, 255, 0.4);
+    }
+
+    /* ============ 在线支付:双途径扫码(B扫C / C扫B) ============ */
+    .scan-methods {
+      width: 100%;
+      max-width: 880px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 18px;
+    }
+    .scan-card {
+      padding: 18px 20px 20px;
+      border-radius: 14px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      text-align: center;
+      position: relative;
+      transition: all 0.3s;
+    }
+    /* B 扫 C:高亮推荐(青蓝主色) */
+    .scan-card--b-scan-c {
+      background: linear-gradient(135deg, rgba(74, 144, 217, 0.2), rgba(10, 196, 168, 0.12));
+      border: 2px solid rgba(74, 144, 217, 0.55);
+      box-shadow: 0 8px 28px rgba(74, 144, 217, 0.25), 0 0 0 4px rgba(74, 144, 217, 0.08);
+    }
+    /* C 扫 B:弱化(普通背景) */
+    .scan-card--c-scan-b {
+      background: rgba(26, 43, 74, 0.45);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .scan-card__head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 2px;
+    }
+    .scan-card__title {
+      font-size: 16px;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: 1px;
+    }
+    .scan-card__title--muted { color: rgba(255, 255, 255, 0.75); }
+    /* "推荐"徽章 */
+    .scan-card__badge {
+      padding: 2px 8px;
+      background: linear-gradient(135deg, #fbbf24, #fb923c);
+      color: #1a1a1a;
+      font-size: 10px;
+      font-weight: 800;
+      border-radius: 8px;
+      letter-spacing: 0.5px;
+    }
+    /* 途径标识(B扫C / C扫B) */
+    .scan-card__code {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.5);
+      padding: 2px 8px;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      font-family: Menlo, Consolas, monospace;
+      letter-spacing: 0.5px;
+    }
+    .scan-card__icon-wrap {
+      width: 110px;
+      height: 110px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      margin: 4px 0;
+    }
+    .scan-card--b-scan-c .scan-card__icon-wrap {
+      background: radial-gradient(circle, rgba(74, 144, 217, 0.3), rgba(74, 144, 217, 0.08) 70%);
+      border: 2px solid rgba(74, 144, 217, 0.5);
+      box-shadow: 0 0 36px rgba(74, 144, 217, 0.35);
+    }
+    .scan-card--c-scan-b .scan-card__icon-wrap {
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      width: 124px;
+      height: 124px;
+      border-radius: 12px;
+      padding: 8px;
+    }
+    .scan-card__icon {
+      font-size: 56px;
+      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
+    }
+    .scan-card__qr {
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      border-radius: 6px;
+      padding: 4px;
+    }
+    .scan-card__hint {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 1.5;
+      max-width: 240px;
+    }
+    .scan-card__hint strong {
+      color: #fff;
+    }
+    .scan-card__channels {
+      display: flex;
+      gap: 6px;
+      margin-top: 2px;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .scan-card__channel {
+      padding: 3px 9px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+      background: rgba(255, 255, 255, 0.06);
+      color: rgba(255, 255, 255, 0.75);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .scan-card__channel--wechat { color: #4ade80; border-color: rgba(82, 196, 26, 0.35); background: rgba(82, 196, 26, 0.1); }
+    .scan-card__channel--alipay { color: #60a5fa; border-color: rgba(74, 144, 217, 0.35); background: rgba(74, 144, 217, 0.1); }
+    .scan-card__channel--unionpay { color: #fb923c; border-color: rgba(251, 146, 60, 0.35); background: rgba(251, 146, 60, 0.1); }
+    /* 推荐提示条(底部) */
+    .scan-card__recommend-tip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 14px;
+      background: linear-gradient(90deg, rgba(82, 196, 26, 0.18), rgba(10, 196, 168, 0.1));
+      border: 1px solid rgba(82, 196, 26, 0.4);
+      border-radius: 18px;
+      font-size: 12px;
+      color: #4ade80;
+      font-weight: 600;
+    }
+    /* 混合支付中:差额扫码(嵌入到 mixed-step 的 pending 卡片内,极致紧凑) */
+    .scan-card--inline {
+      padding: 8px 6px;
+      gap: 3px;
+      background: rgba(0, 0, 0, 0.25);
+      border: 1px dashed rgba(74, 144, 217, 0.4);
+      margin-top: 4px;
+      border-radius: 10px;
+    }
+    .scan-card--inline .scan-card__head { gap: 4px; margin-bottom: 0; }
+    .scan-card--inline .scan-card__title { font-size: 12px; }
+    .scan-card--inline .scan-card__badge { font-size: 9px; padding: 1px 6px; }
+    .scan-card--inline .scan-card__code { font-size: 9px; padding: 1px 5px; }
+    .scan-card--inline .scan-card__icon-wrap {
+      width: 54px; height: 54px;
+      border-width: 1px;
+      box-shadow: none;
+      margin: 0;
+    }
+    .scan-card--inline .scan-card__icon { font-size: 26px; }
+    .scan-card--inline .scan-card__qr-wrap {
+      width: 54px; height: 54px;
+      background: #fff;
+      border-radius: 4px;
+      padding: 2px;
+      margin: 0;
+    }
+    .scan-card--inline .scan-card__hint { font-size: 10px; max-width: 100%; }
+    .scan-card--inline .scan-card__channels { gap: 3px; margin-top: 0; }
+    .scan-card--inline .scan-card__channel { font-size: 9px; padding: 1px 6px; }
+
+    /* ============ 演示切换器 ============ */
+    .demo-switcher {
+      position: absolute;
+      bottom: 14px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      padding: 8px;
+      max-width: 1100px;
+      background: rgba(0, 0, 0, 0.55);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 18px;
+      backdrop-filter: blur(8px);
+      justify-content: center;
+    }
+    .demo-switcher__btn {
+      padding: 5px 12px;
+      background: transparent;
+      border: none;
+      border-radius: 14px;
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      transition: all 0.25s;
+      font-family: inherit;
+      white-space: nowrap;
+    }
+    .demo-switcher__btn:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.06);
+    }
+    .demo-switcher__btn.active {
+      background: rgba(74, 144, 217, 0.4);
+      color: #fff;
+      box-shadow: 0 2px 8px rgba(74, 144, 217, 0.3);
+    }
+    .demo-switcher__divider {
+      width: 1px;
+      background: rgba(255, 255, 255, 0.15);
+      margin: 2px 4px;
+    }
+    .demo-switcher__toggle {
+      padding: 5px 12px;
+      background: rgba(251, 191, 36, 0.15);
+      border: 1px solid rgba(251, 191, 36, 0.3);
+      border-radius: 14px;
+      font-size: 11px;
+      color: #fbbf24;
+      cursor: pointer;
+      transition: all 0.25s;
+      font-family: inherit;
+    }
+    .demo-switcher__toggle.on {
+      background: rgba(251, 191, 36, 0.4);
+      color: #fff;
+      box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
+    }
   </style>
 </head>
 <body>
 
   <div class="device-frame">
 
+    <!-- 演示切换器(原型展示用,实际部署可移除) -->
+    <div class="demo-switcher">
+      <button class="demo-switcher__btn active" data-method="online">在线支付</button>
+      <button class="demo-switcher__btn" data-method="balance">余额支付</button>
+      <button class="demo-switcher__btn" data-method="mixed-bl-online">余额+在线</button>
+      <button class="demo-switcher__btn" data-method="mixed-bl-cash">余额+现金</button>
+      <button class="demo-switcher__btn" data-method="mixed-cash-online">现金+在线</button>
+      <button class="demo-switcher__btn" data-method="cash-change">现金找零</button>
+      <span class="demo-switcher__divider"></span>
+      <button class="demo-switcher__toggle" id="couponToggle">代金券</button>
+    </div>
+
     <!-- 顶部金额条 -->
     <div class="header">
       <div class="header__left">
         <span class="header__label">应付金额</span>
-        <span class="header__amount">¥41.60</span>
+        <span class="header__amount" id="hdAmount">&#xFFE5;41.60</span>
+        <div class="header__breakdown" id="hdBreakdown"></div>
       </div>
       <div class="header__right">
         <span class="header__right__dot"></span>
-        <span>等待支付中</span>
+        <span id="hdStatus">等待支付中</span>
       </div>
     </div>
 
+    <!-- 代金券已应用提示条 -->
+    <div class="coupon-banner" id="couponBanner">
+      &#x1F3AB; 代金券已应用 · 抵扣 <strong id="couponBannerAmt">&#xFFE5;10.00</strong> · 券号 MQ202608-A47H9X
+    </div>
+
     <!-- 主体 -->
-    <div class="body">
-
-      <!-- 当前支付方式:在线支付(扫码) -->
-      <div class="pay-panel" id="payPanel">
-        <div class="pay-icon-area">
-          <span class="pay-icon-area__icon" id="payIcon">&#x1F4F1;</span>
-        </div>
-
-        <div class="pay-status">
-          <div class="pay-status__title" id="payTitle">请出示付款码</div>
-          <div class="pay-status__hint" id="payHint">
-            打开微信/支付宝,将付款码对准扫码器
-          </div>
-        </div>
-
-        <div class="pay-method-tip" id="payTip">
-          &#x1F4F1; 支持微信 / 支付宝 / 银联云闪付
-        </div>
-      </div>
-
+    <div class="body" id="body">
+      <!-- 模板内容由 JS 注入 -->
     </div>
 
   </div>
 
+  <script>
+    /* ==================== 订单数据(与收银员屏保持一致) ==================== */
+    var ORDER_TOTAL = 46.60;
+    var ORDER_DISCOUNT = 5.00;       /* 企业补贴 */
+    var ORDER_PAYABLE = ORDER_TOTAL - ORDER_DISCOUNT;  /* 41.60 */
+    var COUPON_VALUE = 10.00;
+    var USER_BALANCE = 128.50;        /* 真实余额(用于余额支付模板B) */
+    var USER_LEVEL = '金牌会员 LV5';
+    var USER_NAME = '张*明';
+    /* 混合支付演示余额(低于应付,模拟余额不足场景) */
+    var DEMO_BALANCE_FOR_MIXED = 20.00;
+    /* 现金+在线混合的演示现金收入比例 */
+    var DEMO_CASH_RATIO = 0.6;
+    /* 现金找零的演示实收金额 */
+    var DEMO_CASH_RECEIVED = 50.00;
+
+    /* 当前形态:online | balance | mixed-bl-online | mixed-bl-cash | mixed-cash-online | cash-change */
+    var currentMethod = 'online';
+    var couponApplied = false;
+
+    /* 计算应付(考虑代金券) */
+    function getEffectivePayable() {
+      return couponApplied ? Math.max(0, ORDER_PAYABLE - COUPON_VALUE) : ORDER_PAYABLE;
+    }
+
+    /* ============ 内联静态占位二维码 SVG(复用 user-04-success 风格) ============ */
+    function renderQRCodeSVG() {
+      return ''
+        + '<svg class="scan-card__qr" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">'
+        +   '<rect x="0" y="0" width="64" height="64" fill="#fff"/>'
+        +   '<g fill="#0e1326">'
+        +     '<rect x="4" y="4" width="14" height="14"/>'
+        +     '<rect x="6" y="6" width="10" height="10" fill="#fff"/>'
+        +     '<rect x="8" y="8" width="6" height="6" fill="#0e1326"/>'
+        +     '<rect x="46" y="4" width="14" height="14"/>'
+        +     '<rect x="48" y="6" width="10" height="10" fill="#fff"/>'
+        +     '<rect x="50" y="8" width="6" height="6" fill="#0e1326"/>'
+        +     '<rect x="4" y="46" width="14" height="14"/>'
+        +     '<rect x="6" y="48" width="10" height="10" fill="#fff"/>'
+        +     '<rect x="8" y="50" width="6" height="6" fill="#0e1326"/>'
+        +     '<rect x="22" y="6" width="2" height="2"/>'
+        +     '<rect x="26" y="6" width="2" height="2"/>'
+        +     '<rect x="30" y="6" width="2" height="2"/>'
+        +     '<rect x="38" y="6" width="2" height="2"/>'
+        +     '<rect x="22" y="10" width="2" height="2"/>'
+        +     '<rect x="34" y="10" width="2" height="2"/>'
+        +     '<rect x="22" y="14" width="6" height="2"/>'
+        +     '<rect x="32" y="14" width="2" height="2"/>'
+        +     '<rect x="38" y="14" width="2" height="2"/>'
+        +     '<rect x="6" y="22" width="2" height="2"/>'
+        +     '<rect x="10" y="22" width="2" height="2"/>'
+        +     '<rect x="14" y="22" width="2" height="2"/>'
+        +     '<rect x="22" y="22" width="2" height="2"/>'
+        +     '<rect x="26" y="22" width="6" height="2"/>'
+        +     '<rect x="34" y="22" width="2" height="2"/>'
+        +     '<rect x="42" y="22" width="2" height="2"/>'
+        +     '<rect x="50" y="22" width="2" height="2"/>'
+        +     '<rect x="54" y="22" width="2" height="2"/>'
+        +     '<rect x="6" y="26" width="2" height="2"/>'
+        +     '<rect x="14" y="26" width="2" height="2"/>'
+        +     '<rect x="22" y="26" width="2" height="2"/>'
+        +     '<rect x="30" y="26" width="2" height="2"/>'
+        +     '<rect x="38" y="26" width="2" height="2"/>'
+        +     '<rect x="46" y="26" width="2" height="2"/>'
+        +     '<rect x="54" y="26" width="2" height="2"/>'
+        +     '<rect x="10" y="30" width="2" height="2"/>'
+        +     '<rect x="18" y="30" width="2" height="2"/>'
+        +     '<rect x="26" y="30" width="2" height="2"/>'
+        +     '<rect x="34" y="30" width="2" height="2"/>'
+        +     '<rect x="42" y="30" width="2" height="2"/>'
+        +     '<rect x="50" y="30" width="2" height="2"/>'
+        +     '<rect x="58" y="30" width="2" height="2"/>'
+        +     '<rect x="6" y="34" width="2" height="2"/>'
+        +     '<rect x="14" y="34" width="2" height="2"/>'
+        +     '<rect x="22" y="34" width="2" height="2"/>'
+        +     '<rect x="30" y="34" width="6" height="2"/>'
+        +     '<rect x="42" y="34" width="2" height="2"/>'
+        +     '<rect x="50" y="34" width="2" height="2"/>'
+        +     '<rect x="22" y="38" width="2" height="2"/>'
+        +     '<rect x="26" y="38" width="2" height="2"/>'
+        +     '<rect x="34" y="38" width="2" height="2"/>'
+        +     '<rect x="42" y="38" width="2" height="2"/>'
+        +     '<rect x="46" y="38" width="2" height="2"/>'
+        +     '<rect x="54" y="38" width="2" height="2"/>'
+        +     '<rect x="22" y="42" width="6" height="2"/>'
+        +     '<rect x="34" y="42" width="2" height="2"/>'
+        +     '<rect x="42" y="42" width="2" height="2"/>'
+        +     '<rect x="50" y="42" width="6" height="2"/>'
+        +     '<rect x="22" y="46" width="2" height="2"/>'
+        +     '<rect x="30" y="46" width="2" height="2"/>'
+        +     '<rect x="22" y="50" width="2" height="2"/>'
+        +     '<rect x="26" y="50" width="2" height="2"/>'
+        +     '<rect x="34" y="50" width="2" height="2"/>'
+        +     '<rect x="42" y="50" width="2" height="2"/>'
+        +     '<rect x="46" y="50" width="2" height="2"/>'
+        +     '<rect x="54" y="50" width="2" height="2"/>'
+        +     '<rect x="22" y="54" width="2" height="2"/>'
+        +     '<rect x="30" y="54" width="2" height="2"/>'
+        +     '<rect x="38" y="54" width="2" height="2"/>'
+        +     '<rect x="46" y="54" width="2" height="2"/>'
+        +     '<rect x="50" y="54" width="6" height="2"/>'
+        +   '</g>'
+        + '</svg>';
+    }
+
+    /* ============ 双途径扫码组件:amount=扫码金额;isInline=是否嵌入混合卡片内 ============ */
+    function renderScanMethods(amount, isInline) {
+      var amtTxt = '&#xFFE5;' + amount.toFixed(2);
+      var cls = isInline ? ' scan-card--inline' : '';
+      /* 左侧:B 扫 C(高亮推荐) */
+      var left = ''
+        + '<div class="scan-card scan-card--b-scan-c' + cls + '">'
+        +   '<div class="scan-card__head">'
+        +     '<span class="scan-card__title">出示付款码</span>'
+        +     '<span class="scan-card__badge">&#x1F525; 推荐</span>'
+        +   '</div>'
+        +   '<div class="scan-card__icon-wrap">'
+        +     '<span class="scan-card__icon">&#x1F4F1;</span>'
+        +   '</div>'
+        +   '<div class="scan-card__channels">'
+        +     '<span class="scan-card__channel scan-card__channel--wechat">&#x1F4F1; 微信</span>'
+        +     '<span class="scan-card__channel scan-card__channel--alipay">&#x1F4F1; 支付宝</span>'
+        +     '<span class="scan-card__channel scan-card__channel--unionpay">&#x1F951; 银联</span>'
+        +   '</div>'
+        + (isInline ? '' : '<div class="scan-card__recommend-tip">&#x26A1; 出示付款码更快,推荐使用</div>')
+        + '</div>';
+      /* 右侧:C 扫 B(二维码) */
+      var right = ''
+        + '<div class="scan-card scan-card--c-scan-b' + cls + '">'
+        +   '<div class="scan-card__head">'
+        +     '<span class="scan-card__title scan-card__title--muted">扫码支付</span>'
+        +   '</div>'
+        + (isInline
+            ? '<div class="scan-card__qr-wrap">' + renderQRCodeSVG() + '</div>'
+            : '<div class="scan-card__icon-wrap">' + renderQRCodeSVG() + '</div>')
+        +   '<div class="scan-card__channels">'
+        +     '<span class="scan-card__channel scan-card__channel--wechat">&#x1F4F1; 微信</span>'
+        +     '<span class="scan-card__channel scan-card__channel--alipay">&#x1F4F1; 支付宝</span>'
+        +   '</div>'
+        + '</div>';
+      /* 内嵌模式不套 scan-methods 容器(由调用方决定布局) */
+      if (isInline) {
+        return '<div class="scan-methods" style="grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;">' + left + right + '</div>';
+      }
+      return '<div class="scan-methods">' + left + right + '</div>';
+    }
+
+    /* ============ 模板A:在线支付(双途径) ============ */
+    function renderOnline() {
+      var eff = getEffectivePayable();
+      return renderScanMethods(eff, false);
+    }
+
+    /* ============ 模板B:会员余额支付 ============ */
+    function renderBalance() {
+      var eff = getEffectivePayable();
+      var after = Math.max(0, USER_BALANCE - eff);
+      return ''
+        + '<div class="pay-panel pay-panel--with-card">'
+        +   '<div class="pay-icon-area pay-icon-area--balance">'
+        +     '<span class="pay-icon-area__icon">&#x1F4B0;</span>'
+        +   '</div>'
+        +   '<div class="pay-status">'
+        +     '<div class="pay-status__title">余额扣款中</div>'
+        +     '<div class="pay-status__hint">正在从您的会员账户扣除本餐消费金额</div>'
+        +   '</div>'
+        +   '<div class="member-card">'
+        +     '<div class="member-card__head">'
+        +       '<span class="member-card__name">&#x1F464; ' + USER_NAME + '</span>'
+        +       '<span class="member-card__level">&#x1F451; ' + USER_LEVEL + '</span>'
+        +     '</div>'
+        +     '<div class="member-card__row">'
+        +       '<span class="member-card__label">账户余额</span>'
+        +       '<span class="member-card__value">&#xFFE5;' + USER_BALANCE.toFixed(2) + '</span>'
+        +     '</div>'
+        +     '<div class="member-card__row">'
+        +       '<span class="member-card__label">本单消费</span>'
+        +       '<span class="member-card__value member-card__value--expense">-&#xFFE5;' + eff.toFixed(2) + '</span>'
+        +     '</div>'
+        +     '<div class="member-card__row">'
+        +       '<span class="member-card__label">扣款后余额</span>'
+        +       '<span class="member-card__value member-card__value--highlight">&#xFFE5;' + after.toFixed(2) + '</span>'
+        +     '</div>'
+        +   '</div>'
+        + '</div>';
+    }
+
+    /* ============ 模板C1:余额+在线混合 ============ */
+    function renderMixedBlOnline() {
+      var eff = getEffectivePayable();
+      var balDeduct = Math.min(DEMO_BALANCE_FOR_MIXED, eff);
+      var diff = Math.max(0, eff - DEMO_BALANCE_FOR_MIXED);
+      return ''
+        + '<div class="mixed-panel">'
+        +   '<div class="mixed-head">'
+        +     '<span class="mixed-head__title">&#x1F500; 混合支付 · 余额 + 在线</span>'
+        +   '</div>'
+        +   '<div class="mixed-steps">'
+        +     '<div class="mixed-step mixed-step--done">'
+        +       '<div class="mixed-step__icon">&#x1F4B0;</div>'
+        +       '<div class="mixed-step__title">余额已扣</div>'
+        +       '<div class="mixed-step__amount">&#xFFE5;' + balDeduct.toFixed(2) + '</div>'
+        +       '<div class="mixed-step__status">&#x2705; 已完成</div>'
+        +       '<div class="mixed-step__hint">从会员账户扣除</div>'
+        +     '</div>'
+        +     '<div class="mixed-connector">&#x27A1;&#xFE0F;</div>'
+        +     '<div class="mixed-step mixed-step--pending">'
+        +       '<div class="mixed-step__icon">&#x1F4F1;</div>'
+        +       '<div class="mixed-step__title">请扫码补差</div>'
+        +       '<div class="mixed-step__amount">&#xFFE5;' + diff.toFixed(2) + '</div>'
+        +       '<div class="mixed-step__status">&#x23F3; 等待扫码</div>'
+        +       renderScanMethods(diff, true)
+        +     '</div>'
+        +   '</div>'
+        + '</div>';
+    }
+
+    /* ============ 模板C2:余额+现金混合 ============ */
+    function renderMixedBlCash() {
+      var eff = getEffectivePayable();
+      var balDeduct = Math.min(DEMO_BALANCE_FOR_MIXED, eff);
+      var diff = Math.max(0, eff - DEMO_BALANCE_FOR_MIXED);
+      return ''
+        + '<div class="mixed-panel">'
+        +   '<div class="mixed-head">'
+        +     '<span class="mixed-head__title">&#x1F500; 混合支付 · 余额 + 现金</span>'
+        +   '</div>'
+        +   '<div class="mixed-steps">'
+        +     '<div class="mixed-step mixed-step--done">'
+        +       '<div class="mixed-step__icon">&#x1F4B0;</div>'
+        +       '<div class="mixed-step__title">余额已扣</div>'
+        +       '<div class="mixed-step__amount">&#xFFE5;' + balDeduct.toFixed(2) + '</div>'
+        +       '<div class="mixed-step__status">&#x2705; 已完成</div>'
+        +       '<div class="mixed-step__hint">从会员账户扣除</div>'
+        +     '</div>'
+        +     '<div class="mixed-connector">&#x27A1;&#xFE0F;</div>'
+        +     '<div class="mixed-step mixed-step--pending">'
+        +       '<div class="mixed-step__icon">&#x1F4B6;</div>'
+        +       '<div class="mixed-step__title">请现金补差</div>'
+        +       '<div class="mixed-step__amount">&#xFFE5;' + diff.toFixed(2) + '</div>'
+        +       '<div class="mixed-step__status">&#x23F3; 等待收银</div>'
+        +       '<div class="mixed-step__hint">请向收银员交付现金</div>'
+        +     '</div>'
+        +   '</div>'
+        + '</div>';
+    }
+
+    /* ============ 模板C3:现金+在线混合 ============ */
+    function renderMixedCashOnline() {
+      var eff = getEffectivePayable();
+      var cashReceived = Math.round(eff * DEMO_CASH_RATIO * 100) / 100;
+      var diff = Math.max(0, eff - cashReceived);
+      return ''
+        + '<div class="mixed-panel">'
+        +   '<div class="mixed-head">'
+        +     '<span class="mixed-head__title">&#x1F500; 混合支付 · 现金 + 在线</span>'
+        +   '</div>'
+        +   '<div class="mixed-steps">'
+        +     '<div class="mixed-step mixed-step--done">'
+        +       '<div class="mixed-step__icon">&#x1F4B6;</div>'
+        +       '<div class="mixed-step__title">现金已收</div>'
+        +       '<div class="mixed-step__amount">&#xFFE5;' + cashReceived.toFixed(2) + '</div>'
+        +       '<div class="mixed-step__status">&#x2705; 已完成</div>'
+        +       '<div class="mixed-step__hint">收银员已确认</div>'
+        +     '</div>'
+        +     '<div class="mixed-connector">&#x27A1;&#xFE0F;</div>'
+        +     '<div class="mixed-step mixed-step--pending">'
+        +       '<div class="mixed-step__icon">&#x1F4F1;</div>'
+        +       '<div class="mixed-step__title">请扫码补差</div>'
+        +       '<div class="mixed-step__amount">&#xFFE5;' + diff.toFixed(2) + '</div>'
+        +       '<div class="mixed-step__status">&#x23F3; 等待扫码</div>'
+        +       renderScanMethods(diff, true)
+        +     '</div>'
+        +   '</div>'
+        + '</div>';
+    }
+
+    /* ============ 模板D:现金找零 ============ */
+    function renderCashChange() {
+      var eff = getEffectivePayable();
+      var received = DEMO_CASH_RECEIVED;
+      var change = Math.max(0, received - eff);
+      return ''
+        + '<div class="pay-panel pay-panel--with-card">'
+        +   '<div class="pay-icon-area pay-icon-area--cash">'
+        +     '<span class="pay-icon-area__icon">&#x1F4B6;</span>'
+        +   '</div>'
+        +   '<div class="pay-status">'
+        +     '<div class="pay-status__title">请等待收银员找零</div>'
+        +     '<div class="pay-status__hint">收银员收取现金后,系统自动计算找零金额</div>'
+        +   '</div>'
+        +   '<div class="member-card" style="border-color: rgba(82, 196, 26, 0.4);">'
+        +     '<div class="member-card__head">'
+        +       '<span class="member-card__name">&#x1F4B6; 现金收款</span>'
+        +       '<span class="member-card__level" style="background: linear-gradient(135deg, rgba(82, 196, 26, 0.3), rgba(10, 196, 168, 0.2)); border-color: rgba(82, 196, 26, 0.55); color: #4ade80;">&#x2705; 待找零</span>'
+        +     '</div>'
+        +     '<div class="member-card__row">'
+        +       '<span class="member-card__label">应付金额</span>'
+        +       '<span class="member-card__value">&#xFFE5;' + eff.toFixed(2) + '</span>'
+        +     '</div>'
+        +     '<div class="member-card__row">'
+        +       '<span class="member-card__label">实收现金</span>'
+        +       '<span class="member-card__value">&#xFFE5;' + received.toFixed(2) + '</span>'
+        +     '</div>'
+        +     '<div class="member-card__row">'
+        +       '<span class="member-card__label">找零</span>'
+        +       '<span class="member-card__value member-card__value--highlight">&#xFFE5;' + change.toFixed(2) + '</span>'
+        +     '</div>'
+        +   '</div>'
+        + '</div>';
+    }
+
+    /* 顶部金额条分项刷新 */
+    function refreshHeaderBreakdown() {
+      var eff = getEffectivePayable();
+      document.getElementById('hdAmount').innerHTML = '&#xFFE5;' + eff.toFixed(2);
+      var html = '';
+      /* 代金券 chip */
+      if (couponApplied) {
+        html += '<span class="header__chip header__chip--coupon">&#x1F3AB; 券 -&#xFFE5;' + COUPON_VALUE.toFixed(2) + '</span>';
+      }
+      /* 按形态显示对应分项 */
+      if (currentMethod === 'mixed-bl-online' || currentMethod === 'mixed-bl-cash') {
+        var balDeduct = Math.min(DEMO_BALANCE_FOR_MIXED, eff);
+        var diff = Math.max(0, eff - DEMO_BALANCE_FOR_MIXED);
+        html += '<span class="header__chip header__chip--balance">&#x1F4B0; 余额 -&#xFFE5;' + balDeduct.toFixed(2) + '</span>';
+        if (currentMethod === 'mixed-bl-online') {
+          html += '<span class="header__chip header__chip--diff">&#x1F4F1; 待付 &#xFFE5;' + diff.toFixed(2) + '</span>';
+        } else {
+          html += '<span class="header__chip header__chip--diff">&#x1F4B6; 待付 &#xFFE5;' + diff.toFixed(2) + '</span>';
+        }
+      } else if (currentMethod === 'mixed-cash-online') {
+        var cashPart = Math.round(eff * DEMO_CASH_RATIO * 100) / 100;
+        var diff2 = Math.max(0, eff - cashPart);
+        html += '<span class="header__chip header__chip--cash">&#x1F4B6; 现金 &#xFFE5;' + cashPart.toFixed(2) + '</span>';
+        html += '<span class="header__chip header__chip--diff">&#x1F4F1; 待付 &#xFFE5;' + diff2.toFixed(2) + '</span>';
+      } else if (currentMethod === 'cash-change') {
+        var received = DEMO_CASH_RECEIVED;
+        var change = Math.max(0, received - eff);
+        html += '<span class="header__chip header__chip--cash">&#x1F4B6; 实收 &#xFFE5;' + received.toFixed(2) + '</span>';
+        html += '<span class="header__chip header__chip--balance">&#x1F4B0; 找零 &#xFFE5;' + change.toFixed(2) + '</span>';
+      } else if (currentMethod === 'balance') {
+        html += '<span class="header__chip header__chip--balance">&#x1F4B0; 余额支付</span>';
+      } else if (currentMethod === 'online') {
+        html += '<span class="header__chip header__chip--diff">&#x1F4F1; 在线支付</span>';
+      }
+      document.getElementById('hdBreakdown').innerHTML = html;
+    }
+
+    /* 顶部状态文案 */
+    function refreshHeaderStatus() {
+      var map = {
+        'online': '等待扫码中',
+        'balance': '余额扣款中',
+        'mixed-bl-online': '混合支付 · 等待扫码补差',
+        'mixed-bl-cash': '混合支付 · 等待现金补差',
+        'mixed-cash-online': '混合支付 · 等待扫码补差',
+        'cash-change': '等待收银员找零'
+      };
+      document.getElementById('hdStatus').textContent = map[currentMethod] || '等待支付中';
+    }
+
+    /* 代金券提示条 */
+    function refreshCouponBanner() {
+      var el = document.getElementById('couponBanner');
+      if (couponApplied) {
+        el.classList.add('show');
+        document.getElementById('couponBannerAmt').innerHTML = '&#xFFE5;' + COUPON_VALUE.toFixed(2);
+      } else {
+        el.classList.remove('show');
+      }
+    }
+
+    /* 主切换函数 */
+    function switchMethod(method) {
+      currentMethod = method;
+      var body = document.getElementById('body');
+      var renderer = {
+        'online': renderOnline,
+        'balance': renderBalance,
+        'mixed-bl-online': renderMixedBlOnline,
+        'mixed-bl-cash': renderMixedBlCash,
+        'mixed-cash-online': renderMixedCashOnline,
+        'cash-change': renderCashChange
+      };
+      body.innerHTML = renderer[method]();
+      document.querySelectorAll('.demo-switcher__btn').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.method === method);
+      });
+      refreshHeaderBreakdown();
+      refreshHeaderStatus();
+    }
+
+    /* 代金券开关 */
+    function toggleCoupon() {
+      couponApplied = !couponApplied;
+      var btn = document.getElementById('couponToggle');
+      btn.classList.toggle('on', couponApplied);
+      btn.textContent = couponApplied ? '代金券 ✅' : '代金券';
+      refreshCouponBanner();
+      switchMethod(currentMethod); /* 重新渲染当前模板以刷新金额 */
+    }
+
+    /* URL 参数驱动 */
+    function loadFromUrl() {
+      var params = new URLSearchParams(window.location.search);
+      var method = params.get('method');
+      var valid = ['online', 'balance', 'mixed-bl-online', 'mixed-bl-cash', 'mixed-cash-online', 'cash-change'];
+      if (method && valid.indexOf(method) !== -1) {
+        currentMethod = method;
+      }
+      var coupon = params.get('coupon');
+      if (coupon === '1' || coupon === 'true') {
+        couponApplied = true;
+        document.getElementById('couponToggle').classList.add('on');
+        document.getElementById('couponToggle').textContent = '代金券 ✅';
+      }
+    }
+
+    /* 事件绑定 */
+    document.querySelectorAll('.demo-switcher__btn').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        var m = btn.dataset.method;
+        /* 同步更新 URL 参数(便于复制链接分享) */
+        var url = new URL(window.location.href);
+        url.searchParams.set('method', m);
+        window.history.replaceState({}, '', url.toString());
+        switchMethod(m);
+      });
+    });
+    document.getElementById('couponToggle').addEventListener('click', toggleCoupon);
+
+    /* 初始化 */
+    loadFromUrl();
+    refreshCouponBanner();
+    switchMethod(currentMethod);
+  </script>
+
 </body>
 </html>
diff --git a/other-module/canteen-device/checkout-device/user-04-success.html b/other-module/canteen-device/checkout-device/user-04-success.html
index e5ffdb3..b7d429a 100644
--- a/other-module/canteen-device/checkout-device/user-04-success.html
+++ b/other-module/canteen-device/checkout-device/user-04-success.html
@@ -117,7 +117,7 @@
       color: #4ade80;
     }
 
-    /* 账户信息条(仅刷脸支付显示) */
+    /* 账户信息条(余额/混合/找零场景显示) */
     .account-info {
       width: 100%;
       max-width: 360px;
@@ -154,11 +154,23 @@
     }
     .account-info__value--expense { color: #fb923c; }
     .account-info__value--balance { color: #4ade80; }
+    .account-info__value--change { color: #fbbf24; }
+    .account-info__value--highlight {
+      font-size: 22px;
+      color: #0AC4A8;
+      text-shadow: 0 0 12px rgba(10, 196, 168, 0.4);
+    }
     .account-info__divider {
       width: 1px;
       height: 32px;
       background: rgba(255, 255, 255, 0.15);
     }
+    /* 3 列以上的混合支付明细卡片,最大宽度放宽 */
+    .account-info.account-info--wide { max-width: 460px; }
+    .account-info.account-info--cash {
+      background: linear-gradient(90deg, rgba(82, 196, 26, 0.18), rgba(251, 191, 36, 0.1));
+      border-color: rgba(82, 196, 26, 0.4);
+    }
 
     /* 演示切换按钮(原型展示用) */
     .demo-switcher {
@@ -284,36 +296,90 @@
     .health-tip__icon { font-size: 18px; }
     .health-tip__text strong { color: #4ade80; }
 
-    /* 二维码引导 */
+    /* 二维码引导(放大版:二维码居上、文案居下) */
     .qr-guide {
-      padding: 14px 18px;
-      background: rgba(26, 43, 74, 0.5);
-      border: 1px solid rgba(74, 144, 217, 0.3);
-      border-radius: 12px;
+      padding: 18px 20px 16px;
+      background: linear-gradient(135deg, rgba(26, 43, 74, 0.6), rgba(10, 196, 168, 0.1));
+      border: 1px solid rgba(74, 144, 217, 0.4);
+      border-radius: 14px;
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 14px;
+      gap: 12px;
+      position: relative;
+      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(74, 144, 217, 0.08);
+    }
+    .qr-guide__qr-wrap {
+      width: 140px;
+      height: 140px;
+      border-radius: 12px;
+      background: #fff;
+      padding: 8px;
+      flex-shrink: 0;
+      box-shadow:
+        0 4px 16px rgba(74, 144, 217, 0.4),
+        0 0 0 2px rgba(74, 144, 217, 0.35),
+        0 0 32px rgba(74, 144, 217, 0.25);
+      position: relative;
+    }
+    /* 装饰角标:扫码提示 */
+    .qr-guide__qr-wrap::before {
+      content: "";
+      position: absolute;
+      top: -6px;
+      left: -6px;
+      width: 16px;
+      height: 16px;
+      border-top: 2px solid #60a5fa;
+      border-left: 2px solid #60a5fa;
+      border-top-left-radius: 4px;
+    }
+    .qr-guide__qr-wrap::after {
+      content: "";
+      position: absolute;
+      bottom: -6px;
+      right: -6px;
+      width: 16px;
+      height: 16px;
+      border-bottom: 2px solid #60a5fa;
+      border-right: 2px solid #60a5fa;
+      border-bottom-right-radius: 4px;
     }
     .qr-guide__img {
-      width: 64px;
-      height: 64px;
-      border-radius: 8px;
-      background: #fff;
-      padding: 4px;
-      flex-shrink: 0;
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .qr-guide__text {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
     }
-    .qr-guide__text { flex: 1; }
     .qr-guide__title {
-      font-size: 14px;
+      font-size: 16px;
       color: #fff;
-      font-weight: 600;
-      margin-bottom: 2px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
     }
     .qr-guide__sub {
-      font-size: 11px;
-      color: rgba(255, 255, 255, 0.55);
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
       line-height: 1.5;
     }
+    .qr-guide__tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin: 2px auto 0;
+      padding: 3px 10px;
+      background: rgba(82, 196, 26, 0.15);
+      border: 1px solid rgba(82, 196, 26, 0.35);
+      border-radius: 12px;
+      font-size: 11px;
+      color: #4ade80;
+      font-weight: 600;
+    }
 
     /* 底部 */
     .footer {
@@ -341,8 +407,12 @@
 
     <!-- 演示切换按钮(原型展示用,实际部署可移除) -->
     <div class="demo-switcher">
-      <button class="demo-switcher__btn" data-method="online">在线支付演示</button>
-      <button class="demo-switcher__btn active" data-method="face">刷脸支付演示</button>
+      <button class="demo-switcher__btn active" data-method="online">在线支付</button>
+      <button class="demo-switcher__btn" data-method="balance">余额支付</button>
+      <button class="demo-switcher__btn" data-method="mixed-bl-online">余额+在线</button>
+      <button class="demo-switcher__btn" data-method="mixed-bl-cash">余额+现金</button>
+      <button class="demo-switcher__btn" data-method="mixed-cash-online">现金+在线</button>
+      <button class="demo-switcher__btn" data-method="cash-change">现金找零</button>
     </div>
 
     <!-- 烟花动画背景 -->
@@ -353,25 +423,15 @@
 
       <!-- 左:成功动画 + 金额 -->
       <div class="success-block">
-        <div class="success-icon">&#x2714;</div>
-        <div class="success-title">支付成功</div>
+        <div class="success-icon" id="successIcon">&#x2714;</div>
+        <div class="success-title" id="successTitle">支付成功</div>
 
-        <!-- 账户信息条(仅刷脸支付显示) -->
-        <div class="account-info" id="accountInfo">
-          <div class="account-info__col">
-            <span class="account-info__label">本次消费</span>
-            <span class="account-info__value account-info__value--expense">-¥41.60</span>
-          </div>
-          <div class="account-info__divider"></div>
-          <div class="account-info__col">
-            <span class="account-info__label">账户余额 · 张明</span>
-            <span class="account-info__value account-info__value--balance">¥128.40</span>
-          </div>
-        </div>
+        <!-- 账户信息条(由 JS 按支付方式动态注入;余额/混合/找零场景显示) -->
+        <div class="account-info" id="accountInfo"></div>
 
         <div class="success-amount">
-          <div class="success-amount__value">¥41.60</div>
-          <div class="success-amount__method" id="payMethodBadge">&#x1F464; 刷脸支付 · 已扣款</div>
+          <div class="success-amount__value" id="successAmount">¥41.60</div>
+          <div class="success-amount__method" id="payMethodBadge">&#x1F4F1; 在线支付 · 微信 · 已到账</div>
         </div>
       </div>
 
@@ -415,88 +475,91 @@
           </span>
         </div>
 
-        <!-- 小程序引导 -->
+        <!-- 小程序引导(放大版二维码) -->
         <div class="qr-guide">
-          <svg class="qr-guide__img" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-            <rect x="0" y="0" width="64" height="64" fill="#fff"/>
-            <g fill="#0e1326">
-              <!-- 三个定位角 -->
-              <rect x="4" y="4" width="14" height="14"/>
-              <rect x="6" y="6" width="10" height="10" fill="#fff"/>
-              <rect x="8" y="8" width="6" height="6" fill="#0e1326"/>
-              <rect x="46" y="4" width="14" height="14"/>
-              <rect x="48" y="6" width="10" height="10" fill="#fff"/>
-              <rect x="50" y="8" width="6" height="6" fill="#0e1326"/>
-              <rect x="4" y="46" width="14" height="14"/>
-              <rect x="6" y="48" width="10" height="10" fill="#fff"/>
-              <rect x="8" y="50" width="6" height="6" fill="#0e1326"/>
-              <!-- 数据点(模拟) -->
-              <rect x="22" y="6" width="2" height="2"/>
-              <rect x="26" y="6" width="2" height="2"/>
-              <rect x="30" y="6" width="2" height="2"/>
-              <rect x="38" y="6" width="2" height="2"/>
-              <rect x="22" y="10" width="2" height="2"/>
-              <rect x="34" y="10" width="2" height="2"/>
-              <rect x="22" y="14" width="6" height="2"/>
-              <rect x="32" y="14" width="2" height="2"/>
-              <rect x="38" y="14" width="2" height="2"/>
-              <rect x="6" y="22" width="2" height="2"/>
-              <rect x="10" y="22" width="2" height="2"/>
-              <rect x="14" y="22" width="2" height="2"/>
-              <rect x="22" y="22" width="2" height="2"/>
-              <rect x="26" y="22" width="6" height="2"/>
-              <rect x="34" y="22" width="2" height="2"/>
-              <rect x="42" y="22" width="2" height="2"/>
-              <rect x="50" y="22" width="2" height="2"/>
-              <rect x="54" y="22" width="2" height="2"/>
-              <rect x="6" y="26" width="2" height="2"/>
-              <rect x="14" y="26" width="2" height="2"/>
-              <rect x="22" y="26" width="2" height="2"/>
-              <rect x="30" y="26" width="2" height="2"/>
-              <rect x="38" y="26" width="2" height="2"/>
-              <rect x="46" y="26" width="2" height="2"/>
-              <rect x="54" y="26" width="2" height="2"/>
-              <rect x="10" y="30" width="2" height="2"/>
-              <rect x="18" y="30" width="2" height="2"/>
-              <rect x="26" y="30" width="2" height="2"/>
-              <rect x="34" y="30" width="2" height="2"/>
-              <rect x="42" y="30" width="2" height="2"/>
-              <rect x="50" y="30" width="2" height="2"/>
-              <rect x="58" y="30" width="2" height="2"/>
-              <rect x="6" y="34" width="2" height="2"/>
-              <rect x="14" y="34" width="2" height="2"/>
-              <rect x="22" y="34" width="2" height="2"/>
-              <rect x="30" y="34" width="6" height="2"/>
-              <rect x="42" y="34" width="2" height="2"/>
-              <rect x="50" y="34" width="2" height="2"/>
-              <rect x="22" y="38" width="2" height="2"/>
-              <rect x="26" y="38" width="2" height="2"/>
-              <rect x="34" y="38" width="2" height="2"/>
-              <rect x="42" y="38" width="2" height="2"/>
-              <rect x="46" y="38" width="2" height="2"/>
-              <rect x="54" y="38" width="2" height="2"/>
-              <rect x="22" y="42" width="6" height="2"/>
-              <rect x="34" y="42" width="2" height="2"/>
-              <rect x="42" y="42" width="2" height="2"/>
-              <rect x="50" y="42" width="6" height="2"/>
-              <rect x="22" y="46" width="2" height="2"/>
-              <rect x="30" y="46" width="2" height="2"/>
-              <rect x="22" y="50" width="2" height="2"/>
-              <rect x="26" y="50" width="2" height="2"/>
-              <rect x="34" y="50" width="2" height="2"/>
-              <rect x="42" y="50" width="2" height="2"/>
-              <rect x="46" y="50" width="2" height="2"/>
-              <rect x="54" y="50" width="2" height="2"/>
-              <rect x="22" y="54" width="2" height="2"/>
-              <rect x="30" y="54" width="2" height="2"/>
-              <rect x="38" y="54" width="2" height="2"/>
-              <rect x="46" y="54" width="2" height="2"/>
-              <rect x="50" y="54" width="6" height="2"/>
-            </g>
-          </svg>
+          <div class="qr-guide__qr-wrap">
+            <svg class="qr-guide__img" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0" y="0" width="64" height="64" fill="#fff"/>
+              <g fill="#0e1326">
+                <!-- 三个定位角 -->
+                <rect x="4" y="4" width="14" height="14"/>
+                <rect x="6" y="6" width="10" height="10" fill="#fff"/>
+                <rect x="8" y="8" width="6" height="6" fill="#0e1326"/>
+                <rect x="46" y="4" width="14" height="14"/>
+                <rect x="48" y="6" width="10" height="10" fill="#fff"/>
+                <rect x="50" y="8" width="6" height="6" fill="#0e1326"/>
+                <rect x="4" y="46" width="14" height="14"/>
+                <rect x="6" y="48" width="10" height="10" fill="#fff"/>
+                <rect x="8" y="50" width="6" height="6" fill="#0e1326"/>
+                <!-- 数据点(模拟) -->
+                <rect x="22" y="6" width="2" height="2"/>
+                <rect x="26" y="6" width="2" height="2"/>
+                <rect x="30" y="6" width="2" height="2"/>
+                <rect x="38" y="6" width="2" height="2"/>
+                <rect x="22" y="10" width="2" height="2"/>
+                <rect x="34" y="10" width="2" height="2"/>
+                <rect x="22" y="14" width="6" height="2"/>
+                <rect x="32" y="14" width="2" height="2"/>
+                <rect x="38" y="14" width="2" height="2"/>
+                <rect x="6" y="22" width="2" height="2"/>
+                <rect x="10" y="22" width="2" height="2"/>
+                <rect x="14" y="22" width="2" height="2"/>
+                <rect x="22" y="22" width="2" height="2"/>
+                <rect x="26" y="22" width="6" height="2"/>
+                <rect x="34" y="22" width="2" height="2"/>
+                <rect x="42" y="22" width="2" height="2"/>
+                <rect x="50" y="22" width="2" height="2"/>
+                <rect x="54" y="22" width="2" height="2"/>
+                <rect x="6" y="26" width="2" height="2"/>
+                <rect x="14" y="26" width="2" height="2"/>
+                <rect x="22" y="26" width="2" height="2"/>
+                <rect x="30" y="26" width="2" height="2"/>
+                <rect x="38" y="26" width="2" height="2"/>
+                <rect x="46" y="26" width="2" height="2"/>
+                <rect x="54" y="26" width="2" height="2"/>
+                <rect x="10" y="30" width="2" height="2"/>
+                <rect x="18" y="30" width="2" height="2"/>
+                <rect x="26" y="30" width="2" height="2"/>
+                <rect x="34" y="30" width="2" height="2"/>
+                <rect x="42" y="30" width="2" height="2"/>
+                <rect x="50" y="30" width="2" height="2"/>
+                <rect x="58" y="30" width="2" height="2"/>
+                <rect x="6" y="34" width="2" height="2"/>
+                <rect x="14" y="34" width="2" height="2"/>
+                <rect x="22" y="34" width="2" height="2"/>
+                <rect x="30" y="34" width="6" height="2"/>
+                <rect x="42" y="34" width="2" height="2"/>
+                <rect x="50" y="34" width="2" height="2"/>
+                <rect x="22" y="38" width="2" height="2"/>
+                <rect x="26" y="38" width="2" height="2"/>
+                <rect x="34" y="38" width="2" height="2"/>
+                <rect x="42" y="38" width="2" height="2"/>
+                <rect x="46" y="38" width="2" height="2"/>
+                <rect x="54" y="38" width="2" height="2"/>
+                <rect x="22" y="42" width="6" height="2"/>
+                <rect x="34" y="42" width="2" height="2"/>
+                <rect x="42" y="42" width="2" height="2"/>
+                <rect x="50" y="42" width="6" height="2"/>
+                <rect x="22" y="46" width="2" height="2"/>
+                <rect x="30" y="46" width="2" height="2"/>
+                <rect x="22" y="50" width="2" height="2"/>
+                <rect x="26" y="50" width="2" height="2"/>
+                <rect x="34" y="50" width="2" height="2"/>
+                <rect x="42" y="50" width="2" height="2"/>
+                <rect x="46" y="50" width="2" height="2"/>
+                <rect x="54" y="50" width="2" height="2"/>
+                <rect x="22" y="54" width="2" height="2"/>
+                <rect x="30" y="54" width="2" height="2"/>
+                <rect x="38" y="54" width="2" height="2"/>
+                <rect x="46" y="54" width="2" height="2"/>
+                <rect x="50" y="54" width="6" height="2"/>
+              </g>
+            </svg>
+          </div>
           <div class="qr-guide__text">
             <div class="qr-guide__title">&#x1F4F1; 扫码查看详细营养报告</div>
             <div class="qr-guide__sub">小程序内可查看每日营养摄入趋势、健康建议、餐品推荐</div>
+            <span class="qr-guide__tag">&#x1F525; 今日已有 1,284 人查看</span>
           </div>
         </div>
       </div>
@@ -532,23 +595,115 @@
     }
     createConfetti();
 
-    /* 支付方式演示切换 */
+    /* ==================== 订单数据(与 user-03 / user-04 金额一致) ==================== */
+    var ORDER_TOTAL = 46.60;
+    var ORDER_DISCOUNT = 5.00;      /* 企业补贴 */
+    var ORDER_PAYABLE = ORDER_TOTAL - ORDER_DISCOUNT;  /* 41.60 */
+    var USER_BALANCE = 128.50;
+    var USER_NAME = '张明';
+    var DEMO_BALANCE_FOR_MIXED = 20.00;   /* 混合支付演示余额 */
+    var DEMO_CASH_RATIO = 0.6;            /* 现金+在线的现金比例 */
+    var DEMO_CASH_RECEIVED = 50.00;       /* 现金找零演示实收 */
+
+    /* ==================== 支付方式成功态配置 ==================== */
+    /* icon: 成功对勾图标的覆盖(默认 ✔,部分场景替换为对应支付 icon) */
+    /* title: 成功大标题 */
+    /* badge: 金额下方的支付方式徽章 */
+    /* accountHtml: 账户信息条 HTML(空字符串=隐藏) */
     var methodConfig = {
+      /* 在线支付 */
       online: {
-        badge: '&#x1F4F1; 在线支付 · 微信',
-        showAccount: false
+        title: '支付成功',
+        badge: '&#x1F4F1; 在线支付 · 微信 · 已到账',
+        accountHtml: ''
       },
-      face: {
-        badge: '&#x1F464; 刷脸支付 · 已扣款',
-        showAccount: true
+      /* 余额支付 */
+      balance: {
+        title: '扣款成功',
+        badge: '&#x1F4B0; 余额支付 · 已从会员账户扣除',
+        accountHtml: accountRow('账户余额 · 原余额', '&#xFFE5;' + USER_BALANCE.toFixed(2), '')
+                   + accountDivider()
+                   + accountRow('本单消费', '-&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('扣款后余额', '&#xFFE5;' + (USER_BALANCE - ORDER_PAYABLE).toFixed(2), 'balance')
+      },
+      /* 余额 + 在线 */
+      'mixed-bl-online': {
+        title: '支付成功',
+        badge: '&#x1F4B0; 余额 + &#x1F4F1; 在线 · 混合支付完成',
+        accountHtml: accountRow('余额扣款', '-&#xFFE5;' + DEMO_BALANCE_FOR_MIXED.toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('在线支付', '-&#xFFE5;' + (ORDER_PAYABLE - DEMO_BALANCE_FOR_MIXED).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('实付合计', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'balance'),
+        wide: true
+      },
+      /* 余额 + 现金 */
+      'mixed-bl-cash': {
+        title: '支付成功',
+        badge: '&#x1F4B0; 余额 + &#x1F4B6; 现金 · 混合支付完成',
+        accountHtml: accountRow('余额扣款', '-&#xFFE5;' + DEMO_BALANCE_FOR_MIXED.toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('现金支付', '-&#xFFE5;' + (ORDER_PAYABLE - DEMO_BALANCE_FOR_MIXED).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('实付合计', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'balance'),
+        wide: true,
+        cash: true
+      },
+      /* 现金 + 在线 */
+      'mixed-cash-online': {
+        title: '支付成功',
+        badge: '&#x1F4B6; 现金 + &#x1F4F1; 在线 · 混合支付完成',
+        accountHtml: accountRow('现金支付', '-&#xFFE5;' + (ORDER_PAYABLE * DEMO_CASH_RATIO).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('在线支付', '-&#xFFE5;' + (ORDER_PAYABLE * (1 - DEMO_CASH_RATIO)).toFixed(2), 'expense')
+                   + accountDivider()
+                   + accountRow('实付合计', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), 'balance'),
+        wide: true,
+        cash: true
+      },
+      /* 现金找零 */
+      'cash-change': {
+        title: '支付成功',
+        badge: '&#x1F4B6; 现金支付 · 收银员已确认',
+        accountHtml: accountRow('应付金额', '&#xFFE5;' + ORDER_PAYABLE.toFixed(2), '')
+                   + accountDivider()
+                   + accountRow('实收现金', '&#xFFE5;' + DEMO_CASH_RECEIVED.toFixed(2), '')
+                   + accountDivider()
+                   + accountRow('找零', '&#xFFE5;' + (DEMO_CASH_RECEIVED - ORDER_PAYABLE).toFixed(2), 'change'),
+        wide: true,
+        cash: true
       }
     };
 
+    /* 账户信息条单元格构造器 */
+    function accountRow(label, value, modifier) {
+      var cls = modifier ? ' account-info__value--' + modifier : '';
+      return '<div class="account-info__col">'
+           +   '<span class="account-info__label">' + label + '</span>'
+           +   '<span class="account-info__value' + cls + '">' + value + '</span>'
+           + '</div>';
+    }
+    function accountDivider() {
+      return '<div class="account-info__divider"></div>';
+    }
+
     function switchDemo(method) {
       var cfg = methodConfig[method];
       if (!cfg) return;
+      document.getElementById('successTitle').textContent = cfg.title;
+      document.getElementById('successAmount').innerHTML = '&#xFFE5;' + ORDER_PAYABLE.toFixed(2);
       document.getElementById('payMethodBadge').innerHTML = cfg.badge;
-      document.getElementById('accountInfo').style.display = cfg.showAccount ? 'flex' : 'none';
+      var accountEl = document.getElementById('accountInfo');
+      if (cfg.accountHtml) {
+        accountEl.innerHTML = cfg.accountHtml;
+        accountEl.style.display = 'flex';
+        accountEl.classList.toggle('account-info--wide', !!cfg.wide);
+        accountEl.classList.toggle('account-info--cash', !!cfg.cash);
+      } else {
+        accountEl.style.display = 'none';
+        accountEl.innerHTML = '';
+      }
       document.querySelectorAll('.demo-switcher__btn').forEach(function(btn) {
         btn.classList.toggle('active', btn.dataset.method === method);
       });
@@ -557,8 +712,27 @@
     document.querySelectorAll('.demo-switcher__btn').forEach(function(btn) {
       btn.addEventListener('click', function() {
         switchDemo(btn.dataset.method);
+        /* 同步 URL 参数,便于复制链接分享(与 user-03-paying 风格一致) */
+        var url = new URL(window.location.href);
+        url.searchParams.set('method', btn.dataset.method);
+        window.history.replaceState({}, '', url.toString());
       });
     });
+
+    /* URL 参数驱动:支持 ?method=xxx 从收银员屏 03 跳转携带支付方式 */
+    function loadFromUrl() {
+      var params = new URLSearchParams(window.location.search);
+      var method = params.get('method');
+      var valid = ['online', 'balance', 'mixed-bl-online', 'mixed-bl-cash', 'mixed-cash-online', 'cash-change'];
+      if (method && valid.indexOf(method) !== -1) {
+        switchDemo(method);
+      } else {
+        switchDemo('online');
+      }
+    }
+
+    /* 初始化(优先 URL 参数,无参数时默认展示在线支付) */
+    loadFromUrl();
   </script>
 
 </body>
diff --git a/other-module/canteen-device/index.html b/other-module/canteen-device/index.html
index 866e3f4..50112be 100644
--- a/other-module/canteen-device/index.html
+++ b/other-module/canteen-device/index.html
@@ -266,7 +266,7 @@
       <a class="card" href="checkout-device/index.html">
         <span class="card__status card__status--done">已设计</span>
         <div class="card__icon">&#x1F9FE;</div>
-        <div class="card__name">结算设备</div>
+        <div class="card__name">结算台</div>
         <div class="card__desc">智能结算与支付</div>
       </a>
       <a class="card" href="nutrition-score-screen/index.html">