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

Admin 客户管理样式核对记录

文档职责：仅维护模块范围、业务例外与检查／截图记录。通用样式统一以 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 共享边界已登记在 货柜管理核对记录，尚未实施其页面改造。

本次定向测试 85/85、全量测试 249 个文件与 1915 项测试、类型检查、构建、AGENTS 索引合同 1050 项及文档链接检查通过。未执行部署或业务数据写入；修复后的页面视觉仍待人工截图确认。

人工验收步骤

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

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

2026-10-20 蓝白样式接入

沿用上方逐操作矩阵及现有承载。客户列表、客户详情、海外仓阶梯费用三个路由页面，以及实际调用的计费规则、海外仓费用和审计面板显式接入 admin-workbench；列表使用外层 workbench-table，资质预览、编辑、审核、密码、凭证及危险确认保留各自尺寸和处理逻辑。详情成员表及阶梯表复用 density-table 与 workbench-evidence，移除原有重复表格外观；正常规则标题的“箱规计算说明”支持键盘聚焦，长公式从常驻横栏移入说明，初始化、权限与错误提示仍常驻。

不恢复当前已注释的运营指标区；CustomerOperatingMetricCard 无活动渲染入口，本批未修改。箱规与权重的数据层 dimension-config 保持原样。审计详情继续使用抽屉，业务脚本与绑定未变。定向验证及本批共同限制见下述结果；视觉均为待人工截图确认。

本组自动核对：31 个 Vue 模板及样式编译、业务脚本与模板指令对比通过，37 处表格外层、39 处弹框、7 处抽屉作用域通过。61 个受影响测试文件共 611 项已通过首轮及失败项修正后的定向复验；箱规说明以真实组件聚焦验证可读。随后按总控公共合同补齐七处 is-drawer 与独立查询栏 workbench-query，对应七文件 95 项复验通过，最终 SFC/绑定核对再次通过。全量测试、类型检查与构建由本批总控统一执行；本记录不宣称已部署或已完成人工验收。

2026-10-20 用户追加修正：整页主列表与详情外壳使用 is-page-surface 取消外围整圈边框、圆角与阴影，页面保持连续白底；本组共 22 处主列表和 6 处详情容器，内部子表、指标/图表卡片、独立并列面板及弹框保持原边界。布局、内边距和脚本不因本修正改变；公共规则与全量门禁由总控统一收口。财务相关三文件 41 项定向复验通过，视觉仍待人工截图确认。

2026-10-21 弹框可用性回归

确认的问题：新增/编辑客户仍为已确认的 1120px 居中框，但基础资料与联系商务的短字段回退成两列；资质区前的表单因此加长。恢复两个分组每行三个短字段，保持原字段顺序、必填项和绑定；注册资本、地址、备注保留整行。普通标签宽度为 120px，较长的统一社会信用代码标签单独保留 144px。客户计费、资质预览、审核、结果及危险确认的原有承载未改。

实际挂载验证包含三列单元格与整行跨列、客户名称真实 blur 校验后的错误提示、底部保存入口、原编辑与资质预览行为。测试插件按本项目其他 Element 行为测试采用同一 CJS 运行时，避免混用 ES/CJS 表单上下文使校验无法触发。客户 34 项和消息中心 22 项定向回归通过；该结果只证明挂载与交互，不证明真实排版已验收。普通/全屏、长公司名称、信用代码、文件名、多条错误、关闭重开与预览关闭后返回编辑，均待用户 1920×1080、100% 人工截图确认。

2026-10-22 客户编辑表单确认

用户提供当前客户编辑弹框截图并确认继续采用这套输入控件外观；通用规则唯一维护在Admin 界面规范“输入框与字段”，本节仅记录本窗口落点。

• 保留 1120px 弹框、三列短字段及注册资本／地址／备注整行；普通标签 120px，“营业执照企业名称”和统一社会信用代码标签单独 144px。
• 输入控件白底、浅灰边框、8px 圆角，悬停加深、聚焦蓝框；注册资本与账期数字左对齐，客户昵称占位文字为“选填，默认自动生成”。通过 density-form--outlined 接公共边框，客户模块仅限定本编辑框的圆角与数值对齐。
• 删除底部保存／审核流程说明及已登记信用代码旁的只读说明；信用代码仍按原资格只读，保存、资质上传及提交审核行为不变。“企业认证资料”、帮助入口和现有状态标签同一行。
• 用户截图已核对输入边界和企业名称标签单行；后续数字对齐、占位文字及状态同行调整已获用户确认纳入规范。未据此推定资质区下半部分、错误态、普通／全屏及关闭重开的全部场景均完成视觉验收。相关定向检查已通过，本次写规范仅核对文档差异与引用，不重复执行业务测试。