docs/Admin客户管理样式核对记录.md

Admin 客户管理样式核对记录

范围与依据

按当前客户管理导航的两个入口：客户列表、海外仓阶梯费用；客户详情及两个入口实际调用的编辑、审核、预览一并收敛。用户要求按钮使用纯文字，避免图标占位；详情页签保留已确认的彩色 Emoji。沿用《Admin 高密度界面规范》，验收视口为 1920×1080、100% 缩放。

本轮开始时客户编辑已有 1120px、三列表单，详情联系信息已有三列调整；保留这些在途改动并在其基础上处理密度，不回退业务逻辑。

逐操作矩阵

原型入口：docs/悦/货代SAAS平台后台/prototype-src/modules/01-customers.html 的 page-tenant-list、page-warehouse-tier-fee、page-tenant-detail。当前用户确认的密度及按钮要求优先于历史装饰。

页面/操作	当前承载	调整目标
客户列表、筛选、行内操作	标准列表	13px 正文、36px 基准行高，28px 白底描边纯文字操作，保留直接操作数量与更多菜单
新增/编辑客户	1120px 居中弹框、三列表单	保留字段、联络信息说明与资质上传，紧凑分区、正文滚动、底部操作可见
客户入驻审核	1040px 居中弹框	企业资料连续描述表、资质表，保留同意/驳回与理由
创建/审核结果、重置密码、跳转登录、删除	各自居中弹框	统一密度与纯文字按钮；凭证、复制、确认和失败行为保留
资质文件预览	居中弹框	保留原图/PDF 查看面积与加载反馈
客户详情基本信息	独立页面	紧凑头部、38px 彩色页签，企业和联络信息用连续键值表，资质和企业成员用紧凑列表
客户详情计费规则	箱规表、权重系数表及编辑弹框	收紧标题与行距，保留公式、默认规则、权限与保存语义
客户详情海外仓费用	阶梯表及编辑弹框	紧凑分组表，保留币种、档位、单位与未保存确认
客户详情操作日志	标准列表及详情抽屉	紧凑表格、描述表，保留既有抽屉承载、快照、错误诊断
海外仓阶梯费用	标准列表及 1120px 编辑弹框	“天数：单价”连续排列并整组换行、币种单列，两类费用并排编辑，保留原增删档位校验

验证

人工截图反馈：更多入口与阶梯费用

依据本轮用户提供的海外仓阶梯费用单行截图（codex-clipboard-60f898d1-3c3c-49ba-8eda-b741e40bbd6d.png）及“请同步”的确认：

页面/操作	当前截图或实现	本轮处理
客户列表更多操作	文字“更多”，与订单列表省略号不一致	统一 MoreHorizontal 三点入口，保留悬停提示和可访问名称；菜单项纯文字
订单列表更多菜单	三点入口，菜单项带图标	保留三点入口，菜单项改为纯文字
海外仓阶梯费用列表	档位分成两列白底块，每档重复币种、行高较大	改为“天数：单价”连续排列，按原档位顺序整组换行；币种只在独立列出现，计费单位在表头；空档位显示“—”
海外仓阶梯费用编辑	原 1120px 双费用分组弹框	保留当前承载、字段与增删校验，本轮只优化列表展示

本轮修改后的截图待人工确认，原截图只作为问题证据。三点入口与连续阶梯展示完成后重新执行类型检查、全量测试、构建及差异检查，结果如下。

2026-09-14，本轮样式实现及代码验证完成：

• pnpm typecheck：通过。
• pnpm test：247 个测试文件、1901 项测试全部通过，包含客户模块、客户操作日志及订单列表的直接影响测试。原有图标和弹框类名断言按本轮确认更新，保留 API、权限、保存与错误处理断言。
• pnpm build：通过。
• 本轮客户模块、客户操作日志与订单列表的 git diff --check：通过。

视觉状态为 待人工截图确认。没有用代码检查代替截图验收，没有沿用国内仓截图作证据；未部署、未进行业务写入。测试输出包含已有的其他页面 query 常量绑定编译提示，不影响本轮检查通过。

实现入口与影响边界

• 页面显式接入 admin-density customer-density，相关居中弹框显式接入 admin-density-dialog customer-density-dialog，Teleport 后仍应用密度规则。
• 客户专用样式位于 apps/admin-web/src/modules/customers/customerDensity.css；基础密度复用 src/styles/adminDensity.css。本轮没有修改全局默认样式或共享组件接口。
• CustomerAuditLogsPanel.vue 当前由客户详情消费，本轮调整其详情按钮和日志抽屉间距、描述表。保留原抽屉、快照和诊断信息。
• 纯文字规则覆盖业务操作与带文案的查询、重置、复制；分页箭头、列设置、筛选布局、关闭、全屏及加载反馈继续可见，避免出现空按钮。
• 客户列表白底描边按钮按既有操作权限和直接操作数量显示，更多入口统一三点 …，不显示“更多”文字；菜单项纯文字。未修改状态、权限、API 或计费口径。

人工验收顺序

统一采用 1920×1080、浏览器缩放 100%。每项包含空态、长内容、禁用及加载反馈；涉及真实业务提交时按人工验收数据操作。

1. 客户列表：筛选、查询/重置、列设置、分页，以及按钮最多的行；核对按钮间距和颜色、更多菜单、权限变化后的操作列。
2. 新增/编辑客户：三列表单、校验提示、长公司名称、资质上传与有效期；检查滚动、底部按钮、全屏和重开。
3. 客户审核与凭证相关弹框：企业资料、资质预览、审核理由、密码显示/复制、跳转登录理由及删除确认；核对信息完整和处理中锁定。
4. 客户详情：基本信息四组字段、联系信息三组字段、长地址/邮箱/文件名、资质预览及企业成员表；核对彩色页签与返回/编辑按钮。
5. 计费规则及海外仓费用：只读分组、默认规则入口、规则编辑、币种与多档阶梯、取消和未保存提示；核对单位、公式与底部操作。
6. 操作日志：筛选、详情抽屉、成功/失败记录及快照长内容。
7. 海外仓阶梯费用列表：多档位行、横向空间、编辑弹框两类费用并排、档位增删后的表格及校验。