优化

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

@@ -0,0 +1,68 @@
+# 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. 海外仓阶梯费用列表：多档位行、横向空间、编辑弹框两类费用并排、档位增删后的表格及校验。