From ef68a8e1fb8969d12fed04622502cc2c03206742 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AF=E6=99=AE?= <18691763612@163.com>
Date: Wed, 20 May 2026 14:31:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=90=A5=E5=85=BB=E7=94=A8=E9=A4=90?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=A4=9A=E9=A1=B5=E9=9D=A2=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E2=80=94=E2=80=94=E7=AD=9B=E9=80=89=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=E3=80=81=E8=83=BD=E8=80=97=E5=BD=95=E5=85=A5=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=85=B3=E8=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 净菜订单/食安监控/净菜进柜新增页面标题行与食堂切换
- 净菜订单新增预定配送时间筛选
- 食安监控水电气卡片支持手动录入当前余量与今日用量
- 净菜内供/外供新增净菜类型筛选与餐品净菜包数据
- 净菜加工与净菜入库新增关联单号列，建立双向数据关联
- 新增营养用餐模块 CHANGELOG

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web-admin/nutrition/doc/CHANGELOG.md        |  46 ++
 web-admin/nutrition/prod-clean-order.html   | 139 +++++-
 web-admin/nutrition/prod-proc-cabinet.html  | 487 ++++++++++++--------
 web-admin/nutrition/prod-qc-daily.html      | 456 ++++++++++++++++--
 web-admin/nutrition/sup-clean-external.html | 126 ++++-
 web-admin/nutrition/sup-clean-internal.html |  46 +-
 web-admin/nutrition/sup-in-clean.html       |  16 +-
 web-admin/nutrition/sup-in-cleanin.html     |  12 +-
 8 files changed, 1030 insertions(+), 298 deletions(-)
 create mode 100644 web-admin/nutrition/doc/CHANGELOG.md

diff --git a/web-admin/nutrition/doc/CHANGELOG.md b/web-admin/nutrition/doc/CHANGELOG.md
new file mode 100644
index 0000000..f5fc53e
--- /dev/null
+++ b/web-admin/nutrition/doc/CHANGELOG.md
@@ -0,0 +1,46 @@
+# 营养用餐管理端 CHANGELOG
+
+## [2026-05-20]
+
+### 增强 — 多页面交互优化与数据关联
+
+- **`prod-clean-order.html`** 净菜订单
+  - 新增页面标题行 + 食堂切换下拉
+  - 筛选栏新增「预定配送时间」日期范围筛选
+  - 筛选栏新增「净菜类型」下拉（净菜包/餐品净菜包）
+  - 订单状态选项调整为：备货中/待配送/配送中/已完成
+  - 新增弹窗通用样式与表单网格布局
+
+- **`prod-qc-daily.html`** 食安监控
+  - 水电气表 Tab 移除「生成能耗日报」按钮
+  - 水/电/气三张能耗卡片右上角新增「✏️ 录入」入口，支持手动编辑当前余量与今日用量
+  - 新增页面标题行 + 食堂切换下拉
+  - 新增摄像头回放弹窗（含播放器、时间轴、分时段列表）
+  - 新增表单弹窗通用样式
+
+- **`prod-proc-cabinet.html`** 净菜进柜
+  - 新增页面标题行 + 食堂切换下拉
+  - 筛选栏样式重构（独立圆角卡片）
+  - 移除 Tab 切换结构，改为左右分栏布局
+  - 新增标签/链接通用样式
+
+- **`sup-clean-external.html`** 净菜外供
+  - 筛选栏新增「净菜类型」下拉
+  - 表格新增「净菜类型」「净菜/餐品」列
+  - 订单状态调整为：备货中/待配送/配送中/已完成
+  - 数据行新增餐品净菜包示例（宫保鸡丁、清蒸鱼、蒜蓉菠菜）
+  - 操作列按状态显示差异化按钮（确认收货/立即发货/备货完成）
+  - 新建订单弹窗新增「净菜类型」字段
+
+- **`sup-clean-internal.html`** 净菜内供
+  - 筛选栏新增「净菜类型」下拉、订单状态调整
+  - 表格新增「净菜类型」「净菜/餐品」「预定配送时间」列
+  - 数据行新增餐品净菜包示例及更多数据
+  - 操作列按状态显示差异化按钮
+  - 新建申领弹窗新增「净菜类型」字段
+
+- **`sup-in-clean.html`** 净菜加工
+  - 表格新增「关联单号」列（关联入库单号，如 NC-IN-001）
+
+- **`sup-in-cleanin.html`** 净菜入库
+  - 表格新增「关联单号」列（关联加工批次号，如 PROC-001）
diff --git a/web-admin/nutrition/prod-clean-order.html b/web-admin/nutrition/prod-clean-order.html
index a02b51b..8551679 100644
--- a/web-admin/nutrition/prod-clean-order.html
+++ b/web-admin/nutrition/prod-clean-order.html
@@ -68,10 +68,38 @@ tbody tr:hover{background:#F8FBFF;}
 .stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
 .stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
 .action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
+/* 页面标题行 */
+.page-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
+.page-header__left{display:flex;align-items:baseline;gap:12px;}
+.page-header__title{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
+.page-header__desc{font-size:var(--font-sm);color:var(--text-placeholder);}
+.page-header__right{display:flex;align-items:center;gap:12px;}
+.page-header__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
+.canteen-select{height:40px;border:2px solid var(--primary);border-radius:var(--radius-md);padding:0 36px 0 14px;font-size:var(--font-base);color:var(--primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231890FF'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;min-width:160px;font-weight:600;transition:all .2s;}
+.canteen-select:hover{background-color:var(--primary-light);}
+.canteen-select:focus{box-shadow:0 0 0 3px rgba(24,144,255,0.15);}
 /* 操作列固定右侧 */
 thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
 thead th:last-child{background:#FAFAFA;}
 tbody tr:hover td.td-actions{background:#F8FBFF;}
+/* 弹窗 */
+.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
+.modal-mask.show{display:flex;}
+.modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
+.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
+.modal__title{font-size:var(--font-lg);font-weight:600;}
+.modal__close{width:32px;height:32px;border:none;background:none;font-size:18px;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
+.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
+.modal__body{padding:24px;overflow-y:auto;flex:1;}
+.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
+.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
+.form-item{display:flex;flex-direction:column;gap:6px;}
+.form-item.full{grid-column:1/-1;}
+.form-item__label{font-size:var(--font-sm);color:var(--text-secondary);}
+.form-item__label .required{color:var(--danger);margin-left:2px;}
+.form-item input,.form-item select,.form-item textarea{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
+.form-item input:focus,.form-item select:focus{border-color:var(--primary);}
+.form-item select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
 </style>
 </head>
 <body>
@@ -95,6 +123,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
   <a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
 </aside>
 <div class="main">
+  <!-- 页面标题行 + 食堂切换 -->
+  <div class="page-header">
+    <div class="page-header__left">
+      <span class="page-header__title">净菜订单</span>
+      <span class="page-header__desc">2026-05-19 · 数据实时更新</span>
+    </div>
+    <div class="page-header__right">
+      <span class="page-header__label">当前食堂</span>
+      <select class="canteen-select">
+        <option value="1">一食堂（东区）</option>
+        <option value="2">二食堂（西区）</option>
+        <option value="3">三食堂（南区）</option>
+      </select>
+    </div>
+  </div>
+
   <div class="stats-row">
     <div class="stat-card"><div class="stat-card__icon blue">📝</div><div class="stat-card__info"><div class="stat-card__value">24</div><div class="stat-card__label">今日订单数</div></div></div>
     <div class="stat-card"><div class="stat-card__icon green">✅</div><div class="stat-card__info"><div class="stat-card__value">18</div><div class="stat-card__label">已完成</div></div></div>
@@ -102,31 +146,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     <div class="stat-card"><div class="stat-card__icon red">⏳</div><div class="stat-card__info"><div class="stat-card__value">2</div><div class="stat-card__label">待处理</div></div></div>
   </div>
   <div class="filter-bar">
-    <div class="filter-item"><label>订单号/食材名称</label><input class="filter-input" type="text" placeholder="请输入订单号或食材名称"></div>
-    <div class="filter-item"><label>申请厨房</label><select class="filter-select"><option>全部</option><option>A区厨房</option><option>B区厨房</option><option>C区厨房</option></select></div>
-    <div class="filter-item"><label>订单状态</label><select class="filter-select"><option>全部</option><option>已完成</option><option>配送中</option><option>待处理</option></select></div>
+    <div class="filter-item"><label>申领单号/食材名称</label><input class="filter-input" type="text" placeholder="请输入申领单号或食材名称"></div>
+    <div class="filter-item"><label>净菜类型</label><select class="filter-select"><option>全部</option><option>净菜包</option><option>餐品净菜包</option></select></div>
+    <div class="filter-item"><label>订单状态</label><select class="filter-select"><option>全部</option><option>备货中</option><option>待配送</option><option>配送中</option><option>已完成</option></select></div>
+    <div class="filter-item"><label>预定配送时间</label><input class="filter-input" type="date" style="min-width:150px"> ~ <input class="filter-input" type="date" style="min-width:150px"></div>
     <button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
   </div>
   <div class="action-bar">
-    <button class="btn btn-primary">➕ 新建订单</button>
-    <button class="btn btn-default">📋 生成内供申领单</button>
+    <button class="btn btn-primary" onclick="openModal('modal-order')">➕ 新建订单</button>
   </div>
   <div class="table-card">
     <div class="table-card__header"><div class="table-card__title">净菜订单</div></div>
     <div class="table-card__content">
       <table>
-        <thead><tr><th>订单号</th><th>申请厨房</th><th>食材名称</th><th>溯源码</th><th>食材分类</th><th>需求数量(kg)</th><th>需求时间</th><th>库存状态</th><th>订单状态</th><th>操作</th></tr></thead>
+        <thead><tr><th>订单号</th><th>溯源码</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>需求份数</th><th>需求计量(kg)</th><th>订单状态</th><th>申领时间</th><th>预定配送时间</th><th>创建人</th><th>操作</th></tr></thead>
         <tbody>
-          <tr><td>CO-001</td><td>A区厨房</td><td>菠菜</td><td>NC-IN-BOCA-20260422-01</td><td>蔬菜类</td><td>30</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-001</td><td>A区厨房</td><td>白菜</td><td>NC-IN-BCAI-20260422-01</td><td>蔬菜类</td><td>25</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-001</td><td>A区厨房</td><td>胡萝卜</td><td>NC-IN-HLUB-20260422-01</td><td>蔬菜类</td><td>25</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-002</td><td>B区厨房</td><td>猪里脊</td><td>NC-IN-ZLRJ-20260415-01</td><td>肉禽类</td><td>40</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-002</td><td>B区厨房</td><td>鸡胸肉</td><td>NC-IN-JXRJ-20260422-01</td><td>肉禽类</td><td>20</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-003</td><td>C区厨房</td><td>草鱼</td><td>—</td><td>水产类</td><td>40</td><td>11:30前</td><td><span class="tag tag-red">库存不足</span></td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-004</td><td>A区厨房</td><td>西兰花</td><td>NC-IN-XLHU-20260422-01</td><td>蔬菜类</td><td>8</td><td>11:20前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-004</td><td>A区厨房</td><td>清蒸鱼</td><td>NC-IN-CAYO-20260422-01</td><td>水产类</td><td>12</td><td>11:20前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-005</td><td>B区厨房</td><td>杂粮米</td><td>NC-IN-DAMI-20260422-01</td><td>粮油类</td><td>10</td><td>11:25前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
-          <tr><td>CO-005</td><td>B区厨房</td><td>冬瓜</td><td>—</td><td>蔬菜类</td><td>6</td><td>11:25前</td><td><span class="tag tag-orange">库存不足</span></td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
+          <tr><td>CO-001</td><td>NC-INT-BOCA-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 07:30</td><td>2026-04-22 10:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>CO-002</td><td>NC-INT-ZLRJ-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>CO-003</td><td>NC-INT-JXRJ-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>CO-005</td><td>NC-INT-QZYU-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>CO-006</td><td>NC-INT-TDSI-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>2026-04-22 09:15</td><td>2026-04-22 11:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>CO-008</td><td>NC-INT-XLHU-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>西兰花</td><td>500g/袋</td><td>30</td><td>15</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 10:00</td><td>2026-04-22 11:30</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
         </tbody>
       </table>
     </div>
@@ -136,6 +176,71 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     </div>
   </div>
 </div>
-<script></script>
+<!-- 弹窗：新建订单 -->
+<div class="modal-mask" id="modal-order">
+  <div class="modal">
+    <div class="modal__header">
+      <div class="modal__title">新建净菜订单</div>
+      <button class="modal__close" onclick="closeModal('modal-order')">✕</button>
+    </div>
+    <div class="modal__body">
+      <div class="form-grid">
+        <div class="form-item">
+          <div class="form-item__label">溯源码<span class="required">*</span></div>
+          <input placeholder="输入溯源码可带出净菜信息">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">净菜类型<span class="required">*</span></div>
+          <select id="orderType" onchange="toggleOrderName()"><option value="">请选择</option><option value="nc">净菜包</option><option value="cp">餐品净菜包</option></select>
+        </div>
+        <div class="form-item" id="orderNameNC">
+          <div class="form-item__label">净菜名称<span class="required">*</span></div>
+          <select><option value="">请选择净菜</option><option>菠菜</option><option>玉米（玉米粒）</option><option>猪排骨</option><option>鸡胸肉（鸡肉丝）</option><option>草鱼（鱼片）</option><option>土豆（土豆丝）</option><option>西兰花</option></select>
+        </div>
+        <div class="form-item" id="orderNameCP" style="display:none;">
+          <div class="form-item__label">餐品名称<span class="required">*</span></div>
+          <select><option value="">请选择餐品</option><option>宫保鸡丁</option><option>清蒸鱼</option><option>蒜蓉菠菜</option><option>炒胡萝卜</option><option>红烧排骨</option></select>
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">包装规格<span class="required">*</span></div>
+          <input placeholder="如 500g/袋、2kg/盘">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">需求份数<span class="required">*</span></div>
+          <input type="number" placeholder="请输入份数" min="1">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">需求计量(kg)<span class="required">*</span></div>
+          <input type="number" placeholder="请输入数量" min="0.1" step="0.1">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">预定配送时间</div>
+          <input type="datetime-local">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">创建人<span class="required">*</span></div>
+          <input placeholder="请输入创建人姓名">
+        </div>
+        <div class="form-item full">
+          <div class="form-item__label">备注</div>
+          <input placeholder="如有特殊要求请备注">
+        </div>
+      </div>
+    </div>
+    <div class="modal__footer">
+      <button class="btn btn-default" onclick="closeModal('modal-order')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-order')">确认提交</button>
+    </div>
+  </div>
+</div>
+<script>
+// 弹窗开关
+function openModal(id){document.getElementById(id).classList.add('show');}
+function closeModal(id){document.getElementById(id).classList.remove('show');}
+// 点击遮罩关闭
+document.querySelectorAll('.modal-mask').forEach(function(m){m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});});
+// 净菜类型切换：显示净菜名称或餐品名称
+function toggleOrderName(){var v=document.getElementById('orderType').value;document.getElementById('orderNameNC').style.display=(v==='cp'?'none':'flex');document.getElementById('orderNameCP').style.display=(v==='cp'?'flex':'none');}
+</script>
 </body>
 </html>
diff --git a/web-admin/nutrition/prod-proc-cabinet.html b/web-admin/nutrition/prod-proc-cabinet.html
index 21cbe08..4cae194 100644
--- a/web-admin/nutrition/prod-proc-cabinet.html
+++ b/web-admin/nutrition/prod-proc-cabinet.html
@@ -2,6 +2,7 @@
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>营养管理 - 净菜进柜 | 健康长庆原型</title>
 <style>
 *{box-sizing:border-box;margin:0;padding:0;}
@@ -32,6 +33,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
 .mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
 .sidebar-item.active .mi{opacity:0.9;}
 .main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
+/* 页面标题行 */
+.page-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
+.page-header__left{display:flex;align-items:baseline;gap:12px;}
+.page-header__title{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
+.page-header__desc{font-size:var(--font-sm);color:var(--text-placeholder);}
+.page-header__right{display:flex;align-items:center;gap:12px;}
+.page-header__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
+.canteen-select{height:40px;border:2px solid var(--primary);border-radius:var(--radius-md);padding:0 36px 0 14px;font-size:var(--font-base);color:var(--primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231890FF'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;min-width:160px;font-weight:600;transition:all .2s;}
+.canteen-select:hover{background-color:var(--primary-light);}
+.canteen-select:focus{box-shadow:0 0 0 3px rgba(24,144,255,0.15);}
+/* 统计卡片 */
 .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
 .stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
 .stat-card__icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;}
@@ -42,13 +54,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
 .stat-card__info{display:flex;flex-direction:column;gap:4px;}
 .stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
 .stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
-.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);border-bottom:2px solid var(--border);}
-.page-tab{padding:14px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:6px;}
-.page-tab:hover{color:var(--primary);}
-.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
-.tab-panel{display:none;}
-.tab-panel.active{display:block;}
-.filter-bar{background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
+/* 筛选栏 */
+.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
 .filter-item{display:flex;align-items:center;gap:8px;}
 .filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
 .filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:160px;}
@@ -57,18 +64,6 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
 .btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
 .btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
 .btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
-.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
-.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
-.table-card__title{font-size:var(--font-base);font-weight:600;}
-.table-card__actions{display:flex;gap:8px;align-items:center;}
-.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
-.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
-.table-card__content table{min-width:100%;white-space:nowrap;}
-table{width:100%;border-collapse:collapse;}
-thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
-tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
-tbody tr:last-child td{border-bottom:none;}
-tbody tr:hover{background:#F8FBFF;}
 .tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
 .tag-blue{background:var(--primary-light);color:var(--primary);}
 .tag-green{background:#F6FFED;color:var(--success);}
@@ -76,39 +71,95 @@ tbody tr:hover{background:#F8FBFF;}
 .tag-red{background:#FFF1F0;color:var(--danger);}
 .tag-gray{background:#F5F5F5;color:#999;}
 .link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
+/* 左右分栏布局 */
+.split-layout{display:flex;gap:16px;align-items:flex-start;}
+.split-layout__left{width:340px;flex-shrink:0;}
+.split-layout__right{flex:1;min-width:0;}
+/* 货柜可视化 */
+.cabinet-visual{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
+.cabinet-visual__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);}
+.cabinet-visual__title{font-size:var(--font-base);font-weight:600;}
+.cabinet-visual__status{font-size:var(--font-xs);color:var(--text-secondary);}
+.cabinet-header-select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 10px;font-size:var(--font-sm);color:var(--text-primary);font-weight:600;outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;cursor:pointer;}
+.cabinet-header-select:focus{border-color:var(--primary);}
+.btn-icon{width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;flex-shrink:0;}
+.btn-icon:hover{color:var(--primary);border-color:var(--primary);}
+.cabinet-slot__remain{font-size:var(--font-sm);font-weight:700;color:var(--primary);}
+.cabinet-slot__expire{font-size:10px;color:var(--text-placeholder);}
+.cabinet-visual__body{padding:16px;}
+.cabinet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
+.cabinet-slot{border:2px solid var(--border);border-radius:var(--radius-md);padding:12px 10px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:80px;justify-content:center;position:relative;}
+.cabinet-slot:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(24,144,255,0.15);}
+.cabinet-slot.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 2px 8px rgba(24,144,255,0.2);}
+.cabinet-slot.occupied{background:#FAFFF5;border-color:#B7EB8F;}
+.cabinet-slot.occupied.active{background:var(--primary-light);border-color:var(--primary);}
+.cabinet-slot.warning{background:#FFFBE6;border-color:#FFD666;}
+.cabinet-slot.alert{background:#FFF1F0;border-color:#FFA39E;}
+.cabinet-slot__id{font-size:var(--font-xs);color:var(--text-placeholder);font-weight:500;}
+.cabinet-slot__name{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);text-align:center;line-height:1.3;}
+.cabinet-slot__temp{font-size:var(--font-xs);color:var(--text-secondary);}
+.cabinet-slot__badge{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;}
+.cabinet-slot__badge.green{background:var(--success);}
+.cabinet-slot__badge.orange{background:var(--warning);}
+.cabinet-slot__badge.red{background:var(--danger);}
+.cabinet-slot--empty{background:#FAFAFA;border-style:dashed;}
+.cabinet-slot--empty .cabinet-slot__name{color:var(--text-placeholder);font-weight:400;}
+.cabinet-legend{display:flex;gap:16px;padding:12px 20px;border-top:1px solid var(--border);flex-wrap:wrap;}
+.cabinet-legend__item{display:flex;align-items:center;gap:4px;font-size:var(--font-xs);color:var(--text-secondary);}
+.cabinet-legend__dot{width:10px;height:10px;border-radius:2px;border:1.5px solid;}
+.cabinet-legend__dot.idle{background:#FAFAFA;border-color:var(--border);border-style:dashed;}
+.cabinet-legend__dot.storing{background:#FAFFF5;border-color:#B7EB8F;}
+.cabinet-legend__dot.warn{background:#FFFBE6;border-color:#FFD666;}
+.cabinet-legend__dot.err{background:#FFF1F0;border-color:#FFA39E;}
+/* 右侧表格 */
+.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
+.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
+.table-card__title{font-size:var(--font-base);font-weight:600;}
+.table-card__actions{display:flex;gap:8px;align-items:center;}
+.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
+.table-card__content table{min-width:100%;white-space:nowrap;}
+table{width:100%;border-collapse:collapse;}
+thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
+tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
+tbody tr:last-child td{border-bottom:none;}
+tbody tr:hover{background:#F8FBFF;}
+tbody tr.row-active{background:var(--primary-light);}
+.td-actions{display:flex;align-items:center;gap:8px;}
 /* 操作列固定右侧 */
 thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
 thead th:last-child{background:#FAFAFA;}
 tbody tr:hover td.td-actions{background:#F8FBFF;}
-.td-actions{display:flex;align-items:center;gap:8px;}
+tbody tr.row-active td.td-actions{background:var(--primary-light);}
 .pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
 .pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
 .page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
 .page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
-.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:flex;align-items:center;justify-content:center;}
-.modal{background:#fff;border-radius:8px;width:680px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
-.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e8e8e8;}
-.modal-title{font-size:16px;font-weight:600;color:#262626;}
-.modal-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}
-.modal-close:hover{color:#262626;}
-.modal-body{padding:24px;}
-.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e8e8e8;}
+/* 弹窗 */
+.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
+.modal-mask.show{display:flex;}
+.modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
+.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
+.modal__title{font-size:var(--font-lg);font-weight:600;}
+.modal__close{width:32px;height:32px;border:none;background:none;font-size:18px;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
+.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
+.modal__body{padding:24px;overflow-y:auto;flex:1;}
+.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
+.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
+.form-item{display:flex;flex-direction:column;gap:6px;}
+.form-item.full{grid-column:1/-1;}
+.form-item__label{font-size:var(--font-sm);color:var(--text-secondary);}
+.form-item__label .required{color:var(--danger);margin-left:2px;}
+.form-item input,.form-item select,.form-item textarea{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
+.form-item input:focus,.form-item select:focus{border-color:var(--primary);}
+.form-item select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
 /* 视频弹窗 */
-.video-modal{width:720px;}
+.modal--video{width:720px;}
 .video-placeholder{width:100%;height:400px;background:#000;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:12px;}
 .video-placeholder__icon{font-size:48px;opacity:0.8;}
 .video-placeholder__text{font-size:var(--font-sm);opacity:0.7;}
 .video-info{display:flex;gap:24px;margin-top:16px;padding:12px 0;border-top:1px solid var(--border);}
 .video-info__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
 .video-info__item span{color:var(--text-primary);font-weight:500;}
-.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
-.form-item{display:flex;flex-direction:column;gap:4px;}
-.form-item.full{grid-column:1/-1;}
-.form-item label{font-size:13px;color:#8c8c8c;}
-.form-item label .required{color:#ff4d4f;margin-left:2px;}
-.form-item input,.form-item select,.form-item textarea{height:36px;padding:0 12px;border:1px solid #e8e8e8;border-radius:4px;font-size:13px;outline:none;}
-.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1890FF;}
-.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
 </style>
 </head>
 <body>
@@ -132,172 +183,236 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
   <a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
 </aside>
 <main class="main">
+  <!-- 页面标题行 + 食堂切换 -->
+  <div class="page-header">
+    <div class="page-header__left">
+      <span class="page-header__title">净菜进柜</span>
+      <span class="page-header__desc">2026-05-20 · 数据实时更新</span>
+    </div>
+    <div class="page-header__right">
+      <span class="page-header__label">当前食堂</span>
+      <select class="canteen-select">
+        <option value="1">一食堂（东区）</option>
+        <option value="2">二食堂（西区）</option>
+        <option value="3">三食堂（南区）</option>
+      </select>
+    </div>
+  </div>
+  <!-- 统计卡片 -->
   <div class="stats-row">
     <div class="stat-card"><div class="stat-card__icon blue">🗄️</div><div class="stat-card__info"><div class="stat-card__value">8</div><div class="stat-card__label">智能柜总数</div></div></div>
     <div class="stat-card"><div class="stat-card__icon green">✅</div><div class="stat-card__info"><div class="stat-card__value">7</div><div class="stat-card__label">在线正常</div></div></div>
-    <div class="stat-card"><div class="stat-card__icon orange">📦</div><div class="stat-card__info"><div class="stat-card__value">48/64</div><div class="stat-card__label">已存放格口</div></div></div>
+    <div class="stat-card"><div class="stat-card__icon orange">📦</div><div class="stat-card__info"><div class="stat-card__value">6/10</div><div class="stat-card__label">已占用格口</div></div></div>
     <div class="stat-card"><div class="stat-card__icon red">⚠️</div><div class="stat-card__info"><div class="stat-card__value">1</div><div class="stat-card__label">异常告警</div></div></div>
   </div>
-  <div class="page-tabs">
-    <div class="page-tab active" onclick="switchTab(0)">🥬 食材净菜</div>
-    <div class="page-tab" onclick="switchTab(1)">🍱 餐品净菜包</div>
-    <div class="page-tab" onclick="switchTab(2)">🗄️ 智能柜总览</div>
-  </div>
-  <!-- Tab1: 食材净菜 -->
-  <div class="tab-panel active">
-    <div class="filter-bar">
-      <div class="filter-item"><label>智能柜编号</label><select class="filter-select"><option>全部</option></select></div>
-      <div class="filter-item"><label>食材名称</label><input class="filter-input" placeholder="请输入食材名称"></div>
-      <div class="filter-item"><label>格口状态</label><select class="filter-select"><option>全部</option><option>存放中</option><option>临期预警</option><option>温度超标</option><option>空置</option></select></div>
-      <div class="filter-item"><label>区域</label><select class="filter-select"><option>全部</option><option>A区</option><option>B区</option><option>C区</option></select></div>
-      <button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
-    </div>
-    <div class="action-bar"><button class="btn btn-primary" onclick="openModal()">➕ 新增存放记录</button><button class="btn btn-default">🔄 刷新状态</button></div>
-    <div class="table-card">
-      <div class="table-card__header"><div class="table-card__title">食材净菜</div></div>
-      <div class="table-card__content"><table>
-        <thead><tr><th>格口编号</th><th>所属智能柜</th><th>溯源码</th><th>存放净菜名称</th><th>订单量(kg)</th><th>实收量(kg)</th><th>差异量(kg)</th><th>校验结果</th><th>当前温度(℃)</th><th>保质剩余时间</th><th>存入时间</th><th>状态</th><th>操作</th></tr></thead>
-        <tbody>
-          <tr><td>A1-01</td><td>A区智能柜-1号</td><td>NC-CAB-BOCA-20260422-01</td><td>净菠菜</td><td>12.5</td><td>12.5</td><td>0.0</td><td><span class="tag tag-green">正常</span></td><td>4.2</td><td>剩余32h</td><td>2026-04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A1-01','净菠菜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>A1-02</td><td>A区智能柜-1号</td><td>NC-CAB-HLUB-20260422-01</td><td>净胡萝卜</td><td>18.0</td><td>17.8</td><td>-0.2</td><td><span class="tag tag-orange">轻微差异</span></td><td>4.1</td><td>剩余46h</td><td>2026-04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>A1-03</td><td>A区智能柜-1号</td><td>NC-CAB-XGUO-20260422-01</td><td>净香菇</td><td>9.0</td><td>8.6</td><td>-0.4</td><td><span class="tag tag-green">正常</span></td><td>4.3</td><td>剩余28h</td><td>2026-04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A1-03','净香菇')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>B2-01</td><td>B区智能柜-2号</td><td>NC-CAB-BCAI-20260422-01</td><td>净白菜</td><td>22.0</td><td>22.0</td><td>0.0</td><td><span class="tag tag-green">正常</span></td><td>7.8</td><td>剩余40h</td><td>2026-04-22 08:50</td><td><span class="tag tag-red">温度超标</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('B2-01','净白菜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>C1-01</td><td>C区智能柜-1号</td><td>NC-CAB-XLHU-20260422-01</td><td>净西兰花</td><td>10.0</td><td>10.0</td><td>0.0</td><td><span class="tag tag-green">正常</span></td><td>4.0</td><td>剩余50h</td><td>2026-04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('C1-01','净西兰花')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>A2-01</td><td>A区智能柜-2号</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空置</span></td><td class="td-actions">—</td></tr>
-        </tbody>
-      </table></div>
-    </div>
-  </div>
-  <!-- Tab2: 餐品净菜包 -->
-  <div class="tab-panel">
-    <div class="filter-bar">
-      <div class="filter-item"><label>智能柜编号</label><select class="filter-select"><option>全部</option></select></div>
-      <div class="filter-item"><label>绑定菜品</label><input class="filter-input" placeholder="请输入菜品名称"></div>
-      <div class="filter-item"><label>格口状态</label><select class="filter-select"><option>全部</option><option>存放中</option><option>空置</option></select></div>
-      <div class="filter-item"><label>区域</label><select class="filter-select"><option>全部</option><option>A区</option><option>B区</option><option>C区</option></select></div>
-      <button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
-    </div>
-    <div class="action-bar"><button class="btn btn-primary">➕ 新增存放记录</button><button class="btn btn-default">🔄 刷新状态</button></div>
-    <div class="table-card">
-      <div class="table-card__header"><div class="table-card__title">餐品净菜包</div></div>
-      <div class="table-card__content"><table>
-        <thead><tr><th>格口编号</th><th>所属智能柜</th><th>溯源码</th><th>绑定菜品</th><th>规格</th><th>包数</th><th>总重量(g)</th><th>校验结果</th><th>当前温度(℃)</th><th>保质剩余时间</th><th>存入时间</th><th>状态</th><th>操作</th></tr></thead>
-        <tbody>
-          <tr><td>A3-01</td><td>A区智能柜-1号</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份</span></td><td>12包</td><td>2,400</td><td><span class="tag tag-green">正常</span></td><td>3.8</td><td>剩余44h</td><td>2026-04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A3-01','宫保鸡丁')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>A3-02</td><td>A区智能柜-1号</td><td>PKG-DH-003</td><td>清蒸鱼</td><td><span class="tag tag-green">标准份</span></td><td>8包</td><td>2,000</td><td><span class="tag tag-green">正常</span></td><td>3.5</td><td>剩余44h</td><td>2026-04-22 10:35</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A3-02','清蒸鱼')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>B3-01</td><td>B区智能柜-1号</td><td>PKG-DH-004</td><td>蒜蓉菠菜</td><td><span class="tag tag-green">标准份</span></td><td>10包</td><td>1,800</td><td><span class="tag tag-green">正常</span></td><td>4.0</td><td>剩余44h</td><td>2026-04-22 10:50</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('B3-01','蒜蓉菠菜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>B3-02</td><td>B区智能柜-1号</td><td>PKG-DH-005</td><td>炒胡萝卜</td><td><span class="tag tag-blue">大份</span></td><td>6包</td><td>1,920</td><td><span class="tag tag-orange">轻微差异</span></td><td>4.2</td><td>剩余44h</td><td>2026-04-22 11:05</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('B3-02','炒胡萝卜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>C2-01</td><td>C区智能柜-1号</td><td>PKG-DH-002</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份</span></td><td>12包</td><td>2,400</td><td><span class="tag tag-green">正常</span></td><td>3.8</td><td>剩余44h</td><td>2026-04-22 10:21</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('C2-01','宫保鸡丁')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>A4-01</td><td>A区智能柜-2号</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空置</span></td><td class="td-actions">—</td></tr>
-        </tbody>
-      </table></div>
-    </div>
-  </div>
-  <!-- Tab3: 智能柜总览 -->
-  <div class="tab-panel">
-    <div class="filter-bar">
-      <div class="filter-item"><label>智能柜编号</label><select class="filter-select"><option>全部</option></select></div>
-      <div class="filter-item"><label>区域</label><select class="filter-select"><option>全部</option><option>A区</option><option>B区</option><option>C区</option></select></div>
-      <div class="filter-item"><label>状态</label><select class="filter-select"><option>全部</option><option>在线</option><option>告警</option><option>离线</option></select></div>
-      <button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
-    </div>
-    <div class="action-bar"><button class="btn btn-primary">🔄 刷新状态</button><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
-    <div class="table-card">
-      <div class="table-card__header"><div class="table-card__title">智能柜总览</div></div>
-      <div class="table-card__content"><table>
-        <thead><tr><th>智能柜编号</th><th>名称</th><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>CAB-A1</td><td>A区智能柜-1号</td><td>A区厨房入口</td><td>8</td><td>3</td><td>2</td><td>3</td><td>4.1</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-A1','A区智能柜-1号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>CAB-A2</td><td>A区智能柜-2号</td><td>A区备餐间</td><td>8</td><td>0</td><td>0</td><td>8</td><td>4.2</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-A2','A区智能柜-2号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>CAB-B1</td><td>B区智能柜-1号</td><td>B区厨房入口</td><td>8</td><td>0</td><td>2</td><td>6</td><td>4.0</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-B1','B区智能柜-1号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>CAB-B2</td><td>B区智能柜-2号</td><td>B区备餐间</td><td>8</td><td>2</td><td>0</td><td>6</td><td>7.8</td><td><span class="tag tag-red">超标</span></td><td><span class="tag tag-red">告警</span></td><td>2026-04-22 11:48</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-B2','B区智能柜-2号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>CAB-C1</td><td>C区智能柜-1号</td><td>C区厨房入口</td><td>8</td><td>1</td><td>1</td><td>6</td><td>4.0</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-C1','C区智能柜-1号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-          <tr><td>CAB-C2</td><td>C区智能柜-2号</td><td>C区备餐间</td><td>8</td><td>0</td><td>0</td><td>8</td><td>4.3</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-gray">离线</span></td><td>2026-04-22 09:12</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-C2','C区智能柜-2号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
-        </tbody>
-      </table></div>
-    </div>
-  </div>
-</main>
-<div class="modal-overlay" id="modalOverlay" style="display:none;">
-  <div class="modal">
-    <div class="modal-header">
-      <span class="modal-title">新增存放记录</span>
-      <span class="modal-close" onclick="closeModal()">&times;</span>
-    </div>
-    <div class="modal-body">
-      <div class="form-grid">
-        <div class="form-item">
-          <label>所属智能柜<span class="required">*</span></label>
-          <select><option>请选择</option><option>A区智能柜-1号</option><option>A区智能柜-2号</option><option>B区智能柜-1号</option><option>B区智能柜-2号</option><option>C区智能柜-1号</option></select>
+  <!-- 左右分栏 -->
+  <div class="split-layout">
+    <!-- 左侧：智能货柜可视化 -->
+    <div class="split-layout__left">
+      <div class="cabinet-visual">
+        <div class="cabinet-visual__header">
+          <select class="cabinet-header-select">
+            <option>A区智能柜-1号</option>
+            <option>A区智能柜-2号</option>
+            <option>B区智能柜-1号</option>
+            <option>B区智能柜-2号</option>
+            <option>C区智能柜-1号</option>
+          </select>
+          <div style="display:flex;align-items:center;gap:8px;">
+            <span class="cabinet-visual__status">4.1℃ · <span style="color:var(--success)">在线</span></span>
+            <button class="btn-icon" title="刷新数据"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13.65 2.35A7.96 7.96 0 008 0a8 8 0 108 8h-2a6 6 0 11-1.76-4.24L10 6h6V0l-2.35 2.35z" fill="currentColor"/></svg></button>
+          </div>
         </div>
-        <div class="form-item">
-          <label>溯源码（关联净菜入库）</label>
-          <input type="text" placeholder="请输入溯源码">
+        <div class="cabinet-visual__body">
+          <div class="cabinet-grid">
+            <!-- 第1层 -->
+            <div class="cabinet-slot occupied active" data-slot="0" onclick="selectSlot(0)">
+              <div class="cabinet-slot__badge green"></div>
+              <div class="cabinet-slot__id">A1-01</div>
+              <div class="cabinet-slot__name">土豆（土豆丝）</div>
+              <div class="cabinet-slot__remain">10.2kg</div>
+              <div class="cabinet-slot__expire">04-23 到期</div>
+            </div>
+            <div class="cabinet-slot occupied" data-slot="1" onclick="selectSlot(1)">
+              <div class="cabinet-slot__badge green"></div>
+              <div class="cabinet-slot__id">A1-02</div>
+              <div class="cabinet-slot__name">净胡萝卜</div>
+              <div class="cabinet-slot__remain">15.6kg</div>
+              <div class="cabinet-slot__expire">04-24 到期</div>
+            </div>
+            <!-- 第2层 -->
+            <div class="cabinet-slot occupied warning" data-slot="2" onclick="selectSlot(2)">
+              <div class="cabinet-slot__badge orange"></div>
+              <div class="cabinet-slot__id">A1-03</div>
+              <div class="cabinet-slot__name">净香菇</div>
+              <div class="cabinet-slot__remain">6.8kg</div>
+              <div class="cabinet-slot__expire" style="color:var(--warning)">04-22 即将到期</div>
+            </div>
+            <div class="cabinet-slot occupied" data-slot="3" onclick="selectSlot(3)">
+              <div class="cabinet-slot__badge green"></div>
+              <div class="cabinet-slot__id">A1-04</div>
+              <div class="cabinet-slot__name">净西兰花</div>
+              <div class="cabinet-slot__remain">8.5kg</div>
+              <div class="cabinet-slot__expire">04-24 到期</div>
+            </div>
+            <!-- 第3层 -->
+            <div class="cabinet-slot occupied" data-slot="4" onclick="selectSlot(4)">
+              <div class="cabinet-slot__badge green"></div>
+              <div class="cabinet-slot__id">A1-05</div>
+              <div class="cabinet-slot__name">宫保鸡丁</div>
+              <div class="cabinet-slot__remain">5.4kg</div>
+              <div class="cabinet-slot__expire">04-24 到期</div>
+            </div>
+            <div class="cabinet-slot occupied alert" data-slot="5" onclick="selectSlot(5)">
+              <div class="cabinet-slot__badge red"></div>
+              <div class="cabinet-slot__id">A1-06</div>
+              <div class="cabinet-slot__name">净白菜</div>
+              <div class="cabinet-slot__remain">18.0kg</div>
+              <div class="cabinet-slot__expire" style="color:var(--danger)">04-12 已过期</div>
+            </div>
+            <!-- 第4层 -->
+            <div class="cabinet-slot cabinet-slot--empty" data-slot="6" onclick="selectSlot(6)">
+              <div class="cabinet-slot__id">A1-07</div>
+              <div class="cabinet-slot__name">空闲</div>
+            </div>
+            <div class="cabinet-slot cabinet-slot--empty" data-slot="7" onclick="selectSlot(7)">
+              <div class="cabinet-slot__id">A1-08</div>
+              <div class="cabinet-slot__name">空闲</div>
+            </div>
+            <!-- 第5层 -->
+            <div class="cabinet-slot cabinet-slot--empty" data-slot="8" onclick="selectSlot(8)">
+              <div class="cabinet-slot__id">A1-09</div>
+              <div class="cabinet-slot__name">空闲</div>
+            </div>
+            <div class="cabinet-slot cabinet-slot--empty" data-slot="9" onclick="selectSlot(9)">
+              <div class="cabinet-slot__id">A1-10</div>
+              <div class="cabinet-slot__name">空闲</div>
+            </div>
+          </div>
         </div>
-        <div class="form-item">
-          <label>存放净菜名称<span class="required">*</span></label>
-          <input type="text" placeholder="请输入净菜名称">
-        </div>
-        <div class="form-item">
-          <label>订单量(kg)<span class="required">*</span></label>
-          <input type="number" placeholder="请输入订单量">
-        </div>
-        <div class="form-item">
-          <label>实收量(kg)<span class="required">*</span></label>
-          <input type="number" placeholder="请输入实收量">
-        </div>
-        <div class="form-item">
-          <label>存入时间</label>
-          <input type="datetime-local">
+        <div class="cabinet-legend">
+          <div class="cabinet-legend__item"><div class="cabinet-legend__dot idle"></div>空闲</div>
+          <div class="cabinet-legend__item"><div class="cabinet-legend__dot storing"></div>储物中</div>
+          <div class="cabinet-legend__item"><div class="cabinet-legend__dot warn"></div>临期预警</div>
+          <div class="cabinet-legend__item"><div class="cabinet-legend__dot err"></div>过期预警</div>
         </div>
       </div>
     </div>
-    <div class="modal-footer">
-      <button class="btn btn-default" onclick="closeModal()">取消</button>
-      <button class="btn btn-primary">确定</button>
+    <!-- 右侧：物品明细表格 -->
+    <div class="split-layout__right">
+      <div class="table-card">
+        <div class="table-card__header">
+          <div class="table-card__title">格口存放明细</div>
+          <div class="table-card__actions">
+            <button class="btn btn-primary" onclick="openModal('modal-store')">➕ 存入净菜</button>
+          </div>
+        </div>
+        <div class="table-card__content">
+          <table>
+            <thead><tr><th>格口</th><th>溯源码</th><th>存放净菜</th><th>类型</th><th>初始重量(kg)</th><th>当前余量(kg)</th><th>操作人</th><th>温度(℃)</th><th>保质剩余</th><th>存入时间</th><th>状态</th><th>操作</th></tr></thead>
+            <tbody id="detailTable">
+              <tr class="row-active" data-slot="0"><td>A1-01</td><td>NC-CAB-BOCA-0422-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-green">🥬 净菜</span></td><td>12.5</td><td>10.2</td><td>张厨师</td><td>4.2</td><td>剩余32h</td><td>04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-01','土豆')">视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
+              <tr data-slot="1"><td>A1-02</td><td>NC-CAB-HLUB-0422-01</td><td>净胡萝卜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>18.0</td><td>15.6</td><td>李主管</td><td>4.1</td><td>剩余46h</td><td>04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
+              <tr data-slot="2"><td>A1-03</td><td>NC-CAB-XGUO-0422-01</td><td>净香菇</td><td><span class="tag tag-green">🥬 净菜</span></td><td>9.0</td><td>6.8</td><td>王厨师</td><td>4.3</td><td>剩余6h</td><td>04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-03','净香菇')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
+              <tr data-slot="3"><td>A1-04</td><td>NC-CAB-XLHU-0422-01</td><td>净西兰花</td><td><span class="tag tag-green">🥬 净菜</span></td><td>10.0</td><td>8.5</td><td>张厨师</td><td>4.0</td><td>剩余50h</td><td>04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-04','净西兰花')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
+              <tr data-slot="4"><td>A1-05</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-orange">🍱 餐品包</span></td><td>6.0</td><td>5.4</td><td>李主管</td><td>3.8</td><td>剩余44h</td><td>04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-05','宫保鸡丁')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
+              <tr data-slot="5"><td>A1-06</td><td>NC-CAB-BCAI-0422-01</td><td>净白菜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>22.0</td><td>18.0</td><td>王厨师</td><td>7.8</td><td>剩余40h</td><td>04-22 08:50</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-06','净白菜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
+              <tr data-slot="6"><td>A1-07</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
+              <tr data-slot="7"><td>A1-08</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
+              <tr data-slot="8"><td>A1-09</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
+              <tr data-slot="9"><td>A1-10</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+<!-- 弹窗：存入净菜 -->
+<div class="modal-mask" id="modal-store">
+  <div class="modal">
+    <div class="modal__header">
+      <div class="modal__title">存入净菜</div>
+      <button class="modal__close" onclick="closeModal('modal-store')">✕</button>
+    </div>
+    <div class="modal__body">
+      <div class="form-grid">
+        <div class="form-item">
+          <div class="form-item__label">目标格口<span class="required">*</span></div>
+          <select><option>请选择空闲格口</option><option>A1-07</option><option>A1-08</option><option>A1-09</option><option>A1-10</option></select>
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">溯源码</div>
+          <input type="text" placeholder="输入溯源码可带出净菜信息">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">类型<span class="required">*</span></div>
+          <select><option value="">请选择</option><option>净菜</option><option>餐品包</option></select>
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">存放净菜名称<span class="required">*</span></div>
+          <select><option value="">请选择</option><option>土豆丝</option><option>净香菇</option></select>
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">初始重量(kg)<span class="required">*</span></div>
+          <input type="number" placeholder="请输入初始重量" min="0.1" step="0.1">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">操作人<span class="required">*</span></div>
+          <input type="text" placeholder="请输入操作人姓名">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">存入时间</div>
+          <input type="datetime-local">
+        </div>
+        <div class="form-item">
+          <div class="form-item__label">备注</div>
+          <input placeholder="如有特殊说明请备注">
+        </div>
+      </div>
+    </div>
+    <div class="modal__footer">
+      <button class="btn btn-default" onclick="closeModal('modal-store')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-store')">确认存入</button>
     </div>
   </div>
 </div>
 <script>
-function switchTab(idx){
-  document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
-  document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
+/* 弹窗开关 */
+function openModal(id){document.getElementById(id).classList.add('show');}
+function closeModal(id){document.getElementById(id).classList.remove('show');}
+document.querySelectorAll('.modal-mask').forEach(function(m){m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});});
+
+/* 格口点击 → 左侧高亮 + 右侧表格行高亮联动 */
+function selectSlot(idx){
+  /* 左侧格口高亮 */
+  document.querySelectorAll('.cabinet-slot').forEach(function(s){s.classList.remove('active');});
+  var slot=document.querySelector('.cabinet-slot[data-slot="'+idx+'"]');
+  if(slot) slot.classList.add('active');
+  /* 右侧表格行高亮 */
+  document.querySelectorAll('#detailTable tr').forEach(function(r){r.classList.remove('row-active');});
+  var row=document.querySelector('#detailTable tr[data-slot="'+idx+'"]');
+  if(row){row.classList.add('row-active');row.scrollIntoView({behavior:'smooth',block:'center'});}
 }
-function openModal(){document.getElementById('modalOverlay').style.display='flex';}
-function closeModal(){document.getElementById('modalOverlay').style.display='none';}
-document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
+
+/* 右侧表格行点击 → 联动左侧格口高亮 */
+document.querySelectorAll('#detailTable tr').forEach(function(row){
+  row.addEventListener('click',function(){
+    var idx=this.getAttribute('data-slot');
+    if(idx!==null) selectSlot(parseInt(idx));
+  });
+});
 
 /* 查看视频弹窗 */
-function showVideo(code, name) {
-  const overlay = document.createElement('div');
-  overlay.className = 'modal-overlay';
-  overlay.id = 'videoOverlay';
-  overlay.innerHTML = `<div class="modal video-modal">
-    <div class="modal-header">
-      <span class="modal-title">实时监控 — ${name}（${code}）</span>
-      <span class="modal-close" onclick="closeVideoModal()">&times;</span>
-    </div>
-    <div class="modal-body">
-      <div class="video-placeholder">
-        <div class="video-placeholder__icon">📹</div>
-        <div class="video-placeholder__text">实时视频监控画面</div>
-        <div class="video-placeholder__text">${code} · ${name}</div>
-      </div>
-      <div class="video-info">
-        <div class="video-info__item">设备编号：<span>${code}</span></div>
-        <div class="video-info__item">监控对象：<span>${name}</span></div>
-        <div class="video-info__item">状态：<span style="color:#52C41A">在线</span></div>
-        <div class="video-info__item">分辨率：<span>1080P</span></div>
-      </div>
-    </div>
-  </div>`;
-  overlay.addEventListener('click', e => { if (e.target === overlay) closeVideoModal(); });
-  document.body.appendChild(overlay);
-}
-function closeVideoModal() {
-  const o = document.getElementById('videoOverlay');
-  if (o) o.remove();
+function showVideo(code,name){
+  var mask=document.createElement('div');
+  mask.className='modal-mask show';
+  mask.id='videoModal';
+  mask.innerHTML='<div class="modal modal--video"><div class="modal__header"><div class="modal__title">实时监控 — '+name+'（'+code+'）</div><button class="modal__close" onclick="closeVideoModal()">✕</button></div><div class="modal__body"><div class="video-placeholder"><div class="video-placeholder__icon">📹</div><div class="video-placeholder__text">实时视频监控画面</div><div class="video-placeholder__text">'+code+' · '+name+'</div></div><div class="video-info"><div class="video-info__item">设备编号：<span>'+code+'</span></div><div class="video-info__item">监控对象：<span>'+name+'</span></div><div class="video-info__item">状态：<span style="color:var(--success)">在线</span></div><div class="video-info__item">分辨率：<span>1080P</span></div></div></div></div>';
+  mask.addEventListener('click',function(e){if(e.target===mask)closeVideoModal();});
+  document.body.appendChild(mask);
 }
+function closeVideoModal(){var m=document.getElementById('videoModal');if(m)m.remove();}
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/web-admin/nutrition/prod-qc-daily.html b/web-admin/nutrition/prod-qc-daily.html
index 85891fb..7108f39 100644
--- a/web-admin/nutrition/prod-qc-daily.html
+++ b/web-admin/nutrition/prod-qc-daily.html
@@ -105,8 +105,89 @@ tbody tr:hover{background:#F8FBFF;}
 .energy-card__value{font-size:var(--font-xxl);font-weight:700;margin-bottom:8px;}
 .energy-card__row{display:flex;justify-content:space-between;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:4px;}
 .energy-card__hint{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
+/* 录入按钮 */
+.energy-entry-btn{position:absolute;top:12px;right:16px;font-size:var(--font-xs);color:var(--primary);cursor:pointer;z-index:3;padding:2px 8px;border-radius:var(--radius-sm);transition:all .15s;user-select:none;}
+.energy-entry-btn:hover{background:var(--primary-light);}
+/* 编辑态 */
+.energy-edit-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
+.energy-edit-row label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;min-width:60px;}
+.energy-edit-input{width:120px;height:32px;border:1px solid var(--primary);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
+.energy-edit-input:focus{box-shadow:0 0 0 2px rgba(24,144,255,0.15);}
+.energy-edit-unit{font-size:var(--font-sm);color:var(--text-secondary);}
+.energy-edit-actions{display:flex;gap:6px;margin-top:4px;}
+.btn-sm{height:28px;padding:0 12px;font-size:var(--font-xs);}
 .energy-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;border-bottom:1px solid var(--border);}
 .energy-header__info{font-size:var(--font-sm);color:var(--text-secondary);}
+/* 页面标题行 */
+.page-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
+.page-header__left{display:flex;align-items:baseline;gap:12px;}
+.page-header__title{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
+.page-header__desc{font-size:var(--font-sm);color:var(--text-placeholder);}
+.page-header__right{display:flex;align-items:center;gap:12px;}
+.page-header__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
+.canteen-select{height:40px;border:2px solid var(--primary);border-radius:var(--radius-md);padding:0 36px 0 14px;font-size:var(--font-base);color:var(--primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231890FF'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;min-width:160px;font-weight:600;transition:all .2s;}
+.canteen-select:hover{background-color:var(--primary-light);}
+.canteen-select:focus{box-shadow:0 0 0 3px rgba(24,144,255,0.15);}
+/* 摄像头卡片标题行右侧操作组 */
+.camera-card__actions{display:inline-flex;align-items:center;gap:6px;}
+.btn-replay{height:28px;padding:0 10px;border-radius:var(--radius-sm);font-size:var(--font-xs);cursor:pointer;border:1px solid var(--primary);background:#fff;color:var(--primary);display:inline-flex;align-items:center;gap:4px;transition:all .15s;}
+.btn-replay:hover{background:var(--primary);color:#fff;}
+/* 回放弹窗 */
+.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:200;align-items:center;justify-content:center;}
+.modal-overlay.show{display:flex;}
+.playback-modal{background:#fff;border-radius:var(--radius-lg);width:960px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
+.playback-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
+.playback-modal__title{font-size:var(--font-lg);font-weight:700;display:flex;align-items:center;gap:8px;}
+.playback-modal__title .tag{font-size:var(--font-xs);}
+.playback-modal__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .15s;}
+.playback-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
+/* 播放器区域 */
+.playback-player{background:#1a1a1a;height:360px;display:flex;align-items:center;justify-content:center;position:relative;color:#555;font-size:var(--font-lg);}
+.playback-player__time{position:absolute;top:12px;left:16px;color:rgba(255,255,255,0.8);font-size:var(--font-sm);font-family:monospace;background:rgba(0,0,0,0.5);padding:4px 10px;border-radius:var(--radius-sm);}
+.playback-player__cam{position:absolute;top:12px;right:16px;color:rgba(255,255,255,0.6);font-size:var(--font-xs);background:rgba(0,0,0,0.5);padding:4px 10px;border-radius:var(--radius-sm);}
+/* 播放控制条 */
+.playback-controls{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#2a2a2a;color:#fff;}
+.ctrl-btn{width:36px;height:36px;border:none;background:rgba(255,255,255,0.1);color:#fff;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s;}
+.ctrl-btn:hover{background:rgba(255,255,255,0.25);}
+.ctrl-btn.active{background:var(--primary);}
+.ctrl-speed{font-size:var(--font-xs);color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;border:none;transition:all .15s;}
+.ctrl-speed:hover,.ctrl-speed.active{background:var(--primary);color:#fff;}
+.ctrl-time{font-size:var(--font-sm);color:rgba(255,255,255,0.7);font-family:monospace;margin-left:auto;}
+/* 时间轴 */
+.playback-timeline{padding:16px 24px;background:#fff;border-bottom:1px solid var(--border);}
+.timeline-label{display:flex;justify-content:space-between;font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:6px;}
+.timeline-track{position:relative;height:32px;background:#f0f0f0;border-radius:4px;cursor:pointer;overflow:hidden;}
+.timeline-track__fill{height:100%;width:42%;background:linear-gradient(90deg,var(--primary-light),var(--primary-light));border-radius:4px;position:relative;}
+.timeline-track__cursor{position:absolute;top:-2px;right:-2px;width:4px;height:36px;background:var(--primary);border-radius:2px;box-shadow:0 0 6px rgba(24,144,255,0.4);}
+.timeline-track__mark{position:absolute;top:0;height:100%;width:3px;background:var(--danger);opacity:0.7;border-radius:1px;}
+.timeline-hours{display:flex;justify-content:space-between;font-size:10px;color:var(--text-placeholder);margin-top:4px;padding:0 2px;}
+/* 操作按钮行 */
+.playback-actions{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--border);}
+.playback-actions .btn{height:32px;font-size:var(--font-xs);}
+/* 分时段监控列表 */
+.playback-segments{padding:0 24px 20px;}
+.playback-segments__title{font-size:var(--font-sm);font-weight:600;padding:16px 0 10px;color:var(--text-primary);}
+.segment-table{width:100%;border-collapse:collapse;}
+.segment-table th{background:#FAFAFA;padding:8px 12px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
+.segment-table td{padding:8px 12px;font-size:var(--font-xs);color:var(--text-primary);border-bottom:1px solid var(--border);}
+.segment-table tr:last-child td{border-bottom:none;}
+.segment-table tr:hover{background:#F8FBFF;}
+.segment-table .link{font-size:var(--font-xs);}
+/* 通用表单弹窗 */
+.form-modal{background:#fff;border-radius:var(--radius-lg);width:640px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
+.form-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
+.form-modal__title{font-size:var(--font-lg);font-weight:700;}
+.form-modal__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .15s;}
+.form-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
+.form-modal__body{padding:24px;}
+.form-row{display:flex;gap:16px;margin-bottom:16px;}
+.form-group{flex:1;display:flex;flex-direction:column;gap:6px;}
+.form-group label{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;}
+.form-group input,.form-group select{height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
+.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.1);}
+.form-group .upload-area{height:80px;border:2px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;transition:all .15s;}
+.form-group .upload-area:hover{border-color:var(--primary);color:var(--primary);}
+.form-modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
 /* 操作列固定右侧 */
 thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
 thead th:last-child{background:#FAFAFA;}
@@ -152,6 +233,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
 
 <!-- 主内容 -->
 <main class="main">
+  <!-- 页面标题行 + 食堂切换 -->
+  <div class="page-header">
+    <div class="page-header__left">
+      <span class="page-header__title">食安监控</span>
+      <span class="page-header__desc">2026-05-19 · 数据实时更新</span>
+    </div>
+    <div class="page-header__right">
+      <span class="page-header__label">当前食堂</span>
+      <select class="canteen-select" onchange="switchCanteen(this.value)">
+        <option value="1">一食堂（东区）</option>
+        <option value="2">二食堂（西区）</option>
+        <option value="3">三食堂（北区）</option>
+      </select>
+    </div>
+  </div>
+
   <!-- 统计卡片 -->
   <div class="stats-row">
     <div class="stat-card"><div class="stat-card__icon green">📹</div><div class="stat-card__info"><div class="stat-card__value">17台</div><div class="stat-card__label">摄像头在线</div></div></div>
@@ -163,10 +260,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
   <!-- Tab 切换栏 -->
   <div class="page-tabs">
     <div class="page-tab active" onclick="switchTab(0)">📹 食安视频</div>
-    <div class="page-tab" onclick="switchTab(1)">🦺 生产安全</div>
-    <div class="page-tab" onclick="switchTab(2)">🧪 餐品留样</div>
-    <div class="page-tab" onclick="switchTab(3)">🪪 健康证管理</div>
-    <div class="page-tab" onclick="switchTab(4)">⚡ 水电气表</div>
+    <div class="page-tab" onclick="switchTab(1)">📋 违规记录</div>
+    <div class="page-tab" onclick="switchTab(2)">🦺 生产安全</div>
+    <div class="page-tab" onclick="switchTab(3)">🧪 餐品留样</div>
+    <div class="page-tab" onclick="switchTab(4)">🪪 健康证管理</div>
+    <div class="page-tab" onclick="switchTab(5)">⚡ 水电气表</div>
   </div>
 
   <!-- Tab1: 食安视频 -->
@@ -174,49 +272,65 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     <div class="camera-grid">
       <div class="camera-card">
         <div class="camera-card__video"><span>📹 实时画面</span><span class="alarm-badge">⚠ 告警</span></div>
-        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-01</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">炒菜区-1号位</div><div class="camera-card__alarm">⚠ 未戴口罩 · 10:12:36</div></div>
+        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-01</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-A-01','炒菜区-1号位')">▶ 回放</button></span></div><div class="camera-card__location">炒菜区-1号位</div><div class="camera-card__alarm">⚠ 未戴口罩 · 10:12:36</div></div>
       </div>
       <div class="camera-card">
         <div class="camera-card__video"><span>📹 实时画面</span><span class="alarm-badge">⚠ 告警</span></div>
-        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-03</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">分拣区-2号位</div><div class="camera-card__alarm">⚠ 未戴厨师帽 · 10:26:11</div></div>
+        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-03</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-B-03','分拣区-2号位')">▶ 回放</button></span></div><div class="camera-card__location">分拣区-2号位</div><div class="camera-card__alarm">⚠ 未戴厨师帽 · 10:26:11</div></div>
       </div>
       <div class="camera-card">
         <div class="camera-card__video"><span>📹 实时画面</span></div>
-        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-C-02</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">配菜区-1号位</div></div>
+        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-C-02</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-C-02','配菜区-1号位')">▶ 回放</button></span></div><div class="camera-card__location">配菜区-1号位</div></div>
       </div>
       <div class="camera-card">
         <div class="camera-card__video"><span>📹 实时画面</span><span class="alarm-badge">⚠ 告警</span></div>
-        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-04</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">洗手区入口</div><div class="camera-card__alarm">⚠ 未洗手直接操作 · 11:15:20</div></div>
+        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-04</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-A-04','洗手区入口')">▶ 回放</button></span></div><div class="camera-card__location">洗手区入口</div><div class="camera-card__alarm">⚠ 未洗手直接操作 · 11:15:20</div></div>
       </div>
       <div class="camera-card">
         <div class="camera-card__video" style="background:#3a3a3a;"><span>⏸ 离线</span></div>
-        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-01</span><span class="tag tag-gray">离线</span></div><div class="camera-card__location">备餐区-1号位</div></div>
+        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-01</span><span class="camera-card__actions"><span class="tag tag-gray">离线</span><button class="btn-replay" onclick="openPlayback('CAM-B-01','备餐区-1号位')">▶ 回放</button></span></div><div class="camera-card__location">备餐区-1号位</div></div>
       </div>
       <div class="camera-card">
         <div class="camera-card__video"><span>📹 实时画面</span></div>
-        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-D-02</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">出餐口-1号位</div></div>
-      </div>
-    </div>
-    <!-- 违规记录表格 -->
-    <div class="table-card">
-      <div class="table-card__header"><div class="table-card__title">违规记录</div></div>
-      <div class="table-card__content">
-        <table>
-          <thead><tr><th>时间</th><th>摄像头</th><th>位置</th><th>违规类型</th><th>状态</th><th>操作</th></tr></thead>
-          <tbody>
-            <tr><td>2026-04-22 11:15:20</td><td>CAM-A-04</td><td>洗手区入口</td><td>未洗手直接操作</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
-            <tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
-            <tr><td>2026-04-22 10:12:36</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
-            <tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
-            <tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
-            <tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
-          </tbody>
-        </table>
+        <div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-D-02</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-D-02','出餐口-1号位')">▶ 回放</button></span></div><div class="camera-card__location">出餐口-1号位</div></div>
       </div>
     </div>
   </div>
 
-  <!-- Tab2: 生产安全 -->
+  <!-- Tab2: 违规记录（独立Tab） -->
+  <div class="tab-panel">
+    <div class="filter-bar">
+      <div class="filter-item"><label>时间范围</label><input class="filter-input" type="date" value="2026-04-20" style="min-width:140px;"> <span style="margin:0 4px;color:var(--text-placeholder);">至</span> <input class="filter-input" type="date" value="2026-04-22" style="min-width:140px;"></div>
+      <div class="filter-item"><label>摄像头</label><select class="filter-select"><option>全部摄像头</option><option>CAM-A-01</option><option>CAM-A-04</option><option>CAM-B-01</option><option>CAM-B-03</option><option>CAM-C-02</option><option>CAM-D-02</option></select></div>
+      <div class="filter-item"><label>违规类型</label><select class="filter-select"><option>全部</option><option>未戴口罩</option><option>未戴厨师帽</option><option>未洗手直接操作</option><option>未穿工作服</option><option>违规使用手机</option></select></div>
+      <div class="filter-item"><label>处理状态</label><select class="filter-select"><option>全部</option><option>待处理</option><option>已处理</option></select></div>
+      <button class="btn btn-primary">查询</button>
+      <button class="btn btn-default">重置</button>
+    </div>
+    <div class="action-bar"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
+    <div class="table-card">
+      <div class="table-card__header"><div class="table-card__title">违规记录</div><div class="table-card__actions"><span style="font-size:var(--font-sm);color:var(--text-secondary);">共 6 条记录</span></div></div>
+      <div class="table-card__content">
+        <table>
+          <thead><tr><th>时间</th><th>摄像头</th><th>位置</th><th>违规类型</th><th>违规人员</th><th>状态</th><th>操作</th></tr></thead>
+          <tbody>
+            <tr><td>2026-04-22 11:15:20</td><td>CAM-A-04</td><td>洗手区入口</td><td>未洗手直接操作</td><td>张伟</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
+            <tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td>陈刚</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
+            <tr><td>2026-04-22 10:12:36</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>赵敏</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
+            <tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>李娜</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
+            <tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td>王磊</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
+            <tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td>张伟</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="pagination">
+        <span>显示 6 条，共 6 条</span>
+        <button class="page-btn active">1</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tab3: 生产安全 -->
   <div class="tab-panel">
     <div class="filter-bar">
       <div class="filter-item"><label>区域</label><select class="filter-select"><option>全部</option><option>炒菜区</option><option>冷库区</option><option>粗加工间</option><option>备餐区</option><option>洗碗间</option></select></div>
@@ -244,7 +358,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     </div>
   </div>
 
-  <!-- Tab3: 餐品留样 -->
+  <!-- Tab4: 餐品留样 -->
   <div class="tab-panel">
     <div class="filter-bar">
       <div class="filter-item"><label>留样状态</label><select class="filter-select"><option>全部</option><option>留样中</option><option>已销毁</option></select></div>
@@ -252,7 +366,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
       <button class="btn btn-primary">查询</button>
       <button class="btn btn-default">重置</button>
     </div>
-    <div class="action-bar"><button class="btn btn-primary">➕ 新增留样</button></div>
+    <div class="action-bar"><button class="btn btn-primary" onclick="document.getElementById('sampleModal').classList.add('show');document.body.style.overflow='hidden'">➕ 新增留样</button></div>
     <div class="table-card">
       <div class="table-card__header"><div class="table-card__title">餐品留样</div></div>
       <div class="table-card__content">
@@ -275,7 +389,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     </div>
   </div>
 
-  <!-- Tab4: 健康证管理 -->
+  <!-- Tab5: 健康证管理 -->
   <div class="tab-panel">
     <div class="filter-bar">
       <div class="filter-item"><label>姓名/人员编号</label><input class="filter-input" placeholder="请输入姓名或编号"></div>
@@ -284,7 +398,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
       <button class="btn btn-primary">查询</button>
       <button class="btn btn-default">重置</button>
     </div>
-    <div class="action-bar"><button class="btn btn-primary">➕ 新增证件</button><button class="btn btn-default">🔔 发送到期提醒</button></div>
+    <div class="action-bar"><button class="btn btn-primary" onclick="document.getElementById('certModal').classList.add('show');document.body.style.overflow='hidden'">➕ 新增证件</button><button class="btn btn-default">🔔 发送到期提醒</button></div>
     <div class="table-card">
       <div class="table-card__header"><div class="table-card__title">健康证管理</div></div>
       <div class="table-card__content">
@@ -302,41 +416,71 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     </div>
   </div>
 
-  <!-- Tab5: 水电气表 -->
+  <!-- Tab6: 水电气表 -->
   <div class="tab-panel">
-    <div class="action-bar"><button class="btn btn-default">📊 生成能耗日报</button><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
-    <div class="energy-header">
-      <div class="energy-header__info">数据更新时间：2026-05-08 11:42:18 | 今日能耗合计：¥671.6 | 分摊每份餐：¥0.45（共1492份）</div>
-    </div>
     <div class="energy-grid">
-      <div class="energy-card elec">
+      <div class="energy-card elec" id="card-elec">
+        <span class="energy-entry-btn" onclick="toggleEnergyEdit('elec')">✏️ 录入</span>
         <div class="energy-card__header"><span class="energy-card__icon">⚡</span><span class="energy-card__title">电</span><span class="energy-card__meter">表号：EM-A01</span></div>
-        <div class="energy-card__value" style="color:#1677ff;">28734.6 <span style="font-size:var(--font-sm);font-weight:400;">kWh</span></div>
-        <div class="energy-card__row"><span>今日用量</span><span>186 kWh</span></div>
+        <!-- 展示态 -->
+        <div class="energy-card__display" data-type="elec">
+          <div class="energy-card__value" style="color:#1677ff;">28734.6 <span style="font-size:var(--font-sm);font-weight:400;">kWh</span></div>
+          <div class="energy-card__row"><span>今日用量</span><span>186 kWh</span></div>
+        </div>
+        <!-- 编辑态 -->
+        <div class="energy-card__edit" data-type="elec" style="display:none;">
+          <div class="energy-edit-row"><label>当前余量</label><input type="number" class="energy-edit-input" value="28734.6" step="0.1"><span class="energy-edit-unit">kWh</span></div>
+          <div class="energy-edit-row"><label>今日用量</label><input type="number" class="energy-edit-input" value="186" step="0.1"><span class="energy-edit-unit">kWh</span></div>
+          <div class="energy-edit-actions"><button class="btn btn-primary btn-sm" onclick="saveEnergyEdit('elec')">保存</button><button class="btn btn-default btn-sm" onclick="cancelEnergyEdit('elec')">取消</button></div>
+        </div>
         <div class="energy-card__row"><span>今日费用</span><span>¥167.4</span></div>
         <div class="energy-card__row"><span>状态</span><span class="tag tag-green">正常</span></div>
         <div class="energy-card__row"><span>当前功率</span><span>3.2 kW</span></div>
         <div class="energy-card__hint">当前功率正常，较昨日同时段下降 4.2%</div>
       </div>
-      <div class="energy-card water">
+      <div class="energy-card water" id="card-water">
+        <span class="energy-entry-btn" onclick="toggleEnergyEdit('water')">✏️ 录入</span>
         <div class="energy-card__header"><span class="energy-card__icon">💧</span><span class="energy-card__title">水</span><span class="energy-card__meter">表号：WM-A01</span></div>
-        <div class="energy-card__value" style="color:#13c2c2;">12468.3 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
-        <div class="energy-card__row"><span>今日用量</span><span>22 m³</span></div>
+        <!-- 展示态 -->
+        <div class="energy-card__display" data-type="water">
+          <div class="energy-card__value" style="color:#13c2c2;">12468.3 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
+          <div class="energy-card__row"><span>今日用量</span><span>22 m³</span></div>
+        </div>
+        <!-- 编辑态 -->
+        <div class="energy-card__edit" data-type="water" style="display:none;">
+          <div class="energy-edit-row"><label>当前余量</label><input type="number" class="energy-edit-input" value="12468.3" step="0.1"><span class="energy-edit-unit">m³</span></div>
+          <div class="energy-edit-row"><label>今日用量</label><input type="number" class="energy-edit-input" value="22" step="0.1"><span class="energy-edit-unit">m³</span></div>
+          <div class="energy-edit-actions"><button class="btn btn-primary btn-sm" onclick="saveEnergyEdit('water')">保存</button><button class="btn btn-default btn-sm" onclick="cancelEnergyEdit('water')">取消</button></div>
+        </div>
         <div class="energy-card__row"><span>今日费用</span><span>¥79.2</span></div>
         <div class="energy-card__row"><span>状态</span><span class="tag tag-green">正常</span></div>
         <div class="energy-card__row"><span>当前流量</span><span>1.8 L/min</span></div>
         <div class="energy-card__hint">当前流速正常</div>
       </div>
-      <div class="energy-card gas">
+      <div class="energy-card gas" id="card-gas">
+        <span class="energy-entry-btn" onclick="toggleEnergyEdit('gas')">✏️ 录入</span>
         <div class="energy-card__header"><span class="energy-card__icon">🔥</span><span class="energy-card__title">气</span><span class="energy-card__meter">表号：GM-A01</span></div>
-        <div class="energy-card__value" style="color:#fa8c16;">8421.5 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
-        <div class="energy-card__row"><span>今日用量</span><span>68 m³</span></div>
+        <!-- 展示态 -->
+        <div class="energy-card__display" data-type="gas">
+          <div class="energy-card__value" style="color:#fa8c16;">8421.5 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
+          <div class="energy-card__row"><span>今日用量</span><span>68 m³</span></div>
+        </div>
+        <!-- 编辑态 -->
+        <div class="energy-card__edit" data-type="gas" style="display:none;">
+          <div class="energy-edit-row"><label>当前余量</label><input type="number" class="energy-edit-input" value="8421.5" step="0.1"><span class="energy-edit-unit">m³</span></div>
+          <div class="energy-edit-row"><label>今日用量</label><input type="number" class="energy-edit-input" value="68" step="0.1"><span class="energy-edit-unit">m³</span></div>
+          <div class="energy-edit-actions"><button class="btn btn-primary btn-sm" onclick="saveEnergyEdit('gas')">保存</button><button class="btn btn-default btn-sm" onclick="cancelEnergyEdit('gas')">取消</button></div>
+        </div>
         <div class="energy-card__row"><span>今日费用</span><span>¥425.0</span></div>
         <div class="energy-card__row"><span>状态</span><span class="tag tag-green">正常</span></div>
         <div class="energy-card__row"><span>当前流量</span><span>4.6 m³/h</span></div>
         <div class="energy-card__hint">当前燃气流量正常，无泄漏告警</div>
       </div>
     </div>
+    <div class="energy-header" style="border-radius:var(--radius-md);margin-bottom:16px;">
+      <div class="energy-header__info">数据更新时间：2026-05-08 11:42:18 | 今日能耗合计：¥671.6 | 分摊每份餐：¥0.45（共1492份）</div>
+    </div>
+    <div class="action-bar"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
     <!-- 历史用量表格 -->
     <div class="table-card">
       <div class="table-card__header"><div class="table-card__title">历史每日用量</div></div>
@@ -368,11 +512,231 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
   </div>
 </main>
 
+<!-- 视频回放弹窗 -->
+<div class="modal-overlay" id="playbackModal" onclick="if(event.target===this)closePlayback()">
+  <div class="playback-modal">
+    <div class="playback-modal__header">
+      <div class="playback-modal__title">
+        <span id="pbCamId">CAM-A-01</span>
+        <span class="tag tag-blue" id="pbLocation">炒菜区-1号位</span>
+        <span style="font-size:var(--font-sm);color:var(--text-secondary);font-weight:400;">2026-04-22</span>
+      </div>
+      <button class="playback-modal__close" onclick="closePlayback()">✕</button>
+    </div>
+    <!-- 播放器 -->
+    <div class="playback-player">
+      <span>▶ 视频回放画面</span>
+      <div class="playback-player__time">10:12:36</div>
+      <div class="playback-player__cam" id="pbCamLabel">CAM-A-01</div>
+    </div>
+    <!-- 控制条 -->
+    <div class="playback-controls">
+      <button class="ctrl-btn" title="后退15秒">⏪</button>
+      <button class="ctrl-btn active" title="播放/暂停">▶</button>
+      <button class="ctrl-btn" title="前进15秒">⏩</button>
+      <span style="width:1px;height:24px;background:rgba(255,255,255,0.15);"></span>
+      <button class="ctrl-speed" title="0.5x 慢放">0.5x</button>
+      <button class="ctrl-speed active" title="正常速度">1x</button>
+      <button class="ctrl-speed" title="2x 快进">2x</button>
+      <button class="ctrl-speed" title="4x 快进">4x</button>
+      <span class="ctrl-time">10:12:36 / 23:59:59</span>
+    </div>
+    <!-- 时间轴 -->
+    <div class="playback-timeline">
+      <div class="timeline-label"><span>拖动选择回放时段</span><span>当前：10:12 — 按住拖动</span></div>
+      <div class="timeline-track">
+        <div class="timeline-track__fill">
+          <div class="timeline-track__cursor"></div>
+        </div>
+        <!-- 违规时间标记 -->
+        <div class="timeline-track__mark" style="left:42.6%;" title="10:12 未戴口罩"></div>
+        <div class="timeline-track__mark" style="left:43.4%;" title="10:26 未戴厨师帽"></div>
+        <div class="timeline-track__mark" style="left:46.9%;" title="11:15 未洗手"></div>
+      </div>
+      <div class="timeline-hours">
+        <span>00:00</span><span>03:00</span><span>06:00</span><span>09:00</span><span>12:00</span><span>15:00</span><span>18:00</span><span>21:00</span><span>24:00</span>
+      </div>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="playback-actions">
+      <button class="btn btn-primary">📷 截图</button>
+      <button class="btn btn-primary">📥 下载当前片段</button>
+      <button class="btn btn-default">🔖 标记时间点</button>
+      <span style="flex:1;"></span>
+      <span style="font-size:var(--font-xs);color:var(--text-placeholder);">红色标记 = 违规事件 | 可拖动时间轴选择片段后下载</span>
+    </div>
+    <!-- 分时段监控结果 -->
+    <div class="playback-segments">
+      <div class="playback-segments__title">分时段监控结果（15分钟/段）</div>
+      <table class="segment-table">
+        <thead><tr><th>时段</th><th>监控结果</th><th>事件描述</th><th>操作</th></tr></thead>
+        <tbody>
+          <tr><td>09:30 — 09:45</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
+          <tr><td>09:45 — 10:00</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
+          <tr style="background:#FFF1F0;"><td>10:00 — 10:15</td><td><span class="tag tag-red">违规</span></td><td>10:12 未戴口罩</td><td><span class="link">跳转</span> <span class="link">截图</span></td></tr>
+          <tr style="background:#FFF1F0;"><td>10:15 — 10:30</td><td><span class="tag tag-red">违规</span></td><td>10:26 未戴厨师帽</td><td><span class="link">跳转</span> <span class="link">截图</span></td></tr>
+          <tr><td>10:30 — 10:45</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
+          <tr><td>10:45 — 11:00</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
+          <tr style="background:#FFF1F0;"><td>11:00 — 11:15</td><td><span class="tag tag-red">违规</span></td><td>11:15 未洗手直接操作</td><td><span class="link">跳转</span> <span class="link">截图</span></td></tr>
+          <tr><td>11:15 — 11:30</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- 新增留样弹窗 -->
+<div class="modal-overlay" id="sampleModal" onclick="if(event.target===this)closeModal('sampleModal')">
+  <div class="form-modal">
+    <div class="form-modal__header">
+      <span class="form-modal__title">新增留样</span>
+      <button class="form-modal__close" onclick="closeModal('sampleModal')">✕</button>
+    </div>
+    <div class="form-modal__body">
+      <div class="form-row">
+        <div class="form-group"><label>留样菜品 <span style="color:var(--danger)">*</span></label><input placeholder="请输入菜品名称"></div>
+        <div class="form-group"><label>留样量(g) <span style="color:var(--danger)">*</span></label><input type="number" placeholder="请输入克数" value="125"></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><label>留样时间 <span style="color:var(--danger)">*</span></label><input type="datetime-local" value="2026-04-22T11:30"></div>
+        <div class="form-group"><label>到期时间（48h后自动计算）</label><input type="datetime-local" value="2026-04-24T11:30" disabled style="background:#f5f5f5;"></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><label>留样柜编号 <span style="color:var(--danger)">*</span></label><select><option value="">请选择留样柜</option><option>留样柜1-8</option><option>留样柜2-7</option><option>留样柜2-9</option><option>留样柜2-10</option><option>留样柜3-1</option><option>留样柜3-2</option><option>留样柜3-3</option><option>留样柜3-9</option></select></div>
+        <div class="form-group"><label>留样温度(℃)</label><input type="number" placeholder="请输入温度" value="4"></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><label>留样照片</label><div class="upload-area">📷 点击上传留样照片</div></div>
+        <div class="form-group"><label>备注</label><input placeholder="选填"></div>
+      </div>
+    </div>
+    <div class="form-modal__footer">
+      <button class="btn btn-default" onclick="closeModal('sampleModal')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('sampleModal')">确认提交</button>
+    </div>
+  </div>
+</div>
+
+<!-- 新增健康证弹窗 -->
+<div class="modal-overlay" id="certModal" onclick="if(event.target===this)closeModal('certModal')">
+  <div class="form-modal">
+    <div class="form-modal__header">
+      <span class="form-modal__title">新增健康证</span>
+      <button class="form-modal__close" onclick="closeModal('certModal')">✕</button>
+    </div>
+    <div class="form-modal__body">
+      <div class="form-row">
+        <div class="form-group"><label>人员编号 <span style="color:var(--danger)">*</span></label><input placeholder="如 EMP006"></div>
+        <div class="form-group"><label>姓名 <span style="color:var(--danger)">*</span></label><input placeholder="请输入姓名"></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><label>岗位 <span style="color:var(--danger)">*</span></label><select><option value="">请选择岗位</option><option>厨师</option><option>配餐员</option><option>洗碗工</option><option>分拣员</option></select></div>
+        <div class="form-group"><label>工作区域 <span style="color:var(--danger)">*</span></label><select><option value="">请选择区域</option><option>A区厨房</option><option>B区厨房</option><option>C区后厨</option><option>B区后厨</option></select></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><label>人员照片</label><div class="upload-area">📷 点击上传人员照片</div></div>
+        <div class="form-group"><label>证件照片</label><div class="upload-area">📷 点击上传证件照片</div></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><label>健康证编号 <span style="color:var(--danger)">*</span></label><input placeholder="如 HC-2026-00XXX"></div>
+        <div class="form-group"><label>发证机构</label><input placeholder="请输入发证机构"></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><label>发证日期 <span style="color:var(--danger)">*</span></label><input type="date" value="2026-05-01"></div>
+        <div class="form-group"><label>有效期至 <span style="color:var(--danger)">*</span></label><input type="date" value="2027-04-30"></div>
+      </div>
+    </div>
+    <div class="form-modal__footer">
+      <button class="btn btn-default" onclick="closeModal('certModal')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('certModal')">确认提交</button>
+    </div>
+  </div>
+</div>
+
 <script>
 function switchTab(idx){
   document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
   document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
 }
+/* 食堂切换：原型中模拟数据刷新动画 */
+function switchCanteen(val){
+  document.querySelectorAll('.stat-card,.tab-panel.active').forEach(function(el){
+    el.style.opacity='0.4';el.style.transition='opacity .2s';
+    setTimeout(function(){el.style.opacity='1';},300);
+  });
+}
+/* 视频回放弹窗 */
+function openPlayback(camId, location){
+  document.getElementById('pbCamId').textContent=camId;
+  document.getElementById('pbLocation').textContent=location;
+  document.getElementById('pbCamLabel').textContent=camId;
+  document.getElementById('playbackModal').classList.add('show');
+  document.body.style.overflow='hidden';
+}
+function closePlayback(){
+  document.getElementById('playbackModal').classList.remove('show');
+  document.body.style.overflow='';
+}
+/* 播放/暂停切换 */
+document.querySelectorAll('.playback-controls .ctrl-btn').forEach(function(btn,i){
+  if(i===1) btn.addEventListener('click',function(){
+    this.classList.toggle('active');
+    this.textContent=this.classList.contains('active')?'▶':'⏸';
+  });
+});
+/* 倍速切换 */
+document.querySelectorAll('.ctrl-speed').forEach(function(btn){
+  btn.addEventListener('click',function(){
+    document.querySelectorAll('.ctrl-speed').forEach(function(b){b.classList.remove('active');});
+    this.classList.add('active');
+  });
+});
+/* 通用弹窗关闭 */
+function closeModal(id){
+  document.getElementById(id).classList.remove('show');
+  document.body.style.overflow='';
+}
+/* ESC 关闭所有弹窗 */
+document.addEventListener('keydown',function(e){
+  if(e.key==='Escape'){
+    closePlayback();
+    closeModal('sampleModal');
+    closeModal('certModal');
+  }
+});
+// 水电气录入：切换编辑态
+function toggleEnergyEdit(type){
+  var card=document.getElementById('card-'+type);
+  var disp=card.querySelector('.energy-card__display[data-type="'+type+'"]');
+  var edit=card.querySelector('.energy-card__edit[data-type="'+type+'"]');
+  var btn=card.querySelector('.energy-entry-btn');
+  if(edit.style.display==='none'){
+    disp.style.display='none';edit.style.display='block';btn.textContent='编辑中…';btn.style.color='var(--warning)';
+  }else{
+    cancelEnergyEdit(type);
+  }
+}
+// 保存编辑（原型演示：将输入值回写到展示态）
+function saveEnergyEdit(type){
+  var card=document.getElementById('card-'+type);
+  var edit=card.querySelector('.energy-card__edit[data-type="'+type+'"]');
+  var disp=card.querySelector('.energy-card__display[data-type="'+type+'"]');
+  var inputs=edit.querySelectorAll('.energy-edit-input');
+  var units=edit.querySelectorAll('.energy-edit-unit');
+  var valEl=disp.querySelector('.energy-card__value');
+  var rowSpan=disp.querySelector('.energy-card__row span:last-child');
+  valEl.innerHTML=inputs[0].value+' <span style="font-size:var(--font-sm);font-weight:400;">'+units[0].textContent+'</span>';
+  rowSpan.textContent=inputs[1].value+' '+units[1].textContent;
+  cancelEnergyEdit(type);
+}
+// 取消编辑
+function cancelEnergyEdit(type){
+  var card=document.getElementById('card-'+type);
+  var disp=card.querySelector('.energy-card__display[data-type="'+type+'"]');
+  var edit=card.querySelector('.energy-card__edit[data-type="'+type+'"]');
+  var btn=card.querySelector('.energy-entry-btn');
+  disp.style.display='block';edit.style.display='none';btn.textContent='✏️ 录入';btn.style.color='var(--primary)';
+}
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web-admin/nutrition/sup-clean-external.html b/web-admin/nutrition/sup-clean-external.html
index 3e3a571..d26b55d 100644
--- a/web-admin/nutrition/sup-clean-external.html
+++ b/web-admin/nutrition/sup-clean-external.html
@@ -165,8 +165,11 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
   <div class="filter-bar">
     <div class="filter-item"><label>订单号/净菜名称</label><input class="filter-input" placeholder="请输入订单号或净菜名称"></div>
     <div class="filter-item"><label>客户名称</label><input class="filter-input" placeholder="请输入客户名称"></div>
+    <div class="filter-item"><label>净菜类型</label>
+      <select class="filter-select"><option>全部</option><option>净菜包</option><option>餐品净菜包</option></select>
+    </div>
     <div class="filter-item"><label>订单状态</label>
-      <select class="filter-select"><option>全部</option><option>已签收</option><option>配送中</option><option>待发货</option></select>
+      <select class="filter-select"><option>全部</option><option>备货中</option><option>待配送</option><option>配送中</option><option>已完成</option></select>
     </div>
     <div class="filter-item"><label>日期范围</label><input class="filter-input" type="date"></div>
     <button class="btn btn-primary">查询</button>
@@ -182,20 +185,22 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
     <div class="table-card__content">
       <table>
         <thead><tr>
-          <th>订单号</th><th>溯源码</th><th>客户名称</th><th>净菜名称</th><th>包装规格</th><th>售卖份数</th><th>计量(kg)</th><th>单价(元/kg)</th><th>小计金额</th><th>出库区域</th><th>下单时间</th><th>物流单号</th><th>订单状态</th><th>操作</th>
+          <th>订单号</th><th>溯源码</th><th>客户名称</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>售卖份数</th><th>计量(kg)</th><th>单价(元/kg)</th><th>小计金额</th><th>出库区域</th><th>下单时间</th><th>物流单号</th><th>订单状态</th><th>操作</th>
         </tr></thead>
         <tbody>
-          <tr><td>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00:00</td><td>SF1234567890</td><td><span class="tag tag-green">已签收</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00:00</td><td>SF1234567890</td><td><span class="tag tag-green">已签收</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30:00</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link btn-confirm-recv" style="color:var(--success)">确认签收</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>EXT-003</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>EXT-003</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>EXT-003</td><td>NC-INT-HLUB-20260422-02</td><td>学校食堂</td><td>净胡萝卜</td><td>5kg/箱</td><td>9</td><td>45</td><td>¥4.0</td><td>¥180</td><td>A仓-蔬菜区-03</td><td>2026-04-22 10:00:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>40</td><td>20</td><td>¥12</td><td>¥240</td><td>B仓-肉类区-02</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-004</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-004</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-005</td><td>NC-INT-QZYU-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>20</td><td>10</td><td>¥15</td><td>¥150</td><td>C仓-水产区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span>  <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>EXT-006</td><td>NC-INT-SRBC-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>30</td><td>15</td><td>¥8</td><td>¥120</td><td>A仓-蔬菜区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span>  <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
         </tbody>
       </table>
     </div>
     <div class="pagination">
-      <span>显示 6 条，共 8 条</span>
+      <span>显示 8 条，共 12 条</span>
       <button class="page-btn">‹</button>
       <button class="page-btn active">1</button>
       <button class="page-btn">2</button>
@@ -227,6 +232,14 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
             <option>职工家属区团购</option>
           </select>
         </div>
+        <div class="form-group">
+          <label class="form-label">净菜类型<span class="required">*</span></label>
+          <select class="form-control" id="orderType" onchange="toggleOrderName()">
+            <option value="">请选择</option>
+            <option value="nc">净菜包</option>
+            <option value="cp">餐品净菜包</option>
+          </select>
+        </div>
         <div class="form-group">
           <label class="form-label">联系人</label>
           <input class="form-control" placeholder="请输入联系人姓名">
@@ -242,7 +255,7 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
 
         <hr class="form-divider">
 
-        <div class="form-group">
+        <div class="form-group" id="orderNameNC">
           <label class="form-label">净菜名称<span class="required">*</span></label>
           <select class="form-control" id="orderItem" onchange="onItemChange()">
             <option value="">请选择净菜</option>
@@ -254,6 +267,17 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
             <option value="净胡萝卜" data-price="4.0" data-pkg="5kg/箱">净胡萝卜</option>
           </select>
         </div>
+        <div class="form-group" id="orderNameCP" style="display:none;">
+          <label class="form-label">餐品名称<span class="required">*</span></label>
+          <select class="form-control" id="orderItemCP" onchange="onItemChange()">
+            <option value="">请选择餐品</option>
+            <option value="宫保鸡丁" data-price="12" data-pkg="标准份（500g）">宫保鸡丁</option>
+            <option value="清蒸鱼" data-price="15" data-pkg="标准份（500g）">清蒸鱼</option>
+            <option value="蒜蓉菠菜" data-price="8" data-pkg="标准份（500g）">蒜蓉菠菜</option>
+            <option value="炒胡萝卜" data-price="6" data-pkg="大份（800g）">炒胡萝卜</option>
+            <option value="红烧排骨" data-price="25" data-pkg="标准份（500g）">红烧排骨</option>
+          </select>
+        </div>
         <div class="form-group">
           <label class="form-label">包装规格</label>
           <input class="form-control" id="orderPkg" readonly placeholder="选择净菜后自动填充">
@@ -301,6 +325,43 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
   </div>
 </div>
 
+<!-- 发货确认弹窗 -->
+<div class="modal-mask" id="shipModal">
+  <div class="modal" style="width:480px;">
+    <div class="modal__header">
+      <span class="modal__title">确认发货</span>
+      <button class="modal__close" onclick="closeShipModal()">&times;</button>
+    </div>
+    <div class="modal__body">
+      <p style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;">请填写物流信息后确认发货，发货后订单状态将变为「配送中」。</p>
+      <div class="form-grid" style="grid-template-columns:1fr;">
+        <div class="form-group">
+          <label class="form-label">订单号</label>
+          <input class="form-control" id="shipOrderNo" readonly>
+        </div>
+        <div class="form-group">
+          <label class="form-label">物流公司<span class="required">*</span></label>
+          <select class="form-control" id="shipCompany">
+            <option value="">请选择物流公司</option>
+            <option>顺丰速运</option>
+            <option>京东物流</option>
+            <option>德邦快递</option>
+            <option>自有车队配送</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">物流单号<span class="required">*</span></label>
+          <input class="form-control" id="shipTrackNo" placeholder="请输入物流单号">
+        </div>
+      </div>
+    </div>
+    <div class="modal__footer">
+      <button class="btn btn-default" onclick="closeShipModal()">取消</button>
+      <button class="btn btn-primary" onclick="confirmShip()">确认发货</button>
+    </div>
+  </div>
+</div>
+
 <script>
 /* 新建订单弹窗 */
 function openCreateOrder(){
@@ -313,9 +374,17 @@ document.getElementById('createOrderModal').addEventListener('click',function(e)
   if(e.target===this) closeCreateOrder();
 });
 
+/* 净菜类型切换：显示净菜名称或餐品名称 */
+function toggleOrderName(){
+  var v=document.getElementById('orderType').value;
+  document.getElementById('orderNameNC').style.display=(v==='cp'?'none':'block');
+  document.getElementById('orderNameCP').style.display=(v==='cp'?'block':'none');
+}
+
 /* 选择净菜后自动填充包装规格并计算 */
 function onItemChange(){
-  var sel=document.getElementById('orderItem');
+  var typeVal=document.getElementById('orderType').value;
+  var sel=typeVal==='cp'?document.getElementById('orderItemCP'):document.getElementById('orderItem');
   var opt=sel.options[sel.selectedIndex];
   var pkg=opt.getAttribute('data-pkg')||'';
   document.getElementById('orderPkg').value=pkg;
@@ -336,19 +405,6 @@ function calcOrder(){
   document.getElementById('orderSubtotal').value=subtotal>0?'¥'+subtotal.toFixed(2):'';
 }
 
-/* 确认签收交互 */
-document.querySelectorAll('.btn-confirm-recv').forEach(function(btn){
-  btn.addEventListener('click',function(){
-    if(confirm('确认已签收该订单？')){
-      var tr=this.closest('tr');
-      var statusTd=tr.querySelector('.tag');
-      statusTd.className='tag tag-green';
-      statusTd.textContent='已签收';
-      this.remove();
-    }
-  });
-});
-
 /* 提交订单 */
 function submitOrder(){
   var traceCode=document.getElementById('orderTraceCode').value.trim();
@@ -364,6 +420,28 @@ function submitOrder(){
   alert('订单提交成功！');
   closeCreateOrder();
 }
+
+/* 发货确认弹窗 */
+function openShipModal(orderNo){
+  document.getElementById('shipOrderNo').value=orderNo;
+  document.getElementById('shipCompany').value='';
+  document.getElementById('shipTrackNo').value='';
+  document.getElementById('shipModal').classList.add('show');
+}
+function closeShipModal(){
+  document.getElementById('shipModal').classList.remove('show');
+}
+document.getElementById('shipModal').addEventListener('click',function(e){
+  if(e.target===this) closeShipModal();
+});
+function confirmShip(){
+  var company=document.getElementById('shipCompany').value;
+  if(!company){alert('请选择物流公司');return;}
+  var trackNo=document.getElementById('shipTrackNo').value.trim();
+  if(!trackNo){alert('请输入物流单号');return;}
+  alert('订单 '+document.getElementById('shipOrderNo').value+' 已发货！\n物流公司：'+company+'\n物流单号：'+trackNo);
+  closeShipModal();
+}
 </script>
 
 </body>
diff --git a/web-admin/nutrition/sup-clean-internal.html b/web-admin/nutrition/sup-clean-internal.html
index a544fa8..6f2c332 100644
--- a/web-admin/nutrition/sup-clean-internal.html
+++ b/web-admin/nutrition/sup-clean-internal.html
@@ -143,8 +143,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     <div class="filter-item"><label>申领食堂</label>
       <select class="filter-select"><option>全部</option><option>一号食堂厨房</option><option>二号食堂厨房</option><option>三号食堂厨房</option></select>
     </div>
-    <div class="filter-item"><label>配送状态</label>
-      <select class="filter-select"><option>全部</option><option>已配送</option><option>配送中</option><option>待配送</option></select>
+    <div class="filter-item"><label>净菜类型</label>
+      <select class="filter-select"><option>全部</option><option>净菜包</option><option>餐品净菜包</option></select>
+    </div>
+    <div class="filter-item"><label>订单状态</label>
+      <select class="filter-select"><option>全部</option><option>备货中</option><option>待配送</option><option>配送中</option><option>已完成</option></select>
     </div>
     <button class="btn btn-primary">查询</button>
     <button class="btn btn-default">重置</button>
@@ -159,19 +162,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
     <div class="table-card__content">
       <table>
         <thead><tr>
-          <th>申领单号</th><th>溯源码</th><th>申领食堂</th><th>净菜名称</th><th>包装规格</th><th>申领份数</th><th>申领数量(kg)</th><th>配送状态</th><th>关联仓库区域</th><th>申领时间</th><th>配送人</th><th>操作</th>
+          <th>申领单号</th><th>溯源码</th><th>申领食堂</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>申领份数</th><th>申领数量(kg)</th><th>订单状态</th><th>关联仓库区域</th><th>申领时间</th><th>预定配送时间</th><th>配送人</th><th>操作</th>
         </tr></thead>
         <tbody>
-          <tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已配送</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已配送</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>王配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>INT-002</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td>鸡胸肉（鸡肉丝）</td><td>1kg/袋</td><td>20</td><td>20</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>王配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
-          <tr><td>INT-003</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>—</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-004</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>2026-04-22 10:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-005</td><td>NC-INT-QZYU-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-02</td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-006</td><td>NC-INT-TDSI-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-03</td><td>2026-04-22 09:15</td><td>2026-04-22 11:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
+          <tr><td>INT-007</td><td>NC-INT-SRBC-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>25</td><td>12.5</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 09:30</td><td>2026-04-22 12:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span>  <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
         </tbody>
       </table>
     </div>
     <div class="pagination">
-      <span>显示 5 条，共 18 条</span>
+      <span>显示 8 条，共 26 条</span>
       <button class="page-btn">‹</button>
       <button class="page-btn active">1</button>
       <button class="page-btn">2</button>
@@ -195,13 +201,21 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
           <div class="form-item__label">溯源码<span class="required">*</span></div>
           <input placeholder="输入溯源码可带出净菜信息以及仓库信息">
         </div>
+        <div class="form-item">
+          <div class="form-item__label">净菜类型<span class="required">*</span></div>
+          <select id="claimType" onchange="toggleClaimName()"><option value="">请选择</option><option value="nc">净菜包</option><option value="cp">餐品净菜包</option></select>
+        </div>
         <div class="form-item">
           <div class="form-item__label">申领食堂<span class="required">*</span></div>
           <select><option value="">请选择</option><option>一号食堂厨房</option><option>二号食堂厨房</option><option>三号食堂厨房</option></select>
         </div>
-        <div class="form-item">
+        <div class="form-item" id="claimNameNC">
           <div class="form-item__label">净菜名称<span class="required">*</span></div>
-          <select><option value="">请选择净菜</option><option>菠菜</option><option>玉米（玉米粒）</option><option>猪排骨</option><option>鸡胸肉（鸡肉丝）</option><option>草鱼（鱼片）</option></select>
+          <select><option value="">请选择净菜</option><option>菠菜</option><option>玉米（玉米粒）</option><option>猪排骨</option><option>鸡胸肉（鸡肉丝）</option><option>草鱼（鱼片）</option><option>土豆（土豆丝）</option></select>
+        </div>
+        <div class="form-item" id="claimNameCP" style="display:none;">
+          <div class="form-item__label">餐品名称<span class="required">*</span></div>
+          <select><option value="">请选择餐品</option><option>宫保鸡丁</option><option>清蒸鱼</option><option>蒜蓉菠菜</option><option>炒胡萝卜</option><option>红烧排骨</option></select>
         </div>
         <div class="form-item">
           <div class="form-item__label">包装规格<span class="required">*</span></div>
@@ -219,6 +233,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
           <div class="form-item__label">关联仓库区域</div>
           <select><option value="">请选择</option><option>A仓-蔬菜区-01</option><option>A仓-蔬菜区-02</option><option>B仓-肉类区-01</option><option>B仓-肉类区-02</option><option>C仓-水产区-01</option></select>
         </div>
+        <div class="form-item">
+          <div class="form-item__label">预定配送时间</div>
+          <input type="datetime-local" placeholder="请选择配送时间">
+        </div>
         <div class="form-item">
           <div class="form-item__label">配送人</div>
           <input placeholder="请输入配送人">
@@ -240,6 +258,12 @@ function closeModal(id){document.getElementById(id).classList.remove('show');}
 document.querySelectorAll('.modal-mask').forEach(m=>{
   m.addEventListener('click',e=>{if(e.target===m)m.classList.remove('show');});
 });
+// 净菜类型切换：显示净菜名称或餐品名称
+function toggleClaimName(){
+  var v=document.getElementById('claimType').value;
+  document.getElementById('claimNameNC').style.display=(v==='cp'?'none':'flex');
+  document.getElementById('claimNameCP').style.display=(v==='cp'?'flex':'none');
+}
 </script>
 
 </body>
diff --git a/web-admin/nutrition/sup-in-clean.html b/web-admin/nutrition/sup-in-clean.html
index be8b66c..3a137ac 100644
--- a/web-admin/nutrition/sup-in-clean.html
+++ b/web-admin/nutrition/sup-in-clean.html
@@ -177,29 +177,29 @@ tbody td.td-actions{white-space:nowrap;}
     <div class="table-card__content">
       <table>
         <thead><tr>
-          <th>加工批次号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>加工步骤</th><th>毛菜重量(kg)</th><th>净菜重量(kg)</th><th>出净率(%)</th><th>加工人员</th><th>开始时间</th><th>结束时间</th><th>质检结果</th><th>入库状态</th><th>操作</th>
+          <th>加工批次号</th><th>关联单号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>加工步骤</th><th>毛菜重量(kg)</th><th>净菜重量(kg)</th><th>出净率(%)</th><th>加工人员</th><th>开始时间</th><th>结束时间</th><th>质检结果</th><th>入库状态</th><th>操作</th>
         </tr></thead>
         <tbody>
           <tr>
-            <td>PROC-001</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>PROC-001</td><td><span class="link">NC-IN-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>PROC-002</td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>PROC-002</td><td><span class="link">—</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>PROC-003</td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>PROC-003</td><td><span class="link">—</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>PROC-004</td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>PROC-004</td><td><span class="link">—</span></td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>PROC-005</td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>PROC-005</td><td><span class="link">NC-IN-004</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>PROC-006</td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>PROC-006</td><td><span class="link">NC-IN-005</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>PROC-007</td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>PROC-007</td><td><span class="link">—</span></td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
         </tbody>
       </table>
diff --git a/web-admin/nutrition/sup-in-cleanin.html b/web-admin/nutrition/sup-in-cleanin.html
index 250e722..efc65c2 100644
--- a/web-admin/nutrition/sup-in-cleanin.html
+++ b/web-admin/nutrition/sup-in-cleanin.html
@@ -173,23 +173,23 @@ tbody td.td-actions{white-space:nowrap;}
     <div class="table-card__content">
       <table>
         <thead><tr>
-          <th>入库单号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>入库规格</th><th>入库数量</th><th>入库重量(kg)</th><th>当前库存(kg)</th><th>操作时间</th><th>保质期至</th><th>存放区域</th><th>存放温度(℃)</th><th>操作人</th><th>操作</th>
+          <th>入库单号</th><th>关联单号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>入库规格</th><th>入库数量</th><th>入库重量(kg)</th><th>当前库存(kg)</th><th>操作时间</th><th>保质期至</th><th>存放区域</th><th>存放温度(℃)</th><th>操作人</th><th>操作</th>
         </tr></thead>
         <tbody>
           <tr>
-            <td>NC-IN-001</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>NC-IN-001</td><td><span class="link">PROC-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>NC-IN-002</td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>NC-IN-002</td><td><span class="link">PROC-002</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>NC-IN-003</td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>NC-IN-003</td><td><span class="link">PROC-003</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>NC-IN-004</td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>NC-IN-004</td><td><span class="link">PROC-005</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
           <tr>
-            <td>NC-IN-005</td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
+            <td>NC-IN-005</td><td><span class="link">PROC-006</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
           </tr>
         </tbody>
       </table>