优化

2026-09-14 17:06:52 +08:00
parent 11d3ac6625
commit 6ab9c41af5
5 changed files with 113 additions and 7 deletions
@@ -6,13 +6,15 @@

 本规范固定该样板的视觉与密度规则。验收视口为 **1920×1080，浏览器缩放 100%**。其他页面采用本规范不等于其功能或视觉已验收。

-当前推广范围按 Admin 导航中的“国内仓”菜单确定，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA、海外仓与其他菜单采用规范时另行明确范围。
+当前推广范围包括 Admin 导航中的“国内仓”，以及本轮确认的“客户管理”两个入口：客户列表、海外仓阶梯费用，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。客户管理下的海外仓阶梯费用属于客户费用配置，不扩大到海外仓作业菜单。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA 与其他菜单采用规范时另行明确范围。

 样板实现入口：

 - [公共密度样式](../apps/admin-web/src/styles/adminDensity.css)：页面显式使用 `admin-density`，Teleport 弹框显式使用 `admin-density-dialog`；默认不改变其他菜单。
 - [测量作业密度](../apps/admin-web/src/modules/inbounds/measurement/measurementDensity.css)：测量与审核共享作业布局，宽度由测量弹框自身提供。
 - [国内仓逐操作核对记录](Admin国内仓样式核对记录.md)：三组页面的承载方式、例外和验收证据。
+- [客户管理局部密度样式](../apps/admin-web/src/modules/customers/customerDensity.css)：客户列表、详情、计费与相关弹框的显式密度入口。
+- [客户管理逐操作核对记录](Admin客户管理样式核对记录.md)：两个菜单入口及关联详情、审核、编辑与预览的范围和人工验收项。
 - [订单列表与详情](../apps/admin-web/src/modules/unified-orders/pages/UnifiedOrdersView.vue)：列表、顶部摘要、描述表、页签、日志表及订单弹框。
 - [订单局部密度样式](../apps/admin-web/src/modules/unified-orders/styles/orderDensity.css)：费用、履约与测量弹框的局部样式。
 - [国内仓导航](../apps/admin-web/src/core/navigation/adminNavigation.ts)：`domestic-warehouse` 分组是菜单范围来源。
@@ -57,10 +59,29 @@
 ### 列表

 - 继续使用 `ListPageLayout + QueryToolbar + DataTable`。查询、批量操作、表格、分页构成连续工作区，不重复放置正文大标题或统计卡片。
- “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；图标加文案，危险动作保留明确文字与确认。
+- “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；保留页面已确认的直接操作数量。订单列表和客户管理采用下述纯文字按钮，其他已接入页面沿用原按钮约定。危险动作保留明确文字与确认。
 - 列宽按实际编号、状态和按钮数量决定；不能把样板的 260px 操作列套给所有列表。核对最多按钮、加载中和权限变化后的布局。
 - 数值列右对齐，单位优先放表头；编号按业务需要设置宽度。保留横向滚动、列偏好、分页和已有行内编辑能力。

+#### 订单列表行内按钮（人工验收调整）
+
+依据用户提供的白底描边按钮参考图，订单列表行内操作采用纯文字、白底、1px 细边框，无阴影，圆角 6px；保持 28px 高、13px 字号、600 字重、左右内边距 10px、按钮间距 6px。该按钮圆角为明确例外，普通内容容器仍为 0–4px。
+
+- 详情、备注、更多：深灰文字与浅灰边框。
+- 审核“通过”：橙色文字与浅橙边框，保留原确认流程。
+- 测量：紫色文字与浅紫边框。
+- 悬停使用对应浅色底，键盘焦点保持可见；禁用、处理中状态保留。更多入口统一为 `…`（Lucide `MoreHorizontal`），保留包含业务对象的“更多操作”悬停提示和可访问名称；下拉项纯文字。
+
+本次仅接入订单列表行内操作。顶部查询/批量操作、弹框提交按钮与其他页面保持各自规则；不照搬参考图中的编辑、重置密码、跳转登录、删除等客户管理功能。
+
+#### 客户管理按钮与详情
+
+- 客户列表、海外仓阶梯费用及关联详情、编辑、审核、预览的业务操作按钮采用纯文字；查询、重置、复制也去掉装饰图标。分页箭头、列设置、筛选布局、关闭与全屏等独立图标控件保留，处理中旋转图标保留。
+- 客户列表行内按钮沿用 28px 白底描边、6px 圆角、6px 间距：详情/编辑/更多为灰色，审核为橙色，重置密码为紫色，跳转登录为蓝色，启用为绿色，停用/删除为红色。更多入口与订单列表统一显示 `…`，不显示“更多”文字；悬停提示及可访问名称保留，菜单项纯文字，保留原权限与操作分配。
+- 海外仓阶梯费用列表按原档位顺序显示“天数：单价”，在费用单元格中连续排列、整组自然换行；不制作每档独立白块，不强制左右两列，不隐藏后续档位。币种只在独立列展示，计费单位保留在表头；零单价照常显示 `0`，没有档位显示“—”。编辑按钮沿用灰色白底描边。
+- 客户详情保留彩色页签；企业信息用连续四组键值表，联系与合作信息保留三组键值表，长地址整行。资质文件采用连续行，企业成员使用表格。
+- 客户新增/编辑保留 1120px 三列表单，入驻审核保留 1040px，箱规规则编辑保留 1200px，海外仓阶梯编辑保留 1120px。宽度属于当前内容的适配值，不推广为全局默认。
+
 ### 详情与基本信息

 - 第一行集中放返回、业务编号、核心状态及主要操作。下一行用可换行摘要展示关键上下文，不使用大数字概览卡。
@@ -109,7 +130,7 @@

 图标只作辅助，保留文字标签；装饰图标设置 `aria-hidden="true"`。选中态通过文字色和底部横线表示，不把 Emoji 强制染成单色。采用系统彩色 Emoji 字体，不引入图片生成或外部图标下载依赖。

-操作按钮继续使用既有 Lucide 图标与主操作、成功、危险等语义色。本次确认不表示每个操作按钮、表头或字段都需要添加 Emoji。
+彩色图标用于详情页签。业务操作按钮按各页已确认规则执行：订单列表行内按钮与客户管理使用纯文字；其他入口可保留既有 Lucide 图标。不要给操作按钮、表头或字段添加 Emoji。

 ## 国内仓推广清单与顺序

@@ -131,7 +152,7 @@

 1. 改造前读取最近指引，沿菜单、路由、组件与事件定位实际页面；填写逐操作矩阵。原型已有承载方式不因密度统一而替换，明确的样式改造可在已授权范围内推进。
 2. 多个真实消费者使用同类密度时，将稳定尺寸与布局能力收敛到本应用的样式变量或现有共享组件的可选能力。先明确接入范围，不让全局默认变化影响尚未改造的菜单。
-3. `adminDensity.css` 承载通用规则；`orderDensity.css` 仅保留订单业务分区，`measurementDensity.css` 仅保留测量作业布局。不要复制多份，也不要把订单类名套给所有页面。跨菜单共用组件（如模拟柜创建、托盘码打印）通过可选 `dense` 参数接入；未传参数的调用保持原布局。
+3. `adminDensity.css` 承载通用规则；`orderDensity.css` 仅保留订单业务分区，`measurementDensity.css` 仅保留测量作业布局，`customerDensity.css` 仅保留客户管理布局与纯文字操作规则。不要复制多份，也不要把订单类名套给所有页面。跨菜单共用组件（如模拟柜创建、托盘码打印）通过可选 `dense` 参数接入；未传参数的调用保持原布局。
 4. 弹框经 Teleport 后必须仍能获得对应样式。检查普通、全屏、关闭、重开以及多个入口使用同一组件时的表现；避免无边界的全局 `.el-dialog`、`.el-table` 或 `!important` 覆盖。
 5. 每页检查长编号、长地址、多条数据、空态、失败态、无权限、禁用态及处理中状态；所有字段、单位、排序、权限与操作资格应保留。测试不得继续锁定已废弃的卡片结构，也不能删除业务断言以换取通过。
 6. 按 Admin 指引运行直接影响测试、类型检查、全量测试与构建；公共组件检查实际消费者。视觉默认由用户在指定视口操作并截图，缺少证据标记“待人工截图确认”；用户明确要求 AI 界面验收时，按本轮授权操作并记录实际证据，不将代码测试当作视觉通过。