27 KiB
Admin 高密度界面规范
确认依据与适用范围
2026-09-14，用户在 Admin 样式优化对话中确认订单列表样板，并要求以此推进国内仓样式统一。样板包括订单列表、测量与订单审核弹框、订单详情的基本信息、货品信息、费用信息、状态历史、测量数据、其他、拆分履约。详情页签使用与客户管理一致的彩色 Emoji 图标。
本规范固定该样板的视觉与密度规则。验收视口为 1920×1080，浏览器缩放 100%。其他页面采用本规范不等于其功能或视觉已验收。
这是一套后续 Admin 页面可复用的基线。新增菜单按“新模块接入规则”实施，不复制订单或客户模块 CSS；货柜管理的入口与共享组件边界见 货柜管理核对记录。列入下一批入口不代表页面已完成改造或验收。
当前推广范围包括 Admin 导航中的“国内仓”，以及本轮确认的“客户管理”两个入口：客户列表、海外仓阶梯费用，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。客户管理下的海外仓阶梯费用属于客户费用配置，不扩大到海外仓作业菜单。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA 与其他菜单采用规范时另行明确范围。
样板实现入口：
- 公共密度样式：页面显式使用
admin-density，Teleport 弹框显式使用admin-density-dialog；默认不改变其他菜单。 - 公共密度变量：两模块的字号、间距、控件/行/按钮/页签高度、圆角、底色和按钮语义色的唯一默认值入口。
- 维护合同检查：限定已接入消费者，检查变量归属、公共样式作用域及页面重复实现。
- 测量作业密度：测量与审核共享作业布局，宽度由测量弹框自身提供。
- 国内仓逐操作核对记录：三组页面的承载方式、例外和验收证据。
- 客户管理局部密度样式：客户列表、详情、计费与相关弹框的显式密度入口。
- 客户管理逐操作核对记录：两个菜单入口及关联详情、审核、编辑与预览的范围和人工验收项。
- 订单列表与详情：列表、顶部摘要、描述表、页签、日志表及订单弹框。
- 订单局部密度样式：费用、履约与测量弹框的局部样式。
- 国内仓导航：
domestic-warehouse分组是菜单范围来源。
本规范与 Admin/Client 前端原型还原验收规则 配合使用。在本规范适用范围内，已确认的密度、容器和页签图标规则优先于历史原型中的大卡片、大留白和单色页签图标；字段、业务分组、权限、操作语义及页面/弹框/抽屉承载方式仍按当前业务契约和逐操作矩阵核对。样板中某个字段的专属宽度不能直接当作其他页面的固定宽度。
基本原则
- 普通业务内容采用连续白底、细边框、描述表与数据表格。短字段以“标签 + 值”连续排列，不制作独立指标卡片。
- 先压缩重复标题、重复汇总、容器层数和无意义留白，再调整列宽与行高。正文保持可读，不通过缩小整页、浏览器缩放或截断关键值提高密度。
- 长编号、地址、邮箱、文件名与备注允许跨列、换行或按已确认方式查看完整值。空值显示“—”或明确的未关联状态，不显示内部数据库 ID。
- 业务状态使用现有语义色和文字。只有真实阻断、错误、风险才使用明显的警示区域。
- 密度改造不改变计算口径、API、保存触发方式、权限资格、状态机或字段含义。遇到功能问题单独记录，不能用样式隐藏。
尺寸与颜色
下表是普通桌面业务布局基线；图片、长内容、错误反馈和可编辑表格可以自然增高，不能强制裁切。
| 项目 | 基线 |
|---|---|
| 正文、表格、输入文字 | 13px |
| 标签、辅助说明 | 12px；不进一步缩小 |
| 分区标题 | 14px，适度加粗 |
| 页面业务编号、弹框标题 | 16px |
| 普通页签 | 高 38px，左右内边距 16px，图文间距 6px |
| 页签图标 | 17px，固定 18px 占位，独立彩色显示 |
| 普通表格行 | 基准 36px，单元格上下内边距 4px；按内容自然增高 |
| 普通输入框与工具栏按钮 | 通常 32px |
| 表格内操作按钮 | 28px，保留文字、焦点和禁用反馈 |
| 区块间距 | 通常 12px；标准列表遵守现有 ListPageLayout 的单一间距，不叠加页级空白 |
| 普通内容内边距 | 12px；弹框正文 12px 16px |
| 容器圆角 | 0–4px；普通数据区无装饰阴影、渐变或上浮效果 |
| 内容底色 | 白色 |
| 表头、描述表标签底色 | 浅灰，参考 #f8fafc / #f9fafb |
| 边框 | 现有 --cc-border；表格参考 #e5e7eb |
| 悬停、斑马纹 | 轻量区分，参考 #f3f7fb / #fcfcfd |
颜色优先复用当前 --cc-* 与 Element Plus 语义变量。金额和测量数字可使用等宽数字排版，只有总计或关键结论适度加粗，不将每个值都加粗。
各类页面规则
列表
- 继续使用
ListPageLayout + QueryToolbar + DataTable。查询、批量操作、表格、分页构成连续工作区，不重复放置正文大标题或统计卡片。 - “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；保留页面已确认的直接操作数量。国内仓全部 7 个菜单及客户管理的行内业务操作采用下述纯文字描边按钮。危险动作保留明确文字与确认。
- 列宽按实际编号、状态和按钮数量决定；不能把样板的 260px 操作列套给所有列表。核对最多按钮、加载中和权限变化后的布局。
- 数值列右对齐，单位优先放表头；编号按业务需要设置宽度。保留横向滚动、列偏好、分页和已有行内编辑能力。
国内仓行内按钮（以订单列表样板统一）
依据用户提供的白底描边按钮参考图，订单列表行内操作采用纯文字、白底、1px 细边框，无阴影，圆角 6px；保持 28px 高、13px 字号、600 字重、左右内边距 10px、按钮间距 6px。该按钮圆角为明确例外，普通内容容器仍为 0–4px。
- 详情、备注、更多：深灰文字与浅灰边框。
- 审核“通过”：橙色文字与浅橙边框，保留原确认流程。
- 测量：紫色文字与浅紫边框。
- 悬停使用对应浅色底，键盘焦点保持可见；禁用、处理中状态保留。更多入口统一为
…（LucideMoreHorizontal），保留包含业务对象的“更多操作”悬停提示和可访问名称；下拉项纯文字。
该规则覆盖订单列表、订单测量、测量数据审核、预装清单、库位管理、托盘管理、整柜业务以及其详情中的行内操作。查看/编辑/备注为灰色，测量为紫色，审核为橙色，启用为绿色，停用/删除为红色。预装共用组件只在 preload 模式接入，已确认装柜清单模式保持原规则。顶部查询/新增/批量操作和弹框提交仍使用 32px 主次按钮，不机械改成行内按钮，也不增加样板中不存在的业务操作。
客户管理按钮与详情
- 客户列表、海外仓阶梯费用及关联详情、编辑、审核、预览的业务操作按钮采用纯文字；查询、重置、复制也去掉装饰图标。分页箭头、列设置、筛选布局、关闭与全屏等独立图标控件保留，处理中旋转图标保留。
- 客户列表行内按钮沿用 28px 白底描边、6px 圆角、6px 间距：详情/编辑/更多为灰色，审核为橙色，重置密码为紫色，跳转登录为蓝色，启用为绿色，停用/删除为红色。更多入口与订单列表统一显示
…，不显示“更多”文字；悬停提示及可访问名称保留，菜单项纯文字，保留原权限与操作分配。 - 海外仓阶梯费用列表按原档位顺序显示“天数：单价”，在费用单元格中连续排列、整组自然换行；不制作每档独立白块，不强制左右两列，不隐藏后续档位。币种只在独立列展示，计费单位保留在表头；零单价照常显示
0，没有档位显示“—”。编辑按钮沿用灰色白底描边。 - 阶梯费用编辑弹框中的“新增阶梯”为蓝字浅蓝边、“删除”为红字浅红边，均使用 28px 高、6px 圆角的白底纯文字按钮；客户详情的海外仓费用编辑同步执行。底部保存/取消沿用 32px 主次按钮。按钮规则同时覆盖页面与 Teleport 弹框，并显式设置普通、悬停、焦点及禁用状态，避免默认主题色覆盖。
- 客户详情保留彩色页签；企业信息用连续四组键值表，联系与合作信息保留三组键值表，长地址整行。资质文件采用连续行，企业成员使用表格。
- 客户新增/编辑保留 1120px 三列表单，入驻审核保留 1040px，箱规规则编辑保留 1200px，海外仓阶梯编辑保留 1120px。宽度属于当前内容的适配值，不推广为全局默认。
详情与基本信息
- 第一行集中放返回、业务编号、核心状态及主要操作。下一行用可换行摘要展示关键上下文，不使用大数字概览卡。
- 返回使用
density-back轻量导航，与业务编号和状态排在同一行，保留箭头、文字、键盘焦点及原返回目标。该行并入连续白底详情区域，不为返回单独增加卡片或空白行；整柜库存的标题行与基本信息共用一个信息区。 - 页签紧接摘要。页签已表达的标题不再在正文重复占用一大行；数量、更新时间与相关操作可放紧凑工具栏。
- 短字段通常每行四组，长内容跨两组或整行。描述表标签浅灰、数值白底，边线连续；标签宽度以 112px 为样板参考，按字段实际长度调整。
- 保留字段顺序和业务分组，不使用会改变阅读顺序的自动密集填空布局。
- 同一个订单或实体内部的内容连续分区，不再层层套卡片。
费用、汇总与测量
- 汇总使用单行摘要或紧凑描述表。自动费用与其他费用保持各自业务口径，金额、单价、计费量、附加费和版本完整展示。
- 保留公式、计费依据和价格来源入口，不能为了减少行数合并不同口径的金额或重量。
- 测量各来源保留独立分组；展开时在表尾显示合计，折叠时在标题显示摘要，同一口径不在上下重复占位。
- 同一计算策略只保留一个明确操作入口，保存中、无权限、冻结与失败信息照常显示。
- 称重图片可用缩略图加紧凑事实行；保留查看原图、托盘/库位信息和人工修正入口。可视化、图纸、标签预览、库位示意等按业务用途保留合适尺寸。
历史、备注与空态
- 大量状态历史与操作日志优先使用表格：时间、事件、状态、操作人、备注。保留全部记录和原有排序，不合并或删除相似事件。
- 长备注自然换行；简短备注也可使用连续列表。空态使用简短文字，不用大型插画或为无数据区设置大最小高度。
- 真实流程进度图可以保留，不能因日志样板是表格就删除业务需要的阶段关系。
弹框与表单
- 保留各操作已确认的独立页面、居中弹框或抽屉承载方式。审核确认不自动变为完整详情；简单备注不套用大型作业弹框。
- 标题和底部操作保持可见，长内容只滚动正文。优先使用
AppDialog的原生标题栏和已有全屏能力。 - 宽度按内容选择：简单确认/备注参考 560–600px，普通双列表单参考 680–920px，批量预览参考 1100px；订单测量作业样板为 1560px、92vh。以上是类型参考，不是所有弹框的统一固定尺寸。
- 普通弹框参考上边距 6vh、最大高度 88vh；大型测量作业参考上边距 4vh、最大高度 92vh。全屏时使用组件的完整视口规则。
- 表单控件、单位、必填标识、校验错误和原因说明完整保留。长表单按业务分组排两至四列，文本域按需跨列。
- 审核确认清楚展示业务对象；批量审核保留逐票预览、选中数量和不可操作原因。保留处理中锁定、关闭未保存确认与失败上下文。
彩色图标
导航性质的详情页签采用与客户管理一致的彩色 Emoji，同一语义尽量复用同一图标：
| 语义 | 图标 |
|---|---|
| 基本信息 | 📋 |
| 货品、货物明细 | 📦 |
| 费用 | 💰 |
| 历史、日志 | 📝 |
| 测量、尺寸 | 📐 |
| 其他资料 | 🗂️ |
| 拆分履约 | 🧩 |
| 计费规则（客户管理已有） | ⚖️ |
图标只作辅助，保留文字标签；装饰图标设置 aria-hidden="true"。选中态通过文字色和底部横线表示，不把 Emoji 强制染成单色。采用系统彩色 Emoji 字体，不引入图片生成或外部图标下载依赖。
彩色图标用于详情页签。国内仓 7 个菜单的行内按钮与客户管理业务操作使用纯文字；返回箭头、顶部与弹框的既有功能图标可保留。不要给操作按钮、表头或字段添加 Emoji。
国内仓推广清单与顺序
此表是实施入口，不是完成状态。每个入口必须继续沿实际组件引用盘点可达弹框与详情，不把父页面验收等同于所有子界面通过。
| 顺序 | 菜单 | 主入口（相对 apps/admin-web/src） | 本组应覆盖 |
|---|---|---|---|
| 样板 | 订单列表 | modules/unified-orders/pages/UnifiedOrdersView.vue |
列表、详情全部页签、测量、单票/批量审核及实际可达弹框 |
| 1 | 订单测量 | modules/inbounds/pages/InboundMeasurementsView.vue |
列表、测量作业、称重图片与相关编辑/预览 |
| 1 | 测量数据审核 | modules/inbounds/pages/MeasurementReviewsView.vue |
列表、审核工作区、明细、确认及当前实际存在的修正操作 |
| 2 | 预装清单 | modules/loading-lists/pages/PreloadPlansView.vue、PreloadPlanDetailView.vue |
列表、详情各页签、相关确认及打印/预览容器 |
| 3 | 库位管理 | modules/warehouse-resources/locations/pages/LocationsView.vue |
列表、详情、新增/编辑及实际存在的批量操作 |
| 3 | 托盘管理 | modules/warehouse-resources/pallets/pages/PalletsView.vue |
列表、详情、新增/编辑及实际存在的关联操作 |
| 3 | 整柜业务 | modules/domestic-containers/pages/DomesticContainersView.vue、DomesticContainerInventoryDetailView.vue |
入库/出库/库存工作区、库存详情与实际可达弹框 |
每组先统一列表，再处理详情与弹框；同一业务工作区一起交付人工查看。未注册、已重定向或只存在于历史原型的页面不能只凭文件存在就恢复或加入本轮。
实现与验收
- 改造前读取最近指引，沿菜单、路由、组件与事件定位实际页面；填写逐操作矩阵。原型已有承载方式不因密度统一而替换，明确的样式改造可在已授权范围内推进。
- 多个真实消费者使用同类密度时，将稳定尺寸与布局能力收敛到本应用的样式变量或现有共享组件的可选能力。先明确接入范围，不让全局默认变化影响尚未改造的菜单。
adminDensityTokens.css定义默认值，adminDensity.css承载通用组件规则；orderDensity.css、measurementDensity.css、customerDensity.css只保留各自业务布局与引用公共变量的局部规则。按钮外观不得在模块中另写一套。跨菜单共用组件（如模拟柜创建、托盘码打印）通过可选dense参数接入；未传参数的调用保持原布局。- 弹框经 Teleport 后必须仍能获得对应样式。检查普通、全屏、关闭、重开以及多个入口使用同一组件时的表现；避免无边界的全局
.el-dialog、.el-table或!important覆盖。 - 每页检查长编号、长地址、多条数据、空态、失败态、无权限、禁用态及处理中状态；所有字段、单位、排序、权限与操作资格应保留。测试不得继续锁定已废弃的卡片结构，也不能删除业务断言以换取通过。
- 按 Admin 指引运行直接影响测试、类型检查、全量测试与构建；公共组件检查实际消费者。视觉默认由用户在指定视口操作并截图，缺少证据标记“待人工截图确认”；用户明确要求 AI 界面验收时，按本轮授权操作并记录实际证据，不将代码测试当作视觉通过。
- 每组交付说明修改页面、公共影响、检查结果、剩余视觉差异。任何尺寸或布局例外记录在逐页矩阵中，避免把一次性例外写成新的全局默认。
逐页核对记录模板：
| 页面/路由 | 操作及承载方式 | 原型或确认依据 | 采用规则/业务例外 | 检查与截图结论 |
|---|---|---|---|---|
| 填写具体页面 | 分别填写详情、编辑、审核、预览等 | 原型 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-back |
使用 link，保留返回事件和可访问名称；客户管理按纯文字约定保留返回文字 |
| 详情页签及彩色图标 | .density-tabs、.density-tab-icon |
保留标签、键盘事件和激活态；只配置业务内容 |
| 连续信息表边框、标签底色、文字与内边距 | .density-fields |
只配置列数、跨列、字段顺序；特殊标签宽度使用局部 --admin-field-label-width |
| 弹框/抽屉标题、正文滚动、底部间距 | .admin-density-dialog / .admin-density-drawer |
容器显式接入，保留该业务已确认宽度与作业高度 |
| 客户资质列、测量对照列、预装信息布局 | 对应模块 CSS 或页面 scoped |
只保留业务列宽、列数、图片尺寸、定位与排列 |
使用约定
<!-- 业务按钮只选择语义，不复制尺寸、颜色及交互状态规则 -->
<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 统一间距，业务布局可决定是否换行。
density-actions 使用 gap 管理间距，并将 --cc-list-action-sibling-margin 设为 0；DataTable 通过该变量保留未接入按钮的默认 8px 左边距。不得将两份间距叠加，也不以更强选择器在页面逐个覆盖。
防止维护退化
- 同一通用外观只有一个实现。 已由公共类接管的按钮配色、页签高度、信息表边框或弹框内边距，删除原页面声明，不能保留两套后再增加优先级或
!important。 - 新增通用尺寸先改变量。 模块与页面只引用
--admin-*；禁止在页面重定义公共默认值。局部标签宽度是明确的业务参数，不改变全局标签宽度。 - 不要把代码搬到模块 CSS 就称为公共化。 多个业务共用的按钮、页签、信息表与弹框规则留在公共层；模块 CSS 不能依赖另一个业务模块的类名，也不引入第二套按钮颜色变量。
- 保留显式接入边界。 公共样式不能使用无范围的
.el-button、.el-table、.el-dialog选择器。Teleport 的弹框、抽屉必须自己携带密度类；不能仅依赖页面父级。 - 共用组件保留未接入消费者。 CSS 变量的兜底值用于独立渲染和未接入入口；两个已接入模块始终由公共变量决定实际值，兜底值不是第二份密度配置。打印标签、PDF 尺寸、原图、画布和既有窄屏规则不能机械替换。
- 公共调整按消费者回归。
adminDensity.test.ts维护明确的页面/组件清单，不扫描全部后台。检查模板中公共按钮、页签和信息表的真实祖先是否带有密度入口，不能仅断言文件导入了 CSS 或出现过密度类；页面弹框带有admin-density-dialog不代表列表与详情已接入。新增接入时同步清单及逐操作矩阵，运行合同、受影响测试、类型检查、全量测试和构建。 - 视觉与代码分开记录。 本轮默认人工截图；代码通过不等于视觉验收通过。已确认业务宽度和工作区高度可以保留为例外，例外写入核对记录。
新模块接入规则
先确定范围，再选择公共能力
- 用导航与实际路由列出全部菜单入口，以及新建、详情、编辑和深链页面；不能把文件夹数量当作页面覆盖数。为每个页面沿实际组件引用列出弹框、抽屉、消息确认、预览与打印入口，按逐操作矩阵记录承载方式。
- 默认复用普通表格 36px 行高、正文 13px、辅助文字 12px、行内描边按钮 28px、页签 38px、轻量返回和连续信息表。新模块的行内业务操作默认纯文字；顶部/提交保留 32px 主次按钮。动作语义色沿用本规范，不通过按钮文字自动猜测。
- 模块只保留业务列宽、字段跨列、布局与图纸尺寸等参数。
density-fields的四列是默认值，不是固定业务要求；返回位置与大弹框尺寸也不能从订单整页复制。 - 编辑表格、流程图、装柜模型、图片、标签和 PDF 保留业务所需面积；模型画布和打印尺寸不套普通行高。空态、错误、长内容、处理中、只读和无权限仍要可用。
完整接入示例
下面展示已有页面的接入结构，rows、columns、事件与表单仍使用该页面原实现。页面脚本直接导入 @/styles/adminDensity.css，不依赖先进入其他菜单后残留的样式，也不把这份 CSS 放入 scoped 样式块。
<AdminPage class="admin-density">
<ListPageLayout>
<DataTable :data="rows" :columns="columns">
<template #actions="{ row }">
<div class="density-actions">
<el-button class="density-action" @click="openDetail(row)">详情</el-button>
<el-button class="density-action" data-tone="warning" @click="review(row)">审核</el-button>
</div>
</template>
</DataTable>
</ListPageLayout>
<AppDialog class="admin-density-dialog" v-model="editorOpen" title="编辑资料">
<!-- 原有业务表单 -->
</AppDialog>
</AdminPage>
此结构只说明样式接入，不授权新增审核等业务动作。详情复用页面根节点的 admin-density；原生详情页签用 density-tabs / density-tab-icon，连续信息表用 density-fields。返回按钮使用 link class="density-back"，跟编号、状态排在同一行。
Teleport 弹框用 admin-density-dialog，抽屉框架用 admin-density-drawer，ElMessageBox 用 customClass: 'admin-density-confirm'；这些浮层必须各自声明，页面祖先不能替代。抽屉当前公共框架负责字号、标题和正文边距；其正文若复用页面级表格、信息表或按钮原语，在正文业务根节点显式接入 admin-density。不要把名为 Drawer 的嵌入组件当作实际抽屉，承载方式以模板和调用端为准。
共享组件与检查的扩展
- 对每个共享组件列出真实调用方及模式。现有
dense参数由调用入口显式传递；mode/workbench属于业务范围，不能为了样式变更其含义。新增消费者后，对开启和关闭密度、国内和海外等实际模式分别回归。 adminDensity.test.ts中菜单清单、densityPages、consumers、moduleCss分别覆盖导航、独立入口、子组件和模块 CSS。接入时补充受影响清单，不移除国内仓和客户管理基线，也不通过递归扫描全后台推导范围。- 动态类检查目前显式执行预装/已确认两种模式。接入其他条件时补充真实上下文和对应开关用例，不能一律传
preload、强行把所有条件置真，或只断言出现过类名。 - 检查必须同时覆盖 CSS 独立导入、公共原语的实际祖先、Teleport 容器自己的类、变量定义与消费、按钮间距、普通/悬停/焦点/禁用，以及原有业务行为。源码合同只防止已知结构退化，不能证明最终 CSS 优先级或布局视觉正确。
- 发布前的代码门禁为密度合同、受影响业务测试、类型检查、全量测试和构建；维护指引后运行 AGENTS 索引合同。人工按 1920×1080、100% 缩放检查独立打开/刷新、列表到详情、浮层普通/全屏/重开、长数据和权限状态。缺少对应截图时保留“待人工截图确认”。