105 lines
10 KiB
Markdown
105 lines
10 KiB
Markdown
# 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 双费用分组弹框 | 保留当前承载、字段与增删校验；后续按钮反馈补齐新增/删除白底描边样式 |
|
||
|
||
本轮修改后的截图待人工确认，原截图只作为问题证据。三点入口与连续阶梯展示完成后重新执行类型检查、全量测试、构建及差异检查，结果如下。
|
||
|
||
后续按钮反馈补充：源码中列表“编辑”已经接入 `customer-action-button`，本次增强其选择器和 Element Plus 状态变量，明确灰字白底细描边及焦点反馈；阶梯编辑弹框的“新增阶梯、删除”此前仍使用默认按钮，本次补齐蓝/红语义描边，并同步客户详情同类费用编辑。没有将源码检查等同于用户当前环境已经生效，最终外观仍待人工截图确认。
|
||
|
||
按钮补齐后再次验证：`pnpm typecheck`、`pnpm test`（247 个文件、1901 项）、`pnpm build` 和客户模块差异检查均通过；未部署。
|
||
|
||
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 或计费口径。
|
||
|
||
## 样式维护收敛（国内仓、客户管理）
|
||
|
||
按用户确认，将两模块共用的默认值和通用外观合并到公共层：
|
||
|
||
| 范围 | 接入内容 | 保留的业务配置 |
|
||
|---|---|---|
|
||
| 客户列表、阶梯费用列表及编辑弹框 | `density-action` + `data-tone`，按钮交互状态只维护一份 | 操作权限、配色语义、直接操作数量、三点更多 |
|
||
| 客户详情、订单详情 | `density-tabs` / `density-tab-icon`；信息表接入 `density-fields` | 页签标签和事件，四列/三列、字段跨列 |
|
||
| 客户审核 | 公共弹框框架及 `density-fields` | 1040px 宽度、审核资料分组、96px 标签宽度 |
|
||
| 客户规则与费用 | 公共字号/间距/行高变量 | 规则公式、阶梯顺序、两类费用分组与编辑宽度 |
|
||
| 客户操作日志 | 公共密度变量、`admin-density-drawer` | 日志详情抽屉、结果与快照布局 |
|
||
|
||
`customerDensity.css` 中重复的按钮、页签、信息表基础规则已上移；客户 Vue 文件中被模块样式覆盖的旧声明已清除，不再保留旧卡片尺寸后用更强选择器覆盖。此前记录提到的 `customer-action-button` 已由公共 `density-action` 替换，属于样式归属调整。
|
||
|
||
维护规则见《Admin 高密度界面规范》的“国内仓、客户管理的样式维护边界”。`src/styles/adminDensity.test.ts` 检查 21 个明确消费者及其模块 CSS：禁止业务选择器进入公共层、禁止页面重复实现按钮、禁止在页面重定义密度默认值、检查所有变量引用已定义。此次代码收敛后的视觉状态仍为待人工截图确认。
|
||
|
||
## 向后续模块复用前的规则核对（2026-09-14）
|
||
|
||
本次按实际代码核对国内仓和客户管理样板、公共 CSS、变量、维护合同与应用指引，并以货柜管理的真实菜单/路由检查规范能否复用。
|
||
|
||
| 检查项 | 发现与处理 | 证据范围 |
|
||
|---|---|---|
|
||
| 客户详情返回 | 原按钮尚未接入公共返回样式，现使用 `link` + `density-back`；保留纯文字及返回客户列表的事件 | 页面代码及返回入口合同；新视觉待截图 |
|
||
| 客户日志行内按钮 | 仍使用独立链接按钮，现接入灰色 `density-action`；日志面板自身导入公共 CSS 并显式接入密度根 | 独立组件入口、权限与详情查询测试 |
|
||
| 公共颜色变量 | 斑马纹和描述表标签底色绕过了已定义变量，已接回；各语义按钮悬停浅底改由公共变量提供 | 变量定义、消费与状态规则合同 |
|
||
| 浮层覆盖 | 国内仓父子订单关联抽屉缺少独立密度类，已补齐；合同新增抽屉检查 | 弹框/抽屉显式入口，不依赖页面祖先 |
|
||
| 后续接入说明 | 增加完整页面/弹框示例、共享模式边界、检查清单扩展与代码/视觉证据界限 | 《Admin 高密度界面规范》“新模块接入规则”及 Admin 指引 |
|
||
|
||
结论：公共基线和接入规则可用于后续 Admin 页面；新增页面仍须逐操作接入和验收，不能只导入 CSS 就称为完成。货柜管理 4 个菜单及 DOMESTIC/OVERSEAS 共享边界已登记在 [货柜管理核对记录](Admin货柜管理样式核对记录.md)，尚未实施其页面改造。
|
||
|
||
本次定向测试 85/85、全量测试 249 个文件与 1915 项测试、类型检查、构建、AGENTS 索引合同 1050 项及文档链接检查通过。未执行部署或业务数据写入；修复后的页面视觉仍待人工截图确认。
|
||
|
||
## 人工验收步骤
|
||
|
||
统一采用 1920×1080、浏览器缩放 100%。每项包含空态、长内容、禁用及加载反馈；涉及真实业务提交时按人工验收数据操作。
|
||
|
||
1. 客户列表：筛选、查询/重置、列设置、分页，以及按钮最多的行；核对按钮间距和颜色、更多菜单、权限变化后的操作列。
|
||
2. 新增/编辑客户：三列表单、校验提示、长公司名称、资质上传与有效期；检查滚动、底部按钮、全屏和重开。
|
||
3. 客户审核与凭证相关弹框：企业资料、资质预览、审核理由、密码显示/复制、跳转登录理由及删除确认；核对信息完整和处理中锁定。
|
||
4. 客户详情：基本信息四组字段、联系信息三组字段、长地址/邮箱/文件名、资质预览及企业成员表；核对彩色页签与返回/编辑按钮。
|
||
5. 计费规则及海外仓费用：只读分组、默认规则入口、规则编辑、币种与多档阶梯、取消和未保存提示；核对单位、公式与底部操作。
|
||
6. 操作日志：筛选、详情抽屉、成功/失败记录及快照长内容。
|
||
7. 海外仓阶梯费用列表：多档位行、横向空间、编辑弹框两类费用并排、档位增删后的表格及校验。
|