4.1 KiB
装箱区信息看板实现计划
面向 AI 代理的工作者： 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（
- [ ]）语法来跟踪进度。
目标： 创建一个包含 66 个点位、CAD 式平面布局和完整 Demo 交互的独立装箱区信息看板 HTML。
架构： 使用一个 HTML 文件内嵌样式、确定性模拟数据和交互脚本。数据生成、点位渲染、统计计算、地图变换与用户交互使用独立函数组织，不依赖 API、CDN 或构建工具。
技术栈： HTML5、CSS3、原生 JavaScript、浏览器 localStorage 与 Clipboard API。
文件结构
- 创建：
packingAreaDashboard.html，承载页面结构、视觉样式、模拟数据、布局渲染和交互。 - 创建：
docs/superpowers/specs/2026-08-14-packing-area-dashboard-design.md，记录已确认设计。 - 创建：
docs/superpowers/plans/2026-08-14-packing-area-dashboard.md，记录实现和验证步骤。
任务 1：建立页面骨架与大屏视觉
文件：
-
创建：
packingAreaDashboard.html -
步骤 1：建立 1920 × 1080 舞台
创建 #stage、顶部标题、KPI、工具条、地图和侧栏结构，并使用 scaleStage() 根据窗口尺寸等比缩放。
- 步骤 2：实现深色科技风样式
使用径向渐变、网格背景、青蓝描边、玻璃面板和细微辉光，避免外部字体与图片依赖。
任务 2：生成 66 个点位与模拟数据
文件：
-
修改：
packingAreaDashboard.html -
步骤 1：定义点位编码生成函数
rangeCodes(prefix, start, end) 必须生成补零后的编码；北区 6 个、中区 42 个、南区 18 个。
- 步骤 2：定义确定性模拟数据
createMockPoint(code, index, zone) 根据索引生成稳定的库存状态、卷号、箱号、进入时间和停留时长，刷新页面后数据仍保持一致。
- 步骤 3：渲染点位卡片
renderSlot(point, className) 输出编码、状态、卷号、箱号和停留时长，并附带搜索、选中和右键菜单所需数据属性。
任务 3：绘制北中南平面布局和 AGV 通道
文件：
-
修改：
packingAreaDashboard.html -
步骤 1：渲染北区
使用 6 列网格呈现 ZJXX_01 至 ZJXX_06，在区域上下绘制横向 AGV 通道。
- 步骤 2：渲染中区
使用 7 行 × 6 列网格呈现 DJQ_01 至 DJQ_42，在两列点位之间插入纵向白色通道，并在区域周边绘制闭合通道。
- 步骤 3：渲染南区
两行分别呈现 8 个 ZXQ 点位，在右侧呈现 ZXDJW_01 和 ZXDJW_02，使用不同区域标签区分装箱区 1 和装箱区 2。
任务 4：实现统计与交互
文件：
-
修改：
packingAreaDashboard.html -
步骤 1：计算 KPI 和队列
updateDashboard() 根据点位状态和超时阈值刷新总数、占用、空闲、超时、占用率及装箱队列。
- 步骤 2：实现卷号搜索定位
locateRoll() 匹配完整或部分卷号，选中第一个结果，将地图平移到点位附近并显示结果提示。
- 步骤 3：实现地图操作
fitMap()、applyTransform()、滚轮事件和拖动事件共同支持适配、缩放、平移与双击复位。
- 步骤 4：实现点位详情与右键复制
点位单击后调用 selectPoint() 更新详情；右键菜单根据字段是否存在启用复制按钮，并使用 Clipboard API 或文本选择回退方案复制。
任务 5：执行交付验证
文件：
-
验证：
packingAreaDashboard.html -
步骤 1：执行静态结构检查
确认文件包含 66 个点位的生成规则、无 fetch() 和外部资源引用，并检查脚本语法。
- 步骤 2：执行浏览器视觉检查
以 1920 × 1080 视口打开本地文件，确认三大区域、KPI、侧栏和点位内容没有遮挡或主体溢出。
- 步骤 3：执行交互检查
验证卷号搜索、点位选择、缩放、复位和右键菜单，确认浏览器控制台无错误。