From d46c26b5a8a3f7cadbfcf580524d296e9d5ad469 Mon Sep 17 00:00:00 2001
From: MSuMshk <2039814060@qq.com>
Date: Fri, 13 Feb 2026 11:20:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=A5=97?=
 =?UTF-8?q?=E7=A7=9F=E6=88=B7=E5=90=8E=E5=8F=B0=E5=8E=9F=E5=9E=8B=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

包含模块：商品管理、门店管理、订单管理、财务中心、
数据统计、库存管理、多渠道整合、增值服务、
会员营销、评价管理等完整原型页面，
以及全局设计系统和项目规范文档
---
 CLAUDE.md                                     |  266 +++
 TakeoutSaaS.Prototypes/_make.py               |   14 +
 TakeoutSaaS.Prototypes/_make_gen.py           |    9 +
 TakeoutSaaS.Prototypes/index.html             | 1486 +++++++++++++++++
 TakeoutSaaS.Prototypes/pages/ch-delivery.html |  256 +++
 .../pages/ch-menu-sync.html                   |  422 +++++
 TakeoutSaaS.Prototypes/pages/ch-orders.html   |  441 +++++
 TakeoutSaaS.Prototypes/pages/ch-platform.html |  308 ++++
 TakeoutSaaS.Prototypes/pages/dashboard.html   |  227 +++
 TakeoutSaaS.Prototypes/pages/fin-cost.html    |  306 ++++
 TakeoutSaaS.Prototypes/pages/fin-invoice.html |  268 +++
 .../pages/fin-overview.html                   |  330 ++++
 TakeoutSaaS.Prototypes/pages/fin-reports.html |  311 ++++
 .../pages/fin-settlement.html                 |  297 ++++
 .../pages/fin-transactions.html               |  255 +++
 .../pages/fin-withdrawal.html                 |  365 ++++
 TakeoutSaaS.Prototypes/pages/inv-expiry.html  |  249 +++
 TakeoutSaaS.Prototypes/pages/inv-inout.html   |  445 +++++
 .../pages/inv-overview.html                   |  276 +++
 .../pages/inv-purchase.html                   |  383 +++++
 TakeoutSaaS.Prototypes/pages/inv-soldout.html |  250 +++
 .../pages/mbr-customers.html                  |  447 +++++
 TakeoutSaaS.Prototypes/pages/mbr-members.html |  698 ++++++++
 .../pages/mbr-messaging.html                  |  436 +++++
 TakeoutSaaS.Prototypes/pages/mbr-points.html  |  771 +++++++++
 TakeoutSaaS.Prototypes/pages/mbr-prepaid.html |  463 +++++
 .../pages/mkt-calendar.html                   |  284 ++++
 TakeoutSaaS.Prototypes/pages/mkt-coupon.html  |  489 ++++++
 .../pages/mkt-flash-sale.html                 |  472 ++++++
 .../pages/mkt-new-customer.html               |  396 +++++
 .../pages/mkt-pass-card.html                  |  678 ++++++++
 .../pages/mkt-reduction.html                  |  583 +++++++
 TakeoutSaaS.Prototypes/pages/mkt-seckill.html |  567 +++++++
 TakeoutSaaS.Prototypes/pages/order-board.html |  662 ++++++++
 TakeoutSaaS.Prototypes/pages/order-list.html  |  442 +++++
 .../pages/order-refund.html                   |  402 +++++
 .../pages/order-settings.html                 |  318 ++++
 .../pages/product-addons.html                 |  303 ++++
 .../pages/product-batch.html                  |  282 ++++
 .../pages/product-category.html               |  474 ++++++
 .../pages/product-combos.html                 |  344 ++++
 .../pages/product-detail.html                 |  473 ++++++
 .../pages/product-labels.html                 |  247 +++
 .../pages/product-list.html                   | 1407 ++++++++++++++++
 .../pages/product-schedule.html               |  323 ++++
 .../pages/product-specs.html                  |  328 ++++
 TakeoutSaaS.Prototypes/pages/reviews.html     |  549 ++++++
 .../pages/stat-customer.html                  |  281 ++++
 .../pages/stat-marketing.html                 |  475 ++++++
 TakeoutSaaS.Prototypes/pages/stat-order.html  |  299 ++++
 .../pages/stat-product.html                   |  248 +++
 .../pages/store-delivery.html                 |  250 +++
 .../pages/store-dinein.html                   |  288 ++++
 TakeoutSaaS.Prototypes/pages/store-fees.html  |  131 ++
 TakeoutSaaS.Prototypes/pages/store-hours.html |  472 ++++++
 TakeoutSaaS.Prototypes/pages/store-list.html  |  366 ++++
 .../pages/store-pickup.html                   |  245 +++
 .../pages/store-qualifications.html           |  187 +++
 TakeoutSaaS.Prototypes/pages/store-staff.html |  406 +++++
 TakeoutSaaS.Prototypes/pages/va-ai.html       |  210 +++
 TakeoutSaaS.Prototypes/pages/va-chain.html    |  457 +++++
 TakeoutSaaS.Prototypes/pages/va-decor.html    |  349 ++++
 TakeoutSaaS.Prototypes/pages/va-miniapp.html  |  310 ++++
 63 files changed, 24976 insertions(+)
 create mode 100644 CLAUDE.md
 create mode 100644 TakeoutSaaS.Prototypes/_make.py
 create mode 100644 TakeoutSaaS.Prototypes/_make_gen.py
 create mode 100644 TakeoutSaaS.Prototypes/index.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/ch-delivery.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/ch-menu-sync.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/ch-orders.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/ch-platform.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/dashboard.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/fin-cost.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/fin-invoice.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/fin-overview.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/fin-reports.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/fin-settlement.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/fin-transactions.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/fin-withdrawal.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/inv-expiry.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/inv-inout.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/inv-overview.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/inv-purchase.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/inv-soldout.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mbr-customers.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mbr-members.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mbr-messaging.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mbr-points.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mbr-prepaid.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mkt-calendar.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mkt-coupon.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mkt-flash-sale.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mkt-new-customer.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mkt-pass-card.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mkt-reduction.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/mkt-seckill.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/order-board.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/order-list.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/order-refund.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/order-settings.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-addons.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-batch.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-category.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-combos.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-detail.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-labels.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-list.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-schedule.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/product-specs.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/reviews.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/stat-customer.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/stat-marketing.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/stat-order.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/stat-product.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-delivery.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-dinein.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-fees.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-hours.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-list.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-pickup.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-qualifications.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/store-staff.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/va-ai.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/va-chain.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/va-decor.html
 create mode 100644 TakeoutSaaS.Prototypes/pages/va-miniapp.html

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..e5a2991
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,266 @@
+# TakeoutSaaS 原型项目规范 (Prototypes)
+
+> **适用范围**：`TakeoutSaaS.Prototypes/` 下所有 HTML 原型页面。
+> **核心原则**：这是原型图项目，不需要真实业务逻辑，只需要**易用性**和**风格统一**。
+
+## 0. AI 交互约束
+
+1. **语言**：必须使用**中文**回复与注释。
+2. **只改样式和交互**：不要添加真实的 API 调用、数据校验逻辑、路由跳转。原型只需要视觉呈现和基本交互演示。
+3. **不要过度工程化**：不需要 loading 动画的真实计时、不需要真实表单验证、不需要 localStorage 持久化。
+4. **保持功能完整**：修改样式时不得破坏现有的抽屉开关、tab 切换、视图切换等交互功能。
+5. **使用 ui-ux-pro-max skill**：新建页面或重构页面视觉时，必须先调用 `ui-ux-pro-max` skill 获取设计建议。
+
+## 1. 技术栈
+
+| 组件 | 说明 |
+|:--|:--|
+| CDN | Tailwind CSS (cdn.tailwindcss.com)、Lucide Icons (unpkg.com/lucide) |
+| 框架 | 纯 HTML + 内联 `<style>` + 内联 `<script>`，无构建工具 |
+| 图标 | Lucide Icons（`<i data-lucide="icon-name">`），**严禁使用 emoji 作为图标** |
+| 入口 | `index.html` 为主框架（侧边栏+顶栏+标签页），各页面通过 iframe 加载 |
+
+## 2. 全局设计系统 (定义在 index.html)
+
+### 2.1 CSS 变量 (Tokens)
+
+| Token | 值 | 用途 |
+|:--|:--|:--|
+| `--primary` | `hsl(212, 100%, 45%)` | 主色 |
+| `--primary-light` | `hsl(212, 100%, 95%)` | 主色浅底 |
+| `--g-radius` / `sm` / `lg` | `8px` / `6px` / `12px` | 圆角 |
+| `--g-shadow-sm` | `0 1px 2px rgba(0,0,0,.04)` | 微阴影 |
+| `--g-shadow` | `0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)` | 默认阴影 |
+| `--g-shadow-md` | `0 4px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04)` | 中阴影 (hover) |
+| `--g-shadow-lg` | `0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04)` | 大阴影 (抽屉) |
+| `--g-border` | `#f0f0f0` | 默认边框 |
+| `--g-text` | `#1f1f1f` | 主文字 |
+| `--g-text-secondary` | `#666` | 次要文字 |
+| `--g-text-muted` | `#999` | 弱化文字 |
+| `--g-danger` | `#f5222d` | 危险色 |
+| `--g-success` | `#52c41a` | 成功色 |
+| `--g-warning` | `#fa8c16` | 警告色 |
+| `--g-transition` | `200ms cubic-bezier(.4,0,.2,1)` | 统一过渡 |
+
+### 2.2 全局组件 class（.g- 前缀）
+
+**必须优先使用以下全局 class，不要在页面内重复定义同类样式：**
+
+| 类别 | Class | 说明 |
+|:--|:--|:--|
+| 卡片 | `.g-card` `.g-card-title` `.g-card-hd` `.g-card-hd-title` | 白底圆角卡片 |
+| 按钮 | `.g-btn` `.g-btn-primary` `.g-btn-danger` `.g-btn-sm` `.g-btn-lg` | 统一按钮 |
+| 表单 | `.g-form-group` `.g-form-label` `.g-form-label.required` `.g-input` `.g-select` `.g-textarea` `.g-hint` | 表单控件 |
+| 表单行 | `.g-form-row` `.g-form-row-label` `.g-form-ctrl` | 左标签右控件布局 |
+| 抽屉 | `.g-drawer-mask` `.g-drawer` `.g-drawer-hd` `.g-drawer-title` `.g-drawer-close` `.g-drawer-bd` `.g-drawer-ft` | 右侧滑入抽屉 |
+| 开关 | `.g-toggle` `.g-toggle.on` `.g-toggle-wrap` `.g-toggle-label` | Toggle 开关 |
+| 标签 | `.g-tag` `.g-tag-blue/green/orange/red/purple/gray` | 状态标签 |
+| 选择 | `.g-pill` `.g-pill.checked` | Pill 单选/多选 |
+| 分段 | `.g-seg` `.g-seg-item` `.g-seg-item.active` | 分段控制器 |
+| 表格 | `.g-table` | 统一表格 |
+| 分页 | `.g-pagination` `.g-page-btn` `.g-page-btn.active` | 分页组件 |
+| 上传 | `.g-upload-zone` | 虚线上传区 |
+| 操作链接 | `.g-action` `.g-action-danger` | 表格内操作链接 |
+| 空状态 | `.g-empty` | 空数据占位 |
+| 分割线 | `.g-divider` | 渐变分割线 |
+
+## 3. 页面 CSS 命名规范
+
+每个页面的私有样式必须使用**页面前缀**，避免与全局 class 冲突：
+
+| 页面 | 前缀 | 示例 |
+|:--|:--|:--|
+| product-list | `pl-` | `.pl-toolbar`, `.pl-card` |
+| product-detail | `pdt-` | `.pdt-section`, `.pdt-anchor` |
+| product-specs | `ps-` | `.ps-card` |
+| product-addons | `pa-` | `.pa-group-card` |
+| product-combos | `pc-` | `.pc-combo-card` |
+| product-labels | `plb-` | `.plb-preview` |
+| product-category | `pcat-` | `.pcat-tree` |
+| product-schedule | `psch-` | `.psch-timeline` |
+| product-batch | `pb-` | `.pb-panel` |
+| store-list | `sl-` | `.sl-stat-card` |
+| store-hours | `sh-` | `.sh-week-row` |
+| store-delivery | `pd-` | `.pd-tier-card` |
+| store-pickup | `pp-` | `.pp-slot-cell` |
+| store-dinein | `sdi-` | `.sdi-table-card` |
+| store-fees | `pf-` | `.pf-fee-card` |
+| store-staff | `ss-` | `.ss-schedule-grid` |
+| store-qualifications | `sq-` | `.sq-cert-card` |
+| dashboard | `db-` | `.db-kpi-card` |
+
+## 4. 强制易用性规范 (UX Mandatory Rules)
+
+以下规则适用于所有页面，**新建或修改页面时必须遵守**：
+
+### 4.1 表单必填字段必须标记
+
+所有必填字段的 label 必须加 `.required` class（自动显示红色星号）。
+
+```html
+<label class="g-form-label required">商品名称</label>
+```
+
+### 4.2 输入框必须有 placeholder
+
+所有 `<input>` 和 `<textarea>` 必须有有意义的 placeholder 提示，不得留空。placeholder 应为引导性文案，不要用默认值（如 `0.00`）作为 placeholder。
+
+```html
+<!-- 正确 -->
+<input class="g-input" placeholder="请输入商品名称">
+<input class="g-input" type="number" placeholder="如：29.90">
+
+<!-- 错误 -->
+<input class="g-input">
+<input class="g-input" placeholder="0.00">
+```
+
+### 4.3 抽屉底部按钮必须固定可见
+
+抽屉的 footer（`.g-drawer-ft`）已通过 flex 布局固定在底部。**不要**把提交按钮放在 `.g-drawer-bd` 内部，必须放在 `.g-drawer-ft` 中。
+
+```html
+<div class="g-drawer">
+  <div class="g-drawer-hd">...</div>
+  <div class="g-drawer-bd"><!-- 表单内容，可滚动 --></div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">确认</button>
+  </div>
+</div>
+```
+
+### 4.4 操作按钮过多时收入"更多"菜单
+
+表格每行操作链接不超过 3 个。超过 3 个时，保留最常用的 2-3 个，其余收入"更多"下拉菜单。
+
+### 4.5 已禁用/已停用项的视觉区分
+
+已停用、已下架、已离职等非活跃状态的卡片/行，必须有明显的视觉弱化（降低透明度、灰色遮罩、或灰色边框），让用户一眼区分。
+
+### 4.6 编辑与查看的交互一致性
+
+同一页面内，要么全部使用 inline 编辑，要么全部通过抽屉编辑，不要混用两种模式。
+
+### 4.7 危险按钮的视觉区分
+
+"删除"按钮/链接必须使用 `.g-action-danger` 或 `.g-btn-danger`，与普通操作在颜色上明确区分。
+
+## 5. 视觉风格规范
+
+### 5.1 设计方向
+
+Swiss Modernism + Bento Box 风格：干净、留白充足、阴影层次分明、无多余装饰。
+
+### 5.2 色彩层级
+
+| 用途 | 色值 | 变量 |
+|:--|:--|:--|
+| 主文字 | `#1a1a2e` 或 `#1f1f1f` | `--g-text` |
+| 次要文字 | `#4b5563` 或 `#666` | `--g-text-secondary` |
+| 弱化文字 | `#9ca3af` 或 `#999` | `--g-text-muted` |
+| 边框 | `#e5e7eb` 或 `#f0f0f0` | `--g-border` |
+| 表头背景 | `#f8f9fb` 或 `#fafafa` | `--g-bg-subtle` |
+| 行分割线 | `#f3f4f6` 或 `#f5f5f5` | — |
+
+### 5.3 阴影使用规则
+
+- 静态卡片：`var(--g-shadow-sm)` 或无阴影 + border
+- Hover 状态：`var(--g-shadow-md)`
+- 抽屉/弹窗：`var(--g-shadow-lg)`
+- **不要**在静态元素上使用 `--g-shadow-lg`
+
+### 5.4 圆角规则
+
+- 大容器/卡片：`10px` 或 `var(--g-radius)`
+- 按钮/输入框/小元素：`var(--g-radius-sm)` (6px)
+- 上传区/大面板：`var(--g-radius-lg)` (12px)
+
+### 5.5 过渡动画
+
+所有交互元素的 transition 统一使用 `var(--g-transition)`，即 `200ms cubic-bezier(.4,0,.2,1)`。不要使用 `0.3s ease` 或其他自定义值。
+
+### 5.6 Hover 状态
+
+- 卡片 hover：加 `var(--g-shadow-md)`，可选 `translateY(-1px)` 微浮
+- 表格行 hover：`background: color-mix(in srgb, var(--primary) 3%, #fff)`
+- 按钮 hover：参考 `.g-btn` 已定义的 hover 样式
+- **不要**使用 `scale` 变换做 hover（会导致布局抖动）
+
+### 5.7 Section 标题样式
+
+页面内分区标题统一使用左侧 3px 主色竖线 + 加粗文字：
+
+```css
+.xx-section-hd {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--g-text);
+  padding-left: 10px;
+  border-left: 3px solid var(--primary);
+  margin-bottom: 16px;
+}
+```
+
+## 6. JS 交互规范
+
+### 6.1 抽屉开关模式
+
+```javascript
+function openDrawer(mode) {
+  document.getElementById('drawerMask').classList.add('open');
+  document.getElementById('drawer').classList.add('open');
+}
+function closeDrawer() {
+  document.getElementById('drawerMask').classList.remove('open');
+  document.getElementById('drawer').classList.remove('open');
+}
+```
+
+### 6.2 Toggle 开关
+
+```javascript
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+```
+
+### 6.3 Pill 选择
+
+```javascript
+function togglePill(el) {
+  el.classList.toggle('checked');
+}
+```
+
+### 6.4 事件绑定注意
+
+使用 `event.currentTarget`（而非 `event.target`）获取绑定事件的元素，避免点击子元素时取到错误的 target。
+
+## 7. 文件结构
+
+```
+TakeoutSaaS.Prototypes/
+├── index.html          # 主框架（侧边栏+顶栏+标签页+全局CSS设计系统）
+└── pages/
+    ├── dashboard.html
+    ├── product-list.html
+    ├── product-detail.html
+    ├── product-specs.html
+    ├── product-addons.html
+    ├── product-combos.html
+    ├── product-labels.html
+    ├── product-category.html
+    ├── product-schedule.html
+    ├── product-batch.html
+    ├── store-list.html
+    ├── store-hours.html
+    ├── store-delivery.html
+    ├── store-pickup.html
+    ├── store-dinein.html
+    ├── store-fees.html
+    ├── store-staff.html
+    └── store-qualifications.html
+```
+
+新增页面时，在 `pages/` 下创建 HTML 文件，并在 `index.html` 的侧边栏菜单中添加对应入口。
diff --git a/TakeoutSaaS.Prototypes/_make.py b/TakeoutSaaS.Prototypes/_make.py
new file mode 100644
index 0000000..5d30d4a
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/_make.py
@@ -0,0 +1,14 @@
+import os
+d=os.path.dirname(os.path.abspath(__file__))
+hp=os.path.join(d,"pages","store-hours.html")
+html=open(hp,"r",encoding="utf-8").read()
+TQ=chr(34)*3;Q=chr(34);N=chr(10)
+s="import os"+N+N
+s+="html = r"+TQ+N+html+N+TQ+N+N
+s+="out = r"+Q+hp+Q+N
+s+="os.makedirs(os.path.dirname(out), exist_ok=True)"+N
+s+="with open(out, "+Q+"w"+Q+", encoding="+Q+"utf-8"+Q+") as f:"+N
+s+="    f.write(html)"+N
+s+="print("+Q+"OK"+Q+")"+N
+open(os.path.join(d,"_gen_hours.py"),"w",encoding="utf-8").write(s)
+print("_gen_hours.py created")
diff --git a/TakeoutSaaS.Prototypes/_make_gen.py b/TakeoutSaaS.Prototypes/_make_gen.py
new file mode 100644
index 0000000..f37088d
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/_make_gen.py
@@ -0,0 +1,9 @@
+import pathlib, os, io, base64, zlib
+base = os.path.dirname(os.path.abspath(__file__))
+# This script builds _gen_pickup.py
+# Read the b64 payload from _payload.dat, decode, write as _gen_pickup.py
+dat = pathlib.Path(os.path.join(base, "_payload.dat")).read_text()
+script = zlib.decompress(base64.b64decode(dat)).decode("utf-8")
+pathlib.Path(os.path.join(base, "_gen_pickup.py")).write_text(script, encoding="utf-8")
+pathlib.Path(os.path.join(base, "_payload.dat")).unlink()
+print("_gen_pickup.py written:", len(script), "bytes")
diff --git a/TakeoutSaaS.Prototypes/index.html b/TakeoutSaaS.Prototypes/index.html
new file mode 100644
index 0000000..ae6c570
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/index.html
@@ -0,0 +1,1486 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TakeoutSaaS - 租户管理系统</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <style>
+    :root {
+      --sidebar-width: 224px;
+      --sidebar-collapsed-width: 64px;
+      --header-height: 50px;
+      --tabbar-height: 38px;
+      --primary: hsl(212, 100%, 45%);
+      --primary-light: hsl(212, 100%, 95%);
+      --sidebar-bg: #001529;
+      --sidebar-bg-light: #000c17;
+      --sidebar-text: rgba(255,255,255,0.65);
+      --sidebar-text-active: #ffffff;
+      --content-bg: #f0f2f5;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; overflow: hidden; height: 100vh; }
+
+    /* Sidebar */
+    .sidebar {
+      width: var(--sidebar-width);
+      min-width: var(--sidebar-width);
+      background: var(--sidebar-bg);
+      height: 100vh;
+      transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      z-index: 100;
+    }
+    .sidebar.collapsed {
+      width: var(--sidebar-collapsed-width);
+      min-width: var(--sidebar-collapsed-width);
+    }
+    .sidebar-logo {
+      height: var(--header-height);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      gap: 10px;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+      flex-shrink: 0;
+    }
+    .sidebar-logo .logo-icon {
+      width: 32px; height: 32px;
+      background: var(--primary);
+      border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0;
+    }
+    .sidebar-logo .logo-text {
+      color: #fff; font-size: 16px; font-weight: 600;
+      white-space: nowrap; overflow: hidden;
+      transition: opacity 0.2s;
+    }
+    .sidebar.collapsed .logo-text { opacity: 0; width: 0; }
+    .sidebar.collapsed .sidebar-logo { justify-content: center; padding: 0; }
+
+    /* Menu */
+    .sidebar-menu {
+      flex: 1; overflow-y: auto; overflow-x: hidden;
+      padding: 4px 0;
+    }
+    .sidebar-menu::-webkit-scrollbar { width: 4px; }
+    .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
+
+    .menu-item {
+      display: flex; align-items: center;
+      padding: 0 16px; height: 40px;
+      color: var(--sidebar-text);
+      cursor: pointer; transition: all 0.2s;
+      white-space: nowrap; position: relative;
+      gap: 10px; font-size: 14px;
+      text-decoration: none;
+    }
+    .menu-item:hover { color: var(--sidebar-text-active); }
+    .menu-item.active {
+      color: var(--sidebar-text-active);
+      background: var(--primary);
+      border-radius: 0;
+    }
+    .menu-item .menu-icon { width: 16px; height: 16px; flex-shrink: 0; }
+    .menu-item .menu-label { overflow: hidden; transition: opacity 0.2s; }
+    .sidebar.collapsed .menu-label { opacity: 0; width: 0; }
+    .sidebar.collapsed .menu-item { justify-content: center; padding: 0; }
+    .sidebar.collapsed .menu-arrow { display: none; }
+
+    .menu-group-title {
+      padding: 8px 16px 4px;
+      font-size: 11px; color: rgba(255,255,255,0.3);
+      text-transform: uppercase; letter-spacing: 0.5px;
+      white-space: nowrap; overflow: hidden;
+    }
+    .sidebar.collapsed .menu-group-title { text-align: center; padding: 8px 4px 4px; font-size: 0; }
+    .sidebar.collapsed .menu-group-title::after { content: '···'; font-size: 11px; }
+
+    .menu-arrow {
+      margin-left: auto; width: 14px; height: 14px;
+      transition: transform 0.2s; flex-shrink: 0;
+    }
+    .menu-arrow.expanded { transform: rotate(90deg); }
+
+    .menu-sub {
+      max-height: 0; overflow: hidden;
+      transition: max-height 0.3s cubic-bezier(0.2, 0, 0, 1);
+      background: var(--sidebar-bg-light);
+    }
+    .menu-sub.open { max-height: 500px; }
+    .menu-sub .menu-item { padding-left: 48px; height: 36px; font-size: 13px; }
+    .sidebar.collapsed .menu-sub .menu-item { padding-left: 0; }
+
+    /* Header */
+    .header {
+      height: var(--header-height);
+      background: #fff;
+      border-bottom: 1px solid #f0f0f0;
+      display: flex; align-items: center;
+      padding: 0 16px;
+      flex-shrink: 0;
+    }
+    .header-left { display: flex; align-items: center; gap: 8px; }
+    .header-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
+    .header-btn {
+      width: 36px; height: 36px;
+      display: flex; align-items: center; justify-content: center;
+      border-radius: 6px; cursor: pointer;
+      color: #666; transition: all 0.2s; border: none; background: none;
+    }
+    .header-btn:hover { background: #f5f5f5; color: #333; }
+
+    .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #999; margin-left: 4px; }
+    .breadcrumb a { color: #666; text-decoration: none; }
+    .breadcrumb a:hover { color: var(--primary); }
+    .breadcrumb .current { color: #333; }
+    .breadcrumb .sep { color: #d9d9d9; }
+
+    .avatar {
+      width: 28px; height: 28px; border-radius: 50%;
+      background: var(--primary); color: #fff;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 12px; font-weight: 600; cursor: pointer;
+    }
+    .user-dropdown-trigger {
+      display: flex; align-items: center; gap: 6px;
+      padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: all 0.2s;
+    }
+    .user-dropdown-trigger:hover { background: #f5f5f5; }
+    .user-name { font-size: 13px; color: #333; }
+
+    /* Tabbar */
+    .tabbar {
+      height: var(--tabbar-height);
+      background: #fff;
+      border-bottom: 1px solid #f0f0f0;
+      display: flex; align-items: flex-end;
+      padding: 0 12px;
+      flex-shrink: 0;
+      overflow-x: auto;
+      gap: 2px;
+    }
+    .tabbar::-webkit-scrollbar { height: 0; }
+
+    .tab {
+      display: flex; align-items: center; gap: 6px;
+      padding: 6px 12px;
+      font-size: 12px; color: #666;
+      cursor: pointer; white-space: nowrap;
+      border-radius: 6px 6px 0 0;
+      transition: all 0.2s;
+      background: transparent;
+      border: 1px solid transparent;
+      border-bottom: none;
+      position: relative;
+      height: 30px;
+    }
+    .tab:hover { color: var(--primary); }
+    .tab.active {
+      color: var(--primary);
+      background: var(--content-bg);
+      border-color: #f0f0f0;
+    }
+    .tab .tab-close {
+      width: 14px; height: 14px;
+      display: flex; align-items: center; justify-content: center;
+      border-radius: 50%; font-size: 10px;
+      opacity: 0; transition: all 0.15s;
+    }
+    .tab:hover .tab-close { opacity: 1; }
+    .tab .tab-close:hover { background: rgba(0,0,0,0.1); }
+    .tab .tab-pin { width: 12px; height: 12px; color: var(--primary); }
+
+    /* Content */
+    .content-area {
+      flex: 1; background: var(--content-bg);
+      padding: 16px; overflow-y: auto;
+    }
+
+    /* Dropdown */
+    .dropdown {
+      position: absolute; top: 100%; right: 0;
+      background: #fff; border-radius: 8px;
+      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
+      padding: 4px; min-width: 160px;
+      opacity: 0; visibility: hidden;
+      transform: translateY(4px);
+      transition: all 0.2s; z-index: 200;
+    }
+    .dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
+    .dropdown-item {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 12px; font-size: 13px; color: #333;
+      border-radius: 4px; cursor: pointer; transition: all 0.15s;
+    }
+    .dropdown-item:hover { background: #f5f5f5; }
+    .dropdown-item.danger { color: #ff4d4f; }
+    .dropdown-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
+
+    /* Notification badge */
+    .badge {
+      position: relative;
+    }
+    .badge::after {
+      content: ''; position: absolute; top: 6px; right: 6px;
+      width: 8px; height: 8px; background: #ff4d4f;
+      border-radius: 50%; border: 2px solid #fff;
+    }
+    /* Drawer */
+    /* Copy Store Modal */
+    .csm-mask { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2000; opacity:0; pointer-events:none; transition:opacity 0.25s; display:flex; align-items:center; justify-content:center; }
+    .csm-mask.open { opacity:1; pointer-events:auto; }
+    .csm-modal { background:#fff; border-radius:10px; width:460px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(0,0,0,0.12); transform:scale(0.92); transition:transform 0.25s; }
+    .csm-mask.open .csm-modal { transform:scale(1); }
+    .csm-header { padding:16px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; }
+    .csm-header h3 { font-size:15px; font-weight:600; color:#333; margin:0; }
+    .csm-close { width:28px; height:28px; border:none; background:none; cursor:pointer; color:#999; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:16px; }
+    .csm-close:hover { background:#f5f5f5; color:#333; }
+    .csm-body { padding:16px 20px; overflow-y:auto; flex:1; }
+    .csm-warn { display:flex; align-items:center; gap:6px; padding:8px 12px; background:#fff7e6; border:1px solid #ffe58f; border-radius:6px; font-size:12px; color:#d46b08; margin-bottom:14px; }
+    .csm-all { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid #f0f0f0; margin-bottom:6px; font-size:13px; color:#333; cursor:pointer; }
+    .csm-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f5f5f5; cursor:pointer; }
+    .csm-item:last-child { border-bottom:none; }
+    .csm-item:hover { background:#fafafa; margin:0 -20px; padding:10px 20px; }
+    .csm-cb { width:16px; height:16px; border-radius:4px; border:1px solid #d9d9d9; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
+    .csm-cb.checked { background:var(--primary); border-color:var(--primary); }
+    .csm-cb.checked::after { content:'✓'; color:#fff; font-size:11px; }
+    .csm-store-name { font-size:13px; font-weight:500; color:#333; }
+    .csm-store-addr { font-size:11px; color:#999; margin-top:2px; }
+    .csm-footer { padding:12px 20px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; gap:8px; }
+    .csm-btn { height:32px; padding:0 16px; border-radius:6px; font-size:13px; cursor:pointer; border:1px solid #d9d9d9; background:#fff; color:#333; transition:all 0.2s; }
+    .csm-btn:hover { border-color:var(--primary); color:var(--primary); }
+    .csm-btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
+    .csm-btn-primary:hover { opacity:0.85; color:#fff; }
+    .drawer-mask { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1000; opacity:0; visibility:hidden; transition:all 0.3s; }
+    .drawer-mask.open { opacity:1; visibility:visible; }
+    .drawer-panel { position:fixed; top:0; right:0; bottom:0; width:620px; background:#fff; z-index:1001; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.2,0,0,1); display:flex; flex-direction:column; box-shadow:-6px 0 16px rgba(0,0,0,0.08); }
+    .drawer-panel.open { transform:translateX(0); }
+    .drawer-header { height:50px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f0f0f0; flex-shrink:0; }
+    .drawer-header .title { font-size:15px; font-weight:600; color:#333; }
+    .drawer-close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; border-radius:6px; color:#999; }
+    .drawer-close:hover { background:#f5f5f5; color:#333; }
+    .drawer-body { flex:1; overflow-y:auto; padding:20px; }
+    .drawer-footer { padding:12px 20px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; gap:10px; flex-shrink:0; }
+    .df-section { margin-bottom:20px; }
+    .df-section-title { font-size:13px; font-weight:600; color:#333; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #f5f5f5; }
+    .df-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
+    .df-item { display:flex; flex-direction:column; gap:5px; }
+    .df-item.full { grid-column:1/-1; }
+    .df-label { font-size:12px; color:#666; }
+    .df-label .req { color:#ff4d4f; margin-right:2px; }
+    .df-input, .df-select { height:32px; padding:0 10px; border:1px solid #d9d9d9; border-radius:6px; font-size:13px; outline:none; transition:border-color 0.2s; background:#fff; font-family:inherit; width:100%; box-sizing:border-box; }
+    .df-input:focus, .df-select:focus { border-color:var(--primary); }
+    .df-hint { font-size:11px; color:#999; }
+    .df-radio-group { display:flex; border:1px solid #d9d9d9; border-radius:6px; overflow:hidden; }
+    .df-radio-btn { flex:1; height:32px; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; background:#fff; color:#666; border:none; border-right:1px solid #d9d9d9; transition:all 0.2s; }
+    .df-radio-btn:last-child { border-right:none; }
+    .df-radio-btn.active { background:var(--primary); color:#fff; }
+    .df-delivery-panel { margin-top:12px; padding:14px; background:#fafafa; border-radius:6px; border:1px solid #f0f0f0; }
+    .df-map-placeholder { height:180px; background:#e8e8e8; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#999; font-size:13px; margin-top:8px; border:1px dashed #d9d9d9; }
+    .df-switch-group { display:flex; gap:20px; flex-wrap:wrap; }
+    .df-switch-item { display:flex; align-items:center; gap:8px; font-size:13px; color:#333; }
+    .df-switch { width:36px; height:20px; border-radius:10px; background:#d9d9d9; position:relative; cursor:pointer; transition:background 0.2s; }
+    .df-switch.on { background:var(--primary); }
+    .df-switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
+    .df-switch.on::after { left:18px; }
+    .df-upload-box { width:90px; height:90px; border:1px dashed #d9d9d9; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:#999; font-size:11px; gap:4px; }
+    .df-upload-box:hover { border-color:var(--primary); color:var(--primary); }
+    .df-addr-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
+    .df-coord-row { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; }
+    .df-btn { height:32px; padding:0 16px; border-radius:6px; font-size:13px; cursor:pointer; border:1px solid #d9d9d9; background:#fff; color:#333; display:inline-flex; align-items:center; gap:6px; }
+    .df-btn:hover { border-color:var(--primary); color:var(--primary); }
+    .df-btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
+    .df-btn-primary:hover { opacity:0.85; color:#fff; }
+
+    /* ================================================================
+       GLOBAL COMPONENT DESIGN SYSTEM (.g- prefix)
+       All page fragments inherit these styles automatically.
+       ================================================================ */
+
+    /* --- Tokens --- */
+    :root {
+      --g-radius: 8px;
+      --g-radius-sm: 6px;
+      --g-radius-lg: 12px;
+      --g-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
+      --g-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+      --g-shadow-md: 0 4px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
+      --g-shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
+      --g-border: #f0f0f0;
+      --g-border-hover: #d9d9d9;
+      --g-bg-subtle: #fafafa;
+      --g-bg-tint: color-mix(in srgb, var(--primary) 4%, #fff);
+      --g-text: #1f1f1f;
+      --g-text-secondary: #666;
+      --g-text-muted: #999;
+      --g-text-placeholder: #bbb;
+      --g-danger: #f5222d;
+      --g-success: #52c41a;
+      --g-warning: #fa8c16;
+      --g-transition: 200ms cubic-bezier(.4,0,.2,1);
+    }
+
+    /* --- Card --- */
+    .g-card {
+      background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+      padding: 20px 24px; transition: box-shadow var(--g-transition);
+    }
+    .g-card:hover { box-shadow: var(--g-shadow); }
+    .g-card-title {
+      font-size: 15px; font-weight: 600; color: var(--g-text); margin-bottom: 16px;
+      padding-bottom: 12px; border-bottom: 1px solid #f5f5f5;
+    }
+    .g-card-hd {
+      display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
+    }
+    .g-card-hd-title { font-size: 15px; font-weight: 600; color: var(--g-text); }
+
+    /* --- Button --- */
+    .g-btn {
+      height: 32px; padding: 0 16px; border-radius: var(--g-radius-sm); font-size: 13px;
+      cursor: pointer; border: 1px solid var(--g-border-hover); background: #fff; color: var(--g-text);
+      display: inline-flex; align-items: center; justify-content: center; gap: 5px;
+      transition: all var(--g-transition); white-space: nowrap; user-select: none;
+      box-shadow: var(--g-shadow-sm);
+    }
+    .g-btn:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--g-shadow); }
+    .g-btn:active { transform: translateY(1px); }
+    .g-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
+    .g-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
+    .g-btn-primary:hover { opacity: .88; color: #fff; }
+    .g-btn-danger { color: var(--g-danger); border-color: var(--g-danger); }
+    .g-btn-danger:hover { background: var(--g-danger); color: #fff; }
+    .g-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
+    .g-btn-lg { height: 36px; padding: 0 20px; font-size: 14px; }
+
+    /* --- Form --- */
+    .g-form-group { margin-bottom: 16px; }
+    .g-form-label {
+      display: block; font-size: 13px; color: var(--g-text); margin-bottom: 6px; font-weight: 500;
+    }
+    .g-form-label.required::before { content: '*'; color: var(--g-danger); margin-right: 3px; }
+    .g-form-row { display: flex; align-items: flex-start; margin-bottom: 14px; gap: 12px; }
+    .g-form-row-label { width: 80px; flex-shrink: 0; font-size: 13px; color: var(--g-text-secondary); line-height: 32px; text-align: right; }
+    .g-form-row-label.required::before { content: '*'; color: var(--g-danger); margin-right: 2px; }
+    .g-form-ctrl { flex: 1; min-width: 0; }
+    .g-input, .g-select {
+      width: 100%; height: 34px; padding: 0 11px; border: 1px solid #d9d9d9; border-radius: var(--g-radius-sm);
+      font-size: 13px; outline: none; background: #fff; color: var(--g-text);
+      box-sizing: border-box; transition: all var(--g-transition);
+    }
+    .g-input:focus, .g-select:focus {
+      border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
+    }
+    .g-input::placeholder { color: var(--g-text-placeholder); }
+    .g-select { cursor: pointer; }
+    .g-textarea {
+      width: 100%; padding: 8px 11px; border: 1px solid #d9d9d9; border-radius: var(--g-radius-sm);
+      font-size: 13px; outline: none; background: #fff; color: var(--g-text);
+      box-sizing: border-box; resize: vertical; font-family: inherit; transition: all var(--g-transition);
+    }
+    .g-textarea:focus {
+      border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
+    }
+    .g-hint { font-size: 11px; color: var(--g-text-muted); margin-top: 4px; }
+    .g-form-inline { display: flex; gap: 8px; align-items: center; }
+    .g-form-inline .g-input { width: auto; flex: 1; }
+    .g-form-unit { font-size: 12px; color: var(--g-text-muted); white-space: nowrap; }
+
+    /* --- Drawer --- */
+    .g-drawer-mask {
+      position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1000;
+      opacity: 0; pointer-events: none; transition: opacity .3s;
+    }
+    .g-drawer-mask.open { opacity: 1; pointer-events: auto; }
+    .g-drawer {
+      position: fixed; top: 0; right: 0; height: 100%; background: #fff; z-index: 1001;
+      transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
+      display: flex; flex-direction: column; box-shadow: var(--g-shadow-lg);
+    }
+    .g-drawer.open { transform: translateX(0); }
+    .g-drawer-hd {
+      height: 56px; display: flex; align-items: center; padding: 0 24px;
+      border-bottom: 1px solid var(--g-border); flex-shrink: 0;
+    }
+    .g-drawer-title { font-size: 16px; font-weight: 600; color: var(--g-text); flex: 1; }
+    .g-drawer-close {
+      width: 32px; height: 32px; border: none; background: none; font-size: 20px;
+      cursor: pointer; color: #999; display: flex; align-items: center; justify-content: center;
+      border-radius: var(--g-radius-sm); transition: all var(--g-transition);
+    }
+    .g-drawer-close:hover { background: #f5f5f5; color: var(--g-text); }
+    .g-drawer-bd { flex: 1; overflow-y: auto; padding: 20px 24px; }
+    .g-drawer-ft {
+      padding: 14px 24px; border-top: 1px solid var(--g-border);
+      display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
+    }
+
+    /* --- Toggle --- */
+    .g-toggle {
+      position: relative; width: 40px; height: 22px; border-radius: 11px;
+      background: #ccc; cursor: pointer; transition: background var(--g-transition); flex-shrink: 0;
+    }
+    .g-toggle::after {
+      content: ''; position: absolute; top: 2px; left: 2px;
+      width: 18px; height: 18px; border-radius: 50%; background: #fff;
+      transition: transform var(--g-transition); box-shadow: 0 1px 3px rgba(0,0,0,.15);
+    }
+    .g-toggle.on { background: var(--primary); }
+    .g-toggle.on::after { transform: translateX(18px); }
+    .g-toggle-wrap { display: flex; align-items: center; gap: 10px; }
+    .g-toggle-label { font-size: 13px; color: var(--g-text); }
+    /* Also support <label><input type=checkbox><span class=g-toggle-sl></span></label> pattern */
+    .g-toggle-input { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
+    .g-toggle-input input { opacity: 0; width: 0; height: 0; }
+    .g-toggle-sl {
+      position: absolute; inset: 0; background: #ccc; border-radius: 11px;
+      cursor: pointer; transition: background var(--g-transition);
+    }
+    .g-toggle-sl::before {
+      content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
+      background: #fff; left: 2px; top: 2px; transition: transform var(--g-transition);
+      box-shadow: 0 1px 3px rgba(0,0,0,.15);
+    }
+    .g-toggle-input input:checked + .g-toggle-sl { background: var(--primary); }
+    .g-toggle-input input:checked + .g-toggle-sl::before { transform: translateX(18px); }
+
+    /* --- Pill / Chip --- */
+    .g-pill {
+      display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 16px;
+      border: 1px solid #d9d9d9; font-size: 12px; cursor: pointer;
+      transition: all var(--g-transition); user-select: none; background: #fff;
+    }
+    .g-pill:hover { border-color: var(--primary); }
+    .g-pill.checked {
+      background: color-mix(in srgb, var(--primary) 10%, transparent);
+      border-color: var(--primary); color: var(--primary); font-weight: 500;
+    }
+
+    /* --- Tag / Badge --- */
+    .g-tag {
+      display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500;
+    }
+    .g-tag-blue { background: #e6f7ff; color: #1890ff; }
+    .g-tag-green { background: #f6ffed; color: #52c41a; }
+    .g-tag-orange { background: #fff7e6; color: #fa8c16; }
+    .g-tag-red { background: #fff1f0; color: #f5222d; }
+    .g-tag-purple { background: #f9f0ff; color: #722ed1; }
+    .g-tag-gray { background: #f5f5f5; color: #999; }
+    .g-tag-solid { color: #fff; }
+
+    /* --- Segmented Control --- */
+    .g-seg {
+      display: flex; border-radius: var(--g-radius); overflow: hidden;
+      border: 1px solid #e8e8e8; background: #f5f5f5;
+    }
+    .g-seg-item {
+      flex: 1; text-align: center; padding: 8px 0; font-size: 13px; cursor: pointer;
+      transition: all var(--g-transition); color: var(--g-text-muted); user-select: none;
+      border-right: 1px solid #e8e8e8; position: relative;
+    }
+    .g-seg-item:last-child { border-right: none; }
+    .g-seg-item:hover { color: var(--g-text-secondary); background: #f0f0f0; }
+    .g-seg-item.active {
+      background: #fff; color: var(--primary); font-weight: 600;
+      box-shadow: 0 1px 4px rgba(0,0,0,.06);
+    }
+
+    /* --- Upload Zone --- */
+    .g-upload-zone {
+      border: 2px dashed #d9d9d9; border-radius: var(--g-radius-lg); padding: 24px;
+      text-align: center; cursor: pointer; transition: all var(--g-transition);
+      color: var(--g-text-muted); font-size: 13px; background: var(--g-bg-subtle);
+    }
+    .g-upload-zone:hover {
+      border-color: var(--primary); color: var(--primary);
+      background: var(--g-bg-tint); box-shadow: var(--g-shadow);
+    }
+    .g-upload-zone svg { display: block; margin: 0 auto 8px; }
+
+    /* --- Action Link --- */
+    .g-action {
+      font-size: 13px; color: var(--primary); cursor: pointer; text-decoration: none;
+      transition: opacity var(--g-transition);
+    }
+    .g-action:hover { opacity: .75; }
+    .g-action-danger { color: var(--g-danger); }
+
+    /* --- Section Label (small caps) --- */
+    .g-section-label {
+      font-size: 11px; color: var(--g-text-muted); font-weight: 600;
+      letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px;
+    }
+
+    /* --- Divider --- */
+    .g-divider {
+      height: 1px; background: linear-gradient(90deg, transparent, #e8e8e8, transparent);
+      margin: 20px 0;
+    }
+
+    /* --- Table --- */
+    .g-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    .g-table th {
+      text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 500;
+      color: var(--g-text-muted); background: var(--g-bg-subtle); border-bottom: 1px solid var(--g-border);
+    }
+    .g-table td {
+      padding: 12px; border-bottom: 1px solid #f5f5f5; color: var(--g-text);
+    }
+    .g-table tr:hover td { background: color-mix(in srgb, var(--primary) 2%, #fff); }
+
+    /* --- Empty State --- */
+    .g-empty {
+      text-align: center; padding: 48px 20px; color: var(--g-text-muted); font-size: 14px;
+    }
+    .g-empty svg { display: block; margin: 0 auto 12px; color: #ddd; }
+
+    /* --- Pagination --- */
+    .g-pagination {
+      display: flex; align-items: center; justify-content: flex-end;
+      gap: 6px; margin-top: 18px; font-size: 13px; color: var(--g-text-secondary);
+    }
+    .g-page-btn {
+      min-width: 32px; height: 32px; border-radius: var(--g-radius-sm);
+      border: 1px solid #d9d9d9; background: #fff; cursor: pointer; font-size: 13px;
+      display: inline-flex; align-items: center; justify-content: center;
+      transition: all var(--g-transition);
+    }
+    .g-page-btn:hover { border-color: var(--primary); color: var(--primary); }
+    .g-page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
+    .g-page-btn:disabled { opacity: .4; cursor: not-allowed; }
+
+  </style>
+</head>
+<body>
+  <div style="display:flex; height:100vh;">
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-logo">
+        <div class="logo-icon">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/><path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/><path d="M12 3v6"/></svg>
+        </div>
+        <span class="logo-text">TakeoutSaaS</span>
+      </div>
+      <nav class="sidebar-menu">
+        <!-- ===== 核心业务 ===== -->
+
+        <!-- 1. 仪表盘 -->
+        <div class="menu-parent" data-menu="dashboard">
+          <div class="menu-item active" data-tab="工作台" onclick="switchTab(this, '工作台')">
+            <i data-lucide="layout-dashboard" class="menu-icon"></i>
+            <span class="menu-label">工作台</span>
+          </div>
+        </div>
+
+        <!-- 2. 门店管理 -->
+        <div class="menu-parent" data-menu="store">
+          <div class="menu-item" onclick="toggleMenu('store')">
+            <i data-lucide="store" class="menu-icon"></i>
+            <span class="menu-label">门店管理</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-store">
+            <div class="menu-item" data-tab="门店列表" onclick="switchTab(this, '门店列表')"><span class="menu-label">门店列表</span></div>
+            <div class="menu-item" data-tab="营业时间" onclick="switchTab(this, '营业时间')"><span class="menu-label">营业时间</span></div>
+            <div class="menu-item" data-tab="配送设置" onclick="switchTab(this, '配送设置')"><span class="menu-label">配送设置</span></div>
+            <div class="menu-item" data-tab="自提设置" onclick="switchTab(this, '自提设置')"><span class="menu-label">自提设置</span></div>
+            <div class="menu-item" data-tab="堂食管理" onclick="switchTab(this, '堂食管理')"><span class="menu-label">堂食管理</span></div>
+            <div class="menu-item" data-tab="费用设置" onclick="switchTab(this, '费用设置')"><span class="menu-label">费用设置</span></div>
+            <div class="menu-item" data-tab="员工排班" onclick="switchTab(this, '员工排班')"><span class="menu-label">员工排班</span></div>
+          </div>
+        </div>
+
+        <!-- 3. 商品管理 -->
+        <div class="menu-parent" data-menu="product">
+          <div class="menu-item" onclick="toggleMenu('product')">
+            <i data-lucide="package" class="menu-icon"></i>
+            <span class="menu-label">商品管理</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-product">
+            <div class="menu-item" data-tab="商品列表" onclick="switchTab(this, '商品列表')"><span class="menu-label">商品列表</span></div>
+            <div class="menu-item" data-tab="分类管理" onclick="switchTab(this, '分类管理')"><span class="menu-label">分类管理</span></div>
+            <div class="menu-item" data-tab="规格做法" onclick="switchTab(this, '规格做法')"><span class="menu-label">规格做法</span></div>
+            <div class="menu-item" data-tab="加料管理" onclick="switchTab(this, '加料管理')"><span class="menu-label">加料管理</span></div>
+            <div class="menu-item" data-tab="商品标签" onclick="switchTab(this, '商品标签')"><span class="menu-label">商品标签</span></div>
+            <div class="menu-item" data-tab="时段供应" onclick="switchTab(this, '时段供应')"><span class="menu-label">时段供应</span></div>
+            <div class="menu-item" data-tab="批量工具" onclick="switchTab(this, '批量工具')"><span class="menu-label">批量工具</span></div>
+          </div>
+        </div>
+
+        <!-- 4. 订单管理 -->
+        <div class="menu-parent" data-menu="order">
+          <div class="menu-item" onclick="toggleMenu('order')">
+            <i data-lucide="clipboard-list" class="menu-icon"></i>
+            <span class="menu-label">订单管理</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-order">
+            <div class="menu-item" data-tab="订单大厅" onclick="switchTab(this, '订单大厅')"><span class="menu-label">订单大厅</span></div>
+            <div class="menu-item" data-tab="全部订单" onclick="switchTab(this, '全部订单')"><span class="menu-label">全部订单</span></div>
+            <div class="menu-item" data-tab="退款售后" onclick="switchTab(this, '退款售后')"><span class="menu-label">退款售后</span></div>
+            <div class="menu-item" data-tab="订单设置" onclick="switchTab(this, '订单设置')"><span class="menu-label">订单设置</span></div>
+          </div>
+        </div>
+
+        <!-- 5. 评价管理 -->
+        <div class="menu-parent" data-menu="review">
+          <div class="menu-item" data-tab="评价管理" onclick="switchTab(this, '评价管理')">
+            <i data-lucide="message-square-text" class="menu-icon"></i>
+            <span class="menu-label">评价管理</span>
+          </div>
+        </div>
+
+        <!-- 6. 营销中心 -->
+        <div class="menu-parent" data-menu="marketing">
+          <div class="menu-item" onclick="toggleMenu('marketing')">
+            <i data-lucide="megaphone" class="menu-icon"></i>
+            <span class="menu-label">营销中心</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-marketing">
+            <div class="menu-item" data-tab="营销日历" onclick="switchTab(this, '营销日历')"><span class="menu-label">营销日历</span></div>
+            <div class="menu-item" data-tab="优惠券" onclick="switchTab(this, '优惠券')"><span class="menu-label">优惠券</span></div>
+            <div class="menu-item" data-tab="满减活动" onclick="switchTab(this, '满减活动')"><span class="menu-label">满减活动</span></div>
+            <div class="menu-item" data-tab="限时折扣" onclick="switchTab(this, '限时折扣')"><span class="menu-label">限时折扣</span></div>
+            <div class="menu-item" data-tab="秒杀活动" onclick="switchTab(this, '秒杀活动')"><span class="menu-label">秒杀活动</span></div>
+            <div class="menu-item" data-tab="新客有礼" onclick="switchTab(this, '新客有礼')"><span class="menu-label">新客有礼</span></div>
+            <div class="menu-item" data-tab="次卡管理" onclick="switchTab(this, '次卡管理')"><span class="menu-label">次卡管理</span></div>
+          </div>
+        </div>
+
+        <!-- 7. 会员中心 -->
+        <div class="menu-parent" data-menu="member">
+          <div class="menu-item" onclick="toggleMenu('member')">
+            <i data-lucide="crown" class="menu-icon"></i>
+            <span class="menu-label">会员中心</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-member">
+            <div class="menu-item" data-tab="会员管理" onclick="switchTab(this, '会员管理')"><span class="menu-label">会员管理</span></div>
+            <div class="menu-item" data-tab="储值卡" onclick="switchTab(this, '储值卡')"><span class="menu-label">储值卡</span></div>
+            <div class="menu-item" data-tab="积分商城" onclick="switchTab(this, '积分商城')"><span class="menu-label">积分商城</span></div>
+            <div class="menu-item" data-tab="客户画像" onclick="switchTab(this, '客户画像')"><span class="menu-label">客户画像</span></div>
+            <div class="menu-item" data-tab="消息触达" onclick="switchTab(this, '消息触达')"><span class="menu-label">消息触达</span></div>
+          </div>
+        </div>
+
+        <!-- 6. 财务中心 -->
+        <div class="menu-parent" data-menu="finance">
+          <div class="menu-item" onclick="toggleMenu('finance')">
+            <i data-lucide="wallet" class="menu-icon"></i>
+            <span class="menu-label">财务中心</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-finance">
+            <div class="menu-item" data-tab="财务概览" onclick="switchTab(this, '财务概览')"><span class="menu-label">财务概览</span></div>
+            <div class="menu-item" data-tab="交易流水" onclick="switchTab(this, '交易流水')"><span class="menu-label">交易流水</span></div>
+            <div class="menu-item" data-tab="到账查询" onclick="switchTab(this, '到账查询')"><span class="menu-label">到账查询</span></div>
+            <div class="menu-item" data-tab="成本管理" onclick="switchTab(this, '成本管理')"><span class="menu-label">成本管理</span></div>
+            <div class="menu-item" data-tab="发票管理" onclick="switchTab(this, '发票管理')"><span class="menu-label">发票管理</span></div>
+            <div class="menu-item" data-tab="经营报表" onclick="switchTab(this, '经营报表')"><span class="menu-label">经营报表</span></div>
+          </div>
+        </div>
+
+        <!-- 7. 数据统计 -->
+        <div class="menu-parent" data-menu="statistics">
+          <div class="menu-item" onclick="toggleMenu('statistics')">
+            <i data-lucide="bar-chart-3" class="menu-icon"></i>
+            <span class="menu-label">数据统计</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-statistics">
+            <div class="menu-item" data-tab="商品分析" onclick="switchTab(this, '商品分析')"><span class="menu-label">商品分析</span></div>
+            <div class="menu-item" data-tab="客户分析" onclick="switchTab(this, '客户分析')"><span class="menu-label">客户分析</span></div>
+            <div class="menu-item" data-tab="订单分析" onclick="switchTab(this, '订单分析')"><span class="menu-label">订单分析</span></div>
+            <div class="menu-item" data-tab="营销分析" onclick="switchTab(this, '营销分析')"><span class="menu-label">营销分析</span></div>
+          </div>
+        </div>
+
+        <!-- 8. 库存管理 -->
+        <div class="menu-parent" data-menu="inventory">
+          <div class="menu-item" onclick="toggleMenu('inventory')">
+            <i data-lucide="warehouse" class="menu-icon"></i>
+            <span class="menu-label">库存管理</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-inventory">
+            <div class="menu-item" data-tab="库存总览" onclick="switchTab(this, '库存总览')"><span class="menu-label">库存总览</span></div>
+            <div class="menu-item" data-tab="出入库管理" onclick="switchTab(this, '出入库管理')"><span class="menu-label">出入库管理</span></div>
+            <div class="menu-item" data-tab="采购管理" onclick="switchTab(this, '采购管理')"><span class="menu-label">采购管理</span></div>
+            <div class="menu-item" data-tab="估清管理" onclick="switchTab(this, '估清管理')"><span class="menu-label">估清管理</span></div>
+            <div class="menu-item" data-tab="效期管理" onclick="switchTab(this, '效期管理')"><span class="menu-label">效期管理</span></div>
+          </div>
+        </div>
+
+        <!-- ===== 高级功能 ===== -->
+        <div class="menu-group-title">高级功能</div>
+
+        <!-- 9. 多渠道整合 -->
+        <div class="menu-parent" data-menu="channel">
+          <div class="menu-item" onclick="toggleMenu('channel')">
+            <i data-lucide="git-merge" class="menu-icon"></i>
+            <span class="menu-label">多渠道整合</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-channel">
+            <div class="menu-item" data-tab="渠道管理" onclick="switchTab(this, '渠道管理')"><span class="menu-label">渠道管理</span></div>
+            <div class="menu-item" data-tab="订单聚合" onclick="switchTab(this, '订单聚合')"><span class="menu-label">订单聚合</span></div>
+            <div class="menu-item" data-tab="菜单同步" onclick="switchTab(this, '菜单同步')"><span class="menu-label">菜单同步</span></div>
+            <div class="menu-item" data-tab="配送调度" onclick="switchTab(this, '配送调度')"><span class="menu-label">配送调度</span></div>
+          </div>
+        </div>
+
+        <!-- 10. 增值服务 -->
+        <div class="menu-parent" data-menu="valueadded">
+          <div class="menu-item" onclick="toggleMenu('valueadded')">
+            <i data-lucide="sparkles" class="menu-icon"></i>
+            <span class="menu-label">增值服务</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-valueadded">
+            <div class="menu-item" data-tab="小程序商城" onclick="switchTab(this, '小程序商城')"><span class="menu-label">小程序商城</span></div>
+            <div class="menu-item" data-tab="店铺装修" onclick="switchTab(this, '店铺装修')"><span class="menu-label">店铺装修</span></div>
+            <div class="menu-item" data-tab="连锁管理" onclick="switchTab(this, '连锁管理')"><span class="menu-label">连锁管理</span></div>
+            <div class="menu-item" data-tab="AI智能" onclick="switchTab(this, 'AI智能')"><span class="menu-label">AI智能</span></div>
+          </div>
+        </div>
+
+        <!-- 11. 合规安全 -->
+        <div class="menu-parent" data-menu="compliance">
+          <div class="menu-item" onclick="toggleMenu('compliance')">
+            <i data-lucide="shield-check" class="menu-icon"></i>
+            <span class="menu-label">合规安全</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-compliance">
+            <div class="menu-item" data-tab="资质证照" onclick="switchTab(this, '资质证照')"><span class="menu-label">资质证照</span></div>
+            <div class="menu-item" data-tab="溯源管理" onclick="switchTab(this, '溯源管理')"><span class="menu-label">溯源管理</span></div>
+            <div class="menu-item" data-tab="资质到期提醒" onclick="switchTab(this, '资质到期提醒')"><span class="menu-label">资质到期提醒</span></div>
+            <div class="menu-item" data-tab="电子发票" onclick="switchTab(this, '电子发票')"><span class="menu-label">电子发票</span></div>
+            <div class="menu-item" data-tab="税务报表" onclick="switchTab(this, '税务报表')"><span class="menu-label">税务报表</span></div>
+          </div>
+        </div>
+
+        <!-- ===== 系统管理 ===== -->
+        <div class="menu-group-title">系统管理</div>
+
+        <!-- 12. 设置中心 -->
+        <div class="menu-parent" data-menu="settings">
+          <div class="menu-item" onclick="toggleMenu('settings')">
+            <i data-lucide="settings" class="menu-icon"></i>
+            <span class="menu-label">设置中心</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-settings">
+            <div class="menu-item" data-tab="基本信息" onclick="switchTab(this, '基本信息')"><span class="menu-label">基本信息</span></div>
+            <div class="menu-item" data-tab="支付设置" onclick="switchTab(this, '支付设置')"><span class="menu-label">支付设置</span></div>
+            <div class="menu-item" data-tab="打印设置" onclick="switchTab(this, '打印设置')"><span class="menu-label">打印设置</span></div>
+            <div class="menu-item" data-tab="通知设置" onclick="switchTab(this, '通知设置')"><span class="menu-label">通知设置</span></div>
+          </div>
+        </div>
+
+        <!-- 13. 账号管理 -->
+        <div class="menu-parent" data-menu="account">
+          <div class="menu-item" onclick="toggleMenu('account')">
+            <i data-lucide="users" class="menu-icon"></i>
+            <span class="menu-label">账号管理</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-account">
+            <div class="menu-item" data-tab="子账号管理" onclick="switchTab(this, '子账号管理')"><span class="menu-label">子账号管理</span></div>
+            <div class="menu-item" data-tab="角色权限" onclick="switchTab(this, '角色权限')"><span class="menu-label">角色权限</span></div>
+            <div class="menu-item" data-tab="操作日志" onclick="switchTab(this, '操作日志')"><span class="menu-label">操作日志</span></div>
+          </div>
+        </div>
+
+        <!-- 14. 订阅服务 -->
+        <div class="menu-parent" data-menu="subscription">
+          <div class="menu-item" onclick="toggleMenu('subscription')">
+            <i data-lucide="credit-card" class="menu-icon"></i>
+            <span class="menu-label">订阅服务</span>
+            <i data-lucide="chevron-right" class="menu-arrow"></i>
+          </div>
+          <div class="menu-sub" id="menu-subscription">
+            <div class="menu-item" data-tab="当前套餐" onclick="switchTab(this, '当前套餐')"><span class="menu-label">当前套餐</span></div>
+            <div class="menu-item" data-tab="续费升级" onclick="switchTab(this, '续费升级')"><span class="menu-label">续费升级</span></div>
+            <div class="menu-item" data-tab="账单记录" onclick="switchTab(this, '账单记录')"><span class="menu-label">账单记录</span></div>
+          </div>
+        </div>
+      </nav>
+    </aside>
+
+    <!-- Main -->
+    <div style="flex:1; display:flex; flex-direction:column; overflow:hidden;">
+      <!-- Header -->
+      <header class="header">
+        <div class="header-left">
+          <button class="header-btn" onclick="toggleSidebar()" title="收起菜单">
+            <i data-lucide="menu" style="width:18px;height:18px;"></i>
+          </button>
+          <div class="breadcrumb">
+            <a href="#">首页</a>
+            <span class="sep">/</span>
+            <span class="current" id="breadcrumb-current">工作台</span>
+          </div>
+        </div>
+        <div class="header-right">
+          <button class="header-btn" title="搜索">
+            <i data-lucide="search" style="width:16px;height:16px;"></i>
+          </button>
+          <button class="header-btn badge" title="通知">
+            <i data-lucide="bell" style="width:16px;height:16px;"></i>
+          </button>
+          <button class="header-btn" title="全屏" onclick="toggleFullscreen()">
+            <i data-lucide="maximize" style="width:16px;height:16px;"></i>
+          </button>
+          <div style="position:relative;">
+            <div class="user-dropdown-trigger" onclick="toggleDropdown()">
+              <div class="avatar">管</div>
+              <span class="user-name">管理员</span>
+              <i data-lucide="chevron-down" style="width:12px;height:12px;color:#999;"></i>
+            </div>
+            <div class="dropdown" id="userDropdown">
+              <div class="dropdown-item"><i data-lucide="user" style="width:14px;height:14px;"></i>个人中心</div>
+              <div class="dropdown-item"><i data-lucide="store" style="width:14px;height:14px;"></i>商户中心</div>
+              <div class="dropdown-divider"></div>
+              <div class="dropdown-item danger"><i data-lucide="log-out" style="width:14px;height:14px;"></i>退出登录</div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- Tabbar -->
+      <div class="tabbar" id="tabbar">
+        <div class="tab active" data-tab="工作台">
+          <i data-lucide="pin" class="tab-pin"></i>
+          <span>工作台</span>
+        </div>
+      </div>
+
+      <!-- Content -->
+      <main class="content-area" id="contentArea">
+        <div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:14px;">
+          <div style="text-align:center;">
+            <i data-lucide="layout-dashboard" style="width:48px;height:48px;color:#d9d9d9;margin-bottom:12px;"></i>
+            <p>工作台 - 内容区域</p>
+            <p style="font-size:12px;margin-top:4px;color:#bbb;">点击左侧菜单切换页面</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <!-- Store Drawer -->
+  <div class="drawer-mask" id="drawerMask" onclick="closeDrawer()"></div>
+  <div class="drawer-panel" id="drawerPanel">
+    <div class="drawer-header">
+      <span class="title" id="drawerTitle">新增门店</span>
+      <button class="drawer-close" onclick="closeDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+    </div>
+    <div class="drawer-body">
+      <!-- 基本信息 -->
+      <div class="df-section">
+        <div class="df-section-title">基本信息</div>
+        <div class="df-grid">
+          <div class="df-item"><label class="df-label"><span class="req">*</span>门店名称</label><input class="df-input" id="df-name" placeholder="请输入门店名称"/></div>
+          <div class="df-item"><label class="df-label">门店编号</label><input class="df-input" id="df-code" placeholder="系统自动生成" disabled style="background:#f5f5f5;"/></div>
+          <div class="df-item"><label class="df-label"><span class="req">*</span>联系电话</label><input class="df-input" id="df-phone" placeholder="请输入联系电话"/></div>
+          <div class="df-item"><label class="df-label">店长姓名</label><input class="df-input" id="df-manager" placeholder="请输入店长姓名"/></div>
+          <div class="df-item"><label class="df-label">门店分类</label><select class="df-select" id="df-category"><option value="">请选择</option><option>中餐</option><option>西餐</option><option>快餐</option><option>饮品</option><option>烘焙</option><option>火锅</option></select></div>
+          <div class="df-item"><label class="df-label">所有权类型</label><select class="df-select" id="df-ownership"><option>直营</option><option>加盟</option></select></div>
+        </div>
+      </div>
+      <!-- 地址信息 -->
+      <div class="df-section">
+        <div class="df-section-title">地址信息</div>
+        <div class="df-grid">
+          <div class="df-item full"><label class="df-label"><span class="req">*</span>所在地区</label><div class="df-addr-row"><select class="df-select"><option>请选择省份</option><option>北京市</option><option>上海市</option><option>广东省</option></select><select class="df-select"><option>请选择城市</option></select><select class="df-select"><option>请选择区县</option></select></div></div>
+          <div class="df-item full"><label class="df-label"><span class="req">*</span>详细地址</label><input class="df-input" id="df-address" placeholder="街道、门牌号等"/></div>
+          <div class="df-item full"><label class="df-label">经纬度</label><div class="df-coord-row"><input class="df-input" placeholder="经度" id="df-lng"/><input class="df-input" placeholder="纬度" id="df-lat"/><button class="df-btn"><i data-lucide="map-pin" style="width:14px;height:14px;"></i>地图选点</button></div></div>
+        </div>
+      </div>
+      <!-- 配送设置 -->
+      <div class="df-section">
+        <div class="df-section-title">配送设置</div>
+        <div class="df-grid">
+          <div class="df-item full">
+            <label class="df-label">配送范围模式</label>
+            <div class="df-radio-group">
+              <button class="df-radio-btn active" onclick="switchDeliveryMode('radius',this)">半径模式</button>
+              <button class="df-radio-btn" onclick="switchDeliveryMode('polygon',this)">多边形围栏</button>
+            </div>
+          </div>
+          <div class="df-item full" id="deliveryRadius">
+            <label class="df-label">配送半径（公里）</label>
+            <input class="df-input" type="number" placeholder="例如：5" value="5" style="width:200px;"/>
+            <div class="df-hint">以门店地址为圆心，设定配送覆盖半径</div>
+          </div>
+          <div class="df-item full" id="deliveryPolygon" style="display:none;">
+            <label class="df-label">在地图上绘制配送范围</label>
+            <div class="df-map-placeholder"><i data-lucide="pentagon" style="width:24px;height:24px;margin-right:8px;"></i>点击此处打开地图，绘制多边形配送范围</div>
+            <div class="df-hint">在地图上点击多个点围出配送区域，支持多个不规则区域</div>
+          </div>
+        </div>
+      </div>
+      <!-- 服务与时间 -->
+      <div class="df-section">
+        <div class="df-section-title">服务与时间</div>
+        <div class="df-grid">
+          <div class="df-item full"><label class="df-label">支持的服务方式</label><div class="df-switch-group"><div class="df-switch-item"><div class="df-switch on" onclick="this.classList.toggle('on')"></div>外卖配送</div><div class="df-switch-item"><div class="df-switch on" onclick="this.classList.toggle('on')"></div>到店自提</div><div class="df-switch-item"><div class="df-switch" onclick="this.classList.toggle('on')"></div>堂食</div><div class="df-switch-item"><div class="df-switch" onclick="this.classList.toggle('on')"></div>预约</div><div class="df-switch-item"><div class="df-switch" onclick="this.classList.toggle('on')"></div>排队</div></div></div>
+          <div class="df-item full"><label class="df-label">默认配送时间</label><input class="df-input" placeholder="例如：09:00-22:00" id="df-hours" style="width:300px;"/><div class="df-hint">门店默认的配送服务时间段，详细时段可在"营业时间"菜单中设置</div></div>
+        </div>
+      </div>
+      <!-- 门店展示 -->
+      <div class="df-section">
+        <div class="df-section-title">门店展示</div>
+        <div class="df-grid">
+          <div class="df-item"><label class="df-label">门店封面</label><div class="df-upload-box"><i data-lucide="image-plus" style="width:22px;height:22px;"></i>上传封面</div><div class="df-hint">建议 750x420，不超过 2MB</div></div>
+          <div class="df-item"><label class="df-label">门店招牌</label><div class="df-upload-box"><i data-lucide="image-plus" style="width:22px;height:22px;"></i>上传招牌</div><div class="df-hint">门头实拍照片，用于审核</div></div>
+        </div>
+      </div>
+    </div>
+    <div class="drawer-footer">
+      <button class="df-btn" onclick="closeDrawer()">取消</button>
+      <button class="df-btn df-btn-primary"><i data-lucide="check" style="width:14px;height:14px;"></i>保存</button>
+    </div>
+  </div>
+
+  <!-- 复制到其他门店弹窗 -->
+
+  <!-- 通用商品选择器弹窗 -->
+  <style>
+    .pp-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
+    .pp-mask.open{display:flex}
+    .pp-modal{background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.12);width:720px;max-height:80vh;display:flex;flex-direction:column;animation:ppSlideUp 200ms cubic-bezier(.4,0,.2,1)}
+    @keyframes ppSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
+    .pp-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f0f0f0;flex-shrink:0}
+    .pp-header h3{font-size:16px;font-weight:600;color:#1a1a2e;margin:0}
+    .pp-header-sub{font-size:12px;color:#9ca3af;font-weight:400;margin-left:8px}
+    .pp-close{width:28px;height:28px;border-radius:6px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999;transition:200ms}
+    .pp-close:hover{background:#f3f4f6;color:#333}
+    .pp-toolbar{display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid #f3f4f6;flex-shrink:0;flex-wrap:wrap;align-items:center}
+    .pp-search{position:relative;flex:1;min-width:180px}
+    .pp-search input{width:100%;height:32px;border-radius:8px;border:1px solid #e5e7eb;padding:0 10px 0 32px;font-size:12px;outline:none;color:#1a1a2e;transition:200ms}
+    .pp-search input:focus{border-color:hsl(212,100%,45%);box-shadow:0 0 0 3px color-mix(in srgb,hsl(212,100%,45%) 12%,transparent)}
+    .pp-search i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#bbb;pointer-events:none}
+    .pp-cat-select{height:32px;border-radius:8px;border:1px solid #e5e7eb;padding:0 10px;font-size:12px;outline:none;color:#1a1a2e;min-width:120px}
+    .pp-selected-count{font-size:12px;color:hsl(212,100%,45%);font-weight:600;margin-left:auto}
+    .pp-body{flex:1;overflow-y:auto;padding:0}
+    .pp-body::-webkit-scrollbar{width:4px}
+    .pp-body::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:2px}
+    .pp-table{width:100%;border-collapse:collapse;font-size:13px}
+    .pp-table th{text-align:left;padding:8px 16px;font-size:11px;font-weight:500;color:#6b7280;background:#f8f9fb;position:sticky;top:0;z-index:1}
+    .pp-table td{padding:8px 16px;border-bottom:1px solid #f3f4f6;color:#1a1a2e}
+    .pp-table tr:hover td{background:color-mix(in srgb,hsl(212,100%,45%) 3%,#fff)}
+    .pp-table tr.pp-checked td{background:color-mix(in srgb,hsl(212,100%,45%) 8%,#fff)}
+    .pp-cb{width:16px;height:16px;border-radius:4px;border:1.5px solid #d1d5db;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:200ms;flex-shrink:0;vertical-align:middle}
+    .pp-cb.checked{background:hsl(212,100%,45%);border-color:hsl(212,100%,45%)}
+    .pp-cb svg{display:none}
+    .pp-cb.checked svg{display:block}
+    .pp-prod-cell{display:flex;align-items:center;gap:10px}
+    .pp-prod-thumb{width:36px;height:36px;border-radius:6px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#ccc}
+    .pp-prod-name{font-weight:500}
+    .pp-prod-spu{font-size:11px;color:#9ca3af;margin-top:1px}
+    .pp-prod-price{font-weight:600}
+    .pp-prod-cat{font-size:12px;color:#6b7280}
+    .pp-prod-status{display:inline-block;padding:1px 8px;border-radius:4px;font-size:11px;font-weight:500}
+    .pp-prod-status.on{background:#dcfce7;color:#22c55e}
+    .pp-prod-status.off{background:#f3f4f6;color:#9ca3af}
+    .pp-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid #f0f0f0;flex-shrink:0}
+    .pp-footer-info{font-size:12px;color:#6b7280}
+    .pp-footer-info strong{color:hsl(212,100%,45%);font-weight:600}
+    .pp-footer-btns{display:flex;gap:8px}
+  </style>
+
+  <div class="pp-mask" id="ppMask" onclick="if(event.target===this)closeProductPicker()">
+    <div class="pp-modal">
+      <div class="pp-header">
+        <div style="display:flex;align-items:baseline">
+          <h3 id="ppTitle">选择商品</h3>
+          <span class="pp-header-sub" id="ppSubtitle"></span>
+        </div>
+        <button class="pp-close" onclick="closeProductPicker()"><i data-lucide="x" style="width:16px;height:16px"></i></button>
+      </div>
+      <div class="pp-toolbar">
+        <div class="pp-search">
+          <i data-lucide="search" style="width:14px;height:14px"></i>
+          <input type="text" id="ppSearchInput" placeholder="搜索商品名称或编码…" oninput="filterPpProducts()">
+        </div>
+        <select class="pp-cat-select" id="ppCatFilter" onchange="filterPpProducts()">
+          <option value="">全部分类</option>
+          <option>热销推荐</option>
+          <option>主食</option>
+          <option>小吃凉菜</option>
+          <option>汤羹粥品</option>
+          <option>饮品</option>
+          <option>酒水</option>
+        </select>
+        <span class="pp-selected-count" id="ppSelectedCount">已选 0 个</span>
+      </div>
+      <div class="pp-body">
+        <table class="pp-table">
+          <thead>
+            <tr>
+              <th style="width:36px"><span class="pp-cb" id="ppAllCb" onclick="togglePpAll()"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span></th>
+              <th>商品</th>
+              <th>分类</th>
+              <th>售价</th>
+              <th>库存</th>
+              <th>状态</th>
+            </tr>
+          </thead>
+          <tbody id="ppProductList"></tbody>
+        </table>
+      </div>
+      <div class="pp-footer">
+        <div class="pp-footer-info">已选择 <strong id="ppFooterCount">0</strong> 个商品</div>
+        <div class="pp-footer-btns">
+          <button class="g-btn" onclick="closeProductPicker()">取消</button>
+          <button class="g-btn g-btn-primary" onclick="confirmProductPicker()">确认选择</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 复制到其他门店弹窗 -->
+  <div class="csm-mask" id="csmMask" onclick="if(event.target===this)closeCopyModal()">
+    <div class="csm-modal">
+      <div class="csm-header">
+        <h3 id="csmTitle">复制到其他门店</h3>
+        <button class="csm-close" onclick="closeCopyModal()">✕</button>
+      </div>
+      <div class="csm-body">
+        <div class="csm-warn">
+          <i data-lucide="alert-triangle" style="width:14px;height:14px;flex-shrink:0;"></i>
+          <span>将覆盖目标门店的现有设置，请谨慎操作</span>
+        </div>
+        <label class="csm-all" onclick="toggleCsmAll()">
+          <span class="csm-cb" id="csmAllCb"></span> 全选
+        </label>
+        <div id="csmStoreList"></div>
+      </div>
+      <div class="csm-footer">
+        <button class="csm-btn" onclick="closeCopyModal()">取消</button>
+        <button class="csm-btn csm-btn-primary" onclick="closeCopyModal()">确认复制</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Init Lucide icons
+    lucide.createIcons();
+
+    // Drawer functions
+    function openDrawer(mode, data) {
+      document.getElementById('drawerMask').classList.add('open');
+      document.getElementById('drawerPanel').classList.add('open');
+      const title = document.getElementById('drawerTitle');
+      // Reset form
+      document.querySelectorAll('#drawerPanel .df-input').forEach(el => { if(!el.disabled) el.value=''; });
+      if (mode === 'edit' && data) {
+        title.textContent = '编辑门店 - ' + (data.name || '');
+        if(data.name) document.getElementById('df-name').value = data.name;
+        if(data.code) document.getElementById('df-code').value = data.code;
+        if(data.phone) document.getElementById('df-phone').value = data.phone;
+        if(data.manager) document.getElementById('df-manager').value = data.manager;
+      } else {
+        title.textContent = '新增门店';
+      }
+      lucide.createIcons();
+    }
+    function closeDrawer() {
+      document.getElementById('drawerMask').classList.remove('open');
+      document.getElementById('drawerPanel').classList.remove('open');
+    }
+    function switchDeliveryMode(mode, btn) {
+      btn.parentElement.querySelectorAll('.df-radio-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      document.getElementById('deliveryRadius').style.display = mode==='radius' ? '' : 'none';
+      document.getElementById('deliveryPolygon').style.display = mode==='polygon' ? '' : 'none';
+    }
+
+    // Sidebar toggle
+    function toggleSidebar() {
+      document.getElementById('sidebar').classList.toggle('collapsed');
+    }
+
+    // Menu toggle
+    function toggleMenu(id) {
+      const sub = document.getElementById('menu-' + id);
+      const arrow = sub.previousElementSibling.querySelector('.menu-arrow');
+      sub.classList.toggle('open');
+      if (arrow) arrow.classList.toggle('expanded');
+    }
+
+    // Tab & menu switching
+    function switchTab(menuItem, label) {
+      // Update active menu
+      document.querySelectorAll('.menu-sub .menu-item').forEach(el => el.classList.remove('active'));
+      menuItem.classList.add('active');
+
+      // Update breadcrumb
+      document.getElementById('breadcrumb-current').textContent = label;
+
+      // Check if tab exists
+      const tabbar = document.getElementById('tabbar');
+      let existingTab = tabbar.querySelector(`.tab[data-tab="${label}"]`);
+
+      if (!existingTab) {
+        // Create new tab
+        const tab = document.createElement('div');
+        tab.className = 'tab';
+        tab.dataset.tab = label;
+        tab.innerHTML = `<span>${label}</span><span class="tab-close" onclick="event.stopPropagation();closeTab(this.parentElement)">✕</span>`;
+        tab.onclick = function() { activateTab(this); };
+        tabbar.appendChild(tab);
+        existingTab = tab;
+      }
+
+      activateTab(existingTab);
+    }
+
+    // Page mapping - 有独立页面的菜单项
+    const pageMap = {
+      '工作台': 'pages/dashboard.html',
+      '门店列表': 'pages/store-list.html',
+      '营业时间': 'pages/store-hours.html',
+      '配送设置': 'pages/store-delivery.html',
+      '自提设置': 'pages/store-pickup.html',
+      '堂食管理': 'pages/store-dinein.html',
+      '费用设置': 'pages/store-fees.html',
+      '资质证照': 'pages/store-qualifications.html',
+      '员工排班': 'pages/store-staff.html',
+      '商品列表': 'pages/product-list.html',
+      '分类管理': 'pages/product-category.html',
+      '规格做法': 'pages/product-specs.html',
+      '加料管理': 'pages/product-addons.html',
+      '商品标签': 'pages/product-labels.html',
+      '时段供应': 'pages/product-schedule.html',
+      '批量工具': 'pages/product-batch.html',
+      '商品详情': 'pages/product-detail.html',
+      '订单大厅': 'pages/order-board.html',
+      '全部订单': 'pages/order-list.html',
+      '退款售后': 'pages/order-refund.html',
+      '订单设置': 'pages/order-settings.html',
+      '评价管理': 'pages/reviews.html',
+      '优惠券': 'pages/mkt-coupon.html',
+      '满减活动': 'pages/mkt-reduction.html',
+      '限时折扣': 'pages/mkt-flash-sale.html',
+      '秒杀活动': 'pages/mkt-seckill.html',
+      '新客有礼': 'pages/mkt-new-customer.html',
+      '次卡管理': 'pages/mkt-pass-card.html',
+      '营销日历': 'pages/mkt-calendar.html',
+      '会员管理': 'pages/mbr-members.html',
+      '储值卡': 'pages/mbr-prepaid.html',
+      '积分商城': 'pages/mbr-points.html',
+      '客户画像': 'pages/mbr-customers.html',
+      '消息触达': 'pages/mbr-messaging.html',
+      '财务概览': 'pages/fin-overview.html',
+      '交易流水': 'pages/fin-transactions.html',
+      '到账查询': 'pages/fin-settlement.html',
+      '成本管理': 'pages/fin-cost.html',
+      '发票管理': 'pages/fin-invoice.html',
+      '经营报表': 'pages/fin-reports.html',
+      '商品分析': 'pages/stat-product.html',
+      '客户分析': 'pages/stat-customer.html',
+      '订单分析': 'pages/stat-order.html',
+      '营销分析': 'pages/stat-marketing.html',
+      '库存总览': 'pages/inv-overview.html',
+      '出入库管理': 'pages/inv-inout.html',
+      '采购管理': 'pages/inv-purchase.html',
+      '估清管理': 'pages/inv-soldout.html',
+      '效期管理': 'pages/inv-expiry.html',
+      '渠道管理': 'pages/ch-platform.html',
+      '订单聚合': 'pages/ch-orders.html',
+      '菜单同步': 'pages/ch-menu-sync.html',
+      '配送调度': 'pages/ch-delivery.html',
+      '小程序商城': 'pages/va-miniapp.html',
+      '店铺装修': 'pages/va-decor.html',
+      '连锁管理': 'pages/va-chain.html',
+      'AI智能': 'pages/va-ai.html',
+    };
+
+    // Page cache
+    const pageCache = {};
+
+    // 设置页面HTML并执行其中的script标签
+    function setPageHtml(html) {
+      const area = document.getElementById('contentArea');
+      area.innerHTML = html;
+      area.querySelectorAll('script').forEach(old => {
+        const s = document.createElement('script');
+        s.textContent = old.textContent;
+        old.replaceWith(s);
+      });
+      lucide.createIcons();
+    }
+
+    // Navigate to a virtual page (not in sidebar menu)
+    function navigateTo(label, options) {
+      window._pageOptions = options || {};
+      const tabbar = document.getElementById('tabbar');
+      let tab = tabbar.querySelector(`.tab[data-tab="${label}"]`);
+      if (!tab) {
+        tab = document.createElement('div');
+        tab.className = 'tab';
+        tab.dataset.tab = label;
+        tab.innerHTML = `<span>${label}</span><span class="tab-close" onclick="event.stopPropagation();closeTab(this.parentElement)">✕</span>`;
+        tab.onclick = function() { activateTab(this); };
+        tabbar.appendChild(tab);
+      }
+      activateTab(tab);
+    }
+
+    function activateTab(tab) {
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      const label = tab.dataset.tab;
+
+      // Sync menu active state
+      document.querySelectorAll('.menu-sub .menu-item').forEach(el => {
+        el.classList.toggle('active', el.dataset.tab === label);
+      });
+      document.getElementById('breadcrumb-current').textContent = label;
+
+      // Load page content
+      if (pageMap[label]) {
+        if (pageCache[label]) {
+          setPageHtml(pageCache[label]);
+        } else {
+          document.getElementById('contentArea').innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;">加载中...</div>';
+          fetch(pageMap[label])
+            .then(r => r.text())
+            .then(html => {
+              pageCache[label] = html;
+              if (tab.classList.contains('active')) { setPageHtml(html); }
+            });
+        }
+      } else {
+        document.getElementById('contentArea').innerHTML = `
+          <div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:14px;">
+            <div style="text-align:center;">
+              <i data-lucide="layout-dashboard" style="width:48px;height:48px;color:#d9d9d9;margin-bottom:12px;"></i>
+              <p>${label} - 内容区域</p>
+              <p style="font-size:12px;margin-top:4px;color:#bbb;">此处将放置 ${label} 的具体内容</p>
+            </div>
+          </div>`;
+        lucide.createIcons();
+      }
+    }
+
+    function closeTab(tab) {
+      const wasActive = tab.classList.contains('active');
+      const prev = tab.previousElementSibling;
+      tab.remove();
+      if (wasActive && prev) activateTab(prev);
+    }
+
+    // User dropdown
+    function toggleDropdown() {
+      document.getElementById('userDropdown').classList.toggle('show');
+    }
+    document.addEventListener('click', (e) => {
+      if (!e.target.closest('.user-dropdown-trigger') && !e.target.closest('.dropdown')) {
+        document.getElementById('userDropdown').classList.remove('show');
+      }
+    });
+
+    // Fullscreen
+    function toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+
+    // Auto-load dashboard on init
+    const allStores = [
+      { name:'老三家外卖（朝阳店）', addr:'北京市朝阳区建国路88号' },
+      { name:'老三家外卖（海淀店）', addr:'北京市海淀区中关村大街66号' },
+      { name:'老三家外卖（望京店）', addr:'北京市朝阳区望京西路50号' },
+      { name:'老三家外卖（通州店）', addr:'北京市通州区新华大街120号' },
+      { name:'老三家外卖（丰台店）', addr:'北京市丰台区丰台路18号' },
+    ];
+    function openCopyStoreModal(title) {
+      document.getElementById('csmTitle').textContent = title || '复制到其他门店';
+      // find current store from any visible selector on the page
+      let current = '';
+      const sel = document.querySelector('#contentArea select');
+      if (sel) current = sel.value;
+      const list = document.getElementById('csmStoreList');
+      list.innerHTML = allStores.filter(s => s.name !== current).map(s =>
+        `<label class="csm-item" onclick="toggleCsmItem(this)">
+          <span class="csm-cb"></span>
+          <div><div class="csm-store-name">${s.name}</div><div class="csm-store-addr">${s.addr}</div></div>
+        </label>`
+      ).join('');
+      document.getElementById('csmAllCb').classList.remove('checked');
+      document.getElementById('csmMask').classList.add('open');
+      lucide.createIcons();
+    }
+    function closeCopyModal() {
+      document.getElementById('csmMask').classList.remove('open');
+    }
+    function toggleCsmItem(el) {
+      el.querySelector('.csm-cb').classList.toggle('checked');
+      syncCsmAll();
+    }
+    function toggleCsmAll() {
+      const allCb = document.getElementById('csmAllCb');
+      const items = document.querySelectorAll('#csmStoreList .csm-cb');
+      const shouldCheck = !allCb.classList.contains('checked');
+      allCb.classList.toggle('checked', shouldCheck);
+      items.forEach(cb => cb.classList.toggle('checked', shouldCheck));
+    }
+    function syncCsmAll() {
+      const items = document.querySelectorAll('#csmStoreList .csm-cb');
+      const allChecked = [...items].every(cb => cb.classList.contains('checked'));
+      document.getElementById('csmAllCb').classList.toggle('checked', allChecked);
+    }
+
+    const initTab = document.querySelector('.tab[data-tab="工作台"]');
+    if (initTab) activateTab(initTab);
+
+    // ========== 通用商品选择器 ==========
+    var _ppProducts = [
+      {name:'宫保鸡丁',spu:'SPU20240001',cat:'主食',price:32,stock:86,status:'on'},
+      {name:'鱼香肉丝盖饭',spu:'SPU20240002',cat:'主食',price:22,stock:45,status:'on'},
+      {name:'招牌红烧肉饭',spu:'SPU20240003',cat:'热销推荐',price:28,stock:60,status:'on'},
+      {name:'番茄牛腩面',spu:'SPU20240004',cat:'主食',price:26,stock:38,status:'on'},
+      {name:'香辣鸡腿堡套餐',spu:'SPU20240005',cat:'热销推荐',price:35,stock:25,status:'on'},
+      {name:'麻婆豆腐',spu:'SPU20240006',cat:'小吃凉菜',price:18,stock:70,status:'on'},
+      {name:'酸辣土豆丝',spu:'SPU20240007',cat:'小吃凉菜',price:14,stock:55,status:'on'},
+      {name:'皮蛋豆腐',spu:'SPU20240008',cat:'小吃凉菜',price:12,stock:40,status:'on'},
+      {name:'紫菜蛋花汤',spu:'SPU20240009',cat:'汤羹粥品',price:8,stock:90,status:'on'},
+      {name:'西湖牛肉羹',spu:'SPU20240010',cat:'汤羹粥品',price:16,stock:30,status:'on'},
+      {name:'冰柠檬红茶',spu:'SPU20240011',cat:'饮品',price:8,stock:120,status:'on'},
+      {name:'珍珠奶茶',spu:'SPU20240012',cat:'饮品',price:12,stock:80,status:'on'},
+      {name:'美式咖啡',spu:'SPU20240013',cat:'饮品',price:15,stock:60,status:'on'},
+      {name:'青岛啤酒',spu:'SPU20240014',cat:'酒水',price:10,stock:100,status:'on'},
+      {name:'可乐鸡翅',spu:'SPU20240015',cat:'小吃凉菜',price:22,stock:0,status:'off'},
+      {name:'红烧排骨',spu:'SPU20240016',cat:'热销推荐',price:38,stock:20,status:'on'},
+      {name:'蛋炒饭',spu:'SPU20240017',cat:'主食',price:12,stock:99,status:'on'},
+      {name:'酸梅汤',spu:'SPU20240018',cat:'饮品',price:6,stock:50,status:'on'},
+    ];
+    var _ppCallback = null;
+    var _ppSelected = [];
+    var _ppExclude = [];
+
+    function openProductPicker(opts) {
+      opts = opts || {};
+      _ppCallback = opts.onConfirm || null;
+      _ppSelected = (opts.selected || []).slice();
+      _ppExclude = opts.exclude || [];
+      document.getElementById('ppTitle').textContent = opts.title || '选择商品';
+      document.getElementById('ppSubtitle').textContent = opts.subtitle || '';
+      document.getElementById('ppSearchInput').value = '';
+      document.getElementById('ppCatFilter').value = '';
+      renderPpProducts();
+      updatePpCount();
+      document.getElementById('ppMask').classList.add('open');
+      lucide.createIcons();
+    }
+
+    function closeProductPicker() {
+      document.getElementById('ppMask').classList.remove('open');
+      _ppCallback = null;
+    }
+
+    function renderPpProducts() {
+      var kw = (document.getElementById('ppSearchInput').value || '').trim().toLowerCase();
+      var cat = document.getElementById('ppCatFilter').value;
+      var tbody = document.getElementById('ppProductList');
+      var html = '';
+      _ppProducts.forEach(function(p) {
+        if (_ppExclude.indexOf(p.spu) > -1) return;
+        if (kw && p.name.toLowerCase().indexOf(kw) === -1 && p.spu.toLowerCase().indexOf(kw) === -1) return;
+        if (cat && p.cat !== cat) return;
+        var checked = _ppSelected.indexOf(p.spu) > -1;
+        html += '<tr class="' + (checked ? 'pp-checked' : '') + '" onclick="togglePpRow(this,\'' + p.spu + '\')" style="cursor:pointer">'
+          + '<td><span class="pp-cb' + (checked ? ' checked' : '') + '"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span></td>'
+          + '<td><div class="pp-prod-cell"><div class="pp-prod-thumb"><i data-lucide="image" style="width:16px;height:16px"></i></div><div><div class="pp-prod-name">' + p.name + '</div><div class="pp-prod-spu">' + p.spu + '</div></div></div></td>'
+          + '<td class="pp-prod-cat">' + p.cat + '</td>'
+          + '<td class="pp-prod-price">&yen;' + p.price.toFixed(2) + '</td>'
+          + '<td>' + p.stock + '</td>'
+          + '<td><span class="pp-prod-status ' + p.status + '">' + (p.status === 'on' ? '在售' : '下架') + '</span></td>'
+          + '</tr>';
+      });
+      if (!html) {
+        html = '<tr><td colspan="6" style="text-align:center;padding:40px;color:#9ca3af">没有找到匹配的商品</td></tr>';
+      }
+      tbody.innerHTML = html;
+      syncPpAllCb();
+      lucide.createIcons();
+    }
+
+    function filterPpProducts() {
+      renderPpProducts();
+    }
+
+    function togglePpRow(tr, spu) {
+      var idx = _ppSelected.indexOf(spu);
+      if (idx > -1) {
+        _ppSelected.splice(idx, 1);
+      } else {
+        _ppSelected.push(spu);
+      }
+      var cb = tr.querySelector('.pp-cb');
+      cb.classList.toggle('checked');
+      tr.classList.toggle('pp-checked');
+      syncPpAllCb();
+      updatePpCount();
+    }
+
+    function togglePpAll() {
+      var allCb = document.getElementById('ppAllCb');
+      var rows = document.querySelectorAll('#ppProductList tr[onclick]');
+      var shouldCheck = !allCb.classList.contains('checked');
+      rows.forEach(function(tr) {
+        var spu = tr.getAttribute('onclick').match(/'([^']+)'/)[1];
+        var cb = tr.querySelector('.pp-cb');
+        var idx = _ppSelected.indexOf(spu);
+        if (shouldCheck && idx === -1) {
+          _ppSelected.push(spu);
+          cb.classList.add('checked');
+          tr.classList.add('pp-checked');
+        } else if (!shouldCheck && idx > -1) {
+          _ppSelected.splice(idx, 1);
+          cb.classList.remove('checked');
+          tr.classList.remove('pp-checked');
+        }
+      });
+      allCb.classList.toggle('checked', shouldCheck);
+      updatePpCount();
+    }
+
+    function syncPpAllCb() {
+      var rows = document.querySelectorAll('#ppProductList tr[onclick]');
+      var allChecked = rows.length > 0 && [...rows].every(function(tr) { return tr.classList.contains('pp-checked'); });
+      document.getElementById('ppAllCb').classList.toggle('checked', allChecked);
+    }
+
+    function updatePpCount() {
+      var n = _ppSelected.length;
+      document.getElementById('ppSelectedCount').textContent = '已选 ' + n + ' 个';
+      document.getElementById('ppFooterCount').textContent = n;
+    }
+
+    function confirmProductPicker() {
+      if (_ppCallback) {
+        var selected = _ppProducts.filter(function(p) { return _ppSelected.indexOf(p.spu) > -1; });
+        _ppCallback(selected);
+      }
+      closeProductPicker();
+    }
+  </script>
+</body>
+</html>
diff --git a/TakeoutSaaS.Prototypes/pages/ch-delivery.html b/TakeoutSaaS.Prototypes/pages/ch-delivery.html
new file mode 100644
index 0000000..8a3e934
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/ch-delivery.html
@@ -0,0 +1,256 @@
+<!-- 配送调度 — ch-delivery.html -->
+<style>
+  .chd-seg-wrap { margin-bottom: 20px; }
+  .chd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
+  .chd-stat-card { background: #fff; border-radius: var(--g-radius); padding: 18px 20px; border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm); transition: var(--g-transition); }
+  .chd-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
+  .chd-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
+  .chd-stat-label i { width: 16px; height: 16px; }
+  .chd-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
+  .chd-stat-val.green { color: var(--g-success); }
+  .chd-stat-val.orange { color: var(--g-warning); }
+
+  /* 地图占位 */
+  .chd-map-placeholder {
+    height: 240px; border: 2px dashed #e5e7eb; border-radius: var(--g-radius-lg, 12px);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    color: var(--g-text-muted); gap: 8px; margin-bottom: 20px; background: #fafafa;
+  }
+  .chd-map-placeholder i { width: 32px; height: 32px; opacity: .5; }
+
+  /* 在途订单卡片 */
+  .chd-order-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 16px 20px; margin-bottom: 10px; transition: var(--g-transition);
+    display: flex; align-items: center; gap: 16px;
+  }
+  .chd-order-card:hover { box-shadow: var(--g-shadow-md); }
+  .chd-order-card.urgent { border-left: 3px solid var(--g-danger); background: #fff5f5; }
+  .chd-order-info { flex: 1; min-width: 0; }
+  .chd-order-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
+  .chd-order-no { font-family: 'SF Mono','Cascadia Code','Consolas',monospace; font-size: 12px; color: var(--g-text-secondary); }
+  .chd-order-mid { font-size: 13px; color: var(--g-text-secondary); display: flex; gap: 16px; }
+  .chd-order-mid span { display: flex; align-items: center; gap: 4px; }
+  .chd-order-mid i { width: 14px; height: 14px; }
+  .chd-order-actions { display: flex; gap: 8px; flex-shrink: 0; }
+
+  /* 配送商卡片 */
+  .chd-provider-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 20px; margin-bottom: 12px; transition: var(--g-transition);
+  }
+  .chd-provider-card:hover { box-shadow: var(--g-shadow-md); }
+  .chd-provider-hd { display: flex; align-items: center; gap: 14px; }
+  .chd-provider-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
+  .chd-provider-name { font-size: 15px; font-weight: 600; color: var(--g-text); }
+  .chd-provider-desc { font-size: 12px; color: var(--g-text-muted); margin-top: 2px; }
+  .chd-provider-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--g-border); border-bottom: 1px solid var(--g-border); }
+  .chd-provider-data dt { font-size: 12px; color: var(--g-text-muted); margin-bottom: 4px; }
+  .chd-provider-data dd { font-size: 16px; font-weight: 700; color: var(--g-text); margin: 0; }
+  .chd-provider-ft { display: flex; align-items: center; justify-content: space-between; }
+  .chd-provider-fee { font-size: 12px; color: var(--g-text-muted); }
+  .chd-provider-card.disabled { opacity: .55; }
+
+  /* 调度规则 */
+  .chd-rules { background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border); padding: 20px; margin-top: 20px; }
+  .chd-rule-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: var(--g-text); }
+  .chd-rule-item:last-child { border-bottom: none; }
+  .chd-rule-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-light, #e8f0fe); color: var(--primary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .chd-section-hd { font-size: 15px; font-weight: 600; color: var(--g-text); padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 16px; }
+
+  /* 费用分析 */
+  .chd-bar-chart { margin-bottom: 24px; }
+  .chd-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+  .chd-bar-label { width: 90px; font-size: 13px; color: var(--g-text); font-weight: 500; text-align: right; flex-shrink: 0; }
+  .chd-bar-track { flex: 1; height: 28px; background: #f3f4f6; border-radius: 6px; overflow: hidden; position: relative; }
+  .chd-bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: #fff; transition: width .6s ease; }
+  .chd-bar-val { font-size: 13px; font-weight: 600; color: var(--g-text); width: 70px; text-align: right; flex-shrink: 0; }
+</style>
+
+<!-- 分段Tab -->
+<div class="chd-seg-wrap">
+  <div class="g-seg">
+    <div class="g-seg-item active" onclick="chdSwitchTab(this,'chd-tab-realtime')" data-tab="realtime">实时配送</div>
+    <div class="g-seg-item" onclick="chdSwitchTab(this,'chd-tab-provider')" data-tab="provider">运力管理</div>
+    <div class="g-seg-item" onclick="chdSwitchTab(this,'chd-tab-cost')" data-tab="cost">费用分析</div>
+  </div>
+</div>
+
+<!-- Tab1: 实时配送 -->
+<div id="chd-tab-realtime">
+  <div class="chd-stats">
+    <div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="bike"></i>配送中</div><div class="chd-stat-val">12</div></div>
+    <div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="clock"></i>待取餐</div><div class="chd-stat-val orange">3</div></div>
+    <div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="timer"></i>平均配送时长</div><div class="chd-stat-val">28<span style="font-size:14px;font-weight:400;color:var(--g-text-muted);">分钟</span></div></div>
+    <div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="target"></i>今日准时率</div><div class="chd-stat-val green">94.2%</div></div>
+  </div>
+
+  <div class="chd-map-placeholder">
+    <i data-lucide="map-pin"></i>
+    <span style="font-size:14px;font-weight:500;">配送地图区域</span>
+    <span style="font-size:12px;">实时显示骑手位置与配送路线</span>
+  </div>
+
+  <div class="chd-section-hd">在途订单</div>
+
+  <div class="chd-order-card urgent">
+    <div class="chd-order-info">
+      <div class="chd-order-top"><span class="chd-order-no">#ORD20260212045</span><span class="g-tag g-tag-red">即将超时</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
+      <div class="chd-order-mid"><span><i data-lucide="user"></i>王师傅 138****6789</span><span><i data-lucide="clock"></i>取餐 12:20 → 预计 12:50</span></div>
+    </div>
+    <div class="chd-order-actions"><a class="g-action" style="color:var(--g-danger);">催单</a><a class="g-action">联系骑手</a></div>
+  </div>
+  <div class="chd-order-card">
+    <div class="chd-order-info">
+      <div class="chd-order-top"><span class="chd-order-no">#ORD20260212048</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
+      <div class="chd-order-mid"><span><i data-lucide="user"></i>李骑手 139****2345</span><span><i data-lucide="clock"></i>取餐 12:30 → 预计 13:00</span></div>
+    </div>
+    <div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
+  </div>
+  <div class="chd-order-card">
+    <div class="chd-order-info">
+      <div class="chd-order-top"><span class="chd-order-no">#ORD20260212051</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fee2e2;color:#dc2626;">达达快送</span></div>
+      <div class="chd-order-mid"><span><i data-lucide="user"></i>张师傅 137****8901</span><span><i data-lucide="clock"></i>取餐 12:35 → 预计 13:10</span></div>
+    </div>
+    <div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
+  </div>
+  <div class="chd-order-card">
+    <div class="chd-order-info">
+      <div class="chd-order-top"><span class="chd-order-no">#ORD20260212053</span><span class="g-tag g-tag-orange">待取餐</span><span class="g-tag" style="background:#f0f0f0;color:#333;">顺丰同城</span></div>
+      <div class="chd-order-mid"><span><i data-lucide="user"></i>陈骑手 136****5678</span><span><i data-lucide="clock"></i>预计取餐 12:45</span></div>
+    </div>
+    <div class="chd-order-actions"><a class="g-action">催取餐</a><a class="g-action">联系骑手</a></div>
+  </div>
+  <div class="chd-order-card">
+    <div class="chd-order-info">
+      <div class="chd-order-top"><span class="chd-order-no">#ORD20260212055</span><span class="g-tag g-tag-orange">待取餐</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
+      <div class="chd-order-mid"><span><i data-lucide="user"></i>赵骑手 135****4321</span><span><i data-lucide="clock"></i>预计取餐 12:48</span></div>
+    </div>
+    <div class="chd-order-actions"><a class="g-action">催取餐</a><a class="g-action">联系骑手</a></div>
+  </div>
+  <div class="chd-order-card">
+    <div class="chd-order-info">
+      <div class="chd-order-top"><span class="chd-order-no">#ORD20260212057</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fee2e2;color:#dc2626;">达达快送</span></div>
+      <div class="chd-order-mid"><span><i data-lucide="user"></i>刘师傅 133****7654</span><span><i data-lucide="clock"></i>取餐 12:25 → 预计 12:55</span></div>
+    </div>
+    <div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
+  </div>
+</div>
+
+<!-- Tab2: 运力管理 -->
+<div id="chd-tab-provider" style="display:none;">
+  <p style="font-size:13px;color:var(--g-text-secondary);margin-bottom:20px;line-height:1.6;">管理已接入的配送服务商，系统将根据距离、费用、运力自动选择最优配送方案。</p>
+
+  <div class="chd-provider-card">
+    <div class="chd-provider-hd">
+      <div class="chd-provider-logo" style="background:#faad14;">美</div>
+      <div style="flex:1;"><div class="chd-provider-name">美团配送</div><div class="chd-provider-desc">美团专送骑手，覆盖3km</div></div>
+      <button class="g-toggle on" onclick="toggleSwitch(this)"></button>
+    </div>
+    <div class="chd-provider-data">
+      <div><dt>今日派单</dt><dd>38</dd></div>
+      <div><dt>平均时长</dt><dd>26分钟</dd></div>
+      <div><dt>准时率</dt><dd>96%</dd></div>
+    </div>
+    <div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥5 + 超3km每km加 ¥2</span></div>
+  </div>
+
+  <div class="chd-provider-card">
+    <div class="chd-provider-hd">
+      <div class="chd-provider-logo" style="background:#f5222d;">达</div>
+      <div style="flex:1;"><div class="chd-provider-name">达达快送</div><div class="chd-provider-desc">即时配送，覆盖5km</div></div>
+      <button class="g-toggle on" onclick="toggleSwitch(this)"></button>
+    </div>
+    <div class="chd-provider-data">
+      <div><dt>今日派单</dt><dd>22</dd></div>
+      <div><dt>平均时长</dt><dd>32分钟</dd></div>
+      <div><dt>准时率</dt><dd>91%</dd></div>
+    </div>
+    <div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥6 + 超3km每km加 ¥1.5</span></div>
+  </div>
+
+  <div class="chd-provider-card">
+    <div class="chd-provider-hd">
+      <div class="chd-provider-logo" style="background:#1a1a2e;">顺</div>
+      <div style="flex:1;"><div class="chd-provider-name">顺丰同城</div><div class="chd-provider-desc">高品质配送，覆盖10km</div></div>
+      <button class="g-toggle on" onclick="toggleSwitch(this)"></button>
+    </div>
+    <div class="chd-provider-data">
+      <div><dt>今日派单</dt><dd>8</dd></div>
+      <div><dt>平均时长</dt><dd>35分钟</dd></div>
+      <div><dt>准时率</dt><dd>98%</dd></div>
+    </div>
+    <div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥8 + 超3km每km加 ¥2.5</span></div>
+  </div>
+
+  <div class="chd-provider-card disabled">
+    <div class="chd-provider-hd">
+      <div class="chd-provider-logo" style="background:color-mix(in srgb, var(--primary) 80%, #fff);">自</div>
+      <div style="flex:1;"><div class="chd-provider-name">自配送</div><div class="chd-provider-desc">自有骑手配送</div></div>
+      <button class="g-toggle" onclick="toggleSwitch(this)"></button>
+    </div>
+    <div class="chd-provider-data">
+      <div><dt>今日派单</dt><dd>—</dd></div>
+      <div><dt>平均时长</dt><dd>—</dd></div>
+      <div><dt>准时率</dt><dd>—</dd></div>
+    </div>
+    <div class="chd-provider-ft"><span class="chd-provider-fee">启用后可配置自有骑手和配送范围</span></div>
+  </div>
+
+  <div class="chd-rules">
+    <div class="chd-section-hd">智能调度规则</div>
+    <div class="chd-rule-item"><span class="chd-rule-num">1</span>3km内优先使用<strong style="color:var(--primary);margin:0 4px;">美团配送</strong>（费用最低）</div>
+    <div class="chd-rule-item"><span class="chd-rule-num">2</span>3~5km使用<strong style="color:var(--primary);margin:0 4px;">达达快送</strong></div>
+    <div class="chd-rule-item"><span class="chd-rule-num">3</span>5km以上使用<strong style="color:var(--primary);margin:0 4px;">顺丰同城</strong></div>
+    <div style="margin-top:14px;"><button class="g-btn g-btn-sm">编辑规则</button></div>
+  </div>
+</div>
+
+<!-- Tab3: 费用分析 -->
+<div id="chd-tab-cost" style="display:none;">
+  <div class="chd-stats" style="grid-template-columns:repeat(3,1fr);">
+    <div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="receipt"></i>本月配送总费用</div><div class="chd-stat-val">&yen;4,860</div></div>
+    <div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="divide"></i>单均配送费</div><div class="chd-stat-val">&yen;5.2</div></div>
+    <div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="trending-down"></i>环比变化</div><div class="chd-stat-val green">-3.8%</div></div>
+  </div>
+
+  <div class="g-card" style="padding:20px;margin-bottom:20px;">
+    <div class="chd-section-hd">各配送商费用对比</div>
+    <div class="chd-bar-chart">
+      <div class="chd-bar-row"><span class="chd-bar-label">美团配送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:100%;background:#faad14;">&yen;2,180</div></div><span class="chd-bar-val">44.9%</span></div>
+      <div class="chd-bar-row"><span class="chd-bar-label">达达快送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:71%;background:#f5222d;">&yen;1,560</div></div><span class="chd-bar-val">32.1%</span></div>
+      <div class="chd-bar-row"><span class="chd-bar-label">顺丰同城</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:38%;background:#1a1a2e;">&yen;820</div></div><span class="chd-bar-val">16.9%</span></div>
+      <div class="chd-bar-row"><span class="chd-bar-label">自配送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:14%;background:var(--primary);">&yen;300</div></div><span class="chd-bar-val">6.2%</span></div>
+    </div>
+  </div>
+
+  <div class="g-card" style="padding:20px;">
+    <div class="chd-section-hd">近7天配送费趋势</div>
+    <table class="g-table">
+      <thead>
+        <tr><th>日期</th><th style="text-align:right;">美团配送</th><th style="text-align:right;">达达快送</th><th style="text-align:right;">顺丰同城</th><th style="text-align:right;">自配送</th><th style="text-align:right;">合计</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>2026-02-12</td><td style="text-align:right;">¥320</td><td style="text-align:right;">¥228</td><td style="text-align:right;">¥120</td><td style="text-align:right;">¥45</td><td style="text-align:right;font-weight:600;">¥713</td></tr>
+        <tr><td>2026-02-11</td><td style="text-align:right;">¥298</td><td style="text-align:right;">¥215</td><td style="text-align:right;">¥108</td><td style="text-align:right;">¥40</td><td style="text-align:right;font-weight:600;">¥661</td></tr>
+        <tr><td>2026-02-10</td><td style="text-align:right;">¥335</td><td style="text-align:right;">¥240</td><td style="text-align:right;">¥135</td><td style="text-align:right;">¥50</td><td style="text-align:right;font-weight:600;">¥760</td></tr>
+        <tr><td>2026-02-09</td><td style="text-align:right;">¥310</td><td style="text-align:right;">¥220</td><td style="text-align:right;">¥115</td><td style="text-align:right;">¥42</td><td style="text-align:right;font-weight:600;">¥687</td></tr>
+        <tr><td>2026-02-08</td><td style="text-align:right;">¥345</td><td style="text-align:right;">¥248</td><td style="text-align:right;">¥128</td><td style="text-align:right;">¥48</td><td style="text-align:right;font-weight:600;">¥769</td></tr>
+        <tr><td>2026-02-07</td><td style="text-align:right;">¥288</td><td style="text-align:right;">¥205</td><td style="text-align:right;">¥98</td><td style="text-align:right;">¥38</td><td style="text-align:right;font-weight:600;">¥629</td></tr>
+        <tr><td>2026-02-06</td><td style="text-align:right;">¥284</td><td style="text-align:right;">¥204</td><td style="text-align:right;">¥116</td><td style="text-align:right;">¥37</td><td style="text-align:right;font-weight:600;">¥641</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script>
+  function chdSwitchTab(el, tabId) {
+    el.parentElement.querySelectorAll('.g-seg-item').forEach(function(item) { item.classList.remove('active'); });
+    el.classList.add('active');
+    document.getElementById('chd-tab-realtime').style.display = tabId === 'chd-tab-realtime' ? '' : 'none';
+    document.getElementById('chd-tab-provider').style.display = tabId === 'chd-tab-provider' ? '' : 'none';
+    document.getElementById('chd-tab-cost').style.display = tabId === 'chd-tab-cost' ? '' : 'none';
+  }
+  function toggleSwitch(el) { el.classList.toggle('on'); }
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/ch-menu-sync.html b/TakeoutSaaS.Prototypes/pages/ch-menu-sync.html
new file mode 100644
index 0000000..e713e8e
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/ch-menu-sync.html
@@ -0,0 +1,422 @@
+<!-- 菜单同步页 -->
+<style>
+.cms-page { font-size: 13px; color: var(--g-text); }
+
+/* ===== 统计条 ===== */
+.cms-stats {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px;
+}
+.cms-stat-card {
+  background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+  padding: 16px 20px; display: flex; align-items: center; gap: 14px;
+  transition: box-shadow var(--g-transition);
+}
+.cms-stat-card:hover { box-shadow: var(--g-shadow-md); }
+.cms-stat-icon {
+  width: 42px; height: 42px; border-radius: 10px; display: flex;
+  align-items: center; justify-content: center; flex-shrink: 0;
+}
+.cms-stat-icon.total { background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); }
+.cms-stat-icon.synced { background: #f6ffed; color: var(--g-success); }
+.cms-stat-icon.pending { background: #fff7e6; color: var(--g-warning); }
+.cms-stat-icon.failed { background: #fff1f0; color: var(--g-danger); }
+.cms-stat-info { flex: 1; }
+.cms-stat-label { font-size: 12px; color: var(--g-text-muted); margin-bottom: 4px; }
+.cms-stat-value { font-size: 22px; font-weight: 700; color: var(--g-text); line-height: 1; }
+.cms-stat-value.danger { color: var(--g-danger); }
+
+/* ===== 工具栏 ===== */
+.cms-toolbar {
+  background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+  padding: 14px 20px; display: flex; align-items: center; gap: 10px;
+  flex-wrap: wrap; margin-bottom: 14px;
+}
+.cms-select {
+  height: 34px; border-radius: var(--g-radius-sm); border: 1px solid #e5e7eb;
+  padding: 0 10px; font-size: 13px; outline: none; min-width: 140px;
+  cursor: pointer; transition: all var(--g-transition); color: var(--g-text-secondary);
+}
+.cms-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+.cms-search {
+  height: 34px; border-radius: var(--g-radius-sm); border: 1px solid #e5e7eb;
+  padding: 0 10px 0 32px; font-size: 13px; outline: none; width: 200px;
+  transition: all var(--g-transition); color: var(--g-text); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 9px center no-repeat;
+}
+.cms-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+.cms-spacer { flex: 1; }
+
+/* ===== 表格卡片 ===== */
+.cms-table-card {
+  background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+  overflow: hidden;
+}
+.cms-table-wrap { overflow-x: auto; }
+
+/* 平台价格单元格 */
+.cms-price-cell { display: flex; align-items: center; gap: 5px; }
+.cms-price-ok { color: var(--g-success); width: 14px; height: 14px; flex-shrink: 0; }
+.cms-price-warn { color: var(--g-warning); width: 14px; height: 14px; flex-shrink: 0; cursor: help; }
+.cms-price-fail { color: var(--g-danger); width: 14px; height: 14px; flex-shrink: 0; }
+.cms-price-na { color: var(--g-text-muted); }
+
+/* 操作列 */
+.cms-actions { display: flex; align-items: center; gap: 12px; }
+
+/* ===== 抽屉内 ===== */
+.cms-readonly {
+  height: 34px; line-height: 34px; padding: 0 11px; background: var(--g-bg-subtle);
+  border: 1px solid var(--g-border); border-radius: var(--g-radius-sm);
+  font-size: 13px; color: var(--g-text);
+}
+.cms-platform-row {
+  display: flex; align-items: center; gap: 12px; padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+.cms-platform-row:last-child { border-bottom: none; }
+.cms-platform-name {
+  width: 72px; flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--g-text);
+  display: flex; align-items: center; gap: 6px;
+}
+.cms-platform-name i { width: 16px; height: 16px; color: var(--g-text-muted); }
+.cms-platform-price { flex: 1; }
+.cms-platform-price .g-input { width: 100%; }
+.cms-platform-price.disabled .g-input {
+  background: #f5f5f5; color: var(--g-text-muted); pointer-events: none;
+}
+.cms-follow-hint { font-size: 11px; color: var(--g-text-muted); margin-top: 4px; }
+</style>
+
+<div class="cms-page">
+
+  <!-- 统计条 -->
+  <div class="cms-stats">
+    <div class="cms-stat-card">
+      <div class="cms-stat-icon total"><i data-lucide="utensils-crossed" style="width:20px;height:20px"></i></div>
+      <div class="cms-stat-info">
+        <div class="cms-stat-label">本店菜品总数</div>
+        <div class="cms-stat-value">48</div>
+      </div>
+    </div>
+    <div class="cms-stat-card">
+      <div class="cms-stat-icon synced"><i data-lucide="check-circle-2" style="width:20px;height:20px"></i></div>
+      <div class="cms-stat-info">
+        <div class="cms-stat-label">已全平台同步</div>
+        <div class="cms-stat-value">42</div>
+      </div>
+    </div>
+    <div class="cms-stat-card">
+      <div class="cms-stat-icon pending"><i data-lucide="clock" style="width:20px;height:20px"></i></div>
+      <div class="cms-stat-info">
+        <div class="cms-stat-label">待同步</div>
+        <div class="cms-stat-value">4</div>
+      </div>
+    </div>
+    <div class="cms-stat-card">
+      <div class="cms-stat-icon failed"><i data-lucide="alert-circle" style="width:20px;height:20px"></i></div>
+      <div class="cms-stat-info">
+        <div class="cms-stat-label">同步失败</div>
+        <div class="cms-stat-value danger">2</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 工具栏 -->
+  <div class="cms-toolbar">
+    <select class="cms-select">
+      <option>全部分类</option>
+      <option>热销套餐</option>
+      <option>主食</option>
+      <option>小吃</option>
+      <option>饮品</option>
+      <option>甜品</option>
+    </select>
+    <select class="cms-select">
+      <option>全部状态</option>
+      <option>已同步</option>
+      <option>待同步</option>
+      <option>同步失败</option>
+      <option>部分同步</option>
+    </select>
+    <input class="cms-search" type="text" placeholder="搜索菜品名称">
+    <div class="cms-spacer"></div>
+    <button class="g-btn g-btn-primary" onclick="alert('已发起全量同步')">
+      <i data-lucide="refresh-cw" style="width:14px;height:14px"></i>
+      一键全量同步
+    </button>
+  </div>
+
+  <!-- 表格 -->
+  <div class="cms-table-card">
+    <div class="cms-table-wrap">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th style="min-width:160px">菜品名称</th>
+            <th style="min-width:80px">分类</th>
+            <th style="min-width:90px">本店价格</th>
+            <th style="min-width:110px">美团价格</th>
+            <th style="min-width:110px">饿了么价格</th>
+            <th style="min-width:110px">小程序价格</th>
+            <th style="min-width:90px">同步状态</th>
+            <th style="min-width:120px">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- 1. 宫保鸡丁套餐 - 已同步 -->
+          <tr>
+            <td style="font-weight:500">宫保鸡丁套餐</td>
+            <td><span class="g-tag g-tag-orange">热销套餐</span></td>
+            <td>&yen;32.00</td>
+            <td><span class="cms-price-cell">&yen;32.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;32.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;32.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="g-tag g-tag-green">已同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('宫保鸡丁套餐','32.00','32.00','32.00','32.00')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 2. 麻辣香锅(中份) - 已同步 -->
+          <tr>
+            <td style="font-weight:500">麻辣香锅(中份)</td>
+            <td><span class="g-tag g-tag-blue">主食</span></td>
+            <td>&yen;48.00</td>
+            <td><span class="cms-price-cell">&yen;48.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;48.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;48.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="g-tag g-tag-green">已同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('麻辣香锅(中份)','48.00','48.00','48.00','48.00')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 3. 牛肉面套餐 - 已同步 -->
+          <tr>
+            <td style="font-weight:500">牛肉面套餐</td>
+            <td><span class="g-tag g-tag-blue">主食</span></td>
+            <td>&yen;28.00</td>
+            <td><span class="cms-price-cell">&yen;28.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;28.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;28.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="g-tag g-tag-green">已同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('牛肉面套餐','28.00','28.00','28.00','28.00')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 4. 小龙虾(2斤) - 部分同步，饿了么价格不一致 -->
+          <tr>
+            <td style="font-weight:500">小龙虾(2斤)</td>
+            <td><span class="g-tag g-tag-orange">热销套餐</span></td>
+            <td>&yen;128.00</td>
+            <td><span class="cms-price-cell">&yen;128.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;138.00 <i data-lucide="alert-triangle" class="cms-price-warn" title="与本店价格不一致"></i></span></td>
+            <td><span class="cms-price-cell">&yen;128.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="g-tag g-tag-blue">部分同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('小龙虾(2斤)','128.00','128.00','138.00','128.00')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 5. 烤鱼套餐 - 已同步 -->
+          <tr>
+            <td style="font-weight:500">烤鱼套餐</td>
+            <td><span class="g-tag g-tag-blue">主食</span></td>
+            <td>&yen;68.00</td>
+            <td><span class="cms-price-cell">&yen;68.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;68.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;68.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="g-tag g-tag-green">已同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('烤鱼套餐','68.00','68.00','68.00','68.00')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 6. 炸鸡翅(6只) - 待同步 -->
+          <tr>
+            <td style="font-weight:500">炸鸡翅(6只)</td>
+            <td><span class="g-tag g-tag-purple">小吃</span></td>
+            <td>&yen;22.00</td>
+            <td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
+            <td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
+            <td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
+            <td><span class="g-tag g-tag-orange">待同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('炸鸡翅(6只)','22.00','','','')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 7. 珍珠奶茶 - 待同步 -->
+          <tr>
+            <td style="font-weight:500">珍珠奶茶</td>
+            <td><span class="g-tag g-tag-gray">饮品</span></td>
+            <td>&yen;15.00</td>
+            <td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
+            <td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
+            <td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
+            <td><span class="g-tag g-tag-orange">待同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('珍珠奶茶','15.00','','','')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 8. 提拉米苏 - 同步失败 -->
+          <tr>
+            <td style="font-weight:500">提拉米苏</td>
+            <td><span class="g-tag g-tag-gray">甜品</span></td>
+            <td>&yen;28.00</td>
+            <td><span class="cms-price-cell">&yen;28.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
+            <td><span class="cms-price-cell">&yen;28.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
+            <td><span class="cms-price-cell">&yen;28.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
+            <td><span class="g-tag g-tag-red">同步失败</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('重新同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('提拉米苏','28.00','28.00','28.00','28.00')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 9. 美式咖啡 - 已同步 -->
+          <tr>
+            <td style="font-weight:500">美式咖啡</td>
+            <td><span class="g-tag g-tag-gray">饮品</span></td>
+            <td>&yen;18.00</td>
+            <td><span class="cms-price-cell">&yen;18.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;18.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="cms-price-cell">&yen;18.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
+            <td><span class="g-tag g-tag-green">已同步</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('美式咖啡','18.00','18.00','18.00','18.00')">编辑价格</a>
+            </td>
+          </tr>
+          <!-- 10. 4人聚餐套餐 - 同步失败 -->
+          <tr>
+            <td style="font-weight:500">4人聚餐套餐</td>
+            <td><span class="g-tag g-tag-orange">热销套餐</span></td>
+            <td>&yen;168.00</td>
+            <td><span class="cms-price-cell">&yen;168.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
+            <td><span class="cms-price-cell">&yen;168.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
+            <td><span class="cms-price-cell">&yen;168.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
+            <td><span class="g-tag g-tag-red">同步失败</span></td>
+            <td class="cms-actions">
+              <a class="g-action" onclick="alert('重新同步中...')">同步</a>
+              <a class="g-action" onclick="openDrawer('4人聚餐套餐','168.00','168.00','168.00','168.00')">编辑价格</a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页 -->
+    <div style="padding: 12px 20px;">
+      <div class="g-pagination">
+        <span>共 48 条</span>
+        <button class="g-page-btn" disabled>&laquo;</button>
+        <button class="g-page-btn active">1</button>
+        <button class="g-page-btn">2</button>
+        <button class="g-page-btn">3</button>
+        <button class="g-page-btn">4</button>
+        <button class="g-page-btn">5</button>
+        <button class="g-page-btn">&raquo;</button>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<!-- 编辑价格抽屉 -->
+<div class="g-drawer-mask" id="cmsDrawerMask" onclick="closeDrawer()"></div>
+<div class="g-drawer" id="cmsDrawer" style="width:460px">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title">编辑价格</div>
+    <button class="g-drawer-close" onclick="closeDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 菜品名称（只读） -->
+    <div class="g-form-group">
+      <label class="g-form-label">菜品名称</label>
+      <div class="cms-readonly" id="cmsName">宫保鸡丁套餐</div>
+    </div>
+
+    <!-- 本店价格 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">本店价格</label>
+      <input class="g-input" id="cmsBasePrice" type="number" step="0.01" placeholder="请输入本店价格">
+    </div>
+
+    <div class="g-divider"></div>
+
+    <!-- 各平台价格 -->
+    <div class="g-form-group">
+      <label class="g-form-label" style="margin-bottom:12px; font-size:14px; font-weight:600;">各平台价格设置</label>
+      <div class="cms-follow-hint" style="margin-bottom:12px; margin-top:-8px;">关闭开关则该平台不上架此菜品，开启后默认跟随本店价格</div>
+
+      <!-- 美团 -->
+      <div class="cms-platform-row">
+        <div class="cms-platform-name">
+          <i data-lucide="shopping-bag"></i> 美团
+        </div>
+        <div class="g-toggle on" id="toggleMeituan" onclick="togglePlatform(event.currentTarget, 'priceMeituan')"></div>
+        <div class="cms-platform-price" id="priceMeituanWrap">
+          <input class="g-input" id="priceMeituan" type="number" step="0.01" placeholder="跟随本店价格">
+        </div>
+      </div>
+
+      <!-- 饿了么 -->
+      <div class="cms-platform-row">
+        <div class="cms-platform-name">
+          <i data-lucide="bike"></i> 饿了么
+        </div>
+        <div class="g-toggle on" id="toggleEleme" onclick="togglePlatform(event.currentTarget, 'priceEleme')"></div>
+        <div class="cms-platform-price" id="priceElemeWrap">
+          <input class="g-input" id="priceEleme" type="number" step="0.01" placeholder="跟随本店价格">
+        </div>
+      </div>
+
+      <!-- 小程序 -->
+      <div class="cms-platform-row">
+        <div class="cms-platform-name">
+          <i data-lucide="smartphone"></i> 小程序
+        </div>
+        <div class="g-toggle on" id="toggleMini" onclick="togglePlatform(event.currentTarget, 'priceMini')"></div>
+        <div class="cms-platform-price" id="priceMiniWrap">
+          <input class="g-input" id="priceMini" type="number" step="0.01" placeholder="跟随本店价格">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeDrawer()">保存并同步</button>
+  </div>
+</div>
+
+<script>
+/* 抽屉开关 */
+function openDrawer(name, base, mt, ele, mini) {
+  document.getElementById('cmsName').textContent = name;
+  document.getElementById('cmsBasePrice').value = base;
+  document.getElementById('priceMeituan').value = mt;
+  document.getElementById('priceEleme').value = ele;
+  document.getElementById('priceMini').value = mini;
+  document.getElementById('cmsDrawerMask').classList.add('open');
+  document.getElementById('cmsDrawer').classList.add('open');
+}
+function closeDrawer() {
+  document.getElementById('cmsDrawerMask').classList.remove('open');
+  document.getElementById('cmsDrawer').classList.remove('open');
+}
+
+/* 平台开关 */
+function togglePlatform(el, inputId) {
+  el.classList.toggle('on');
+  var wrap = document.getElementById(inputId + 'Wrap');
+  if (el.classList.contains('on')) {
+    wrap.classList.remove('disabled');
+  } else {
+    wrap.classList.add('disabled');
+  }
+}
+
+/* 初始化图标 */
+if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/ch-orders.html b/TakeoutSaaS.Prototypes/pages/ch-orders.html
new file mode 100644
index 0000000..968354d
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/ch-orders.html
@@ -0,0 +1,441 @@
+<!-- 渠道订单聚合 — ch-orders.html -->
+<style>
+  /* ---- page-private: cho- prefix ---- */
+
+  /* 统计卡片 */
+  .cho-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
+  .cho-stat-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 18px 20px; transition: box-shadow var(--g-transition);
+  }
+  .cho-stat-card:hover { box-shadow: var(--g-shadow-md); }
+  .cho-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
+  .cho-stat-label i { width: 15px; height: 15px; }
+  .cho-stat-val { font-size: 26px; font-weight: 700; color: var(--g-text); }
+  .cho-stat-trend { font-size: 12px; margin-left: 8px; font-weight: 500; }
+  .cho-stat-trend.up { color: var(--g-success); }
+  .cho-stat-trend.down { color: var(--g-danger); }
+  .cho-stat-card.urgent { border-left: 3px solid var(--g-warning); }
+  .cho-stat-card.urgent .cho-stat-val { color: var(--g-warning); }
+
+  /* 平台pills */
+  .cho-platforms { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
+  .cho-plat-pill {
+    display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
+    border-radius: 20px; border: 1px solid #d9d9d9; font-size: 13px;
+    cursor: pointer; transition: all var(--g-transition); user-select: none; background: #fff;
+  }
+  .cho-plat-pill:hover { border-color: var(--primary); }
+  .cho-plat-pill.active { background: color-mix(in srgb, var(--primary) 8%, #fff); border-color: var(--primary); color: var(--primary); font-weight: 600; }
+  .cho-plat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+  .cho-dot-all { background: var(--primary); }
+  .cho-dot-meituan { background: #ffc107; }
+  .cho-dot-eleme { background: #2196f3; }
+  .cho-dot-mini { background: #722ed1; }
+
+  /* 工具栏 */
+  .cho-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 12px 16px;
+    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
+    border: 1px solid var(--g-border); margin-bottom: 14px;
+  }
+  .cho-search-wrap { position: relative; width: 200px; }
+  .cho-search-wrap .g-input { padding-left: 30px; width: 100%; }
+  .cho-search-wrap i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--g-text-muted); pointer-events: none; }
+  .cho-toolbar-right { margin-left: auto; }
+
+  /* 订单卡片列表 */
+  .cho-order-list { display: flex; flex-direction: column; gap: 10px; }
+  .cho-order-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 16px 20px; transition: box-shadow var(--g-transition); position: relative;
+    cursor: pointer;
+  }
+  .cho-order-card:hover { box-shadow: var(--g-shadow-md); }
+  .cho-order-card.cho-urgent { border-left: 3px solid var(--g-warning); }
+  .cho-order-row { display: flex; align-items: center; gap: 10px; }
+  .cho-order-row + .cho-order-row { margin-top: 10px; }
+  .cho-order-no { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 13px; color: var(--g-text); font-weight: 600; }
+  .cho-order-time { margin-left: auto; font-size: 12px; color: var(--g-text-muted); flex-shrink: 0; }
+  .cho-order-items { flex: 1; font-size: 13px; color: var(--g-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  .cho-order-amount { font-size: 15px; font-weight: 700; color: var(--g-text); margin-left: auto; flex-shrink: 0; }
+  .cho-order-customer { font-size: 12px; color: var(--g-text-muted); display: flex; align-items: center; gap: 4px; }
+  .cho-order-customer i { width: 13px; height: 13px; }
+  .cho-order-addr { font-size: 12px; color: var(--g-text-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 12px; }
+  .cho-order-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
+
+  /* 已完成/已取消卡片弱化 */
+  .cho-order-card.cho-dimmed { opacity: 0.6; }
+  .cho-order-card.cho-dimmed:hover { opacity: 0.8; }
+
+  /* 平台tag自定义色 */
+  .cho-tag-meituan { background: #fff8e1; color: #f57f17; }
+  .cho-tag-eleme { background: #e3f2fd; color: #1565c0; }
+  .cho-tag-mini { background: #f3e5f5; color: #7b1fa2; }
+
+  /* 抽屉 */
+  .cho-drawer { width: 480px; }
+  .cho-section { margin-bottom: 22px; }
+  .cho-section-hd {
+    font-size: 14px; font-weight: 600; color: var(--g-text);
+    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
+  }
+  .cho-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 13px; }
+  .cho-info-label { color: var(--g-text-muted); }
+  .cho-info-val { color: var(--g-text); }
+  .cho-info-full { grid-column: 1 / -1; }
+  .cho-prod-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .cho-prod-table th {
+    text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 500;
+    color: var(--g-text-muted); background: var(--g-bg-subtle); border-bottom: 1px solid var(--g-border);
+  }
+  .cho-prod-table td { padding: 8px 10px; border-bottom: 1px solid #f5f5f5; color: var(--g-text); }
+  .cho-sum-block { font-size: 13px; padding: 12px 10px 0; display: flex; flex-direction: column; gap: 6px; }
+  .cho-sum-row { display: flex; justify-content: space-between; color: var(--g-text-secondary); }
+  .cho-sum-total {
+    display: flex; justify-content: space-between; font-weight: 600; color: var(--g-text);
+    border-top: 1px solid var(--g-border); padding-top: 8px; margin-top: 4px;
+  }
+</style>
+
+<!-- 顶部统计卡片 -->
+<div class="cho-stats">
+  <div class="cho-stat-card">
+    <div class="cho-stat-label"><i data-lucide="receipt"></i> 今日总单量</div>
+    <div class="cho-stat-val">186 <span class="cho-stat-trend up"><i data-lucide="trending-up" style="width:13px;height:13px;vertical-align:-2px;"></i> +8%</span></div>
+  </div>
+  <div class="cho-stat-card urgent">
+    <div class="cho-stat-label"><i data-lucide="alert-circle"></i> 待接单</div>
+    <div class="cho-stat-val">5</div>
+  </div>
+  <div class="cho-stat-card">
+    <div class="cho-stat-label"><i data-lucide="bike"></i> 配送中</div>
+    <div class="cho-stat-val">12</div>
+  </div>
+  <div class="cho-stat-card">
+    <div class="cho-stat-label"><i data-lucide="banknote"></i> 今日营收</div>
+    <div class="cho-stat-val" style="font-size:22px;">&yen;12,480</div>
+  </div>
+</div>
+
+<!-- 平台来源pills -->
+<div class="cho-platforms">
+  <div class="cho-plat-pill active" onclick="choSwitchPlatform(event.currentTarget)">
+    <span class="cho-plat-dot cho-dot-all"></span> 全部 (186)
+  </div>
+  <div class="cho-plat-pill" onclick="choSwitchPlatform(event.currentTarget)">
+    <span class="cho-plat-dot cho-dot-meituan"></span> 美团外卖 (68)
+  </div>
+  <div class="cho-plat-pill" onclick="choSwitchPlatform(event.currentTarget)">
+    <span class="cho-plat-dot cho-dot-eleme"></span> 饿了么 (52)
+  </div>
+  <div class="cho-plat-pill" onclick="choSwitchPlatform(event.currentTarget)">
+    <span class="cho-plat-dot cho-dot-mini"></span> 自有小程序 (66)
+  </div>
+</div>
+
+<!-- 工具栏 -->
+<div class="cho-toolbar">
+  <select class="g-select" style="width:130px;">
+    <option>全部状态</option>
+    <option>待接单</option>
+    <option>已接单</option>
+    <option>配送中</option>
+    <option>已完成</option>
+    <option>已取消</option>
+  </select>
+  <select class="g-select" style="width:110px;">
+    <option>今天</option>
+    <option>昨天</option>
+    <option>近7天</option>
+  </select>
+  <div class="cho-search-wrap">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input class="g-input" placeholder="搜索订单号/手机号">
+  </div>
+  <div class="cho-toolbar-right">
+    <button class="g-btn g-btn-primary"><i data-lucide="check-check" style="width:14px;height:14px;"></i> 批量接单</button>
+  </div>
+</div>
+
+<!-- 订单卡片列表 -->
+<div class="cho-order-list">
+
+  <!-- 1. 待接单-美团 -->
+  <div class="cho-order-card cho-urgent" onclick="choOpenDrawer('MT20260213001')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#MT20260213001</span>
+      <span class="g-tag cho-tag-meituan">美团外卖</span>
+      <span class="g-tag g-tag-orange">待接单</span>
+      <span class="cho-order-time">12:32:15</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">宫保鸡丁套餐x1、米饭x1 等2件</span>
+      <span class="cho-order-amount">&yen;58.00</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 张**</span>
+      <span class="cho-order-addr">朝阳区建国路88号院3号楼1单元502</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <button class="g-btn g-btn-primary g-btn-sm">接单</button>
+        <a class="g-action g-action-danger">拒单</a>
+      </div>
+    </div>
+  </div>
+
+  <!-- 2. 待接单-饿了么 -->
+  <div class="cho-order-card cho-urgent" onclick="choOpenDrawer('EL20260213002')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#EL20260213002</span>
+      <span class="g-tag cho-tag-eleme">饿了么</span>
+      <span class="g-tag g-tag-orange">待接单</span>
+      <span class="cho-order-time">12:28:40</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">麻辣香锅(中辣)x1、可乐x1 等2件</span>
+      <span class="cho-order-amount">&yen;42.50</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 李**</span>
+      <span class="cho-order-addr">海淀区中关村大街1号银谷大厦8层</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <button class="g-btn g-btn-primary g-btn-sm">接单</button>
+        <a class="g-action g-action-danger">拒单</a>
+      </div>
+    </div>
+  </div>
+
+  <!-- 3. 待接单-小程序 -->
+  <div class="cho-order-card cho-urgent" onclick="choOpenDrawer('WX20260213003')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#WX20260213003</span>
+      <span class="g-tag cho-tag-mini">小程序</span>
+      <span class="g-tag g-tag-orange">待接单</span>
+      <span class="cho-order-time">12:25:08</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">牛肉面套餐x1、卤蛋x1 等2件</span>
+      <span class="cho-order-amount">&yen;35.00</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 王**</span>
+      <span class="cho-order-addr">西城区金融街7号英蓝国际金融中心B座</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <button class="g-btn g-btn-primary g-btn-sm">接单</button>
+        <a class="g-action g-action-danger">拒单</a>
+      </div>
+    </div>
+  </div>
+
+  <!-- 4. 已接单-美团 -->
+  <div class="cho-order-card" onclick="choOpenDrawer('MT20260213004')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#MT20260213004</span>
+      <span class="g-tag cho-tag-meituan">美团外卖</span>
+      <span class="g-tag g-tag-blue">已接单</span>
+      <span class="cho-order-time">12:15:30</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">4人聚餐套餐x1、啤酒x4 等5件</span>
+      <span class="cho-order-amount">&yen;126.00</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 赵**</span>
+      <span class="cho-order-addr">朝阳区望京SOHO T1 12层</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <button class="g-btn g-btn-sm"><i data-lucide="phone-call" style="width:13px;height:13px;"></i> 呼叫配送</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 5. 配送中-饿了么 -->
+  <div class="cho-order-card" onclick="choOpenDrawer('EL20260213005')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#EL20260213005</span>
+      <span class="g-tag cho-tag-eleme">饿了么</span>
+      <span class="g-tag g-tag-blue">配送中</span>
+      <span class="cho-order-time">11:58:12</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">烤鱼套餐(微辣)x1、凉菜拼盘x1 等3件</span>
+      <span class="cho-order-amount">&yen;68.00</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 刘**</span>
+      <span class="cho-order-addr">丰台区丽泽商务区16号院平安幸福中心</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <a class="g-action">催配送</a>
+        <a class="g-action">查看骑手</a>
+      </div>
+    </div>
+  </div>
+
+  <!-- 6. 配送中-小程序 -->
+  <div class="cho-order-card" onclick="choOpenDrawer('WX20260213006')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#WX20260213006</span>
+      <span class="g-tag cho-tag-mini">小程序</span>
+      <span class="g-tag g-tag-blue">配送中</span>
+      <span class="cho-order-time">11:45:50</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">拿铁咖啡x2、提拉米苏x1 等3件</span>
+      <span class="cho-order-amount">&yen;45.00</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 陈**</span>
+      <span class="cho-order-addr">东城区东直门外大街48号东方银座C座</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <a class="g-action">催配送</a>
+        <a class="g-action">查看骑手</a>
+      </div>
+    </div>
+  </div>
+
+  <!-- 7. 已完成-美团 -->
+  <div class="cho-order-card cho-dimmed" onclick="choOpenDrawer('MT20260213007')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#MT20260213007</span>
+      <span class="g-tag cho-tag-meituan">美团外卖</span>
+      <span class="g-tag g-tag-green">已完成</span>
+      <span class="cho-order-time">11:20:05</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">小龙虾套餐(十三香)x1、啤酒x2 等3件</span>
+      <span class="cho-order-amount">&yen;89.00</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 孙**</span>
+      <span class="cho-order-addr">朝阳区三里屯太古里南区S2栋</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <a class="g-action">查看详情</a>
+      </div>
+    </div>
+  </div>
+
+  <!-- 8. 已完成-饿了么 -->
+  <div class="cho-order-card cho-dimmed" onclick="choOpenDrawer('EL20260213008')">
+    <div class="cho-order-row">
+      <span class="cho-order-no">#EL20260213008</span>
+      <span class="g-tag cho-tag-eleme">饿了么</span>
+      <span class="g-tag g-tag-green">已完成</span>
+      <span class="cho-order-time">10:55:30</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-items">蛋炒饭x1、紫菜蛋花汤x1 等2件</span>
+      <span class="cho-order-amount">&yen;32.00</span>
+    </div>
+    <div class="cho-order-row">
+      <span class="cho-order-customer"><i data-lucide="user"></i> 周**</span>
+      <span class="cho-order-addr">海淀区五道口华清嘉园12号楼</span>
+      <div class="cho-order-actions" onclick="event.stopPropagation()">
+        <a class="g-action">查看详情</a>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination">
+  <span>共 186 条</span>
+  <button class="g-page-btn" disabled>&lt;</button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn">3</button>
+  <button class="g-page-btn">...</button>
+  <button class="g-page-btn">10</button>
+  <button class="g-page-btn">&gt;</button>
+</div>
+
+<!-- 订单详情抽屉 -->
+<div class="g-drawer-mask" id="choDrawerMask" onclick="choCloseDrawer()"></div>
+<div class="g-drawer cho-drawer" id="choDrawer">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="choDrawerTitle">订单详情</span>
+    <button class="g-drawer-close" onclick="choCloseDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+
+    <!-- 基本信息 -->
+    <div class="cho-section">
+      <div class="cho-section-hd">基本信息</div>
+      <div class="cho-info-grid">
+        <div><span class="cho-info-label">订单号：</span><span class="cho-info-val" style="font-family:monospace;">#MT20260213001</span></div>
+        <div><span class="cho-info-label">来源平台：</span><span class="g-tag cho-tag-meituan">美团外卖</span></div>
+        <div><span class="cho-info-label">订单状态：</span><span class="g-tag g-tag-orange">待接单</span></div>
+        <div><span class="cho-info-label">下单时间：</span><span class="cho-info-val">2026-02-13 12:32:15</span></div>
+      </div>
+    </div>
+
+    <!-- 菜品明细 -->
+    <div class="cho-section">
+      <div class="cho-section-hd">菜品明细</div>
+      <table class="cho-prod-table">
+        <thead>
+          <tr><th>菜品</th><th>数量</th><th>单价</th><th style="text-align:right;">小计</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>宫保鸡丁套餐</td><td>1</td><td>&yen;45.00</td><td style="text-align:right;">&yen;45.00</td></tr>
+          <tr><td>米饭(加量)</td><td>1</td><td>&yen;3.00</td><td style="text-align:right;">&yen;3.00</td></tr>
+        </tbody>
+      </table>
+      <div class="cho-sum-block">
+        <div class="cho-sum-row"><span>商品总额</span><span>&yen;48.00</span></div>
+        <div class="cho-sum-row"><span>配送费</span><span>&yen;5.00</span></div>
+        <div class="cho-sum-row"><span>包装费</span><span>&yen;2.00</span></div>
+        <div class="cho-sum-row"><span>优惠减免</span><span style="color:var(--g-danger);">-&yen;7.00</span></div>
+        <div class="cho-sum-total"><span>实付金额</span><span style="color:var(--primary);font-size:15px;">&yen;58.00</span></div>
+      </div>
+    </div>
+
+    <!-- 收货信息 -->
+    <div class="cho-section">
+      <div class="cho-section-hd">收货信息</div>
+      <div class="cho-info-grid">
+        <div><span class="cho-info-label">收货人：</span><span class="cho-info-val">张**</span></div>
+        <div><span class="cho-info-label">联系电话：</span><span class="cho-info-val">138****6789</span></div>
+        <div class="cho-info-full"><span class="cho-info-label">收货地址：</span><span class="cho-info-val">北京市朝阳区建国路88号院3号楼1单元502</span></div>
+      </div>
+    </div>
+
+    <!-- 配送信息 -->
+    <div class="cho-section">
+      <div class="cho-section-hd">配送信息</div>
+      <div class="cho-info-grid">
+        <div><span class="cho-info-label">配送方式：</span><span class="cho-info-val">美团专送</span></div>
+        <div><span class="cho-info-label">预计送达：</span><span class="cho-info-val">13:10 前</span></div>
+        <div><span class="cho-info-label">骑手姓名：</span><span class="cho-info-val" style="color:var(--g-text-muted);">待分配</span></div>
+        <div><span class="cho-info-label">骑手电话：</span><span class="cho-info-val" style="color:var(--g-text-muted);">--</span></div>
+      </div>
+    </div>
+
+  </div>
+  <div class="g-drawer-ft" id="choDrawerFt">
+    <button class="g-btn" onclick="choCloseDrawer()">关闭</button>
+    <button class="g-btn g-btn-primary">接单</button>
+  </div>
+</div>
+
+<script>
+  /* 平台pill切换 */
+  function choSwitchPlatform(el) {
+    document.querySelectorAll('.cho-plat-pill').forEach(function(p) { p.classList.remove('active'); });
+    el.classList.add('active');
+  }
+
+  /* 抽屉开关 */
+  function choOpenDrawer(orderNo) {
+    document.getElementById('choDrawerTitle').textContent = '订单详情 #' + orderNo;
+    document.getElementById('choDrawerMask').classList.add('open');
+    document.getElementById('choDrawer').classList.add('open');
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+  function choCloseDrawer() {
+    document.getElementById('choDrawerMask').classList.remove('open');
+    document.getElementById('choDrawer').classList.remove('open');
+  }
+
+  /* 初始化图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/ch-platform.html b/TakeoutSaaS.Prototypes/pages/ch-platform.html
new file mode 100644
index 0000000..8cd9cf3
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/ch-platform.html
@@ -0,0 +1,308 @@
+<!-- 渠道管理 - 平台接入 -->
+<style>
+  .chp-page { display:flex; flex-direction:column; gap:20px; }
+
+  /* 顶部统计条 */
+  .chp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+  .chp-stat-item {
+    background:#fff; border-radius:10px; padding:18px 22px;
+    box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
+    display:flex; align-items:center; gap:14px;
+  }
+  .chp-stat-item:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .chp-stat-icon {
+    width:42px; height:42px; border-radius:10px; display:flex;
+    align-items:center; justify-content:center; flex-shrink:0;
+  }
+  .chp-stat-icon.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
+  .chp-stat-icon.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
+  .chp-stat-icon.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
+  .chp-stat-icon.teal { background:color-mix(in srgb, #06b6d4 12%, #fff); color:#06b6d4; }
+  .chp-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:4px; }
+  .chp-stat-value { font-size:22px; font-weight:700; color:var(--g-text); }
+  .chp-stat-value .unit { font-size:13px; font-weight:400; color:var(--g-text-muted); margin-left:2px; }
+  .chp-sync-dot {
+    display:inline-block; width:7px; height:7px; border-radius:50%;
+    background:var(--g-success); margin-right:6px; vertical-align:middle;
+    animation:chp-pulse 2s infinite;
+  }
+  @keyframes chp-pulse {
+    0%,100% { opacity:1; }
+    50% { opacity:.4; }
+  }
+
+  /* Section 标题 */
+  .chp-section-hd {
+    font-size:15px; font-weight:600; color:var(--g-text);
+    padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
+  }
+
+  /* 已接入渠道卡片网格 */
+  .chp-channel-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
+  .chp-channel-card {
+    background:#fff; border-radius:10px; padding:22px 24px;
+    box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
+    display:flex; flex-direction:column; gap:16px;
+  }
+  .chp-channel-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-2px); }
+
+  .chp-card-top { display:flex; align-items:center; justify-content:space-between; }
+  .chp-card-top-left { display:flex; align-items:center; gap:12px; }
+  .chp-logo {
+    width:40px; height:40px; border-radius:10px; display:flex;
+    align-items:center; justify-content:center;
+    font-size:18px; font-weight:700; flex-shrink:0;
+  }
+  .chp-logo.meituan { background:#FFC107; color:#1a1a2e; }
+  .chp-logo.eleme { background:#2563eb; color:#fff; }
+  .chp-logo.mini { background:var(--primary); color:#fff; }
+  .chp-logo.gray { background:#e5e7eb; color:#9ca3af; }
+
+  .chp-platform-name { font-size:15px; font-weight:600; color:var(--g-text); }
+  .chp-shop-name { font-size:12px; color:var(--g-text-muted); margin-top:2px; }
+
+  .chp-data-row {
+    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
+    background:#f8f9fb; border-radius:var(--g-radius); padding:14px 16px;
+  }
+  .chp-data-item { text-align:center; }
+  .chp-data-label { font-size:11px; color:var(--g-text-muted); margin-bottom:4px; }
+  .chp-data-val { font-size:18px; font-weight:700; color:var(--g-text); }
+  .chp-data-val .small-unit { font-size:12px; font-weight:400; color:var(--g-text-muted); }
+
+  .chp-sync-time { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
+
+  .chp-card-actions {
+    display:flex; align-items:center; gap:12px;
+    padding-top:14px; border-top:1px solid var(--g-border);
+  }
+  .chp-card-actions .spacer { flex:1; }
+
+  /* 待接入渠道 */
+  .chp-pending-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
+  .chp-pending-card {
+    border:2px dashed #d9d9d9; border-radius:10px; padding:22px 24px;
+    display:flex; align-items:center; gap:16px; background:#fafafa;
+    transition:var(--g-transition);
+  }
+  .chp-pending-card:hover { border-color:var(--primary); background:#fff; }
+  .chp-pending-info { flex:1; }
+  .chp-pending-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
+  .chp-pending-desc { font-size:12px; color:var(--g-text-muted); }
+  .chp-btn-outline {
+    padding:6px 16px; border-radius:var(--g-radius-sm); font-size:13px;
+    border:1px solid var(--primary); color:var(--primary); background:#fff;
+    cursor:pointer; transition:var(--g-transition); white-space:nowrap; font-weight:500;
+  }
+  .chp-btn-outline:hover { background:var(--primary-light); }
+
+  /* 底部提示条 */
+  .chp-info-bar {
+    background:color-mix(in srgb, var(--primary) 6%, #fff);
+    border:1px solid color-mix(in srgb, var(--primary) 15%, #fff);
+    border-radius:var(--g-radius); padding:14px 18px;
+    font-size:13px; color:var(--g-text-secondary);
+    display:flex; align-items:center; gap:8px;
+  }
+  .chp-info-bar i { color:var(--primary); flex-shrink:0; }
+</style>
+
+<div class="chp-page">
+
+  <!-- 顶部统计条 -->
+  <div class="chp-stats">
+    <div class="chp-stat-item">
+      <div class="chp-stat-icon blue"><i data-lucide="link" style="width:20px;height:20px"></i></div>
+      <div>
+        <div class="chp-stat-label">已接入渠道</div>
+        <div class="chp-stat-value">3<span class="unit">个</span></div>
+      </div>
+    </div>
+    <div class="chp-stat-item">
+      <div class="chp-stat-icon orange"><i data-lucide="shopping-bag" style="width:20px;height:20px"></i></div>
+      <div>
+        <div class="chp-stat-label">今日全渠道订单</div>
+        <div class="chp-stat-value">186<span class="unit">单</span></div>
+      </div>
+    </div>
+    <div class="chp-stat-item">
+      <div class="chp-stat-icon green"><i data-lucide="banknote" style="width:20px;height:20px"></i></div>
+      <div>
+        <div class="chp-stat-label">今日全渠道营收</div>
+        <div class="chp-stat-value">¥12,480</div>
+      </div>
+    </div>
+    <div class="chp-stat-item">
+      <div class="chp-stat-icon teal"><i data-lucide="refresh-cw" style="width:20px;height:20px"></i></div>
+      <div>
+        <div class="chp-stat-label">数据最后同步</div>
+        <div class="chp-stat-value" style="font-size:16px;"><span class="chp-sync-dot"></span>2 分钟前</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 已接入渠道 -->
+  <div>
+    <div class="chp-section-hd">已接入渠道</div>
+    <div class="chp-channel-grid">
+
+      <!-- 美团外卖 -->
+      <div class="chp-channel-card">
+        <div class="chp-card-top">
+          <div class="chp-card-top-left">
+            <div class="chp-logo meituan">美</div>
+            <div>
+              <div class="chp-platform-name">美团外卖</div>
+              <div class="chp-shop-name">老三家·朝阳店</div>
+            </div>
+          </div>
+          <span class="g-tag g-tag-green">已连接</span>
+        </div>
+        <div class="chp-data-row">
+          <div class="chp-data-item">
+            <div class="chp-data-label">今日订单</div>
+            <div class="chp-data-val">68<span class="small-unit">单</span></div>
+          </div>
+          <div class="chp-data-item">
+            <div class="chp-data-label">今日营收</div>
+            <div class="chp-data-val">¥4,580</div>
+          </div>
+          <div class="chp-data-item">
+            <div class="chp-data-label">好评率</div>
+            <div class="chp-data-val">4.8<span class="small-unit">分</span></div>
+          </div>
+        </div>
+        <div class="chp-sync-time">
+          <i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：3 分钟前
+        </div>
+        <div class="chp-card-actions">
+          <button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
+          <a class="g-action" href="javascript:;">查看详情</a>
+          <span class="spacer"></span>
+          <a class="g-action g-action-danger" href="javascript:;">断开连接</a>
+        </div>
+      </div>
+
+      <!-- 饿了么 -->
+      <div class="chp-channel-card">
+        <div class="chp-card-top">
+          <div class="chp-card-top-left">
+            <div class="chp-logo eleme">饿</div>
+            <div>
+              <div class="chp-platform-name">饿了么</div>
+              <div class="chp-shop-name">老三家餐饮(朝阳路)</div>
+            </div>
+          </div>
+          <span class="g-tag g-tag-green">已连接</span>
+        </div>
+        <div class="chp-data-row">
+          <div class="chp-data-item">
+            <div class="chp-data-label">今日订单</div>
+            <div class="chp-data-val">52<span class="small-unit">单</span></div>
+          </div>
+          <div class="chp-data-item">
+            <div class="chp-data-label">今日营收</div>
+            <div class="chp-data-val">¥3,420</div>
+          </div>
+          <div class="chp-data-item">
+            <div class="chp-data-label">好评率</div>
+            <div class="chp-data-val">4.6<span class="small-unit">分</span></div>
+          </div>
+        </div>
+        <div class="chp-sync-time">
+          <i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：5 分钟前
+        </div>
+        <div class="chp-card-actions">
+          <button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
+          <a class="g-action" href="javascript:;">查看详情</a>
+          <span class="spacer"></span>
+          <a class="g-action g-action-danger" href="javascript:;">断开连接</a>
+        </div>
+      </div>
+
+      <!-- 自有小程序 -->
+      <div class="chp-channel-card">
+        <div class="chp-card-top">
+          <div class="chp-card-top-left">
+            <div class="chp-logo mini">自</div>
+            <div>
+              <div class="chp-platform-name">自有小程序</div>
+              <div class="chp-shop-name">老三家官方小程序</div>
+            </div>
+          </div>
+          <span class="g-tag g-tag-blue">同步中</span>
+        </div>
+        <div class="chp-data-row">
+          <div class="chp-data-item">
+            <div class="chp-data-label">今日订单</div>
+            <div class="chp-data-val">66<span class="small-unit">单</span></div>
+          </div>
+          <div class="chp-data-item">
+            <div class="chp-data-label">今日营收</div>
+            <div class="chp-data-val">¥4,480</div>
+          </div>
+          <div class="chp-data-item">
+            <div class="chp-data-label">好评率</div>
+            <div class="chp-data-val">4.9<span class="small-unit">分</span></div>
+          </div>
+        </div>
+        <div class="chp-sync-time">
+          <i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：实时同步
+        </div>
+        <div class="chp-card-actions">
+          <button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
+          <a class="g-action" href="javascript:;">查看详情</a>
+          <span class="spacer"></span>
+          <a class="g-action g-action-danger" href="javascript:;">断开连接</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- 待接入渠道 -->
+  <div>
+    <div class="chp-section-hd">更多渠道</div>
+    <div class="chp-pending-grid">
+
+      <div class="chp-pending-card">
+        <div class="chp-logo gray" style="font-size:16px;">抖</div>
+        <div class="chp-pending-info">
+          <div class="chp-pending-name">抖音团购</div>
+          <div class="chp-pending-desc">接入抖音本地生活，获取短视频流量</div>
+        </div>
+        <button class="chp-btn-outline">立即接入</button>
+      </div>
+
+      <div class="chp-pending-card">
+        <div class="chp-logo gray" style="font-size:16px;">快</div>
+        <div class="chp-pending-info">
+          <div class="chp-pending-name">快手本地生活</div>
+          <div class="chp-pending-desc">接入快手同城，覆盖下沉市场</div>
+        </div>
+        <button class="chp-btn-outline">立即接入</button>
+      </div>
+
+      <div class="chp-pending-card">
+        <div class="chp-logo gray" style="font-size:16px;">点</div>
+        <div class="chp-pending-info">
+          <div class="chp-pending-name">大众点评</div>
+          <div class="chp-pending-desc">同步大众点评店铺，管理团购套餐</div>
+        </div>
+        <button class="chp-btn-outline">立即接入</button>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- 底部提示条 -->
+  <div class="chp-info-bar">
+    <i data-lucide="info" style="width:16px;height:16px"></i>
+    接入新渠道后，该渠道的订单将自动同步到「订单聚合」页面，菜单可通过「菜单同步」统一管理。
+  </div>
+
+</div>
+
+<script>
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/dashboard.html b/TakeoutSaaS.Prototypes/pages/dashboard.html
new file mode 100644
index 0000000..feed92b
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/dashboard.html
@@ -0,0 +1,227 @@
+<!-- 工作台 Dashboard -->
+<style>
+  .dashboard { display:flex; flex-direction:column; gap:16px; }
+  .dash-row { display:grid; gap:16px; }
+  .dash-row.kpi { grid-template-columns:repeat(4,1fr); }
+  .dash-row.mid { grid-template-columns:2fr 1fr; }
+  .dash-row.bot { grid-template-columns:1fr 1fr 1fr; }
+
+  .kpi-card { border-radius:10px; padding:20px 24px; color:#fff; position:relative; overflow:hidden; min-height:120px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
+  .kpi-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-2px); }
+  .kpi-card::before { content:""; position:absolute; top:-30px; right:-30px; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,0.1); }
+  .kpi-card::after { content:""; position:absolute; bottom:-20px; right:30px; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,0.08); }
+  .kpi-card.c1 { background:linear-gradient(135deg,#1890ff,#096dd9); }
+  .kpi-card.c2 { background:linear-gradient(135deg,#22c55e,#16a34a); }
+  .kpi-card.c3 { background:linear-gradient(135deg,#f59e0b,#d97706); }
+  .kpi-card.c4 { background:linear-gradient(135deg,#722ed1,#531dab); }
+  .kpi-top { display:flex; align-items:center; justify-content:space-between; }
+  .kpi-label { font-size:13px; opacity:0.85; }
+  .kpi-icon { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; }
+  .kpi-value { font-size:34px; font-weight:800; letter-spacing:-1px; margin:8px 0 4px; }
+  .kpi-sub { font-size:12px; opacity:0.75; display:flex; align-items:center; gap:4px; }
+  .kpi-sub .up { color:#b7eb8f; }
+  .kpi-sub .down { color:#fecaca; }
+
+  .dash-card-more { font-size:12px; color:#9ca3af; font-weight:400; cursor:pointer; transition:var(--g-transition); }
+  .dash-card-more:hover { color:var(--primary); }
+
+  .bar-chart { display:flex; align-items:flex-end; gap:10px; height:200px; padding-top:10px; }
+  .bar-chart-wrap { display:flex; height:200px; }
+  .bar-y-axis { display:flex; flex-direction:column; justify-content:space-between; padding-right:8px; font-size:11px; color:#9ca3af; text-align:right; min-width:36px; padding-bottom:22px; }
+  .bar-chart-body { flex:1; display:flex; align-items:flex-end; gap:10px; }
+  .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
+  .bar-wrap { width:100%; display:flex; gap:4px; justify-content:center; height:170px; align-items:flex-end; }
+  .bar { width:18px; border-radius:4px 4px 0 0; transition:height 0.6s cubic-bezier(0.2,0,0,1); cursor:pointer; }
+  .bar:hover { opacity:0.85; }
+  .bar.income { background:linear-gradient(180deg,#1890ff,#69c0ff); }
+  .bar.orders { background:linear-gradient(180deg,#22c55e,#86efac); }
+  .bar-label { font-size:11px; color:#9ca3af; }
+
+  .donut-wrap { display:flex; align-items:center; gap:24px; padding:10px 0; }
+  .donut { width:140px; height:140px; border-radius:50%; position:relative; flex-shrink:0; }
+  .donut-center { position:absolute; inset:30px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
+  .donut-center .num { font-size:24px; font-weight:800; color:#1a1a2e; }
+  .donut-center .txt { font-size:11px; color:#9ca3af; }
+  .donut-legend { display:flex; flex-direction:column; gap:10px; flex:1; }
+  .legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:#1a1a2e; }
+  .legend-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
+  .legend-val { margin-left:auto; font-weight:600; }
+
+  .rank-list { display:flex; flex-direction:column; gap:12px; }
+  .rank-item { display:flex; align-items:center; gap:10px; }
+  .rank-num { width:20px; height:20px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; flex-shrink:0; }
+  .rank-num.t1 { background:linear-gradient(135deg,#ef4444,#f97316); }
+  .rank-num.t2 { background:linear-gradient(135deg,#f59e0b,#fbbf24); }
+  .rank-num.t3 { background:linear-gradient(135deg,#1890ff,#69c0ff); }
+  .rank-num.tn { background:#e5e7eb; color:#4b5563; }
+  .rank-name { font-size:13px; color:#1a1a2e; flex:1; }
+  .rank-bar-bg { width:100px; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
+  .rank-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#1890ff,#69c0ff); }
+  .rank-count { font-size:12px; color:#9ca3af; width:40px; text-align:right; font-weight:600; }
+
+  .feed-list { display:flex; flex-direction:column; max-height:320px; overflow-y:auto; }
+  .feed-list::-webkit-scrollbar { width:3px; }
+  .feed-list::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:2px; }
+  .feed-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f3f4f6; transition:var(--g-transition); }
+  .feed-item:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .feed-item:last-child { border-bottom:none; }
+  .feed-avatar { width:32px; height:32px; border-radius:50%; background:#f8f9fb; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; color:#4b5563; }
+  .feed-info { flex:1; }
+  .feed-info .top { font-size:13px; color:#1a1a2e; display:flex; justify-content:space-between; }
+  .feed-info .bot { font-size:11px; color:#9ca3af; margin-top:3px; }
+  .feed-badge { padding:2px 8px; border-radius:6px; font-size:11px; white-space:nowrap; font-weight:600; }
+  .feed-badge.new { background:#eff6ff; color:#2563eb; }
+  .feed-badge.cooking { background:#fffbeb; color:#d97706; }
+  .feed-badge.delivering { background:#f0fdf4; color:#16a34a; }
+  .feed-badge.done { background:#f8f9fb; color:#9ca3af; }
+
+  .alert-list { display:flex; flex-direction:column; gap:8px; }
+  .alert-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:13px; transition:var(--g-transition); cursor:pointer; }
+  .alert-item:hover { filter:brightness(0.97); transform:translateX(2px); }
+  .alert-item.warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
+  .alert-item.danger { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
+  .alert-item.info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
+  .alert-icon { flex-shrink:0; }
+
+  .quota-item { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
+  .quota-item:last-child { margin-bottom:0; }
+  .quota-head { display:flex; justify-content:space-between; font-size:13px; }
+  .quota-name { color:#1a1a2e; font-weight:500; }
+  .quota-val { color:#9ca3af; }
+  .quota-bar { height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; }
+  .quota-fill { height:100%; border-radius:4px; transition:width 0.6s; }
+  .quota-fill.ok { background:linear-gradient(90deg,#1890ff,#69c0ff); }
+  .quota-fill.mid { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
+  .quota-fill.high { background:linear-gradient(90deg,#ef4444,#f97316); }
+
+  @keyframes fadeInUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
+  .dashboard .dash-row > * { animation: fadeInUp 0.4s ease both; }
+  .dashboard .dash-row > *:nth-child(2) { animation-delay:0.05s; }
+  .dashboard .dash-row > *:nth-child(3) { animation-delay:0.1s; }
+  .dashboard .dash-row > *:nth-child(4) { animation-delay:0.15s; }
+</style>
+
+<div class="dashboard">
+  <!-- Date Picker -->
+  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:-8px">
+    <div style="font-size:15px;font-weight:600;color:#1a1a2e">数据概览</div>
+    <div style="display:flex;align-items:center;gap:8px">
+      <span style="font-size:13px;color:#666">日期</span>
+      <input type="date" class="g-input" style="width:140px;height:30px;font-size:12px" value="2025-01-15">
+      <span style="font-size:13px;color:#999">至</span>
+      <input type="date" class="g-input" style="width:140px;height:30px;font-size:12px" value="2025-01-15">
+    </div>
+  </div>
+
+  <!-- KPI -->
+  <div class="dash-row kpi">
+    <div class="kpi-card c1">
+      <div class="kpi-top"><span class="kpi-label">今日订单</span><div class="kpi-icon"><i data-lucide="shopping-bag" style="width:20px;height:20px;"></i></div></div>
+      <div class="kpi-value">386</div>
+      <div class="kpi-sub"><span class="up">+12.5%</span> 较昨日</div>
+    </div>
+    <div class="kpi-card c2">
+      <div class="kpi-top"><span class="kpi-label">今日营收</span><div class="kpi-icon"><i data-lucide="trending-up" style="width:20px;height:20px;"></i></div></div>
+      <div class="kpi-value">&yen;12,680</div>
+      <div class="kpi-sub"><span class="up">+8.3%</span> 较昨日</div>
+    </div>
+    <div class="kpi-card c3">
+      <div class="kpi-top"><span class="kpi-label">客单价</span><div class="kpi-icon"><i data-lucide="receipt" style="width:20px;height:20px;"></i></div></div>
+      <div class="kpi-value">&yen;32.8</div>
+      <div class="kpi-sub"><span class="down">-2.1%</span> 较昨日</div>
+    </div>
+    <div class="kpi-card c4">
+      <div class="kpi-top"><span class="kpi-label">新增客户</span><div class="kpi-icon"><i data-lucide="user-plus" style="width:20px;height:20px;"></i></div></div>
+      <div class="kpi-value">57</div>
+      <div class="kpi-sub"><span class="up">+23.9%</span> 较昨日</div>
+    </div>
+  </div>
+
+  <!-- Revenue Chart + Order Status -->
+  <div class="dash-row mid">
+    <div class="g-card" style="padding:0;">
+      <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5; display:flex; align-items:center; justify-content:space-between;">近7日营收趋势<span class="dash-card-more">查看详情 &rarr;</span></div>
+      <div style="padding:16px 18px;">
+        <div class="bar-chart-wrap">
+          <div class="bar-y-axis"><span>¥15k</span><span>¥12k</span><span>¥9k</span><span>¥6k</span><span>¥3k</span><span>0</span></div>
+          <div class="bar-chart">
+          <div class="bar-col"><div class="bar-wrap"><div class="bar income" style="height:60%;"></div><div class="bar orders" style="height:45%;"></div></div><span class="bar-label">周一</span></div>
+          <div class="bar-col"><div class="bar-wrap"><div class="bar income" style="height:75%;"></div><div class="bar orders" style="height:55%;"></div></div><span class="bar-label">周二</span></div>
+          <div class="bar-col"><div class="bar-wrap"><div class="bar income" style="height:55%;"></div><div class="bar orders" style="height:40%;"></div></div><span class="bar-label">周三</span></div>
+          <div class="bar-col"><div class="bar-wrap"><div class="bar income" style="height:85%;"></div><div class="bar orders" style="height:65%;"></div></div><span class="bar-label">周四</span></div>
+          <div class="bar-col"><div class="bar-wrap"><div class="bar income" style="height:95%;"></div><div class="bar orders" style="height:72%;"></div></div><span class="bar-label">周五</span></div>
+          <div class="bar-col"><div class="bar-wrap"><div class="bar income" style="height:100%;"></div><div class="bar orders" style="height:80%;"></div></div><span class="bar-label">周六</span></div>
+          <div class="bar-col"><div class="bar-wrap"><div class="bar income" style="height:90%;"></div><div class="bar orders" style="height:70%;"></div></div><span class="bar-label">周日</span></div>
+        </div>
+        </div>
+        <div style="display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:12px;color:#999;">
+          <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#1890ff;margin-right:4px;"></span>营收</span>
+          <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#52c41a;margin-right:4px;"></span>订单量</span>
+        </div>
+      </div>
+    </div>
+    <div class="g-card" style="padding:0;">
+      <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5; display:flex; align-items:center; justify-content:space-between;">今日订单状态</div>
+      <div style="padding:16px 18px;">
+        <div class="donut-wrap">
+          <div class="donut" style="background:conic-gradient(#1890ff 0% 15%,#fa8c16 15% 30%,#52c41a 30% 55%,#722ed1 55% 75%,#d9d9d9 75% 100%);">
+            <div class="donut-center"><span class="num">386</span><span class="txt">总订单</span></div>
+          </div>
+          <div class="donut-legend">
+            <div class="legend-item"><span class="legend-dot" style="background:#1890ff;"></span>待接单<span class="legend-val">58</span></div>
+            <div class="legend-item"><span class="legend-dot" style="background:#fa8c16;"></span>制作中<span class="legend-val">59</span></div>
+            <div class="legend-item"><span class="legend-dot" style="background:#52c41a;"></span>配送中<span class="legend-val">96</span></div>
+            <div class="legend-item"><span class="legend-dot" style="background:#722ed1;"></span>已完成<span class="legend-val">77</span></div>
+            <div class="legend-item"><span class="legend-dot" style="background:#d9d9d9;"></span>已取消<span class="legend-val">96</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Ranking + Feed + Alerts -->
+  <div class="dash-row bot">
+    <div class="g-card" style="padding:0;">
+      <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5; display:flex; align-items:center; justify-content:space-between;">热销菜品 TOP5<span class="dash-card-more">更多 &rarr;</span></div>
+      <div style="padding:16px 18px;">
+        <div class="rank-list">
+          <div class="rank-item"><span class="rank-num t1">1</span><span class="rank-name">招牌红烧肉饭</span><div class="rank-bar-bg"><div class="rank-bar-fill" style="width:100%;"></div></div><span class="rank-count">128</span></div>
+          <div class="rank-item"><span class="rank-num t2">2</span><span class="rank-name">香辣鸡腿堡套餐</span><div class="rank-bar-bg"><div class="rank-bar-fill" style="width:78%;"></div></div><span class="rank-count">99</span></div>
+          <div class="rank-item"><span class="rank-num t3">3</span><span class="rank-name">番茄牛腩面</span><div class="rank-bar-bg"><div class="rank-bar-fill" style="width:62%;"></div></div><span class="rank-count">79</span></div>
+          <div class="rank-item"><span class="rank-num tn">4</span><span class="rank-name">鱼香肉丝盖饭</span><div class="rank-bar-bg"><div class="rank-bar-fill" style="width:45%;"></div></div><span class="rank-count">58</span></div>
+          <div class="rank-item"><span class="rank-num tn">5</span><span class="rank-name">冰柠檬红茶</span><div class="rank-bar-bg"><div class="rank-bar-fill" style="width:35%;"></div></div><span class="rank-count">45</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="g-card" style="padding:0;">
+      <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5; display:flex; align-items:center; justify-content:space-between;">实时订单<span class="dash-card-more">全部订单 &rarr;</span></div>
+      <div style="padding:8px 18px;">
+        <div class="feed-list">
+          <div class="feed-item"><div class="feed-avatar">张</div><div class="feed-info"><div class="top"><span>#20260211001</span><span>&yen;45.5</span></div><div class="bot">张先生 &middot; 朝阳店 &middot; 2分钟前</div></div><span class="feed-badge new">待接单</span></div>
+          <div class="feed-item"><div class="feed-avatar">李</div><div class="feed-info"><div class="top"><span>#20260211002</span><span>&yen;68.0</span></div><div class="bot">李女士 &middot; 海淀店 &middot; 5分钟前</div></div><span class="feed-badge cooking">制作中</span></div>
+          <div class="feed-item"><div class="feed-avatar">王</div><div class="feed-info"><div class="top"><span>#20260211003</span><span>&yen;32.0</span></div><div class="bot">王先生 &middot; 望京店 &middot; 12分钟前</div></div><span class="feed-badge delivering">配送中</span></div>
+          <div class="feed-item"><div class="feed-avatar">赵</div><div class="feed-info"><div class="top"><span>#20260211004</span><span>&yen;55.5</span></div><div class="bot">赵女士 &middot; 朝阳店 &middot; 18分钟前</div></div><span class="feed-badge done">已完成</span></div>
+          <div class="feed-item"><div class="feed-avatar">刘</div><div class="feed-info"><div class="top"><span>#20260211005</span><span>&yen;28.0</span></div><div class="bot">刘先生 &middot; 通州店 &middot; 25分钟前</div></div><span class="feed-badge done">已完成</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="g-card" style="padding:0;">
+      <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5; display:flex; align-items:center; justify-content:space-between;">运营提醒</div>
+      <div style="padding:16px 18px;">
+        <div class="alert-list">
+          <div class="alert-item danger"><i data-lucide="alert-triangle" style="width:16px;height:16px;" class="alert-icon"></i>3款商品库存不足，请及时补货</div>
+          <div class="alert-item warn"><i data-lucide="clock" style="width:16px;height:16px;" class="alert-icon"></i>食品经营许可证将于30天后到期</div>
+          <div class="alert-item warn"><i data-lucide="message-square" style="width:16px;height:16px;" class="alert-icon"></i>5条新评价待回复</div>
+          <div class="alert-item info"><i data-lucide="gift" style="width:16px;height:16px;" class="alert-icon"></i>满减活动明日到期，建议续期</div>
+        </div>
+        <div style="margin-top:16px;">
+          <div style="font-size:13px;font-weight:600;color:#333;margin-bottom:10px;">套餐配额</div>
+          <div class="quota-item"><div class="quota-head"><span class="quota-name">门店数量</span><span class="quota-val">5 / 10</span></div><div class="quota-bar"><div class="quota-fill ok" style="width:50%;"></div></div></div>
+          <div class="quota-item"><div class="quota-head"><span class="quota-name">员工账号</span><span class="quota-val">18 / 20</span></div><div class="quota-bar"><div class="quota-fill high" style="width:90%;"></div></div></div>
+          <div class="quota-item"><div class="quota-head"><span class="quota-name">短信额度</span><span class="quota-val">320 / 1000</span></div><div class="quota-bar"><div class="quota-fill ok" style="width:32%;"></div></div></div>
+          <div class="quota-item"><div class="quota-head"><span class="quota-name">存储空间</span><span class="quota-val">1.8G / 5G</span></div><div class="quota-bar"><div class="quota-fill mid" style="width:36%;"></div></div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/TakeoutSaaS.Prototypes/pages/fin-cost.html b/TakeoutSaaS.Prototypes/pages/fin-cost.html
new file mode 100644
index 0000000..e417960
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/fin-cost.html
@@ -0,0 +1,306 @@
+<!-- 成本管理页 -->
+<style>
+  .fc-page { max-width:1000px; }
+  .fc-seg { display:flex; background:#f8f9fb; border-radius:var(--g-radius); padding:3px; gap:2px; width:fit-content; margin-bottom:20px; }
+  .fc-seg-item { padding:7px 28px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--g-text-secondary); transition:var(--g-transition); border:none; background:none; font-weight:500; }
+  .fc-seg-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
+
+  /* 月份选择器 */
+  .fc-month-picker { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
+  .fc-month-arrow { width:32px; height:32px; border-radius:var(--g-radius); border:1px solid #e5e7eb; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--g-transition); }
+  .fc-month-arrow:hover { border-color:var(--primary); color:var(--primary); }
+  .fc-month-title { font-size:16px; font-weight:700; color:var(--g-text); min-width:120px; text-align:center; }
+
+  /* 成本卡片 */
+  .fc-cost-card { margin-bottom:16px; }
+  .fc-cost-hd { display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; user-select:none; }
+  .fc-cost-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .fc-cost-icon.food { background:#eff6ff; color:#2563eb; }
+  .fc-cost-icon.labor { background:#f0fdf4; color:#16a34a; }
+  .fc-cost-icon.fixed { background:#fefce8; color:#ca8a04; }
+  .fc-cost-icon.pack { background:#fdf2f8; color:#db2777; }
+  .fc-cost-name { font-size:14px; font-weight:600; color:var(--g-text); }
+  .fc-cost-pct { font-size:12px; color:var(--g-text-muted); margin-left:4px; }
+  .fc-cost-total { margin-left:auto; display:flex; align-items:center; gap:8px; }
+  .fc-cost-total .fc-yen { font-size:13px; color:var(--g-text-secondary); }
+  .fc-cost-input { width:120px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:6px; font-size:14px; font-weight:600; text-align:right; outline:none; transition:var(--g-transition); }
+  .fc-cost-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .fc-expand-btn { font-size:12px; color:var(--primary); cursor:pointer; display:flex; align-items:center; gap:4px; transition:var(--g-transition); white-space:nowrap; }
+  .fc-expand-btn:hover { opacity:.7; }
+
+  /* 明细区域 */
+  .fc-detail { display:none; padding:0 20px 16px; }
+  .fc-detail.open { display:block; }
+  .fc-detail-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f3f4f6; font-size:13px; }
+  .fc-detail-row:last-child { border-bottom:none; }
+  .fc-detail-name { width:120px; color:var(--g-text); font-weight:500; }
+  .fc-detail-val { width:100px; }
+  .fc-detail-val input { width:100%; height:30px; padding:0 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; text-align:right; outline:none; transition:var(--g-transition); }
+  .fc-detail-val input:focus { border-color:var(--primary); }
+  .fc-detail-extra { font-size:12px; color:var(--g-text-muted); }
+  .fc-detail-sub { font-size:13px; font-weight:600; color:var(--g-text); width:80px; text-align:right; }
+  .fc-add-row { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--primary); cursor:pointer; margin-top:8px; transition:var(--g-transition); }
+  .fc-add-row:hover { opacity:.7; }
+  .fc-del-row { color:#ef4444; cursor:pointer; margin-left:6px; transition:var(--g-transition); }
+  .fc-del-row:hover { opacity:.7; }
+
+  /* 汇总行 */
+  .fc-summary { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#f8f9fb; border-radius:var(--g-radius); margin-top:8px; }
+  .fc-summary-label { font-size:15px; font-weight:700; color:var(--g-text); }
+  .fc-summary-val { font-size:22px; font-weight:800; color:var(--primary); }
+
+  /* 分析 - 统计卡片 */
+  .fc-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
+  .fc-stat-card { padding:18px; border-radius:10px; background:#fff; border:1px solid #f0f0f0; transition:var(--g-transition); }
+  .fc-stat-card:hover { box-shadow:var(--g-shadow-md); }
+  .fc-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:8px; }
+  .fc-stat-val { font-size:22px; font-weight:800; color:var(--g-text); }
+  .fc-stat-val .fc-up { color:#ef4444; font-size:13px; font-weight:600; }
+  .fc-stat-val .fc-down { color:var(--g-success); font-size:13px; font-weight:600; }
+
+  /* 趋势图占位 */
+  .fc-chart-placeholder { height:220px; border:2px dashed #e5e7eb; border-radius:var(--g-radius); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--g-text-muted); gap:8px; margin-bottom:20px; background:#fafafa; }
+  .fc-chart-placeholder .fc-chart-title { font-size:14px; font-weight:600; color:var(--g-text-secondary); }
+  .fc-chart-bars { display:flex; align-items:flex-end; gap:16px; height:100px; }
+  .fc-chart-bar { width:40px; border-radius:4px 4px 0 0; background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff), color-mix(in srgb, var(--primary) 40%, #fff)); }
+
+  /* 饼图 */
+  .fc-pie-section { display:flex; gap:24px; align-items:center; margin-bottom:20px; }
+  .fc-donut { width:160px; height:160px; border-radius:50%; position:relative; flex-shrink:0; background:conic-gradient(#2563eb 0% 44%, #16a34a 44% 72%, #ca8a04 72% 92%, #db2777 92% 100%); }
+  .fc-donut-center { position:absolute; inset:32px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
+  .fc-donut-center .num { font-size:18px; font-weight:800; color:var(--g-text); }
+  .fc-donut-center .txt { font-size:11px; color:var(--g-text-muted); }
+  .fc-legend { display:flex; flex-direction:column; gap:12px; }
+  .fc-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-text); }
+  .fc-legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
+  .fc-legend-pct { margin-left:auto; font-weight:600; min-width:40px; text-align:right; }
+
+  /* 明细表格 */
+  .fc-table { width:100%; border-collapse:collapse; font-size:13px; }
+  .fc-table th { background:#f8f9fb; padding:10px 12px; text-align:right; font-weight:600; color:var(--g-text-secondary); border-bottom:1px solid #e5e7eb; }
+  .fc-table th:first-child { text-align:left; }
+  .fc-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:var(--g-text); text-align:right; }
+  .fc-table td:first-child { text-align:left; font-weight:500; }
+  .fc-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+
+  .fc-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+</style>
+
+<div class="fc-page">
+  <!-- 分段Tab -->
+  <div class="fc-seg">
+    <button class="fc-seg-item active" onclick="fcSwitchTab(this,'fc-tab-entry')">成本录入</button>
+    <button class="fc-seg-item" onclick="fcSwitchTab(this,'fc-tab-analysis')">成本分析</button>
+  </div>
+
+  <!-- Tab1: 成本录入 -->
+  <div id="fc-tab-entry">
+    <!-- 月份选择器 -->
+    <div class="fc-month-picker">
+      <div class="fc-month-arrow" onclick="fcChangeMonth(-1)"><i data-lucide="chevron-left" style="width:16px;height:16px;"></i></div>
+      <div class="fc-month-title" id="fcMonthTitle">2026年2月</div>
+      <div class="fc-month-arrow" onclick="fcChangeMonth(1)"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></div>
+    </div>
+
+    <!-- 食材原料 -->
+    <div class="g-card fc-cost-card">
+      <div class="fc-cost-hd" onclick="fcToggleDetail('food')">
+        <div class="fc-cost-icon food"><i data-lucide="utensils-crossed" style="width:20px;height:20px;"></i></div>
+        <div>
+          <div class="fc-cost-name">食材原料 <span class="fc-cost-pct">43.8%</span></div>
+        </div>
+        <div class="fc-cost-total">
+          <span class="fc-yen">¥</span>
+          <input class="fc-cost-input" type="number" value="18500" placeholder="请输入金额">
+        </div>
+        <div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowFood"></i>明细</div>
+      </div>
+      <div class="fc-detail" id="fcDetailFood">
+        <div class="fc-detail-row"><span class="fc-detail-name">肉类</span><div class="fc-detail-val"><input value="8200" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">蔬菜</span><div class="fc-detail-val"><input value="4800" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">调料</span><div class="fc-detail-val"><input value="3000" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">饮品原料</span><div class="fc-detail-val"><input value="2500" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加品类</div>
+      </div>
+    </div>
+
+    <!-- 人工成本 -->
+    <div class="g-card fc-cost-card">
+      <div class="fc-cost-hd" onclick="fcToggleDetail('labor')">
+        <div class="fc-cost-icon labor"><i data-lucide="users" style="width:20px;height:20px;"></i></div>
+        <div>
+          <div class="fc-cost-name">人工成本 <span class="fc-cost-pct">28.4%</span></div>
+        </div>
+        <div class="fc-cost-total">
+          <span class="fc-yen">¥</span>
+          <input class="fc-cost-input" type="number" value="12000" placeholder="请输入金额">
+        </div>
+        <div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowLabor"></i>明细</div>
+      </div>
+      <div class="fc-detail" id="fcDetailLabor">
+        <div class="fc-detail-row"><span class="fc-detail-name">厨师</span><div class="fc-detail-val"><input value="2" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="4000" placeholder="月薪"></div><div class="fc-detail-sub">¥8,000</div></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">服务员</span><div class="fc-detail-val"><input value="1" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="2000" placeholder="月薪"></div><div class="fc-detail-sub">¥2,000</div></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">配送员</span><div class="fc-detail-val"><input value="1" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="1000" placeholder="月薪"></div><div class="fc-detail-sub">¥1,000</div></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">管理</span><div class="fc-detail-val"><input value="1" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="1000" placeholder="月薪"></div><div class="fc-detail-sub">¥1,000</div></div>
+        <div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加岗位</div>
+      </div>
+    </div>
+
+    <!-- 固定费用 -->
+    <div class="g-card fc-cost-card">
+      <div class="fc-cost-hd" onclick="fcToggleDetail('fixed')">
+        <div class="fc-cost-icon fixed"><i data-lucide="building" style="width:20px;height:20px;"></i></div>
+        <div>
+          <div class="fc-cost-name">固定费用 <span class="fc-cost-pct">20.1%</span></div>
+        </div>
+        <div class="fc-cost-total">
+          <span class="fc-yen">¥</span>
+          <input class="fc-cost-input" type="number" value="8500" placeholder="请输入金额">
+        </div>
+        <div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowFixed"></i>明细</div>
+      </div>
+      <div class="fc-detail" id="fcDetailFixed">
+        <div class="fc-detail-row"><span class="fc-detail-name">房租</span><div class="fc-detail-val"><input value="5000" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">水电</span><div class="fc-detail-val"><input value="1500" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">设备折旧</span><div class="fc-detail-val"><input value="2000" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加项目</div>
+      </div>
+    </div>
+
+    <!-- 包装耗材 -->
+    <div class="g-card fc-cost-card">
+      <div class="fc-cost-hd" onclick="fcToggleDetail('pack')">
+        <div class="fc-cost-icon pack"><i data-lucide="package" style="width:20px;height:20px;"></i></div>
+        <div>
+          <div class="fc-cost-name">包装耗材 <span class="fc-cost-pct">7.6%</span></div>
+        </div>
+        <div class="fc-cost-total">
+          <span class="fc-yen">¥</span>
+          <input class="fc-cost-input" type="number" value="3200" placeholder="请输入金额">
+        </div>
+        <div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowPack"></i>明细</div>
+      </div>
+      <div class="fc-detail" id="fcDetailPack">
+        <div class="fc-detail-row"><span class="fc-detail-name">外卖盒</span><div class="fc-detail-val"><input value="1800" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">袋子</span><div class="fc-detail-val"><input value="600" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">餐具</span><div class="fc-detail-val"><input value="500" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-detail-row"><span class="fc-detail-name">其他</span><div class="fc-detail-val"><input value="300" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
+        <div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加项目</div>
+      </div>
+    </div>
+
+    <!-- 汇总 -->
+    <div class="fc-summary">
+      <div class="fc-summary-label">本月总成本</div>
+      <div style="display:flex;align-items:center;gap:16px;">
+        <div class="fc-summary-val">¥42,200</div>
+        <button class="g-btn g-btn-primary">保存</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tab2: 成本分析 -->
+  <div id="fc-tab-analysis" style="display:none;">
+    <!-- 统计卡片 -->
+    <div class="fc-stat-row">
+      <div class="fc-stat-card">
+        <div class="fc-stat-label">本月总成本</div>
+        <div class="fc-stat-val">¥42,200</div>
+      </div>
+      <div class="fc-stat-card">
+        <div class="fc-stat-label">食材成本率</div>
+        <div class="fc-stat-val">38.5%</div>
+      </div>
+      <div class="fc-stat-card">
+        <div class="fc-stat-label">单均成本</div>
+        <div class="fc-stat-val">¥12.4</div>
+      </div>
+      <div class="fc-stat-card">
+        <div class="fc-stat-label">环比变化</div>
+        <div class="fc-stat-val"><span class="fc-up">&#8593; 3.2%</span></div>
+      </div>
+    </div>
+
+    <!-- 月度趋势 -->
+    <div class="g-card" style="padding:20px; margin-bottom:20px;">
+      <div class="fc-section-hd">近6个月成本趋势</div>
+      <div class="fc-chart-placeholder">
+        <div class="fc-chart-bars">
+          <div style="text-align:center;"><div class="fc-chart-bar" style="height:65px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">9月</div></div>
+          <div style="text-align:center;"><div class="fc-chart-bar" style="height:72px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">10月</div></div>
+          <div style="text-align:center;"><div class="fc-chart-bar" style="height:80px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">11月</div></div>
+          <div style="text-align:center;"><div class="fc-chart-bar" style="height:68px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">12月</div></div>
+          <div style="text-align:center;"><div class="fc-chart-bar" style="height:75px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">1月</div></div>
+          <div style="text-align:center;"><div class="fc-chart-bar" style="height:88px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">2月</div></div>
+        </div>
+        <div style="font-size:12px;color:var(--g-text-muted);">成本趋势图表区域</div>
+      </div>
+    </div>
+
+    <!-- 成本构成饼图 -->
+    <div class="g-card" style="padding:20px; margin-bottom:20px;">
+      <div class="fc-section-hd">成本构成</div>
+      <div class="fc-pie-section">
+        <div class="fc-donut">
+          <div class="fc-donut-center">
+            <div class="num">¥42.2k</div>
+            <div class="txt">总成本</div>
+          </div>
+        </div>
+        <div class="fc-legend">
+          <div class="fc-legend-item"><span class="fc-legend-dot" style="background:#2563eb;"></span>食材原料<span class="fc-legend-pct">44%</span></div>
+          <div class="fc-legend-item"><span class="fc-legend-dot" style="background:#16a34a;"></span>人工成本<span class="fc-legend-pct">28%</span></div>
+          <div class="fc-legend-item"><span class="fc-legend-dot" style="background:#ca8a04;"></span>固定费用<span class="fc-legend-pct">20%</span></div>
+          <div class="fc-legend-item"><span class="fc-legend-dot" style="background:#db2777;"></span>包装耗材<span class="fc-legend-pct">8%</span></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 成本明细表格 -->
+    <div class="g-card" style="padding:20px;">
+      <div class="fc-section-hd">成本明细</div>
+      <table class="fc-table">
+        <thead>
+          <tr><th>月份</th><th>食材</th><th>人工</th><th>固定</th><th>包装</th><th>总计</th><th>成本率</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>2026-02</td><td>¥18,500</td><td>¥12,000</td><td>¥8,500</td><td>¥3,200</td><td>¥42,200</td><td>38.5%</td></tr>
+          <tr><td>2026-01</td><td>¥17,800</td><td>¥12,000</td><td>¥8,500</td><td>¥3,100</td><td>¥41,400</td><td>37.8%</td></tr>
+          <tr><td>2025-12</td><td>¥19,200</td><td>¥11,500</td><td>¥8,500</td><td>¥3,400</td><td>¥42,600</td><td>39.2%</td></tr>
+          <tr><td>2025-11</td><td>¥16,500</td><td>¥11,500</td><td>¥8,500</td><td>¥2,900</td><td>¥39,400</td><td>36.5%</td></tr>
+          <tr><td>2025-10</td><td>¥15,800</td><td>¥11,000</td><td>¥8,500</td><td>¥2,800</td><td>¥38,100</td><td>35.9%</td></tr>
+          <tr><td>2025-09</td><td>¥14,600</td><td>¥11,000</td><td>¥8,500</td><td>¥2,600</td><td>¥36,700</td><td>34.8%</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Tab切换
+  function fcSwitchTab(el, tabId) {
+    document.querySelectorAll('.fc-seg-item').forEach(b => b.classList.remove('active'));
+    el.classList.add('active');
+    document.getElementById('fc-tab-entry').style.display = tabId === 'fc-tab-entry' ? '' : 'none';
+    document.getElementById('fc-tab-analysis').style.display = tabId === 'fc-tab-analysis' ? '' : 'none';
+  }
+
+  // 月份切换
+  var fcMonth = 2, fcYear = 2026;
+  function fcChangeMonth(dir) {
+    fcMonth += dir;
+    if (fcMonth > 12) { fcMonth = 1; fcYear++; }
+    if (fcMonth < 1) { fcMonth = 12; fcYear--; }
+    document.getElementById('fcMonthTitle').textContent = fcYear + '年' + fcMonth + '月';
+  }
+
+  // 展开/收起明细
+  function fcToggleDetail(type) {
+    var map = { food: 'fcDetailFood', labor: 'fcDetailLabor', fixed: 'fcDetailFixed', pack: 'fcDetailPack' };
+    var el = document.getElementById(map[type]);
+    if (el) el.classList.toggle('open');
+  }
+
+  // 初始化Lucide图标
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/fin-invoice.html b/TakeoutSaaS.Prototypes/pages/fin-invoice.html
new file mode 100644
index 0000000..e0f374a
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/fin-invoice.html
@@ -0,0 +1,268 @@
+<!-- 发票管理页 -->
+<style>
+  .fi-seg-wrap{margin-bottom:16px;}
+  .fi-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
+  .fi-stat-card{background:#fff;border-radius:var(--g-radius);padding:18px 20px;box-shadow:var(--g-shadow-sm);transition:var(--g-transition);}
+  .fi-stat-card:hover{box-shadow:var(--g-shadow-md);}
+  .fi-stat-label{font-size:13px;color:var(--g-text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
+  .fi-stat-label i{width:16px;height:16px;}
+  .fi-stat-val{font-size:24px;font-weight:700;color:var(--g-text);}
+  .fi-stat-sub{font-size:12px;color:var(--g-text-muted);margin-top:4px;}
+  .fi-stat-card.warn .fi-stat-val{color:var(--g-warning);}
+  .fi-stat-card.danger .fi-stat-val{color:var(--g-danger);}
+  .fi-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;background:#fff;padding:12px 16px;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);flex-wrap:wrap;}
+  .fi-toolbar input[type=date],.fi-toolbar select{height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;outline:none;background:#fff;transition:var(--g-transition);}
+  .fi-toolbar input[type=date]:focus,.fi-toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);}
+  .fi-toolbar .fi-search{height:34px;padding:0 10px 0 32px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;outline:none;width:200px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 10px center no-repeat;transition:var(--g-transition);}
+  .fi-toolbar .fi-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);}
+  .fi-date-sep{color:var(--g-text-muted);font-size:13px;}
+  .fi-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;}
+  .fi-tag-purple{background:#f9f0ff;color:#722ed1;}
+  .fi-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;}
+  .fi-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
+  .fi-toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
+  .fi-toggle-label{font-size:13px;font-weight:500;color:var(--g-text);}
+  .fi-toggle-hint{font-size:12px;color:var(--g-text-muted);margin-left:4px;}
+  .fi-save-bar{margin-top:20px;display:flex;justify-content:flex-end;gap:8px;}
+  @media(max-width:768px){.fi-stats{grid-template-columns:1fr;}.fi-form-grid{grid-template-columns:1fr;}}
+</style>
+
+<!-- 分段控制器 -->
+<div class="fi-seg-wrap">
+  <div class="g-seg">
+    <div class="g-seg-item active" onclick="switchFiTab(this)" data-tab="records">开票记录</div>
+    <div class="g-seg-item" onclick="switchFiTab(this)" data-tab="settings">发票设置</div>
+  </div>
+</div>
+
+<!-- Tab1: 开票记录 -->
+<div id="fiTabRecords">
+  <!-- 统计卡片 -->
+  <div class="fi-stats">
+    <div class="fi-stat-card">
+      <div class="fi-stat-label"><i data-lucide="receipt-text"></i>本月开票</div>
+      <div class="fi-stat-val">&yen;12,400</div>
+      <div class="fi-stat-sub">共 32 张</div>
+    </div>
+    <div class="fi-stat-card warn">
+      <div class="fi-stat-label"><i data-lucide="clock"></i>待开票</div>
+      <div class="fi-stat-val">5</div>
+      <div class="fi-stat-sub">张待处理</div>
+    </div>
+    <div class="fi-stat-card danger">
+      <div class="fi-stat-label"><i data-lucide="ban"></i>已作废</div>
+      <div class="fi-stat-val">2</div>
+      <div class="fi-stat-sub">张已作废</div>
+    </div>
+  </div>
+
+  <!-- 筛选工具栏 -->
+  <div class="fi-toolbar">
+    <input type="date" value="2026-01-01" />
+    <span class="fi-date-sep">至</span>
+    <input type="date" value="2026-01-31" />
+    <select>
+      <option>全部状态</option>
+      <option>待开票</option>
+      <option>已开票</option>
+      <option>已作废</option>
+    </select>
+    <select>
+      <option>全部类型</option>
+      <option>普通发票</option>
+      <option>专用发票</option>
+    </select>
+    <div style="flex:1;"></div>
+    <input class="fi-search" type="text" placeholder="搜索发票号码/公司名" />
+  </div>
+
+  <!-- 发票记录表格 -->
+  <div class="g-card" style="padding:0;">
+    <table class="g-table">
+      <thead>
+        <tr>
+          <th>发票号码</th>
+          <th>申请人 / 公司名</th>
+          <th>发票类型</th>
+          <th>金额</th>
+          <th>关联订单</th>
+          <th>状态</th>
+          <th>申请时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><span class="fi-mono">INV20260115001</span></td>
+          <td>北京鼎盛餐饮有限公司</td>
+          <td><span class="g-tag g-tag-blue">普票</span></td>
+          <td>&yen;860.00</td>
+          <td><span class="fi-mono">ORD20260115032</span></td>
+          <td><span class="g-tag g-tag-orange">待开票</span></td>
+          <td>2026-01-15 14:30</td>
+          <td><a class="g-action" href="javascript:;">开票</a></td>
+        </tr>
+        <tr>
+          <td><span class="fi-mono">INV20260114008</span></td>
+          <td>上海云帆科技有限公司</td>
+          <td><span class="g-tag fi-tag-purple">专票</span></td>
+          <td>&yen;2,400.00</td>
+          <td><span class="fi-mono">ORD20260114021</span></td>
+          <td><span class="g-tag g-tag-green">已开票</span></td>
+          <td>2026-01-14 10:15</td>
+          <td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
+        </tr>
+        <tr>
+          <td><span class="fi-mono">INV20260113005</span></td>
+          <td>张伟</td>
+          <td><span class="g-tag g-tag-blue">普票</span></td>
+          <td>&yen;156.00</td>
+          <td><span class="fi-mono">ORD20260113044</span></td>
+          <td><span class="g-tag g-tag-green">已开票</span></td>
+          <td>2026-01-13 18:42</td>
+          <td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
+        </tr>
+        <tr>
+          <td><span class="fi-mono">INV20260112003</span></td>
+          <td>深圳市万达商贸有限公司</td>
+          <td><span class="g-tag fi-tag-purple">专票</span></td>
+          <td>&yen;5,200.00</td>
+          <td><span class="fi-mono">ORD20260112018</span></td>
+          <td><span class="g-tag g-tag-orange">待开票</span></td>
+          <td>2026-01-12 09:20</td>
+          <td><a class="g-action" href="javascript:;">开票</a></td>
+        </tr>
+        <tr>
+          <td><span class="fi-mono">INV20260111007</span></td>
+          <td>李明</td>
+          <td><span class="g-tag g-tag-blue">普票</span></td>
+          <td>&yen;88.50</td>
+          <td><span class="fi-mono">ORD20260111055</span></td>
+          <td><span class="g-tag g-tag-gray">已作废</span></td>
+          <td>2026-01-11 20:10</td>
+          <td><a class="g-action" href="javascript:;">查看</a></td>
+        </tr>
+        <tr>
+          <td><span class="fi-mono">INV20260110002</span></td>
+          <td>广州天河餐饮管理有限公司</td>
+          <td><span class="g-tag g-tag-blue">普票</span></td>
+          <td>&yen;1,320.00</td>
+          <td><span class="fi-mono">ORD20260110009</span></td>
+          <td><span class="g-tag g-tag-green">已开票</span></td>
+          <td>2026-01-10 11:35</td>
+          <td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
+        </tr>
+        <tr>
+          <td><span class="fi-mono">INV20260109006</span></td>
+          <td>王芳</td>
+          <td><span class="g-tag g-tag-blue">普票</span></td>
+          <td>&yen;45.00</td>
+          <td><span class="fi-mono">ORD20260109071</span></td>
+          <td><span class="g-tag g-tag-gray">已作废</span></td>
+          <td>2026-01-09 16:50</td>
+          <td><a class="g-action" href="javascript:;">查看</a></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- 分页 -->
+  <div class="g-pagination" style="margin-top:16px;">
+    <button class="g-page-btn" disabled>&laquo;</button>
+    <button class="g-page-btn active">1</button>
+    <button class="g-page-btn">2</button>
+    <button class="g-page-btn">3</button>
+    <button class="g-page-btn">&raquo;</button>
+  </div>
+</div>
+
+<!-- Tab2: 发票设置 -->
+<div id="fiTabSettings" style="display:none;">
+  <!-- 企业信息 -->
+  <div class="g-card" style="margin-bottom:16px;">
+    <div class="fi-section-hd">企业开票信息</div>
+    <div class="fi-form-grid">
+      <div class="g-form-group">
+        <label class="g-form-label required">企业名称</label>
+        <input class="g-input" value="北京老三家餐饮管理有限公司" placeholder="请输入企业全称" />
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label required">纳税人识别号</label>
+        <input class="g-input" value="91110105MA01ABCD5X" placeholder="请输入统一社会信用代码" />
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label">注册地址</label>
+        <input class="g-input" value="北京市朝阳区建国路88号" placeholder="请输入注册地址" />
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label">注册电话</label>
+        <input class="g-input" value="010-88886666" placeholder="请输入注册电话" />
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label">开户银行</label>
+        <input class="g-input" value="中国工商银行北京朝阳支行" placeholder="请输入开户银行名称" />
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label">银行账号</label>
+        <input class="g-input" value="0200 0461 1920 1234 567" placeholder="请输入银行账号" />
+      </div>
+    </div>
+  </div>
+
+  <!-- 发票类型设置 -->
+  <div class="g-card" style="margin-bottom:16px;">
+    <div class="fi-section-hd">发票类型设置</div>
+    <div class="fi-toggle-row">
+      <button class="g-toggle on" onclick="toggleSwitch(this)"></button>
+      <span class="fi-toggle-label">电子普通发票</span>
+    </div>
+    <div class="fi-toggle-row">
+      <button class="g-toggle" onclick="toggleSwitch(this)"></button>
+      <span class="fi-toggle-label">电子专用发票</span>
+      <span class="fi-toggle-hint">（需先完成税务资质认证）</span>
+    </div>
+  </div>
+
+  <!-- 自动开票设置 -->
+  <div class="g-card" style="margin-bottom:16px;">
+    <div class="fi-section-hd">自动开票设置</div>
+    <div class="fi-toggle-row">
+      <button class="g-toggle" onclick="toggleSwitch(this)"></button>
+      <span class="fi-toggle-label">自动开票</span>
+      <span class="fi-toggle-hint">开启后，顾客申请发票将自动开具</span>
+    </div>
+    <div class="g-divider" style="margin:14px 0;"></div>
+    <div class="g-form-group" style="max-width:320px;">
+      <label class="g-form-label">单张发票最大金额</label>
+      <div style="display:flex;align-items:center;gap:6px;">
+        <span style="font-size:13px;color:var(--g-text-secondary);">&yen;</span>
+        <input class="g-input" type="number" value="10000" placeholder="如：10000" />
+      </div>
+      <span class="g-hint">超过此金额的发票需人工审核后开具</span>
+    </div>
+  </div>
+
+  <!-- 保存按钮 -->
+  <div class="fi-save-bar">
+    <button class="g-btn">重置</button>
+    <button class="g-btn g-btn-primary">保存设置</button>
+  </div>
+</div>
+
+<script>
+function switchFiTab(el) {
+  var tab = el.getAttribute('data-tab');
+  el.parentElement.querySelectorAll('.g-seg-item').forEach(function(item) {
+    item.classList.remove('active');
+  });
+  el.classList.add('active');
+  document.getElementById('fiTabRecords').style.display = tab === 'records' ? '' : 'none';
+  document.getElementById('fiTabSettings').style.display = tab === 'settings' ? '' : 'none';
+}
+
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+
+if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/fin-overview.html b/TakeoutSaaS.Prototypes/pages/fin-overview.html
new file mode 100644
index 0000000..4f83a1e
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/fin-overview.html
@@ -0,0 +1,330 @@
+<!-- 财务概览驾驶舱 -->
+<style>
+  .fo-page { display:flex; flex-direction:column; gap:16px; }
+
+  /* KPI 指标卡片行 */
+  .fo-kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
+  .fo-kpi { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:18px 20px; display:flex; flex-direction:column; gap:10px; transition:var(--g-transition); }
+  .fo-kpi:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .fo-kpi-top { display:flex; align-items:center; justify-content:space-between; }
+  .fo-kpi-label { font-size:13px; color:var(--g-text-secondary); }
+  .fo-kpi-icon { width:36px; height:36px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .fo-kpi-icon.blue { background:hsl(212,100%,95%); color:hsl(212,100%,45%); }
+  .fo-kpi-icon.green { background:#f0fdf4; color:var(--g-success); }
+  .fo-kpi-icon.red { background:#fef2f2; color:var(--g-danger); }
+  .fo-kpi-icon.purple { background:#f5f3ff; color:#7c3aed; }
+  .fo-kpi-icon.orange { background:#fffbeb; color:var(--g-warning); }
+  .fo-kpi-value { font-size:26px; font-weight:800; color:var(--g-text); letter-spacing:-0.5px; }
+  .fo-kpi-change { font-size:12px; display:flex; align-items:center; gap:4px; }
+  .fo-kpi-change.up { color:var(--g-success); }
+  .fo-kpi-change.down { color:var(--g-danger); }
+
+  /* 区块标题 */
+  .fo-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); }
+  .fo-hd-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
+
+  /* Pill 切换 */
+  .fo-pills { display:flex; gap:6px; }
+  .fo-pill { padding:4px 14px; border-radius:20px; font-size:12px; color:var(--g-text-secondary); background:#f5f5f5; cursor:pointer; border:none; transition:var(--g-transition); }
+  .fo-pill.active { background:var(--primary); color:#fff; }
+
+  /* 折线图占位 */
+  .fo-chart-area { position:relative; height:200px; background:linear-gradient(180deg,hsl(212,100%,97%) 0%,#fff 100%); border-radius:var(--g-radius); border:1px dashed var(--g-border); overflow:hidden; }
+  .fo-chart-line { position:absolute; bottom:0; left:0; right:0; height:100%; }
+  .fo-chart-svg { width:100%; height:100%; }
+  .fo-chart-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:13px; color:var(--g-text-muted); pointer-events:none; }
+  .fo-chart-x { display:flex; justify-content:space-between; padding:8px 12px 0; font-size:11px; color:var(--g-text-muted); }
+
+  /* 两列布局 */
+  .fo-two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
+
+  /* 圆环图 */
+  .fo-donut-wrap { display:flex; align-items:center; gap:28px; padding:8px 0; }
+  .fo-donut { width:150px; height:150px; border-radius:50%; position:relative; flex-shrink:0; }
+  .fo-donut-center { position:absolute; inset:32px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
+  .fo-donut-center .num { font-size:18px; font-weight:700; color:var(--g-text); }
+  .fo-donut-center .txt { font-size:11px; color:var(--g-text-muted); }
+  .fo-legend { display:flex; flex-direction:column; gap:10px; flex:1; }
+  .fo-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-text); }
+  .fo-legend-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
+  .fo-legend-val { margin-left:auto; font-weight:600; font-size:13px; }
+  .fo-legend-pct { color:var(--g-text-muted); font-size:12px; width:36px; text-align:right; }
+
+  /* 利润走势 */
+  .fo-profit-area { position:relative; height:180px; background:linear-gradient(180deg,hsl(212,100%,97%) 0%,#fff 100%); border-radius:var(--g-radius); border:1px dashed var(--g-border); overflow:hidden; }
+  .fo-profit-legend { display:flex; gap:20px; margin-top:10px; }
+  .fo-profit-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--g-text-secondary); }
+  .fo-profit-legend-line { width:20px; height:3px; border-radius:2px; }
+
+  /* TOP10 表格 */
+  .fo-rank-table { width:100%; border-collapse:collapse; }
+  .fo-rank-table th { text-align:left; font-size:12px; color:var(--g-text-muted); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--g-border); background:#fafafa; }
+  .fo-rank-table th:first-child { border-radius:var(--g-radius) 0 0 0; }
+  .fo-rank-table th:last-child { border-radius:0 var(--g-radius) 0 0; }
+  .fo-rank-table td { padding:10px 12px; font-size:13px; color:var(--g-text); border-bottom:1px solid #f5f5f5; }
+  .fo-rank-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .fo-rank-num { width:22px; height:22px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
+  .fo-rank-num.t1 { background:linear-gradient(135deg,#ef4444,#f97316); }
+  .fo-rank-num.t2 { background:linear-gradient(135deg,#f59e0b,#fbbf24); }
+  .fo-rank-num.t3 { background:linear-gradient(135deg,#1890ff,#69c0ff); }
+  .fo-rank-num.tn { background:#e5e7eb; color:#4b5563; }
+  .fo-progress-bg { width:100%; max-width:120px; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
+  .fo-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,hsl(212,100%,45%),hsl(212,100%,65%)); }
+
+  @keyframes foFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+  .fo-page > * { animation:foFadeIn 0.4s ease both; }
+  .fo-page > *:nth-child(2) { animation-delay:0.05s; }
+  .fo-page > *:nth-child(3) { animation-delay:0.1s; }
+  .fo-page > *:nth-child(4) { animation-delay:0.15s; }
+  .fo-page > *:nth-child(5) { animation-delay:0.2s; }
+</style>
+
+<div class="fo-page">
+
+  <!-- 1. 核心指标卡片 -->
+  <div class="fo-kpi-row">
+    <div class="fo-kpi">
+      <div class="fo-kpi-top">
+        <span class="fo-kpi-label">今日营业额</span>
+        <div class="fo-kpi-icon blue"><i data-lucide="coins" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="fo-kpi-value">&yen;8,620</div>
+      <div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 12% 较昨日</div>
+    </div>
+    <div class="fo-kpi">
+      <div class="fo-kpi-top">
+        <span class="fo-kpi-label">实收</span>
+        <div class="fo-kpi-icon green"><i data-lucide="badge-check" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="fo-kpi-value">&yen;7,980</div>
+      <div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 8% 较昨日</div>
+    </div>
+    <div class="fo-kpi">
+      <div class="fo-kpi-top">
+        <span class="fo-kpi-label">退款</span>
+        <div class="fo-kpi-icon red"><i data-lucide="undo-2" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="fo-kpi-value">&yen;640</div>
+      <div class="fo-kpi-change down"><i data-lucide="trending-down" style="width:14px;height:14px"></i> 3% 较昨日</div>
+    </div>
+    <div class="fo-kpi">
+      <div class="fo-kpi-top">
+        <span class="fo-kpi-label">净收入</span>
+        <div class="fo-kpi-icon purple"><i data-lucide="wallet" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="fo-kpi-value">&yen;6,850</div>
+      <div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 5% 较昨日</div>
+    </div>
+    <div class="fo-kpi">
+      <div class="fo-kpi-top">
+        <span class="fo-kpi-label">可提现余额</span>
+        <div class="fo-kpi-icon orange"><i data-lucide="landmark" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="fo-kpi-value">&yen;32,400</div>
+      <div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 15% 较上周</div>
+    </div>
+  </div>
+
+  <!-- 2. 收入趋势 -->
+  <div class="g-card" style="padding:20px">
+    <div class="fo-hd-row">
+      <div class="fo-section-hd">收入趋势</div>
+      <div class="fo-pills">
+        <button class="fo-pill active" onclick="foSwitchPill(this)">近7天</button>
+        <button class="fo-pill" onclick="foSwitchPill(this)">近30天</button>
+      </div>
+    </div>
+    <div class="fo-chart-area">
+      <svg class="fo-chart-svg" viewBox="0 0 700 200" preserveAspectRatio="none">
+        <defs>
+          <linearGradient id="foGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="hsl(212,100%,45%)" stop-opacity="0.2"/>
+            <stop offset="100%" stop-color="hsl(212,100%,45%)" stop-opacity="0.02"/>
+          </linearGradient>
+        </defs>
+        <polyline fill="url(#foGrad)" stroke="none" points="0,200 0,140 100,100 200,120 300,60 400,80 500,40 600,70 700,30 700,200"/>
+        <polyline fill="none" stroke="hsl(212,100%,45%)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" points="0,140 100,100 200,120 300,60 400,80 500,40 600,70 700,30"/>
+        <circle cx="0" cy="140" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+        <circle cx="100" cy="100" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+        <circle cx="200" cy="120" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+        <circle cx="300" cy="60" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+        <circle cx="400" cy="80" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+        <circle cx="500" cy="40" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+        <circle cx="600" cy="70" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+        <circle cx="700" cy="30" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
+      </svg>
+    </div>
+    <div class="fo-chart-x">
+      <span>02/06</span><span>02/07</span><span>02/08</span><span>02/09</span><span>02/10</span><span>02/11</span><span>02/12</span>
+    </div>
+  </div>
+
+  <!-- 3. 收入构成 + 成本占比 -->
+  <div class="fo-two-col">
+    <!-- 收入构成 -->
+    <div class="g-card" style="padding:20px">
+      <div class="fo-section-hd" style="margin-bottom:16px">收入构成</div>
+      <div class="fo-donut-wrap">
+        <div class="fo-donut" style="background:conic-gradient(hsl(212,100%,45%) 0% 58%,#22c55e 58% 83%,#f59e0b 83% 100%)">
+          <div class="fo-donut-center">
+            <span class="num">&yen;7,980</span>
+            <span class="txt">总实收</span>
+          </div>
+        </div>
+        <div class="fo-legend">
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:hsl(212,100%,45%)"></span>
+            外卖
+            <span class="fo-legend-pct">58%</span>
+            <span class="fo-legend-val">&yen;4,628</span>
+          </div>
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:#22c55e"></span>
+            自提
+            <span class="fo-legend-pct">25%</span>
+            <span class="fo-legend-val">&yen;1,995</span>
+          </div>
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:#f59e0b"></span>
+            堂食
+            <span class="fo-legend-pct">17%</span>
+            <span class="fo-legend-val">&yen;1,357</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 成本占比 -->
+    <div class="g-card" style="padding:20px">
+      <div class="fo-section-hd" style="margin-bottom:16px">成本占比</div>
+      <div class="fo-donut-wrap">
+        <div class="fo-donut" style="background:conic-gradient(#ef4444 0% 42%,#f59e0b 42% 70%,#8b5cf6 70% 88%,#06b6d4 88% 95%,#94a3b8 95% 100%)">
+          <div class="fo-donut-center">
+            <span class="num">&yen;1,130</span>
+            <span class="txt">总成本</span>
+          </div>
+        </div>
+        <div class="fo-legend">
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:#ef4444"></span>
+            食材
+            <span class="fo-legend-pct">42%</span>
+            <span class="fo-legend-val">&yen;475</span>
+          </div>
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:#f59e0b"></span>
+            人工
+            <span class="fo-legend-pct">28%</span>
+            <span class="fo-legend-val">&yen;316</span>
+          </div>
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:#8b5cf6"></span>
+            固定
+            <span class="fo-legend-pct">18%</span>
+            <span class="fo-legend-val">&yen;203</span>
+          </div>
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:#06b6d4"></span>
+            包装
+            <span class="fo-legend-pct">7%</span>
+            <span class="fo-legend-val">&yen;79</span>
+          </div>
+          <div class="fo-legend-item">
+            <span class="fo-legend-dot" style="background:#94a3b8"></span>
+            平台
+            <span class="fo-legend-pct">5%</span>
+            <span class="fo-legend-val">&yen;57</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 4. 利润走势 -->
+  <div class="g-card" style="padding:20px">
+    <div class="fo-hd-row">
+      <div class="fo-section-hd">利润走势</div>
+      <div class="fo-pills">
+        <button class="fo-pill active" onclick="foSwitchPill(this)">近7天</button>
+        <button class="fo-pill" onclick="foSwitchPill(this)">近30天</button>
+      </div>
+    </div>
+    <div class="fo-profit-area">
+      <svg class="fo-chart-svg" viewBox="0 0 700 180" preserveAspectRatio="none">
+        <!-- 营收线 -->
+        <polyline fill="none" stroke="hsl(212,100%,45%)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" points="0,120 100,90 200,100 300,50 400,65 500,35 600,55 700,25"/>
+        <!-- 成本线 -->
+        <polyline fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="6,3" stroke-linejoin="round" stroke-linecap="round" points="0,150 100,140 200,145 300,125 400,130 500,120 600,128 700,115"/>
+        <!-- 净利润线 -->
+        <polyline fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" points="0,160 100,145 200,150 300,120 400,128 500,108 600,118 700,95"/>
+      </svg>
+    </div>
+    <div class="fo-chart-x">
+      <span>02/06</span><span>02/07</span><span>02/08</span><span>02/09</span><span>02/10</span><span>02/11</span><span>02/12</span>
+    </div>
+    <div class="fo-profit-legend">
+      <div class="fo-profit-legend-item"><span class="fo-profit-legend-line" style="background:hsl(212,100%,45%)"></span>营收</div>
+      <div class="fo-profit-legend-item"><span class="fo-profit-legend-line" style="background:#ef4444"></span>成本</div>
+      <div class="fo-profit-legend-item"><span class="fo-profit-legend-line" style="background:#22c55e"></span>净利润</div>
+    </div>
+  </div>
+
+  <!-- 5. TOP10 商品营收排行 -->
+  <div class="g-card" style="padding:20px">
+    <div class="fo-section-hd" style="margin-bottom:16px">TOP10 商品营收排行</div>
+    <table class="fo-rank-table">
+      <thead>
+        <tr>
+          <th style="width:60px">排名</th>
+          <th>商品名称</th>
+          <th style="width:80px">销量</th>
+          <th style="width:100px">营收</th>
+          <th style="width:160px">占比</th>
+        </tr>
+      </thead>
+      <tbody id="foRankBody"></tbody>
+    </table>
+  </div>
+
+</div>
+
+<script>
+(function(){
+  // TOP10 数据
+  var items = [
+    { name:'招牌黄焖鸡米饭', sales:186, revenue:5580, pct:18.2 },
+    { name:'香辣鸡腿堡套餐', sales:152, revenue:4560, pct:14.9 },
+    { name:'麻辣小龙虾拌面', sales:134, revenue:4020, pct:13.1 },
+    { name:'经典牛肉面', sales:128, revenue:3200, pct:10.4 },
+    { name:'鱼香肉丝盖饭', sales:115, revenue:2875, pct:9.4 },
+    { name:'宫保鸡丁套餐', sales:98, revenue:2450, pct:8.0 },
+    { name:'番茄鸡蛋面', sales:92, revenue:1840, pct:6.0 },
+    { name:'红烧排骨饭', sales:85, revenue:2550, pct:8.3 },
+    { name:'皮蛋瘦肉粥', sales:76, revenue:1140, pct:3.7 },
+    { name:'冰柠檬水', sales:210, revenue:1260, pct:4.1 }
+  ];
+  var maxPct = items[0].pct;
+  var tbody = document.getElementById('foRankBody');
+  items.forEach(function(it, i){
+    var cls = i === 0 ? 't1' : i === 1 ? 't2' : i === 2 ? 't3' : 'tn';
+    var tr = document.createElement('tr');
+    tr.innerHTML =
+      '<td><span class="fo-rank-num ' + cls + '">' + (i+1) + '</span></td>' +
+      '<td>' + it.name + '</td>' +
+      '<td>' + it.sales + '</td>' +
+      '<td style="font-weight:600">&yen;' + it.revenue.toLocaleString() + '</td>' +
+      '<td><div style="display:flex;align-items:center;gap:8px"><div class="fo-progress-bg"><div class="fo-progress-fill" style="width:' + (it.pct / maxPct * 100) + '%"></div></div><span style="font-size:12px;color:var(--g-text-muted)">' + it.pct + '%</span></div></td>';
+    tbody.appendChild(tr);
+  });
+})();
+
+// Pill 切换
+function foSwitchPill(el) {
+  var siblings = el.parentElement.querySelectorAll('.fo-pill');
+  siblings.forEach(function(s){ s.classList.remove('active'); });
+  el.classList.add('active');
+}
+
+// Lucide 图标初始化
+if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/fin-reports.html b/TakeoutSaaS.Prototypes/pages/fin-reports.html
new file mode 100644
index 0000000..a748758
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/fin-reports.html
@@ -0,0 +1,311 @@
+<!-- 经营报表 — fin-reports.html -->
+<style>
+  /* ---- page-private: frp- prefix ---- */
+  .frp-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 16px 20px;
+    display: flex; align-items: center; gap: 12px;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
+  }
+  .frp-toolbar-right { margin-left: auto; display: flex; gap: 8px; }
+
+  .frp-table-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    margin-top: 12px; overflow: hidden;
+  }
+  .frp-table-card .g-table th { white-space: nowrap; }
+  .frp-table-card .g-table td { vertical-align: middle; white-space: nowrap; }
+  .frp-amount { font-weight: 600; }
+
+  /* 预览抽屉 */
+  .frp-drawer { width: 560px; }
+
+  /* 抽屉内区块 */
+  .frp-section { margin-bottom: 22px; }
+  .frp-section-hd {
+    font-size: 15px; font-weight: 600; color: var(--g-text);
+    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
+  }
+
+  /* 关键指标网格 */
+  .frp-kpi-grid {
+    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
+  }
+  .frp-kpi-item {
+    background: #f8f9fb; border-radius: var(--g-radius-sm); padding: 14px 16px;
+    border: 1px solid var(--g-border);
+  }
+  .frp-kpi-label { font-size: 12px; color: var(--g-text-muted); margin-bottom: 6px; }
+  .frp-kpi-val { font-size: 20px; font-weight: 700; color: var(--g-text); }
+  .frp-kpi-change { font-size: 12px; margin-top: 4px; display: flex; gap: 8px; }
+  .frp-kpi-up { color: var(--g-success); }
+  .frp-kpi-down { color: var(--g-danger); }
+
+  /* 明细行 */
+  .frp-detail-row {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px;
+  }
+  .frp-detail-row:last-child { border-bottom: none; }
+  .frp-detail-name { color: var(--g-text); }
+  .frp-detail-right { display: flex; gap: 16px; align-items: center; }
+  .frp-detail-amount { font-weight: 600; color: var(--g-text); min-width: 80px; text-align: right; }
+  .frp-detail-pct { color: var(--g-text-muted); font-size: 12px; min-width: 50px; text-align: right; }
+
+  .frp-divider { height: 1px; background: linear-gradient(90deg, var(--g-border), transparent); margin: 20px 0; }
+</style>
+
+<!-- 顶部工具栏 -->
+<div class="frp-toolbar">
+  <!-- 分段控制器 -->
+  <div class="g-seg">
+    <div class="g-seg-item active" onclick="switchFrpTab(this,'daily')">日报</div>
+    <div class="g-seg-item" onclick="switchFrpTab(this,'weekly')">周报</div>
+    <div class="g-seg-item" onclick="switchFrpTab(this,'monthly')">月报</div>
+  </div>
+  <select class="g-select" style="width:200px;">
+    <option>全部门店</option>
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+  </select>
+  <div class="frp-toolbar-right">
+    <button class="g-btn g-btn-sm"><i data-lucide="download" style="width:14px;height:14px;"></i> 批量导出</button>
+  </div>
+</div>
+
+<!-- ========== 日报 Tab ========== -->
+<div id="frpTabDaily" class="frp-tab-panel">
+  <div class="frp-table-card">
+    <table class="g-table">
+      <thead>
+        <tr>
+          <th>日期</th><th>营业额</th><th>订单数</th><th>客单价</th><th>退款率</th><th>成本总额</th><th>净利润</th><th>利润率</th><th>状态</th><th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>2026-02-12</td><td class="frp-amount">&yen;8,620</td><td>186单</td><td>&yen;46.3</td><td>7.4%</td><td>&yen;5,280</td><td class="frp-amount" style="color:var(--g-success);">&yen;3,340</td><td>38.7%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月12日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2026-02-11</td><td class="frp-amount">&yen;9,150</td><td>198单</td><td>&yen;46.2</td><td>5.2%</td><td>&yen;5,610</td><td class="frp-amount" style="color:var(--g-success);">&yen;3,540</td><td>38.7%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月11日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2026-02-10</td><td class="frp-amount">&yen;7,830</td><td>172单</td><td>&yen;45.5</td><td>6.1%</td><td>&yen;4,920</td><td class="frp-amount" style="color:var(--g-success);">&yen;2,910</td><td>37.2%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月10日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2026-02-09</td><td class="frp-amount">&yen;10,240</td><td>221单</td><td>&yen;46.3</td><td>4.8%</td><td>&yen;6,150</td><td class="frp-amount" style="color:var(--g-success);">&yen;4,090</td><td>39.9%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月9日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2026-02-08</td><td class="frp-amount">&yen;11,380</td><td>245单</td><td>&yen;46.4</td><td>3.9%</td><td>&yen;6,830</td><td class="frp-amount" style="color:var(--g-success);">&yen;4,550</td><td>40.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月8日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2026-02-07</td><td class="frp-amount">&yen;10,560</td><td>228单</td><td>&yen;46.3</td><td>5.7%</td><td>&yen;6,440</td><td class="frp-amount" style="color:var(--g-success);">&yen;4,120</td><td>39.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月7日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2026-02-06</td><td class="frp-amount">&yen;8,970</td><td>194单</td><td>&yen;46.2</td><td>6.3%</td><td>&yen;5,490</td><td class="frp-amount" style="color:var(--g-success);">&yen;3,480</td><td>38.8%</td><td><span class="g-tag g-tag-blue">生成中</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月6日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="g-pagination">
+    <button class="g-page-btn">&lt;</button>
+    <button class="g-page-btn active">1</button>
+    <button class="g-page-btn">2</button>
+    <button class="g-page-btn">3</button>
+    <button class="g-page-btn">4</button>
+    <button class="g-page-btn">&gt;</button>
+  </div>
+</div>
+
+<!-- ========== 周报 Tab ========== -->
+<div id="frpTabWeekly" class="frp-tab-panel" style="display:none;">
+  <div class="frp-table-card">
+    <table class="g-table">
+      <thead>
+        <tr>
+          <th>日期</th><th>营业额</th><th>订单数</th><th>客单价</th><th>退款率</th><th>成本总额</th><th>净利润</th><th>利润率</th><th>状态</th><th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>02-10 ~ 02-16</td><td class="frp-amount">&yen;62,450</td><td>1,348单</td><td>&yen;46.3</td><td>5.8%</td><td>&yen;38,120</td><td class="frp-amount" style="color:var(--g-success);">&yen;24,330</td><td>39.0%</td><td><span class="g-tag g-tag-blue">生成中</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第7周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>02-03 ~ 02-09</td><td class="frp-amount">&yen;68,750</td><td>1,486单</td><td>&yen;46.3</td><td>4.9%</td><td>&yen;41,250</td><td class="frp-amount" style="color:var(--g-success);">&yen;27,500</td><td>40.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第6周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>01-27 ~ 02-02</td><td class="frp-amount">&yen;59,320</td><td>1,282单</td><td>&yen;46.3</td><td>6.2%</td><td>&yen;36,780</td><td class="frp-amount" style="color:var(--g-success);">&yen;22,540</td><td>38.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第5周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>01-20 ~ 01-26</td><td class="frp-amount">&yen;55,180</td><td>1,192单</td><td>&yen;46.3</td><td>5.5%</td><td>&yen;34,410</td><td class="frp-amount" style="color:var(--g-success);">&yen;20,770</td><td>37.6%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第4周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="g-pagination">
+    <button class="g-page-btn">&lt;</button>
+    <button class="g-page-btn active">1</button>
+    <button class="g-page-btn">2</button>
+    <button class="g-page-btn">&gt;</button>
+  </div>
+</div>
+
+<!-- ========== 月报 Tab ========== -->
+<div id="frpTabMonthly" class="frp-tab-panel" style="display:none;">
+  <div class="frp-table-card">
+    <table class="g-table">
+      <thead>
+        <tr>
+          <th>日期</th><th>营业额</th><th>订单数</th><th>客单价</th><th>退款率</th><th>成本总额</th><th>净利润</th><th>利润率</th><th>状态</th><th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>2026年2月</td><td class="frp-amount">&yen;131,200</td><td>2,834单</td><td>&yen;46.3</td><td>5.4%</td><td>&yen;79,370</td><td class="frp-amount" style="color:var(--g-success);">&yen;51,830</td><td>39.5%</td><td><span class="g-tag g-tag-blue">生成中</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月 经营月报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2026年1月</td><td class="frp-amount">&yen;278,600</td><td>6,022单</td><td>&yen;46.3</td><td>5.1%</td><td>&yen;170,150</td><td class="frp-amount" style="color:var(--g-success);">&yen;108,450</td><td>38.9%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年1月 经营月报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+        <tr><td>2025年12月</td><td class="frp-amount">&yen;265,400</td><td>5,736单</td><td>&yen;46.3</td><td>5.6%</td><td>&yen;163,920</td><td class="frp-amount" style="color:var(--g-success);">&yen;101,480</td><td>38.2%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2025年12月 经营月报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="g-pagination">
+    <button class="g-page-btn">&lt;</button>
+    <button class="g-page-btn active">1</button>
+    <button class="g-page-btn">2</button>
+    <button class="g-page-btn">&gt;</button>
+  </div>
+</div>
+
+<!-- ========== 预览抽屉 ========== -->
+<div class="g-drawer-mask" id="frpDrawerMask" onclick="closeFrpPreview()"></div>
+<div class="g-drawer frp-drawer" id="frpDrawer">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="frpDrawerTitle">2026年2月12日 经营日报</span>
+    <button class="g-drawer-close" onclick="closeFrpPreview()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+
+    <!-- 关键指标 -->
+    <div class="frp-section">
+      <div class="frp-section-hd">关键指标</div>
+      <div class="frp-kpi-grid">
+        <div class="frp-kpi-item">
+          <div class="frp-kpi-label">营业额</div>
+          <div class="frp-kpi-val">&yen;8,620</div>
+          <div class="frp-kpi-change">
+            <span class="frp-kpi-down">同比 ↓3.2%</span>
+            <span class="frp-kpi-up">环比 ↑5.8%</span>
+          </div>
+        </div>
+        <div class="frp-kpi-item">
+          <div class="frp-kpi-label">订单数</div>
+          <div class="frp-kpi-val">186</div>
+          <div class="frp-kpi-change">
+            <span class="frp-kpi-up">同比 ↑2.1%</span>
+            <span class="frp-kpi-down">环比 ↓1.4%</span>
+          </div>
+        </div>
+        <div class="frp-kpi-item">
+          <div class="frp-kpi-label">客单价</div>
+          <div class="frp-kpi-val">&yen;46.3</div>
+          <div class="frp-kpi-change">
+            <span class="frp-kpi-down">同比 ↓0.8%</span>
+            <span class="frp-kpi-up">环比 ↑1.2%</span>
+          </div>
+        </div>
+        <div class="frp-kpi-item">
+          <div class="frp-kpi-label">退款率</div>
+          <div class="frp-kpi-val">7.4%</div>
+          <div class="frp-kpi-change">
+            <span class="frp-kpi-down">同比 ↑2.1%</span>
+            <span class="frp-kpi-up">环比 ↓0.6%</span>
+          </div>
+        </div>
+        <div class="frp-kpi-item">
+          <div class="frp-kpi-label">净利润</div>
+          <div class="frp-kpi-val" style="color:var(--g-success);">&yen;3,340</div>
+          <div class="frp-kpi-change">
+            <span class="frp-kpi-up">同比 ↑4.5%</span>
+            <span class="frp-kpi-up">环比 ↑6.2%</span>
+          </div>
+        </div>
+        <div class="frp-kpi-item">
+          <div class="frp-kpi-label">利润率</div>
+          <div class="frp-kpi-val">38.7%</div>
+          <div class="frp-kpi-change">
+            <span class="frp-kpi-up">同比 ↑1.3%</span>
+            <span class="frp-kpi-up">环比 ↑0.9%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="frp-divider"></div>
+
+    <!-- 收入明细 -->
+    <div class="frp-section">
+      <div class="frp-section-hd">收入明细（按渠道）</div>
+      <div class="frp-detail-row">
+        <span class="frp-detail-name"><i data-lucide="bike" style="width:14px;height:14px;vertical-align:-2px;color:var(--primary);margin-right:6px;"></i>外卖</span>
+        <div class="frp-detail-right">
+          <span class="frp-detail-pct">58.3%</span>
+          <span class="frp-detail-amount">&yen;5,025</span>
+        </div>
+      </div>
+      <div class="frp-detail-row">
+        <span class="frp-detail-name"><i data-lucide="shopping-bag" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-success);margin-right:6px;"></i>自提</span>
+        <div class="frp-detail-right">
+          <span class="frp-detail-pct">26.1%</span>
+          <span class="frp-detail-amount">&yen;2,250</span>
+        </div>
+      </div>
+      <div class="frp-detail-row">
+        <span class="frp-detail-name"><i data-lucide="utensils" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-warning);margin-right:6px;"></i>堂食</span>
+        <div class="frp-detail-right">
+          <span class="frp-detail-pct">15.6%</span>
+          <span class="frp-detail-amount">&yen;1,345</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="frp-divider"></div>
+
+    <!-- 成本明细 -->
+    <div class="frp-section">
+      <div class="frp-section-hd">成本明细（按类别）</div>
+      <div class="frp-detail-row">
+        <span class="frp-detail-name"><i data-lucide="carrot" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-warning);margin-right:6px;"></i>食材成本</span>
+        <div class="frp-detail-right">
+          <span class="frp-detail-pct">56.8%</span>
+          <span class="frp-detail-amount">&yen;3,000</span>
+        </div>
+      </div>
+      <div class="frp-detail-row">
+        <span class="frp-detail-name"><i data-lucide="users" style="width:14px;height:14px;vertical-align:-2px;color:var(--primary);margin-right:6px;"></i>人工成本</span>
+        <div class="frp-detail-right">
+          <span class="frp-detail-pct">26.5%</span>
+          <span class="frp-detail-amount">&yen;1,400</span>
+        </div>
+      </div>
+      <div class="frp-detail-row">
+        <span class="frp-detail-name"><i data-lucide="building-2" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-text-muted);margin-right:6px;"></i>固定成本</span>
+        <div class="frp-detail-right">
+          <span class="frp-detail-pct">11.4%</span>
+          <span class="frp-detail-amount">&yen;600</span>
+        </div>
+      </div>
+      <div class="frp-detail-row">
+        <span class="frp-detail-name"><i data-lucide="package" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-success);margin-right:6px;"></i>包装成本</span>
+        <div class="frp-detail-right">
+          <span class="frp-detail-pct">5.3%</span>
+          <span class="frp-detail-amount">&yen;280</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeFrpPreview()">关闭</button>
+    <button class="g-btn g-btn-primary"><i data-lucide="file-text" style="width:14px;height:14px;"></i> 下载PDF</button>
+    <button class="g-btn"><i data-lucide="table" style="width:14px;height:14px;"></i> 下载Excel</button>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchFrpTab(el, tab) {
+    document.querySelectorAll('.g-seg-item').forEach(function(s) { s.classList.remove('active'); });
+    el.classList.add('active');
+    document.querySelectorAll('.frp-tab-panel').forEach(function(p) { p.style.display = 'none'; });
+    var map = { daily: 'frpTabDaily', weekly: 'frpTabWeekly', monthly: 'frpTabMonthly' };
+    document.getElementById(map[tab]).style.display = '';
+  }
+
+  /* 预览抽屉 */
+  function openFrpPreview(title) {
+    document.getElementById('frpDrawerTitle').textContent = title || '报表预览';
+    document.getElementById('frpDrawerMask').classList.add('open');
+    document.getElementById('frpDrawer').classList.add('open');
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+  function closeFrpPreview() {
+    document.getElementById('frpDrawerMask').classList.remove('open');
+    document.getElementById('frpDrawer').classList.remove('open');
+  }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/fin-settlement.html b/TakeoutSaaS.Prototypes/pages/fin-settlement.html
new file mode 100644
index 0000000..ca85d4b
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/fin-settlement.html
@@ -0,0 +1,297 @@
+<!-- 到账查询 — fin-settlement.html -->
+<style>
+  /* ---- page-private: fst- prefix ---- */
+  .fst-stats {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
+  }
+  .fst-stat-card {
+    background: #fff; border-radius: var(--g-radius); padding: 18px 20px;
+    border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm);
+    transition: box-shadow var(--g-transition);
+  }
+  .fst-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
+  .fst-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
+  .fst-stat-label i { width: 16px; height: 16px; }
+  .fst-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
+
+  /* 账户信息条 */
+  .fst-account-bar {
+    display: flex; align-items: center; gap: 16px; padding: 14px 20px; margin-bottom: 16px;
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    box-shadow: var(--g-shadow-sm); font-size: 13px; color: var(--g-text-secondary);
+  }
+  .fst-account-bar i { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
+  .fst-account-bar strong { color: var(--g-text); font-weight: 600; }
+  .fst-account-sep { width: 1px; height: 20px; background: var(--g-border); }
+
+  .fst-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 14px 18px;
+    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
+  }
+  .fst-toolbar .g-input,
+  .fst-toolbar .g-select { height: 32px; font-size: 13px; }
+  .fst-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
+
+  .fst-table-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    overflow: hidden; margin-bottom: 16px;
+  }
+  .fst-table-card .g-table th { white-space: nowrap; }
+  .fst-table-card .g-table td { vertical-align: middle; font-size: 13px; }
+  .fst-amount { font-weight: 600; white-space: nowrap; }
+
+  /* 展开明细行 */
+  .fst-detail-row { display: none; }
+  .fst-detail-row.open { display: table-row; }
+  .fst-detail-row td { padding: 0 !important; background: #f8f9fb; }
+  .fst-detail-wrap { padding: 14px 20px 14px 40px; }
+  .fst-detail-title { font-size: 13px; font-weight: 600; color: var(--g-text); margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--primary); }
+  .fst-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  .fst-mini-table th {
+    text-align: left; padding: 8px 10px; font-weight: 500;
+    color: var(--g-text-muted); background: #fff; border-bottom: 1px solid var(--g-border);
+  }
+  .fst-mini-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: var(--g-text); }
+  .fst-mini-table tr:last-child td { border-bottom: none; }
+
+  .fst-channel-icon { display: inline-flex; align-items: center; gap: 6px; }
+  .fst-channel-dot { width: 8px; height: 8px; border-radius: 50%; }
+</style>
+
+<!-- 统计卡片 -->
+<div class="fst-stats">
+  <div class="fst-stat-card">
+    <div class="fst-stat-label"><i data-lucide="circle-check"></i>今日到账</div>
+    <div class="fst-stat-val" style="color:var(--g-success);">&yen;4,670</div>
+  </div>
+  <div class="fst-stat-card">
+    <div class="fst-stat-label"><i data-lucide="calendar-minus"></i>昨日到账</div>
+    <div class="fst-stat-val">&yen;4,940</div>
+  </div>
+  <div class="fst-stat-card">
+    <div class="fst-stat-label"><i data-lucide="calendar-check"></i>本月累计到账</div>
+    <div class="fst-stat-val">&yen;42,800</div>
+  </div>
+  <div class="fst-stat-card">
+    <div class="fst-stat-label"><i data-lucide="receipt"></i>本月交易笔数</div>
+    <div class="fst-stat-val">1,286</div>
+  </div>
+</div>
+
+<!-- 结算账户信息 -->
+<div class="fst-account-bar">
+  <i data-lucide="landmark"></i>
+  <span>结算账户：<strong>招商银行 ****1234</strong></span>
+  <span class="fst-account-sep"></span>
+  <span>微信商户号：<strong>15xxxxxxxx</strong></span>
+  <span class="fst-account-sep"></span>
+  <span>支付宝PID：<strong>2088xxxxxxxxxxxx</strong></span>
+  <span class="fst-account-sep"></span>
+  <span>结算周期：<strong>T+1 自动到账</strong></span>
+</div>
+
+<!-- 筛选工具栏 -->
+<div class="fst-toolbar">
+  <input type="date" class="g-input" style="width:145px;" value="2026-02-01">
+  <span class="fst-date-sep">~</span>
+  <input type="date" class="g-input" style="width:145px;" value="2026-02-12">
+  <select class="g-select" style="width:130px;">
+    <option>全部渠道</option>
+    <option>微信支付</option>
+    <option>支付宝</option>
+  </select>
+  <div style="flex:1;"></div>
+  <button class="g-btn g-btn-sm"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
+</div>
+
+<!-- 到账记录表格 -->
+<div class="fst-table-card">
+  <table class="g-table">
+    <thead>
+      <tr>
+        <th style="width:36px;"></th>
+        <th>到账日期</th>
+        <th>支付渠道</th>
+        <th>交易笔数</th>
+        <th style="text-align:right;">到账金额</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- 1 -->
+      <tr>
+        <td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d1')"></i></td>
+        <td>2026-02-12</td>
+        <td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
+        <td>86</td>
+        <td style="text-align:right;" class="fst-amount">&yen;3,420.00</td>
+      </tr>
+      <tr class="fst-detail-row" id="fst-d1">
+        <td colspan="5">
+          <div class="fst-detail-wrap">
+            <div class="fst-detail-title">交易明细（部分）</div>
+            <table class="fst-mini-table">
+              <thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
+              <tbody>
+                <tr><td>ORD20260212001</td><td>¥58.00</td><td>12:35</td></tr>
+                <tr><td>ORD20260212005</td><td>¥126.00</td><td>11:22</td></tr>
+                <tr><td>ORD20260212011</td><td>¥42.50</td><td>10:08</td></tr>
+                <tr><td>ORD20260212015</td><td>¥89.00</td><td>09:15</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+
+      <!-- 2 -->
+      <tr>
+        <td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d2')"></i></td>
+        <td>2026-02-12</td>
+        <td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
+        <td>32</td>
+        <td style="text-align:right;" class="fst-amount">&yen;1,250.00</td>
+      </tr>
+      <tr class="fst-detail-row" id="fst-d2">
+        <td colspan="5">
+          <div class="fst-detail-wrap">
+            <div class="fst-detail-title">交易明细（部分）</div>
+            <table class="fst-mini-table">
+              <thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
+              <tbody>
+                <tr><td>ORD20260212003</td><td>¥126.00</td><td>11:22</td></tr>
+                <tr><td>ORD20260212009</td><td>¥68.00</td><td>10:30</td></tr>
+                <tr><td>ORD20260212014</td><td>¥35.50</td><td>09:45</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+
+      <!-- 3 -->
+      <tr>
+        <td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d3')"></i></td>
+        <td>2026-02-11</td>
+        <td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
+        <td>92</td>
+        <td style="text-align:right;" class="fst-amount">&yen;3,860.00</td>
+      </tr>
+      <tr class="fst-detail-row" id="fst-d3">
+        <td colspan="5">
+          <div class="fst-detail-wrap">
+            <div class="fst-detail-title">交易明细（部分）</div>
+            <table class="fst-mini-table">
+              <thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
+              <tbody>
+                <tr><td>ORD20260211042</td><td>¥89.00</td><td>20:15</td></tr>
+                <tr><td>ORD20260211038</td><td>¥56.00</td><td>19:30</td></tr>
+                <tr><td>ORD20260211035</td><td>¥72.00</td><td>18:45</td></tr>
+                <tr><td>ORD20260211031</td><td>¥38.50</td><td>17:20</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+
+      <!-- 4 -->
+      <tr>
+        <td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d4')"></i></td>
+        <td>2026-02-11</td>
+        <td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
+        <td>28</td>
+        <td style="text-align:right;" class="fst-amount">&yen;1,080.00</td>
+      </tr>
+      <tr class="fst-detail-row" id="fst-d4">
+        <td colspan="5">
+          <div class="fst-detail-wrap">
+            <div class="fst-detail-title">交易明细（部分）</div>
+            <table class="fst-mini-table">
+              <thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
+              <tbody>
+                <tr><td>ORD20260211040</td><td>¥45.00</td><td>19:50</td></tr>
+                <tr><td>ORD20260211036</td><td>¥62.00</td><td>18:10</td></tr>
+                <tr><td>ORD20260211033</td><td>¥33.00</td><td>16:40</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+
+      <!-- 5 -->
+      <tr>
+        <td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d5')"></i></td>
+        <td>2026-02-10</td>
+        <td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
+        <td>78</td>
+        <td style="text-align:right;" class="fst-amount">&yen;3,150.00</td>
+      </tr>
+      <tr class="fst-detail-row" id="fst-d5">
+        <td colspan="5">
+          <div class="fst-detail-wrap">
+            <div class="fst-detail-title">交易明细（部分）</div>
+            <table class="fst-mini-table">
+              <thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
+              <tbody>
+                <tr><td>ORD20260210028</td><td>¥52.00</td><td>20:30</td></tr>
+                <tr><td>ORD20260210025</td><td>¥41.50</td><td>19:15</td></tr>
+                <tr><td>ORD20260210022</td><td>¥67.00</td><td>18:00</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+
+      <!-- 6 -->
+      <tr>
+        <td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d6')"></i></td>
+        <td>2026-02-10</td>
+        <td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
+        <td>25</td>
+        <td style="text-align:right;" class="fst-amount">&yen;960.00</td>
+      </tr>
+      <tr class="fst-detail-row" id="fst-d6">
+        <td colspan="5">
+          <div class="fst-detail-wrap">
+            <div class="fst-detail-title">交易明细（部分）</div>
+            <table class="fst-mini-table">
+              <thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
+              <tbody>
+                <tr><td>ORD20260210026</td><td>¥48.00</td><td>19:40</td></tr>
+                <tr><td>ORD20260210023</td><td>¥55.00</td><td>17:55</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination">
+  <span>共 68 条</span>
+  <select style="height:28px;padding:0 6px;border:1px solid #e5e7eb;border-radius:4px;font-size:12px;margin-right:4px;">
+    <option>20条/页</option>
+    <option>50条/页</option>
+    <option>100条/页</option>
+  </select>
+  <button class="g-page-btn" disabled>&lt;</button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn">3</button>
+  <button class="g-page-btn">4</button>
+  <button class="g-page-btn">&gt;</button>
+</div>
+
+<script>
+  function toggleFstDetail(iconEl, rowId) {
+    var row = document.getElementById(rowId);
+    var isOpen = row.classList.contains('open');
+    row.classList.toggle('open');
+    var parentTr = row.previousElementSibling;
+    var icon = parentTr.querySelector('td:first-child i');
+    if (icon) {
+      icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(90deg)';
+    }
+  }
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/fin-transactions.html b/TakeoutSaaS.Prototypes/pages/fin-transactions.html
new file mode 100644
index 0000000..639eead
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/fin-transactions.html
@@ -0,0 +1,255 @@
+<!-- 交易流水 — fin-transactions.html -->
+<style>
+  /* ---- page-private: ft- prefix ---- */
+  .ft-stats {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
+  }
+  .ft-stat-card {
+    background: #fff; border-radius: var(--g-radius); padding: 18px 20px;
+    box-shadow: var(--g-shadow-sm); transition: var(--g-transition);
+  }
+  .ft-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
+  .ft-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
+  .ft-stat-label i { width: 16px; height: 16px; }
+  .ft-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
+  .ft-stat-val.green { color: var(--g-success); }
+  .ft-stat-val.red { color: var(--g-danger); }
+  .ft-stat-val.orange { color: var(--g-warning); }
+
+  .ft-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 14px 18px;
+    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border); margin-bottom: 16px;
+  }
+  .ft-toolbar select,
+  .ft-toolbar input {
+    height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: var(--g-radius-sm, 6px);
+    font-size: 13px; outline: none; transition: var(--g-transition); background: #fff; color: var(--g-text);
+  }
+  .ft-toolbar select:focus,
+  .ft-toolbar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .ft-toolbar select { min-width: 110px; }
+  .ft-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
+  .ft-search-wrap { position: relative; width: 180px; }
+  .ft-search-wrap input { padding-left: 30px; width: 100%; }
+  .ft-search-wrap i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--g-text-muted); pointer-events: none; }
+  .ft-toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
+
+  .ft-table-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    overflow: hidden;
+  }
+  .ft-table-card .g-table th { white-space: nowrap; }
+  .ft-table-card .g-table td { vertical-align: middle; font-size: 13px; }
+  .ft-mono { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 12px; color: var(--g-text-secondary); }
+  .ft-amount { font-weight: 600; white-space: nowrap; }
+  .ft-amount.income { color: var(--g-success); }
+  .ft-amount.expense { color: var(--g-danger); }
+  .ft-amount.neutral { color: var(--g-text); }
+  .ft-time { font-size: 12px; color: var(--g-text-muted); white-space: nowrap; }
+
+  /* 快捷日期 */
+  .ft-quick-dates { display:flex; gap:4px; }
+  .ft-quick-dates button {
+    padding:4px 10px; font-size:12px; border:1px solid #e5e7eb; border-radius:4px;
+    background:#fff; color:var(--g-text-secondary); cursor:pointer; transition:all var(--g-transition);
+  }
+  .ft-quick-dates button:hover { border-color:var(--primary); color:var(--primary); }
+  .ft-quick-dates button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
+
+  /* 汇总行 */
+  .ft-summary td { background:#f8f9fb; font-weight:600; font-size:13px; color:var(--g-text); border-top:2px solid #e5e7eb; }
+  .ft-remark { font-size:12px; color:var(--g-text-muted); max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+</style>
+
+<!-- 汇总指标 -->
+<div class="ft-stats">
+  <div class="ft-stat-card">
+    <div class="ft-stat-label"><i data-lucide="trending-up"></i>总收入</div>
+    <div class="ft-stat-val green">&yen;45,680</div>
+  </div>
+  <div class="ft-stat-card">
+    <div class="ft-stat-label"><i data-lucide="undo-2"></i>总退款</div>
+    <div class="ft-stat-val red">&yen;3,200</div>
+  </div>
+  <div class="ft-stat-card">
+    <div class="ft-stat-label"><i data-lucide="receipt"></i>交易笔数</div>
+    <div class="ft-stat-val">256</div>
+  </div>
+</div>
+
+<!-- 筛选工具栏 -->
+<div class="ft-toolbar">
+  <input type="date" value="2026-02-01">
+  <span class="ft-date-sep">至</span>
+  <input type="date" value="2026-02-12">
+  <div class="ft-quick-dates">
+    <button onclick="ftQuickDate(this,'today')" class="active">今天</button>
+    <button onclick="ftQuickDate(this,'yesterday')">昨天</button>
+    <button onclick="ftQuickDate(this,'7d')">近7天</button>
+    <button onclick="ftQuickDate(this,'30d')">近30天</button>
+    <button onclick="ftQuickDate(this,'month')">本月</button>
+  </div>
+  <select>
+    <option>全部类型</option>
+    <option>收入</option>
+    <option>退款</option>
+    <option>储值充值</option>
+    <option>积分抵扣</option>
+  </select>
+  <select>
+    <option>全部渠道</option>
+    <option>外卖</option>
+    <option>自提</option>
+    <option>堂食</option>
+  </select>
+  <select>
+    <option>全部支付方式</option>
+    <option>微信</option>
+    <option>支付宝</option>
+    <option>现金</option>
+    <option>储值余额</option>
+  </select>
+  <div class="ft-search-wrap">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input type="text" placeholder="搜索流水号/订单号">
+  </div>
+  <div class="ft-toolbar-right">
+    <button class="g-btn g-btn-sm" onclick="this.textContent='导出中…';setTimeout(()=>{this.innerHTML='<i data-lucide=\'download\' style=\'width:14px;height:14px;margin-right:4px;vertical-align:-2px;\'></i>已导出';lucide.createIcons();setTimeout(()=>{this.innerHTML='<i data-lucide=\'download\' style=\'width:14px;height:14px;margin-right:4px;vertical-align:-2px;\'></i>导出';lucide.createIcons();},1500);},800)"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
+  </div>
+</div>
+
+<!-- 交易流水表格 -->
+<div class="ft-table-card">
+  <table class="g-table">
+    <thead>
+      <tr>
+        <th>流水号</th>
+        <th>关联订单</th>
+        <th>类型</th>
+        <th>渠道</th>
+        <th>支付方式</th>
+        <th style="text-align:right;">金额</th>
+        <th>交易时间</th>
+        <th>备注</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="ft-mono">TXN20260212001</td>
+        <td><a class="g-action ft-mono">#ORD20260212001</a></td>
+        <td><span class="g-tag g-tag-green">收入</span></td>
+        <td>外卖</td>
+        <td>微信</td>
+        <td style="text-align:right;" class="ft-amount income">+&yen;58.00</td>
+        <td class="ft-time">2026-02-12 12:35:00</td>
+        <td class="ft-remark" title="外卖平台订单">外卖平台订单</td>
+      </tr>
+      <tr>
+        <td class="ft-mono">TXN20260212002</td>
+        <td><a class="g-action ft-mono">#ORD20260212003</a></td>
+        <td><span class="g-tag g-tag-red">退款</span></td>
+        <td>外卖</td>
+        <td>微信</td>
+        <td style="text-align:right;" class="ft-amount expense">-&yen;32.00</td>
+        <td class="ft-time">2026-02-12 11:50:22</td>
+        <td class="ft-remark" title="顾客申请退款-菜品不符">顾客申请退款-菜品不符</td>
+      </tr>
+      <tr>
+        <td class="ft-mono">TXN20260212003</td>
+        <td><a class="g-action ft-mono">#ORD20260212005</a></td>
+        <td><span class="g-tag g-tag-green">收入</span></td>
+        <td>堂食</td>
+        <td>支付宝</td>
+        <td style="text-align:right;" class="ft-amount income">+&yen;126.00</td>
+        <td class="ft-time">2026-02-12 11:22:10</td>
+        <td class="ft-remark">—</td>
+      </tr>
+      <tr>
+        <td class="ft-mono">TXN20260212004</td>
+        <td class="ft-mono">—</td>
+        <td><span class="g-tag g-tag-blue">储值充值</span></td>
+        <td>—</td>
+        <td>微信</td>
+        <td style="text-align:right;" class="ft-amount income">+&yen;500.00</td>
+        <td class="ft-time">2026-02-12 10:45:33</td>
+        <td class="ft-remark" title="会员张女士充值">会员张女士充值</td>
+      </tr>
+      <tr>
+        <td class="ft-mono">TXN20260212005</td>
+        <td><a class="g-action ft-mono">#ORD20260212008</a></td>
+        <td><span class="g-tag g-tag-orange">积分抵扣</span></td>
+        <td>自提</td>
+        <td>储值余额</td>
+        <td style="text-align:right;" class="ft-amount income">+&yen;45.00</td>
+        <td class="ft-time">2026-02-12 10:12:05</td>
+        <td class="ft-remark" title="抵扣200积分">抵扣200积分</td>
+      </tr>
+      <tr>
+        <td class="ft-mono">TXN20260212006</td>
+        <td><a class="g-action ft-mono">#ORD20260212010</a></td>
+        <td><span class="g-tag g-tag-green">收入</span></td>
+        <td>自提</td>
+        <td>现金</td>
+        <td style="text-align:right;" class="ft-amount income">+&yen;28.00</td>
+        <td class="ft-time">2026-02-12 09:38:17</td>
+        <td class="ft-remark">—</td>
+      </tr>
+      <tr>
+        <td class="ft-mono">TXN20260212007</td>
+        <td><a class="g-action ft-mono">#ORD20260211042</a></td>
+        <td><span class="g-tag g-tag-green">收入</span></td>
+        <td>堂食</td>
+        <td>微信</td>
+        <td style="text-align:right;" class="ft-amount income">+&yen;89.00</td>
+        <td class="ft-time">2026-02-11 20:15:44</td>
+        <td class="ft-remark">—</td>
+      </tr>
+      <!-- 汇总行 -->
+      <tr class="ft-summary">
+        <td colspan="5" style="text-align:right;">本页合计</td>
+        <td style="text-align:right;">收入 &yen;846.00 / 退款 &yen;32.00</td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination">
+  <span>共 256 条</span>
+  <select style="height:28px;padding:0 6px;border:1px solid #e5e7eb;border-radius:4px;font-size:12px;margin-right:4px;">
+    <option>20条/页</option>
+    <option>50条/页</option>
+    <option>100条/页</option>
+  </select>
+  <button class="g-page-btn" disabled>&lt;</button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn">3</button>
+  <button class="g-page-btn">4</button>
+  <button class="g-page-btn">5</button>
+  <button class="g-page-btn">&gt;</button>
+</div>
+
+<script>
+  /* 快捷日期切换 */
+  function ftQuickDate(btn, range) {
+    btn.closest('.ft-quick-dates').querySelectorAll('button').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    var today = new Date('2026-02-12');
+    var inputs = document.querySelectorAll('.ft-toolbar input[type="date"]');
+    var fmt = d => d.toISOString().slice(0,10);
+    var start = today, end = today;
+    if (range === 'today') { start = end = today; }
+    else if (range === 'yesterday') { start = end = new Date(today - 86400000); }
+    else if (range === '7d') { start = new Date(today - 6 * 86400000); }
+    else if (range === '30d') { start = new Date(today - 29 * 86400000); }
+    else if (range === 'month') { start = new Date('2026-02-01'); }
+    inputs[0].value = fmt(start);
+    inputs[1].value = fmt(end);
+  }
+
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/fin-withdrawal.html b/TakeoutSaaS.Prototypes/pages/fin-withdrawal.html
new file mode 100644
index 0000000..ddf9e62
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/fin-withdrawal.html
@@ -0,0 +1,365 @@
+<!-- 提现管理 — fin-withdrawal.html -->
+<style>
+  /* ---- page-private: fw- prefix ---- */
+  .fw-page { max-width: 960px; }
+
+  /* tab switcher */
+  .fw-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
+
+  /* balance cards */
+  .fw-balance-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
+  .fw-bal-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 20px 22px; transition: box-shadow var(--g-transition);
+  }
+  .fw-bal-card:hover { box-shadow: var(--g-shadow-md); }
+  .fw-bal-label { font-size: 13px; color: var(--g-text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
+  .fw-bal-value { font-size: 28px; font-weight: 700; color: var(--g-text); font-variant-numeric: tabular-nums; }
+  .fw-bal-value.primary { color: var(--primary); }
+  .fw-bal-value.warning { color: var(--g-warning); }
+
+  /* toolbar */
+  .fw-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+  .fw-toolbar-title { font-size: 14px; font-weight: 600; color: var(--g-text); }
+
+  /* table card */
+  .fw-table-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    overflow: hidden;
+  }
+  .fw-table-card .g-table td { vertical-align: middle; }
+  .fw-mono { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 12px; color: var(--g-text-secondary); }
+
+  /* bank card list */
+  .fw-bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
+  .fw-bank-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start;
+    transition: box-shadow var(--g-transition); position: relative;
+  }
+  .fw-bank-card:hover { box-shadow: var(--g-shadow-md); }
+  .fw-bank-icon {
+    width: 44px; height: 44px; border-radius: 10px; background: var(--g-bg-subtle);
+    border: 1px solid var(--g-border); display: flex; align-items: center; justify-content: center;
+    color: var(--g-text-muted); flex-shrink: 0;
+  }
+  .fw-bank-info { flex: 1; min-width: 0; }
+  .fw-bank-name { font-size: 14px; font-weight: 600; color: var(--g-text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
+  .fw-bank-no { font-size: 13px; color: var(--g-text-secondary); font-family: 'SF Mono', 'Consolas', monospace; margin-bottom: 4px; letter-spacing: 1px; }
+  .fw-bank-meta { font-size: 12px; color: var(--g-text-muted); display: flex; gap: 12px; }
+  .fw-bank-actions { display: flex; gap: 10px; margin-top: 10px; }
+
+  /* add card placeholder */
+  .fw-add-card {
+    border: 2px dashed #d9d9d9; border-radius: var(--g-radius); padding: 18px 20px;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    cursor: pointer; color: var(--g-text-muted); font-size: 13px;
+    transition: all var(--g-transition); min-height: 140px;
+  }
+  .fw-add-card:hover { border-color: var(--primary); color: var(--primary); }
+
+  /* settlement settings */
+  .fw-settle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+  .fw-settle-label { font-size: 13px; color: var(--g-text); font-weight: 500; width: 100px; flex-shrink: 0; }
+
+  /* drawer */
+  .fw-drawer { width: 420px; }
+  .fw-drawer-balance {
+    background: color-mix(in srgb, var(--primary) 6%, #fff);
+    border: 1px solid color-mix(in srgb, var(--primary) 15%, #fff);
+    border-radius: var(--g-radius); padding: 16px 18px; margin-bottom: 20px;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .fw-drawer-bal-label { font-size: 13px; color: var(--g-text-secondary); }
+  .fw-drawer-bal-value { font-size: 22px; font-weight: 700; color: var(--primary); }
+  .fw-amount-wrap { position: relative; }
+  .fw-amount-wrap .g-input { padding-right: 80px; }
+  .fw-amount-link {
+    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+    font-size: 12px; color: var(--primary); cursor: pointer; transition: opacity var(--g-transition);
+  }
+  .fw-amount-link:hover { opacity: .7; }
+  .fw-tip {
+    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
+    background: #fffbe6; border: 1px solid #ffe58f; border-radius: var(--g-radius-sm);
+    font-size: 12px; color: #ad6800; margin-top: 16px;
+  }
+
+  /* section title */
+  .fw-section-hd {
+    font-size: 15px; font-weight: 600; color: var(--g-text);
+    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 16px;
+  }
+</style>
+
+<div class="fw-page">
+  <!-- Tab 切换 -->
+  <div class="fw-tabs">
+    <span class="g-pill checked" onclick="switchFwTab(event, 'records')">提现记录</span>
+    <span class="g-pill" onclick="switchFwTab(event, 'accounts')">银行账户</span>
+  </div>
+
+  <!-- ==================== Tab1: 提现记录 ==================== -->
+  <div id="fwTabRecords">
+    <!-- 余额卡片 -->
+    <div class="fw-balance-row">
+      <div class="fw-bal-card">
+        <div class="fw-bal-label"><i data-lucide="wallet" style="width:15px;height:15px;"></i>可用余额</div>
+        <div class="fw-bal-value primary">&yen;32,400.00</div>
+      </div>
+      <div class="fw-bal-card">
+        <div class="fw-bal-label"><i data-lucide="lock" style="width:15px;height:15px;"></i>冻结中</div>
+        <div class="fw-bal-value warning">&yen;6,850.00</div>
+      </div>
+      <div class="fw-bal-card">
+        <div class="fw-bal-label"><i data-lucide="trending-up" style="width:15px;height:15px;"></i>累计提现</div>
+        <div class="fw-bal-value">&yen;156,800.00</div>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="fw-toolbar">
+      <div class="fw-toolbar-title">提现记录</div>
+      <button class="g-btn g-btn-primary" onclick="openFwDrawer()"><i data-lucide="banknote" style="width:14px;height:14px;"></i>申请提现</button>
+    </div>
+
+    <!-- 表格 -->
+    <div class="fw-table-card">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>提现单号</th>
+            <th>提现金额</th>
+            <th>手续费</th>
+            <th>到账金额</th>
+            <th>到账银行卡</th>
+            <th>状态</th>
+            <th>申请时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><span class="fw-mono">WD20260210001</span></td>
+            <td>&yen;5,000.00</td>
+            <td>&yen;2.00</td>
+            <td style="font-weight:600;">&yen;4,998.00</td>
+            <td>招商银行（尾号8862）</td>
+            <td><span class="g-tag g-tag-blue">处理中</span></td>
+            <td>2026-02-10 14:32</td>
+          </tr>
+          <tr>
+            <td><span class="fw-mono">WD20260208002</span></td>
+            <td>&yen;10,000.00</td>
+            <td>&yen;2.00</td>
+            <td style="font-weight:600;">&yen;9,998.00</td>
+            <td>招商银行（尾号8862）</td>
+            <td><span class="g-tag g-tag-green">已到账</span></td>
+            <td>2026-02-08 09:15</td>
+          </tr>
+          <tr>
+            <td><span class="fw-mono">WD20260205003</span></td>
+            <td>&yen;8,000.00</td>
+            <td>&yen;2.00</td>
+            <td style="font-weight:600;">&yen;7,998.00</td>
+            <td>工商银行（尾号3371）</td>
+            <td><span class="g-tag g-tag-green">已到账</span></td>
+            <td>2026-02-05 16:48</td>
+          </tr>
+          <tr>
+            <td><span class="fw-mono">WD20260203004</span></td>
+            <td>&yen;3,000.00</td>
+            <td>&yen;2.00</td>
+            <td style="font-weight:600;">&yen;2,998.00</td>
+            <td>招商银行（尾号8862）</td>
+            <td><span class="g-tag g-tag-red">已驳回</span></td>
+            <td>2026-02-03 11:20</td>
+          </tr>
+          <tr>
+            <td><span class="fw-mono">WD20260130005</span></td>
+            <td>&yen;15,000.00</td>
+            <td>&yen;2.00</td>
+            <td style="font-weight:600;">&yen;14,998.00</td>
+            <td>工商银行（尾号3371）</td>
+            <td><span class="g-tag g-tag-green">已到账</span></td>
+            <td>2026-01-30 10:05</td>
+          </tr>
+          <tr>
+            <td><span class="fw-mono">WD20260125006</span></td>
+            <td>&yen;20,000.00</td>
+            <td>&yen;2.00</td>
+            <td style="font-weight:600;">&yen;19,998.00</td>
+            <td>招商银行（尾号8862）</td>
+            <td><span class="g-tag g-tag-green">已到账</span></td>
+            <td>2026-01-25 08:30</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="g-pagination">
+      <span>共 28 条</span>
+      <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn">2</button>
+      <button class="g-page-btn">3</button>
+      <button class="g-page-btn">4</button>
+      <button class="g-page-btn">5</button>
+      <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+    </div>
+  </div>
+
+  <!-- ==================== Tab2: 银行账户 ==================== -->
+  <div id="fwTabAccounts" style="display:none;">
+    <!-- 已绑定账户 -->
+    <div class="fw-section-hd">已绑定账户</div>
+    <div class="fw-bank-grid">
+      <!-- 卡片1 -->
+      <div class="fw-bank-card">
+        <div class="fw-bank-icon"><i data-lucide="landmark" style="width:22px;height:22px;"></i></div>
+        <div class="fw-bank-info">
+          <div class="fw-bank-name">招商银行 <span class="g-tag g-tag-blue">默认</span></div>
+          <div class="fw-bank-no">**** **** **** 8862</div>
+          <div class="fw-bank-meta">
+            <span>户名：张三餐饮有限公司</span>
+            <span>对公账户</span>
+          </div>
+          <div class="fw-bank-actions">
+            <span class="g-action" style="font-size:12px;">编辑</span>
+            <span class="g-action g-action-danger" style="font-size:12px;">删除</span>
+          </div>
+        </div>
+      </div>
+      <!-- 卡片2 -->
+      <div class="fw-bank-card">
+        <div class="fw-bank-icon"><i data-lucide="landmark" style="width:22px;height:22px;"></i></div>
+        <div class="fw-bank-info">
+          <div class="fw-bank-name">工商银行</div>
+          <div class="fw-bank-no">**** **** **** 3371</div>
+          <div class="fw-bank-meta">
+            <span>户名：张三</span>
+            <span>个人账户</span>
+          </div>
+          <div class="fw-bank-actions">
+            <span class="g-action" style="font-size:12px;">设为默认</span>
+            <span class="g-action" style="font-size:12px;">编辑</span>
+            <span class="g-action g-action-danger" style="font-size:12px;">删除</span>
+          </div>
+        </div>
+      </div>
+      <!-- 添加卡片 -->
+      <div class="fw-add-card">
+        <i data-lucide="plus" style="width:18px;height:18px;"></i>
+        添加银行账户
+      </div>
+    </div>
+
+    <!-- 结算设置 -->
+    <div class="fw-section-hd">结算设置</div>
+    <div class="g-card">
+      <div class="fw-settle-row">
+        <div class="fw-settle-label">结算周期</div>
+        <div style="display:flex; gap:8px;">
+          <span class="g-pill checked" onclick="togglePill(event.currentTarget)">T+1</span>
+          <span class="g-pill" onclick="togglePill(event.currentTarget)">T+3</span>
+          <span class="g-pill" onclick="togglePill(event.currentTarget)">周结</span>
+        </div>
+      </div>
+      <div class="fw-settle-row">
+        <div class="fw-settle-label">最低提现金额</div>
+        <div style="display:flex; align-items:center; gap:8px;">
+          <span style="font-size:13px; color:var(--g-text-secondary);">&yen;</span>
+          <input class="g-input" type="number" style="width:160px;" value="100" placeholder="请输入最低提现金额">
+          <span class="g-hint" style="margin-top:0;">低于此金额无法发起提现</span>
+        </div>
+      </div>
+      <div style="display:flex; justify-content:flex-end; margin-top:8px;">
+        <button class="g-btn g-btn-primary">保存设置</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ==================== 提现抽屉 ==================== -->
+<div class="g-drawer-mask" id="fwDrawerMask" onclick="closeFwDrawer()"></div>
+<div class="g-drawer fw-drawer" id="fwDrawer">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title">申请提现</div>
+    <button class="g-drawer-close" onclick="closeFwDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 可用余额 -->
+    <div class="fw-drawer-balance">
+      <div>
+        <div class="fw-drawer-bal-label">可用余额</div>
+        <div class="fw-drawer-bal-value">&yen;32,400.00</div>
+      </div>
+      <i data-lucide="wallet" style="width:28px;height:28px;color:var(--primary);opacity:.3;"></i>
+    </div>
+
+    <!-- 提现金额 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">提现金额</label>
+      <div class="fw-amount-wrap">
+        <input class="g-input" type="number" placeholder="请输入提现金额" style="font-size:15px; height:40px;">
+        <span class="fw-amount-link" onclick="document.querySelector('.fw-amount-wrap .g-input').value='32400'">全部提现</span>
+      </div>
+    </div>
+
+    <!-- 到账银行卡 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">到账银行卡</label>
+      <select class="g-select">
+        <option>招商银行（尾号8862）— 对公账户（默认）</option>
+        <option>工商银行（尾号3371）— 个人账户</option>
+      </select>
+    </div>
+
+    <!-- 预计到账 -->
+    <div class="g-form-group">
+      <label class="g-form-label">预计到账时间</label>
+      <div style="font-size:13px; color:var(--g-text-secondary); padding:8px 12px; background:var(--g-bg-subtle); border-radius:var(--g-radius-sm);">
+        预计 <strong style="color:var(--primary);">2026-02-13（明天）</strong> 到账（T+1 结算）
+      </div>
+    </div>
+
+    <!-- 手续费提示 -->
+    <div class="fw-tip">
+      <i data-lucide="info" style="width:14px;height:14px;flex-shrink:0;"></i>
+      每笔提现收取手续费 &yen;2.00，将从提现金额中扣除
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeFwDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">确认提现</button>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchFwTab(e, tab) {
+    document.querySelectorAll('.fw-tabs .g-pill').forEach(p => p.classList.remove('checked'));
+    e.currentTarget.classList.add('checked');
+    document.getElementById('fwTabRecords').style.display = tab === 'records' ? '' : 'none';
+    document.getElementById('fwTabAccounts').style.display = tab === 'accounts' ? '' : 'none';
+  }
+
+  /* 结算周期 pill 单选 */
+  function togglePill(el) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(p => p.classList.remove('checked'));
+    el.classList.add('checked');
+  }
+
+  /* 抽屉 */
+  function openFwDrawer() {
+    document.getElementById('fwDrawerMask').classList.add('open');
+    document.getElementById('fwDrawer').classList.add('open');
+  }
+  function closeFwDrawer() {
+    document.getElementById('fwDrawerMask').classList.remove('open');
+    document.getElementById('fwDrawer').classList.remove('open');
+  }
+
+  /* 初始化 Lucide 图标 */
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/inv-expiry.html b/TakeoutSaaS.Prototypes/pages/inv-expiry.html
new file mode 100644
index 0000000..2ff42fd
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/inv-expiry.html
@@ -0,0 +1,249 @@
+<!-- 效期管理页 -->
+<style>
+  .ive-fifo{display:flex;align-items:center;gap:10px;padding:12px 18px;background:color-mix(in srgb, var(--primary) 8%, #fff);border:1px solid color-mix(in srgb, var(--primary) 20%, #fff);border-radius:var(--g-radius);margin-bottom:16px;font-size:13px;color:var(--primary);font-weight:500;}
+  .ive-fifo svg{width:18px;height:18px;flex-shrink:0;}
+
+  .ive-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
+  .ive-stat{display:flex;align-items:center;gap:14px;padding:16px 20px;background:#fff;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);transition:var(--g-transition);border-left:3px solid transparent;}
+  .ive-stat:hover{box-shadow:var(--g-shadow-md);}
+  .ive-stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
+  .ive-stat-icon svg{width:20px;height:20px;}
+  .ive-stat-num{font-size:22px;font-weight:700;line-height:1.2;}
+  .ive-stat-label{font-size:12px;color:var(--g-text-muted);margin-top:2px;}
+  .ive-stat-red{border-left-color:var(--g-danger);}
+  .ive-stat-red .ive-stat-icon{background:#fff1f0;color:var(--g-danger);}
+  .ive-stat-red .ive-stat-num{color:var(--g-danger);}
+  .ive-stat-orange{border-left-color:#fa8c16;}
+  .ive-stat-orange .ive-stat-icon{background:#fff7e6;color:#fa8c16;}
+  .ive-stat-orange .ive-stat-num{color:#fa8c16;}
+  .ive-stat-yellow{border-left-color:#faad14;}
+  .ive-stat-yellow .ive-stat-icon{background:#fffbe6;color:#faad14;}
+  .ive-stat-yellow .ive-stat-num{color:#faad14;}
+  .ive-stat-green{border-left-color:var(--g-success);}
+  .ive-stat-green .ive-stat-icon{background:#f6ffed;color:var(--g-success);}
+  .ive-stat-green .ive-stat-num{color:var(--g-success);}
+
+  .ive-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;padding:12px 16px;background:#fff;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);}
+  .ive-toolbar select{height:34px;padding:0 10px;border:1px solid var(--g-border);border-radius:var(--g-radius-sm);font-size:13px;outline:none;background:#fff;min-width:140px;cursor:pointer;transition:var(--g-transition);}
+  .ive-toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
+  .ive-toolbar .ive-search{height:34px;padding:0 12px;border:1px solid var(--g-border);border-radius:var(--g-radius-sm);font-size:13px;outline:none;width:200px;transition:var(--g-transition);}
+  .ive-toolbar .ive-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
+  .ive-toolbar .ive-spacer{flex:1;}
+
+  .ive-row-expired{background:#fff1f0 !important;}
+  .ive-row-3day{background:#fff7e6 !important;}
+  .ive-row-7day{background:#fffbe6 !important;}
+  .ive-days-expired{color:var(--g-danger);font-weight:600;font-size:12px;}
+  .ive-days-urgent{color:#fa8c16;font-weight:600;}
+
+  @media(max-width:800px){.ive-stats{grid-template-columns:repeat(2,1fr);}}
+  @media(max-width:500px){.ive-stats{grid-template-columns:1fr;}}
+</style>
+
+<!-- FIFO 提醒条 -->
+<div class="ive-fifo">
+  <i data-lucide="info"></i>
+  <span>遵循先进先出原则，请优先使用临期批次的原料</span>
+</div>
+
+<!-- 统计卡片 -->
+<div class="ive-stats">
+  <div class="ive-stat ive-stat-red">
+    <div class="ive-stat-icon"><i data-lucide="alert-circle"></i></div>
+    <div>
+      <div class="ive-stat-num">1 <span style="font-size:13px;font-weight:500;">批</span></div>
+      <div class="ive-stat-label">已过期</div>
+    </div>
+  </div>
+  <div class="ive-stat ive-stat-orange">
+    <div class="ive-stat-icon"><i data-lucide="clock"></i></div>
+    <div>
+      <div class="ive-stat-num">3 <span style="font-size:13px;font-weight:500;">批</span></div>
+      <div class="ive-stat-label">3天内到期</div>
+    </div>
+  </div>
+  <div class="ive-stat ive-stat-yellow">
+    <div class="ive-stat-icon"><i data-lucide="timer"></i></div>
+    <div>
+      <div class="ive-stat-num">5 <span style="font-size:13px;font-weight:500;">批</span></div>
+      <div class="ive-stat-label">7天内到期</div>
+    </div>
+  </div>
+  <div class="ive-stat ive-stat-green">
+    <div class="ive-stat-icon"><i data-lucide="check-circle"></i></div>
+    <div>
+      <div class="ive-stat-num">38 <span style="font-size:13px;font-weight:500;">批</span></div>
+      <div class="ive-stat-label">正常</div>
+    </div>
+  </div>
+</div>
+
+<!-- 筛选工具栏 -->
+<div class="ive-toolbar">
+  <select>
+    <option>全部分类</option>
+    <option>肉类</option>
+    <option>蔬菜</option>
+    <option>调料</option>
+    <option>饮品原料</option>
+    <option>包装</option>
+  </select>
+  <select>
+    <option>全部状态</option>
+    <option>已过期</option>
+    <option>3天内到期</option>
+    <option>7天内到期</option>
+    <option>正常</option>
+  </select>
+  <div class="ive-spacer"></div>
+  <input class="ive-search" type="text" placeholder="搜索原料名称">
+</div>
+
+<!-- 批次列表 -->
+<div class="g-card" style="padding:0;overflow:hidden;">
+  <table class="g-table" style="margin:0;">
+    <thead>
+      <tr>
+        <th>原料名称</th>
+        <th>批次号</th>
+        <th>分类</th>
+        <th>入库日期</th>
+        <th>保质期至</th>
+        <th>剩余天数</th>
+        <th>库存数量</th>
+        <th>状态</th>
+        <th style="width:130px;">操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="ive-row-expired">
+        <td style="font-weight:600;">鲜牛奶</td>
+        <td>B20260210</td>
+        <td>饮品原料</td>
+        <td>2026-02-10</td>
+        <td>2026-02-13</td>
+        <td><span class="ive-days-expired">已过期1天</span></td>
+        <td>12 瓶</td>
+        <td><span class="g-tag g-tag-red">已过期</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr class="ive-row-3day">
+        <td style="font-weight:600;">生菜</td>
+        <td>B20260211</td>
+        <td>蔬菜</td>
+        <td>2026-02-11</td>
+        <td>2026-02-14</td>
+        <td><span class="ive-days-urgent">2 天</span></td>
+        <td>8 kg</td>
+        <td><span class="g-tag g-tag-orange">3天内</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr class="ive-row-3day">
+        <td style="font-weight:600;">鸡胸肉</td>
+        <td>B20260209</td>
+        <td>肉类</td>
+        <td>2026-02-09</td>
+        <td>2026-02-15</td>
+        <td><span class="ive-days-urgent">3 天</span></td>
+        <td>15 kg</td>
+        <td><span class="g-tag g-tag-orange">3天内</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr class="ive-row-7day">
+        <td style="font-weight:600;">西红柿</td>
+        <td>B20260210</td>
+        <td>蔬菜</td>
+        <td>2026-02-10</td>
+        <td>2026-02-16</td>
+        <td><span class="ive-days-urgent">4 天</span></td>
+        <td>10 kg</td>
+        <td><span class="g-tag g-tag-orange">7天内</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr class="ive-row-7day">
+        <td style="font-weight:600;">豆腐</td>
+        <td>B20260211</td>
+        <td>蔬菜</td>
+        <td>2026-02-11</td>
+        <td>2026-02-17</td>
+        <td><span class="ive-days-urgent">5 天</span></td>
+        <td>20 盒</td>
+        <td><span class="g-tag g-tag-orange">7天内</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr class="ive-row-7day">
+        <td style="font-weight:600;">猪肉</td>
+        <td>B20260208</td>
+        <td>肉类</td>
+        <td>2026-02-08</td>
+        <td>2026-02-18</td>
+        <td><span class="ive-days-urgent">6 天</span></td>
+        <td>25 kg</td>
+        <td><span class="g-tag g-tag-orange">7天内</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr>
+        <td style="font-weight:600;">酱油</td>
+        <td>B20260101</td>
+        <td>调料</td>
+        <td>2026-01-01</td>
+        <td>2026-06-30</td>
+        <td>138 天</td>
+        <td>6 瓶</td>
+        <td><span class="g-tag g-tag-green">正常</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr>
+        <td style="font-weight:600;">食用油</td>
+        <td>B20260115</td>
+        <td>调料</td>
+        <td>2026-01-15</td>
+        <td>2026-07-15</td>
+        <td>153 天</td>
+        <td>4 桶</td>
+        <td><span class="g-tag g-tag-green">正常</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr>
+        <td style="font-weight:600;">咖啡豆</td>
+        <td>B20260201</td>
+        <td>饮品原料</td>
+        <td>2026-02-01</td>
+        <td>2026-08-01</td>
+        <td>170 天</td>
+        <td>10 kg</td>
+        <td><span class="g-tag g-tag-green">正常</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+      <tr>
+        <td style="font-weight:600;">外卖盒</td>
+        <td>B20260201</td>
+        <td>包装</td>
+        <td>2026-02-01</td>
+        <td>—</td>
+        <td>—</td>
+        <td>500 个</td>
+        <td><span class="g-tag g-tag-gray">无期限</span></td>
+        <td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination" style="margin-top:16px;">
+  <span style="font-size:13px;color:var(--g-text-muted);">共 47 条</span>
+  <div style="display:flex;gap:6px;margin-left:auto;">
+    <button class="g-page-btn" disabled>&lt;</button>
+    <button class="g-page-btn active">1</button>
+    <button class="g-page-btn">2</button>
+    <button class="g-page-btn">3</button>
+    <button class="g-page-btn">4</button>
+    <button class="g-page-btn">5</button>
+    <button class="g-page-btn">&gt;</button>
+  </div>
+</div>
+
+<script>
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/inv-inout.html b/TakeoutSaaS.Prototypes/pages/inv-inout.html
new file mode 100644
index 0000000..2b35d24
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/inv-inout.html
@@ -0,0 +1,445 @@
+<!-- 出入库管理 — inv-inout.html -->
+<style>
+  /* ---- page-private: ivi- prefix ---- */
+  .ivi-toolbar {
+    background:#fff; border-radius:var(--g-radius); padding:14px 18px;
+    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
+    box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); margin-bottom:16px;
+  }
+  .ivi-toolbar select,
+  .ivi-toolbar input[type="date"] {
+    height:32px; padding:0 10px; border:1px solid #e5e7eb; border-radius:var(--g-radius-sm,6px);
+    font-size:13px; outline:none; transition:var(--g-transition); background:#fff; color:var(--g-text);
+  }
+  .ivi-toolbar select:focus,
+  .ivi-toolbar input[type="date"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .ivi-toolbar select { min-width:120px; }
+  .ivi-date-sep { color:var(--g-text-muted); font-size:13px; line-height:32px; }
+  .ivi-toolbar-right { margin-left:auto; display:flex; gap:8px; align-items:center; }
+
+  .ivi-panel {
+    background:#fff; border-radius:var(--g-radius); box-shadow:var(--g-shadow-sm);
+    padding:18px 20px;
+  }
+  .ivi-seg-wrap { margin-bottom:16px; }
+
+  .ivi-table-card {
+    background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border);
+    overflow:hidden;
+  }
+  .ivi-table-card .g-table th { white-space:nowrap; }
+  .ivi-table-card .g-table td { vertical-align:middle; font-size:13px; }
+
+  .ivi-mono { font-family:'SF Mono','Cascadia Code','Consolas',monospace; font-size:12px; color:var(--g-text-secondary); }
+  .ivi-amount { font-weight:600; white-space:nowrap; }
+  .ivi-amount.positive { color:var(--g-success); }
+  .ivi-amount.negative { color:var(--g-danger); }
+
+  .ivi-detail-cell { max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--g-text-secondary); }
+
+  /* 新增入库抽屉 */
+  .ivi-drawer { width:520px; }
+  .ivi-material-row {
+    display:flex; gap:8px; align-items:center; margin-bottom:10px;
+  }
+  .ivi-material-row select,
+  .ivi-material-row input {
+    height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:var(--g-radius-sm,6px);
+    font-size:13px; outline:none; transition:var(--g-transition); background:#fff; color:var(--g-text);
+  }
+  .ivi-material-row select:focus,
+  .ivi-material-row input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .ivi-material-row select { flex:2; min-width:0; }
+  .ivi-material-row input { flex:1; min-width:0; }
+  .ivi-subtotal {
+    flex:0 0 70px; text-align:right; font-size:13px; font-weight:600; color:var(--g-text);
+  }
+  .ivi-del-btn {
+    flex-shrink:0; width:30px; height:30px; border:none; background:none;
+    color:var(--g-text-muted); cursor:pointer; border-radius:6px; display:flex; align-items:center; justify-content:center;
+    transition:var(--g-transition);
+  }
+  .ivi-del-btn:hover { background:color-mix(in srgb, var(--g-danger) 8%, #fff); color:var(--g-danger); }
+  .ivi-add-row {
+    width:100%; height:36px; border:1px dashed #d9d9d9; border-radius:var(--g-radius-sm,6px);
+    background:#fafafa; color:var(--primary); font-size:13px; cursor:pointer;
+    display:flex; align-items:center; justify-content:center; gap:4px;
+    transition:var(--g-transition);
+  }
+  .ivi-add-row:hover { border-color:var(--primary); background:var(--primary-light,hsl(212,100%,95%)); }
+  .ivi-material-header {
+    display:flex; gap:8px; align-items:center; margin-bottom:8px; font-size:12px; color:var(--g-text-muted); font-weight:500;
+  }
+  .ivi-material-header span:nth-child(1) { flex:2; }
+  .ivi-material-header span:nth-child(2) { flex:1; }
+  .ivi-material-header span:nth-child(3) { flex:1; }
+  .ivi-material-header span:nth-child(4) { flex:0 0 70px; text-align:right; }
+  .ivi-material-header span:nth-child(5) { flex:0 0 30px; }
+</style>
+
+<!-- 面板 -->
+<div class="ivi-panel">
+  <!-- 分段控制器 -->
+  <div class="ivi-seg-wrap">
+    <div class="g-seg">
+      <div class="g-seg-item active" onclick="switchIviTab(this)" data-tab="in">入库记录</div>
+      <div class="g-seg-item" onclick="switchIviTab(this)" data-tab="out">出库记录</div>
+      <div class="g-seg-item" onclick="switchIviTab(this)" data-tab="check">盘点记录</div>
+    </div>
+  </div>
+
+  <!-- ========== Tab1: 入库记录 ========== -->
+  <div id="iviTabIn">
+    <div class="ivi-toolbar" style="box-shadow:none;border:none;padding:0 0 14px;">
+      <input type="date" value="2026-01-01">
+      <span class="ivi-date-sep">至</span>
+      <input type="date" value="2026-02-12">
+      <select>
+        <option>全部供应商</option>
+        <option>鑫源食材配送</option>
+        <option>绿野农产品</option>
+        <option>海鲜直供站</option>
+      </select>
+      <div class="ivi-toolbar-right">
+        <button class="g-btn g-btn-primary" onclick="openIviDrawer()"><i data-lucide="plus" style="width:14px;height:14px;"></i> 新增入库</button>
+      </div>
+    </div>
+    <div class="ivi-table-card">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>入库单号</th>
+            <th>日期</th>
+            <th>供应商</th>
+            <th>原料明细</th>
+            <th>总金额</th>
+            <th>经办人</th>
+            <th style="width:60px;">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="ivi-mono">RK20260212001</td>
+            <td>2026-02-12</td>
+            <td>鑫源食材配送</td>
+            <td class="ivi-detail-cell">五花肉 10kg、牛腩 8kg <span style="color:var(--primary);cursor:pointer;">等3项</span></td>
+            <td class="ivi-amount">&yen;2,360.00</td>
+            <td>张经理</td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">RK20260211002</td>
+            <td>2026-02-11</td>
+            <td>绿野农产品</td>
+            <td class="ivi-detail-cell">生菜 5kg、西红柿 8kg <span style="color:var(--primary);cursor:pointer;">等5项</span></td>
+            <td class="ivi-amount">&yen;680.00</td>
+            <td>李主管</td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">RK20260210003</td>
+            <td>2026-02-10</td>
+            <td>海鲜直供站</td>
+            <td class="ivi-detail-cell">鲈鱼 15条、基围虾 5kg</td>
+            <td class="ivi-amount">&yen;1,850.00</td>
+            <td>张经理</td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">RK20260209004</td>
+            <td>2026-02-09</td>
+            <td>鑫源食材配送</td>
+            <td class="ivi-detail-cell">鸡胸肉 12kg、排骨 10kg <span style="color:var(--primary);cursor:pointer;">等4项</span></td>
+            <td class="ivi-amount">&yen;3,120.00</td>
+            <td>王厨师</td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">RK20260208005</td>
+            <td>2026-02-08</td>
+            <td>绿野农产品</td>
+            <td class="ivi-detail-cell">土豆 20kg、洋葱 10kg</td>
+            <td class="ivi-amount">&yen;420.00</td>
+            <td>李主管</td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">RK20260207006</td>
+            <td>2026-02-07</td>
+            <td>海鲜直供站</td>
+            <td class="ivi-detail-cell">三文鱼 8kg、扇贝 3kg <span style="color:var(--primary);cursor:pointer;">等3项</span></td>
+            <td class="ivi-amount">&yen;2,980.00</td>
+            <td>张经理</td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="g-pagination">
+        <span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 6 条</span>
+        <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+        <button class="g-page-btn active">1</button>
+        <button class="g-page-btn" disabled><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ========== Tab2: 出库记录 ========== -->
+  <div id="iviTabOut" style="display:none;">
+    <div class="ivi-toolbar" style="box-shadow:none;border:none;padding:0 0 14px;">
+      <input type="date" value="2026-01-01">
+      <span class="ivi-date-sep">至</span>
+      <input type="date" value="2026-02-12">
+      <select>
+        <option>全部类型</option>
+        <option>订单消耗</option>
+        <option>报损</option>
+        <option>调拨</option>
+        <option>其他</option>
+      </select>
+    </div>
+    <div class="ivi-table-card">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>出库单号</th>
+            <th>日期</th>
+            <th>类型</th>
+            <th>原料明细</th>
+            <th>数量</th>
+            <th>经办人</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="ivi-mono">CK20260212001</td>
+            <td>2026-02-12</td>
+            <td><span class="g-tag g-tag-blue">订单消耗</span></td>
+            <td class="ivi-detail-cell">五花肉、生菜、西红柿</td>
+            <td>3.5kg / 2kg / 1.5kg</td>
+            <td>系统自动</td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">CK20260212002</td>
+            <td>2026-02-12</td>
+            <td><span class="g-tag g-tag-blue">订单消耗</span></td>
+            <td class="ivi-detail-cell">鸡胸肉、土豆</td>
+            <td>2kg / 3kg</td>
+            <td>系统自动</td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">CK20260211003</td>
+            <td>2026-02-11</td>
+            <td><span class="g-tag g-tag-red">报损</span></td>
+            <td class="ivi-detail-cell">基围虾（变质）</td>
+            <td>1.2kg</td>
+            <td>王厨师</td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">CK20260211004</td>
+            <td>2026-02-11</td>
+            <td><span class="g-tag g-tag-blue">订单消耗</span></td>
+            <td class="ivi-detail-cell">牛腩、洋葱、排骨</td>
+            <td>4kg / 2kg / 3kg</td>
+            <td>系统自动</td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">CK20260210005</td>
+            <td>2026-02-10</td>
+            <td><span class="g-tag g-tag-gray">调拨</span></td>
+            <td class="ivi-detail-cell">三文鱼（调至分店）</td>
+            <td>2kg</td>
+            <td>张经理</td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">CK20260210006</td>
+            <td>2026-02-10</td>
+            <td><span class="g-tag g-tag-blue">订单消耗</span></td>
+            <td class="ivi-detail-cell">鲈鱼、生菜、土豆</td>
+            <td>3条 / 1.5kg / 2kg</td>
+            <td>系统自动</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="g-pagination">
+        <span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 6 条</span>
+        <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+        <button class="g-page-btn active">1</button>
+        <button class="g-page-btn" disabled><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ========== Tab3: 盘点记录 ========== -->
+  <div id="iviTabCheck" style="display:none;">
+    <div class="ivi-toolbar" style="box-shadow:none;border:none;padding:0 0 14px;">
+      <input type="date" value="2026-01-01">
+      <span class="ivi-date-sep">至</span>
+      <input type="date" value="2026-02-12">
+      <div class="ivi-toolbar-right">
+        <button class="g-btn g-btn-primary"><i data-lucide="clipboard-list" style="width:14px;height:14px;"></i> 新建盘点</button>
+      </div>
+    </div>
+    <div class="ivi-table-card">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>盘点单号</th>
+            <th>盘点日期</th>
+            <th>盘点范围</th>
+            <th>差异项数</th>
+            <th>盈亏金额</th>
+            <th>状态</th>
+            <th style="width:60px;">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="ivi-mono">PD20260212001</td>
+            <td>2026-02-12</td>
+            <td>全部</td>
+            <td>3</td>
+            <td class="ivi-amount negative">-&yen;186.00</td>
+            <td><span class="g-tag g-tag-orange">进行中</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">PD20260205002</td>
+            <td>2026-02-05</td>
+            <td>肉类</td>
+            <td>1</td>
+            <td class="ivi-amount negative">-&yen;95.00</td>
+            <td><span class="g-tag g-tag-green">已完成</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">PD20260130003</td>
+            <td>2026-01-30</td>
+            <td>蔬菜</td>
+            <td>2</td>
+            <td class="ivi-amount positive">+&yen;32.00</td>
+            <td><span class="g-tag g-tag-green">已完成</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td class="ivi-mono">PD20260120004</td>
+            <td>2026-01-20</td>
+            <td>全部</td>
+            <td>5</td>
+            <td class="ivi-amount negative">-&yen;420.00</td>
+            <td><span class="g-tag g-tag-green">已完成</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="g-pagination">
+        <span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 4 条</span>
+        <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+        <button class="g-page-btn active">1</button>
+        <button class="g-page-btn" disabled><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ========== 新增入库抽屉 ========== -->
+<div class="g-drawer-mask" id="iviDrawerMask" onclick="closeIviDrawer()"></div>
+<div class="g-drawer ivi-drawer" id="iviDrawer">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title">新增入库单</div>
+    <button class="g-drawer-close" onclick="closeIviDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 供应商 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">供应商</label>
+      <select class="g-select" style="width:100%;">
+        <option value="">请选择供应商</option>
+        <option>鑫源食材配送</option>
+        <option>绿野农产品</option>
+        <option>海鲜直供站</option>
+      </select>
+    </div>
+    <!-- 入库日期 -->
+    <div class="g-form-group">
+      <label class="g-form-label">入库日期</label>
+      <input class="g-input" type="date" value="2026-02-12">
+    </div>
+    <!-- 原料明细 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">原料明细</label>
+      <div class="ivi-material-header">
+        <span>原料名称</span>
+        <span>数量</span>
+        <span>单价(元)</span>
+        <span>小计</span>
+        <span></span>
+      </div>
+      <div id="iviMaterialList">
+        <div class="ivi-material-row">
+          <select><option>五花肉</option><option>牛腩</option><option>鸡胸肉</option><option>排骨</option><option>生菜</option><option>西红柿</option><option>土豆</option><option>鲈鱼</option><option>基围虾</option></select>
+          <input type="number" placeholder="数量" value="10">
+          <input type="number" placeholder="单价" value="32">
+          <div class="ivi-subtotal">&yen;320</div>
+          <button class="ivi-del-btn" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+        <div class="ivi-material-row">
+          <select><option>牛腩</option><option>五花肉</option><option>鸡胸肉</option><option>排骨</option><option>生菜</option><option>西红柿</option><option>土豆</option><option>鲈鱼</option><option>基围虾</option></select>
+          <input type="number" placeholder="数量" value="8">
+          <input type="number" placeholder="单价" value="58">
+          <div class="ivi-subtotal">&yen;464</div>
+          <button class="ivi-del-btn" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+      </div>
+      <button class="ivi-add-row" onclick="addIviMaterialRow()">
+        <i data-lucide="plus" style="width:14px;height:14px;"></i> 添加原料
+      </button>
+    </div>
+    <!-- 备注 -->
+    <div class="g-form-group">
+      <label class="g-form-label">备注</label>
+      <textarea class="g-textarea" rows="3" placeholder="请输入备注信息（选填）"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeIviDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">确认入库</button>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchIviTab(el) {
+    document.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
+    el.classList.add('active');
+    var tab = el.getAttribute('data-tab');
+    document.getElementById('iviTabIn').style.display = tab === 'in' ? '' : 'none';
+    document.getElementById('iviTabOut').style.display = tab === 'out' ? '' : 'none';
+    document.getElementById('iviTabCheck').style.display = tab === 'check' ? '' : 'none';
+  }
+
+  /* 抽屉开关 */
+  function openIviDrawer() {
+    document.getElementById('iviDrawerMask').classList.add('open');
+    document.getElementById('iviDrawer').classList.add('open');
+  }
+  function closeIviDrawer() {
+    document.getElementById('iviDrawerMask').classList.remove('open');
+    document.getElementById('iviDrawer').classList.remove('open');
+  }
+
+  /* 添加原料行 */
+  function addIviMaterialRow() {
+    var html = '<div class="ivi-material-row">'
+      + '<select><option value="">请选择原料</option><option>五花肉</option><option>牛腩</option><option>鸡胸肉</option><option>排骨</option><option>生菜</option><option>西红柿</option><option>土豆</option><option>鲈鱼</option><option>基围虾</option></select>'
+      + '<input type="number" placeholder="数量">'
+      + '<input type="number" placeholder="单价">'
+      + '<div class="ivi-subtotal">&yen;0</div>'
+      + '<button class="ivi-del-btn" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>'
+      + '</div>';
+    document.getElementById('iviMaterialList').insertAdjacentHTML('beforeend', html);
+    if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+  }
+
+  /* 初始化图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/inv-overview.html b/TakeoutSaaS.Prototypes/pages/inv-overview.html
new file mode 100644
index 0000000..f2e7031
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/inv-overview.html
@@ -0,0 +1,276 @@
+<!-- 库存总览 -->
+<style>
+  .ivo-page { display:flex; flex-direction:column; gap:16px; }
+
+  /* 工具栏 */
+  .ivo-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
+  .ivo-toolbar-right { margin-left:auto; display:flex; gap:8px; }
+  .ivo-search { width:220px; }
+
+  /* 统计卡片 */
+  .ivo-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+  .ivo-stat { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:18px 20px; display:flex; align-items:center; gap:14px; transition:var(--g-transition); cursor:default; }
+  .ivo-stat:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .ivo-stat-icon { width:42px; height:42px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .ivo-stat-icon.blue { background:hsl(212,100%,95%); color:hsl(212,100%,45%); }
+  .ivo-stat-icon.orange { background:#fff7e6; color:var(--g-warning); }
+  .ivo-stat-icon.red { background:#fff1f0; color:var(--g-danger); }
+  .ivo-stat-icon.green { background:#f0fdf4; color:var(--g-success); }
+  .ivo-stat-info { display:flex; flex-direction:column; gap:4px; }
+  .ivo-stat-label { font-size:13px; color:var(--g-text-secondary); }
+  .ivo-stat-value { font-size:24px; font-weight:700; color:var(--g-text); letter-spacing:-0.5px; }
+  .ivo-stat-value.orange { color:var(--g-warning); }
+  .ivo-stat-value.red { color:var(--g-danger); }
+
+  /* 表格容器 */
+  .ivo-table-wrap { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); overflow:hidden; }
+  .ivo-table-inner { overflow-x:auto; }
+
+  /* 行状态背景 */
+  .ivo-row-warn td { background:#fffbe6 !important; }
+  .ivo-row-danger td { background:#fff1f0 !important; }
+
+  /* 分页栏 */
+  .ivo-pager-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--g-border); font-size:13px; color:var(--g-text-secondary); }
+  .ivo-pager-bar .g-select { width:auto; height:28px; font-size:12px; }
+</style>
+
+<div class="ivo-page">
+
+  <!-- 工具栏 -->
+  <div class="ivo-toolbar">
+    <input class="g-input ivo-search" placeholder="搜索原料名称…" />
+    <select class="g-select" style="width:140px;">
+      <option>全部分类</option>
+      <option>肉类</option>
+      <option>蔬菜</option>
+      <option>调料</option>
+      <option>饮品原料</option>
+      <option>包装耗材</option>
+    </select>
+    <select class="g-select" style="width:120px;">
+      <option>全部状态</option>
+      <option>正常</option>
+      <option>低库存</option>
+      <option>缺货</option>
+    </select>
+    <div class="ivo-toolbar-right">
+      <button class="g-btn" id="ivoBtnPurchase" onclick="ivoGenPurchase()">
+        <i data-lucide="clipboard-list" style="width:14px;height:14px;"></i> 一键生成采购单
+      </button>
+      <button class="g-btn g-btn-primary" onclick="openIvoDrawer()">
+        <i data-lucide="plus" style="width:14px;height:14px;"></i> 新增原料
+      </button>
+    </div>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="ivo-stats">
+    <div class="ivo-stat">
+      <div class="ivo-stat-icon blue"><i data-lucide="package" style="width:20px;height:20px;"></i></div>
+      <div class="ivo-stat-info">
+        <span class="ivo-stat-label">原料 SKU 数</span>
+        <span class="ivo-stat-value">42</span>
+      </div>
+    </div>
+    <div class="ivo-stat">
+      <div class="ivo-stat-icon orange"><i data-lucide="alert-triangle" style="width:20px;height:20px;"></i></div>
+      <div class="ivo-stat-info">
+        <span class="ivo-stat-label">低库存预警</span>
+        <span class="ivo-stat-value orange">8</span>
+      </div>
+    </div>
+    <div class="ivo-stat">
+      <div class="ivo-stat-icon red"><i data-lucide="x-circle" style="width:20px;height:20px;"></i></div>
+      <div class="ivo-stat-info">
+        <span class="ivo-stat-label">缺货原料</span>
+        <span class="ivo-stat-value red">2</span>
+      </div>
+    </div>
+    <div class="ivo-stat">
+      <div class="ivo-stat-icon green"><i data-lucide="wallet" style="width:20px;height:20px;"></i></div>
+      <div class="ivo-stat-info">
+        <span class="ivo-stat-label">库存总值</span>
+        <span class="ivo-stat-value">¥28,600</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- 原料列表 -->
+  <div class="ivo-table-wrap">
+    <div class="ivo-table-inner">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>原料名称</th><th>分类</th><th>单位</th><th style="text-align:right;">当前库存</th><th style="text-align:right;">安全库存</th><th style="text-align:right;">单价(元)</th><th style="text-align:right;">库存价值</th><th>状态</th><th style="width:140px;">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style="font-weight:500;">猪肉</td><td>肉类</td><td>kg</td><td style="text-align:right;">45</td><td style="text-align:right;">20</td><td style="text-align:right;">32.00</td><td style="text-align:right;">¥1,440</td><td><span class="g-tag g-tag-green">正常</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr class="ivo-row-warn">
+            <td style="font-weight:500;">鸡胸肉</td><td>肉类</td><td>kg</td><td style="text-align:right;">8</td><td style="text-align:right;">15</td><td style="text-align:right;">28.00</td><td style="text-align:right;">¥224</td><td><span class="g-tag g-tag-orange">低库存</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr class="ivo-row-danger">
+            <td style="font-weight:500;">牛腩</td><td>肉类</td><td>kg</td><td style="text-align:right;">0</td><td style="text-align:right;">10</td><td style="text-align:right;">65.00</td><td style="text-align:right;">¥0</td><td><span class="g-tag g-tag-red">缺货</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">大白菜</td><td>蔬菜</td><td>kg</td><td style="text-align:right;">30</td><td style="text-align:right;">10</td><td style="text-align:right;">4.00</td><td style="text-align:right;">¥120</td><td><span class="g-tag g-tag-green">正常</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">西红柿</td><td>蔬菜</td><td>kg</td><td style="text-align:right;">12</td><td style="text-align:right;">8</td><td style="text-align:right;">6.00</td><td style="text-align:right;">¥72</td><td><span class="g-tag g-tag-green">正常</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr class="ivo-row-warn">
+            <td style="font-weight:500;">生菜</td><td>蔬菜</td><td>kg</td><td style="text-align:right;">3</td><td style="text-align:right;">5</td><td style="text-align:right;">8.00</td><td style="text-align:right;">¥24</td><td><span class="g-tag g-tag-orange">低库存</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">酱油</td><td>调料</td><td>瓶</td><td style="text-align:right;">25</td><td style="text-align:right;">10</td><td style="text-align:right;">12.00</td><td style="text-align:right;">¥300</td><td><span class="g-tag g-tag-green">正常</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr class="ivo-row-warn">
+            <td style="font-weight:500;">食用油</td><td>调料</td><td>桶</td><td style="text-align:right;">4</td><td style="text-align:right;">5</td><td style="text-align:right;">58.00</td><td style="text-align:right;">¥232</td><td><span class="g-tag g-tag-orange">低库存</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr class="ivo-row-warn">
+            <td style="font-weight:500;">咖啡豆</td><td>饮品原料</td><td>kg</td><td style="text-align:right;">2</td><td style="text-align:right;">5</td><td style="text-align:right;">120.00</td><td style="text-align:right;">¥240</td><td><span class="g-tag g-tag-orange">低库存</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr class="ivo-row-warn">
+            <td style="font-weight:500;">牛奶</td><td>饮品原料</td><td>L</td><td style="text-align:right;">15</td><td style="text-align:right;">20</td><td style="text-align:right;">8.00</td><td style="text-align:right;">¥120</td><td><span class="g-tag g-tag-orange">低库存</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">外卖盒</td><td>包装耗材</td><td>个</td><td style="text-align:right;">500</td><td style="text-align:right;">200</td><td style="text-align:right;">0.80</td><td style="text-align:right;">¥400</td><td><span class="g-tag g-tag-green">正常</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+          <tr class="ivo-row-warn">
+            <td style="font-weight:500;">一次性筷子</td><td>包装耗材</td><td>双</td><td style="text-align:right;">80</td><td style="text-align:right;">100</td><td style="text-align:right;">0.30</td><td style="text-align:right;">¥24</td><td><span class="g-tag g-tag-orange">低库存</span></td>
+            <td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!-- 分页 -->
+    <div class="ivo-pager-bar">
+      <span>共 42 条</span>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <select class="g-select" style="width:90px;height:28px;font-size:12px;">
+          <option>20 条/页</option>
+          <option>50 条/页</option>
+          <option>100 条/页</option>
+        </select>
+        <div class="g-pagination" style="margin-top:0;">
+          <button class="g-page-btn" disabled>&lt;</button>
+          <button class="g-page-btn active">1</button>
+          <button class="g-page-btn">2</button>
+          <button class="g-page-btn">3</button>
+          <button class="g-page-btn">&gt;</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 新增原料抽屉 -->
+<div class="g-drawer-mask" id="ivoDrawerMask" onclick="closeIvoDrawer()"></div>
+<div class="g-drawer" id="ivoDrawer" style="width:480px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">新增原料</span>
+    <button class="g-drawer-close" onclick="closeIvoDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">原料名称</label>
+      <input class="g-input" placeholder="请输入原料名称" />
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">分类</label>
+      <select class="g-select">
+        <option value="">请选择分类</option>
+        <option>肉类</option>
+        <option>蔬菜</option>
+        <option>调料</option>
+        <option>饮品原料</option>
+        <option>包装耗材</option>
+      </select>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">单位</label>
+      <select class="g-select">
+        <option value="">请选择单位</option>
+        <option>kg</option>
+        <option>g</option>
+        <option>L</option>
+        <option>ml</option>
+        <option>个</option>
+        <option>瓶</option>
+        <option>桶</option>
+        <option>箱</option>
+        <option>双</option>
+      </select>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">安全库存</label>
+      <input class="g-input" type="number" placeholder="低于此数量将触发预警" />
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">单价</label>
+      <input class="g-input" type="number" placeholder="如：29.90" />
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">供应商</label>
+      <select class="g-select">
+        <option value="">请选择供应商</option>
+        <option>鲜达供应链</option>
+        <option>万家食材</option>
+        <option>优品冷链</option>
+      </select>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">备注</label>
+      <textarea class="g-textarea" rows="3" placeholder="补充说明，如存储要求、保质期等"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeIvoDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeIvoDrawer()">确认添加</button>
+  </div>
+</div>
+
+<script>
+  /* 抽屉开关 */
+  function openIvoDrawer() {
+    document.getElementById('ivoDrawerMask').classList.add('open');
+    document.getElementById('ivoDrawer').classList.add('open');
+  }
+  function closeIvoDrawer() {
+    document.getElementById('ivoDrawerMask').classList.remove('open');
+    document.getElementById('ivoDrawer').classList.remove('open');
+  }
+
+  /* 一键生成采购单 */
+  function ivoGenPurchase() {
+    var btn = document.getElementById('ivoBtnPurchase');
+    var orig = btn.innerHTML;
+    btn.innerHTML = '<i data-lucide="check" style="width:14px;height:14px;"></i> 已生成 3 条采购建议';
+    btn.style.borderColor = 'var(--g-success)';
+    btn.style.color = 'var(--g-success)';
+    if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+    setTimeout(function() {
+      btn.innerHTML = orig;
+      btn.style.borderColor = '';
+      btn.style.color = '';
+      if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+    }, 2000);
+  }
+
+  /* 初始化图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/inv-purchase.html b/TakeoutSaaS.Prototypes/pages/inv-purchase.html
new file mode 100644
index 0000000..b715ed6
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/inv-purchase.html
@@ -0,0 +1,383 @@
+<!-- 采购管理页 -->
+<style>
+  .ivp-page { display:flex; flex-direction:column; gap:16px; font-size:13px; color:var(--g-text); }
+
+  /* 统计卡片 */
+  .ivp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
+  .ivp-stat { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:18px 20px; display:flex; align-items:center; gap:14px; transition:var(--g-transition); }
+  .ivp-stat:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .ivp-stat-icon { width:40px; height:40px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .ivp-stat-icon.blue { background:hsl(212,100%,95%); color:var(--primary); }
+  .ivp-stat-icon.orange { background:#fff7e6; color:var(--g-warning); }
+  .ivp-stat-icon.green { background:#f0fdf4; color:var(--g-success); }
+  .ivp-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:4px; }
+  .ivp-stat-value { font-size:22px; font-weight:700; color:var(--g-text); }
+
+  /* 工具栏 */
+  .ivp-toolbar { display:flex; align-items:center; gap:12px; background:#fff; border-radius:10px; padding:12px 16px; box-shadow:var(--g-shadow-sm); flex-wrap:wrap; }
+  .ivp-toolbar .ivp-right { margin-left:auto; display:flex; gap:8px; }
+
+  /* 表格容器 */
+  .ivp-table-wrap { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden; }
+
+  /* 供应商卡片网格 */
+  .ivp-vendor-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
+  .ivp-vendor-card { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:20px; transition:var(--g-transition); }
+  .ivp-vendor-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .ivp-vendor-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
+  .ivp-vendor-name { font-size:15px; font-weight:600; color:var(--g-text); }
+  .ivp-vendor-info { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; font-size:13px; color:var(--g-text-secondary); margin-bottom:12px; }
+  .ivp-vendor-info span { display:flex; align-items:center; gap:6px; }
+  .ivp-vendor-info i { width:14px; height:14px; color:var(--g-text-muted); }
+  .ivp-vendor-ft { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--g-border); }
+
+  /* 星星评分 */
+  .ivp-stars { display:flex; gap:2px; }
+  .ivp-star { width:16px; height:16px; position:relative; }
+  .ivp-star-bg { color:#e5e7eb; }
+  .ivp-star-fg { color:#facc15; position:absolute; top:0; left:0; overflow:hidden; }
+
+  /* 采购明细行 */
+  .ivp-detail-row { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
+  .ivp-detail-row .g-select, .ivp-detail-row .g-input { flex:1; }
+  .ivp-detail-row .ivp-qty { width:90px; flex:none; }
+  .ivp-detail-row .ivp-price { width:100px; flex:none; }
+  .ivp-del-btn { width:32px; height:32px; border:none; background:none; color:var(--g-text-muted); cursor:pointer; border-radius:var(--g-radius-sm); transition:var(--g-transition); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .ivp-del-btn:hover { color:var(--g-danger); background:#fef2f2; }
+  .ivp-add-row { display:flex; align-items:center; gap:6px; color:var(--primary); font-size:13px; cursor:pointer; padding:6px 0; border:none; background:none; transition:var(--g-transition); }
+  .ivp-add-row:hover { opacity:.8; }
+</style>
+
+<div class="ivp-page">
+  <!-- 分段切换 -->
+  <div class="g-seg" style="width:240px;">
+    <div class="g-seg-item active" onclick="switchIvpTab(this,'orders')">采购单</div>
+    <div class="g-seg-item" onclick="switchIvpTab(this,'vendors')">供应商</div>
+  </div>
+
+  <!-- ========== Tab1: 采购单 ========== -->
+  <div id="ivpTabOrders">
+    <!-- 统计卡片 -->
+    <div class="ivp-stats" style="margin-bottom:16px;">
+      <div class="ivp-stat">
+        <div class="ivp-stat-icon blue"><i data-lucide="wallet" style="width:20px;height:20px;"></i></div>
+        <div><div class="ivp-stat-label">本月采购额</div><div class="ivp-stat-value" style="color:var(--primary);">&#165;18,500</div></div>
+      </div>
+      <div class="ivp-stat">
+        <div class="ivp-stat-icon orange"><i data-lucide="clock" style="width:20px;height:20px;"></i></div>
+        <div><div class="ivp-stat-label">待审核</div><div class="ivp-stat-value" style="color:var(--g-warning);">3<span style="font-size:13px;font-weight:400;color:var(--g-text-muted);margin-left:4px;">单</span></div></div>
+      </div>
+      <div class="ivp-stat">
+        <div class="ivp-stat-icon green"><i data-lucide="truck" style="width:20px;height:20px;"></i></div>
+        <div><div class="ivp-stat-label">待到货</div><div class="ivp-stat-value" style="color:var(--g-success);">2<span style="font-size:13px;font-weight:400;color:var(--g-text-muted);margin-left:4px;">单</span></div></div>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="ivp-toolbar" style="margin-bottom:16px;">
+      <input class="g-input" type="date" value="2026-02-01" style="width:140px;">
+      <span style="color:var(--g-text-muted);">至</span>
+      <input class="g-input" type="date" value="2026-02-12" style="width:140px;">
+      <select class="g-select" style="width:130px;">
+        <option>全部状态</option>
+        <option>待审核</option>
+        <option>已下单</option>
+        <option>已到货</option>
+        <option>已取消</option>
+      </select>
+      <div class="ivp-right">
+        <button class="g-btn g-btn-primary" onclick="openIvpDrawer()"><i data-lucide="plus" style="width:15px;height:15px;"></i> 新建采购单</button>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="ivp-table-wrap">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>采购单号</th>
+            <th>创建日期</th>
+            <th>供应商</th>
+            <th>采购项数</th>
+            <th>总金额</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style="font-weight:500;">PO20260201001</td>
+            <td>2026-02-01</td>
+            <td>鑫源肉业</td>
+            <td>5</td>
+            <td style="font-weight:600;">&#165;4,200.00</td>
+            <td><span class="g-tag g-tag-orange">待审核</span></td>
+            <td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">PO20260203002</td>
+            <td>2026-02-03</td>
+            <td>绿田蔬菜批发</td>
+            <td>8</td>
+            <td style="font-weight:600;">&#165;1,860.00</td>
+            <td><span class="g-tag g-tag-blue">已下单</span></td>
+            <td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">PO20260205003</td>
+            <td>2026-02-05</td>
+            <td>味达调料商行</td>
+            <td>3</td>
+            <td style="font-weight:600;">&#165;920.00</td>
+            <td><span class="g-tag g-tag-green">已到货</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">PO20260206004</td>
+            <td>2026-02-06</td>
+            <td>鑫源肉业</td>
+            <td>4</td>
+            <td style="font-weight:600;">&#165;5,300.00</td>
+            <td><span class="g-tag g-tag-orange">待审核</span></td>
+            <td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">PO20260208005</td>
+            <td>2026-02-08</td>
+            <td>优品包装</td>
+            <td>6</td>
+            <td style="font-weight:600;">&#165;3,480.00</td>
+            <td><span class="g-tag g-tag-blue">已下单</span></td>
+            <td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
+          </tr>
+          <tr>
+            <td style="font-weight:500;">PO20260210006</td>
+            <td>2026-02-10</td>
+            <td>绿田蔬菜批发</td>
+            <td>2</td>
+            <td style="font-weight:600;">&#165;640.00</td>
+            <td><span class="g-tag g-tag-gray">已取消</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- ========== Tab2: 供应商 ========== -->
+  <div id="ivpTabVendors" style="display:none;">
+    <!-- 工具栏 -->
+    <div class="ivp-toolbar" style="margin-bottom:16px;">
+      <div style="position:relative;">
+        <i data-lucide="search" style="width:15px;height:15px;position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--g-text-muted);"></i>
+        <input class="g-input" placeholder="搜索供应商名称" style="width:200px;padding-left:32px;">
+      </div>
+      <select class="g-select" style="width:130px;">
+        <option>全部分类</option>
+        <option>肉类</option>
+        <option>蔬菜</option>
+        <option>调料</option>
+        <option>饮品</option>
+        <option>包装</option>
+      </select>
+      <div class="ivp-right">
+        <button class="g-btn g-btn-primary"><i data-lucide="plus" style="width:15px;height:15px;"></i> 新增供应商</button>
+      </div>
+    </div>
+
+    <!-- 供应商卡片 -->
+    <div class="ivp-vendor-grid">
+      <!-- 鑫源肉业 -->
+      <div class="ivp-vendor-card">
+        <div class="ivp-vendor-hd">
+          <div class="ivp-vendor-name">鑫源肉业</div>
+          <span class="g-tag g-tag-red">肉类</span>
+        </div>
+        <div class="ivp-vendor-info">
+          <span><i data-lucide="user"></i> 张经理</span>
+          <span><i data-lucide="phone"></i> 138-0001-2345</span>
+          <span><i data-lucide="calendar"></i> 合作 2 年</span>
+          <span><i data-lucide="wallet"></i> 累计 &#165;86,000</span>
+        </div>
+        <div class="ivp-vendor-ft">
+          <div class="ivp-stars" data-score="4.5"></div>
+          <div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
+        </div>
+      </div>
+      <!-- 绿田蔬菜批发 -->
+      <div class="ivp-vendor-card">
+        <div class="ivp-vendor-hd">
+          <div class="ivp-vendor-name">绿田蔬菜批发</div>
+          <span class="g-tag g-tag-green">蔬菜</span>
+        </div>
+        <div class="ivp-vendor-info">
+          <span><i data-lucide="user"></i> 李老板</span>
+          <span><i data-lucide="phone"></i> 139-8877-6543</span>
+          <span><i data-lucide="calendar"></i> 合作 3 年</span>
+          <span><i data-lucide="wallet"></i> 累计 &#165;124,500</span>
+        </div>
+        <div class="ivp-vendor-ft">
+          <div class="ivp-stars" data-score="4.8"></div>
+          <div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
+        </div>
+      </div>
+      <!-- 味达调料商行 -->
+      <div class="ivp-vendor-card">
+        <div class="ivp-vendor-hd">
+          <div class="ivp-vendor-name">味达调料商行</div>
+          <span class="g-tag g-tag-orange">调料</span>
+        </div>
+        <div class="ivp-vendor-info">
+          <span><i data-lucide="user"></i> 王师傅</span>
+          <span><i data-lucide="phone"></i> 136-5544-3210</span>
+          <span><i data-lucide="calendar"></i> 合作 1 年</span>
+          <span><i data-lucide="wallet"></i> 累计 &#165;32,800</span>
+        </div>
+        <div class="ivp-vendor-ft">
+          <div class="ivp-stars" data-score="4.2"></div>
+          <div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
+        </div>
+      </div>
+      <!-- 优品包装 -->
+      <div class="ivp-vendor-card">
+        <div class="ivp-vendor-hd">
+          <div class="ivp-vendor-name">优品包装</div>
+          <span class="g-tag g-tag-gray">包装耗材</span>
+        </div>
+        <div class="ivp-vendor-info">
+          <span><i data-lucide="user"></i> 陈总</span>
+          <span><i data-lucide="phone"></i> 137-2233-4455</span>
+          <span><i data-lucide="calendar"></i> 合作 1.5 年</span>
+          <span><i data-lucide="wallet"></i> 累计 &#165;18,200</span>
+        </div>
+        <div class="ivp-vendor-ft">
+          <div class="ivp-stars" data-score="4.0"></div>
+          <div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ========== 新建采购单抽屉 ========== -->
+<div class="g-drawer-mask" id="ivpDrawerMask" onclick="closeIvpDrawer()"></div>
+<div class="g-drawer" id="ivpDrawer" style="width:520px;">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title">新建采购单</div>
+    <button class="g-drawer-close" onclick="closeIvpDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">供应商</label>
+      <select class="g-select">
+        <option value="">请选择供应商</option>
+        <option>鑫源肉业</option>
+        <option>绿田蔬菜批发</option>
+        <option>味达调料商行</option>
+        <option>优品包装</option>
+      </select>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">预计到货日期</label>
+      <input class="g-input" type="date" value="2026-02-15">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">采购明细</label>
+      <div id="ivpDetailList">
+        <div class="ivp-detail-row">
+          <select class="g-select"><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>牛奶</option><option>咖啡豆</option><option>生菜</option><option>番茄</option></select>
+          <input class="g-input ivp-qty" type="number" value="20" placeholder="数量">
+          <span style="color:var(--g-text-muted);flex-shrink:0;">kg</span>
+          <input class="g-input ivp-price" type="number" value="35.00" placeholder="单价">
+          <button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
+        </div>
+        <div class="ivp-detail-row">
+          <select class="g-select"><option>牛奶</option><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>咖啡豆</option><option>生菜</option><option>番茄</option></select>
+          <input class="g-input ivp-qty" type="number" value="30" placeholder="数量">
+          <span style="color:var(--g-text-muted);flex-shrink:0;">L</span>
+          <input class="g-input ivp-price" type="number" value="8.50" placeholder="单价">
+          <button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
+        </div>
+        <div class="ivp-detail-row">
+          <select class="g-select"><option>咖啡豆</option><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>牛奶</option><option>生菜</option><option>番茄</option></select>
+          <input class="g-input ivp-qty" type="number" value="5" placeholder="数量">
+          <span style="color:var(--g-text-muted);flex-shrink:0;">kg</span>
+          <input class="g-input ivp-price" type="number" value="120.00" placeholder="单价">
+          <button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
+        </div>
+      </div>
+      <button class="ivp-add-row" onclick="addIvpRow()"><i data-lucide="plus-circle" style="width:15px;height:15px;"></i> 添加原料</button>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">备注</label>
+      <textarea class="g-textarea" rows="3" placeholder="请输入备注信息，如特殊包装要求、配送时间等"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeIvpDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeIvpDrawer()">提交采购单</button>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchIvpTab(el, tab) {
+    el.parentElement.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
+    el.classList.add('active');
+    document.getElementById('ivpTabOrders').style.display = tab === 'orders' ? '' : 'none';
+    document.getElementById('ivpTabVendors').style.display = tab === 'vendors' ? '' : 'none';
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+
+  /* 抽屉 */
+  function openIvpDrawer() {
+    document.getElementById('ivpDrawerMask').classList.add('open');
+    document.getElementById('ivpDrawer').classList.add('open');
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+  function closeIvpDrawer() {
+    document.getElementById('ivpDrawerMask').classList.remove('open');
+    document.getElementById('ivpDrawer').classList.remove('open');
+  }
+
+  /* 采购明细行 */
+  function addIvpRow() {
+    var list = document.getElementById('ivpDetailList');
+    var row = document.createElement('div');
+    row.className = 'ivp-detail-row';
+    row.innerHTML = '<select class="g-select"><option value="">请选择原料</option><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>牛奶</option><option>咖啡豆</option><option>生菜</option><option>番茄</option></select>'
+      + '<input class="g-input ivp-qty" type="number" placeholder="数量">'
+      + '<span style="color:var(--g-text-muted);flex-shrink:0;">kg</span>'
+      + '<input class="g-input ivp-price" type="number" placeholder="单价">'
+      + '<button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>';
+    list.appendChild(row);
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+  function removeIvpRow(btn) {
+    var row = btn.closest('.ivp-detail-row');
+    if (document.querySelectorAll('.ivp-detail-row').length > 1) {
+      row.remove();
+    }
+  }
+
+  /* 星星评分渲染 */
+  function renderIvpStars() {
+    document.querySelectorAll('.ivp-stars[data-score]').forEach(function(wrap) {
+      var score = parseFloat(wrap.getAttribute('data-score'));
+      var html = '';
+      for (var i = 1; i <= 5; i++) {
+        var pct = Math.min(100, Math.max(0, (score - i + 1) * 100));
+        html += '<div class="ivp-star">'
+          + '<i data-lucide="star" class="ivp-star-bg" style="width:16px;height:16px;fill:#e5e7eb;stroke:none;"></i>'
+          + '<div class="ivp-star-fg" style="width:' + pct + '%;">'
+          + '<i data-lucide="star" style="width:16px;height:16px;fill:#facc15;stroke:none;"></i>'
+          + '</div></div>';
+      }
+      html += '<span style="font-size:12px;color:var(--g-text-secondary);margin-left:6px;">' + score.toFixed(1) + '</span>';
+      wrap.innerHTML = html;
+    });
+  }
+
+  renderIvpStars();
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/inv-soldout.html b/TakeoutSaaS.Prototypes/pages/inv-soldout.html
new file mode 100644
index 0000000..0851498
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/inv-soldout.html
@@ -0,0 +1,250 @@
+<!-- 估清管理页 -->
+<style>
+  .ivs-page { max-width:1000px; display:flex; flex-direction:column; gap:16px; font-size:13px; color:var(--g-text); }
+
+  /* 顶部自动估清卡片 */
+  .ivs-auto-card { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
+  .ivs-auto-left { flex:1; min-width:200px; }
+  .ivs-auto-title { font-size:15px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
+  .ivs-auto-desc { font-size:12px; color:var(--g-text-secondary); }
+  .ivs-auto-hint { font-size:12px; color:var(--g-text-muted); margin-top:12px; width:100%; padding-top:10px; border-top:1px solid var(--g-border); display:flex; align-items:center; gap:4px; }
+
+  /* 统计卡片 */
+  .ivs-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
+  .ivs-stat-card { background:#fff; border-radius:var(--g-radius); padding:18px 20px; box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); transition:var(--g-transition); }
+  .ivs-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .ivs-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
+  .ivs-stat-label i { width:14px; height:14px; }
+  .ivs-stat-value { font-size:28px; font-weight:700; color:var(--g-text); }
+  .ivs-stat-value span { font-size:13px; font-weight:400; color:var(--g-text-secondary); margin-left:2px; }
+  .ivs-stat-sub { font-size:11px; color:var(--g-text-muted); margin-top:4px; }
+  .ivs-stat-card.danger .ivs-stat-value { color:var(--g-danger); }
+  .ivs-stat-card.warning .ivs-stat-value { color:var(--g-warning); }
+
+  /* Section 标题 */
+  .ivs-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* 表格微调 */
+  .ivs-page .g-table { font-size:13px; }
+  .ivs-page .g-table th { background:#f8f9fb; }
+  .ivs-page .g-table td { vertical-align:middle; }
+  .ivs-dishes { display:flex; flex-wrap:wrap; gap:4px; }
+  .ivs-dish-tag { background:color-mix(in srgb, var(--primary) 8%, #fff); color:var(--primary); font-size:11px; padding:2px 8px; border-radius:10px; white-space:nowrap; }
+  .ivs-more-tag { background:#f3f4f6; color:var(--g-text-muted); font-size:11px; padding:2px 8px; border-radius:10px; cursor:pointer; }
+
+  /* 手动估清操作区 */
+  .ivs-manual-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
+  .ivs-manual-bar select { height:36px; padding:0 12px; border:1px solid #e5e7eb; border-radius:var(--g-radius-sm); font-size:13px; outline:none; min-width:240px; transition:var(--g-transition); }
+  .ivs-manual-bar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  .ivs-section-desc { font-size:12px; color:var(--g-text-muted); margin-bottom:14px; display:flex; align-items:center; gap:4px; }
+  .ivs-section-desc i { width:14px; height:14px; }
+</style>
+
+<div class="ivs-page">
+
+  <!-- 顶部：自动估清开关 -->
+  <div class="g-card" style="padding:18px 20px;">
+    <div class="ivs-auto-card">
+      <div class="ivs-auto-left">
+        <div class="ivs-auto-title">自动估清</div>
+        <div class="ivs-auto-desc">当原料库存为 0 时，自动将关联菜品标记为售罄</div>
+      </div>
+      <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+    </div>
+    <div class="ivs-auto-hint"><i data-lucide="link" style="width:13px;height:13px;"></i>已关联 28 个原料 &rarr; 56 道菜品</div>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="ivs-stats">
+    <div class="ivs-stat-card danger">
+      <div class="ivs-stat-label"><i data-lucide="ban"></i>当前售罄菜品</div>
+      <div class="ivs-stat-value">3<span>道</span></div>
+      <div class="ivs-stat-sub">其中自动估清 2 道</div>
+    </div>
+    <div class="ivs-stat-card warning">
+      <div class="ivs-stat-label"><i data-lucide="alert-triangle"></i>低库存预警菜品</div>
+      <div class="ivs-stat-value">5<span>道</span></div>
+      <div class="ivs-stat-sub">原料即将耗尽</div>
+    </div>
+    <div class="ivs-stat-card">
+      <div class="ivs-stat-label"><i data-lucide="hand"></i>今日手动估清</div>
+      <div class="ivs-stat-value">1<span>道</span></div>
+      <div class="ivs-stat-sub">操作人：张经理</div>
+    </div>
+  </div>
+
+  <!-- Section 1: 当前已估清菜品 -->
+  <div class="g-card" style="padding:18px 20px;">
+    <div class="ivs-section-hd">当前已估清菜品</div>
+    <table class="g-table">
+      <thead><tr><th>菜品名称</th><th>估清原因</th><th>关联原料</th><th>原料库存</th><th>估清时间</th><th style="width:80px;">操作</th></tr></thead>
+      <tbody>
+        <tr>
+          <td style="font-weight:500;">红烧牛腩</td>
+          <td><span class="g-tag g-tag-orange">自动</span></td>
+          <td>牛腩</td>
+          <td><span style="color:var(--g-danger);font-weight:600;">0 kg</span></td>
+          <td>2026-02-12 09:15</td>
+          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">鸡胸肉沙拉</td>
+          <td><span class="g-tag g-tag-orange">自动</span></td>
+          <td>鸡胸肉</td>
+          <td><span style="color:var(--g-warning);font-weight:600;">0.3 kg</span></td>
+          <td>2026-02-12 10:30</td>
+          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">芒果冰沙</td>
+          <td><span class="g-tag g-tag-blue">手动</span></td>
+          <td>—</td>
+          <td>—</td>
+          <td>2026-02-12 11:00</td>
+          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">牛肉汉堡</td>
+          <td><span class="g-tag g-tag-orange">自动</span></td>
+          <td>牛腩</td>
+          <td><span style="color:var(--g-danger);font-weight:600;">0 kg</span></td>
+          <td>2026-02-12 09:15</td>
+          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Section 2: 原料→菜品关联映射 -->
+  <div class="g-card" style="padding:18px 20px;">
+    <div class="ivs-section-hd">原料 &rarr; 菜品关联映射</div>
+    <div class="ivs-section-desc"><i data-lucide="info"></i>设置原料与菜品的关联关系，当原料库存归零时自动估清关联菜品</div>
+    <table class="g-table">
+      <thead><tr><th>原料名称</th><th>当前库存</th><th>安全库存</th><th>关联菜品数</th><th>关联菜品</th><th style="width:80px;">自动估清</th></tr></thead>
+      <tbody>
+        <tr>
+          <td style="font-weight:500;">牛腩</td>
+          <td><span style="color:var(--g-danger);font-weight:600;">0 kg</span></td>
+          <td>5 kg</td>
+          <td>3</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">红烧牛腩</span><span class="ivs-dish-tag">牛肉汉堡</span><span class="ivs-more-tag">+1</span></div></td>
+          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">鸡胸肉</td>
+          <td><span style="color:var(--g-warning);font-weight:600;">0.3 kg</span></td>
+          <td>3 kg</td>
+          <td>2</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">鸡胸肉沙拉</span><span class="ivs-dish-tag">照烧鸡排饭</span></div></td>
+          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">三文鱼</td>
+          <td>2.5 kg</td>
+          <td>2 kg</td>
+          <td>2</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">三文鱼刺身</span><span class="ivs-dish-tag">三文鱼寿司</span></div></td>
+          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">芒果</td>
+          <td>8 个</td>
+          <td>5 个</td>
+          <td>3</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">芒果冰沙</span><span class="ivs-dish-tag">杨枝甘露</span><span class="ivs-more-tag">+1</span></div></td>
+          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">虾仁</td>
+          <td>1.2 kg</td>
+          <td>2 kg</td>
+          <td>4</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">虾仁炒饭</span><span class="ivs-dish-tag">鲜虾云吞</span><span class="ivs-more-tag">+2</span></div></td>
+          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">豆腐</td>
+          <td>15 块</td>
+          <td>10 块</td>
+          <td>2</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">麻婆豆腐</span><span class="ivs-dish-tag">皮蛋豆腐</span></div></td>
+          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">培根</td>
+          <td>3 kg</td>
+          <td>2 kg</td>
+          <td>3</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">培根披萨</span><span class="ivs-dish-tag">培根意面</span><span class="ivs-more-tag">+1</span></div></td>
+          <td><div class="g-toggle" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">鳗鱼</td>
+          <td>1 kg</td>
+          <td>1.5 kg</td>
+          <td>1</td>
+          <td><div class="ivs-dishes"><span class="ivs-dish-tag">鳗鱼饭</span></div></td>
+          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Section 3: 手动估清 -->
+  <div class="g-card" style="padding:18px 20px;">
+    <div class="ivs-section-hd">手动估清</div>
+    <div class="ivs-manual-bar" style="margin-bottom:16px;">
+      <select>
+        <option value="">请选择要估清的菜品...</option>
+        <option>宫保鸡丁</option>
+        <option>鱼香肉丝</option>
+        <option>水煮牛肉</option>
+        <option>糖醋排骨</option>
+        <option>蒜蓉西兰花</option>
+        <option>番茄鸡蛋汤</option>
+      </select>
+      <button class="g-btn g-btn-primary g-btn-sm" onclick="handleManualSoldout()"><i data-lucide="x-circle" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>标记售罄</button>
+    </div>
+
+    <div style="font-size:12px;color:var(--g-text-muted);margin-bottom:10px;">今日手动估清记录</div>
+    <table class="g-table">
+      <thead><tr><th>菜品</th><th>操作人</th><th>时间</th><th style="width:80px;">操作</th></tr></thead>
+      <tbody id="manualRecords">
+        <tr>
+          <td style="font-weight:500;">芒果冰沙</td>
+          <td>张经理</td>
+          <td>2026-02-12 11:00</td>
+          <td><span class="g-action" onclick="alert('已恢复上架')">恢复</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</div>
+
+<script>
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+
+function handleManualSoldout() {
+  var sel = document.querySelector('.ivs-manual-bar select');
+  var name = sel.value;
+  if (!name) { alert('请先选择菜品'); return; }
+  var tbody = document.getElementById('manualRecords');
+  var now = new Date();
+  var ts = now.getFullYear() + '-' +
+    String(now.getMonth()+1).padStart(2,'0') + '-' +
+    String(now.getDate()).padStart(2,'0') + ' ' +
+    String(now.getHours()).padStart(2,'0') + ':' +
+    String(now.getMinutes()).padStart(2,'0');
+  var tr = document.createElement('tr');
+  tr.innerHTML = '<td style="font-weight:500;">' + name + '</td><td>当前用户</td><td>' + ts + '</td><td><span class="g-action" onclick="alert(\'已恢复上架\')">恢复</span></td>';
+  tbody.insertBefore(tr, tbody.firstChild);
+  sel.value = '';
+  alert('已将「' + name + '」标记为售罄');
+}
+
+if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mbr-customers.html b/TakeoutSaaS.Prototypes/pages/mbr-customers.html
new file mode 100644
index 0000000..c3f0338
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mbr-customers.html
@@ -0,0 +1,447 @@
+<!-- 客户画像 — mbr-customers.html -->
+<style>
+  /* ---- page-private: cu- prefix ---- */
+  .cu-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 14px 20px;
+    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
+  }
+  .cu-toolbar .g-select,
+  .cu-toolbar .g-input { height: 32px; font-size: 13px; }
+  .cu-search-wrap {
+    position: relative; width: 220px;
+  }
+  .cu-search-wrap .g-input { padding-left: 30px; width: 100%; }
+  .cu-search-wrap i {
+    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+    color: var(--g-text-muted); pointer-events: none;
+  }
+  .cu-toolbar-right { margin-left: auto; display: flex; gap: 8px; }
+
+  /* stats */
+  .cu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
+  .cu-stat-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 18px 20px; box-shadow: var(--g-shadow-sm);
+    transition: box-shadow var(--g-transition);
+  }
+  .cu-stat-card:hover { box-shadow: var(--g-shadow-md); }
+  .cu-stat-title { font-size: 13px; color: var(--g-text-secondary); margin-bottom: 8px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
+  .cu-stat-title i { width: 16px; height: 16px; }
+  .cu-stat-value { font-size: 28px; font-weight: 700; color: var(--g-text); line-height: 1.2; }
+  .cu-stat-value.green { color: var(--g-success); }
+  .cu-stat-value.orange { color: var(--g-warning); }
+  .cu-stat-value.red { color: var(--g-danger); }
+  .cu-stat-hint { font-size: 11px; color: var(--g-text-muted); margin-top: 6px; }
+
+  /* tag distribution */
+  .cu-tag-dist {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 16px 20px; margin-top: 14px; box-shadow: var(--g-shadow-sm);
+    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  }
+  .cu-tag-dist-label {
+    font-size: 13px; font-weight: 600; color: var(--g-text); margin-right: 4px; white-space: nowrap;
+  }
+  .cu-tag-pill {
+    display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px;
+    border-radius: 16px; font-size: 12px; cursor: pointer; user-select: none;
+    transition: all var(--g-transition); border: 1px solid #e8e8e8; background: #fff;
+  }
+  .cu-tag-pill:hover { border-color: var(--primary); }
+  .cu-tag-pill.active { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: var(--primary); color: var(--primary); font-weight: 500; }
+  .cu-tag-pill .cu-tag-count {
+    background: #f0f0f0; color: var(--g-text-secondary); font-size: 11px;
+    padding: 1px 6px; border-radius: 8px; font-weight: 600;
+  }
+  .cu-tag-pill.active .cu-tag-count { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
+
+  /* table card */
+  .cu-table-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    margin-top: 14px; box-shadow: var(--g-shadow-sm); overflow: hidden;
+  }
+  .cu-table-card .g-table td { white-space: nowrap; }
+  .cu-tags-cell { display: flex; gap: 4px; flex-wrap: wrap; }
+  .cu-mini-tag {
+    display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 500;
+  }
+  .cu-mini-tag.green { background: #f6ffed; color: #52c41a; }
+  .cu-mini-tag.blue { background: #e6f7ff; color: #1890ff; }
+  .cu-mini-tag.orange { background: #fff7e6; color: #fa8c16; }
+  .cu-mini-tag.red { background: #fff1f0; color: #f5222d; }
+  .cu-mini-tag.purple { background: #f9f0ff; color: #722ed1; }
+  .cu-mini-tag.gold { background: #fffbe6; color: #d48806; }
+  .cu-row-dimmed td { opacity: 0.55; }
+  .cu-row-dimmed:hover td { opacity: 0.75; }
+
+  /* drawer profile */
+  .cu-profile-hd {
+    display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
+    padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;
+  }
+  .cu-avatar {
+    width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 12%, #fff);
+    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    color: var(--primary);
+  }
+  .cu-profile-name { font-size: 18px; font-weight: 700; color: var(--g-text); }
+  .cu-profile-phone { font-size: 13px; color: var(--g-text-muted); margin-top: 2px; }
+  .cu-profile-meta { display: flex; gap: 8px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
+
+  .cu-section-hd {
+    font-size: 15px; font-weight: 600; color: var(--g-text);
+    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
+  }
+  .cu-overview-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
+  }
+  .cu-ov-item {
+    background: var(--g-bg-subtle); border-radius: var(--g-radius-sm); padding: 12px 14px;
+  }
+  .cu-ov-label { font-size: 12px; color: var(--g-text-muted); margin-bottom: 4px; }
+  .cu-ov-val { font-size: 16px; font-weight: 700; color: var(--g-text); }
+  .cu-ov-val.primary { color: var(--primary); }
+
+  .cu-pref-section { margin-bottom: 20px; }
+  .cu-pref-row { margin-bottom: 10px; }
+  .cu-pref-label { font-size: 12px; color: var(--g-text-muted); margin-bottom: 6px; }
+  .cu-pref-pills { display: flex; gap: 6px; flex-wrap: wrap; }
+  .cu-pref-pill {
+    display: inline-block; padding: 4px 12px; border-radius: 14px;
+    font-size: 12px; background: #f5f5f5; color: var(--g-text-secondary);
+  }
+
+  .cu-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
+  .cu-mini-table th {
+    text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 500;
+    color: var(--g-text-muted); background: var(--g-bg-subtle); border-bottom: 1px solid var(--g-border);
+  }
+  .cu-mini-table td {
+    padding: 8px 10px; border-bottom: 1px solid #f5f5f5; color: var(--g-text);
+  }
+</style>
+
+<div>
+  <!-- Toolbar -->
+  <div class="cu-toolbar">
+    <select class="g-select" style="width:180px;">
+      <option>全部门店</option>
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+    </select>
+    <select class="g-select" style="width:150px;" id="cuTagFilter" onchange="cuFilterTable()">
+      <option value="">全部标签</option>
+      <option value="高频客户">高频客户</option>
+      <option value="新客">新客</option>
+      <option value="沉睡客户">沉睡客户</option>
+      <option value="流失客户">流失客户</option>
+      <option value="午餐常客">午餐常客</option>
+      <option value="大额消费">大额消费</option>
+    </select>
+    <div class="cu-search-wrap">
+      <i data-lucide="search" style="width:14px;height:14px;"></i>
+      <input class="g-input" placeholder="搜索姓名/手机号" id="cuSearchInput" oninput="cuFilterTable()">
+    </div>
+    <div class="cu-toolbar-right">
+      <button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;"></i> 导出</button>
+    </div>
+  </div>
+
+  <!-- Stats -->
+  <div class="cu-stats">
+    <div class="cu-stat-card">
+      <div class="cu-stat-title"><i data-lucide="users" style="color:var(--primary)"></i> 总客户</div>
+      <div class="cu-stat-value">2,156</div>
+      <div class="cu-stat-hint">累计注册客户数</div>
+    </div>
+    <div class="cu-stat-card">
+      <div class="cu-stat-title"><i data-lucide="flame" style="color:var(--g-success)"></i> 高频客户</div>
+      <div class="cu-stat-value green">328</div>
+      <div class="cu-stat-hint">月消费 ≥ 4次</div>
+    </div>
+    <div class="cu-stat-card">
+      <div class="cu-stat-title"><i data-lucide="moon" style="color:var(--g-warning)"></i> 沉睡客户</div>
+      <div class="cu-stat-value orange">456</div>
+      <div class="cu-stat-hint">30天未消费</div>
+    </div>
+    <div class="cu-stat-card">
+      <div class="cu-stat-title"><i data-lucide="user-x" style="color:var(--g-danger)"></i> 流失客户</div>
+      <div class="cu-stat-value red">189</div>
+      <div class="cu-stat-hint">60天未消费</div>
+    </div>
+  </div>
+
+  <!-- Tag Distribution -->
+  <div class="cu-tag-dist">
+    <span class="cu-tag-dist-label">标签分布</span>
+    <span class="cu-tag-pill" onclick="cuToggleTagPill(this, '高频客户')">高频客户 <span class="cu-tag-count">328</span></span>
+    <span class="cu-tag-pill" onclick="cuToggleTagPill(this, '新客')">新客 <span class="cu-tag-count">86</span></span>
+    <span class="cu-tag-pill" onclick="cuToggleTagPill(this, '午餐常客')">午餐常客 <span class="cu-tag-count">215</span></span>
+    <span class="cu-tag-pill" onclick="cuToggleTagPill(this, '大额消费')">大额消费 <span class="cu-tag-count">142</span></span>
+    <span class="cu-tag-pill" onclick="cuToggleTagPill(this, '沉睡客户')">沉睡客户 <span class="cu-tag-count">456</span></span>
+    <span class="cu-tag-pill" onclick="cuToggleTagPill(this, '流失客户')">流失客户 <span class="cu-tag-count">189</span></span>
+  </div>
+
+  <!-- Customer Table -->
+  <div class="cu-table-card">
+    <table class="g-table" id="cuTable">
+      <thead>
+        <tr>
+          <th>客户</th>
+          <th>手机号</th>
+          <th>标签</th>
+          <th>累计消费</th>
+          <th>消费次数</th>
+          <th>平均客单价</th>
+          <th>最近消费</th>
+          <th>注册时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody id="cuTableBody"></tbody>
+    </table>
+
+    <!-- Pagination -->
+    <div class="g-pagination" style="padding: 12px 16px;">
+      <span style="margin-right:auto;font-size:12px;color:var(--g-text-muted);">共 2,156 条</span>
+      <button class="g-page-btn" disabled>&lt;</button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn">2</button>
+      <button class="g-page-btn">3</button>
+      <button class="g-page-btn">...</button>
+      <button class="g-page-btn">108</button>
+      <button class="g-page-btn">&gt;</button>
+    </div>
+  </div>
+</div>
+
+<!-- Customer Profile Drawer -->
+<div class="g-drawer-mask" id="cuDrawerMask" onclick="closeCuDrawer()"></div>
+<div class="g-drawer" id="cuDrawer" style="width:600px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="cuDrawerTitle">客户画像 - 张**</span>
+    <button class="g-drawer-close" onclick="closeCuDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 基本信息 -->
+    <div class="cu-profile-hd">
+      <div class="cu-avatar"><i data-lucide="user" style="width:28px;height:28px;"></i></div>
+      <div>
+        <div class="cu-profile-name" id="cuProfileName">张**</div>
+        <div class="cu-profile-phone" id="cuProfilePhone">138****6789</div>
+        <div class="cu-profile-meta" id="cuProfileMeta">
+          <span class="g-tag g-tag-blue">黄金会员</span>
+          <span style="font-size:12px;color:var(--g-text-muted);">注册于 2024-03-15</span>
+        </div>
+        <div class="cu-profile-meta" id="cuProfileTags" style="margin-top:4px;">
+          <span class="cu-mini-tag green">高频客户</span>
+          <span class="cu-mini-tag purple">午餐常客</span>
+          <span class="cu-mini-tag gold">大额消费</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 消费概览 -->
+    <div class="cu-section-hd">消费概览</div>
+    <div class="cu-overview-grid">
+      <div class="cu-ov-item">
+        <div class="cu-ov-label">累计消费</div>
+        <div class="cu-ov-val primary">&yen;3,680</div>
+      </div>
+      <div class="cu-ov-item">
+        <div class="cu-ov-label">消费次数</div>
+        <div class="cu-ov-val">42次</div>
+      </div>
+      <div class="cu-ov-item">
+        <div class="cu-ov-label">平均客单价</div>
+        <div class="cu-ov-val">&yen;87.6</div>
+      </div>
+      <div class="cu-ov-item">
+        <div class="cu-ov-label">最近消费</div>
+        <div class="cu-ov-val">2025-02-10</div>
+      </div>
+      <div class="cu-ov-item">
+        <div class="cu-ov-label">常用渠道</div>
+        <div class="cu-ov-val" style="font-size:13px;">外卖(68%) 自提(32%)</div>
+      </div>
+      <div class="cu-ov-item">
+        <div class="cu-ov-label">储值余额</div>
+        <div class="cu-ov-val primary">&yen;260</div>
+      </div>
+    </div>
+
+    <!-- 消费偏好 -->
+    <div class="cu-section-hd">消费偏好</div>
+    <div class="cu-pref-section">
+      <div class="cu-pref-row">
+        <div class="cu-pref-label">常点商品</div>
+        <div class="cu-pref-pills">
+          <span class="cu-pref-pill">宫保鸡丁 (12次)</span>
+          <span class="cu-pref-pill">鱼香肉丝 (8次)</span>
+          <span class="cu-pref-pill">米饭 (42次)</span>
+        </div>
+      </div>
+      <div class="cu-pref-row">
+        <div class="cu-pref-label">口味偏好</div>
+        <div class="cu-pref-pills">
+          <span class="cu-pref-pill">偏辣</span>
+          <span class="cu-pref-pill">少盐</span>
+        </div>
+      </div>
+      <div class="cu-pref-row">
+        <div class="cu-pref-label">下单时段</div>
+        <div class="cu-pref-pills">
+          <span class="cu-pref-pill">午餐 (78%)</span>
+          <span class="cu-pref-pill">晚餐 (22%)</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 最近订单 -->
+    <div class="cu-section-hd">最近订单</div>
+    <table class="cu-mini-table">
+      <thead>
+        <tr>
+          <th>日期</th>
+          <th>商品摘要</th>
+          <th>金额</th>
+          <th>渠道</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>2025-02-10</td>
+          <td>宫保鸡丁+米饭+可乐</td>
+          <td>&yen;52.00</td>
+          <td><span class="g-tag g-tag-blue">外卖</span></td>
+        </tr>
+        <tr>
+          <td>2025-02-07</td>
+          <td>鱼香肉丝盖饭+蛋花汤</td>
+          <td>&yen;38.00</td>
+          <td><span class="g-tag g-tag-green">自提</span></td>
+        </tr>
+        <tr>
+          <td>2025-02-03</td>
+          <td>招牌红烧肉饭+凉菜拼盘</td>
+          <td>&yen;65.00</td>
+          <td><span class="g-tag g-tag-blue">外卖</span></td>
+        </tr>
+        <tr>
+          <td>2025-01-28</td>
+          <td>番茄牛腩面+珍珠奶茶</td>
+          <td>&yen;42.00</td>
+          <td><span class="g-tag g-tag-blue">外卖</span></td>
+        </tr>
+        <tr>
+          <td>2025-01-22</td>
+          <td>宫保鸡丁+麻婆豆腐+米饭x2</td>
+          <td>&yen;88.00</td>
+          <td><span class="g-tag g-tag-green">自提</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeCuDrawer()">关闭</button>
+    <button class="g-btn g-btn-primary"><i data-lucide="send" style="width:14px;height:14px;"></i> 发送消息</button>
+  </div>
+</div>
+
+<script>
+  // Customer data
+  var cuCustomers = [
+    { name:'张**', phone:'138****6789', tags:['高频客户','午餐常客','大额消费'], total:3680, count:42, avg:87.6, last:'2025-02-10', reg:'2024-03-15', churned:false },
+    { name:'李**', phone:'139****2345', tags:['高频客户','大额消费'], total:5120, count:58, avg:88.3, last:'2025-02-11', reg:'2023-11-20', churned:false },
+    { name:'王**', phone:'136****8901', tags:['新客'], total:156, count:2, avg:78.0, last:'2025-02-09', reg:'2025-02-01', churned:false },
+    { name:'赵**', phone:'158****4567', tags:['午餐常客'], total:1890, count:28, avg:67.5, last:'2025-02-08', reg:'2024-06-10', churned:false },
+    { name:'陈**', phone:'137****3210', tags:['沉睡客户'], total:960, count:12, avg:80.0, last:'2025-01-05', reg:'2024-04-22', churned:false },
+    { name:'刘**', phone:'155****7654', tags:['流失客户'], total:420, count:5, avg:84.0, last:'2024-11-18', reg:'2024-08-03', churned:true },
+    { name:'周**', phone:'186****9012', tags:['高频客户','午餐常客'], total:2760, count:35, avg:78.9, last:'2025-02-11', reg:'2024-01-08', churned:false },
+    { name:'吴**', phone:'133****5678', tags:['流失客户','大额消费'], total:1540, count:11, avg:140.0, last:'2024-12-02', reg:'2024-05-15', churned:true },
+  ];
+
+  var cuTagColorMap = {
+    '高频客户': 'green',
+    '新客': 'blue',
+    '沉睡客户': 'orange',
+    '流失客户': 'red',
+    '午餐常客': 'purple',
+    '大额消费': 'gold'
+  };
+
+  var cuActiveTagFilter = '';
+
+  function cuRenderTable() {
+    var kw = (document.getElementById('cuSearchInput').value || '').trim().toLowerCase();
+    var tagSel = document.getElementById('cuTagFilter').value;
+    var filterTag = cuActiveTagFilter || tagSel;
+    var tbody = document.getElementById('cuTableBody');
+    var html = '';
+    cuCustomers.forEach(function(c) {
+      if (kw && c.name.toLowerCase().indexOf(kw) === -1 && c.phone.indexOf(kw) === -1) return;
+      if (filterTag && c.tags.indexOf(filterTag) === -1) return;
+      var tagsHtml = c.tags.map(function(t) {
+        return '<span class="cu-mini-tag ' + (cuTagColorMap[t] || 'gray') + '">' + t + '</span>';
+      }).join('');
+      var rowClass = c.churned ? ' class="cu-row-dimmed"' : '';
+      html += '<tr' + rowClass + '>'
+        + '<td style="font-weight:500;">' + c.name + '</td>'
+        + '<td>' + c.phone + '</td>'
+        + '<td><div class="cu-tags-cell">' + tagsHtml + '</div></td>'
+        + '<td>&yen;' + c.total.toLocaleString() + '</td>'
+        + '<td>' + c.count + '次</td>'
+        + '<td>&yen;' + c.avg.toFixed(1) + '</td>'
+        + '<td>' + c.last + '</td>'
+        + '<td>' + c.reg + '</td>'
+        + '<td><a class="g-action" onclick="openCuDrawer(\'' + c.name + '\')">画像</a></td>'
+        + '</tr>';
+    });
+    if (!html) {
+      html = '<tr><td colspan="9" style="text-align:center;padding:40px;color:var(--g-text-muted);">暂无匹配客户</td></tr>';
+    }
+    tbody.innerHTML = html;
+  }
+
+  function cuFilterTable() {
+    cuActiveTagFilter = '';
+    document.querySelectorAll('.cu-tag-pill').forEach(function(p) { p.classList.remove('active'); });
+    cuRenderTable();
+  }
+
+  function cuToggleTagPill(el, tag) {
+    var wasActive = el.classList.contains('active');
+    document.querySelectorAll('.cu-tag-pill').forEach(function(p) { p.classList.remove('active'); });
+    if (wasActive) {
+      cuActiveTagFilter = '';
+    } else {
+      el.classList.add('active');
+      cuActiveTagFilter = tag;
+    }
+    document.getElementById('cuTagFilter').value = '';
+    cuRenderTable();
+  }
+
+  function openCuDrawer(name) {
+    var c = cuCustomers.find(function(x) { return x.name === name; });
+    if (c) {
+      document.getElementById('cuDrawerTitle').textContent = '客户画像 - ' + c.name;
+      document.getElementById('cuProfileName').textContent = c.name;
+      document.getElementById('cuProfilePhone').textContent = c.phone;
+    }
+    document.getElementById('cuDrawerMask').classList.add('open');
+    document.getElementById('cuDrawer').classList.add('open');
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+
+  function closeCuDrawer() {
+    document.getElementById('cuDrawerMask').classList.remove('open');
+    document.getElementById('cuDrawer').classList.remove('open');
+  }
+
+  // Init
+  cuRenderTable();
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mbr-members.html b/TakeoutSaaS.Prototypes/pages/mbr-members.html
new file mode 100644
index 0000000..5acfd74
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mbr-members.html
@@ -0,0 +1,698 @@
+<!-- 会员管理页 -->
+<style>
+  .mm-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .mm-toolbar .mm-right { margin-left:auto; display:flex; gap:8px; }
+  .mm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+  .mm-stat-card { background:#fff; border-radius:10px; padding:16px 20px; box-shadow:var(--g-shadow-sm); transition:all var(--g-transition); }
+  .mm-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .mm-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
+  .mm-stat-value { font-size:24px; font-weight:700; color:var(--g-text); }
+  .mm-stat-value.blue { color:var(--primary); }
+  .mm-stat-value.green { color:var(--g-success); }
+  .mm-stat-value.orange { color:var(--g-warning); }
+  .mm-stat-sub { font-size:11px; color:var(--g-text-muted); margin-top:4px; }
+  .mm-table-wrap { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden; }
+  .mm-member-cell { display:flex; align-items:center; gap:10px; }
+  .mm-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; flex-shrink:0; }
+
+  /* 等级体系 Tab */
+  .mm-level-grid { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
+  .mm-level-card { background:#fff; border-radius:10px; padding:18px 20px; box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); transition:all var(--g-transition); display:flex; align-items:center; gap:16px; }
+  .mm-level-card:hover { box-shadow:var(--g-shadow-md); }
+  .mm-level-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .mm-level-name { font-size:15px; font-weight:600; color:var(--g-text); }
+  .mm-level-cond { font-size:12px; color:var(--g-text-muted); margin-top:2px; }
+  .mm-level-perks { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
+  .mm-level-perk { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--g-text-secondary); padding:2px 8px; background:#f8f9fb; border-radius:4px; }
+  .mm-level-perk i { color:var(--g-success); flex-shrink:0; }
+  .mm-level-info { flex:1; min-width:0; }
+  .mm-level-actions { display:flex; gap:8px; flex-shrink:0; }
+  .mm-level-order { font-size:20px; font-weight:700; color:var(--g-text-muted); width:28px; text-align:center; flex-shrink:0; }
+  .mm-add-level-btn { width:100%; height:44px; border:1px dashed #d9d9d9; border-radius:10px; background:#fff; color:var(--g-text-muted); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:var(--g-transition); }
+  .mm-add-level-btn:hover { border-color:var(--primary); color:var(--primary); }
+
+  .mm-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+  .mm-day-card { background:#fff; border-radius:10px; padding:20px 24px; box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); }
+  .mm-day-row { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
+  .mm-day-row:last-child { margin-bottom:0; }
+  .mm-day-label { width:80px; font-size:13px; color:var(--g-text-secondary); flex-shrink:0; }
+
+  /* 抽屉内 */
+  .mm-drawer-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
+  .mm-drawer-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:600; flex-shrink:0; background:var(--primary); }
+  .mm-drawer-name { font-size:16px; font-weight:600; color:var(--g-text); }
+  .mm-drawer-meta { font-size:12px; color:var(--g-text-muted); margin-top:3px; }
+  .mm-overview { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
+  .mm-ov-item { text-align:center; padding:12px 8px; background:var(--g-bg-subtle); border-radius:8px; }
+  .mm-ov-val { font-size:18px; font-weight:700; color:var(--g-text); }
+  .mm-ov-label { font-size:11px; color:var(--g-text-muted); margin-top:4px; }
+  .mm-mini-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:10px; }
+  .mm-mini-table th { text-align:left; padding:8px 10px; background:var(--g-bg-subtle); color:var(--g-text-muted); font-weight:500; font-size:11px; }
+  .mm-mini-table td { padding:8px 10px; border-bottom:1px solid #f5f5f5; color:var(--g-text); }
+  .mm-tag-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
+  .mm-tag-add { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:16px; border:1px dashed #d9d9d9; font-size:12px; cursor:pointer; color:var(--g-text-muted); transition:var(--g-transition); background:none; }
+  .mm-tag-add:hover { border-color:var(--primary); color:var(--primary); }
+  .mm-tag-input { width:80px; height:26px; padding:0 8px; border:1px solid var(--primary); border-radius:16px; font-size:12px; outline:none; }
+  .mm-tag-remove { margin-left:2px; cursor:pointer; color:var(--g-text-muted); display:inline-flex; align-items:center; transition:var(--g-transition); }
+  .mm-tag-remove:hover { color:var(--g-danger); }
+
+  /* 等级编辑抽屉 */
+  .mm-perk-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
+  .mm-perk-row input { flex:1; }
+  .mm-perk-remove { background:none; border:none; color:var(--g-text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; transition:var(--g-transition); }
+  .mm-perk-remove:hover { color:var(--g-danger); background:#fef2f2; }
+  .mm-add-perk { color:var(--primary); font-size:12px; cursor:pointer; background:none; border:none; padding:0; display:flex; align-items:center; gap:4px; transition:var(--g-transition); }
+  .mm-add-perk:hover { text-decoration:underline; }
+  .mm-upgrade-section { background:#f8f9fb; border-radius:8px; padding:14px; margin-bottom:12px; }
+  .mm-upgrade-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-text-secondary); }
+  .mm-perk-card { background:#f8f9fb; border-radius:8px; padding:12px 14px; margin-bottom:10px; border:1px solid #f0f0f0; }
+  .mm-perk-card-hd { display:flex; align-items:center; gap:10px; }
+  .mm-perk-card-hd .mm-perk-label { flex:1; font-size:13px; font-weight:500; color:var(--g-text); }
+  .mm-perk-card-bd { margin-top:10px; padding-top:10px; border-top:1px solid #eee; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--g-text-secondary); }
+  .mm-perk-card-bd.hidden { display:none; }
+  .mm-coupon-mini { display:flex; align-items:center; gap:6px; padding:4px 10px; background:#fff; border:1px solid #e5e7eb; border-radius:6px; font-size:12px; }
+  .mm-coupon-mini-remove { cursor:pointer; color:var(--g-text-muted); display:inline-flex; align-items:center; transition:var(--g-transition); }
+  .mm-coupon-mini-remove:hover { color:var(--g-danger); }
+  .mm-add-coupon-link { color:var(--primary); font-size:12px; cursor:pointer; background:none; border:none; padding:0; display:inline-flex; align-items:center; gap:3px; }
+  .mm-add-coupon-link:hover { text-decoration:underline; }
+</style>
+
+<div>
+  <!-- 分段切换 -->
+  <div class="g-seg" style="width:240px;margin-bottom:16px;">
+    <div class="g-seg-item active" onclick="switchMmTab(this,'list')">会员列表</div>
+    <div class="g-seg-item" onclick="switchMmTab(this,'levels')">等级体系</div>
+  </div>
+
+  <!-- ==================== TAB 1: 会员列表 ==================== -->
+  <div id="mmTabList">
+    <!-- 工具栏 -->
+    <div class="mm-toolbar">
+      <select class="g-select" style="width:180px;">
+        <option>全部门店</option>
+        <option>老三家外卖（朝阳店）</option>
+        <option>老三家外卖（海淀店）</option>
+        <option>老三家外卖（望京店）</option>
+      </select>
+      <select class="g-select" style="width:140px;" id="mmLevelFilter">
+        <option value="">全部等级</option>
+        <option>普通会员</option>
+        <option>银卡</option>
+        <option>金卡</option>
+        <option>钻石</option>
+      </select>
+      <div style="position:relative;">
+        <i data-lucide="search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--g-text-muted);pointer-events:none;"></i>
+        <input class="g-input" style="width:200px;padding-left:32px;" placeholder="搜索姓名/手机号">
+      </div>
+      <div class="mm-right">
+        <button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;"></i>导出</button>
+      </div>
+    </div>
+
+    <!-- 统计卡片 -->
+    <div class="mm-stats">
+      <div class="mm-stat-card">
+        <div class="mm-stat-label">会员总数</div>
+        <div class="mm-stat-value blue">1,286</div>
+      </div>
+      <div class="mm-stat-card">
+        <div class="mm-stat-label">本月新增</div>
+        <div class="mm-stat-value green">86</div>
+      </div>
+      <div class="mm-stat-card">
+        <div class="mm-stat-label">活跃会员</div>
+        <div class="mm-stat-value">658</div>
+        <div class="mm-stat-sub">30天内有消费</div>
+      </div>
+      <div class="mm-stat-card">
+        <div class="mm-stat-label">沉睡会员</div>
+        <div class="mm-stat-value orange">328</div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="mm-table-wrap">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>会员</th>
+            <th>手机号</th>
+            <th>等级</th>
+            <th>累计消费</th>
+            <th>消费次数</th>
+            <th>最近消费</th>
+            <th>储值余额</th>
+            <th>积分</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#1890ff;">张</div><span>张**</span></div></td>
+            <td>138****6721</td>
+            <td><span class="g-tag" style="color:#722ed1;background:#f9f0ff;border:1px solid #d3adf7;">钻石</span></td>
+            <td>&yen;15,280</td>
+            <td>186</td>
+            <td>2026-02-11</td>
+            <td>&yen;2,350.00</td>
+            <td>8,620</td>
+            <td><a class="g-action" onclick="openMmDrawer(0)">详情</a></td>
+          </tr>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#fa8c16;">李</div><span>李**</span></div></td>
+            <td>139****3345</td>
+            <td><span class="g-tag g-tag-orange">金卡</span></td>
+            <td>&yen;4,560</td>
+            <td>72</td>
+            <td>2026-02-10</td>
+            <td>&yen;800.00</td>
+            <td>3,240</td>
+            <td><a class="g-action" onclick="openMmDrawer(1)">详情</a></td>
+          </tr>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#52c41a;">王</div><span>王**</span></div></td>
+            <td>136****8890</td>
+            <td><span class="g-tag g-tag-blue">银卡</span></td>
+            <td>&yen;1,230</td>
+            <td>28</td>
+            <td>2026-02-08</td>
+            <td>&yen;200.00</td>
+            <td>1,560</td>
+            <td><a class="g-action" onclick="openMmDrawer(2)">详情</a></td>
+          </tr>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#722ed1;">赵</div><span>赵**</span></div></td>
+            <td>158****2210</td>
+            <td><span class="g-tag g-tag-gray">普通</span></td>
+            <td>&yen;320</td>
+            <td>8</td>
+            <td>2026-01-25</td>
+            <td>&yen;0.00</td>
+            <td>420</td>
+            <td><a class="g-action" onclick="openMmDrawer(3)">详情</a></td>
+          </tr>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#eb2f96;">陈</div><span>陈**</span></div></td>
+            <td>137****5567</td>
+            <td><span class="g-tag g-tag-orange">金卡</span></td>
+            <td>&yen;3,890</td>
+            <td>56</td>
+            <td>2026-02-09</td>
+            <td>&yen;1,200.00</td>
+            <td>2,780</td>
+            <td><a class="g-action" onclick="openMmDrawer(4)">详情</a></td>
+          </tr>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#13c2c2;">刘</div><span>刘**</span></div></td>
+            <td>155****9901</td>
+            <td><span class="g-tag g-tag-blue">银卡</span></td>
+            <td>&yen;980</td>
+            <td>18</td>
+            <td>2026-02-05</td>
+            <td>&yen;150.00</td>
+            <td>890</td>
+            <td><a class="g-action" onclick="openMmDrawer(5)">详情</a></td>
+          </tr>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#f5222d;">孙</div><span>孙**</span></div></td>
+            <td>186****4432</td>
+            <td><span class="g-tag" style="color:#722ed1;background:#f9f0ff;border:1px solid #d3adf7;">钻石</span></td>
+            <td>&yen;12,600</td>
+            <td>142</td>
+            <td>2026-02-12</td>
+            <td>&yen;3,800.00</td>
+            <td>7,150</td>
+            <td><a class="g-action" onclick="openMmDrawer(6)">详情</a></td>
+          </tr>
+          <tr>
+            <td><div class="mm-member-cell"><div class="mm-avatar" style="background:#2f54eb;">周</div><span>周**</span></div></td>
+            <td>133****7788</td>
+            <td><span class="g-tag g-tag-gray">普通</span></td>
+            <td>&yen;160</td>
+            <td>4</td>
+            <td>2026-01-18</td>
+            <td>&yen;0.00</td>
+            <td>210</td>
+            <td><a class="g-action" onclick="openMmDrawer(7)">详情</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="g-pagination">
+      <span style="margin-right:8px;">共 1,286 条</span>
+      <button class="g-page-btn" disabled>&lt;</button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn">2</button>
+      <button class="g-page-btn">3</button>
+      <button class="g-page-btn">...</button>
+      <button class="g-page-btn">129</button>
+      <button class="g-page-btn">&gt;</button>
+    </div>
+  </div>
+
+  <!-- ==================== TAB 2: 等级体系 ==================== -->
+  <div id="mmTabLevels" style="display:none;">
+    <div class="mm-section-hd">会员等级</div>
+    <div class="mm-level-grid" id="mmLevelList">
+      <!-- Lv1 普通 -->
+      <div class="mm-level-card">
+        <div class="mm-level-order">1</div>
+        <div class="mm-level-icon" style="background:#f5f5f5;color:#999;">
+          <i data-lucide="user" style="width:24px;height:24px;"></i>
+        </div>
+        <div class="mm-level-info">
+          <div class="mm-level-name">普通会员</div>
+          <div class="mm-level-cond">注册即享</div>
+          <div class="mm-level-perks">
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分累计</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>会员价商品</span>
+          </div>
+        </div>
+        <div class="mm-level-actions">
+          <button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('普通会员')">编辑</button>
+        </div>
+      </div>
+      <!-- Lv2 银卡 -->
+      <div class="mm-level-card">
+        <div class="mm-level-order">2</div>
+        <div class="mm-level-icon" style="background:#e6f7ff;color:#1890ff;">
+          <i data-lucide="award" style="width:24px;height:24px;"></i>
+        </div>
+        <div class="mm-level-info">
+          <div class="mm-level-name" style="color:#1890ff;">银卡会员</div>
+          <div class="mm-level-cond">累计消费满 &yen;500</div>
+          <div class="mm-level-perks">
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>全场9.8折</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>生日赠券</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分1.2倍</span>
+          </div>
+        </div>
+        <div class="mm-level-actions">
+          <button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('银卡会员')">编辑</button>
+          <button class="g-btn g-btn-sm" style="color:var(--g-danger);border-color:var(--g-danger);" onclick="this.closest('.mm-level-card').remove()"><i data-lucide="trash-2" style="width:13px;height:13px;"></i></button>
+        </div>
+      </div>
+      <!-- Lv3 金卡 -->
+      <div class="mm-level-card">
+        <div class="mm-level-order">3</div>
+        <div class="mm-level-icon" style="background:#fff7e6;color:#fa8c16;">
+          <i data-lucide="trophy" style="width:24px;height:24px;"></i>
+        </div>
+        <div class="mm-level-info">
+          <div class="mm-level-name" style="color:#fa8c16;">金卡会员</div>
+          <div class="mm-level-cond">累计消费满 &yen;2,000</div>
+          <div class="mm-level-perks">
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>全场9.5折</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>生日双倍积分</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>每月赠券</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分1.5倍</span>
+          </div>
+        </div>
+        <div class="mm-level-actions">
+          <button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('金卡会员')">编辑</button>
+          <button class="g-btn g-btn-sm" style="color:var(--g-danger);border-color:var(--g-danger);" onclick="this.closest('.mm-level-card').remove()"><i data-lucide="trash-2" style="width:13px;height:13px;"></i></button>
+        </div>
+      </div>
+      <!-- Lv4 钻石 -->
+      <div class="mm-level-card">
+        <div class="mm-level-order">4</div>
+        <div class="mm-level-icon" style="background:#f9f0ff;color:#722ed1;">
+          <i data-lucide="gem" style="width:24px;height:24px;"></i>
+        </div>
+        <div class="mm-level-info">
+          <div class="mm-level-name" style="color:#722ed1;">钻石会员</div>
+          <div class="mm-level-cond">累计消费满 &yen;5,000</div>
+          <div class="mm-level-perks">
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>全场9折</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>生日赠券+双倍积分</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>每月赠券</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>免配送费</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>优先配送</span>
+            <span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分2倍</span>
+          </div>
+        </div>
+        <div class="mm-level-actions">
+          <button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('钻石会员')">编辑</button>
+          <button class="g-btn g-btn-sm" style="color:var(--g-danger);border-color:var(--g-danger);" onclick="this.closest('.mm-level-card').remove()"><i data-lucide="trash-2" style="width:13px;height:13px;"></i></button>
+        </div>
+      </div>
+    </div>
+    <button class="mm-add-level-btn" onclick="openMmLevelDrawer()"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加等级</button>
+
+    <!-- 会员日设置 -->
+    <div class="mm-section-hd">会员日设置</div>
+    <div class="mm-day-card">
+      <div class="mm-day-row">
+        <div class="mm-day-label">启用会员日</div>
+        <div class="g-toggle on" onclick="this.classList.toggle('on')"></div>
+      </div>
+      <div class="mm-day-row">
+        <div class="mm-day-label">会员日</div>
+        <select class="g-select" style="width:160px;">
+          <option>每周二</option>
+          <option>每周一</option>
+          <option>每周三</option>
+          <option>每周四</option>
+          <option>每周五</option>
+          <option>每周六</option>
+          <option>每周日</option>
+        </select>
+      </div>
+      <div class="mm-day-row">
+        <div class="mm-day-label">会员日权益</div>
+        <div style="display:flex;align-items:center;gap:8px;">
+          <span style="font-size:13px;color:var(--g-text-secondary);">额外</span>
+          <input class="g-input" style="width:80px;text-align:center;" placeholder="如：9" value="9">
+          <span style="font-size:13px;color:var(--g-text-secondary);">折优惠</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 会员详情抽屉 -->
+<div class="g-drawer-mask" id="mmDrawerMask" onclick="closeMmDrawer()"></div>
+<div class="g-drawer" id="mmDrawer" style="width:560px;">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title">会员详情</div>
+    <button class="g-drawer-close" onclick="closeMmDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 头部信息 -->
+    <div class="mm-drawer-header">
+      <div class="mm-drawer-avatar" id="mmDrAvatar">张</div>
+      <div>
+        <div style="display:flex;align-items:center;gap:8px;">
+          <span class="mm-drawer-name" id="mmDrName">张**</span>
+          <span class="g-tag" id="mmDrLevel" style="color:#722ed1;background:#f9f0ff;border:1px solid #d3adf7;">钻石</span>
+        </div>
+        <div class="mm-drawer-meta" id="mmDrMeta">138****6721 | 注册于 2024-03-15</div>
+      </div>
+    </div>
+
+    <!-- 消费概览 -->
+    <div class="mm-section-hd">消费概览</div>
+    <div class="mm-overview" id="mmDrOverview">
+      <div class="mm-ov-item"><div class="mm-ov-val">&yen;15,280</div><div class="mm-ov-label">累计消费</div></div>
+      <div class="mm-ov-item"><div class="mm-ov-val">186</div><div class="mm-ov-label">消费次数</div></div>
+      <div class="mm-ov-item"><div class="mm-ov-val">&yen;82.2</div><div class="mm-ov-label">平均客单价</div></div>
+      <div class="mm-ov-item"><div class="mm-ov-val">&yen;2,350</div><div class="mm-ov-label">储值余额</div><div style="font-size:10px;color:var(--g-text-muted);margin-top:2px;">实充 &yen;2,000 | 赠金 &yen;350</div></div>
+      <div class="mm-ov-item"><div class="mm-ov-val">8,620</div><div class="mm-ov-label">积分</div></div>
+    </div>
+
+    <!-- 最近订单 -->
+    <div class="mm-section-hd">最近订单</div>
+    <table class="mm-mini-table">
+      <thead><tr><th>日期</th><th>订单号</th><th>金额</th><th>状态</th><th style="width:50px;">操作</th></tr></thead>
+      <tbody id="mmDrOrders">
+        <tr><td>2026-02-11</td><td>OD20260211086</td><td>&yen;68.00</td><td><span class="g-tag g-tag-green">已完成</span></td><td><a class="g-action" style="font-size:12px;">详情</a></td></tr>
+        <tr><td>2026-02-08</td><td>OD20260208052</td><td>&yen;95.50</td><td><span class="g-tag g-tag-green">已完成</span></td><td><a class="g-action" style="font-size:12px;">详情</a></td></tr>
+        <tr><td>2026-02-05</td><td>OD20260205031</td><td>&yen;42.00</td><td><span class="g-tag g-tag-green">已完成</span></td><td><a class="g-action" style="font-size:12px;">详情</a></td></tr>
+      </tbody>
+    </table>
+
+    <!-- 会员标签 -->
+    <div style="margin-top:20px;">
+      <div class="mm-section-hd">会员标签</div>
+      <div class="mm-tag-list" id="mmTagList">
+        <span class="g-pill checked" onclick="this.classList.toggle('checked')">高频<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
+        <span class="g-pill checked" onclick="this.classList.toggle('checked')">午餐常客<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
+        <span class="g-pill checked" onclick="this.classList.toggle('checked')">偏好辣味<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
+        <span class="g-pill" onclick="this.classList.toggle('checked')">下午茶<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
+        <span class="g-pill" onclick="this.classList.toggle('checked')">家庭聚餐<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
+        <span class="g-pill" onclick="this.classList.toggle('checked')">外卖为主<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
+        <button class="mm-tag-add" id="mmTagAddBtn" onclick="showMmTagInput()"><i data-lucide="plus" style="width:12px;height:12px;"></i>自定义标签</button>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeMmDrawer()">关闭</button>
+  </div>
+</div>
+
+<!-- 等级编辑抽屉 -->
+<div class="g-drawer-mask" id="mmLevelMask" onclick="closeMmLevelDrawer()"></div>
+<div class="g-drawer" id="mmLevelDrawer" style="width:520px;">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title" id="mmLevelTitle">编辑等级</div>
+    <button class="g-drawer-close" onclick="closeMmLevelDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">等级名称</label>
+      <input class="g-input" id="mmLevelName" placeholder="如：金卡会员">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">等级图标</label>
+      <div style="display:flex;gap:8px;">
+        <span class="g-pill checked" onclick="selectMmIcon(this)"><i data-lucide="user" style="width:14px;height:14px;"></i>默认</span>
+        <span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="award" style="width:14px;height:14px;"></i>奖章</span>
+        <span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="trophy" style="width:14px;height:14px;"></i>奖杯</span>
+        <span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="gem" style="width:14px;height:14px;"></i>钻石</span>
+        <span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="crown" style="width:14px;height:14px;"></i>皇冠</span>
+        <span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="star" style="width:14px;height:14px;"></i>星星</span>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">等级颜色</label>
+      <div style="display:flex;gap:8px;">
+        <span style="width:28px;height:28px;border-radius:50%;background:#999;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
+        <span style="width:28px;height:28px;border-radius:50%;background:#1890ff;cursor:pointer;border:2px solid var(--primary);" onclick="selectMmColor(this)"></span>
+        <span style="width:28px;height:28px;border-radius:50%;background:#fa8c16;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
+        <span style="width:28px;height:28px;border-radius:50%;background:#722ed1;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
+        <span style="width:28px;height:28px;border-radius:50%;background:#eb2f96;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
+        <span style="width:28px;height:28px;border-radius:50%;background:#f5222d;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">升级规则</label>
+      <div class="mm-upgrade-section">
+        <div style="display:flex;gap:8px;margin-bottom:12px;">
+          <span class="g-pill checked" onclick="selectMmUpgradeType(this,'amount')">按累计消费金额</span>
+          <span class="g-pill" onclick="selectMmUpgradeType(this,'count')">按消费次数</span>
+          <span class="g-pill" onclick="selectMmUpgradeType(this,'both')">同时满足</span>
+        </div>
+        <div id="mmUpgradeAmount">
+          <div class="mm-upgrade-row">
+            <span>累计消费满</span>
+            <input class="g-input" type="number" style="width:120px;" placeholder="如：2000" value="2000">
+            <span>元</span>
+          </div>
+        </div>
+        <div id="mmUpgradeCount" style="display:none;">
+          <div class="mm-upgrade-row">
+            <span>消费满</span>
+            <input class="g-input" type="number" style="width:120px;" placeholder="如：50" value="50">
+            <span>次</span>
+          </div>
+        </div>
+      </div>
+      <div class="g-hint">达到条件自动升级；连续90天未达标自动降一级</div>
+    </div>
+
+    <div class="g-form-group">
+      <label class="g-form-label">等级权益</label>
+
+      <!-- 折扣权益 -->
+      <div class="mm-perk-card">
+        <div class="mm-perk-card-hd">
+          <span class="mm-perk-label">折扣权益</span>
+          <div class="g-toggle on" onclick="toggleMmPerk(this)"></div>
+        </div>
+        <div class="mm-perk-card-bd">
+          <span>全场</span>
+          <input class="g-input" type="number" style="width:70px;text-align:center;" placeholder="9.5" value="9.5" step="0.1">
+          <span>折</span>
+        </div>
+      </div>
+
+      <!-- 积分倍率 -->
+      <div class="mm-perk-card">
+        <div class="mm-perk-card-hd">
+          <span class="mm-perk-label">积分倍率</span>
+          <div class="g-toggle on" onclick="toggleMmPerk(this)"></div>
+        </div>
+        <div class="mm-perk-card-bd">
+          <span>消费积分</span>
+          <input class="g-input" type="number" style="width:70px;text-align:center;" placeholder="1.5" value="1.5" step="0.1">
+          <span>倍</span>
+        </div>
+      </div>
+
+      <!-- 生日特权 -->
+      <div class="mm-perk-card">
+        <div class="mm-perk-card-hd">
+          <span class="mm-perk-label">生日特权</span>
+          <div class="g-toggle on" onclick="toggleMmPerk(this)"></div>
+        </div>
+        <div class="mm-perk-card-bd">
+          <div style="display:flex;flex-direction:column;gap:8px;width:100%;">
+            <label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
+              <input type="checkbox" checked> 生日双倍积分
+            </label>
+            <label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
+              <input type="checkbox" checked> 生日赠券
+            </label>
+            <div style="display:flex;align-items:center;gap:6px;margin-left:20px;">
+              <div class="mm-coupon-mini">满30减5 <span class="mm-coupon-mini-remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></div>
+              <button class="mm-add-coupon-link" onclick="openProductPicker({title:'选择优惠券',onConfirm:function(){}})"><i data-lucide="plus" style="width:11px;height:11px;"></i>选券</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 每月赠券 -->
+      <div class="mm-perk-card">
+        <div class="mm-perk-card-hd">
+          <span class="mm-perk-label">每月赠券</span>
+          <div class="g-toggle" onclick="toggleMmPerk(this)"></div>
+        </div>
+        <div class="mm-perk-card-bd hidden">
+          <div style="display:flex;flex-direction:column;gap:8px;width:100%;">
+            <div style="display:flex;align-items:center;gap:6px;font-size:12px;">
+              <span>每月</span>
+              <input class="g-input" type="number" style="width:50px;text-align:center;" placeholder="1" value="1">
+              <span>日自动发放以下优惠券：</span>
+            </div>
+            <div style="display:flex;align-items:center;gap:6px;">
+              <div class="mm-coupon-mini">满50减8 <span class="mm-coupon-mini-remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></div>
+              <button class="mm-add-coupon-link" onclick="openProductPicker({title:'选择优惠券',onConfirm:function(){}})"><i data-lucide="plus" style="width:11px;height:11px;"></i>选券</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 免配送费 -->
+      <div class="mm-perk-card">
+        <div class="mm-perk-card-hd">
+          <span class="mm-perk-label">免配送费</span>
+          <div class="g-toggle" onclick="toggleMmPerk(this)"></div>
+        </div>
+        <div class="mm-perk-card-bd hidden">
+          <span>每月免配送费</span>
+          <input class="g-input" type="number" style="width:60px;text-align:center;" placeholder="5" value="5">
+          <span>次</span>
+        </div>
+      </div>
+
+      <!-- 优先配送 -->
+      <div class="mm-perk-card">
+        <div class="mm-perk-card-hd">
+          <span class="mm-perk-label">优先配送</span>
+          <div class="g-toggle" onclick="toggleMmPerk(this)"></div>
+        </div>
+      </div>
+
+      <!-- 专属客服 -->
+      <div class="mm-perk-card">
+        <div class="mm-perk-card-hd">
+          <span class="mm-perk-label">专属客服</span>
+          <div class="g-toggle" onclick="toggleMmPerk(this)"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeMmLevelDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeMmLevelDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchMmTab(el, tab) {
+    el.parentElement.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
+    el.classList.add('active');
+    document.getElementById('mmTabList').style.display = tab === 'list' ? '' : 'none';
+    document.getElementById('mmTabLevels').style.display = tab === 'levels' ? '' : 'none';
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+
+  /* 抽屉 */
+  function openMmDrawer(idx) {
+    document.getElementById('mmDrawerMask').classList.add('open');
+    document.getElementById('mmDrawer').classList.add('open');
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+  function closeMmDrawer() {
+    document.getElementById('mmDrawerMask').classList.remove('open');
+    document.getElementById('mmDrawer').classList.remove('open');
+  }
+
+  /* 等级编辑抽屉 */
+  function openMmLevelDrawer(name) {
+    document.getElementById('mmLevelMask').classList.add('open');
+    document.getElementById('mmLevelDrawer').classList.add('open');
+    document.getElementById('mmLevelTitle').textContent = '编辑等级 - ' + name;
+    document.getElementById('mmLevelName').value = name;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+  function closeMmLevelDrawer() {
+    document.getElementById('mmLevelMask').classList.remove('open');
+    document.getElementById('mmLevelDrawer').classList.remove('open');
+  }
+  function selectMmUpgradeType(el, type) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(function(p){ p.classList.remove('checked'); });
+    el.classList.add('checked');
+    document.getElementById('mmUpgradeAmount').style.display = (type === 'amount' || type === 'both') ? '' : 'none';
+    document.getElementById('mmUpgradeCount').style.display = (type === 'count' || type === 'both') ? '' : 'none';
+  }
+  function toggleMmPerk(toggleEl) {
+    toggleEl.classList.toggle('on');
+    var card = toggleEl.closest('.mm-perk-card');
+    var bd = card.querySelector('.mm-perk-card-bd');
+    if (bd) {
+      bd.classList.toggle('hidden', !toggleEl.classList.contains('on'));
+    }
+  }
+  function selectMmIcon(el) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(function(p){ p.classList.remove('checked'); });
+    el.classList.add('checked');
+  }
+  function selectMmColor(el) {
+    el.parentElement.querySelectorAll('span').forEach(function(s){ s.style.borderColor = 'transparent'; });
+    el.style.borderColor = el.style.background;
+  }
+  function addMmPerk() {
+    var row = document.createElement('div');
+    row.className = 'mm-perk-row';
+    row.innerHTML = '<input class="g-input" placeholder="请输入权益描述"><button class="mm-perk-remove" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>';
+    document.getElementById('mmPerkList').appendChild(row);
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+
+  /* 自定义标签 */
+  function showMmTagInput() {
+    var btn = document.getElementById('mmTagAddBtn');
+    var input = document.createElement('input');
+    input.className = 'mm-tag-input';
+    input.placeholder = '输入标签名';
+    input.onkeydown = function(e) {
+      if (e.key === 'Enter' && this.value.trim()) {
+        var tag = document.createElement('span');
+        tag.className = 'g-pill checked';
+        tag.onclick = function(){ this.classList.toggle('checked'); };
+        tag.textContent = this.value.trim();
+        var rm = document.createElement('span');
+        rm.className = 'mm-tag-remove';
+        rm.innerHTML = '<i data-lucide="x" style="width:10px;height:10px;"></i>';
+        rm.onclick = function(e){ e.stopPropagation(); this.parentElement.remove(); };
+        tag.appendChild(rm);
+        btn.parentElement.insertBefore(tag, btn);
+        this.remove();
+        btn.style.display = '';
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+      }
+      if (e.key === 'Escape') { this.remove(); btn.style.display = ''; }
+    };
+    input.onblur = function() { this.remove(); btn.style.display = ''; };
+    btn.style.display = 'none';
+    btn.parentElement.insertBefore(input, btn);
+    input.focus();
+  }
+
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mbr-messaging.html b/TakeoutSaaS.Prototypes/pages/mbr-messaging.html
new file mode 100644
index 0000000..12bdb99
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mbr-messaging.html
@@ -0,0 +1,436 @@
+<!-- 消息触达页 -->
+<style>
+  .msg-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:12px 16px; flex-wrap:wrap; }
+  .msg-spacer { flex:1; }
+  .msg-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
+  .msg-stat-card { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:16px 20px; transition:box-shadow var(--g-transition), transform var(--g-transition); }
+  .msg-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .msg-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:6px; }
+  .msg-stat-value { font-size:22px; font-weight:700; color:var(--g-text); }
+  .msg-stat-value .msg-stat-unit { font-size:13px; font-weight:400; color:var(--g-text-secondary); margin-left:2px; }
+  .msg-channel-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; vertical-align:middle; }
+  .msg-open-rate { font-size:11px; color:var(--g-text-muted); margin-top:2px; }
+
+  /* Template cards */
+  .msg-tpl-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
+  .msg-tpl-card { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:18px 20px; transition:box-shadow var(--g-transition), transform var(--g-transition); display:flex; flex-direction:column; }
+  .msg-tpl-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .msg-tpl-hd { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+  .msg-tpl-name { font-size:14px; font-weight:600; color:var(--g-text); flex:1; }
+  .msg-tpl-preview { font-size:12px; color:var(--g-text-secondary); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:12px; flex:1; }
+  .msg-tpl-ft { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
+  .msg-tpl-usage { font-size:12px; color:var(--g-text-muted); }
+  .msg-tpl-actions { display:flex; align-items:center; gap:10px; }
+  .msg-tpl-actions a { font-size:12px; color:var(--primary); cursor:pointer; text-decoration:none; transition:var(--g-transition); }
+  .msg-tpl-actions a:hover { text-decoration:underline; }
+  .msg-tpl-actions a.msg-tpl-danger { color:var(--g-danger); }
+
+  /* Drawer: tag pills for target audience */
+  .msg-tag-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
+  .msg-reach { font-size:12px; color:var(--primary); margin-top:10px; display:flex; align-items:center; gap:4px; }
+  .msg-tpl-link { font-size:13px; color:var(--primary); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; margin-top:8px; transition:var(--g-transition); }
+  .msg-tpl-link:hover { text-decoration:underline; }
+</style>
+
+<div>
+  <!-- Tabs -->
+  <div class="g-seg" style="margin-bottom:16px;">
+    <div class="g-seg-item active" onclick="switchMsgTab(this,'list')">消息列表</div>
+    <div class="g-seg-item" onclick="switchMsgTab(this,'tpl')">消息模板</div>
+  </div>
+
+  <!-- TAB 1: 消息列表 -->
+  <div id="msgTabList">
+    <div class="msg-toolbar">
+      <select class="g-select" style="min-width:100px">
+        <option>全部状态</option>
+        <option>已发送</option>
+        <option>待发送</option>
+        <option>草稿</option>
+      </select>
+      <select class="g-select" style="min-width:100px">
+        <option>全部渠道</option>
+        <option>站内信</option>
+        <option>短信</option>
+        <option>微信</option>
+      </select>
+      <input class="g-input" placeholder="搜索消息标题" style="width:180px" />
+      <span class="msg-spacer"></span>
+      <button class="g-btn g-btn-primary" onclick="openMsgDrawer()"><i data-lucide="plus" style="width:14px;height:14px;vertical-align:-2px;margin-right:2px;"></i> 创建消息</button>
+    </div>
+
+    <!-- Stats -->
+    <div class="msg-stats">
+      <div class="msg-stat-card">
+        <div class="msg-stat-label">本月发送</div>
+        <div class="msg-stat-value">12<span class="msg-stat-unit">条</span></div>
+      </div>
+      <div class="msg-stat-card">
+        <div class="msg-stat-label">触达人数</div>
+        <div class="msg-stat-value">3,680<span class="msg-stat-unit">人</span></div>
+      </div>
+      <div class="msg-stat-card">
+        <div class="msg-stat-label">打开率</div>
+        <div class="msg-stat-value">45.2<span class="msg-stat-unit">%</span></div>
+      </div>
+      <div class="msg-stat-card">
+        <div class="msg-stat-label">转化率</div>
+        <div class="msg-stat-value">12.8<span class="msg-stat-unit">%</span></div>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div class="g-card">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>消息标题</th>
+            <th>推送渠道</th>
+            <th>目标人群</th>
+            <th>触达人数</th>
+            <th>发送时间</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <div style="font-weight:500;color:var(--g-text)">新品上线通知</div>
+              <div class="msg-open-rate">打开率 52.3% | 转化率 15.6%</div>
+            </td>
+            <td><span class="g-tag g-tag-blue">站内信</span></td>
+            <td>全部会员</td>
+            <td>1,280</td>
+            <td>2026-02-10 10:00</td>
+            <td><span class="g-tag g-tag-green">已发送</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td>
+              <div style="font-weight:500;color:var(--g-text)">春节优惠活动</div>
+              <div class="msg-open-rate">打开率 48.1% | 转化率 18.2%</div>
+            </td>
+            <td><span class="g-tag g-tag-green">短信</span></td>
+            <td>全部会员</td>
+            <td>2,400</td>
+            <td>2026-02-08 09:30</td>
+            <td><span class="g-tag g-tag-green">已发送</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td>
+              <div style="font-weight:500;color:var(--g-text)">沉睡客户召回</div>
+              <div class="msg-open-rate">打开率 35.7% | 转化率 8.4%</div>
+            </td>
+            <td><span class="g-tag g-tag-orange">微信模板</span></td>
+            <td>沉睡客户(456人)</td>
+            <td>456</td>
+            <td>2026-02-05 14:00</td>
+            <td><span class="g-tag g-tag-green">已发送</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td>
+              <div style="font-weight:500;color:var(--g-text)">会员日提醒</div>
+            </td>
+            <td><span class="g-tag g-tag-blue">站内信</span></td>
+            <td>高频客户(328人)</td>
+            <td>328</td>
+            <td>2026-02-15 08:00</td>
+            <td><span class="g-tag g-tag-blue">待发送</span></td>
+            <td><a class="g-action">详情</a><a class="g-action-danger">删除</a></td>
+          </tr>
+          <tr>
+            <td>
+              <div style="font-weight:500;color:var(--g-text)">储值优惠推送</div>
+            </td>
+            <td><span class="g-tag g-tag-green">短信</span></td>
+            <td>全部会员</td>
+            <td>—</td>
+            <td>—</td>
+            <td><span class="g-tag g-tag-gray">草稿</span></td>
+            <td><a class="g-action">详情</a><a class="g-action">编辑</a><a class="g-action-danger">删除</a></td>
+          </tr>
+          <tr>
+            <td>
+              <div style="font-weight:500;color:var(--g-text)">新客欢迎礼</div>
+            </td>
+            <td><span class="g-tag g-tag-orange">微信模板</span></td>
+            <td>新客(86人)</td>
+            <td>—</td>
+            <td>—</td>
+            <td><span class="g-tag g-tag-gray">草稿</span></td>
+            <td><a class="g-action">详情</a><a class="g-action">编辑</a><a class="g-action-danger">删除</a></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="g-pagination" style="margin-top:16px;">
+        <span style="font-size:13px;color:var(--g-text-secondary);">共 6 条</span>
+        <button class="g-page-btn" disabled>&lt;</button>
+        <button class="g-page-btn active">1</button>
+        <button class="g-page-btn">&gt;</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- TAB 2: 消息模板 -->
+  <div id="msgTabTpl" style="display:none">
+    <div class="msg-toolbar">
+      <select class="g-select" style="min-width:100px">
+        <option>全部分类</option>
+        <option>营销</option>
+        <option>通知</option>
+        <option>召回</option>
+      </select>
+      <input class="g-input" placeholder="搜索模板名称" style="width:180px" />
+      <span class="msg-spacer"></span>
+      <button class="g-btn g-btn-primary"><i data-lucide="plus" style="width:14px;height:14px;vertical-align:-2px;margin-right:2px;"></i> 新建模板</button>
+    </div>
+
+    <div class="msg-tpl-grid">
+      <!-- Template 1 -->
+      <div class="msg-tpl-card">
+        <div class="msg-tpl-hd">
+          <span class="msg-tpl-name">新品上线通知</span>
+          <span class="g-tag g-tag-blue">通知</span>
+        </div>
+        <div class="msg-tpl-preview">亲爱的{name}，我们上新啦！{product}现已上线，口感升级，诚意满满，快来尝鲜吧！</div>
+        <div class="msg-tpl-ft">
+          <span class="msg-tpl-usage"><i data-lucide="bar-chart-2" style="width:12px;height:12px;vertical-align:-1px;margin-right:2px;"></i>已使用 28次</span>
+          <div class="msg-tpl-actions">
+            <button class="g-btn g-btn-sm g-btn-primary" onclick="useMsgTemplate('新品上线通知','亲爱的{name}，我们上新啦！{product}现已上线，口感升级，诚意满满，快来尝鲜吧！')">使用</button>
+            <a>编辑</a>
+            <a class="msg-tpl-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Template 2 -->
+      <div class="msg-tpl-card">
+        <div class="msg-tpl-hd">
+          <span class="msg-tpl-name">节日问候</span>
+          <span class="g-tag g-tag-orange">营销</span>
+        </div>
+        <div class="msg-tpl-preview">亲爱的{name}，{holiday}快乐！为您准备了专属优惠，下单立享折扣，温暖过节从一顿好饭开始！</div>
+        <div class="msg-tpl-ft">
+          <span class="msg-tpl-usage"><i data-lucide="bar-chart-2" style="width:12px;height:12px;vertical-align:-1px;margin-right:2px;"></i>已使用 15次</span>
+          <div class="msg-tpl-actions">
+            <button class="g-btn g-btn-sm g-btn-primary" onclick="useMsgTemplate('节日问候','亲爱的{name}，{holiday}快乐！为您准备了专属优惠，下单立享折扣，温暖过节从一顿好饭开始！')">使用</button>
+            <a>编辑</a>
+            <a class="msg-tpl-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Template 3 -->
+      <div class="msg-tpl-card">
+        <div class="msg-tpl-hd">
+          <span class="msg-tpl-name">沉睡客户召回</span>
+          <span class="g-tag g-tag-red">召回</span>
+        </div>
+        <div class="msg-tpl-preview">{name}，好久不见！我们很想念您，特送上一份专属回归礼券，期待与您再次相遇！</div>
+        <div class="msg-tpl-ft">
+          <span class="msg-tpl-usage"><i data-lucide="bar-chart-2" style="width:12px;height:12px;vertical-align:-1px;margin-right:2px;"></i>已使用 42次</span>
+          <div class="msg-tpl-actions">
+            <button class="g-btn g-btn-sm g-btn-primary" onclick="useMsgTemplate('沉睡客户召回','{name}，好久不见！我们很想念您，特送上一份专属回归礼券，期待与您再次相遇！')">使用</button>
+            <a>编辑</a>
+            <a class="msg-tpl-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Template 4 -->
+      <div class="msg-tpl-card">
+        <div class="msg-tpl-hd">
+          <span class="msg-tpl-name">储值优惠提醒</span>
+          <span class="g-tag g-tag-orange">营销</span>
+        </div>
+        <div class="msg-tpl-preview">限时充值优惠！充{amount}送{gift}，多充多送，优惠截止本周日，别错过！</div>
+        <div class="msg-tpl-ft">
+          <span class="msg-tpl-usage"><i data-lucide="bar-chart-2" style="width:12px;height:12px;vertical-align:-1px;margin-right:2px;"></i>已使用 19次</span>
+          <div class="msg-tpl-actions">
+            <button class="g-btn g-btn-sm g-btn-primary" onclick="useMsgTemplate('储值优惠提醒','限时充值优惠！充{amount}送{gift}，多充多送，优惠截止本周日，别错过！')">使用</button>
+            <a>编辑</a>
+            <a class="msg-tpl-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Template 5 -->
+      <div class="msg-tpl-card">
+        <div class="msg-tpl-hd">
+          <span class="msg-tpl-name">订单完成感谢</span>
+          <span class="g-tag g-tag-blue">通知</span>
+        </div>
+        <div class="msg-tpl-preview">感谢您的订单！期待下次光临，如有任何问题请随时联系我们，祝您用餐愉快！</div>
+        <div class="msg-tpl-ft">
+          <span class="msg-tpl-usage"><i data-lucide="bar-chart-2" style="width:12px;height:12px;vertical-align:-1px;margin-right:2px;"></i>已使用 56次</span>
+          <div class="msg-tpl-actions">
+            <button class="g-btn g-btn-sm g-btn-primary" onclick="useMsgTemplate('订单完成感谢','感谢您的订单！期待下次光临，如有任何问题请随时联系我们，祝您用餐愉快！')">使用</button>
+            <a>编辑</a>
+            <a class="msg-tpl-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Template 6 -->
+      <div class="msg-tpl-card">
+        <div class="msg-tpl-hd">
+          <span class="msg-tpl-name">会员升级通知</span>
+          <span class="g-tag g-tag-blue">通知</span>
+        </div>
+        <div class="msg-tpl-preview">恭喜{name}升级为{level}会员！解锁更多专属权益，感谢您一路以来的支持与信赖！</div>
+        <div class="msg-tpl-ft">
+          <span class="msg-tpl-usage"><i data-lucide="bar-chart-2" style="width:12px;height:12px;vertical-align:-1px;margin-right:2px;"></i>已使用 33次</span>
+          <div class="msg-tpl-actions">
+            <button class="g-btn g-btn-sm g-btn-primary" onclick="useMsgTemplate('会员升级通知','恭喜{name}升级为{level}会员！解锁更多专属权益，感谢您一路以来的支持与信赖！')">使用</button>
+            <a>编辑</a>
+            <a class="msg-tpl-danger">删除</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Drawer mask -->
+<div class="g-drawer-mask" id="msgDrawerMask" onclick="closeMsgDrawer()"></div>
+
+<!-- Create message drawer -->
+<div class="g-drawer" id="msgDrawer" style="width:560px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">创建消息</span>
+    <button class="g-drawer-close" onclick="closeMsgDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 消息标题 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">消息标题</label>
+      <input class="g-input" id="msgTitle" placeholder="如：新品上线通知" />
+    </div>
+
+    <!-- 推送渠道 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">推送渠道</label>
+      <div style="display:flex;gap:8px;">
+        <span class="g-pill checked" onclick="selectMsgChannel(this)">站内信</span>
+        <span class="g-pill" onclick="selectMsgChannel(this)">短信</span>
+        <span class="g-pill" onclick="selectMsgChannel(this)">微信模板消息</span>
+      </div>
+    </div>
+
+    <!-- 目标人群 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">目标人群</label>
+      <select class="g-select" id="msgTargetSelect" onchange="selectMsgTarget(this)">
+        <option value="all">全部会员</option>
+        <option value="tag">按标签筛选</option>
+      </select>
+      <div id="msgTagSection" style="display:none;">
+        <div class="msg-tag-pills">
+          <span class="g-pill" onclick="toggleMsgTagPill(this)">高频客户</span>
+          <span class="g-pill" onclick="toggleMsgTagPill(this)">新客</span>
+          <span class="g-pill" onclick="toggleMsgTagPill(this)">沉睡客户</span>
+          <span class="g-pill" onclick="toggleMsgTagPill(this)">流失客户</span>
+          <span class="g-pill" onclick="toggleMsgTagPill(this)">午餐常客</span>
+          <span class="g-pill" onclick="toggleMsgTagPill(this)">大额消费</span>
+        </div>
+        <div class="msg-reach" id="msgReach">
+          <i data-lucide="users" style="width:14px;height:14px;"></i>
+          <span>预计触达 456人</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 消息内容 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">消息内容</label>
+      <textarea class="g-textarea" id="msgContent" rows="5" placeholder="支持变量：{name}姓名 {level}等级"></textarea>
+      <div class="g-hint">可使用变量实现个性化推送</div>
+    </div>
+
+    <!-- 发送时间 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">发送时间</label>
+      <div style="display:flex;gap:8px;">
+        <span class="g-pill checked" onclick="selectMsgSendTime(this,'now')">立即发送</span>
+        <span class="g-pill" onclick="selectMsgSendTime(this,'scheduled')">定时发送</span>
+      </div>
+      <div id="msgScheduleTime" style="display:none;margin-top:10px;">
+        <input class="g-input" type="datetime-local" style="width:240px;" />
+      </div>
+    </div>
+
+    <!-- 选择模板 -->
+    <div class="g-form-group">
+      <a class="msg-tpl-link" onclick="switchMsgTab(document.querySelectorAll('.g-seg-item')[1],'tpl');closeMsgDrawer();">
+        <i data-lucide="file-text" style="width:14px;height:14px;"></i>
+        从模板选择
+      </a>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeMsgDrawer()">存为草稿</button>
+    <button class="g-btn g-btn-primary" onclick="closeMsgDrawer()">发送</button>
+  </div>
+</div>
+
+<script>
+/* Tab switching */
+function switchMsgTab(el, tab) {
+  document.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
+  el.classList.add('active');
+  document.getElementById('msgTabList').style.display = tab === 'list' ? '' : 'none';
+  document.getElementById('msgTabTpl').style.display = tab === 'tpl' ? '' : 'none';
+}
+
+/* Drawer open/close */
+function openMsgDrawer() {
+  document.getElementById('msgDrawerMask').classList.add('open');
+  document.getElementById('msgDrawer').classList.add('open');
+}
+function closeMsgDrawer() {
+  document.getElementById('msgDrawerMask').classList.remove('open');
+  document.getElementById('msgDrawer').classList.remove('open');
+}
+
+/* Channel pill: single select */
+function selectMsgChannel(el) {
+  var pills = el.parentElement.querySelectorAll('.g-pill');
+  pills.forEach(function(p){ p.classList.remove('checked'); });
+  el.classList.add('checked');
+}
+
+/* Target audience */
+function selectMsgTarget(el) {
+  var section = document.getElementById('msgTagSection');
+  section.style.display = el.value === 'tag' ? '' : 'none';
+}
+
+/* Tag pill toggle (multi-select) */
+function toggleMsgTagPill(el) {
+  el.classList.toggle('checked');
+  var count = el.parentElement.querySelectorAll('.g-pill.checked').length;
+  var reachMap = [0, 456, 712, 980, 1240, 1580, 1860];
+  var reach = reachMap[count] || 0;
+  document.getElementById('msgReach').querySelector('span').textContent = '预计触达 ' + reach + '人';
+}
+
+/* Send time pill: single select */
+function selectMsgSendTime(el, mode) {
+  var pills = el.parentElement.querySelectorAll('.g-pill');
+  pills.forEach(function(p){ p.classList.remove('checked'); });
+  el.classList.add('checked');
+  document.getElementById('msgScheduleTime').style.display = mode === 'scheduled' ? '' : 'none';
+}
+
+/* Use template: pre-fill drawer */
+function useMsgTemplate(title, content) {
+  openMsgDrawer();
+  document.getElementById('msgTitle').value = title;
+  document.getElementById('msgContent').value = content;
+}
+
+if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mbr-points.html b/TakeoutSaaS.Prototypes/pages/mbr-points.html
new file mode 100644
index 0000000..54fcf62
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mbr-points.html
@@ -0,0 +1,771 @@
+<!-- 积分商城页 -->
+<style>
+  .page-pt { max-width:1100px; }
+
+  /* 分段 Tab */
+  .pt-seg { display:flex; background:#f5f5f5; border-radius:var(--g-radius); overflow:hidden; border:1px solid #e8e8e8; width:fit-content; margin-bottom:16px; }
+  .pt-seg-item {
+    padding:8px 28px; font-size:13px; cursor:pointer; color:var(--g-text-muted);
+    transition:all var(--g-transition); user-select:none; border-right:1px solid #e8e8e8;
+    background:transparent; border-top:none; border-bottom:none; border-left:none;
+  }
+  .pt-seg-item:last-child { border-right:none; }
+  .pt-seg-item:hover { color:var(--g-text-secondary); background:#f0f0f0; }
+  .pt-seg-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.06); }
+
+  /* 统计卡片 */
+  .pt-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+  .pt-stat-card {
+    background:#fff; border-radius:10px; padding:16px 20px;
+    box-shadow:var(--g-shadow-sm); transition:all var(--g-transition);
+  }
+  .pt-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .pt-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
+  .pt-stat-value { font-size:24px; font-weight:700; color:var(--g-text); }
+  .pt-stat-value.primary { color:var(--primary); }
+  .pt-stat-value.green { color:var(--g-success); }
+  .pt-stat-value.orange { color:var(--g-warning); }
+
+  /* 规则卡片 section 标题 */
+  .pt-section-hd {
+    font-size:15px; font-weight:600; color:var(--g-text);
+    padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
+  }
+
+  /* 规则行 */
+  .pt-rule-row {
+    display:flex; align-items:center; gap:12px; padding:14px 0;
+    border-bottom:1px solid #f5f5f5; font-size:13px; color:var(--g-text);
+  }
+  .pt-rule-row:last-child { border-bottom:none; }
+  .pt-rule-row .g-toggle { flex-shrink:0; }
+  .pt-rule-label { min-width:110px; font-weight:500; flex-shrink:0; }
+  .pt-rule-row input[type="number"] {
+    width:70px; height:32px; padding:0 8px; border:1px solid #d9d9d9; border-radius:var(--g-radius-sm);
+    font-size:13px; outline:none; text-align:center; transition:all var(--g-transition);
+  }
+  .pt-rule-row input[type="number"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
+  .pt-rule-text { color:var(--g-text-secondary); }
+
+  /* 有效期 pill */
+  .pt-expiry-pills { display:flex; gap:10px; margin-bottom:12px; }
+
+  /* 工具栏 */
+  .pt-toolbar {
+    display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;
+    box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff;
+  }
+  .pt-toolbar select,
+  .pt-toolbar input[type="text"] {
+    height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+    font-size:13px; outline:none; transition:all var(--g-transition); background:#fff;
+  }
+  .pt-toolbar select:focus,
+  .pt-toolbar input[type="text"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  /* 商品网格 */
+  .pt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
+  .pt-prod-card {
+    background:#fff; border-radius:10px; overflow:hidden;
+    box-shadow:var(--g-shadow-sm); transition:all var(--g-transition);
+  }
+  .pt-prod-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .pt-prod-card.pt-off { opacity:.55; }
+  .pt-prod-img {
+    width:100%; height:120px; background:#f0f0f0; display:flex;
+    align-items:center; justify-content:center; color:#ccc;
+  }
+  .pt-prod-bd { padding:14px 16px; }
+  .pt-prod-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
+  .pt-type-tag { font-size:11px; font-weight:500; padding:1px 6px; border-radius:4px; flex-shrink:0; }
+  .pt-type-tag.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
+  .pt-type-tag.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
+  .pt-type-tag.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
+  .pt-prod-price { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:6px; }
+  .pt-prod-price .pt-cash { font-size:13px; font-weight:500; color:var(--g-text-secondary); margin-left:4px; }
+  .pt-prod-meta { display:flex; gap:16px; font-size:12px; color:var(--g-text-muted); margin-bottom:10px; }
+  .pt-prod-ft {
+    display:flex; align-items:center; gap:6px; padding-top:10px;
+    border-top:1px solid #f5f5f5;
+  }
+  .pt-prod-ft .g-tag { margin-left:auto; }
+
+  /* 抽屉内上传占位 */
+  .pt-upload-placeholder {
+    width:100%; height:120px; border:2px dashed #d9d9d9; border-radius:var(--g-radius);
+    display:flex; flex-direction:column; align-items:center; justify-content:center;
+    color:var(--g-text-muted); font-size:13px; gap:6px; cursor:pointer;
+    transition:all var(--g-transition); background:var(--g-bg-subtle);
+  }
+  .pt-upload-placeholder:hover { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, #fff); }
+
+  /* 兑换方式 pill 组 */
+  .pt-exchange-pills { display:flex; gap:10px; }
+
+  /* 通知 pill 多选 */
+  .pt-notify-pills { display:flex; gap:10px; }
+  .pt-notify-pills .g-pill { position:relative; padding-left:24px; }
+  .pt-notify-pills .g-pill::before {
+    content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%);
+    width:12px; height:12px; border:1.5px solid #ccc; border-radius:3px; transition:all var(--g-transition);
+  }
+  .pt-notify-pills .g-pill.checked::before {
+    background:var(--primary); border-color:var(--primary);
+    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  }
+
+  /* 兑换记录表格 */
+  .pt-rec-status { display:inline-flex; align-items:center; gap:4px; font-size:12px; }
+  .pt-rec-status::before { content:''; width:6px; height:6px; border-radius:50%; }
+  .pt-rec-status.green::before { background:var(--g-success); }
+  .pt-rec-status.orange::before { background:var(--g-warning); }
+  .pt-rec-status.gray::before { background:#bbb; }
+  .pt-rec-status.red::before { background:var(--g-danger); }
+  .pt-rec-member { display:flex; flex-direction:column; gap:2px; }
+  .pt-rec-member-name { font-size:13px; font-weight:500; color:var(--g-text); }
+  .pt-rec-member-phone { font-size:12px; color:var(--g-text-muted); }
+
+  /* 保存栏 */
+  .pt-save-bar { margin-top:20px; display:flex; justify-content:flex-end; }
+</style>
+
+<div class="page-pt">
+  <!-- 分段 Tab -->
+  <div class="pt-seg">
+    <button class="pt-seg-item active" onclick="switchPtTab(this, 'rules')">积分规则</button>
+    <button class="pt-seg-item" onclick="switchPtTab(this, 'products')">兑换商品</button>
+    <button class="pt-seg-item" onclick="switchPtTab(this, 'records')">兑换记录</button>
+  </div>
+
+  <!-- ==================== TAB 1: 积分规则 ==================== -->
+  <div id="ptTabRules">
+
+    <!-- 统计卡片 -->
+    <div class="pt-stats">
+      <div class="pt-stat-card">
+        <div class="pt-stat-label">累计发放积分</div>
+        <div class="pt-stat-value primary">128,600</div>
+      </div>
+      <div class="pt-stat-card">
+        <div class="pt-stat-label">已兑换积分</div>
+        <div class="pt-stat-value orange">45,200</div>
+      </div>
+      <div class="pt-stat-card">
+        <div class="pt-stat-label">积分用户</div>
+        <div class="pt-stat-value">856人</div>
+      </div>
+      <div class="pt-stat-card">
+        <div class="pt-stat-label">兑换率</div>
+        <div class="pt-stat-value green">35.1%</div>
+      </div>
+    </div>
+
+    <!-- 积分获取规则 -->
+    <div class="g-card" style="margin-bottom:16px;">
+      <div class="pt-section-hd">积分获取规则</div>
+
+      <div class="pt-rule-row">
+        <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+        <span class="pt-rule-label">消费获取</span>
+        <span class="pt-rule-text">每消费</span>
+        <input type="number" value="1" min="0" placeholder="如：1">
+        <span class="pt-rule-text">元获得</span>
+        <input type="number" value="1" min="0" placeholder="如：1">
+        <span class="pt-rule-text">积分</span>
+      </div>
+
+      <div class="pt-rule-row">
+        <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+        <span class="pt-rule-label">评价奖励</span>
+        <span class="pt-rule-text">发表评价奖励</span>
+        <input type="number" value="10" min="0" placeholder="如：10">
+        <span class="pt-rule-text">积分</span>
+      </div>
+
+      <div class="pt-rule-row">
+        <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+        <span class="pt-rule-label">注册奖励</span>
+        <span class="pt-rule-text">新用户注册赠送</span>
+        <input type="number" value="100" min="0" placeholder="如：100">
+        <span class="pt-rule-text">积分</span>
+      </div>
+
+      <div class="pt-rule-row">
+        <div class="g-toggle" onclick="toggleSwitch(this)"></div>
+        <span class="pt-rule-label">签到奖励</span>
+        <span class="pt-rule-text">每日签到奖励</span>
+        <input type="number" value="5" min="0" placeholder="如：5">
+        <span class="pt-rule-text">积分</span>
+      </div>
+    </div>
+
+    <!-- 积分有效期 -->
+    <div class="g-card" style="margin-bottom:16px;">
+      <div class="pt-section-hd">积分有效期</div>
+
+      <div class="pt-expiry-pills">
+        <span class="g-pill" onclick="selectPtExpiry(this)">永久有效</span>
+        <span class="g-pill checked" onclick="selectPtExpiry(this)">按年清零</span>
+      </div>
+      <div class="g-hint" id="ptExpiryHint">每年12月31日清零当年获得的积分，请提前通知会员</div>
+    </div>
+
+    <!-- 保存按钮 -->
+    <div class="pt-save-bar">
+      <button class="g-btn g-btn-primary g-btn-lg">
+        <i data-lucide="save" style="width:15px;height:15px;"></i>保存规则
+      </button>
+    </div>
+  </div>
+
+  <!-- ==================== TAB 2: 兑换商品 ==================== -->
+  <div id="ptTabProducts" style="display:none;">
+
+    <!-- 工具栏 -->
+    <div class="pt-toolbar">
+      <select style="width:130px;">
+        <option value="">全部状态</option>
+        <option>上架</option>
+        <option>下架</option>
+      </select>
+      <input type="text" placeholder="搜索兑换商品" style="width:200px;">
+      <div style="flex:1;"></div>
+      <button class="g-btn g-btn-primary" onclick="openPtDrawer()">
+        <i data-lucide="plus" style="width:14px;height:14px;"></i>添加兑换商品
+      </button>
+    </div>
+
+    <!-- 商品网格 -->
+    <div class="pt-grid">
+
+      <!-- 商品1 -->
+      <div class="pt-prod-card">
+        <div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
+        <div class="pt-prod-bd">
+          <div class="pt-prod-name">可乐兑换券<span class="pt-type-tag blue">商品</span></div>
+          <div class="pt-prod-price">100积分</div>
+          <div class="pt-prod-meta">
+            <span>库存 50</span>
+            <span>已兑换 28</span>
+          </div>
+          <div class="pt-prod-ft">
+            <a class="g-action" onclick="openPtDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 商品2 -->
+      <div class="pt-prod-card">
+        <div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
+        <div class="pt-prod-bd">
+          <div class="pt-prod-name">凉拌黄瓜<span class="pt-type-tag blue">商品</span></div>
+          <div class="pt-prod-price">200积分</div>
+          <div class="pt-prod-meta">
+            <span>库存 30</span>
+            <span>已兑换 45</span>
+          </div>
+          <div class="pt-prod-ft">
+            <a class="g-action" onclick="openPtDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 商品3 -->
+      <div class="pt-prod-card">
+        <div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
+        <div class="pt-prod-bd">
+          <div class="pt-prod-name">满20减5券<span class="pt-type-tag green">优惠券</span></div>
+          <div class="pt-prod-price">300积分</div>
+          <div class="pt-prod-meta">
+            <span>库存 100</span>
+            <span>已兑换 67</span>
+          </div>
+          <div class="pt-prod-ft">
+            <a class="g-action" onclick="openPtDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 商品4 -->
+      <div class="pt-prod-card">
+        <div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
+        <div class="pt-prod-bd">
+          <div class="pt-prod-name">招牌奶茶<span class="pt-type-tag blue">商品</span></div>
+          <div class="pt-prod-price">500积分<span class="pt-cash">+ ¥3.00</span></div>
+          <div class="pt-prod-meta">
+            <span>库存 20</span>
+            <span>已兑换 12</span>
+          </div>
+          <div class="pt-prod-ft">
+            <a class="g-action" onclick="openPtDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 商品5 -->
+      <div class="pt-prod-card">
+        <div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
+        <div class="pt-prod-bd">
+          <div class="pt-prod-name">双人套餐券<span class="pt-type-tag green">优惠券</span></div>
+          <div class="pt-prod-price">1000积分</div>
+          <div class="pt-prod-meta">
+            <span>库存 10</span>
+            <span>已兑换 8</span>
+          </div>
+          <div class="pt-prod-ft">
+            <a class="g-action" onclick="openPtDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 商品6：已下架 -->
+      <div class="pt-prod-card pt-off">
+        <div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
+        <div class="pt-prod-bd">
+          <div class="pt-prod-name">定制保温杯<span class="pt-type-tag orange">实物</span></div>
+          <div class="pt-prod-price">2000积分</div>
+          <div class="pt-prod-meta">
+            <span>库存 0</span>
+            <span>已兑换 15</span>
+          </div>
+          <div class="pt-prod-ft">
+            <a class="g-action" onclick="openPtDrawer()">编辑</a>
+            <a class="g-action">上架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-gray">下架</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- ==================== TAB 3: 兑换记录 ==================== -->
+  <div id="ptTabRecords" style="display:none;">
+
+    <!-- 筛选工具栏 -->
+    <div class="pt-toolbar">
+      <select style="width:120px;">
+        <option value="">全部类型</option>
+        <option>兑换商品</option>
+        <option>兑换优惠券</option>
+        <option>兑换实物</option>
+      </select>
+      <select style="width:120px;">
+        <option value="">全部状态</option>
+        <option>待领取</option>
+        <option>已发放</option>
+        <option>已完成</option>
+        <option>已取消</option>
+      </select>
+      <input type="text" placeholder="搜索会员/商品名称" style="width:200px;">
+      <div style="flex:1;"></div>
+      <button class="g-btn g-btn-sm"><i data-lucide="download" style="width:13px;height:13px;"></i>导出</button>
+    </div>
+
+    <!-- 统计 -->
+    <div class="pt-stats" style="grid-template-columns:repeat(3,1fr);">
+      <div class="pt-stat-card">
+        <div class="pt-stat-label">今日兑换</div>
+        <div class="pt-stat-value primary">12</div>
+      </div>
+      <div class="pt-stat-card">
+        <div class="pt-stat-label">待领取实物</div>
+        <div class="pt-stat-value orange">3</div>
+      </div>
+      <div class="pt-stat-card">
+        <div class="pt-stat-label">本月消耗积分</div>
+        <div class="pt-stat-value">8,400</div>
+      </div>
+    </div>
+
+    <!-- 兑换记录表格 -->
+    <div class="g-card" style="padding:0;">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>兑换单号</th>
+            <th>会员</th>
+            <th>兑换商品</th>
+            <th>类型</th>
+            <th>消耗积分</th>
+            <th>兑换时间</th>
+            <th>状态</th>
+            <th style="width:100px;">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PT20260212001</td>
+            <td><div class="pt-rec-member"><span class="pt-rec-member-name">张三</span><span class="pt-rec-member-phone">138****6789</span></div></td>
+            <td>定制保温杯</td>
+            <td><span class="pt-type-tag orange">实物</span></td>
+            <td style="font-weight:600;">2,000</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 10:30</td>
+            <td><span class="pt-rec-status orange">待领取</span></td>
+            <td><a class="g-action" onclick="openPtVerifyDrawer()">核销</a><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PT20260212002</td>
+            <td><div class="pt-rec-member"><span class="pt-rec-member-name">李四</span><span class="pt-rec-member-phone">139****1234</span></div></td>
+            <td>可乐兑换券</td>
+            <td><span class="pt-type-tag blue">商品</span></td>
+            <td style="font-weight:600;">100</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 09:45</td>
+            <td><span class="pt-rec-status green">已发放</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PT20260211003</td>
+            <td><div class="pt-rec-member"><span class="pt-rec-member-name">王五</span><span class="pt-rec-member-phone">137****5678</span></div></td>
+            <td>满20减5券</td>
+            <td><span class="pt-type-tag green">优惠券</span></td>
+            <td style="font-weight:600;">300</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 18:20</td>
+            <td><span class="pt-rec-status green">已发放</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PT20260211004</td>
+            <td><div class="pt-rec-member"><span class="pt-rec-member-name">赵六</span><span class="pt-rec-member-phone">136****4321</span></div></td>
+            <td>定制保温杯</td>
+            <td><span class="pt-type-tag orange">实物</span></td>
+            <td style="font-weight:600;">2,000</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 14:10</td>
+            <td><span class="pt-rec-status orange">待领取</span></td>
+            <td><a class="g-action" onclick="openPtVerifyDrawer()">核销</a><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PT20260210005</td>
+            <td><div class="pt-rec-member"><span class="pt-rec-member-name">孙七</span><span class="pt-rec-member-phone">135****8765</span></div></td>
+            <td>招牌奶茶</td>
+            <td><span class="pt-type-tag blue">商品</span></td>
+            <td style="font-weight:600;">500</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 16:55</td>
+            <td><span class="pt-rec-status green">已完成</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PT20260210006</td>
+            <td><div class="pt-rec-member"><span class="pt-rec-member-name">周八</span><span class="pt-rec-member-phone">133****2222</span></div></td>
+            <td>双人套餐券</td>
+            <td><span class="pt-type-tag green">优惠券</span></td>
+            <td style="font-weight:600;">1,000</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 11:30</td>
+            <td><span class="pt-rec-status gray">已取消</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PT20260209007</td>
+            <td><div class="pt-rec-member"><span class="pt-rec-member-name">吴九</span><span class="pt-rec-member-phone">131****9999</span></div></td>
+            <td>定制保温杯</td>
+            <td><span class="pt-type-tag orange">实物</span></td>
+            <td style="font-weight:600;">2,000</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-09 09:00</td>
+            <td><span class="pt-rec-status green">已完成</span></td>
+            <td><a class="g-action">详情</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="g-pagination" style="margin-top:16px;">
+      <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn">2</button>
+      <button class="g-page-btn">3</button>
+      <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+    </div>
+  </div>
+</div>
+
+<!-- ==================== 添加/编辑兑换商品抽屉 ==================== -->
+<div class="g-drawer-mask" id="ptDrawerMask" onclick="closePtDrawer()"></div>
+<div class="g-drawer" id="ptDrawer" style="width:520px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">添加兑换商品</span>
+    <button class="g-drawer-close" onclick="closePtDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+
+    <!-- 兑换类型 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">兑换类型</label>
+      <div class="pt-exchange-pills">
+        <span class="g-pill checked" onclick="selectPtRedeemType(this, 'product')">兑换商品</span>
+        <span class="g-pill" onclick="selectPtRedeemType(this, 'coupon')">兑换优惠券</span>
+        <span class="g-pill" onclick="selectPtRedeemType(this, 'physical')">兑换实物</span>
+      </div>
+      <div class="g-hint" id="ptRedeemHintProduct">顾客兑换后系统自动发放商品兑换券，下单时该商品免费</div>
+      <div class="g-hint" id="ptRedeemHintCoupon" style="display:none;">顾客兑换后优惠券直接发到券包</div>
+      <div class="g-hint" id="ptRedeemHintPhysical" style="display:none;">实物商品需到店自提，不走线上履约</div>
+    </div>
+
+    <!-- 兑换商品：选择商品 -->
+    <div id="ptFieldProduct">
+      <div class="g-form-group">
+        <label class="g-form-label required">关联商品</label>
+        <div id="ptSelectedProduct" style="display:none;padding:10px 12px;background:#f8f9fb;border-radius:8px;border:1px solid #e5e7eb;margin-bottom:8px;display:flex;align-items:center;gap:10px;">
+          <div style="width:40px;height:40px;background:#eee;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#bbb;flex-shrink:0;"><i data-lucide="image" style="width:18px;height:18px;"></i></div>
+          <div style="flex:1;">
+            <div style="font-size:13px;font-weight:500;">招牌奶茶</div>
+            <div style="font-size:12px;color:var(--g-text-muted);">原价 ¥15.00</div>
+          </div>
+          <button style="background:none;border:none;color:var(--g-text-muted);cursor:pointer;" onclick="this.parentElement.style.display='none'"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+        </div>
+        <button class="g-btn g-btn-sm" onclick="openProductPicker({title:'选择兑换商品',subtitle:'积分商城',onConfirm:function(){}})"><i data-lucide="plus" style="width:13px;height:13px;"></i>选择商品/套餐</button>
+        <div class="g-hint">兑换后系统自动生成该商品的兑换券</div>
+      </div>
+    </div>
+
+    <!-- 兑换优惠券：选择券 -->
+    <div id="ptFieldCoupon" style="display:none;">
+      <div class="g-form-group">
+        <label class="g-form-label required">关联优惠券</label>
+        <select class="g-select" style="width:100%;">
+          <option value="">请选择优惠券</option>
+          <option>新用户满减券（满50减15）</option>
+          <option>全场8折券</option>
+          <option>免配送费券</option>
+          <option>满30减5券</option>
+          <option>满80减20券</option>
+        </select>
+        <div class="g-hint">选择已在优惠券管理中创建的券，兑换后直接发到顾客券包</div>
+      </div>
+    </div>
+
+    <!-- 兑换实物：名称+描述 -->
+    <div id="ptFieldPhysical" style="display:none;">
+      <div class="g-form-group">
+        <label class="g-form-label required">实物名称</label>
+        <input class="g-input" placeholder="如：定制保温杯、品牌帆布袋">
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label">领取方式</label>
+        <div style="display:flex;gap:8px;">
+          <span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">到店自提</span>
+          <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">快递配送</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 商品名称（展示名） -->
+    <div class="g-form-group">
+      <label class="g-form-label required">展示名称</label>
+      <input class="g-input" placeholder="如：招牌奶茶兑换券、满50减15券">
+      <div class="g-hint">顾客在积分商城看到的名称</div>
+    </div>
+
+    <!-- 商品图片 -->
+    <div class="g-form-group">
+      <label class="g-form-label">展示图片</label>
+      <div class="pt-upload-placeholder">
+        <i data-lucide="upload-cloud" style="width:28px;height:28px;"></i>
+        <span>点击上传商品图片</span>
+      </div>
+    </div>
+
+    <!-- 兑换方式 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">兑换积分</label>
+      <div class="pt-exchange-pills" style="margin-bottom:8px;">
+        <span class="g-pill checked" onclick="selectPtExchangeType(this, 'points')">纯积分</span>
+        <span class="g-pill" onclick="selectPtExchangeType(this, 'mixed')">积分+现金</span>
+      </div>
+    </div>
+
+    <!-- 所需积分 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">所需积分</label>
+      <input class="g-input" type="number" placeholder="请输入所需积分数量" min="0">
+    </div>
+
+    <!-- 现金部分（默认隐藏） -->
+    <div class="g-form-group" id="ptCashField" style="display:none;">
+      <label class="g-form-label required">现金部分</label>
+      <input class="g-input" type="number" placeholder="请输入需额外支付的金额" min="0" step="0.01">
+      <div class="g-hint">用户兑换时需额外支付的现金金额</div>
+    </div>
+
+    <!-- 库存数量 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">库存数量</label>
+      <input class="g-input" type="number" placeholder="请输入库存数量" min="0">
+    </div>
+
+    <!-- 兑换限制 -->
+    <div class="g-form-group">
+      <label class="g-form-label">兑换限制</label>
+      <div style="display:flex; align-items:center; gap:8px;">
+        <span style="font-size:13px; color:var(--g-text-secondary);">每人限兑</span>
+        <input class="g-input" type="number" placeholder="不限" min="0" style="width:100px;">
+        <span style="font-size:13px; color:var(--g-text-secondary);">次</span>
+      </div>
+      <div class="g-hint">留空或填0表示不限制兑换次数</div>
+    </div>
+
+    <!-- 商品描述 -->
+    <div class="g-form-group">
+      <label class="g-form-label">商品描述</label>
+      <textarea class="g-textarea" rows="4" placeholder="请输入商品描述信息，如使用规则、有效期等"></textarea>
+    </div>
+
+    <!-- 到账通知 -->
+    <div class="g-form-group">
+      <label class="g-form-label">到账通知</label>
+      <div class="pt-notify-pills" id="ptNotifyPills">
+        <span class="g-pill checked" onclick="togglePill(this)">站内消息</span>
+        <span class="g-pill" onclick="togglePill(this)">短信通知</span>
+      </div>
+      <div class="g-hint">选择兑换成功后通知顾客的方式，实物商品建议开启短信通知</div>
+    </div>
+
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closePtDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">保存</button>
+  </div>
+</div>
+
+<!-- ==================== 核销抽屉 ==================== -->
+<div class="g-drawer-mask" id="ptVerifyMask" onclick="closePtVerifyDrawer()"></div>
+<div class="g-drawer" id="ptVerifyDrawer" style="width:440px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">兑换核销</span>
+    <button class="g-drawer-close" onclick="closePtVerifyDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+
+    <!-- 兑换信息 -->
+    <div style="background:#f8f9fb;border-radius:10px;padding:16px;margin-bottom:20px;">
+      <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
+        <div style="width:48px;height:48px;background:#eee;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#bbb;flex-shrink:0;"><i data-lucide="image" style="width:22px;height:22px;"></i></div>
+        <div>
+          <div style="font-size:14px;font-weight:600;color:var(--g-text);margin-bottom:2px;">定制保温杯</div>
+          <span class="pt-type-tag orange">实物</span>
+        </div>
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px;">
+        <div><span style="color:var(--g-text-muted);">兑换单号</span><div style="font-family:monospace;margin-top:2px;">PT20260212001</div></div>
+        <div><span style="color:var(--g-text-muted);">消耗积分</span><div style="font-weight:600;color:var(--primary);margin-top:2px;">2,000</div></div>
+        <div><span style="color:var(--g-text-muted);">兑换会员</span><div style="margin-top:2px;">张三 (138****6789)</div></div>
+        <div><span style="color:var(--g-text-muted);">兑换时间</span><div style="margin-top:2px;">2026-02-12 10:30</div></div>
+      </div>
+    </div>
+
+    <!-- 核销方式 -->
+    <div class="g-form-group">
+      <label class="g-form-label">核销方式</label>
+      <div style="display:flex;gap:10px;">
+        <span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">扫码核销</span>
+        <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">手动核销</span>
+      </div>
+    </div>
+
+    <!-- 备注 -->
+    <div class="g-form-group">
+      <label class="g-form-label">核销备注</label>
+      <textarea class="g-textarea" rows="2" placeholder="可选，如：顾客已到店领取"></textarea>
+    </div>
+
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closePtVerifyDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">确认核销</button>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchPtTab(el, tab) {
+    document.querySelectorAll('.pt-seg-item').forEach(function(item) { item.classList.remove('active'); });
+    el.classList.add('active');
+    document.getElementById('ptTabRules').style.display = tab === 'rules' ? '' : 'none';
+    document.getElementById('ptTabProducts').style.display = tab === 'products' ? '' : 'none';
+    document.getElementById('ptTabRecords').style.display = tab === 'records' ? '' : 'none';
+  }
+
+  /* Toggle 开关 */
+  function toggleSwitch(el) {
+    el.classList.toggle('on');
+  }
+
+  /* 有效期 pill 单选 */
+  function selectPtExpiry(el) {
+    document.querySelectorAll('.pt-expiry-pills .g-pill').forEach(function(p) { p.classList.remove('checked'); });
+    el.classList.add('checked');
+    var hint = document.getElementById('ptExpiryHint');
+    hint.style.display = el.textContent.trim() === '按年清零' ? '' : 'none';
+  }
+
+  /* 兑换类型切换（商品/优惠券/实物） */
+  function selectPtRedeemType(el, type) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+    el.classList.add('checked');
+    document.getElementById('ptFieldProduct').style.display = type === 'product' ? '' : 'none';
+    document.getElementById('ptFieldCoupon').style.display = type === 'coupon' ? '' : 'none';
+    document.getElementById('ptFieldPhysical').style.display = type === 'physical' ? '' : 'none';
+    document.getElementById('ptRedeemHintProduct').style.display = type === 'product' ? '' : 'none';
+    document.getElementById('ptRedeemHintCoupon').style.display = type === 'coupon' ? '' : 'none';
+    document.getElementById('ptRedeemHintPhysical').style.display = type === 'physical' ? '' : 'none';
+    /* 自动设置通知默认值：实物默认勾选短信 */
+    var pills = document.querySelectorAll('#ptNotifyPills .g-pill');
+    if (type === 'physical') {
+      pills.forEach(function(p) { p.classList.add('checked'); });
+    } else {
+      pills[0].classList.add('checked');
+      pills[1].classList.remove('checked');
+    }
+  }
+
+  /* 兑换方式 pill 单选（纯积分/积分+现金） */
+  function selectPtExchangeType(el, type) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+    el.classList.add('checked');
+    document.getElementById('ptCashField').style.display = type === 'mixed' ? '' : 'none';
+  }
+
+  /* 抽屉开关 */
+  function openPtDrawer() {
+    document.getElementById('ptDrawerMask').classList.add('open');
+    document.getElementById('ptDrawer').classList.add('open');
+  }
+  function closePtDrawer() {
+    document.getElementById('ptDrawerMask').classList.remove('open');
+    document.getElementById('ptDrawer').classList.remove('open');
+  }
+
+  /* 通知 pill 多选 */
+  function togglePill(el) {
+    el.classList.toggle('checked');
+  }
+
+  /* 核销抽屉 */
+  function openPtVerifyDrawer() {
+    document.getElementById('ptVerifyMask').classList.add('open');
+    document.getElementById('ptVerifyDrawer').classList.add('open');
+  }
+  function closePtVerifyDrawer() {
+    document.getElementById('ptVerifyMask').classList.remove('open');
+    document.getElementById('ptVerifyDrawer').classList.remove('open');
+  }
+
+  /* 初始化 Lucide 图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mbr-prepaid.html b/TakeoutSaaS.Prototypes/pages/mbr-prepaid.html
new file mode 100644
index 0000000..4776a7e
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mbr-prepaid.html
@@ -0,0 +1,463 @@
+<!-- 储值卡页 -->
+<style>
+  /* 分段 Tab */
+  .pv-tabs { display:flex; background:#f8f9fb; border-radius:8px; padding:3px; gap:2px; width:fit-content; margin-bottom:16px; }
+  .pv-tab { padding:7px 22px; border-radius:6px; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); border:none; background:none; font-weight:500; }
+  .pv-tab.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
+
+  /* 统计卡片 */
+  .pv-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+  .pv-stat-card { background:#fff; border-radius:10px; padding:16px 20px; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
+  .pv-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .pv-stat-label { font-size:13px; color:#9ca3af; margin-bottom:6px; }
+  .pv-stat-value { font-size:24px; font-weight:700; color:#1a1a2e; }
+  .pv-stat-value.green { color:var(--g-success); }
+  .pv-stat-value.orange { color:var(--g-warning); }
+
+  /* 方案卡片网格 */
+  .pv-plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
+  .pv-plan-card {
+    background:#fff; border-radius:12px; padding:0; overflow:hidden;
+    box-shadow:var(--g-shadow-sm); transition:var(--g-transition); position:relative;
+  }
+  .pv-plan-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .pv-plan-card.disabled { opacity:0.5; }
+
+  .pv-plan-hd {
+    background:linear-gradient(135deg, hsl(212,100%,45%) 0%, hsl(212,80%,55%) 100%);
+    padding:24px 20px 18px; color:#fff; position:relative; overflow:hidden;
+  }
+  .pv-plan-hd::after {
+    content:''; position:absolute; right:-20px; top:-20px;
+    width:80px; height:80px; border-radius:50%;
+    background:rgba(255,255,255,0.08);
+  }
+  .pv-plan-amount { font-size:28px; font-weight:700; letter-spacing:-0.5px; }
+  .pv-plan-amount span { font-size:15px; font-weight:400; opacity:0.8; }
+  .pv-plan-gift {
+    display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px;
+    background:rgba(255,255,255,0.2); font-size:13px; font-weight:600; color:#fff;
+  }
+  .pv-plan-gift .pv-gift-num { color:#ffd666; }
+  .pv-plan-effective {
+    margin-top:8px; font-size:13px; opacity:0.85;
+  }
+
+  .pv-plan-bd { padding:14px 20px; }
+  .pv-plan-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
+  .pv-plan-meta-item { font-size:12px; color:var(--g-text-muted); }
+  .pv-plan-meta-item span { font-weight:600; color:var(--g-text-secondary); }
+
+  .pv-plan-ft { display:flex; align-items:center; justify-content:space-between; padding:0 20px 14px; }
+  .pv-plan-actions { display:flex; gap:6px; }
+
+  /* 工具栏 */
+  .pv-toolbar {
+    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
+    margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px;
+    padding:10px 14px; background:#fff;
+  }
+  .pv-toolbar input[type="text"],
+  .pv-toolbar input[type="date"] {
+    height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+    font-size:13px; outline:none; transition:var(--g-transition); background:#fff;
+  }
+  .pv-toolbar input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  /* 分页 */
+  .pv-pagination {
+    display:flex; align-items:center; justify-content:flex-end;
+    padding:12px 16px; gap:6px; font-size:13px; color:#4b5563;
+    background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm);
+  }
+
+  /* 抽屉内赠送比例提示 */
+  .pv-ratio-hint {
+    display:inline-flex; align-items:center; gap:4px;
+    padding:4px 10px; border-radius:6px; font-size:12px; font-weight:500;
+    background:color-mix(in srgb, var(--primary) 8%, #fff);
+    color:var(--primary); margin-top:6px;
+  }
+
+  .pv-section-hd {
+    font-size:15px; font-weight:600; color:var(--g-text);
+    padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
+  }
+</style>
+
+<div class="page-pv">
+  <!-- 分段 Tab -->
+  <div class="pv-tabs">
+    <button class="pv-tab active" onclick="switchPvTab(this, 'plans')">充值方案</button>
+    <button class="pv-tab" onclick="switchPvTab(this, 'records')">充值记录</button>
+  </div>
+
+  <!-- ========== TAB 1: 充值方案 ========== -->
+  <div id="pvTabPlans">
+    <!-- 统计卡片 -->
+    <div class="pv-stats">
+      <div class="pv-stat-card">
+        <div class="pv-stat-label">储值总额</div>
+        <div class="pv-stat-value">¥186,500</div>
+      </div>
+      <div class="pv-stat-card">
+        <div class="pv-stat-label">赠金总额</div>
+        <div class="pv-stat-value orange">¥18,650</div>
+      </div>
+      <div class="pv-stat-card">
+        <div class="pv-stat-label">本月充值</div>
+        <div class="pv-stat-value green">¥12,800</div>
+      </div>
+      <div class="pv-stat-card">
+        <div class="pv-stat-label">储值用户</div>
+        <div class="pv-stat-value">326人</div>
+      </div>
+    </div>
+
+    <!-- 方案卡片 -->
+    <div class="pv-section-hd">充值方案</div>
+    <div class="pv-plan-grid">
+
+      <!-- 方案1: 100送10 -->
+      <div class="pv-plan-card">
+        <div class="pv-plan-hd">
+          <div class="pv-plan-amount"><span>充</span> ¥100</div>
+          <div class="pv-plan-gift">送 <span class="pv-gift-num">¥10</span></div>
+          <div class="pv-plan-effective">到账 ¥110</div>
+        </div>
+        <div class="pv-plan-bd">
+          <div class="pv-plan-meta">
+            <span class="pv-plan-meta-item">累计充值 <span>286次</span></span>
+            <span class="pv-plan-meta-item">合计 <span>¥28,600</span></span>
+          </div>
+        </div>
+        <div class="pv-plan-ft">
+          <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+          <div class="pv-plan-actions">
+            <a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
+            <a class="g-action g-action-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 方案2: 200送30 -->
+      <div class="pv-plan-card">
+        <div class="pv-plan-hd">
+          <div class="pv-plan-amount"><span>充</span> ¥200</div>
+          <div class="pv-plan-gift">送 <span class="pv-gift-num">¥30</span></div>
+          <div class="pv-plan-effective">到账 ¥230</div>
+        </div>
+        <div class="pv-plan-bd">
+          <div class="pv-plan-meta">
+            <span class="pv-plan-meta-item">累计充值 <span>198次</span></span>
+            <span class="pv-plan-meta-item">合计 <span>¥39,600</span></span>
+          </div>
+        </div>
+        <div class="pv-plan-ft">
+          <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+          <div class="pv-plan-actions">
+            <a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
+            <a class="g-action g-action-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 方案3: 300送50 -->
+      <div class="pv-plan-card">
+        <div class="pv-plan-hd">
+          <div class="pv-plan-amount"><span>充</span> ¥300</div>
+          <div class="pv-plan-gift">送 <span class="pv-gift-num">¥50</span></div>
+          <div class="pv-plan-effective">到账 ¥350</div>
+        </div>
+        <div class="pv-plan-bd">
+          <div class="pv-plan-meta">
+            <span class="pv-plan-meta-item">累计充值 <span>145次</span></span>
+            <span class="pv-plan-meta-item">合计 <span>¥43,500</span></span>
+          </div>
+        </div>
+        <div class="pv-plan-ft">
+          <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+          <div class="pv-plan-actions">
+            <a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
+            <a class="g-action g-action-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 方案4: 500送100 -->
+      <div class="pv-plan-card">
+        <div class="pv-plan-hd">
+          <div class="pv-plan-amount"><span>充</span> ¥500</div>
+          <div class="pv-plan-gift">送 <span class="pv-gift-num">¥100</span></div>
+          <div class="pv-plan-effective">到账 ¥600</div>
+        </div>
+        <div class="pv-plan-bd">
+          <div class="pv-plan-meta">
+            <span class="pv-plan-meta-item">累计充值 <span>92次</span></span>
+            <span class="pv-plan-meta-item">合计 <span>¥46,000</span></span>
+          </div>
+        </div>
+        <div class="pv-plan-ft">
+          <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+          <div class="pv-plan-actions">
+            <a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
+            <a class="g-action g-action-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 方案5: 1000送250 -->
+      <div class="pv-plan-card">
+        <div class="pv-plan-hd">
+          <div class="pv-plan-amount"><span>充</span> ¥1000</div>
+          <div class="pv-plan-gift">送 <span class="pv-gift-num">¥250</span></div>
+          <div class="pv-plan-effective">到账 ¥1250</div>
+        </div>
+        <div class="pv-plan-bd">
+          <div class="pv-plan-meta">
+            <span class="pv-plan-meta-item">累计充值 <span>38次</span></span>
+            <span class="pv-plan-meta-item">合计 <span>¥38,000</span></span>
+          </div>
+        </div>
+        <div class="pv-plan-ft">
+          <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+          <div class="pv-plan-actions">
+            <a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
+            <a class="g-action g-action-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 方案6: 2000送600 (已停用) -->
+      <div class="pv-plan-card disabled">
+        <div class="pv-plan-hd" style="background:linear-gradient(135deg, #9ca3af 0%, #b0b8c4 100%);">
+          <div class="pv-plan-amount"><span>充</span> ¥2000</div>
+          <div class="pv-plan-gift">送 <span class="pv-gift-num" style="color:#ddd;">¥600</span></div>
+          <div class="pv-plan-effective">到账 ¥2600</div>
+        </div>
+        <div class="pv-plan-bd">
+          <div class="pv-plan-meta">
+            <span class="pv-plan-meta-item">累计充值 <span>5次</span></span>
+            <span class="pv-plan-meta-item">合计 <span>¥10,000</span></span>
+          </div>
+        </div>
+        <div class="pv-plan-ft">
+          <div class="g-toggle" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+          <div class="pv-plan-actions">
+            <a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
+            <a class="g-action g-action-danger">删除</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <button class="g-btn g-btn-primary" onclick="openPvDrawer('create')">
+      <i data-lucide="plus" style="width:14px;height:14px;"></i>添加充值方案
+    </button>
+  </div>
+
+  <!-- ========== TAB 2: 充值记录 ========== -->
+  <div id="pvTabRecords" style="display:none;">
+    <!-- 工具栏 -->
+    <div class="pv-toolbar">
+      <input type="date" value="2026-01-01" />
+      <span style="color:var(--g-text-muted); font-size:13px;">至</span>
+      <input type="date" value="2026-02-12" />
+      <input type="text" placeholder="搜索会员姓名/手机号" style="width:200px;" />
+      <div style="flex:1;"></div>
+      <button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;"></i>导出</button>
+    </div>
+
+    <!-- 表格 -->
+    <div class="g-card" style="padding:0;">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>充值单号</th>
+            <th>会员</th>
+            <th>手机号</th>
+            <th>充值金额</th>
+            <th>赠送金额</th>
+            <th>到账金额</th>
+            <th>支付方式</th>
+            <th>充值时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260212001</td>
+            <td>张三</td>
+            <td>138****6789</td>
+            <td style="font-weight:600;">¥500.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥100.00</td>
+            <td style="font-weight:600;">¥600.00</td>
+            <td><span class="g-tag g-tag-green">微信支付</span></td>
+            <td>2026-02-12 14:32</td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260212002</td>
+            <td>李四</td>
+            <td>139****2345</td>
+            <td style="font-weight:600;">¥300.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥50.00</td>
+            <td style="font-weight:600;">¥350.00</td>
+            <td><span class="g-tag g-tag-green">微信支付</span></td>
+            <td>2026-02-12 11:18</td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260211003</td>
+            <td>王五</td>
+            <td>136****8901</td>
+            <td style="font-weight:600;">¥1000.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥250.00</td>
+            <td style="font-weight:600;">¥1250.00</td>
+            <td><span class="g-tag g-tag-blue">支付宝</span></td>
+            <td>2026-02-11 19:45</td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260211004</td>
+            <td>赵六</td>
+            <td>158****4567</td>
+            <td style="font-weight:600;">¥200.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥30.00</td>
+            <td style="font-weight:600;">¥230.00</td>
+            <td><span class="g-tag g-tag-green">微信支付</span></td>
+            <td>2026-02-11 16:22</td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260210005</td>
+            <td>孙七</td>
+            <td>137****3456</td>
+            <td style="font-weight:600;">¥100.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥10.00</td>
+            <td style="font-weight:600;">¥110.00</td>
+            <td><span class="g-tag g-tag-orange">现金</span></td>
+            <td>2026-02-10 12:08</td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260210006</td>
+            <td>周八</td>
+            <td>155****7890</td>
+            <td style="font-weight:600;">¥500.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥100.00</td>
+            <td style="font-weight:600;">¥600.00</td>
+            <td><span class="g-tag g-tag-blue">支付宝</span></td>
+            <td>2026-02-10 10:35</td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260209007</td>
+            <td>吴九</td>
+            <td>132****1234</td>
+            <td style="font-weight:600;">¥300.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥50.00</td>
+            <td style="font-weight:600;">¥350.00</td>
+            <td><span class="g-tag g-tag-green">微信支付</span></td>
+            <td>2026-02-09 20:15</td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace; font-size:12px;">CZ20260209008</td>
+            <td>郑十</td>
+            <td>186****5678</td>
+            <td style="font-weight:600;">¥200.00</td>
+            <td style="color:var(--g-warning); font-weight:500;">¥30.00</td>
+            <td style="font-weight:600;">¥230.00</td>
+            <td><span class="g-tag g-tag-green">微信支付</span></td>
+            <td>2026-02-09 09:50</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pv-pagination" style="margin-top:16px;">
+      <span>共 86 条</span>
+      <button class="g-page-btn">&lt;</button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn">2</button>
+      <button class="g-page-btn">3</button>
+      <button class="g-page-btn">...</button>
+      <button class="g-page-btn">11</button>
+      <button class="g-page-btn">&gt;</button>
+      <span style="margin-left:8px;">8 条/页</span>
+    </div>
+  </div>
+</div>
+
+<!-- 添加/编辑充值方案抽屉 -->
+<div class="g-drawer-mask" id="pvDrawerMask" onclick="closePvDrawer()"></div>
+<div class="g-drawer" id="pvDrawer" style="width:480px">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title" id="pvDrawerTitle">添加充值方案</div>
+    <button class="g-drawer-close" onclick="closePvDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">充值金额</label>
+      <input class="g-input" id="pvAmountInput" type="number" placeholder="如：100" oninput="calcPvRatio()" />
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">赠送金额</label>
+      <input class="g-input" id="pvGiftInput" type="number" placeholder="如：10" oninput="calcPvRatio()" />
+      <div class="pv-ratio-hint" id="pvRatioHint">
+        <i data-lucide="info" style="width:13px;height:13px;"></i>
+        <span id="pvRatioText">赠送比例 --</span>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">排序</label>
+      <input class="g-input" type="number" placeholder="数字越小越靠前，如：1" style="width:160px;" />
+      <div class="g-hint">数字越小排序越靠前</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">启用状态</label>
+      <div style="display:flex; align-items:center; gap:10px;">
+        <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
+        <span style="font-size:13px; color:var(--g-text-secondary);">启用后会员可选择此方案充值</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closePvDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closePvDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+/* Tab 切换 */
+function switchPvTab(el, tab) {
+  document.querySelectorAll('.pv-tab').forEach(function(t) { t.classList.remove('active'); });
+  el.classList.add('active');
+  document.getElementById('pvTabPlans').style.display = tab === 'plans' ? '' : 'none';
+  document.getElementById('pvTabRecords').style.display = tab === 'records' ? '' : 'none';
+}
+
+/* 抽屉开关 */
+function openPvDrawer(mode) {
+  document.getElementById('pvDrawerMask').classList.add('open');
+  document.getElementById('pvDrawer').classList.add('open');
+  document.getElementById('pvDrawerTitle').textContent = mode === 'edit' ? '编辑充值方案' : '添加充值方案';
+  if (window.lucide) lucide.createIcons();
+}
+function closePvDrawer() {
+  document.getElementById('pvDrawerMask').classList.remove('open');
+  document.getElementById('pvDrawer').classList.remove('open');
+}
+
+/* Toggle 开关 */
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+
+/* 赠送比例自动计算 */
+function calcPvRatio() {
+  var amount = parseFloat(document.getElementById('pvAmountInput').value) || 0;
+  var gift = parseFloat(document.getElementById('pvGiftInput').value) || 0;
+  var text = '赠送比例 --';
+  if (amount > 0 && gift > 0) {
+    var ratio = ((gift / amount) * 100).toFixed(1);
+    text = '赠送比例 ' + ratio + '%';
+  }
+  document.getElementById('pvRatioText').textContent = text;
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mkt-calendar.html b/TakeoutSaaS.Prototypes/pages/mkt-calendar.html
new file mode 100644
index 0000000..366cda0
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mkt-calendar.html
@@ -0,0 +1,284 @@
+<!-- 营销日历页 -->
+<style>
+  .page-mc { max-width:1100px; }
+
+  /* 顶部控制栏 */
+  .mc-header {
+    display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
+    background:#fff; border-radius:10px; padding:14px 20px; box-shadow:var(--g-shadow-sm);
+  }
+  .mc-month-nav { display:flex; align-items:center; gap:12px; }
+  .mc-month-nav button {
+    width:32px; height:32px; border:1px solid #e5e7eb; border-radius:8px; background:#fff;
+    cursor:pointer; display:flex; align-items:center; justify-content:center;
+    transition:all var(--g-transition); color:var(--g-text-secondary);
+  }
+  .mc-month-nav button:hover { border-color:var(--primary); color:var(--primary); }
+  .mc-month-title { font-size:18px; font-weight:700; color:var(--g-text); min-width:140px; text-align:center; }
+  .mc-legend { display:flex; gap:14px; font-size:12px; color:var(--g-text-secondary); }
+  .mc-legend-item { display:flex; align-items:center; gap:4px; }
+  .mc-legend-dot { width:10px; height:10px; border-radius:3px; }
+
+  /* 统计 */
+  .mc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+  .mc-stat-card {
+    background:#fff; border-radius:10px; padding:14px 18px;
+    box-shadow:var(--g-shadow-sm); transition:all var(--g-transition);
+  }
+  .mc-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .mc-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:4px; }
+  .mc-stat-value { font-size:20px; font-weight:700; color:var(--g-text); }
+  .mc-stat-value.primary { color:var(--primary); }
+  .mc-stat-value.orange { color:var(--g-warning); }
+  .mc-stat-value.green { color:var(--g-success); }
+
+  /* 甘特图容器 */
+  .mc-gantt {
+    background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden;
+  }
+
+  /* 日期头 */
+  .mc-dates {
+    display:grid; grid-template-columns:180px repeat(28, 1fr);
+    border-bottom:1px solid #e5e7eb; background:#f8f9fb;
+  }
+  .mc-dates-label {
+    padding:10px 16px; font-size:12px; font-weight:600; color:var(--g-text-secondary);
+    border-right:1px solid #f0f0f0; display:flex; align-items:center;
+  }
+  .mc-date-cell {
+    padding:8px 0; font-size:11px; color:var(--g-text-muted); text-align:center;
+    border-right:1px solid #f5f5f5;
+  }
+  .mc-date-cell.today { background:color-mix(in srgb, var(--primary) 8%, #fff); color:var(--primary); font-weight:600; }
+  .mc-date-cell.weekend { color:#ccc; }
+
+  /* 活动行 */
+  .mc-row {
+    display:grid; grid-template-columns:180px 1fr;
+    border-bottom:1px solid #f5f5f5; min-height:44px; transition:background var(--g-transition);
+  }
+  .mc-row:hover { background:color-mix(in srgb, var(--primary) 2%, #fff); }
+  .mc-row:last-child { border-bottom:none; }
+  .mc-row-label {
+    padding:10px 16px; font-size:13px; color:var(--g-text); display:flex;
+    align-items:center; gap:8px; border-right:1px solid #f0f0f0;
+  }
+  .mc-row-label-name { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .mc-type-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
+
+  /* 条形区域 */
+  .mc-bar-area {
+    position:relative; display:grid; grid-template-columns:repeat(28, 1fr); align-items:center;
+  }
+  .mc-bar {
+    position:absolute; height:24px; border-radius:4px; top:50%; transform:translateY(-50%);
+    font-size:11px; color:#fff; font-weight:500; display:flex; align-items:center;
+    padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+    cursor:pointer; transition:filter var(--g-transition);
+  }
+  .mc-bar:hover { filter:brightness(1.1); }
+
+  /* 今日线 */
+  .mc-today-line {
+    position:absolute; top:0; bottom:0; width:2px; background:var(--g-danger);
+    z-index:2; opacity:.6;
+  }
+  .mc-today-line::before {
+    content:'今'; position:absolute; top:-18px; left:50%; transform:translateX(-50%);
+    font-size:10px; color:var(--g-danger); font-weight:600;
+  }
+
+  /* 冲突提示 */
+  .mc-conflict-banner {
+    display:flex; align-items:center; gap:8px; padding:10px 16px; margin-bottom:16px;
+    background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; font-size:13px; color:#9a3412;
+  }
+
+  /* 空行提示 */
+  .mc-empty-row {
+    padding:40px; text-align:center; color:var(--g-text-muted); font-size:13px;
+  }
+</style>
+
+<div class="page-mc">
+
+  <!-- 冲突提示 -->
+  <div class="mc-conflict-banner">
+    <i data-lucide="alert-triangle" style="width:16px;height:16px;color:#f59e0b;flex-shrink:0;"></i>
+    <span>2月10日~2月28日 有 <b>4个活动</b> 同时进行，请注意优惠叠加可能影响利润</span>
+  </div>
+
+  <!-- 顶部控制栏 -->
+  <div class="mc-header">
+    <div class="mc-month-nav">
+      <button><i data-lucide="chevron-left" style="width:16px;height:16px;"></i></button>
+      <div class="mc-month-title">2026年 2月</div>
+      <button><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></button>
+    </div>
+    <div class="mc-legend">
+      <span class="mc-legend-item"><span class="mc-legend-dot" style="background:#3b82f6;"></span>满减</span>
+      <span class="mc-legend-item"><span class="mc-legend-dot" style="background:#22c55e;"></span>满赠</span>
+      <span class="mc-legend-item"><span class="mc-legend-dot" style="background:#f59e0b;"></span>第二份半价</span>
+      <span class="mc-legend-item"><span class="mc-legend-dot" style="background:#8b5cf6;"></span>限时折扣</span>
+      <span class="mc-legend-item"><span class="mc-legend-dot" style="background:#ef4444;"></span>秒杀</span>
+      <span class="mc-legend-item"><span class="mc-legend-dot" style="background:#ec4899;"></span>优惠券</span>
+      <span class="mc-legend-item"><span class="mc-legend-dot" style="background:#06b6d4;"></span>次卡</span>
+    </div>
+  </div>
+
+  <!-- 统计 -->
+  <div class="mc-stats">
+    <div class="mc-stat-card">
+      <div class="mc-stat-label">本月活动</div>
+      <div class="mc-stat-value primary">8</div>
+    </div>
+    <div class="mc-stat-card">
+      <div class="mc-stat-label">进行中</div>
+      <div class="mc-stat-value green">6</div>
+    </div>
+    <div class="mc-stat-card">
+      <div class="mc-stat-label">最大并行数</div>
+      <div class="mc-stat-value orange">4</div>
+    </div>
+    <div class="mc-stat-card">
+      <div class="mc-stat-label">本月预计优惠</div>
+      <div class="mc-stat-value">¥6,200</div>
+    </div>
+  </div>
+
+  <!-- 甘特图 -->
+  <div class="mc-gantt">
+    <!-- 日期头 -->
+    <div class="mc-dates">
+      <div class="mc-dates-label">活动名称</div>
+      <div class="mc-date-cell">1</div>
+      <div class="mc-date-cell">2</div>
+      <div class="mc-date-cell">3</div>
+      <div class="mc-date-cell">4</div>
+      <div class="mc-date-cell">5</div>
+      <div class="mc-date-cell">6</div>
+      <div class="mc-date-cell weekend">7</div>
+      <div class="mc-date-cell weekend">8</div>
+      <div class="mc-date-cell">9</div>
+      <div class="mc-date-cell">10</div>
+      <div class="mc-date-cell">11</div>
+      <div class="mc-date-cell today">12</div>
+      <div class="mc-date-cell">13</div>
+      <div class="mc-date-cell weekend">14</div>
+      <div class="mc-date-cell weekend">15</div>
+      <div class="mc-date-cell">16</div>
+      <div class="mc-date-cell">17</div>
+      <div class="mc-date-cell">18</div>
+      <div class="mc-date-cell">19</div>
+      <div class="mc-date-cell">20</div>
+      <div class="mc-date-cell weekend">21</div>
+      <div class="mc-date-cell weekend">22</div>
+      <div class="mc-date-cell">23</div>
+      <div class="mc-date-cell">24</div>
+      <div class="mc-date-cell">25</div>
+      <div class="mc-date-cell">26</div>
+      <div class="mc-date-cell">27</div>
+      <div class="mc-date-cell weekend">28</div>
+    </div>
+
+    <!-- 活动行 -->
+    <!-- 1. 午市满减 1/1~3/31 全月覆盖 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#3b82f6;"></span>
+        <span class="mc-row-label-name">午市满减优惠</span>
+      </div>
+      <div class="mc-bar-area">
+        <div class="mc-bar" style="left:0;right:0;background:#3b82f6;">满30减5 / 满50减10 / 满80减20</div>
+        <div class="mc-today-line" style="left:calc((12 - 0.5) / 28 * 100%);"></div>
+      </div>
+    </div>
+
+    <!-- 2. 晚市大额满减 1/15~4/15 全月覆盖 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#3b82f6;"></span>
+        <span class="mc-row-label-name">晚市大额满减</span>
+      </div>
+      <div class="mc-bar-area">
+        <div class="mc-bar" style="left:0;right:0;background:#3b82f6;opacity:.75;">满50减8 / 满80减15 / 满120减30</div>
+      </div>
+    </div>
+
+    <!-- 3. 饮品买二赠一 2/1~3/31 全月覆盖 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#22c55e;"></span>
+        <span class="mc-row-label-name">饮品买二赠一</span>
+      </div>
+      <div class="mc-bar-area">
+        <div class="mc-bar" style="left:0;right:0;background:#22c55e;">买2杯赠1杯</div>
+      </div>
+    </div>
+
+    <!-- 4. 甜品第二份半价 2/10~2/28 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#f59e0b;"></span>
+        <span class="mc-row-label-name">甜品第二份半价</span>
+      </div>
+      <div class="mc-bar-area">
+        <div class="mc-bar" style="left:calc((10 - 1) / 28 * 100%);right:0;background:#f59e0b;">第2份5折</div>
+      </div>
+    </div>
+
+    <!-- 5. 疯狂星期四 限时折扣 每周四 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#8b5cf6;"></span>
+        <span class="mc-row-label-name">疯狂星期四</span>
+      </div>
+      <div class="mc-bar-area">
+        <!-- 2/5, 2/12, 2/19, 2/26 are Thursdays -->
+        <div class="mc-bar" style="left:calc((5 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
+        <div class="mc-bar" style="left:calc((12 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
+        <div class="mc-bar" style="left:calc((19 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
+        <div class="mc-bar" style="left:calc((26 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
+      </div>
+    </div>
+
+    <!-- 6. 情人节秒杀 2/13~2/14 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#ef4444;"></span>
+        <span class="mc-row-label-name">情人节秒杀</span>
+      </div>
+      <div class="mc-bar-area">
+        <div class="mc-bar" style="left:calc((13 - 1) / 28 * 100%);width:calc(2 / 28 * 100%);background:#ef4444;">¥9.9 双人套餐</div>
+      </div>
+    </div>
+
+    <!-- 7. 新用户满减券 长期 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#ec4899;"></span>
+        <span class="mc-row-label-name">新用户满减券</span>
+      </div>
+      <div class="mc-bar-area">
+        <div class="mc-bar" style="left:0;right:0;background:#ec4899;opacity:.65;">满50减15（长期）</div>
+      </div>
+    </div>
+
+    <!-- 8. 咖啡月卡 次卡 长期 -->
+    <div class="mc-row">
+      <div class="mc-row-label">
+        <span class="mc-type-dot" style="background:#06b6d4;"></span>
+        <span class="mc-row-label-name">咖啡月卡</span>
+      </div>
+      <div class="mc-bar-area">
+        <div class="mc-bar" style="left:0;right:0;background:#06b6d4;opacity:.65;">¥99 / 30次（长期在售）</div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mkt-coupon.html b/TakeoutSaaS.Prototypes/pages/mkt-coupon.html
new file mode 100644
index 0000000..f185362
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mkt-coupon.html
@@ -0,0 +1,489 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<style>
+/* ===== 优惠券页面私有样式 (cp- prefix) ===== */
+.cp-toolbar {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
+}
+.cp-toolbar .g-select, .cp-toolbar .g-input { width: auto; min-width: 140px; }
+.cp-toolbar .g-input { min-width: 180px; }
+.cp-toolbar-right { margin-left: auto; flex-shrink: 0; }
+
+/* 统计行 */
+.cp-stats {
+  display: flex; gap: 16px; margin-bottom: 20px;
+}
+.cp-stat-item {
+  display: flex; align-items: center; gap: 8px; padding: 12px 20px;
+  background: #fff; border: 1px solid var(--g-border); border-radius: var(--g-radius);
+  font-size: 13px; color: var(--g-text-secondary); transition: box-shadow var(--g-transition);
+  flex: 1;
+}
+.cp-stat-item:hover { box-shadow: var(--g-shadow-md); }
+.cp-stat-icon {
+  width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.cp-stat-icon.blue { background: #e6f7ff; color: #1890ff; }
+.cp-stat-icon.green { background: #f6ffed; color: #52c41a; }
+.cp-stat-icon.orange { background: #fff7e6; color: #fa8c16; }
+.cp-stat-icon.purple { background: #f9f0ff; color: #722ed1; }
+.cp-stat-val { font-size: 22px; font-weight: 700; color: var(--g-text); line-height: 1; }
+.cp-stat-label { font-size: 12px; color: var(--g-text-muted); margin-top: 2px; }
+
+/* 优惠券卡片列表 */
+.cp-list { display: flex; flex-direction: column; gap: 12px; }
+
+.cp-coupon {
+  display: flex; border-radius: var(--g-radius); overflow: hidden;
+  border: 1px solid var(--g-border); background: #fff;
+  transition: box-shadow var(--g-transition);
+}
+.cp-coupon:hover { box-shadow: var(--g-shadow-md); }
+.cp-coupon.cp-dimmed { opacity: 0.55; }
+
+/* 左侧券面 */
+.cp-left {
+  width: 160px; min-height: 130px; flex-shrink: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  color: #fff; position: relative; padding: 16px 12px;
+}
+.cp-left::after {
+  content: '';
+  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
+  width: 12px; height: 12px; background: #fff; border-radius: 50%;
+  box-shadow: inset 2px 0 4px rgba(0,0,0,.06);
+}
+.cp-left.cp-red { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }
+.cp-left.cp-blue { background: linear-gradient(135deg, #4facfe, #0078d4); }
+.cp-left.cp-green { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #1a5c3a; }
+.cp-left-amount { font-size: 32px; font-weight: 800; line-height: 1.1; }
+.cp-left-amount .cp-unit { font-size: 16px; font-weight: 600; }
+.cp-left-cond { font-size: 12px; margin-top: 6px; opacity: 0.85; }
+
+/* 右侧详情 */
+.cp-right {
+  flex: 1; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
+  min-width: 0;
+}
+.cp-name { font-size: 15px; font-weight: 600; color: var(--g-text); }
+.cp-validity { font-size: 12px; color: var(--g-text-muted); display: flex; align-items: center; gap: 4px; }
+.cp-rules { font-size: 12px; color: var(--g-text-secondary); }
+.cp-stats-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--g-text-secondary); }
+.cp-progress-wrap { flex: 1; max-width: 200px; }
+.cp-progress-bar {
+  height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden;
+}
+.cp-progress-fill { height: 100%; border-radius: 3px; transition: width var(--g-transition); }
+.cp-progress-fill.red { background: linear-gradient(90deg, #ff6b6b, #ee5a24); }
+.cp-progress-fill.blue { background: linear-gradient(90deg, #4facfe, #0078d4); }
+.cp-progress-fill.green { background: linear-gradient(90deg, #43e97b, #38f9d7); }
+.cp-bottom-row {
+  display: flex; align-items: center; justify-content: space-between; margin-top: 2px;
+}
+.cp-actions { display: flex; align-items: center; gap: 12px; }
+
+/* 抽屉 */
+.cp-drawer { width: 560px; }
+.cp-type-pills { display: flex; gap: 8px; }
+.cp-amount-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g-text-secondary); }
+.cp-amount-row .g-input { width: 100px; }
+.cp-valid-section { margin-top: 8px; }
+.cp-channel-pills { display: flex; gap: 8px; flex-wrap: wrap; }
+</style>
+</head>
+<body>
+
+<!-- 工具栏 -->
+<div class="cp-toolbar">
+  <select class="g-select" style="min-width:170px;">
+    <option>全部门店</option>
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <select class="g-select" id="cpStatusFilter">
+    <option value="">全部状态</option>
+    <option value="进行中">进行中</option>
+    <option value="未开始">未开始</option>
+    <option value="已结束">已结束</option>
+    <option value="已停用">已停用</option>
+  </select>
+  <select class="g-select" id="cpTypeFilter">
+    <option value="">全部类型</option>
+    <option value="满减券">满减券</option>
+    <option value="折扣券">折扣券</option>
+    <option value="免配送费券">免配送费券</option>
+  </select>
+  <input class="g-input" placeholder="搜索券名称" id="cpSearch" style="min-width:160px;">
+  <div class="cp-toolbar-right">
+    <button class="g-btn g-btn-primary" onclick="openCpDrawer('create')">
+      <i data-lucide="plus" style="width:15px;height:15px;"></i> 创建优惠券
+    </button>
+  </div>
+</div>
+
+<!-- 统计行 -->
+<div class="cp-stats">
+  <div class="cp-stat-item">
+    <div class="cp-stat-icon blue"><i data-lucide="ticket" style="width:18px;height:18px;"></i></div>
+    <div><div class="cp-stat-val">28</div><div class="cp-stat-label">优惠券总数</div></div>
+  </div>
+  <div class="cp-stat-item">
+    <div class="cp-stat-icon green"><i data-lucide="play-circle" style="width:18px;height:18px;"></i></div>
+    <div><div class="cp-stat-val">12</div><div class="cp-stat-label">进行中</div></div>
+  </div>
+  <div class="cp-stat-item">
+    <div class="cp-stat-icon orange"><i data-lucide="download" style="width:18px;height:18px;"></i></div>
+    <div><div class="cp-stat-val">3,680</div><div class="cp-stat-label">已领取（张）</div></div>
+  </div>
+  <div class="cp-stat-item">
+    <div class="cp-stat-icon purple"><i data-lucide="check-circle" style="width:18px;height:18px;"></i></div>
+    <div><div class="cp-stat-val">2,156</div><div class="cp-stat-label">已核销（核销率 58.6%）</div></div>
+  </div>
+</div>
+
+<!-- 优惠券卡片列表 -->
+<div class="cp-list" id="cpList">
+
+  <!-- 1. 满减券 - 进行中 -->
+  <div class="cp-coupon">
+    <div class="cp-left cp-red">
+      <div class="cp-left-amount"><span class="cp-unit">&yen;</span>15</div>
+      <div class="cp-left-cond">满50可用</div>
+    </div>
+    <div class="cp-right">
+      <div class="cp-name">新用户满减券</div>
+      <div class="cp-validity"><i data-lucide="calendar" style="width:12px;height:12px;"></i> 2025.02.01 - 2025.03.01</div>
+      <div class="cp-rules">每人限领1张 | 仅外卖可用</div>
+      <div class="cp-stats-row">
+        <span>已领 580/1000</span>
+        <div class="cp-progress-wrap">
+          <div class="cp-progress-bar"><div class="cp-progress-fill red" style="width:58%;"></div></div>
+        </div>
+        <span>已用 320</span>
+      </div>
+      <div class="cp-bottom-row">
+        <span class="g-tag g-tag-green">进行中</span>
+        <div class="cp-actions">
+          <a class="g-action" onclick="openCpDrawer('edit')">编辑</a>
+          <a class="g-action" onclick="void(0)">停用</a>
+          <a class="g-action g-action-danger" onclick="void(0)">删除</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 2. 折扣券 - 进行中 -->
+  <div class="cp-coupon">
+    <div class="cp-left cp-blue">
+      <div class="cp-left-amount">8<span class="cp-unit">折</span></div>
+      <div class="cp-left-cond">全场通用</div>
+    </div>
+    <div class="cp-right">
+      <div class="cp-name">周末全场8折券</div>
+      <div class="cp-validity"><i data-lucide="calendar" style="width:12px;height:12px;"></i> 2025.01.15 - 2025.04.15</div>
+      <div class="cp-rules">每人限领2张 | 外卖/自提可用</div>
+      <div class="cp-stats-row">
+        <span>已领 1,200/2000</span>
+        <div class="cp-progress-wrap">
+          <div class="cp-progress-bar"><div class="cp-progress-fill blue" style="width:60%;"></div></div>
+        </div>
+        <span>已用 860</span>
+      </div>
+      <div class="cp-bottom-row">
+        <span class="g-tag g-tag-green">进行中</span>
+        <div class="cp-actions">
+          <a class="g-action" onclick="openCpDrawer('edit')">编辑</a>
+          <a class="g-action" onclick="void(0)">停用</a>
+          <a class="g-action g-action-danger" onclick="void(0)">删除</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 3. 免配送费券 - 未开始 -->
+  <div class="cp-coupon">
+    <div class="cp-left cp-green">
+      <div class="cp-left-amount" style="font-size:24px;">免配送</div>
+      <div class="cp-left-cond">无门槛</div>
+    </div>
+    <div class="cp-right">
+      <div class="cp-name">春季免配送费券</div>
+      <div class="cp-validity"><i data-lucide="calendar" style="width:12px;height:12px;"></i> 2025.03.01 - 2025.03.31</div>
+      <div class="cp-rules">每人限领3张 | 仅外卖可用</div>
+      <div class="cp-stats-row">
+        <span>已领 0/5000</span>
+        <div class="cp-progress-wrap">
+          <div class="cp-progress-bar"><div class="cp-progress-fill green" style="width:0%;"></div></div>
+        </div>
+        <span>已用 0</span>
+      </div>
+      <div class="cp-bottom-row">
+        <span class="g-tag g-tag-blue">未开始</span>
+        <div class="cp-actions">
+          <a class="g-action" onclick="openCpDrawer('edit')">编辑</a>
+          <a class="g-action" onclick="void(0)">停用</a>
+          <a class="g-action g-action-danger" onclick="void(0)">删除</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 4. 满减券 - 已结束 (dimmed) -->
+  <div class="cp-coupon cp-dimmed">
+    <div class="cp-left cp-red">
+      <div class="cp-left-amount"><span class="cp-unit">&yen;</span>10</div>
+      <div class="cp-left-cond">满30可用</div>
+    </div>
+    <div class="cp-right">
+      <div class="cp-name">元旦满减券</div>
+      <div class="cp-validity"><i data-lucide="calendar" style="width:12px;height:12px;"></i> 2024.12.28 - 2025.01.03</div>
+      <div class="cp-rules">每人限领1张 | 全渠道可用</div>
+      <div class="cp-stats-row">
+        <span>已领 900/1000</span>
+        <div class="cp-progress-wrap">
+          <div class="cp-progress-bar"><div class="cp-progress-fill red" style="width:90%;"></div></div>
+        </div>
+        <span>已用 756</span>
+      </div>
+      <div class="cp-bottom-row">
+        <span class="g-tag g-tag-gray">已结束</span>
+        <div class="cp-actions">
+          <a class="g-action" onclick="void(0)">查看</a>
+          <a class="g-action g-action-danger" onclick="void(0)">删除</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 5. 折扣券 - 已停用 (dimmed) -->
+  <div class="cp-coupon cp-dimmed">
+    <div class="cp-left cp-blue">
+      <div class="cp-left-amount">7<span class="cp-unit">折</span></div>
+      <div class="cp-left-cond">满80可用</div>
+    </div>
+    <div class="cp-right">
+      <div class="cp-name">会员专享7折券</div>
+      <div class="cp-validity"><i data-lucide="calendar" style="width:12px;height:12px;"></i> 2025.01.01 - 2025.06.30</div>
+      <div class="cp-rules">每人限领1张 | 仅堂食可用</div>
+      <div class="cp-stats-row">
+        <span>已领 200/500</span>
+        <div class="cp-progress-wrap">
+          <div class="cp-progress-bar"><div class="cp-progress-fill blue" style="width:40%;"></div></div>
+        </div>
+        <span>已用 120</span>
+      </div>
+      <div class="cp-bottom-row">
+        <span class="g-tag g-tag-red">已停用</span>
+        <div class="cp-actions">
+          <a class="g-action" onclick="void(0)">启用</a>
+          <a class="g-action g-action-danger" onclick="void(0)">删除</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination">
+  <span style="margin-right:8px;">共 28 条</span>
+  <button class="g-page-btn" disabled>&lt;</button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn">3</button>
+  <button class="g-page-btn">&gt;</button>
+</div>
+
+<!-- 抽屉遮罩 -->
+<div class="g-drawer-mask" id="cpDrawerMask" onclick="closeCpDrawer()"></div>
+
+<!-- 创建/编辑抽屉 -->
+<div class="g-drawer cp-drawer" id="cpDrawer">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title" id="cpDrawerTitle">创建优惠券</div>
+    <button class="g-drawer-close" onclick="closeCpDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+
+    <!-- 券名称 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">券名称</label>
+      <input class="g-input" placeholder="如：新用户满减券" id="cpName">
+    </div>
+
+    <!-- 券类型 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">券类型</label>
+      <div class="cp-type-pills">
+        <span class="g-pill checked" onclick="selectCpType(this, 'reduce')">满减券</span>
+        <span class="g-pill" onclick="selectCpType(this, 'discount')">折扣券</span>
+        <span class="g-pill" onclick="selectCpType(this, 'free_delivery')">免配送费券</span>
+      </div>
+    </div>
+
+    <!-- 面额设置 - 满减 -->
+    <div class="g-form-group" id="cpAmountReduce">
+      <label class="g-form-label required">面额设置</label>
+      <div class="cp-amount-row">
+        <span>满</span>
+        <input class="g-input" type="number" placeholder="如：50" id="cpThresholdInput">
+        <span>元减</span>
+        <input class="g-input" type="number" placeholder="如：15">
+        <span>元</span>
+      </div>
+    </div>
+
+    <!-- 面额设置 - 折扣 -->
+    <div class="g-form-group" id="cpAmountDiscount" style="display:none;">
+      <label class="g-form-label required">折扣力度</label>
+      <div class="cp-amount-row">
+        <input class="g-input" type="number" placeholder="如：8 表示8折" style="width:160px;">
+        <span>折</span>
+      </div>
+      <div class="g-hint">输入 8 表示打8折，即优惠20%</div>
+    </div>
+
+    <!-- 面额设置 - 免配送费 -->
+    <div class="g-form-group" id="cpAmountFreeDelivery" style="display:none;">
+      <label class="g-form-label">面额设置</label>
+      <div style="font-size:13px;color:var(--g-text-muted);padding:8px 0;">免配送费券无需设置面额</div>
+    </div>
+
+    <div class="g-divider"></div>
+
+    <!-- 发放总量 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">发放总量</label>
+      <input class="g-input" type="number" placeholder="如：1000" style="width:200px;">
+      <div class="g-hint">设置后不可减少，可增加</div>
+    </div>
+
+    <!-- 每人限领 -->
+    <div class="g-form-group">
+      <label class="g-form-label">每人限领</label>
+      <input class="g-input" type="number" placeholder="如：1" style="width:200px;">
+      <div class="g-hint">不填则不限制</div>
+    </div>
+
+    <div class="g-divider"></div>
+
+    <!-- 有效期类型 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">有效期类型</label>
+      <div class="cp-type-pills">
+        <span class="g-pill checked" onclick="selectCpValidType(this, 'fixed')">固定时间</span>
+        <span class="g-pill" onclick="selectCpValidType(this, 'days')">领取后N天</span>
+      </div>
+    </div>
+
+    <!-- 固定时间 -->
+    <div class="g-form-group cp-valid-section" id="cpValidFixed">
+      <label class="g-form-label required">有效时间范围</label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input class="g-input" type="date" style="width:180px;">
+        <span style="color:var(--g-text-muted);">至</span>
+        <input class="g-input" type="date" style="width:180px;">
+      </div>
+    </div>
+
+    <!-- 领取后N天 -->
+    <div class="g-form-group cp-valid-section" id="cpValidDays" style="display:none;">
+      <label class="g-form-label required">领取后有效天数</label>
+      <div class="cp-amount-row">
+        <span>领取后</span>
+        <input class="g-input" type="number" placeholder="如：7" style="width:120px;">
+        <span>天内有效</span>
+      </div>
+    </div>
+
+    <div class="g-divider"></div>
+
+    <!-- 使用门槛 -->
+    <div class="g-form-group" id="cpThresholdGroup">
+      <label class="g-form-label">使用门槛</label>
+      <div class="cp-amount-row">
+        <span>订单满</span>
+        <input class="g-input" type="number" placeholder="如：50" style="width:140px;" id="cpThresholdVal">
+        <span>元可用</span>
+      </div>
+      <div class="g-hint">不填则无门槛</div>
+    </div>
+
+    <!-- 适用渠道 -->
+    <div class="g-form-group">
+      <label class="g-form-label">适用渠道</label>
+      <div class="cp-channel-pills">
+        <span class="g-pill checked" onclick="toggleCpPill(this)">外卖</span>
+        <span class="g-pill checked" onclick="toggleCpPill(this)">自提</span>
+        <span class="g-pill checked" onclick="toggleCpPill(this)">堂食</span>
+      </div>
+    </div>
+
+    <!-- 适用门店 -->
+    <div class="g-form-group">
+      <label class="g-form-label">适用门店</label>
+      <select class="g-select">
+        <option>全部门店</option>
+        <option>老三家外卖（朝阳店）</option>
+        <option>老三家外卖（海淀店）</option>
+        <option>老三家外卖（望京店）</option>
+        <option>老三家外卖（通州店）</option>
+        <option>老三家外卖（丰台店）</option>
+      </select>
+    </div>
+
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeCpDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">保存</button>
+  </div>
+</div>
+
+<script>
+/* ===== 抽屉开关 ===== */
+function openCpDrawer(mode) {
+  document.getElementById('cpDrawerMask').classList.add('open');
+  document.getElementById('cpDrawer').classList.add('open');
+  document.getElementById('cpDrawerTitle').textContent = mode === 'edit' ? '编辑优惠券' : '创建优惠券';
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+function closeCpDrawer() {
+  document.getElementById('cpDrawerMask').classList.remove('open');
+  document.getElementById('cpDrawer').classList.remove('open');
+}
+
+/* ===== 券类型切换 ===== */
+function selectCpType(el, type) {
+  el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+  document.getElementById('cpAmountReduce').style.display = type === 'reduce' ? '' : 'none';
+  document.getElementById('cpAmountDiscount').style.display = type === 'discount' ? '' : 'none';
+  document.getElementById('cpAmountFreeDelivery').style.display = type === 'free_delivery' ? '' : 'none';
+  // 免配送费时隐藏使用门槛
+  document.getElementById('cpThresholdGroup').style.display = type === 'free_delivery' ? 'none' : '';
+}
+
+/* ===== 有效期类型切换 ===== */
+function selectCpValidType(el, type) {
+  el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+  document.getElementById('cpValidFixed').style.display = type === 'fixed' ? '' : 'none';
+  document.getElementById('cpValidDays').style.display = type === 'days' ? '' : 'none';
+}
+
+/* ===== Pill 多选切换 ===== */
+function toggleCpPill(el) {
+  el.classList.toggle('checked');
+}
+
+/* ===== 初始化图标 ===== */
+if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
+</body>
+</html>
diff --git a/TakeoutSaaS.Prototypes/pages/mkt-flash-sale.html b/TakeoutSaaS.Prototypes/pages/mkt-flash-sale.html
new file mode 100644
index 0000000..f0f75a2
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mkt-flash-sale.html
@@ -0,0 +1,472 @@
+<!-- 限时折扣页 -->
+<style>
+  .fs-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .fs-search { position:relative; }
+  .fs-search input { height:34px; padding:0 10px 0 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; width:200px; transition:var(--g-transition); }
+  .fs-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .fs-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#bbb; pointer-events:none; }
+  .fs-stats { display:flex; gap:24px; margin-bottom:16px; padding:10px 16px; background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); font-size:13px; color:#4b5563; }
+  .fs-stats span { display:flex; align-items:center; gap:6px; }
+  .fs-stats strong { color:#1a1a2e; font-weight:600; }
+  .fs-card { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:20px; margin-bottom:16px; transition:box-shadow var(--g-transition); }
+  .fs-card:hover { box-shadow:var(--g-shadow-md); }
+  .fs-card.ended { opacity:.5; }
+  .fs-card-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
+  .fs-card-name { font-size:15px; font-weight:600; color:#1a1a2e; }
+  .fs-card-time { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
+  .fs-tag-running { background:#dcfce7; color:#22c55e; border:1px solid #bbf7d0; border-radius:6px; font-weight:600; }
+  .fs-tag-ended { background:#f8f9fb; color:#9ca3af; border:1px solid #e5e7eb; border-radius:6px; font-weight:600; }
+  .fs-prod-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; }
+  .fs-prod-table th { background:#f8f9fb; padding:8px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; font-size:12px; }
+  .fs-prod-table td { padding:8px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
+  .fs-prod-table tr:last-child td { border-bottom:none; }
+  .fs-prod-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .fs-orig-price { color:var(--g-text-muted); text-decoration:line-through; font-size:12px; }
+  .fs-disc-price { color:#ef4444; font-weight:600; }
+  .fs-disc-rate { display:inline-block; padding:1px 6px; border-radius:4px; background:#fff1f0; color:#ef4444; font-size:11px; font-weight:600; }
+  .fs-card-summary { display:flex; gap:24px; font-size:12px; color:#4b5563; margin-bottom:12px; padding:10px 12px; background:#f8f9fb; border-radius:8px; }
+  .fs-card-summary strong { color:#1a1a2e; font-weight:600; }
+  .fs-card-ft { display:flex; gap:16px; border-top:1px solid #f3f4f6; padding-top:12px; }
+  /* 抽屉内折扣商品列表 */
+  .fs-drawer-prod { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; margin-bottom:12px; }
+  .fs-drawer-prod-hd { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f8f9fb; border-bottom:1px solid #e5e7eb; }
+  .fs-drawer-prod-hd span { font-size:13px; font-weight:500; color:#1a1a2e; }
+  .fs-drawer-prod-remove { background:none; border:none; color:#9ca3af; cursor:pointer; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; transition:var(--g-transition); }
+  .fs-drawer-prod-remove:hover { color:#ef4444; background:#fef2f2; }
+  .fs-drawer-prod-bd { padding:10px 12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
+  .fs-drawer-prod-bd .fs-field { display:flex; flex-direction:column; gap:4px; }
+  .fs-drawer-prod-bd .fs-field label { font-size:11px; color:#6b7280; }
+  .fs-drawer-prod-bd .fs-field input { width:100px; height:30px; padding:0 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .fs-drawer-prod-bd .fs-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .fs-drawer-prod-bd .fs-field input[readonly] { background:#f8f9fb; color:var(--g-text-muted); cursor:default; }
+  .fs-drawer-prod-bd .fs-field .fs-auto-rate { font-size:12px; color:#ef4444; font-weight:600; min-width:36px; line-height:30px; }
+  .fs-pill-group { display:flex; gap:8px; flex-wrap:wrap; }
+  .fs-pill { padding:6px 16px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); }
+  .fs-pill:hover { border-color:var(--primary); color:var(--primary); }
+  .fs-pill.checked { background:var(--primary); color:#fff; border-color:var(--primary); }
+  .fs-limit-row { display:flex; align-items:center; gap:8px; }
+  .fs-limit-row input { width:80px; }
+  .fs-limit-row .fs-unit { font-size:13px; color:var(--g-text-secondary); }
+  .fs-tag-recurring { background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; border-radius:6px; font-weight:600; }
+  .fs-tag-notstarted { background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; border-radius:6px; font-weight:600; }
+  .fs-recur-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; }
+  .fs-day-sel { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
+  .fs-day { width:40px; height:28px; border-radius:14px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; color:#9ca3af; background:#f8f9fb; cursor:pointer; transition:var(--g-transition); }
+  .fs-day.active { background:var(--primary); color:#fff; border-color:var(--primary); }
+  .fs-day-quick { display:flex; gap:6px; }
+  .fs-cycle-section { display:none; }
+  .fs-cycle-section.show { display:block; }
+  .fs-date-section { display:block; }
+  .fs-date-section.hide { display:none; }
+</style>
+
+<div class="fs-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <select class="g-select" style="width:120px;">
+    <option value="">全部状态</option>
+    <option>进行中</option>
+    <option>已结束</option>
+    <option>未开始</option>
+  </select>
+  <div class="fs-search">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input type="text" placeholder="搜索活动名称…" />
+  </div>
+  <div style="flex:1;"></div>
+  <button class="g-btn g-btn-primary" onclick="openFsDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>创建限时折扣</button>
+</div>
+
+<div class="fs-stats">
+  <span>活动总数 <strong>6</strong></span>
+  <span>进行中 <strong>3</strong></span>
+  <span>参与商品 <strong>18</strong>件</span>
+  <span>本月折扣销量 <strong>560</strong>单</span>
+</div>
+
+<!-- 活动卡片列表 -->
+<div id="fsActivityList">
+
+  <!-- 午市特惠 - 进行中 -->
+  <div class="fs-card">
+    <div class="fs-card-hd">
+      <span class="fs-card-name">午市特惠</span>
+      <span class="g-tag fs-tag-running">进行中</span>
+      <span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 11:00 - 14:00</span>
+      <span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-01-01 ~ 2026-03-31</span>
+    </div>
+    <table class="fs-prod-table">
+      <thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
+      <tbody>
+        <tr><td>香辣鸡腿堡套餐</td><td class="fs-orig-price">¥32.00</td><td class="fs-disc-price">¥25.60</td><td><span class="fs-disc-rate">8折</span></td><td>2件/人</td><td>86</td></tr>
+        <tr><td>牛肉拌面</td><td class="fs-orig-price">¥28.00</td><td class="fs-disc-price">¥19.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>52</td></tr>
+        <tr><td>招牌卤肉饭</td><td class="fs-orig-price">¥22.00</td><td class="fs-disc-price">¥17.60</td><td><span class="fs-disc-rate">8折</span></td><td>2件/人</td><td>42</td></tr>
+      </tbody>
+    </table>
+    <div class="fs-card-summary">
+      <span>活动销量 <strong>180</strong>单</span>
+      <span>折扣总额 <strong>¥1,260</strong></span>
+    </div>
+    <div class="fs-card-ft">
+      <span class="g-action" onclick="openFsDrawer('edit','午市特惠')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 新品尝鲜 - 进行中 -->
+  <div class="fs-card">
+    <div class="fs-card-hd">
+      <span class="fs-card-name">新品尝鲜</span>
+      <span class="g-tag fs-tag-running">进行中</span>
+      <span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 10:00 - 22:00</span>
+      <span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-02-01 ~ 2026-02-28</span>
+    </div>
+    <table class="fs-prod-table">
+      <thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
+      <tbody>
+        <tr><td>黑松露鸡肉卷</td><td class="fs-orig-price">¥38.00</td><td class="fs-disc-price">¥26.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>67</td></tr>
+        <tr><td>芝士焗虾饭</td><td class="fs-orig-price">¥35.00</td><td class="fs-disc-price">¥28.00</td><td><span class="fs-disc-rate">8折</span></td><td>1件/人</td><td>45</td></tr>
+        <tr><td>抹茶冰淇淋</td><td class="fs-orig-price">¥18.00</td><td class="fs-disc-price">¥9.00</td><td><span class="fs-disc-rate">5折</span></td><td>2件/人</td><td>120</td></tr>
+        <tr><td>鲜榨牛油果汁</td><td class="fs-orig-price">¥22.00</td><td class="fs-disc-price">¥15.40</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>38</td></tr>
+      </tbody>
+    </table>
+    <div class="fs-card-summary">
+      <span>活动销量 <strong>270</strong>单</span>
+      <span>折扣总额 <strong>¥2,480</strong></span>
+    </div>
+    <div class="fs-card-ft">
+      <span class="g-action" onclick="openFsDrawer('edit','新品尝鲜')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 周末狂欢 - 已结束 -->
+  <div class="fs-card ended">
+    <div class="fs-card-hd">
+      <span class="fs-card-name">周末狂欢</span>
+      <span class="g-tag fs-tag-ended">已结束</span>
+      <span class="fs-recur-badge"><i data-lucide="repeat" style="width:11px;height:11px;"></i>每周六、日</span>
+      <span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>17:00 - 21:00</span>
+      <span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2025-12-01 ~ 2026-01-31</span>
+    </div>
+    <table class="fs-prod-table">
+      <thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
+      <tbody>
+        <tr><td>烤鸡翅拼盘</td><td class="fs-orig-price">¥48.00</td><td class="fs-disc-price">¥33.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>95</td></tr>
+        <tr><td>小龙虾套餐</td><td class="fs-orig-price">¥68.00</td><td class="fs-disc-price">¥47.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>62</td></tr>
+        <tr><td>啤酒6连包</td><td class="fs-orig-price">¥36.00</td><td class="fs-disc-price">¥21.60</td><td><span class="fs-disc-rate">6折</span></td><td>2件/人</td><td>78</td></tr>
+      </tbody>
+    </table>
+    <div class="fs-card-summary">
+      <span>活动销量 <strong>235</strong>单</span>
+      <span>折扣总额 <strong>¥3,920</strong></span>
+    </div>
+    <div class="fs-card-ft">
+      <span class="g-action" onclick="openFsDrawer('edit','周末狂欢')">编辑</span>
+      <span class="g-action">启用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 疯狂星期四 - 进行中(周期循环) -->
+  <div class="fs-card">
+    <div class="fs-card-hd">
+      <span class="fs-card-name">疯狂星期四</span>
+      <span class="g-tag fs-tag-running">进行中</span>
+      <span class="fs-recur-badge"><i data-lucide="repeat" style="width:11px;height:11px;"></i>每周四</span>
+      <span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>11:00 - 22:00</span>
+      <span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>长期有效</span>
+    </div>
+    <table class="fs-prod-table">
+      <thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
+      <tbody>
+        <tr><td>香辣鸡腿堡</td><td class="fs-orig-price">¥22.00</td><td class="fs-disc-price">¥9.90</td><td><span class="fs-disc-rate">4.5折</span></td><td>2件/人</td><td>326</td></tr>
+        <tr><td>黄金脆皮鸡</td><td class="fs-orig-price">¥39.90</td><td class="fs-disc-price">¥19.90</td><td><span class="fs-disc-rate">5折</span></td><td>1件/人</td><td>218</td></tr>
+        <tr><td>薯条(大)</td><td class="fs-orig-price">¥16.00</td><td class="fs-disc-price">¥6.00</td><td><span class="fs-disc-rate">3.8折</span></td><td>3件/人</td><td>485</td></tr>
+        <tr><td>可乐(大杯)</td><td class="fs-orig-price">¥12.00</td><td class="fs-disc-price">¥1.00</td><td><span class="fs-disc-rate">0.8折</span></td><td>1件/人</td><td>512</td></tr>
+      </tbody>
+    </table>
+    <div class="fs-card-summary">
+      <span>活动销量 <strong>1,541</strong>单</span>
+      <span>折扣总额 <strong>¥18,260</strong></span>
+      <span>已循环 <strong>12</strong>周</span>
+    </div>
+    <div class="fs-card-ft">
+      <span class="g-action" onclick="openFsDrawer('edit','疯狂星期四')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+</div>
+<div class="g-pagination" style="margin-top:8px;">
+  <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+  <span style="font-size:12px;color:var(--g-text-muted);margin-left:8px;">共 6 条</span>
+</div>
+
+<!-- 创建/编辑抽屉 -->
+<div class="g-drawer-mask" id="fsDrawerMask" onclick="closeFsDrawer()"></div>
+<div class="g-drawer" id="fsDrawer" style="width:560px">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="fsDrawerTitle">创建限时折扣</span>
+    <button class="g-drawer-close" onclick="closeFsDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">活动名称</label>
+      <input class="g-input" id="fsName" placeholder="请输入活动名称，如：午市特惠、新品尝鲜">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">活动周期</label>
+      <div class="fs-pill-group" style="margin-bottom:10px;">
+        <span class="fs-pill checked" onclick="selectFsCycle(this,'once')">一次性活动</span>
+        <span class="fs-pill" onclick="selectFsCycle(this,'recurring')">周期循环</span>
+      </div>
+      <div class="g-hint">周期循环适合固定日期的促销，如"疯狂星期四"、"周末特惠"</div>
+    </div>
+    <div class="g-form-group fs-date-section" id="fsDateSection">
+      <label class="g-form-label required">活动时间</label>
+      <div style="display:flex;gap:8px;align-items:center;">
+        <input class="g-input" type="date" id="fsDateStart" value="2026-02-01" style="flex:1;">
+        <span style="color:var(--g-text-muted);">~</span>
+        <input class="g-input" type="date" id="fsDateEnd" value="2026-03-31" style="flex:1;">
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">每日时段</label>
+      <div style="display:flex;gap:8px;align-items:center;">
+        <input class="g-input" type="time" id="fsTimeStart" value="11:00" style="flex:1;">
+        <span style="color:var(--g-text-muted);">~</span>
+        <input class="g-input" type="time" id="fsTimeEnd" value="14:00" style="flex:1;">
+      </div>
+      <div class="g-hint">留空则全天有效</div>
+    </div>
+    <div class="g-form-group fs-cycle-section" id="fsCycleSection">
+      <label class="g-form-label required">循环日期</label>
+      <div class="fs-day-sel" id="fsDaySel">
+        <span class="fs-day" onclick="toggleFsDay(this)">周一</span>
+        <span class="fs-day" onclick="toggleFsDay(this)">周二</span>
+        <span class="fs-day" onclick="toggleFsDay(this)">周三</span>
+        <span class="fs-day active" onclick="toggleFsDay(this)">周四</span>
+        <span class="fs-day" onclick="toggleFsDay(this)">周五</span>
+        <span class="fs-day" onclick="toggleFsDay(this)">周六</span>
+        <span class="fs-day" onclick="toggleFsDay(this)">周日</span>
+      </div>
+      <div class="fs-day-quick">
+        <button class="g-btn g-btn-sm" onclick="fsDayQuick('weekday')">工作日</button>
+        <button class="g-btn g-btn-sm" onclick="fsDayQuick('weekend')">周末</button>
+        <button class="g-btn g-btn-sm" onclick="fsDayQuick('all')">全选</button>
+      </div>
+      <div class="g-hint" style="margin-top:8px;">活动将在选中的每个星期自动生效，无需手动开启</div>
+    </div>
+
+    <!-- 折扣商品 -->
+    <div class="g-form-group">
+      <label class="g-form-label required" style="margin-bottom:10px;">折扣商品</label>
+      <div id="fsProductList">
+        <!-- 预填商品 1 -->
+        <div class="fs-drawer-prod">
+          <div class="fs-drawer-prod-hd">
+            <span>香辣鸡腿堡套餐</span>
+            <button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+          </div>
+          <div class="fs-drawer-prod-bd">
+            <div class="fs-field">
+              <label>原价</label>
+              <input type="text" value="¥32.00" readonly>
+            </div>
+            <div class="fs-field">
+              <label>折扣价</label>
+              <input type="number" value="25.60" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)">
+            </div>
+            <div class="fs-field">
+              <label>折扣</label>
+              <span class="fs-auto-rate">8折</span>
+            </div>
+            <div class="fs-field">
+              <label>限购/人</label>
+              <input type="number" value="2" min="0" placeholder="不限则留空">
+            </div>
+          </div>
+        </div>
+        <!-- 预填商品 2 -->
+        <div class="fs-drawer-prod">
+          <div class="fs-drawer-prod-hd">
+            <span>牛肉拌面</span>
+            <button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+          </div>
+          <div class="fs-drawer-prod-bd">
+            <div class="fs-field">
+              <label>原价</label>
+              <input type="text" value="¥28.00" readonly>
+            </div>
+            <div class="fs-field">
+              <label>折扣价</label>
+              <input type="number" value="19.60" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)">
+            </div>
+            <div class="fs-field">
+              <label>折扣</label>
+              <span class="fs-auto-rate">7折</span>
+            </div>
+            <div class="fs-field">
+              <label>限购/人</label>
+              <input type="number" value="1" min="0" placeholder="不限则留空">
+            </div>
+          </div>
+        </div>
+        <!-- 预填商品 3 -->
+        <div class="fs-drawer-prod">
+          <div class="fs-drawer-prod-hd">
+            <span>招牌卤肉饭</span>
+            <button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+          </div>
+          <div class="fs-drawer-prod-bd">
+            <div class="fs-field">
+              <label>原价</label>
+              <input type="text" value="¥22.00" readonly>
+            </div>
+            <div class="fs-field">
+              <label>折扣价</label>
+              <input type="number" value="17.60" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)">
+            </div>
+            <div class="fs-field">
+              <label>折扣</label>
+              <span class="fs-auto-rate">8折</span>
+            </div>
+            <div class="fs-field">
+              <label>限购/人</label>
+              <input type="number" value="2" min="0" placeholder="不限则留空">
+            </div>
+          </div>
+        </div>
+      </div>
+      <button class="g-btn g-btn-sm" style="margin-top:4px;" onclick="openProductPicker({title:'添加折扣商品',subtitle:'限时折扣',onConfirm:addFsProducts})"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加商品</button>
+    </div>
+
+    <!-- 适用渠道 -->
+    <div class="g-form-group">
+      <label class="g-form-label">适用渠道</label>
+      <div class="fs-pill-group">
+        <span class="fs-pill checked" onclick="toggleFsPill(this)">外卖配送</span>
+        <span class="fs-pill checked" onclick="toggleFsPill(this)">到店自取</span>
+        <span class="fs-pill" onclick="toggleFsPill(this)">堂食点餐</span>
+      </div>
+    </div>
+
+    <!-- 限购设置 -->
+    <div class="g-form-group">
+      <label class="g-form-label">每人限购</label>
+      <div class="fs-limit-row">
+        <input class="g-input" type="number" value="5" min="0" placeholder="不限则留空" style="width:100px;">
+        <span class="fs-unit">件</span>
+      </div>
+      <div class="g-hint">活动期间每人累计可购买的折扣商品总数，留空不限</div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeFsDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeFsDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+function openFsDrawer(mode, name) {
+  document.getElementById('fsDrawerMask').classList.add('open');
+  document.getElementById('fsDrawer').classList.add('open');
+  if (mode === 'edit') {
+    document.getElementById('fsDrawerTitle').textContent = '编辑限时折扣';
+    document.getElementById('fsName').value = name || '';
+  } else {
+    document.getElementById('fsDrawerTitle').textContent = '创建限时折扣';
+    document.getElementById('fsName').value = '';
+  }
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function closeFsDrawer() {
+  document.getElementById('fsDrawerMask').classList.remove('open');
+  document.getElementById('fsDrawer').classList.remove('open');
+}
+
+function removeFsProduct(btn) {
+  btn.closest('.fs-drawer-prod').remove();
+}
+
+function toggleFsPill(el) {
+  el.classList.toggle('checked');
+}
+
+/* 自动计算折扣率 */
+function calcFsRate(input) {
+  var row = input.closest('.fs-drawer-prod-bd');
+  var origText = row.querySelector('input[readonly]').value.replace(/[¥,]/g, '');
+  var orig = parseFloat(origText);
+  var disc = parseFloat(input.value);
+  var rateEl = row.querySelector('.fs-auto-rate');
+  if (orig > 0 && disc > 0 && disc <= orig) {
+    var r = Math.round((disc / orig) * 10);
+    rateEl.textContent = r + '折';
+  } else {
+    rateEl.textContent = '-';
+  }
+}
+
+/* 活动周期切换 */
+function selectFsCycle(el, type) {
+  el.parentElement.querySelectorAll('.fs-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+  var dateSection = document.getElementById('fsDateSection');
+  var cycleSection = document.getElementById('fsCycleSection');
+  if (type === 'recurring') {
+    dateSection.classList.add('hide');
+    cycleSection.classList.add('show');
+  } else {
+    dateSection.classList.remove('hide');
+    cycleSection.classList.remove('show');
+  }
+}
+
+function toggleFsDay(el) {
+  el.classList.toggle('active');
+}
+
+function fsDayQuick(mode) {
+  var days = document.querySelectorAll('#fsDaySel .fs-day');
+  days.forEach(function(d, i) {
+    if (mode === 'all') d.classList.add('active');
+    else if (mode === 'weekday') d.classList.toggle('active', i < 5);
+    else if (mode === 'weekend') d.classList.toggle('active', i >= 5);
+  });
+}
+
+/* 商品选择器回调 */
+function addFsProducts(items) {
+  var list = document.getElementById('fsProductList');
+  items.forEach(function(p) {
+    var price = p.price || (Math.floor(Math.random() * 30 + 15) + '.00');
+    var div = document.createElement('div');
+    div.className = 'fs-drawer-prod';
+    div.innerHTML =
+      '<div class="fs-drawer-prod-hd"><span>' + p.name + '</span>' +
+      '<button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button></div>' +
+      '<div class="fs-drawer-prod-bd">' +
+      '<div class="fs-field"><label>原价</label><input type="text" value="¥' + price + '" readonly></div>' +
+      '<div class="fs-field"><label>折扣价</label><input type="number" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)"></div>' +
+      '<div class="fs-field"><label>折扣</label><span class="fs-auto-rate">-</span></div>' +
+      '<div class="fs-field"><label>限购/人</label><input type="number" min="0" placeholder="不限则留空"></div>' +
+      '</div>';
+    list.appendChild(div);
+  });
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mkt-new-customer.html b/TakeoutSaaS.Prototypes/pages/mkt-new-customer.html
new file mode 100644
index 0000000..bc6dbfa
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mkt-new-customer.html
@@ -0,0 +1,396 @@
+<!-- 新客有礼页 -->
+<style>
+  .page-nc { max-width:960px; }
+  .nc-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
+  .nc-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); }
+  .nc-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .nc-banner { display:flex; align-items:center; gap:12px; padding:14px 18px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, #fff), color-mix(in srgb, var(--primary) 3%, #fff)); border:1px solid color-mix(in srgb, var(--primary) 15%, #fff); border-radius:10px; margin-bottom:16px; }
+  .nc-banner-icon { width:40px; height:40px; border-radius:10px; background:color-mix(in srgb, var(--primary) 12%, #fff); display:flex; align-items:center; justify-content:center; color:var(--primary); flex-shrink:0; }
+  .nc-banner-text { font-size:13px; color:var(--g-text-secondary); line-height:1.6; }
+  .nc-banner-text strong { color:var(--g-text); font-weight:600; }
+  .nc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
+  .nc-stat-card { background:#fff; border:1px solid var(--g-border); border-radius:10px; padding:18px 20px; transition:box-shadow var(--g-transition); }
+  .nc-stat-card:hover { box-shadow:var(--g-shadow-md); }
+  .nc-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
+  .nc-stat-val { font-size:28px; font-weight:700; color:var(--g-text); display:flex; align-items:baseline; gap:8px; }
+  .nc-stat-unit { font-size:13px; font-weight:400; color:var(--g-text-muted); }
+  .nc-stat-trend { font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:2px; }
+  .nc-stat-trend.up { color:var(--g-success); }
+  .nc-stat-sub { font-size:11px; color:var(--g-text-muted); margin-top:4px; }
+  .nc-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+  .nc-row { display:flex; align-items:flex-start; gap:16px; padding:14px 0; border-bottom:1px solid #f3f4f6; }
+  .nc-row:last-child { border-bottom:none; }
+  .nc-row-label { width:120px; flex-shrink:0; font-size:13px; font-weight:500; color:var(--g-text); line-height:22px; padding-top:5px; }
+  .nc-row-ctrl { flex:1; display:flex; flex-direction:column; gap:6px; }
+  .nc-row-ctrl-inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+  .nc-row-hint { font-size:11px; color:var(--g-text-muted); }
+  .nc-coupon-list { display:flex; flex-direction:column; gap:10px; }
+  .nc-coupon-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff; border:1px solid var(--g-border); border-radius:8px; border-left:3px solid var(--primary); transition:box-shadow var(--g-transition); }
+  .nc-coupon-item:nth-child(2) { border-left-color:var(--g-success); }
+  .nc-coupon-item:nth-child(3) { border-left-color:var(--g-warning); }
+  .nc-coupon-item:hover { box-shadow:var(--g-shadow); }
+  .nc-coupon-info { flex:1; }
+  .nc-coupon-name { font-size:14px; font-weight:600; color:var(--g-text); }
+  .nc-coupon-desc { font-size:11px; color:var(--g-text-muted); margin-top:2px; }
+  .nc-coupon-validity { font-size:12px; color:var(--g-text-secondary); display:flex; align-items:center; gap:4px; }
+  .nc-add-coupon-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; border:2px dashed #d9d9d9; border-radius:8px; color:var(--g-text-muted); font-size:13px; cursor:pointer; transition:all var(--g-transition); background:none; width:100%; }
+  .nc-add-coupon-btn:hover { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .nc-direct-panel { display:flex; flex-direction:column; gap:12px; }
+  .nc-share-url { display:flex; align-items:center; gap:8px; }
+  .nc-share-url input { flex:1; }
+  .nc-invite-table { margin-top:8px; }
+  .nc-save-bar { margin-top:20px; display:flex; justify-content:flex-end; gap:8px; }
+  .nc-num-input { width:100px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .nc-num-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .nc-suffix { font-size:13px; color:var(--g-text-secondary); white-space:nowrap; }
+</style>
+
+<div class="page-nc">
+  <!-- 顶部工具栏 -->
+  <div class="nc-toolbar">
+    <select style="width:200px;">
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <div style="flex:1;"></div>
+  </div>
+
+  <!-- 说明横幅 -->
+  <div class="nc-banner">
+    <div class="nc-banner-icon"><i data-lucide="gift" style="width:20px;height:20px;"></i></div>
+    <div class="nc-banner-text"><strong>新客有礼</strong> — 新用户首次下单自动发放优惠礼包，提升新客转化率。开启后，每位新注册用户将自动收到您配置的欢迎礼包。</div>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="nc-stats">
+    <div class="nc-stat-card">
+      <div class="nc-stat-label"><i data-lucide="user-plus" style="width:14px;height:14px;color:var(--primary);"></i>本月新客</div>
+      <div class="nc-stat-val">86<span class="nc-stat-unit">人</span><span class="nc-stat-trend up"><i data-lucide="trending-up" style="width:14px;height:14px;"></i>+23%</span></div>
+      <div class="nc-stat-sub">较上月增长 16 人</div>
+    </div>
+    <div class="nc-stat-card">
+      <div class="nc-stat-label"><i data-lucide="ticket" style="width:14px;height:14px;color:var(--g-warning);"></i>礼包领取率</div>
+      <div class="nc-stat-val">92.4<span class="nc-stat-unit">%</span></div>
+      <div class="nc-stat-sub">86 人中 80 人已领取</div>
+    </div>
+    <div class="nc-stat-card">
+      <div class="nc-stat-label"><i data-lucide="shopping-bag" style="width:14px;height:14px;color:var(--g-success);"></i>新客转化率</div>
+      <div class="nc-stat-val">68.5<span class="nc-stat-unit">%</span></div>
+      <div class="nc-stat-sub">首单完成率，59 人已下单</div>
+    </div>
+  </div>
+
+  <!-- 新客礼包配置 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div style="padding:18px 18px 0;">
+      <div class="nc-section-hd">新客礼包配置</div>
+    </div>
+    <div style="padding:0 18px 18px;">
+      <!-- 启用状态 -->
+      <div class="nc-row">
+        <div class="nc-row-label">启用状态</div>
+        <div class="nc-row-ctrl">
+          <div class="nc-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">开启后新用户注册即发放礼包</span>
+          </div>
+        </div>
+      </div>
+      <!-- 礼包类型 -->
+      <div class="nc-row">
+        <div class="nc-row-label">礼包类型</div>
+        <div class="nc-row-ctrl">
+          <div class="nc-row-ctrl-inline">
+            <span class="g-pill checked" onclick="selectNcType('coupon',this)">优惠券包</span>
+            <span class="g-pill" onclick="selectNcType('direct',this)">首单直减</span>
+          </div>
+        </div>
+      </div>
+      <!-- 优惠券包内容 -->
+      <div id="ncTypeCoupon">
+        <div class="nc-row" style="flex-direction:column; gap:12px;">
+          <div class="nc-row-label" style="width:auto;">券包内容</div>
+          <div class="nc-coupon-list" id="ncCouponList">
+            <div class="nc-coupon-item" data-idx="0">
+              <div class="nc-coupon-info">
+                <div class="nc-coupon-name">满30减5</div>
+                <div class="nc-coupon-desc">订单满 30 元可用</div>
+              </div>
+              <div class="nc-coupon-validity"><i data-lucide="clock" style="width:12px;height:12px;"></i>领取后7天</div>
+              <button class="g-btn g-btn-sm g-btn-danger" onclick="removeNcCoupon(this)"><i data-lucide="trash-2" style="width:12px;height:12px;"></i></button>
+            </div>
+            <div class="nc-coupon-item" data-idx="1">
+              <div class="nc-coupon-info">
+                <div class="nc-coupon-name">满50享8折</div>
+                <div class="nc-coupon-desc">订单满 50 元可用</div>
+              </div>
+              <div class="nc-coupon-validity"><i data-lucide="clock" style="width:12px;height:12px;"></i>领取后7天</div>
+              <button class="g-btn g-btn-sm g-btn-danger" onclick="removeNcCoupon(this)"><i data-lucide="trash-2" style="width:12px;height:12px;"></i></button>
+            </div>
+            <div class="nc-coupon-item" data-idx="2">
+              <div class="nc-coupon-info">
+                <div class="nc-coupon-name">免配送费</div>
+                <div class="nc-coupon-desc">无门槛，减免配送费</div>
+              </div>
+              <div class="nc-coupon-validity"><i data-lucide="clock" style="width:12px;height:12px;"></i>领取后7天</div>
+              <button class="g-btn g-btn-sm g-btn-danger" onclick="removeNcCoupon(this)"><i data-lucide="trash-2" style="width:12px;height:12px;"></i></button>
+            </div>
+          </div>
+          <button class="nc-add-coupon-btn" onclick="openNcDrawer()"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加优惠券</button>
+        </div>
+      </div>
+      <!-- 首单直减 -->
+      <div id="ncTypeDirect" style="display:none;">
+        <div class="nc-row">
+          <div class="nc-row-label">直减金额</div>
+          <div class="nc-row-ctrl">
+            <div class="nc-row-ctrl-inline">
+              <span class="nc-suffix">¥</span>
+              <input type="number" class="nc-num-input" placeholder="如：10" value="10" />
+            </div>
+            <div class="nc-row-hint">新用户首单自动减免的金额</div>
+          </div>
+        </div>
+        <div class="nc-row">
+          <div class="nc-row-label">使用门槛</div>
+          <div class="nc-row-ctrl">
+            <div class="nc-row-ctrl-inline">
+              <span class="nc-suffix">订单满</span>
+              <input type="number" class="nc-num-input" placeholder="如：30" value="30" />
+              <span class="nc-suffix">元可用</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 老带新分享 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div style="padding:18px 18px 0;">
+      <div class="nc-section-hd">老带新分享</div>
+    </div>
+    <div style="padding:0 18px 18px;">
+      <div class="nc-row">
+        <div class="nc-row-label">启用状态</div>
+        <div class="nc-row-ctrl">
+          <div class="nc-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">开启后顾客可在小程序内分享邀请好友</span>
+          </div>
+        </div>
+      </div>
+      <div class="nc-row" style="flex-direction:column; gap:12px;">
+        <div class="nc-row-label" style="width:auto;">邀请人奖励 <span style="font-weight:400;color:var(--g-text-muted);font-size:12px;">成功邀请新用户下单后发放</span></div>
+        <div class="nc-coupon-list" id="ncInviterList">
+          <div class="nc-coupon-item">
+            <div class="nc-coupon-info">
+              <div class="nc-coupon-name">满30减5</div>
+              <div class="nc-coupon-desc">订单满 30 元可用</div>
+            </div>
+            <div class="nc-coupon-validity"><i data-lucide="clock" style="width:12px;height:12px;"></i>领取后7天</div>
+            <button class="g-btn g-btn-sm g-btn-danger" onclick="removeNcCoupon(this)"><i data-lucide="trash-2" style="width:12px;height:12px;"></i></button>
+          </div>
+        </div>
+        <button class="nc-add-coupon-btn" onclick="openNcDrawer('inviter')"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加奖励券</button>
+      </div>
+      <div class="nc-row" style="flex-direction:column; gap:12px;">
+        <div class="nc-row-label" style="width:auto;">被邀请人奖励 <span style="font-weight:400;color:var(--g-text-muted);font-size:12px;">新用户通过邀请注册后额外获得，叠加新客礼包</span></div>
+        <div class="nc-coupon-list" id="ncInviteeList">
+          <div class="nc-coupon-item">
+            <div class="nc-coupon-info">
+              <div class="nc-coupon-name">满20减3</div>
+              <div class="nc-coupon-desc">订单满 20 元可用</div>
+            </div>
+            <div class="nc-coupon-validity"><i data-lucide="clock" style="width:12px;height:12px;"></i>领取后7天</div>
+            <button class="g-btn g-btn-sm g-btn-danger" onclick="removeNcCoupon(this)"><i data-lucide="trash-2" style="width:12px;height:12px;"></i></button>
+          </div>
+          <div class="nc-coupon-item">
+            <div class="nc-coupon-info">
+              <div class="nc-coupon-name">免配送费</div>
+              <div class="nc-coupon-desc">无门槛，减免配送费</div>
+            </div>
+            <div class="nc-coupon-validity"><i data-lucide="clock" style="width:12px;height:12px;"></i>领取后7天</div>
+            <button class="g-btn g-btn-sm g-btn-danger" onclick="removeNcCoupon(this)"><i data-lucide="trash-2" style="width:12px;height:12px;"></i></button>
+          </div>
+        </div>
+        <button class="nc-add-coupon-btn" onclick="openNcDrawer('invitee')"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加奖励券</button>
+      </div>
+      <div class="nc-row">
+        <div class="nc-row-label">分享渠道</div>
+        <div class="nc-row-ctrl">
+          <div style="display:flex;gap:8px;">
+            <span class="g-pill checked" onclick="this.classList.toggle('checked')">微信好友</span>
+            <span class="g-pill checked" onclick="this.classList.toggle('checked')">朋友圈</span>
+            <span class="g-pill" onclick="this.classList.toggle('checked')">短信</span>
+          </div>
+          <div class="nc-row-hint">顾客在小程序内可通过以上渠道分享邀请</div>
+        </div>
+      </div>
+      <div class="nc-row" style="flex-direction:column; gap:12px;">
+        <div class="nc-row-label" style="width:auto;">邀请记录（近期）</div>
+        <div class="nc-invite-table" style="width:100%;">
+          <table class="g-table">
+            <thead>
+              <tr>
+                <th>邀请人</th>
+                <th>被邀请人</th>
+                <th>邀请时间</th>
+                <th>状态</th>
+                <th>奖励发放</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>张**</td>
+                <td>李**</td>
+                <td>2025-02-10 14:32</td>
+                <td><span class="g-tag g-tag-green">已下单</span></td>
+                <td><span class="g-tag g-tag-green">已发放</span></td>
+              </tr>
+              <tr>
+                <td>王**</td>
+                <td>赵**</td>
+                <td>2025-02-09 09:15</td>
+                <td><span class="g-tag g-tag-orange">待下单</span></td>
+                <td><span class="g-tag g-tag-gray">待触发</span></td>
+              </tr>
+              <tr>
+                <td>张**</td>
+                <td>孙**</td>
+                <td>2025-02-08 18:47</td>
+                <td><span class="g-tag g-tag-green">已下单</span></td>
+                <td><span class="g-tag g-tag-green">已发放</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 底部保存 -->
+  <div class="g-card" style="padding:14px 18px;">
+    <div style="display:flex; justify-content:flex-end; gap:8px;">
+      <button class="g-btn"><i data-lucide="rotate-ccw" style="width:14px;height:14px;"></i>重置</button>
+      <button class="g-btn g-btn-primary"><i data-lucide="save" style="width:14px;height:14px;"></i>保存设置</button>
+    </div>
+  </div>
+</div>
+
+<!-- 添加优惠券抽屉 -->
+<div class="g-drawer-mask" id="ncDrawerMask" onclick="closeNcDrawer()"></div>
+<div class="g-drawer" id="ncDrawer" style="width:480px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">添加优惠券</span>
+    <button class="g-drawer-close" onclick="closeNcDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">券类型</label>
+      <div style="display:flex; gap:8px;">
+        <span class="g-pill checked" onclick="selectNcCouponType('reduce',this)">满减券</span>
+        <span class="g-pill" onclick="selectNcCouponType('discount',this)">折扣券</span>
+        <span class="g-pill" onclick="selectNcCouponType('shipping',this)">免配送费</span>
+      </div>
+    </div>
+    <!-- 满减券面额 -->
+    <div id="ncCouponReduce">
+      <div class="g-form-group">
+        <label class="g-form-label required">减免金额</label>
+        <div style="display:flex; align-items:center; gap:8px;">
+          <span style="font-size:13px; color:var(--g-text-secondary);">¥</span>
+          <input class="g-input" type="number" placeholder="如：5" style="width:120px;" />
+        </div>
+      </div>
+    </div>
+    <!-- 折扣券面额 -->
+    <div id="ncCouponDiscount" style="display:none;">
+      <div class="g-form-group">
+        <label class="g-form-label required">折扣</label>
+        <div style="display:flex; align-items:center; gap:8px;">
+          <input class="g-input" type="number" placeholder="如：8（即8折）" style="width:160px;" />
+          <span style="font-size:13px; color:var(--g-text-secondary);">折</span>
+        </div>
+      </div>
+    </div>
+    <!-- 免配送费无额外字段 -->
+    <div id="ncCouponShipping" style="display:none;">
+      <div class="g-form-group">
+        <div style="padding:16px; background:#f8f9fb; border-radius:8px; font-size:13px; color:var(--g-text-secondary); text-align:center;">
+          <i data-lucide="truck" style="width:20px;height:20px;color:var(--g-text-muted);display:block;margin:0 auto 6px;"></i>
+          免配送费券无需设置面额
+        </div>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">使用门槛</label>
+      <div style="display:flex; align-items:center; gap:8px;">
+        <span style="font-size:13px; color:var(--g-text-secondary);">订单满</span>
+        <input class="g-input" type="number" placeholder="如：30" style="width:120px;" />
+        <span style="font-size:13px; color:var(--g-text-secondary);">元可用</span>
+      </div>
+      <div class="g-hint">留空或填 0 表示无门槛</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">有效期</label>
+      <div style="display:flex; align-items:center; gap:8px;">
+        <span style="font-size:13px; color:var(--g-text-secondary);">领取后</span>
+        <input class="g-input" type="number" placeholder="如：7" style="width:100px;" value="7" />
+        <span style="font-size:13px; color:var(--g-text-secondary);">天</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeNcDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeNcDrawer()">添加</button>
+  </div>
+</div>
+
+<script>
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+
+function selectNcType(type, el) {
+  el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+  document.getElementById('ncTypeCoupon').style.display = type === 'coupon' ? '' : 'none';
+  document.getElementById('ncTypeDirect').style.display = type === 'direct' ? '' : 'none';
+}
+
+function openNcDrawer() {
+  document.getElementById('ncDrawerMask').classList.add('open');
+  document.getElementById('ncDrawer').classList.add('open');
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function closeNcDrawer() {
+  document.getElementById('ncDrawerMask').classList.remove('open');
+  document.getElementById('ncDrawer').classList.remove('open');
+}
+
+function removeNcCoupon(btn) {
+  var item = btn.closest('.nc-coupon-item');
+  if (item) { item.style.transition = 'opacity 200ms, transform 200ms'; item.style.opacity = '0'; item.style.transform = 'translateX(20px)'; setTimeout(function() { item.remove(); }, 200); }
+}
+
+function selectNcCouponType(type, el) {
+  el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+  document.getElementById('ncCouponReduce').style.display = type === 'reduce' ? '' : 'none';
+  document.getElementById('ncCouponDiscount').style.display = type === 'discount' ? '' : 'none';
+  document.getElementById('ncCouponShipping').style.display = type === 'shipping' ? '' : 'none';
+}
+
+function copyNcLink() {
+  var input = document.querySelector('.nc-share-url input');
+  input.select();
+  document.execCommand('copy');
+}
+
+if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mkt-pass-card.html b/TakeoutSaaS.Prototypes/pages/mkt-pass-card.html
new file mode 100644
index 0000000..9f2576a
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mkt-pass-card.html
@@ -0,0 +1,678 @@
+<!-- 次卡管理页 -->
+<style>
+  .page-pk { max-width:1100px; }
+
+  /* 分段 Tab */
+  .pk-seg { display:flex; background:#f5f5f5; border-radius:var(--g-radius); overflow:hidden; border:1px solid #e8e8e8; width:fit-content; margin-bottom:16px; }
+  .pk-seg-item {
+    padding:8px 28px; font-size:13px; cursor:pointer; color:var(--g-text-muted);
+    transition:all var(--g-transition); user-select:none; border-right:1px solid #e8e8e8;
+    background:transparent; border-top:none; border-bottom:none; border-left:none;
+  }
+  .pk-seg-item:last-child { border-right:none; }
+  .pk-seg-item:hover { color:var(--g-text-secondary); background:#f0f0f0; }
+  .pk-seg-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.06); }
+
+  /* 统计卡片 */
+  .pk-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+  .pk-stat-card {
+    background:#fff; border-radius:10px; padding:16px 20px;
+    box-shadow:var(--g-shadow-sm); transition:all var(--g-transition);
+  }
+  .pk-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .pk-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
+  .pk-stat-value { font-size:24px; font-weight:700; color:var(--g-text); }
+  .pk-stat-value.primary { color:var(--primary); }
+  .pk-stat-value.green { color:var(--g-success); }
+  .pk-stat-value.orange { color:var(--g-warning); }
+
+  /* 工具栏 */
+  .pk-toolbar {
+    display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;
+    box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff;
+  }
+  .pk-toolbar select, .pk-toolbar input[type="text"] {
+    height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+    font-size:13px; outline:none; transition:all var(--g-transition); background:#fff;
+  }
+  .pk-toolbar select:focus, .pk-toolbar input[type="text"]:focus {
+    border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
+  }
+
+  /* 次卡网格 */
+  .pk-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }
+  .pk-card {
+    background:#fff; border-radius:12px; overflow:hidden;
+    box-shadow:var(--g-shadow-sm); transition:all var(--g-transition); display:flex;
+  }
+  .pk-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .pk-card.pk-off { opacity:.55; }
+  .pk-card-cover {
+    width:140px; min-height:160px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
+    color:#fff; font-size:28px; font-weight:700; position:relative;
+  }
+  .pk-card-cover .pk-cover-icon { opacity:.3; position:absolute; }
+  .pk-card-cover-label { position:relative; z-index:1; text-align:center; line-height:1.3; }
+  .pk-card-cover-label small { display:block; font-size:12px; font-weight:400; opacity:.8; }
+  .pk-card-bd { flex:1; padding:16px; display:flex; flex-direction:column; }
+  .pk-card-name { font-size:15px; font-weight:600; color:var(--g-text); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
+  .pk-card-price { margin-bottom:8px; display:flex; align-items:baseline; gap:6px; }
+  .pk-card-price-now { font-size:22px; font-weight:700; color:var(--g-danger); }
+  .pk-card-price-orig { font-size:13px; color:var(--g-text-muted); text-decoration:line-through; }
+  .pk-card-info { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
+  .pk-info-tag {
+    font-size:11px; padding:2px 8px; border-radius:4px; background:#f5f5f5; color:var(--g-text-secondary);
+  }
+  .pk-card-meta { font-size:12px; color:var(--g-text-muted); margin-bottom:10px; display:flex; gap:14px; }
+  .pk-card-ft { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:10px; border-top:1px solid #f5f5f5; }
+  .pk-card-ft .g-tag { margin-left:auto; }
+
+  /* scope tag 颜色 */
+  .pk-scope-tag { font-size:11px; font-weight:500; padding:1px 6px; border-radius:4px; }
+  .pk-scope-tag.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
+  .pk-scope-tag.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
+  .pk-scope-tag.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
+  .pk-scope-tag.purple { background:color-mix(in srgb, #7c3aed 12%, #fff); color:#7c3aed; }
+
+  /* 使用记录 */
+  .pk-rec-member { display:flex; flex-direction:column; gap:2px; }
+  .pk-rec-member-name { font-size:13px; font-weight:500; color:var(--g-text); }
+  .pk-rec-member-phone { font-size:12px; color:var(--g-text-muted); }
+  .pk-rec-status { display:inline-flex; align-items:center; gap:4px; font-size:12px; }
+  .pk-rec-status::before { content:''; width:6px; height:6px; border-radius:50%; }
+  .pk-rec-status.green::before { background:var(--g-success); }
+  .pk-rec-status.orange::before { background:var(--g-warning); }
+  .pk-rec-status.gray::before { background:#bbb; }
+
+  /* 抽屉内上传 */
+  .pk-upload-placeholder {
+    width:100%; height:100px; border:2px dashed #d9d9d9; border-radius:var(--g-radius);
+    display:flex; flex-direction:column; align-items:center; justify-content:center;
+    color:var(--g-text-muted); font-size:13px; gap:6px; cursor:pointer;
+    transition:all var(--g-transition); background:var(--g-bg-subtle);
+  }
+  .pk-upload-placeholder:hover { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, #fff); }
+
+  /* 通知 pill 多选 */
+  .pk-notify-pills { display:flex; gap:10px; }
+  .pk-notify-pills .g-pill { position:relative; padding-left:24px; }
+  .pk-notify-pills .g-pill::before {
+    content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%);
+    width:12px; height:12px; border:1.5px solid #ccc; border-radius:3px; transition:all var(--g-transition);
+  }
+  .pk-notify-pills .g-pill.checked::before {
+    background:var(--primary); border-color:var(--primary);
+    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  }
+
+  /* section 标题 */
+  .pk-section-hd {
+    font-size:15px; font-weight:600; color:var(--g-text);
+    padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
+  }
+
+  /* 适用范围选中项 */
+  .pk-scope-items { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
+  .pk-scope-item {
+    display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#f5f5f5;
+    border-radius:6px; font-size:12px; color:var(--g-text-secondary);
+  }
+  .pk-scope-item button {
+    background:none; border:none; color:var(--g-text-muted); cursor:pointer; padding:0; line-height:1;
+  }
+  .pk-scope-item button:hover { color:var(--g-danger); }
+</style>
+
+<div class="page-pk">
+  <!-- 分段 Tab -->
+  <div class="pk-seg">
+    <button class="pk-seg-item active" onclick="switchPkTab(this, 'list')">次卡列表</button>
+    <button class="pk-seg-item" onclick="switchPkTab(this, 'records')">使用记录</button>
+  </div>
+
+  <!-- ==================== TAB 1: 次卡列表 ==================== -->
+  <div id="pkTabList">
+
+    <!-- 统计 -->
+    <div class="pk-stats">
+      <div class="pk-stat-card">
+        <div class="pk-stat-label">在售次卡</div>
+        <div class="pk-stat-value primary">3</div>
+      </div>
+      <div class="pk-stat-card">
+        <div class="pk-stat-label">累计售出</div>
+        <div class="pk-stat-value">287张</div>
+      </div>
+      <div class="pk-stat-card">
+        <div class="pk-stat-label">累计收入</div>
+        <div class="pk-stat-value green">¥18,640</div>
+      </div>
+      <div class="pk-stat-card">
+        <div class="pk-stat-label">使用中</div>
+        <div class="pk-stat-value orange">124张</div>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="pk-toolbar">
+      <select style="width:120px;">
+        <option value="">全部状态</option>
+        <option>上架</option>
+        <option>下架</option>
+      </select>
+      <input type="text" placeholder="搜索次卡名称" style="width:200px;">
+      <div style="flex:1;"></div>
+      <button class="g-btn g-btn-primary" onclick="openPkDrawer()">
+        <i data-lucide="plus" style="width:14px;height:14px;"></i>创建次卡
+      </button>
+    </div>
+
+    <!-- 次卡网格 -->
+    <div class="pk-grid">
+
+      <!-- 卡1: 咖啡月卡 -->
+      <div class="pk-card">
+        <div class="pk-card-cover" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);">
+          <i data-lucide="coffee" class="pk-cover-icon" style="width:60px;height:60px;"></i>
+          <div class="pk-card-cover-label">30<small>次</small></div>
+        </div>
+        <div class="pk-card-bd">
+          <div class="pk-card-name">咖啡月卡<span class="pk-scope-tag blue">指定分类</span></div>
+          <div class="pk-card-price">
+            <span class="pk-card-price-now">¥99</span>
+            <span class="pk-card-price-orig">¥150</span>
+          </div>
+          <div class="pk-card-info">
+            <span class="pk-info-tag">30天有效</span>
+            <span class="pk-info-tag">完全免费</span>
+            <span class="pk-info-tag">每日限1次</span>
+          </div>
+          <div class="pk-card-meta">
+            <span>已售 156</span>
+            <span>使用中 68</span>
+          </div>
+          <div class="pk-card-ft">
+            <a class="g-action" onclick="openPkDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 卡2: 早餐周卡 -->
+      <div class="pk-card">
+        <div class="pk-card-cover" style="background:linear-gradient(135deg,#f59e0b,#f97316);">
+          <i data-lucide="sunrise" class="pk-cover-icon" style="width:60px;height:60px;"></i>
+          <div class="pk-card-cover-label">7<small>次</small></div>
+        </div>
+        <div class="pk-card-bd">
+          <div class="pk-card-name">早餐周卡<span class="pk-scope-tag green">指定标签</span></div>
+          <div class="pk-card-price">
+            <span class="pk-card-price-now">¥29</span>
+            <span class="pk-card-price-orig">¥56</span>
+          </div>
+          <div class="pk-card-info">
+            <span class="pk-info-tag">7天有效</span>
+            <span class="pk-info-tag">完全免费</span>
+            <span class="pk-info-tag">每日限1次</span>
+          </div>
+          <div class="pk-card-meta">
+            <span>已售 89</span>
+            <span>使用中 34</span>
+          </div>
+          <div class="pk-card-ft">
+            <a class="g-action" onclick="openPkDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 卡3: 奶茶畅饮卡 -->
+      <div class="pk-card">
+        <div class="pk-card-cover" style="background:linear-gradient(135deg,#ec4899,#f43f5e);">
+          <i data-lucide="cup-soda" class="pk-cover-icon" style="width:60px;height:60px;"></i>
+          <div class="pk-card-cover-label">15<small>次</small></div>
+        </div>
+        <div class="pk-card-bd">
+          <div class="pk-card-name">奶茶畅饮卡<span class="pk-scope-tag purple">指定商品</span></div>
+          <div class="pk-card-price">
+            <span class="pk-card-price-now">¥59</span>
+            <span class="pk-card-price-orig">¥120</span>
+          </div>
+          <div class="pk-card-info">
+            <span class="pk-info-tag">15天有效</span>
+            <span class="pk-info-tag">上限¥20/次</span>
+            <span class="pk-info-tag">不限次/日</span>
+          </div>
+          <div class="pk-card-meta">
+            <span>已售 42</span>
+            <span>使用中 22</span>
+          </div>
+          <div class="pk-card-ft">
+            <a class="g-action" onclick="openPkDrawer()">编辑</a>
+            <a class="g-action">下架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-green">上架</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 卡4: 午餐次卡（已下架） -->
+      <div class="pk-card pk-off">
+        <div class="pk-card-cover" style="background:linear-gradient(135deg,#64748b,#94a3af);">
+          <i data-lucide="utensils" class="pk-cover-icon" style="width:60px;height:60px;"></i>
+          <div class="pk-card-cover-label">20<small>次</small></div>
+        </div>
+        <div class="pk-card-bd">
+          <div class="pk-card-name">午餐次卡<span class="pk-scope-tag blue">指定分类</span></div>
+          <div class="pk-card-price">
+            <span class="pk-card-price-now">¥199</span>
+            <span class="pk-card-price-orig">¥300</span>
+          </div>
+          <div class="pk-card-info">
+            <span class="pk-info-tag">30天有效</span>
+            <span class="pk-info-tag">完全免费</span>
+            <span class="pk-info-tag">每日限1次</span>
+          </div>
+          <div class="pk-card-meta">
+            <span>已售 0</span>
+            <span>使用中 0</span>
+          </div>
+          <div class="pk-card-ft">
+            <a class="g-action" onclick="openPkDrawer()">编辑</a>
+            <a class="g-action">上架</a>
+            <a class="g-action g-action-danger">删除</a>
+            <span class="g-tag g-tag-gray">下架</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- ==================== TAB 2: 使用记录 ==================== -->
+  <div id="pkTabRecords" style="display:none;">
+
+    <!-- 筛选工具栏 -->
+    <div class="pk-toolbar">
+      <select style="width:130px;">
+        <option value="">全部次卡</option>
+        <option>咖啡月卡</option>
+        <option>早餐周卡</option>
+        <option>奶茶畅饮卡</option>
+      </select>
+      <select style="width:120px;">
+        <option value="">全部状态</option>
+        <option>正常使用</option>
+        <option>已用完</option>
+        <option>已过期</option>
+      </select>
+      <input type="text" placeholder="搜索会员/商品" style="width:200px;">
+      <div style="flex:1;"></div>
+      <button class="g-btn g-btn-sm"><i data-lucide="download" style="width:13px;height:13px;"></i>导出</button>
+    </div>
+
+    <!-- 统计 -->
+    <div class="pk-stats" style="grid-template-columns:repeat(3,1fr);">
+      <div class="pk-stat-card">
+        <div class="pk-stat-label">今日使用</div>
+        <div class="pk-stat-value primary">18</div>
+      </div>
+      <div class="pk-stat-card">
+        <div class="pk-stat-label">本月使用</div>
+        <div class="pk-stat-value">342</div>
+      </div>
+      <div class="pk-stat-card">
+        <div class="pk-stat-label">即将过期（7天内）</div>
+        <div class="pk-stat-value orange">15张</div>
+      </div>
+    </div>
+
+    <!-- 使用记录表格 -->
+    <div class="g-card" style="padding:0;">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>使用单号</th>
+            <th>会员</th>
+            <th>次卡</th>
+            <th>兑换商品</th>
+            <th>使用时间</th>
+            <th>剩余次数</th>
+            <th>状态</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PK20260212001</td>
+            <td><div class="pk-rec-member"><span class="pk-rec-member-name">张三</span><span class="pk-rec-member-phone">138****6789</span></div></td>
+            <td>咖啡月卡</td>
+            <td>美式咖啡</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 08:30</td>
+            <td><span style="font-weight:600;color:var(--primary);">22/30</span></td>
+            <td><span class="pk-rec-status green">正常使用</span></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PK20260212002</td>
+            <td><div class="pk-rec-member"><span class="pk-rec-member-name">李四</span><span class="pk-rec-member-phone">139****1234</span></div></td>
+            <td>早餐周卡</td>
+            <td>鸡蛋灌饼</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 07:45</td>
+            <td><span style="font-weight:600;color:var(--primary);">3/7</span></td>
+            <td><span class="pk-rec-status green">正常使用</span></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PK20260211003</td>
+            <td><div class="pk-rec-member"><span class="pk-rec-member-name">王五</span><span class="pk-rec-member-phone">137****5678</span></div></td>
+            <td>奶茶畅饮卡</td>
+            <td>珍珠奶茶（补差价¥5）</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 15:20</td>
+            <td><span style="font-weight:600;color:var(--g-warning);">2/15</span></td>
+            <td><span class="pk-rec-status orange">即将用完</span></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PK20260211004</td>
+            <td><div class="pk-rec-member"><span class="pk-rec-member-name">赵六</span><span class="pk-rec-member-phone">136****4321</span></div></td>
+            <td>咖啡月卡</td>
+            <td>拿铁</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 09:10</td>
+            <td><span style="font-weight:600;color:var(--g-text-muted);">0/30</span></td>
+            <td><span class="pk-rec-status gray">已用完</span></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PK20260210005</td>
+            <td><div class="pk-rec-member"><span class="pk-rec-member-name">孙七</span><span class="pk-rec-member-phone">135****8765</span></div></td>
+            <td>早餐周卡</td>
+            <td>豆浆油条套餐</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 07:30</td>
+            <td><span style="font-weight:600;color:var(--g-text-muted);">0/7</span></td>
+            <td><span class="pk-rec-status gray">已过期</span></td>
+          </tr>
+          <tr>
+            <td style="font-family:monospace;font-size:12px;">PK20260210006</td>
+            <td><div class="pk-rec-member"><span class="pk-rec-member-name">周八</span><span class="pk-rec-member-phone">133****2222</span></div></td>
+            <td>咖啡月卡</td>
+            <td>卡布奇诺</td>
+            <td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 10:45</td>
+            <td><span style="font-weight:600;color:var(--primary);">15/30</span></td>
+            <td><span class="pk-rec-status green">正常使用</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="g-pagination" style="margin-top:16px;">
+      <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn">2</button>
+      <button class="g-page-btn">3</button>
+      <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+    </div>
+  </div>
+</div>
+
+<!-- ==================== 创建/编辑次卡抽屉 ==================== -->
+<div class="g-drawer-mask" id="pkDrawerMask" onclick="closePkDrawer()"></div>
+<div class="g-drawer" id="pkDrawer" style="width:520px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">创建次卡</span>
+    <button class="g-drawer-close" onclick="closePkDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+
+    <!-- 次卡名称 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">次卡名称</label>
+      <input class="g-input" placeholder="如：咖啡月卡、早餐周卡">
+    </div>
+
+    <!-- 封面图片 -->
+    <div class="g-form-group">
+      <label class="g-form-label">封面图片</label>
+      <div class="pk-upload-placeholder">
+        <i data-lucide="upload-cloud" style="width:24px;height:24px;"></i>
+        <span>点击上传封面</span>
+      </div>
+    </div>
+
+    <!-- 价格 -->
+    <div style="display:flex;gap:12px;">
+      <div class="g-form-group" style="flex:1;">
+        <label class="g-form-label required">售价</label>
+        <input class="g-input" type="number" placeholder="如：99" min="0" step="0.01">
+      </div>
+      <div class="g-form-group" style="flex:1;">
+        <label class="g-form-label">原价</label>
+        <input class="g-input" type="number" placeholder="如：150（划线价）" min="0" step="0.01">
+      </div>
+    </div>
+
+    <!-- 总次数 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">总次数</label>
+      <input class="g-input" type="number" placeholder="如：30" min="1">
+      <div class="g-hint">购买后可使用的总次数</div>
+    </div>
+
+    <!-- 有效期 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">有效期</label>
+      <div style="display:flex;gap:10px;margin-bottom:8px;">
+        <span class="g-pill checked" onclick="selectPkValidity(this,'days')">固定天数</span>
+        <span class="g-pill" onclick="selectPkValidity(this,'range')">日期范围</span>
+      </div>
+      <div id="pkValidityDays">
+        <div style="display:flex;align-items:center;gap:8px;">
+          <span style="font-size:13px;color:var(--g-text-secondary);">购买后</span>
+          <input class="g-input" type="number" placeholder="如：30" min="1" style="width:100px;">
+          <span style="font-size:13px;color:var(--g-text-secondary);">天内有效</span>
+        </div>
+      </div>
+      <div id="pkValidityRange" style="display:none;">
+        <div style="display:flex;align-items:center;gap:8px;">
+          <input class="g-input" type="date" style="width:160px;">
+          <span style="font-size:13px;color:var(--g-text-secondary);">至</span>
+          <input class="g-input" type="date" style="width:160px;">
+        </div>
+      </div>
+    </div>
+
+    <div class="g-divider"></div>
+
+    <!-- 适用范围 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">适用范围</label>
+      <div style="display:flex;gap:10px;margin-bottom:8px;">
+        <span class="g-pill checked" onclick="selectPkScope(this,'all')">全部商品</span>
+        <span class="g-pill" onclick="selectPkScope(this,'category')">指定分类</span>
+        <span class="g-pill" onclick="selectPkScope(this,'tag')">指定标签</span>
+        <span class="g-pill" onclick="selectPkScope(this,'product')">指定商品</span>
+      </div>
+      <div id="pkScopeAll">
+        <div class="g-hint">持卡可兑换店内任意商品</div>
+      </div>
+      <div id="pkScopeCategory" style="display:none;">
+        <select class="g-select" style="width:100%;">
+          <option value="">请选择商品分类</option>
+          <option>热饮</option>
+          <option>冷饮</option>
+          <option>早餐</option>
+          <option>午餐套餐</option>
+          <option>小食甜点</option>
+        </select>
+        <div class="pk-scope-items">
+          <span class="pk-scope-item">热饮 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+          <span class="pk-scope-item">冷饮 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+        </div>
+        <div class="g-hint">可多选，持卡可兑换所选分类下的任意商品</div>
+      </div>
+      <div id="pkScopeTag" style="display:none;">
+        <select class="g-select" style="width:100%;">
+          <option value="">请选择商品标签</option>
+          <option>早餐系列</option>
+          <option>人气爆款</option>
+          <option>新品上市</option>
+          <option>轻食健康</option>
+        </select>
+        <div class="pk-scope-items">
+          <span class="pk-scope-item">早餐系列 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+        </div>
+        <div class="g-hint">可多选，持卡可兑换带有所选标签的商品</div>
+      </div>
+      <div id="pkScopeProduct" style="display:none;">
+        <button class="g-btn g-btn-sm" onclick="openProductPicker({title:'选择适用商品',subtitle:'次卡管理',onConfirm:function(){}})"><i data-lucide="plus" style="width:13px;height:13px;"></i>选择商品</button>
+        <div class="pk-scope-items">
+          <span class="pk-scope-item">美式咖啡 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+          <span class="pk-scope-item">拿铁 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+          <span class="pk-scope-item">卡布奇诺 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+        </div>
+        <div class="g-hint">可多选，持卡仅可兑换指定的商品</div>
+      </div>
+    </div>
+
+    <!-- 使用模式 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">使用模式</label>
+      <div style="display:flex;gap:10px;margin-bottom:8px;">
+        <span class="g-pill checked" onclick="selectPkUsageMode(this,'free')">完全免费</span>
+        <span class="g-pill" onclick="selectPkUsageMode(this,'cap')">金额上限</span>
+      </div>
+      <div id="pkModeFree">
+        <div class="g-hint">每次使用免费兑换一件适用范围内的商品，不限原价</div>
+      </div>
+      <div id="pkModeCap" style="display:none;">
+        <div style="display:flex;align-items:center;gap:8px;">
+          <span style="font-size:13px;color:var(--g-text-secondary);">每次使用上限</span>
+          <input class="g-input" type="number" placeholder="如：20" min="0" step="0.01" style="width:100px;">
+          <span style="font-size:13px;color:var(--g-text-secondary);">元</span>
+        </div>
+        <div class="g-hint">超出上限部分由顾客补差价</div>
+      </div>
+    </div>
+
+    <div class="g-divider"></div>
+
+    <!-- 使用规则 -->
+    <div class="g-form-group">
+      <label class="g-form-label">每日限用</label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input class="g-input" type="number" placeholder="不限" min="0" style="width:100px;">
+        <span style="font-size:13px;color:var(--g-text-secondary);">次/天</span>
+      </div>
+      <div class="g-hint">留空或填0表示不限制每日使用次数</div>
+    </div>
+
+    <div class="g-form-group">
+      <label class="g-form-label">每单限用</label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input class="g-input" type="number" placeholder="不限" min="0" style="width:100px;">
+        <span style="font-size:13px;color:var(--g-text-secondary);">次/单</span>
+      </div>
+      <div class="g-hint">同一订单内可使用的次数，如一单点5杯可用5次</div>
+    </div>
+
+    <div class="g-form-group">
+      <label class="g-form-label">每人限购</label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input class="g-input" type="number" placeholder="不限" min="0" style="width:100px;">
+        <span style="font-size:13px;color:var(--g-text-secondary);">张</span>
+      </div>
+      <div class="g-hint">留空或填0表示不限制购买数量</div>
+    </div>
+
+    <div style="display:flex;gap:24px;margin-bottom:16px;">
+      <div style="display:flex;align-items:center;gap:10px;">
+        <span style="font-size:13px;color:var(--g-text);">允许转赠</span>
+        <div class="g-toggle" onclick="toggleSwitch(this)"></div>
+      </div>
+    </div>
+
+    <!-- 过期策略 -->
+    <div class="g-form-group">
+      <label class="g-form-label">过期策略</label>
+      <div style="display:flex;gap:10px;">
+        <span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">剩余次数作废</span>
+        <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">可申请退款</span>
+      </div>
+      <div class="g-hint">到期后未使用完的次数处理方式</div>
+    </div>
+
+    <!-- 描述 -->
+    <div class="g-form-group">
+      <label class="g-form-label">次卡描述</label>
+      <textarea class="g-textarea" rows="3" placeholder="请输入次卡说明，如使用规则、适用门店等"></textarea>
+    </div>
+
+    <!-- 到账通知 -->
+    <div class="g-form-group">
+      <label class="g-form-label">购买通知</label>
+      <div class="pk-notify-pills">
+        <span class="g-pill checked" onclick="togglePill(this)">站内消息</span>
+        <span class="g-pill" onclick="togglePill(this)">短信通知</span>
+      </div>
+      <div class="g-hint">顾客购买次卡后的通知方式</div>
+    </div>
+
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closePkDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">保存</button>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchPkTab(el, tab) {
+    document.querySelectorAll('.pk-seg-item').forEach(function(item) { item.classList.remove('active'); });
+    el.classList.add('active');
+    document.getElementById('pkTabList').style.display = tab === 'list' ? '' : 'none';
+    document.getElementById('pkTabRecords').style.display = tab === 'records' ? '' : 'none';
+  }
+
+  /* Toggle 开关 */
+  function toggleSwitch(el) { el.classList.toggle('on'); }
+  function togglePill(el) { el.classList.toggle('checked'); }
+
+  /* 有效期类型切换 */
+  function selectPkValidity(el, type) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+    el.classList.add('checked');
+    document.getElementById('pkValidityDays').style.display = type === 'days' ? '' : 'none';
+    document.getElementById('pkValidityRange').style.display = type === 'range' ? '' : 'none';
+  }
+
+  /* 适用范围切换 */
+  function selectPkScope(el, scope) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+    el.classList.add('checked');
+    document.getElementById('pkScopeAll').style.display = scope === 'all' ? '' : 'none';
+    document.getElementById('pkScopeCategory').style.display = scope === 'category' ? '' : 'none';
+    document.getElementById('pkScopeTag').style.display = scope === 'tag' ? '' : 'none';
+    document.getElementById('pkScopeProduct').style.display = scope === 'product' ? '' : 'none';
+  }
+
+  /* 使用模式切换 */
+  function selectPkUsageMode(el, mode) {
+    el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+    el.classList.add('checked');
+    document.getElementById('pkModeFree').style.display = mode === 'free' ? '' : 'none';
+    document.getElementById('pkModeCap').style.display = mode === 'cap' ? '' : 'none';
+  }
+
+  /* 抽屉开关 */
+  function openPkDrawer() {
+    document.getElementById('pkDrawerMask').classList.add('open');
+    document.getElementById('pkDrawer').classList.add('open');
+  }
+  function closePkDrawer() {
+    document.getElementById('pkDrawerMask').classList.remove('open');
+    document.getElementById('pkDrawer').classList.remove('open');
+  }
+
+  /* 初始化 Lucide 图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mkt-reduction.html b/TakeoutSaaS.Prototypes/pages/mkt-reduction.html
new file mode 100644
index 0000000..31cd245
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mkt-reduction.html
@@ -0,0 +1,583 @@
+<!-- 满减活动页 -->
+<style>
+  .fr-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
+  .fr-toolbar select,
+  .fr-toolbar input[type="text"] {
+    height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+    font-size:13px; outline:none; transition:var(--g-transition); background:#fff;
+  }
+  .fr-toolbar select:focus,
+  .fr-toolbar input[type="text"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  /* 统计卡片 */
+  .fr-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+  .fr-stat-card {
+    background:#fff; border-radius:10px; padding:16px 20px;
+    box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
+  }
+  .fr-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .fr-stat-card .fr-stat-label { font-size:13px; color:#9ca3af; margin-bottom:6px; }
+  .fr-stat-card .fr-stat-value { font-size:24px; font-weight:700; color:#1a1a2e; }
+  .fr-stat-card .fr-stat-value.green { color:var(--g-success); }
+  .fr-stat-card .fr-stat-value.orange { color:var(--g-warning); }
+
+  /* 活动卡片列表 */
+  .fr-list { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
+  .fr-card {
+    background:#fff; border-radius:10px; padding:20px 24px;
+    box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
+  }
+  .fr-card:hover { box-shadow:var(--g-shadow-md); }
+  .fr-card.fr-ended { opacity:0.55; }
+
+  .fr-card-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
+  .fr-card-name { font-size:15px; font-weight:600; color:var(--g-text); }
+  .fr-card-hd .g-tag { flex-shrink:0; }
+
+  /* 阶梯规则可视化 */
+  .fr-tiers { display:flex; align-items:center; gap:0; margin-bottom:14px; flex-wrap:wrap; }
+  .fr-tier-pill {
+    display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px;
+    background:color-mix(in srgb, var(--primary) 8%, #fff);
+    border:1px solid color-mix(in srgb, var(--primary) 20%, transparent);
+    font-size:13px; font-weight:500; color:var(--primary); white-space:nowrap;
+  }
+  .fr-tier-arrow {
+    display:inline-flex; align-items:center; padding:0 6px; color:#c0c6cf;
+  }
+
+  /* 活动信息行 */
+  .fr-meta { display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13px; color:var(--g-text-secondary); margin-bottom:12px; }
+  .fr-meta-item { display:flex; align-items:center; gap:5px; }
+  .fr-meta-item i { width:14px; height:14px; color:#9ca3af; }
+
+  /* 活动数据行 */
+  .fr-data { display:flex; gap:24px; font-size:13px; color:var(--g-text-secondary); margin-bottom:14px; padding:10px 14px; background:#f8f9fb; border-radius:8px; }
+  .fr-data-item span { font-weight:600; color:var(--g-text); }
+
+  /* 操作行 */
+  .fr-card-ft { display:flex; align-items:center; gap:6px; border-top:1px solid #f3f4f6; padding-top:12px; }
+
+  /* 分页 */
+  .fr-pagination {
+    display:flex; align-items:center; justify-content:flex-end;
+    padding:12px 16px; gap:6px; font-size:13px; color:#4b5563;
+    background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm);
+  }
+  .fr-page-btn {
+    min-width:34px; height:34px; border:1px solid #e5e7eb; border-radius:8px;
+    background:#fff; cursor:pointer; display:flex; align-items:center;
+    justify-content:center; font-size:13px; transition:var(--g-transition);
+  }
+  .fr-page-btn:hover { border-color:var(--primary); color:var(--primary); }
+  .fr-page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  /* 抽屉内：阶梯规则行 */
+  .fr-tier-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; color:var(--g-text); }
+  .fr-tier-row input[type="number"] {
+    width:80px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+    font-size:13px; outline:none; transition:var(--g-transition); text-align:center;
+  }
+  .fr-tier-row input[type="number"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .fr-tier-del {
+    width:30px; height:30px; border:none; background:none; cursor:pointer;
+    display:flex; align-items:center; justify-content:center; border-radius:6px;
+    color:#999; transition:var(--g-transition);
+  }
+  .fr-tier-del:hover { background:#fef2f2; color:var(--g-danger); }
+  .fr-add-tier {
+    display:inline-flex; align-items:center; gap:4px; padding:6px 14px;
+    border:1px dashed #d0d5dd; border-radius:8px; background:none;
+    font-size:13px; color:var(--g-text-secondary); cursor:pointer;
+    transition:var(--g-transition);
+  }
+  .fr-add-tier:hover { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, #fff); }
+
+  .fr-section-hd {
+    font-size:15px; font-weight:600; color:var(--g-text);
+    padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
+  }
+
+  /* 活动类型标签 */
+  .fr-type-tag { font-size:11px; font-weight:500; padding:1px 6px; border-radius:4px; }
+  .fr-type-tag.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
+  .fr-type-tag.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
+  .fr-type-tag.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
+
+  /* 满赠商品选择 */
+  .fr-gift-item {
+    display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
+    background:#f8f9fb; border-radius:6px; font-size:12px; color:var(--g-text-secondary); border:1px solid #e5e7eb;
+  }
+  .fr-gift-item button { background:none; border:none; color:var(--g-text-muted); cursor:pointer; padding:0; }
+  .fr-gift-item button:hover { color:var(--g-danger); }
+</style>
+
+<div class="page-fr">
+  <!-- 工具栏 -->
+  <div class="fr-toolbar">
+    <select style="width:200px;">
+      <option value="">全部门店</option>
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <select style="width:130px;">
+      <option value="">全部类型</option>
+      <option>满减</option>
+      <option>满赠</option>
+      <option>第二份半价</option>
+    </select>
+    <select style="width:130px;">
+      <option value="">全部状态</option>
+      <option>进行中</option>
+      <option>未开始</option>
+      <option>已结束</option>
+    </select>
+    <input type="text" placeholder="搜索活动名称" style="width:200px;" />
+    <div style="flex:1;"></div>
+    <button class="g-btn g-btn-primary" onclick="openFrDrawer('create')">
+      <i data-lucide="plus" style="width:14px;height:14px;"></i>创建活动
+    </button>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="fr-stats">
+    <div class="fr-stat-card">
+      <div class="fr-stat-label">活动总数</div>
+      <div class="fr-stat-value">8</div>
+    </div>
+    <div class="fr-stat-card">
+      <div class="fr-stat-label">进行中</div>
+      <div class="fr-stat-value green">3</div>
+    </div>
+    <div class="fr-stat-card">
+      <div class="fr-stat-label">本月带动销售额</div>
+      <div class="fr-stat-value orange">¥12,680</div>
+    </div>
+    <div class="fr-stat-card">
+      <div class="fr-stat-label">平均客单价提升</div>
+      <div class="fr-stat-value">¥8.5</div>
+    </div>
+  </div>
+
+  <!-- 活动卡片列表 -->
+  <div class="fr-list">
+
+    <!-- 活动1：进行中 -->
+    <div class="fr-card">
+      <div class="fr-card-hd">
+        <span class="fr-card-name">午市满减优惠</span>
+        <span class="fr-type-tag blue">满减</span>
+        <span class="g-tag g-tag-green">进行中</span>
+      </div>
+      <div class="fr-tiers">
+        <span class="fr-tier-pill">满30减5</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满50减10</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满80减20</span>
+      </div>
+      <div class="fr-meta">
+        <span class="fr-meta-item"><i data-lucide="calendar" style="width:14px;height:14px;"></i>2026-01-01 ~ 2026-03-31</span>
+        <span class="fr-meta-item"><i data-lucide="truck" style="width:14px;height:14px;"></i>外卖 / 自提</span>
+        <span class="fr-meta-item"><i data-lucide="store" style="width:14px;height:14px;"></i>全部门店</span>
+      </div>
+      <div class="fr-data">
+        <span class="fr-data-item">参与订单 <span>286单</span></span>
+        <span class="fr-data-item">优惠总额 <span>¥2,860</span></span>
+        <span class="fr-data-item">客单价提升 <span>¥8.2</span></span>
+      </div>
+      <div class="fr-card-ft">
+        <a class="g-action" onclick="openFrDrawer('edit')">编辑</a>
+        <a class="g-action">停用</a>
+        <a class="g-action g-action-danger">删除</a>
+      </div>
+    </div>
+
+    <!-- 活动2：进行中 -->
+    <div class="fr-card">
+      <div class="fr-card-hd">
+        <span class="fr-card-name">晚市大额满减</span>
+        <span class="fr-type-tag blue">满减</span>
+        <span class="g-tag g-tag-green">进行中</span>
+      </div>
+      <div class="fr-tiers">
+        <span class="fr-tier-pill">满50减8</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满80减15</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满120减30</span>
+      </div>
+      <div class="fr-meta">
+        <span class="fr-meta-item"><i data-lucide="calendar" style="width:14px;height:14px;"></i>2026-01-15 ~ 2026-04-15</span>
+        <span class="fr-meta-item"><i data-lucide="truck" style="width:14px;height:14px;"></i>外卖</span>
+        <span class="fr-meta-item"><i data-lucide="store" style="width:14px;height:14px;"></i>朝阳店 / 海淀店</span>
+      </div>
+      <div class="fr-data">
+        <span class="fr-data-item">参与订单 <span>152单</span></span>
+        <span class="fr-data-item">优惠总额 <span>¥1,920</span></span>
+        <span class="fr-data-item">客单价提升 <span>¥10.5</span></span>
+      </div>
+      <div class="fr-card-ft">
+        <a class="g-action" onclick="openFrDrawer('edit')">编辑</a>
+        <a class="g-action">停用</a>
+        <a class="g-action g-action-danger">删除</a>
+      </div>
+    </div>
+
+    <!-- 活动3：未开始 -->
+    <div class="fr-card">
+      <div class="fr-card-hd">
+        <span class="fr-card-name">春季新客满减</span>
+        <span class="fr-type-tag blue">满减</span>
+        <span class="g-tag g-tag-blue">未开始</span>
+      </div>
+      <div class="fr-tiers">
+        <span class="fr-tier-pill">满25减3</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满45减8</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满70减15</span>
+      </div>
+      <div class="fr-meta">
+        <span class="fr-meta-item"><i data-lucide="calendar" style="width:14px;height:14px;"></i>2026-03-01 ~ 2026-05-31</span>
+        <span class="fr-meta-item"><i data-lucide="truck" style="width:14px;height:14px;"></i>外卖 / 自提 / 堂食</span>
+        <span class="fr-meta-item"><i data-lucide="store" style="width:14px;height:14px;"></i>全部门店</span>
+      </div>
+      <div class="fr-data">
+        <span class="fr-data-item">参与订单 <span>0单</span></span>
+        <span class="fr-data-item">优惠总额 <span>¥0</span></span>
+        <span class="fr-data-item">客单价提升 <span>--</span></span>
+      </div>
+      <div class="fr-card-ft">
+        <a class="g-action" onclick="openFrDrawer('edit')">编辑</a>
+        <a class="g-action">停用</a>
+        <a class="g-action g-action-danger">删除</a>
+      </div>
+    </div>
+
+    <!-- 活动4：已结束（弱化） -->
+    <div class="fr-card fr-ended">
+      <div class="fr-card-hd">
+        <span class="fr-card-name">元旦满减狂欢</span>
+        <span class="fr-type-tag blue">满减</span>
+        <span class="g-tag g-tag-gray">已结束</span>
+      </div>
+      <div class="fr-tiers">
+        <span class="fr-tier-pill">满20减3</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满40减8</span>
+        <span class="fr-tier-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></span>
+        <span class="fr-tier-pill">满60减15</span>
+      </div>
+      <div class="fr-meta">
+        <span class="fr-meta-item"><i data-lucide="calendar" style="width:14px;height:14px;"></i>2025-12-25 ~ 2026-01-05</span>
+        <span class="fr-meta-item"><i data-lucide="truck" style="width:14px;height:14px;"></i>外卖 / 自提</span>
+        <span class="fr-meta-item"><i data-lucide="store" style="width:14px;height:14px;"></i>望京店 / 通州店</span>
+      </div>
+      <div class="fr-data">
+        <span class="fr-data-item">参与订单 <span>410单</span></span>
+        <span class="fr-data-item">优惠总额 <span>¥3,680</span></span>
+        <span class="fr-data-item">客单价提升 <span>¥6.8</span></span>
+      </div>
+      <div class="fr-card-ft">
+        <a class="g-action" onclick="openFrDrawer('edit')">编辑</a>
+        <a class="g-action g-action-danger">删除</a>
+      </div>
+    </div>
+
+    <!-- 活动5：满赠 进行中 -->
+    <div class="fr-card">
+      <div class="fr-card-hd">
+        <span class="fr-card-name">饮品买二赠一</span>
+        <span class="fr-type-tag green">满赠</span>
+        <span class="g-tag g-tag-green">进行中</span>
+      </div>
+      <div class="fr-tiers">
+        <span class="fr-tier-pill">买2杯赠1杯</span>
+      </div>
+      <div class="fr-meta">
+        <span class="fr-meta-item"><i data-lucide="calendar" style="width:14px;height:14px;"></i>2026-02-01 ~ 2026-03-31</span>
+        <span class="fr-meta-item"><i data-lucide="truck" style="width:14px;height:14px;"></i>外卖 / 自提 / 堂食</span>
+        <span class="fr-meta-item"><i data-lucide="store" style="width:14px;height:14px;"></i>全部门店</span>
+        <span class="fr-meta-item"><i data-lucide="gift" style="width:14px;height:14px;"></i>赠品：指定饮品（价低者）</span>
+      </div>
+      <div class="fr-data">
+        <span class="fr-data-item">参与订单 <span>98单</span></span>
+        <span class="fr-data-item">赠出商品 <span>98件</span></span>
+        <span class="fr-data-item">带动销售 <span>¥4,120</span></span>
+      </div>
+      <div class="fr-card-ft">
+        <a class="g-action" onclick="openFrDrawer('edit')">编辑</a>
+        <a class="g-action">停用</a>
+        <a class="g-action g-action-danger">删除</a>
+      </div>
+    </div>
+
+    <!-- 活动6：第二份半价 进行中 -->
+    <div class="fr-card">
+      <div class="fr-card-hd">
+        <span class="fr-card-name">甜品第二份半价</span>
+        <span class="fr-type-tag orange">第二份半价</span>
+        <span class="g-tag g-tag-green">进行中</span>
+      </div>
+      <div class="fr-tiers">
+        <span class="fr-tier-pill">第2份5折</span>
+      </div>
+      <div class="fr-meta">
+        <span class="fr-meta-item"><i data-lucide="calendar" style="width:14px;height:14px;"></i>2026-02-10 ~ 2026-02-28</span>
+        <span class="fr-meta-item"><i data-lucide="truck" style="width:14px;height:14px;"></i>外卖 / 堂食</span>
+        <span class="fr-meta-item"><i data-lucide="store" style="width:14px;height:14px;"></i>全部门店</span>
+        <span class="fr-meta-item"><i data-lucide="tag" style="width:14px;height:14px;"></i>适用：甜品分类</span>
+      </div>
+      <div class="fr-data">
+        <span class="fr-data-item">参与订单 <span>45单</span></span>
+        <span class="fr-data-item">优惠总额 <span>¥380</span></span>
+        <span class="fr-data-item">连带率提升 <span>32%</span></span>
+      </div>
+      <div class="fr-card-ft">
+        <a class="g-action" onclick="openFrDrawer('edit')">编辑</a>
+        <a class="g-action">停用</a>
+        <a class="g-action g-action-danger">删除</a>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- 分页 -->
+  <div class="fr-pagination">
+    <span>共 8 条</span>
+    <button class="fr-page-btn">&lt;</button>
+    <button class="fr-page-btn active">1</button>
+    <button class="fr-page-btn">2</button>
+    <button class="fr-page-btn">&gt;</button>
+    <span style="margin-left:8px;">4 条/页</span>
+  </div>
+</div>
+
+<!-- 创建/编辑抽屉 -->
+<div class="g-drawer-mask" id="frDrawerMask" onclick="closeFrDrawer()"></div>
+<div class="g-drawer" id="frDrawer" style="width:560px">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title" id="frDrawerTitle">创建满减活动</div>
+    <button class="g-drawer-close" onclick="closeFrDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 活动类型 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">活动类型</label>
+      <div style="display:flex;gap:10px;">
+        <span class="g-pill checked" onclick="selectFrType(this,'reduce')">满减</span>
+        <span class="g-pill" onclick="selectFrType(this,'gift')">满赠</span>
+        <span class="g-pill" onclick="selectFrType(this,'half')">第二份半价</span>
+      </div>
+    </div>
+
+    <!-- 活动名称 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">活动名称</label>
+      <input class="g-input" placeholder="如：午市满减优惠" />
+    </div>
+
+    <!-- ===== 满减规则 ===== -->
+    <div id="frRuleReduce">
+      <div class="fr-section-hd" style="margin-top:8px;">满减规则</div>
+      <div id="frTierList">
+        <div class="fr-tier-row">
+          <span>满</span>
+          <input type="number" value="30" placeholder="金额" />
+          <span>元减</span>
+          <input type="number" value="5" placeholder="金额" />
+          <span>元</span>
+          <button class="fr-tier-del" onclick="removeFrTier(this)" title="删除"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+        <div class="fr-tier-row">
+          <span>满</span>
+          <input type="number" value="50" placeholder="金额" />
+          <span>元减</span>
+          <input type="number" value="10" placeholder="金额" />
+          <span>元</span>
+          <button class="fr-tier-del" onclick="removeFrTier(this)" title="删除"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+        <div class="fr-tier-row">
+          <span>满</span>
+          <input type="number" value="80" placeholder="金额" />
+          <span>元减</span>
+          <input type="number" value="20" placeholder="金额" />
+          <span>元</span>
+          <button class="fr-tier-del" onclick="removeFrTier(this)" title="删除"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+      </div>
+      <button class="fr-add-tier" onclick="addFrTier()">
+        <i data-lucide="plus" style="width:14px;height:14px;"></i>添加阶梯
+      </button>
+    </div>
+
+    <!-- ===== 满赠规则 ===== -->
+    <div id="frRuleGift" style="display:none;">
+      <div class="fr-section-hd" style="margin-top:8px;">满赠规则</div>
+      <div class="g-form-group">
+        <label class="g-form-label required">赠送条件</label>
+        <div style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--g-text);">
+          <span>购买满</span>
+          <input class="g-input" type="number" value="2" min="1" style="width:70px;text-align:center;" placeholder="如：2">
+          <span>件赠</span>
+          <input class="g-input" type="number" value="1" min="1" style="width:70px;text-align:center;" placeholder="如：1">
+          <span>件</span>
+        </div>
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label required">赠品范围</label>
+        <div style="display:flex;gap:10px;margin-bottom:8px;">
+          <span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">同商品（价低者）</span>
+          <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">指定赠品</span>
+        </div>
+        <div class="g-hint">选"同商品"时，赠品为购买商品中价格最低的一件</div>
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label">适用商品</label>
+        <button class="g-btn g-btn-sm" onclick="openProductPicker({title:'选择适用商品',subtitle:'满赠活动',onConfirm:function(){}})"><i data-lucide="plus" style="width:13px;height:13px;"></i>选择商品/分类</button>
+        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;">
+          <span class="fr-gift-item">热饮分类 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+          <span class="fr-gift-item">冷饮分类 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
+        </div>
+        <div class="g-hint">留空表示全部商品参与</div>
+      </div>
+    </div>
+
+    <!-- ===== 第二份半价规则 ===== -->
+    <div id="frRuleHalf" style="display:none;">
+      <div class="fr-section-hd" style="margin-top:8px;">第二份优惠</div>
+      <div class="g-form-group">
+        <label class="g-form-label required">第二份折扣</label>
+        <div style="display:flex;gap:10px;">
+          <span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">5折</span>
+          <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">6折</span>
+          <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">7折</span>
+          <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">免费</span>
+        </div>
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label required">适用商品</label>
+        <div style="display:flex;gap:10px;margin-bottom:8px;">
+          <span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">指定分类</span>
+          <span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">指定商品</span>
+        </div>
+        <select class="g-select" style="width:100%;">
+          <option value="">请选择分类</option>
+          <option>甜品</option>
+          <option>饮品</option>
+          <option>小食</option>
+        </select>
+        <div class="g-hint">第二份优惠仅适用于所选范围内的商品</div>
+      </div>
+    </div>
+
+    <!-- 活动时间 -->
+    <div class="g-form-group" style="margin-top:20px;">
+      <label class="g-form-label required">活动时间</label>
+      <div style="display:flex; align-items:center; gap:8px;">
+        <input class="g-input" type="date" style="flex:1;" />
+        <span style="color:var(--g-text-muted);">至</span>
+        <input class="g-input" type="date" style="flex:1;" />
+      </div>
+    </div>
+
+    <!-- 适用渠道 -->
+    <div class="g-form-group">
+      <label class="g-form-label">适用渠道</label>
+      <div style="display:flex; gap:8px; flex-wrap:wrap;">
+        <span class="g-pill checked" onclick="this.classList.toggle('checked')">外卖</span>
+        <span class="g-pill checked" onclick="this.classList.toggle('checked')">自提</span>
+        <span class="g-pill" onclick="this.classList.toggle('checked')">堂食</span>
+      </div>
+    </div>
+
+    <!-- 适用门店 -->
+    <div class="g-form-group">
+      <label class="g-form-label">适用门店</label>
+      <select class="g-select">
+        <option>全部门店</option>
+        <option>老三家外卖（朝阳店）</option>
+        <option>老三家外卖（海淀店）</option>
+        <option>老三家外卖（望京店）</option>
+        <option>老三家外卖（通州店）</option>
+        <option>老三家外卖（丰台店）</option>
+      </select>
+    </div>
+
+    <!-- 叠加规则 -->
+    <div class="g-form-group">
+      <label class="g-form-label">叠加规则</label>
+      <div style="display:flex; gap:8px; flex-wrap:wrap;">
+        <span class="g-pill checked" onclick="frToggleStack(this, 'no')">不可叠加优惠券</span>
+        <span class="g-pill" onclick="frToggleStack(this, 'yes')">可叠加优惠券</span>
+      </div>
+    </div>
+
+    <!-- 活动说明 -->
+    <div class="g-form-group">
+      <label class="g-form-label">活动说明</label>
+      <textarea class="g-textarea" rows="3" placeholder="如：每单限享一次满减优惠"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeFrDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeFrDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+/* 抽屉开关 */
+function openFrDrawer(mode) {
+  document.getElementById('frDrawerMask').classList.add('open');
+  document.getElementById('frDrawer').classList.add('open');
+  document.getElementById('frDrawerTitle').textContent = mode === 'edit' ? '编辑活动' : '创建活动';
+}
+function closeFrDrawer() {
+  document.getElementById('frDrawerMask').classList.remove('open');
+  document.getElementById('frDrawer').classList.remove('open');
+}
+
+/* 活动类型切换 */
+function selectFrType(el, type) {
+  el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+  document.getElementById('frRuleReduce').style.display = type === 'reduce' ? '' : 'none';
+  document.getElementById('frRuleGift').style.display = type === 'gift' ? '' : 'none';
+  document.getElementById('frRuleHalf').style.display = type === 'half' ? '' : 'none';
+}
+
+/* 添加阶梯行 */
+function addFrTier() {
+  var list = document.getElementById('frTierList');
+  var row = document.createElement('div');
+  row.className = 'fr-tier-row';
+  row.innerHTML = '<span>满</span>' +
+    '<input type="number" placeholder="金额" />' +
+    '<span>元减</span>' +
+    '<input type="number" placeholder="金额" />' +
+    '<span>元</span>' +
+    '<button class="fr-tier-del" onclick="removeFrTier(this)" title="删除"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>';
+  list.appendChild(row);
+  if (window.lucide) lucide.createIcons();
+}
+
+/* 删除阶梯行 */
+function removeFrTier(btn) {
+  var row = btn.closest('.fr-tier-row');
+  if (document.querySelectorAll('.fr-tier-row').length > 1) {
+    row.remove();
+  }
+}
+
+/* 叠加规则互斥切换 */
+function frToggleStack(el, type) {
+  var pills = el.parentElement.querySelectorAll('.g-pill');
+  pills.forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/mkt-seckill.html b/TakeoutSaaS.Prototypes/pages/mkt-seckill.html
new file mode 100644
index 0000000..92d69b4
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/mkt-seckill.html
@@ -0,0 +1,567 @@
+<!-- 秒杀活动页 -->
+<style>
+  .sk-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .sk-search { position:relative; }
+  .sk-search input { height:34px; padding:0 10px 0 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; width:200px; transition:var(--g-transition); }
+  .sk-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .sk-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#bbb; pointer-events:none; }
+
+  .sk-stats { display:flex; gap:24px; margin-bottom:16px; padding:10px 16px; background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); font-size:13px; color:#4b5563; }
+  .sk-stats span { display:flex; align-items:center; gap:6px; }
+  .sk-stats strong { color:#1a1a2e; font-weight:600; }
+
+  .sk-card { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:20px; margin-bottom:16px; transition:box-shadow var(--g-transition); }
+  .sk-card:hover { box-shadow:var(--g-shadow-md); }
+  .sk-card.ended { opacity:.5; }
+
+  .sk-card-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
+  .sk-card-name { font-size:15px; font-weight:600; color:#1a1a2e; }
+  .sk-card-time { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
+
+  .sk-tag-running { background:#dcfce7; color:#22c55e; border:1px solid #bbf7d0; border-radius:6px; font-weight:600; }
+  .sk-tag-notstarted { background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; border-radius:6px; font-weight:600; }
+  .sk-tag-ended { background:#f8f9fb; color:#9ca3af; border:1px solid #e5e7eb; border-radius:6px; font-weight:600; }
+
+  /* 秒杀商品行 */
+  .sk-prod-list { margin-bottom:14px; }
+  .sk-prod-row { display:flex; align-items:center; gap:16px; padding:10px 12px; border-bottom:1px solid #f3f4f6; font-size:13px; }
+  .sk-prod-row:last-child { border-bottom:none; }
+  .sk-prod-row:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); border-radius:6px; }
+  .sk-prod-name { width:140px; font-weight:500; color:#1a1a2e; flex-shrink:0; }
+  .sk-prod-prices { display:flex; align-items:baseline; gap:8px; width:140px; flex-shrink:0; }
+  .sk-orig-price { color:var(--g-text-muted); text-decoration:line-through; font-size:12px; }
+  .sk-seckill-price { color:#ef4444; font-weight:700; font-size:16px; }
+
+  /* 进度条 */
+  .sk-progress-wrap { flex:1; min-width:160px; display:flex; align-items:center; gap:8px; }
+  .sk-progress { position:relative; height:16px; background:#f3f4f6; border-radius:8px; overflow:hidden; flex:1; }
+  .sk-progress-fill { height:100%; border-radius:8px; transition:width 0.3s ease; }
+  .sk-progress-fill.green { background:linear-gradient(90deg, #52c41a, #73d13d); }
+  .sk-progress-fill.orange { background:linear-gradient(90deg, #fa8c16, #ffa940); }
+  .sk-progress-fill.red { background:linear-gradient(90deg, #f5222d, #ff4d4f); }
+  .sk-progress-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.2); white-space:nowrap; }
+  .sk-sold-out { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; background:#fff1f0; color:#f5222d; border:1px solid #ffa39e; white-space:nowrap; }
+
+  .sk-card-summary { display:flex; gap:24px; font-size:12px; color:#4b5563; margin-bottom:12px; padding:10px 12px; background:#f8f9fb; border-radius:8px; }
+  .sk-card-summary strong { color:#1a1a2e; font-weight:600; }
+  .sk-card-ft { display:flex; gap:16px; border-top:1px solid #f3f4f6; padding-top:12px; }
+
+  /* 抽屉内秒杀商品 */
+  .sk-drawer-prod { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; margin-bottom:12px; }
+  .sk-drawer-prod-hd { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f8f9fb; border-bottom:1px solid #e5e7eb; }
+  .sk-drawer-prod-hd span { font-size:13px; font-weight:500; color:#1a1a2e; }
+  .sk-drawer-prod-remove { background:none; border:none; color:#9ca3af; cursor:pointer; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; transition:var(--g-transition); }
+  .sk-drawer-prod-remove:hover { color:#ef4444; background:#fef2f2; }
+  .sk-drawer-prod-bd { padding:10px 12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
+  .sk-drawer-prod-bd .sk-field { display:flex; flex-direction:column; gap:4px; }
+  .sk-drawer-prod-bd .sk-field label { font-size:11px; color:#6b7280; }
+  .sk-drawer-prod-bd .sk-field input { width:100px; height:30px; padding:0 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .sk-drawer-prod-bd .sk-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .sk-drawer-prod-bd .sk-field input[readonly] { background:#f8f9fb; color:var(--g-text-muted); cursor:default; }
+
+  .sk-pill-group { display:flex; gap:8px; flex-wrap:wrap; }
+  .sk-pill { padding:6px 16px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); }
+  .sk-pill:hover { border-color:var(--primary); color:var(--primary); }
+  .sk-pill.checked { background:var(--primary); color:#fff; border-color:var(--primary); }
+
+  /* 场次设置 */
+  .sk-session-section { display:none; margin-top:12px; }
+  .sk-session-section.show { display:block; }
+  .sk-date-section { display:block; margin-top:12px; }
+  .sk-date-section.hide { display:none; }
+  .sk-session-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:8px 12px; background:#f8f9fb; border-radius:6px; border:1px solid #f0f0f0; }
+  .sk-session-row input { width:90px; }
+  .sk-session-label { font-size:12px; color:var(--g-text-secondary); }
+  .sk-session-remove { background:none; border:none; color:#9ca3af; cursor:pointer; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; transition:var(--g-transition); }
+  .sk-session-remove:hover { color:#ef4444; background:#fef2f2; }
+
+  .sk-limit-row { display:flex; align-items:center; gap:8px; }
+  .sk-limit-row input { width:80px; }
+  .sk-unit { font-size:13px; color:var(--g-text-secondary); }
+
+  .sk-preheat-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
+  .sk-preheat-row input { width:60px; }
+</style>
+
+<!-- 工具栏 -->
+<div class="sk-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <select class="g-select" style="width:120px;">
+    <option value="">全部状态</option>
+    <option>进行中</option>
+    <option>未开始</option>
+    <option>已结束</option>
+  </select>
+  <div class="sk-search">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input type="text" placeholder="搜索秒杀活动名称…" />
+  </div>
+  <div style="flex:1;"></div>
+  <button class="g-btn g-btn-primary" onclick="openSkDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>创建秒杀</button>
+</div>
+
+<!-- 统计栏 -->
+<div class="sk-stats">
+  <span>秒杀活动 <strong>6</strong></span>
+  <span>进行中 <strong>2</strong></span>
+  <span>本月秒杀销量 <strong>860</strong>单</span>
+  <span>秒杀转化率 <strong>78.5%</strong></span>
+</div>
+
+<!-- 活动卡片列表 -->
+<div id="skActivityList">
+
+  <!-- 午间秒杀 - 进行中 -->
+  <div class="sk-card">
+    <div class="sk-card-hd">
+      <span class="sk-card-name">午间秒杀</span>
+      <span class="g-tag sk-tag-running">进行中</span>
+      <span class="sk-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 11:00 - 13:00</span>
+    </div>
+    <div class="sk-prod-list">
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">招牌卤肉饭</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥22</span>
+          <span class="sk-seckill-price">¥9.9</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill orange" style="width:84%;"></div>
+            <span class="sk-progress-text">已抢 42/50</span>
+          </div>
+        </div>
+      </div>
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">冰粉</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥8</span>
+          <span class="sk-seckill-price">¥1</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill red" style="width:100%;"></div>
+            <span class="sk-progress-text">已抢 50/50</span>
+          </div>
+          <span class="sk-sold-out"><i data-lucide="flame" style="width:11px;height:11px;"></i>已抢光</span>
+        </div>
+      </div>
+    </div>
+    <div class="sk-card-summary">
+      <span>参与人数 <strong>286</strong>人</span>
+      <span>成交 <strong>218</strong>单</span>
+      <span>转化率 <strong>76.2%</strong></span>
+    </div>
+    <div class="sk-card-ft">
+      <span class="g-action" onclick="openSkDrawer('edit','午间秒杀')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 整点特惠 - 进行中 -->
+  <div class="sk-card">
+    <div class="sk-card-hd">
+      <span class="sk-card-name">整点特惠</span>
+      <span class="g-tag sk-tag-running">进行中</span>
+      <span class="sk-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 10:00 场 / 14:00 场 / 18:00 场</span>
+    </div>
+    <div class="sk-prod-list">
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">黄焖鸡米饭</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥28</span>
+          <span class="sk-seckill-price">¥14.9</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill orange" style="width:70%;"></div>
+            <span class="sk-progress-text">已抢 28/40</span>
+          </div>
+        </div>
+      </div>
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">奶茶(大杯)</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥15</span>
+          <span class="sk-seckill-price">¥5</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill orange" style="width:70%;"></div>
+            <span class="sk-progress-text">已抢 35/50</span>
+          </div>
+        </div>
+      </div>
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">炸鸡翅(6只)</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥25</span>
+          <span class="sk-seckill-price">¥12.9</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill green" style="width:60%;"></div>
+            <span class="sk-progress-text">已抢 18/30</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sk-card-summary">
+      <span>参与人数 <strong>198</strong>人</span>
+      <span>成交 <strong>156</strong>单</span>
+      <span>转化率 <strong>78.8%</strong></span>
+    </div>
+    <div class="sk-card-ft">
+      <span class="g-action" onclick="openSkDrawer('edit','整点特惠')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 新品首发秒杀 - 未开始 -->
+  <div class="sk-card">
+    <div class="sk-card-hd">
+      <span class="sk-card-name">新品首发秒杀</span>
+      <span class="g-tag sk-tag-notstarted">未开始</span>
+      <span class="sk-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-02-20 10:00 开始</span>
+    </div>
+    <div class="sk-prod-list">
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">黑松露鸡肉卷</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥38</span>
+          <span class="sk-seckill-price">¥19.9</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill green" style="width:0%;"></div>
+            <span class="sk-progress-text" style="color:#999;">0/100</span>
+          </div>
+        </div>
+      </div>
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">芝士焗虾饭</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥35</span>
+          <span class="sk-seckill-price">¥17.5</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill green" style="width:0%;"></div>
+            <span class="sk-progress-text" style="color:#999;">0/80</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sk-card-ft">
+      <span class="g-action" onclick="openSkDrawer('edit','新品首发秒杀')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 周年庆秒杀 - 已结束 -->
+  <div class="sk-card ended">
+    <div class="sk-card-hd">
+      <span class="sk-card-name">周年庆秒杀</span>
+      <span class="g-tag sk-tag-ended">已结束</span>
+      <span class="sk-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-01-15 ~ 2026-01-17</span>
+    </div>
+    <div class="sk-prod-list">
+      <div class="sk-prod-row">
+        <span class="sk-prod-name">全场5折套餐</span>
+        <span class="sk-prod-prices">
+          <span class="sk-orig-price">¥49</span>
+          <span class="sk-seckill-price">¥24.5</span>
+        </span>
+        <div class="sk-progress-wrap">
+          <div class="sk-progress">
+            <div class="sk-progress-fill red" style="width:100%;"></div>
+            <span class="sk-progress-text">已抢 200/200</span>
+          </div>
+          <span class="sk-sold-out"><i data-lucide="flame" style="width:11px;height:11px;"></i>已抢光</span>
+        </div>
+      </div>
+    </div>
+    <div class="sk-card-summary">
+      <span>参与人数 <strong>520</strong>人</span>
+      <span>成交 <strong>412</strong>单</span>
+    </div>
+    <div class="sk-card-ft">
+      <span class="g-action" onclick="openSkDrawer('edit','周年庆秒杀')">编辑</span>
+      <span class="g-action">启用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination" style="margin-top:8px;">
+  <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+  <span style="font-size:12px;color:var(--g-text-muted);margin-left:8px;">共 6 条</span>
+</div>
+
+<!-- 创建/编辑抽屉 -->
+<div class="g-drawer-mask" id="skDrawerMask" onclick="closeSkDrawer()"></div>
+<div class="g-drawer" id="skDrawer" style="width:560px">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="skDrawerTitle">创建秒杀活动</span>
+    <button class="g-drawer-close" onclick="closeSkDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 活动名称 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">活动名称</label>
+      <input class="g-input" id="skName" placeholder="如：午间秒杀、整点特惠">
+    </div>
+
+    <!-- 活动类型 -->
+    <div class="g-form-group">
+      <label class="g-form-label required">活动类型</label>
+      <div class="sk-pill-group">
+        <span class="sk-pill checked" onclick="selectSkType(this,'timed')">限时秒杀</span>
+        <span class="sk-pill" onclick="selectSkType(this,'hourly')">整点秒杀</span>
+      </div>
+    </div>
+
+    <!-- 限时秒杀：日期+时间范围 -->
+    <div class="g-form-group sk-date-section" id="skDateSection">
+      <label class="g-form-label required">活动时间</label>
+      <div style="display:flex;gap:8px;align-items:center;">
+        <input class="g-input" type="date" value="2026-02-15" style="flex:1;" placeholder="开始日期">
+        <span style="color:var(--g-text-muted);">~</span>
+        <input class="g-input" type="date" value="2026-03-15" style="flex:1;" placeholder="结束日期">
+      </div>
+      <div style="display:flex;gap:8px;align-items:center;margin-top:8px;">
+        <input class="g-input" type="time" value="11:00" style="flex:1;" placeholder="开始时间">
+        <span style="color:var(--g-text-muted);">~</span>
+        <input class="g-input" type="time" value="13:00" style="flex:1;" placeholder="结束时间">
+      </div>
+    </div>
+
+    <!-- 整点秒杀：场次设置 -->
+    <div class="g-form-group sk-session-section" id="skSessionSection">
+      <label class="g-form-label required">场次设置</label>
+      <div id="skSessionList">
+        <div class="sk-session-row">
+          <input class="g-input" type="time" value="10:00" placeholder="场次时间">
+          <span class="sk-session-label">持续</span>
+          <input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">
+          <span class="sk-session-label">分钟</span>
+          <button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+        </div>
+        <div class="sk-session-row">
+          <input class="g-input" type="time" value="14:00" placeholder="场次时间">
+          <span class="sk-session-label">持续</span>
+          <input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">
+          <span class="sk-session-label">分钟</span>
+          <button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+        </div>
+        <div class="sk-session-row">
+          <input class="g-input" type="time" value="18:00" placeholder="场次时间">
+          <span class="sk-session-label">持续</span>
+          <input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">
+          <span class="sk-session-label">分钟</span>
+          <button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+        </div>
+      </div>
+      <button class="g-btn g-btn-sm" style="margin-top:4px;" onclick="addSkSession()"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加场次</button>
+    </div>
+
+    <!-- 秒杀商品 -->
+    <div class="g-form-group">
+      <label class="g-form-label required" style="margin-bottom:10px;">秒杀商品</label>
+      <div id="skProductList">
+        <!-- 预填商品 1 -->
+        <div class="sk-drawer-prod">
+          <div class="sk-drawer-prod-hd">
+            <span>招牌卤肉饭</span>
+            <button class="sk-drawer-prod-remove" onclick="removeSkProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+          </div>
+          <div class="sk-drawer-prod-bd">
+            <div class="sk-field">
+              <label>原价</label>
+              <input type="text" value="¥22.00" readonly>
+            </div>
+            <div class="sk-field">
+              <label>秒杀价</label>
+              <input type="number" value="9.90" step="0.01" placeholder="请输入秒杀价">
+            </div>
+            <div class="sk-field">
+              <label>限量(份)</label>
+              <input type="number" value="50" min="1" placeholder="如：50">
+            </div>
+            <div class="sk-field">
+              <label>每人限购</label>
+              <input type="number" value="1" min="0" placeholder="不限则留空">
+            </div>
+          </div>
+        </div>
+        <!-- 预填商品 2 -->
+        <div class="sk-drawer-prod">
+          <div class="sk-drawer-prod-hd">
+            <span>冰粉</span>
+            <button class="sk-drawer-prod-remove" onclick="removeSkProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
+          </div>
+          <div class="sk-drawer-prod-bd">
+            <div class="sk-field">
+              <label>原价</label>
+              <input type="text" value="¥8.00" readonly>
+            </div>
+            <div class="sk-field">
+              <label>秒杀价</label>
+              <input type="number" value="1.00" step="0.01" placeholder="请输入秒杀价">
+            </div>
+            <div class="sk-field">
+              <label>限量(份)</label>
+              <input type="number" value="50" min="1" placeholder="如：50">
+            </div>
+            <div class="sk-field">
+              <label>每人限购</label>
+              <input type="number" value="1" min="0" placeholder="不限则留空">
+            </div>
+          </div>
+        </div>
+      </div>
+      <button class="g-btn g-btn-sm" style="margin-top:4px;" onclick="addSkProducts()"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加商品</button>
+    </div>
+
+    <!-- 适用渠道 -->
+    <div class="g-form-group">
+      <label class="g-form-label">适用渠道</label>
+      <div class="sk-pill-group">
+        <span class="sk-pill checked" onclick="toggleSkPill(this)">外卖</span>
+        <span class="sk-pill checked" onclick="toggleSkPill(this)">自提</span>
+        <span class="sk-pill checked" onclick="toggleSkPill(this)">堂食</span>
+      </div>
+    </div>
+
+    <!-- 每人限购 -->
+    <div class="g-form-group">
+      <label class="g-form-label">每人限购</label>
+      <div class="sk-limit-row">
+        <input class="g-input" type="number" value="2" min="0" placeholder="不限则留空" style="width:100px;">
+        <span class="sk-unit">件</span>
+      </div>
+      <div class="g-hint">活动期间每人累计可秒杀的商品总数，留空不限</div>
+    </div>
+
+    <!-- 预热设置 -->
+    <div class="g-form-group">
+      <label class="g-form-label">预热设置</label>
+      <div class="g-toggle-wrap">
+        <div class="g-toggle on" id="skPreheatToggle" onclick="this.classList.toggle('on')"></div>
+        <span class="g-toggle-label">开启预热</span>
+      </div>
+      <div class="sk-preheat-row">
+        <span class="sk-session-label">提前</span>
+        <input class="g-input" type="number" value="2" min="1" placeholder="小时" style="width:60px;">
+        <span class="sk-session-label">小时</span>
+      </div>
+      <div class="g-hint">在商品页展示秒杀预告，吸引用户提前关注</div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeSkDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeSkDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+/* 抽屉开关 */
+function openSkDrawer(mode, name) {
+  document.getElementById('skDrawerMask').classList.add('open');
+  document.getElementById('skDrawer').classList.add('open');
+  if (mode === 'edit') {
+    document.getElementById('skDrawerTitle').textContent = '编辑秒杀活动';
+    document.getElementById('skName').value = name || '';
+  } else {
+    document.getElementById('skDrawerTitle').textContent = '创建秒杀活动';
+    document.getElementById('skName').value = '';
+  }
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function closeSkDrawer() {
+  document.getElementById('skDrawerMask').classList.remove('open');
+  document.getElementById('skDrawer').classList.remove('open');
+}
+
+/* 活动类型切换 */
+function selectSkType(el, type) {
+  el.parentElement.querySelectorAll('.sk-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+  var dateSection = document.getElementById('skDateSection');
+  var sessionSection = document.getElementById('skSessionSection');
+  if (type === 'hourly') {
+    dateSection.classList.add('hide');
+    sessionSection.classList.add('show');
+  } else {
+    dateSection.classList.remove('hide');
+    sessionSection.classList.remove('show');
+  }
+}
+
+/* 场次管理 */
+function addSkSession() {
+  var list = document.getElementById('skSessionList');
+  var row = document.createElement('div');
+  row.className = 'sk-session-row';
+  row.innerHTML =
+    '<input class="g-input" type="time" placeholder="场次时间">' +
+    '<span class="sk-session-label">持续</span>' +
+    '<input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">' +
+    '<span class="sk-session-label">分钟</span>' +
+    '<button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>';
+  list.appendChild(row);
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function removeSkSession(btn) {
+  btn.closest('.sk-session-row').remove();
+}
+
+/* 商品管理 */
+function addSkProducts() {
+  var names = ['黄焖鸡米饭', '奶茶(大杯)', '炸鸡翅(6只)'];
+  var prices = ['28.00', '15.00', '25.00'];
+  var idx = Math.floor(Math.random() * names.length);
+  var list = document.getElementById('skProductList');
+  var div = document.createElement('div');
+  div.className = 'sk-drawer-prod';
+  div.innerHTML =
+    '<div class="sk-drawer-prod-hd"><span>' + names[idx] + '</span>' +
+    '<button class="sk-drawer-prod-remove" onclick="removeSkProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button></div>' +
+    '<div class="sk-drawer-prod-bd">' +
+    '<div class="sk-field"><label>原价</label><input type="text" value="¥' + prices[idx] + '" readonly></div>' +
+    '<div class="sk-field"><label>秒杀价</label><input type="number" step="0.01" placeholder="请输入秒杀价"></div>' +
+    '<div class="sk-field"><label>限量(份)</label><input type="number" min="1" placeholder="如：50"></div>' +
+    '<div class="sk-field"><label>每人限购</label><input type="number" min="0" placeholder="不限则留空"></div>' +
+    '</div>';
+  list.appendChild(div);
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function removeSkProduct(btn) {
+  btn.closest('.sk-drawer-prod').remove();
+}
+
+/* Pill 切换 */
+function toggleSkPill(el) {
+  el.classList.toggle('checked');
+}
+
+/* 初始化图标 */
+if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/order-board.html b/TakeoutSaaS.Prototypes/pages/order-board.html
new file mode 100644
index 0000000..390d3f5
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/order-board.html
@@ -0,0 +1,662 @@
+<!-- 订单大厅 - 实时看板 -->
+<style>
+/* ===== Page Layout ===== */
+.ob-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--g-text);
+  height: calc(100vh - var(--header-height) - var(--tabbar-height) - 32px);
+}
+
+/* ===== Toolbar ===== */
+.ob-toolbar {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--g-shadow-sm);
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+.ob-toolbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ob-icon-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--g-radius-sm);
+  border: 1px solid var(--g-border-hover);
+  background: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-text-secondary);
+  transition: all var(--g-transition);
+}
+.ob-icon-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.ob-icon-btn.active {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
+}
+
+/* ===== Channel Filter Pills ===== */
+.ob-channels {
+  display: flex;
+  gap: 6px;
+}
+.ob-channel {
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 15px;
+  border: 1px solid var(--g-border-hover);
+  background: #fff;
+  font-size: 12px;
+  color: var(--g-text-secondary);
+  cursor: pointer;
+  transition: all var(--g-transition);
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.ob-channel:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.ob-channel.active {
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  border-color: var(--primary);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+/* ===== Stats Row ===== */
+.ob-stats {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--g-shadow-sm);
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex-shrink: 0;
+}
+.ob-stat-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 20px;
+  border-right: 1px solid var(--g-border);
+}
+.ob-stat-item:first-child { padding-left: 0; }
+.ob-stat-item:last-child { border-right: none; }
+.ob-stat-label {
+  font-size: 12px;
+  color: var(--g-text-muted);
+}
+.ob-stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--g-text);
+}
+.ob-stat-item.highlight .ob-stat-value {
+  color: var(--primary);
+}
+
+/* ===== Kanban Board ===== */
+.ob-board {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+  overflow-x: auto;
+  min-height: 0;
+  padding-bottom: 4px;
+}
+.ob-board::-webkit-scrollbar { height: 6px; }
+.ob-board::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
+
+/* ===== Column ===== */
+.ob-column {
+  min-width: 280px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #f8f9fb;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.ob-col-hd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--g-text);
+  flex-shrink: 0;
+  border-left: 3px solid transparent;
+}
+.ob-col-hd.pending   { border-left-color: #fa8c16; }
+.ob-col-hd.making    { border-left-color: var(--primary); }
+.ob-col-hd.delivering { border-left-color: #52c41a; }
+.ob-col-hd.done      { border-left-color: #d9d9d9; }
+
+.ob-col-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+}
+.ob-col-hd.pending .ob-col-count   { background: #fa8c16; }
+.ob-col-hd.making .ob-col-count    { background: var(--primary); }
+.ob-col-hd.delivering .ob-col-count { background: #52c41a; }
+.ob-col-hd.done .ob-col-count      { background: #d9d9d9; color: #666; }
+
+.ob-col-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 10px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ob-col-body::-webkit-scrollbar { width: 4px; }
+.ob-col-body::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 2px; }
+
+/* ===== Order Card ===== */
+.ob-order {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--g-shadow-sm);
+  padding: 14px;
+  border-left: 3px solid transparent;
+  transition: box-shadow var(--g-transition);
+  cursor: default;
+}
+.ob-order:hover {
+  box-shadow: var(--g-shadow-md);
+}
+.ob-order.border-orange   { border-left-color: #fa8c16; }
+.ob-order.border-blue     { border-left-color: var(--primary); }
+.ob-order.border-green    { border-left-color: #52c41a; }
+.ob-order.border-gray     { border-left-color: #d9d9d9; }
+.ob-order.dimmed          { opacity: 0.6; }
+
+/* Pulse animation for new orders */
+@keyframes ob-pulse-border {
+  0%, 100% { border-left-color: #fa8c16; }
+  50%      { border-left-color: #ffd591; }
+}
+.ob-order.pulse {
+  animation: ob-pulse-border 2s ease-in-out infinite;
+}
+
+/* ===== Order Header ===== */
+.ob-order-hd {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.ob-order-no {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--g-text);
+}
+.ob-order-time {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--g-text-muted);
+}
+
+/* ===== Order Info ===== */
+.ob-order-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+  font-size: 12px;
+  color: var(--g-text-secondary);
+}
+.ob-order-info-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ob-order-info-row i {
+  width: 14px;
+  height: 14px;
+  color: var(--g-text-muted);
+  flex-shrink: 0;
+}
+.ob-order-items {
+  color: var(--g-text);
+  line-height: 1.5;
+}
+.ob-order-total {
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+.ob-order-total-label {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--g-text-muted);
+}
+.ob-tag-reserve {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  background: #fff7e6;
+  color: #d46b08;
+  border: 1px solid #ffe58f;
+}
+.ob-tag-urge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  background: #fff1f0;
+  color: var(--g-danger);
+  border: 1px solid #ffa39e;
+  animation: ob-urge-blink 1.2s ease-in-out infinite;
+}
+@keyframes ob-urge-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.ob-order-status-line {
+  font-size: 12px;
+  color: var(--primary);
+  font-weight: 500;
+}
+.ob-order-status-line.green {
+  color: #52c41a;
+}
+.ob-order-complete-time {
+  font-size: 12px;
+  color: var(--g-text-muted);
+}
+.ob-order-rider, .ob-order-pickup, .ob-order-table {
+  font-size: 12px;
+  color: var(--g-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ===== Order Footer ===== */
+.ob-order-ft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid #f5f5f5;
+}
+.ob-order-ft .g-btn { flex: 1; }
+</style>
+
+<div class="ob-page">
+  <!-- Toolbar -->
+  <div class="ob-toolbar">
+    <select class="g-select" style="width:200px;">
+      <option>万达广场店</option>
+      <option>银泰城店</option>
+      <option>大学城店</option>
+      <option>火车站店</option>
+      <option>科技园店</option>
+    </select>
+
+    <div class="ob-channels">
+      <span class="ob-channel active" onclick="filterObChannel(this)">全部</span>
+      <span class="ob-channel" onclick="filterObChannel(this)">外卖</span>
+      <span class="ob-channel" onclick="filterObChannel(this)">自提</span>
+      <span class="ob-channel" onclick="filterObChannel(this)">堂食</span>
+    </div>
+
+    <div class="ob-toolbar-right">
+      <button class="ob-icon-btn active" title="提示音" onclick="this.classList.toggle('active')">
+        <i data-lucide="volume-2" style="width:16px;height:16px;"></i>
+      </button>
+      <button class="ob-icon-btn" title="刷新" onclick="refreshBoard()">
+        <i data-lucide="refresh-cw" style="width:16px;height:16px;"></i>
+      </button>
+    </div>
+  </div>
+
+  <!-- Stats -->
+  <div class="ob-stats">
+    <div class="ob-stat-item highlight">
+      <span class="ob-stat-label">今日订单</span>
+      <span class="ob-stat-value">128</span>
+    </div>
+    <div class="ob-stat-item">
+      <span class="ob-stat-label">待接单</span>
+      <span class="ob-stat-value" style="color:#fa8c16;">5</span>
+    </div>
+    <div class="ob-stat-item">
+      <span class="ob-stat-label">制作中</span>
+      <span class="ob-stat-value" style="color:var(--primary);">8</span>
+    </div>
+    <div class="ob-stat-item">
+      <span class="ob-stat-label">配送中</span>
+      <span class="ob-stat-value" style="color:#52c41a;">12</span>
+    </div>
+    <div class="ob-stat-item">
+      <span class="ob-stat-label">已完成</span>
+      <span class="ob-stat-value">103</span>
+    </div>
+  </div>
+
+  <!-- Kanban Board -->
+  <div class="ob-board">
+
+    <!-- Column: 待接单 -->
+    <div class="ob-column">
+      <div class="ob-col-hd pending">
+        <span>待接单</span>
+        <span class="ob-col-count">3</span>
+      </div>
+      <div class="ob-col-body">
+
+        <!-- Order 1 -->
+        <div class="ob-order border-orange pulse">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212001</span>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="ob-order-time">3分钟前</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>张** 138****6789</span>
+            </div>
+            <div class="ob-order-items">宫保鸡丁x1, 米饭x1 等3件</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;68.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">接单</button>
+            <button class="g-btn g-btn-sm">拒单</button>
+          </div>
+        </div>
+
+        <!-- Order 2 -->
+        <div class="ob-order border-orange pulse">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212002</span>
+            <span class="g-tag g-tag-green">自提</span>
+            <span class="ob-tag-reserve"><i data-lucide="clock" style="width:11px;height:11px;"></i>预约 18:00</span>
+            <span class="ob-order-time">5分钟前</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>李** 159****3210</span>
+            </div>
+            <div class="ob-order-items">麻辣香锅(大份)x1, 可乐x2</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;95.50</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">接单</button>
+            <button class="g-btn g-btn-sm">拒单</button>
+          </div>
+        </div>
+
+        <!-- Order 3 -->
+        <div class="ob-order border-orange pulse">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212003</span>
+            <span class="g-tag g-tag-orange">堂食</span>
+            <span class="ob-order-time">1分钟前</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>王** (桌号 B5)</span>
+            </div>
+            <div class="ob-order-items">鱼香肉丝x1, 蛋炒饭x2, 紫菜蛋花汤x1</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;52.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">接单</button>
+            <button class="g-btn g-btn-sm">拒单</button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Column: 制作中 -->
+    <div class="ob-column">
+      <div class="ob-col-hd making">
+        <span>制作中</span>
+        <span class="ob-col-count">3</span>
+      </div>
+      <div class="ob-col-body">
+
+        <!-- Order 4 -->
+        <div class="ob-order border-blue">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212004</span>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="ob-order-time">12:08 接单</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-status-line">已接单 5分钟</div>
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>赵** 136****8877</span>
+            </div>
+            <div class="ob-order-items">红烧牛肉面x2, 凉拌黄瓜x1</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;76.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">出餐完成</button>
+          </div>
+        </div>
+
+        <!-- Order 5 -->
+        <div class="ob-order border-blue">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212005</span>
+            <span class="g-tag g-tag-green">自提</span>
+            <span class="ob-order-time">12:02 接单</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-status-line">已接单 11分钟</div>
+            <span class="ob-tag-urge"><i data-lucide="alert-circle" style="width:11px;height:11px;"></i>顾客催单</span>
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>孙** 177****4455</span>
+            </div>
+            <div class="ob-order-items">烤鸭套餐x1, 酸梅汤x2 等5件</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;138.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">出餐完成</button>
+          </div>
+        </div>
+
+        <!-- Order 6 -->
+        <div class="ob-order border-blue">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212006</span>
+            <span class="g-tag g-tag-orange">堂食</span>
+            <span class="ob-order-time">12:10 接单</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-status-line">已接单 3分钟</div>
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>周** (桌号 A1)</span>
+            </div>
+            <div class="ob-order-items">水煮鱼x1, 米饭x3</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;89.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">出餐完成</button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Column: 配送/取餐中 -->
+    <div class="ob-column">
+      <div class="ob-col-hd delivering">
+        <span>配送/取餐中</span>
+        <span class="ob-col-count">2</span>
+      </div>
+      <div class="ob-col-body">
+
+        <!-- Order 7 - 外卖配送 -->
+        <div class="ob-order border-green">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212007</span>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="ob-order-time">11:50 出餐</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-status-line green">配送中</div>
+            <div class="ob-order-rider">
+              <i data-lucide="bike" style="width:14px;height:14px;"></i>
+              <span>骑手: 李师傅 138****5678</span>
+            </div>
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>陈** 150****9900</span>
+            </div>
+            <div class="ob-order-items">黄焖鸡米饭x1, 加辣 等2件</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;35.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">确认送达</button>
+          </div>
+        </div>
+
+        <!-- Order 8 - 自提 -->
+        <div class="ob-order border-green">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212008</span>
+            <span class="g-tag g-tag-green">自提</span>
+            <span class="ob-order-time">11:55 出餐</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-status-line green">等待取餐</div>
+            <div class="ob-order-pickup">
+              <i data-lucide="hash" style="width:14px;height:14px;"></i>
+              <span>取餐码: <strong style="font-size:16px;color:var(--g-text);">A088</strong></span>
+            </div>
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>吴** 133****2211</span>
+            </div>
+            <div class="ob-order-items">炸鸡桶x1, 薯条x2, 可乐x2</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;79.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <button class="g-btn g-btn-primary g-btn-sm">确认取餐</button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Column: 已完成 -->
+    <div class="ob-column">
+      <div class="ob-col-hd done">
+        <span>已完成</span>
+        <span class="ob-col-count">103</span>
+      </div>
+      <div class="ob-col-body">
+
+        <!-- Order 9 -->
+        <div class="ob-order border-gray dimmed">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212009</span>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="ob-order-time">12:35 完成</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>刘** 186****7766</span>
+            </div>
+            <div class="ob-order-items">麻婆豆腐x1, 米饭x1</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;32.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <a class="g-action">查看详情</a>
+          </div>
+        </div>
+
+        <!-- Order 10 -->
+        <div class="ob-order border-gray dimmed">
+          <div class="ob-order-hd">
+            <span class="ob-order-no">#20250212010</span>
+            <span class="g-tag g-tag-orange">堂食</span>
+            <span class="ob-order-time">12:20 完成</span>
+          </div>
+          <div class="ob-order-info">
+            <div class="ob-order-info-row">
+              <i data-lucide="user"></i>
+              <span>杨** (桌号 A3)</span>
+            </div>
+            <div class="ob-order-items">剁椒鱼头x1, 蒜蓉西兰花x1, 米饭x2</div>
+            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;118.00</div>
+          </div>
+          <div class="ob-order-ft">
+            <a class="g-action">查看详情</a>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  /* 渠道筛选切换 */
+  function filterObChannel(el) {
+    el.parentElement.querySelectorAll('.ob-channel').forEach(function(c) {
+      c.classList.remove('active');
+    });
+    el.classList.add('active');
+  }
+
+  /* 刷新看板（原型占位） */
+  function refreshBoard() {
+    // 原型演示，无真实刷新逻辑
+  }
+
+  /* 初始化 Lucide 图标 */
+  if (typeof lucide !== 'undefined') {
+    lucide.createIcons();
+  }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/order-list.html b/TakeoutSaaS.Prototypes/pages/order-list.html
new file mode 100644
index 0000000..f9408d7
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/order-list.html
@@ -0,0 +1,442 @@
+<!-- 全部订单 — order-list.html -->
+<style>
+  /* ---- page-private: ol- prefix ---- */
+  .ol-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 16px 20px;
+    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
+  }
+  .ol-toolbar .g-select,
+  .ol-toolbar .g-input { height: 32px; font-size: 13px; }
+  .ol-search-wrap {
+    position: relative; width: 200px;
+  }
+  .ol-search-wrap .g-input { padding-left: 30px; width: 100%; }
+  .ol-search-wrap i {
+    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+    color: var(--g-text-muted); pointer-events: none;
+  }
+  .ol-toolbar-right { margin-left: auto; }
+  .ol-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
+
+  /* stats row */
+  .ol-stats {
+    display: flex; gap: 24px; padding: 12px 0 4px; font-size: 13px; color: var(--g-text-secondary);
+  }
+  .ol-stats span { white-space: nowrap; }
+  .ol-stats strong { color: var(--g-text); font-weight: 600; margin-left: 4px; }
+
+  /* table card */
+  .ol-table-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    margin-top: 12px; overflow: hidden;
+  }
+  .ol-table-card .g-table th { white-space: nowrap; }
+  .ol-table-card .g-table td { vertical-align: middle; }
+
+  /* dimmed row for cancelled / refunded */
+  .ol-row-dim td { opacity: .55; }
+  .ol-row-dim:hover td { opacity: .75; }
+
+  /* items cell */
+  .ol-items { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+  /* amount */
+  .ol-amount { font-weight: 600; white-space: nowrap; }
+
+  /* drawer */
+  .ol-drawer { width: 560px; }
+
+  /* drawer sections */
+  .ol-section { margin-bottom: 22px; }
+  .ol-section-hd {
+    font-size: 14px; font-weight: 600; color: var(--g-text);
+    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
+  }
+  .ol-info-grid {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 13px;
+  }
+  .ol-info-label { color: var(--g-text-muted); }
+  .ol-info-val { color: var(--g-text); }
+  .ol-info-full { grid-column: 1 / -1; }
+
+  /* mini product table */
+  .ol-prod-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .ol-prod-table th {
+    text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 500;
+    color: var(--g-text-muted); background: var(--g-bg-subtle); border-bottom: 1px solid var(--g-border);
+  }
+  .ol-prod-table td { padding: 8px 10px; border-bottom: 1px solid #f5f5f5; color: var(--g-text); }
+  .ol-prod-table .ol-sum-row td {
+    font-weight: 600; border-bottom: none; padding-top: 10px;
+  }
+
+  /* timeline */
+  .ol-timeline { position: relative; padding-left: 22px; }
+  .ol-tl-item {
+    position: relative; padding-bottom: 18px; font-size: 13px;
+  }
+  .ol-tl-item:last-child { padding-bottom: 0; }
+  .ol-tl-item::before {
+    content: ''; position: absolute; left: -22px; top: 5px;
+    width: 10px; height: 10px; border-radius: 50%;
+    background: var(--primary); border: 2px solid var(--primary-light);
+  }
+  .ol-tl-item:not(:last-child)::after {
+    content: ''; position: absolute; left: -18px; top: 17px;
+    width: 2px; height: calc(100% - 12px); background: #e8e8e8;
+  }
+  .ol-tl-label { color: var(--g-text); font-weight: 500; }
+  .ol-tl-time { color: var(--g-text-muted); margin-left: 8px; }
+
+  /* remark */
+  .ol-remark {
+    background: var(--g-bg-subtle); border-radius: var(--g-radius-sm);
+    padding: 10px 14px; font-size: 13px; color: var(--g-text-secondary);
+    border: 1px solid var(--g-border);
+  }
+</style>
+
+<!-- 顶部筛选栏 -->
+<div class="ol-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>全部门店</option>
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <input type="date" class="g-input" style="width:145px;" value="2025-02-12">
+  <span class="ol-date-sep">~</span>
+  <input type="date" class="g-input" style="width:145px;" value="2025-02-12">
+  <select class="g-select" style="width:120px;" onchange="filterOlStatus()">
+    <option>全部状态</option>
+    <option>待接单</option>
+    <option>制作中</option>
+    <option>配送中</option>
+    <option>待取餐</option>
+    <option>已完成</option>
+    <option>已取消</option>
+    <option>已退款</option>
+  </select>
+  <select class="g-select" style="width:110px;">
+    <option>全部渠道</option>
+    <option>外卖</option>
+    <option>自提</option>
+    <option>堂食</option>
+  </select>
+  <select class="g-select" style="width:120px;">
+    <option>全部支付</option>
+    <option>微信支付</option>
+    <option>支付宝</option>
+    <option>余额支付</option>
+  </select>
+  <div class="ol-search-wrap">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input class="g-input" placeholder="订单号/手机号" oninput="searchOlOrders(this.value)">
+  </div>
+  <div class="ol-toolbar-right">
+    <button class="g-btn" onclick="exportOrders()">
+      <i data-lucide="download" style="width:14px;height:14px;"></i> 导出
+    </button>
+  </div>
+</div>
+
+<!-- 统计行 -->
+<div class="ol-stats">
+  <span>筛选结果<strong>128 单</strong></span>
+  <span>总金额<strong>&yen;12,680.00</strong></span>
+  <span>平均客单价<strong>&yen;99.06</strong></span>
+  <span>退款<strong style="color:var(--g-danger);">3 单</strong></span>
+</div>
+
+<!-- 表格 -->
+<div class="ol-table-card">
+  <table class="g-table">
+    <thead>
+      <tr>
+        <th>订单号</th>
+        <th>下单时间</th>
+        <th>渠道</th>
+        <th>顾客</th>
+        <th>商品</th>
+        <th>金额</th>
+        <th>状态</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style="font-family:monospace;">#20250212001</td>
+        <td>2025-02-12 12:00:15</td>
+        <td><span class="g-tag g-tag-blue">外卖</span></td>
+        <td>张**</td>
+        <td class="ol-items">宫保鸡丁等3件</td>
+        <td class="ol-amount">&yen;89.00</td>
+        <td><span class="g-tag g-tag-green">已完成</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212001')">详情</a></td>
+      </tr>
+      <tr>
+        <td style="font-family:monospace;">#20250212002</td>
+        <td>2025-02-12 12:05:30</td>
+        <td><span class="g-tag g-tag-green">自提</span></td>
+        <td>李**</td>
+        <td class="ol-items">双人超值套餐等2件</td>
+        <td class="ol-amount">&yen;128.00</td>
+        <td><span class="g-tag g-tag-green">已完成</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212002')">详情</a></td>
+      </tr>
+      <tr>
+        <td style="font-family:monospace;">#20250212003</td>
+        <td>2025-02-12 12:12:08</td>
+        <td><span class="g-tag g-tag-blue">外卖</span></td>
+        <td>王**</td>
+        <td class="ol-items">鱼香肉丝盖饭等1件</td>
+        <td class="ol-amount">&yen;35.50</td>
+        <td><span class="g-tag g-tag-blue">制作中</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212003')">详情</a></td>
+      </tr>
+      <tr>
+        <td style="font-family:monospace;">#20250212004</td>
+        <td>2025-02-12 12:18:45</td>
+        <td><span class="g-tag g-tag-orange">堂食</span></td>
+        <td>赵**</td>
+        <td class="ol-items">招牌红烧肉饭等4件</td>
+        <td class="ol-amount">&yen;168.00</td>
+        <td><span class="g-tag g-tag-green">已完成</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212004')">详情</a></td>
+      </tr>
+      <tr>
+        <td style="font-family:monospace;">#20250212005</td>
+        <td>2025-02-12 12:25:10</td>
+        <td><span class="g-tag g-tag-blue">外卖</span></td>
+        <td>刘**</td>
+        <td class="ol-items">番茄牛腩面等2件</td>
+        <td class="ol-amount">&yen;56.00</td>
+        <td><span class="g-tag g-tag-blue">配送中</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212005')">详情</a></td>
+      </tr>
+      <tr class="ol-row-dim">
+        <td style="font-family:monospace;">#20250212006</td>
+        <td>2025-02-12 12:30:22</td>
+        <td><span class="g-tag g-tag-blue">外卖</span></td>
+        <td>陈**</td>
+        <td class="ol-items">香辣鸡腿堡套餐等1件</td>
+        <td class="ol-amount">&yen;45.00</td>
+        <td><span class="g-tag g-tag-gray">已取消</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212006')">详情</a></td>
+      </tr>
+      <tr>
+        <td style="font-family:monospace;">#20250212007</td>
+        <td>2025-02-12 12:35:50</td>
+        <td><span class="g-tag g-tag-green">自提</span></td>
+        <td>孙**</td>
+        <td class="ol-items">麻婆豆腐等3件</td>
+        <td class="ol-amount">&yen;72.00</td>
+        <td><span class="g-tag g-tag-green">已完成</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212007')">详情</a></td>
+      </tr>
+      <tr class="ol-row-dim">
+        <td style="font-family:monospace;">#20250212008</td>
+        <td>2025-02-12 12:40:18</td>
+        <td><span class="g-tag g-tag-blue">外卖</span></td>
+        <td>周**</td>
+        <td class="ol-items">酸辣土豆丝等2件</td>
+        <td class="ol-amount">&yen;42.00</td>
+        <td><span class="g-tag g-tag-red">已退款</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212008')">详情</a></td>
+      </tr>
+      <tr>
+        <td style="font-family:monospace;">#20250212009</td>
+        <td>2025-02-12 12:48:33</td>
+        <td><span class="g-tag g-tag-orange">堂食</span></td>
+        <td>吴**</td>
+        <td class="ol-items">皮蛋豆腐等5件</td>
+        <td class="ol-amount">&yen;156.00</td>
+        <td><span class="g-tag g-tag-green">已完成</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212009')">详情</a></td>
+      </tr>
+      <tr>
+        <td style="font-family:monospace;">#20250212010</td>
+        <td>2025-02-12 12:55:02</td>
+        <td><span class="g-tag g-tag-blue">外卖</span></td>
+        <td>郑**</td>
+        <td class="ol-items">蛋炒饭等2件</td>
+        <td class="ol-amount">&yen;38.00</td>
+        <td><span class="g-tag g-tag-blue">制作中</span></td>
+        <td><a class="g-action" onclick="openOlDrawer('#20250212010')">详情</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination">
+  <span>共 128 条</span>
+  <button class="g-page-btn" disabled>&lt;</button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn">3</button>
+  <button class="g-page-btn">4</button>
+  <button class="g-page-btn">5</button>
+  <button class="g-page-btn">&gt;</button>
+</div>
+
+<!-- 订单详情抽屉 -->
+<div class="g-drawer-mask" id="olDrawerMask" onclick="closeOlDrawer()"></div>
+<div class="g-drawer ol-drawer" id="olDrawer">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="olDrawerTitle">订单详情 #20250212001</span>
+    <button class="g-drawer-close" onclick="closeOlDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+
+    <!-- 基本信息 -->
+    <div class="ol-section">
+      <div class="ol-section-hd">基本信息</div>
+      <div class="ol-info-grid">
+        <div><span class="ol-info-label">订单号：</span><span class="ol-info-val" style="font-family:monospace;">#20250212001</span></div>
+        <div><span class="ol-info-label">渠道：</span><span class="g-tag g-tag-blue">外卖</span></div>
+        <div><span class="ol-info-label">状态：</span><span class="g-tag g-tag-green">已完成</span></div>
+        <div><span class="ol-info-label">支付方式：</span><span class="ol-info-val">微信支付</span></div>
+        <div><span class="ol-info-label">下单时间：</span><span class="ol-info-val">2025-02-12 12:00:00</span></div>
+        <div><span class="ol-info-label">支付时间：</span><span class="ol-info-val">2025-02-12 12:00:15</span></div>
+        <div><span class="ol-info-label">完成时间：</span><span class="ol-info-val">2025-02-12 12:35:00</span></div>
+      </div>
+    </div>
+
+    <!-- 顾客信息 -->
+    <div class="ol-section">
+      <div class="ol-section-hd">顾客信息</div>
+      <div class="ol-info-grid">
+        <div><span class="ol-info-label">姓名：</span><span class="ol-info-val">张**</span></div>
+        <div><span class="ol-info-label">手机号：</span><span class="ol-info-val">138****6789</span></div>
+        <div class="ol-info-full"><span class="ol-info-label">收货地址：</span><span class="ol-info-val">北京市朝阳区建国路88号院3号楼1单元502</span></div>
+      </div>
+    </div>
+
+    <!-- 商品明细 -->
+    <div class="ol-section">
+      <div class="ol-section-hd">商品明细</div>
+      <table class="ol-prod-table">
+        <thead>
+          <tr>
+            <th>商品</th>
+            <th>规格</th>
+            <th>数量</th>
+            <th>单价</th>
+            <th style="text-align:right;">小计</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>宫保鸡丁</td>
+            <td>大份</td>
+            <td>1</td>
+            <td>&yen;38.00</td>
+            <td style="text-align:right;">&yen;38.00</td>
+          </tr>
+          <tr>
+            <td>酸辣土豆丝</td>
+            <td>标准</td>
+            <td>1</td>
+            <td>&yen;14.00</td>
+            <td style="text-align:right;">&yen;14.00</td>
+          </tr>
+          <tr>
+            <td>米饭</td>
+            <td>标准</td>
+            <td>2</td>
+            <td>&yen;3.00</td>
+            <td style="text-align:right;">&yen;6.00</td>
+          </tr>
+        </tbody>
+      </table>
+      <div style="font-size:13px; padding:12px 10px 0; display:flex; flex-direction:column; gap:6px;">
+        <div style="display:flex; justify-content:space-between; color:var(--g-text-secondary);">
+          <span>商品合计</span><span>&yen;58.00</span>
+        </div>
+        <div style="display:flex; justify-content:space-between; color:var(--g-text-secondary);">
+          <span>配送费</span><span>&yen;5.00</span>
+        </div>
+        <div style="display:flex; justify-content:space-between; color:var(--g-text-secondary);">
+          <span>优惠减免</span><span style="color:var(--g-danger);">-&yen;8.00</span>
+        </div>
+        <div style="display:flex; justify-content:space-between; font-weight:600; color:var(--g-text); border-top:1px solid var(--g-border); padding-top:8px; margin-top:4px;">
+          <span>实付金额</span><span style="color:var(--primary); font-size:15px;">&yen;55.00</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 状态时间线 -->
+    <div class="ol-section">
+      <div class="ol-section-hd">状态时间线</div>
+      <div class="ol-timeline">
+        <div class="ol-tl-item">
+          <span class="ol-tl-label">下单</span>
+          <span class="ol-tl-time">12:00:00</span>
+        </div>
+        <div class="ol-tl-item">
+          <span class="ol-tl-label">支付成功</span>
+          <span class="ol-tl-time">12:00:15</span>
+        </div>
+        <div class="ol-tl-item">
+          <span class="ol-tl-label">商家接单</span>
+          <span class="ol-tl-time">12:01:30</span>
+        </div>
+        <div class="ol-tl-item">
+          <span class="ol-tl-label">开始制作</span>
+          <span class="ol-tl-time">12:01:30</span>
+        </div>
+        <div class="ol-tl-item">
+          <span class="ol-tl-label">出餐完成</span>
+          <span class="ol-tl-time">12:15:00</span>
+        </div>
+        <div class="ol-tl-item">
+          <span class="ol-tl-label">骑手取餐</span>
+          <span class="ol-tl-time">12:16:20</span>
+        </div>
+        <div class="ol-tl-item">
+          <span class="ol-tl-label">已送达</span>
+          <span class="ol-tl-time">12:35:00</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 备注 -->
+    <div class="ol-section">
+      <div class="ol-section-hd">备注</div>
+      <div class="ol-remark">少放辣，多加饭</div>
+    </div>
+
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeOlDrawer()">关闭</button>
+  </div>
+</div>
+
+<script>
+  /* 抽屉开关 */
+  function openOlDrawer(orderNo) {
+    document.getElementById('olDrawerTitle').textContent = '订单详情 ' + orderNo;
+    document.getElementById('olDrawerMask').classList.add('open');
+    document.getElementById('olDrawer').classList.add('open');
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+  function closeOlDrawer() {
+    document.getElementById('olDrawerMask').classList.remove('open');
+    document.getElementById('olDrawer').classList.remove('open');
+  }
+
+  /* 筛选占位 */
+  function filterOlStatus() {
+    /* 原型占位，无真实逻辑 */
+  }
+  function searchOlOrders(keyword) {
+    /* 原型占位，无真实逻辑 */
+  }
+  function exportOrders() {
+    alert('导出功能仅为原型演示');
+  }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/order-refund.html b/TakeoutSaaS.Prototypes/pages/order-refund.html
new file mode 100644
index 0000000..b7b35e4
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/order-refund.html
@@ -0,0 +1,402 @@
+<!-- 退款售后页 -->
+<style>
+  .orf-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .orf-toolbar .g-select { width:200px; }
+  .orf-toolbar input[type="date"] { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); color:var(--g-text); }
+  .orf-toolbar input[type="date"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .orf-date-sep { color:var(--g-text-muted); font-size:13px; }
+  .orf-search { width:220px; }
+
+  /* 统计卡片 */
+  .orf-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
+  .orf-stat-card { background:#fff; border-radius:10px; padding:18px 20px; box-shadow:var(--g-shadow-sm); display:flex; align-items:flex-start; gap:14px; transition:box-shadow var(--g-transition); }
+  .orf-stat-card:hover { box-shadow:var(--g-shadow-md); }
+  .orf-stat-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .orf-stat-icon.blue { background:color-mix(in srgb, var(--primary) 10%, #fff); color:var(--primary); }
+  .orf-stat-icon.orange { background:color-mix(in srgb, var(--g-warning) 10%, #fff); color:var(--g-warning); }
+  .orf-stat-icon.green { background:color-mix(in srgb, var(--g-success) 10%, #fff); color:var(--g-success); }
+  .orf-stat-body { flex:1; }
+  .orf-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:6px; }
+  .orf-stat-value { font-size:22px; font-weight:700; color:var(--g-text); }
+  .orf-stat-trend { font-size:11px; margin-top:4px; display:flex; align-items:center; gap:3px; }
+  .orf-stat-trend.good { color:var(--g-success); }
+  .orf-stat-trend.bad { color:var(--g-danger); }
+
+  /* 表格区域 */
+  .orf-panel { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:16px 18px; }
+  .orf-seg-wrap { margin-bottom:16px; }
+  .orf-table-wrap { overflow-x:auto; }
+  .orf-dimmed { opacity:0.55; }
+
+  /* 抽屉内信息块 */
+  .orf-info-section { margin-bottom:20px; }
+  .orf-info-title { font-size:14px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:12px; }
+  .orf-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; }
+  .orf-info-item { display:flex; flex-direction:column; gap:2px; }
+  .orf-info-label { font-size:12px; color:var(--g-text-muted); }
+  .orf-info-value { font-size:13px; color:var(--g-text); font-weight:500; }
+  .orf-reason-text { font-size:13px; color:var(--g-text); line-height:1.6; margin-bottom:10px; }
+  .orf-photo-placeholder { width:80px; height:80px; background:#f8f9fb; border:1px dashed #e5e7eb; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--g-text-muted); font-size:11px; text-align:center; line-height:1.3; }
+  .orf-product-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #f3f4f6; }
+  .orf-product-row:last-child { border-bottom:none; }
+  .orf-product-img { width:48px; height:48px; background:#f8f9fb; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--g-text-muted); flex-shrink:0; }
+  .orf-product-info { flex:1; }
+  .orf-product-name { font-size:13px; font-weight:500; color:var(--g-text); }
+  .orf-product-spec { font-size:12px; color:var(--g-text-muted); margin-top:2px; }
+  .orf-product-price { font-size:13px; font-weight:600; color:var(--g-text); white-space:nowrap; }
+
+  /* 处理操作 */
+  .orf-action-pills { display:flex; gap:10px; margin-bottom:14px; }
+  .orf-action-pill { padding:8px 20px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:var(--g-text-secondary); transition:var(--g-transition); font-weight:500; }
+  .orf-action-pill:hover { border-color:var(--primary); color:var(--primary); }
+  .orf-action-pill.selected-approve { border-color:var(--g-success); background:color-mix(in srgb, var(--g-success) 8%, #fff); color:var(--g-success); }
+  .orf-action-pill.selected-reject { border-color:var(--g-danger); background:color-mix(in srgb, var(--g-danger) 8%, #fff); color:var(--g-danger); }
+</style>
+
+<!-- 顶部工具栏 -->
+<div class="orf-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>老三家外卖（总店）</option>
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（丰台店）</option>
+    <option>老三家外卖（通州店）</option>
+  </select>
+  <input type="date" value="2025-02-01" />
+  <span class="orf-date-sep">至</span>
+  <input type="date" value="2025-02-12" />
+  <input class="g-input orf-search" placeholder="订单号/退款单号" />
+  <div style="flex:1;"></div>
+  <button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;"></i> 导出</button>
+</div>
+
+<!-- 统计卡片 -->
+<div class="orf-stats">
+  <div class="orf-stat-card">
+    <div class="orf-stat-icon blue"><i data-lucide="trending-down" style="width:20px;height:20px;"></i></div>
+    <div class="orf-stat-body">
+      <div class="orf-stat-label">本月退款笔数</div>
+      <div class="orf-stat-value">23</div>
+      <div class="orf-stat-trend good"><i data-lucide="arrow-down-right" style="width:12px;height:12px;"></i> 较上月减少5笔</div>
+    </div>
+  </div>
+  <div class="orf-stat-card">
+    <div class="orf-stat-icon orange"><i data-lucide="dollar-sign" style="width:20px;height:20px;"></i></div>
+    <div class="orf-stat-body">
+      <div class="orf-stat-label">本月退款金额</div>
+      <div class="orf-stat-value">¥1,856.00</div>
+      <div class="orf-stat-trend good"><i data-lucide="arrow-down-right" style="width:12px;height:12px;"></i> 较上月↓¥320</div>
+    </div>
+  </div>
+  <div class="orf-stat-card">
+    <div class="orf-stat-icon green"><i data-lucide="percent" style="width:20px;height:20px;"></i></div>
+    <div class="orf-stat-body">
+      <div class="orf-stat-label">退款率</div>
+      <div class="orf-stat-value">2.8%</div>
+      <div class="orf-stat-trend good"><i data-lucide="arrow-down-right" style="width:12px;height:12px;"></i> 较上月↓0.3%</div>
+    </div>
+  </div>
+</div>
+
+<!-- 表格面板 -->
+<div class="orf-panel">
+  <!-- 分段控制器 -->
+  <div class="orf-seg-wrap">
+    <div class="g-seg">
+      <div class="g-seg-item active" onclick="switchOrfTab(this)" data-tab="pending">待处理(3)</div>
+      <div class="g-seg-item" onclick="switchOrfTab(this)" data-tab="processed">已处理(20)</div>
+    </div>
+  </div>
+
+  <!-- 待处理表格 -->
+  <div id="orfTabPending" class="orf-table-wrap">
+    <table class="g-table">
+      <thead>
+        <tr>
+          <th>退款单号</th>
+          <th>关联订单</th>
+          <th>申请时间</th>
+          <th>顾客</th>
+          <th>退款原因</th>
+          <th>退款金额</th>
+          <th style="width:80px;">操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td style="font-weight:500;">RF20250212001</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250212003</td>
+          <td>今天 12:30</td>
+          <td>王**</td>
+          <td>商品与描述不符</td>
+          <td style="font-weight:600;">¥68.00</td>
+          <td>
+            <a class="g-action" onclick="openOrfDrawer('RF20250212001')">处理</a>
+          </td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">RF20250212002</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250212005</td>
+          <td>今天 11:45</td>
+          <td>赵**</td>
+          <td>配送超时</td>
+          <td style="font-weight:600;">¥35.00</td>
+          <td>
+            <a class="g-action" onclick="openOrfDrawer('RF20250212002')">处理</a>
+          </td>
+        </tr>
+        <tr>
+          <td style="font-weight:500;">RF20250212003</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250212008</td>
+          <td>今天 10:20</td>
+          <td>孙**</td>
+          <td>少送商品</td>
+          <td style="font-weight:600;">¥15.00</td>
+          <td>
+            <a class="g-action" onclick="openOrfDrawer('RF20250212003')">处理</a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="g-pagination">
+      <span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 3 条</span>
+      <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn" disabled><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+    </div>
+  </div>
+
+  <!-- 已处理表格 -->
+  <div id="orfTabProcessed" class="orf-table-wrap" style="display:none;">
+    <table class="g-table">
+      <thead>
+        <tr>
+          <th>退款单号</th>
+          <th>关联订单</th>
+          <th>申请时间</th>
+          <th>顾客</th>
+          <th>退款原因</th>
+          <th>退款金额</th>
+          <th>处理结果</th>
+          <th>处理时间</th>
+          <th style="width:60px;">操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td style="font-weight:500;">RF20250211012</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250211018</td>
+          <td>昨天 14:20</td>
+          <td>李**</td>
+          <td>商品质量问题</td>
+          <td style="font-weight:600;">¥42.00</td>
+          <td><span class="g-tag g-tag-green">已退款</span></td>
+          <td>昨天 15:05</td>
+          <td><a class="g-action" onclick="openOrfDrawer('RF20250211012')">详情</a></td>
+        <tr>
+          <td style="font-weight:500;">RF20250211008</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250211010</td>
+          <td>昨天 11:30</td>
+          <td>张**</td>
+          <td>配送超时</td>
+          <td style="font-weight:600;">¥28.50</td>
+          <td><span class="g-tag g-tag-green">已退款</span></td>
+          <td>昨天 12:10</td>
+          <td><a class="g-action" onclick="openOrfDrawer('RF20250211008')">详情</a></td>
+        <tr class="orf-dimmed">
+          <td style="font-weight:500;">RF20250210015</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250210022</td>
+          <td>02-10 16:45</td>
+          <td>周**</td>
+          <td>不想要了</td>
+          <td style="font-weight:600;">¥56.00</td>
+          <td><span class="g-tag g-tag-red">已拒绝</span></td>
+          <td>02-10 17:20</td>
+          <td><a class="g-action" onclick="openOrfDrawer('RF20250210015')">详情</a></td>
+        <tr>
+          <td style="font-weight:500;">RF20250210009</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250210014</td>
+          <td>02-10 12:00</td>
+          <td>吴**</td>
+          <td>少送商品</td>
+          <td style="font-weight:600;">¥18.00</td>
+          <td><span class="g-tag g-tag-green">已退款</span></td>
+          <td>02-10 13:30</td>
+          <td><a class="g-action" onclick="openOrfDrawer('RF20250210009')">详情</a></td>
+        <tr class="orf-dimmed">
+          <td style="font-weight:500;">RF20250209021</td>
+          <td style="color:var(--primary);cursor:pointer;">#20250209030</td>
+          <td>02-09 19:10</td>
+          <td>陈**</td>
+          <td>商品与描述不符</td>
+          <td style="font-weight:600;">¥75.00</td>
+          <td><span class="g-tag g-tag-red">已拒绝</span></td>
+          <td>02-09 20:00</td>
+          <td><a class="g-action" onclick="openOrfDrawer('RF20250209021')">详情</a></td>
+      </tbody>
+    </table>
+    <div class="g-pagination">
+      <span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 20 条</span>
+      <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn">2</button>
+      <button class="g-page-btn">3</button>
+      <button class="g-page-btn">4</button>
+      <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+    </div>
+  </div>
+</div>
+
+<!-- 退款处理抽屉 -->
+<div class="g-drawer-mask" id="orfDrawerMask" onclick="closeOrfDrawer()"></div>
+<div class="g-drawer" id="orfDrawer" style="width:480px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">退款处理</span>
+    <span class="g-drawer-close" onclick="closeOrfDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></span>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 退款信息 -->
+    <div class="orf-info-section">
+      <div class="orf-info-title">退款信息</div>
+      <div class="orf-info-grid">
+        <div class="orf-info-item">
+          <span class="orf-info-label">退款单号</span>
+          <span class="orf-info-value" id="orfDetailNo">RF20250212001</span>
+        </div>
+        <div class="orf-info-item">
+          <span class="orf-info-label">关联订单</span>
+          <span class="orf-info-value" style="color:var(--primary);cursor:pointer;" id="orfDetailOrder">#20250212003</span>
+        </div>
+        <div class="orf-info-item">
+          <span class="orf-info-label">申请时间</span>
+          <span class="orf-info-value" id="orfDetailTime">今天 12:30</span>
+        </div>
+        <div class="orf-info-item">
+          <span class="orf-info-label">顾客</span>
+          <span class="orf-info-value" id="orfDetailCustomer">王**</span>
+        </div>
+        <div class="orf-info-item">
+          <span class="orf-info-label">退款金额</span>
+          <span class="orf-info-value" style="color:var(--g-danger);font-size:16px;" id="orfDetailAmount">¥68.00</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 退款原因 -->
+    <div class="orf-info-section">
+      <div class="orf-info-title">退款原因</div>
+      <div class="orf-reason-text" id="orfDetailReason">商品与描述不符，收到的菜品和图片差距较大，口味也不对。</div>
+      <div class="orf-photo-placeholder"><i data-lucide="image" style="width:20px;height:20px;margin-bottom:2px;"></i><br/>顾客上传图片</div>
+    </div>
+
+    <!-- 商品信息 -->
+    <div class="orf-info-section">
+      <div class="orf-info-title">商品信息</div>
+      <div class="orf-product-row">
+        <div class="orf-product-img"><i data-lucide="utensils" style="width:20px;height:20px;"></i></div>
+        <div class="orf-product-info">
+          <div class="orf-product-name">香辣鸡腿堡套餐</div>
+          <div class="orf-product-spec">大份 / 微辣 x1</div>
+        </div>
+        <div class="orf-product-price">¥38.00</div>
+      </div>
+      <div class="orf-product-row">
+        <div class="orf-product-img"><i data-lucide="cup-soda" style="width:20px;height:20px;"></i></div>
+        <div class="orf-product-info">
+          <div class="orf-product-name">冰红茶（大杯）</div>
+          <div class="orf-product-spec">加冰 x1</div>
+        </div>
+        <div class="orf-product-price">¥12.00</div>
+      </div>
+      <div class="orf-product-row">
+        <div class="orf-product-img"><i data-lucide="cookie" style="width:20px;height:20px;"></i></div>
+        <div class="orf-product-info">
+          <div class="orf-product-name">蛋挞（2只装）</div>
+          <div class="orf-product-spec">x1</div>
+        </div>
+        <div class="orf-product-price">¥18.00</div>
+      </div>
+    </div>
+
+    <!-- 处理操作 -->
+    <div class="orf-info-section">
+      <div class="orf-info-title">处理操作</div>
+      <div class="orf-action-pills">
+        <div class="orf-action-pill" onclick="selectOrfAction(this, 'approve')"><i data-lucide="check" style="width:14px;height:14px;vertical-align:-2px;margin-right:4px;"></i>同意退款</div>
+        <div class="orf-action-pill" onclick="selectOrfAction(this, 'reject')"><i data-lucide="x" style="width:14px;height:14px;vertical-align:-2px;margin-right:4px;"></i>拒绝退款</div>
+      </div>
+      <div id="orfRejectArea" style="display:none;">
+        <div class="g-form-group">
+          <label class="g-form-label required">拒绝原因</label>
+          <textarea class="g-textarea" rows="3" placeholder="请输入拒绝原因，如：商品已确认送达"></textarea>
+          <div class="g-hint">拒绝原因将通知顾客，请认真填写</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeOrfDrawer()">取消</button>
+    <button class="g-btn g-btn-primary">提交</button>
+  </div>
+</div>
+
+<script>
+/* 切换待处理/已处理 tab */
+function switchOrfTab(el) {
+  var tab = el.getAttribute('data-tab');
+  el.parentElement.querySelectorAll('.g-seg-item').forEach(function(item) {
+    item.classList.remove('active');
+  });
+  el.classList.add('active');
+  document.getElementById('orfTabPending').style.display = tab === 'pending' ? '' : 'none';
+  document.getElementById('orfTabProcessed').style.display = tab === 'processed' ? '' : 'none';
+}
+
+/* 退款详情数据映射（原型模拟） */
+var orfMockData = {
+  'RF20250212001': { no:'RF20250212001', order:'#20250212003', time:'今天 12:30', customer:'王**', amount:'¥68.00', reason:'商品与描述不符，收到的菜品和图片差距较大，口味也不对。' },
+  'RF20250212002': { no:'RF20250212002', order:'#20250212005', time:'今天 11:45', customer:'赵**', amount:'¥35.00', reason:'配送超时，等了将近一个小时才送到，食物已经凉了。' },
+  'RF20250212003': { no:'RF20250212003', order:'#20250212008', time:'今天 10:20', customer:'孙**', amount:'¥15.00', reason:'少送了一份蛋挞，订单里有但是没收到。' }
+};
+
+/* 打开抽屉 */
+function openOrfDrawer(refundNo) {
+  var data = orfMockData[refundNo];
+  if (data) {
+    document.getElementById('orfDetailNo').textContent = data.no;
+    document.getElementById('orfDetailOrder').textContent = data.order;
+    document.getElementById('orfDetailTime').textContent = data.time;
+    document.getElementById('orfDetailCustomer').textContent = data.customer;
+    document.getElementById('orfDetailAmount').textContent = data.amount;
+    document.getElementById('orfDetailReason').textContent = data.reason;
+  }
+  /* 重置操作状态 */
+  document.querySelectorAll('.orf-action-pill').forEach(function(p) {
+    p.classList.remove('selected-approve', 'selected-reject');
+  });
+  document.getElementById('orfRejectArea').style.display = 'none';
+
+  document.getElementById('orfDrawerMask').classList.add('open');
+  document.getElementById('orfDrawer').classList.add('open');
+}
+
+/* 关闭抽屉 */
+function closeOrfDrawer() {
+  document.getElementById('orfDrawerMask').classList.remove('open');
+  document.getElementById('orfDrawer').classList.remove('open');
+}
+
+/* 选择同意/拒绝 */
+function selectOrfAction(el, action) {
+  document.querySelectorAll('.orf-action-pill').forEach(function(p) {
+    p.classList.remove('selected-approve', 'selected-reject');
+  });
+  if (action === 'approve') {
+    el.classList.add('selected-approve');
+    document.getElementById('orfRejectArea').style.display = 'none';
+  } else {
+    el.classList.add('selected-reject');
+    document.getElementById('orfRejectArea').style.display = '';
+  }
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/order-settings.html b/TakeoutSaaS.Prototypes/pages/order-settings.html
new file mode 100644
index 0000000..9756267
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/order-settings.html
@@ -0,0 +1,318 @@
+<!-- 订单设置页 -->
+<style>
+  .page-order-settings { max-width:960px; }
+  .os-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
+  .os-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); }
+  .os-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .os-toolbar .os-page-title { font-size:15px; font-weight:600; color:var(--g-text); }
+
+  .os-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  .os-row { display:flex; align-items:flex-start; gap:16px; padding:14px 0; border-bottom:1px solid #f3f4f6; }
+  .os-row:last-child { border-bottom:none; }
+  .os-row-label { width:200px; flex-shrink:0; }
+  .os-row-label .os-label-main { font-size:13px; font-weight:500; color:var(--g-text); }
+  .os-row-label .os-label-sub { font-size:11px; color:var(--g-text-muted); margin-top:2px; }
+  .os-row-ctrl { flex:1; display:flex; flex-direction:column; gap:6px; }
+  .os-row-ctrl-inline { display:flex; align-items:center; gap:8px; }
+  .os-row-hint { font-size:11px; color:var(--g-text-muted); margin-top:2px; }
+
+  .os-num-input { width:120px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .os-num-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .os-text-input { width:160px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .os-text-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .os-suffix { font-size:13px; color:var(--g-text-secondary); white-space:nowrap; }
+
+  .os-select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); min-width:140px; }
+  .os-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  .os-checkbox-group { display:flex; flex-wrap:wrap; gap:10px 20px; }
+  .os-checkbox-item { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:var(--g-text); }
+  .os-checkbox-item input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
+
+  .os-preview { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#f8f9fb; border:1px dashed #e5e7eb; border-radius:8px; font-size:13px; color:var(--g-text-secondary); font-family:monospace; letter-spacing:0.5px; margin-top:4px; }
+
+  .os-save-bar { position:sticky; bottom:0; background:#fff; border-top:1px solid #f0f0f0; padding:14px 18px; display:flex; justify-content:flex-end; gap:8px; margin:0 -18px -20px; border-radius:0 0 10px 10px; }
+</style>
+
+<div class="page-order-settings">
+  <!-- 顶部工具栏 -->
+  <div class="os-toolbar">
+    <select style="width:200px;">
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <div style="flex:1;"></div>
+    <span class="os-page-title">订单设置</span>
+  </div>
+
+  <!-- 接单设置 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div style="padding:18px 18px 0;">
+      <div class="os-section-hd">接单设置</div>
+    </div>
+    <div style="padding:0 18px 18px;">
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">自动接单</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">开启后新订单将自动接单</span>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">自动接单延迟</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <input type="number" class="os-num-input" placeholder="如：30" value="30" />
+            <span class="os-suffix">秒</span>
+          </div>
+          <div class="os-row-hint">设置自动接单前的等待时间，方便商家提前查看订单</div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">默认出餐时间</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <input type="number" class="os-num-input" placeholder="如：20" value="20" />
+            <span class="os-suffix">分钟</span>
+          </div>
+          <div class="os-row-hint">预计出餐时间，将展示给顾客</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 超时设置 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div style="padding:18px 18px 0;">
+      <div class="os-section-hd">超时设置</div>
+    </div>
+    <div style="padding:0 18px 18px;">
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">未接单自动取消</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <input type="number" class="os-num-input" placeholder="如：5" value="5" />
+            <span class="os-suffix">分钟</span>
+          </div>
+          <div class="os-row-hint">超过该时间未接单，订单将自动取消并退款</div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">催单提醒阈值</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <input type="number" class="os-num-input" placeholder="如：10" value="10" />
+            <span class="os-suffix">分钟</span>
+          </div>
+          <div class="os-row-hint">订单超过该时间未出餐，系统将发送催单提醒</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 提醒设置 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div style="padding:18px 18px 0;">
+      <div class="os-section-hd">提醒设置</div>
+    </div>
+    <div style="padding:0 18px 18px;">
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">新订单提示音</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">新订单到达时播放提示音</span>
+            <select class="os-select" style="margin-left:12px;">
+              <option>叮咚提示音</option>
+              <option>语音播报</option>
+              <option>铃声提示</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">催单提示音</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">收到催单时播放提示音</span>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">退款提醒</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">收到退款申请时提醒</span>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">爆单预警</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">当待处理订单超过阈值时预警</span>
+          </div>
+          <div class="os-row-hint">开启后，待处理订单数量超过设定值时将发出预警通知</div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">预警阈值</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <input type="number" class="os-num-input" placeholder="如：20" value="20" />
+            <span class="os-suffix">单</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 打印设置 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div style="padding:18px 18px 0;">
+      <div class="os-section-hd">打印设置</div>
+    </div>
+    <div style="padding:0 18px 18px;">
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">自动打印</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">接单后自动打印小票</span>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">打印份数</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <input type="number" class="os-num-input" placeholder="如：2" value="2" min="1" />
+            <span class="os-suffix">份</span>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">小票模板</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <span class="g-pill checked" onclick="selectOsTemplate(this)">标准模板</span>
+            <span class="g-pill" onclick="selectOsTemplate(this)">简洁模板</span>
+            <span class="g-pill" onclick="selectOsTemplate(this)">详细模板</span>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">打印内容</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-checkbox-group">
+            <label class="os-checkbox-item"><input type="checkbox" checked />订单号</label>
+            <label class="os-checkbox-item"><input type="checkbox" checked />下单时间</label>
+            <label class="os-checkbox-item"><input type="checkbox" checked />顾客信息</label>
+            <label class="os-checkbox-item"><input type="checkbox" checked />商品明细</label>
+            <label class="os-checkbox-item"><input type="checkbox" checked />备注</label>
+            <label class="os-checkbox-item"><input type="checkbox" checked />配送信息</label>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">后厨联</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">同时打印后厨联（仅含商品和备注）</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 订单编号 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div style="padding:18px 18px 0;">
+      <div class="os-section-hd">订单编号</div>
+    </div>
+    <div style="padding:0 18px 18px;">
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">编号前缀</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <input type="text" class="os-text-input" placeholder="如：DD" value="DD" id="osPrefix" oninput="updateOsPreview()" />
+          </div>
+          <div class="os-row-hint">订单号将以此前缀开头，如 DD20250212001</div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">流水号位数</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <select class="os-select" id="osDigits" onchange="updateOsPreview()">
+              <option value="4">4位</option>
+              <option value="6" selected>6位</option>
+              <option value="8">8位</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">每日重置</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-row-ctrl-inline">
+            <div class="g-toggle on" onclick="toggleSwitch(this)"></div>
+            <span class="g-toggle-label">每天从001开始重新编号</span>
+          </div>
+        </div>
+      </div>
+      <div class="os-row">
+        <div class="os-row-label"><div class="os-label-main">编号预览</div></div>
+        <div class="os-row-ctrl">
+          <div class="os-preview" id="osPreviewBox">
+            <i data-lucide="hash" style="width:14px;height:14px;opacity:0.4;"></i>
+            <span id="osPreviewText">DD250212000001</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 底部保存栏 -->
+  <div class="g-card" style="padding:14px 18px; margin-bottom:16px;">
+    <div style="display:flex; justify-content:flex-end; gap:8px;">
+      <button class="g-btn"><i data-lucide="rotate-ccw" style="width:14px;height:14px;"></i>重置</button>
+      <button class="g-btn g-btn-primary"><i data-lucide="save" style="width:14px;height:14px;"></i>保存设置</button>
+    </div>
+  </div>
+</div>
+
+<script>
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+
+function selectOsTemplate(el) {
+  el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
+  el.classList.add('checked');
+}
+
+function updateOsPreview() {
+  var prefix = document.getElementById('osPrefix').value || 'DD';
+  var digits = parseInt(document.getElementById('osDigits').value) || 6;
+  var now = new Date();
+  var y = String(now.getFullYear()).slice(2);
+  var m = String(now.getMonth() + 1).padStart(2, '0');
+  var d = String(now.getDate()).padStart(2, '0');
+  var seq = '1'.padStart(digits, '0');
+  document.getElementById('osPreviewText').textContent = prefix + y + m + d + seq;
+}
+
+/* 初始化 Lucide 图标 */
+if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-addons.html b/TakeoutSaaS.Prototypes/pages/product-addons.html
new file mode 100644
index 0000000..ecf8046
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-addons.html
@@ -0,0 +1,303 @@
+<!-- 加料管理页 -->
+<style>
+  .page-addons { max-width:960px; }
+  .pad-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .pad-search { position:relative; }
+  .pad-search input { height:34px; padding:0 10px 0 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; width:200px; transition:var(--g-transition); }
+  .pad-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pad-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#bbb; pointer-events:none; }
+  .pad-stats { display:flex; gap:24px; margin-bottom:16px; padding:10px 16px; background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); font-size:13px; color:#4b5563; }
+  .pad-stats span { display:flex; align-items:center; gap:6px; }
+  .pad-stats strong { color:#1a1a2e; font-weight:600; }
+  .pad-card { background:#fff; border-radius:10px; border:none; box-shadow:var(--g-shadow-sm); padding:20px; margin-bottom:16px; transition:var(--g-transition); }
+  .pad-card:hover { box-shadow:var(--g-shadow-md); }
+  .pad-card.disabled { opacity:0.5; }
+  .pad-card-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
+  .pad-card-name { font-size:14px; font-weight:600; color:#1a1a2e; }
+  .pad-tag-required { background:#fef2f2; color:#ef4444; }
+  .pad-tag-optional { background:#eff6ff; color:#3b82f6; }
+  .pad-tag-disabled { background:#f3f4f6; color:#9ca3af; }
+  .pad-rule { font-size:12px; color:#9ca3af; margin-left:4px; }
+  .pad-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:12px; }
+  .pad-table th { background:#f8f9fb; padding:8px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #f3f4f6; }
+  .pad-table td { padding:8px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
+  .pad-table tr:last-child td { border-bottom:none; }
+  .pad-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .pad-stock-ok { color:#22c55e; font-size:12px; font-weight:600; }
+  .pad-stock-low { color:#f59e0b; font-size:12px; font-weight:600; }
+  .pad-assoc { font-size:12px; color:#9ca3af; margin-bottom:12px; }
+  .pad-card-footer { display:flex; align-items:center; gap:8px; border-top:1px solid #f3f4f6; padding-top:12px; }
+  .pad-sel-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
+  .pad-sel-row span { font-size:13px; color:#4b5563; font-weight:500; }
+  .pad-opt-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+  .pad-opt-row input { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .pad-opt-row input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pad-opt-name { flex:1; }
+  .pad-opt-price { width:80px; }
+  .pad-opt-stock { width:80px; }
+  .pad-opt-del { width:30px; height:30px; border:none; background:none; cursor:pointer; color:#9ca3af; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:var(--g-transition); }
+  .pad-opt-del:hover { background:#fef2f2; color:#ef4444; }
+  .pad-opt-list-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; color:#6b7280; font-weight:600; }
+  .pad-opt-list-header .h-name { flex:1; }
+  .pad-opt-list-header .h-price { width:80px; }
+  .pad-opt-list-header .h-stock { width:80px; }
+  .pad-opt-list-header .h-act { width:30px; }
+  .pad-input-num { width:80px; }
+</style>
+
+<div class="page-addons">
+  <div class="pad-toolbar">
+    <select class="g-select" style="width:200px;">
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <div class="pad-search">
+      <i data-lucide="search" style="width:14px;height:14px;"></i>
+      <input type="text" placeholder="搜索加料组名称…" oninput="searchAddons(this.value)" />
+    </div>
+    <div style="flex:1;"></div>
+    <button class="g-btn g-btn-primary" onclick="openAddonDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加加料组</button>
+  </div>
+
+  <div class="pad-stats" id="padStats">
+    <span>加料组 <strong>5</strong></span>
+    <span>选项总数 <strong>20</strong></span>
+    <span>关联商品 <strong>41</strong></span>
+  </div>
+
+  <!-- 加料 -->
+  <div class="pad-card" data-name="加料">
+    <div class="pad-card-header">
+      <span class="pad-card-name">加料</span>
+      <span class="g-tag pad-tag-optional">可选</span>
+      <span class="pad-rule">最少选0，最多选3</span>
+    </div>
+    <table class="pad-table">
+      <thead><tr><th>选项名称</th><th>加价</th><th>库存</th><th>操作</th></tr></thead>
+      <tbody>
+        <tr><td>珍珠</td><td>+¥3.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>椰果</td><td>+¥3.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>芋圆</td><td>+¥4.00</td><td><span class="pad-stock-low">偏少</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>芝士奶盖</td><td>+¥5.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>红豆</td><td>+¥3.00</td><td><span class="pad-stock-low">偏少</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+      </tbody>
+    </table>
+    <div class="pad-assoc">已关联 8 个商品</div>
+    <div class="pad-card-footer">
+      <span class="g-action" onclick="openAddonDrawer('edit','加料')">编辑</span>
+      <span class="g-action" onclick="openProductPicker({title:'关联商品',onConfirm:function(){}})">关联商品</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 配菜 -->
+  <div class="pad-card" data-name="配菜">
+    <div class="pad-card-header">
+      <span class="pad-card-name">配菜</span>
+      <span class="g-tag pad-tag-optional">可选</span>
+      <span class="pad-rule">最少选0，最多选2</span>
+    </div>
+    <table class="pad-table">
+      <thead><tr><th>选项名称</th><th>加价</th><th>库存</th><th>操作</th></tr></thead>
+      <tbody>
+        <tr><td>卤蛋</td><td>+¥2.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>海带</td><td>+¥1.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>豆腐</td><td>+¥1.00</td><td><span class="pad-stock-low">偏少</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>午餐肉</td><td>+¥4.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+      </tbody>
+    </table>
+    <div class="pad-assoc">已关联 12 个商品</div>
+    <div class="pad-card-footer">
+      <span class="g-action" onclick="openAddonDrawer('edit','配菜')">编辑</span>
+      <span class="g-action" onclick="openProductPicker({title:'关联商品',onConfirm:function(){}})">关联商品</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 主食升级 -->
+  <div class="pad-card" data-name="主食升级">
+    <div class="pad-card-header">
+      <span class="pad-card-name">主食升级</span>
+      <span class="g-tag pad-tag-required">必选</span>
+      <span class="pad-rule">必须选1</span>
+    </div>
+    <table class="pad-table">
+      <thead><tr><th>选项名称</th><th>加价</th><th>库存</th><th>操作</th></tr></thead>
+      <tbody>
+        <tr><td>米饭（默认）</td><td>+¥0.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>炒饭</td><td>+¥3.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>拌面</td><td>+¥3.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+      </tbody>
+    </table>
+    <div class="pad-assoc">已关联 15 个商品</div>
+    <div class="pad-card-footer">
+      <span class="g-action" onclick="openAddonDrawer('edit','主食升级')">编辑</span>
+      <span class="g-action" onclick="openProductPicker({title:'关联商品',onConfirm:function(){}})">关联商品</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 锅底选择 -->
+  <div class="pad-card" data-name="锅底选择">
+    <div class="pad-card-header">
+      <span class="pad-card-name">锅底选择</span>
+      <span class="g-tag pad-tag-required">必选</span>
+      <span class="pad-rule">必须选1</span>
+    </div>
+    <table class="pad-table">
+      <thead><tr><th>选项名称</th><th>加价</th><th>库存</th><th>操作</th></tr></thead>
+      <tbody>
+        <tr><td>番茄锅</td><td>+¥0.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>麻辣锅</td><td>+¥8.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>菌汤锅</td><td>+¥5.00</td><td><span class="pad-stock-low">偏少</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>鸳鸯锅</td><td>+¥12.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+      </tbody>
+    </table>
+    <div class="pad-assoc">已关联 6 个商品</div>
+    <div class="pad-card-footer">
+      <span class="g-action" onclick="openAddonDrawer('edit','锅底选择')">编辑</span>
+      <span class="g-action" onclick="openProductPicker({title:'关联商品',onConfirm:function(){}})">关联商品</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <!-- 饮品加料（已停用） -->
+  <div class="pad-card disabled" data-name="饮品加料">
+    <div class="pad-card-header">
+      <span class="pad-card-name">饮品加料</span>
+      <span class="g-tag pad-tag-disabled">已停用</span>
+      <span class="pad-rule">最少选0，最多选2</span>
+    </div>
+    <table class="pad-table">
+      <thead><tr><th>选项名称</th><th>加价</th><th>库存</th><th>操作</th></tr></thead>
+      <tbody>
+        <tr><td>冰淇淋球</td><td>+¥6.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>奶油顶</td><td>+¥4.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>巧克力碎</td><td>+¥3.00</td><td><span class="pad-stock-ok">充足</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+        <tr><td>抹茶粉</td><td>+¥2.00</td><td><span class="pad-stock-low">偏少</span></td><td><span class="g-action">改名</span><span class="g-action g-action-danger">移除</span></td></tr>
+      </tbody>
+    </table>
+    <div class="pad-assoc">已关联 0 个商品</div>
+    <div class="pad-card-footer">
+      <span class="g-action" onclick="openAddonDrawer('edit','饮品加料')">编辑</span>
+      <span class="g-action">启用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+</div>
+
+<!-- 添加/编辑加料组 Drawer -->
+<div class="g-drawer-mask" id="padDrawerMask" onclick="closeAddonDrawer()"></div>
+<div class="g-drawer" id="padDrawer" style="width:520px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="padDrawerTitle">添加加料组</span>
+    <button class="g-drawer-close" onclick="closeAddonDrawer()"><i data-lucide="x" style="width:16px;height:16px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">组名称</label>
+      <input class="g-input" type="text" id="padGroupName" placeholder="请输入加料组名称，如：加料、配菜" />
+    </div>
+    <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
+      <button class="g-toggle on" id="padRequiredToggle" onclick="toggleSwitch(this)"></button>
+      <span class="g-toggle-label">是否必选</span>
+    </div>
+    <div class="pad-sel-row">
+      <span>选择数量：最少</span>
+      <input class="g-input pad-input-num" type="number" id="padMin" value="0" min="0" placeholder="如：0" />
+      <span>最多</span>
+      <input class="g-input pad-input-num" type="number" id="padMax" value="3" min="1" placeholder="如：3" />
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">选项列表</label>
+      <div class="g-hint" style="margin-bottom:8px;">每个选项可设置加价和库存，加价为 0 表示免费</div>
+      <div class="pad-opt-list-header">
+        <span class="h-name">名称</span>
+        <span class="h-price">加价(¥)</span>
+        <span class="h-stock">库存</span>
+        <span class="h-act"></span>
+      </div>
+      <div id="padOptList">
+        <div class="pad-opt-row">
+          <input class="pad-opt-name" type="text" placeholder="如：珍珠" value="珍珠" />
+          <input class="pad-opt-price" type="number" placeholder="如：3.00" value="3" min="0" step="0.01" />
+          <input class="pad-opt-stock" type="number" placeholder="库存数" value="999" min="0" />
+          <button class="pad-opt-del" onclick="removeAddonOption(this)"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+        <div class="pad-opt-row">
+          <input class="pad-opt-name" type="text" placeholder="如：椰果" value="椰果" />
+          <input class="pad-opt-price" type="number" placeholder="如：3.00" value="3" min="0" step="0.01" />
+          <input class="pad-opt-stock" type="number" placeholder="库存数" value="999" min="0" />
+          <button class="pad-opt-del" onclick="removeAddonOption(this)"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+        <div class="pad-opt-row">
+          <input class="pad-opt-name" type="text" placeholder="如：芋圆" value="芋圆" />
+          <input class="pad-opt-price" type="number" placeholder="如：4.00" value="5" min="0" step="0.01" />
+          <input class="pad-opt-stock" type="number" placeholder="库存数" value="500" min="0" />
+          <button class="pad-opt-del" onclick="removeAddonOption(this)"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+        </div>
+      </div>
+      <button class="g-btn" style="width:100%;margin-top:8px;justify-content:center;border-style:dashed;" onclick="addAddonOption()"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加选项</button>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">备注</label>
+      <textarea class="g-textarea" rows="2" placeholder="可选，如：仅限堂食商品使用"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeAddonDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeAddonDrawer()">确认保存</button>
+  </div>
+</div>
+
+<script>
+function openAddonDrawer(mode, name) {
+  document.getElementById('padDrawerMask').classList.add('open');
+  document.getElementById('padDrawer').classList.add('open');
+  if (mode === 'edit' && name) {
+    document.getElementById('padDrawerTitle').textContent = '编辑加料组 - ' + name;
+    document.getElementById('padGroupName').value = name;
+  } else {
+    document.getElementById('padDrawerTitle').textContent = '添加加料组';
+    document.getElementById('padGroupName').value = '';
+  }
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function closeAddonDrawer() {
+  document.getElementById('padDrawerMask').classList.remove('open');
+  document.getElementById('padDrawer').classList.remove('open');
+}
+
+function addAddonOption() {
+  var list = document.getElementById('padOptList');
+  var row = document.createElement('div');
+  row.className = 'pad-opt-row';
+  row.innerHTML = '<input class="pad-opt-name" type="text" placeholder="请输入选项名称" />' +
+    '<input class="pad-opt-price" type="number" placeholder="如：3.00" value="0" min="0" step="0.01" />' +
+    '<input class="pad-opt-stock" type="number" placeholder="库存数" value="999" min="0" />' +
+    '<button class="pad-opt-del" onclick="removeAddonOption(this)"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>';
+  list.appendChild(row);
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function removeAddonOption(el) {
+  var row = el.closest('.pad-opt-row');
+  if (row) row.remove();
+}
+
+function searchAddons(keyword) {
+  var kw = keyword.trim().toLowerCase();
+  document.querySelectorAll('.pad-card').forEach(function(card) {
+    var name = (card.getAttribute('data-name') || '').toLowerCase();
+    card.style.display = (!kw || name.includes(kw)) ? '' : 'none';
+  });
+}
+
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-batch.html b/TakeoutSaaS.Prototypes/pages/product-batch.html
new file mode 100644
index 0000000..9353352
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-batch.html
@@ -0,0 +1,282 @@
+<!-- 批量工具页 -->
+<style>
+  .pbt-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .pbt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }
+  .pbt-card-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
+  .pbt-card-name { font-size:15px; font-weight:600; color:#1a1a2e; margin-bottom:4px; }
+  .pbt-card-desc { font-size:13px; color:#9ca3af; margin-bottom:14px; line-height:1.5; }
+  .pbt-expand { background:#fff; border-radius:10px; border:none; box-shadow:var(--g-shadow-sm); padding:20px; margin-bottom:16px; display:none; transition:var(--g-transition); }
+  .pbt-expand.open { display:block; }
+  .pbt-expand-title { font-size:14px; font-weight:600; color:#1a1a2e; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; padding-left:10px; border-left:3px solid var(--primary); }
+  .pbt-expand-close { background:none; border:none; color:#9ca3af; cursor:pointer; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; transition:var(--g-transition); }
+  .pbt-expand-close:hover { color:#1a1a2e; background:#f8f9fb; }
+  .pbt-step { margin-bottom:18px; }
+  .pbt-step-label { font-size:13px; font-weight:500; color:#4b5563; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
+  .pbt-step-num { width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; font-size:11px; display:inline-flex; align-items:center; justify-content:center; font-weight:600; }
+  .pbt-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
+  .pbt-pill { height:34px; padding:0 14px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; display:inline-flex; align-items:center; transition:var(--g-transition); }
+  .pbt-pill:hover { border-color:var(--primary); color:var(--primary); }
+  .pbt-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
+  .pbt-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
+  .pbt-table th { background:#f8f9fb; padding:8px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #f3f4f6; }
+  .pbt-table td { padding:8px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
+  .pbt-table tr:last-child td { border-bottom:none; }
+  .pbt-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .pbt-price-up { color:#ef4444; font-weight:600; }
+  .pbt-price-down { color:#22c55e; font-weight:600; }
+  .pbt-actions { display:flex; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid #f3f4f6; }
+  .pbt-chk-group { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
+  .pbt-chk-group label { font-size:13px; color:#4b5563; display:flex; align-items:center; gap:4px; cursor:pointer; }
+  .pbt-chk-group label input[type=checkbox] { accent-color:var(--primary); cursor:pointer; }
+  .pbt-info { font-size:13px; color:#4b5563; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:8px 12px; margin-top:10px; display:flex; align-items:center; gap:6px; }
+  .pbt-upload-area { border:2px dashed #e5e7eb; border-radius:10px; padding:30px; text-align:center; color:#9ca3af; font-size:13px; cursor:pointer; transition:var(--g-transition); display:flex; flex-direction:column; align-items:center; gap:8px; }
+  .pbt-upload-area:hover { border-color:var(--primary); color:var(--primary); }
+  .pbt-sub-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
+  .pbt-sub-card { border:none; border-radius:10px; padding:16px; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
+  .pbt-sub-card:hover { box-shadow:var(--g-shadow-md); }
+  .pbt-sub-card h4 { font-size:14px; font-weight:600; color:#1a1a2e; margin:0 0 12px 0; }
+  .pbt-link { color:var(--primary); font-size:13px; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:var(--g-transition); }
+  .pbt-link:hover { text-decoration:underline; }
+</style>
+
+<div class="pbt-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <div style="flex:1;"></div>
+  <span style="font-size:13px;color:#9ca3af;">选择门店后操作将应用于该门店的商品</span>
+</div>
+
+<div class="pbt-grid" id="pbtGrid">
+  <div class="g-card">
+    <div class="pbt-card-icon" style="background:#fff7e6;color:#fa8c16;"><i data-lucide="dollar-sign" style="width:20px;height:20px;"></i></div>
+    <div class="pbt-card-name">批量调价</div>
+    <div class="pbt-card-desc">按分类或手动选择商品，统一涨价或降价</div>
+    <button class="g-btn" onclick="expandBatchTool(0)">开始操作</button>
+  </div>
+  <div class="g-card">
+    <div class="pbt-card-icon" style="background:#f6ffed;color:#52c41a;"><i data-lucide="arrow-up-down" style="width:20px;height:20px;"></i></div>
+    <div class="pbt-card-name">批量上下架</div>
+    <div class="pbt-card-desc">快速批量上架或下架商品</div>
+    <button class="g-btn" onclick="expandBatchTool(1)">开始操作</button>
+  </div>
+  <div class="g-card">
+    <div class="pbt-card-icon" style="background:#e6f7ff;color:#1890ff;"><i data-lucide="folder-input" style="width:20px;height:20px;"></i></div>
+    <div class="pbt-card-name">批量移动分类</div>
+    <div class="pbt-card-desc">将商品批量移动到其他分类</div>
+    <button class="g-btn" onclick="expandBatchTool(2)">开始操作</button>
+  </div>
+  <div class="g-card">
+    <div class="pbt-card-icon" style="background:#f9f0ff;color:#722ed1;"><i data-lucide="refresh-cw" style="width:20px;height:20px;"></i></div>
+    <div class="pbt-card-name">批量同步门店</div>
+    <div class="pbt-card-desc">将商品同步到其他门店</div>
+    <button class="g-btn" onclick="expandBatchTool(3)">开始操作</button>
+  </div>
+  <div class="g-card">
+    <div class="pbt-card-icon" style="background:#e6fffb;color:#13c2c2;"><i data-lucide="file-spreadsheet" style="width:20px;height:20px;"></i></div>
+    <div class="pbt-card-name">导入导出</div>
+    <div class="pbt-card-desc">通过Excel批量导入或导出商品数据</div>
+    <button class="g-btn" onclick="expandBatchTool(4)">开始操作</button>
+  </div>
+</div>
+
+<!-- Expand 0: 批量调价 -->
+<div class="pbt-expand" id="pbtExpand0">
+  <div class="pbt-expand-title">批量调价 <button class="pbt-expand-close" onclick="expandBatchTool(-1)"><i data-lucide="x" style="width:16px;height:16px;"></i></button></div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">1</span> 选择范围</div>
+    <div class="pbt-pills" id="pbtRange">
+      <span class="pbt-pill active" onclick="selectBatchRange('all')">全部商品</span>
+      <span class="pbt-pill" onclick="selectBatchRange('category')">按分类</span>
+      <span class="pbt-pill" onclick="selectBatchRange('manual')">手动选择</span>
+    </div>
+    <div id="pbtRangeCat" style="display:none;" class="pbt-chk-group">
+      <label><input type="checkbox"> 热销套餐</label>
+      <label><input type="checkbox"> 招牌菜品</label>
+      <label><input type="checkbox"> 饮品小食</label>
+      <label><input type="checkbox"> 时令特供</label>
+    </div>
+  </div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">2</span> 调价方式</div>
+    <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+      <div class="pbt-pills" id="pbtPriceDir">
+        <span class="pbt-pill active" onclick="selectPriceMode('up')">涨价</span>
+        <span class="pbt-pill" onclick="selectPriceMode('down')">降价</span>
+      </div>
+      <div class="pbt-pills" id="pbtPriceType">
+        <span class="pbt-pill active" onclick="selectPriceType('fixed')">固定金额</span>
+        <span class="pbt-pill" onclick="selectPriceType('percent')">百分比</span>
+      </div>
+      <input class="g-input" style="width:120px" type="number" placeholder="如：2.00" min="0" value="2">
+    </div>
+  </div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">3</span> 预览</div>
+    <table class="pbt-table">
+      <thead><tr><th>商品名</th><th>原价</th><th>新价</th><th>变动</th></tr></thead>
+      <tbody>
+        <tr><td>宫保鸡丁</td><td>¥28.00</td><td>¥30.00</td><td class="pbt-price-up">+¥2.00</td></tr>
+        <tr><td>鱼香肉丝</td><td>¥26.00</td><td>¥28.00</td><td class="pbt-price-up">+¥2.00</td></tr>
+        <tr><td>可乐鸡翅</td><td>¥32.00</td><td>¥34.00</td><td class="pbt-price-up">+¥2.00</td></tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="pbt-actions">
+    <button class="g-btn g-btn-primary">确认调价</button>
+    <button class="g-btn" onclick="expandBatchTool(-1)">取消</button>
+  </div>
+</div>
+
+<!-- Expand 1: 批量上下架 -->
+<div class="pbt-expand" id="pbtExpand1">
+  <div class="pbt-expand-title">批量上下架 <button class="pbt-expand-close" onclick="expandBatchTool(-1)"><i data-lucide="x" style="width:16px;height:16px;"></i></button></div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">1</span> 选择分类</div>
+    <div class="pbt-chk-group">
+      <label><input type="checkbox"> 热销套餐</label>
+      <label><input type="checkbox"> 招牌菜品</label>
+      <label><input type="checkbox"> 饮品小食</label>
+      <label><input type="checkbox"> 时令特供</label>
+    </div>
+  </div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">2</span> 操作类型</div>
+    <div class="pbt-pills" id="pbtShelfMode">
+      <span class="pbt-pill active">上架</span>
+      <span class="pbt-pill">下架</span>
+    </div>
+  </div>
+  <div class="pbt-info"><i data-lucide="info" style="width:14px;height:14px;flex-shrink:0;"></i> 预计影响 <strong>24</strong> 个商品</div>
+  <div class="pbt-actions">
+    <button class="g-btn g-btn-primary">确认执行</button>
+    <button class="g-btn" onclick="expandBatchTool(-1)">取消</button>
+  </div>
+</div>
+
+<!-- Expand 2: 批量移动分类 -->
+<div class="pbt-expand" id="pbtExpand2">
+  <div class="pbt-expand-title">批量移动分类 <button class="pbt-expand-close" onclick="expandBatchTool(-1)"><i data-lucide="x" style="width:16px;height:16px;"></i></button></div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">1</span> 源分类</div>
+    <select class="g-select" style="min-width:200px"><option value="">请选择源分类</option><option>热销套餐</option><option>招牌菜品</option><option>饮品小食</option><option>时令特供</option></select>
+  </div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">2</span> 目标分类</div>
+    <select class="g-select" style="min-width:200px"><option value="">请选择目标分类</option><option>招牌菜品</option><option>热销套餐</option><option>饮品小食</option><option>时令特供</option></select>
+  </div>
+  <div class="pbt-info"><i data-lucide="info" style="width:14px;height:14px;flex-shrink:0;"></i> 该分类下共 <strong>12</strong> 个商品将被移动</div>
+  <div class="pbt-actions">
+    <button class="g-btn g-btn-primary">确认移动</button>
+    <button class="g-btn" onclick="expandBatchTool(-1)">取消</button>
+  </div>
+</div>
+
+<!-- Expand 3: 批量同步门店 -->
+<div class="pbt-expand" id="pbtExpand3">
+  <div class="pbt-expand-title">批量同步门店 <button class="pbt-expand-close" onclick="expandBatchTool(-1)"><i data-lucide="x" style="width:16px;height:16px;"></i></button></div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">1</span> 源门店</div>
+    <select class="g-select" style="min-width:200px"><option value="">请选择源门店</option><option>中关村店</option><option>望京店</option><option>国贸店</option><option>西单店</option></select>
+  </div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">2</span> 目标门店</div>
+    <div class="pbt-chk-group">
+      <label><input type="checkbox"> 望京店</label>
+      <label><input type="checkbox"> 国贸店</label>
+      <label><input type="checkbox"> 西单店</label>
+      <label><input type="checkbox"> 三里屯店</label>
+    </div>
+  </div>
+  <div class="pbt-step">
+    <div class="pbt-step-label"><span class="pbt-step-num">3</span> 同步选项</div>
+    <div class="pbt-chk-group">
+      <label><input type="checkbox" checked> 价格</label>
+      <label><input type="checkbox" checked> 库存</label>
+      <label><input type="checkbox"> 状态</label>
+    </div>
+  </div>
+  <div class="pbt-actions">
+    <button class="g-btn g-btn-primary">确认同步</button>
+    <button class="g-btn" onclick="expandBatchTool(-1)">取消</button>
+  </div>
+</div>
+
+<!-- Expand 4: 导入导出 -->
+<div class="pbt-expand" id="pbtExpand4">
+  <div class="pbt-expand-title">导入导出 <button class="pbt-expand-close" onclick="expandBatchTool(-1)"><i data-lucide="x" style="width:16px;height:16px;"></i></button></div>
+  <div class="pbt-sub-cards">
+    <div class="pbt-sub-card">
+      <h4>导入商品</h4>
+      <div class="pbt-upload-area">
+        <i data-lucide="upload" style="width:24px;height:24px;"></i>
+        <span>点击或拖拽 Excel 文件到此处上传</span>
+        <span style="font-size:11px;color:#bbb;">支持 .xlsx、.xls 格式，不超过 10MB</span>
+      </div>
+      <div style="margin-top:10px;"><a class="pbt-link"><i data-lucide="download" style="width:13px;height:13px;"></i> 下载导入模板</a></div>
+    </div>
+    <div class="pbt-sub-card">
+      <h4>导出商品</h4>
+      <div class="pbt-step" style="margin-bottom:12px;">
+        <div class="pbt-pills" id="pbtExportRange">
+          <span class="pbt-pill active">全部</span>
+          <span class="pbt-pill">按分类</span>
+        </div>
+      </div>
+      <button class="g-btn g-btn-primary"><i data-lucide="download" style="width:14px;height:14px;"></i> 导出 Excel</button>
+    </div>
+  </div>
+  <div class="pbt-actions">
+    <button class="g-btn" onclick="expandBatchTool(-1)">关闭</button>
+  </div>
+</div>
+
+<script>
+var _pbtCurrent = -1;
+
+function expandBatchTool(idx) {
+  for (var i = 0; i < 5; i++) {
+    var el = document.getElementById('pbtExpand' + i);
+    if (el) el.classList.remove('open');
+  }
+  if (idx === _pbtCurrent || idx < 0) { _pbtCurrent = -1; return; }
+  var target = document.getElementById('pbtExpand' + idx);
+  if (target) target.classList.add('open');
+  _pbtCurrent = idx;
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function selectBatchRange(mode) {
+  var pills = document.querySelectorAll('#pbtRange .pbt-pill');
+  pills.forEach(function(p) { p.classList.remove('active'); });
+  var map = { all: 0, category: 1, manual: 2 };
+  if (pills[map[mode]]) pills[map[mode]].classList.add('active');
+  var catEl = document.getElementById('pbtRangeCat');
+  if (catEl) catEl.style.display = mode === 'category' ? 'flex' : 'none';
+}
+
+function selectPriceMode(mode) {
+  var pills = document.querySelectorAll('#pbtPriceDir .pbt-pill');
+  pills.forEach(function(p) { p.classList.remove('active'); });
+  if (mode === 'up') pills[0].classList.add('active');
+  else pills[1].classList.add('active');
+}
+
+function selectPriceType(mode) {
+  var pills = document.querySelectorAll('#pbtPriceType .pbt-pill');
+  pills.forEach(function(p) { p.classList.remove('active'); });
+  if (mode === 'fixed') pills[0].classList.add('active');
+  else pills[1].classList.add('active');
+}
+
+document.querySelectorAll('#pbtShelfMode .pbt-pill, #pbtExportRange .pbt-pill').forEach(function(pill) {
+  pill.addEventListener('click', function() {
+    this.parentElement.querySelectorAll('.pbt-pill').forEach(function(p) { p.classList.remove('active'); });
+    this.classList.add('active');
+  });
+});
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-category.html b/TakeoutSaaS.Prototypes/pages/product-category.html
new file mode 100644
index 0000000..89125e4
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-category.html
@@ -0,0 +1,474 @@
+<!-- 分类管理页 -->
+<style>
+.pcat-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;box-shadow:var(--g-shadow-sm);border-radius:10px;padding:12px 16px;background:#fff;flex-wrap:wrap}
+.pcat-store-select{height:34px;border-radius:8px;border:1px solid #e5e7eb;padding:0 12px;font-size:13px;min-width:180px;outline:none;color:#1a1a2e;transition:var(--g-transition)}
+.pcat-store-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
+.pcat-toolbar .pcat-spacer{flex:1}
+.pcat-stats{display:flex;gap:24px;margin-bottom:16px;padding:10px 16px;background:#fff;border-radius:10px;box-shadow:var(--g-shadow-sm);font-size:13px;color:#4b5563;flex-wrap:wrap}
+.pcat-stats span{display:flex;align-items:center;gap:6px}
+.pcat-stats strong{color:#1a1a2e;font-weight:600}
+.pcat-stats .pcat-ch-stat{display:inline-flex;align-items:center;gap:4px;margin-left:2px}
+.pcat-stats .pcat-ch-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
+.pcat-main{display:flex;gap:18px}
+
+/* 左侧分类列表 */
+.pcat-left{width:280px;flex-shrink:0;background:#fff;border-radius:10px;box-shadow:var(--g-shadow-sm);display:flex;flex-direction:column;max-height:600px}
+.pcat-left-hd{padding:14px 16px 12px;border-bottom:1px solid #f3f4f6;flex-shrink:0}
+.pcat-left-title{font-size:14px;font-weight:600;color:#1a1a2e;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
+.pcat-left-title span{font-size:12px;color:#9ca3af;font-weight:400}
+.pcat-ch-filter{display:flex;gap:6px;margin-bottom:10px}
+.pcat-ch-filter .pcat-ch-pill{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid #e5e7eb;background:#fff;color:#6b7280;transition:var(--g-transition);user-select:none}
+.pcat-ch-filter .pcat-ch-pill:hover{border-color:var(--primary);color:var(--primary)}
+.pcat-ch-filter .pcat-ch-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
+.pcat-search{position:relative}
+.pcat-search input{width:100%;height:32px;border-radius:8px;border:1px solid #e5e7eb;padding:0 10px 0 32px;font-size:12px;outline:none;color:#1a1a2e;transition:var(--g-transition)}
+.pcat-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
+.pcat-search i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#bbb;pointer-events:none}
+.pcat-left-list{flex:1;overflow-y:auto;padding:6px 0}
+.pcat-left-list::-webkit-scrollbar{width:3px}
+.pcat-left-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:2px}
+.pcat-cat-item{display:flex;align-items:center;gap:8px;padding:9px 16px;cursor:pointer;font-size:13px;transition:var(--g-transition);user-select:none;color:#4b5563}
+.pcat-cat-item:hover{background:color-mix(in srgb,var(--primary) 3%,#fff)}
+.pcat-cat-item.active{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-weight:600}
+.pcat-cat-item.disabled{opacity:0.5}
+.pcat-drag-handle{color:#bbb;cursor:grab;flex-shrink:0;display:flex;align-items:center}
+.pcat-cat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pcat-cat-tags{display:flex;gap:3px;flex-shrink:0}
+.pcat-ch-mini{font-size:10px;font-weight:600;padding:1px 4px;border-radius:3px;line-height:14px;color:#fff}
+.pcat-ch-mini.wm{background:#1890ff}
+.pcat-ch-mini.zt{background:#52c41a}
+.pcat-ch-mini.ts{background:#fa8c16}
+.pcat-cat-badge{background:#f8f9fb;border-radius:10px;padding:1px 8px;font-size:11px;color:#6b7280;flex-shrink:0}
+.pcat-cat-item.active .pcat-cat-badge{background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary)}
+
+/* 右侧详情面板 */
+.pcat-right{flex:1;display:flex;flex-direction:column;gap:16px}
+.pcat-info-card{background:#fff;border-radius:10px;box-shadow:var(--g-shadow-sm);padding:20px}
+.pcat-info-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
+.pcat-info-title{font-size:18px;font-weight:600;color:#1a1a2e}
+.pcat-info-desc{font-size:13px;color:#9ca3af;margin-top:4px}
+.pcat-info-actions{display:flex;gap:8px;flex-shrink:0}
+.pcat-attr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:16px;border-top:1px solid #f3f4f6}
+.pcat-attr-item{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:#f8f9fb;border-radius:8px}
+.pcat-attr-label{font-size:11px;color:#9ca3af;font-weight:500}
+.pcat-attr-value{font-size:14px;color:#1a1a2e;font-weight:600}
+.pcat-attr-value .g-tag{font-size:11px}
+
+/* 渠道可见性卡片 */
+.pcat-channel-card{background:#fff;border-radius:10px;box-shadow:var(--g-shadow-sm);padding:16px 20px}
+.pcat-channel-hd{font-size:14px;font-weight:600;color:#1a1a2e;padding-left:10px;border-left:3px solid var(--primary);margin-bottom:14px}
+.pcat-channel-list{display:flex;gap:12px;flex-wrap:wrap}
+.pcat-channel-item{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#f8f9fb;border-radius:8px;border:1px solid #f3f4f6;min-width:160px;flex:1}
+.pcat-channel-item .pcat-ch-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.pcat-channel-item .pcat-ch-icon.wm{background:color-mix(in srgb,#1890ff 12%,#fff);color:#1890ff}
+.pcat-channel-item .pcat-ch-icon.zt{background:color-mix(in srgb,#52c41a 12%,#fff);color:#52c41a}
+.pcat-channel-item .pcat-ch-icon.ts{background:color-mix(in srgb,#fa8c16 12%,#fff);color:#fa8c16}
+.pcat-channel-item .pcat-ch-info{flex:1}
+.pcat-channel-item .pcat-ch-name{font-size:13px;font-weight:600;color:#1a1a2e}
+.pcat-channel-item .pcat-ch-sub{font-size:11px;color:#9ca3af;margin-top:2px}
+.pcat-channel-item .pcat-ch-status{font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px}
+.pcat-channel-item .pcat-ch-status.on{color:#52c41a}
+.pcat-channel-item .pcat-ch-status.off{color:#9ca3af}
+.pcat-channel-item .pcat-ch-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
+
+/* 商品预览表 */
+.pcat-prod-card{background:#fff;border-radius:10px;box-shadow:var(--g-shadow-sm);padding:0;flex:1}
+.pcat-prod-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f3f4f6}
+.pcat-prod-title{font-size:14px;font-weight:600;color:#1a1a2e;display:flex;align-items:center;gap:8px}
+.pcat-prod-title span{font-size:12px;color:#9ca3af;font-weight:400}
+.pcat-prod-table{width:100%;border-collapse:collapse;font-size:13px}
+.pcat-prod-table th{text-align:left;padding:10px 18px;font-size:12px;font-weight:500;color:#6b7280;background:#f8f9fb}
+.pcat-prod-table td{padding:10px 18px;border-bottom:1px solid #f3f4f6;color:#1a1a2e}
+.pcat-prod-table tr:last-child td{border-bottom:none}
+.pcat-prod-table tr:hover td{background:color-mix(in srgb,var(--primary) 3%,#fff)}
+.pcat-prod-name{display:flex;align-items:center;gap:10px}
+.pcat-prod-thumb{width:36px;height:36px;border-radius:6px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#bbb}
+.pcat-prod-info .name{font-weight:500}
+.pcat-prod-info .spu{font-size:11px;color:#9ca3af;margin-top:1px}
+.pcat-prod-price{font-weight:600;color:#1a1a2e}
+
+/* 抽屉内渠道选择 */
+.pcat-drawer-channels{display:flex;gap:8px;flex-wrap:wrap}
+.pcat-drawer-ch{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1.5px solid #e5e7eb;cursor:pointer;transition:var(--g-transition);user-select:none;font-size:13px;color:#4b5563;background:#fff}
+.pcat-drawer-ch:hover{border-color:var(--primary)}
+.pcat-drawer-ch.checked{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,#fff);color:var(--primary);font-weight:500}
+.pcat-drawer-ch .pcat-ch-check{width:16px;height:16px;border-radius:4px;border:1.5px solid #d1d5db;display:flex;align-items:center;justify-content:center;transition:var(--g-transition);flex-shrink:0}
+.pcat-drawer-ch.checked .pcat-ch-check{background:var(--primary);border-color:var(--primary)}
+.pcat-drawer-ch .pcat-ch-check svg{display:none}
+.pcat-drawer-ch.checked .pcat-ch-check svg{display:block}
+
+/* 图标上传 */
+.pcat-icon-upload{width:80px;height:80px;border:1px dashed #e5e7eb;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#bbb;cursor:pointer;transition:var(--g-transition);gap:4px}
+.pcat-icon-upload:hover{border-color:var(--primary);color:var(--primary)}
+</style>
+
+<div class="pcat-toolbar">
+  <select class="pcat-store-select">
+    <option>老三家外卖 总店</option>
+    <option>老三家外卖 朝阳店</option>
+    <option>老三家外卖 海淀店</option>
+    <option>老三家外卖 丰台店</option>
+    <option>老三家外卖 通州店</option>
+  </select>
+  <button class="g-btn" onclick="openCopyStoreModal()">复制到其他门店</button>
+  <span class="pcat-spacer"></span>
+  <button class="g-btn g-btn-primary" onclick="openCatDrawer()"><i data-lucide="plus" style="width:14px;height:14px;"></i> 添加分类</button>
+</div>
+
+<div class="pcat-stats">
+  <span>分类总数 <strong>7</strong></span>
+  <span>已启用 <strong>6</strong></span>
+  <span>商品总数 <strong>58</strong></span>
+  <span>渠道覆盖
+    <span class="pcat-ch-stat"><span class="pcat-ch-dot" style="background:#1890ff"></span>外卖 <strong>7</strong></span>
+    <span class="pcat-ch-stat"><span class="pcat-ch-dot" style="background:#52c41a"></span>自提 <strong>6</strong></span>
+    <span class="pcat-ch-stat"><span class="pcat-ch-dot" style="background:#fa8c16"></span>堂食 <strong>5</strong></span>
+  </span>
+</div>
+
+<div class="pcat-main">
+  <!-- 左侧分类列表 -->
+  <div class="pcat-left">
+    <div class="pcat-left-hd">
+      <div class="pcat-left-title">全部分类 <span>共 7 个</span></div>
+      <div class="pcat-ch-filter">
+        <span class="pcat-ch-pill active" onclick="filterByChannel(this,'all')">全部</span>
+        <span class="pcat-ch-pill" onclick="filterByChannel(this,'wm')">外卖</span>
+        <span class="pcat-ch-pill" onclick="filterByChannel(this,'zt')">自提</span>
+        <span class="pcat-ch-pill" onclick="filterByChannel(this,'ts')">堂食</span>
+      </div>
+      <div class="pcat-search">
+        <i data-lucide="search" style="width:14px;height:14px;"></i>
+        <input type="text" placeholder="搜索分类名称…" oninput="searchCategories(this.value)">
+      </div>
+    </div>
+    <div class="pcat-left-list" id="pcatList">
+      <div class="pcat-cat-item active" onclick="selectCategory(this)" data-name="热销推荐" data-desc="店铺热销菜品推荐" data-count="12" data-sort="1" data-channels="wm,zt,ts" data-status="on">
+        <span class="pcat-drag-handle"><i data-lucide="grip-vertical" style="width:14px;height:14px;"></i></span>
+        <span class="pcat-cat-name">热销推荐</span>
+        <span class="pcat-cat-tags"><span class="pcat-ch-mini wm">外</span><span class="pcat-ch-mini zt">自</span><span class="pcat-ch-mini ts">堂</span></span>
+        <span class="pcat-cat-badge">12</span>
+      </div>
+      <div class="pcat-cat-item" onclick="selectCategory(this)" data-name="主食" data-desc="米饭、面条等主食" data-count="8" data-sort="2" data-channels="wm,zt,ts" data-status="on">
+        <span class="pcat-drag-handle"><i data-lucide="grip-vertical" style="width:14px;height:14px;"></i></span>
+        <span class="pcat-cat-name">主食</span>
+        <span class="pcat-cat-tags"><span class="pcat-ch-mini wm">外</span><span class="pcat-ch-mini zt">自</span><span class="pcat-ch-mini ts">堂</span></span>
+        <span class="pcat-cat-badge">8</span>
+      </div>
+      <div class="pcat-cat-item" onclick="selectCategory(this)" data-name="小吃凉菜" data-desc="各类小吃与凉拌菜" data-count="15" data-sort="3" data-channels="wm,zt" data-status="on">
+        <span class="pcat-drag-handle"><i data-lucide="grip-vertical" style="width:14px;height:14px;"></i></span>
+        <span class="pcat-cat-name">小吃凉菜</span>
+        <span class="pcat-cat-tags"><span class="pcat-ch-mini wm">外</span><span class="pcat-ch-mini zt">自</span></span>
+        <span class="pcat-cat-badge">15</span>
+      </div>
+      <div class="pcat-cat-item" onclick="selectCategory(this)" data-name="汤羹粥品" data-desc="汤类、羹类、粥品" data-count="6" data-sort="4" data-channels="wm,ts" data-status="on">
+        <span class="pcat-drag-handle"><i data-lucide="grip-vertical" style="width:14px;height:14px;"></i></span>
+        <span class="pcat-cat-name">汤羹粥品</span>
+        <span class="pcat-cat-tags"><span class="pcat-ch-mini wm">外</span><span class="pcat-ch-mini ts">堂</span></span>
+        <span class="pcat-cat-badge">6</span>
+      </div>
+      <div class="pcat-cat-item" onclick="selectCategory(this)" data-name="饮品" data-desc="各类冷热饮品" data-count="10" data-sort="5" data-channels="wm,zt,ts" data-status="on">
+        <span class="pcat-drag-handle"><i data-lucide="grip-vertical" style="width:14px;height:14px;"></i></span>
+        <span class="pcat-cat-name">饮品</span>
+        <span class="pcat-cat-tags"><span class="pcat-ch-mini wm">外</span><span class="pcat-ch-mini zt">自</span><span class="pcat-ch-mini ts">堂</span></span>
+        <span class="pcat-cat-badge">10</span>
+      </div>
+      <div class="pcat-cat-item" onclick="selectCategory(this)" data-name="酒水" data-desc="啤酒、白酒、红酒等" data-count="4" data-sort="6" data-channels="ts" data-status="on">
+        <span class="pcat-drag-handle"><i data-lucide="grip-vertical" style="width:14px;height:14px;"></i></span>
+        <span class="pcat-cat-name">酒水</span>
+        <span class="pcat-cat-tags"><span class="pcat-ch-mini ts">堂</span></span>
+        <span class="pcat-cat-badge">4</span>
+      </div>
+      <div class="pcat-cat-item disabled" onclick="selectCategory(this)" data-name="季节限定" data-desc="季节性限定菜品" data-count="3" data-sort="7" data-channels="wm" data-status="off">
+        <span class="pcat-drag-handle"><i data-lucide="grip-vertical" style="width:14px;height:14px;"></i></span>
+        <span class="pcat-cat-name">季节限定</span>
+        <span class="pcat-cat-tags"><span class="pcat-ch-mini wm">外</span></span>
+        <span class="pcat-cat-badge">3</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- 右侧详情 -->
+  <div class="pcat-right" id="pcatDetail">
+    <!-- 分类信息卡片 -->
+    <div class="pcat-info-card">
+      <div class="pcat-info-hd">
+        <div>
+          <div class="pcat-info-title" id="pcatDetailName">热销推荐</div>
+          <div class="pcat-info-desc" id="pcatDetailDesc">店铺热销菜品推荐</div>
+        </div>
+        <div class="pcat-info-actions">
+          <button class="g-btn" onclick="openCatDrawer('edit',document.getElementById('pcatDetailName').textContent)"><i data-lucide="pencil" style="width:13px;height:13px;"></i> 编辑</button>
+          <button class="g-btn g-btn-danger"><i data-lucide="trash-2" style="width:13px;height:13px;"></i> 删除</button>
+        </div>
+      </div>
+      <div class="pcat-attr-grid">
+        <div class="pcat-attr-item">
+          <span class="pcat-attr-label">商品数量</span>
+          <span class="pcat-attr-value" id="pcatDetailCount">12</span>
+        </div>
+        <div class="pcat-attr-item">
+          <span class="pcat-attr-label">排序权重</span>
+          <span class="pcat-attr-value" id="pcatDetailSort">1</span>
+        </div>
+        <div class="pcat-attr-item">
+          <span class="pcat-attr-label">启用状态</span>
+          <span class="pcat-attr-value" id="pcatDetailStatus"><span class="g-tag g-tag-green">已启用</span></span>
+        </div>
+        <div class="pcat-attr-item">
+          <span class="pcat-attr-label">分类图标</span>
+          <span class="pcat-attr-value" style="color:#9ca3af;font-weight:400;font-size:12px">未设置</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 渠道可见性 -->
+    <div class="pcat-channel-card">
+      <div class="pcat-channel-hd">渠道可见性</div>
+      <div class="pcat-channel-list" id="pcatChannelList">
+        <div class="pcat-channel-item">
+          <div class="pcat-ch-icon wm"><i data-lucide="bike" style="width:18px;height:18px;"></i></div>
+          <div class="pcat-ch-info">
+            <div class="pcat-ch-name">外卖</div>
+            <div class="pcat-ch-sub">外卖平台展示此分类</div>
+          </div>
+          <div class="pcat-ch-status on"><span class="pcat-ch-status-dot"></span>已开启</div>
+        </div>
+        <div class="pcat-channel-item">
+          <div class="pcat-ch-icon zt"><i data-lucide="shopping-bag" style="width:18px;height:18px;"></i></div>
+          <div class="pcat-ch-info">
+            <div class="pcat-ch-name">自提</div>
+            <div class="pcat-ch-sub">到店自提展示此分类</div>
+          </div>
+          <div class="pcat-ch-status on"><span class="pcat-ch-status-dot"></span>已开启</div>
+        </div>
+        <div class="pcat-channel-item">
+          <div class="pcat-ch-icon ts"><i data-lucide="utensils" style="width:18px;height:18px;"></i></div>
+          <div class="pcat-ch-info">
+            <div class="pcat-ch-name">堂食</div>
+            <div class="pcat-ch-sub">堂食扫码点餐展示此分类</div>
+          </div>
+          <div class="pcat-ch-status on"><span class="pcat-ch-status-dot"></span>已开启</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分类下商品列表 -->
+    <div class="pcat-prod-card">
+      <div class="pcat-prod-hd">
+        <div class="pcat-prod-title">分类商品 <span id="pcatProdCount">12 个商品</span></div>
+        <button class="g-btn g-btn-sm" onclick="openProductPicker({title:'添加商品到分类',subtitle:document.getElementById('pcatDetailName').textContent,onConfirm:function(items){document.getElementById('pcatProdCount').textContent=items.length+' 个商品'}})"><i data-lucide="plus" style="width:12px;height:12px;"></i> 添加商品到此分类</button>
+      </div>
+      <table class="pcat-prod-table">
+        <thead>
+          <tr><th>商品</th><th>价格</th><th>月销</th><th>状态</th><th>操作</th></tr>
+        </thead>
+        <tbody id="pcatProdList">
+          <tr>
+            <td><div class="pcat-prod-name"><div class="pcat-prod-thumb"><i data-lucide="image" style="width:16px;height:16px;"></i></div><div class="pcat-prod-info"><div class="name">招牌红烧肉饭</div><div class="spu">SPU20240001</div></div></div></td>
+            <td class="pcat-prod-price">&yen;28.00</td>
+            <td>128</td>
+            <td><span class="g-tag g-tag-green">在售</span></td>
+            <td><span class="g-action">移出</span></td>
+          </tr>
+          <tr>
+            <td><div class="pcat-prod-name"><div class="pcat-prod-thumb"><i data-lucide="image" style="width:16px;height:16px;"></i></div><div class="pcat-prod-info"><div class="name">香辣鸡腿堡套餐</div><div class="spu">SPU20240005</div></div></div></td>
+            <td class="pcat-prod-price">&yen;35.00</td>
+            <td>99</td>
+            <td><span class="g-tag g-tag-green">在售</span></td>
+            <td><span class="g-action">移出</span></td>
+          </tr>
+          <tr>
+            <td><div class="pcat-prod-name"><div class="pcat-prod-thumb"><i data-lucide="image" style="width:16px;height:16px;"></i></div><div class="pcat-prod-info"><div class="name">番茄牛腩面</div><div class="spu">SPU20240008</div></div></div></td>
+            <td class="pcat-prod-price">&yen;26.00</td>
+            <td>79</td>
+            <td><span class="g-tag g-tag-green">在售</span></td>
+            <td><span class="g-action">移出</span></td>
+          </tr>
+          <tr>
+            <td><div class="pcat-prod-name"><div class="pcat-prod-thumb"><i data-lucide="image" style="width:16px;height:16px;"></i></div><div class="pcat-prod-info"><div class="name">鱼香肉丝盖饭</div><div class="spu">SPU20240002</div></div></div></td>
+            <td class="pcat-prod-price">&yen;22.00</td>
+            <td>58</td>
+            <td><span class="g-tag g-tag-green">在售</span></td>
+            <td><span class="g-action">移出</span></td>
+          </tr>
+          <tr>
+            <td><div class="pcat-prod-name"><div class="pcat-prod-thumb"><i data-lucide="image" style="width:16px;height:16px;"></i></div><div class="pcat-prod-info"><div class="name">冰柠檬红茶</div><div class="spu">SPU20240012</div></div></div></td>
+            <td class="pcat-prod-price">&yen;8.00</td>
+            <td>45</td>
+            <td><span class="g-tag g-tag-gray" style="opacity:0.7">下架</span></td>
+            <td><span class="g-action">移出</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- 添加/编辑分类抽屉 -->
+<div class="g-drawer-mask" id="pcatMask" onclick="closeCatDrawer()"></div>
+<div class="g-drawer" id="pcatDrawer" style="width:480px">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="pcatDrawerTitle">添加分类</span>
+    <button class="g-drawer-close" onclick="closeCatDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">分类名称</label>
+      <input type="text" class="g-input" id="pcatFormName" placeholder="请输入分类名称，如：热销推荐">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">分类描述</label>
+      <textarea class="g-textarea" id="pcatFormDesc" rows="2" placeholder="请输入分类描述，帮助顾客理解分类内容"></textarea>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">分类图标</label>
+      <div class="pcat-icon-upload" title="上传图标">
+        <i data-lucide="image-plus" style="width:22px;height:22px;"></i>
+        <span style="font-size:11px;">上传图标</span>
+      </div>
+      <div class="g-hint">建议尺寸 120x120px，支持 PNG/SVG</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">销售渠道</label>
+      <div class="g-hint" style="margin-bottom:8px;">选择该分类在哪些渠道展示，至少选择一个</div>
+      <div class="pcat-drawer-channels" id="pcatFormChannels">
+        <div class="pcat-drawer-ch checked" onclick="toggleChannel(this)" data-ch="wm">
+          <span class="pcat-ch-check"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span>
+          <i data-lucide="bike" style="width:14px;height:14px;"></i>
+          外卖
+        </div>
+        <div class="pcat-drawer-ch checked" onclick="toggleChannel(this)" data-ch="zt">
+          <span class="pcat-ch-check"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span>
+          <i data-lucide="shopping-bag" style="width:14px;height:14px;"></i>
+          自提
+        </div>
+        <div class="pcat-drawer-ch checked" onclick="toggleChannel(this)" data-ch="ts">
+          <span class="pcat-ch-check"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span>
+          <i data-lucide="utensils" style="width:14px;height:14px;"></i>
+          堂食
+        </div>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">排序</label>
+      <input type="number" class="g-input" id="pcatFormSort" placeholder="数字越小越靠前，如：1" style="width:180px">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">启用状态</label>
+      <div style="display:flex;align-items:center;gap:10px;">
+        <button class="g-toggle on" id="pcatFormToggle" onclick="toggleSwitch(this)"></button>
+        <span class="g-toggle-label">启用</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeCatDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" id="pcatDrawerSubmit" onclick="closeCatDrawer()">确认添加</button>
+  </div>
+</div>
+
+<script>
+var _channelMap = {wm:{name:'外卖',icon:'bike',sub:'外卖平台展示此分类',cls:'wm'},zt:{name:'自提',icon:'shopping-bag',sub:'到店自提展示此分类',cls:'zt'},ts:{name:'堂食',icon:'utensils',sub:'堂食扫码点餐展示此分类',cls:'ts'}};
+
+function openCatDrawer(mode, name) {
+  var title = document.getElementById('pcatDrawerTitle');
+  var submit = document.getElementById('pcatDrawerSubmit');
+  var nameInput = document.getElementById('pcatFormName');
+  var descInput = document.getElementById('pcatFormDesc');
+  var sortInput = document.getElementById('pcatFormSort');
+  var tog = document.getElementById('pcatFormToggle');
+  if (mode === 'edit' && name) {
+    title.textContent = '编辑分类';
+    submit.textContent = '保存修改';
+    nameInput.value = name;
+    var active = document.querySelector('#pcatList .pcat-cat-item.active');
+    if (active) {
+      descInput.value = active.getAttribute('data-desc') || '';
+      sortInput.value = active.getAttribute('data-sort') || '';
+      var channels = (active.getAttribute('data-channels') || '').split(',');
+      document.querySelectorAll('#pcatFormChannels .pcat-drawer-ch').forEach(function(ch) {
+        var key = ch.getAttribute('data-ch');
+        ch.classList.toggle('checked', channels.indexOf(key) > -1);
+      });
+      var isOn = active.getAttribute('data-status') !== 'off';
+      tog.classList.toggle('on', isOn);
+    }
+  } else {
+    title.textContent = '添加分类';
+    submit.textContent = '确认添加';
+    nameInput.value = '';
+    descInput.value = '';
+    sortInput.value = '';
+    document.querySelectorAll('#pcatFormChannels .pcat-drawer-ch').forEach(function(ch) { ch.classList.add('checked'); });
+    if (!tog.classList.contains('on')) tog.classList.add('on');
+  }
+  document.getElementById('pcatMask').classList.add('open');
+  document.getElementById('pcatDrawer').classList.add('open');
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function closeCatDrawer() {
+  document.getElementById('pcatMask').classList.remove('open');
+  document.getElementById('pcatDrawer').classList.remove('open');
+}
+
+function selectCategory(el) {
+  document.querySelectorAll('#pcatList .pcat-cat-item').forEach(function(item) { item.classList.remove('active'); });
+  el.classList.add('active');
+  document.getElementById('pcatDetailName').textContent = el.getAttribute('data-name');
+  document.getElementById('pcatDetailDesc').textContent = el.getAttribute('data-desc');
+  document.getElementById('pcatDetailCount').textContent = el.getAttribute('data-count');
+  document.getElementById('pcatDetailSort').textContent = el.getAttribute('data-sort');
+  document.getElementById('pcatProdCount').textContent = el.getAttribute('data-count') + ' 个商品';
+  var isOn = el.getAttribute('data-status') !== 'off';
+  document.getElementById('pcatDetailStatus').innerHTML = isOn
+    ? '<span class="g-tag g-tag-green">已启用</span>'
+    : '<span class="g-tag g-tag-gray">已停用</span>';
+  updateChannelDisplay(el.getAttribute('data-channels') || '');
+}
+
+function updateChannelDisplay(channelsStr) {
+  var channels = channelsStr ? channelsStr.split(',') : [];
+  var html = '';
+  ['wm','zt','ts'].forEach(function(key) {
+    var ch = _channelMap[key];
+    var isOn = channels.indexOf(key) > -1;
+    html += '<div class="pcat-channel-item">'
+      + '<div class="pcat-ch-icon ' + ch.cls + '"><i data-lucide="' + ch.icon + '" style="width:18px;height:18px;"></i></div>'
+      + '<div class="pcat-ch-info"><div class="pcat-ch-name">' + ch.name + '</div><div class="pcat-ch-sub">' + ch.sub + '</div></div>'
+      + '<div class="pcat-ch-status ' + (isOn ? 'on' : 'off') + '"><span class="pcat-ch-status-dot"></span>' + (isOn ? '已开启' : '未开启') + '</div>'
+      + '</div>';
+  });
+  document.getElementById('pcatChannelList').innerHTML = html;
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function searchCategories(keyword) {
+  var kw = keyword.trim().toLowerCase();
+  document.querySelectorAll('#pcatList .pcat-cat-item').forEach(function(item) {
+    var name = (item.getAttribute('data-name') || '').toLowerCase();
+    item.style.display = (!kw || name.indexOf(kw) > -1) ? '' : 'none';
+  });
+}
+
+function filterByChannel(el, channel) {
+  document.querySelectorAll('.pcat-ch-filter .pcat-ch-pill').forEach(function(p) { p.classList.remove('active'); });
+  el.classList.add('active');
+  document.querySelectorAll('#pcatList .pcat-cat-item').forEach(function(item) {
+    if (channel === 'all') { item.style.display = ''; return; }
+    var channels = (item.getAttribute('data-channels') || '').split(',');
+    item.style.display = channels.indexOf(channel) > -1 ? '' : 'none';
+  });
+}
+
+function toggleChannel(el) {
+  el.classList.toggle('checked');
+}
+
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+
+function openCopyStoreModal() {}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-combos.html b/TakeoutSaaS.Prototypes/pages/product-combos.html
new file mode 100644
index 0000000..aa26d4d
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-combos.html
@@ -0,0 +1,344 @@
+<!-- 套餐管理页 -->
+<style>
+.pcmb-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;box-shadow:var(--g-shadow-sm);border-radius:10px;padding:12px 16px;background:#fff;flex-wrap:wrap}
+.pcmb-search{position:relative}
+.pcmb-search input{height:34px;padding:0 10px 0 32px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;outline:none;width:200px;transition:var(--g-transition)}
+.pcmb-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
+.pcmb-search i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#bbb;pointer-events:none}
+.pcmb-filters{display:flex;gap:8px}
+.pcmb-filter-pill{padding:6px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;font-size:13px;cursor:pointer;color:#4b5563;transition:var(--g-transition)}
+.pcmb-filter-pill:hover{border-color:var(--primary);color:var(--primary)}
+.pcmb-filter-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
+.pcmb-stats{display:flex;gap:24px;margin-bottom:16px;padding:10px 16px;background:#fff;border-radius:10px;box-shadow:var(--g-shadow-sm);font-size:13px;color:#4b5563}
+.pcmb-stats span{display:flex;align-items:center;gap:6px}
+.pcmb-stats strong{color:#1a1a2e;font-weight:600}
+.pcmb-list{display:flex;flex-direction:column;gap:12px}
+.pcmb-card{display:flex;align-items:flex-start;gap:16px;background:#fff;border:none;border-radius:10px;padding:20px;font-size:13px;box-shadow:var(--g-shadow-sm);transition:var(--g-transition)}
+.pcmb-card:hover{box-shadow:var(--g-shadow-md)}
+.pcmb-card.disabled{opacity:0.5}
+.pcmb-cover{width:100px;height:100px;border-radius:8px;background:#f8f9fb;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:12px;flex-shrink:0;border:1px solid #e5e7eb}
+.pcmb-info{flex:1;min-width:0}
+.pcmb-name{font-weight:600;font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px;color:#1a1a2e}
+.pcmb-tag-fixed{background:#e6f0ff;color:#1a6dff;border-radius:6px;font-weight:600}
+.pcmb-tag-custom{background:#e6f7e9;color:#18a058;border-radius:6px;font-weight:600}
+.pcmb-desc{color:#9ca3af;margin-bottom:6px;font-size:12px}
+.pcmb-breakdown{color:#4b5563;margin-bottom:8px;line-height:1.6}
+.pcmb-breakdown .group-label{color:#6b7280;font-size:12px}
+.pcmb-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
+.pcmb-price{color:#ef4444;font-size:18px;font-weight:700}
+.pcmb-price-orig{color:#9ca3af;text-decoration:line-through;font-size:12px}
+.pcmb-price-save{color:#22c55e;font-size:12px;font-weight:600}
+.pcmb-stats-text{color:#9ca3af;font-size:12px}
+.pcmb-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
+.pcmb-status{padding:2px 10px;border-radius:6px;font-size:11px;font-weight:600}
+.pcmb-status-on{background:#dcfce7;color:#22c55e}
+.pcmb-status-off{background:#f8f9fb;color:#9ca3af}
+.pcmb-actions{display:flex;gap:6px}
+.pcmb-act{height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font-size:12px;cursor:pointer;color:#4b5563;transition:var(--g-transition)}
+.pcmb-act:hover{border-color:var(--primary);color:var(--primary)}
+.pcmb-act-del:hover{border-color:#ef4444;color:#ef4444}
+.pcmb-type-pills{display:flex;gap:8px}
+.pcmb-type-pill{padding:6px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;font-size:13px;cursor:pointer;color:#4b5563;transition:var(--g-transition)}
+.pcmb-type-pill:hover{border-color:var(--primary);color:var(--primary)}
+.pcmb-type-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
+.pcmb-upload-box{width:100px;height:100px;border:1px dashed #e5e7eb;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#bbb;font-size:12px;cursor:pointer;gap:4px;transition:var(--g-transition)}
+.pcmb-upload-box:hover{border-color:var(--primary);color:var(--primary)}
+.pcmb-section-title{font-size:14px;font-weight:600;margin-bottom:10px;color:#1a1a2e;padding-left:10px;border-left:3px solid var(--primary)}
+.pcmb-group-card{background:#f8f9fb;border-radius:8px;padding:14px;margin-bottom:10px;border:1px solid #e5e7eb}
+.pcmb-group-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
+.pcmb-group-header .pcmb-input{flex:1;height:34px}
+.pcmb-group-header span{font-size:12px;color:#6b7280;white-space:nowrap}
+.pcmb-group-header .pcmb-input-sm{width:50px;height:34px;text-align:center}
+.pcmb-group-remove{background:none;border:none;color:#9ca3af;cursor:pointer;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;transition:var(--g-transition)}
+.pcmb-group-remove:hover{color:#ef4444;background:#fef2f2}
+.pcmb-group-items{margin-bottom:8px}
+.pcmb-group-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;color:#4b5563}
+.pcmb-group-item span{flex:1}
+.pcmb-group-item .qty{color:#9ca3af;width:40px;text-align:center}
+.pcmb-item-remove{background:none;border:none;color:#9ca3af;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;transition:var(--g-transition)}
+.pcmb-item-remove:hover{color:#ef4444;background:#fef2f2}
+.pcmb-add-link{color:var(--primary);font-size:12px;cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;gap:4px;transition:var(--g-transition)}
+.pcmb-add-link:hover{text-decoration:underline}
+.pcmb-add-group-btn{width:100%;height:36px;border:1px dashed #e5e7eb;border-radius:8px;background:#fff;color:#9ca3af;font-size:13px;cursor:pointer;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:4px;transition:var(--g-transition)}
+.pcmb-add-group-btn:hover{border-color:var(--primary);color:var(--primary)}
+.pcmb-price-inputs{display:flex;gap:12px;align-items:center}
+.pcmb-price-inputs label{font-size:12px;color:#6b7280;font-weight:500;white-space:nowrap}
+.pcmb-price-inputs .pcmb-input{width:120px}
+.pcmb-input{width:100%;height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;box-sizing:border-box;transition:var(--g-transition);color:#1a1a2e}
+.pcmb-input::placeholder{color:#bbb}
+.pcmb-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
+</style>
+
+<div class="pcmb-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <div class="pcmb-search">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input type="text" placeholder="搜索套餐名称…" oninput="searchCombos(this.value)" />
+  </div>
+  <div class="pcmb-filters">
+    <span class="pcmb-filter-pill active" onclick="filterComboType(this)" data-type="all">全部</span>
+    <span class="pcmb-filter-pill" onclick="filterComboType(this)" data-type="fixed">固定套餐</span>
+    <span class="pcmb-filter-pill" onclick="filterComboType(this)" data-type="custom">自选套餐</span>
+  </div>
+  <div style="flex:1;"></div>
+  <button class="g-btn g-btn-primary" onclick="openComboDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加套餐</button>
+</div>
+
+<div class="pcmb-stats">
+  <span>套餐 <strong>4</strong></span>
+  <span>在售 <strong>3</strong></span>
+  <span>月总销量 <strong>265</strong></span>
+</div>
+
+<div class="pcmb-list">
+  <div class="pcmb-card" data-combo-type="fixed" data-name="双人超值套餐">
+    <div class="pcmb-cover">暂无图片</div>
+    <div class="pcmb-info">
+      <div class="pcmb-name">双人超值套餐 <span class="g-tag pcmb-tag-fixed">固定套餐</span></div>
+      <div class="pcmb-desc">超值双人组合，荤素搭配</div>
+      <div class="pcmb-breakdown">宫保鸡丁 + 鱼香肉丝 + 米饭×2 + 饮品×2</div>
+      <div class="pcmb-price-row"><span class="pcmb-price">¥68</span><span class="pcmb-price-orig">¥96</span><span class="pcmb-price-save">已省 ¥28</span></div>
+      <div class="pcmb-stats-text">月销 45</div>
+    </div>
+    <div class="pcmb-right">
+      <span class="pcmb-status pcmb-status-on">在售</span>
+      <div class="pcmb-actions">
+        <button class="pcmb-act" onclick="openComboDrawer('edit','双人超值套餐')">编辑</button>
+        <button class="pcmb-act">下架</button>
+        <button class="pcmb-act pcmb-act-del">删除</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="pcmb-card" data-combo-type="fixed" data-name="单人工作餐">
+    <div class="pcmb-cover">暂无图片</div>
+    <div class="pcmb-info">
+      <div class="pcmb-name">单人工作餐 <span class="g-tag pcmb-tag-fixed">固定套餐</span></div>
+      <div class="pcmb-desc">简单快捷，工作日首选</div>
+      <div class="pcmb-breakdown">蛋炒饭 + 酸辣汤 + 凉拌黄瓜</div>
+      <div class="pcmb-price-row"><span class="pcmb-price">¥35</span><span class="pcmb-price-orig">¥45</span><span class="pcmb-price-save">已省 ¥10</span></div>
+      <div class="pcmb-stats-text">月销 120</div>
+    </div>
+    <div class="pcmb-right">
+      <span class="pcmb-status pcmb-status-on">在售</span>
+      <div class="pcmb-actions">
+        <button class="pcmb-act" onclick="openComboDrawer('edit','单人工作餐')">编辑</button>
+        <button class="pcmb-act">下架</button>
+        <button class="pcmb-act pcmb-act-del">删除</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="pcmb-card" data-combo-type="custom" data-name="任选午餐">
+    <div class="pcmb-cover">暂无图片</div>
+    <div class="pcmb-info">
+      <div class="pcmb-name">任选午餐 <span class="g-tag pcmb-tag-custom">自选套餐</span></div>
+      <div class="pcmb-desc">自由搭配，满足不同口味</div>
+      <div class="pcmb-breakdown">
+        <span class="group-label">A 主食(选1):</span> 宫保鸡丁 / 鱼香肉丝 / 麻婆豆腐<br>
+        <span class="group-label">B 小食(选1):</span> 凉拌黄瓜 / 酸辣汤<br>
+        <span class="group-label">C 饮品(选1):</span> 冰粉 / 可乐
+      </div>
+      <div class="pcmb-price-row"><span class="pcmb-price">¥38</span></div>
+      <div class="pcmb-stats-text">月销 88</div>
+    </div>
+    <div class="pcmb-right">
+      <span class="pcmb-status pcmb-status-on">在售</span>
+      <div class="pcmb-actions">
+        <button class="pcmb-act" onclick="openComboDrawer('edit','任选午餐')">编辑</button>
+        <button class="pcmb-act">下架</button>
+        <button class="pcmb-act pcmb-act-del">删除</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="pcmb-card disabled" data-combo-type="fixed" data-name="家庭聚餐套餐">
+    <div class="pcmb-cover">暂无图片</div>
+    <div class="pcmb-info">
+      <div class="pcmb-name">家庭聚餐套餐 <span class="g-tag pcmb-tag-fixed">固定套餐</span></div>
+      <div class="pcmb-desc">家庭聚餐，丰盛实惠</div>
+      <div class="pcmb-breakdown">红烧排骨 + 宫保鸡丁 + 麻婆豆腐 + 蛋炒饭×2 + 酸辣汤×2</div>
+      <div class="pcmb-price-row"><span class="pcmb-price">¥128</span><span class="pcmb-price-orig">¥168</span><span class="pcmb-price-save">已省 ¥40</span></div>
+      <div class="pcmb-stats-text">月销 12</div>
+    </div>
+    <div class="pcmb-right">
+      <span class="pcmb-status pcmb-status-off">已下架</span>
+      <div class="pcmb-actions">
+        <button class="pcmb-act" onclick="openComboDrawer('edit','家庭聚餐套餐')">编辑</button>
+        <button class="pcmb-act">上架</button>
+        <button class="pcmb-act pcmb-act-del">删除</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 添加/编辑套餐抽屉 -->
+<div class="g-drawer-mask" id="pcmbDrawerMask" onclick="closeComboDrawer()"></div>
+<div class="g-drawer" id="pcmbDrawer" style="width:560px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="pcmbDrawerTitle">添加套餐</span>
+    <button class="g-drawer-close" onclick="closeComboDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">套餐名称</label>
+      <input class="g-input" id="pcmbName" placeholder="请输入套餐名称，如：双人超值套餐">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">套餐类型</label>
+      <div class="pcmb-type-pills">
+        <span class="pcmb-type-pill active" onclick="selectComboType(this)">固定套餐</span>
+        <span class="pcmb-type-pill" onclick="selectComboType(this)">自选套餐</span>
+      </div>
+      <div class="g-hint">固定套餐：商品固定搭配；自选套餐：顾客从分组中自由选择</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">封面图</label>
+      <div class="pcmb-upload-box">
+        <i data-lucide="image-plus" style="width:24px;height:24px;"></i>
+        <span>上传图片</span>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">套餐描述</label>
+      <textarea class="g-textarea" rows="2" placeholder="请输入套餐描述，如：超值双人组合，荤素搭配"></textarea>
+    </div>
+    <div class="g-form-group">
+      <div class="pcmb-section-title">套餐分组</div>
+      <div class="g-hint" style="margin-bottom:10px;">每个分组可包含多个商品，顾客按分组选择</div>
+      <div id="pcmbGroups">
+        <div class="pcmb-group-card">
+          <div class="pcmb-group-header">
+            <input class="pcmb-input" value="主菜" placeholder="请输入分组名称">
+            <span>选</span><input class="pcmb-input pcmb-input-sm" type="number" value="1" min="1"><span>份</span>
+            <button class="pcmb-group-remove" onclick="removeComboGroup(this)"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+          </div>
+          <div class="pcmb-group-items">
+            <div class="pcmb-group-item"><span>宫保鸡丁</span><span class="qty">×1</span><button class="pcmb-item-remove" onclick="this.closest('.pcmb-group-item').remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></div>
+            <div class="pcmb-group-item"><span>鱼香肉丝</span><span class="qty">×1</span><button class="pcmb-item-remove" onclick="this.closest('.pcmb-group-item').remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></div>
+          </div>
+          <button class="pcmb-add-link" onclick="openProductPicker({title:'添加商品到分组',onConfirm:addComboProducts})"><i data-lucide="plus" style="width:12px;height:12px;"></i> 添加商品</button>
+        </div>
+        <div class="pcmb-group-card">
+          <div class="pcmb-group-header">
+            <input class="pcmb-input" value="主食" placeholder="请输入分组名称">
+            <span>选</span><input class="pcmb-input pcmb-input-sm" type="number" value="1" min="1"><span>份</span>
+            <button class="pcmb-group-remove" onclick="removeComboGroup(this)"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+          </div>
+          <div class="pcmb-group-items">
+            <div class="pcmb-group-item"><span>米饭</span><span class="qty">×2</span><button class="pcmb-item-remove" onclick="this.closest('.pcmb-group-item').remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></div>
+          </div>
+          <button class="pcmb-add-link" onclick="openProductPicker({title:'添加商品到分组',onConfirm:addComboProducts})"><i data-lucide="plus" style="width:12px;height:12px;"></i> 添加商品</button>
+        </div>
+      </div>
+      <button class="pcmb-add-group-btn" onclick="addComboGroup()"><i data-lucide="plus" style="width:14px;height:14px;"></i> 添加分组</button>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">价格设置</label>
+      <div class="pcmb-price-inputs">
+        <label>套餐价</label><input class="pcmb-input" type="number" placeholder="如：68.00">
+        <label>原价</label><input class="pcmb-input" type="number" placeholder="自动计算" readonly style="background:#f9f9f9">
+      </div>
+      <div class="g-hint">原价根据分组内商品单价自动计算</div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeComboDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeComboDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+function openComboDrawer(mode, name) {
+  document.getElementById('pcmbDrawer').classList.add('open');
+  document.getElementById('pcmbDrawerMask').classList.add('open');
+  document.getElementById('pcmbDrawerTitle').textContent = mode === 'edit' ? '编辑套餐' : '添加套餐';
+  if (mode === 'edit' && name) {
+    document.getElementById('pcmbName').value = name;
+  } else {
+    document.getElementById('pcmbName').value = '';
+  }
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+function closeComboDrawer() {
+  document.getElementById('pcmbDrawer').classList.remove('open');
+  document.getElementById('pcmbDrawerMask').classList.remove('open');
+}
+function selectComboType(el) {
+  el.parentElement.querySelectorAll('.pcmb-type-pill').forEach(function(p) { p.classList.remove('active'); });
+  el.classList.add('active');
+}
+function addComboGroup() {
+  var g = document.createElement('div');
+  g.className = 'pcmb-group-card';
+  var h = document.createElement('div');
+  h.className = 'pcmb-group-header';
+  h.innerHTML = '<input class="pcmb-input" placeholder="请输入分组名称"><span>选</span><input class="pcmb-input pcmb-input-sm" type="number" value="1" min="1"><span>份</span>';
+  var rb = document.createElement('button');
+  rb.className = 'pcmb-group-remove';
+  rb.onclick = function(){ removeComboGroup(this); };
+  rb.innerHTML = '<i data-lucide="trash-2" style="width:14px;height:14px;"></i>';
+  h.appendChild(rb);
+  var items = document.createElement('div');
+  items.className = 'pcmb-group-items';
+  var addBtn = document.createElement('button');
+  addBtn.className = 'pcmb-add-link';
+  addBtn.innerHTML = '<i data-lucide="plus" style="width:12px;height:12px;"></i> 添加商品';
+  addBtn.onclick = function(){ openProductPicker({title:'添加商品到分组',onConfirm:addComboProducts}); };
+  g.appendChild(h);
+  g.appendChild(items);
+  g.appendChild(addBtn);
+  document.getElementById('pcmbGroups').appendChild(g);
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+function removeComboGroup(el) {
+  var card = el.closest('.pcmb-group-card');
+  if (card) card.remove();
+}
+function filterComboType(el) {
+  el.parentElement.querySelectorAll('.pcmb-filter-pill').forEach(function(p) { p.classList.remove('active'); });
+  el.classList.add('active');
+  var type = el.getAttribute('data-type');
+  document.querySelectorAll('.pcmb-card').forEach(function(card) {
+    if (type === 'all') { card.style.display = ''; }
+    else { card.style.display = card.getAttribute('data-combo-type') === type ? '' : 'none'; }
+  });
+}
+function searchCombos(keyword) {
+  var kw = keyword.trim().toLowerCase();
+  document.querySelectorAll('.pcmb-card').forEach(function(card) {
+    var name = (card.getAttribute('data-name') || '').toLowerCase();
+    card.style.display = (!kw || name.includes(kw)) ? '' : 'none';
+  });
+}
+function addComboProducts(items) {
+  var groups = document.querySelectorAll('#pcmbGroups .pcmb-group-card');
+  var lastGroup = groups.length ? groups[groups.length - 1] : null;
+  if (!lastGroup) return;
+  var list = lastGroup.querySelector('.pcmb-group-items');
+  items.forEach(function(p) {
+    var d = document.createElement('div');
+    d.className = 'pcmb-group-item';
+    var nameSpan = document.createElement('span');
+    nameSpan.textContent = p.name;
+    var qtySpan = document.createElement('span');
+    qtySpan.className = 'qty';
+    qtySpan.textContent = '×1';
+    var rmBtn = document.createElement('button');
+    rmBtn.className = 'pcmb-item-remove';
+    rmBtn.innerHTML = '<i data-lucide="x" style="width:12px;height:12px;"></i>';
+    rmBtn.onclick = function(){ this.closest('.pcmb-group-item').remove(); };
+    d.appendChild(nameSpan);
+    d.appendChild(qtySpan);
+    d.appendChild(rmBtn);
+    list.appendChild(d);
+  });
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-detail.html b/TakeoutSaaS.Prototypes/pages/product-detail.html
new file mode 100644
index 0000000..20895c7
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-detail.html
@@ -0,0 +1,473 @@
+<!-- 商品详情页 -->
+<style>
+.pd-page{font-size:13px}
+.pd-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
+.pd-back{width:34px;height:34px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#4b5563;transition:var(--g-transition);flex-shrink:0}
+.pd-back:hover{border-color:var(--primary);color:var(--primary);box-shadow:var(--g-shadow-sm)}
+.pd-back:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent)}
+.pd-hd-name{font-size:18px;font-weight:700;color:#1a1a2e}
+.pd-hd-spu{font-size:12px;color:#9ca3af;font-family:monospace}
+.pd-hd-status{display:inline-block;padding:2px 12px;border-radius:6px;font-size:11px;font-weight:600;color:#fff;margin-left:4px}
+.pd-hd-spacer{flex:1}
+
+.pd-body{display:flex;gap:18px;align-items:flex-start}
+.pd-nav{width:160px;flex-shrink:0;background:#fff;border-radius:10px;border:none;box-shadow:var(--g-shadow-md);padding:8px 0;position:sticky;top:0}
+.pd-nav-item{display:block;padding:9px 20px;font-size:13px;color:#4b5563;cursor:pointer;border-left:3px solid transparent;transition:var(--g-transition);text-decoration:none}
+.pd-nav-item:hover{color:var(--primary);background:#f8f9fb}
+.pd-nav-item.active{color:var(--primary);font-weight:600;border-left-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)}
+.pd-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
+
+.pd-row{display:flex;align-items:flex-start;margin-bottom:14px;gap:12px}
+.pd-label{width:80px;flex-shrink:0;font-size:13px;color:#4b5563;font-weight:500;line-height:34px;text-align:right}
+.pd-label.required::before{content:'*';color:#ef4444;margin-right:2px}
+.pd-ctrl{flex:1;min-width:0}
+.pd-inline{display:flex;gap:10px;align-items:center}
+.pd-inline .g-input{width:auto;flex:1}
+.pd-unit{font-size:12px;color:#9ca3af;white-space:nowrap}
+
+/* Upload */
+.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
+.pd-thumb{width:80px;height:80px;border-radius:8px;background:#f8f9fb;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid #e5e7eb;transition:var(--g-transition)}
+.pd-thumb:hover{box-shadow:var(--g-shadow-sm)}
+.pd-thumb-main{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
+.pd-thumb-badge{position:absolute;bottom:-1px;left:0;right:0;text-align:center;font-size:10px;color:#fff;background:var(--primary);border-radius:0 0 7px 7px;padding:1px 0}
+.pd-thumb-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;font-size:12px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:var(--g-transition)}
+.pd-thumb-del:hover{background:#dc2626}
+
+/* Pills */
+.pd-pills{display:flex;flex-wrap:wrap;gap:8px}
+
+/* Toggle */
+.pd-toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
+
+/* Tags */
+.pd-tag-sel{display:inline-flex;align-items:center;padding:4px 12px;border-radius:6px;font-size:12px;cursor:pointer;border:1px solid #e5e7eb;transition:var(--g-transition);user-select:none;margin:0 8px 8px 0}
+.pd-tag-sel:hover{border-color:var(--primary);box-shadow:var(--g-shadow-sm)}
+.pd-tag-sel.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary);font-weight:600}
+
+/* Shelf radio */
+.pd-shelf-group{display:flex;flex-direction:column;gap:10px}
+.pd-shelf-opt{display:flex;align-items:flex-start;gap:8px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:var(--g-transition)}
+.pd-shelf-opt:hover{border-color:var(--primary);box-shadow:var(--g-shadow-sm)}
+.pd-shelf-opt.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent)}
+.pd-shelf-opt input[type=radio]{margin-top:2px;accent-color:var(--primary);cursor:pointer}
+.pd-shelf-opt-body{flex:1}
+.pd-shelf-opt-title{font-size:13px;font-weight:600;color:#1a1a2e}
+.pd-shelf-opt-desc{font-size:12px;color:#9ca3af;margin-top:2px}
+.pd-shelf-time{margin-top:8px;display:none;gap:8px;align-items:center}
+.pd-shelf-opt.active .pd-shelf-time.show-active{display:flex}
+
+/* Save bar */
+.pd-savebar{background:#fafbfc;border-radius:10px;border:none;box-shadow:var(--g-shadow-sm);padding:14px 24px;display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;z-index:10}
+
+/* SKU Matrix */
+.pd-sku-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
+.pd-sku-hd-left{display:flex;align-items:center;gap:10px}
+.pd-sku-hd-left .g-card-title{margin:0}
+.pd-sku-count{font-size:12px;color:#9ca3af;font-weight:400}
+.pd-sku-hint{font-size:12px;color:#9ca3af}
+.pd-sku-table{width:100%;border-collapse:collapse;font-size:13px}
+.pd-sku-table th{text-align:left;padding:9px 12px;font-size:12px;font-weight:500;color:#6b7280;background:#f8f9fb;border-bottom:1px solid #f0f0f0;white-space:nowrap}
+.pd-sku-table td{padding:8px 12px;border-bottom:1px solid #f3f4f6;color:#1a1a2e;vertical-align:middle}
+.pd-sku-table tr:last-child td{border-bottom:none}
+.pd-sku-table tr:hover td{background:color-mix(in srgb,var(--primary) 3%,#fff)}
+.pd-sku-table input[type=number]{width:90px;height:30px;padding:0 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;color:#1a1a2e;transition:var(--g-transition);text-align:right}
+.pd-sku-table input[type=number]:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);outline:none}
+.pd-sku-spec{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;background:#f0f0f0;color:#4b5563}
+.pd-sku-spec.s1{background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary)}
+.pd-sku-spec.s2{background:color-mix(in srgb,#fa8c16 10%,#fff);color:#fa8c16}
+.pd-sku-code{font-size:11px;color:#9ca3af;font-family:monospace}
+.pd-sku-stock-warn{color:#fa8c16;font-size:11px;display:flex;align-items:center;gap:3px;margin-top:2px}
+.pd-sku-batch{display:flex;gap:8px;align-items:center;margin-bottom:12px}
+.pd-sku-batch label{font-size:12px;color:#6b7280;white-space:nowrap}
+.pd-sku-batch input[type=number]{width:100px;height:30px;padding:0 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;color:#1a1a2e}
+.pd-sku-toggle{display:flex;align-items:center;justify-content:center}
+</style>
+
+<div class="pd-page">
+  <!-- Header -->
+  <div class="pd-header">
+    <button class="pd-back" onclick="navigateTo('商品列表')" title="返回列表">&#x2190;</button>
+    <span class="pd-hd-name" id="pdName">宫保鸡丁</span>
+    <span class="pd-hd-spu">SPU20240001</span>
+    <span class="pd-hd-status" style="background:#52c41a">在售</span>
+    <span class="pd-hd-spacer"></span>
+    <button class="g-btn g-btn-danger">删除商品</button>
+    <button class="g-btn">下架</button>
+  </div>
+
+  <div class="pd-body">
+    <!-- Left anchor nav -->
+    <div class="pd-nav" id="pdNav">
+      <a class="pd-nav-item active" data-target="pd-sec-basic" onclick="scrollToPdSec(this)">基本信息</a>
+      <a class="pd-nav-item" data-target="pd-sec-images" onclick="scrollToPdSec(this)">商品图片</a>
+      <a class="pd-nav-item" data-target="pd-sec-pricing" onclick="scrollToPdSec(this)">价格库存</a>
+      <a class="pd-nav-item" data-target="pd-sec-specs" onclick="scrollToPdSec(this)">规格做法</a>
+      <a class="pd-nav-item" data-target="pd-sec-sku" onclick="scrollToPdSec(this)">SKU管理</a>
+      <a class="pd-nav-item" data-target="pd-sec-addons" onclick="scrollToPdSec(this)">加料管理</a>
+      <a class="pd-nav-item" data-target="pd-sec-tags" onclick="scrollToPdSec(this)">商品标签</a>
+      <a class="pd-nav-item" data-target="pd-sec-shelf" onclick="scrollToPdSec(this)">上架设置</a>
+    </div>
+
+    <!-- Right content -->
+    <div class="pd-content" id="pdContent">
+
+      <!-- 基本信息 -->
+      <div class="g-card" id="pd-sec-basic">
+        <div class="g-card-title">基本信息</div>
+        <div class="pd-row">
+          <label class="pd-label required">商品名称</label>
+          <div class="pd-ctrl"><input class="g-input" value="宫保鸡丁" maxlength="30" /><div class="g-hint">最多30个字符</div></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">副标题</label>
+          <div class="pd-ctrl"><input class="g-input" value="经典川菜，香辣可口" maxlength="50" /></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">SPU编码</label>
+          <div class="pd-ctrl"><input class="g-input" value="SPU20240001" readonly style="background:#fafafa;color:#999" /></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label required">所属分类</label>
+          <div class="pd-ctrl">
+            <select class="g-select" style="cursor:pointer">
+              <option>热销推荐</option><option selected>主食</option><option>小吃凉菜</option>
+              <option>汤羹粥品</option><option>饮品</option><option>酒水</option><option>套餐</option>
+            </select>
+          </div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">商品描述</label>
+          <div class="pd-ctrl"><textarea class="g-textarea" rows="3" placeholder="详细描述，展示在商品详情页">花生米、鸡丁、干辣椒爆炒，麻辣鲜香，佐饭佳品。</textarea></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">排序权重</label>
+          <div class="pd-ctrl"><div class="pd-inline"><input class="g-input" type="number" min="0" value="10" style="width:100px" /><span class="pd-unit">数值越大越靠前</span></div></div>
+        </div>
+      </div>
+
+      <!-- 商品图片 -->
+      <div class="g-card" id="pd-sec-images">
+        <div class="g-card-title">商品图片</div>
+        <div class="g-upload-zone" onclick="this.querySelector('input').click()">
+          <input type="file" accept="image/*" multiple style="display:none" />
+          <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>
+          点击或拖拽上传图片<br><span style="font-size:11px;color:#bbb">建议尺寸 750×750，最多5张，首张为主图</span>
+        </div>
+        <div class="pd-thumbs">
+          <div class="pd-thumb pd-thumb-main"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/></svg><span class="pd-thumb-badge">主图</span><button class="pd-thumb-del">&times;</button></div>
+          <div class="pd-thumb"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/></svg><button class="pd-thumb-del">&times;</button></div>
+          <div class="pd-thumb"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/></svg><button class="pd-thumb-del">&times;</button></div>
+        </div>
+      </div>
+
+      <!-- 价格库存 -->
+      <div class="g-card" id="pd-sec-pricing">
+        <div class="g-card-title">价格库存</div>
+        <div style="background:color-mix(in srgb,var(--primary) 6%,#fff);border:1px solid color-mix(in srgb,var(--primary) 15%,#fff);border-radius:8px;padding:8px 12px;margin-bottom:14px;font-size:12px;color:var(--primary);display:flex;align-items:center;gap:6px">
+          <i data-lucide="info" style="width:14px;height:14px;flex-shrink:0"></i>
+          已启用多规格，售价和库存以下方「SKU管理」中的各规格组合为准，此处为默认基准价
+        </div>
+        <div class="pd-row">
+          <label class="pd-label required">售价</label>
+          <div class="pd-ctrl"><div class="pd-inline"><span class="pd-unit">&yen;</span><input class="g-input" type="number" min="0" step="0.01" value="32" /></div></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">划线价</label>
+          <div class="pd-ctrl"><div class="pd-inline"><span class="pd-unit">&yen;</span><input class="g-input" type="number" min="0" step="0.01" value="38" /></div><div class="g-hint">展示在售价旁，划线显示原价</div></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">库存数量</label>
+          <div class="pd-ctrl"><div class="pd-inline"><input class="g-input" type="number" min="0" value="86" /><span class="pd-unit">份</span></div></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">库存预警</label>
+          <div class="pd-ctrl"><div class="pd-inline"><input class="g-input" type="number" min="0" value="10" /><span class="pd-unit">份</span></div><div class="g-hint">库存低于此值时提醒补货</div></div>
+        </div>
+        <div class="pd-row">
+          <label class="pd-label">打包费</label>
+          <div class="pd-ctrl"><div class="pd-inline"><span class="pd-unit">&yen;</span><input class="g-input" type="number" min="0" step="0.1" value="1.0" /><span class="pd-unit">/份</span></div><div class="g-hint">商品打包费优先；未设置时使用门店统一打包费</div></div>
+        </div>
+      </div>
+
+      <!-- 规格做法 -->
+      <div class="g-card" id="pd-sec-specs">
+        <div class="g-card-title">规格做法</div>
+        <div class="pd-row">
+          <label class="pd-label">关联规格</label>
+          <div class="pd-ctrl">
+            <div class="pd-pills">
+              <span class="g-pill" onclick="this.classList.toggle('checked')">杯型</span>
+              <span class="g-pill" onclick="this.classList.toggle('checked')">温度</span>
+              <span class="g-pill checked" onclick="this.classList.toggle('checked')">份量</span>
+              <span class="g-pill checked" onclick="this.classList.toggle('checked')">辣度</span>
+              <span class="g-pill" onclick="this.classList.toggle('checked')">甜度</span>
+              <span class="g-pill" onclick="this.classList.toggle('checked')">烹饪方式</span>
+            </div>
+            <div class="g-hint">选中后顾客下单时可选择对应规格，前往「规格做法」页面管理具体选项</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加料管理 -->
+
+      <!-- SKU管理 -->
+      <div class="g-card" id="pd-sec-sku">
+        <div class="pd-sku-hd">
+          <div class="pd-sku-hd-left">
+            <div class="g-card-title">SKU管理</div>
+            <span class="pd-sku-count">共 8 个SKU</span>
+          </div>
+          <div class="pd-sku-hint">基于已选规格自动生成组合，可独立设置价格和库存</div>
+        </div>
+        <div class="pd-sku-batch">
+          <label>批量设价</label>
+          <span style="color:#9ca3af;font-size:12px">&yen;</span>
+          <input type="number" placeholder="统一售价" />
+          <button class="g-btn g-btn-sm" onclick="batchSkuPrice()">应用</button>
+          <span style="width:16px"></span>
+          <label>批量设库存</label>
+          <input type="number" placeholder="统一库存" />
+          <button class="g-btn g-btn-sm" onclick="batchSkuStock()">应用</button>
+        </div>
+        <table class="pd-sku-table">
+          <thead>
+            <tr>
+              <th>份量</th>
+              <th>辣度</th>
+              <th>SKU编码</th>
+              <th>售价 (&yen;)</th>
+              <th>划线价 (&yen;)</th>
+              <th>库存</th>
+              <th>状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><span class="pd-sku-spec s1">整份</span></td>
+              <td><span class="pd-sku-spec s2">不辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-01</span></td>
+              <td><input type="number" value="32" min="0" step="0.01" /></td>
+              <td><input type="number" value="38" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="50" min="0" />
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle on" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+            <tr>
+              <td><span class="pd-sku-spec s1">整份</span></td>
+              <td><span class="pd-sku-spec s2">微辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-02</span></td>
+              <td><input type="number" value="32" min="0" step="0.01" /></td>
+              <td><input type="number" value="38" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="30" min="0" />
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle on" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+            <tr>
+              <td><span class="pd-sku-spec s1">整份</span></td>
+              <td><span class="pd-sku-spec s2">中辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-03</span></td>
+              <td><input type="number" value="32" min="0" step="0.01" /></td>
+              <td><input type="number" value="38" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="20" min="0" />
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle on" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+            <tr>
+              <td><span class="pd-sku-spec s1">整份</span></td>
+              <td><span class="pd-sku-spec s2">特辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-04</span></td>
+              <td><input type="number" value="32" min="0" step="0.01" /></td>
+              <td><input type="number" value="38" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="8" min="0" />
+                <div class="pd-sku-stock-warn"><i data-lucide="alert-triangle" style="width:11px;height:11px"></i>库存偏低</div>
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle on" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+            <tr>
+              <td><span class="pd-sku-spec s1">半份</span></td>
+              <td><span class="pd-sku-spec s2">不辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-05</span></td>
+              <td><input type="number" value="18" min="0" step="0.01" /></td>
+              <td><input type="number" value="22" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="40" min="0" />
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle on" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+            <tr>
+              <td><span class="pd-sku-spec s1">半份</span></td>
+              <td><span class="pd-sku-spec s2">微辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-06</span></td>
+              <td><input type="number" value="18" min="0" step="0.01" /></td>
+              <td><input type="number" value="22" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="25" min="0" />
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle on" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+            <tr>
+              <td><span class="pd-sku-spec s1">半份</span></td>
+              <td><span class="pd-sku-spec s2">中辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-07</span></td>
+              <td><input type="number" value="18" min="0" step="0.01" /></td>
+              <td><input type="number" value="22" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="15" min="0" />
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle on" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+            <tr>
+              <td><span class="pd-sku-spec s1">半份</span></td>
+              <td><span class="pd-sku-spec s2">特辣</span></td>
+              <td><span class="pd-sku-code">SKU20240001-08</span></td>
+              <td><input type="number" value="18" min="0" step="0.01" /></td>
+              <td><input type="number" value="22" min="0" step="0.01" /></td>
+              <td>
+                <input type="number" value="0" min="0" />
+                <div class="pd-sku-stock-warn"><i data-lucide="alert-triangle" style="width:11px;height:11px"></i>已售罄</div>
+              </td>
+              <td class="pd-sku-toggle"><button class="g-toggle" onclick="toggleSwitch(this)"></button></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 加料管理 -->
+      <div class="g-card" id="pd-sec-addons">
+        <div class="g-card-title">加料管理</div>
+        <div class="pd-row">
+          <label class="pd-label">关联加料</label>
+          <div class="pd-ctrl">
+            <div class="pd-pills">
+              <span class="g-pill checked" onclick="this.classList.toggle('checked')">加料</span>
+              <span class="g-pill" onclick="this.classList.toggle('checked')">配菜</span>
+              <span class="g-pill" onclick="this.classList.toggle('checked')">主食升级</span>
+              <span class="g-pill" onclick="this.classList.toggle('checked')">锅底</span>
+            </div>
+            <div class="g-hint">前往「加料管理」页面管理具体加料项和价格</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 商品标签 -->
+      <div class="g-card" id="pd-sec-tags">
+        <div class="g-card-title">商品标签</div>
+        <div style="display:flex;flex-wrap:wrap">
+          <span class="pd-tag-sel selected" onclick="this.classList.toggle('selected')">招牌</span>
+          <span class="pd-tag-sel" onclick="this.classList.toggle('selected')">必点</span>
+          <span class="pd-tag-sel" onclick="this.classList.toggle('selected')">新品</span>
+          <span class="pd-tag-sel" onclick="this.classList.toggle('selected')">限时</span>
+          <span class="pd-tag-sel" onclick="this.classList.toggle('selected')">辣</span>
+          <span class="pd-tag-sel" onclick="this.classList.toggle('selected')">素食</span>
+          <span class="pd-tag-sel" onclick="this.classList.toggle('selected')">低卡</span>
+          <span class="pd-tag-sel" onclick="this.classList.toggle('selected')">人气</span>
+        </div>
+      </div>
+
+      <!-- 上架设置 -->
+      <div class="g-card" id="pd-sec-shelf">
+        <div class="g-card-title">上架设置</div>
+        <div class="pd-shelf-group">
+          <div class="pd-shelf-opt" onclick="selectPdShelf(this)">
+            <input type="radio" name="pdShelf" value="draft" />
+            <div class="pd-shelf-opt-body">
+              <div class="pd-shelf-opt-title">暂不上架（草稿）</div>
+              <div class="pd-shelf-opt-desc">保存修改但不同步到顾客端</div>
+            </div>
+          </div>
+          <div class="pd-shelf-opt active" onclick="selectPdShelf(this)">
+            <input type="radio" name="pdShelf" value="now" checked />
+            <div class="pd-shelf-opt-body">
+              <div class="pd-shelf-opt-title">立即上架</div>
+              <div class="pd-shelf-opt-desc">保存后顾客可见</div>
+            </div>
+          </div>
+          <div class="pd-shelf-opt" onclick="selectPdShelf(this)">
+            <input type="radio" name="pdShelf" value="scheduled" />
+            <div class="pd-shelf-opt-body">
+              <div class="pd-shelf-opt-title">定时上架</div>
+              <div class="pd-shelf-opt-desc">到达指定时间后自动上架</div>
+              <div class="pd-shelf-time show-active" style="gap:8px;align-items:center">
+                <span style="font-size:12px;color:#666">上架时间</span>
+                <input class="g-input" type="datetime-local" style="width:auto;flex:1" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sticky save bar -->
+      <div class="pd-savebar">
+        <button class="g-btn" onclick="navigateTo('商品列表')">取消</button>
+        <button class="g-btn g-btn-primary">保存</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<script>
+/* Anchor nav scroll */
+function scrollToPdSec(el){
+  var id=el.dataset.target;
+  var sec=document.getElementById(id);
+  if(sec) sec.scrollIntoView({behavior:'smooth',block:'start'});
+  document.querySelectorAll('.pd-nav-item').forEach(function(n){n.classList.remove('active')});
+  el.classList.add('active');
+}
+
+/* Scroll spy */
+(function(){
+  var content=document.getElementById('pdContent');
+  var nav=document.getElementById('pdNav');
+  if(!content||!nav) return;
+  var secs=content.querySelectorAll('.g-card[id]');
+  var items=nav.querySelectorAll('.pd-nav-item');
+  var area=document.getElementById('contentArea');
+  if(!area) return;
+  area.addEventListener('scroll',function(){
+    var top=area.scrollTop+60;
+    var current='';
+    secs.forEach(function(s){
+      if(s.offsetTop<=top) current=s.id;
+    });
+    items.forEach(function(it){
+      it.classList.toggle('active',it.dataset.target===current);
+    });
+  });
+})();
+
+/* Shelf mode */
+function selectPdShelf(el){
+  var group=el.parentElement;
+  group.querySelectorAll('.pd-shelf-opt').forEach(function(r){r.classList.remove('active');r.querySelector('input').checked=false});
+  el.classList.add('active');
+  el.querySelector('input').checked=true;
+}
+
+/* Prefill from navigateTo options */
+(function(){
+  var opts=window._pageOptions||{};
+  if(opts.name){
+    var el=document.getElementById('pdName');
+    if(el) el.textContent=opts.name;
+  }
+})();
+
+function toggleSwitch(el){el.classList.toggle('on')}
+function batchSkuPrice(){
+  var v=document.querySelector('.pd-sku-batch input[placeholder="统一售价"]').value;
+  if(!v)return;
+  document.querySelectorAll('.pd-sku-table tbody td:nth-child(4) input').forEach(function(inp){inp.value=v});
+}
+function batchSkuStock(){
+  var v=document.querySelector('.pd-sku-batch input[placeholder="统一库存"]').value;
+  if(!v)return;
+  document.querySelectorAll('.pd-sku-table tbody td:nth-child(6) input').forEach(function(inp){inp.value=v});
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-labels.html b/TakeoutSaaS.Prototypes/pages/product-labels.html
new file mode 100644
index 0000000..55867a3
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-labels.html
@@ -0,0 +1,247 @@
+<!-- 商品标签页 -->
+<style>
+  .plbl-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .plbl-search { position:relative; }
+  .plbl-search input { height:34px; padding:0 10px 0 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; width:200px; transition:var(--g-transition); }
+  .plbl-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .plbl-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#bbb; pointer-events:none; }
+  .plbl-stats { display:flex; gap:24px; margin-bottom:16px; padding:10px 16px; background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); font-size:13px; color:#4b5563; }
+  .plbl-stats span { display:flex; align-items:center; gap:6px; }
+  .plbl-stats strong { color:#1a1a2e; font-weight:600; }
+  .plbl-card { background:#fff; border-radius:10px; border:none; box-shadow:var(--g-shadow-sm); padding:20px; }
+  .plbl-table { width:100%; border-collapse:collapse; font-size:13px; }
+  .plbl-table th { background:#f8f9fb; padding:10px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #f3f4f6; white-space:nowrap; }
+  .plbl-table td { padding:12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; vertical-align:middle; }
+  .plbl-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .plbl-table tr:last-child td { border-bottom:none; }
+  .plbl-table tr.disabled td { opacity:0.5; }
+  .plbl-pill { display:inline-block; padding:2px 10px; border-radius:6px; font-size:12px; font-weight:600; color:#fff; line-height:20px; }
+  .plbl-color-dot { width:14px; height:14px; border-radius:50%; display:inline-block; vertical-align:middle; }
+  .plbl-status { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; }
+  .plbl-status-dot { width:6px; height:6px; border-radius:50%; }
+  .plbl-status-on .plbl-status-dot { background:#22c55e; }
+  .plbl-status-on { color:#22c55e; }
+  .plbl-status-off .plbl-status-dot { background:#9ca3af; }
+  .plbl-status-off { color:#9ca3af; }
+  .plbl-color-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
+  .plbl-color-swatch { width:100%; aspect-ratio:1; border-radius:10px; cursor:pointer; border:2px solid transparent; display:flex; align-items:center; justify-content:center; transition:var(--g-transition); position:relative; }
+  .plbl-color-swatch:hover { box-shadow:0 0 0 3px rgba(0,0,0,0.1); }
+  .plbl-color-swatch.selected { border-color:#1a1a2e; box-shadow:0 0 0 2px rgba(0,0,0,0.1); }
+  .plbl-color-swatch .plbl-check { display:none; color:#fff; }
+  .plbl-color-swatch.selected .plbl-check { display:block; }
+  .plbl-preview-area { padding:16px; background:#f8f9fb; border-radius:10px; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; min-height:40px; }
+</style>
+
+<div class="plbl-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <div class="plbl-search">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input type="text" placeholder="搜索标签名称…" oninput="searchLabels(this.value)" />
+  </div>
+  <div style="flex:1;"></div>
+  <button class="g-btn g-btn-primary" onclick="openLabelDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加标签</button>
+</div>
+
+<div class="plbl-stats">
+  <span>标签总数 <strong>8</strong></span>
+  <span>启用 <strong>7</strong></span>
+  <span>关联商品 <strong>51</strong></span>
+</div>
+
+<div class="plbl-card">
+  <table class="plbl-table">
+    <thead>
+      <tr>
+        <th>标签预览</th>
+        <th>标签名称</th>
+        <th>颜色</th>
+        <th>已关联商品</th>
+        <th>状态</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr data-name="新品">
+        <td><span class="plbl-pill" style="background:#1890ff">新品</span></td>
+        <td>新品</td>
+        <td><span class="plbl-color-dot" style="background:#1890ff"></span> #1890ff</td>
+        <td>5个商品</td>
+        <td><span class="plbl-status plbl-status-on"><span class="plbl-status-dot"></span>启用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','新品','#1890ff')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+      <tr data-name="招牌">
+        <td><span class="plbl-pill" style="background:#ff4d4f">招牌</span></td>
+        <td>招牌</td>
+        <td><span class="plbl-color-dot" style="background:#ff4d4f"></span> #ff4d4f</td>
+        <td>12个商品</td>
+        <td><span class="plbl-status plbl-status-on"><span class="plbl-status-dot"></span>启用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','招牌','#ff4d4f')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+      <tr data-name="必点">
+        <td><span class="plbl-pill" style="background:#fa8c16">必点</span></td>
+        <td>必点</td>
+        <td><span class="plbl-color-dot" style="background:#fa8c16"></span> #fa8c16</td>
+        <td>8个商品</td>
+        <td><span class="plbl-status plbl-status-on"><span class="plbl-status-dot"></span>启用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','必点','#fa8c16')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+      <tr data-name="辣">
+        <td><span class="plbl-pill" style="background:#f5222d">辣</span></td>
+        <td>辣</td>
+        <td><span class="plbl-color-dot" style="background:#f5222d"></span> #f5222d</td>
+        <td>15个商品</td>
+        <td><span class="plbl-status plbl-status-on"><span class="plbl-status-dot"></span>启用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','辣','#f5222d')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+      <tr data-name="素食">
+        <td><span class="plbl-pill" style="background:#52c41a">素食</span></td>
+        <td>素食</td>
+        <td><span class="plbl-color-dot" style="background:#52c41a"></span> #52c41a</td>
+        <td>6个商品</td>
+        <td><span class="plbl-status plbl-status-on"><span class="plbl-status-dot"></span>启用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','素食','#52c41a')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+      <tr data-name="限时">
+        <td><span class="plbl-pill" style="background:#722ed1">限时</span></td>
+        <td>限时</td>
+        <td><span class="plbl-color-dot" style="background:#722ed1"></span> #722ed1</td>
+        <td>3个商品</td>
+        <td><span class="plbl-status plbl-status-on"><span class="plbl-status-dot"></span>启用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','限时','#722ed1')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+      <tr data-name="买一送一">
+        <td><span class="plbl-pill" style="background:#eb2f96">买一送一</span></td>
+        <td>买一送一</td>
+        <td><span class="plbl-color-dot" style="background:#eb2f96"></span> #eb2f96</td>
+        <td>2个商品</td>
+        <td><span class="plbl-status plbl-status-on"><span class="plbl-status-dot"></span>启用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','买一送一','#eb2f96')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+      <tr data-name="已下架" class="disabled">
+        <td><span class="plbl-pill" style="background:#999">已下架</span></td>
+        <td>已下架</td>
+        <td><span class="plbl-color-dot" style="background:#999"></span> #999999</td>
+        <td>0个商品</td>
+        <td><span class="plbl-status plbl-status-off"><span class="plbl-status-dot"></span>停用</span></td>
+        <td><span class="g-action" onclick="openLabelDrawer('edit','已下架','#999')">编辑</span><span class="g-action g-action-danger">删除</span></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- 添加/编辑标签抽屉 -->
+<div class="g-drawer-mask" id="plblDrawerMask" onclick="closeLabelDrawer()"></div>
+<div class="g-drawer" id="plblDrawer" style="width:460px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="plblDrawerTitle">添加标签</span>
+    <button class="g-drawer-close" onclick="closeLabelDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">标签名称</label>
+      <input class="g-input" id="plblName" placeholder="请输入标签名称，如：新品、招牌" oninput="updateLabelPreview()">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">标签颜色</label>
+      <div class="plbl-color-grid" id="plblColorGrid">
+        <div class="plbl-color-swatch selected" style="background:#1890ff" onclick="pickLabelColor(this)" data-color="#1890ff"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+        <div class="plbl-color-swatch" style="background:#ff4d4f" onclick="pickLabelColor(this)" data-color="#ff4d4f"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+        <div class="plbl-color-swatch" style="background:#fa8c16" onclick="pickLabelColor(this)" data-color="#fa8c16"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+        <div class="plbl-color-swatch" style="background:#52c41a" onclick="pickLabelColor(this)" data-color="#52c41a"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+        <div class="plbl-color-swatch" style="background:#722ed1" onclick="pickLabelColor(this)" data-color="#722ed1"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+        <div class="plbl-color-swatch" style="background:#eb2f96" onclick="pickLabelColor(this)" data-color="#eb2f96"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+        <div class="plbl-color-swatch" style="background:#13c2c2" onclick="pickLabelColor(this)" data-color="#13c2c2"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+        <div class="plbl-color-swatch" style="background:#999" onclick="pickLabelColor(this)" data-color="#999"><span class="plbl-check"><i data-lucide="check" style="width:18px;height:18px;"></i></span></div>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">预览</label>
+      <div class="plbl-preview-area">
+        <span class="plbl-pill" id="plblPreviewPill" style="background:#1890ff">标签名称</span>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">排序</label>
+      <input class="g-input" id="plblSort" type="number" placeholder="数字越小越靠前，如：0" value="0" min="0">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">启用状态</label>
+      <div style="display:flex;align-items:center;gap:10px;">
+        <button class="g-toggle on" id="plblToggle" onclick="toggleSwitch(this)"></button>
+        <span class="g-toggle-label">启用</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeLabelDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeLabelDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+var _plblColor = '#1890ff';
+
+function openLabelDrawer(mode, name, color) {
+  document.getElementById('plblDrawerMask').classList.add('open');
+  document.getElementById('plblDrawer').classList.add('open');
+  if (mode === 'edit') {
+    document.getElementById('plblDrawerTitle').textContent = '编辑标签';
+    document.getElementById('plblName').value = name || '';
+    if (color) {
+      _plblColor = color;
+      document.querySelectorAll('.plbl-color-swatch').forEach(function(s) {
+        s.classList.toggle('selected', s.getAttribute('data-color') === color);
+      });
+    }
+  } else {
+    document.getElementById('plblDrawerTitle').textContent = '添加标签';
+    document.getElementById('plblName').value = '';
+    _plblColor = '#1890ff';
+    document.querySelectorAll('.plbl-color-swatch').forEach(function(s, i) {
+      s.classList.toggle('selected', i === 0);
+    });
+    document.getElementById('plblSort').value = '0';
+    var tog = document.getElementById('plblToggle');
+    if (!tog.classList.contains('on')) tog.classList.add('on');
+  }
+  updateLabelPreview();
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function closeLabelDrawer() {
+  document.getElementById('plblDrawerMask').classList.remove('open');
+  document.getElementById('plblDrawer').classList.remove('open');
+}
+
+function pickLabelColor(el) {
+  document.querySelectorAll('.plbl-color-swatch').forEach(function(s) { s.classList.remove('selected'); });
+  el.classList.add('selected');
+  _plblColor = el.getAttribute('data-color');
+  updateLabelPreview();
+}
+
+function updateLabelPreview() {
+  var name = document.getElementById('plblName').value || '标签名称';
+  var pill = document.getElementById('plblPreviewPill');
+  pill.textContent = name;
+  pill.style.background = _plblColor;
+}
+
+function searchLabels(keyword) {
+  var kw = keyword.trim().toLowerCase();
+  document.querySelectorAll('.plbl-table tbody tr').forEach(function(row) {
+    var name = (row.getAttribute('data-name') || '').toLowerCase();
+    row.style.display = (!kw || name.includes(kw)) ? '' : 'none';
+  });
+}
+
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-list.html b/TakeoutSaaS.Prototypes/pages/product-list.html
new file mode 100644
index 0000000..08e2cd1
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-list.html
@@ -0,0 +1,1407 @@
+<!-- 商品列表页 -->
+<style>
+.pl-page {
+  display: flex;
+  gap: 18px;
+  font-size: 13px;
+  color: #1a1a2e;
+}
+
+/* ===== Sidebar ===== */
+.pl-sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--g-shadow-md);
+  padding: 12px 0;
+  align-self: flex-start;
+  position: sticky;
+  top: 0;
+}
+.pl-sidebar-title {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 4px 16px 12px;
+  border-bottom: 1px solid #f3f4f6;
+  margin-bottom: 4px;
+  color: #1a1a2e;
+}
+.pl-cat-item {
+  display: flex;
+  align-items: center;
+  padding: 9px 16px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all var(--g-transition);
+  border-left: 3px solid transparent;
+  user-select: none;
+  color: #4b5563;
+}
+.pl-cat-item:hover {
+  background: #f8f9fa;
+}
+.pl-cat-item.active {
+  background: color-mix(in srgb, var(--primary) 6%, #fff);
+  border-left-color: var(--primary);
+  color: var(--primary);
+  font-weight: 600;
+}
+.pl-cat-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-cat-badge {
+  background: #f0f2f5;
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+.pl-cat-item.active .pl-cat-badge {
+  background: color-mix(in srgb, var(--primary) 18%, transparent);
+  color: var(--primary);
+}
+
+/* ===== Content area ===== */
+.pl-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ===== Topbar ===== */
+.pl-topbar {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--g-shadow-sm);
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+.pl-select {
+  height: 34px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  padding: 0 10px;
+  font-size: 13px;
+  outline: none;
+  min-width: 140px;
+  cursor: pointer;
+  transition: all var(--g-transition);
+  color: #4b5563;
+}
+.pl-select:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
+}
+.pl-search {
+  height: 34px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  padding: 0 10px;
+  font-size: 13px;
+  outline: none;
+  width: 180px;
+  transition: all var(--g-transition);
+  color: #1a1a2e;
+}
+.pl-search:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
+}
+.pl-spacer {
+  flex: 1;
+}
+.pl-view-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #9ca3af;
+  transition: all var(--g-transition);
+}
+.pl-view-btn:hover,
+.pl-view-btn.active {
+  border-color: var(--primary);
+  color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 6%, #fff);
+}
+
+/* ===== Action bar ===== */
+.pl-actionbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+.pl-btn {
+  height: 34px;
+  border-radius: 8px;
+  font-size: 13px;
+  padding: 0 16px;
+  cursor: pointer;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: all var(--g-transition);
+  color: #4b5563;
+}
+.pl-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.pl-btn-primary {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+.pl-btn-primary:hover {
+  opacity: .85;
+  color: #fff;
+}
+
+/* ===== Card view ===== */
+.pl-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.pl-card {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--g-shadow-sm);
+  overflow: hidden;
+  position: relative;
+  transition: transform var(--g-transition), box-shadow var(--g-transition);
+}
+.pl-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--g-shadow-md);
+}
+.pl-card-soldout {
+  opacity: .55;
+}
+.pl-card-offshelf {
+  opacity: .7;
+}
+.pl-card-status {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  font-size: 11px;
+  color: #fff;
+  padding: 2px 10px 2px 8px;
+  border-radius: 6px 0 0 6px;
+  z-index: 2;
+  font-weight: 600;
+}
+.pl-card-cover {
+  height: 170px;
+  background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pl-card-body {
+  padding: 12px 14px 8px;
+}
+.pl-card-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-card-sub {
+  font-size: 12px;
+  color: #9ca3af;
+  margin-bottom: 4px;
+}
+.pl-card-spu {
+  font-size: 11px;
+  color: #bbb;
+  margin-bottom: 6px;
+  font-family: monospace;
+}
+.pl-card-price {
+  margin-bottom: 6px;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+.pl-price-now {
+  font-size: 16px;
+  font-weight: 800;
+  color: #e8372a;
+}
+.pl-price-orig {
+  font-size: 12px;
+  color: #bbb;
+  text-decoration: line-through;
+}
+.pl-price-old {
+  font-size: 12px;
+  color: #bbb;
+  text-decoration: line-through;
+}
+.pl-type-tag {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  background: color-mix(in srgb, #fa8c16 12%, transparent);
+  color: #fa8c16;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+.pl-type-pill {
+  padding: 6px 20px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  color: #4b5563;
+  transition: var(--g-transition);
+  user-select: none;
+}
+.pl-type-pill:hover { border-color: var(--primary); color: var(--primary); }
+.pl-type-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
+.pl-combo-group { background: #f8f9fb; border-radius: 8px; padding: 14px; margin-bottom: 10px; border: 1px solid #e5e7eb; }
+.pl-combo-group-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.pl-combo-group-del { background: none; border: none; color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; transition: var(--g-transition); }
+.pl-combo-group-del:hover { color: #ef4444; background: #fef2f2; }
+.pl-combo-group-items { margin-bottom: 8px; }
+.pl-combo-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: #4b5563; }
+.pl-combo-item span:first-child { flex: 1; }
+.pl-combo-qty { color: #9ca3af; width: 40px; text-align: center; }
+.pl-combo-item-del { background: none; border: none; color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; transition: var(--g-transition); }
+.pl-combo-item-del:hover { color: #ef4444; background: #fef2f2; }
+.pl-combo-add-prod { color: var(--primary); font-size: 12px; cursor: pointer; background: none; border: none; padding: 0; display: flex; align-items: center; gap: 4px; transition: var(--g-transition); }
+.pl-combo-add-prod:hover { text-decoration: underline; }
+.pl-combo-add-group { width: 100%; height: 36px; border: 1px dashed #e5e7eb; border-radius: 8px; background: #fff; color: #9ca3af; font-size: 13px; cursor: pointer; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; transition: var(--g-transition); }
+.pl-combo-add-group:hover { border-color: var(--primary); color: var(--primary); }
+  text-decoration: line-through;
+}
+.pl-card-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.pl-tag-pill {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.6;
+}
+.pl-card-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #9ca3af;
+  margin-bottom: 4px;
+}
+.pl-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  background: #fafbfc;
+  border-top: 1px solid #f3f4f6;
+}
+.pl-card-action {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--primary);
+  cursor: pointer;
+  text-decoration: none;
+  transition: all var(--g-transition);
+}
+.pl-card-action:hover {
+  text-decoration: underline;
+}
+.pl-card-action-danger {
+  color: #ef4444;
+}
+.pl-more-wrap { position:relative; display:inline-block; }
+.pl-more-menu { display:none; position:absolute; right:0; top:100%; background:#fff; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,0.12); padding:4px; min-width:80px; z-index:10; }
+.pl-more-menu.show { display:block; }
+.pl-more-item { padding:6px 12px; font-size:13px; cursor:pointer; border-radius:4px; color:#666; white-space:nowrap; transition:background var(--g-transition); }
+.pl-more-item:hover { background:#f5f5f5; }
+.pl-soldout-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, .45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: 700;
+  color: #e8372a;
+  letter-spacing: 4px;
+  z-index: 1;
+  pointer-events: none;
+}
+/* card view: hide checkbox & list-only elements */
+.pl-cb {
+  display: none;
+}
+.pl-lv-cat,
+.pl-lv-stock,
+.pl-lv-sales,
+.pl-lv-status {
+  display: none;
+}
+
+/* ===== List view (grid-based alignment) ===== */
+.pl-list-cols {
+  grid-template-columns: 44px 60px minmax(120px, 1fr) 68px 88px 72px 64px minmax(90px, 1.2fr) 56px 150px;
+}
+.pl-grid.pl-list-view {
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+.pl-grid.pl-list-view .pl-card {
+  display: grid;
+  border-radius: 0;
+  box-shadow: none;
+  grid-template-columns: 44px 60px minmax(120px, 1fr) 68px 88px 72px 64px minmax(90px, 1.2fr) 56px 150px;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  border-left: 1px solid #f0f0f0;
+  border-right: 1px solid #f0f0f0;
+  border-top: none;
+  padding: 8px 0;
+  transition: background var(--g-transition), border-left-color var(--g-transition);
+}
+.pl-grid.pl-list-view .pl-card:first-child {
+  border-top: 1px solid #f0f0f0;
+  border-radius: 0;
+}
+.pl-grid.pl-list-view .pl-card:last-child {
+  border-radius: 0 0 8px 8px;
+}
+.pl-grid.pl-list-view .pl-card:hover {
+  box-shadow: none;
+  transform: none;
+  background: color-mix(in srgb, var(--primary) 3%, #fff);
+  border-left: 3px solid var(--primary);
+}
+.pl-grid.pl-list-view .pl-card-soldout,
+.pl-grid.pl-list-view .pl-card-offshelf {
+  opacity: 1;
+}
+.pl-grid.pl-list-view .pl-soldout-mask {
+  display: none;
+}
+
+/* hide absolute status badge in list view */
+.pl-grid.pl-list-view .pl-card-status {
+  display: none;
+}
+
+/* checkbox */
+.pl-grid.pl-list-view .pl-cb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--primary);
+  cursor: pointer;
+  margin: 0 auto;
+}
+
+/* image */
+.pl-grid.pl-list-view .pl-card-cover {
+  width: 48px;
+  height: 48px;
+  min-height: auto;
+  border-radius: 8px;
+  margin: 0 auto;
+  background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%);
+}
+.pl-grid.pl-list-view .pl-card-cover svg {
+  width: 22px;
+  height: 22px;
+}
+
+/* body: flatten into parent grid */
+.pl-grid.pl-list-view .pl-card-body {
+  display: contents;
+}
+.pl-grid.pl-list-view .pl-card-body .pl-lv-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 0 8px;
+  overflow: hidden;
+}
+.pl-grid.pl-list-view .pl-card-name {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 0;
+}
+.pl-grid.pl-list-view .pl-card-sub {
+  margin-bottom: 0;
+  font-size: 12px;
+}
+.pl-grid.pl-list-view .pl-card-spu {
+  margin-bottom: 0;
+}
+.pl-grid.pl-list-view .pl-card-price {
+  margin-bottom: 0;
+  padding: 0 6px;
+}
+.pl-grid.pl-list-view .pl-price-now {
+  font-size: 13px;
+  font-weight: 700;
+}
+.pl-grid.pl-list-view .pl-card-pills {
+  margin-bottom: 0;
+  padding: 0 4px;
+}
+
+/* show list-only columns */
+.pl-grid.pl-list-view .pl-lv-cat {
+  display: block;
+  font-size: 12px;
+  color: #4b5563;
+  padding: 0 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-grid.pl-list-view .pl-lv-stock {
+  display: block;
+  font-size: 12px;
+  padding: 0 6px;
+}
+.pl-grid.pl-list-view .pl-lv-sales {
+  display: block;
+  font-size: 12px;
+  color: #4b5563;
+  padding: 0 6px;
+}
+.pl-grid.pl-list-view .pl-lv-status {
+  display: flex;
+  padding: 0 4px;
+}
+
+.pl-stock-ok {
+  color: #22c55e;
+}
+.pl-stock-low {
+  color: #f59e0b;
+}
+.pl-stock-out {
+  color: #ef4444;
+}
+.pl-status-tag {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+}
+
+/* footer: single cell */
+.pl-grid.pl-list-view .pl-card-footer {
+  border-top: none;
+  background: transparent;
+  padding: 0 8px;
+  gap: 8px;
+  justify-content: flex-start;
+}
+
+/* ===== List header ===== */
+.pl-list-header {
+  display: none;
+  grid-template-columns: 44px 60px minmax(120px, 1fr) 68px 88px 72px 64px minmax(90px, 1.2fr) 56px 150px;
+  align-items: center;
+  background: #f8f9fb;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px 8px 0 0;
+  padding: 9px 0;
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 600;
+}
+.pl-list-header.show {
+  display: grid;
+}
+.pl-lh-cell {
+  padding: 0 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-lh-cb {
+  display: flex;
+  justify-content: center;
+}
+
+/* ===== Pagination ===== */
+.pl-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 18px;
+  font-size: 13px;
+  color: #4b5563;
+}
+.pl-page-btn {
+  min-width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--g-transition);
+  color: #4b5563;
+}
+.pl-page-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 5%, #fff);
+}
+.pl-page-btn.active {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
+}
+.pl-page-btn:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+</style>
+
+<div class="pl-page">
+<div class="pl-sidebar">
+<div class="pl-sidebar-title">商品分类</div>
+<div class="pl-cat-item active" onclick="selectPlCategory(this)"><span class="pl-cat-name">全部商品</span><span class="pl-cat-badge">58</span></div>
+<div class="pl-cat-item" onclick="selectPlCategory(this)"><span class="pl-cat-name">热销推荐</span><span class="pl-cat-badge">12</span></div>
+<div class="pl-cat-item" onclick="selectPlCategory(this)"><span class="pl-cat-name">主食</span><span class="pl-cat-badge">8</span></div>
+<div class="pl-cat-item" onclick="selectPlCategory(this)"><span class="pl-cat-name">小吃凉菜</span><span class="pl-cat-badge">15</span></div>
+<div class="pl-cat-item" onclick="selectPlCategory(this)"><span class="pl-cat-name">汤羹粥品</span><span class="pl-cat-badge">6</span></div>
+<div class="pl-cat-item" onclick="selectPlCategory(this)"><span class="pl-cat-name">饮品</span><span class="pl-cat-badge">10</span></div>
+<div class="pl-cat-item" onclick="selectPlCategory(this)"><span class="pl-cat-name">酒水</span><span class="pl-cat-badge">4</span></div>
+<div class="pl-cat-item" onclick="selectPlCategory(this)"><span class="pl-cat-name">套餐</span><span class="pl-cat-badge">3</span></div>
+</div>
+<div class="pl-content">
+<div class="pl-topbar">
+<select class="pl-select"><option>全部门店</option><option>朝阳大悦城店</option><option>国贸CBD店</option><option>望京SOHO店</option><option>中关村店</option><option>西单大悦城店</option></select>
+<input class="pl-search" placeholder="搜索商品名称/编码" />
+<select class="pl-select" style="min-width:90px"><option>全部状态</option><option>在售</option><option>下架</option><option>售罄</option></select>
+<select class="pl-select" style="min-width:90px"><option>全部类型</option><option>单品</option><option>套餐</option></select>
+<span class="pl-spacer"></span>
+<button class="pl-view-btn" onclick="togglePlView('card')" title="卡片视图"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg></button>
+<button class="pl-view-btn active" onclick="togglePlView('list')" title="列表视图"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><rect x="1" y="2" width="14" height="2.5" rx="1"/><rect x="1" y="6.75" width="14" height="2.5" rx="1"/><rect x="1" y="11.5" width="14" height="2.5" rx="1"/></svg></button>
+</div>
+<div class="pl-actionbar">
+<button class="pl-btn">批量操作 &#x25BE;</button>
+<button class="pl-btn pl-btn-primary">+ 添加商品</button>
+</div>
+<div class="pl-list-header show" id="plListHeader">
+<span class="pl-lh-cb"><input type="checkbox" style="width:16px;height:16px;accent-color:var(--primary)" onclick="togglePlAll(this)" /></span>
+<span class="pl-lh-cell">图片</span>
+<span class="pl-lh-cell">商品信息</span>
+<span class="pl-lh-cell">分类</span>
+<span class="pl-lh-cell">价格</span>
+<span class="pl-lh-cell">库存</span>
+<span class="pl-lh-cell">销量</span>
+<span class="pl-lh-cell">标签</span>
+<span class="pl-lh-cell">状态</span>
+<span class="pl-lh-cell">操作</span>
+</div>
+<div class="pl-grid pl-list-view" id="plGrid">
+<div class="pl-card">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">宫保鸡丁</div><div class="pl-card-sub">经典川菜，香辣可口</div><div class="pl-card-spu">SPU20240001</div></div>
+  <div class="pl-lv-cat">主食</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;32</span><span class="pl-price-orig">&yen;38</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-ok">86 充足</span></div>
+  <div class="pl-lv-sales">月销 156</div>
+  <div class="pl-card-pills"><span class="pl-tag-pill" style="background:color-mix(in srgb,#f5222d 12%,transparent);color:#f5222d">招牌</span></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">鱼香肉丝</div><div class="pl-card-sub">下饭神器</div><div class="pl-card-spu">SPU20240002</div></div>
+  <div class="pl-lv-cat">主食</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;28</span><span class="pl-price-orig">&yen;35</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-ok">72 充足</span></div>
+  <div class="pl-lv-sales">月销 132</div>
+  <div class="pl-card-pills"><span class="pl-tag-pill" style="background:color-mix(in srgb,#fa541c 12%,transparent);color:#fa541c">必点</span></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">麻婆豆腐</div><div class="pl-card-sub">麻辣鲜香</div><div class="pl-card-spu">SPU20240003</div></div>
+  <div class="pl-lv-cat">主食</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;22</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-ok">45 充足</span></div>
+  <div class="pl-lv-sales">月销 98</div>
+  <div class="pl-card-pills"><span class="pl-tag-pill" style="background:color-mix(in srgb,#f5222d 12%,transparent);color:#f5222d">辣</span></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">蛋炒饭</div><div class="pl-card-sub">粒粒分明</div><div class="pl-card-spu">SPU20240004</div></div>
+  <div class="pl-lv-cat">主食</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;15</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-ok">200 充足</span></div>
+  <div class="pl-lv-sales">月销 210</div>
+  <div class="pl-card-pills"></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card pl-card-offshelf">
+<div class="pl-card-status" style="background:#999">下架</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">酸辣汤</div><div class="pl-card-sub">开胃暖身</div><div class="pl-card-spu">SPU20240005</div></div>
+  <div class="pl-lv-cat">汤羹粥品</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;18</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-ok">30 充足</span></div>
+  <div class="pl-lv-sales">月销 76</div>
+  <div class="pl-card-pills"></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#999">下架</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">上架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">冰粉</div><div class="pl-card-sub">夏日特饮</div><div class="pl-card-spu">SPU20240006</div></div>
+  <div class="pl-lv-cat">饮品</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;8</span><span class="pl-price-orig">&yen;12</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-low">15 偏低</span></div>
+  <div class="pl-lv-sales">月销 45</div>
+  <div class="pl-card-pills"><span class="pl-tag-pill" style="background:color-mix(in srgb,#1890ff 12%,transparent);color:#1890ff">新品</span><span class="pl-tag-pill" style="background:color-mix(in srgb,#722ed1 12%,transparent);color:#722ed1">限时</span></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card pl-card-offshelf">
+<div class="pl-card-status" style="background:#999">下架</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">红烧排骨</div><div class="pl-card-sub">酱香浓郁</div><div class="pl-card-spu">SPU20240007</div></div>
+  <div class="pl-lv-cat">主食</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;42</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-low">8 偏低</span></div>
+  <div class="pl-lv-sales">月销 65</div>
+  <div class="pl-card-pills"><span class="pl-tag-pill" style="background:color-mix(in srgb,#f5222d 12%,transparent);color:#f5222d">招牌</span></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#999">下架</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">上架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">凉拌黄瓜</div><div class="pl-card-sub">清爽解腻</div><div class="pl-card-spu">SPU20240008</div></div>
+  <div class="pl-lv-cat">小吃凉菜</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;12</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-ok">60 充足</span></div>
+  <div class="pl-lv-sales">月销 88</div>
+  <div class="pl-card-pills"><span class="pl-tag-pill" style="background:color-mix(in srgb,#52c41a 12%,transparent);color:#52c41a">素食</span></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+<div class="pl-card pl-card-soldout">
+<div class="pl-card-status" style="background:#f5222d">售罄</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">啤酒</div><div class="pl-card-sub">青岛经典 330ml</div><div class="pl-card-spu">SPU20240009</div></div>
+  <div class="pl-lv-cat">酒水</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;8</span></div>
+  <div class="pl-lv-stock"><span class="pl-stock-out">0 缺货</span></div>
+  <div class="pl-lv-sales">月销 120</div>
+  <div class="pl-card-pills"></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#f5222d">售罄</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">上架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+<div class="pl-soldout-mask">售罄</div></div>
+
+<div class="pl-card" data-type="combo">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">双人超值套餐 <span class="pl-type-tag">套餐</span></div><div class="pl-card-sub">超值双人组合，荤素搭配</div><div class="pl-card-spu">SPU20240010</div></div>
+  <div class="pl-lv-cat">热销推荐</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;68</span><span class="pl-price-old">&yen;96</span></div>
+  <div class="pl-lv-stock">—</div>
+  <div class="pl-lv-sales">月销 45</div>
+  <div class="pl-card-pills"><span class="pl-tag-pill" style="background:color-mix(in srgb,#f5222d 12%,transparent);color:#f5222d">招牌</span></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub" onclick="navigateTo('商品详情',{name:'双人超值套餐'})">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+
+<div class="pl-card" data-type="combo">
+<div class="pl-card-status" style="background:#52c41a">在售</div>
+<input type="checkbox" class="pl-cb" />
+<div class="pl-card-cover"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/><path d="M3 6l4-3h10l4 3"/></svg></div>
+<div class="pl-card-body">
+  <div class="pl-lv-info"><div class="pl-card-name">单人工作餐 <span class="pl-type-tag">套餐</span></div><div class="pl-card-sub">简单快捷，工作日首选</div><div class="pl-card-spu">SPU20240011</div></div>
+  <div class="pl-lv-cat">主食</div>
+  <div class="pl-card-price"><span class="pl-price-now">&yen;35</span><span class="pl-price-old">&yen;45</span></div>
+  <div class="pl-lv-stock">—</div>
+  <div class="pl-lv-sales">月销 120</div>
+  <div class="pl-card-pills"></div>
+  <div class="pl-lv-status"><span class="pl-status-tag" style="background:#52c41a">在售</span></div>
+</div>
+<div class="pl-card-footer">
+  <a class="pl-card-action">编辑</a><a class="pl-card-action pl-card-action-sub" onclick="navigateTo('商品详情',{name:'单人工作餐'})">详情</a><a class="pl-card-action pl-card-action-danger">删除</a><span class="pl-more-wrap"><a class="pl-card-action" onclick="togglePlMore(event)">更多</a><div class="pl-more-menu"><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">下架</div><div class="pl-more-item" onclick="this.closest('.pl-more-menu').style.display='none'">估清</div></div></span>
+</div>
+</div>
+
+</div>
+<div class="pl-pagination">
+<span>共 60 条</span>
+<button class="pl-page-btn" disabled>&lt;</button>
+<button class="pl-page-btn active">1</button>
+<button class="pl-page-btn">2</button>
+<button class="pl-page-btn">3</button>
+<button class="pl-page-btn">4</button>
+<button class="pl-page-btn">...</button>
+<button class="pl-page-btn">7</button>
+<button class="pl-page-btn">&gt;</button>
+</div>
+</div>
+</div>
+<script>
+function selectPlCategory(el){
+  document.querySelectorAll('.pl-cat-item').forEach(function(e){e.classList.remove('active')});
+  el.classList.add('active');
+}
+function togglePlView(mode){
+  var grid=document.getElementById('plGrid');
+  var hdr=document.getElementById('plListHeader');
+  var btns=document.querySelectorAll('.pl-view-btn');
+  btns.forEach(function(b){b.classList.remove('active')});
+  if(mode==='list'){
+    grid.classList.add('pl-list-view');
+    hdr.classList.add('show');
+    btns[1].classList.add('active');
+  }else{
+    grid.classList.remove('pl-list-view');
+    hdr.classList.remove('show');
+    btns[0].classList.add('active');
+  }
+}
+function togglePlAll(el){
+  var checked=el.checked;
+  document.querySelectorAll('.pl-cb').forEach(function(c){c.checked=checked;});
+}
+</script>
+
+<style>
+/* ===== Page-specific styles only (generic drawer/btn/form/toggle now in global CSS) ===== */
+
+/* Upload area */
+.pl-upload-zone{border:2px dashed #d9d9d9;border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s;color:#999;font-size:13px}
+.pl-upload-zone:hover{border-color:var(--primary);color:var(--primary)}
+.pl-upload-zone svg{display:block;margin:0 auto 8px}
+.pl-upload-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
+.pl-upload-thumb{width:64px;height:64px;border-radius:6px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid #eee}
+.pl-upload-thumb-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#f5222d;color:#fff;font-size:12px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
+
+/* Tag pills (selectable) */
+.pl-tag-sel{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:11px;cursor:pointer;border:1px solid #eee;transition:all .15s;user-select:none;margin:0 6px 6px 0}
+.pl-tag-sel:hover{border-color:var(--primary)}
+.pl-tag-sel.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary)}
+
+/* Soldout form sections */
+.pl-form-section { margin-bottom: 18px; }
+.pl-form-section-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
+
+/* ===== Soldout drawer specific ===== */
+.pl-so-product{display:flex;gap:12px;align-items:center;padding:14px;background:#fafafa;border-radius:8px;margin-bottom:18px}
+.pl-so-product-img{width:56px;height:56px;border-radius:6px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.pl-so-product-info{flex:1}
+.pl-so-product-name{font-size:14px;font-weight:600;margin-bottom:2px}
+.pl-so-product-meta{font-size:12px;color:#999}
+.pl-so-radio-group{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
+.pl-so-radio{display:flex;align-items:flex-start;gap:8px;padding:12px;border:1px solid #eee;border-radius:8px;cursor:pointer;transition:all .15s}
+.pl-so-radio:hover{border-color:var(--primary)}
+.pl-so-radio.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent)}
+.pl-so-radio input[type=radio]{margin-top:2px;accent-color:var(--primary)}
+.pl-so-radio-content{flex:1}
+.pl-so-radio-title{font-size:13px;font-weight:500}
+.pl-so-radio-desc{font-size:12px;color:#999;margin-top:2px}
+.pl-so-time-row{margin-top:8px;display:none}
+.pl-so-radio.active .pl-so-time-row.show-when-active{display:flex}
+
+/* Section headers */
+.pl-section { margin-bottom: 20px; }
+.pl-section-hd {
+  font-size: 13px; font-weight: 600; color: #1a1a2e; margin-bottom: 12px;
+  padding-left: 10px; border-left: 3px solid var(--primary);
+}
+
+/* Mini upload */
+.pl-mini-upload {
+  height: 34px; border: 1.5px dashed #d9d9d9; border-radius: 8px;
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  cursor: pointer; color: #9ca3af; font-size: 12px;
+  transition: all var(--g-transition);
+}
+.pl-mini-upload:hover { border-color: var(--primary); color: var(--primary); }
+
+/* Price input with prefix */
+.pl-price-input-wrap {
+  position: relative; display: flex; align-items: center;
+}
+.pl-price-prefix {
+  position: absolute; left: 10px; font-size: 14px; font-weight: 700; color: #e8372a;
+  pointer-events: none; z-index: 1;
+}
+.pl-price-field { padding-left: 26px !important; }
+
+/* Channel toggles */
+.pl-ch-toggles { display: flex; flex-direction: column; gap: 12px; }
+
+/* Shelf options (radio-card style) */
+.pl-shelf-opts { display: flex; flex-direction: column; gap: 8px; }
+.pl-shelf-opt {
+  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
+  border: 1.5px solid #eee; border-radius: 10px; cursor: pointer;
+  transition: all var(--g-transition);
+}
+.pl-shelf-opt:hover { border-color: #ccc; }
+.pl-shelf-opt.active {
+  border-color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 4%, #fff);
+}
+.pl-shelf-opt-radio {
+  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d9d9d9;
+  flex-shrink: 0; position: relative; transition: all var(--g-transition);
+}
+.pl-shelf-opt.active .pl-shelf-opt-radio {
+  border-color: var(--primary);
+}
+.pl-shelf-opt.active .pl-shelf-opt-radio::after {
+  content: ''; position: absolute; inset: 3px; border-radius: 50%;
+  background: var(--primary);
+}
+.pl-shelf-opt-body { flex: 1; }
+.pl-shelf-opt-title { font-size: 13px; font-weight: 500; color: #1a1a2e; }
+.pl-shelf-opt.active .pl-shelf-opt-title { color: var(--primary); font-weight: 600; }
+.pl-shelf-opt-desc { font-size: 11px; color: #9ca3af; margin-top: 1px; }
+
+/* Footer link */
+.pl-ft-link {
+  font-size: 13px; color: var(--primary); cursor: pointer;
+  text-decoration: none; display: flex; align-items: center;
+  transition: all var(--g-transition);
+}
+.pl-ft-link:hover { text-decoration: underline; }
+
+/* Edit drawer product card */
+.pl-edit-product {
+  display: flex; align-items: center; gap: 14px; padding: 16px;
+  background: linear-gradient(135deg, #f8f9fb 0%, #f0f4f8 100%);
+  border-radius: 10px; margin-bottom: 20px;
+}
+.pl-edit-product-img {
+  width: 52px; height: 52px; border-radius: 8px; background: #fff;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06);
+}
+.pl-edit-product-info { flex: 1; min-width: 0; }
+.pl-edit-product-name { font-size: 15px; font-weight: 600; color: #1a1a2e; }
+.pl-edit-product-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; }
+.pl-edit-product-status {
+  padding: 3px 10px; border-radius: 6px; font-size: 11px;
+  font-weight: 600; color: #fff; flex-shrink: 0;
+}
+
+/* Card action sub link */
+.pl-card-action-sub { color: #6b7280; }
+.pl-card-action-sub:hover { color: var(--primary); }
+</style>
+
+<!-- Add Product Drawer -->
+<div class="g-drawer-mask" id="plDrawerMask" onclick="closePlDrawer()"></div>
+<div class="g-drawer" id="plDrawerAdd" style="width:560px">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="plDrawerTitle">添加商品</span>
+    <button class="g-drawer-close" onclick="closePlDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- Section: 商品类型 -->
+    <div class="pl-section">
+      <div class="pl-section-hd">商品类型</div>
+      <div class="g-form-group">
+        <label class="g-form-label required">类型</label>
+        <div style="display:flex;gap:8px">
+          <span class="pl-type-pill active" onclick="switchPlType(this,'single')">单品</span>
+          <span class="pl-type-pill" onclick="switchPlType(this,'combo')">套餐</span>
+        </div>
+        <div class="g-hint">套餐由多个商品组合而成，顾客按分组选择</div>
+      </div>
+    </div>
+
+    <!-- Section: 基本信息 -->
+    <div class="pl-section">
+      <div class="pl-section-hd">基本信息</div>
+      <div class="g-form-group">
+        <label class="g-form-label required">商品名称</label>
+        <input class="g-input" id="plFName" placeholder="如：宫保鸡丁" maxlength="30" />
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label">副标题</label>
+        <input class="g-input" id="plFSub" placeholder="一句话描述卖点（选填）" maxlength="50" />
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
+        <div class="g-form-group">
+          <label class="g-form-label required">分类</label>
+          <select class="g-input" id="plFCat" style="cursor:pointer">
+            <option value="">选择分类</option>
+            <option>热销推荐</option><option>主食</option><option>小吃凉菜</option>
+            <option>汤羹粥品</option><option>饮品</option><option>酒水</option><option>套餐</option>
+          </select>
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">商品图片</label>
+          <div class="pl-mini-upload" onclick="this.querySelector('input').click()">
+            <input type="file" accept="image/*" style="display:none" />
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="12" cy="11" r="3"/><path d="M3 17l4-4 3 3 4-4 7 7v1a2 2 0 01-2 2H5a2 2 0 01-2-2v-3z"/></svg>
+            <span>上传</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section: 价格 -->
+    <div class="pl-section">
+      <div class="pl-section-hd">价格</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
+        <div class="g-form-group">
+          <label class="g-form-label required">售价</label>
+          <div class="pl-price-input-wrap">
+            <span class="pl-price-prefix">&yen;</span>
+            <input class="g-input pl-price-field" id="plFPrice" type="number" min="0" step="0.01" placeholder="0.00" />
+          </div>
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">原价</label>
+          <div class="pl-price-input-wrap">
+            <span class="pl-price-prefix" style="color:#bbb">&yen;</span>
+            <input class="g-input pl-price-field" id="plFOrigPrice" type="number" min="0" step="0.01" placeholder="选填" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section: 上架方式 -->
+
+    <!-- Section: 套餐分组（仅套餐类型显示） -->
+    <div class="pl-section pl-combo-section" id="plComboSection" style="display:none">
+      <div class="pl-section-hd">套餐分组</div>
+      <div class="g-hint" style="margin-bottom:10px">每个分组可包含多个商品，顾客按分组选择</div>
+      <div id="plComboGroups">
+        <div class="pl-combo-group">
+          <div class="pl-combo-group-hd">
+            <input class="g-input" value="主菜" placeholder="请输入分组名称" style="flex:1">
+            <span style="font-size:12px;color:#6b7280;white-space:nowrap">选</span>
+            <input class="g-input" type="number" value="1" min="1" style="width:50px;text-align:center">
+            <span style="font-size:12px;color:#6b7280;white-space:nowrap">份</span>
+            <button class="pl-combo-group-del" onclick="this.closest('.pl-combo-group').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>
+          </div>
+          <div class="pl-combo-group-items">
+            <div class="pl-combo-item"><span>宫保鸡丁</span><span class="pl-combo-qty">×1</span><button class="pl-combo-item-del" onclick="this.closest('.pl-combo-item').remove()"><i data-lucide="x" style="width:12px;height:12px"></i></button></div>
+            <div class="pl-combo-item"><span>鱼香肉丝</span><span class="pl-combo-qty">×1</span><button class="pl-combo-item-del" onclick="this.closest('.pl-combo-item').remove()"><i data-lucide="x" style="width:12px;height:12px"></i></button></div>
+          </div>
+          <button class="pl-combo-add-prod" onclick="openProductPicker({title:'添加商品到分组',onConfirm:function(items){var list=event.target.previousElementSibling;items.forEach(function(p){var d=document.createElement('div');d.className='pl-combo-item';d.innerHTML='<span>'+p.name+'</span><span class=pl-combo-qty>×1</span>';list.appendChild(d)})}})"><i data-lucide="plus" style="width:12px;height:12px"></i> 添加商品</button>
+        </div>
+      </div>
+      <button class="pl-combo-add-group" onclick="addPlComboGroup()"><i data-lucide="plus" style="width:14px;height:14px"></i> 添加分组</button>
+    </div>
+
+    <!-- Section: 上架方式 -->
+    <div class="pl-section">
+      <div class="pl-section-hd">上架方式</div>
+      <div class="pl-shelf-opts" id="plShelfSeg">
+        <div class="pl-shelf-opt active" onclick="selectShelfOpt(this,'draft')">
+          <div class="pl-shelf-opt-radio"></div>
+          <div class="pl-shelf-opt-body">
+            <div class="pl-shelf-opt-title">存为草稿</div>
+            <div class="pl-shelf-opt-desc">确认后再上架</div>
+          </div>
+        </div>
+        <div class="pl-shelf-opt" onclick="selectShelfOpt(this,'now')">
+          <div class="pl-shelf-opt-radio"></div>
+          <div class="pl-shelf-opt-body">
+            <div class="pl-shelf-opt-title">立即上架</div>
+            <div class="pl-shelf-opt-desc">保存即同步到C端</div>
+          </div>
+        </div>
+        <div class="pl-shelf-opt" onclick="selectShelfOpt(this,'scheduled')">
+          <div class="pl-shelf-opt-radio"></div>
+          <div class="pl-shelf-opt-body">
+            <div class="pl-shelf-opt-title">定时上架</div>
+            <div class="pl-shelf-opt-desc">指定时间自动生效</div>
+          </div>
+        </div>
+      </div>
+      <div id="plShelfTimeRow" style="display:none;margin-top:10px">
+        <input class="g-input" type="datetime-local" style="width:220px" />
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft" style="justify-content:space-between">
+    <a class="pl-ft-link" id="plDrawerDetailLink" style="display:none" onclick="closePlDrawer();navigateTo('商品详情',{name:document.getElementById('plFName').value})">保存并编辑详情 &rarr;</a>
+    <div style="display:flex;gap:10px;margin-left:auto">
+      <button class="g-btn" onclick="closePlDrawer()">取消</button>
+      <button class="g-btn g-btn-primary" id="plDrawerSaveBtn">确认添加</button>
+    </div>
+  </div>
+</div>
+
+<!-- Quick-Edit Drawer -->
+<div class="g-drawer" id="plDrawerEdit" style="width:480px">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">快速编辑</span>
+    <button class="g-drawer-close" onclick="closePlDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- Product header card -->
+    <div class="pl-edit-product">
+      <div class="pl-edit-product-img"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/></svg></div>
+      <div class="pl-edit-product-info">
+        <div class="pl-edit-product-name" id="plEditName">宫保鸡丁</div>
+        <div class="pl-edit-product-meta" id="plEditMeta">SPU20240001 · 主食</div>
+      </div>
+      <span class="pl-edit-product-status" id="plEditStatus" style="background:#52c41a">在售</span>
+    </div>
+
+    <!-- Price -->
+    <div class="pl-section">
+      <div class="pl-section-hd">价格</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
+        <div class="g-form-group">
+          <label class="g-form-label">售价</label>
+          <div class="pl-price-input-wrap">
+            <span class="pl-price-prefix">&yen;</span>
+            <input class="g-input pl-price-field" id="plEditPrice" type="number" min="0" step="0.01" value="32" />
+          </div>
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">原价</label>
+          <div class="pl-price-input-wrap">
+            <span class="pl-price-prefix" style="color:#bbb">&yen;</span>
+            <input class="g-input pl-price-field" id="plEditOrigPrice" type="number" min="0" step="0.01" value="38" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Stock -->
+    <div class="pl-section">
+      <div class="pl-section-hd">库存</div>
+      <div class="g-form-inline">
+        <input class="g-input" id="plEditStock" type="number" min="0" value="86" style="width:120px" />
+        <span class="g-form-unit">份</span>
+        <span class="g-hint" style="margin-top:0;margin-left:8px">当前库存充足</span>
+      </div>
+    </div>
+
+    <!-- Status -->
+    <div class="pl-section">
+      <div class="pl-section-hd">商品状态</div>
+      <div class="g-toggle-wrap">
+        <label class="g-toggle-input"><input type="checkbox" id="plEditOnSale" checked /><span class="g-toggle-sl"></span></label>
+        <span class="g-toggle-label">在售</span>
+        <span class="g-hint" style="margin-top:0;margin-left:4px">关闭后商品将下架</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft" style="justify-content:space-between">
+    <a class="pl-ft-link" onclick="closePlDrawer();navigateTo('商品详情',{name:document.getElementById('plEditName').textContent})">前往详情页 &rarr;</a>
+    <div style="display:flex;gap:10px">
+      <button class="g-btn" onclick="closePlDrawer()">取消</button>
+      <button class="g-btn g-btn-primary" onclick="closePlDrawer()">保存修改</button>
+    </div>
+  </div>
+</div>
+
+<!-- Soldout Drawer -->
+<div class="g-drawer" id="plDrawerSoldout" style="width:440px">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">商品沽清</span>
+    <button class="g-drawer-close" onclick="closePlDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- Product info -->
+    <div class="pl-so-product">
+      <div class="pl-so-product-img"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M3 6h18v12H3z"/><circle cx="12" cy="12" r="3"/></svg></div>
+      <div class="pl-so-product-info">
+        <div class="pl-so-product-name" id="plSoName">宫保鸡丁</div>
+        <div class="pl-so-product-meta">SPU20240001 · 当前状态：<span style="color:#52c41a">在售</span></div>
+      </div>
+    </div>
+
+    <!-- 沽清方式 -->
+    <div class="pl-form-section">
+      <div class="pl-form-section-title">沽清方式</div>
+      <div class="pl-so-radio-group">
+        <div class="pl-so-radio active" onclick="selectSoMode(this,'today')">
+          <input type="radio" name="soMode" value="today" checked />
+          <div class="pl-so-radio-content">
+            <div class="pl-so-radio-title">今日沽清</div>
+            <div class="pl-so-radio-desc">今日不再接单，次日自动恢复供应</div>
+          </div>
+        </div>
+        <div class="pl-so-radio" onclick="selectSoMode(this,'timed')">
+          <input type="radio" name="soMode" value="timed" />
+          <div class="pl-so-radio-content">
+            <div class="pl-so-radio-title">定时沽清</div>
+            <div class="pl-so-radio-desc">设置恢复时间，到期自动恢复</div>
+            <div class="pl-so-time-row show-when-active" style="gap:8px;align-items:center;margin-top:8px">
+              <span style="font-size:12px;color:#666">恢复时间</span>
+              <input class="g-input" type="datetime-local" id="plSoTime" style="width:auto;flex:1" />
+            </div>
+          </div>
+        </div>
+        <div class="pl-so-radio" onclick="selectSoMode(this,'permanent')">
+          <input type="radio" name="soMode" value="permanent" />
+          <div class="pl-so-radio-content">
+            <div class="pl-so-radio-title">永久沽清</div>
+            <div class="pl-so-radio-desc">需手动恢复供应，适用于长期缺货</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 剩余可售 -->
+    <div class="pl-form-section">
+      <div class="pl-form-section-title">剩余可售</div>
+      <div class="g-form-row">
+        <label class="g-form-label">可售数量</label>
+        <div class="g-form-ctrl">
+          <div class="g-form-inline"><input class="g-input" id="plSoRemain" type="number" min="0" value="0" style="width:100px" /><span class="g-form-unit">份</span></div>
+          <div class="g-hint">设为 0 表示完全沽清，不再接单</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 沽清原因 -->
+    <div class="pl-form-section">
+      <div class="pl-form-section-title">沽清原因</div>
+      <div class="g-form-row">
+        <div class="g-form-ctrl" style="flex:1"><textarea class="g-textarea" id="plSoReason" rows="2" placeholder="选填，如：食材用完、设备维修等"></textarea></div>
+      </div>
+    </div>
+
+    <!-- 通知设置 -->
+    <div class="pl-form-section">
+      <div class="pl-form-section-title">通知设置</div>
+      <div class="g-toggle-wrap"><label class="g-toggle-input"><input type="checkbox" checked /><span class="g-toggle-sl"></span></label><span class="g-toggle-label">同步通知外卖平台（美团/饿了么）</span></div>
+      <div class="g-toggle-wrap"><label class="g-toggle-input"><input type="checkbox" /><span class="g-toggle-sl"></span></label><span class="g-toggle-label">通知店长（短信提醒）</span></div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closePlDrawer()">取消</button>
+    <button class="g-btn g-btn-danger">确认沽清</button>
+  </div>
+</div>
+
+<script>
+/* ===== Drawer open/close ===== */
+function openPlDrawer(mode, data){
+  document.getElementById('plDrawerMask').classList.add('open');
+  if(mode==='soldout'){
+    document.getElementById('plDrawerSoldout').classList.add('open');
+    if(data && data.name) document.getElementById('plSoName').textContent=data.name;
+  }else if(mode==='edit'){
+    document.getElementById('plDrawerEdit').classList.add('open');
+    if(data){
+      document.getElementById('plEditName').textContent=data.name||'';
+      document.getElementById('plEditMeta').textContent=(data.spu||'')+(data.cat?' · '+data.cat:'');
+      if(data.price) document.getElementById('plEditPrice').value=data.price;
+      if(data.origPrice) document.getElementById('plEditOrigPrice').value=data.origPrice;
+      if(data.stock!==undefined) document.getElementById('plEditStock').value=data.stock;
+      var statusEl=document.getElementById('plEditStatus');
+      if(data.status==='在售'){statusEl.style.background='#52c41a';statusEl.textContent='在售';document.getElementById('plEditOnSale').checked=true;}
+      else if(data.status==='下架'){statusEl.style.background='#999';statusEl.textContent='下架';document.getElementById('plEditOnSale').checked=false;}
+      else if(data.status==='售罄'){statusEl.style.background='#ef4444';statusEl.textContent='售罄';document.getElementById('plEditOnSale').checked=false;}
+    }
+  }else{
+    document.getElementById('plDrawerAdd').classList.add('open');
+    document.getElementById('plDrawerTitle').textContent='添加商品';
+    document.getElementById('plDrawerSaveBtn').textContent='确认添加';
+    document.getElementById('plFName').value='';
+    document.getElementById('plFSub').value='';
+    document.getElementById('plFPrice').value='';
+    if(document.getElementById('plFOrigPrice')) document.getElementById('plFOrigPrice').value='';
+  }
+}
+function closePlDrawer(){
+  document.getElementById('plDrawerMask').classList.remove('open');
+  document.getElementById('plDrawerAdd').classList.remove('open');
+  document.getElementById('plDrawerEdit').classList.remove('open');
+  document.getElementById('plDrawerSoldout').classList.remove('open');
+}
+
+/* ===== Form helpers ===== */
+function togglePlPill(el){ el.classList.toggle('checked'); }
+function togglePlTagSel(el){ el.classList.toggle('selected'); }
+function toggleQaSeg(el){ el.classList.toggle('active'); }
+function switchPlType(el, type) {
+  document.querySelectorAll('.pl-type-pill').forEach(function(p){ p.classList.remove('active'); });
+  el.classList.add('active');
+  document.getElementById('plComboSection').style.display = type === 'combo' ? '' : 'none';
+}
+function addPlComboGroup() {
+  var g = document.createElement('div');
+  g.className = 'pl-combo-group';
+  var hd = document.createElement('div');
+  hd.className = 'pl-combo-group-hd';
+  hd.innerHTML = '<input class="g-input" placeholder="请输入分组名称" style="flex:1"><span style="font-size:12px;color:#6b7280;white-space:nowrap">选</span><input class="g-input" type="number" value="1" min="1" style="width:50px;text-align:center"><span style="font-size:12px;color:#6b7280;white-space:nowrap">份</span>';
+  var del = document.createElement('button');
+  del.className = 'pl-combo-group-del';
+  del.innerHTML = '<i data-lucide="trash-2" style="width:14px;height:14px"></i>';
+  del.onclick = function(){ this.closest('.pl-combo-group').remove(); };
+  hd.appendChild(del);
+  var items = document.createElement('div');
+  items.className = 'pl-combo-group-items';
+  var addBtn = document.createElement('button');
+  addBtn.className = 'pl-combo-add-prod';
+  addBtn.innerHTML = '<i data-lucide="plus" style="width:12px;height:12px"></i> 添加商品';
+  addBtn.onclick = function(){ var itemsDiv = items; openProductPicker({title:'添加商品到分组',onConfirm:function(sel){ sel.forEach(function(p){ var d = document.createElement('div'); d.className='pl-combo-item'; var ns=document.createElement('span'); ns.textContent=p.name; var qs=document.createElement('span'); qs.className='pl-combo-qty'; qs.textContent='×1'; d.appendChild(ns); d.appendChild(qs); itemsDiv.appendChild(d); }); if(typeof lucide!=='undefined') lucide.createIcons(); }}); };
+  g.appendChild(hd);
+  g.appendChild(items);
+  g.appendChild(addBtn);
+  document.getElementById('plComboGroups').appendChild(g);
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+function selectShelfOpt(el,mode){
+  document.querySelectorAll('#plShelfSeg .pl-shelf-opt').forEach(function(o){o.classList.remove('active')});
+  el.classList.add('active');
+  document.getElementById('plShelfTimeRow').style.display=mode==='scheduled'?'block':'none';
+}
+function selectSoMode(el, mode){
+  document.querySelectorAll('.pl-so-radio').forEach(function(r){r.classList.remove('active');r.querySelector('input').checked=false});
+  el.classList.add('active');
+  el.querySelector('input').checked=true;
+}
+
+/* ===== Bind existing buttons ===== */
+(function(){
+  // "添加商品" button
+  var addBtn=document.querySelector('.pl-btn-primary');
+  if(addBtn) addBtn.onclick=function(){openPlDrawer('add')};
+
+  // Each card's action links
+  document.querySelectorAll('.pl-card-footer').forEach(function(footer){
+    var card=footer.parentElement;
+    var nameEl=card.querySelector('.pl-card-name');
+    var name=nameEl?nameEl.textContent:'';
+    var subEl=card.querySelector('.pl-card-sub');
+    var sub=subEl?subEl.textContent:'';
+    var spuEl=card.querySelector('.pl-card-spu');
+    var spu=spuEl?spuEl.textContent:'';
+    var catEl=card.querySelector('.pl-lv-cat');
+    var cat=catEl?catEl.textContent:'';
+    var priceEl=card.querySelector('.pl-price-now');
+    var price=priceEl?priceEl.textContent.replace(/[¥￥]/g,''):'';
+    var origEl=card.querySelector('.pl-price-orig');
+    var origPrice=origEl?origEl.textContent.replace(/[¥￥]/g,''):'';
+    var stockEl=card.querySelector('.pl-lv-stock');
+    var stockText=stockEl?stockEl.textContent:'';
+    var stockNum=stockText.match(/\d+/);
+    var stock=stockNum?parseInt(stockNum[0]):0;
+    var statusEl=card.querySelector('.pl-status-tag');
+    var status=statusEl?statusEl.textContent:'';
+
+    var links=footer.querySelectorAll('.pl-card-action');
+    links.forEach(function(a){
+      var txt=a.textContent.trim();
+      if(txt==='编辑') a.onclick=function(){openPlDrawer('edit',{name:name,spu:spu,cat:cat,price:price,origPrice:origPrice,stock:stock,status:status})};
+      else if(txt==='详情') a.onclick=function(){navigateTo('商品详情',{name:name})};
+      else if(txt==='估清') a.onclick=function(){openPlDrawer('soldout',{name:name})};
+    });
+  });
+})();
+
+function togglePlMore(e) {
+  e.stopPropagation();
+  var menu = e.currentTarget.parentElement.querySelector('.pl-more-menu');
+  document.querySelectorAll('.pl-more-menu.show').forEach(function(m){ if(m!==menu) m.classList.remove('show'); });
+  menu.classList.toggle('show');
+}
+document.addEventListener('click', function(){ document.querySelectorAll('.pl-more-menu.show').forEach(function(m){ m.classList.remove('show'); }); });
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-schedule.html b/TakeoutSaaS.Prototypes/pages/product-schedule.html
new file mode 100644
index 0000000..2eb7322
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-schedule.html
@@ -0,0 +1,323 @@
+<!-- 时段供应页 -->
+<style>
+  .ptm-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
+  .ptm-search { position:relative; }
+  .ptm-search input { height:34px; padding:0 10px 0 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; width:200px; transition:var(--g-transition); }
+  .ptm-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .ptm-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#bbb; pointer-events:none; }
+  .ptm-stats { display:flex; gap:24px; margin-bottom:16px; padding:10px 16px; background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); font-size:13px; color:#4b5563; }
+  .ptm-stats span { display:flex; align-items:center; gap:6px; }
+  .ptm-stats strong { color:#1a1a2e; font-weight:600; }
+  .ptm-banner { background:#e6f7ff; border:none; border-radius:10px; padding:12px 16px; font-size:13px; color:#0050b3; margin-bottom:16px; display:flex; align-items:center; gap:8px; box-shadow:var(--g-shadow-sm); }
+  .ptm-card-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
+  .ptm-card-name { font-size:15px; font-weight:600; color:#1a1a2e; }
+  .ptm-tag-on { background:#dcfce7; color:#22c55e; border:1px solid #bbf7d0; border-radius:6px; font-weight:600; }
+  .ptm-tag-off { background:#f8f9fb; color:#9ca3af; border:1px solid #e5e7eb; border-radius:6px; font-weight:600; }
+  .ptm-time-row { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
+  .ptm-time-text { font-size:22px; font-weight:700; color:#1a1a2e; letter-spacing:1px; }
+  .ptm-timebar-wrap { flex:1; height:18px; background:#f8f9fb; border-radius:9px; position:relative; overflow:hidden; }
+  .ptm-timebar-fill { position:absolute; top:0; bottom:0; border-radius:9px; opacity:0.7; }
+  .ptm-days { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
+  .ptm-day { width:36px; height:26px; border-radius:13px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; color:#9ca3af; background:#f8f9fb; transition:var(--g-transition); }
+  .ptm-day.active { background:var(--primary); color:#fff; border-color:var(--primary); }
+  .ptm-products { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
+  .ptm-prod-pill { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; background:#f8f9fb; color:#4b5563; border:1px solid #e5e7eb; transition:var(--g-transition); }
+  .ptm-prod-more { color:var(--primary); cursor:pointer; }
+  .ptm-card-ft { display:flex; gap:16px; border-top:1px solid #f3f4f6; padding-top:12px; }
+  .ptm-tl-title { font-size:15px; font-weight:600; color:#1a1a2e; margin-bottom:16px; padding-left:10px; border-left:3px solid var(--primary); }
+  .ptm-tl-axis { position:relative; height:20px; margin-bottom:4px; }
+  .ptm-tl-axis span { position:absolute; transform:translateX(-50%); font-size:10px; color:#9ca3af; }
+  .ptm-tl-rows { display:flex; flex-direction:column; gap:8px; }
+  .ptm-tl-row { display:flex; align-items:center; gap:10px; }
+  .ptm-tl-label { width:80px; font-size:12px; color:#4b5563; text-align:right; flex-shrink:0; }
+  .ptm-tl-track { flex:1; height:22px; background:#f8f9fb; border-radius:11px; position:relative; overflow:hidden; }
+  .ptm-tl-bar { position:absolute; top:0; bottom:0; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:500; white-space:nowrap; overflow:hidden; }
+  .ptm-fg-row { display:flex; gap:10px; align-items:center; }
+  .ptm-fg-row .g-input { flex:1; }
+  .ptm-fg-sep { font-size:14px; color:#9ca3af; }
+  .ptm-day-sel { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
+  .ptm-day-sel .ptm-day { cursor:pointer; transition:var(--g-transition); }
+  .ptm-day-quick { display:flex; gap:6px; }
+  .ptm-prod-search { position:relative; margin-bottom:10px; }
+  .ptm-prod-selected { display:flex; gap:6px; flex-wrap:wrap; }
+  .ptm-prod-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:14px; font-size:12px; background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; transition:var(--g-transition); }
+  .ptm-prod-chip-x { cursor:pointer; color:#9ca3af; display:flex; align-items:center; transition:var(--g-transition); }
+  .ptm-prod-chip-x:hover { color:#ef4444; }
+</style>
+
+<div class="ptm-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <div class="ptm-search">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input type="text" placeholder="搜索规则名称…" oninput="searchSchedules(this.value)" />
+  </div>
+  <div style="flex:1;"></div>
+  <button class="g-btn g-btn-primary" onclick="openScheduleDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加时段规则</button>
+</div>
+
+<div class="ptm-stats">
+  <span>时段规则 <strong>4</strong></span>
+  <span>启用 <strong>3</strong></span>
+  <span>覆盖商品 <strong>14</strong></span>
+</div>
+
+<div class="ptm-banner">
+  <i data-lucide="info" style="width:16px;height:16px;flex-shrink:0;"></i>
+  设置商品在特定时段内供应，未被任何规则覆盖的商品默认全天供应。
+</div>
+
+<div id="ptmRuleList">
+  <div class="g-card" style="margin-bottom:16px" data-name="早餐供应">
+    <div class="ptm-card-hd">
+      <span class="ptm-card-name">早餐供应</span>
+      <span class="g-tag ptm-tag-on">启用</span>
+    </div>
+    <div class="ptm-time-row">
+      <span class="ptm-time-text">06:00 ~ 10:00</span>
+      <div class="ptm-timebar-wrap">
+        <div class="ptm-timebar-fill" style="left:25%;width:16.67%;background:#1890ff"></div>
+      </div>
+    </div>
+    <div class="ptm-days">
+      <span class="ptm-day active">周一</span><span class="ptm-day active">周二</span><span class="ptm-day active">周三</span><span class="ptm-day active">周四</span><span class="ptm-day active">周五</span><span class="ptm-day active">周六</span><span class="ptm-day active">周日</span>
+    </div>
+    <div class="ptm-products">
+      <span class="ptm-prod-pill">皮蛋瘦肉粥</span><span class="ptm-prod-pill">小笼包</span><span class="ptm-prod-pill">油条</span><span class="ptm-prod-pill ptm-prod-more">+2更多</span>
+    </div>
+    <div class="ptm-card-ft">
+      <span class="g-action" onclick="openScheduleDrawer('edit','早餐供应')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <div class="g-card" style="margin-bottom:16px" data-name="午市套餐">
+    <div class="ptm-card-hd">
+      <span class="ptm-card-name">午市套餐</span>
+      <span class="g-tag ptm-tag-on">启用</span>
+    </div>
+    <div class="ptm-time-row">
+      <span class="ptm-time-text">11:00 ~ 14:00</span>
+      <div class="ptm-timebar-wrap">
+        <div class="ptm-timebar-fill" style="left:45.83%;width:12.5%;background:#52c41a"></div>
+      </div>
+    </div>
+    <div class="ptm-days">
+      <span class="ptm-day active">周一</span><span class="ptm-day active">周二</span><span class="ptm-day active">周三</span><span class="ptm-day active">周四</span><span class="ptm-day active">周五</span><span class="ptm-day">周六</span><span class="ptm-day">周日</span>
+    </div>
+    <div class="ptm-products">
+      <span class="ptm-prod-pill">单人工作餐</span><span class="ptm-prod-pill">任选午餐</span>
+    </div>
+    <div class="ptm-card-ft">
+      <span class="g-action" onclick="openScheduleDrawer('edit','午市套餐')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <div class="g-card" style="margin-bottom:16px" data-name="下午茶">
+    <div class="ptm-card-hd">
+      <span class="ptm-card-name">下午茶</span>
+      <span class="g-tag ptm-tag-on">启用</span>
+    </div>
+    <div class="ptm-time-row">
+      <span class="ptm-time-text">14:00 ~ 17:00</span>
+      <div class="ptm-timebar-wrap">
+        <div class="ptm-timebar-fill" style="left:58.33%;width:12.5%;background:#722ed1"></div>
+      </div>
+    </div>
+    <div class="ptm-days">
+      <span class="ptm-day active">周一</span><span class="ptm-day active">周二</span><span class="ptm-day active">周三</span><span class="ptm-day active">周四</span><span class="ptm-day active">周五</span><span class="ptm-day active">周六</span><span class="ptm-day active">周日</span>
+    </div>
+    <div class="ptm-products">
+      <span class="ptm-prod-pill">冰粉</span><span class="ptm-prod-pill">奶茶</span><span class="ptm-prod-pill">蛋糕</span><span class="ptm-prod-pill ptm-prod-more">+1更多</span>
+    </div>
+    <div class="ptm-card-ft">
+      <span class="g-action" onclick="openScheduleDrawer('edit','下午茶')">编辑</span>
+      <span class="g-action">停用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+
+  <div class="g-card" style="margin-bottom:16px;opacity:0.5" data-name="夜宵时段">
+    <div class="ptm-card-hd">
+      <span class="ptm-card-name">夜宵时段</span>
+      <span class="g-tag ptm-tag-off">停用</span>
+    </div>
+    <div class="ptm-time-row">
+      <span class="ptm-time-text">21:00 ~ 02:00 (次日)</span>
+      <div class="ptm-timebar-wrap">
+        <div class="ptm-timebar-fill" style="left:87.5%;width:12.5%;background:#fa8c16"></div>
+        <div class="ptm-timebar-fill" style="left:0%;width:8.33%;background:#fa8c16"></div>
+      </div>
+    </div>
+    <div class="ptm-days">
+      <span class="ptm-day">周一</span><span class="ptm-day">周二</span><span class="ptm-day">周三</span><span class="ptm-day">周四</span><span class="ptm-day active">周五</span><span class="ptm-day active">周六</span><span class="ptm-day active">周日</span>
+    </div>
+    <div class="ptm-products">
+      <span class="ptm-prod-pill">烧烤拼盘</span><span class="ptm-prod-pill">啤酒</span><span class="ptm-prod-pill">毛豆</span><span class="ptm-prod-pill ptm-prod-more">+1更多</span>
+    </div>
+    <div class="ptm-card-ft">
+      <span class="g-action" onclick="openScheduleDrawer('edit','夜宵时段')">编辑</span>
+      <span class="g-action">启用</span>
+      <span class="g-action g-action-danger">删除</span>
+    </div>
+  </div>
+</div>
+
+<div class="g-card">
+  <div class="ptm-tl-title">今日供应时间轴</div>
+  <div class="ptm-tl-axis" style="margin-left:90px;margin-right:10px;">
+    <span style="left:0%">0</span><span style="left:12.5%">3</span><span style="left:25%">6</span><span style="left:37.5%">9</span><span style="left:50%">12</span><span style="left:62.5%">15</span><span style="left:75%">18</span><span style="left:87.5%">21</span><span style="left:100%">24</span>
+  </div>
+  <div class="ptm-tl-rows">
+    <div class="ptm-tl-row">
+      <span class="ptm-tl-label">早餐供应</span>
+      <div class="ptm-tl-track">
+        <div class="ptm-tl-bar" style="left:25%;width:16.67%;background:#1890ff">06~10</div>
+      </div>
+    </div>
+    <div class="ptm-tl-row">
+      <span class="ptm-tl-label">午市套餐</span>
+      <div class="ptm-tl-track">
+        <div class="ptm-tl-bar" style="left:45.83%;width:12.5%;background:#52c41a">11~14</div>
+      </div>
+    </div>
+    <div class="ptm-tl-row">
+      <span class="ptm-tl-label">下午茶</span>
+      <div class="ptm-tl-track">
+        <div class="ptm-tl-bar" style="left:58.33%;width:12.5%;background:#722ed1">14~17</div>
+      </div>
+    </div>
+    <div class="ptm-tl-row">
+      <span class="ptm-tl-label">夜宵时段</span>
+      <div class="ptm-tl-track">
+        <div class="ptm-tl-bar" style="left:87.5%;width:12.5%;background:#fa8c16;border-radius:11px 0 0 11px">21~24</div>
+        <div class="ptm-tl-bar" style="left:0%;width:8.33%;background:#fa8c16;border-radius:0 11px 11px 0">0~2</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 添加/编辑时段规则抽屉 -->
+<div class="g-drawer-mask" id="ptmDrawerMask" onclick="closeScheduleDrawer()"></div>
+<div class="g-drawer" id="ptmDrawer" style="width:520px">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="ptmDrawerTitle">添加时段规则</span>
+    <button class="g-drawer-close" onclick="closeScheduleDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">规则名称</label>
+      <input class="g-input" id="ptmRuleName" placeholder="请输入规则名称，如：早餐供应、午市套餐">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">时间范围</label>
+      <div class="ptm-fg-row">
+        <input class="g-input" type="time" id="ptmTimeStart" value="06:00">
+        <span class="ptm-fg-sep">~</span>
+        <input class="g-input" type="time" id="ptmTimeEnd" value="10:00">
+      </div>
+      <div class="g-hint">结束时间小于开始时间时视为跨天（如 21:00~02:00）</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">适用星期</label>
+      <div class="ptm-day-sel" id="ptmDaySel">
+        <span class="ptm-day active" onclick="toggleSchedDay(this)">周一</span>
+        <span class="ptm-day active" onclick="toggleSchedDay(this)">周二</span>
+        <span class="ptm-day active" onclick="toggleSchedDay(this)">周三</span>
+        <span class="ptm-day active" onclick="toggleSchedDay(this)">周四</span>
+        <span class="ptm-day active" onclick="toggleSchedDay(this)">周五</span>
+        <span class="ptm-day active" onclick="toggleSchedDay(this)">周六</span>
+        <span class="ptm-day active" onclick="toggleSchedDay(this)">周日</span>
+      </div>
+      <div class="ptm-day-quick">
+        <button class="g-btn g-btn-sm" onclick="schedQuickDays('all')">全选</button>
+        <button class="g-btn g-btn-sm" onclick="schedQuickDays('weekday')">工作日</button>
+        <button class="g-btn g-btn-sm" onclick="schedQuickDays('weekend')">周末</button>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">关联商品</label>
+      <div class="ptm-prod-search">
+        <input class="g-input" placeholder="搜索并选择要关联的商品…" onclick="openProductPicker({title:'关联商品',subtitle:'时段规则',onConfirm:function(items){var c=document.getElementById('ptmProdSelected');items.forEach(function(p){var s=document.createElement('span');s.className='ptm-prod-chip';s.innerHTML=p.name+' <span class=ptm-prod-chip-x onclick=removeSchedProduct(this)><i data-lucide=x style=width:12px;height:12px></i></span>';c.appendChild(s)});if(typeof lucide!=='undefined')lucide.createIcons()}})" readonly style="cursor:pointer">
+      </div>
+      <div class="ptm-prod-selected" id="ptmProdSelected">
+        <span class="ptm-prod-chip">皮蛋瘦肉粥 <span class="ptm-prod-chip-x" onclick="removeSchedProduct(this)"><i data-lucide="x" style="width:12px;height:12px;"></i></span></span>
+        <span class="ptm-prod-chip">小笼包 <span class="ptm-prod-chip-x" onclick="removeSchedProduct(this)"><i data-lucide="x" style="width:12px;height:12px;"></i></span></span>
+        <span class="ptm-prod-chip">油条 <span class="ptm-prod-chip-x" onclick="removeSchedProduct(this)"><i data-lucide="x" style="width:12px;height:12px;"></i></span></span>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">启用状态</label>
+      <div style="display:flex;align-items:center;gap:10px;">
+        <button class="g-toggle on" id="ptmToggle" onclick="toggleSwitch(this)"></button>
+        <span class="g-toggle-label">启用</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeScheduleDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeScheduleDrawer()">保存</button>
+  </div>
+</div>
+
+<script>
+function openScheduleDrawer(mode, name) {
+  document.getElementById('ptmDrawerMask').classList.add('open');
+  document.getElementById('ptmDrawer').classList.add('open');
+  if (mode === 'edit') {
+    document.getElementById('ptmDrawerTitle').textContent = '编辑时段规则';
+    document.getElementById('ptmRuleName').value = name || '';
+  } else {
+    document.getElementById('ptmDrawerTitle').textContent = '添加时段规则';
+    document.getElementById('ptmRuleName').value = '';
+    document.getElementById('ptmTimeStart').value = '06:00';
+    document.getElementById('ptmTimeEnd').value = '10:00';
+    schedQuickDays('all');
+    var tog = document.getElementById('ptmToggle');
+    if (!tog.classList.contains('on')) tog.classList.add('on');
+  }
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function closeScheduleDrawer() {
+  document.getElementById('ptmDrawerMask').classList.remove('open');
+  document.getElementById('ptmDrawer').classList.remove('open');
+}
+
+function toggleSchedDay(el) {
+  el.classList.toggle('active');
+}
+
+function schedQuickDays(mode) {
+  var days = document.querySelectorAll('#ptmDaySel .ptm-day');
+  days.forEach(function(d, i) {
+    if (mode === 'all') d.classList.add('active');
+    else if (mode === 'weekday') d.classList.toggle('active', i < 5);
+    else if (mode === 'weekend') d.classList.toggle('active', i >= 5);
+  });
+}
+
+function removeSchedProduct(el) {
+  el.closest('.ptm-prod-chip').remove();
+}
+
+function searchSchedules(keyword) {
+  var kw = keyword.trim().toLowerCase();
+  document.querySelectorAll('#ptmRuleList > .g-card').forEach(function(card) {
+    var name = (card.getAttribute('data-name') || '').toLowerCase();
+    card.style.display = (!kw || name.includes(kw)) ? '' : 'none';
+  });
+}
+
+function toggleSwitch(el) {
+  el.classList.toggle('on');
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/product-specs.html b/TakeoutSaaS.Prototypes/pages/product-specs.html
new file mode 100644
index 0000000..3f19f39
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/product-specs.html
@@ -0,0 +1,328 @@
+<!-- 规格做法页 -->
+<style>
+  .psp-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; }
+  .psp-store-select { height:34px; border-radius:8px; border:1px solid #e5e7eb; padding:0 12px; font-size:13px; min-width:180px; outline:none; color:#1a1a2e; transition:var(--g-transition); }
+  .psp-store-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
+  .psp-spacer { flex:1; }
+  .psp-search { width:200px; height:34px; border-radius:8px; border:1px solid #e5e7eb; padding:0 10px 0 32px; font-size:13px; outline:none; color:#1a1a2e; transition:var(--g-transition); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 10px center no-repeat; }
+  .psp-search:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
+
+  /* 筛选标签 */
+  .psp-filter-tabs { display:flex; gap:4px; }
+  .psp-filter-tab { height:30px; padding:0 14px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid transparent; background:transparent; color:#4b5563; transition:var(--g-transition); font-weight:500; }
+  .psp-filter-tab:hover { background:#f3f4f6; }
+  .psp-filter-tab.active { background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary); border-color:color-mix(in srgb,var(--primary) 20%,transparent); font-weight:600; }
+  .psp-filter-tab .count { font-size:11px; margin-left:3px; opacity:0.7; }
+
+  /* 统计条 */
+  .psp-stats { display:flex; gap:12px; margin-bottom:16px; }
+  .psp-stat { display:flex; align-items:center; gap:8px; padding:10px 16px; background:#fff; border-radius:8px; box-shadow:var(--g-shadow-sm); font-size:13px; color:#4b5563; }
+  .psp-stat-num { font-size:18px; font-weight:700; color:#1a1a2e; }
+  .psp-stat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+
+  .psp-btn-dashed { border-style:dashed; width:100%; justify-content:center; margin-top:8px; color:#9ca3af; }
+  .psp-btn-dashed:hover { border-color:var(--primary); color:var(--primary); }
+
+  .psp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
+  .psp-card {
+    background:#fff; border-radius:10px; border:none; box-shadow:var(--g-shadow-sm); padding:20px;
+    font-size:13px; display:flex; flex-direction:column; gap:10px; transition:var(--g-transition);
+  }
+  .psp-card:hover { box-shadow:var(--g-shadow-md); }
+  .psp-card.disabled { opacity:0.5; }
+  .psp-card-hd { display:flex; align-items:center; gap:8px; }
+  .psp-card-hd .name { font-weight:600; font-size:14px; color:#1a1a2e; }
+  .psp-card-meta { color:#9ca3af; font-size:12px; display:flex; align-items:center; gap:8px; }
+  .psp-pills { display:flex; flex-wrap:wrap; gap:6px; }
+  .psp-pill {
+    display:inline-block; padding:2px 10px; border-radius:12px;
+    background:#f8f9fb; font-size:12px; color:#1a1a2e;
+  }
+  .psp-pill .price { color:var(--primary); margin-left:2px; }
+  .psp-card-assoc { font-size:12px; color:#9ca3af; }
+  .psp-card-ft { display:flex; gap:16px; border-top:1px solid #f3f4f6; padding-top:10px; }
+
+  .psp-pill-group { display:flex; gap:8px; }
+  .psp-pill-btn {
+    height:34px; padding:0 16px; border-radius:8px; font-size:13px; cursor:pointer;
+    border:1px solid #e5e7eb; background:#fff; color:#1a1a2e; transition:var(--g-transition);
+  }
+  .psp-pill-btn:hover { border-color:var(--primary); color:var(--primary); }
+  .psp-pill-btn:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .psp-pill-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
+
+  .psp-opt-list { display:flex; flex-direction:column; gap:8px; }
+  .psp-opt-row { display:flex; align-items:center; gap:8px; }
+  .psp-opt-row input[type="text"] {
+    flex:1; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+    font-size:13px; outline:none; transition:var(--g-transition);
+  }
+  .psp-opt-row input[type="text"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .psp-opt-row .psp-price-wrap {
+    width:120px; display:flex; align-items:center; height:34px; border:1px solid #e5e7eb;
+    border-radius:8px; overflow:hidden; font-size:13px; flex-shrink:0; transition:var(--g-transition);
+  }
+  .psp-opt-row .psp-price-wrap span { padding:0 8px; color:#9ca3af; background:#f8f9fb; height:100%; display:flex; align-items:center; border-right:1px solid #e5e7eb; }
+  .psp-opt-row .psp-price-wrap input {
+    border:none; outline:none; width:100%; height:100%; padding:0 8px; font-size:13px;
+  }
+  .psp-opt-row .psp-price-wrap input:focus { box-shadow:none; }
+  .psp-opt-del {
+    width:34px; height:34px; border:1px solid #e5e7eb; border-radius:8px; background:#fff;
+    cursor:pointer; color:#9ca3af; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:var(--g-transition);
+  }
+  .psp-opt-del:hover { border-color:#ef4444; color:#ef4444; background:#fef2f2; }
+</style>
+
+<!-- 工具栏 -->
+<div class="psp-toolbar">
+  <select class="psp-store-select">
+    <option>老三家外卖 总店</option>
+    <option>老三家外卖 朝阳店</option>
+    <option>老三家外卖 海淀店</option>
+    <option>老三家外卖 丰台店</option>
+    <option>老三家外卖 通州店</option>
+  </select>
+  <div class="psp-filter-tabs">
+    <button class="psp-filter-tab active" onclick="filterSpecs('all',this)">全部<span class="count">6</span></button>
+    <button class="psp-filter-tab" onclick="filterSpecs('spec',this)">规格<span class="count">3</span></button>
+    <button class="psp-filter-tab" onclick="filterSpecs('method',this)">做法<span class="count">3</span></button>
+  </div>
+  <span class="psp-spacer"></span>
+  <input class="psp-search" placeholder="搜索模板名称…" oninput="searchSpecs(this.value)">
+  <button class="g-btn g-btn-primary" onclick="openSpecDrawer('add')">+ 添加模板</button>
+</div>
+
+<!-- 统计条 -->
+<div class="psp-stats">
+  <div class="psp-stat"><span class="psp-stat-dot" style="background:#1890ff"></span>规格模板 <span class="psp-stat-num">3</span></div>
+  <div class="psp-stat"><span class="psp-stat-dot" style="background:#fa8c16"></span>做法模板 <span class="psp-stat-num">3</span></div>
+  <div class="psp-stat"><span class="psp-stat-dot" style="background:#52c41a"></span>总关联商品 <span class="psp-stat-num">79</span></div>
+</div>
+
+<!-- 卡片网格 -->
+<div class="psp-grid" id="pspGrid">
+
+  <div class="psp-card" data-type="spec" data-name="杯型">
+    <div class="psp-card-hd"><span class="name">杯型</span><span class="g-tag g-tag-blue">规格</span></div>
+    <div class="psp-card-meta">单选 · 必选</div>
+    <div class="psp-pills">
+      <span class="psp-pill">大杯 <span class="price">+3元</span></span>
+      <span class="psp-pill">中杯</span>
+      <span class="psp-pill">小杯 <span class="price">-2元</span></span>
+    </div>
+    <div class="psp-card-assoc">已关联 12 个商品</div>
+    <div class="psp-card-ft">
+      <button class="g-action" onclick="openSpecDrawer('edit','杯型')">编辑</button>
+      <button class="g-action">复制</button>
+      <button class="g-action g-action-danger">删除</button>
+    </div>
+  </div>
+
+  <div class="psp-card" data-type="spec" data-name="温度">
+    <div class="psp-card-hd"><span class="name">温度</span><span class="g-tag g-tag-blue">规格</span></div>
+    <div class="psp-card-meta">单选 · 必选</div>
+    <div class="psp-pills">
+      <span class="psp-pill">热</span>
+      <span class="psp-pill">温</span>
+      <span class="psp-pill">冰</span>
+      <span class="psp-pill">去冰</span>
+    </div>
+    <div class="psp-card-assoc">已关联 20 个商品</div>
+    <div class="psp-card-ft">
+      <button class="g-action" onclick="openSpecDrawer('edit','温度')">编辑</button>
+      <button class="g-action">复制</button>
+      <button class="g-action g-action-danger">删除</button>
+    </div>
+  </div>
+
+  <div class="psp-card" data-type="spec" data-name="份量">
+    <div class="psp-card-hd"><span class="name">份量</span><span class="g-tag g-tag-blue">规格</span></div>
+    <div class="psp-card-meta">单选 · 可选</div>
+    <div class="psp-pills">
+      <span class="psp-pill">整份</span>
+      <span class="psp-pill">半份 <span class="price">-5元</span></span>
+    </div>
+    <div class="psp-card-assoc">已关联 8 个商品</div>
+    <div class="psp-card-ft">
+      <button class="g-action" onclick="openSpecDrawer('edit','份量')">编辑</button>
+      <button class="g-action">复制</button>
+      <button class="g-action g-action-danger">删除</button>
+    </div>
+  </div>
+
+  <div class="psp-card" data-type="method" data-name="辣度">
+    <div class="psp-card-hd"><span class="name">辣度</span><span class="g-tag g-tag-orange">做法</span></div>
+    <div class="psp-card-meta">单选 · 必选</div>
+    <div class="psp-pills">
+      <span class="psp-pill">不辣</span>
+      <span class="psp-pill">微辣</span>
+      <span class="psp-pill">中辣</span>
+      <span class="psp-pill">特辣</span>
+    </div>
+    <div class="psp-card-assoc">已关联 15 个商品</div>
+    <div class="psp-card-ft">
+      <button class="g-action" onclick="openSpecDrawer('edit','辣度')">编辑</button>
+      <button class="g-action">复制</button>
+      <button class="g-action g-action-danger">删除</button>
+    </div>
+  </div>
+
+  <div class="psp-card" data-type="method" data-name="甜度">
+    <div class="psp-card-hd"><span class="name">甜度</span><span class="g-tag g-tag-orange">做法</span></div>
+    <div class="psp-card-meta">单选 · 必选</div>
+    <div class="psp-pills">
+      <span class="psp-pill">全糖</span>
+      <span class="psp-pill">七分糖</span>
+      <span class="psp-pill">半糖</span>
+      <span class="psp-pill">三分糖</span>
+      <span class="psp-pill">无糖</span>
+    </div>
+    <div class="psp-card-assoc">已关联 18 个商品</div>
+    <div class="psp-card-ft">
+      <button class="g-action" onclick="openSpecDrawer('edit','甜度')">编辑</button>
+      <button class="g-action">复制</button>
+      <button class="g-action g-action-danger">删除</button>
+    </div>
+  </div>
+
+  <div class="psp-card disabled" data-type="method" data-name="烹饪方式">
+    <div class="psp-card-hd"><span class="name">烹饪方式</span><span class="g-tag g-tag-orange">做法</span><span class="g-tag g-tag-gray">已停用</span></div>
+    <div class="psp-card-meta">单选 · 可选</div>
+    <div class="psp-pills">
+      <span class="psp-pill">清蒸</span>
+      <span class="psp-pill">红烧</span>
+      <span class="psp-pill">干煸</span>
+      <span class="psp-pill">水煮</span>
+    </div>
+    <div class="psp-card-assoc">已关联 6 个商品</div>
+    <div class="psp-card-ft">
+      <button class="g-action" onclick="openSpecDrawer('edit','烹饪方式')">编辑</button>
+      <button class="g-action">复制</button>
+      <button class="g-action g-action-danger">删除</button>
+    </div>
+  </div>
+
+</div>
+
+<!-- 抽屉 -->
+<div class="g-drawer-mask" id="pspDrawerMask" onclick="closeSpecDrawer()"></div>
+<div class="g-drawer" id="pspDrawer" style="width:520px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="pspDrawerTitle">添加模板</span>
+    <button class="g-drawer-close" onclick="closeSpecDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">模板名称</label>
+      <input type="text" class="g-input" id="pspName" placeholder="如：杯型、辣度、甜度">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">模板类型</label>
+      <div class="psp-pill-group" id="pspTypeGroup">
+        <button class="psp-pill-btn active" onclick="selectSpecType(this)" data-val="spec">规格</button>
+        <button class="psp-pill-btn" onclick="selectSpecType(this)" data-val="method">做法</button>
+      </div>
+      <div class="g-hint">规格影响价格和库存，做法仅影响制作方式</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">选择方式</label>
+      <div class="psp-pill-group" id="pspSelectGroup">
+        <button class="psp-pill-btn active" onclick="selectSpecSelect(this)" data-val="single">单选</button>
+        <button class="psp-pill-btn" onclick="selectSpecSelect(this)" data-val="multi">多选</button>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">是否必选</label>
+      <div class="g-toggle-wrap">
+        <label class="g-toggle-input"><input type="checkbox" id="pspRequired" checked><span class="g-toggle-sl"></span></label>
+        <span class="g-toggle-label" id="pspRequiredLabel">是</span>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">选项列表</label>
+      <div class="psp-opt-list" id="pspOptList">
+        <div class="psp-opt-row">
+          <input type="text" placeholder="选项名称，如：大杯" value="大杯">
+          <div class="psp-price-wrap"><span>&yen;</span><input type="number" placeholder="加价金额" value="3"></div>
+          <button class="psp-opt-del" onclick="removeSpecOption(this)">&times;</button>
+        </div>
+        <div class="psp-opt-row">
+          <input type="text" placeholder="选项名称，如：中杯" value="中杯">
+          <div class="psp-price-wrap"><span>&yen;</span><input type="number" placeholder="加价金额"></div>
+          <button class="psp-opt-del" onclick="removeSpecOption(this)">&times;</button>
+        </div>
+        <div class="psp-opt-row">
+          <input type="text" placeholder="选项名称，如：小杯" value="小杯">
+          <div class="psp-price-wrap"><span>&yen;</span><input type="number" placeholder="加价金额" value="-2"></div>
+          <button class="psp-opt-del" onclick="removeSpecOption(this)">&times;</button>
+        </div>
+      </div>
+      <button class="g-btn psp-btn-dashed" onclick="addSpecOption()">+ 添加选项</button>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeSpecDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" id="pspSubmitBtn" onclick="closeSpecDrawer()">确认添加</button>
+  </div>
+</div>
+
+<script>
+function openSpecDrawer(mode, name) {
+  document.getElementById('pspDrawerMask').classList.add('open');
+  document.getElementById('pspDrawer').classList.add('open');
+  if (mode === 'edit') {
+    document.getElementById('pspDrawerTitle').textContent = '编辑模板';
+    document.getElementById('pspSubmitBtn').textContent = '保存修改';
+    if (name) document.getElementById('pspName').value = name;
+  } else {
+    document.getElementById('pspDrawerTitle').textContent = '添加模板';
+    document.getElementById('pspSubmitBtn').textContent = '确认添加';
+    document.getElementById('pspName').value = '';
+  }
+}
+function closeSpecDrawer() {
+  document.getElementById('pspDrawerMask').classList.remove('open');
+  document.getElementById('pspDrawer').classList.remove('open');
+}
+function selectSpecType(el) {
+  el.parentElement.querySelectorAll('.psp-pill-btn').forEach(function(b){ b.classList.remove('active'); });
+  el.classList.add('active');
+}
+function selectSpecSelect(el) {
+  el.parentElement.querySelectorAll('.psp-pill-btn').forEach(function(b){ b.classList.remove('active'); });
+  el.classList.add('active');
+}
+function addSpecOption() {
+  var list = document.getElementById('pspOptList');
+  var row = document.createElement('div');
+  row.className = 'psp-opt-row';
+  row.innerHTML = '<input type="text" placeholder="选项名称">' +
+    '<div class="psp-price-wrap"><span>&yen;</span><input type="number" placeholder="加价金额"></div>' +
+    '<button class="psp-opt-del" onclick="removeSpecOption(this)">&times;</button>';
+  list.appendChild(row);
+}
+function removeSpecOption(el) {
+  var row = el.closest('.psp-opt-row');
+  if (row) row.remove();
+}
+
+/* 筛选 */
+function filterSpecs(type, el) {
+  document.querySelectorAll('.psp-filter-tab').forEach(function(t){ t.classList.remove('active'); });
+  el.classList.add('active');
+  document.querySelectorAll('#pspGrid .psp-card').forEach(function(card) {
+    if (type === 'all') { card.style.display = ''; return; }
+    card.style.display = card.getAttribute('data-type') === type ? '' : 'none';
+  });
+}
+
+/* 搜索 */
+function searchSpecs(keyword) {
+  keyword = keyword.trim().toLowerCase();
+  document.querySelectorAll('#pspGrid .psp-card').forEach(function(card) {
+    var name = card.getAttribute('data-name').toLowerCase();
+    card.style.display = (!keyword || name.indexOf(keyword) > -1) ? '' : 'none';
+  });
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/reviews.html b/TakeoutSaaS.Prototypes/pages/reviews.html
new file mode 100644
index 0000000..b0e6352
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/reviews.html
@@ -0,0 +1,549 @@
+<!-- 评价管理 — reviews.html -->
+<style>
+  /* ---- page-private: rv- prefix ---- */
+  .rv-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 16px 20px;
+    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
+  }
+  .rv-toolbar .g-select,
+  .rv-toolbar .g-input { height: 32px; font-size: 13px; }
+  .rv-search-wrap {
+    position: relative; width: 200px;
+  }
+  .rv-search-wrap .g-input { padding-left: 30px; width: 100%; }
+  .rv-search-wrap i {
+    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+    color: var(--g-text-muted); pointer-events: none;
+  }
+  .rv-toolbar-right { margin-left: auto; }
+  .rv-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
+
+  /* stats row */
+  .rv-stats { display: flex; gap: 16px; margin-top: 12px; }
+  .rv-stat-card {
+    flex: 1; background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 18px 20px; box-shadow: var(--g-shadow-sm);
+    transition: box-shadow var(--g-transition);
+  }
+  .rv-stat-card:hover { box-shadow: var(--g-shadow-md); }
+  .rv-stat-value { font-size: 28px; font-weight: 700; color: var(--g-text); line-height: 1.2; }
+  .rv-stat-value.green { color: var(--g-success); }
+  .rv-stat-value.orange { color: var(--g-warning); }
+  .rv-stat-value.primary { color: var(--primary); }
+  .rv-stat-label { font-size: 12px; color: var(--g-text-muted); margin-top: 6px; }
+  .rv-stat-title { font-size: 13px; color: var(--g-text-secondary); margin-bottom: 8px; font-weight: 500; }
+  .rv-stars-inline { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
+  .rv-stars-inline i { width: 16px; height: 16px; }
+
+  /* distribution card */
+  .rv-dist {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    padding: 20px 24px; margin-top: 12px; box-shadow: var(--g-shadow-sm);
+  }
+  .rv-dist-title {
+    font-size: 15px; font-weight: 600; color: var(--g-text);
+    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 16px;
+  }
+  .rv-dist-row {
+    display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px;
+  }
+  .rv-dist-row:last-child { margin-bottom: 0; }
+  .rv-dist-label { width: 32px; color: var(--g-text-secondary); flex-shrink: 0; text-align: right; }
+  .rv-dist-bar {
+    flex: 1; height: 18px; background: #f5f5f5; border-radius: 9px; overflow: hidden;
+  }
+  .rv-dist-fill {
+    height: 100%; border-radius: 9px; transition: width var(--g-transition);
+  }
+  .rv-dist-fill.green { background: var(--g-success); }
+  .rv-dist-fill.yellow { background: var(--g-warning); }
+  .rv-dist-fill.red { background: var(--g-danger); }
+  .rv-dist-count { width: 36px; color: var(--g-text); font-weight: 500; text-align: right; flex-shrink: 0; }
+  .rv-dist-pct { width: 48px; color: var(--g-text-muted); text-align: right; flex-shrink: 0; }
+
+  /* review list */
+  .rv-list {
+    margin-top: 12px;
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    box-shadow: var(--g-shadow-sm); overflow: hidden;
+  }
+  .rv-list-hd {
+    font-size: 15px; font-weight: 600; color: var(--g-text);
+    padding: 18px 24px 0; margin-bottom: 4px;
+    display: flex; align-items: center;
+    padding-left: 34px;
+  }
+  .rv-list-hd::before {
+    content: ''; display: inline-block; width: 3px; height: 16px;
+    background: var(--primary); border-radius: 2px; margin-right: 10px; margin-left: -10px;
+  }
+  .rv-card {
+    padding: 18px 24px; border-bottom: 1px solid #f5f5f5;
+    transition: background var(--g-transition);
+  }
+  .rv-card:last-child { border-bottom: none; }
+  .rv-card:hover { background: color-mix(in srgb, var(--primary) 2%, #fff); }
+  .rv-card-hd {
+    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
+  }
+  .rv-stars { display: inline-flex; gap: 2px; }
+  .rv-star { width: 14px; height: 14px; }
+  .rv-star.filled { color: #faad14; }
+  .rv-star.empty { color: #e5e7eb; }
+  .rv-star.half { color: #faad14; }
+  .rv-customer { font-size: 13px; font-weight: 500; color: var(--g-text); }
+  .rv-time { font-size: 12px; color: var(--g-text-muted); }
+  .rv-order-link {
+    font-size: 12px; color: var(--primary); cursor: pointer; font-family: monospace;
+    text-decoration: none;
+  }
+  .rv-order-link:hover { text-decoration: underline; }
+  .rv-content { font-size: 13px; color: var(--g-text); line-height: 1.6; margin-bottom: 10px; }
+  .rv-images { display: flex; gap: 8px; margin-bottom: 10px; }
+  .rv-img-placeholder {
+    width: 60px; height: 60px; background: #f5f5f5; border-radius: var(--g-radius-sm);
+    border: 1px solid var(--g-border); display: flex; align-items: center; justify-content: center;
+    font-size: 11px; color: var(--g-text-muted);
+  }
+  .rv-products { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
+  .rv-product-tag {
+    display: inline-block; padding: 2px 10px; border-radius: 12px;
+    background: #f5f5f5; font-size: 12px; color: var(--g-text-secondary); border: 1px solid var(--g-border);
+  }
+  .rv-reply-box {
+    background: var(--g-bg-subtle); border-radius: var(--g-radius-sm);
+    padding: 10px 14px; font-size: 13px; color: var(--g-text-secondary);
+    border: 1px solid var(--g-border); margin-top: 4px;
+  }
+  .rv-reply-prefix { font-weight: 600; color: var(--g-text); margin-right: 4px; }
+  .rv-reply-time { font-size: 11px; color: var(--g-text-muted); margin-top: 4px; }
+
+  /* drawer */
+  .rv-drawer { width: 480px; }
+  .rv-section { margin-bottom: 20px; }
+  .rv-section-hd {
+    font-size: 14px; font-weight: 600; color: var(--g-text);
+    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
+  }
+  .rv-info-row {
+    display: flex; gap: 10px; font-size: 13px; margin-bottom: 8px; align-items: center;
+  }
+  .rv-info-label { color: var(--g-text-muted); width: 70px; flex-shrink: 0; }
+  .rv-info-val { color: var(--g-text); }
+  .rv-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+  .rv-quick-reply {
+    display: inline-block; padding: 5px 12px; border-radius: 14px;
+    border: 1px solid #d9d9d9; font-size: 12px; cursor: pointer;
+    background: #fff; color: var(--g-text-secondary);
+    transition: all var(--g-transition); user-select: none;
+  }
+  .rv-quick-reply:hover {
+    border-color: var(--primary); color: var(--primary);
+    background: color-mix(in srgb, var(--primary) 6%, #fff);
+  }
+</style>
+
+<!-- 顶部筛选栏 -->
+<div class="rv-toolbar">
+  <select class="g-select" style="width:200px;">
+    <option>全部门店</option>
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（望京店）</option>
+    <option>老三家外卖（通州店）</option>
+    <option>老三家外卖（丰台店）</option>
+  </select>
+  <select class="g-select" style="width:120px;" onchange="filterRvStars()">
+    <option>全部评分</option>
+    <option>5星</option>
+    <option>4星</option>
+    <option>3星</option>
+    <option>2星</option>
+    <option>1星</option>
+  </select>
+  <select class="g-select" style="width:120px;">
+    <option>全部状态</option>
+    <option>待回复</option>
+    <option>已回复</option>
+  </select>
+  <input type="date" class="g-input" style="width:145px;" value="2025-01-01">
+  <span class="rv-date-sep">~</span>
+  <input type="date" class="g-input" style="width:145px;" value="2025-02-12">
+  <div class="rv-search-wrap">
+    <i data-lucide="search" style="width:14px;height:14px;"></i>
+    <input class="g-input" placeholder="搜索评价内容/订单号">
+  </div>
+  <div class="rv-toolbar-right">
+    <button class="g-btn">
+      <i data-lucide="download" style="width:14px;height:14px;"></i> 导出
+    </button>
+  </div>
+</div>
+
+<!-- 统计卡片 -->
+<div class="rv-stats">
+  <div class="rv-stat-card">
+    <div class="rv-stat-title">综合评分</div>
+    <div class="rv-stat-value">
+      4.8
+      <span class="rv-stars-inline">
+        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star-half" style="fill:#faad14;color:#faad14;"></i>
+      </span>
+    </div>
+    <div class="rv-stat-label">共 856 条评价</div>
+  </div>
+  <div class="rv-stat-card">
+    <div class="rv-stat-title">好评率</div>
+    <div class="rv-stat-value green">96.2%</div>
+    <div class="rv-stat-label">5星+4星占比</div>
+  </div>
+  <div class="rv-stat-card">
+    <div class="rv-stat-title">待回复</div>
+    <div class="rv-stat-value orange">12</div>
+    <div class="rv-stat-label">建议24小时内回复</div>
+  </div>
+  <div class="rv-stat-card">
+    <div class="rv-stat-title">本月评价</div>
+    <div class="rv-stat-value primary">128</div>
+    <div class="rv-stat-label">较上月 ↑15%</div>
+  </div>
+</div>
+
+<!-- 评分分布 -->
+<div class="rv-dist">
+  <div class="rv-dist-title">评分分布</div>
+  <div class="rv-dist-row">
+    <span class="rv-dist-label">5星</span>
+    <div class="rv-dist-bar"><div class="rv-dist-fill green" style="width:79.4%;"></div></div>
+    <span class="rv-dist-count">680</span>
+    <span class="rv-dist-pct">79.4%</span>
+  </div>
+  <div class="rv-dist-row">
+    <span class="rv-dist-label">4星</span>
+    <div class="rv-dist-bar"><div class="rv-dist-fill green" style="width:16.8%;"></div></div>
+    <span class="rv-dist-count">144</span>
+    <span class="rv-dist-pct">16.8%</span>
+  </div>
+  <div class="rv-dist-row">
+    <span class="rv-dist-label">3星</span>
+    <div class="rv-dist-bar"><div class="rv-dist-fill yellow" style="width:2.1%;"></div></div>
+    <span class="rv-dist-count">18</span>
+    <span class="rv-dist-pct">2.1%</span>
+  </div>
+  <div class="rv-dist-row">
+    <span class="rv-dist-label">2星</span>
+    <div class="rv-dist-bar"><div class="rv-dist-fill red" style="width:0.9%;"></div></div>
+    <span class="rv-dist-count">8</span>
+    <span class="rv-dist-pct">0.9%</span>
+  </div>
+  <div class="rv-dist-row">
+    <span class="rv-dist-label">1星</span>
+    <div class="rv-dist-bar"><div class="rv-dist-fill red" style="width:0.7%;"></div></div>
+    <span class="rv-dist-count">6</span>
+    <span class="rv-dist-pct">0.7%</span>
+  </div>
+</div>
+
+<!-- 评价列表 -->
+<div class="rv-list">
+  <div class="rv-list-hd">评价列表</div>
+
+  <!-- 评价 1: 5星, 已回复 -->
+  <div class="rv-card">
+    <div class="rv-card-hd">
+      <div class="rv-stars">
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+      </div>
+      <span class="rv-customer">张**</span>
+      <span class="rv-time">2025-02-12 12:30</span>
+      <span class="g-tag g-tag-blue">外卖</span>
+      <a class="rv-order-link">#20250212001</a>
+    </div>
+    <div class="rv-content">味道很好，配送也快，下次还会点！</div>
+    <div class="rv-products">
+      <span class="rv-product-tag">宫保鸡丁</span>
+      <span class="rv-product-tag">米饭</span>
+      <span class="rv-product-tag">可乐</span>
+    </div>
+    <div class="rv-reply-box">
+      <span class="rv-reply-prefix">商家回复:</span>感谢您的好评，您的满意是我们最大的动力！期待下次为您服务~
+      <div class="rv-reply-time">2025-02-12 14:00</div>
+    </div>
+  </div>
+
+  <!-- 评价 2: 5星, 已回复 -->
+  <div class="rv-card">
+    <div class="rv-card-hd">
+      <div class="rv-stars">
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+      </div>
+      <span class="rv-customer">李**</span>
+      <span class="rv-time">2025-02-12 11:45</span>
+      <span class="g-tag g-tag-green">自提</span>
+      <a class="rv-order-link">#20250212002</a>
+    </div>
+    <div class="rv-content">套餐很划算，分量足，味道也不错，性价比很高。</div>
+    <div class="rv-products">
+      <span class="rv-product-tag">双人超值套餐</span>
+      <span class="rv-product-tag">酸梅汤</span>
+    </div>
+    <div class="rv-reply-box">
+      <span class="rv-reply-prefix">商家回复:</span>感谢您的支持！我们会继续保持品质，欢迎再次光临！
+      <div class="rv-reply-time">2025-02-12 13:20</div>
+    </div>
+  </div>
+
+  <!-- 评价 3: 4星, 待回复 -->
+  <div class="rv-card">
+    <div class="rv-card-hd">
+      <div class="rv-stars">
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
+      </div>
+      <span class="rv-customer">王**</span>
+      <span class="rv-time">2025-02-11 18:20</span>
+      <span class="g-tag g-tag-orange">堂食</span>
+      <a class="rv-order-link">#20250211008</a>
+      <span class="g-tag g-tag-orange">待回复</span>
+    </div>
+    <div class="rv-content">菜品不错，就是等了比较久，高峰期可以理解，希望能优化一下出餐速度。</div>
+    <div class="rv-products">
+      <span class="rv-product-tag">红烧肉套餐</span>
+      <span class="rv-product-tag">紫菜蛋花汤</span>
+    </div>
+    <div style="margin-top:8px;">
+      <button class="g-btn g-btn-sm" onclick="openRvDrawer('rv3')">
+        <i data-lucide="message-square" style="width:12px;height:12px;"></i> 回复
+      </button>
+    </div>
+  </div>
+
+  <!-- 评价 4: 3星, 待回复, 有图片 -->
+  <div class="rv-card">
+    <div class="rv-card-hd">
+      <div class="rv-stars">
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
+        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
+      </div>
+      <span class="rv-customer">赵**</span>
+      <span class="rv-time">2025-02-11 12:50</span>
+      <span class="g-tag g-tag-blue">外卖</span>
+      <a class="rv-order-link">#20250211005</a>
+      <span class="g-tag g-tag-orange">待回复</span>
+    </div>
+    <div class="rv-content">包装有点漏了，汤洒了一些出来，味道还行但体验打了折扣。</div>
+    <div class="rv-images">
+      <div class="rv-img-placeholder"><i data-lucide="image" style="width:16px;height:16px;"></i></div>
+      <div class="rv-img-placeholder"><i data-lucide="image" style="width:16px;height:16px;"></i></div>
+      <div class="rv-img-placeholder"><i data-lucide="image" style="width:16px;height:16px;"></i></div>
+    </div>
+    <div class="rv-products">
+      <span class="rv-product-tag">番茄牛腩面</span>
+      <span class="rv-product-tag">卤蛋</span>
+    </div>
+    <div style="margin-top:8px;">
+      <button class="g-btn g-btn-sm" onclick="openRvDrawer('rv4')">
+        <i data-lucide="message-square" style="width:12px;height:12px;"></i> 回复
+      </button>
+    </div>
+  </div>
+
+  <!-- 评价 5: 2星, 待回复 -->
+  <div class="rv-card">
+    <div class="rv-card-hd">
+      <div class="rv-stars">
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
+        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
+        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
+      </div>
+      <span class="rv-customer">孙**</span>
+      <span class="rv-time">2025-02-10 19:30</span>
+      <span class="g-tag g-tag-blue">外卖</span>
+      <a class="rv-order-link">#20250210012</a>
+      <span class="g-tag g-tag-orange">待回复</span>
+    </div>
+    <div class="rv-content">配送太慢了，等了将近一个小时，饭都凉了，体验很差。</div>
+    <div class="rv-products">
+      <span class="rv-product-tag">鱼香肉丝盖饭</span>
+      <span class="rv-product-tag">米饭</span>
+    </div>
+    <div style="margin-top:8px;">
+      <button class="g-btn g-btn-sm" onclick="openRvDrawer('rv5')">
+        <i data-lucide="message-square" style="width:12px;height:12px;"></i> 回复
+      </button>
+    </div>
+  </div>
+
+  <!-- 评价 6: 5星, 已回复 -->
+  <div class="rv-card">
+    <div class="rv-card-hd">
+      <div class="rv-stars">
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
+      </div>
+      <span class="rv-customer">周**</span>
+      <span class="rv-time">2025-02-10 12:15</span>
+      <span class="g-tag g-tag-green">自提</span>
+      <a class="rv-order-link">#20250210003</a>
+    </div>
+    <div class="rv-content">每次来都很满意，老顾客了，菜品质量一直很稳定，值得推荐！</div>
+    <div class="rv-products">
+      <span class="rv-product-tag">招牌红烧肉</span>
+      <span class="rv-product-tag">清炒时蔬</span>
+      <span class="rv-product-tag">米饭</span>
+    </div>
+    <div class="rv-reply-box">
+      <span class="rv-reply-prefix">商家回复:</span>感谢老顾客的一直支持！我们会继续努力，期待每次为您服务！
+      <div class="rv-reply-time">2025-02-10 15:30</div>
+    </div>
+  </div>
+</div>
+
+<!-- 分页 -->
+<div class="g-pagination">
+  <span>共 856 条</span>
+  <button class="g-page-btn" disabled>&lt;</button>
+  <button class="g-page-btn active">1</button>
+  <button class="g-page-btn">2</button>
+  <button class="g-page-btn">3</button>
+  <button class="g-page-btn">...</button>
+  <button class="g-page-btn">86</button>
+  <button class="g-page-btn">&gt;</button>
+</div>
+
+<!-- 回复抽屉 -->
+<div class="g-drawer-mask" id="rvDrawerMask" onclick="closeRvDrawer()"></div>
+<div class="g-drawer rv-drawer" id="rvDrawer">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">回复评价</span>
+    <button class="g-drawer-close" onclick="closeRvDrawer()">&times;</button>
+  </div>
+  <div class="g-drawer-bd">
+    <!-- 评价信息 -->
+    <div class="rv-section">
+      <div class="rv-section-hd">评价信息</div>
+      <div class="rv-info-row">
+        <span class="rv-info-label">评分</span>
+        <span class="rv-info-val">
+          <span class="rv-stars">
+            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
+            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
+            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
+            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
+            <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;width:14px;height:14px;"></i>
+          </span>
+        </span>
+      </div>
+      <div class="rv-info-row">
+        <span class="rv-info-label">顾客</span>
+        <span class="rv-info-val">王**</span>
+      </div>
+      <div class="rv-info-row">
+        <span class="rv-info-label">时间</span>
+        <span class="rv-info-val">2025-02-11 18:20</span>
+      </div>
+      <div class="rv-info-row" style="align-items:flex-start;">
+        <span class="rv-info-label">内容</span>
+        <span class="rv-info-val">菜品不错，就是等了比较久，高峰期可以理解，希望能优化一下出餐速度。</span>
+      </div>
+    </div>
+
+    <!-- 关联订单 -->
+    <div class="rv-section">
+      <div class="rv-section-hd">关联订单</div>
+      <div class="rv-info-row">
+        <span class="rv-info-label">订单号</span>
+        <span class="rv-info-val"><a class="rv-order-link">#20250211008</a></span>
+      </div>
+      <div class="rv-info-row">
+        <span class="rv-info-label">渠道</span>
+        <span class="rv-info-val"><span class="g-tag g-tag-orange">堂食</span></span>
+      </div>
+      <div class="rv-info-row">
+        <span class="rv-info-label">金额</span>
+        <span class="rv-info-val" style="font-weight:600;">&yen;68.00</span>
+      </div>
+    </div>
+
+    <!-- 商品 -->
+    <div class="rv-section">
+      <div class="rv-section-hd">商品</div>
+      <div class="rv-products">
+        <span class="rv-product-tag">红烧肉套餐</span>
+        <span class="rv-product-tag">紫菜蛋花汤</span>
+      </div>
+    </div>
+
+    <!-- 回复内容 -->
+    <div class="rv-section">
+      <div class="rv-section-hd">回复内容</div>
+      <div class="g-form-group">
+        <textarea class="g-textarea" id="rvReplyText" rows="4" placeholder="请输入回复内容，建议真诚友好地回应顾客反馈"></textarea>
+      </div>
+      <div class="g-hint" style="margin-bottom:10px;">快捷回复</div>
+      <div class="rv-quick-replies">
+        <span class="rv-quick-reply" onclick="fillQuickReply('感谢您的好评，期待下次光临！')">感谢您的好评，期待下次光临！</span>
+        <span class="rv-quick-reply" onclick="fillQuickReply('非常抱歉给您带来不好的体验，我们会改进！')">非常抱歉给您带来不好的体验，我们会改进！</span>
+        <span class="rv-quick-reply" onclick="fillQuickReply('感谢反馈，已记录并会尽快优化！')">感谢反馈，已记录并会尽快优化！</span>
+        <span class="rv-quick-reply" onclick="fillQuickReply('谢谢支持，欢迎再次光临！')">谢谢支持，欢迎再次光临！</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeRvDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeRvDrawer()">发送回复</button>
+  </div>
+</div>
+
+<script>
+  /* 抽屉开关 */
+  function openRvDrawer(reviewId) {
+    document.getElementById('rvDrawerMask').classList.add('open');
+    document.getElementById('rvDrawer').classList.add('open');
+  }
+  function closeRvDrawer() {
+    document.getElementById('rvDrawerMask').classList.remove('open');
+    document.getElementById('rvDrawer').classList.remove('open');
+    document.getElementById('rvReplyText').value = '';
+  }
+
+  /* 快捷回复 */
+  function fillQuickReply(text) {
+    document.getElementById('rvReplyText').value = text;
+    document.getElementById('rvReplyText').focus();
+  }
+
+  /* 评分筛选（占位） */
+  function filterRvStars() {
+    // 原型占位，无真实逻辑
+  }
+
+  /* 初始化 Lucide 图标 */
+  document.addEventListener('DOMContentLoaded', function() {
+    if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+  });
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/stat-customer.html b/TakeoutSaaS.Prototypes/pages/stat-customer.html
new file mode 100644
index 0000000..02e67eb
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/stat-customer.html
@@ -0,0 +1,281 @@
+<!-- 客户分析 — stat-customer.html -->
+<style>
+  /* ---- page-private: sc- prefix ---- */
+  .sc-page { display:flex; flex-direction:column; gap:14px; }
+
+  /* 顶部统计卡片 */
+  .sc-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+  .sc-kpi {
+    background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border);
+    padding:18px 20px; box-shadow:var(--g-shadow-sm); transition:box-shadow var(--g-transition);
+  }
+  .sc-kpi:hover { box-shadow:var(--g-shadow-md); }
+  .sc-kpi-label { font-size:13px; color:var(--g-text-secondary); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
+  .sc-kpi-label i { width:16px; height:16px; }
+  .sc-kpi-val { font-size:28px; font-weight:700; color:var(--g-text); line-height:1.2; }
+  .sc-kpi-hint { font-size:11px; color:var(--g-text-muted); margin-top:6px; display:flex; align-items:center; gap:4px; }
+  .sc-kpi-hint .up { color:var(--g-success); font-weight:600; }
+  .sc-kpi-hint .down { color:var(--g-danger); font-weight:600; }
+
+  /* 分段Tab */
+  .sc-seg-wrap { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:14px 20px 0; box-shadow:var(--g-shadow-sm); }
+  .sc-tab-panel { display:none; padding:16px 0 20px; }
+  .sc-tab-panel.active { display:block; }
+
+  /* Section 标题 */
+  .sc-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* Tab1: 柱状图 */
+  .sc-chart-wrap { background:#fafafa; border-radius:var(--g-radius); padding:20px; margin-bottom:20px; }
+  .sc-bar-chart { display:flex; align-items:flex-end; gap:16px; height:220px; padding:10px 0; }
+  .sc-bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
+  .sc-bar-pair { display:flex; gap:4px; align-items:flex-end; height:180px; }
+  .sc-bar { width:24px; border-radius:4px 4px 0 0; transition:height 0.5s cubic-bezier(.2,0,0,1); position:relative; cursor:pointer; }
+  .sc-bar:hover { opacity:0.85; }
+  .sc-bar.new-c { background:linear-gradient(180deg,#1890ff,#69c0ff); }
+  .sc-bar.ret-c { background:linear-gradient(180deg,#52c41a,#95de64); }
+  .sc-bar-num { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--g-text-secondary); white-space:nowrap; font-weight:600; }
+  .sc-bar-label { font-size:12px; color:var(--g-text-muted); }
+  .sc-legend { display:flex; gap:16px; justify-content:center; margin-top:10px; font-size:12px; color:var(--g-text-muted); }
+  .sc-legend-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:middle; }
+
+  /* Tab2: RFM */
+  .sc-rfm-info {
+    background:color-mix(in srgb, var(--primary) 6%, #fff); border:1px solid color-mix(in srgb, var(--primary) 15%, #fff);
+    border-radius:var(--g-radius-sm); padding:10px 14px; font-size:12px; color:var(--g-text-secondary); margin-bottom:16px;
+    display:flex; align-items:center; gap:6px;
+  }
+  .sc-rfm-info i { width:16px; height:16px; color:var(--primary); flex-shrink:0; }
+  .sc-rfm-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
+  .sc-rfm-card {
+    border-radius:var(--g-radius); padding:18px; border:1px solid var(--g-border);
+    transition:box-shadow var(--g-transition); position:relative; overflow:hidden;
+  }
+  .sc-rfm-card:hover { box-shadow:var(--g-shadow-md); }
+  .sc-rfm-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
+  .sc-rfm-card.green::before { background:var(--g-success); }
+  .sc-rfm-card.blue::before { background:var(--primary); }
+  .sc-rfm-card.orange::before { background:var(--g-warning); }
+  .sc-rfm-card.red::before { background:var(--g-danger); }
+  .sc-rfm-card.cyan::before { background:#13c2c2; }
+  .sc-rfm-card.gray::before { background:#bfbfbf; }
+  .sc-rfm-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
+  .sc-rfm-desc { font-size:11px; color:var(--g-text-muted); margin-bottom:10px; }
+  .sc-rfm-num { font-size:22px; font-weight:700; color:var(--g-text); }
+  .sc-rfm-pct { font-size:12px; color:var(--g-text-secondary); margin-left:6px; }
+  .sc-rfm-link { font-size:12px; color:var(--primary); cursor:pointer; margin-top:10px; display:inline-block; }
+  .sc-rfm-link:hover { text-decoration:underline; }
+
+  /* Tab3: 流失预警 */
+  .sc-warn-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
+  .sc-warn-card {
+    background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border);
+    padding:16px 18px; text-align:center; box-shadow:var(--g-shadow-sm);
+  }
+  .sc-warn-card-val { font-size:24px; font-weight:700; margin:6px 0 4px; }
+  .sc-warn-card-val.low { color:var(--g-warning); }
+  .sc-warn-card-val.mid { color:#fa541c; }
+  .sc-warn-card-val.high { color:var(--g-danger); }
+  .sc-warn-card-label { font-size:13px; color:var(--g-text-secondary); }
+
+  /* Tab4: 复购周期 - 横向柱状图 */
+  .sc-hbar-wrap { margin-bottom:20px; }
+  .sc-hbar-item { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
+  .sc-hbar-label { width:70px; font-size:13px; color:var(--g-text-secondary); text-align:right; flex-shrink:0; }
+  .sc-hbar-track { flex:1; height:24px; background:#f5f5f5; border-radius:4px; overflow:hidden; position:relative; }
+  .sc-hbar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#1890ff,#69c0ff); transition:width 0.6s cubic-bezier(.2,0,0,1); display:flex; align-items:center; padding-left:8px; }
+  .sc-hbar-fill span { font-size:11px; color:#fff; font-weight:600; white-space:nowrap; }
+  .sc-hbar-val { width:90px; font-size:12px; color:var(--g-text-muted); flex-shrink:0; }
+  .sc-hbar-desc { font-size:12px; color:var(--g-text-muted); margin-bottom:16px; padding:8px 12px; background:#fafafa; border-radius:var(--g-radius-sm); }
+</style>
+
+<div class="sc-page">
+  <!-- 顶部统计卡片 -->
+  <div class="sc-kpi-row">
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="users"></i>累计客户</div>
+      <div class="sc-kpi-val">2,860</div>
+      <div class="sc-kpi-hint">较上月 +210</div>
+    </div>
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="user-plus"></i>本月新客</div>
+      <div class="sc-kpi-val">186</div>
+      <div class="sc-kpi-hint">环比 <span class="up">+12%</span></div>
+    </div>
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="repeat"></i>回头客占比</div>
+      <div class="sc-kpi-val">42.5%</div>
+      <div class="sc-kpi-hint">环比 <span class="up">+3.2%</span></div>
+    </div>
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="calendar-clock"></i>平均消费频次</div>
+      <div class="sc-kpi-val">2.8<span style="font-size:14px;font-weight:400;color:var(--g-text-muted);margin-left:2px">次/月</span></div>
+      <div class="sc-kpi-hint">环比 <span class="up">+0.3</span></div>
+    </div>
+  </div>
+
+  <!-- 分段Tab -->
+  <div class="sc-seg-wrap">
+    <div class="g-seg" style="max-width:420px;">
+      <div class="g-seg-item active" onclick="switchScTab(this,'overview')">客户概览</div>
+      <div class="g-seg-item" onclick="switchScTab(this,'rfm')">RFM分层</div>
+      <div class="g-seg-item" onclick="switchScTab(this,'churn')">流失预警</div>
+      <div class="g-seg-item" onclick="switchScTab(this,'repurchase')">复购周期</div>
+    </div>
+
+    <!-- Tab1: 客户概览 -->
+    <div id="scTabOverview" class="sc-tab-panel active">
+      <div class="sc-section-hd">新客 vs 回头客趋势（近6个月）</div>
+      <div class="sc-chart-wrap">
+        <div class="sc-bar-chart">
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:40%;"><span class="sc-bar-num">120</span></div><div class="sc-bar ret-c" style="height:55%;"><span class="sc-bar-num">165</span></div></div><span class="sc-bar-label">8月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:48%;"><span class="sc-bar-num">145</span></div><div class="sc-bar ret-c" style="height:52%;"><span class="sc-bar-num">156</span></div></div><span class="sc-bar-label">9月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:55%;"><span class="sc-bar-num">168</span></div><div class="sc-bar ret-c" style="height:60%;"><span class="sc-bar-num">180</span></div></div><span class="sc-bar-label">10月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:45%;"><span class="sc-bar-num">138</span></div><div class="sc-bar ret-c" style="height:65%;"><span class="sc-bar-num">195</span></div></div><span class="sc-bar-label">11月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:52%;"><span class="sc-bar-num">158</span></div><div class="sc-bar ret-c" style="height:70%;"><span class="sc-bar-num">210</span></div></div><span class="sc-bar-label">12月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:60%;"><span class="sc-bar-num">186</span></div><div class="sc-bar ret-c" style="height:72%;"><span class="sc-bar-num">218</span></div></div><span class="sc-bar-label">1月</span></div>
+        </div>
+        <div class="sc-legend">
+          <span><span class="sc-legend-dot" style="background:#1890ff;"></span>新客</span>
+          <span><span class="sc-legend-dot" style="background:#52c41a;"></span>回头客</span>
+        </div>
+      </div>
+
+      <div class="sc-section-hd">客单价分布</div>
+      <table class="g-table">
+        <thead><tr><th>价格区间</th><th>客户数</th><th>占比</th><th>累计占比</th></tr></thead>
+        <tbody>
+          <tr><td>0 - 20 元</td><td>286</td><td>10.0%</td><td>10.0%</td></tr>
+          <tr><td>20 - 40 元</td><td>915</td><td>32.0%</td><td>42.0%</td></tr>
+          <tr><td>40 - 60 元</td><td>743</td><td>26.0%</td><td>68.0%</td></tr>
+          <tr><td>60 - 80 元</td><td>486</td><td>17.0%</td><td>85.0%</td></tr>
+          <tr><td>80 - 100 元</td><td>258</td><td>9.0%</td><td>94.0%</td></tr>
+          <tr><td>100 元以上</td><td>172</td><td>6.0%</td><td>100.0%</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab2: RFM分层 -->
+    <div id="scTabRfm" class="sc-tab-panel">
+      <div class="sc-section-hd">RFM 客户分层</div>
+      <div class="sc-rfm-info">
+        <i data-lucide="info"></i>
+        RFM 模型基于三个维度对客户进行分层：最近消费时间（Recency）、消费频率（Frequency）、消费金额（Monetary），帮助识别高价值客户并制定差异化运营策略。
+      </div>
+      <div class="sc-rfm-grid">
+        <div class="sc-rfm-card green">
+          <div class="sc-rfm-name">重要价值客户</div>
+          <div class="sc-rfm-desc">R高 F高 M高</div>
+          <div><span class="sc-rfm-num">320</span><span class="sc-rfm-pct">人，占 11.2%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card blue">
+          <div class="sc-rfm-name">重要发展客户</div>
+          <div class="sc-rfm-desc">R高 F低 M高</div>
+          <div><span class="sc-rfm-num">186</span><span class="sc-rfm-pct">人，占 6.5%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card orange">
+          <div class="sc-rfm-name">重要保持客户</div>
+          <div class="sc-rfm-desc">R低 F高 M高</div>
+          <div><span class="sc-rfm-num">245</span><span class="sc-rfm-pct">人，占 8.6%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card red">
+          <div class="sc-rfm-name">重要挽留客户</div>
+          <div class="sc-rfm-desc">R低 F低 M高</div>
+          <div><span class="sc-rfm-num">128</span><span class="sc-rfm-pct">人，占 4.5%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card cyan">
+          <div class="sc-rfm-name">一般价值客户</div>
+          <div class="sc-rfm-desc">R高 F高 M低</div>
+          <div><span class="sc-rfm-num">580</span><span class="sc-rfm-pct">人，占 20.3%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card gray">
+          <div class="sc-rfm-name">一般客户</div>
+          <div class="sc-rfm-desc">其他组合</div>
+          <div><span class="sc-rfm-num">1,401</span><span class="sc-rfm-pct">人，占 49.0%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab3: 流失预警 -->
+    <div id="scTabChurn" class="sc-tab-panel">
+      <div class="sc-section-hd">流失预警</div>
+      <div class="sc-warn-row">
+        <div class="sc-warn-card">
+          <div class="sc-warn-card-label">30天未消费</div>
+          <div class="sc-warn-card-val low">186</div>
+          <div style="font-size:11px;color:var(--g-text-muted);">人</div>
+        </div>
+        <div class="sc-warn-card">
+          <div class="sc-warn-card-label">60天未消费</div>
+          <div class="sc-warn-card-val mid">95</div>
+          <div style="font-size:11px;color:var(--g-text-muted);">人</div>
+        </div>
+        <div class="sc-warn-card">
+          <div class="sc-warn-card-label">90天+未消费</div>
+          <div class="sc-warn-card-val high">42</div>
+          <div style="font-size:11px;color:var(--g-text-muted);">人</div>
+        </div>
+      </div>
+
+      <table class="g-table">
+        <thead>
+          <tr><th>客户名</th><th>手机号</th><th>最后消费时间</th><th>累计消费</th><th>未消费天数</th><th>流失风险</th><th>操作</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>张*明</td><td>138****6721</td><td>2025-11-02</td><td>&yen;1,280</td><td>92</td><td><span class="g-tag g-tag-red">高</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>李*华</td><td>159****3348</td><td>2025-11-18</td><td>&yen;860</td><td>76</td><td><span class="g-tag g-tag-red">高</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>王*</td><td>136****9012</td><td>2025-12-05</td><td>&yen;2,150</td><td>59</td><td><span class="g-tag g-tag-orange">中</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>赵*丽</td><td>188****4567</td><td>2025-12-12</td><td>&yen;560</td><td>52</td><td><span class="g-tag g-tag-orange">中</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>陈*</td><td>177****8901</td><td>2025-12-28</td><td>&yen;3,420</td><td>36</td><td><span class="g-tag g-tag-blue">低</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>刘*强</td><td>155****2345</td><td>2026-01-03</td><td>&yen;720</td><td>30</td><td><span class="g-tag g-tag-blue">低</span></td><td><a class="g-action">发券挽回</a></td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab4: 复购周期 -->
+    <div id="scTabRepurchase" class="sc-tab-panel">
+      <div class="sc-section-hd">复购周期分布</div>
+      <div class="sc-hbar-desc">分析客户两次消费之间的间隔天数分布，帮助制定精准的复购提醒策略。</div>
+      <div class="sc-hbar-wrap">
+        <div class="sc-hbar-item"><span class="sc-hbar-label">1-3 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:65%;"><span>486人</span></div></div><span class="sc-hbar-val">占 32.4%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">4-7 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:50%;"><span>375人</span></div></div><span class="sc-hbar-val">占 25.0%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">8-14 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:30%;"><span>225人</span></div></div><span class="sc-hbar-val">占 15.0%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">15-30 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:25%;"><span>210人</span></div></div><span class="sc-hbar-val">占 14.0%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">30 天+</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:17%;background:linear-gradient(90deg,#fa8c16,#ffc069);"><span>204人</span></div></div><span class="sc-hbar-val">占 13.6%</span></div>
+      </div>
+
+      <div class="sc-section-hd">复购率趋势（近6个月）</div>
+      <table class="g-table">
+        <thead><tr><th>月份</th><th>总客户</th><th>复购客户</th><th>复购率</th><th>环比</th></tr></thead>
+        <tbody>
+          <tr><td>2025-08</td><td>680</td><td>245</td><td>36.0%</td><td>—</td></tr>
+          <tr><td>2025-09</td><td>720</td><td>268</td><td>37.2%</td><td><span style="color:var(--g-success)">+1.2%</span></td></tr>
+          <tr><td>2025-10</td><td>785</td><td>306</td><td>39.0%</td><td><span style="color:var(--g-success)">+1.8%</span></td></tr>
+          <tr><td>2025-11</td><td>810</td><td>324</td><td>40.0%</td><td><span style="color:var(--g-success)">+1.0%</span></td></tr>
+          <tr><td>2025-12</td><td>856</td><td>350</td><td>40.9%</td><td><span style="color:var(--g-success)">+0.9%</span></td></tr>
+          <tr><td>2026-01</td><td>892</td><td>379</td><td>42.5%</td><td><span style="color:var(--g-success)">+1.6%</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchScTab(el, tab) {
+    el.closest('.g-seg').querySelectorAll('.g-seg-item').forEach(function(s) { s.classList.remove('active'); });
+    el.classList.add('active');
+    document.querySelectorAll('.sc-tab-panel').forEach(function(p) { p.classList.remove('active'); });
+    var map = { overview:'scTabOverview', rfm:'scTabRfm', churn:'scTabChurn', repurchase:'scTabRepurchase' };
+    document.getElementById(map[tab]).classList.add('active');
+  }
+
+  /* Lucide Icons */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/stat-marketing.html b/TakeoutSaaS.Prototypes/pages/stat-marketing.html
new file mode 100644
index 0000000..0954009
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/stat-marketing.html
@@ -0,0 +1,475 @@
+<!-- 营销分析 -->
+<style>
+  .sma-page { display:flex; flex-direction:column; gap:16px; }
+
+  /* 顶部统计卡片 */
+  .sma-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+  .sma-kpi { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:18px 20px; display:flex; flex-direction:column; gap:10px; transition:var(--g-transition); }
+  .sma-kpi:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .sma-kpi-top { display:flex; align-items:center; justify-content:space-between; }
+  .sma-kpi-label { font-size:13px; color:var(--g-text-secondary); }
+  .sma-kpi-icon { width:36px; height:36px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .sma-kpi-icon.blue { background:hsl(212,100%,95%); color:hsl(212,100%,45%); }
+  .sma-kpi-icon.orange { background:#fffbeb; color:var(--g-warning); }
+  .sma-kpi-icon.green { background:#f0fdf4; color:var(--g-success); }
+  .sma-kpi-icon.purple { background:#f5f3ff; color:#7c3aed; }
+  .sma-kpi-value { font-size:26px; font-weight:800; color:var(--g-text); letter-spacing:-0.5px; }
+  .sma-kpi-sub { font-size:12px; color:var(--g-text-muted); }
+
+  /* Section 标题 */
+  .sma-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* Tab 内容区 */
+  .sma-tab-panel { display:none; }
+  .sma-tab-panel.active { display:block; }
+
+  /* 小统计卡片行 */
+  .sma-mini-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
+  .sma-mini { background:#f8f9fb; border-radius:var(--g-radius); padding:16px 20px; text-align:center; border:1px solid var(--g-border); }
+  .sma-mini-label { font-size:12px; color:var(--g-text-muted); margin-bottom:6px; }
+  .sma-mini-val { font-size:22px; font-weight:700; color:var(--g-text); }
+
+  /* ROI 颜色 */
+  .sma-roi-good { color:var(--g-success); font-weight:600; }
+  .sma-roi-bad { color:var(--g-danger); font-weight:600; }
+  .sma-roi-mid { color:var(--g-warning); font-weight:600; }
+
+  /* 核销率进度条 */
+  .sma-progress { display:flex; align-items:center; gap:8px; }
+  .sma-progress-bg { width:80px; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
+  .sma-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,hsl(212,100%,45%),hsl(212,100%,65%)); }
+
+  /* 漏斗图 */
+  .sma-funnel-wrap { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
+  .sma-funnel { display:flex; flex-direction:column; align-items:center; gap:0; padding:20px 0; }
+  .sma-funnel-step { display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:600; transition:var(--g-transition); position:relative; height:52px; border-radius:4px; }
+  .sma-funnel-step:hover { filter:brightness(1.08); }
+  .sma-funnel-step .sma-funnel-num { font-size:12px; font-weight:400; opacity:0.85; margin-left:6px; }
+  .sma-funnel-arrow { font-size:11px; color:var(--g-text-muted); padding:4px 0; display:flex; align-items:center; gap:4px; }
+  .sma-funnel-arrow i { color:var(--g-text-muted); }
+
+  /* 转化对比表 */
+  .sma-compare-title { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:12px; }
+  .sma-change-up { color:var(--g-success); font-size:12px; }
+  .sma-change-down { color:var(--g-danger); font-size:12px; }
+
+  /* 动画 */
+  @keyframes smaFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+  .sma-page > * { animation:smaFadeIn 0.4s ease both; }
+  .sma-page > *:nth-child(2) { animation-delay:0.05s; }
+  .sma-page > *:nth-child(3) { animation-delay:0.1s; }
+</style>
+
+<div class="sma-page">
+
+  <!-- 1. 顶部 KPI 卡片 -->
+  <div class="sma-kpi-row">
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">进行中活动</span>
+        <div class="sma-kpi-icon blue"><i data-lucide="megaphone" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">6</div>
+      <div class="sma-kpi-sub">较上月 +2 个</div>
+    </div>
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">本月优惠总额</span>
+        <div class="sma-kpi-icon orange"><i data-lucide="ticket" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">&yen;6,200</div>
+      <div class="sma-kpi-sub">覆盖 1,840 笔订单</div>
+    </div>
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">平均核销率</span>
+        <div class="sma-kpi-icon green"><i data-lucide="check-circle" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">68.5%</div>
+      <div class="sma-kpi-sub">行业均值 55%</div>
+    </div>
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">营销 ROI</span>
+        <div class="sma-kpi-icon purple"><i data-lucide="trending-up" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">3.2x</div>
+      <div class="sma-kpi-sub">每投入 1 元带来 3.2 元收入</div>
+    </div>
+  </div>
+
+  <!-- 2. 分段 Tab -->
+  <div class="g-card" style="padding:20px;">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
+      <div class="sma-section-hd" style="margin-bottom:0;">营销数据分析</div>
+      <div class="g-seg">
+        <div class="g-seg-item active" onclick="smaTab(this,0)">活动效果</div>
+        <div class="g-seg-item" onclick="smaTab(this,1)">优惠券统计</div>
+        <div class="g-seg-item" onclick="smaTab(this,2)">次卡分析</div>
+        <div class="g-seg-item" onclick="smaTab(this,3)">转化漏斗</div>
+      </div>
+    </div>
+
+    <!-- Tab1: 活动效果 -->
+    <div class="sma-tab-panel active" id="smaPanel0">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>活动名称</th>
+            <th>类型</th>
+            <th>时间范围</th>
+            <th>参与订单</th>
+            <th>优惠金额</th>
+            <th>带动销售额</th>
+            <th>ROI</th>
+            <th>状态</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>午市满减狂欢</td>
+            <td><span class="g-tag g-tag-blue">满减</span></td>
+            <td>02/01 - 02/28</td>
+            <td>520</td>
+            <td>&yen;1,560</td>
+            <td>&yen;6,240</td>
+            <td><span class="sma-roi-good">4.0x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>新品尝鲜第二份半价</td>
+            <td><span class="g-tag g-tag-purple">第二份半价</span></td>
+            <td>02/05 - 02/20</td>
+            <td>310</td>
+            <td>&yen;930</td>
+            <td>&yen;3,720</td>
+            <td><span class="sma-roi-good">4.0x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>情人节限时折扣</td>
+            <td><span class="g-tag g-tag-orange">限时折扣</span></td>
+            <td>02/13 - 02/15</td>
+            <td>280</td>
+            <td>&yen;840</td>
+            <td>&yen;2,800</td>
+            <td><span class="sma-roi-good">3.3x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>周末满赠甜品</td>
+            <td><span class="g-tag g-tag-green">满赠</span></td>
+            <td>02/01 - 02/28</td>
+            <td>190</td>
+            <td>&yen;570</td>
+            <td>&yen;1,900</td>
+            <td><span class="sma-roi-good">3.3x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>春节秒杀专场</td>
+            <td><span class="g-tag g-tag-red">秒杀</span></td>
+            <td>01/28 - 02/02</td>
+            <td>450</td>
+            <td>&yen;1,350</td>
+            <td>&yen;3,600</td>
+            <td><span class="sma-roi-mid">2.7x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+          <tr>
+            <td>元旦满减回馈</td>
+            <td><span class="g-tag g-tag-blue">满减</span></td>
+            <td>12/30 - 01/03</td>
+            <td>380</td>
+            <td>&yen;1,140</td>
+            <td>&yen;3,420</td>
+            <td><span class="sma-roi-good">3.0x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+          <tr>
+            <td>冬季暖饮折扣</td>
+            <td><span class="g-tag g-tag-orange">限时折扣</span></td>
+            <td>12/15 - 01/15</td>
+            <td>620</td>
+            <td>&yen;1,860</td>
+            <td>&yen;4,960</td>
+            <td><span class="sma-roi-mid">2.7x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+          <tr>
+            <td>双12秒杀狂欢</td>
+            <td><span class="g-tag g-tag-red">秒杀</span></td>
+            <td>12/10 - 12/13</td>
+            <td>260</td>
+            <td>&yen;1,040</td>
+            <td>&yen;1,820</td>
+            <td><span class="sma-roi-bad">1.8x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab2: 优惠券统计 -->
+    <div class="sma-tab-panel" id="smaPanel1">
+      <div class="sma-mini-row">
+        <div class="sma-mini">
+          <div class="sma-mini-label">已发放</div>
+          <div class="sma-mini-val">1,200 张</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">已使用</div>
+          <div class="sma-mini-val">820 张</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">核销率</div>
+          <div class="sma-mini-val">68.3%</div>
+        </div>
+      </div>
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>券名称</th>
+            <th>类型</th>
+            <th>面值</th>
+            <th>发放数</th>
+            <th>使用数</th>
+            <th>核销率</th>
+            <th>带动消费</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>满50减10元券</td>
+            <td><span class="g-tag g-tag-blue">满减券</span></td>
+            <td>&yen;10</td>
+            <td>400</td>
+            <td>312</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:78%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">78.0%</span>
+              </div>
+            </td>
+            <td>&yen;18,720</td>
+          </tr>
+          <tr>
+            <td>8折优享券</td>
+            <td><span class="g-tag g-tag-purple">折扣券</span></td>
+            <td>8折</td>
+            <td>300</td>
+            <td>198</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:66%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">66.0%</span>
+              </div>
+            </td>
+            <td>&yen;11,880</td>
+          </tr>
+          <tr>
+            <td>新人免费甜品券</td>
+            <td><span class="g-tag g-tag-green">免费券</span></td>
+            <td>&yen;18</td>
+            <td>200</td>
+            <td>156</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:78%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">78.0%</span>
+              </div>
+            </td>
+            <td>&yen;6,240</td>
+          </tr>
+          <tr>
+            <td>满80减15元券</td>
+            <td><span class="g-tag g-tag-blue">满减券</span></td>
+            <td>&yen;15</td>
+            <td>200</td>
+            <td>108</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:54%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">54.0%</span>
+              </div>
+            </td>
+            <td>&yen;8,640</td>
+          </tr>
+          <tr>
+            <td>午市专享7折券</td>
+            <td><span class="g-tag g-tag-purple">折扣券</span></td>
+            <td>7折</td>
+            <td>100</td>
+            <td>46</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:46%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">46.0%</span>
+              </div>
+            </td>
+            <td>&yen;3,220</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab3: 次卡分析 -->
+    <div class="sma-tab-panel" id="smaPanel2">
+      <div class="sma-mini-row">
+        <div class="sma-mini">
+          <div class="sma-mini-label">在售次卡</div>
+          <div class="sma-mini-val">3 种</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">已售出</div>
+          <div class="sma-mini-val">156 张</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">总使用次数</div>
+          <div class="sma-mini-val">1,280 次</div>
+        </div>
+      </div>
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>次卡名称</th>
+            <th>售价</th>
+            <th>已售</th>
+            <th>总使用次数</th>
+            <th>平均使用率</th>
+            <th>剩余未用次数</th>
+            <th>收入</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>咖啡月卡</td>
+            <td>&yen;128</td>
+            <td>86 张</td>
+            <td>720 次</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:83.7%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">83.7%</span>
+              </div>
+            </td>
+            <td>140 次</td>
+            <td>&yen;11,008</td>
+          </tr>
+          <tr>
+            <td>甜品5次卡</td>
+            <td>&yen;68</td>
+            <td>42 张</td>
+            <td>340 次</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:72%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">72.0%</span>
+              </div>
+            </td>
+            <td>60 次</td>
+            <td>&yen;2,856</td>
+          </tr>
+          <tr>
+            <td>午餐10次卡</td>
+            <td>&yen;188</td>
+            <td>28 张</td>
+            <td>220 次</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:78.6%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">78.6%</span>
+              </div>
+            </td>
+            <td>60 次</td>
+            <td>&yen;5,264</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab4: 转化漏斗 -->
+    <div class="sma-tab-panel" id="smaPanel3">
+      <div class="sma-funnel-wrap">
+        <!-- 左侧漏斗图 -->
+        <div>
+          <div class="sma-funnel">
+            <div class="sma-funnel-step" style="width:100%;background:linear-gradient(135deg,#1890ff,#096dd9);">浏览店铺 <span class="sma-funnel-num">12,000 (100%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 40.0%</div>
+            <div class="sma-funnel-step" style="width:82%;background:linear-gradient(135deg,#36a3f7,#1890ff);">加入购物车 <span class="sma-funnel-num">4,800 (40%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 75.0%</div>
+            <div class="sma-funnel-step" style="width:64%;background:linear-gradient(135deg,#52c41a,#389e0d);">提交订单 <span class="sma-funnel-num">3,600 (30%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 95.0%</div>
+            <div class="sma-funnel-step" style="width:52%;background:linear-gradient(135deg,#73d13d,#52c41a);">完成支付 <span class="sma-funnel-num">3,420 (28.5%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 42.4%</div>
+            <div class="sma-funnel-step" style="width:38%;background:linear-gradient(135deg,#faad14,#d48806);">复购 <span class="sma-funnel-num">1,450 (12.1%)</span></div>
+          </div>
+        </div>
+
+        <!-- 右侧转化率对比表 -->
+        <div>
+          <div class="sma-compare-title">转化率环比对比</div>
+          <table class="g-table">
+            <thead>
+              <tr>
+                <th>阶段</th>
+                <th>本月</th>
+                <th>上月</th>
+                <th>变化</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>浏览 → 加购</td>
+                <td>40.0%</td>
+                <td>36.5%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +3.5%</span></td>
+              </tr>
+              <tr>
+                <td>加购 → 下单</td>
+                <td>75.0%</td>
+                <td>72.0%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +3.0%</span></td>
+              </tr>
+              <tr>
+                <td>下单 → 支付</td>
+                <td>95.0%</td>
+                <td>93.8%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +1.2%</span></td>
+              </tr>
+              <tr>
+                <td>支付 → 复购</td>
+                <td>42.4%</td>
+                <td>44.1%</td>
+                <td><span class="sma-change-down"><i data-lucide="trending-down" style="width:12px;height:12px;vertical-align:middle"></i> -1.7%</span></td>
+              </tr>
+              <tr>
+                <td>整体转化</td>
+                <td>12.1%</td>
+                <td>10.8%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +1.3%</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function smaTab(el, idx) {
+    var items = el.parentElement.querySelectorAll('.g-seg-item');
+    items.forEach(function(item) { item.classList.remove('active'); });
+    el.classList.add('active');
+    for (var i = 0; i < 4; i++) {
+      var panel = document.getElementById('smaPanel' + i);
+      if (panel) panel.classList.toggle('active', i === idx);
+    }
+  }
+
+  /* 初始化 Lucide 图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/stat-order.html b/TakeoutSaaS.Prototypes/pages/stat-order.html
new file mode 100644
index 0000000..f2c9e34
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/stat-order.html
@@ -0,0 +1,299 @@
+<!-- 订单分析 stat-order -->
+<style>
+  .so-page { display:flex; flex-direction:column; gap:20px; }
+
+  /* 筛选栏 */
+  .so-filter { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
+  .so-date-input { height:34px; padding:0 10px; border:1px solid var(--g-border); border-radius:var(--g-radius-sm); font-size:13px; color:var(--g-text); outline:none; transition:var(--g-transition); }
+  .so-date-input:focus { border-color:var(--primary); }
+  .so-date-sep { color:var(--g-text-muted); font-size:13px; }
+  .so-quick-btns { display:flex; gap:6px; }
+  .so-quick-btn { height:30px; padding:0 12px; border:1px solid var(--g-border); border-radius:var(--g-radius-sm); background:#fff; font-size:12px; color:var(--g-text-secondary); cursor:pointer; transition:var(--g-transition); }
+  .so-quick-btn:hover { border-color:var(--primary); color:var(--primary); }
+  .so-quick-btn.active { background:var(--primary-light); border-color:var(--primary); color:var(--primary); font-weight:500; }
+  .so-channel-btns { display:flex; gap:0; margin-left:auto; }
+  .so-channel-btn { height:30px; padding:0 14px; border:1px solid var(--g-border); background:#fff; font-size:12px; color:var(--g-text-secondary); cursor:pointer; transition:var(--g-transition); }
+  .so-channel-btn:first-child { border-radius:var(--g-radius-sm) 0 0 var(--g-radius-sm); }
+  .so-channel-btn:last-child { border-radius:0 var(--g-radius-sm) var(--g-radius-sm) 0; }
+  .so-channel-btn + .so-channel-btn { border-left:none; }
+  .so-channel-btn:hover { color:var(--primary); }
+  .so-channel-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
+
+  /* 统计卡片 */
+  .so-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
+  .so-kpi { border-radius:var(--g-radius); padding:20px 24px; background:#fff; border:1px solid var(--g-border); transition:var(--g-transition); display:flex; flex-direction:column; gap:8px; }
+  .so-kpi:hover { box-shadow:var(--g-shadow-md); }
+  .so-kpi-label { font-size:13px; color:var(--g-text-muted); display:flex; align-items:center; gap:6px; }
+  .so-kpi-label i { width:16px; height:16px; }
+  .so-kpi-value { font-size:28px; font-weight:700; color:var(--g-text); letter-spacing:-0.5px; }
+  .so-kpi-sub { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
+  .so-kpi-sub .up { color:var(--g-success); font-weight:500; }
+  .so-kpi-sub .down { color:var(--g-danger); font-weight:500; }
+
+  /* Section 标题 */
+  .so-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* 趋势图 */
+  .so-chart-wrap { position:relative; }
+  .so-chart-svg { width:100%; height:220px; }
+  .so-chart-summary { display:flex; gap:32px; margin-top:12px; }
+  .so-chart-stat { font-size:13px; color:var(--g-text-secondary); }
+  .so-chart-stat strong { color:var(--g-text); font-weight:600; }
+
+  /* 热力图 */
+  .so-heat-wrap { display:flex; gap:20px; align-items:flex-start; }
+  .so-heat-grid { display:grid; grid-template-columns:48px repeat(14, 36px); gap:2px; }
+  .so-heat-header { font-size:11px; color:var(--g-text-muted); display:flex; align-items:center; justify-content:center; height:20px; }
+  .so-heat-row-label { font-size:12px; color:var(--g-text-secondary); display:flex; align-items:center; height:28px; }
+  .so-heat-cell { width:36px; height:28px; border-radius:3px; transition:var(--g-transition); cursor:default; }
+  .so-heat-cell:hover { outline:2px solid var(--primary); outline-offset:-1px; }
+  .so-heat-l0 { background:hsl(212,60%,95%); }
+  .so-heat-l1 { background:hsl(212,70%,82%); }
+  .so-heat-l2 { background:hsl(212,80%,65%); }
+  .so-heat-l3 { background:hsl(212,90%,45%); }
+  .so-heat-legend { display:flex; flex-direction:column; gap:6px; padding-top:24px; }
+  .so-heat-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--g-text-secondary); }
+  .so-heat-legend-dot { width:16px; height:12px; border-radius:2px; }
+
+  /* 渠道对比 */
+  .so-channel-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
+  .so-ch-card { border-radius:var(--g-radius); padding:24px; background:#fff; border:1px solid var(--g-border); transition:var(--g-transition); }
+  .so-ch-card:hover { box-shadow:var(--g-shadow-md); }
+  .so-ch-hd { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
+  .so-ch-icon { width:36px; height:36px; border-radius:var(--g-radius-sm); display:flex; align-items:center; justify-content:center; }
+  .so-ch-icon.waimai { background:hsl(212,100%,95%); color:var(--primary); }
+  .so-ch-icon.ziti { background:hsl(150,60%,94%); color:var(--g-success); }
+  .so-ch-icon.tangshi { background:hsl(30,90%,94%); color:var(--g-warning); }
+  .so-ch-name { font-size:15px; font-weight:600; color:var(--g-text); }
+  .so-ch-metrics { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
+  .so-ch-metric { display:flex; justify-content:space-between; font-size:13px; }
+  .so-ch-metric-label { color:var(--g-text-muted); }
+  .so-ch-metric-val { color:var(--g-text); font-weight:500; }
+  .so-ch-bar-bg { height:8px; background:#f0f0f0; border-radius:4px; overflow:hidden; }
+  .so-ch-bar-fill { height:100%; border-radius:4px; transition:width 0.6s cubic-bezier(.2,0,0,1); }
+  .so-ch-bar-fill.waimai { background:linear-gradient(90deg,#1890ff,#69c0ff); }
+  .so-ch-bar-fill.ziti { background:linear-gradient(90deg,#52c41a,#95de64); }
+  .so-ch-bar-fill.tangshi { background:linear-gradient(90deg,#fa8c16,#ffc069); }
+</style>
+
+<div class="so-page" style="padding:4px 0;">
+
+  <!-- 顶部筛选 -->
+  <div class="g-card" style="padding:16px 20px;">
+    <div class="so-filter">
+      <input type="date" class="so-date-input" value="2026-01-30">
+      <span class="so-date-sep">至</span>
+      <input type="date" class="so-date-input" value="2026-02-12">
+      <div class="so-quick-btns">
+        <button class="so-quick-btn" onclick="pickQuick(this)">今天</button>
+        <button class="so-quick-btn" onclick="pickQuick(this)">近7天</button>
+        <button class="so-quick-btn active" onclick="pickQuick(this)">近14天</button>
+        <button class="so-quick-btn" onclick="pickQuick(this)">本月</button>
+      </div>
+      <div class="so-channel-btns">
+        <button class="so-channel-btn active" onclick="pickChannel(this)">全部</button>
+        <button class="so-channel-btn" onclick="pickChannel(this)">外卖</button>
+        <button class="so-channel-btn" onclick="pickChannel(this)">自提</button>
+        <button class="so-channel-btn" onclick="pickChannel(this)">堂食</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="so-kpi-row">
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="file-text" style="width:16px;height:16px;"></i> 总订单数</div>
+      <div class="so-kpi-value">3,420</div>
+      <div class="so-kpi-sub">较上期 <span class="up">+5.2%</span></div>
+    </div>
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="circle-check" style="width:16px;height:16px;"></i> 有效订单</div>
+      <div class="so-kpi-value">3,286</div>
+      <div class="so-kpi-sub">完成率 <strong style="color:var(--g-success);">96.1%</strong></div>
+    </div>
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="banknote" style="width:16px;height:16px;"></i> 总销售额</div>
+      <div class="so-kpi-value">¥128,600</div>
+      <div class="so-kpi-sub">较上期 <span class="up">+8.7%</span></div>
+    </div>
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="receipt" style="width:16px;height:16px;"></i> 平均客单价</div>
+      <div class="so-kpi-value">¥39.1</div>
+      <div class="so-kpi-sub">环比 <span class="up">+2.3%</span></div>
+    </div>
+  </div>
+
+  <!-- 区块1: 订单趋势 -->
+  <div class="g-card" style="padding:20px 24px;">
+    <div class="so-section-hd">订单趋势</div>
+    <div class="so-chart-wrap">
+      <svg class="so-chart-svg" viewBox="0 0 700 200" preserveAspectRatio="none">
+        <!-- 网格线 -->
+        <line x1="40" y1="10" x2="40" y2="170" stroke="#f0f0f0" stroke-width="1"/>
+        <line x1="40" y1="170" x2="690" y2="170" stroke="#f0f0f0" stroke-width="1"/>
+        <line x1="40" y1="130" x2="690" y2="130" stroke="#f5f5f5" stroke-width="1" stroke-dasharray="4"/>
+        <line x1="40" y1="90" x2="690" y2="90" stroke="#f5f5f5" stroke-width="1" stroke-dasharray="4"/>
+        <line x1="40" y1="50" x2="690" y2="50" stroke="#f5f5f5" stroke-width="1" stroke-dasharray="4"/>
+        <!-- Y轴标签 -->
+        <text x="34" y="174" text-anchor="end" font-size="10" fill="#999">100</text>
+        <text x="34" y="134" text-anchor="end" font-size="10" fill="#999">200</text>
+        <text x="34" y="94" text-anchor="end" font-size="10" fill="#999">300</text>
+        <text x="34" y="54" text-anchor="end" font-size="10" fill="#999">400</text>
+        <!-- 面积 -->
+        <polygon points="87,98 133,106 180,112 226,118 273,130 319,148 366,138 412,78 459,92 505,102 552,96 598,108 645,104 690,100 690,170 87,170"
+          fill="url(#soGrad)" opacity="0.15"/>
+        <defs>
+          <linearGradient id="soGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="hsl(212,100%,45%)"/>
+            <stop offset="100%" stop-color="hsl(212,100%,45%)" stop-opacity="0"/>
+          </linearGradient>
+        </defs>
+        <!-- 折线 -->
+        <polyline points="87,98 133,106 180,112 226,118 273,130 319,148 366,138 412,78 459,92 505,102 552,96 598,108 645,104 690,100"
+          fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
+        <!-- 关键数据点 -->
+        <circle cx="319" cy="148" r="4" fill="#fff" stroke="var(--g-danger)" stroke-width="2"/>
+        <text x="319" y="164" text-anchor="middle" font-size="10" fill="var(--g-danger)">186</text>
+        <circle cx="412" cy="78" r="4" fill="#fff" stroke="var(--g-success)" stroke-width="2"/>
+        <text x="412" y="72" text-anchor="middle" font-size="10" fill="var(--g-success)">312</text>
+        <circle cx="690" cy="100" r="4" fill="#fff" stroke="var(--primary)" stroke-width="2"/>
+        <text x="690" y="94" text-anchor="middle" font-size="10" fill="var(--primary)">248</text>
+        <!-- X轴日期 -->
+        <text x="87" y="186" text-anchor="middle" font-size="10" fill="#999">1/30</text>
+        <text x="180" y="186" text-anchor="middle" font-size="10" fill="#999">2/1</text>
+        <text x="273" y="186" text-anchor="middle" font-size="10" fill="#999">2/3</text>
+        <text x="319" y="186" text-anchor="middle" font-size="10" fill="#999">2/5</text>
+        <text x="412" y="186" text-anchor="middle" font-size="10" fill="#999">2/8</text>
+        <text x="505" y="186" text-anchor="middle" font-size="10" fill="#999">2/10</text>
+        <text x="645" y="186" text-anchor="middle" font-size="10" fill="#999">2/11</text>
+        <text x="690" y="186" text-anchor="middle" font-size="10" fill="#999">2/12</text>
+      </svg>
+    </div>
+    <div class="so-chart-summary">
+      <div class="so-chart-stat">日均订单 <strong>244</strong></div>
+      <div class="so-chart-stat">峰值 <strong>312</strong>（2/8）</div>
+      <div class="so-chart-stat">谷值 <strong>186</strong>（2/5）</div>
+    </div>
+  </div>
+
+  <!-- 区块2: 时段分布热力图 -->
+  <div class="g-card" style="padding:20px 24px;">
+    <div class="so-section-hd">时段分布</div>
+    <div class="so-heat-wrap">
+      <div class="so-heat-grid" id="heatGrid"></div>
+      <div class="so-heat-legend">
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l0"></div>少</div>
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l1"></div>较少</div>
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l2"></div>较多</div>
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l3"></div>多</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 区块3: 渠道对比 -->
+  <div class="g-card" style="padding:20px 24px;">
+    <div class="so-section-hd">渠道对比</div>
+    <div class="so-channel-row">
+      <!-- 外卖 -->
+      <div class="so-ch-card">
+        <div class="so-ch-hd">
+          <div class="so-ch-icon waimai"><i data-lucide="bike" style="width:20px;height:20px;"></i></div>
+          <div class="so-ch-name">外卖</div>
+          <span class="g-tag g-tag-blue" style="margin-left:auto;">主力渠道</span>
+        </div>
+        <div class="so-ch-metrics">
+          <div class="so-ch-metric"><span class="so-ch-metric-label">订单数</span><span class="so-ch-metric-val">1,881</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">销售额</span><span class="so-ch-metric-val">¥70,730</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">客单价</span><span class="so-ch-metric-val">¥37.6</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">占比</span><span class="so-ch-metric-val">55%</span></div>
+        </div>
+        <div class="so-ch-bar-bg"><div class="so-ch-bar-fill waimai" style="width:55%;"></div></div>
+      </div>
+      <!-- 自提 -->
+      <div class="so-ch-card">
+        <div class="so-ch-hd">
+          <div class="so-ch-icon ziti"><i data-lucide="package" style="width:20px;height:20px;"></i></div>
+          <div class="so-ch-name">自提</div>
+        </div>
+        <div class="so-ch-metrics">
+          <div class="so-ch-metric"><span class="so-ch-metric-label">订单数</span><span class="so-ch-metric-val">855</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">销售额</span><span class="so-ch-metric-val">¥32,150</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">客单价</span><span class="so-ch-metric-val">¥37.6</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">占比</span><span class="so-ch-metric-val">25%</span></div>
+        </div>
+        <div class="so-ch-bar-bg"><div class="so-ch-bar-fill ziti" style="width:25%;"></div></div>
+      </div>
+      <!-- 堂食 -->
+      <div class="so-ch-card">
+        <div class="so-ch-hd">
+          <div class="so-ch-icon tangshi"><i data-lucide="utensils" style="width:20px;height:20px;"></i></div>
+          <div class="so-ch-name">堂食</div>
+        </div>
+        <div class="so-ch-metrics">
+          <div class="so-ch-metric"><span class="so-ch-metric-label">订单数</span><span class="so-ch-metric-val">684</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">销售额</span><span class="so-ch-metric-val">¥25,720</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">客单价</span><span class="so-ch-metric-val">¥37.6</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">占比</span><span class="so-ch-metric-val">20%</span></div>
+        </div>
+        <div class="so-ch-bar-bg"><div class="so-ch-bar-fill tangshi" style="width:20%;"></div></div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<script>
+  /* 快捷日期按钮 */
+  function pickQuick(el) {
+    el.parentElement.querySelectorAll('.so-quick-btn').forEach(function(b){ b.classList.remove('active'); });
+    el.classList.add('active');
+  }
+  /* 渠道按钮 */
+  function pickChannel(el) {
+    el.parentElement.querySelectorAll('.so-channel-btn').forEach(function(b){ b.classList.remove('active'); });
+    el.classList.add('active');
+  }
+
+  /* 生成热力图 */
+  (function(){
+    var days = ['周一','周二','周三','周四','周五','周六','周日'];
+    var hours = [];
+    for(var h=9; h<=22; h++) hours.push(h+':00');
+    var grid = document.getElementById('heatGrid');
+    // 模拟数据：周末午晚高峰密度高
+    var data = [
+      [0,0,1,1,2,1,1,0,0,1,2,2,1,0],
+      [0,0,1,1,2,1,0,0,0,1,2,1,1,0],
+      [0,1,1,2,2,1,1,0,1,2,2,2,1,0],
+      [0,0,1,2,2,1,1,0,1,2,3,2,1,0],
+      [0,1,2,2,3,2,1,1,2,3,3,2,1,0],
+      [1,2,2,3,3,2,2,1,2,3,3,3,2,1],
+      [1,2,2,3,3,2,1,1,2,3,3,2,2,1]
+    ];
+    // 表头行
+    var blank = document.createElement('div');
+    blank.className = 'so-heat-header';
+    grid.appendChild(blank);
+    hours.forEach(function(h){
+      var hd = document.createElement('div');
+      hd.className = 'so-heat-header';
+      hd.textContent = h;
+      grid.appendChild(hd);
+    });
+    // 数据行
+    days.forEach(function(day, di){
+      var label = document.createElement('div');
+      label.className = 'so-heat-row-label';
+      label.textContent = day;
+      grid.appendChild(label);
+      data[di].forEach(function(v){
+        var cell = document.createElement('div');
+        cell.className = 'so-heat-cell so-heat-l' + v;
+        grid.appendChild(cell);
+      });
+    });
+  })();
+
+  /* Lucide 图标初始化 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/stat-product.html b/TakeoutSaaS.Prototypes/pages/stat-product.html
new file mode 100644
index 0000000..e4e32e9
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/stat-product.html
@@ -0,0 +1,248 @@
+<!-- 商品分析 — stat-product.html -->
+<style>
+  /* ---- page-private: sp- prefix ---- */
+  .sp-page { display: flex; flex-direction: column; gap: 16px; font-size: 13px; color: var(--g-text); }
+
+  /* 顶部筛选栏 */
+  .sp-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 14px 20px;
+    display: flex; align-items: center; justify-content: space-between;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
+  }
+  .sp-month-picker {
+    display: flex; align-items: center; gap: 12px; user-select: none;
+  }
+  .sp-month-arrow {
+    width: 28px; height: 28px; border-radius: var(--g-radius-sm);
+    border: 1px solid var(--g-border); background: #fff;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: var(--g-transition); color: var(--g-text-secondary);
+  }
+  .sp-month-arrow:hover { border-color: var(--primary); color: var(--primary); }
+  .sp-month-text { font-size: 15px; font-weight: 600; min-width: 100px; text-align: center; }
+
+  /* 统计卡片行 */
+  .sp-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+  .sp-kpi-card {
+    background: #fff; border-radius: var(--g-radius); padding: 20px 22px;
+    border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm);
+    transition: var(--g-transition); display: flex; flex-direction: column; gap: 8px;
+  }
+  .sp-kpi-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
+  .sp-kpi-label { font-size: 12px; color: var(--g-text-muted); display: flex; align-items: center; gap: 6px; }
+  .sp-kpi-label i { width: 16px; height: 16px; }
+  .sp-kpi-val { font-size: 26px; font-weight: 700; color: var(--g-text); letter-spacing: -0.5px; }
+
+  /* 分段 + 内容区 */
+  .sp-content-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    box-shadow: var(--g-shadow-sm); overflow: hidden;
+  }
+  .sp-content-hd { padding: 16px 20px 0; }
+  .sp-tab-panel { display: none; }
+  .sp-tab-panel.active { display: block; }
+
+  /* 排名高亮 */
+  .sp-rank-top { color: var(--primary); font-weight: 700; }
+  .sp-trend-up { color: var(--g-success); font-weight: 500; }
+  .sp-trend-down { color: var(--g-danger); font-weight: 500; }
+
+  /* 品类分析布局 */
+  .sp-category-wrap { display: flex; gap: 32px; padding: 20px; align-items: flex-start; }
+  .sp-donut-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
+  .sp-donut {
+    width: 180px; height: 180px; border-radius: 50%; position: relative;
+    background: conic-gradient(
+      var(--primary) 0deg 162deg,
+      #22c55e 162deg 252deg,
+      #f59e0b 252deg 316.8deg,
+      #a855f7 316.8deg 360deg
+    );
+  }
+  .sp-donut-center {
+    position: absolute; inset: 36px; background: #fff; border-radius: 50%;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+  }
+  .sp-donut-center .num { font-size: 22px; font-weight: 700; color: var(--g-text); }
+  .sp-donut-center .txt { font-size: 11px; color: var(--g-text-muted); }
+  .sp-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; }
+  .sp-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-text-secondary); }
+  .sp-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
+  .sp-category-table { flex: 1; min-width: 0; }
+
+  /* 滞销预警提示条 */
+  .sp-warn-bar {
+    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
+    background: #fffbe6; border: 1px solid #ffe58f; border-radius: var(--g-radius-sm);
+    margin: 16px 20px 0; font-size: 13px; color: #ad6800;
+  }
+  .sp-warn-bar i { width: 16px; height: 16px; flex-shrink: 0; }
+  .sp-low-sales { color: var(--g-danger); font-weight: 600; }
+</style>
+
+<div class="sp-page">
+  <!-- 顶部筛选栏 -->
+  <div class="sp-toolbar">
+    <div class="sp-month-picker">
+      <div class="sp-month-arrow" onclick="spChangeMonth(-1)"><i data-lucide="chevron-left" style="width:16px;height:16px;"></i></div>
+      <span class="sp-month-text" id="spMonthText">2026年2月</span>
+      <div class="sp-month-arrow" onclick="spChangeMonth(1)"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></div>
+    </div>
+    <select class="g-select" style="width:160px;">
+      <option>全部渠道</option>
+      <option>外卖</option>
+      <option>自提</option>
+      <option>堂食</option>
+    </select>
+  </div>
+
+  <!-- 统计卡片行 -->
+  <div class="sp-kpi-row">
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="package"></i> 在售商品数</div>
+      <div class="sp-kpi-val">86</div>
+    </div>
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="shopping-bag"></i> 本月销量</div>
+      <div class="sp-kpi-val">3,420</div>
+    </div>
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="banknote"></i> 销售额</div>
+      <div class="sp-kpi-val">¥45,680</div>
+    </div>
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="receipt"></i> 平均客单价</div>
+      <div class="sp-kpi-val">¥38.5</div>
+    </div>
+  </div>
+
+  <!-- 分段Tab + 内容 -->
+  <div class="sp-content-card">
+    <div class="sp-content-hd">
+      <div class="g-seg">
+        <div class="g-seg-item active" onclick="spSwitchTab(this,'rank')">销量排行</div>
+        <div class="g-seg-item" onclick="spSwitchTab(this,'category')">品类分析</div>
+        <div class="g-seg-item" onclick="spSwitchTab(this,'slow')">滞销预警</div>
+      </div>
+    </div>
+
+    <!-- Tab1: 销量排行 -->
+    <div id="spTabRank" class="sp-tab-panel active">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th style="width:60px;">排名</th>
+            <th>商品名称</th>
+            <th>品类</th>
+            <th style="text-align:right;">销量</th>
+            <th style="text-align:right;">销售额</th>
+            <th style="text-align:right;">占比</th>
+            <th style="text-align:right;">趋势</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td class="sp-rank-top">1</td><td>招牌牛肉饭</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">520</td><td style="text-align:right;">¥7,800</td><td style="text-align:right;">15.2%</td><td style="text-align:right;" class="sp-trend-up">↑ 12.3%</td></tr>
+          <tr><td class="sp-rank-top">2</td><td>香辣鸡腿堡</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">468</td><td style="text-align:right;">¥6,552</td><td style="text-align:right;">13.7%</td><td style="text-align:right;" class="sp-trend-up">↑ 8.1%</td></tr>
+          <tr><td class="sp-rank-top">3</td><td>珍珠奶茶</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">412</td><td style="text-align:right;">¥4,944</td><td style="text-align:right;">12.0%</td><td style="text-align:right;" class="sp-trend-down">↓ 2.5%</td></tr>
+          <tr><td>4</td><td>黄焖鸡米饭</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">356</td><td style="text-align:right;">¥5,340</td><td style="text-align:right;">10.4%</td><td style="text-align:right;" class="sp-trend-up">↑ 5.6%</td></tr>
+          <tr><td>5</td><td>薯条（大份）</td><td><span class="g-tag g-tag-orange">小吃</span></td><td style="text-align:right;">298</td><td style="text-align:right;">¥2,980</td><td style="text-align:right;">8.7%</td><td style="text-align:right;" class="sp-trend-down">↓ 1.2%</td></tr>
+          <tr><td>6</td><td>冰美式咖啡</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">265</td><td style="text-align:right;">¥3,180</td><td style="text-align:right;">7.7%</td><td style="text-align:right;" class="sp-trend-up">↑ 15.8%</td></tr>
+          <tr><td>7</td><td>芒果千层蛋糕</td><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;">224</td><td style="text-align:right;">¥4,480</td><td style="text-align:right;">6.5%</td><td style="text-align:right;" class="sp-trend-up">↑ 3.2%</td></tr>
+          <tr><td>8</td><td>鸡米花</td><td><span class="g-tag g-tag-orange">小吃</span></td><td style="text-align:right;">198</td><td style="text-align:right;">¥1,584</td><td style="text-align:right;">5.8%</td><td style="text-align:right;" class="sp-trend-down">↓ 4.7%</td></tr>
+          <tr><td>9</td><td>麻辣烫套餐</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">176</td><td style="text-align:right;">¥3,520</td><td style="text-align:right;">5.1%</td><td style="text-align:right;" class="sp-trend-up">↑ 6.9%</td></tr>
+          <tr><td>10</td><td>柠檬茶</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">153</td><td style="text-align:right;">¥1,530</td><td style="text-align:right;">4.5%</td><td style="text-align:right;" class="sp-trend-down">↓ 0.8%</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab2: 品类分析 -->
+    <div id="spTabCategory" class="sp-tab-panel">
+      <div class="sp-category-wrap">
+        <div class="sp-donut-wrap">
+          <div class="sp-donut">
+            <div class="sp-donut-center">
+              <span class="num">3,420</span>
+              <span class="txt">总销量</span>
+            </div>
+          </div>
+          <div class="sp-legend">
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:var(--primary);"></span> 主食 45%</div>
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:#22c55e;"></span> 饮品 25%</div>
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:#f59e0b;"></span> 小吃 18%</div>
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:#a855f7;"></span> 甜品 12%</div>
+          </div>
+        </div>
+        <div class="sp-category-table">
+          <table class="g-table">
+            <thead>
+              <tr>
+                <th>品类</th>
+                <th style="text-align:right;">商品数</th>
+                <th style="text-align:right;">销量</th>
+                <th style="text-align:right;">销售额</th>
+                <th style="text-align:right;">占比</th>
+                <th style="text-align:right;">环比变化</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">32</td><td style="text-align:right;">1,539</td><td style="text-align:right;">¥23,085</td><td style="text-align:right;">45%</td><td style="text-align:right;" class="sp-trend-up">↑ 6.2%</td></tr>
+              <tr><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">22</td><td style="text-align:right;">855</td><td style="text-align:right;">¥10,260</td><td style="text-align:right;">25%</td><td style="text-align:right;" class="sp-trend-down">↓ 1.8%</td></tr>
+              <tr><td><span class="g-tag g-tag-orange">小吃</span></td><td style="text-align:right;">18</td><td style="text-align:right;">616</td><td style="text-align:right;">¥6,160</td><td style="text-align:right;">18%</td><td style="text-align:right;" class="sp-trend-up">↑ 3.5%</td></tr>
+              <tr><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;">14</td><td style="text-align:right;">410</td><td style="text-align:right;">¥6,175</td><td style="text-align:right;">12%</td><td style="text-align:right;" class="sp-trend-up">↑ 9.1%</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab3: 滞销预警 -->
+    <div id="spTabSlow" class="sp-tab-panel">
+      <div class="sp-warn-bar">
+        <i data-lucide="alert-triangle"></i>
+        以下商品近30天销量低于5单，建议优化或下架
+      </div>
+      <table class="g-table" style="margin-top:0;">
+        <thead>
+          <tr>
+            <th>商品名称</th>
+            <th>品类</th>
+            <th style="text-align:right;">近30天销量</th>
+            <th style="text-align:right;">库存</th>
+            <th style="text-align:right;">上架天数</th>
+            <th style="text-align:center;">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>蓝莓慕斯</td><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;" class="sp-low-sales">2</td><td style="text-align:right;">15</td><td style="text-align:right;">120</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>抹茶拿铁</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;" class="sp-low-sales">3</td><td style="text-align:right;">28</td><td style="text-align:right;">90</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>芝士焗饭</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;" class="sp-low-sales">1</td><td style="text-align:right;">8</td><td style="text-align:right;">180</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>杨枝甘露</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;" class="sp-low-sales">4</td><td style="text-align:right;">20</td><td style="text-align:right;">60</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>香草冰淇淋</td><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;" class="sp-low-sales">0</td><td style="text-align:right;">35</td><td style="text-align:right;">210</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  /* 分段Tab切换 */
+  function spSwitchTab(el, tab) {
+    el.parentElement.querySelectorAll('.g-seg-item').forEach(function(s) { s.classList.remove('active'); });
+    el.classList.add('active');
+    document.querySelectorAll('.sp-tab-panel').forEach(function(p) { p.classList.remove('active'); });
+    var map = { rank: 'spTabRank', category: 'spTabCategory', slow: 'spTabSlow' };
+    document.getElementById(map[tab]).classList.add('active');
+  }
+
+  /* 月份切换（纯展示） */
+  var spMonth = 2, spYear = 2026;
+  function spChangeMonth(dir) {
+    spMonth += dir;
+    if (spMonth > 12) { spMonth = 1; spYear++; }
+    if (spMonth < 1) { spMonth = 12; spYear--; }
+    document.getElementById('spMonthText').textContent = spYear + '年' + spMonth + '月';
+  }
+
+  /* 初始化图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/store-delivery.html b/TakeoutSaaS.Prototypes/pages/store-delivery.html
new file mode 100644
index 0000000..91d351f
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-delivery.html
@@ -0,0 +1,250 @@
+<!-- 配送设置页 -->
+<style>
+  .page-delivery { max-width:960px; }
+  .pd-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
+  .pd-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); }
+  .pd-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  /* Mode Switch */
+  .mode-switch { display:flex; background:#f8f9fb; border-radius:8px; padding:3px; gap:2px; width:fit-content; margin-bottom:16px; }
+  .mode-switch-item { padding:6px 18px; border-radius:6px; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); border:none; background:none; }
+  .mode-switch-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
+
+  /* Map Placeholder */
+  .map-area { width:100%; height:320px; background:#f0f5ff; border-radius:10px; border:1px dashed #adc6ff; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#597ef7; margin-bottom:16px; position:relative; overflow:hidden; }
+  .map-area .map-icon { font-size:48px; margin-bottom:8px; opacity:0.5; }
+  .map-area .map-label { font-size:13px; opacity:0.7; }
+  .map-area .map-overlay { position:absolute; top:0; left:0; right:0; bottom:0; }
+  /* Fake map grid */
+  .map-area .grid-line { position:absolute; background:#d6e4ff; }
+  .map-area .grid-h { height:1px; left:0; right:0; }
+  .map-area .grid-v { width:1px; top:0; bottom:0; }
+  .map-area .map-pin { position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); font-size:24px; z-index:2; }
+  /* Radius circles */
+  .map-area .radius-circle { position:absolute; top:50%; left:50%; border-radius:50%; border:2px dashed; transform:translate(-50%,-50%); }
+  .map-area .rc1 { width:100px; height:100px; border-color:#22c55e; background:rgba(34,197,94,0.06); }
+  .map-area .rc2 { width:180px; height:180px; border-color:#f59e0b; background:rgba(245,158,11,0.04); }
+  .map-area .rc3 { width:260px; height:260px; border-color:#ef4444; background:rgba(239,68,68,0.03); }
+  .map-area .rc-label { position:absolute; font-size:10px; font-weight:600; white-space:nowrap; }
+  .map-area .rc1 .rc-label { bottom:-16px; left:50%; transform:translateX(-50%); color:#22c55e; }
+  .map-area .rc2 .rc-label { bottom:-16px; left:50%; transform:translateX(-50%); color:#f59e0b; }
+  .map-area .rc3 .rc-label { bottom:-16px; left:50%; transform:translateX(-50%); color:#ef4444; }
+
+  /* Zone Table */
+  .zone-table { width:100%; border-collapse:collapse; font-size:13px; }
+  .zone-table th { background:#f8f9fb; padding:10px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; }
+  .zone-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
+  .zone-table tr:last-child td { border-bottom:none; }
+  .zone-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .zone-color { width:12px; height:12px; border-radius:3px; display:inline-block; vertical-align:middle; margin-right:6px; }
+  .z-link { color:var(--primary); cursor:pointer; font-size:12px; margin-right:8px; transition:var(--g-transition); }
+  .z-link:hover { text-decoration:underline; }
+  .z-link.danger { color:#ef4444; }
+
+  /* Radius Tier Cards */
+  .tier-list { display:flex; flex-direction:column; gap:10px; }
+  .tier-card { display:grid; grid-template-columns:40px 1fr 1fr 1fr 1fr auto; gap:12px; align-items:center; padding:12px 14px; background:#f8f9fb; border-radius:10px; border:none; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
+  .tier-card:hover { box-shadow:var(--g-shadow-md); }
+  .tier-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; }
+  .tier-field label { font-size:11px; color:#9ca3af; display:block; margin-bottom:3px; }
+  .tier-field .val { font-size:13px; font-weight:500; color:#1a1a2e; }
+  .tier-actions { display:flex; gap:4px; }
+  .tier-edit { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; color:#9ca3af; border:none; background:none; transition:var(--g-transition); }
+  .tier-edit:hover { background:#fff; color:var(--primary); }
+
+  .pd-tip { font-size:12px; color:#9ca3af; margin-top:8px; display:flex; align-items:center; gap:4px; }
+</style>
+
+<div class="page-delivery">
+  <div class="pd-toolbar">
+    <select style="width:200px;">
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <div style="flex:1;"></div>
+    <button class="g-btn" onclick="openCopyStoreModal('复制配送设置到其他门店')">
+      <i data-lucide="copy" style="width:14px;height:14px;"></i>复制到其他门店
+    </button>
+  </div>
+
+  <!-- 配送模式 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">配送模式</div>
+    <div style="padding:16px 18px;">
+      <div class="mode-switch">
+        <button class="mode-switch-item active" onclick="switchDeliveryTab('radius')">按半径配送</button>
+        <button class="mode-switch-item" onclick="switchDeliveryTab('polygon')">按区域配送（多边形）</button>
+      </div>
+
+      <!-- 地图区域 -->
+      <div class="map-area">
+        <div class="grid-line grid-h" style="top:25%;"></div>
+        <div class="grid-line grid-h" style="top:50%;"></div>
+        <div class="grid-line grid-h" style="top:75%;"></div>
+        <div class="grid-line grid-v" style="left:25%;"></div>
+        <div class="grid-line grid-v" style="left:50%;"></div>
+        <div class="grid-line grid-v" style="left:75%;"></div>
+        <div class="map-pin"><i data-lucide="map-pin" style="width:16px;height:16px"></i></div>
+        <!-- Radius mode circles -->
+        <div id="radiusOverlay">
+          <div class="radius-circle rc3"><span class="rc-label">5km</span></div>
+          <div class="radius-circle rc2"><span class="rc-label">3km</span></div>
+          <div class="radius-circle rc1"><span class="rc-label">1km</span></div>
+        </div>
+        <!-- Polygon mode hint (hidden by default) -->
+        <div id="polygonOverlay" style="display:none; text-align:center;">
+          <div class="map-icon"><i data-lucide="map" style="width:16px;height:16px"></i></div>
+          <div class="map-label">点击地图绘制配送区域多边形</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 半径配送 - 距离梯度 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;" id="radiusSection">
+    <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">
+      距离梯度
+      <button class="g-btn g-btn-primary g-btn-sm">
+        <i data-lucide="plus" style="width:13px;height:13px;"></i>添加梯度
+      </button>
+    </div>
+    <div style="padding:16px 18px;">
+      <div class="tier-list">
+        <div class="tier-card">
+          <div class="tier-num" style="background:#52c41a;">1</div>
+          <div class="tier-field"><label>距离范围</label><div class="val">0 ~ 1 km</div></div>
+          <div class="tier-field"><label>配送费</label><div class="val">¥3.00</div></div>
+          <div class="tier-field"><label>预计送达</label><div class="val">20 分钟</div></div>
+          <div class="tier-field"><label>起送金额</label><div class="val">¥15.00</div></div>
+          <div class="tier-actions">
+            <button class="tier-edit"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button>
+            <button class="tier-edit"><i data-lucide="trash-2" style="width:14px;height:14px;color:#ff4d4f;"></i></button>
+          </div>
+        </div>
+        <div class="tier-card">
+          <div class="tier-num" style="background:#faad14;">2</div>
+          <div class="tier-field"><label>距离范围</label><div class="val">1 ~ 3 km</div></div>
+          <div class="tier-field"><label>配送费</label><div class="val">¥5.00</div></div>
+          <div class="tier-field"><label>预计送达</label><div class="val">35 分钟</div></div>
+          <div class="tier-field"><label>起送金额</label><div class="val">¥20.00</div></div>
+          <div class="tier-actions">
+            <button class="tier-edit"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button>
+            <button class="tier-edit"><i data-lucide="trash-2" style="width:14px;height:14px;color:#ff4d4f;"></i></button>
+          </div>
+        </div>
+        <div class="tier-card">
+          <div class="tier-num" style="background:#ff4d4f;">3</div>
+          <div class="tier-field"><label>距离范围</label><div class="val">3 ~ 5 km</div></div>
+          <div class="tier-field"><label>配送费</label><div class="val">¥8.00</div></div>
+          <div class="tier-field"><label>预计送达</label><div class="val">50 分钟</div></div>
+          <div class="tier-field"><label>起送金额</label><div class="val">¥25.00</div></div>
+          <div class="tier-actions">
+            <button class="tier-edit"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button>
+            <button class="tier-edit"><i data-lucide="trash-2" style="width:14px;height:14px;color:#ff4d4f;"></i></button>
+          </div>
+        </div>
+      </div>
+      <div class="pd-tip"><i data-lucide="info" style="width:13px;height:13px;"></i>超出最大配送半径的地址将无法下单</div>
+    </div>
+  </div>
+
+  <!-- 多边形配送 - 区域列表 (hidden by default) -->
+  <div class="g-card" style="padding:0; margin-bottom:16px; display:none;" id="polygonSection">
+    <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">
+      配送区域
+      <button class="g-btn g-btn-primary g-btn-sm">
+        <i data-lucide="plus" style="width:13px;height:13px;"></i>绘制新区域
+      </button>
+    </div>
+    <div style="padding:0;">
+      <table class="zone-table">
+        <thead><tr><th>区域名称</th><th>配送费</th><th>起送金额</th><th>预计送达</th><th>优先级</th><th style="width:100px;">操作</th></tr></thead>
+        <tbody>
+          <tr>
+            <td><span class="zone-color" style="background:#52c41a;"></span>核心区域</td>
+            <td>¥3.00</td>
+            <td>¥15.00</td>
+            <td>20 分钟</td>
+            <td>1</td>
+            <td><a class="z-link">编辑</a><a class="z-link danger">删除</a></td>
+          </tr>
+          <tr>
+            <td><span class="zone-color" style="background:#1890ff;"></span>朝阳CBD</td>
+            <td>¥5.00</td>
+            <td>¥20.00</td>
+            <td>35 分钟</td>
+            <td>2</td>
+            <td><a class="z-link">编辑</a><a class="z-link danger">删除</a></td>
+          </tr>
+          <tr>
+            <td><span class="zone-color" style="background:#faad14;"></span>三里屯片区</td>
+            <td>¥6.00</td>
+            <td>¥25.00</td>
+            <td>40 分钟</td>
+            <td>3</td>
+            <td><a class="z-link">编辑</a><a class="z-link danger">删除</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- 通用配送设置 -->
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">通用设置</div>
+    <div style="padding:16px 18px;">
+      <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;">
+        <div>
+          <label style="font-size:12px; color:#666; display:block; margin-bottom:6px;">免配送费门槛</label>
+          <div style="display:flex; align-items:center; gap:6px;">
+            <input type="number" value="30" placeholder="如：50" style="width:120px; height:32px; padding:0 10px; border:1px solid #d9d9d9; border-radius:6px; font-size:13px; outline:none;" />
+            <span style="font-size:13px; color:#666;">元</span>
+          </div>
+          <div style="font-size:11px; color:#999; margin-top:4px;">订单满此金额免配送费，留空则不启用</div>
+        </div>
+        <div>
+          <label style="font-size:12px; color:#666; display:block; margin-bottom:6px;">最大配送距离</label>
+          <div style="display:flex; align-items:center; gap:6px;">
+            <input type="number" value="5" placeholder="如：5" style="width:120px; height:32px; padding:0 10px; border:1px solid #d9d9d9; border-radius:6px; font-size:13px; outline:none;" />
+            <span style="font-size:13px; color:#666;">公里</span>
+          </div>
+          <div style="font-size:11px; color:#999; margin-top:4px;">仅半径模式生效</div>
+        </div>
+        <div>
+          <label style="font-size:12px; color:#666; display:block; margin-bottom:6px;">每小时最大配送单量</label>
+          <div style="display:flex; align-items:center; gap:6px;">
+            <input type="number" value="50" placeholder="如：50" style="width:120px; height:32px; padding:0 10px; border:1px solid #d9d9d9; border-radius:6px; font-size:13px; outline:none;" />
+            <span style="font-size:13px; color:#666;">单</span>
+          </div>
+          <div style="font-size:11px; color:#999; margin-top:4px;">达到上限后暂停接单</div>
+        </div>
+        <div>
+          <label style="font-size:12px; color:#666; display:block; margin-bottom:6px;">配送时间预估加成</label>
+          <div style="display:flex; align-items:center; gap:6px;">
+            <input type="number" value="10" placeholder="如：30" style="width:120px; height:32px; padding:0 10px; border:1px solid #d9d9d9; border-radius:6px; font-size:13px; outline:none;" />
+            <span style="font-size:13px; color:#666;">分钟</span>
+          </div>
+          <div style="font-size:11px; color:#999; margin-top:4px;">高峰期自动增加预估时间</div>
+        </div>
+      </div>
+      <div style="margin-top:20px; display:flex; justify-content:flex-end; gap:8px;">
+        <button class="g-btn">重置</button>
+        <button class="g-btn g-btn-primary">保存设置</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function switchDeliveryTab(mode) {
+  document.querySelectorAll('.mode-switch-item').forEach(b => b.classList.remove('active'));
+  event.currentTarget.classList.add('active');
+  document.getElementById('radiusOverlay').style.display = mode === 'radius' ? '' : 'none';
+  document.getElementById('polygonOverlay').style.display = mode === 'polygon' ? '' : 'none';
+  document.getElementById('radiusSection').style.display = mode === 'radius' ? '' : 'none';
+  document.getElementById('polygonSection').style.display = mode === 'polygon' ? '' : 'none';
+}
+</script>
\ No newline at end of file
diff --git a/TakeoutSaaS.Prototypes/pages/store-dinein.html b/TakeoutSaaS.Prototypes/pages/store-dinein.html
new file mode 100644
index 0000000..9625764
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-dinein.html
@@ -0,0 +1,288 @@
+<!-- 堂食管理页 -->
+<style>
+  .pdi-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; }
+  .pdi-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; cursor:pointer; transition:var(--g-transition); }
+  .pdi-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pdi-card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:14px; font-weight:600; color:#1a1a2e; }
+  .pdi-card-hd .right { display:flex; gap:8px; }
+  .pdi-area-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
+  .pdi-area-pill { padding:6px 16px; border-radius:20px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
+  .pdi-area-pill:hover { border-color:var(--primary); color:var(--primary); }
+  .pdi-area-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
+  .pdi-area-info { background:#f8f9fb; border-radius:8px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#4b5563; }
+  .pdi-area-info .actions { display:flex; gap:8px; }
+  .pdi-action-link { color:var(--primary); cursor:pointer; font-size:12px; text-decoration:none; transition:var(--g-transition); }
+  .pdi-action-link:hover { text-decoration:underline; }
+  .pdi-action-link.danger { color:#ef4444; }
+  .pdi-table-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+  .pdi-table-card { background:#fff; border:none; border-radius:10px; padding:16px; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
+  .pdi-table-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.10); }
+  .pdi-table-code { font-size:22px; font-weight:700; color:#1a1a2e; margin-bottom:8px; }
+  .pdi-table-cap { font-size:13px; color:#4b5563; display:flex; align-items:center; gap:5px; margin-bottom:8px; }
+  .pdi-table-status { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; margin-bottom:8px; }
+  .pdi-status-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
+  .pdi-s-free .pdi-status-dot { background:#22c55e; } .pdi-s-free { color:#22c55e; }
+  .pdi-s-dining .pdi-status-dot { background:#f59e0b; } .pdi-s-dining { color:#f59e0b; }
+  .pdi-s-reserved .pdi-status-dot { background:#1890ff; } .pdi-s-reserved { color:#1890ff; }
+  .pdi-s-disabled .pdi-status-dot { background:#9ca3af; } .pdi-s-disabled { color:#9ca3af; }
+  .pdi-table-tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; min-height:22px; }
+  .pdi-table-foot { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid #f3f4f6; padding-top:10px; }
+  .pdi-icon-btn { width:28px; height:28px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:#9ca3af; transition:var(--g-transition); }
+  .pdi-icon-btn:hover { border-color:var(--primary); color:var(--primary); }
+  .pdi-form-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:13px; color:#1a1a2e; }
+  .pdi-form-row label { width:120px; text-align:right; flex-shrink:0; font-weight:500; color:#4b5563; }
+  .pdi-form-row input[type=number] { width:120px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .pdi-form-row input[type=number]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pdi-form-row .hint { font-size:12px; color:#9ca3af; }
+  .pdi-form-row .unit { color:#4b5563; }
+  .pdi-form-actions { display:flex; gap:8px; margin-left:132px; margin-top:8px; }
+  .pdi-tag-input-wrap { display:flex; flex-wrap:wrap; gap:6px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:8px; min-height:36px; align-items:center; transition:var(--g-transition); }
+  .pdi-tag-item { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:#f0f5ff; color:#597ef7; border-radius:6px; font-size:12px; }
+  .pdi-tag-item .remove { cursor:pointer; color:#aaa; font-size:14px; transition:var(--g-transition); }
+  .pdi-tag-item .remove:hover { color:#ef4444; }
+  .pdi-modal-mask { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2000; opacity:0; pointer-events:none; transition:var(--g-transition); display:flex; align-items:center; justify-content:center; }
+  .pdi-modal-mask.open { opacity:1; pointer-events:auto; }
+  .pdi-modal { background:#fff; border-radius:10px; width:480px; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(0,0,0,0.12); transform:translateY(12px);opacity:0; transition:var(--g-transition); }
+  .pdi-modal-mask.open .pdi-modal { transform:translateY(0);opacity:1; }
+  .pdi-modal-hd { padding:16px 20px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; }
+  .pdi-modal-hd h3 { font-size:15px; font-weight:600; color:#1a1a2e; margin:0; }
+  .pdi-modal-bd { padding:20px; }
+  .pdi-modal-ft { padding:12px 20px; border-top:1px solid #e5e7eb; display:flex; justify-content:flex-end; gap:8px; background:#fafbfc; border-radius:0 0 10px 10px; }
+  .pdi-preview-box { background:#f8f9fb; border:1px solid #e5e7eb; border-radius:8px; padding:12px; margin-top:12px; }
+  .pdi-preview-box .pv-title { font-size:12px; color:#9ca3af; margin-bottom:8px; }
+  .pdi-preview-tags { display:flex; flex-wrap:wrap; gap:6px; }
+  .pdi-preview-tag { padding:4px 10px; background:#f0f5ff; color:#597ef7; border-radius:6px; font-size:12px; }
+</style>
+
+<div class="pdi-page">
+  <div class="pdi-toolbar">
+    <select>
+      <option>老三家外卖(中关村店)</option>
+      <option>老三家外卖(望京店)</option>
+      <option>老三家外卖(国贸店)</option>
+      <option>老三家外卖(西单店)</option>
+      <option>老三家外卖(五道口店)</option>
+    </select>
+    <button class="g-btn" onclick="openCopyStoreModal('复制堂食设置到其他门店')">复制到其他门店</button>
+  </div>
+
+  <div class="g-card" style="padding:20px;margin-bottom:16px;">
+    <div class="pdi-card-hd"><span>区域管理</span><div class="right"><button class="g-btn g-btn-primary g-btn-sm" onclick="openDiArea()">+ 添加区域</button></div></div>
+    <div class="pdi-area-pills">
+      <span class="pdi-area-pill active">大厅 (12桌)</span>
+      <span class="pdi-area-pill">包间 (4桌)</span>
+      <span class="pdi-area-pill">露台 (6桌)</span>
+    </div>
+    <div class="pdi-area-info">
+      <span>大厅 &mdash; 主要用餐区域，共12张桌位，可容纳约48人同时用餐</span>
+      <div class="actions"><a class="pdi-action-link" onclick="openDiArea('edit','大厅')">编辑</a><a class="pdi-action-link danger">删除</a></div>
+    </div>
+  </div>
+
+  <div class="g-card" style="padding:20px;margin-bottom:16px;">
+    <div class="pdi-card-hd"><span>桌位列表</span><div class="right"><button class="g-btn g-btn-sm" onclick="openDiBatch()">批量生成</button><button class="g-btn g-btn-primary g-btn-sm" onclick="openDiTable()">+ 添加桌位</button></div></div>
+    <div class="pdi-table-grid">
+      <div class="pdi-table-card">
+        <div class="pdi-table-code">A01</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
+        <div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
+        <div class="pdi-table-tags"><span class="g-tag g-tag-gray">靠窗</span></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+      <div class="pdi-table-card">
+        <div class="pdi-table-code">A02</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 2人桌</div>
+        <div class="pdi-table-status pdi-s-dining"><span class="pdi-status-dot"></span>就餐中</div>
+        <div class="pdi-table-tags"></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+      <div class="pdi-table-card">
+        <div class="pdi-table-code">A03</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 6人桌</div>
+        <div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
+        <div class="pdi-table-tags"><span class="g-tag g-tag-gray">VIP</span><span class="g-tag g-tag-gray">靠窗</span></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+      <div class="pdi-table-card">
+        <div class="pdi-table-code">A04</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
+        <div class="pdi-table-status pdi-s-reserved"><span class="pdi-status-dot"></span>已预约</div>
+        <div class="pdi-table-tags"></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+      <div class="pdi-table-card">
+        <div class="pdi-table-code">A05</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 8人桌</div>
+        <div class="pdi-table-status pdi-s-dining"><span class="pdi-status-dot"></span>就餐中</div>
+        <div class="pdi-table-tags"><span class="g-tag g-tag-gray">包厢</span></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+      <div class="pdi-table-card">
+        <div class="pdi-table-code">A06</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 2人桌</div>
+        <div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
+        <div class="pdi-table-tags"><span class="g-tag g-tag-gray">靠窗</span></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+      <div class="pdi-table-card" style="opacity:0.5;">
+        <div class="pdi-table-code">A07</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
+        <div class="pdi-table-status pdi-s-disabled"><span class="pdi-status-dot"></span>停用</div>
+        <div class="pdi-table-tags"></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+      <div class="pdi-table-card">
+        <div class="pdi-table-code">A08</div>
+        <div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
+        <div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
+        <div class="pdi-table-tags"><span class="g-tag g-tag-gray">VIP</span></div>
+        <div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="g-card" style="padding:20px;margin-bottom:16px;">
+    <div class="pdi-card-hd"><span>堂食设置</span></div>
+    <div class="pdi-form-row"><label>是否开启堂食</label><button class="g-toggle on" onclick="this.classList.toggle('on')"></button></div>
+    <div class="pdi-form-row"><label>默认用餐时长</label><input type="number" value="90"><span class="unit">分钟</span></div>
+    <div class="pdi-form-row"><label>超时提醒</label><input type="number" value="10"><span class="unit">分钟</span><span class="hint">超过用餐时长后提醒</span></div>
+    <div class="pdi-form-actions"><button class="g-btn g-btn-primary">保存设置</button><button class="g-btn">重置</button></div>
+  </div>
+</div>
+
+<div class="g-drawer-mask" id="diDrawerMask" onclick="closeDiDrawer()"></div>
+
+<!-- 添加/编辑区域 -->
+<div class="g-drawer" id="diAreaDrawer" style="width:460px;">
+  <div class="g-drawer-hd"><span class="g-drawer-title" id="diAreaTitle">添加区域</span><button class="g-drawer-close" onclick="closeDiDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group"><label class="g-form-label required">区域名称</label><input type="text" class="g-input" id="diAreaName" placeholder="如：大厅、包间、露台" /></div>
+    <div class="g-form-group"><label class="g-form-label">区域描述</label><textarea class="g-textarea" id="diAreaDesc" rows="3" placeholder="可选，如：主要用餐区域，可容纳约48人"></textarea></div>
+    <div class="g-form-group"><label class="g-form-label">排序</label><div style="display:flex;align-items:center;gap:6px;"><input type="number" class="g-input" id="diAreaSort" value="1" style="width:80px;" /><span style="font-size:12px;color:#999;">数字越小越靠前</span></div></div>
+  </div>
+  <div class="g-drawer-ft"><button class="g-btn" onclick="closeDiDrawer()">取消</button><button class="g-btn g-btn-primary" id="diAreaSubmit" onclick="closeDiDrawer()">确认添加</button></div>
+</div>
+
+<!-- 添加/编辑桌位 -->
+<div class="g-drawer" id="diTableDrawer" style="width:460px;">
+  <div class="g-drawer-hd"><span class="g-drawer-title" id="diTableTitle">添加桌位</span><button class="g-drawer-close" onclick="closeDiDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group"><label class="g-form-label required">桌位编号</label><input type="text" class="g-input" id="diTableCode" placeholder="如：A09" /></div>
+    <div class="g-form-group"><label class="g-form-label">所属区域</label><select class="g-select" id="diTableArea"><option>大厅</option><option>包间</option><option>露台</option></select></div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+      <div class="g-form-group"><label class="g-form-label required">座位数</label><select class="g-select" id="diTableCap"><option>2人桌</option><option selected>4人桌</option><option>6人桌</option><option>8人桌</option><option>10人桌</option><option>12人桌</option></select></div>
+      <div class="g-form-group"><label class="g-form-label">状态</label><select class="g-select" id="diTableStatus"><option selected>空闲</option><option>停用</option></select></div>
+    </div>
+    <div class="g-form-group"><label class="g-form-label">标签</label>
+      <div class="pdi-tag-input-wrap" id="diTagWrap">
+        <span class="pdi-tag-item">靠窗 <span class="remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px"></i></span></span>
+        <input type="text" id="diTagInput" placeholder="输入后回车添加" style="border:none;outline:none;font-size:12px;flex:1;min-width:80px;" onkeydown="if(event.key==='Enter'){addDiTag();event.preventDefault();}" />
+      </div>
+      <div class="g-hint">输入标签名后按回车添加，如：靠窗、VIP、包厢</div>
+    </div>
+  </div>
+  <div class="g-drawer-ft"><button class="g-btn" onclick="closeDiDrawer()">取消</button><button class="g-btn g-btn-primary" id="diTableSubmit" onclick="closeDiDrawer()">确认添加</button></div>
+</div>
+
+<!-- 批量生成弹窗 -->
+<div class="pdi-modal-mask" id="diBatchMask" onclick="if(event.target===this)closeDiBatch()">
+  <div class="pdi-modal">
+    <div class="pdi-modal-hd"><h3>批量生成桌位</h3><button class="g-drawer-close" onclick="closeDiBatch()"><i data-lucide="x" style="width:16px;height:16px"></i></button></div>
+    <div class="pdi-modal-bd">
+      <div class="g-form-group"><label class="g-form-label">所属区域</label><select class="g-select" id="diBatchArea" onchange="updateBatchPreview()"><option>大厅</option><option>包间</option><option>露台</option></select></div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+        <div class="g-form-group"><label class="g-form-label">编号前缀</label><input type="text" class="g-input" id="diBatchPrefix" value="A" oninput="updateBatchPreview()" /></div>
+        <div class="g-form-group"><label class="g-form-label">起始编号</label><input type="number" class="g-input" id="diBatchStart" value="9" oninput="updateBatchPreview()" /></div>
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+        <div class="g-form-group"><label class="g-form-label">生成数量</label><input type="number" class="g-input" id="diBatchCount" value="4" min="1" max="50" oninput="updateBatchPreview()" /></div>
+        <div class="g-form-group"><label class="g-form-label">座位数</label><select class="g-select" id="diBatchCap"><option>2人桌</option><option selected>4人桌</option><option>6人桌</option><option>8人桌</option></select></div>
+      </div>
+      <div class="pdi-preview-box">
+        <div class="pv-title">预览：将生成以下桌位</div>
+        <div class="pdi-preview-tags" id="diBatchPreview"></div>
+      </div>
+    </div>
+    <div class="pdi-modal-ft"><button class="g-btn" onclick="closeDiBatch()">取消</button><button class="g-btn g-btn-primary" onclick="closeDiBatch()">确认生成</button></div>
+  </div>
+</div>
+
+<script>
+function openDiArea(mode, name) {
+  var t = document.getElementById('diAreaTitle');
+  var s = document.getElementById('diAreaSubmit');
+  if (mode === 'edit') {
+    t.textContent = '编辑区域';
+    s.textContent = '保存修改';
+    document.getElementById('diAreaName').value = name || '';
+    document.getElementById('diAreaDesc').value = '主要用餐区域，可容纳约48人同时用餐';
+    document.getElementById('diAreaSort').value = '1';
+  } else {
+    t.textContent = '添加区域';
+    s.textContent = '确认添加';
+    document.getElementById('diAreaName').value = '';
+    document.getElementById('diAreaDesc').value = '';
+    document.getElementById('diAreaSort').value = '1';
+  }
+  document.getElementById('diDrawerMask').classList.add('open');
+  document.getElementById('diAreaDrawer').classList.add('open');
+}
+
+function openDiTable(mode, code) {
+  var t = document.getElementById('diTableTitle');
+  var s = document.getElementById('diTableSubmit');
+  if (mode === 'edit') {
+    t.textContent = '编辑桌位 - ' + code;
+    s.textContent = '保存修改';
+    document.getElementById('diTableCode').value = code || '';
+  } else {
+    t.textContent = '添加桌位';
+    s.textContent = '确认添加';
+    document.getElementById('diTableCode').value = '';
+  }
+  document.getElementById('diDrawerMask').classList.add('open');
+  document.getElementById('diTableDrawer').classList.add('open');
+}
+
+function closeDiDrawer() {
+  document.getElementById('diDrawerMask').classList.remove('open');
+  document.getElementById('diAreaDrawer').classList.remove('open');
+  document.getElementById('diTableDrawer').classList.remove('open');
+}
+
+function addDiTag() {
+  var inp = document.getElementById('diTagInput');
+  var v = inp.value.trim();
+  if (!v) return;
+  var span = document.createElement('span');
+  span.className = 'pdi-tag-item';
+  span.innerHTML = v + ' <span class="remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px"></i></span>';
+  document.getElementById('diTagWrap').insertBefore(span, inp);
+  inp.value = '';
+}
+
+function openDiBatch() {
+  document.getElementById('diBatchMask').classList.add('open');
+  updateBatchPreview();
+}
+
+function closeDiBatch() {
+  document.getElementById('diBatchMask').classList.remove('open');
+}
+
+function updateBatchPreview() {
+  var prefix = document.getElementById('diBatchPrefix').value || 'A';
+  var start = parseInt(document.getElementById('diBatchStart').value) || 1;
+  var count = Math.min(Math.max(parseInt(document.getElementById('diBatchCount').value) || 1, 1), 50);
+  var html = '';
+  for (var i = 0; i < count; i++) {
+    var num = (start + i).toString().padStart(2, '0');
+    html += '<span class="pdi-preview-tag">' + prefix + num + '</span>';
+  }
+  document.getElementById('diBatchPreview').innerHTML = html;
+}
+
+// init icons
+if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/store-fees.html b/TakeoutSaaS.Prototypes/pages/store-fees.html
new file mode 100644
index 0000000..de01f53
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-fees.html
@@ -0,0 +1,131 @@
+<!-- 费用设置页 -->
+<style>
+  .page-fees { max-width:960px; }
+  .pf-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
+  .pf-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); }
+  .pf-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
+  .pf-field label { font-size:12px; color:#6b7280; display:block; margin-bottom:6px; font-weight:500; }
+  .pf-field .pf-input-wrap { display:flex; align-items:center; gap:6px; }
+  .pf-field input[type=number] { width:140px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .pf-field input[type=number]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pf-field .pf-unit { font-size:13px; color:#4b5563; }
+  .pf-mode-switch { display:flex; background:#f8f9fb; border-radius:8px; padding:3px; gap:2px; width:fit-content; margin-bottom:16px; }
+  .pf-mode-switch-item { padding:6px 18px; border-radius:6px; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); border:none; background:none; }
+  .pf-mode-switch-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
+  .pf-toggle-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
+  .pf-toggle-label { font-size:13px; color:#1a1a2e; font-weight:500; }
+  .pf-tier-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
+  .pf-tier-table th { background:#f8f9fb; padding:10px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; }
+  .pf-tier-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
+  .pf-tier-table tr:last-child td { border-bottom:none; }
+  .pf-tier-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .pf-t-link { color:var(--primary); cursor:pointer; font-size:12px; margin-right:6px; transition:var(--g-transition); }
+  .pf-t-link:hover { text-decoration:underline; }
+  .pf-t-link.danger { color:#ef4444; }
+  .pf-other-row { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid #f3f4f6; }
+  .pf-other-row:last-child { border-bottom:none; }
+  .pf-other-info { flex:1; }
+  .pf-other-info .pf-other-name { font-size:13px; font-weight:500; color:#1a1a2e; margin-bottom:2px; }
+  .pf-other-info .pf-other-hint { font-size:11px; color:#9ca3af; }
+  .pf-other-input { display:flex; align-items:center; gap:6px; }
+  .pf-other-input input { width:100px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .pf-other-input input:disabled { background:#f8f9fb; color:#bbb; }
+  .pf-save-bar { margin-top:20px; display:flex; justify-content:flex-end; gap:8px; }
+  .pf-note { font-size:12px; color:#9ca3af; display:flex; align-items:center; gap:4px; }
+</style>
+
+<div class="page-fees">
+  <div class="pf-toolbar">
+    <select style="width:200px;">
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <div style="flex:1;"></div>
+    <button class="g-btn" onclick="openCopyStoreModal('复制费用设置到其他门店')"><i data-lucide="copy" style="width:14px;height:14px;"></i>复制到其他门店</button>
+  </div>
+
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">起送与配送费</div>
+    <div style="padding:16px 18px;">
+      <div class="pf-grid">
+        <div class="pf-field"><label>起送金额</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="15.00" step="0.01" min="0" placeholder="如：15.00" /></div><div class="g-hint">低于此金额的订单无法下单</div></div>
+        <div class="pf-field"><label>基础配送费</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="3.00" step="0.01" min="0" placeholder="如：3.00" /></div><div class="g-hint">每笔订单默认收取的配送费</div></div>
+        <div class="pf-field"><label>免配送费门槛</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="30.00" step="0.01" min="0" placeholder="如：30.00" /></div><div class="g-hint">订单满此金额免配送费，留空不启用</div></div>
+      </div>
+      <div class="pf-save-bar"><button class="g-btn">重置</button><button class="g-btn g-btn-primary">保存设置</button></div>
+    </div>
+  </div>
+
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">包装费设置</div>
+    <div style="padding:16px 18px;">
+      <div class="pf-mode-switch">
+        <button class="pf-mode-switch-item active" onclick="switchPkgMode('order')">按订单收取</button>
+        <button class="pf-mode-switch-item" onclick="switchPkgMode('item')">按商品收取</button>
+      </div>
+      <div id="pkgModeOrder">
+        <div class="pf-grid">
+          <div class="pf-field"><label>固定包装费</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="2.00" step="0.01" min="0" placeholder="如：2.00" /></div><div class="g-hint">每笔订单统一收取的包装费</div></div>
+        </div>
+        <div style="margin-top:18px; padding-top:16px; border-top:1px solid #f5f5f5;">
+          <div class="pf-toggle-row"><label class="g-toggle-input"><input type="checkbox" id="tierToggle" onchange="toggleTiers()" checked /><span class="g-toggle-sl"></span></label><span class="pf-toggle-label">启用阶梯包装费</span></div>
+          <div id="tierSection">
+            <div class="pf-note" style="margin-bottom:10px;">启用后将按订单金额区间收取不同包装费，覆盖上方固定包装费</div>
+            <table class="pf-tier-table"><thead><tr><th>订单金额区间</th><th>包装费</th><th style="width:100px;">操作</th></tr></thead><tbody>
+              <tr><td>0 ~ 30 元</td><td>¥ 2.00</td><td><span class="pf-t-link">编辑</span><span class="pf-t-link danger">删除</span></td></tr>
+              <tr><td>30 ~ 60 元</td><td>¥ 3.00</td><td><span class="pf-t-link">编辑</span><span class="pf-t-link danger">删除</span></td></tr>
+              <tr><td>60 元以上</td><td>¥ 5.00</td><td><span class="pf-t-link">编辑</span><span class="pf-t-link danger">删除</span></td></tr>
+            </tbody></table>
+            <div style="margin-top:10px;"><button class="g-btn g-btn-sm"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加阶梯</button></div>
+          </div>
+        </div>
+      </div>
+      <div id="pkgModeItem" style="display:none;">
+        <div style="padding:20px; background:#fafafa; border-radius:8px; text-align:center;">
+          <div style="font-size:28px; margin-bottom:8px; opacity:0.4;"><i data-lucide="package" style="width:16px;height:16px"></i></div>
+          <div style="font-size:13px; color:#666;">每个商品单独设置包装费，请在 <span style="color:var(--primary); cursor:pointer; font-weight:500;">商品管理</span> 中配置</div>
+          <div style="font-size:11px; color:#999; margin-top:6px;">系统将自动汇总订单内所有商品的包装费</div>
+        </div>
+      </div>
+      <div class="pf-save-bar"><button class="g-btn">重置</button><button class="g-btn g-btn-primary">保存设置</button></div>
+    </div>
+  </div>
+
+  <div class="g-card" style="padding:0; margin-bottom:16px;">
+    <div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">其他费用<span style="font-size:11px; color:#999; font-weight:400; margin-left:8px;">可选，按需开启</span></div>
+    <div style="padding:16px 18px;">
+      <div class="pf-other-row">
+        <label class="g-toggle-input"><input type="checkbox" id="cutleryToggle" onchange="toggleOtherFee('cutlery')" /><span class="g-toggle-sl"></span></label>
+        <div class="pf-other-info"><div class="pf-other-name">餐具费</div><div class="pf-other-hint">向顾客收取一次性餐具费用，顾客可选择不需要餐具</div></div>
+        <div class="pf-other-input"><span class="pf-unit">¥</span><input type="number" id="cutleryInput" value="1.00" step="0.01" min="0" placeholder="如：1.00" disabled /></div>
+      </div>
+      <div class="pf-other-row">
+        <label class="g-toggle-input"><input type="checkbox" id="rushToggle" onchange="toggleOtherFee('rush')" /><span class="g-toggle-sl"></span></label>
+        <div class="pf-other-info"><div class="pf-other-name">加急费</div><div class="pf-other-hint">顾客选择加急配送时额外收取的费用</div></div>
+        <div class="pf-other-input"><span class="pf-unit">¥</span><input type="number" id="rushInput" value="3.00" step="0.01" min="0" placeholder="如：3.00" disabled /></div>
+      </div>
+      <div class="pf-save-bar"><button class="g-btn">重置</button><button class="g-btn g-btn-primary">保存设置</button></div>
+    </div>
+  </div>
+</div>
+
+<script>
+function switchPkgMode(mode) {
+  document.querySelectorAll('.pf-mode-switch-item').forEach(function(b){b.classList.remove('active')});
+  event.currentTarget.classList.add('active');
+  document.getElementById('pkgModeOrder').style.display = mode === 'order' ? '' : 'none';
+  document.getElementById('pkgModeItem').style.display = mode === 'item' ? '' : 'none';
+}
+function toggleTiers() {
+  var on = document.getElementById('tierToggle').checked;
+  document.getElementById('tierSection').style.display = on ? '' : 'none';
+}
+function toggleOtherFee(type) {
+  if (type === 'cutlery') { document.getElementById('cutleryInput').disabled = !document.getElementById('cutleryToggle').checked; }
+  else if (type === 'rush') { document.getElementById('rushInput').disabled = !document.getElementById('rushToggle').checked; }
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/store-hours.html b/TakeoutSaaS.Prototypes/pages/store-hours.html
new file mode 100644
index 0000000..cdc0258
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-hours.html
@@ -0,0 +1,472 @@
+<!-- 营业时间页 -->
+<style>
+  .page-hours { max-width:960px; }
+  .ph-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; }
+  .ph-card-header { padding:14px 18px; font-size:14px; font-weight:600; color:#1a1a2e; background:#f8f9fb; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; border-radius:10px 10px 0 0; }
+  .ph-card-body { padding:16px 18px; }
+  .week-grid { display:flex; flex-direction:column; gap:0; }
+  .week-row { display:grid; grid-template-columns:80px 1fr auto; align-items:center; padding:12px 0; border-bottom:1px solid #f3f4f6; gap:12px; transition:var(--g-transition); }
+  .week-row:last-child { border-bottom:none; }
+  .week-row:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .week-day { font-size:13px; font-weight:500; color:#1a1a2e; }
+  .week-day .day-en { font-size:11px; color:#9ca3af; font-weight:400; }
+  .week-slots { display:flex; flex-wrap:wrap; gap:8px; }
+  .time-slot { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:6px; font-size:12px; background:#f6ffed; border:1px solid #b7eb8f; color:#389e0d; }
+  .time-slot.delivery { background:#e6f7ff; border-color:#91d5ff; color:#1890ff; }
+  .time-slot.pickup { background:#fff7e6; border-color:#ffd591; color:#d46b08; }
+  .time-slot .slot-type { font-weight:600; }
+  .time-slot .slot-time { color:inherit; opacity:0.85; }
+  .time-slot .slot-cap { font-size:10px; opacity:0.7; }
+  .week-actions { display:flex; gap:4px; }
+  .week-edit { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; color:#9ca3af; border:none; background:none; transition:var(--g-transition); }
+  .week-edit:hover { background:#f8f9fb; color:var(--primary); }
+  .week-closed { font-size:12px; color:#9ca3af; font-style:italic; }
+  .holiday-table { width:100%; border-collapse:collapse; font-size:13px; }
+  .holiday-table th { background:#f8f9fb; padding:8px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; }
+  .holiday-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
+  .holiday-table tr:last-child td { border-bottom:none; }
+  .holiday-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .h-tag { display:inline-block; padding:1px 8px; border-radius:6px; font-size:11px; font-weight:600; }
+  .h-tag.closed { background:#fff2f0; color:#ef4444; }
+  .h-tag.special { background:#fff7e6; color:#f59e0b; }
+  .h-link { color:var(--primary); cursor:pointer; font-size:12px; margin-right:8px; transition:var(--g-transition); }
+  .h-link:hover { text-decoration:underline; }
+  .h-link.danger { color:#ef4444; }
+  .ph-legend { display:flex; gap:16px; font-size:12px; color:#9ca3af; margin-bottom:12px; }
+  .ph-legend span { display:flex; align-items:center; gap:4px; }
+  .ph-legend-dot { width:10px; height:10px; border-radius:2px; }
+  /* Type pills */
+  .ph-type-pills { display:flex; gap:8px; }
+  .ph-type-pill { padding:6px 16px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
+  .ph-type-pill.tp-biz.active { background:#f6ffed; border-color:#b7eb8f; color:#389e0d; font-weight:600; }
+  .ph-type-pill.tp-del.active { background:#e6f7ff; border-color:#91d5ff; color:#1890ff; font-weight:600; }
+  .ph-type-pill.tp-pick.active { background:#fff7e6; border-color:#ffd591; color:#d46b08; font-weight:600; }
+  /* Day pills */
+  .ph-day-pills { display:flex; gap:6px; flex-wrap:wrap; }
+  .ph-day-pill { width:42px; height:34px; border-radius:8px; font-size:12px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; display:flex; align-items:center; justify-content:center; transition:var(--g-transition); }
+  .ph-day-pill.selected { background:var(--primary); border-color:var(--primary); color:#fff; }
+  .ph-quick-btns { display:flex; gap:8px; margin-top:8px; }
+  .ph-quick-btn { font-size:11px; color:var(--primary); cursor:pointer; background:none; border:none; padding:0; transition:var(--g-transition); }
+  .ph-quick-btn:hover { text-decoration:underline; }
+  /* Edit drawer slot cards */
+  .ph-slot-card { background:#f8f9fb; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin-bottom:10px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
+  .ph-slot-tag { padding:3px 10px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; }
+  .ph-slot-tag.st-biz { background:#f6ffed; border:1px solid #b7eb8f; color:#389e0d; }
+  .ph-slot-tag.st-del { background:#e6f7ff; border:1px solid #91d5ff; color:#1890ff; }
+  .ph-slot-tag.st-pick { background:#fff7e6; border:1px solid #ffd591; color:#d46b08; }
+  .ph-slot-fields { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
+  .ph-slot-fields label { font-size:11px; color:#9ca3af; font-weight:500; }
+  .ph-slot-fields input { width:100px; }
+  .ph-slot-del { width:28px; height:28px; border:none; background:none; cursor:pointer; color:#bbb; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:var(--g-transition); }
+  .ph-slot-del:hover { background:#fff2f0; color:#ef4444; }
+  .ph-add-dashed { width:100%; height:40px; border:1px dashed #e5e7eb; border-radius:10px; background:none; cursor:pointer; color:#9ca3af; font-size:13px; display:flex; align-items:center; justify-content:center; gap:6px; transition:var(--g-transition); }
+  .ph-add-dashed:hover { border-color:var(--primary); color:var(--primary); }
+  /* Toggle row */
+  .ph-toggle-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
+  .ph-toggle-hint { font-size:12px; color:#ef4444; margin-left:8px; display:none; }
+  /* Holiday drawer */
+  .ph-hol-type-pills { display:flex; gap:8px; }
+  .ph-hol-type-pill { padding:6px 16px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
+  .ph-hol-type-pill.ht-closed.active { background:#fff2f0; border-color:#ffa39e; color:#ef4444; font-weight:600; }
+  .ph-hol-type-pill.ht-special.active { background:#fff7e6; border-color:#ffd591; color:#f59e0b; font-weight:600; }
+  .ph-date-mode { display:flex; gap:8px; margin-bottom:10px; }
+  .ph-date-mode-pill { padding:4px 12px; border-radius:8px; font-size:12px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
+  .ph-date-mode-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }
+</style>
+
+<div class="page-hours">
+  <div class="ph-toolbar">
+    <select class="g-select" style="width:200px;">
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <div style="flex:1;"></div>
+    <button class="g-btn" onclick="openCopyStoreModal('复制营业时间到其他门店')">
+      <i data-lucide="copy" style="width:14px;height:14px;"></i>复制到其他门店
+    </button>
+  </div>
+
+  <div class="g-card">
+    <div class="ph-card-header">
+      每周营业时间
+      <button class="g-btn g-btn-primary" style="height:28px;font-size:12px;" onclick="openHoursDrawer('add')">
+        <i data-lucide="plus" style="width:13px;height:13px;"></i>添加时段
+      </button>
+    </div>
+    <div class="ph-card-body">
+      <div class="ph-legend">
+        <span><span class="ph-legend-dot" style="background:#b7eb8f;"></span>营业</span>
+        <span><span class="ph-legend-dot" style="background:#91d5ff;"></span>配送</span>
+        <span><span class="ph-legend-dot" style="background:#ffd591;"></span>自提</span>
+      </div>
+      <div class="week-grid">
+        <div class="week-row">
+          <div class="week-day">周一<div class="day-en">Monday</div></div>
+          <div class="week-slots">
+            <div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
+            <div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
+            <div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
+          </div>
+          <div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周一')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
+        </div>
+        <div class="week-row">
+          <div class="week-day">周二<div class="day-en">Tuesday</div></div>
+          <div class="week-slots">
+            <div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
+            <div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
+            <div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
+          </div>
+          <div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周二')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
+        </div>
+        <div class="week-row">
+          <div class="week-day">周三<div class="day-en">Wednesday</div></div>
+          <div class="week-slots">
+            <div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
+            <div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
+            <div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
+          </div>
+          <div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周三')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
+        </div>
+        <div class="week-row">
+          <div class="week-day">周四<div class="day-en">Thursday</div></div>
+          <div class="week-slots">
+            <div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
+            <div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
+            <div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
+          </div>
+          <div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周四')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
+        </div>
+        <div class="week-row">
+          <div class="week-day">周五<div class="day-en">Friday</div></div>
+          <div class="week-slots">
+            <div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-23:00</span></div>
+            <div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-22:30</span><span class="slot-cap">80单/h</span></div>
+            <div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-22:00</span></div>
+          </div>
+          <div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周五')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
+        </div>
+        <div class="week-row">
+          <div class="week-day">周六<div class="day-en">Saturday</div></div>
+          <div class="week-slots">
+            <div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-23:00</span></div>
+            <div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-22:30</span><span class="slot-cap">80单/h</span></div>
+            <div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-22:00</span></div>
+          </div>
+          <div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周六')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
+        </div>
+        <div class="week-row">
+          <div class="week-day">周日<div class="day-en">Sunday</div></div>
+          <div class="week-slots">
+            <div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">10:00-22:00</span></div>
+            <div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:30-21:30</span><span class="slot-cap">60单/h</span></div>
+            
+          </div>
+          <div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周日')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="g-card">
+    <div class="ph-card-header">
+      节假日 / 特殊日期
+      <button class="g-btn g-btn-primary" style="height:28px;font-size:12px;" onclick="openHolidayDrawer('add')">
+        <i data-lucide="plus" style="width:13px;height:13px;"></i>添加日期
+      </button>
+    </div>
+    <div class="ph-card-body" style="padding:0;">
+      <table class="holiday-table">
+        <thead><tr><th>日期</th><th>类型</th><th>时间</th><th>原因</th><th style="width:100px;">操作</th></tr></thead>
+        <tbody>
+          <tr><td>2026-02-17 ~ 2026-02-19</td><td><span class="h-tag closed">休息</span></td><td>全天</td><td>春节假期</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-02-17 ~ 2026-02-19',type:'closed',time:'',reason:'春节假期'})">编辑</a><a class="h-link danger">删除</a></td></tr>
+          <tr><td>2026-04-05</td><td><span class="h-tag closed">休息</span></td><td>全天</td><td>清明节</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-04-05',type:'closed',time:'',reason:'清明节'})">编辑</a><a class="h-link danger">删除</a></td></tr>
+          <tr><td>2026-02-14</td><td><span class="h-tag special">特殊营业</span></td><td>09:00 - 23:30</td><td>情人节延长营业</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-02-14',type:'special',time:'09:00-23:30',reason:'情人节延长营业'})">编辑</a><a class="h-link danger">删除</a></td></tr>
+          <tr><td>2026-05-01</td><td><span class="h-tag special">特殊营业</span></td><td>10:00 - 20:00</td><td>劳动节缩短营业</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-05-01',type:'special',time:'10:00-20:00',reason:'劳动节缩短营业'})">编辑</a><a class="h-link danger">删除</a></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- 添加时段抽屉 -->
+<div class="g-drawer-mask" id="hoursDrawerMask" onclick="closeHoursDrawer()"></div>
+<div class="g-drawer" id="addSlotDrawer" style="width:480px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title">添加时段</span>
+    <button class="g-drawer-close" onclick="closeHoursDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">时段类型</label>
+      <div class="ph-type-pills">
+        <button class="ph-type-pill tp-biz active" onclick="selectSlotType('biz',this)">营业</button>
+        <button class="ph-type-pill tp-del" onclick="selectSlotType('del',this)">配送</button>
+        <button class="ph-type-pill tp-pick" onclick="selectSlotType('pick',this)">自提</button>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">适用星期</label>
+      <div class="ph-day-pills" id="addDayPills">
+        <button class="ph-day-pill selected" onclick="toggleDayPill(this)">周一</button>
+        <button class="ph-day-pill selected" onclick="toggleDayPill(this)">周二</button>
+        <button class="ph-day-pill selected" onclick="toggleDayPill(this)">周三</button>
+        <button class="ph-day-pill selected" onclick="toggleDayPill(this)">周四</button>
+        <button class="ph-day-pill selected" onclick="toggleDayPill(this)">周五</button>
+        <button class="ph-day-pill" onclick="toggleDayPill(this)">周六</button>
+        <button class="ph-day-pill" onclick="toggleDayPill(this)">周日</button>
+      </div>
+      <div class="ph-quick-btns">
+        <button class="ph-quick-btn" onclick="quickSelectDays('all')">全选</button>
+        <button class="ph-quick-btn" onclick="quickSelectDays('weekday')">工作日</button>
+        <button class="ph-quick-btn" onclick="quickSelectDays('weekend')">周末</button>
+      </div>
+    </div>
+    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
+      <div class="g-form-group">
+        <label class="g-form-label required">开始时间</label>
+        <input type="time" class="g-input" value="09:00" style="width:100%;" />
+      </div>
+      <div class="g-form-group">
+        <label class="g-form-label required">结束时间</label>
+        <input type="time" class="g-input" value="22:00" style="width:100%;" />
+      </div>
+    </div>
+    <div class="g-form-group" id="addCapField" style="display:none;">
+      <label class="g-form-label">容量上限</label>
+      <div style="display:flex; align-items:center; gap:6px;">
+        <input type="number" class="g-input" value="50" style="width:120px;" />
+        <span style="font-size:13px; color:#666;">单/小时</span>
+      </div>
+      <div class="g-hint">该时段内每小时最大接单量</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">备注</label>
+      <textarea class="g-textarea" rows="2" placeholder="可选，如：午市高峰时段"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeHoursDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeHoursDrawer()">确认添加</button>
+  </div>
+</div>
+
+<!-- 编辑时段抽屉 -->
+<div class="g-drawer" id="editDayDrawer" style="width:520px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="editDayTitle">编辑时段 - 周一</span>
+    <button class="g-drawer-close" onclick="closeHoursDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="ph-toggle-row">
+      <button class="g-toggle on" id="dayOpenToggle" onclick="toggleDayOpen(this)"></button>
+      <span class="g-toggle-label">今日营业</span>
+      <span class="ph-toggle-hint" id="dayClosedHint">该日休息，不接单</span>
+    </div>
+
+    <div id="editSlotList">
+      <div class="ph-slot-card">
+        <span class="ph-slot-tag st-biz">营业</span>
+        <div class="ph-slot-fields">
+          <div><label>开始</label><input type="time" class="g-input" value="09:00" /></div>
+          <div><label>结束</label><input type="time" class="g-input" value="22:00" /></div>
+        </div>
+        <button class="ph-slot-del"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+      </div>
+      <div class="ph-slot-card">
+        <span class="ph-slot-tag st-del">配送</span>
+        <div class="ph-slot-fields">
+          <div><label>开始</label><input type="time" class="g-input" value="10:00" /></div>
+          <div><label>结束</label><input type="time" class="g-input" value="21:30" /></div>
+          <div><label>容量</label><input type="number" class="g-input" value="50" style="width:70px;" /><span style="font-size:11px;color:#999;margin-left:3px;">单/h</span></div>
+        </div>
+        <button class="ph-slot-del"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+      </div>
+      <div class="ph-slot-card">
+        <span class="ph-slot-tag st-pick">自提</span>
+        <div class="ph-slot-fields">
+          <div><label>开始</label><input type="time" class="g-input" value="09:00" /></div>
+          <div><label>结束</label><input type="time" class="g-input" value="21:00" /></div>
+        </div>
+        <button class="ph-slot-del"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
+      </div>
+    </div>
+
+    <button class="ph-add-dashed" style="margin-top:4px;" onclick="addSlotRow()">
+      <i data-lucide="plus" style="width:14px;height:14px;"></i>添加时段
+    </button>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeHoursDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeHoursDrawer()">保存修改</button>
+  </div>
+</div>
+
+<!-- 节假日抽屉 -->
+<div class="g-drawer" id="holidayDrawer" style="width:480px;">
+  <div class="g-drawer-hd">
+    <span class="g-drawer-title" id="holidayDrawerTitle">添加日期</span>
+    <button class="g-drawer-close" onclick="closeHoursDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">类型</label>
+      <div class="ph-hol-type-pills">
+        <button class="ph-hol-type-pill ht-closed active" onclick="selectHolType('closed',this)">休息</button>
+        <button class="ph-hol-type-pill ht-special" onclick="selectHolType('special',this)">特殊营业</button>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">日期</label>
+      <div class="ph-date-mode">
+        <button class="ph-date-mode-pill active" onclick="switchDateMode('single',this)">单日</button>
+        <button class="ph-date-mode-pill" onclick="switchDateMode('range',this)">日期范围</button>
+      </div>
+      <div id="holDateSingle">
+        <input type="date" class="g-input" id="holDate1" value="2026-05-01" style="width:100%;" />
+      </div>
+      <div id="holDateRange" style="display:none;">
+        <div style="display:flex; align-items:center; gap:8px;">
+          <input type="date" class="g-input" id="holDateFrom" value="2026-05-01" style="flex:1;" />
+          <span style="color:#999;">~</span>
+          <input type="date" class="g-input" id="holDateTo" value="2026-05-03" style="flex:1;" />
+        </div>
+      </div>
+    </div>
+    <div class="g-form-group" id="holTimeGroup" style="display:none;">
+      <label class="g-form-label">营业时间</label>
+      <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
+        <div>
+          <label style="font-size:11px;color:#999;">开始</label>
+          <input type="time" class="g-input" id="holTimeStart" value="09:00" style="width:100%;" />
+        </div>
+        <div>
+          <label style="font-size:11px;color:#999;">结束</label>
+          <input type="time" class="g-input" id="holTimeEnd" value="22:00" style="width:100%;" />
+        </div>
+      </div>
+      <div class="g-hint">特殊营业日的营业时间段</div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">原因</label>
+      <input type="text" class="g-input" id="holReason" placeholder="如：春节假期、情人节延长营业" style="width:100%;" />
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">备注</label>
+      <textarea class="g-textarea" rows="2" placeholder="可选"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeHoursDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" id="holSubmitBtn" onclick="closeHoursDrawer()">确认添加</button>
+  </div>
+</div>
+
+<script>
+function openHoursDrawer(mode, dayName) {
+  document.getElementById('hoursDrawerMask').classList.add('open');
+  if (mode === 'add') {
+    document.getElementById('addSlotDrawer').classList.add('open');
+  } else if (mode === 'editDay') {
+    document.getElementById('editDayTitle').textContent = '编辑时段 - ' + dayName;
+    document.getElementById('editDayDrawer').classList.add('open');
+  }
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+function closeHoursDrawer() {
+  document.getElementById('hoursDrawerMask').classList.remove('open');
+  document.getElementById('addSlotDrawer').classList.remove('open');
+  document.getElementById('editDayDrawer').classList.remove('open');
+  document.getElementById('holidayDrawer').classList.remove('open');
+}
+function selectSlotType(type, el) {
+  el.parentElement.querySelectorAll('.ph-type-pill').forEach(function(b){ b.classList.remove('active'); });
+  el.classList.add('active');
+  document.getElementById('addCapField').style.display = type === 'del' ? '' : 'none';
+}
+function toggleDayPill(el) {
+  el.classList.toggle('selected');
+}
+function quickSelectDays(mode) {
+  var pills = document.querySelectorAll('#addDayPills .ph-day-pill');
+  var weekdays = ['周一','周二','周三','周四','周五'];
+  var weekends = ['周六','周日'];
+  pills.forEach(function(p) {
+    var day = p.textContent;
+    if (mode === 'all') p.classList.add('selected');
+    else if (mode === 'weekday') { weekdays.includes(day) ? p.classList.add('selected') : p.classList.remove('selected'); }
+    else if (mode === 'weekend') { weekends.includes(day) ? p.classList.add('selected') : p.classList.remove('selected'); }
+  });
+}
+function toggleDayOpen(el) {
+  el.classList.toggle('on');
+  var isOn = el.classList.contains('on');
+  document.getElementById('dayClosedHint').style.display = isOn ? 'none' : 'inline';
+  document.getElementById('editSlotList').style.opacity = isOn ? '1' : '0.4';
+  document.getElementById('editSlotList').style.pointerEvents = isOn ? '' : 'none';
+}
+function openHolidayDrawer(mode, data) {
+  document.getElementById('hoursDrawerMask').classList.add('open');
+  document.getElementById('holidayDrawer').classList.add('open');
+  if (mode === 'edit' && data) {
+    document.getElementById('holidayDrawerTitle').textContent = '编辑日期';
+    document.getElementById('holSubmitBtn').textContent = '保存修改';
+    document.getElementById('holReason').value = data.reason || '';
+    // set type pill
+    document.querySelectorAll('.ph-hol-type-pill').forEach(function(b){ b.classList.remove('active'); });
+    if (data.type === 'closed') document.querySelector('.ht-closed').classList.add('active');
+    else document.querySelector('.ht-special').classList.add('active');
+    document.getElementById('holTimeGroup').style.display = data.type === 'special' ? '' : 'none';
+    if (data.time) {
+      var parts = data.time.replace(/\s/g,'').split('-');
+      if (parts.length === 2) {
+        document.getElementById('holTimeStart').value = parts[0];
+        document.getElementById('holTimeEnd').value = parts[1];
+      }
+    }
+    // set date
+    if (data.date && data.date.includes('~')) {
+      switchDateMode('range', document.querySelectorAll('.ph-date-mode-pill')[1]);
+      var dp = data.date.split('~').map(function(s){ return s.trim(); });
+      document.getElementById('holDateFrom').value = dp[0];
+      document.getElementById('holDateTo').value = dp[1];
+    } else {
+      switchDateMode('single', document.querySelectorAll('.ph-date-mode-pill')[0]);
+      document.getElementById('holDate1').value = data.date || '';
+    }
+  } else {
+    document.getElementById('holidayDrawerTitle').textContent = '添加日期';
+    document.getElementById('holSubmitBtn').textContent = '确认添加';
+    document.getElementById('holReason').value = '';
+    document.querySelectorAll('.ph-hol-type-pill').forEach(function(b){ b.classList.remove('active'); });
+    document.querySelector('.ht-closed').classList.add('active');
+    document.getElementById('holTimeGroup').style.display = 'none';
+    switchDateMode('single', document.querySelectorAll('.ph-date-mode-pill')[0]);
+  }
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+function selectHolType(type, el) {
+  el.parentElement.querySelectorAll('.ph-hol-type-pill').forEach(function(b){ b.classList.remove('active'); });
+  el.classList.add('active');
+  document.getElementById('holTimeGroup').style.display = type === 'special' ? '' : 'none';
+}
+function switchDateMode(mode, el) {
+  document.querySelectorAll('.ph-date-mode-pill').forEach(function(b){ b.classList.remove('active'); });
+  if (el) el.classList.add('active');
+  document.getElementById('holDateSingle').style.display = mode === 'single' ? '' : 'none';
+  document.getElementById('holDateRange').style.display = mode === 'range' ? '' : 'none';
+}
+function addSlotRow() {
+  var list = document.getElementById('editSlotList');
+  if (!list) return;
+  var cards = list.querySelectorAll('.ph-slot-card');
+  if (cards.length > 0) {
+    var clone = cards[cards.length - 1].cloneNode(true);
+    clone.querySelectorAll('input').forEach(function(inp){ inp.value = ''; });
+    list.appendChild(clone);
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/store-list.html b/TakeoutSaaS.Prototypes/pages/store-list.html
new file mode 100644
index 0000000..4efd8fd
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-list.html
@@ -0,0 +1,366 @@
+<!-- 门店列表页 -->
+<style>
+  .page-store-list .filter-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
+  .page-store-list .filter-bar input,
+  .page-store-list .filter-bar select {
+    height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+    font-size:13px; outline:none; transition:var(--g-transition); background:#fff;
+  }
+  .page-store-list .filter-bar input:focus,
+  .page-store-list .filter-bar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .page-store-list .filter-bar input { width:220px; }
+
+  .page-store-list .stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+  .page-store-list .stat-card {
+    background:#fff; border-radius:10px; padding:16px 20px;
+    border:none; box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
+  }
+  .page-store-list .stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-2px); }
+  .page-store-list .stat-card .label { font-size:13px; color:#9ca3af; margin-bottom:6px; }
+  .page-store-list .stat-card .value { font-size:24px; font-weight:700; color:#1a1a2e; }
+  .page-store-list .stat-card .value.green { color:#22c55e; }
+  .page-store-list .stat-card .value.orange { color:#f59e0b; }
+  .page-store-list .stat-card .value.red { color:#ef4444; }
+
+  .page-store-list .table-wrap {
+    background:#fff; border-radius:10px; border:none; box-shadow:var(--g-shadow-sm); overflow:hidden;
+  }
+  .page-store-list table { width:100%; border-collapse:collapse; font-size:13px; }
+  .page-store-list thead th {
+    background:#f8f9fb; padding:10px 12px; text-align:left;
+    font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb;
+    white-space:nowrap;
+  }
+  .page-store-list tbody td {
+    padding:12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e;
+  }
+  .page-store-list tbody tr:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .page-store-list tbody tr:last-child td { border-bottom:none; }
+
+
+  .page-store-list .status {
+    display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
+  }
+  .page-store-list .status-dot {
+    width:6px; height:6px; border-radius:50%;
+  }
+  .page-store-list .status-open .status-dot { background:#22c55e; }
+  .page-store-list .status-open { color:#22c55e; }
+  .page-store-list .status-closed .status-dot { background:#9ca3af; }
+  .page-store-list .status-closed { color:#9ca3af; }
+  .page-store-list .status-forced .status-dot { background:#ef4444; }
+  .page-store-list .status-forced { color:#ef4444; }
+
+  .page-store-list .audit-pass { color:#22c55e; font-weight:600; }
+  .page-store-list .audit-pending { color:#f59e0b; font-weight:600; }
+  .page-store-list .audit-reject { color:#ef4444; font-weight:600; }
+
+
+  .page-store-list .pagination {
+    display:flex; align-items:center; justify-content:flex-end;
+    padding:12px 16px; gap:6px; font-size:13px; color:#4b5563;
+    background:#fafbfc;
+  }
+  .page-store-list .page-btn {
+    min-width:34px; height:34px; border:1px solid #e5e7eb; border-radius:8px;
+    background:#fff; cursor:pointer; display:flex; align-items:center;
+    justify-content:center; font-size:13px; transition:var(--g-transition);
+  }
+  .page-store-list .page-btn:hover { border-color:var(--primary); color:var(--primary); }
+  .page-store-list .page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  .page-store-list .store-name-cell { display:flex; align-items:center; gap:10px; }
+  .page-store-list .store-avatar {
+    width:36px; height:36px; border-radius:8px; background:#f8f9fb;
+    display:flex; align-items:center; justify-content:center; flex-shrink:0;
+    overflow:hidden; font-size:14px; color:#9ca3af;
+  }
+  .page-store-list .store-info .name { font-weight:500; color:#1a1a2e; }
+  .page-store-list .store-info .code { font-size:11px; color:#9ca3af; margin-top:2px; }
+</style>
+
+<div class="page-store-list">
+  <!-- 筛选栏 -->
+  <div class="filter-bar">
+    <input type="text" placeholder="搜索门店名称 / 编号 / 电话" />
+    <select>
+      <option value="">营业状态</option>
+      <option>营业中</option>
+      <option>休息中</option>
+      <option>强制关闭</option>
+    </select>
+    <select>
+      <option value="">审核状态</option>
+      <option>待审核</option>
+      <option>已通过</option>
+      <option>已拒绝</option>
+    </select>
+    <select>
+      <option value="">服务方式</option>
+      <option>外卖</option>
+      <option>自提</option>
+      <option>堂食</option>
+    </select>
+    <button class="g-btn">查询</button>
+    <button class="g-btn">重置</button>
+    <div style="flex:1;"></div>
+    <button class="g-btn g-btn-primary" onclick="openSlDrawer('create')">
+      <i data-lucide="plus" style="width:14px;height:14px;"></i>新增门店
+    </button>
+    <button class="g-btn">
+      <i data-lucide="download" style="width:14px;height:14px;"></i>导出
+    </button>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="stat-cards">
+    <div class="stat-card">
+      <div class="label">门店总数</div>
+      <div class="value">5</div>
+    </div>
+    <div class="stat-card">
+      <div class="label">营业中</div>
+      <div class="value green">3</div>
+    </div>
+    <div class="stat-card">
+      <div class="label">休息中</div>
+      <div class="value orange">1</div>
+    </div>
+    <div class="stat-card">
+      <div class="label">待审核</div>
+      <div class="value red">1</div>
+    </div>
+  </div>
+
+  <!-- 表格 -->
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th style="width:220px;">门店信息</th>
+          <th>联系电话</th>
+          <th>店长</th>
+          <th>地址</th>
+          <th>服务方式</th>
+          <th>营业状态</th>
+          <th>审核状态</th>
+          <th>创建时间</th>
+          <th style="width:160px;">操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <div class="store-name-cell">
+              <div class="store-avatar" style="background:#3b82f6"><i data-lucide="store" style="width:20px;height:20px;color:#fff"></i></div>
+              <div class="store-info">
+                <div class="name">老三家外卖（朝阳店）</div>
+                <div class="code">ST20250001</div>
+              </div>
+            </div>
+          </td>
+          <td>138****8001</td>
+          <td>张伟</td>
+          <td>北京市朝阳区建国路88号</td>
+          <td>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="g-tag g-tag-green">自提</span>
+            <span class="g-tag g-tag-orange">堂食</span>
+          </td>
+          <td><span class="status status-open"><span class="status-dot"></span>营业中</span></td>
+          <td><span class="audit-pass">已通过</span></td>
+          <td>2025-06-15</td>
+          <td>
+            <a class="g-action" onclick="openSlDrawer('edit',{name:'老三家外卖（朝阳店）',code:'ST20250001',phone:'13800008001',manager:'张伟'})">编辑</a>
+            <a class="g-action">歇业</a>
+            <a class="g-action g-action-danger">删除</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="store-name-cell">
+              <div class="store-avatar" style="background:#f59e0b"><i data-lucide="store" style="width:20px;height:20px;color:#fff"></i></div>
+              <div class="store-info">
+                <div class="name">老三家外卖（海淀店）</div>
+                <div class="code">ST20250002</div>
+              </div>
+            </div>
+          </td>
+          <td>138****8002</td>
+          <td>李娜</td>
+          <td>北京市海淀区中关村大街66号</td>
+          <td>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="g-tag g-tag-green">自提</span>
+          </td>
+          <td><span class="status status-open"><span class="status-dot"></span>营业中</span></td>
+          <td><span class="audit-pass">已通过</span></td>
+          <td>2025-07-20</td>
+          <td>
+            <a class="g-action" onclick="openSlDrawer('edit',{name:'老三家外卖（海淀店）',code:'ST20250002',phone:'13800008002',manager:'李娜'})">编辑</a>
+            <a class="g-action">歇业</a>
+            <a class="g-action g-action-danger">删除</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="store-name-cell">
+              <div class="store-avatar" style="background:#8b5cf6"><i data-lucide="store" style="width:20px;height:20px;color:#fff"></i></div>
+              <div class="store-info">
+                <div class="name">老三家外卖（望京店）</div>
+                <div class="code">ST20250003</div>
+              </div>
+            </div>
+          </td>
+          <td>138****8003</td>
+          <td>王磊</td>
+          <td>北京市朝阳区望京西路50号</td>
+          <td>
+            <span class="g-tag g-tag-blue">外卖</span>
+          </td>
+          <td><span class="status status-open"><span class="status-dot"></span>营业中</span></td>
+          <td><span class="audit-pass">已通过</span></td>
+          <td>2025-09-01</td>
+          <td>
+            <a class="g-action" onclick="openSlDrawer('edit',{name:'老三家外卖（望京店）',code:'ST20250003',phone:'13800008003',manager:'王磊'})">编辑</a>
+            <a class="g-action">歇业</a>
+            <a class="g-action g-action-danger">删除</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="store-name-cell">
+              <div class="store-avatar" style="background:#ef4444"><i data-lucide="store" style="width:20px;height:20px;color:#fff"></i></div>
+              <div class="store-info">
+                <div class="name">老三家外卖（通州店）</div>
+                <div class="code">ST20250004</div>
+              </div>
+            </div>
+          </td>
+          <td>138****8004</td>
+          <td>赵敏</td>
+          <td>北京市通州区新华大街120号</td>
+          <td>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="g-tag g-tag-green">自提</span>
+            <span class="g-tag g-tag-orange">堂食</span>
+          </td>
+          <td><span class="status status-closed"><span class="status-dot"></span>休息中</span></td>
+          <td><span class="audit-pass">已通过</span></td>
+          <td>2025-10-12</td>
+          <td>
+            <a class="g-action" onclick="openSlDrawer('edit',{name:'老三家外卖（通州店）',code:'ST20250004',phone:'13800008004',manager:'赵敏'})">编辑</a>
+            <a class="g-action">开业</a>
+            <a class="g-action g-action-danger">删除</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="store-name-cell">
+              <div class="store-avatar" style="background:#22c55e"><i data-lucide="store" style="width:20px;height:20px;color:#fff"></i></div>
+              <div class="store-info">
+                <div class="name">老三家外卖（丰台店）</div>
+                <div class="code">ST20250005</div>
+              </div>
+            </div>
+          </td>
+          <td>138****8005</td>
+          <td>刘洋</td>
+          <td>北京市丰台区丰台路18号</td>
+          <td>
+            <span class="g-tag g-tag-blue">外卖</span>
+            <span class="g-tag g-tag-green">自提</span>
+          </td>
+          <td><span class="status status-forced"><span class="status-dot"></span>待审核</span></td>
+          <td><span class="audit-pending">待审核</span></td>
+          <td>2026-01-28</td>
+          <td>
+            <a class="g-action" onclick="openSlDrawer('edit',{name:'老三家外卖（丰台店）',code:'ST20250005',phone:'13800008005',manager:'刘洋'})">编辑</a>
+            <a class="g-action g-action-danger">删除</a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- 分页 -->
+    <div class="pagination">
+      <span>共 5 条</span>
+      <button class="page-btn">&lt;</button>
+      <button class="page-btn active">1</button>
+      <button class="page-btn">&gt;</button>
+      <span style="margin-left:8px;">10 条/页</span>
+    </div>
+  </div>
+</div>
+
+<!-- 门店添加/编辑抽屉 -->
+<div class="g-drawer-mask" id="slDrawerMask" onclick="closeSlDrawer()"></div>
+<div class="g-drawer" id="slDrawer" style="width:560px">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title" id="slDrawerTitle">添加门店</div>
+    <button class="g-drawer-close" onclick="closeSlDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div style="font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px">基本信息</div>
+    <div class="g-form-group">
+      <label class="g-form-label required">门店名称</label>
+      <input class="g-input" placeholder="请输入门店名称">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">门店编码</label>
+      <input class="g-input" placeholder="如：ST20250006">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">联系电话</label>
+      <input class="g-input" placeholder="请输入联系电话">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">负责人</label>
+      <input class="g-input" placeholder="请输入负责人姓名">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">门店地址</label>
+      <input class="g-input" placeholder="请输入详细地址">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">门店图片</label>
+      <div class="g-upload-zone" style="padding:16px">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        <span>点击上传门店图片</span>
+      </div>
+    </div>
+
+    <div style="font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;margin-top:24px">营业设置</div>
+    <div class="g-form-group">
+      <label class="g-form-label">营业状态</label>
+      <select class="g-select">
+        <option>营业中</option>
+        <option>歇业中</option>
+        <option>装修中</option>
+      </select>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">配送方式</label>
+      <div style="display:flex;gap:8px;flex-wrap:wrap">
+        <span class="g-pill checked" onclick="this.classList.toggle('checked')">外卖配送</span>
+        <span class="g-pill" onclick="this.classList.toggle('checked')">到店自提</span>
+        <span class="g-pill" onclick="this.classList.toggle('checked')">堂食</span>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeSlDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeSlDrawer()">确认</button>
+  </div>
+</div>
+
+<script>
+function openSlDrawer(mode) {
+  document.getElementById('slDrawerMask').classList.add('open');
+  document.getElementById('slDrawer').classList.add('open');
+  document.getElementById('slDrawerTitle').textContent = mode === 'edit' ? '编辑门店' : '添加门店';
+}
+function closeSlDrawer() {
+  document.getElementById('slDrawerMask').classList.remove('open');
+  document.getElementById('slDrawer').classList.remove('open');
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/store-pickup.html b/TakeoutSaaS.Prototypes/pages/store-pickup.html
new file mode 100644
index 0000000..8f6dbf2
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-pickup.html
@@ -0,0 +1,245 @@
+<!-- 自提设置页 -->
+<style>
+  .page-pickup { max-width:960px; }
+  .pp-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
+  .pp-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); }
+  .pp-card { background:#fff; border-radius:10px; border:none; box-shadow:var(--g-shadow-sm); margin-bottom:16px; overflow:hidden; transition:var(--g-transition); }
+  .pp-card:hover { box-shadow:var(--g-shadow-md); }
+  .pp-card-header { padding:14px 18px; font-size:14px; font-weight:600; color:#1a1a2e; border-bottom:1px solid #f3f4f6; display:flex; align-items:center; justify-content:space-between; background:#f8f9fb; }
+  .pp-card-body { padding:16px 18px; }
+  .pp-form-row { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid #f3f4f6; gap:12px; }
+  .pp-form-row:last-child { border-bottom:none; }
+  .pp-label { width:130px; font-size:13px; font-weight:500; color:#4b5563; flex-shrink:0; }
+  .pp-control { display:flex; align-items:center; gap:8px; flex:1; }
+  .pp-input { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; width:120px; transition:var(--g-transition); }
+  .pp-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pp-unit { font-size:12px; color:#9ca3af; }
+  .pp-hint { font-size:12px; color:#9ca3af; margin-left:8px; }
+  .pp-form-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:14px; border-top:1px solid #f3f4f6; margin-top:4px; }
+  .pp-table { width:100%; border-collapse:collapse; font-size:13px; }
+  .pp-table th { background:#f8f9fb; padding:10px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; white-space:nowrap; }
+  .pp-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
+  .pp-table tr:last-child td { border-bottom:none; }
+  .pp-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+  .pp-progress { display:flex; align-items:center; gap:6px; }
+  .pp-progress-bar { width:60px; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
+  .pp-progress-fill { height:100%; border-radius:3px; background:var(--primary); }
+  .pp-progress-text { font-size:11px; color:#9ca3af; white-space:nowrap; }
+  .pp-weekday { display:inline-block; padding:1px 8px; border-radius:6px; font-size:11px; font-weight:600; background:#f0f5ff; color:#597ef7; }
+  .pp-mode-switch { display:flex; background:#f8f9fb; border-radius:8px; padding:3px; gap:2px; width:fit-content; margin-bottom:16px; }
+  .pp-mode-item { padding:6px 18px; border-radius:6px; font-size:13px; cursor:pointer; color:#4b5563; border:none; background:none; transition:var(--g-transition); }
+  .pp-mode-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
+  .pp-day-tabs { display:flex; gap:8px; margin-bottom:14px; }
+  .pp-day-tab { padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
+  .pp-day-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
+  .pp-day-tab .dt-date { font-weight:500; }
+  .pp-day-tab .dt-sub { font-size:11px; opacity:0.8; }
+  .pp-slot-grid { display:flex; flex-wrap:wrap; gap:8px; }
+  .pp-slot-cell { width:82px; padding:8px 6px; border-radius:8px; text-align:center; border:1px solid #e5e7eb; transition:var(--g-transition); }
+  .pp-slot-cell .sc-time { font-size:13px; font-weight:500; }
+  .pp-slot-cell .sc-status { font-size:11px; margin-top:2px; }
+  .pp-slot-cell.expired { background:#f8f9fb; color:#bbb; border-color:#e5e7eb; }
+  .pp-slot-cell.available { background:#f0fdf4; color:#16a34a; border-color:#bbf7d0; }
+  .pp-slot-cell.almost { background:#fffbeb; color:#d97706; border-color:#fde68a; }
+  .pp-slot-cell.full { background:#fef2f2; color:#ef4444; border-color:#fecaca; }
+  .pp-legend { display:flex; gap:16px; font-size:12px; color:#9ca3af; margin-top:14px; }
+  .pp-legend span { display:flex; align-items:center; gap:4px; }
+  .pp-legend-dot { width:10px; height:10px; border-radius:2px; }
+  .pp-fg { margin-bottom:18px; }
+  .pp-fg-label { font-size:13px; font-weight:500; color:#4b5563; margin-bottom:6px; display:block; }
+  .pp-fg-hint { font-size:11px; color:#9ca3af; margin-top:4px; }
+  .pp-fg-input { height:34px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; padding:0 10px; outline:none; background:#fff; transition:var(--g-transition); }
+  .pp-fg-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .pp-day-pills { display:flex; gap:6px; }
+  .pp-day-pill { width:42px; height:34px; border-radius:8px; font-size:12px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; display:flex; align-items:center; justify-content:center; transition:var(--g-transition); }
+  .pp-day-pill.selected { background:var(--primary); border-color:var(--primary); color:#fff; }
+  .pp-qk-btns { display:flex; gap:8px; margin-top:8px; }
+  .pp-qk-btn { font-size:11px; color:var(--primary); cursor:pointer; background:none; border:none; padding:0; transition:var(--g-transition); }
+  .pp-qk-btn:hover { text-decoration:underline; }
+</style>
+
+<div class="page-pickup">
+  <div class="pp-toolbar">
+    <select style="width:200px;">
+      <option>老三家外卖（朝阳店）</option>
+      <option>老三家外卖（海淀店）</option>
+      <option>老三家外卖（望京店）</option>
+      <option>老三家外卖（通州店）</option>
+      <option>老三家外卖（丰台店）</option>
+    </select>
+    <div style="flex:1;"></div>
+    <button class="g-btn" onclick="openCopyStoreModal('复制自提设置到其他门店')">
+      <i data-lucide="copy" style="width:14px;height:14px;"></i>复制到其他门店
+    </button>
+  </div>
+
+  <div class="pp-card">
+    <div class="pp-card-header">基本设置</div>
+    <div class="pp-card-body">
+      <div class="pp-form-row">
+        <div class="pp-label">允许当天自提</div>
+        <div class="pp-control"><label class="g-toggle-input"><input type="checkbox" checked><span class="g-toggle-sl"></span></label><span class="pp-hint">开启后顾客可选择当天自提</span></div>
+      </div>
+      <div class="pp-form-row">
+        <div class="pp-label">可预约天数</div>
+        <div class="pp-control"><input type="number" class="pp-input" value="3" style="width:80px;"><span class="pp-unit">天</span><span class="pp-hint">顾客可提前预约的天数</span></div>
+      </div>
+      <div class="pp-form-row">
+        <div class="pp-label">单笔最大数量</div>
+        <div class="pp-control"><input type="number" class="pp-input" value="20" style="width:80px;"><span class="pp-unit">件</span><span class="pp-hint">留空则不限制</span></div>
+      </div>
+      <div class="pp-form-actions"><button class="g-btn">重置</button><button class="g-btn g-btn-primary"><i data-lucide="save" style="width:14px;height:14px;"></i>保存设置</button></div>
+    </div>
+  </div>
+
+  <div class="pp-mode-switch">
+    <button class="pp-mode-item active" onclick="switchPickupMode('big')">大时段模式</button>
+    <button class="pp-mode-item" onclick="switchPickupMode('fine')">精细时段模式</button>
+  </div>
+  <div id="bigSlotSection">
+  <div class="pp-card">
+    <div class="pp-card-header">自提时段<button class="g-btn g-btn-primary g-btn-sm" onclick="openPickupDrawer('add')"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加时段</button></div>
+    <div class="pp-card-body" style="padding:0;">
+      <table class="pp-table"><thead><tr><th>时段名称</th><th>时间范围</th><th>截止(分钟)</th><th>容量</th><th>已预约</th><th>适用星期</th><th>状态</th><th>操作</th></tr></thead>
+      <tbody>
+        <tr><td style="font-weight:500;">上午时段</td><td>09:00-11:30</td><td>30</td><td>20</td><td><div class="pp-progress"><div class="pp-progress-bar"><div class="pp-progress-fill" style="width:25%;"></div></div><span class="pp-progress-text">5/20</span></div></td><td><span class="pp-weekday">周一至周五</span></td><td><label class="g-toggle-input"><input type="checkbox" checked><span class="g-toggle-sl"></span></label></td><td><a class="g-action" onclick="openPickupDrawer('edit',{name:'上午时段',start:'09:00',end:'11:30',cutoff:30,cap:20,days:'weekday'})">编辑</a><a class="g-action g-action-danger">删除</a></td></tr>
+        <tr><td style="font-weight:500;">午间时段</td><td>11:30-14:00</td><td>20</td><td>30</td><td><div class="pp-progress"><div class="pp-progress-bar"><div class="pp-progress-fill" style="width:40%;"></div></div><span class="pp-progress-text">12/30</span></div></td><td><span class="pp-weekday">每天</span></td><td><label class="g-toggle-input"><input type="checkbox" checked><span class="g-toggle-sl"></span></label></td><td><a class="g-action" onclick="openPickupDrawer('edit',{name:'午间时段',start:'11:30',end:'14:00',cutoff:20,cap:30,days:'all'})">编辑</a><a class="g-action g-action-danger">删除</a></td></tr>
+        <tr><td style="font-weight:500;">下午时段</td><td>14:00-17:00</td><td>30</td><td>15</td><td><div class="pp-progress"><div class="pp-progress-bar"><div class="pp-progress-fill" style="width:20%;"></div></div><span class="pp-progress-text">3/15</span></div></td><td><span class="pp-weekday">周一至周五</span></td><td><label class="g-toggle-input"><input type="checkbox" checked><span class="g-toggle-sl"></span></label></td><td><a class="g-action" onclick="openPickupDrawer('edit',{name:'下午时段',start:'14:00',end:'17:00',cutoff:30,cap:15,days:'weekday'})">编辑</a><a class="g-action g-action-danger">删除</a></td></tr>
+        <tr><td style="font-weight:500;">晚间时段</td><td>17:00-20:30</td><td>30</td><td>25</td><td><div class="pp-progress"><div class="pp-progress-bar"><div class="pp-progress-fill" style="width:32%;"></div></div><span class="pp-progress-text">8/25</span></div></td><td><span class="pp-weekday">每天</span></td><td><label class="g-toggle-input"><input type="checkbox" checked><span class="g-toggle-sl"></span></label></td><td><a class="g-action" onclick="openPickupDrawer('edit',{name:'晚间时段',start:'17:00',end:'20:30',cutoff:30,cap:25,days:'all'})">编辑</a><a class="g-action g-action-danger">删除</a></td></tr>
+        <tr><td style="font-weight:500;">周末特惠</td><td>10:00-15:00</td><td>45</td><td>40</td><td><div class="pp-progress"><div class="pp-progress-bar"><div class="pp-progress-fill" style="width:45%;background:#faad14;"></div></div><span class="pp-progress-text">18/40</span></div></td><td><span class="pp-weekday">周六周日</span></td><td><label class="g-toggle-input"><input type="checkbox"><span class="g-toggle-sl"></span></label></td><td><a class="g-action" onclick="openPickupDrawer('edit',{name:'周末特惠',start:'10:00',end:'15:00',cutoff:45,cap:40,days:'weekend'})">编辑</a><a class="g-action g-action-danger">删除</a></td></tr>
+      </tbody></table>
+    </div>
+  </div>
+  </div>
+  <div id="fineSlotSection" style="display:none;">
+  <div class="pp-card">
+    <div class="pp-card-header">生成规则</div>
+    <div class="pp-card-body">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;">
+        <div class="pp-fg"><label class="pp-fg-label">时间间隔</label><select class="pp-input" style="width:100%;"><option>15 分钟</option><option>20 分钟</option><option>25 分钟</option><option selected>30 分钟</option><option>45 分钟</option><option>60 分钟</option></select></div>
+        <div class="pp-fg"><label class="pp-fg-label">每个时段容量</label><div style="display:flex;align-items:center;gap:6px;"><input type="number" class="pp-input" value="5" style="width:80px;"><span class="pp-unit">单</span></div><div class="pp-fg-hint">每个时间窗口最大接单量</div></div>
+        <div class="pp-fg"><label class="pp-fg-label">每日开始时间</label><input type="time" class="pp-input" value="09:00" style="width:100%;"></div>
+        <div class="pp-fg"><label class="pp-fg-label">每日结束时间</label><input type="time" class="pp-input" value="20:30" style="width:100%;"></div>
+        <div class="pp-fg"><label class="pp-fg-label">最少提前预约</label><div style="display:flex;align-items:center;gap:6px;"><input type="number" class="pp-input" value="2" style="width:80px;"><span class="pp-unit">小时</span></div><div class="pp-fg-hint">下单时间距取餐时间的最小间隔</div></div>
+      </div>
+      <div class="pp-fg" style="margin-top:4px;"><label class="pp-fg-label">适用星期</label>
+        <div class="pp-day-pills" id="fineDayPills">
+          <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周一</button>
+          <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周二</button>
+          <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周三</button>
+          <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周四</button>
+          <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周五</button>
+          <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周六</button>
+          <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周日</button>
+        </div>
+        <div class="pp-qk-btns"><button class="pp-qk-btn" onclick="ppQuickDays('all','fineDayPills')">全选</button><button class="pp-qk-btn" onclick="ppQuickDays('weekday','fineDayPills')">工作日</button><button class="pp-qk-btn" onclick="ppQuickDays('weekend','fineDayPills')">周末</button></div>
+      </div>
+      <div class="pp-form-actions"><button class="g-btn">重置</button><button class="g-btn g-btn-primary"><i data-lucide="save" style="width:14px;height:14px;"></i>保存规则</button></div>
+    </div>
+  </div>
+  <div class="pp-card">
+    <div class="pp-card-header">时段预览<span style="font-size:12px;font-weight:400;color:#999;">根据规则自动生成，以下为预览效果</span></div>
+    <div class="pp-card-body">
+      <div class="pp-day-tabs">
+        <button class="pp-day-tab active" onclick="switchPreviewDay(this)"><span class="dt-date">2/11</span> <span class="dt-sub">周三 今天</span></button>
+        <button class="pp-day-tab" onclick="switchPreviewDay(this)"><span class="dt-date">2/12</span> <span class="dt-sub">周四 明天</span></button>
+        <button class="pp-day-tab" onclick="switchPreviewDay(this)"><span class="dt-date">2/13</span> <span class="dt-sub">周五 后天</span></button>
+      </div>
+      <div class="pp-slot-grid"><div class="pp-slot-cell expired"><div class="sc-time">09:00</div><div class="sc-status">已过期</div></div><div class="pp-slot-cell expired"><div class="sc-time">09:30</div><div class="sc-status">已过期</div></div><div class="pp-slot-cell expired"><div class="sc-time">10:00</div><div class="sc-status">已过期</div></div><div class="pp-slot-cell expired"><div class="sc-time">10:30</div><div class="sc-status">已过期</div></div><div class="pp-slot-cell available"><div class="sc-time">11:00</div><div class="sc-status">剩余 3</div></div><div class="pp-slot-cell available"><div class="sc-time">11:30</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell almost"><div class="sc-time">12:00</div><div class="sc-status">剩余 1</div></div><div class="pp-slot-cell full"><div class="sc-time">12:30</div><div class="sc-status">已满</div></div><div class="pp-slot-cell full"><div class="sc-time">13:00</div><div class="sc-status">已满</div></div><div class="pp-slot-cell available"><div class="sc-time">13:30</div><div class="sc-status">剩余 2</div></div><div class="pp-slot-cell available"><div class="sc-time">14:00</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell available"><div class="sc-time">14:30</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell available"><div class="sc-time">15:00</div><div class="sc-status">剩余 4</div></div><div class="pp-slot-cell available"><div class="sc-time">15:30</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell available"><div class="sc-time">16:00</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell available"><div class="sc-time">16:30</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell available"><div class="sc-time">17:00</div><div class="sc-status">剩余 3</div></div><div class="pp-slot-cell available"><div class="sc-time">17:30</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell almost"><div class="sc-time">18:00</div><div class="sc-status">剩余 1</div></div><div class="pp-slot-cell available"><div class="sc-time">18:30</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell available"><div class="sc-time">19:00</div><div class="sc-status">剩余 5</div></div><div class="pp-slot-cell available"><div class="sc-time">19:30</div><div class="sc-status">剩余 4</div></div><div class="pp-slot-cell available"><div class="sc-time">20:00</div><div class="sc-status">剩余 5</div></div></div>
+      <div class="pp-legend">
+        <span><span class="pp-legend-dot" style="background:#d9d9d9;"></span>已过期</span>
+        <span><span class="pp-legend-dot" style="background:#b7eb8f;"></span>可预约</span>
+        <span><span class="pp-legend-dot" style="background:#ffd591;"></span>即将满</span>
+        <span><span class="pp-legend-dot" style="background:#ffa39e;"></span>已满</span>
+      </div>
+    </div>
+  </div>
+  </div>
+</div>
+
+<div class="g-drawer-mask" id="ppDrawerMask" onclick="closePickupDrawer()"></div>
+<div class="g-drawer" id="ppSlotDrawer" style="width:480px;">
+  <div class="g-drawer-hd"><span class="g-drawer-title" id="ppDrawerTitle">添加时段</span><button class="g-drawer-close" onclick="closePickupDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
+  <div class="g-drawer-bd">
+    <div class="pp-fg"><label class="pp-fg-label">时段名称</label><input type="text" class="pp-fg-input" id="ppName" placeholder="如：上午时段" style="width:100%;" /></div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+      <div class="pp-fg"><label class="pp-fg-label">开始时间</label><input type="time" class="pp-fg-input" id="ppStart" value="09:00" style="width:100%;" /></div>
+      <div class="pp-fg"><label class="pp-fg-label">结束时间</label><input type="time" class="pp-fg-input" id="ppEnd" value="17:00" style="width:100%;" /></div>
+    </div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+      <div class="pp-fg"><label class="pp-fg-label">截止时间</label><div style="display:flex;align-items:center;gap:6px;"><input type="number" class="pp-fg-input" id="ppCutoff" value="30" style="width:80px;"><span class="pp-unit">分钟</span></div><div class="pp-fg-hint">时段开始前停止接单</div></div>
+      <div class="pp-fg"><label class="pp-fg-label">容量上限</label><div style="display:flex;align-items:center;gap:6px;"><input type="number" class="pp-fg-input" id="ppCap" value="20" style="width:80px;"><span class="pp-unit">单</span></div><div class="pp-fg-hint">该时段最大接单数</div></div>
+    </div>
+    <div class="pp-fg"><label class="pp-fg-label">适用星期</label>
+      <div class="pp-day-pills" id="ppDayPills">
+        <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周一</button>
+        <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周二</button>
+        <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周三</button>
+        <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周四</button>
+        <button class="pp-day-pill selected" onclick="this.classList.toggle('selected')">周五</button>
+        <button class="pp-day-pill" onclick="this.classList.toggle('selected')">周六</button>
+        <button class="pp-day-pill" onclick="this.classList.toggle('selected')">周日</button>
+      </div>
+      <div class="pp-qk-btns"><button class="pp-qk-btn" onclick="ppQuickDays('all','ppDayPills')">全选</button><button class="pp-qk-btn" onclick="ppQuickDays('weekday','ppDayPills')">工作日</button><button class="pp-qk-btn" onclick="ppQuickDays('weekend','ppDayPills')">周末</button></div>
+    </div>
+    <div class="pp-fg"><label class="pp-fg-label">启用状态</label><label class="g-toggle-input"><input type="checkbox" id="ppEnabled" checked><span class="g-toggle-sl"></span></label></div>
+  </div>
+  <div class="g-drawer-ft"><button class="g-btn" onclick="closePickupDrawer()">取消</button><button class="g-btn g-btn-primary" id="ppSubmitBtn" onclick="closePickupDrawer()">确认添加</button></div>
+</div>
+
+<script>
+function switchPickupMode(mode) {
+  document.querySelectorAll('.pp-mode-item').forEach(function(b){ b.classList.remove('active'); });
+  event.currentTarget.classList.add('active');
+  document.getElementById('bigSlotSection').style.display = mode==='big' ? '' : 'none';
+  document.getElementById('fineSlotSection').style.display = mode==='fine' ? '' : 'none';
+}
+function openPickupDrawer(mode, data) {
+  document.getElementById('ppDrawerMask').classList.add('open');
+  document.getElementById('ppSlotDrawer').classList.add('open');
+  var weekdays=['周一','周二','周三','周四','周五'], weekends=['周六','周日'];
+  if (mode==='edit' && data) {
+    document.getElementById('ppDrawerTitle').textContent='编辑时段 - '+data.name;
+    document.getElementById('ppSubmitBtn').textContent='保存修改';
+    document.getElementById('ppName').value=data.name||'';
+    document.getElementById('ppStart').value=data.start||'';
+    document.getElementById('ppEnd').value=data.end||'';
+    document.getElementById('ppCutoff').value=data.cutoff||30;
+    document.getElementById('ppCap').value=data.cap||20;
+    document.querySelectorAll('#ppDayPills .pp-day-pill').forEach(function(p){
+      var d=p.textContent;
+      if(data.days==='all') p.classList.add('selected');
+      else if(data.days==='weekday') p.classList.toggle('selected',weekdays.includes(d));
+      else if(data.days==='weekend') p.classList.toggle('selected',weekends.includes(d));
+    });
+  } else {
+    document.getElementById('ppDrawerTitle').textContent='添加时段';
+    document.getElementById('ppSubmitBtn').textContent='确认添加';
+    document.getElementById('ppName').value='';
+    document.getElementById('ppStart').value='09:00';
+    document.getElementById('ppEnd').value='17:00';
+    document.getElementById('ppCutoff').value=30;
+    document.getElementById('ppCap').value=20;
+    ppQuickDays('weekday','ppDayPills');
+  }
+  if(typeof lucide!=='undefined') lucide.createIcons();
+}
+function closePickupDrawer() {
+  document.getElementById('ppDrawerMask').classList.remove('open');
+  document.getElementById('ppSlotDrawer').classList.remove('open');
+}
+function ppQuickDays(mode, containerId) {
+  var pills=document.querySelectorAll('#'+containerId+' .pp-day-pill');
+  var weekdays=['周一','周二','周三','周四','周五'], weekends=['周六','周日'];
+  pills.forEach(function(p){
+    var d=p.textContent;
+    if(mode==='all') p.classList.add('selected');
+    else if(mode==='weekday') p.classList.toggle('selected',weekdays.includes(d));
+    else if(mode==='weekend') p.classList.toggle('selected',weekends.includes(d));
+  });
+}
+function switchPreviewDay(el) {
+  document.querySelectorAll('.pp-day-tab').forEach(function(b){ b.classList.remove('active'); });
+  el.classList.add('active');
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/store-qualifications.html b/TakeoutSaaS.Prototypes/pages/store-qualifications.html
new file mode 100644
index 0000000..8a3ddf7
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-qualifications.html
@@ -0,0 +1,187 @@
+<!-- 资质证照页 -->
+<style>
+  .pq-top-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;box-shadow:var(--g-shadow-sm);border-radius:10px;padding:12px 16px;background:#fff;}
+  .pq-top-bar select{height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;outline:none;background:#fff;min-width:180px;cursor:pointer;transition:var(--g-transition);}
+  .pq-top-bar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
+  .pq-card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
+  .pq-card-title{font-size:15px;font-weight:600;color:#1a1a2e;}
+  .pq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
+  .pq-item{border:none;border-radius:10px;overflow:hidden;box-shadow:var(--g-shadow-sm);transition:var(--g-transition);}
+  .pq-item:hover{box-shadow:0 4px 16px rgba(0,0,0,0.10);}
+  .pq-thumb{height:160px;background:#f8f9fb;display:flex;align-items:center;justify-content:center;border-bottom:1px dashed #e5e7eb;}
+  .pq-thumb svg{width:48px;height:48px;color:#bbb;}
+  .pq-body{padding:12px 14px 14px;}
+  .pq-type-tag{display:inline-block;padding:2px 10px;border-radius:6px;font-size:12px;margin-bottom:8px;font-weight:600;}
+  .pq-tag-blue{background:#e6f7ff;color:#1890ff;}
+  .pq-tag-green{background:#f6ffed;color:#22c55e;}
+  .pq-tag-purple{background:#f9f0ff;color:#722ed1;}
+  .pq-tag-orange{background:#fff7e6;color:#f59e0b;}
+  .pq-tag-teal{background:#e6fffb;color:#13c2c2;}
+  .pq-tag-grey{background:#f8f9fb;color:#9ca3af;}
+  .pq-doc-no{font-size:13px;color:#1a1a2e;margin-bottom:6px;word-break:break-all;}
+  .pq-dates{font-size:12px;color:#9ca3af;margin-bottom:8px;}
+  .pq-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;margin-bottom:10px;font-weight:600;}
+  .pq-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
+  .pq-status-green .pq-status-dot{background:#22c55e;} .pq-status-green{color:#22c55e;}
+  .pq-status-orange .pq-status-dot{background:#f59e0b;} .pq-status-orange{color:#f59e0b;}
+  .pq-status-red .pq-status-dot{background:#ef4444;} .pq-status-red{color:#ef4444;}
+  .pq-actions{display:flex;gap:12px;border-top:1px solid #f3f4f6;padding-top:10px;}
+  .pq-remind-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13px;color:#1a1a2e;}
+  .pq-remind-row label{min-width:100px;text-align:right;font-weight:500;color:#4b5563;}
+  .pq-remind-row input[type=number]{width:80px;height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;outline:none;text-align:center;transition:var(--g-transition);}
+  .pq-remind-row input[type=number]:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
+  .pq-remind-row .unit{color:#9ca3af;font-size:12px;}
+  .pq-checks{display:flex;gap:18px;}
+  .pq-checks label{display:flex;align-items:center;gap:5px;font-size:13px;color:#1a1a2e;cursor:pointer;}
+  .pq-checks input[type=checkbox]{accent-color:var(--primary);cursor:pointer;}
+  .pq-item.pq-expired { border-left:3px solid #ef4444; background:#fff1f0; }
+  .pq-item.pq-expiring { border-left:3px solid #f59e0b; background:#fffbeb; }
+  @media(max-width:900px){.pq-grid{grid-template-columns:repeat(2,1fr);}}
+  @media(max-width:600px){.pq-grid{grid-template-columns:1fr;}}
+</style>
+
+<div class="pq-top-bar">
+  <select>
+    <option>老三家外卖（朝阳店）</option>
+    <option>老三家外卖（海淀店）</option>
+    <option>老三家外卖（丰台店）</option>
+    <option>老三家外卖（西城店）</option>
+    <option>老三家外卖（东城店）</option>
+  </select>
+</div>
+
+<div class="g-card" style="margin-bottom:16px;">
+  <div class="pq-card-hd">
+    <span class="pq-card-title">资质证照</span>
+    <button class="g-btn g-btn-primary" onclick="openSqDrawer()">+ 上传证照</button>
+  </div>
+  <div class="pq-grid">
+    <div class="pq-item">
+      <div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
+      <div class="pq-body">
+        <span class="pq-type-tag pq-tag-blue">营业执照</span>
+        <div class="pq-doc-no">No.91110105MA01XXXX</div>
+        <div class="pq-dates">发证日期 2024-01-15　有效期至 2027-01-14</div>
+        <div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
+        <div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
+      </div>
+    </div>
+    <div class="pq-item">
+      <div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
+      <div class="pq-body">
+        <span class="pq-type-tag pq-tag-green">食品经营许可证</span>
+        <div class="pq-doc-no">No.JY11105XXXXXXX</div>
+        <div class="pq-dates">发证日期 2024-03-20　有效期至 2027-03-19</div>
+        <div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
+        <div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
+      </div>
+    </div>
+    <div class="pq-item pq-expiring">
+      <div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
+      <div class="pq-body">
+        <span class="pq-type-tag pq-tag-purple">食品安全管理员证</span>
+        <div class="pq-doc-no">No.AQGL2024XXXX</div>
+        <div class="pq-dates">发证日期 2024-06-01　有效期至 2025-05-31</div>
+        <div class="pq-status pq-status-orange"><span class="pq-status-dot"></span>即将过期</div>
+        <div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
+      </div>
+    </div>
+    <div class="pq-item pq-expired">
+      <div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
+      <div class="pq-body">
+        <span class="pq-type-tag pq-tag-orange">消防安全检查合格证</span>
+        <div class="pq-doc-no">No.XF2024XXXXX</div>
+        <div class="pq-dates">发证日期 2024-02-10　有效期至 2026-02-09</div>
+        <div class="pq-status pq-status-red"><span class="pq-status-dot"></span>已过期</div>
+        <div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
+      </div>
+    </div>
+    <div class="pq-item">
+      <div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
+      <div class="pq-body">
+        <span class="pq-type-tag pq-tag-teal">健康证（张伟）</span>
+        <div class="pq-doc-no">No.JK2024XXXXX</div>
+        <div class="pq-dates">发证日期 2024-08-15　有效期至 2025-08-14</div>
+        <div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
+        <div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
+      </div>
+    </div>
+    <div class="pq-item">
+      <div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
+      <div class="pq-body">
+        <span class="pq-type-tag pq-tag-grey">排污许可证</span>
+        <div class="pq-doc-no">No.PW2024XXXXX</div>
+        <div class="pq-dates">发证日期 2025-01-01　有效期至 2028-12-31</div>
+        <div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
+        <div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="g-card">
+  <div class="pq-card-hd"><span class="pq-card-title">到期提醒设置</span></div>
+  <div class="pq-remind-row"><label>提前提醒天数</label><input type="number" value="30"><span class="unit">天</span></div>
+  <div class="pq-remind-row"><label>提醒方式</label><div class="pq-checks"><label><input type="checkbox" checked>站内通知</label><label><input type="checkbox">短信通知</label><label><input type="checkbox">邮件通知</label></div></div>
+  <div class="pq-remind-row"><label></label><button class="g-btn g-btn-primary">保存设置</button></div>
+</div>
+
+<!-- 上传证照抽屉 -->
+<div class="g-drawer-mask" id="sqDrawerMask" onclick="closeSqDrawer()"></div>
+<div class="g-drawer" id="sqDrawer" style="width:480px">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title">上传证照</div>
+    <button class="g-drawer-close" onclick="closeSqDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">证照类型</label>
+      <select class="g-select">
+        <option value="">请选择证照类型</option>
+        <option>营业执照</option>
+        <option>食品经营许可证</option>
+        <option>卫生许可证</option>
+        <option>消防安全检查合格证</option>
+        <option>食品安全管理员证</option>
+        <option>健康证</option>
+        <option>排污许可证</option>
+        <option>其他</option>
+      </select>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">证照编号</label>
+      <input class="g-input" placeholder="请输入证照编号">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">有效期至</label>
+      <input type="date" class="g-input">
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">上传证照图片</label>
+      <div class="g-upload-zone">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        <p>点击或拖拽上传证照图片</p>
+        <p style="font-size:11px;color:#999;margin-top:4px">支持 JPG、PNG 格式，不超过 5MB</p>
+      </div>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label">备注</label>
+      <textarea class="g-textarea" rows="3" placeholder="如有特殊说明请填写"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="closeSqDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="closeSqDrawer()">确认上传</button>
+  </div>
+</div>
+
+<script>
+function openSqDrawer() {
+  document.getElementById('sqDrawerMask').classList.add('open');
+  document.getElementById('sqDrawer').classList.add('open');
+}
+function closeSqDrawer() {
+  document.getElementById('sqDrawerMask').classList.remove('open');
+  document.getElementById('sqDrawer').classList.remove('open');
+}
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/store-staff.html b/TakeoutSaaS.Prototypes/pages/store-staff.html
new file mode 100644
index 0000000..f2567e9
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/store-staff.html
@@ -0,0 +1,406 @@
+<!-- 员工排班页 -->
+<style>
+  .ps-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; }
+  .ps-filters { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
+  .ps-staff-info { display:flex; align-items:center; gap:10px; }
+  .ps-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:500; flex-shrink:0; }
+  .ps-staff-name { font-weight:500; color:#1a1a2e; }
+  .ps-staff-phone { color:#4b5563; font-size:12px; margin-top:2px; }
+  .ps-status { display:flex; align-items:center; gap:6px; }
+  .ps-dot { width:6px; height:6px; border-radius:50%; }
+  .ps-dot-green { background:#22c55e; }
+  .ps-dot-orange { background:#f59e0b; }
+  .ps-dot-grey { background:#9ca3af; }
+  .ps-perm-pill { display:inline-block; padding:1px 6px; background:#f0f5ff; color:#2f54eb; border-radius:6px; font-size:11px; margin:1px 2px; font-weight:600; }
+  .ps-actions a { color:var(--primary); text-decoration:none; margin-right:12px; font-size:13px; cursor:pointer; transition:var(--g-transition); }
+  .ps-actions a:hover { text-decoration:underline; }
+  .ps-actions a.ps-danger { color:#ef4444; }
+  .ps-pagination { display:flex; justify-content:flex-end; align-items:center; margin-top:16px; gap:4px; }
+  .ps-page-btn { min-width:32px; height:34px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; color:#1a1a2e; transition:var(--g-transition); }
+  .ps-page-btn.active { border-color:var(--primary); color:var(--primary); }
+  .ps-page-btn:hover { border-color:var(--primary); color:var(--primary); }
+  .ps-page-info { color:#4b5563; font-size:13px; margin-right:12px; }
+  .ps-schedule { width:100%; border-collapse:collapse; }
+  .ps-schedule th,.ps-schedule td { padding:10px 8px; text-align:center; border-bottom:1px solid #f3f4f6; font-size:13px; }
+  .ps-schedule th { background:#f8f9fb; font-weight:600; color:#6b7280; }
+  .ps-schedule td.ps-shift-morning { background:#e6f7ff; color:#096dd9; }
+  .ps-schedule td.ps-shift-evening { background:#fff7e6; color:#d46b08; }
+  .ps-schedule td.ps-shift-full { background:#f6ffed; color:#389e0d; }
+  .ps-schedule td.ps-shift-off { background:#f8f9fb; color:#9ca3af; }
+  .ps-schedule .ps-sched-name { text-align:left; font-weight:500; padding-left:12px; white-space:nowrap; color:#1a1a2e; }
+  .ps-schedule .ps-sched-role { font-size:11px; color:#4b5563; font-weight:normal; }
+  .ps-shift-label { font-size:11px; display:block; color:inherit; opacity:0.7; }
+  .ps-perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+  .ps-perm-check { display:flex; align-items:center; gap:6px; font-size:13px; color:#1a1a2e; cursor:pointer; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; transition:var(--g-transition); }
+  .ps-perm-check:hover { border-color:var(--primary); }
+  .ps-perm-check input { accent-color:var(--primary); cursor:pointer; }
+  .ps-perm-check.all { grid-column:1/-1; background:#f0f5ff; border-color:#d6e4ff; }
+
+  /* Schedule drawer */
+  .ps-sched-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #f3f4f6; }
+  .ps-sched-row:last-child { border-bottom:none; }
+  .ps-sched-day { width:40px; font-weight:600; color:#1a1a2e; flex-shrink:0; }
+  .ps-shift-pills { display:flex; gap:6px; flex-shrink:0; }
+  .ps-shift-pill { padding:4px 10px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
+  .ps-shift-pill:hover { border-color:var(--primary); color:var(--primary); }
+  .ps-shift-pill.active { color:#fff; border-color:transparent; }
+  .ps-shift-pill.s-morning.active { background:#1890ff; }
+  .ps-shift-pill.s-evening.active { background:#fa8c16; }
+  .ps-shift-pill.s-full.active { background:#22c55e; }
+  .ps-shift-pill.s-off.active { background:#9ca3af; }
+  .ps-sched-times { display:flex; align-items:center; gap:4px; font-size:12px; color:#4b5563; }
+  .ps-sched-times input[type=time] { height:34px; border:1px solid #e5e7eb; border-radius:8px; font-size:12px; padding:0 4px; outline:none; transition:var(--g-transition); }
+  .ps-sched-times input[type=time]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+  /* Week editor */
+  .ps-week-table { width:100%; border-collapse:collapse; }
+  .ps-week-table th { background:#f8f9fb; padding:8px 6px; text-align:center; font-weight:600; color:#6b7280; border:1px solid #f3f4f6; font-size:12px; }
+  .ps-week-table td { border:1px solid #f3f4f6; padding:0; text-align:center; height:52px; }
+  .ps-week-table .ps-wk-name { text-align:left; padding:8px 10px; font-weight:500; font-size:13px; white-space:nowrap; background:#fff; color:#1a1a2e; }
+  .ps-wk-cell { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:var(--g-transition); user-select:none; font-size:12px; gap:2px; }
+  .ps-wk-cell:hover { filter:brightness(0.95); }
+  .ps-wk-cell .wk-time { font-size:11px; opacity:0.8; }
+  .ps-wk-cell[data-shift=morning] { background:#e6f7ff; color:#096dd9; }
+  .ps-wk-cell[data-shift=evening] { background:#fff7e6; color:#d46b08; }
+  .ps-wk-cell[data-shift=full] { background:#f6ffed; color:#389e0d; }
+  .ps-wk-cell[data-shift=off] { background:#f8f9fb; color:#9ca3af; }
+  .ps-week-legend { display:flex; gap:16px; margin-bottom:14px; font-size:12px; color:#4b5563; }
+  .ps-week-legend span { display:flex; align-items:center; gap:4px; }
+  .ps-week-legend i { width:12px; height:12px; border-radius:2px; display:inline-block; }
+  .ps-week-legend .lg-m { background:#e6f7ff; border:1px solid #91d5ff; }
+  .ps-week-legend .lg-e { background:#fff7e6; border:1px solid #ffd591; }
+  .ps-week-legend .lg-f { background:#f6ffed; border:1px solid #b7eb8f; }
+  .ps-week-legend .lg-o { background:#f8f9fb; border:1px solid #e5e7eb; }
+
+  /* Shift template */
+  .ps-tpl-row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid #f3f4f6; }
+  .ps-tpl-row:last-child { border-bottom:none; }
+  .ps-tpl-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
+  .ps-tpl-dot.m { background:#1890ff; }
+  .ps-tpl-dot.e { background:#fa8c16; }
+  .ps-tpl-dot.f { background:#22c55e; }
+  .ps-tpl-name { width:50px; font-weight:500; font-size:13px; color:#1a1a2e; }
+  .ps-tpl-times { display:flex; align-items:center; gap:6px; }
+  .ps-tpl-times input[type=time] { height:34px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; padding:0 8px; outline:none; width:110px; transition:var(--g-transition); }
+  .ps-tpl-times input[type=time]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .ps-tpl-times .sep { color:#9ca3af; }
+</style>
+
+<div class="ps-page">
+  <div class="ps-toolbar">
+    <select class="g-select">
+      <option>老三家外卖(总店)</option>
+      <option>老三家外卖(朝阳店)</option>
+      <option>老三家外卖(海淀店)</option>
+      <option>老三家外卖(丰台店)</option>
+      <option>老三家外卖(通州店)</option>
+    </select>
+    <button class="g-btn" onclick="openCopyStoreModal('复制员工排班到其他门店')">复制到其他门店</button>
+  </div>
+
+  <div class="g-card">
+    <div class="g-card-hd"><span class="g-card-title">员工列表</span><button class="g-btn g-btn-primary" onclick="openStaffDrawer()">+ 添加员工</button></div>
+    <div class="ps-filters">
+      <input class="g-input" placeholder="搜索姓名/手机号" />
+      <select class="g-select"><option>全部角色</option><option>店长</option><option>收银员</option><option>配送员</option><option>厨师</option></select>
+      <select class="g-select"><option>全部状态</option><option>在职</option><option>休假</option><option>离职</option></select>
+    </div>
+    <table class="g-table"><thead><tr><th>员工信息</th><th>角色</th><th>邮箱</th><th>状态</th><th>权限</th><th>入职时间</th><th>操作</th></tr></thead>
+    <tbody><tr>
+  <td><div class="ps-staff-info"><div class="ps-avatar" style="background:#f56a00">张</div><div><div class="ps-staff-name">张伟</div><div class="ps-staff-phone">138****8001</div></div></div></td>
+  <td><span class="g-tag g-tag-red">店长</span></td>
+  <td>zhangwei@example.com</td>
+  <td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
+  <td><span class='ps-perm-pill'>全部权限</span></td>
+  <td>2024-01-15</td>
+  <td class="ps-actions"><a onclick="openStaffDrawer('edit','张伟')">编辑</a><a onclick="openSchedDrawer('张伟','店长')">排班</a><a class="ps-danger">删除</a></td>
+</tr>
+<tr>
+  <td><div class="ps-staff-info"><div class="ps-avatar" style="background:#7265e6">李</div><div><div class="ps-staff-name">李娜</div><div class="ps-staff-phone">138****8002</div></div></div></td>
+  <td><span class="g-tag g-tag-blue">收银员</span></td>
+  <td>lina@example.com</td>
+  <td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
+  <td><span class='ps-perm-pill'>收银</span><span class='ps-perm-pill'>退款</span></td>
+  <td>2024-03-20</td>
+  <td class="ps-actions"><a onclick="openStaffDrawer('edit','李娜')">编辑</a><a onclick="openSchedDrawer('李娜','收银员')">排班</a><a class="ps-danger">删除</a></td>
+</tr>
+<tr>
+  <td><div class="ps-staff-info"><div class="ps-avatar" style="background:#52c41a">王</div><div><div class="ps-staff-name">王磊</div><div class="ps-staff-phone">138****8003</div></div></div></td>
+  <td><span class="g-tag g-tag-green">配送员</span></td>
+  <td><span style='color:#999'>-</span></td>
+  <td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
+  <td><span class='ps-perm-pill'>配送管理</span></td>
+  <td>2024-06-01</td>
+  <td class="ps-actions"><a onclick="openStaffDrawer('edit','王磊')">编辑</a><a onclick="openSchedDrawer('王磊','配送员')">排班</a><a class="ps-danger">删除</a></td>
+</tr>
+<tr>
+  <td><div class="ps-staff-info"><div class="ps-avatar" style="background:#fa8c16">赵</div><div><div class="ps-staff-name">赵敏</div><div class="ps-staff-phone">138****8004</div></div></div></td>
+  <td><span class="g-tag g-tag-orange">厨师</span></td>
+  <td><span style='color:#999'>-</span></td>
+  <td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
+  <td><span class='ps-perm-pill'>订单查看</span></td>
+  <td>2024-08-10</td>
+  <td class="ps-actions"><a onclick="openStaffDrawer('edit','赵敏')">编辑</a><a onclick="openSchedDrawer('赵敏','厨师')">排班</a><a class="ps-danger">删除</a></td>
+</tr>
+<tr>
+  <td><div class="ps-staff-info"><div class="ps-avatar" style="background:#1890ff">刘</div><div><div class="ps-staff-name">刘洋</div><div class="ps-staff-phone">138****8005</div></div></div></td>
+  <td><span class="g-tag g-tag-green">配送员</span></td>
+  <td>liuyang@example.com</td>
+  <td><span class="ps-status"><span class="ps-dot ps-dot-orange"></span>休假</span></td>
+  <td><span class='ps-perm-pill'>配送管理</span></td>
+  <td>2025-01-05</td>
+  <td class="ps-actions"><a onclick="openStaffDrawer('edit','刘洋')">编辑</a><a onclick="openSchedDrawer('刘洋','配送员')">排班</a><a class="ps-danger">删除</a></td>
+</tr>
+<tr style="opacity:0.5">
+  <td><div class="ps-staff-info"><div class="ps-avatar" style="background:#bbb">陈</div><div><div class="ps-staff-name">陈静</div><div class="ps-staff-phone">138****8006</div></div></div></td>
+  <td><span class="g-tag g-tag-blue">收银员</span></td>
+  <td><span style='color:#999'>-</span></td>
+  <td><span class="ps-status"><span class="ps-dot ps-dot-grey"></span>离职</span></td>
+  <td><span style='color:#999'>-</span></td>
+  <td>2024-11-20</td>
+  <td class="ps-actions"><a onclick="openStaffDrawer('edit','陈静')">编辑</a><a style="opacity:0.4;pointer-events:none;cursor:not-allowed">排班</a><a class="ps-danger">删除</a></td>
+</tr>
+</tbody></table>
+    <div class="ps-pagination"><span class="ps-page-info">共 6 条</span><button class="ps-page-btn">&lt;</button><button class="ps-page-btn active">1</button><button class="ps-page-btn">&gt;</button></div>
+  </div>
+
+  <div class="g-card">
+    <div class="g-card-hd"><span class="g-card-title">班次模板</span></div>
+    <div class="ps-tpl-row">
+      <span class="ps-tpl-dot m"></span><span class="ps-tpl-name">早班</span>
+      <div class="ps-tpl-times"><input type="time" id="psTplMs" value="09:00" onchange="syncShiftTpl()"><span class="sep">~</span><input type="time" id="psTplMe" value="14:00" onchange="syncShiftTpl()"></div>
+    </div>
+    <div class="ps-tpl-row">
+      <span class="ps-tpl-dot e"></span><span class="ps-tpl-name">晚班</span>
+      <div class="ps-tpl-times"><input type="time" id="psTplEs" value="14:00" onchange="syncShiftTpl()"><span class="sep">~</span><input type="time" id="psTplEe" value="21:00" onchange="syncShiftTpl()"></div>
+    </div>
+    <div class="ps-tpl-row">
+      <span class="ps-tpl-dot f"></span><span class="ps-tpl-name">全天</span>
+      <div class="ps-tpl-times"><input type="time" id="psTplFs" value="09:00" onchange="syncShiftTpl()"><span class="sep">~</span><input type="time" id="psTplFe" value="21:00" onchange="syncShiftTpl()"></div>
+    </div>
+  </div>
+
+  <div class="g-card"><button class="g-btn" onclick="openWeekEditor()">编辑排班</button></div>
+    <table class="ps-schedule"><thead><tr><th style="text-align:left;padding-left:12px">员工</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr></thead>
+    <tbody><tr><td class="ps-sched-name">张伟 <span class="ps-sched-role">店长</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-off">休</td></tr>
+<tr><td class="ps-sched-name">李娜 <span class="ps-sched-role">收银员</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-off">休</td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td></tr>
+<tr><td class="ps-sched-name">王磊 <span class="ps-sched-role">配送员</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-off">休</td></tr>
+<tr><td class="ps-sched-name">赵敏 <span class="ps-sched-role">厨师</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-off">休</td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td></tr>
+<tr><td class="ps-sched-name">刘洋 <span class="ps-sched-role">配送员</span></td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td></tr>
+</tbody></table>
+  </div>
+</div>
+
+<div class="g-drawer-mask" id="psDrawerMask" onclick="closeStaffDrawer()"></div>
+
+<!-- 添加/编辑员工 -->
+<div class="g-drawer" id="psStaffDrawer">
+  <div class="g-drawer-hd"><span class="g-drawer-title" id="psStaffTitle">添加员工</span><button class="g-drawer-close" onclick="closeStaffDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group"><label class="g-form-label required">姓名</label><input type="text" class="g-input" id="psStaffName" placeholder="请输入员工姓名" /></div>
+    <div class="g-form-group"><label class="g-form-label required">手机号</label><input type="text" class="g-input" id="psStaffPhone" placeholder="请输入手机号" /></div>
+    <div class="g-form-group"><label class="g-form-label">邮箱</label><input type="text" class="g-input" id="psStaffEmail" placeholder="可选" /><div class="g-hint">用于接收系统通知</div></div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+      <div class="g-form-group"><label class="g-form-label required">角色</label><select class="g-select" id="psStaffRole"><option>店长</option><option>收银员</option><option>配送员</option><option>厨师</option></select></div>
+      <div class="g-form-group"><label class="g-form-label">状态</label><select class="g-select" id="psStaffStatus"><option>在职</option><option>休假</option><option>离职</option></select></div>
+    </div>
+    <div class="g-form-group"><label class="g-form-label">权限</label>
+      <div class="ps-perm-grid">
+        <label class="ps-perm-check all"><input type="checkbox" id="psPermAll" onchange="toggleAllPerms(this)"> 全部权限</label>
+        <label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 收银</label>
+        <label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 退款</label>
+        <label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 配送管理</label>
+        <label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 订单查看</label>
+        <label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 库存管理</label>
+        <label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 数据统计</label>
+      </div>
+    </div>
+  </div>
+  <div class="g-drawer-ft"><button class="g-btn" onclick="closeStaffDrawer()">取消</button><button class="g-btn g-btn-primary" id="psStaffSubmit" onclick="closeStaffDrawer()">确认添加</button></div>
+</div>
+
+<!-- 编辑排班 (个人) -->
+<div class="g-drawer" id="psSchedDrawer" style="width:560px;">
+  <div class="g-drawer-hd"><span class="g-drawer-title" id="psSchedTitle">编辑排班 - 张伟</span><button class="g-drawer-close" onclick="closeStaffDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
+  <div class="g-drawer-bd">
+    <div style="background:#f0f5ff;border-radius:6px;padding:10px 14px;margin-bottom:16px;font-size:12px;color:#597ef7;">点击班次类型自动填充时间，也可手动修改。选择"休息"则该日不排班。</div>
+    <div id="psSchedRows"></div>
+  </div>
+  <div class="g-drawer-ft"><button class="g-btn" onclick="closeStaffDrawer()">取消</button><button class="g-btn g-btn-primary" onclick="closeStaffDrawer()">保存排班</button></div>
+</div>
+
+<!-- 编辑排班表 (全员周视图) -->
+<div class="g-drawer" id="psWeekDrawer" style="width:640px;">
+  <div class="g-drawer-hd"><span class="g-drawer-title">编辑本周排班表</span><button class="g-drawer-close" onclick="closeStaffDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
+  <div class="g-drawer-bd">
+    <div class="ps-week-legend" id="psWeekLegend">
+      <span><i class="lg-m"></i><span class="lg-m-t">早班 09:00-14:00</span></span>
+      <span><i class="lg-e"></i><span class="lg-e-t">晚班 14:00-21:00</span></span>
+      <span><i class="lg-f"></i><span class="lg-f-t">全天 09:00-21:00</span></span>
+      <span><i class="lg-o"></i>休息</span>
+      <span style="margin-left:auto;color:#999;font-size:11px;">点击单元格切换班次</span>
+    </div>
+    <table class="ps-week-table">
+      <thead><tr><th style="text-align:left;padding-left:10px;width:90px;">员工</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr></thead>
+      <tbody id="psWeekBody"></tbody>
+    </table>
+  </div>
+  <div class="g-drawer-ft"><button class="g-btn" onclick="closeStaffDrawer()">取消</button><button class="g-btn g-btn-primary" onclick="closeStaffDrawer()">保存排班</button></div>
+</div>
+
+<script>
+var _dayNames = ['周一','周二','周三','周四','周五','周六','周日'];
+var _defaultShifts = {
+  morning: ['09:00','14:00'],
+  evening: ['14:00','21:00'],
+  full: ['09:00','21:00'],
+  off: ['','']
+};
+var _shiftCycle = ['morning','evening','full','off'];
+var _shiftLabels = {morning:'早班',evening:'晚班',full:'全天',off:'休息'};
+
+function getShiftTimes() {
+  return {
+    morning: (document.getElementById('psTplMs').value||'09:00').slice(0,5) + '-' + (document.getElementById('psTplMe').value||'14:00').slice(0,5),
+    evening: (document.getElementById('psTplEs').value||'14:00').slice(0,5) + '-' + (document.getElementById('psTplEe').value||'21:00').slice(0,5),
+    full: (document.getElementById('psTplFs').value||'09:00').slice(0,5) + '-' + (document.getElementById('psTplFe').value||'21:00').slice(0,5),
+    off: ''
+  };
+}
+
+function syncShiftTpl() {
+  _defaultShifts.morning = [document.getElementById('psTplMs').value, document.getElementById('psTplMe').value];
+  _defaultShifts.evening = [document.getElementById('psTplEs').value, document.getElementById('psTplEe').value];
+  _defaultShifts.full = [document.getElementById('psTplFs').value, document.getElementById('psTplFe').value];
+  var t = getShiftTimes();
+  var lg = document.getElementById('psWeekLegend');
+  if (lg) {
+    lg.querySelector('.lg-m-t').textContent = '早班 ' + t.morning;
+    lg.querySelector('.lg-e-t').textContent = '晚班 ' + t.evening;
+    lg.querySelector('.lg-f-t').textContent = '全天 ' + t.full;
+  }
+}
+
+function openStaffDrawer(mode, name) {
+  var t = document.getElementById('psStaffTitle');
+  var s = document.getElementById('psStaffSubmit');
+  if (mode === 'edit') {
+    t.textContent = '编辑员工 - ' + name;
+    s.textContent = '保存修改';
+    document.getElementById('psStaffName').value = name || '';
+    document.getElementById('psStaffPhone').value = '138****8001';
+    document.getElementById('psStaffEmail').value = '';
+  } else {
+    t.textContent = '添加员工';
+    s.textContent = '确认添加';
+    document.getElementById('psStaffName').value = '';
+    document.getElementById('psStaffPhone').value = '';
+    document.getElementById('psStaffEmail').value = '';
+    document.querySelectorAll('.ps-perm-cb').forEach(function(c){c.checked=false;});
+    document.getElementById('psPermAll').checked = false;
+  }
+  document.getElementById('psDrawerMask').classList.add('open');
+  document.getElementById('psStaffDrawer').classList.add('open');
+}
+
+function openSchedDrawer(name, role) {
+  document.getElementById('psSchedTitle').textContent = '编辑排班 - ' + name + ' (' + role + ')';
+  var container = document.getElementById('psSchedRows');
+  var html = '';
+  for (var i = 0; i < 7; i++) {
+    var d = _dayNames[i];
+    var def = (i < 5) ? 'full' : (i === 5 ? 'morning' : 'off');
+    var st = _defaultShifts[def][0];
+    var et = _defaultShifts[def][1];
+    var hide = def === 'off' ? 'style="visibility:hidden"' : '';
+    html += '<div class="ps-sched-row">';
+    html += '<span class="ps-sched-day">' + d + '</span>';
+    html += '<div class="ps-shift-pills">';
+    ['morning','evening','full','off'].forEach(function(typ){
+      var lb = {morning:'早班',evening:'晚班',full:'全天',off:'休息'}[typ];
+      var ac = (typ === def) ? ' active' : '';
+      html += '<span class="ps-shift-pill s-' + typ + ac + '" onclick="pickShift(this,\'' + typ + '\',' + i + ')">' + lb + '</span>';
+    });
+    html += '</div>';
+    html += '<div class="ps-sched-times" id="psTime' + i + '" ' + hide + '>';
+    html += '<input type="time" value="' + st + '" style="width:100px" /> <span>~</span> <input type="time" value="' + et + '" style="width:100px" />';
+    html += '</div></div>';
+  }
+  container.innerHTML = html;
+  document.getElementById('psDrawerMask').classList.add('open');
+  document.getElementById('psSchedDrawer').classList.add('open');
+}
+
+function closeStaffDrawer() {
+  document.getElementById('psDrawerMask').classList.remove('open');
+  document.getElementById('psStaffDrawer').classList.remove('open');
+  document.getElementById('psSchedDrawer').classList.remove('open');
+  document.getElementById('psWeekDrawer').classList.remove('open');
+}
+
+function pickShift(el, typ, dayIdx) {
+  var pills = el.parentElement.querySelectorAll('.ps-shift-pill');
+  pills.forEach(function(p){ p.classList.remove('active'); });
+  el.classList.add('active');
+  var timeDiv = document.getElementById('psTime' + dayIdx);
+  if (typ === 'off') {
+    timeDiv.style.visibility = 'hidden';
+  } else {
+    timeDiv.style.visibility = 'visible';
+    var inputs = timeDiv.querySelectorAll('input[type=time]');
+    inputs[0].value = _defaultShifts[typ][0];
+    inputs[1].value = _defaultShifts[typ][1];
+  }
+}
+
+function toggleAllPerms(el) {
+  var checked = el.checked;
+  document.querySelectorAll('.ps-perm-cb').forEach(function(c){ c.checked = checked; });
+}
+
+var _weekData = [
+  {name:'张伟',role:'店长',shifts:['full','full','full','full','full','morning','off']},
+  {name:'李娜',role:'收银员',shifts:['morning','morning','off','morning','evening','full','full']},
+  {name:'王磊',role:'配送员',shifts:['morning','evening','morning','evening','morning','evening','off']},
+  {name:'赵敏',role:'厨师',shifts:['full','full','evening','off','full','full','morning']},
+  {name:'刘洋',role:'配送员',shifts:['off','off','off','off','off','off','off']}
+];
+
+function openWeekEditor() {
+  syncShiftTpl();
+  var t = getShiftTimes();
+  var body = document.getElementById('psWeekBody');
+  var html = '';
+  for (var r = 0; r < _weekData.length; r++) {
+    var s = _weekData[r];
+    html += '<tr><td class="ps-wk-name">' + s.name + '<br><span style="font-size:11px;color:#999;font-weight:normal">' + s.role + '</span></td>';
+    for (var d = 0; d < 7; d++) {
+      var sh = s.shifts[d];
+      var tm = t[sh];
+      html += '<td><div class="ps-wk-cell" data-shift="' + sh + '" data-r="' + r + '" data-d="' + d + '" onclick="cycleShift(this)">';
+      html += '<span>' + _shiftLabels[sh] + '</span>';
+      if (tm) html += '<span class="wk-time">' + tm + '</span>';
+      html += '</div></td>';
+    }
+    html += '</tr>';
+  }
+  body.innerHTML = html;
+  document.getElementById('psDrawerMask').classList.add('open');
+  document.getElementById('psWeekDrawer').classList.add('open');
+}
+
+function cycleShift(el) {
+  var cur = el.getAttribute('data-shift');
+  var r = parseInt(el.getAttribute('data-r'));
+  var d = parseInt(el.getAttribute('data-d'));
+  var idx = (_shiftCycle.indexOf(cur) + 1) % _shiftCycle.length;
+  var next = _shiftCycle[idx];
+  el.setAttribute('data-shift', next);
+  var t = getShiftTimes();
+  var tm = t[next];
+  el.innerHTML = '<span>' + _shiftLabels[next] + '</span>' + (tm ? '<span class="wk-time">' + tm + '</span>' : '');
+  _weekData[r].shifts[d] = next;
+}
+
+if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/va-ai.html b/TakeoutSaaS.Prototypes/pages/va-ai.html
new file mode 100644
index 0000000..abcc5c3
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/va-ai.html
@@ -0,0 +1,210 @@
+<!-- AI智能 — va-ai.html -->
+<style>
+  .vai-seg-wrap { margin-bottom: 20px; }
+  .vai-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
+  .vai-stat-card { background:#fff; border-radius:var(--g-radius); padding:18px 20px; border:1px solid var(--g-border); box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
+  .vai-stat-card:hover { box-shadow:var(--g-shadow-md); }
+  .vai-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
+  .vai-stat-label i { width:16px; height:16px; }
+  .vai-stat-val { font-size:24px; font-weight:700; color:var(--g-text); }
+  .vai-stat-val.green { color:var(--g-success); }
+  .vai-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* 客服规则卡片 */
+  .vai-rule-card { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:14px 18px; margin-bottom:10px; display:flex; align-items:center; gap:14px; transition:var(--g-transition); }
+  .vai-rule-card:hover { box-shadow:var(--g-shadow-md); }
+  .vai-rule-keywords { display:flex; gap:4px; flex-wrap:wrap; min-width:160px; }
+  .vai-rule-keywords span { padding:2px 8px; background:var(--primary-light,#e8f0fe); color:var(--primary); border-radius:4px; font-size:12px; }
+  .vai-rule-reply { flex:1; font-size:13px; color:var(--g-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+  /* FAQ */
+  .vai-faq-item { padding:12px 0; border-bottom:1px solid #f3f4f6; cursor:pointer; }
+  .vai-faq-item:last-child { border-bottom:none; }
+  .vai-faq-q { font-size:13px; font-weight:500; color:var(--g-text); display:flex; align-items:center; gap:8px; }
+  .vai-faq-q i { width:14px; height:14px; color:var(--g-text-muted); transition:var(--g-transition); }
+  .vai-faq-a { display:none; font-size:13px; color:var(--g-text-secondary); padding:8px 0 0 22px; line-height:1.6; }
+  .vai-faq-item.open .vai-faq-a { display:block; }
+  .vai-faq-item.open .vai-faq-q i { transform:rotate(90deg); }
+
+  /* 定价表格 */
+  .vai-price-up { color:var(--g-success); font-weight:600; }
+  .vai-price-down { color:var(--g-danger); font-weight:600; }
+  .vai-price-keep { color:var(--g-text-muted); }
+  .vai-reason { font-size:12px; color:var(--g-text-muted); max-width:140px; }
+
+  /* 预测柱状图 */
+  .vai-forecast-chart { display:flex; align-items:flex-end; gap:20px; height:180px; padding:20px 0; justify-content:center; margin-bottom:20px; }
+  .vai-forecast-bar { display:flex; flex-direction:column; align-items:center; gap:6px; }
+  .vai-forecast-bar .bar { width:48px; border-radius:6px 6px 0 0; background:linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #fff)); transition:height .4s ease; }
+  .vai-forecast-bar .bar.peak { background:linear-gradient(180deg, var(--g-danger), #ff7875); }
+  .vai-forecast-bar .val { font-size:12px; font-weight:600; color:var(--g-text); }
+  .vai-forecast-bar .day { font-size:12px; color:var(--g-text-muted); }
+
+  /* AI对话 */
+  .vai-chat-wrap { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); overflow:hidden; }
+  .vai-chat-hd { padding:14px 20px; border-bottom:1px solid var(--g-border); display:flex; align-items:center; gap:10px; }
+  .vai-chat-hd-icon { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg, var(--primary), #6366f1); display:flex; align-items:center; justify-content:center; color:#fff; }
+  .vai-chat-hd-icon i { width:18px; height:18px; }
+  .vai-chat-hd-title { font-size:15px; font-weight:600; color:var(--g-text); }
+  .vai-chat-hd-desc { font-size:12px; color:var(--g-text-muted); }
+  .vai-chat-body { height:400px; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; background:#f8f9fb; }
+  .vai-msg { max-width:80%; line-height:1.7; font-size:13px; }
+  .vai-msg-ai { align-self:flex-start; background:#fff; border-radius:2px 12px 12px 12px; padding:14px 18px; color:var(--g-text); box-shadow:var(--g-shadow-sm); white-space:pre-line; }
+  .vai-msg-user { align-self:flex-end; background:var(--primary); border-radius:12px 2px 12px 12px; padding:12px 16px; color:#fff; }
+  .vai-chat-ft { padding:14px 20px; border-top:1px solid var(--g-border); display:flex; gap:10px; background:#fff; }
+  .vai-chat-ft input { flex:1; height:38px; padding:0 14px; border:1px solid #e5e7eb; border-radius:var(--g-radius); font-size:13px; outline:none; transition:var(--g-transition); }
+  .vai-chat-ft input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+</style>
+
+<!-- 分段Tab -->
+<div class="vai-seg-wrap">
+  <div class="g-seg">
+    <div class="g-seg-item active" onclick="vaiTab(this,'vai-t1')" data-t="vai-t1">智能客服</div>
+    <div class="g-seg-item" onclick="vaiTab(this,'vai-t2')" data-t="vai-t2">智能定价</div>
+    <div class="g-seg-item" onclick="vaiTab(this,'vai-t3')" data-t="vai-t3">销量预测</div>
+    <div class="g-seg-item" onclick="vaiTab(this,'vai-t4')" data-t="vai-t4">AI助手</div>
+  </div>
+</div>
+
+<!-- Tab1: 智能客服 -->
+<div id="vai-t1">
+  <div class="vai-stats">
+    <div class="vai-stat-card"><div class="vai-stat-label"><i data-lucide="message-circle"></i>今日对话</div><div class="vai-stat-val">86</div></div>
+    <div class="vai-stat-card"><div class="vai-stat-label"><i data-lucide="check-circle"></i>自动解决率</div><div class="vai-stat-val green">78%</div></div>
+    <div class="vai-stat-card"><div class="vai-stat-label"><i data-lucide="zap"></i>平均响应</div><div class="vai-stat-val">3<span style="font-size:14px;font-weight:400;color:var(--g-text-muted);">秒</span></div></div>
+  </div>
+
+  <div class="vai-section-hd">自动回复规则</div>
+  <div class="vai-rule-card"><div class="vai-rule-keywords"><span>营业时间</span><span>几点关门</span></div><div class="vai-rule-reply">我们营业时间为09:00-22:00，最后点餐时间21:30</div><button class="g-toggle on" onclick="toggleSwitch(this)"></button></div>
+  <div class="vai-rule-card"><div class="vai-rule-keywords"><span>配送费</span><span>运费</span></div><div class="vai-rule-reply">满20元起送，配送费2元，满50元免配送费</div><button class="g-toggle on" onclick="toggleSwitch(this)"></button></div>
+  <div class="vai-rule-card"><div class="vai-rule-keywords"><span>退款</span><span>退单</span></div><div class="vai-rule-reply">请在订单详情页申请退款，我们会在24小时内处理</div><button class="g-toggle on" onclick="toggleSwitch(this)"></button></div>
+  <div class="vai-rule-card"><div class="vai-rule-keywords"><span>发票</span></div><div class="vai-rule-reply">您可以在订单完成后申请电子发票，支持普票和专票</div><button class="g-toggle on" onclick="toggleSwitch(this)"></button></div>
+  <div class="vai-rule-card"><div class="vai-rule-keywords"><span>会员</span><span>积分</span></div><div class="vai-rule-reply">注册即成为会员，消费1元积1分，积分可兑换商品</div><button class="g-toggle on" onclick="toggleSwitch(this)"></button></div>
+  <div style="margin:12px 0 24px;"><button class="g-btn g-btn-sm"><i data-lucide="plus" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>添加规则</button></div>
+
+  <div class="vai-section-hd">常见问题 FAQ</div>
+  <div class="g-card" style="padding:4px 20px;">
+    <div class="vai-faq-item" onclick="this.classList.toggle('open')"><div class="vai-faq-q"><i data-lucide="chevron-right"></i>如何修改/取消订单？</div><div class="vai-faq-a">订单未接单前可在订单详情页直接取消；已接单后请联系客服协助处理。</div></div>
+    <div class="vai-faq-item" onclick="this.classList.toggle('open')"><div class="vai-faq-q"><i data-lucide="chevron-right"></i>配送范围是多少？</div><div class="vai-faq-a">目前支持门店周边5公里内配送，超出范围可选择到店自提。</div></div>
+    <div class="vai-faq-item" onclick="this.classList.toggle('open')"><div class="vai-faq-q"><i data-lucide="chevron-right"></i>支持哪些支付方式？</div><div class="vai-faq-a">支持微信支付、支付宝、储值余额支付。</div></div>
+    <div class="vai-faq-item" onclick="this.classList.toggle('open')"><div class="vai-faq-q"><i data-lucide="chevron-right"></i>如何开具发票？</div><div class="vai-faq-a">订单完成后，在订单详情页点击"申请发票"，填写开票信息即可。</div></div>
+    <div class="vai-faq-item" onclick="this.classList.toggle('open')"><div class="vai-faq-q"><i data-lucide="chevron-right"></i>会员积分怎么用？</div><div class="vai-faq-a">进入"积分商城"可兑换商品、优惠券或实物礼品。</div></div>
+    <div class="vai-faq-item" onclick="this.classList.toggle('open')"><div class="vai-faq-q"><i data-lucide="chevron-right"></i>过敏原信息在哪里查看？</div><div class="vai-faq-a">每个菜品详情页底部标注了过敏原信息，下单前请仔细查看。</div></div>
+  </div>
+</div>
+
+<!-- Tab2: 智能定价 -->
+<div id="vai-t2" style="display:none;">
+  <div style="padding:12px 16px;background:#f0f7ff;border-radius:var(--g-radius);margin-bottom:20px;font-size:13px;color:var(--primary);display:flex;align-items:center;gap:8px;"><i data-lucide="lightbulb" style="width:16px;height:16px;"></i>基于竞品价格、销量数据和成本分析，为您的菜品提供定价建议。</div>
+  <div class="g-card" style="padding:0;margin-bottom:16px;">
+    <table class="g-table">
+      <thead><tr><th>菜品</th><th style="text-align:right;">当前价</th><th style="text-align:right;">成本</th><th style="text-align:right;">毛利率</th><th style="text-align:right;">竞品均价</th><th style="text-align:right;">建议价</th><th>建议原因</th><th>操作</th></tr></thead>
+      <tbody>
+        <tr><td>宫保鸡丁套餐</td><td style="text-align:right;">¥32</td><td style="text-align:right;">¥12</td><td style="text-align:right;">62.5%</td><td style="text-align:right;">¥35</td><td style="text-align:right;" class="vai-price-up">¥35 ↑</td><td class="vai-reason">低于竞品均价，销量稳定可提价</td><td><a class="g-action">采纳</a></td></tr>
+        <tr><td>麻辣香锅(中)</td><td style="text-align:right;">¥48</td><td style="text-align:right;">¥18</td><td style="text-align:right;">62.5%</td><td style="text-align:right;">¥46</td><td style="text-align:right;" class="vai-price-keep">¥48 —</td><td class="vai-reason">价格合理，建议维持</td><td><span style="color:var(--g-text-muted);font-size:13px;">已是最优</span></td></tr>
+        <tr><td>牛肉面套餐</td><td style="text-align:right;">¥28</td><td style="text-align:right;">¥10</td><td style="text-align:right;">64.3%</td><td style="text-align:right;">¥26</td><td style="text-align:right;" class="vai-price-keep">¥28 —</td><td class="vai-reason">略高于竞品但销量好，维持</td><td><span style="color:var(--g-text-muted);font-size:13px;">已是最优</span></td></tr>
+        <tr><td>小龙虾(2斤)</td><td style="text-align:right;">¥128</td><td style="text-align:right;">¥65</td><td style="text-align:right;">49.2%</td><td style="text-align:right;">¥118</td><td style="text-align:right;" class="vai-price-down">¥119 ↓</td><td class="vai-reason">高于竞品10元，近期销量下滑</td><td><a class="g-action">采纳</a></td></tr>
+        <tr><td>烤鱼套餐</td><td style="text-align:right;">¥68</td><td style="text-align:right;">¥28</td><td style="text-align:right;">58.8%</td><td style="text-align:right;">¥65</td><td style="text-align:right;" class="vai-price-keep">¥68 —</td><td class="vai-reason">品质溢价合理，维持</td><td><span style="color:var(--g-text-muted);font-size:13px;">已是最优</span></td></tr>
+        <tr><td>炸鸡翅(6只)</td><td style="text-align:right;">¥22</td><td style="text-align:right;">¥8</td><td style="text-align:right;">63.6%</td><td style="text-align:right;">¥25</td><td style="text-align:right;" class="vai-price-up">¥24 ↑</td><td class="vai-reason">低于竞品，可适当提价</td><td><a class="g-action">采纳</a></td></tr>
+        <tr><td>珍珠奶茶</td><td style="text-align:right;">¥15</td><td style="text-align:right;">¥4</td><td style="text-align:right;">73.3%</td><td style="text-align:right;">¥14</td><td style="text-align:right;" class="vai-price-keep">¥15 —</td><td class="vai-reason">毛利高，价格合理</td><td><span style="color:var(--g-text-muted);font-size:13px;">已是最优</span></td></tr>
+        <tr><td>提拉米苏</td><td style="text-align:right;">¥28</td><td style="text-align:right;">¥9</td><td style="text-align:right;">67.9%</td><td style="text-align:right;">¥25</td><td style="text-align:right;" class="vai-price-down">¥25 ↓</td><td class="vai-reason">销量持续下滑，建议降价促销</td><td><a class="g-action">采纳</a></td></tr>
+      </tbody>
+    </table>
+  </div>
+  <button class="g-btn g-btn-primary"><i data-lucide="check" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>一键采纳全部建议</button>
+</div>
+
+<!-- Tab3: 销量预测 -->
+<div id="vai-t3" style="display:none;">
+  <div style="padding:12px 16px;background:#f0f7ff;border-radius:var(--g-radius);margin-bottom:20px;font-size:13px;color:var(--primary);display:flex;align-items:center;gap:8px;"><i data-lucide="trending-up" style="width:16px;height:16px;"></i>基于历史销量和季节趋势，预测未来7天各品类销量。</div>
+
+  <div class="vai-stats">
+    <div class="vai-stat-card"><div class="vai-stat-label"><i data-lucide="package"></i>预测总销量</div><div class="vai-stat-val">1,860<span style="font-size:14px;font-weight:400;color:var(--g-text-muted);">份</span></div></div>
+    <div class="vai-stat-card"><div class="vai-stat-label"><i data-lucide="flame"></i>预测高峰日</div><div class="vai-stat-val" style="font-size:18px;">周六 2/14</div></div>
+    <div class="vai-stat-card"><div class="vai-stat-label"><i data-lucide="shopping-cart"></i>建议备货金额</div><div class="vai-stat-val">&yen;8,200</div></div>
+  </div>
+
+  <div class="g-card" style="padding:20px;margin-bottom:20px;">
+    <div class="vai-section-hd">未来7天预测销量</div>
+    <div class="vai-forecast-chart">
+      <div class="vai-forecast-bar"><div class="val">245</div><div class="bar" style="height:98px;"></div><div class="day">2/13<br>周四</div></div>
+      <div class="vai-forecast-bar"><div class="val">320</div><div class="bar peak" style="height:128px;"></div><div class="day">2/14<br>周五</div></div>
+      <div class="vai-forecast-bar"><div class="val">298</div><div class="bar" style="height:119px;"></div><div class="day">2/15<br>周六</div></div>
+      <div class="vai-forecast-bar"><div class="val">275</div><div class="bar" style="height:110px;"></div><div class="day">2/16<br>周日</div></div>
+      <div class="vai-forecast-bar"><div class="val">230</div><div class="bar" style="height:92px;"></div><div class="day">2/17<br>周一</div></div>
+      <div class="vai-forecast-bar"><div class="val">248</div><div class="bar" style="height:99px;"></div><div class="day">2/18<br>周二</div></div>
+      <div class="vai-forecast-bar"><div class="val">244</div><div class="bar" style="height:98px;"></div><div class="day">2/19<br>周三</div></div>
+    </div>
+  </div>
+
+  <div class="g-card" style="padding:20px;">
+    <div class="vai-section-hd">品类预测明细</div>
+    <table class="g-table">
+      <thead><tr><th>品类</th><th style="text-align:right;">近7天日均</th><th style="text-align:right;">预测日均</th><th>变化趋势</th><th style="text-align:right;">建议备货量</th></tr></thead>
+      <tbody>
+        <tr><td>主食</td><td style="text-align:right;">82份</td><td style="text-align:right;">88份</td><td><span style="color:var(--g-success);font-weight:600;">↑ 7.3%</span></td><td style="text-align:right;">620份/周</td></tr>
+        <tr><td>小吃</td><td style="text-align:right;">56份</td><td style="text-align:right;">62份</td><td><span style="color:var(--g-success);font-weight:600;">↑ 10.7%</span></td><td style="text-align:right;">435份/周</td></tr>
+        <tr><td>饮品</td><td style="text-align:right;">45份</td><td style="text-align:right;">48份</td><td><span style="color:var(--g-success);font-weight:600;">↑ 6.7%</span></td><td style="text-align:right;">340份/周</td></tr>
+        <tr><td>甜品</td><td style="text-align:right;">22份</td><td style="text-align:right;">20份</td><td><span style="color:var(--g-danger);font-weight:600;">↓ 9.1%</span></td><td style="text-align:right;">140份/周</td></tr>
+        <tr><td>套餐</td><td style="text-align:right;">38份</td><td style="text-align:right;">42份</td><td><span style="color:var(--g-success);font-weight:600;">↑ 10.5%</span></td><td style="text-align:right;">295份/周</td></tr>
+        <tr><td>小龙虾</td><td style="text-align:right;">12份</td><td style="text-align:right;">10份</td><td><span style="color:var(--g-danger);font-weight:600;">↓ 16.7%</span></td><td style="text-align:right;">70份/周</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<!-- Tab4: AI助手 -->
+<div id="vai-t4" style="display:none;">
+  <div class="vai-chat-wrap">
+    <div class="vai-chat-hd">
+      <div class="vai-chat-hd-icon"><i data-lucide="bot"></i></div>
+      <div><div class="vai-chat-hd-title">AI经营助手</div><div class="vai-chat-hd-desc">基于您的经营数据，为您提供智能分析和建议</div></div>
+    </div>
+    <div class="vai-chat-body">
+      <div class="vai-msg vai-msg-ai">您好！我是AI经营助手，可以帮您分析经营数据、优化菜单、制定营销策略。试试问我：
+
+• 本周哪些菜品销量下滑了？
+• 帮我分析一下午餐时段的客单价
+• 周末应该准备多少食材？</div>
+      <div class="vai-msg vai-msg-user">本周哪些菜品销量下滑了？</div>
+      <div class="vai-msg vai-msg-ai">根据本周（2/6-2/12）数据分析：
+
+📊 销量下滑TOP3：
+1. 烤鱼套餐：下滑23%（本周42份 vs 上周55份）
+2. 提拉米苏：下滑18%（本周28份 vs 上周34份）
+3. 炸鸡翅：下滑15%（本周65份 vs 上周76份）
+
+💡 建议：
+• 烤鱼套餐可能受天气转暖影响，建议推出春季新品替换
+• 提拉米苏可尝试搭配饮品做组合优惠
+• 炸鸡翅考虑做限时特价引流</div>
+      <div class="vai-msg vai-msg-user">帮我分析一下午餐时段的客单价</div>
+      <div class="vai-msg vai-msg-ai">午餐时段（11:00-14:00）分析：
+
+📈 本周午餐客单价：¥38.5（环比上周 +2.1%）
+
+时段细分：
+• 11:00-12:00 客单价 ¥35.2（以快餐为主）
+• 12:00-13:00 客单价 ¥42.8（高峰期，套餐占比高）
+• 13:00-14:00 客单价 ¥31.6（尾单，单品为主）
+
+💡 建议：13点后可推送限时折扣，提升尾单客单价。12点高峰期可推"加购饮品半价"提升连带率。</div>
+    </div>
+    <div class="vai-chat-ft">
+      <input type="text" placeholder="输入您的经营问题...">
+      <button class="g-btn g-btn-primary"><i data-lucide="send" style="width:14px;height:14px;"></i></button>
+    </div>
+  </div>
+</div>
+
+<script>
+  function vaiTab(el, tabId) {
+    el.parentElement.querySelectorAll('.g-seg-item').forEach(function(i){ i.classList.remove('active'); });
+    el.classList.add('active');
+    ['vai-t1','vai-t2','vai-t3','vai-t4'].forEach(function(id){
+      document.getElementById(id).style.display = id === tabId ? '' : 'none';
+    });
+  }
+  function toggleSwitch(el) { el.classList.toggle('on'); }
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/va-chain.html b/TakeoutSaaS.Prototypes/pages/va-chain.html
new file mode 100644
index 0000000..1e213cd
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/va-chain.html
@@ -0,0 +1,457 @@
+<!-- 连锁管理页 -->
+<style>
+/* ===== 统计卡片 ===== */
+.vac-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
+.vac-stat {
+  background:#fff; border-radius:10px; padding:16px 20px;
+  box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
+}
+.vac-stat:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+.vac-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
+.vac-stat-value { font-size:24px; font-weight:700; color:var(--g-text); }
+.vac-stat-value.green { color:var(--g-success); }
+.vac-stat-value.orange { color:var(--g-warning); }
+
+/* ===== 工具栏 ===== */
+.vac-toolbar {
+  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
+  background:#fff; border-radius:10px; padding:10px 14px;
+  box-shadow:var(--g-shadow-sm); margin-bottom:16px;
+}
+.vac-toolbar input[type="text"] {
+  height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+  font-size:13px; outline:none; width:220px; transition:var(--g-transition);
+}
+.vac-toolbar input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+.vac-toolbar select {
+  height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
+  font-size:13px; outline:none; cursor:pointer; transition:var(--g-transition);
+}
+.vac-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+/* ===== 说明条 ===== */
+.vac-notice {
+  display:flex; align-items:center; gap:8px; padding:10px 14px;
+  background:color-mix(in srgb, var(--primary) 6%, #fff);
+  border:1px solid color-mix(in srgb, var(--primary) 15%, transparent);
+  border-radius:8px; margin-bottom:16px; font-size:13px; color:var(--g-text-secondary);
+}
+
+/* ===== 门店卡片 ===== */
+.vac-store-list { display:flex; flex-direction:column; gap:12px; }
+.vac-store-card {
+  background:#fff; border-radius:10px; padding:18px 20px;
+  box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
+}
+.vac-store-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+.vac-store-card.inactive { opacity:.55; }
+.vac-store-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
+.vac-store-name { font-size:15px; font-weight:600; color:var(--g-text); }
+.vac-store-data { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:14px; }
+.vac-store-data-item {}
+.vac-store-data-label { font-size:12px; color:var(--g-text-muted); margin-bottom:2px; }
+.vac-store-data-val { font-size:16px; font-weight:600; color:var(--g-text); }
+.vac-store-data-val.warn { color:var(--g-warning); }
+.vac-store-ft { display:flex; align-items:center; justify-content:space-between; }
+.vac-store-addr { font-size:12px; color:var(--g-text-muted); }
+.vac-store-actions { display:flex; gap:12px; }
+
+/* ===== 表格容器 ===== */
+.vac-table-wrap {
+  background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden;
+}
+.vac-table-wrap table { width:100%; border-collapse:collapse; font-size:13px; }
+.vac-table-wrap thead th {
+  background:#f8f9fb; padding:10px 12px; text-align:left;
+  font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; white-space:nowrap;
+}
+.vac-table-wrap tbody td { padding:12px; border-bottom:1px solid #f3f4f6; color:var(--g-text); }
+.vac-table-wrap tbody tr:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); }
+.vac-table-wrap tbody tr:last-child td { border-bottom:none; }
+
+/* ===== 调拨明细行 ===== */
+.vac-line-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
+.vac-line-row select, .vac-line-row input { flex:1; }
+.vac-line-del {
+  width:30px; height:30px; border:none; background:none; color:var(--g-text-muted);
+  cursor:pointer; display:flex; align-items:center; justify-content:center;
+  border-radius:6px; transition:var(--g-transition); flex-shrink:0;
+}
+.vac-line-del:hover { color:var(--g-danger); background:#fef2f2; }
+.vac-add-line {
+  display:flex; align-items:center; gap:4px; color:var(--primary); font-size:13px;
+  cursor:pointer; background:none; border:none; padding:0; transition:var(--g-transition);
+}
+.vac-add-line:hover { text-decoration:underline; }
+
+/* ===== 分段Tab ===== */
+.vac-seg { margin-bottom:16px; }
+</style>
+
+<div>
+  <!-- 分段Tab -->
+  <div class="vac-seg">
+    <div class="g-seg">
+      <div class="g-seg-item active" onclick="vacSwitchTab(0, this)">门店列表</div>
+      <div class="g-seg-item" onclick="vacSwitchTab(1, this)">统一采购</div>
+      <div class="g-seg-item" onclick="vacSwitchTab(2, this)">跨店调拨</div>
+    </div>
+  </div>
+
+  <!-- ========== Tab0: 门店列表 ========== -->
+  <div class="vac-tab" id="vacTab0">
+    <div class="vac-stats">
+      <div class="vac-stat"><div class="vac-stat-label">总门店</div><div class="vac-stat-value">4家</div></div>
+      <div class="vac-stat"><div class="vac-stat-label">营业中</div><div class="vac-stat-value green">3家</div></div>
+      <div class="vac-stat"><div class="vac-stat-label">今日总营收</div><div class="vac-stat-value">&yen;18,600</div></div>
+      <div class="vac-stat"><div class="vac-stat-label">今日总单量</div><div class="vac-stat-value">286单</div></div>
+    </div>
+
+    <div class="vac-toolbar">
+      <input type="text" placeholder="搜索门店名称" />
+      <select>
+        <option>全部状态</option>
+        <option>营业中</option>
+        <option>休息中</option>
+        <option>已关闭</option>
+      </select>
+      <div style="flex:1"></div>
+      <button class="g-btn g-btn-primary"><i data-lucide="plus" style="width:14px;height:14px"></i> 新增门店</button>
+    </div>
+
+    <div class="vac-store-list">
+      <!-- 朝阳店 -->
+      <div class="vac-store-card">
+        <div class="vac-store-hd">
+          <span class="vac-store-name">老三家·朝阳店</span>
+          <span class="g-tag g-tag-green">营业中</span>
+        </div>
+        <div class="vac-store-data">
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val">&yen;6,800</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val">98单</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val warn">2个</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val">8人</div></div>
+        </div>
+        <div class="vac-store-ft">
+          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市朝阳区建国路88号</span>
+          <div class="vac-store-actions">
+            <a class="g-action">进入管理</a>
+            <a class="g-action">查看报表</a>
+            <a class="g-action g-action-danger">暂停营业</a>
+          </div>
+        </div>
+      </div>
+      <!-- 海淀店 -->
+      <div class="vac-store-card">
+        <div class="vac-store-hd">
+          <span class="vac-store-name">老三家·海淀店</span>
+          <span class="g-tag g-tag-green">营业中</span>
+        </div>
+        <div class="vac-store-data">
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val">&yen;5,200</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val">82单</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val">0个</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val">6人</div></div>
+        </div>
+        <div class="vac-store-ft">
+          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市海淀区中关村大街66号</span>
+          <div class="vac-store-actions">
+            <a class="g-action">进入管理</a>
+            <a class="g-action">查看报表</a>
+            <a class="g-action g-action-danger">暂停营业</a>
+          </div>
+        </div>
+      </div>
+      <!-- 西城店 -->
+      <div class="vac-store-card">
+        <div class="vac-store-hd">
+          <span class="vac-store-name">老三家·西城店</span>
+          <span class="g-tag g-tag-green">营业中</span>
+        </div>
+        <div class="vac-store-data">
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val">&yen;6,600</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val">106单</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val warn">3个</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val">7人</div></div>
+        </div>
+        <div class="vac-store-ft">
+          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市西城区西单北大街120号</span>
+          <div class="vac-store-actions">
+            <a class="g-action">进入管理</a>
+            <a class="g-action">查看报表</a>
+            <a class="g-action g-action-danger">暂停营业</a>
+          </div>
+        </div>
+      </div>
+      <!-- 通州店（休息中） -->
+      <div class="vac-store-card inactive">
+        <div class="vac-store-hd">
+          <span class="vac-store-name">老三家·通州店</span>
+          <span class="g-tag g-tag-orange">休息中</span>
+        </div>
+        <div class="vac-store-data">
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
+          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
+        </div>
+        <div class="vac-store-ft">
+          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市通州区新华大街200号</span>
+          <div class="vac-store-actions">
+            <a class="g-action">进入管理</a>
+            <a class="g-action">查看报表</a>
+            <a class="g-action">恢复营业</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ========== Tab1: 统一采购 ========== -->
+  <div class="vac-tab" id="vacTab1" style="display:none">
+    <div class="vac-notice">
+      <i data-lucide="info" style="width:16px;height:16px;flex-shrink:0;color:var(--primary)"></i>
+      总部统一下采购单，分配到各门店，享受集中采购价格优势。
+    </div>
+
+    <div class="vac-toolbar">
+      <select>
+        <option>全部状态</option>
+        <option>待分配</option>
+        <option>已分配</option>
+        <option>已完成</option>
+      </select>
+      <div style="flex:1"></div>
+      <button class="g-btn g-btn-primary"><i data-lucide="plus" style="width:14px;height:14px"></i> 新建统一采购单</button>
+    </div>
+
+    <div class="vac-table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>采购单号</th>
+            <th>创建日期</th>
+            <th>采购项数</th>
+            <th>总金额</th>
+            <th>分配门店数</th>
+            <th>状态</th>
+            <th style="width:120px">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>PO-20260201</td>
+            <td>2026-02-01</td>
+            <td>12项</td>
+            <td>&yen;8,500</td>
+            <td>4家</td>
+            <td><span class="g-tag g-tag-green">已完成</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td>PO-20260205</td>
+            <td>2026-02-05</td>
+            <td>8项</td>
+            <td>&yen;5,200</td>
+            <td>3家</td>
+            <td><span class="g-tag g-tag-blue">已分配</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td>PO-20260210</td>
+            <td>2026-02-10</td>
+            <td>15项</td>
+            <td>&yen;12,800</td>
+            <td>0家</td>
+            <td><span class="g-tag g-tag-orange">待分配</span></td>
+            <td><a class="g-action">查看</a> <a class="g-action">分配</a></td>
+          </tr>
+          <tr>
+            <td>PO-20260213</td>
+            <td>2026-02-13</td>
+            <td>6项</td>
+            <td>&yen;3,600</td>
+            <td>0家</td>
+            <td><span class="g-tag g-tag-orange">待分配</span></td>
+            <td><a class="g-action">查看</a> <a class="g-action">分配</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- ========== Tab2: 跨店调拨 ========== -->
+  <div class="vac-tab" id="vacTab2" style="display:none">
+    <div class="vac-notice">
+      <i data-lucide="info" style="width:16px;height:16px;flex-shrink:0;color:var(--primary)"></i>
+      门店间原料调拨，解决库存不均衡问题。
+    </div>
+
+    <div class="vac-toolbar">
+      <select>
+        <option>全部状态</option>
+        <option>待确认</option>
+        <option>运输中</option>
+        <option>已完成</option>
+        <option>已拒绝</option>
+      </select>
+      <div style="flex:1"></div>
+      <button class="g-btn g-btn-primary" onclick="vacOpenDrawer()"><i data-lucide="plus" style="width:14px;height:14px"></i> 新建调拨单</button>
+    </div>
+
+    <div class="vac-table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>调拨单号</th>
+            <th>调出门店</th>
+            <th>调入门店</th>
+            <th>调拨品项</th>
+            <th>总金额</th>
+            <th>状态</th>
+            <th style="width:120px">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>TR-20260201</td>
+            <td>朝阳店</td>
+            <td>西城店</td>
+            <td>鸡胸肉 20kg、食用油 5L</td>
+            <td>&yen;860</td>
+            <td><span class="g-tag g-tag-green">已完成</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td>TR-20260205</td>
+            <td>海淀店</td>
+            <td>朝阳店</td>
+            <td>大米 50kg</td>
+            <td>&yen;320</td>
+            <td><span class="g-tag g-tag-green">已完成</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td>TR-20260209</td>
+            <td>西城店</td>
+            <td>海淀店</td>
+            <td>花生油 10L、盐 5kg</td>
+            <td>&yen;450</td>
+            <td><span class="g-tag g-tag-blue">运输中</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+          <tr>
+            <td>TR-20260212</td>
+            <td>朝阳店</td>
+            <td>通州店</td>
+            <td>牛腩 15kg、土豆 10kg</td>
+            <td>&yen;1,200</td>
+            <td><span class="g-tag g-tag-orange">待确认</span></td>
+            <td><a class="g-action">查看</a> <a class="g-action">确认</a></td>
+          </tr>
+          <tr>
+            <td>TR-20260213</td>
+            <td>海淀店</td>
+            <td>西城店</td>
+            <td>鸡蛋 200个</td>
+            <td>&yen;280</td>
+            <td><span class="g-tag g-tag-red">已拒绝</span></td>
+            <td><a class="g-action">查看</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- ========== 新建调拨单抽屉 ========== -->
+<div class="g-drawer-mask" id="vacDrawerMask" onclick="vacCloseDrawer()"></div>
+<div class="g-drawer" id="vacDrawer" style="width:480px">
+  <div class="g-drawer-hd">
+    <div class="g-drawer-title">新建调拨单</div>
+    <button class="g-drawer-close" onclick="vacCloseDrawer()"><i data-lucide="x" style="width:18px;height:18px"></i></button>
+  </div>
+  <div class="g-drawer-bd">
+    <div class="g-form-group">
+      <label class="g-form-label required">调出门店</label>
+      <select class="g-select" style="width:100%">
+        <option value="">请选择调出门店</option>
+        <option>老三家·朝阳店</option>
+        <option>老三家·海淀店</option>
+        <option>老三家·西城店</option>
+        <option>老三家·通州店</option>
+      </select>
+    </div>
+    <div class="g-form-group">
+      <label class="g-form-label required">调入门店</label>
+      <select class="g-select" style="width:100%">
+        <option value="">请选择调入门店</option>
+        <option>老三家·朝阳店</option>
+        <option>老三家·海淀店</option>
+        <option>老三家·西城店</option>
+        <option>老三家·通州店</option>
+      </select>
+    </div>
+
+    <div style="font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin:20px 0 14px">调拨明细</div>
+    <div id="vacLines">
+      <div class="vac-line-row">
+        <select class="g-select" style="flex:2">
+          <option value="">选择原料</option>
+          <option>鸡胸肉</option><option>牛腩</option><option>大米</option><option>食用油</option><option>花生油</option><option>土豆</option><option>鸡蛋</option><option>盐</option>
+        </select>
+        <input class="g-input" type="number" min="1" placeholder="数量" style="flex:1" />
+        <button class="vac-line-del" onclick="this.closest('.vac-line-row').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>
+      </div>
+      <div class="vac-line-row">
+        <select class="g-select" style="flex:2">
+          <option value="">选择原料</option>
+          <option>鸡胸肉</option><option>牛腩</option><option>大米</option><option>食用油</option><option>花生油</option><option>土豆</option><option>鸡蛋</option><option>盐</option>
+        </select>
+        <input class="g-input" type="number" min="1" placeholder="数量" style="flex:1" />
+        <button class="vac-line-del" onclick="this.closest('.vac-line-row').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>
+      </div>
+    </div>
+    <button class="vac-add-line" onclick="vacAddLine()"><i data-lucide="plus" style="width:14px;height:14px"></i> 添加原料</button>
+
+    <div class="g-form-group" style="margin-top:20px">
+      <label class="g-form-label">调拨原因</label>
+      <textarea class="g-textarea" rows="3" placeholder="请输入调拨原因，如：西城店鸡胸肉库存不足"></textarea>
+    </div>
+  </div>
+  <div class="g-drawer-ft">
+    <button class="g-btn" onclick="vacCloseDrawer()">取消</button>
+    <button class="g-btn g-btn-primary" onclick="vacCloseDrawer()">提交调拨单</button>
+  </div>
+</div>
+
+<script>
+/* Tab 切换 */
+function vacSwitchTab(idx, el) {
+  document.querySelectorAll('.vac-tab').forEach(function(t){ t.style.display = 'none'; });
+  document.getElementById('vacTab' + idx).style.display = '';
+  document.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
+  el.classList.add('active');
+}
+
+/* 抽屉开关 */
+function vacOpenDrawer() {
+  document.getElementById('vacDrawerMask').classList.add('open');
+  document.getElementById('vacDrawer').classList.add('open');
+}
+function vacCloseDrawer() {
+  document.getElementById('vacDrawerMask').classList.remove('open');
+  document.getElementById('vacDrawer').classList.remove('open');
+}
+
+/* 添加调拨明细行 */
+function vacAddLine() {
+  var row = document.createElement('div');
+  row.className = 'vac-line-row';
+  row.innerHTML = '<select class="g-select" style="flex:2"><option value="">选择原料</option><option>鸡胸肉</option><option>牛腩</option><option>大米</option><option>食用油</option><option>花生油</option><option>土豆</option><option>鸡蛋</option><option>盐</option></select><input class="g-input" type="number" min="1" placeholder="数量" style="flex:1" /><button class="vac-line-del" onclick="this.closest(\'.vac-line-row\').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>';
+  document.getElementById('vacLines').appendChild(row);
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+}
+
+if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/va-decor.html b/TakeoutSaaS.Prototypes/pages/va-decor.html
new file mode 100644
index 0000000..180cdd3
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/va-decor.html
@@ -0,0 +1,349 @@
+<!-- 店铺装修页 -->
+<style>
+  /* 主布局 */
+  .vad-wrap { display:flex; gap:24px; height:calc(100vh - 130px); }
+  .vad-left { flex:6; overflow-y:auto; padding-right:8px; }
+  .vad-right { flex:4; display:flex; align-items:flex-start; justify-content:center; padding-top:8px; }
+
+  /* Section 标题 */
+  .vad-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* 模块卡片 */
+  .vad-module-list { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
+  .vad-module {
+    background:#fff; border:1px solid var(--g-border); border-radius:var(--g-radius);
+    transition:box-shadow var(--g-transition);
+  }
+  .vad-module:hover { box-shadow:var(--g-shadow-md); }
+  .vad-module.disabled { opacity:.55; }
+  .vad-module-hd {
+    display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; user-select:none;
+  }
+  .vad-drag { color:var(--g-text-muted); cursor:grab; flex-shrink:0; }
+  .vad-drag:active { cursor:grabbing; }
+  .vad-module-name { font-size:14px; font-weight:500; color:var(--g-text); }
+  .vad-module-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
+  .vad-arrow { width:18px; height:18px; color:var(--g-text-muted); transition:transform var(--g-transition); cursor:pointer; flex-shrink:0; }
+  .vad-arrow.open { transform:rotate(180deg); }
+  .vad-module-bd {
+    max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease;
+    padding:0 16px;
+  }
+  .vad-module-bd.open { max-height:200px; padding:0 16px 14px; }
+  .vad-module-bd .vad-config { font-size:13px; color:var(--g-text-secondary); }
+  .vad-module-bd .vad-config-row { display:flex; align-items:center; gap:8px; margin-top:6px; }
+  .vad-module-bd .g-input,
+  .vad-module-bd .g-select { height:30px; font-size:12px; }
+
+  /* 图片计数 */
+  .vad-img-count { display:flex; gap:6px; margin-top:6px; }
+  .vad-img-thumb { width:48px; height:32px; background:#f0f2f5; border-radius:4px; border:1px dashed #d9d9d9; display:flex; align-items:center; justify-content:center; }
+  .vad-img-thumb i { width:14px; height:14px; color:#bbb; }
+
+  /* 主题色选择 */
+  .vad-theme-section { margin-top:24px; }
+  .vad-colors { display:flex; gap:12px; margin-top:8px; margin-bottom:16px; }
+  .vad-color-btn {
+    width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer;
+    display:flex; align-items:center; justify-content:center; transition:all var(--g-transition);
+    position:relative;
+  }
+  .vad-color-btn:hover { transform:scale(1.1); }
+  .vad-color-btn.active { border-color:var(--g-text); }
+  .vad-color-btn .vad-check { display:none; color:#fff; }
+  .vad-color-btn.active .vad-check { display:block; }
+  .vad-theme-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
+  .vad-theme-label { font-size:13px; color:var(--g-text-secondary); width:90px; flex-shrink:0; }
+  .vad-theme-row .g-select { flex:1; max-width:220px; }
+
+  /* 手机预览 */
+  .vad-phone {
+    width:280px; height:560px; border-radius:30px; border:3px solid #2a2a2a;
+    background:#fff; overflow:hidden; display:flex; flex-direction:column;
+    box-shadow:var(--g-shadow-lg); flex-shrink:0; position:sticky; top:8px;
+  }
+  .vad-phone-status { height:28px; background:#fafafa; display:flex; align-items:center; justify-content:center; }
+  .vad-phone-status span { width:60px; height:4px; background:#ddd; border-radius:2px; }
+  .vad-phone-body { flex:1; overflow-y:auto; }
+  .vad-phone-body::-webkit-scrollbar { width:0; }
+  .vad-phone-store { padding:10px 14px; font-size:14px; font-weight:600; color:var(--g-text); }
+  .vad-phone-banner { height:120px; background:#e8eaed; margin:0 10px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#999; font-size:12px; }
+  .vad-phone-notice {
+    margin:8px 10px; padding:6px 10px; background:#fffbe6; border-radius:6px;
+    display:flex; align-items:center; gap:6px; font-size:11px; color:#d48806;
+  }
+  .vad-phone-notice i { width:12px; height:12px; flex-shrink:0; }
+  .vad-phone-cats { display:flex; justify-content:space-around; padding:12px 10px; }
+  .vad-phone-cat { display:flex; flex-direction:column; align-items:center; gap:4px; }
+  .vad-phone-cat-icon { width:40px; height:40px; border-radius:50%; background:#f0f2f5; display:flex; align-items:center; justify-content:center; }
+  .vad-phone-cat-icon i { width:18px; height:18px; color:#888; }
+  .vad-phone-cat span { font-size:10px; color:var(--g-text-secondary); }
+  .vad-phone-section-title { padding:10px 14px 6px; font-size:13px; font-weight:600; color:var(--g-text); display:flex; align-items:center; gap:4px; }
+  .vad-phone-section-title i { width:14px; height:14px; color:var(--primary); }
+  .vad-phone-products { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 10px 10px; }
+  .vad-phone-product { background:#fafafa; border-radius:8px; overflow:hidden; }
+  .vad-phone-product-img { height:70px; background:#e8eaed; display:flex; align-items:center; justify-content:center; }
+  .vad-phone-product-img i { width:20px; height:20px; color:#ccc; }
+  .vad-phone-product-info { padding:6px 8px; }
+  .vad-phone-product-name { font-size:11px; color:var(--g-text); font-weight:500; }
+  .vad-phone-product-price { font-size:12px; color:#f5222d; font-weight:600; margin-top:2px; }
+  .vad-phone-tabbar {
+    height:44px; border-top:1px solid #f0f0f0; display:flex; align-items:center;
+    justify-content:space-around; flex-shrink:0; background:#fff;
+  }
+  .vad-phone-tab { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:9px; color:#999; }
+  .vad-phone-tab.active { color:var(--primary); }
+  .vad-phone-tab i { width:16px; height:16px; }
+
+  /* 添加模块按钮 */
+  .vad-add-btn { width:100%; height:40px; border:1px dashed #d9d9d9; border-radius:var(--g-radius); background:#fafafa; color:var(--g-text-secondary); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:all var(--g-transition); }
+  .vad-add-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
+  .vad-add-btn i { width:16px; height:16px; }
+</style>
+
+<div style="padding:20px;">
+  <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">
+    <div>
+      <h2 style="font-size:18px; font-weight:600; color:var(--g-text); margin:0;">店铺装修</h2>
+      <p style="font-size:13px; color:var(--g-text-muted); margin-top:4px;">自定义小程序首页布局与主题风格</p>
+    </div>
+    <div style="display:flex; gap:8px;">
+      <button class="g-btn"><i data-lucide="eye" style="width:14px;height:14px;"></i> 预览</button>
+      <button class="g-btn g-btn-primary"><i data-lucide="upload" style="width:14px;height:14px;"></i> 发布</button>
+    </div>
+  </div>
+
+  <div class="vad-wrap">
+    <!-- 左侧编辑区 -->
+    <div class="vad-left">
+      <div class="vad-section-hd">页面模块</div>
+      <div class="vad-module-list">
+
+        <!-- 1. 轮播图 -->
+        <div class="vad-module" data-idx="0">
+          <div class="vad-module-hd" onclick="vadToggle(this)">
+            <i data-lucide="grip-vertical" class="vad-drag" style="width:16px;height:16px;"></i>
+            <span class="vad-module-name">轮播图</span>
+            <span class="g-tag g-tag-blue">展示</span>
+            <div class="vad-module-actions">
+              <div class="g-toggle on" onclick="event.stopPropagation();toggleSwitch(event.currentTarget)"></div>
+              <i data-lucide="chevron-down" class="vad-arrow open" style="width:16px;height:16px;"></i>
+            </div>
+          </div>
+          <div class="vad-module-bd open">
+            <div class="vad-config">已配置 3 张轮播图片</div>
+            <div class="vad-img-count">
+              <div class="vad-img-thumb"><i data-lucide="image"></i></div>
+              <div class="vad-img-thumb"><i data-lucide="image"></i></div>
+              <div class="vad-img-thumb"><i data-lucide="image"></i></div>
+              <div class="vad-img-thumb" style="border-color:var(--primary);color:var(--primary);cursor:pointer;"><i data-lucide="plus" style="color:var(--primary);"></i></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 2. 公告栏 -->
+        <div class="vad-module" data-idx="1">
+          <div class="vad-module-hd" onclick="vadToggle(this)">
+            <i data-lucide="grip-vertical" class="vad-drag" style="width:16px;height:16px;"></i>
+            <span class="vad-module-name">公告栏</span>
+            <span class="g-tag g-tag-green">通知</span>
+            <div class="vad-module-actions">
+              <div class="g-toggle on" onclick="event.stopPropagation();toggleSwitch(event.currentTarget)"></div>
+              <i data-lucide="chevron-down" class="vad-arrow" style="width:16px;height:16px;"></i>
+            </div>
+          </div>
+          <div class="vad-module-bd">
+            <div class="vad-config-row">
+              <label style="font-size:12px;color:var(--g-text-secondary);white-space:nowrap;">公告文字</label>
+              <input class="g-input" value="欢迎光临，新品8折" placeholder="请输入公告内容" style="flex:1;">
+            </div>
+          </div>
+        </div>
+
+        <!-- 3. 分类导航 -->
+        <div class="vad-module" data-idx="2">
+          <div class="vad-module-hd" onclick="vadToggle(this)">
+            <i data-lucide="grip-vertical" class="vad-drag" style="width:16px;height:16px;"></i>
+            <span class="vad-module-name">分类导航</span>
+            <span class="g-tag g-tag-blue">导航</span>
+            <div class="vad-module-actions">
+              <div class="g-toggle on" onclick="event.stopPropagation();toggleSwitch(event.currentTarget)"></div>
+              <i data-lucide="chevron-down" class="vad-arrow" style="width:16px;height:16px;"></i>
+            </div>
+          </div>
+          <div class="vad-module-bd">
+            <div class="vad-config-row">
+              <label style="font-size:12px;color:var(--g-text-secondary);white-space:nowrap;">显示风格</label>
+              <select class="g-select" style="flex:1;max-width:180px;">
+                <option>图标模式</option>
+                <option>列表模式</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <!-- 4. 热销推荐 -->
+        <div class="vad-module" data-idx="3">
+          <div class="vad-module-hd" onclick="vadToggle(this)">
+            <i data-lucide="grip-vertical" class="vad-drag" style="width:16px;height:16px;"></i>
+            <span class="vad-module-name">热销推荐</span>
+            <span class="g-tag g-tag-orange">营销</span>
+            <div class="vad-module-actions">
+              <div class="g-toggle on" onclick="event.stopPropagation();toggleSwitch(event.currentTarget)"></div>
+              <i data-lucide="chevron-down" class="vad-arrow" style="width:16px;height:16px;"></i>
+            </div>
+          </div>
+          <div class="vad-module-bd">
+            <div class="vad-config-row">
+              <label style="font-size:12px;color:var(--g-text-secondary);white-space:nowrap;">展示数量</label>
+              <select class="g-select" style="flex:1;max-width:180px;">
+                <option>4 个</option>
+                <option selected>6 个</option>
+                <option>8 个</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <!-- 5. 新品专区（未启用） -->
+        <div class="vad-module disabled" data-idx="4">
+          <div class="vad-module-hd" onclick="vadToggle(this)">
+            <i data-lucide="grip-vertical" class="vad-drag" style="width:16px;height:16px;"></i>
+            <span class="vad-module-name">新品专区</span>
+            <span class="g-tag g-tag-gray">未启用</span>
+            <div class="vad-module-actions">
+              <div class="g-toggle" onclick="event.stopPropagation();toggleSwitch(event.currentTarget);this.closest('.vad-module').classList.toggle('disabled');"></div>
+              <i data-lucide="chevron-down" class="vad-arrow" style="width:16px;height:16px;"></i>
+            </div>
+          </div>
+          <div class="vad-module-bd"></div>
+        </div>
+
+        <!-- 6. 优惠活动 -->
+        <div class="vad-module" data-idx="5">
+          <div class="vad-module-hd" onclick="vadToggle(this)">
+            <i data-lucide="grip-vertical" class="vad-drag" style="width:16px;height:16px;"></i>
+            <span class="vad-module-name">优惠活动</span>
+            <span class="g-tag g-tag-orange">营销</span>
+            <div class="vad-module-actions">
+              <div class="g-toggle on" onclick="event.stopPropagation();toggleSwitch(event.currentTarget)"></div>
+              <i data-lucide="chevron-down" class="vad-arrow" style="width:16px;height:16px;"></i>
+            </div>
+          </div>
+          <div class="vad-module-bd">
+            <div class="vad-config" style="display:flex;align-items:center;gap:6px;">
+              <span class="g-tag g-tag-green" style="font-size:11px;">进行中</span>
+              <span>新用户立减 5 元</span>
+            </div>
+            <div class="vad-config" style="display:flex;align-items:center;gap:6px;margin-top:4px;">
+              <span class="g-tag g-tag-green" style="font-size:11px;">进行中</span>
+              <span>满 30 减 8</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button class="vad-add-btn"><i data-lucide="plus"></i> 添加模块</button>
+
+      <!-- 主题设置 -->
+      <div class="vad-theme-section">
+        <div class="vad-section-hd">主题风格</div>
+
+        <label style="font-size:13px;color:var(--g-text-secondary);display:block;margin-bottom:4px;">主题色</label>
+        <div class="vad-colors">
+          <div class="vad-color-btn active" style="background:#0070f3;" onclick="vadPickColor(this)"><i data-lucide="check" class="vad-check" style="width:16px;height:16px;"></i></div>
+          <div class="vad-color-btn" style="background:#f97316;" onclick="vadPickColor(this)"><i data-lucide="check" class="vad-check" style="width:16px;height:16px;"></i></div>
+          <div class="vad-color-btn" style="background:#ef4444;" onclick="vadPickColor(this)"><i data-lucide="check" class="vad-check" style="width:16px;height:16px;"></i></div>
+          <div class="vad-color-btn" style="background:#22c55e;" onclick="vadPickColor(this)"><i data-lucide="check" class="vad-check" style="width:16px;height:16px;"></i></div>
+          <div class="vad-color-btn" style="background:#8b5cf6;" onclick="vadPickColor(this)"><i data-lucide="check" class="vad-check" style="width:16px;height:16px;"></i></div>
+        </div>
+
+        <div class="vad-theme-row">
+          <span class="vad-theme-label">导航栏风格</span>
+          <select class="g-select">
+            <option>经典白底</option>
+            <option>沉浸式透明</option>
+            <option>深色模式</option>
+          </select>
+        </div>
+        <div class="vad-theme-row">
+          <span class="vad-theme-label">商品卡片风格</span>
+          <select class="g-select">
+            <option>大图模式</option>
+            <option>列表模式</option>
+            <option>一行两列</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧手机预览 -->
+    <div class="vad-right">
+      <div class="vad-phone">
+        <div class="vad-phone-status"><span></span></div>
+        <div class="vad-phone-body">
+          <div class="vad-phone-store">老三家 · 朝阳店</div>
+          <div class="vad-phone-banner">轮播图 750 x 340</div>
+          <div class="vad-phone-notice">
+            <i data-lucide="megaphone"></i>
+            <span>欢迎光临，新品8折</span>
+          </div>
+          <div class="vad-phone-cats">
+            <div class="vad-phone-cat"><div class="vad-phone-cat-icon"><i data-lucide="flame"></i></div><span>热销</span></div>
+            <div class="vad-phone-cat"><div class="vad-phone-cat-icon"><i data-lucide="beef"></i></div><span>主食</span></div>
+            <div class="vad-phone-cat"><div class="vad-phone-cat-icon"><i data-lucide="popcorn"></i></div><span>小吃</span></div>
+            <div class="vad-phone-cat"><div class="vad-phone-cat-icon"><i data-lucide="cup-soda"></i></div><span>饮品</span></div>
+          </div>
+          <div class="vad-phone-section-title"><i data-lucide="trending-up"></i> 热销推荐</div>
+          <div class="vad-phone-products">
+            <div class="vad-phone-product">
+              <div class="vad-phone-product-img"><i data-lucide="image"></i></div>
+              <div class="vad-phone-product-info">
+                <div class="vad-phone-product-name">招牌炸鸡汉堡</div>
+                <div class="vad-phone-product-price">¥ 19.90</div>
+              </div>
+            </div>
+            <div class="vad-phone-product">
+              <div class="vad-phone-product-img"><i data-lucide="image"></i></div>
+              <div class="vad-phone-product-info">
+                <div class="vad-phone-product-name">香辣鸡腿堡</div>
+                <div class="vad-phone-product-price">¥ 22.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="vad-phone-tabbar">
+          <div class="vad-phone-tab active"><i data-lucide="home"></i>首页</div>
+          <div class="vad-phone-tab"><i data-lucide="layout-grid"></i>分类</div>
+          <div class="vad-phone-tab"><i data-lucide="shopping-cart"></i>购物车</div>
+          <div class="vad-phone-tab"><i data-lucide="user"></i>我的</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  /* 模块展开/收起 */
+  function vadToggle(hd) {
+    var bd = hd.nextElementSibling;
+    var arrow = hd.querySelector('.vad-arrow');
+    bd.classList.toggle('open');
+    if (arrow) arrow.classList.toggle('open');
+  }
+
+  /* Toggle 开关 */
+  function toggleSwitch(el) {
+    el.classList.toggle('on');
+  }
+
+  /* 主题色切换 */
+  function vadPickColor(el) {
+    var btns = el.parentElement.querySelectorAll('.vad-color-btn');
+    btns.forEach(function(b) { b.classList.remove('active'); });
+    el.classList.add('active');
+  }
+
+  /* 初始化 Lucide 图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>
diff --git a/TakeoutSaaS.Prototypes/pages/va-miniapp.html b/TakeoutSaaS.Prototypes/pages/va-miniapp.html
new file mode 100644
index 0000000..2f91e6d
--- /dev/null
+++ b/TakeoutSaaS.Prototypes/pages/va-miniapp.html
@@ -0,0 +1,310 @@
+<!-- 小程序商城设置页 -->
+<style>
+  .page-miniapp { max-width:960px; }
+
+  /* 顶部状态条 */
+  .vam-status-bar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#fff; border-radius:10px; padding:12px 18px; box-shadow:var(--g-shadow-sm); margin-bottom:16px; }
+  .vam-status-bar .vam-meta { font-size:13px; color:var(--g-text-secondary); display:flex; align-items:center; gap:5px; }
+  .vam-status-bar .vam-meta span { color:var(--g-text); font-weight:500; }
+
+  /* 分段Tab */
+  .vam-tabs { display:flex; background:#f8f9fb; border-radius:8px; padding:3px; gap:2px; width:fit-content; margin-bottom:20px; }
+  .vam-tab { padding:7px 22px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--g-text-secondary); transition:var(--g-transition); border:none; background:none; white-space:nowrap; }
+  .vam-tab.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
+
+  /* Tab面板 */
+  .vam-panel { display:none; }
+  .vam-panel.active { display:block; }
+
+  /* Section标题 */
+  .vam-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* 两列表单 */
+  .vam-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
+  .vam-form-grid .full { grid-column:1/-1; }
+
+  /* 行内toggle */
+  .vam-toggle-row { display:flex; align-items:center; gap:10px; }
+  .vam-toggle-label { font-size:13px; font-weight:500; color:var(--g-text); }
+  .vam-toggle-hint { font-size:12px; color:var(--g-text-muted); margin-left:4px; }
+
+  /* 上传占位 */
+  .vam-upload { width:120px; height:120px; border:2px dashed var(--g-border); border-radius:var(--g-radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--g-text-muted); cursor:pointer; transition:var(--g-transition); gap:6px; }
+  .vam-upload:hover { border-color:var(--primary); color:var(--primary); }
+  .vam-upload-sm { width:200px; height:110px; }
+
+  /* 保存栏 */
+  .vam-save-bar { margin-top:24px; display:flex; justify-content:flex-end; gap:8px; }
+
+  /* Banner卡片 */
+  .vam-banner-hint { font-size:13px; color:var(--g-text-secondary); margin-bottom:16px; display:flex; align-items:center; gap:6px; }
+  .vam-banner-list { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
+  .vam-banner-card { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--g-border); border-radius:var(--g-radius); padding:14px 16px; transition:var(--g-transition); }
+  .vam-banner-card:hover { box-shadow:var(--g-shadow-md); }
+  .vam-banner-img { width:150px; height:68px; background:#f0f2f5; border-radius:var(--g-radius-sm); display:flex; align-items:center; justify-content:center; color:var(--g-text-muted); font-size:12px; flex-shrink:0; }
+  .vam-banner-info { flex:1; min-width:0; }
+  .vam-banner-title { font-size:14px; font-weight:500; color:var(--g-text); margin-bottom:4px; }
+  .vam-banner-link { font-size:12px; color:var(--g-text-muted); }
+  .vam-banner-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
+  .vam-banner-btn { width:30px; height:30px; border:none; background:none; cursor:pointer; color:var(--g-text-muted); display:flex; align-items:center; justify-content:center; border-radius:6px; transition:var(--g-transition); }
+  .vam-banner-btn:hover { background:#f8f9fb; color:var(--primary); }
+  .vam-banner-btn.danger:hover { color:var(--g-danger); }
+
+  /* 时间组 */
+  .vam-time-group { display:flex; align-items:center; gap:8px; }
+  .vam-time-group input[type=time] { height:36px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
+  .vam-time-group input[type=time]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+  .vam-time-sep { color:var(--g-text-muted); font-size:14px; }
+</style>
+
+<div class="page-miniapp">
+
+  <!-- 顶部状态条 -->
+  <div class="vam-status-bar">
+    <span class="g-tag g-tag-green">已上线</span>
+    <div class="vam-meta"><i data-lucide="fingerprint" style="width:14px;height:14px;color:var(--g-text-muted)"></i> AppID: <span>wx8a3f6e2d1b9c7054</span></div>
+    <div class="vam-meta"><i data-lucide="git-branch" style="width:14px;height:14px;color:var(--g-text-muted)"></i> 版本: <span>v2.3.1</span></div>
+    <div class="vam-meta"><i data-lucide="clock" style="width:14px;height:14px;color:var(--g-text-muted)"></i> 最后更新: <span>2026-02-10</span></div>
+    <div style="flex:1;"></div>
+    <button class="g-btn g-btn-primary"><i data-lucide="upload" style="width:14px;height:14px;"></i> 发布新版本</button>
+  </div>
+
+  <!-- 分段Tab -->
+  <div class="vam-tabs">
+    <button class="vam-tab active" onclick="switchTab(0)">基础设置</button>
+    <button class="vam-tab" onclick="switchTab(1)">Banner管理</button>
+    <button class="vam-tab" onclick="switchTab(2)">下单配置</button>
+    <button class="vam-tab" onclick="switchTab(3)">分享设置</button>
+  </div>
+
+  <!-- Tab1: 基础设置 -->
+  <div class="vam-panel active" id="panel0">
+    <div class="g-card" style="padding:20px;">
+      <div class="vam-section-hd">店铺信息</div>
+      <div class="vam-form-grid">
+        <div class="g-form-group">
+          <label class="g-form-label required">店铺名称</label>
+          <input class="g-input" value="老三家·朝阳店" placeholder="请输入店铺名称">
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">店铺电话</label>
+          <input class="g-input" value="010-88886666" placeholder="请输入联系电话">
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">营业状态</label>
+          <div class="vam-toggle-row">
+            <span class="g-toggle on" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+            <span class="vam-toggle-label">已开启</span>
+            <span class="vam-toggle-hint">关闭后小程序显示休息中</span>
+          </div>
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">营业时间</label>
+          <div class="vam-time-group">
+            <input type="time" value="09:00">
+            <span class="vam-time-sep">~</span>
+            <input type="time" value="22:00">
+          </div>
+        </div>
+        <div class="g-form-group full">
+          <label class="g-form-label">店铺公告</label>
+          <textarea class="g-textarea" rows="3" placeholder="请输入店铺公告，将展示在小程序首页">欢迎光临老三家，新品上市享8折优惠！</textarea>
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">店铺Logo</label>
+          <div class="vam-upload">
+            <i data-lucide="image-plus" style="width:28px;height:28px;"></i>
+            <span style="font-size:12px;">上传Logo</span>
+          </div>
+          <div class="g-hint">建议尺寸 200x200px，支持 JPG/PNG</div>
+        </div>
+      </div>
+      <div class="vam-save-bar">
+        <button class="g-btn">重置</button>
+        <button class="g-btn g-btn-primary">保存设置</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tab2: Banner管理 -->
+  <div class="vam-panel" id="panel1">
+    <div class="g-card" style="padding:20px;">
+      <div class="vam-section-hd">轮播图管理</div>
+      <div class="vam-banner-hint"><i data-lucide="info" style="width:14px;height:14px;"></i> 首页轮播图，最多5张，建议尺寸 750x340px</div>
+      <div class="vam-banner-list">
+        <!-- Banner 1 -->
+        <div class="vam-banner-card">
+          <div class="vam-banner-img"><i data-lucide="image" style="width:20px;height:20px;"></i></div>
+          <div class="vam-banner-info">
+            <div class="vam-banner-title">新品上市 - 招牌小龙虾</div>
+            <div class="vam-banner-link"><i data-lucide="link" style="width:11px;height:11px;vertical-align:-1px;"></i> 链接到商品</div>
+          </div>
+          <span class="g-toggle on" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+          <div class="vam-banner-actions">
+            <button class="vam-banner-btn" title="上移"><i data-lucide="chevron-up" style="width:16px;height:16px;"></i></button>
+            <button class="vam-banner-btn" title="下移"><i data-lucide="chevron-down" style="width:16px;height:16px;"></i></button>
+            <button class="vam-banner-btn danger" title="删除"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
+          </div>
+        </div>
+        <!-- Banner 2 -->
+        <div class="vam-banner-card">
+          <div class="vam-banner-img"><i data-lucide="image" style="width:20px;height:20px;"></i></div>
+          <div class="vam-banner-info">
+            <div class="vam-banner-title">满50减10 限时活动</div>
+            <div class="vam-banner-link"><i data-lucide="link" style="width:11px;height:11px;vertical-align:-1px;"></i> 链接到活动页</div>
+          </div>
+          <span class="g-toggle on" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+          <div class="vam-banner-actions">
+            <button class="vam-banner-btn" title="上移"><i data-lucide="chevron-up" style="width:16px;height:16px;"></i></button>
+            <button class="vam-banner-btn" title="下移"><i data-lucide="chevron-down" style="width:16px;height:16px;"></i></button>
+            <button class="vam-banner-btn danger" title="删除"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
+          </div>
+        </div>
+        <!-- Banner 3 -->
+        <div class="vam-banner-card">
+          <div class="vam-banner-img"><i data-lucide="image" style="width:20px;height:20px;"></i></div>
+          <div class="vam-banner-info">
+            <div class="vam-banner-title">会员充值送好礼</div>
+            <div class="vam-banner-link"><i data-lucide="link" style="width:11px;height:11px;vertical-align:-1px;"></i> 链接到会员中心</div>
+          </div>
+          <span class="g-toggle on" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+          <div class="vam-banner-actions">
+            <button class="vam-banner-btn" title="上移"><i data-lucide="chevron-up" style="width:16px;height:16px;"></i></button>
+            <button class="vam-banner-btn" title="下移"><i data-lucide="chevron-down" style="width:16px;height:16px;"></i></button>
+            <button class="vam-banner-btn danger" title="删除"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
+          </div>
+        </div>
+      </div>
+      <button class="g-btn" style="width:100%; border-style:dashed;"><i data-lucide="plus" style="width:14px;height:14px;"></i> 添加Banner</button>
+    </div>
+  </div>
+
+  <!-- Tab3: 下单配置 -->
+  <div class="vam-panel" id="panel2">
+    <div class="g-card" style="padding:20px;">
+      <div class="vam-section-hd">金额设置</div>
+      <div class="vam-form-grid" style="margin-bottom:24px;">
+        <div class="g-form-group">
+          <label class="g-form-label required">起送金额</label>
+          <div style="display:flex;align-items:center;gap:6px;">
+            <span style="color:var(--g-text-secondary);font-size:14px;">¥</span>
+            <input class="g-input" type="number" value="20.00" step="0.01" placeholder="如：20.00" style="width:160px;">
+          </div>
+          <div class="g-hint">低于此金额无法下单</div>
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">包装费</label>
+          <div style="display:flex;align-items:center;gap:6px;">
+            <span style="color:var(--g-text-secondary);font-size:14px;">¥</span>
+            <input class="g-input" type="number" value="2.00" step="0.01" placeholder="如：2.00" style="width:160px;">
+          </div>
+          <div class="g-hint">每单固定收取</div>
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">配送费规则</label>
+          <select class="g-select" style="width:220px;">
+            <option>固定金额</option>
+            <option>按距离阶梯</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="g-divider"></div>
+
+      <div class="vam-section-hd" style="margin-top:20px;">下单方式</div>
+      <div style="display:flex;flex-direction:column;gap:16px;">
+        <div class="g-form-group">
+          <div class="vam-toggle-row">
+            <span class="g-toggle on" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+            <span class="vam-toggle-label">预约下单</span>
+            <span class="vam-toggle-hint">允许顾客预约指定时间段取餐/配送</span>
+          </div>
+          <div style="margin-top:10px;margin-left:46px;">
+            <label class="g-form-label">预约提前时长</label>
+            <select class="g-select" style="width:180px;">
+              <option>30分钟</option>
+              <option selected>1小时</option>
+              <option>2小时</option>
+              <option>当天</option>
+            </select>
+          </div>
+        </div>
+        <div class="vam-toggle-row">
+          <span class="g-toggle on" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+          <span class="vam-toggle-label">自提功能</span>
+          <span class="vam-toggle-hint">允许顾客到店自提</span>
+        </div>
+        <div class="vam-toggle-row">
+          <span class="g-toggle on" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+          <span class="vam-toggle-label">堂食扫码点餐</span>
+          <span class="vam-toggle-hint">顾客扫桌码直接下单</span>
+        </div>
+      </div>
+      <div class="vam-save-bar">
+        <button class="g-btn">重置</button>
+        <button class="g-btn g-btn-primary">保存设置</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tab4: 分享设置 -->
+  <div class="vam-panel" id="panel3">
+    <div class="g-card" style="padding:20px;">
+      <div class="vam-section-hd">分享内容</div>
+      <div class="vam-form-grid">
+        <div class="g-form-group full">
+          <label class="g-form-label required">分享标题</label>
+          <input class="g-input" value="老三家·好味道，点外卖就上老三家" placeholder="请输入分享标题，建议20字以内">
+        </div>
+        <div class="g-form-group full">
+          <label class="g-form-label">分享描述</label>
+          <input class="g-input" value="新用户首单立减5元" placeholder="请输入分享描述文案">
+        </div>
+        <div class="g-form-group">
+          <label class="g-form-label">分享图片</label>
+          <div class="vam-upload vam-upload-sm">
+            <i data-lucide="image-plus" style="width:28px;height:28px;"></i>
+            <span style="font-size:12px;">上传分享图</span>
+          </div>
+          <div class="g-hint">建议尺寸 500x400px，支持 JPG/PNG</div>
+        </div>
+      </div>
+
+      <div class="g-divider" style="margin:20px 0;"></div>
+
+      <div class="vam-section-hd">分享有礼</div>
+      <div class="g-form-group">
+        <div class="vam-toggle-row">
+          <span class="g-toggle" onclick="toggleSwitch(this)"><span class="g-toggle-thumb"></span></span>
+          <span class="vam-toggle-label">分享有礼</span>
+          <span class="vam-toggle-hint">开启后分享者和被分享者各得优惠券</span>
+        </div>
+      </div>
+      <div class="vam-save-bar">
+        <button class="g-btn">重置</button>
+        <button class="g-btn g-btn-primary">保存设置</button>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<script>
+  /* Tab切换 */
+  function switchTab(idx) {
+    document.querySelectorAll('.vam-tab').forEach(function(t, i) {
+      t.classList.toggle('active', i === idx);
+    });
+    document.querySelectorAll('.vam-panel').forEach(function(p, i) {
+      p.classList.toggle('active', i === idx);
+    });
+  }
+
+  /* Toggle开关 */
+  function toggleSwitch(el) {
+    el.classList.toggle('on');
+  }
+
+  /* Lucide Icons */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>