补充客户端新增页和海外PDA界面规范

This commit is contained in:
2026-10-30 15:42:39 +08:00
parent 3ff7841a89
commit 38a136e509
4 changed files with 117 additions and 0 deletions
+14
View File
@@ -35,6 +35,20 @@
- 独立页面、居中弹框、抽屉仍按对应操作的已确认承载方式;本规范不将所有新增操作改成独立页面。后续用户明确确认的外观例外优先于本章,其余通用外观不回退到旧原型的大留白、阴影或说明堆叠。
- 本章只约束新增内容区。复用现有侧边栏、顶栏、页签和面包屑,不复制设计稿中的静态用户名、菜单或页签,不因新增页改造修改公共外框。
### 企业设置承载方式
以下为当前已确认的企业设置操作,不按字段数量自动改造其他业务。企业设置常规表单采用“完整维护进入独立页面,少量字段用居中弹框”的方式;这些操作不再使用右侧抽屉。
| 操作 | 当前承载方式 |
|---|---|
| 编辑企业资料 | 独立页面,分企业基本信息、联系信息两块;保存后返回企业资料 |
| 成员新增/编辑 | 独立页面,分账号信息、联系信息与角色两块;保存后返回成员列表 |
| 角色新增/编辑 | 三个字段,使用居中弹框;内置角色和权限限制沿用业务规则 |
| 角色权限分配 | 保持现有独立页面 |
| 资质上传、文件预览、成员密码重置 | 保持各自专项弹框与原有业务校验 |
独立编辑页沿用本章的满宽、白色无阴影卡片、三列短字段、12px 模块间距与右上角校验提示。新增与编辑路由分别校验对应操作权限,菜单仍只展示原有业务入口;直接打开与刷新应重新加载服务端资料,加载失败提供重试,保存失败保留填写内容。
### 页面组织与信息密度
1. 独立新增页使用一个清晰标题,右侧按现有列表访问权限提供返回入口;默认不增加标题下的解释性段落。
+1
View File
@@ -34,6 +34,7 @@
| 单据编号、订单主状态与操作 | [编号契约](业务单据编号契约.md)、[订单状态契约](统一订单主状态与操作契约.md),按问题选一项 |
| 本机资源、最小验证、工作区与协作执行 | [工程执行约束](AI工程执行与协作约束.md) |
| Admin 样式、Client 样式或视觉验收 | [Admin 样式](Admin高密度界面规范.md)、[Client 样式](Client界面样式规范.md)、[前端验收](Admin-Client前端原型还原验收规则.md),不将三份作为共同必读 |
| 海外 PDA 首页、作业列表与待办样式 | [海外 PDA 样式规范](海外PDA界面样式规范.md),不自动套用 Admin/Client 样式 |
| 测试 Jenkins、数据库操作与中文注释 | [测试部署指南](测试环境Jenkins部署指南.md)、[数据库操作手册](../baiyue-firstleg/deploy/sql/数据库迁移操作手册.md)、[数据库注释规范](数据库注释维护规范.md),按操作选读 |
| 测量设备上传 | [墨家接口说明](墨家设备测量上传接口说明-V3.md) |
+1
View File
@@ -84,6 +84,7 @@
| 拼车需求池、车次余位、销售拼车意向 | [模块指引](../apps/admin-web/src/modules/overseas-master-data/AGENTS.md) | [对应章节](业务实现边界.md#拼车需求池车次余位销售拼车意向) |
| 国内出仓后船节点 | [模块指引](../apps/admin-web/src/modules/port-schedules/AGENTS.md) | [对应章节](业务实现边界.md#国内出仓后船节点) |
| 海外出库、排车、派送、异常与回访 | [模块指引](../apps/admin-web/src/modules/overseas-warehouse/AGENTS.md) | [对应章节](业务实现边界.md#海外出库排车派送异常与回访) |
| 海外费用明细、仓租库存与资金/投递重试 | [模块指引](../apps/admin-web/src/modules/overseas-business/AGENTS.md) | [后端入口](../baiyue-firstleg/lastleg-service/AGENTS.md#快速索引) |
| 海外业务费用来源与客户财务 | [模块指引](../baiyue-firstleg/finance/AGENTS.md) | [对应章节](业务实现边界.md#海外业务费用来源与客户财务) |
| 自营销量与领星统计 | [模块指引](../apps/admin-web/src/modules/self-operated/AGENTS.md) | [对应章节](业务实现边界.md#自营销量与领星统计) |
| 预约管理与工作日历 | [模块指引](../apps/admin-web/src/modules/appointment-calendar/AGENTS.md) | [对应章节](业务实现边界.md#预约管理与工作日历) |
+101
View File
@@ -0,0 +1,101 @@
# 海外 PDA 界面样式规范
## 适用范围与维护职责
- 本文是 `apps/pda-overseas-uniapp/` 首页、作业入口和卡片列表外观的唯一维护正文,后续同类页面按本文调整。Admin、Client、国内 PDA 各自遵循所属规范,不自动互相套用。
- 当前样板为“拆柜收货”的候选柜列表、“仓储转运测量”的待测列表,以及首页的入口卡片与分项待办。规则统一不代表其他页面已改造或通过真机验收;详情、扫码、拍照和测量表单不因列表调整自动改版。
- 本文维护信息层级、尺寸、颜色、去重和反馈方式;业务字段、状态、权限、统计资格及提交行为仍按业务契约和实际接口维护。后续样式规则只更新本文,不另建页面样式总结副本。
按任务阅读:列表读“卡片列表”“信息去重”“状态与反馈”;首页读“首页入口与待办”;局部文案只核对对应条款。
| 当前实现入口 | 用途 |
|---|---|
| [公共样式](../apps/pda-overseas-uniapp/src/styles/pda.scss)、[列表样式](../apps/pda-overseas-uniapp/src/styles/task-list.scss)、[PortalHeader](../apps/pda-overseas-uniapp/src/components/PortalHeader.vue) | 页面外壳、导航、首页网格与基础样式;其他接入列表使用 `pda-task-list` 范围内的列表类,不覆盖未接入分支 |
| [拆柜收货](../apps/pda-overseas-uniapp/src/pages/operation/operation.vue) | `phase === 'candidates'` 列表分支;`.container-card-compact` |
| [仓储转运测量](../apps/pda-overseas-uniapp/src/pages/warehouse-transfer/warehouse-transfer.vue) | `entryMode === 'list'` 分支;`.transfer-card` |
| [首页](../apps/pda-overseas-uniapp/src/pages/home/home.vue)、[入口配置](../apps/pda-overseas-uniapp/src/data/overseas-workbench.js)、[待办读取](../apps/pda-overseas-uniapp/src/api/workbench.js) | 入口名称、卡片密度、待办展示与数据来源 |
## 卡片列表
### 页面与工具栏
- 顶部沿用 `PortalHeader`,保留返回和个人中心。页面标题只在导航栏出现一次,正文不再重复放置同名大标题。当前入口与页标题使用“仓储转运测量”。
- 工具栏左侧显示当前列表名称与数量,右侧放刷新,例如“共 38 柜”“待测转运单 · 6 单”。数量带业务单位,不用功能入口数量代替待办数量。
- 采用 CSS 逻辑像素,不把设计图或截图的物理像素直接当作控件尺寸;宽度随 PDA 可用视口适配。
| 元素 | 当前基准 |
|---|---|
| 列表背景 | `#f1f5fd` |
| 内容边距 | 左右 `14px`,列表顶部 `14px`;底部预留安全区 |
| 工具栏 | 最小高度 `36px`,与卡片间距 `11px` |
| 工具栏文字 | `14px`,行高 `20px`,字重 `700`,颜色 `#526174` |
| 刷新按钮 | 白底,`36px` 高,最小宽度 `72px`,左右内边距 `14px`,圆角 `20px`,边框 `1px solid #b8d1f5` |
| 刷新按钮内容 | 蓝色 `#135ee8`,图标 `18px`,文字 `13–14px`,图文间距 `5px`;请求中禁用并显示“刷新中…” |
### 卡片信息层级
卡片按以下顺序组织,不把所有信息挤进标题行:
1. **编号与状态**:左侧为柜号、转运单号等主要业务编号,右侧为状态标签。计划到仓等辅助时间放在编号下方。
2. **关键指标**:上方显示数值、下方显示名称,指标之间用细竖线分隔,整组上下用细横线界定。按业务选择必要指标,不为凑满列数补字段。
3. **补充信息**:展示接柜点、目的仓等未在上方表达的必要事实;缺码等额外问题单独提示。
4. **操作入口**:放在卡片底部右侧,使用“详情”“继续”“只读”“测量”“继续测量”等短文案与右箭头。左侧可放必要且不重复的补充业务码。
| 元素 | 当前基准 |
|---|---|
| 卡片容器 | 白底,内边距 `14px`,边框 `1px solid #dce5f0`,圆角 `13px`,无阴影,卡片间距 `11px` |
| 编号 | `18–20px`,字重 `750`,行高 `26px`,颜色 `#1f2937`;拆柜柜号当前 `20px`,转运单号当前 `18px` |
| 标题行 | 编号区域 `flex: 1; min-width: 0`,与状态间距 `10px`;状态不被挤压 |
| 状态标签 | `13px`,行高 `16px`,内边距 `6px 10px`,圆角 `9px`;保持完整状态文案 |
| 指标布局 | 四项等宽;转运三项当前为 `1 : 1.3 : 1`,中间目的仓适当加宽;分隔线 `#e1e7f0` |
| 指标区域 | 与标题间距 `12px`,上下内边距 `7–9px` |
| 指标值 | `22px`,行高 `26px`,字重 `750`,颜色 `#1f2937` |
| 指标名称 | `12px`,行高 `18px`,颜色 `#6f8194`,与值间距 `2–3px` |
| 辅助时间 | `12px`,行高 `18px`,颜色 `#718095` |
| 补充信息 | `12px`,行高 `20px`,行间距 `5px`;接柜点等关键归属信息可加粗 |
| 底部操作 | 蓝色 `#135ee8`,文字 `13px`、字重 `700`、行高 `22px`,右箭头 `14px`;底行最小高度 `28–32px` |
- 长编号、多目的仓和较大数值允许自然换行,不以省略号隐藏作业所需信息,也不把状态或操作挤出卡片。
- 隐藏底部补充信息后,操作仍靠右;不要因左侧无内容而把唯一操作移到左侧。
- 保留整卡已有的点击目标与操作资格;不要为了增大可点区域新增嵌套按钮或重复触发事件。
- 列表样式限定在列表分支;首页或列表的密度调整不覆盖详情、测量表单、照片区和底部提交栏。修改公共默认值前核对直接消费者。
## 信息去重
- 同一卡片内同一事实只展示一次。指标栏已展示计划数量和未操作数量时,不再追加“已生成 X 个入库计划,Y 个未操作”的重复汇总句。
- 仓储转运卡片以转运单号为主编号:入仓码为空,或去掉首尾空格后与转运单号相同,隐藏底部入仓码;不同时保留该入仓码。比较不改变业务码内容或大小写。
- 缺入仓码等上方未表达的异常信息继续单独展示,例如“2 单缺入仓码”;不要为去重隐藏问题提示。
- 不同含义的字段即使值相同也应保留,例如“总订单 1”和“入仓码 1”。不同记录共享接柜点或目的仓也不构成应删除的重复记录。
- 只展示服务端业务标识;必要关系缺失时使用“—”或明确的未关联提示,不以内部数据库 ID 回退。次要信息没有内容且无需提示时,不保留空白占位行。
## 状态与反馈
- 状态使用短文案配浅底标签。本轮样板中,待签收为橙色、待测量为蓝色、测量中为绿色、待齐全为灰色;颜色不代替文字,映射沿用对应业务状态。
- 待齐全或不可操作的柜保持灰色卡片与“只读”入口,仍能查看已有摘要;不能因为样式变灰而隐藏候选或放开写操作。
- 首次加载显示加载态;刷新保留已有列表并显示请求状态,避免连点。空态说明当前没有哪类任务,并提供适用的刷新入口。
- 加载失败与成功无记录是不同结果;错误不能变成“0”或成功提示。业务错误码、`requestId`、`traceId` 只用于故障诊断,不作业务编号。
## 首页入口与待办
### 紧凑入口卡片
- 保持三列网格,列间距 `8px`。入口保留图标、名称和一条待办或用途提示,不重复增加说明段落。
- 卡片使用 `height: auto; min-height: 104px; padding: 10px 6px`;长名称或较长待办文案可自然撑高,同一网格行保持对齐,不裁切内容。
- 图标区域当前 `40px × 40px`,图标 `28px`。名称当前 `12px`、行高 `17px`、顶部间距 `5px`,`.home-operation-name` 最小高度为 `17px`,最多两行;单行名称不强制预留两行的 `34px` 高度。
- 待办标签当前 `10px`、行高 `16px`,宽度不超过卡片;允许换行,避免长待办挤出卡片。
### 分项待办
- 待办数量放在各自入口,按对应业务单位展示,例如“38 柜”“6 单”“2 托”。首页不再以“16 项可处理”或分组下的功能个数冒充工作量,也不把不同单位和重叠阶段的任务简单相加。
- 任务列表与当前作业分开表达,例如仓储转运待测列表显示待测数量,转运测量入口显示本设备当前单的进行中状态;具体统计范围和资格维护在实际数据来源中。
- 分页接口使用明确的总数,不能将当前页记录数当全部待办;相同业务记录不重复计数。出库和废弃等不同工作来源需要分别标明。
- 正数用浅橙提示(文字 `#9a5300`、底色 `#fff0d6`);零、加载中和扫码提示用中性色(文字 `#6f8194`、底色 `#e7edf4`);获取失败用浅红提示(文字 `#b42318`、底色 `#fff1f0`)。
- 成功无任务可显示 `0`;尚未开始的当前作业可显示“未开始”。无独立待办队列的入口使用“扫码签收”“扫码作业”“扫码查询”等用途提示,不编造数量。
- 返回首页自动刷新,并提供手动刷新入口。局部获取失败只影响对应入口,保留其他成功数量;账号、仓库变化或旧页面请求返回时,不回显过期统计。
## 修改与验收
- 后续页面先确定主要业务编号、必要指标、补充信息和主操作,再按本规范组织卡片,不机械复制样板字段与状态。
- 人工检查重点为:长编号、多目的仓、指标较大值、入仓码相同与不同、缺码提示、零待办、加载失败、只读候选,以及首页长名称与标签换行。
- 视觉以用户提供的当前页面截图和人工验收为准;模板、样式编译及定向自动检查单独报告,不将编译成功记为真机扫码、照片上传、打印或整页视觉验收通过。
- 验证范围按[工程执行约束](AI工程执行与协作约束.md#验证范围选择)选择;纯文档维护不运行应用全量测试或构建。