# PDA 拣货静态页面设计 ## 目标 在 `apps/pda-uniapp` 中将 `docs/悦/PDA拣货/pda-picking.html` 转换为可运行在 Android PDA 上的 uni-app 页面。原型是唯一视觉和交互依据；实现保留原型文案、布局、颜色、页面密度、演示数据和本地状态流。 本次不接后端、不实现真实鉴权、不接厂商扫描 SDK、不实现持久化或离线队列。 ## 实现方案 采用单页面作业流：登录态与拣货态均由 `pages/index/index.vue` 承载，使用 Vue 本地响应式状态切换，而不拆成多个路由。原因如下： - 原型本身是连续的单页状态机，登录后立即进入同一作业上下文。 - 本阶段没有后端、深链、权限路由或跨页面数据恢复需求。 - 单页面可避免箱号、货品状态和弹层状态在路由之间同步，保持改动小而聚焦。 为避免页面文件承担过多重复结构，可将货品卡片和通用弹层拆成局部业务组件；演示数据与状态转换仍由页面统一管理。当前不引入状态管理库或新依赖。 ## 页面结构 ### 登录态 - 蓝色渐变背景、系统标识、`柏悦物流 · PDA拣货` 标题和副标题。 - 工号、密码、作业仓库三个字段。 - 普通登录按钮和三个演示账号快捷登录按钮。 - 空工号、空密码和账号密码错误使用原型文案提示。 - 登录成功后显示欢迎提示并进入拣货态；退出后清空登录表单与作业状态。 ### 拣货态 - 顶部蓝色作业栏：页面标题、仓库、退出、当前箱号、订单号和人员身份。 - `pages.json` 将首页设置为 `navigationStyle: "custom"`，不显示当前标题为 `uni-app` 的原生导航栏，避免与原型作业栏重复；页面自行处理状态栏安全区。 - 箱号选择器：显示全部演示箱号与订单号，切换时重置当前箱的未提交本地操作。 - 扫码区：输入或扫描 SKU 后回车确认；匹配当前箱中待拣 SKU 时标记已拣，错误码显示失败提示。登录进入拣货态、成功或失败扫码、确认拣出、撤销以及关闭任一弹层后，都应把焦点恢复到扫码输入框；打开需要输入数量的部分拣货弹层时，焦点临时交给数量输入框。成功扫码后清空输入值，无效码和重复扫描已处理 SKU 时保留明确错误反馈，并在反馈后继续接收下一次扫描。 - 箱号与订单信息卡。 - 拣货进度、货品列表、集装箱完成/待拣统计和底部提交栏。 - 底部提交栏固定在可视区域底部，并避让 Android 导航栏安全区。 - 提交按钮初始禁用；当所有货品均已处理时启用并显示“提交拣货完成”；当至少存在一件已拣或部分拣货、同时仍有待拣货品时启用并显示“提交拣货完成（N件待拣将视为未拣）”；仅发生部分跳拣且仍有待拣货品时保持禁用。 ### 货品状态 每个货品使用以下本地状态之一： - `pending`：待拣，提供确认拣出、部分拣货、跳拣。 - `picked`：已拣，显示完成标签与撤销入口。 - `partial`：部分拣货，显示实际数量、目标数量与撤销入口。 - `skipped`：跳拣或提交时自动未拣，显示原因与撤销入口。 待拣货品排在已处理货品之前。进度按已拣、部分拣和跳拣的已处理数量计算。 ## 弹层与反馈 - 跳拣弹层：单选原型中的五个原因，未选择时禁止确认并提示。 - 部分拣货弹层：显示 SKU、描述、总量、单位、快捷比例和数量输入；数量必须大于 0 且小于需求总量。 - 集装箱列表弹层：分别展示已完成与待拣箱，允许从待拣列表切换箱号。 - 完成弹层：展示已拣、部分拣、跳拣/未拣统计，并提供返回查看和下一箱。 - 短反馈沿用原型顶部提示条及成功、警告、错误配色。 Android 系统返回键按以下优先级处理：关闭当前弹层，关闭箱号下拉；若处于拣货态且无覆盖层，则调用与“退出”按钮相同的重置流程返回登录态；登录态交由系统退出页面。 ## 本地数据与状态 保留原型中的三个箱号、订单号、货品、库位、单位、演示账号和跳拣原因。页面维护： - 当前用户与仓库； - 当前箱号索引； - 当前箱内各 SKU 状态； - 部分拣货数量； - 已完成箱号集合； - 当前下拉、弹层、目标货品和提示条状态； - 扫码输入值。 提交时，未处理货品按原型标记为“未拣出（提交时自动标记）”，保存当前箱的最终演示状态并更新集装箱统计。刷新、退出或重启应用后允许数据重置，因为本阶段没有持久化要求。 ## 视觉与响应式 - 颜色遵循原型：主色 `#1a73e8`、成功 `#0d9488`、危险 `#dc2626`、警告 `#f59e0b`、页面背景 `#f5f7fa`。 - 保留 12px 圆角、浅阴影、蓝色当前货品边线、状态色和卡片密度。 - 使用 uni-app 支持的 `rpx`、百分比和安全区变量适配 Android PDA，以 `360 × 640 dp` 为主要检查尺寸，兼容约 `320–480 dp` 宽度。 - 不引入新字体、图片生成素材、第三方图标库或新的视觉语言。 - 图标优先使用简单 CSS/文本符号或现有静态资源，避免依赖网页专属 SVG 注入方式。 - 本阶段不使用网络、震动、相机或存储能力，因此实现时移除 `manifest.json` 中手工声明的 `VIBRATE` 和 `ACCESS_NETWORK_STATE` 权限；未来接入对应能力时再按明确用途恢复最小权限。 ## 边界状态 - 登录加载态：当前纯本地操作无需异步加载，不添加虚假等待动画。 - 空态：保留“该箱号暂无拣货任务”“暂无已拣完成的集装箱”“所有集装箱已拣完成”等原型语义。 - 错误态：覆盖登录校验、空扫码、无效 SKU、未选跳拣原因、无效部分数量和最后一箱提示。 - 重复操作：已处理货品不再匹配扫码；撤销后恢复为待拣。 - 权限态：本阶段没有服务端权限；人员角色仅作演示展示，不据此隐藏功能。 - 软键盘：输入区与部分拣货输入不得被键盘永久遮挡，关闭弹层后恢复扫码输入上下文。 ## 验证 仓库当前没有项目根级依赖清单、可核实的构建脚本或自动化测试设施，因此不新增或编造测试命令。实现后进行以下可核实检查： 1. 静态检查 `pages.json`、Vue 模板、脚本和样式是否符合现有 uni-app 结构。 2. 若当前环境可用 HBuilderX/uni-app 运行能力，则以 Android App 方式运行；否则明确记录未执行构建。 3. 在常见 PDA 尺寸核对登录、主作业、弹层、底部固定栏和软键盘遮挡。 4. 手工走通快捷登录、箱号切换、有效/无效/重复扫码、确认拣出、部分拣货、跳拣、撤销、提前提交、完整提交和下一箱，并核对每次关键操作后的扫码焦点。 5. 检查提交按钮在初始、仅部分跳拣、存在已拣且仍有待拣、全部处理四种状态下的启用状态和文案。 6. 检查系统返回对弹层、下拉、拣货态和登录态的处理，并确认返回登录态时执行完整状态重置。 7. 检查首页未出现重复原生导航栏，并确认 Android 配置不再手工声明当前未使用的网络与震动权限。 真实扫描速度、连续扫描、低电量、断网、前后台切换、厂商扫描头和正式打包发布不属于本次静态实现的可验证范围，需在设备与工具链确定后补测。