98 lines
6.4 KiB
Markdown
98 lines
6.4 KiB
Markdown
# Client 界面样式规范
|
||
|
||
## 范围与验收状态
|
||
|
||
- 本规范由客户端样式对话确认建立，首个验收样板为“头程物流 → 订单列表”（`/orders/first-leg`）。当前为首版实现，待人工截图确认；通过后再逐模块推广。
|
||
- 只维护 `apps/client-web/` 内的样式和公共组件，不与 Admin 跨应用链接依赖。
|
||
- 左侧菜单背景保持现状，不修改 `shell.css` 中的导航背景，也不通过全局品牌变量间接改变导航。
|
||
- 标准通过正文容器 `.client-ui` 接入；首批覆盖订单列表。创建、详情与其他模块需分别核对承载方式和字段，不以列表通过代替整模块验收。
|
||
- 按 1920×1080、浏览器缩放 100% 验收，保留现有窄屏能力。
|
||
|
||
## 公共入口与职责
|
||
|
||
| 入口（相对 apps/client-web） | 职责 |
|
||
|---|---|
|
||
| `src/styles/client-ui.css` | `--client-*` 颜色、尺寸、间距；正文按钮和状态外观 |
|
||
| `src/components/common/QueryToolbar.vue` | 搜索栏；`layout="grid"` 为四列筛选布局 |
|
||
| `src/components/common/DataTable.vue` | 表格、工具栏、行操作、分页；工具栏内容用插槽提供 |
|
||
| `src/components/common/tableActions.ts` | 三个操作以内全部展示，超过三个折叠；禁用和加载状态执行保护 |
|
||
| `src/modules/first-leg/utils/firstLegOrder.ts` | 头程状态码 → 语义色，不在公共样式中判断业务状态码 |
|
||
|
||
页面只提供字段、操作、业务状态与权限，不再覆盖公共工具栏 padding、表格行高及分页 padding。确有业务差异时增加明确的组件能力，避免重复页面 CSS。
|
||
|
||
## 尺寸与布局
|
||
|
||
| 项目 | 标准 |
|
||
|---|---|
|
||
| 正文、表格、按钮字号 | 13px |
|
||
| 次要说明、状态字号 | 12px |
|
||
| 普通按钮、输入框 | 高 32px |
|
||
| 表格行操作按钮 | 高 28px，左右 padding 8px |
|
||
| 按钮间距 | 8px |
|
||
| 搜索栏 | padding 16px；四列；字段间距纵向 12px、横向 16px |
|
||
| 搜索操作区 | 顶部 margin 12px、padding 12px，分隔线与字段区区分 |
|
||
| 表格工具栏 | 最小高 48px；padding 8px 16px；实际高度随操作换行增长 |
|
||
| 表头 | 高 44px，浅灰底，600 字重 |
|
||
| 数据行 | 高 48px；白底与浅灰交替，悬停浅蓝 |
|
||
| 单元格 | 左右 padding 12px，行高 20px |
|
||
| 分页 | 最小高 58px；padding 12px 16px；页码按钮 32px |
|
||
| 内容分区间距、圆角 | 16px、6px |
|
||
|
||
长编号保持可辨认，普通长文本省略并提供完整内容提示；金额右对齐，状态居中。操作列在业务列最左侧并固定，批量选择框在其前方。列设置、排序与选择行为保持原有业务逻辑。
|
||
|
||
## 颜色与按钮
|
||
|
||
| 用途 | 文字色 | 背景色 |
|
||
|---|---|---|
|
||
| 默认操作 | `#1777ff` | 白色 |
|
||
| 主要操作 | 白色 | `#1777ff` |
|
||
| 处理中 | `#175cd3` | `#eff8ff` |
|
||
| 成功 | `#067647` | `#ecfdf3` |
|
||
| 待处理、提醒 | `#b54708` | `#fffaeb` |
|
||
| 失败、危险 | `#b42318` | `#fef3f2` |
|
||
| 草稿、中性 | `#475467` | `#f2f4f7` |
|
||
| 禁用按钮 | `#98a2b3` | `#f9fafb` |
|
||
|
||
- 查询、创建等主要操作使用实心蓝色；行内详情、编辑等使用白底描边蓝字，统一使用纯文字，不显示装饰图标。加载中的进度指示保留。
|
||
- 行操作先按权限及业务条件过滤，再计算数量；1–3 个全部展示，4 个及以上显示前两个和 `…`。入口保留“更多操作”的可访问名称。
|
||
- 禁用操作不被隐藏，不因禁用改变位置；加载中不可重复执行。
|
||
- 表格顶部批量操作不套用行操作的三个阈值，保留明确的批量入口和创建入口。
|
||
- 危险操作仍需原有业务确认；样式不改变权限和提交条件。
|
||
|
||
## 头程状态映射
|
||
|
||
| 状态码 | 文案 | 语义色 |
|
||
|---|---|---|
|
||
| DRAFT | 草稿 | 中性灰 |
|
||
| PENDING_REVIEW | 待审核 | 提醒橙 |
|
||
| WAIT_MEASURE | 待测量数据 | 处理中蓝 |
|
||
| WAIT_PALLETIZE | 待组托 | 处理中蓝 |
|
||
| WAIT_SPLIT | 待分柜 | 处理中蓝 |
|
||
| LOADING | 装柜中 | 处理中蓝 |
|
||
| LOADED | 装柜完成 | 成功绿 |
|
||
| DELIVERED | 派送完成 | 成功绿 |
|
||
| COMPLETED | 已完成 | 成功绿 |
|
||
|
||
测试环境复验补充：服务端统一订单已正式返回 `COMPLETED`，列表、筛选和详情沿用该状态，不能再显示英文或映射成“装柜完成”。订单号列宽 240px，入仓码列宽 230px，状态默认紧随入仓码，保证首屏可识别。
|
||
|
||
标签包含状态文字，颜色为辅助识别。其他模块需按业务阶段单独列出状态映射，不以中文模糊匹配统一推断；未知状态不得伪装为处理中或完成。
|
||
|
||
## 样板逐操作验收矩阵
|
||
|
||
| 检查对象 | 首版目标 | 验收方式 |
|
||
|---|---|---|
|
||
| 左侧菜单 | 背景与修改前一致 | 同视口截图对照 |
|
||
| 列表首屏 | 筛选、工具栏、表格、分页层次一致 | 有数据的完整页面截图 |
|
||
| 搜索 | 查询和重置有效；输入框不遮挡、字段标签完整 | 查询前后、重置后 |
|
||
| 工具栏 | 列设置、下载、导出、批量提交、批量导入、创建入口保留 | 未选择/已选择/无写权限 |
|
||
| 行操作 | 1、2、3 个不折叠；4 个时前两个加省略入口 | 按权限与业务条件验证，不修改真实订单来凑状态 |
|
||
| 状态 | 草稿、待审核、处理中、装柜完成的语义颜色不同 | 对照多状态列表 |
|
||
| 表格 | 横向滚动时选择、操作、订单号可用；完整值可查看 | 长编号、长渠道、空值、列重排 |
|
||
| 分页 | 条数和页码完整；更换条数回到第 1 页 | 10/20/50 条、首尾页 |
|
||
| 加载/失败/空态 | 失败保留重试和工具栏；不把失败显示为无订单 | 加载、失败重试、空结果 |
|
||
| 关联操作 | 详情、费用、编辑、报关入口保持原有行为 | 只读打开核对；写入另按授权执行 |
|
||
|
||
自动化检查不代替真实页面截图。列表样板确认前，不将其他 21 个菜单标记为已统一或已验收。
|
||
|
||
2026-09-15 经用户明确授权完成内置浏览器验收：测试部署 `client-web-test #282`、提交 `7068f49` 成功；1920×1080、100% 缩放下检查首屏、筛选重置、全选、列设置、10/20/50 分页、横向固定列、详情入口以及灰/橙/蓝/绿状态。实测工具栏 padding 为 8px 16px，分页为 12px 16px，表头/行高为 44px/48px，行按钮 28px、#1777ff；菜单背景与部署前一致。四操作折叠分支仅自动化覆盖，缺少真实四操作数据；用户对视觉标准的最终确认待完成。
|