From 6ab9c41af57387de2b7c1cd87684cece1934d047 Mon Sep 17 00:00:00 2001 From: ouyangxq <775153912@qq.com> Date: Mon, 14 Sep 2026 17:06:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Admin-Client前端原型还原验收规则.md | 5 ++- Admin国内仓样式核对记录.md | 15 +++++++ Admin客户管理样式核对记录.md | 68 +++++++++++++++++++++++++++++ Admin高密度界面规范.md | 29 ++++++++++-- README.md | 3 +- 5 files changed, 113 insertions(+), 7 deletions(-) create mode 100644 Admin客户管理样式核对记录.md diff --git a/Admin-Client前端原型还原验收规则.md b/Admin-Client前端原型还原验收规则.md index 7dc7b6f..4486ee2 100644 --- a/Admin-Client前端原型还原验收规则.md +++ b/Admin-Client前端原型还原验收规则.md @@ -45,6 +45,7 @@ Admin 与 Client 已向客户讲解或确认过的页面，必须以对应原型 - Admin、Client 当前只按 `1920×1080`、浏览器缩放 `100%` 验收；不检查或整改 `720px`、`320px` 等窄屏，也不删除已有响应式能力。用户恢复多视口验收后再统一调整。 - 弹框正文超过视口时只滚动正文，标题和操作区保持可见；独立详情页按正常页面滚动。 +- 字段数量较多、两列会导致弹框明显过高时，在 `1920×1080`验收视口下改用宽版三列表单；短字段单列占位，地址、长文本、备注、文件和表格按内容跨列或整行。小型确认类弹框不因此扩宽。 - 保留键盘操作、焦点、表单标签、图标按钮名称和足够对比度。可访问性调整不得改变原型的主要布局与视觉语义。 ## 执行与验收 @@ -60,8 +61,8 @@ Admin 与 Client 已向客户讲解或确认过的页面，必须以对应原型 Admin 客户管理原型： - 客户详情：独立页面（`page-tenant-detail`）。 -- 新增客户：居中弹框（`modal-tenant-add`，最大宽度约 680px）。 -- 编辑客户：居中弹框（`modal-tenant-edit`，宽度约 640px）。 +- 新增客户：居中宽版弹框（`modal-tenant-add`，宽度约 1120px），基础资料和联系与商务使用三列，地址、备注和资质表格整行。 +- 编辑客户：复用新增客户的居中宽版三列弹框（`modal-tenant-edit`，宽度约 1120px）。 - 重置密码：居中弹框（`modal-tenant-reset-password`，宽度约 520px）。 - 入驻审核：居中弹框（`modal-tenant-audit`，宽度约 900px）。 diff --git a/Admin国内仓样式核对记录.md b/Admin国内仓样式核对记录.md index 307a1e0..e55e1c1 100644 --- a/Admin国内仓样式核对记录.md +++ b/Admin国内仓样式核对记录.md @@ -60,3 +60,18 @@ 6. `LoadingListDetailDrawer` 同时供预装和已确认清单使用：历史记录的表格结构会影响这两个消费者，既有筛选和排序保持不变；其余紧凑间距仅预装入口启用。模拟柜创建、托盘码打印通过可选 `dense` 参数接入，其他入口未改变默认密度。 本轮未部署、未修改数据库或测试业务数据。规则与实现可以作为国内仓后续样式维护基线；上列未覆盖状态补齐后再作完整业务验收结论。 + +## 人工验收调整：订单列表行内按钮 + +用户提供参考图 `codex-clipboard-3cab512c-3b1a-412c-9a6d-1cbf796bf020.png`，要求订单列表采用该按钮风格。 + +| 页面/操作 | 参考依据 | 当前承载与调整 | 验收状态 | +|---|---|---|---| +| 订单列表：详情 | 参考图深灰纯文字、白底细边框 | 保留独立详情页跳转；移除按钮前图标，采用深灰文字 | 待人工截图确认 | +| 订单列表：通过 | 参考图橙色审核按钮 | 保留订单审核弹框与确认流程；改橙色文字及浅橙边框 | 待人工截图确认 | +| 订单列表：测量 | 参考图紫色业务操作按钮 | 保留测量作业弹框；改紫色文字及浅紫边框 | 待人工截图确认 | +| 订单列表：备注、更多 | 参考图普通描边按钮 | 备注用深灰纯文字；更多保留省略号及原下拉操作，不改变权限和排列顺序 | 待人工截图确认 | + +所有行内按钮保持 28px 高度，按钮间距 6px；白底无阴影、细边框、6px 圆角。悬停、键盘焦点、处理中和禁用反馈保留。未调整顶部工具栏及弹框操作，未增加参考图中的客户管理功能。通用说明同步到《Admin 高密度界面规范》的“订单列表行内按钮”。 + +本次 `pnpm typecheck`、`pnpm test`（247 个文件、1899 项测试）、`pnpm build` 和 `git diff --check` 均通过。未部署；待用户在 1920×1080、100% 缩放下提供本次按钮截图。之前首轮验收截图不作为本次按钮效果通过的证据。 diff --git a/Admin客户管理样式核对记录.md b/Admin客户管理样式核对记录.md new file mode 100644 index 0000000..09857b1 --- /dev/null +++ b/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. 海外仓阶梯费用列表：多档位行、横向空间、编辑弹框两类费用并排、档位增删后的表格及校验。 diff --git a/Admin高密度界面规范.md b/Admin高密度界面规范.md index 100e40d..279838f 100644 --- a/Admin高密度界面规范.md +++ b/Admin高密度界面规范.md @@ -6,13 +6,15 @@ 本规范固定该样板的视觉与密度规则。验收视口为 **1920×1080，浏览器缩放 100%**。其他页面采用本规范不等于其功能或视觉已验收。 -当前推广范围按 Admin 导航中的“国内仓”菜单确定，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA、海外仓与其他菜单采用规范时另行明确范围。 +当前推广范围包括 Admin 导航中的“国内仓”，以及本轮确认的“客户管理”两个入口：客户列表、海外仓阶梯费用，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。客户管理下的海外仓阶梯费用属于客户费用配置，不扩大到海外仓作业菜单。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA 与其他菜单采用规范时另行明确范围。 样板实现入口： - [公共密度样式](../apps/admin-web/src/styles/adminDensity.css)：页面显式使用 `admin-density`，Teleport 弹框显式使用 `admin-density-dialog`；默认不改变其他菜单。 - [测量作业密度](../apps/admin-web/src/modules/inbounds/measurement/measurementDensity.css)：测量与审核共享作业布局，宽度由测量弹框自身提供。 - [国内仓逐操作核对记录](Admin国内仓样式核对记录.md)：三组页面的承载方式、例外和验收证据。 +- [客户管理局部密度样式](../apps/admin-web/src/modules/customers/customerDensity.css)：客户列表、详情、计费与相关弹框的显式密度入口。 +- [客户管理逐操作核对记录](Admin客户管理样式核对记录.md)：两个菜单入口及关联详情、审核、编辑与预览的范围和人工验收项。 - [订单列表与详情](../apps/admin-web/src/modules/unified-orders/pages/UnifiedOrdersView.vue)：列表、顶部摘要、描述表、页签、日志表及订单弹框。 - [订单局部密度样式](../apps/admin-web/src/modules/unified-orders/styles/orderDensity.css)：费用、履约与测量弹框的局部样式。 - [国内仓导航](../apps/admin-web/src/core/navigation/adminNavigation.ts)：`domestic-warehouse` 分组是菜单范围来源。 @@ -57,10 +59,29 @@ ### 列表 - 继续使用 `ListPageLayout + QueryToolbar + DataTable`。查询、批量操作、表格、分页构成连续工作区，不重复放置正文大标题或统计卡片。 -- “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；图标加文案，危险动作保留明确文字与确认。 +- “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；保留页面已确认的直接操作数量。订单列表和客户管理采用下述纯文字按钮，其他已接入页面沿用原按钮约定。危险动作保留明确文字与确认。 - 列宽按实际编号、状态和按钮数量决定；不能把样板的 260px 操作列套给所有列表。核对最多按钮、加载中和权限变化后的布局。 - 数值列右对齐，单位优先放表头；编号按业务需要设置宽度。保留横向滚动、列偏好、分页和已有行内编辑能力。 +#### 订单列表行内按钮（人工验收调整） + +依据用户提供的白底描边按钮参考图，订单列表行内操作采用纯文字、白底、1px 细边框，无阴影，圆角 6px；保持 28px 高、13px 字号、600 字重、左右内边距 10px、按钮间距 6px。该按钮圆角为明确例外，普通内容容器仍为 0–4px。 + +- 详情、备注、更多：深灰文字与浅灰边框。 +- 审核“通过”：橙色文字与浅橙边框，保留原确认流程。 +- 测量：紫色文字与浅紫边框。 +- 悬停使用对应浅色底，键盘焦点保持可见；禁用、处理中状态保留。更多入口统一为 `…`（Lucide `MoreHorizontal`），保留包含业务对象的“更多操作”悬停提示和可访问名称；下拉项纯文字。 + +本次仅接入订单列表行内操作。顶部查询/批量操作、弹框提交按钮与其他页面保持各自规则；不照搬参考图中的编辑、重置密码、跳转登录、删除等客户管理功能。 + +#### 客户管理按钮与详情 + +- 客户列表、海外仓阶梯费用及关联详情、编辑、审核、预览的业务操作按钮采用纯文字；查询、重置、复制也去掉装饰图标。分页箭头、列设置、筛选布局、关闭与全屏等独立图标控件保留，处理中旋转图标保留。 +- 客户列表行内按钮沿用 28px 白底描边、6px 圆角、6px 间距：详情/编辑/更多为灰色，审核为橙色，重置密码为紫色，跳转登录为蓝色，启用为绿色，停用/删除为红色。更多入口与订单列表统一显示 `…`，不显示“更多”文字；悬停提示及可访问名称保留，菜单项纯文字，保留原权限与操作分配。 +- 海外仓阶梯费用列表按原档位顺序显示“天数：单价”，在费用单元格中连续排列、整组自然换行；不制作每档独立白块，不强制左右两列，不隐藏后续档位。币种只在独立列展示，计费单位保留在表头；零单价照常显示 `0`，没有档位显示“—”。编辑按钮沿用灰色白底描边。 +- 客户详情保留彩色页签；企业信息用连续四组键值表，联系与合作信息保留三组键值表，长地址整行。资质文件采用连续行，企业成员使用表格。 +- 客户新增/编辑保留 1120px 三列表单，入驻审核保留 1040px，箱规规则编辑保留 1200px，海外仓阶梯编辑保留 1120px。宽度属于当前内容的适配值，不推广为全局默认。 + ### 详情与基本信息 - 第一行集中放返回、业务编号、核心状态及主要操作。下一行用可换行摘要展示关键上下文，不使用大数字概览卡。 @@ -109,7 +130,7 @@ 图标只作辅助，保留文字标签；装饰图标设置 `aria-hidden="true"`。选中态通过文字色和底部横线表示，不把 Emoji 强制染成单色。采用系统彩色 Emoji 字体，不引入图片生成或外部图标下载依赖。 -操作按钮继续使用既有 Lucide 图标与主操作、成功、危险等语义色。本次确认不表示每个操作按钮、表头或字段都需要添加 Emoji。 +彩色图标用于详情页签。业务操作按钮按各页已确认规则执行：订单列表行内按钮与客户管理使用纯文字；其他入口可保留既有 Lucide 图标。不要给操作按钮、表头或字段添加 Emoji。 ## 国内仓推广清单与顺序 @@ -131,7 +152,7 @@ 1. 改造前读取最近指引，沿菜单、路由、组件与事件定位实际页面；填写逐操作矩阵。原型已有承载方式不因密度统一而替换，明确的样式改造可在已授权范围内推进。 2. 多个真实消费者使用同类密度时，将稳定尺寸与布局能力收敛到本应用的样式变量或现有共享组件的可选能力。先明确接入范围，不让全局默认变化影响尚未改造的菜单。 -3. `adminDensity.css` 承载通用规则；`orderDensity.css` 仅保留订单业务分区，`measurementDensity.css` 仅保留测量作业布局。不要复制多份，也不要把订单类名套给所有页面。跨菜单共用组件（如模拟柜创建、托盘码打印）通过可选 `dense` 参数接入；未传参数的调用保持原布局。 +3. `adminDensity.css` 承载通用规则；`orderDensity.css` 仅保留订单业务分区，`measurementDensity.css` 仅保留测量作业布局，`customerDensity.css` 仅保留客户管理布局与纯文字操作规则。不要复制多份，也不要把订单类名套给所有页面。跨菜单共用组件（如模拟柜创建、托盘码打印）通过可选 `dense` 参数接入；未传参数的调用保持原布局。 4. 弹框经 Teleport 后必须仍能获得对应样式。检查普通、全屏、关闭、重开以及多个入口使用同一组件时的表现；避免无边界的全局 `.el-dialog`、`.el-table` 或 `!important` 覆盖。 5. 每页检查长编号、长地址、多条数据、空态、失败态、无权限、禁用态及处理中状态；所有字段、单位、排序、权限与操作资格应保留。测试不得继续锁定已废弃的卡片结构，也不能删除业务断言以换取通过。 6. 按 Admin 指引运行直接影响测试、类型检查、全量测试与构建；公共组件检查实际消费者。视觉默认由用户在指定视口操作并截图，缺少证据标记“待人工截图确认”；用户明确要求 AI 界面验收时，按本轮授权操作并记录实际证据，不将代码测试当作视觉通过。 diff --git a/README.md b/README.md index 8c35086..257adec 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,8 @@ - [平台、客户层级与权限契约](平台客户层级与权限契约.md)：平台/客户两级产品语义、列表包含详情的只读权限和跨层同步要求。 - [统一订单主状态与操作契约](统一订单主状态与操作契约.md)：统一订单状态、操作编码、内部状态映射和可信履约回传边界。 - [Admin/Client 前端原型还原验收规则](Admin-Client前端原型还原验收规则.md)：页面操作承载方式、视觉还原、响应式检查和验收证据要求。 -- [Admin 高密度界面规范](Admin高密度界面规范.md)：已确认订单样板的字号、间距、表格、描述表、弹框和彩色页签规则，以及国内仓推广入口。 +- [Admin 高密度界面规范](Admin高密度界面规范.md)：已确认订单样板的字号、间距、表格、描述表、弹框和彩色页签规则，以及国内仓、客户管理推广入口。 +- [Admin 客户管理样式核对记录](Admin客户管理样式核对记录.md)：客户列表、海外仓阶梯费用及关联详情和弹框的样式与人工验收项。 - [AI 工程执行与协作约束](AI工程执行与协作约束.md)：工作区、依赖、Git、部署、数据库、质量门禁和独立任务协作规则。 - [数据库中文注释维护规范](数据库注释维护规范.md)：数据库注释口径、职责、迁移流程、自动门禁与实值验收要求。 - [测试环境 Jenkins 部署指南](测试环境Jenkins部署指南.md)：测试环境持续部署授权、Job 参数、健康检查与失败处理。