From f22f832ad40f5407259939e34e6e8c8f8c3854ca Mon Sep 17 00:00:00 2001
From: liyongde <1419499670@qq.com>
Date: Tue, 18 Aug 2026 09:48:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AD=90=E5=8D=B7=E5=8C=85=E8=A3=85?=
 =?UTF-8?q?=E5=85=B3=E7=B3=BB=E6=89=8B=E5=8A=A8=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                                     |  14 +-
 .../views/lms/subpackagerelation/index.vue    |  19 +
 .../modules/batch-form-model.test.ts          |  21 +-
 .../modules/batch-form-model.ts               |  10 +-
 .../subpackagerelation/modules/batch-form.vue | 481 +++++++++
 packingAreaDashboard.html                     | 964 ++++++++++++++++++
 6 files changed, 1493 insertions(+), 16 deletions(-)
 create mode 100644 nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form.vue
 create mode 100644 packingAreaDashboard.html

diff --git a/AGENTS.md b/AGENTS.md
index 1f47b3c4..f93a574e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -5,13 +5,13 @@
 
 ## 核心规则
 
-1. **收到任务时，先检查是否有匹配的 skill** — 哪怕只有 1% 的可能性也要检查
-2. **设计先于编码** — 收到功能需求时，先用 brainstorming skill 做需求分析
-3. **测试先于实现** — 写代码前先写测试（TDD）
-4. **验证先于完成** — 声称完成前必须运行验证命令
-5. **代码开发规则** — 遵守 `.Codex/skills/nl-java-style/SKILL.md` 技能的规范要求
-6. 不需要频繁提交代码，除非用户说允许测试，否则优先不做测试
-7. 如果用户说不需要使用 superpowers-zh 技能，就不需要使用 superpowers-zh 下的所有技能。
+1. 默认不使用 superpowers-zh 技能，默认不需要使用 superpowers-zh 下的所有技能，除非用户说使用superpower-zh
+2. **收到任务时，先检查是否有匹配的 skill** — 哪怕只有 1% 的可能性也要检查
+3. **设计先于编码** — 收到功能需求时，先用 brainstorming skill 做需求分析
+4. **测试先于实现** — 写代码前先写测试（TDD）
+5. **验证先于完成** — 声称完成前必须运行验证命令
+6. **代码开发规则** — 遵守 `.Codex/skills/nl-java-style/SKILL.md` 技能的规范要求
+7. 不需要频繁提交代码，除非用户说允许测试，否则优先不做测试
 
 ## 可用 Skills
 
diff --git a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/index.vue b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/index.vue
index 70446746..1e727457 100644
--- a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/index.vue
+++ b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/index.vue
@@ -19,6 +19,7 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
+import BatchForm from './modules/batch-form.vue';
 import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -26,6 +27,11 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+const [BatchFormModal, batchFormModalApi] = useVbenModal({
+  connectedComponent: BatchForm,
+  destroyOnClose: true,
+});
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -36,6 +42,11 @@ function handleCreate() {
   formModalApi.setData(null).open();
 }
 
+/** 批量创建子卷包装关系 */
+function handleBatchCreate() {
+  batchFormModalApi.open();
+}
+
 /** 编辑子卷包装关系 */
 function handleEdit(row: LmsSubPackageRelationApi.SubPackageRelation) {
   formModalApi.setData(row).open();
@@ -127,6 +138,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Page auto-content-height>
     <FormModal @success="handleRefresh" />
+    <BatchFormModal @success="handleRefresh" />
     <Grid table-title="子卷包装关系列表">
       <template #toolbar-tools>
         <TableAction
@@ -138,6 +150,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['lms:sub-package-relation:create'],
               onClick: handleCreate,
             },
+            {
+              label: '批量新增',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['lms:sub-package-relation:create'],
+              onClick: handleBatchCreate,
+            },
             {
               label: $t('ui.actionTitle.export'),
               type: 'primary',
diff --git a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.test.ts b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.test.ts
index 91ba7e16..1840937d 100644
--- a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.test.ts
+++ b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.test.ts
@@ -121,12 +121,9 @@ describe('batch-form-model', () => {
     });
 
     expect(result.rows).toEqual([rows[0], rows[2]]);
-    expect(result.rowErrors).toEqual(
-      new Map([
-        [rows[2]!.clientKey, '第三行失败'],
-        [rows[0]!.clientKey, '第一行失败'],
-      ]),
-    );
+    expect(result.safe).toBe(true);
+    expect(result.rowErrors.get(rows[0]!.clientKey)).toBe('第一行失败');
+    expect(result.rowErrors.get(rows[2]!.clientKey)).toBe('第三行失败');
   });
 
   it('falls back to one-based row index when the failure client key is unknown', () => {
@@ -145,6 +142,7 @@ describe('batch-form-model', () => {
     });
 
     expect(result.rows).toEqual([rows[1]]);
+    expect(result.safe).toBe(true);
     expect(result.rowErrors).toEqual(
       new Map([[rows[1]!.clientKey, '第二行失败']]),
     );
@@ -167,6 +165,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -189,6 +188,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -212,6 +212,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -228,6 +229,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -249,6 +251,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -277,6 +280,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -299,6 +303,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -321,6 +326,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -343,6 +349,7 @@ describe('batch-form-model', () => {
     const generalError = '批量保存结果无法匹配，请核对后重试';
 
     expect(result.rows).toEqual(rows);
+    expect(result.safe).toBe(false);
     expect(result.rowErrors).toEqual(
       new Map(rows.map((row) => [row.clientKey, generalError])),
     );
@@ -355,6 +362,6 @@ describe('batch-form-model', () => {
       failures: [],
     });
 
-    expect(result).toEqual({ rows: [], rowErrors: new Map() });
+    expect(result).toEqual({ rows: [], rowErrors: new Map(), safe: true });
   });
 });
diff --git a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.ts b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.ts
index 829558a6..f7cfa603 100644
--- a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.ts
+++ b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form-model.ts
@@ -79,11 +79,16 @@ export function validateBatchRows(
 export function applyBatchResult(
   rows: BatchFormRow[],
   result: LmsSubPackageRelationApi.BatchCreateResult,
-): { rows: BatchFormRow[]; rowErrors: Map<string, string> } {
+): {
+  rowErrors: Map<string, string>;
+  rows: BatchFormRow[];
+  safe: boolean;
+} {
   const generalError = '批量保存结果无法匹配，请核对后重试';
   const unsafeResult = () => ({
     rows,
     rowErrors: new Map(rows.map((item) => [item.clientKey, generalError])),
+    safe: false,
   });
   const rowByClientKey = new Map<string, BatchFormRow>();
   for (const row of rows) {
@@ -105,7 +110,7 @@ export function applyBatchResult(
   }
 
   if (result.failures.length === 0) {
-    return { rows: [], rowErrors: new Map() };
+    return { rows: [], rowErrors: new Map(), safe: true };
   }
 
   const failedClientKeys = new Set<string>();
@@ -142,5 +147,6 @@ export function applyBatchResult(
   return {
     rows: rows.filter((row) => failedClientKeys.has(row.clientKey)),
     rowErrors,
+    safe: true,
   };
 }
diff --git a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form.vue b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form.vue
new file mode 100644
index 00000000..d5337e2a
--- /dev/null
+++ b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/subpackagerelation/modules/batch-form.vue
@@ -0,0 +1,481 @@
+<script lang="ts" setup>
+import type { BatchFieldErrors, BatchFormRow } from './batch-form-model';
+
+import type { LmsBoxTypeApi } from '#/api/lms/boxtype';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import {
+  Alert,
+  Button,
+  Card,
+  FormItem,
+  Input,
+  message,
+  Segmented,
+  Select,
+} from 'antdv-next';
+
+import { batchCreateSubPackageRelation } from '#/api/lms/subpackagerelation';
+import BoxTypeSelectModalComponent from '#/views/lms/boxtype/components/BoxTypeSelectModal.vue';
+
+import {
+  applyBatchResult,
+  copyBatchRow,
+  createBatchRow,
+  validateBatchRows,
+} from './batch-form-model';
+
+const emit = defineEmits<{ success: [] }>();
+
+const rows = ref<BatchFormRow[]>([createBatchRow()]);
+const viewMode = ref<'card' | 'table'>('table');
+const activeClientKey = ref<string>();
+const fieldErrors = ref(new Map<number, BatchFieldErrors>());
+const rowErrors = ref(new Map<string, string>());
+const resultUncertain = ref(false);
+const viewOptions = [
+  { label: '▤ 卡片', value: 'card' },
+  { label: '▦ 表格', value: 'table' },
+];
+
+const statusOptions = computed(() =>
+  getDictOptions(DICT_TYPE.SUB_PACKAGE_STATUS).map((item) => ({
+    ...item,
+    value: String(item.value),
+  })),
+);
+
+function reset() {
+  rows.value = [createBatchRow()];
+  viewMode.value = 'table';
+  activeClientKey.value = undefined;
+  fieldErrors.value = new Map();
+  rowErrors.value = new Map();
+  resultUncertain.value = false;
+}
+
+function clearErrors() {
+  fieldErrors.value = new Map();
+}
+
+function appendRow() {
+  rows.value.push(createBatchRow());
+  clearErrors();
+}
+
+function duplicateRow(index: number) {
+  rows.value.splice(index + 1, 0, copyBatchRow(rows.value[index]!));
+  clearErrors();
+}
+
+function removeRow(index: number) {
+  const [removed] = rows.value.splice(index, 1);
+  if (rows.value.length === 0) rows.value.push(createBatchRow());
+  fieldErrors.value = new Map();
+  if (removed) rowErrors.value.delete(removed.clientKey);
+}
+
+function clearRows() {
+  rows.value = [createBatchRow()];
+  activeClientKey.value = undefined;
+  fieldErrors.value = new Map();
+  rowErrors.value = new Map();
+}
+
+function editField(index: number, field: keyof BatchFormRow) {
+  const errors = fieldErrors.value.get(index);
+  if (errors?.[field]) {
+    const next = { ...errors };
+    delete next[field];
+    const map = new Map(fieldErrors.value);
+    Object.keys(next).length ? map.set(index, next) : map.delete(index);
+    fieldErrors.value = map;
+  }
+  rowErrors.value.delete(rows.value[index]!.clientKey);
+}
+
+function fieldError(index: number, field: keyof BatchFormRow) {
+  return fieldErrors.value.get(index)?.[field];
+}
+
+const [BoxTypeSelectModal, boxTypeSelectModalApi] = useVbenModal({
+  connectedComponent: BoxTypeSelectModalComponent,
+  destroyOnClose: true,
+});
+
+function selectBoxType(clientKey: string) {
+  activeClientKey.value = clientKey;
+  boxTypeSelectModalApi.setData({ multiple: false }).open();
+}
+
+function handleBoxTypeSelect(selectedRows: LmsBoxTypeApi.BoxType[]) {
+  const index = rows.value.findIndex(
+    (item) => item.clientKey === activeClientKey.value,
+  );
+  const selected = selectedRows[0];
+  if (index < 0 || !selected) return;
+  const row = rows.value[index]!;
+  row.boxType = selected.boxType ?? '';
+  row.boxLength = selected.boxLength == null ? '' : String(selected.boxLength);
+  row.boxWidth = selected.boxWidth == null ? '' : String(selected.boxWidth);
+  row.boxHigh = selected.boxHigh == null ? '' : String(selected.boxHigh);
+  editField(index, 'boxType');
+  activeClientKey.value = undefined;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (resultUncertain.value) {
+      message.error('上次保存结果无法确认，请刷新列表核对后关闭弹窗');
+      return;
+    }
+    const errors = validateBatchRows(rows.value);
+    fieldErrors.value = errors;
+    rowErrors.value = new Map();
+    if (errors.size > 0) {
+      message.warning('请检查必填项');
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const result = await batchCreateSubPackageRelation(rows.value);
+      const applied = applyBatchResult(rows.value, result);
+      if (result.successCount > 0) emit('success');
+      if (!applied.safe) {
+        rows.value = applied.rows;
+        rowErrors.value = applied.rowErrors;
+        fieldErrors.value = new Map();
+        resultUncertain.value = true;
+        message.error('保存结果无法确认，请刷新列表核对后关闭弹窗');
+        return;
+      }
+      if (result.failureCount === 0) {
+        await modalApi.close();
+        message.success(`成功新增 ${result.successCount} 条子卷包装关系`);
+        return;
+      }
+      rows.value = applied.rows;
+      rowErrors.value = applied.rowErrors;
+      fieldErrors.value = new Map();
+      message.warning(
+        `成功 ${result.successCount} 条，失败 ${result.failureCount} 条`,
+      );
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) reset();
+  },
+});
+</script>
+
+<template>
+  <Modal title="自由切换批量新增" class="w-[1400px] max-w-[96vw]">
+    <BoxTypeSelectModal @select="handleBoxTypeSelect" />
+    <div class="batch-form">
+      <div class="toolbar">
+        <div class="toolbar-actions">
+          <Button type="primary" @click="appendRow">新增一行</Button>
+          <Button class="clear-button" @click="clearRows">清空全部</Button>
+        </div>
+        <Segmented
+          v-model:value="viewMode"
+          class="view-switch"
+          :options="viewOptions"
+          aria-label="录入视图"
+        />
+        <span class="record-counter">
+          当前共 <strong>{{ rows.length }}</strong> 条记录
+        </span>
+      </div>
+
+      <Alert class="view-tip" type="info" show-icon>
+        <template #message>
+          {{
+            viewMode === 'table'
+              ? '表格视图适合批量核对，可横向滚动查看全部字段。'
+              : '卡片视图适合逐条录入和检查，切换后数据自动保留。'
+          }}
+        </template>
+        <template #action>尺寸单位：mm</template>
+      </Alert>
+
+      <div v-if="viewMode === 'table'" class="table-wrap">
+        <table class="batch-table">
+          <thead>
+            <tr>
+              <th>序号</th><th><i>*</i> 木箱唯一码</th><th><i>*</i> 木箱类型</th>
+              <th>木箱长</th><th>木箱宽</th><th>木箱高</th>
+              <th><i>*</i> 保质期（天）</th><th><i>*</i> 入库日期</th><th><i>*</i> 子卷号</th>
+              <th><i>*</i> 状态</th><th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="(row, index) in rows" :key="row.clientKey">
+              <tr>
+                <td class="sequence">{{ index + 1 }}</td>
+                <td><Input v-model:value="row.packageBoxSn" :class="{ invalid: fieldError(index, 'packageBoxSn') }" placeholder="请输入木箱唯一码" @update:value="editField(index, 'packageBoxSn')" /><small>{{ fieldError(index, 'packageBoxSn') }}</small></td>
+                <td><Input :value="row.boxType" readonly role="button" tabindex="0" aria-label="选择木箱类型" :class="{ invalid: fieldError(index, 'boxType') }" placeholder="请选择木箱类型" @click="selectBoxType(row.clientKey)" @keydown.enter="selectBoxType(row.clientKey)" @keydown.space.prevent="selectBoxType(row.clientKey)" /><small>{{ fieldError(index, 'boxType') }}</small></td>
+                <td><Input v-model:value="row.boxLength" readonly placeholder="自动带出" /></td>
+                <td><Input v-model:value="row.boxWidth" readonly placeholder="自动带出" /></td>
+                <td><Input v-model:value="row.boxHigh" readonly placeholder="自动带出" /></td>
+                <td><Input v-model:value="row.qualityGuaranPeriod" :class="{ invalid: fieldError(index, 'qualityGuaranPeriod') }" placeholder="请输入保质期" @update:value="editField(index, 'qualityGuaranPeriod')" /><small>{{ fieldError(index, 'qualityGuaranPeriod') }}</small></td>
+                <td><Input v-model:value="row.dateOfFgInbound" type="date" :class="{ invalid: fieldError(index, 'dateOfFgInbound') }" @update:value="editField(index, 'dateOfFgInbound')" /><small>{{ fieldError(index, 'dateOfFgInbound') }}</small></td>
+                <td><Input v-model:value="row.containerName" :class="{ invalid: fieldError(index, 'containerName') }" placeholder="请输入子卷号" @update:value="editField(index, 'containerName')" /><small>{{ fieldError(index, 'containerName') }}</small></td>
+                <td><Select v-model:value="row.status" :options="statusOptions" :class="{ invalid: fieldError(index, 'status') }" @change="editField(index, 'status')" /><small>{{ fieldError(index, 'status') }}</small></td>
+                <td class="operations"><Button type="link" @click="duplicateRow(index)">复制</Button><Button type="link" danger @click="removeRow(index)">删除</Button></td>
+              </tr>
+              <tr v-if="rowErrors.get(row.clientKey)" class="row-error"><td colspan="11">第 {{ index + 1 }} 行：{{ rowErrors.get(row.clientKey) }}</td></tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-else class="card-list">
+        <Card v-for="(row, index) in rows" :key="row.clientKey" size="small">
+          <template #title>第 {{ index + 1 }} 条包装关系</template>
+          <template #extra><Button type="link" @click="duplicateRow(index)">复制</Button><Button type="link" danger @click="removeRow(index)">删除</Button></template>
+          <Alert v-if="rowErrors.get(row.clientKey)" type="error" show-icon :message="rowErrors.get(row.clientKey)" class="row-alert" />
+          <div class="card-grid">
+            <FormItem label="木箱唯一码" required :validate-status="fieldError(index, 'packageBoxSn') ? 'error' : undefined" :help="fieldError(index, 'packageBoxSn')"><Input v-model:value="row.packageBoxSn" @update:value="editField(index, 'packageBoxSn')" /></FormItem>
+            <FormItem label="木箱类型" required :validate-status="fieldError(index, 'boxType') ? 'error' : undefined" :help="fieldError(index, 'boxType')"><Input :value="row.boxType" readonly role="button" tabindex="0" aria-label="选择木箱类型" placeholder="请选择木箱类型" @click="selectBoxType(row.clientKey)" @keydown.enter="selectBoxType(row.clientKey)" @keydown.space.prevent="selectBoxType(row.clientKey)" /></FormItem>
+            <FormItem label="木箱长"><Input v-model:value="row.boxLength" readonly placeholder="自动带出" /></FormItem>
+            <FormItem label="木箱宽"><Input v-model:value="row.boxWidth" readonly placeholder="自动带出" /></FormItem>
+            <FormItem label="木箱高"><Input v-model:value="row.boxHigh" readonly placeholder="自动带出" /></FormItem>
+            <FormItem label="保质期" required :validate-status="fieldError(index, 'qualityGuaranPeriod') ? 'error' : undefined" :help="fieldError(index, 'qualityGuaranPeriod')"><Input v-model:value="row.qualityGuaranPeriod" @update:value="editField(index, 'qualityGuaranPeriod')" /></FormItem>
+            <FormItem label="入库日期" required :validate-status="fieldError(index, 'dateOfFgInbound') ? 'error' : undefined" :help="fieldError(index, 'dateOfFgInbound')"><Input v-model:value="row.dateOfFgInbound" type="date" @update:value="editField(index, 'dateOfFgInbound')" /></FormItem>
+            <FormItem label="子卷号" required :validate-status="fieldError(index, 'containerName') ? 'error' : undefined" :help="fieldError(index, 'containerName')"><Input v-model:value="row.containerName" @update:value="editField(index, 'containerName')" /></FormItem>
+            <FormItem label="状态" required :validate-status="fieldError(index, 'status') ? 'error' : undefined" :help="fieldError(index, 'status')"><Select v-model:value="row.status" :options="statusOptions" @change="editField(index, 'status')" /></FormItem>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.batch-form {
+  display: flex;
+  min-height: min(650px, calc(100vh - 230px));
+  padding: 0 20px 18px;
+  background: #f7f9fc;
+  flex-direction: column;
+}
+
+.toolbar {
+  display: grid;
+  align-items: center;
+  padding: 14px 6px;
+  margin: 0 -6px 18px;
+  background: hsl(var(--background));
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+}
+
+.toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.toolbar-actions :deep(.ant-btn) {
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 8px;
+}
+
+.clear-button {
+  color: #1677ff;
+  background: #eef4ff;
+  border-color: #cfe0ff;
+}
+
+.view-switch {
+  padding: 3px;
+  border-radius: 8px;
+}
+
+.view-switch :deep(.ant-segmented-item) {
+  min-width: 82px;
+  border-radius: 6px;
+}
+
+.view-switch :deep(.ant-segmented-item-selected) {
+  color: #1677ff;
+  font-weight: 600;
+}
+
+.record-counter {
+  color: hsl(var(--muted-foreground));
+  text-align: right;
+}
+
+.record-counter strong {
+  margin: 0 4px;
+  color: #1677ff;
+  font-size: 18px;
+}
+
+.view-tip {
+  margin-bottom: 16px;
+  border-color: #cfe0ff;
+  border-radius: 9px;
+}
+
+.table-wrap {
+  flex: 1;
+  min-height: 420px;
+  overflow: auto;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
+}
+
+.batch-table {
+  width: 100%;
+  min-width: 1780px;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.batch-table th,
+.batch-table td {
+  padding: 10px;
+  vertical-align: top;
+  background: hsl(var(--background));
+  border-right: 1px solid hsl(var(--border));
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.batch-table th {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  height: 48px;
+  color: #4b5870;
+  font-weight: 600;
+  text-align: left;
+  white-space: nowrap;
+  background: #f3f6fb;
+  vertical-align: middle;
+}
+
+.batch-table th i {
+  color: #ff4d4f;
+  font-style: normal;
+}
+
+.batch-table td {
+  min-width: 145px;
+}
+
+.batch-table :deep(.ant-input),
+.batch-table :deep(.ant-select-selector) {
+  min-height: 36px;
+  border-radius: 7px;
+}
+
+.batch-table :deep(.ant-input[readonly]) {
+  color: #667085;
+  background: #f2f4f7;
+}
+
+.batch-table .sequence {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  min-width: 64px;
+  color: #788196;
+  text-align: center;
+}
+
+.batch-table th:first-child {
+  left: 0;
+  z-index: 5;
+  min-width: 64px;
+  text-align: center;
+}
+
+.batch-table th:last-child,
+.batch-table .operations {
+  position: sticky;
+  right: 0;
+  z-index: 2;
+  min-width: 128px;
+  text-align: center;
+  white-space: nowrap;
+  box-shadow: -5px 0 12px rgb(21 35 62 / 6%);
+}
+
+.batch-table th:last-child {
+  z-index: 5;
+}
+
+.batch-table small {
+  display: block;
+  min-height: 18px;
+  margin-top: 2px;
+  color: #ff4d4f;
+}
+
+.invalid {
+  border-color: #ff4d4f;
+}
+
+.row-error td {
+  color: #ff4d4f;
+  background: #fff2f0;
+}
+
+.card-list {
+  display: grid;
+  flex: 1;
+  align-content: start;
+  gap: 16px;
+  min-height: 420px;
+  padding: 2px;
+  overflow: auto;
+}
+
+.card-list :deep(.ant-card) {
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(23 32 51 / 4%);
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 24px;
+}
+
+.card-grid :deep(.ant-input[readonly]) {
+  color: #667085;
+  background: #f2f4f7;
+}
+
+.row-alert {
+  margin-bottom: 16px;
+}
+
+@media (max-width: 768px) {
+  .toolbar {
+    align-items: flex-start;
+    grid-template-columns: 1fr;
+  }
+
+  .record-counter {
+    text-align: left;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/packingAreaDashboard.html b/packingAreaDashboard.html
new file mode 100644
index 00000000..46009efb
--- /dev/null
+++ b/packingAreaDashboard.html
@@ -0,0 +1,964 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>装箱区信息看板</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #0d0d0d;
+      --panel: rgba(255, 255, 255, .03);
+      --panel-2: rgba(255, 255, 255, .025);
+      --line: rgba(255, 255, 255, .07);
+      --cyan: #31d7ed;
+      --blue: #2a91ff;
+      --green: #42df91;
+      --yellow: #ffd35a;
+      --red: #ff6574;
+      --purple: #b28cff;
+      --text: #eef8ff;
+      --muted: #898781;
+      --agv: rgba(242, 250, 255, .92);
+    }
+
+    * { box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+    body {
+      color: var(--text);
+      background: #0d0d0d;
+      font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    button, input { font: inherit; }
+
+    #stage {
+      position: relative;
+      width: 1920px;
+      height: 1080px;
+      flex: 0 0 auto;
+      overflow: hidden;
+      padding: 20px 24px 16px;
+      transform-origin: center center;
+      background:
+        radial-gradient(1200px 500px at 50% -10%, rgba(25, 110, 161, .28), transparent 60%),
+        linear-gradient(180deg, #0a1424 0%, #0d1424 45%, #0d1220 100%);
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    #stage::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background-image:
+        linear-gradient(rgba(90, 140, 190, .05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(90, 140, 190, .05) 1px, transparent 1px);
+      background-size: 48px 48px;
+    }
+    #stage::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      box-shadow: inset 0 0 100px rgba(0, 0, 0, .28);
+    }
+    #stage > * { position: relative; z-index: 1; }
+
+    .header {
+      height: 58px;
+      display: grid;
+      grid-template-columns: 350px 1fr 350px;
+      align-items: center;
+    }
+    .brand { display: flex; align-items: center; gap: 12px; }
+    .brand-mark {
+      position: relative;
+      width: 40px;
+      height: 40px;
+      border: 0;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #10aeff, #007aff);
+      box-shadow: none;
+    }
+    .brand-mark::before, .brand-mark::after {
+      content: "箱";
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      border: 0;
+      color: #fff;
+      font-size: 18px;
+      font-weight: 800;
+    }
+    .brand-mark::after { display: none; }
+    .brand-cn { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
+    .brand-en { margin-top: 2px; color: #898781; font-size: 10px; letter-spacing: 2.4px; }
+    h1 {
+      margin: 0;
+      text-align: center;
+      font-size: 30px;
+      font-weight: 700;
+      letter-spacing: 8px;
+      background: linear-gradient(180deg, #ffffff, #9ed0ff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      text-shadow: none;
+    }
+    .clock { text-align: right; font-variant-numeric: tabular-nums; }
+    #clockTime { font-size: 25px; font-weight: 750; letter-spacing: 2px; }
+    #clockDate { margin-top: 2px; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
+
+    .kpis { height: 70px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
+    .kpi, .toolbar, .map-panel, .side-panel {
+      border: 1px solid rgba(255, 255, 255, .07);
+      background: rgba(255, 255, 255, .03);
+      box-shadow: none;
+    }
+    .kpi {
+      position: relative;
+      overflow: hidden;
+      padding: 10px 18px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .kpi::before { display: none; }
+    .kpi-icon {
+      width: 10px;
+      height: 42px;
+      display: block;
+      flex: none;
+      overflow: hidden;
+      border: 0;
+      border-radius: 5px;
+      color: transparent;
+      background: var(--accent);
+      font-size: 0;
+      box-shadow: none;
+    }
+    .kpi-value { font-size: 25px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
+    .kpi-value small { margin-left: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
+    .kpi-label { margin-top: 5px; color: #9eb8ca; font-size: 12px; }
+
+    .toolbar {
+      min-height: 55px;
+      padding: 8px 12px;
+      border-radius: 9px;
+      display: flex;
+      align-items: center;
+      gap: 18px;
+    }
+    .legend { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
+    .legend-title { color: #b7d6e9; font-size: 12px; font-weight: 700; }
+    .legend-item { display: inline-flex; align-items: center; gap: 5px; color: #aac2d4; font-size: 11px; white-space: nowrap; }
+    .legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
+    .legend-dot.alert { box-shadow: 0 0 8px var(--c); }
+    .toolbar-spacer { flex: 1; }
+    .control { display: flex; align-items: center; gap: 7px; color: #9db8cb; font-size: 12px; }
+    .control input {
+      height: 31px;
+      padding: 0 9px;
+      border: 1px solid #315a79;
+      border-radius: 5px;
+      outline: none;
+      color: #eaf9ff;
+      background: rgba(3, 14, 27, .72);
+    }
+    .control input:focus { border-color: var(--cyan); }
+    #searchInput { width: 190px; }
+    #thresholdInput, #zoomInput { width: 62px; text-align: center; }
+    .btn {
+      height: 31px;
+      padding: 0 13px;
+      border: 1px solid #287ca8;
+      border-radius: 5px;
+      color: #def8ff;
+      background: linear-gradient(180deg, #11618a, #0a4669);
+      cursor: pointer;
+      transition: .18s ease;
+    }
+    .btn:hover { border-color: #50dcf2; filter: brightness(1.13); }
+    .btn.secondary { border-color: #365b78; background: #102c45; }
+    #searchMessage { min-width: 105px; font-size: 11px; }
+    #searchMessage.ok { color: #55e89a; }
+    #searchMessage.error { color: #ff7c89; }
+
+    .content { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 342px; gap: 12px; }
+    .map-panel { min-width: 0; padding: 10px; border-radius: 10px; display: flex; flex-direction: column; }
+    .panel-head { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
+    .panel-title { color: #bcecff; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
+    .panel-hint { color: #668aa3; font-size: 10px; }
+    .map-viewport {
+      position: relative;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      cursor: grab;
+      touch-action: none;
+      border: 1px solid rgba(255, 255, 255, .06);
+      border-radius: 10px;
+      background:
+        linear-gradient(rgba(90, 140, 190, .04) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(90, 140, 190, .04) 1px, transparent 1px),
+        rgba(4, 13, 25, .68);
+      background-size: 36px 36px;
+    }
+    .map-viewport.dragging { cursor: grabbing; }
+    .map-canvas {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 1450px;
+      height: 1590px;
+      transform-origin: top left;
+      will-change: transform;
+      user-select: none;
+    }
+    .map-canvas::before {
+      content: "装箱车间 / PACKING WORKSHOP";
+      position: absolute;
+      left: 18px;
+      top: 415px;
+      color: rgba(90, 206, 238, .3);
+      font-size: 10px;
+      letter-spacing: 3px;
+      writing-mode: vertical-rl;
+    }
+
+    .north-arrow {
+      position: absolute;
+      z-index: 8;
+      right: 18px;
+      top: 16px;
+      width: 58px;
+      height: 72px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #c8f6ff;
+      font-size: 10px;
+      letter-spacing: 1px;
+      text-shadow: none;
+    }
+    .north-arrow b { font-size: 32px; line-height: 32px; color: #ecfdff; }
+
+    .floor-zone {
+      position: absolute;
+      left: 65px;
+      width: 1320px;
+      padding: 14px 12px 10px;
+      border: 2px solid var(--zone-color);
+      border-radius: 8px;
+      background: color-mix(in srgb, var(--zone-color) 4%, rgba(3, 13, 25, .7));
+      box-shadow: inset 0 0 16px rgba(24, 118, 174, .06);
+    }
+    .floor-zone::before, .floor-zone::after {
+      content: "";
+      position: absolute;
+      width: 13px;
+      height: 13px;
+      border: 2px solid var(--zone-color);
+      background: #06111f;
+    }
+    .floor-zone::before { left: -8px; top: -8px; border-right: 0; border-bottom: 0; }
+    .floor-zone::after { right: -8px; bottom: -8px; border-left: 0; border-top: 0; }
+    .zone-label {
+      position: absolute;
+      z-index: 5;
+      left: 14px;
+      top: -13px;
+      height: 24px;
+      padding: 3px 12px;
+      border: 1px solid var(--zone-color);
+      border-radius: 12px;
+      color: #effcff;
+      background: color-mix(in srgb, var(--zone-color) 38%, #071526);
+      box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 1px;
+    }
+    .zone-count { margin-left: 7px; color: rgba(255, 255, 255, .68); font-weight: 400; }
+    .zone-north { top: 28px; height: 182px; --zone-color: #2ca9c2; }
+    .zone-center { top: 265px; height: 950px; --zone-color: #3578b7; }
+    .zone-south { top: 1270px; height: 290px; --zone-color: #367e9d; }
+
+    .slot-grid {
+      height: 100%;
+      display: grid;
+      grid-template-columns: 150px 150px 54px 150px 150px 54px 150px 150px;
+      gap: 8px;
+      justify-content: center;
+    }
+    .zone-center .slot-grid { grid-template-rows: repeat(7, 124px); row-gap: 8px; }
+    .zone-north .slot-grid { grid-template-columns: repeat(3, 150px) 54px repeat(3, 150px); grid-template-rows: 150px; }
+    .agv-column {
+      position: relative;
+      grid-row: 1 / -1;
+      border-left: 2px solid var(--agv);
+      border-right: 2px solid var(--agv);
+      background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(236, 250, 255, .08) 14px 28px);
+      box-shadow: inset 0 0 8px rgba(238, 252, 255, .05);
+    }
+    .agv-column::after {
+      content: "↑  AGV  ↓";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: rgba(235, 250, 255, .75);
+      font-size: 9px;
+      letter-spacing: 4px;
+      writing-mode: vertical-rl;
+    }
+    .agv-main {
+      position: absolute;
+      left: 65px;
+      width: 1320px;
+      height: 30px;
+      border-top: 2px solid var(--agv);
+      border-bottom: 2px solid var(--agv);
+      background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(236, 250, 255, .07) 22px 44px);
+      box-shadow: none;
+      color: rgba(238, 251, 255, .72);
+      font-size: 9px;
+      line-height: 26px;
+      text-align: center;
+      letter-spacing: 14px;
+    }
+    .agv-main.one { top: 220px; }
+    .agv-main.two { top: 1225px; }
+
+    .south-grid {
+      height: 100%;
+      display: grid;
+      grid-template-columns: repeat(8, 125px) 54px 158px;
+      grid-template-rows: repeat(2, 124px);
+      gap: 10px 8px;
+      justify-content: center;
+    }
+    .south-grid .agv-column { grid-column: 9; grid-row: 1 / 3; }
+
+    .slot {
+      position: relative;
+      min-width: 0;
+      overflow: hidden;
+      padding: 8px 9px 7px;
+      border: 1px solid var(--slot-border);
+      border-radius: 5px;
+      color: #eaf7ff;
+      background: linear-gradient(150deg, var(--slot-top), var(--slot-bottom));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 3px 7px rgba(0, 0, 0, .25);
+      cursor: pointer;
+      transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
+    }
+    .slot::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 3px;
+      background: var(--state-color);
+      box-shadow: none;
+    }
+    .slot:hover { z-index: 5; transform: translateY(-2px); filter: brightness(1.12); }
+    .slot.selected {
+      z-index: 6;
+      border-color: #fff;
+      outline: 2px solid rgba(221, 246, 255, .8);
+      outline-offset: 1px;
+    }
+    .slot.search-hit { animation: search-pulse .7s ease-in-out infinite alternate; }
+    @keyframes search-pulse {
+      from { outline-color: rgba(178, 225, 245, .65); }
+      to { outline-color: #ffffff; filter: brightness(1.12); }
+    }
+    .slot-head { min-height: 16px; padding-right: 14px; display: flex; align-items: center; }
+    .slot-code { overflow: hidden; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-overflow: ellipsis; white-space: nowrap; }
+    .slot-state-dot {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--state-color);
+      box-shadow: none;
+    }
+    .slot-name {
+      height: 17px;
+      margin-top: 3px;
+      padding: 2px 5px;
+      overflow: hidden;
+      border-radius: 3px;
+      color: #b8d8ed;
+      background: rgba(0, 0, 0, .2);
+      font-size: 8px;
+      line-height: 13px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .slot-box-panel {
+      min-height: 28px;
+      margin-top: 4px;
+      padding: 3px 5px;
+      overflow: hidden;
+      border: 1px solid rgba(142, 179, 205, .28);
+      border-radius: 4px;
+      background: rgba(0, 0, 0, .22);
+    }
+    .slot-box-panel.has-box { border-color: rgba(70, 151, 190, .7); background: rgba(20, 68, 94, .45); }
+    .slot-box-label { display: block; color: #8faec4; font-size: 7px; line-height: 9px; }
+    .slot-box-panel.has-box .slot-box-label { color: #87c9e5; }
+    .slot-box-value { display: block; margin-top: 1px; overflow: hidden; color: #dbeaf4; font-size: 9px; font-weight: 700; line-height: 11px; text-overflow: ellipsis; white-space: nowrap; }
+    .slot-box-panel.has-box .slot-box-value { color: #dcf4ff; }
+    .slot-info-row { min-height: 15px; display: flex; align-items: center; justify-content: space-between; gap: 4px; color: #91adc1; font-size: 8px; }
+    .slot-info-label { flex: none; }
+    .slot-info-value { min-width: 0; overflow: hidden; color: #f1f8fc; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
+    .slot-info-value.roll-no { color: #b9dff7; }
+    .slot-stock {
+      flex: none;
+      padding: 1px 5px;
+      border: 1px solid var(--state-color);
+      border-radius: 8px;
+      color: var(--state-color);
+      background: color-mix(in srgb, var(--state-color) 10%, transparent);
+      font-size: 7px;
+      font-weight: 700;
+      line-height: 11px;
+      white-space: nowrap;
+    }
+    .slot-stock::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: currentColor; vertical-align: 0; }
+    .slot.empty { --slot-top: rgba(23, 54, 79, .63); --slot-bottom: rgba(8, 28, 46, .62); --slot-border: #345974; opacity: .78; border-style: dashed; }
+    .slot.empty .slot-info-value.roll-no { color: #b9dff7; }
+    .slot.carrier { --slot-top: #153c51; --slot-bottom: #0b2636; --slot-border: #356b85; }
+    .slot.roll { --slot-top: #183d63; --slot-bottom: #0c2844; --slot-border: #426f9b; }
+    .slot.qualified { --slot-top: #16444d; --slot-bottom: #0b2b34; --slot-border: #3c747d; }
+    .slot.controlled { --slot-top: #762536; --slot-bottom: #3b111c; --slot-border: #f05a70; box-shadow: 0 0 12px rgba(255, 83, 100, .45); }
+    .slot.overdue { --slot-top: #8a2935; --slot-bottom: #430f18; --slot-border: #ff6574; animation: overdue-pulse 1.8s ease-in-out infinite; }
+    .slot.controlled::after, .slot.overdue::after { box-shadow: 0 0 8px #ff6574; }
+    .slot.controlled .slot-state-dot, .slot.overdue .slot-state-dot { box-shadow: 0 0 7px #ff6574; }
+    .slot.controlled .slot-stock::before, .slot.overdue .slot-stock::before { box-shadow: 0 0 4px #ff6574; }
+    @keyframes overdue-pulse { 50% { filter: brightness(1.18); box-shadow: 0 0 13px rgba(255, 83, 100, .55); } }
+    .dock-slot { padding: 8px 9px; border-width: 2px; }
+    .dock-slot .slot-code { color: #fff2c2; font-size: 11px; }
+
+    .side-panel { min-height: 0; padding: 12px; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
+    .side-title { display: flex; align-items: center; justify-content: space-between; color: #c0ecff; font-size: 14px; font-weight: 750; }
+    .demo-tag { padding: 3px 8px; border: 1px solid #3f6f95; border-radius: 10px; color: #9fc9e5; background: rgba(45, 101, 142, .14); font-size: 9px; letter-spacing: 1px; }
+    .detail-card {
+      padding: 12px;
+      border: 1px solid rgba(74, 150, 204, .35);
+      border-radius: 8px;
+      background: rgba(5, 20, 36, .72);
+    }
+    .detail-code { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 1px; }
+    .detail-name { margin-top: 3px; color: #75b9df; font-size: 11px; }
+    .detail-status { margin: 10px 0 5px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--detail-color); border-radius: 11px; color: var(--detail-color); font-size: 10px; }
+    .detail-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--detail-color); }
+    .detail-card.alert .detail-status i { box-shadow: 0 0 7px #ff6574; }
+    .detail-rows { margin-top: 7px; border-top: 1px solid rgba(87, 143, 182, .2); }
+    .detail-row { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(87, 143, 182, .13); font-size: 11px; }
+    .detail-row span:first-child { flex: none; color: #779ab3; }
+    .detail-row b { min-width: 0; color: #e9f7ff; text-align: right; overflow-wrap: anywhere; }
+    .detail-row b.em { color: #ffe594; }
+
+    .queue-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
+    .queue-group { flex: 1; min-height: 0; padding: 7px 8px 5px; border: 1px solid rgba(67, 131, 172, .28); border-radius: 7px; background: rgba(5, 20, 36, .5); display: flex; flex-direction: column; }
+    .queue-group.dock-02 { border-color: rgba(54, 126, 157, .34); }
+    .queue-head { margin: 0 0 6px; display: flex; justify-content: space-between; color: #91cce9; font-size: 11px; }
+    .queue-head b { color: #d9f2ff; font-weight: 750; }
+    .queue-head small { margin-left: 5px; color: #638ba5; font-size: 8px; font-weight: 400; }
+    .queue-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow: auto; list-style: none; }
+    .queue-list::-webkit-scrollbar { width: 5px; }
+    .queue-list::-webkit-scrollbar-thumb { border-radius: 3px; background: #27516d; }
+    .queue-item {
+      margin-bottom: 6px;
+      padding: 7px 8px;
+      border: 1px solid rgba(83, 137, 175, .25);
+      border-radius: 6px;
+      background: rgba(8, 27, 46, .72);
+      display: grid;
+      grid-template-columns: 25px 1fr auto;
+      align-items: center;
+      gap: 7px;
+    }
+    .queue-no { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: #77d7eb; background: rgba(35, 213, 232, .11); font-size: 9px; font-weight: 800; }
+    .queue-box { color: #f3fbff; font-size: 10px; font-weight: 700; }
+    .queue-point { margin-top: 2px; color: #6f96ae; font-size: 9px; }
+    .queue-time { color: #ffdb73; font-size: 9px; }
+    .zone-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
+    .zone-mini-item { padding: 7px 5px; border: 1px solid rgba(74, 137, 179, .22); border-radius: 6px; background: rgba(6, 24, 41, .62); text-align: center; }
+    .zone-mini-item b { display: block; color: #ecf9ff; font-size: 15px; }
+    .zone-mini-item span { color: #7197af; font-size: 8px; }
+
+    .context-menu {
+      position: fixed;
+      z-index: 999;
+      display: none;
+      width: 162px;
+      padding: 6px;
+      border: 1px solid #3f7da3;
+      border-radius: 7px;
+      background: #081a2b;
+      box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
+    }
+    .context-menu.open { display: block; }
+    .context-title { padding: 5px 8px 7px; border-bottom: 1px solid #24445d; color: #8bd8ef; font-size: 10px; }
+    .context-action { width: 100%; margin-top: 4px; padding: 7px 8px; border: 0; border-radius: 4px; color: #eaf7ff; background: transparent; text-align: left; cursor: pointer; font-size: 11px; }
+    .context-action:hover:not(:disabled) { background: #104463; }
+    .context-action:disabled { color: #526779; cursor: not-allowed; }
+    .toast { position: fixed; z-index: 1000; left: 50%; bottom: 28px; display: none; padding: 8px 14px; transform: translateX(-50%); border: 1px solid #3fba7e; border-radius: 6px; color: #dcffeb; background: #0f5b38; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); font-size: 11px; }
+  </style>
+</head>
+<body>
+  <main id="stage">
+    <header class="header">
+      <div class="brand">
+        <div class="brand-mark" aria-hidden="true"></div>
+        <div><div class="brand-cn">智能制造物流中心</div><div class="brand-en">SMART LOGISTICS CENTER</div></div>
+      </div>
+      <h1>装箱区信息看板</h1>
+      <div class="clock"><div id="clockTime">--:--:--</div><div id="clockDate">----</div></div>
+    </header>
+
+    <section class="kpis" aria-label="汇总指标">
+      <article class="kpi" style="--accent:#37b8d1"><div class="kpi-icon">Σ</div><div><div id="kpiTotal" class="kpi-value">66<small>个</small></div><div class="kpi-label">规划点位总数</div></div></article>
+      <article class="kpi" style="--accent:#3f91c6"><div class="kpi-icon">IN</div><div><div id="kpiOccupied" class="kpi-value">0<small>个</small></div><div class="kpi-label">当前占用点位</div></div></article>
+      <article class="kpi" style="--accent:#668ba8"><div class="kpi-icon">E</div><div><div id="kpiEmpty" class="kpi-value">0<small>个</small></div><div class="kpi-label">空闲点位</div></div></article>
+      <article class="kpi" style="--accent:#ff6574"><div class="kpi-icon">!</div><div><div id="kpiOverdue" class="kpi-value">0<small>个</small></div><div class="kpi-label">超时滞留点位</div></div></article>
+      <article class="kpi" style="--accent:#4e7fb8"><div class="kpi-icon">%</div><div><div id="kpiRate" class="kpi-value">0<small>%</small></div><div class="kpi-label">综合点位占用率</div></div></article>
+    </section>
+
+    <section class="toolbar">
+      <div class="legend"><span class="legend-title">点位状态</span><span class="legend-item"><i class="legend-dot" style="--c:#71869a"></i>空闲</span><span class="legend-item"><i class="legend-dot" style="--c:#57a8c8"></i>空载具</span><span class="legend-item"><i class="legend-dot" style="--c:#5d92c9"></i>有子卷</span><span class="legend-item"><i class="legend-dot" style="--c:#4eb2b0"></i>合格品</span><span class="legend-item"><i class="legend-dot alert" style="--c:#ff6574"></i>管制/超时</span><span class="legend-item"><i class="legend-dot" style="--c:#f2faff;border-radius:1px"></i>AGV 通道</span></div>
+      <div class="toolbar-spacer"></div>
+      <div class="control"><label for="searchInput">卷号</label><input id="searchInput" type="text" placeholder="输入卷号或点位编码"><button id="searchBtn" class="btn" type="button">定位</button><span id="searchMessage"></span></div>
+      <div class="control"><label for="thresholdInput">超时</label><input id="thresholdInput" type="number" min="1" max="72" step="1"><span>h</span></div>
+      <div class="control"><label for="zoomInput">比例</label><input id="zoomInput" type="number" min="55" max="300" step="5"><span>%</span><button id="resetBtn" class="btn secondary" type="button">复位</button></div>
+    </section>
+
+    <section class="content">
+      <section class="map-panel">
+        <div class="panel-head"><span class="panel-title">装箱区域平面布置图</span><span class="panel-hint">滚轮缩放 · 按住左键拖动 · 双击恢复居中</span></div>
+        <div id="mapViewport" class="map-viewport">
+          <div id="mapCanvas" class="map-canvas">
+            <div class="north-arrow"><b>↑</b><span>北 N</span></div>
+            <div class="floor-zone zone-north"><div class="zone-label">北区 · 装箱信息暂存 <span class="zone-count">6 点位</span></div><div id="northGrid" class="slot-grid"></div></div>
+            <div class="agv-main one">← AGV 主通道 →</div>
+            <div class="floor-zone zone-center"><div class="zone-label">中区 · 待检区 <span class="zone-count">7 排 × 6 列 / 42 点位</span></div><div id="centerGrid" class="slot-grid"></div></div>
+            <div class="agv-main two">← AGV 主通道 →</div>
+            <div class="floor-zone zone-south"><div class="zone-label">南区 · 装箱作业区 <span class="zone-count">16 点位 + 2 等待位</span></div><div id="southGrid" class="south-grid"></div></div>
+          </div>
+        </div>
+      </section>
+
+      <aside class="side-panel">
+        <div class="side-title"><span>点位实时信息</span><span class="demo-tag">DEMO DATA</span></div>
+        <section id="detailCard" class="detail-card" aria-live="polite"></section>
+        <div id="zoneMini" class="zone-mini"></div>
+        <div class="queue-wrap">
+          <section class="queue-group dock-01"><div class="queue-head"><span><b>ZXDJW_01</b><small>装箱区 1 队列</small></span><span id="queueCount01">0 项</span></div><ol id="queueList01" class="queue-list"></ol></section>
+          <section class="queue-group dock-02"><div class="queue-head"><span><b>ZXDJW_02</b><small>装箱区 2 队列</small></span><span id="queueCount02">0 项</span></div><ol id="queueList02" class="queue-list"></ol></section>
+        </div>
+      </aside>
+    </section>
+  </main>
+
+  <div id="contextMenu" class="context-menu"><div id="contextTitle" class="context-title">点位</div><button id="copyRollBtn" class="context-action" type="button">复制卷号</button><button id="copyBoxBtn" class="context-action" type="button">复制箱号</button></div>
+  <div id="toast" class="toast">复制成功</div>
+
+  <script>
+    (() => {
+      'use strict';
+
+      const STATUS = {
+        0: { text: '空闲', color: '#71869a', className: 'empty' },
+        1: { text: '空载具', color: '#57a8c8', className: 'carrier' },
+        2: { text: '有子卷', color: '#5d92c9', className: 'roll' },
+        3: { text: '合格品', color: '#4eb2b0', className: 'qualified' },
+        4: { text: '管制品', color: '#ff6574', className: 'controlled' }
+      };
+      const THRESHOLD_KEY = 'packingDashboardTechThreshold';
+      const ZOOM_KEY = 'packingDashboardTechZoom';
+      const COLUMN_MAP = [1, 2, 4, 5, 7, 8];
+      const NORTH_COLUMN_MAP = [1, 2, 3, 5, 6, 7];
+      const pad = value => String(value).padStart(2, '0');
+      const rangeCodes = (prefix, start, end) => Array.from({ length: end - start + 1 }, (_, index) => `${prefix}_${pad(start + index)}`);
+      const northCodes = rangeCodes('ZJXX', 1, 6);
+      const centerCodes = rangeCodes('DJQ', 1, 42);
+      const southCodes = rangeCodes('ZXQ', 1, 16);
+      const dockCodes = rangeCodes('ZXDJW', 1, 2);
+      const allCodes = [...northCodes, ...centerCodes, ...southCodes, ...dockCodes];
+      const zoneOf = code => code.startsWith('ZJXX') ? 'north' : code.startsWith('DJQ') ? 'center' : code.startsWith('ZXDJW') ? 'dock' : 'south';
+      const pointNameOf = code => code.startsWith('ZJXX') ? '装箱信息暂存位' : code.startsWith('DJQ') ? '待检缓存位' : code.startsWith('ZXDJW') ? '装箱等待位' : Number(code.slice(-2)) <= 8 ? '装箱区 1 作业位' : '装箱区 2 作业位';
+      const statusPattern = [2, 3, 0, 1, 2, 4, 3, 0, 2, 1, 3, 2];
+
+      function createMockPoint(code, index) {
+        const zone = zoneOf(code);
+        let status = statusPattern[(index * 5 + code.length) % statusPattern.length];
+        if (zone === 'dock') status = index % 2 ? 1 : 3;
+        const occupied = status >= 2;
+        const durationHours = occupied ? ((index * 7) % 19) + .5 : status === 1 ? ((index * 3) % 5) + .2 : 0;
+        const entryTime = new Date(Date.now() - durationHours * 3600000);
+        const rollNo = occupied ? `R260814${String(index + 1).padStart(4, '0')}` : '';
+        const hasBox = occupied && (zone === 'south' || zone === 'dock' || index % 3 === 0);
+        const boxNo = hasBox ? `BX2608${String((index % 28) + 1).padStart(3, '0')}` : '';
+        return {
+          code,
+          zone,
+          name: pointNameOf(code),
+          status,
+          rollNo,
+          boxNo,
+          width: occupied ? [980, 1120, 1250, 1380][index % 4] : null,
+          diameter: occupied ? [760, 820, 900][index % 3] : null,
+          durationHours,
+          entryTime
+        };
+      }
+
+      const points = allCodes.map(createMockPoint);
+      const pointMap = new Map(points.map(point => [point.code, point]));
+      let thresholdHours = Math.max(1, Number(localStorage.getItem(THRESHOLD_KEY)) || 12);
+      let fitScale = 1;
+      let mapScale = 1;
+      let panX = 0;
+      let panY = 0;
+      let selectedCode = '';
+      let contextPoint = null;
+
+      const $ = id => document.getElementById(id);
+      const formatDateTime = date => {
+        const d = new Date(date);
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+      };
+      const durationText = hours => hours ? `${Math.floor(hours)}h ${Math.round((hours % 1) * 60)}m` : '--';
+      const isOverdue = point => point.status >= 2 && point.durationHours >= thresholdHours;
+
+      function slotElement(point, options = {}) {
+        const meta = STATUS[point.status];
+        const overdue = isOverdue(point);
+        const element = document.createElement('article');
+        element.className = `slot ${meta.className}${overdue ? ' overdue' : ''}${options.dock ? ' dock-slot' : ''}`;
+        element.style.setProperty('--state-color', overdue ? '#ff6574' : meta.color);
+        element.dataset.code = point.code;
+        element.dataset.roll = point.rollNo;
+        element.dataset.box = point.boxNo;
+        element.title = `${point.code}｜${point.name}\n库存状态：${overdue ? '超时滞留' : meta.text}\n卷号：${point.rollNo || '空闲'}\n箱号：${point.boxNo || '未组盘'}\n停留：${durationText(point.durationHours)}`;
+        const statusText = overdue ? '超时滞留' : meta.text;
+        const specification = point.width ? `${point.width} × ${point.diameter}` : '- × -';
+        element.innerHTML = `<i class="slot-state-dot" aria-hidden="true"></i>
+          <div class="slot-head"><span class="slot-code">${point.code}</span></div>
+          <div class="slot-name" title="${point.name}">${point.name}</div>
+          <div class="slot-box-panel ${point.boxNo ? 'has-box' : ''}"><span class="slot-box-label">组盘木箱</span><span class="slot-box-value">${point.boxNo || '未组盘'}</span></div>
+          <div class="slot-info-row"><span class="slot-info-label">库存状态</span><span class="slot-stock">${statusText}</span></div>
+          <div class="slot-info-row"><span class="slot-info-label">卷号</span><span class="slot-info-value roll-no" title="${point.rollNo}">${point.rollNo || '空闲'}</span></div>
+          <div class="slot-info-row"><span class="slot-info-label">规格</span><span class="slot-info-value">${specification}</span></div>`;
+        element.addEventListener('click', event => {
+          event.stopPropagation();
+          selectPoint(point.code);
+        });
+        element.addEventListener('contextmenu', event => showContextMenu(event, point));
+        return element;
+      }
+
+      function addAisles(grid, rowCount, columns = [3, 6]) {
+        columns.forEach(column => {
+          const aisle = document.createElement('div');
+          aisle.className = 'agv-column';
+          aisle.style.gridColumn = column;
+          aisle.style.gridRow = `1 / ${rowCount + 1}`;
+          aisle.setAttribute('aria-label', 'AGV 通道');
+          grid.appendChild(aisle);
+        });
+      }
+
+      function renderMap() {
+        const northGrid = $('northGrid');
+        const centerGrid = $('centerGrid');
+        const southGrid = $('southGrid');
+        northGrid.innerHTML = '';
+        centerGrid.innerHTML = '';
+        southGrid.innerHTML = '';
+        addAisles(northGrid, 1, [4]);
+        addAisles(centerGrid, 7);
+
+        northCodes.forEach((code, index) => {
+          const slot = slotElement(pointMap.get(code));
+          slot.style.gridColumn = NORTH_COLUMN_MAP[index];
+          slot.style.gridRow = 1;
+          northGrid.appendChild(slot);
+        });
+
+        centerCodes.forEach((code, index) => {
+          const slot = slotElement(pointMap.get(code));
+          slot.style.gridColumn = COLUMN_MAP[index % 6];
+          slot.style.gridRow = Math.floor(index / 6) + 1;
+          centerGrid.appendChild(slot);
+        });
+
+        const southAisle = document.createElement('div');
+        southAisle.className = 'agv-column';
+        southAisle.setAttribute('aria-label', 'AGV 通道');
+        southGrid.appendChild(southAisle);
+        southCodes.forEach((code, index) => {
+          const slot = slotElement(pointMap.get(code));
+          slot.style.gridColumn = (index % 8) + 1;
+          slot.style.gridRow = Math.floor(index / 8) + 1;
+          southGrid.appendChild(slot);
+        });
+        dockCodes.forEach((code, index) => {
+          const slot = slotElement(pointMap.get(code), { dock: true });
+          slot.style.gridColumn = 10;
+          slot.style.gridRow = index + 1;
+          southGrid.appendChild(slot);
+        });
+
+        if (selectedCode) selectPoint(selectedCode);
+        updateDashboard();
+      }
+
+      function updateDashboard() {
+        const occupied = points.filter(point => point.status >= 2);
+        const overdue = occupied.filter(isOverdue);
+        $('kpiTotal').innerHTML = `${points.length}<small>个</small>`;
+        $('kpiOccupied').innerHTML = `${occupied.length}<small>个</small>`;
+        $('kpiEmpty').innerHTML = `${points.length - occupied.length}<small>个</small>`;
+        $('kpiOverdue').innerHTML = `${overdue.length}<small>个</small>`;
+        $('kpiRate').innerHTML = `${Math.round(occupied.length / points.length * 100)}<small>%</small>`;
+
+        const zones = [
+          ['北区', northCodes],
+          ['中区', centerCodes],
+          ['南区', [...southCodes, ...dockCodes]]
+        ];
+        $('zoneMini').innerHTML = zones.map(([name, codes]) => {
+          const used = codes.filter(code => pointMap.get(code).status >= 2).length;
+          return `<div class="zone-mini-item"><b>${used}/${codes.length}</b><span>${name}占用</span></div>`;
+        }).join('');
+
+        renderQueueGroup('queueList01', 'queueCount01', southCodes.slice(0, 8));
+        renderQueueGroup('queueList02', 'queueCount02', southCodes.slice(8, 16));
+        document.querySelectorAll('.queue-item[data-code]').forEach(item => item.addEventListener('click', () => selectPoint(item.dataset.code)));
+      }
+
+      function renderQueueGroup(listId, countId, codes) {
+        const queue = codes.map(code => pointMap.get(code)).filter(point => point.boxNo).sort((a, b) => b.durationHours - a.durationHours);
+        $(countId).textContent = `${queue.length} 项`;
+        $(listId).innerHTML = queue.length ? queue.map((point, index) => `<li class="queue-item" data-code="${point.code}"><span class="queue-no">${pad(index + 1)}</span><div><div class="queue-box">${point.boxNo}</div><div class="queue-point">${point.code} · ${point.rollNo}</div></div><span class="queue-time">${durationText(point.durationHours)}</span></li>`).join('') : '<li class="queue-item">当前队列为空</li>';
+      }
+
+      function selectPoint(code) {
+        const point = pointMap.get(code);
+        if (!point) return;
+        selectedCode = code;
+        document.querySelectorAll('.slot.selected').forEach(element => element.classList.remove('selected'));
+        const element = document.querySelector(`.slot[data-code="${code}"]`);
+        if (element) element.classList.add('selected');
+        const meta = STATUS[point.status];
+        const overdue = isOverdue(point);
+        const statusColor = overdue ? '#ff6574' : meta.color;
+        $('detailCard').classList.toggle('alert', overdue || point.status === 4);
+        $('detailCard').style.setProperty('--detail-color', statusColor);
+        $('detailCard').innerHTML = `<div class="detail-code">${point.code}</div><div class="detail-name">${point.name}</div><div class="detail-status"><i></i>${overdue ? '超时滞留' : meta.text}</div><div class="detail-rows"><div class="detail-row"><span>卷号</span><b class="em">${point.rollNo || '空闲'}</b></div><div class="detail-row"><span>组盘木箱</span><b class="em">${point.boxNo || '未组盘'}</b></div><div class="detail-row"><span>产品规格</span><b>${point.width ? `${point.width} × ${point.diameter} mm` : '--'}</b></div><div class="detail-row"><span>进入时间</span><b>${point.durationHours ? formatDateTime(point.entryTime) : '--'}</b></div><div class="detail-row"><span>停留时长</span><b>${durationText(point.durationHours)}</b></div></div>`;
+      }
+
+      function locateRoll() {
+        const query = $('searchInput').value.trim().toUpperCase();
+        const message = $('searchMessage');
+        document.querySelectorAll('.search-hit').forEach(element => element.classList.remove('search-hit'));
+        message.className = '';
+        if (!query) {
+          message.textContent = '请输入查询内容';
+          message.classList.add('error');
+          return;
+        }
+        const point = points.find(item => item.rollNo.toUpperCase().includes(query) || item.code.includes(query));
+        if (!point) {
+          message.textContent = '未找到匹配点位';
+          message.classList.add('error');
+          return;
+        }
+        const target = document.querySelector(`.slot[data-code="${point.code}"]`);
+        if (!target) return;
+        target.classList.add('search-hit');
+        selectPoint(point.code);
+        focusElement(target);
+        message.textContent = `已定位 ${point.code}`;
+        message.classList.add('ok');
+      }
+
+      function applyTransform() {
+        $('mapCanvas').style.transform = `translate(${panX}px, ${panY}px) scale(${mapScale})`;
+        $('zoomInput').value = fitScale ? Math.round(mapScale / fitScale * 100) : 100;
+      }
+
+      function fitMap() {
+        const viewport = $('mapViewport');
+        const canvas = $('mapCanvas');
+        fitScale = Math.min(viewport.clientWidth / canvas.offsetWidth, viewport.clientHeight / canvas.offsetHeight) * .96;
+        const saved = Number(localStorage.getItem(ZOOM_KEY));
+        const ratio = Number.isFinite(saved) && saved >= .55 && saved <= 3 ? saved : 1;
+        mapScale = fitScale * ratio;
+        panX = (viewport.clientWidth - canvas.offsetWidth * mapScale) / 2;
+        panY = (viewport.clientHeight - canvas.offsetHeight * mapScale) / 2;
+        applyTransform();
+      }
+
+      function focusElement(element) {
+        const viewport = $('mapViewport');
+        const canvasRect = $('mapCanvas').getBoundingClientRect();
+        const targetRect = element.getBoundingClientRect();
+        const worldX = (targetRect.left + targetRect.width / 2 - canvasRect.left) / mapScale;
+        const worldY = (targetRect.top + targetRect.height / 2 - canvasRect.top) / mapScale;
+        mapScale = Math.max(mapScale, fitScale * 2);
+        panX = viewport.clientWidth / 2 - worldX * mapScale;
+        panY = viewport.clientHeight / 2 - worldY * mapScale;
+        localStorage.setItem(ZOOM_KEY, String(mapScale / fitScale));
+        applyTransform();
+      }
+
+      function resetMap() {
+        localStorage.setItem(ZOOM_KEY, '1');
+        fitMap();
+      }
+
+      function showContextMenu(event, point) {
+        event.preventDefault();
+        event.stopPropagation();
+        contextPoint = point;
+        selectPoint(point.code);
+        const menu = $('contextMenu');
+        $('contextTitle').textContent = point.code;
+        $('copyRollBtn').disabled = !point.rollNo;
+        $('copyBoxBtn').disabled = !point.boxNo;
+        menu.classList.add('open');
+        const x = Math.min(event.clientX, window.innerWidth - 174);
+        const y = Math.min(event.clientY, window.innerHeight - 120);
+        menu.style.left = `${x}px`;
+        menu.style.top = `${y}px`;
+      }
+
+      function hideContextMenu() { $('contextMenu').classList.remove('open'); }
+
+      async function copyValue(type) {
+        const value = type === 'roll' ? contextPoint?.rollNo : contextPoint?.boxNo;
+        if (!value) return;
+        try {
+          await navigator.clipboard.writeText(value);
+        } catch (error) {
+          const area = document.createElement('textarea');
+          area.value = value;
+          area.style.position = 'fixed';
+          area.style.opacity = '0';
+          document.body.appendChild(area);
+          area.select();
+          document.execCommand('copy');
+          area.remove();
+        }
+        hideContextMenu();
+        const toast = $('toast');
+        toast.textContent = `已复制${type === 'roll' ? '卷号' : '箱号'}：${value}`;
+        toast.style.display = 'block';
+        window.setTimeout(() => { toast.style.display = 'none'; }, 1800);
+      }
+
+      function updateClock() {
+        const now = new Date();
+        const week = ['日', '一', '二', '三', '四', '五', '六'];
+        $('clockTime').textContent = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+        $('clockDate').textContent = `${now.getFullYear()} 年 ${pad(now.getMonth() + 1)} 月 ${pad(now.getDate())} 日　星期${week[now.getDay()]}`;
+      }
+
+      function scaleStage() {
+        const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
+        $('stage').style.transform = `scale(${scale})`;
+      }
+
+      function bindEvents() {
+        $('searchBtn').addEventListener('click', locateRoll);
+        $('searchInput').addEventListener('keydown', event => { if (event.key === 'Enter') locateRoll(); });
+        $('thresholdInput').value = thresholdHours;
+        $('thresholdInput').addEventListener('change', () => {
+          const value = Math.max(1, Math.min(72, Number($('thresholdInput').value) || 12));
+          thresholdHours = value;
+          $('thresholdInput').value = value;
+          localStorage.setItem(THRESHOLD_KEY, String(value));
+          renderMap();
+        });
+        $('zoomInput').addEventListener('change', () => {
+          const ratio = Math.max(.55, Math.min(3, (Number($('zoomInput').value) || 100) / 100));
+          const viewport = $('mapViewport');
+          const canvas = $('mapCanvas');
+          mapScale = fitScale * ratio;
+          panX = (viewport.clientWidth - canvas.offsetWidth * mapScale) / 2;
+          panY = (viewport.clientHeight - canvas.offsetHeight * mapScale) / 2;
+          localStorage.setItem(ZOOM_KEY, String(ratio));
+          applyTransform();
+        });
+        $('resetBtn').addEventListener('click', resetMap);
+        $('mapViewport').addEventListener('dblclick', resetMap);
+        $('copyRollBtn').addEventListener('click', () => copyValue('roll'));
+        $('copyBoxBtn').addEventListener('click', () => copyValue('box'));
+        document.addEventListener('click', event => { if (!event.target.closest('#contextMenu')) hideContextMenu(); });
+
+        const viewport = $('mapViewport');
+        viewport.addEventListener('wheel', event => {
+          event.preventDefault();
+          const rect = viewport.getBoundingClientRect();
+          const mouseX = event.clientX - rect.left;
+          const mouseY = event.clientY - rect.top;
+          const worldX = (mouseX - panX) / mapScale;
+          const worldY = (mouseY - panY) / mapScale;
+          const next = Math.max(fitScale * .55, Math.min(fitScale * 3, mapScale * (event.deltaY < 0 ? 1.11 : .9)));
+          panX = mouseX - worldX * next;
+          panY = mouseY - worldY * next;
+          mapScale = next;
+          localStorage.setItem(ZOOM_KEY, String(mapScale / fitScale));
+          applyTransform();
+        }, { passive: false });
+
+        let dragging = false;
+        let startX = 0;
+        let startY = 0;
+        let startPanX = 0;
+        let startPanY = 0;
+        viewport.addEventListener('mousedown', event => {
+          if (event.button !== 0 || event.target.closest('.slot')) return;
+          dragging = true;
+          startX = event.clientX;
+          startY = event.clientY;
+          startPanX = panX;
+          startPanY = panY;
+          viewport.classList.add('dragging');
+        });
+        window.addEventListener('mousemove', event => {
+          if (!dragging) return;
+          panX = startPanX + event.clientX - startX;
+          panY = startPanY + event.clientY - startY;
+          applyTransform();
+        });
+        window.addEventListener('mouseup', () => { dragging = false; viewport.classList.remove('dragging'); });
+        window.addEventListener('resize', () => { scaleStage(); fitMap(); });
+      }
+
+      renderMap();
+      selectPoint('DJQ_01');
+      bindEvents();
+      scaleStage();
+      requestAnimationFrame(fitMap);
+      updateClock();
+      window.setInterval(updateClock, 1000);
+    })();
+  </script>
+</body>
+</html>