docs/Client界面样式规范.md

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；菜单背景与部署前一致。四操作折叠分支仅自动化覆盖，缺少真实四操作数据；用户对视觉标准的最终确认待完成。