优化

2026-09-14 17:54:18 +08:00
parent 6ab9c41af5
commit 7229a1e74c
3 changed files with 92 additions and 4 deletions
@@ -1,6 +1,30 @@
 # Admin 国内仓样式核对记录

-依据：已确认订单样板与 [Admin 高密度界面规范](Admin高密度界面规范.md)。本轮覆盖第 1、2、3 组。用户明确要求由 AI 在 1920×1080、100% 缩放下进行界面验收；此次授权只用于本轮界面检查。
+## 与客户管理共用样式的维护收敛
+
+本次按用户确认，仅整理国内仓与客户管理已接入范围的样式归属；不新增页面、业务操作或环境写入。此前界面验收截图不作为本次收敛后的截图证据，本次仍待人工截图确认。
+
+| 国内仓入口/消费者 | 公共层收敛 | 业务例外与边界 |
+|---|---|---|
+| 订单列表及详情 | 公共描边按钮、详情页签、连续信息表、表格基础密度 | 操作资格、详情字段跨列与业务数据排列保留 |
+| 订单测量与审核、称重图片 | 字号、间距、行高使用公共变量，弹框标题/正文/底部由公共层管理 | 1560px / 92vh 作业宽高、图片/画布尺寸、测量对照列保留 |
+| 预装列表与详情、模拟柜与托盘码弹框 | 字号、间距、表格及弹框使用公共规则 | `isPreload` / `dense` 继续显式控制，共用组件未接入入口使用原布局；PDF 标签尺寸不变 |
+| 库位、托盘 | 删除重复弹框框架，统一控件/字号/间距变量 | 560px 编辑宽度、双列表单和业务字段保留 |
+| 整柜业务与库存详情 | 摘要引用公共变量，库存详情使用公共信息表 | 出入库分组、库存事实和交易表结构保留 |
+
+默认值唯一入口为 `src/styles/adminDensityTokens.css`，公共外观唯一入口为 `src/styles/adminDensity.css`；业务 CSS 不重新定义按钮配色或密度默认值。维护合同与后续接入规则见《Admin 高密度界面规范》的“国内仓、客户管理的样式维护边界”。
+
+## 2026-09-14 接手复核：订单列表与详情样式失效
+
+用户在本地订单列表发现按钮回退，并提供详情截图：页签呈浏览器默认按钮，基本信息退回逐项竖排。复核发现 `UnifiedOrdersView.vue` 的列表与详情共用外层缺少 `admin-density`；子项虽已改为公共类，公共选择器和变量却无法生效。已在两种路由共用的页面外层补回入口。
+
+维护合同新增模板祖先检查，覆盖订单与客户页面中的公共操作按钮、页签、信息表；避免仅凭 CSS 导入和子项类名存在就判为通过。用户截图确认的是修复前问题，修复后仍待 1920×1080、100% 缩放人工截图确认。
+
+本次验证：订单页面与公共密度定向测试 48/48、`pnpm typecheck`、`pnpm build` 和差异空白检查通过；AGENTS 索引合同 1050 项通过。当前工作区全量测试 1910/1911 通过，唯一失败为费用项目页面的 5000ms 超时，该文件单独复跑 5/5 通过；不将这次全量运行记录为全部通过。验证覆盖工作区现有在途代码，未提交或部署。
+
+## 首轮国内仓验收依据（历史记录）
+
+依据：已确认订单样板与 [Admin 高密度界面规范](Admin高密度界面规范.md)。首轮覆盖第 1、2、3 组。当时用户明确要求由 AI 在 1920×1080、100% 缩放下进行界面验收；该授权只用于当轮界面检查。

 ## 改造前逐操作矩阵

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

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

+后续按钮反馈补充：源码中列表“编辑”已经接入 `customer-action-button`，本次增强其选择器和 Element Plus 状态变量，明确灰字白底细描边及焦点反馈；阶梯编辑弹框的“新增阶梯、删除”此前仍使用默认按钮，本次补齐蓝/红语义描边，并同步客户详情同类费用编辑。没有将源码检查等同于用户当前环境已经生效，最终外观仍待人工截图确认。
+
+按钮补齐后再次验证：`pnpm typecheck`、`pnpm test`（247 个文件、1901 项）、`pnpm build` 和客户模块差异检查均通过；未部署。
+
 2026-09-14，本轮样式实现及代码验证完成：

 - `pnpm typecheck`：通过。
@@ -55,7 +59,23 @@
 - 纯文字规则覆盖业务操作与带文案的查询、重置、复制；分页箭头、列设置、筛选布局、关闭、全屏及加载反馈继续可见，避免出现空按钮。
 - 客户列表白底描边按钮按既有操作权限和直接操作数量显示，更多入口统一三点 `…`，不显示“更多”文字；菜单项纯文字。未修改状态、权限、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：禁止业务选择器进入公共层、禁止页面重复实现按钮、禁止在页面重定义密度默认值、检查所有变量引用已定义。此次代码收敛后的视觉状态仍为待人工截图确认。
+
+## 人工验收步骤

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

@@ -11,6 +11,8 @@
 样板实现入口：

 - [公共密度样式](../apps/admin-web/src/styles/adminDensity.css)：页面显式使用 `admin-density`，Teleport 弹框显式使用 `admin-density-dialog`；默认不改变其他菜单。
+- [公共密度变量](../apps/admin-web/src/styles/adminDensityTokens.css)：两模块的字号、间距、控件/行/按钮/页签高度、圆角、底色和按钮语义色的唯一默认值入口。
+- [维护合同检查](../apps/admin-web/src/styles/adminDensity.test.ts)：限定已接入消费者，检查变量归属、公共样式作用域及页面重复实现。
 - [测量作业密度](../apps/admin-web/src/modules/inbounds/measurement/measurementDensity.css)：测量与审核共享作业布局，宽度由测量弹框自身提供。
 - [国内仓逐操作核对记录](Admin国内仓样式核对记录.md)：三组页面的承载方式、例外和验收证据。
 - [客户管理局部密度样式](../apps/admin-web/src/modules/customers/customerDensity.css)：客户列表、详情、计费与相关弹框的显式密度入口。
@@ -79,6 +81,7 @@
 - 客户列表、海外仓阶梯费用及关联详情、编辑、审核、预览的业务操作按钮采用纯文字；查询、重置、复制也去掉装饰图标。分页箭头、列设置、筛选布局、关闭与全屏等独立图标控件保留，处理中旋转图标保留。
 - 客户列表行内按钮沿用 28px 白底描边、6px 圆角、6px 间距：详情/编辑/更多为灰色，审核为橙色，重置密码为紫色，跳转登录为蓝色，启用为绿色，停用/删除为红色。更多入口与订单列表统一显示 `…`，不显示“更多”文字；悬停提示及可访问名称保留，菜单项纯文字，保留原权限与操作分配。
 - 海外仓阶梯费用列表按原档位顺序显示“天数：单价”，在费用单元格中连续排列、整组自然换行；不制作每档独立白块，不强制左右两列，不隐藏后续档位。币种只在独立列展示，计费单位保留在表头；零单价照常显示 `0`，没有档位显示“—”。编辑按钮沿用灰色白底描边。
+- 阶梯费用编辑弹框中的“新增阶梯”为蓝字浅蓝边、“删除”为红字浅红边，均使用 28px 高、6px 圆角的白底纯文字按钮；客户详情的海外仓费用编辑同步执行。底部保存/取消沿用 32px 主次按钮。按钮规则同时覆盖页面与 Teleport 弹框，并显式设置普通、悬停、焦点及禁用状态，避免默认主题色覆盖。
 - 客户详情保留彩色页签；企业信息用连续四组键值表，联系与合作信息保留三组键值表，长地址整行。资质文件采用连续行，企业成员使用表格。
 - 客户新增/编辑保留 1120px 三列表单，入驻审核保留 1040px，箱规规则编辑保留 1200px，海外仓阶梯编辑保留 1120px。宽度属于当前内容的适配值，不推广为全局默认。

@@ -152,7 +155,7 @@

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

 规范只记录稳定规则和入口。各组进度、临时问题与验收结果写入对应核对记录，不写入 `AGENTS.md`。
+
+## 国内仓、客户管理的样式维护边界
+
+本节适用于已接入的两个菜单及其实际子组件，不改变其他菜单默认样式。此次收敛以保留业务字段、权限、计算与承载方式为前提。
+
+| 要修改什么 | 唯一维护位置 | 页面需要做什么 |
+|---|---|---|
+| 正文/辅助/分区/页头字号 | `adminDensityTokens.css` 的 `--admin-font-*` | 引用变量，不重新写 13px 等普通字号 |
+| 表格行高、输入高度、操作按钮高度、页签高度 | `--admin-row-height`、`--admin-control-height`、`--admin-action-height`、`--admin-tab-height` | 使用已有公共组件和公共类 |
+| 常用间距、圆角、普通数据区底色 | `--admin-space-*`、`--admin-radius`、`--admin-surface` 等 | 业务布局引用变量；不可在页面重定义变量默认值 |
+| 描边按钮外观、悬停/禁用/焦点状态 | `adminDensity.css` 的 `.density-action` | 只选择 `data-tone` 与业务事件 |
+| 详情页签及彩色图标 | `.density-tabs`、`.density-tab-icon` | 保留标签、键盘事件和激活态；只配置业务内容 |
+| 连续信息表边框、标签底色、文字与内边距 | `.density-fields` | 只配置列数、跨列、字段顺序；特殊标签宽度使用局部 `--admin-field-label-width` |
+| 弹框/抽屉标题、正文滚动、底部间距 | `.admin-density-dialog` / `.admin-density-drawer` | 容器显式接入，保留该业务已确认宽度与作业高度 |
+| 客户资质列、测量对照列、预装信息布局 | 对应模块 CSS 或页面 `scoped` | 只保留业务列宽、列数、图片尺寸、定位与排列 |
+
+### 使用约定
+
+```html
+<!-- 业务按钮只选择语义，不复制尺寸、颜色及交互状态规则 -->
+<el-button class="density-action" @click="edit">编辑</el-button>
+<el-button class="density-action" data-tone="warning" @click="review">审核</el-button>
+<el-button class="density-action" data-tone="danger" @click="remove">删除</el-button>
+
+<!-- 更多入口仍是三点，必须保留可访问名称与悬停提示 -->
+<el-button class="density-action" aria-label="更多操作" title="更多操作">
+  <MoreHorizontal :size="17" aria-hidden="true" />
+</el-button>
+```
+
+`data-tone` 可用 `neutral`（默认）、`warning`、`purple`、`primary`、`success`、`danger`。每个页面仍按已确认的动作配色表选择；纯文字与图标策略不由 CSS 猜测。按钮组使用 `density-actions` 统一间距，业务布局可决定是否换行。
+
+### 防止维护退化
+
+1. **同一通用外观只有一个实现。** 已由公共类接管的按钮配色、页签高度、信息表边框或弹框内边距，删除原页面声明，不能保留两套后再增加优先级或 `!important`。
+2. **新增通用尺寸先改变量。** 模块与页面只引用 `--admin-*`；禁止在页面重定义公共默认值。局部标签宽度是明确的业务参数，不改变全局标签宽度。
+3. **不要把代码搬到模块 CSS 就称为公共化。** 多个业务共用的按钮、页签、信息表与弹框规则留在公共层；模块 CSS 不能依赖另一个业务模块的类名，也不引入第二套按钮颜色变量。
+4. **保留显式接入边界。** 公共样式不能使用无范围的 `.el-button`、`.el-table`、`.el-dialog` 选择器。Teleport 的弹框、抽屉必须自己携带密度类；不能仅依赖页面父级。
+5. **共用组件保留未接入消费者。** CSS 变量的兜底值用于独立渲染和未接入入口；两个已接入模块始终由公共变量决定实际值，兜底值不是第二份密度配置。打印标签、PDF 尺寸、原图、画布和既有窄屏规则不能机械替换。
+6. **公共调整按消费者回归。** `adminDensity.test.ts` 维护明确的页面/组件清单，不扫描全部后台。检查模板中公共按钮、页签和信息表的真实祖先是否带有密度入口，不能仅断言文件导入了 CSS 或出现过密度类；页面弹框带有 `admin-density-dialog` 不代表列表与详情已接入。新增接入时同步清单及逐操作矩阵，运行合同、受影响测试、类型检查、全量测试和构建。
+7. **视觉与代码分开记录。** 本轮默认人工截图；代码通过不等于视觉验收通过。已确认业务宽度和工作区高度可以保留为例外，例外写入核对记录。