43 KiB
Admin 高密度界面规范
确认依据与适用范围
2026-09-14，用户在 Admin 样式优化对话中确认订单列表样板，并要求以此推进国内仓样式统一。样板包括订单列表、测量与订单审核弹框、订单详情的基本信息、货品信息、费用信息、状态历史、测量数据、其他、拆分履约。详情页签使用与客户管理一致的彩色 Emoji 图标。
本规范固定该样板的视觉与密度规则。验收视口为 1920×1080，浏览器缩放 100%。其他页面采用本规范不等于其功能或视觉已验收。
这是一套后续 Admin 页面可复用的基线。新增菜单按“新模块接入规则”实施，不复制订单或客户模块 CSS；货柜管理的入口与共享组件边界见 货柜管理核对记录。海外仓的 10 个菜单及共享详情边界见 海外仓核对记录。列入下一批入口不代表页面已完成改造或验收。
当前推广范围包括 Admin 导航中的“国内仓”，以及本轮确认的“客户管理”两个入口：客户列表、海外仓阶梯费用，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。客户管理下的海外仓阶梯费用属于客户费用配置，不扩大到海外仓作业菜单。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA 与其他菜单采用规范时另行明确范围。
样板实现入口：
- 公共密度样式：页面显式使用
admin-density，Teleport 弹框显式使用admin-density-dialog；默认不改变其他菜单。 - 公共密度变量：两模块的字号、间距、控件/行/按钮/页签高度、圆角、底色和按钮语义色的唯一默认值入口。
- 维护合同检查：限定已接入消费者，检查变量归属、公共样式作用域及页面重复实现。
- 测量作业密度：测量与审核共享作业布局，宽度由测量弹框自身提供。
- 国内仓逐操作核对记录：三组页面的承载方式、例外和验收证据。
- 客户管理局部密度样式：客户列表、详情、计费与相关弹框的显式密度入口。
- 客户管理逐操作核对记录：两个菜单入口及关联详情、审核、编辑与预览的范围和人工验收项。
- 订单列表与详情：列表、顶部摘要、描述表、页签、日志表及订单弹框。
- 订单局部密度样式：费用、履约与测量弹框的局部样式。
- 国内仓导航：
domestic-warehouse分组是菜单范围来源。
本规范与 Admin/Client 前端原型还原验收规则 配合使用。在本规范适用范围内，已确认的密度、容器和页签图标规则优先于历史原型中的大卡片、大留白和单色页签图标；字段、业务分组、权限、操作语义及页面/弹框/抽屉承载方式仍按当前业务契约和逐操作矩阵核对。样板中某个字段的专属宽度不能直接当作其他页面的固定宽度。
2026-10-19，用户确认以下“弹框与表单”作为所有 Admin 弹窗的统一目标规范，按大模块逐组落实，首组为导航“国内头程”。该弹窗目标范围补充上文早期推广范围；页面、列表、详情页签及 Client/PDA 仍按各自已确认范围执行。规范固定不表示全部弹窗已改造或验收。
基本原则
表格顶部操作栏的桌面尺寸统一由 DataTable.vue 维护：padding: 6px 12px、min-height: 44px。普通栏与 .is-compact 共用尺寸，后者只改变对齐；不再按 1920px 断点切换尺寸。公共密度样式和业务页面不得重复声明这部分 padding / height；组件现有移动端排列规则保留。
- 普通业务内容采用连续白底、细边框、描述表与数据表格。短字段以“标签 + 值”连续排列，不制作独立指标卡片。
- 先压缩重复标题、重复汇总、容器层数和无意义留白，再调整列宽与行高。正文保持可读，不通过缩小整页、浏览器缩放或截断关键值提高密度。
- 长编号、地址、邮箱、文件名与备注允许跨列、换行或按已确认方式查看完整值。空值显示“—”或明确的未关联状态，不显示内部数据库 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。
- 默认行内操作（详情、编辑、备注、更多）：蓝色文字
#1777ff与浅灰边框，由--admin-action-neutral统一维护。 - 审核“通过”：橙色文字与浅橙边框，保留原确认流程。
- 测量：紫色文字与浅紫边框。
- 悬停使用对应浅色底，键盘焦点保持可见；禁用、处理中状态保留。更多入口统一为
…（LucideMoreHorizontal），保留包含业务对象的“更多操作”悬停提示和可访问名称；下拉项纯文字。
该规则覆盖订单列表、订单测量、测量数据审核、预装清单、库位管理、托盘管理、整柜业务以及其详情中的行内操作。查看/编辑/备注为默认蓝色 #1777ff，测量为紫色，审核为橙色，启用为绿色，停用/删除为红色。预装共用组件只在 preload 模式接入，已确认装柜清单模式保持原规则。顶部查询/新增/批量操作和弹框提交仍使用 32px 主次按钮，不机械改成行内按钮，也不增加样板中不存在的业务操作。
客户管理按钮与详情
- 客户列表、海外仓阶梯费用及关联详情、编辑、审核、预览的业务操作按钮采用纯文字；查询、重置、复制也去掉装饰图标。分页箭头、列设置、筛选布局、关闭与全屏等独立图标控件保留，处理中旋转图标保留。
- 客户列表行内按钮沿用 28px 白底描边、6px 圆角、6px 间距：详情/编辑/更多为默认蓝色
#1777ff，审核为橙色，重置密码为紫色，跳转登录为蓝色，启用为绿色，停用/删除为红色。更多入口与订单列表统一显示…，不显示“更多”文字；悬停提示及可访问名称保留，菜单项纯文字，保留原权限与操作分配。 - 海外仓阶梯费用列表按原档位顺序显示“天数：单价”，在费用单元格中连续排列、整组自然换行；不制作每档独立白块，不强制左右两列，不隐藏后续档位。币种只在独立列展示，计费单位保留在表头；零单价照常显示
0，没有档位显示“—”。编辑按钮沿用默认蓝色#1777ff文字、白底描边。 - 阶梯费用编辑弹框中的“新增阶梯”为蓝字浅蓝边、“删除”为红字浅红边，均使用 28px 高、6px 圆角的白底纯文字按钮；客户详情的海外仓费用编辑同步执行。底部保存/取消沿用 32px 主次按钮。按钮规则同时覆盖页面与 Teleport 弹框，并显式设置普通、悬停、焦点及禁用状态，避免默认主题色覆盖。
- 客户详情保留彩色页签；企业信息用连续四组键值表，联系与合作信息保留三组键值表，长地址整行。资质文件采用连续行，企业成员使用表格。
- 客户新增/编辑保留 1120px 三列表单，入驻审核保留 1040px，箱规规则编辑保留 1200px，海外仓阶梯编辑保留 1120px。宽度属于当前内容的适配值，不推广为全局默认。
详情与基本信息
- 第一行集中放返回、业务编号、核心状态及主要操作。下一行用可换行摘要展示关键上下文，不使用大数字概览卡。
- 返回使用
density-back轻量导航，与业务编号和状态排在同一行，保留箭头、文字、键盘焦点及原返回目标。该行并入连续白底详情区域，不为返回单独增加卡片或空白行；整柜库存的标题行与基本信息共用一个信息区。 - 页签紧接摘要。页签已表达的标题不再在正文重复占用一大行；数量、更新时间与相关操作可放紧凑工具栏。
- 短字段通常每行四组，长内容跨两组或整行。描述表标签浅灰、数值白底，边线连续；标签宽度以 112px 为样板参考，按字段实际长度调整。
- 保留字段顺序和业务分组，不使用会改变阅读顺序的自动密集填空布局。
- 同一个订单或实体内部的内容连续分区，不再层层套卡片。
费用、汇总与测量
- 汇总使用单行摘要或紧凑描述表。自动费用与其他费用保持各自业务口径，金额、单价、计费量、附加费和版本完整展示。
- 保留公式、计费依据和价格来源入口，不能为了减少行数合并不同口径的金额或重量。
- 测量各来源保留独立分组；展开时在表尾显示合计，折叠时在标题显示摘要，同一口径不在上下重复占位。
- 测量作业弹框采用用户确认的彩色分区：申报与实测对比浅绿（
#f4fbf8）、客户申报明细浅蓝（#f7f9ff）、箱规明细浅黄（#fffbf4），保留浅色背景、细边框和 8px 圆角，不使用左侧强调色条，作为连续白底规则的局部例外。区块不得使用负外边距伸出正文；左右内边距由measurementDensity.css统一维护，通用密度规则不得将其清零。保持 1560px、92vh 居中作业弹框及原有业务分组，不因修复裁切而移除彩色分区。 三个分区同级排列，客户申报不得嵌套在实测大框内。箱数、毛重、体积集中在“指标／客户申报／平台实测／差异（实测 − 申报）”表中，不在下方重复总数；未采集显示“未测量／待测量”，申报缺失显示“—”，相等显示“一致”。净重、材积重单独显示平台事实，不与申报毛重混比。 客户申报区保持只读；实际品名和预计托数放在“平台实测箱规”区，沿用原保存与权限规则。未采集时只保留主状态，有箱规和来源后显示采集来源；平台补充数据的口径说明通过提示展示。提交按钮旁显示当前订单状态、缺少测量或称重等实际阻断原因。 桌面布局中，对比区标题与客户、渠道、状态同排；申报区标题与原单据号码同排，标签和值横向排列；实测箱规标题、实际品名、预计托数及录入操作共享一行。长内容自然换行，不截断编号或缩小字号。提交阻断原因集中在固定底栏，正文不重复显示同一提示，业务状态、偏差和冲突提醒保留。 - 同一计算策略只保留一个明确操作入口，保存中、无权限、冻结与失败信息照常显示。
- 称重图片可用缩略图加紧凑事实行；保留查看原图、托盘/库位信息和人工修正入口。可视化、图纸、标签预览、库位示意等按业务用途保留合适尺寸。
历史、备注与空态
- 大量状态历史与操作日志优先使用表格：时间、事件、状态、操作人、备注。保留全部记录和原有排序，不合并或删除相似事件。
- 长备注自然换行；简短备注也可使用连续列表。空态使用简短文字，不用大型插画或为无数据区设置大最小高度。
- 真实流程进度图可以保留，不能因日志样板是表格就删除业务需要的阶段关系。
弹框与表单
本节是 Admin 统一弹窗规范 的唯一维护入口。2026-10-19 用户确认以测量作业弹窗为视觉样板，统一白底框架、紧凑标题栏、正文分区和固定底部操作。适用于 Admin 各大模块的新增、编辑、审核、只读查看、上传、预览及确认弹窗；按实际用途选择尺寸和内容结构。
参考图：测量弹窗原始截图（原附件 codex-clipboard-3eeb665f-6eee-437e-886b-75d3cc0dc78e.png）。截图只用于风格依据，尺寸沿用已确认规范；验收仍为 1920×1080、浏览器 100%，不按图片像素反推控件尺寸。
外框、标题与滚动
- 使用白色外框、细边线和紧凑标题栏；标题为“操作名称 · 业务编号”，没有业务编号时仅显示操作名称，缺失值不以数据库 ID 补位。复用现有标题字号、字重和分隔线。
- 标题栏与底部操作区固定可见，长内容只滚动正文；同一内容区保持一个主要纵向滚动容器。明细表保留业务所需的横向滚动。
- 优先使用
AppDialog的原生标题栏和已有全屏能力；关闭、全屏/退出全屏位于右上角，保留可访问名称。大型表格和作业弹窗按需启用全屏，小型确认弹窗无需强行加入全屏。 - 普通弹窗按内容自然增高，上边距参考 6vh、最大高度 88vh；测量等大型作业弹窗按已确认作业高度使用上边距 4vh、最大高度 92vh。全屏采用组件的完整视口规则。小表单不设置无业务依据的固定大高度或大块空白。
- 各操作已确认的独立页面、居中弹框或抽屉承载方式继续保留。此次统一弹窗外观不改变正式详情路由，也不将抽屉自动改成弹框。
按内容选择尺寸
| 用途 | 桌面宽度参考 | 内容排列 |
|---|---|---|
| 简单确认、备注、原因填写 | 560–600px | 紧凑单列，按内容增高 |
| 普通新增、编辑 | 680–920px | 通常双列；长地址、备注、附件跨列 |
| 多字段表单、资料审核 | 1040–1200px | 短字段通常三列，按业务分组，长内容整行 |
| 批量预览、对照与选择 | 约 1100px，随实际列宽调整 | 表格为主，保留数量、逐条明细和不可操作原因 |
| 测量等大型作业 | 样板 1560px、92vh | 业务分区、作业表格和固定操作底栏 |
以上为类型参考，不覆盖已有逐操作确认的业务尺寸，例如客户重置密码 520px、客户新增/编辑 1120px。宽度同时受视口边距约束；不得靠缩小字号、隐藏字段或截断关键编号来容纳内容。
正文分区、配色与密度
- 短字段使用紧凑表单或连续键值表，明细使用表格；按业务分组保持阅读顺序。分区标题可与客户、渠道、来源单号、状态或当前操作同行，长内容自然换行。
- 同一组含只读与可编辑数据时，优先放在一张连续信息表中：只读值直接展示，可编辑值在对应单元格中录入，保留标签、单位和焦点反馈。标签和值横排，不把只读字段做成禁用输入框；少量预估值并入同组末行，不为套用配色额外拆出大汇总卡片。配色统一不能增加层级、重复标题或挤压业务明细。
- 多分区作业采用浅色背景和细边框，取消左侧强调色条；分区圆角 8px，作为普通容器圆角规则的明确例外。分区同级排列，不层层套卡片。简单确认、短表单及普通说明保持连续白底，按需采用彩色分区。
- 同类信息复用同一配色，保留文字标题；颜色不代替业务状态或校验提示。
| 信息用途 | 样板对应分区 | 浅底色 |
|---|---|---|
| 汇总、实测对比与结论 | 申报与实测对比 | #f4fbf8 |
| 来源资料、只读申报与明细 | 客户申报明细 | #f7f9ff |
| 当前录入、编辑与作业明细 | 平台实测箱规 | #fffbf4 |
- 表格单元格以白底为主，表头浅灰；普通字号、控件高度、行高、间距沿用本规范公共令牌。单位、必填标识、校验错误、表单标签及原因说明完整保留。
- 汇总尽量只出现一次；表格已完整表达的字段不再另做统计卡片。错误、警告、成功及禁用状态继续使用现有语义，彩色分区不掩盖真实风险。
底部操作与交互
- 底部以细分隔线与正文区分，右侧排列原有取消、保存、提交等操作；一个阶段突出一个主操作，其他操作保持次级样式。按钮职责、顺序和保存触发方式按当前业务确认保留，不新增原本没有的“暂存”或“保存并提交”。
- 自定义底栏可显式使用
density-actions density-actions--footer，由公共样式维护右对齐、换行和按钮间距，不在业务页复制底栏通用布局。 - 左侧可显示当前状态、选中数量或实际提交阻断原因，同一阻断说明集中显示；只读、预览和小型确认弹窗按其实际动作提供关闭/取消/确认。
- 审核、确认清楚展示业务对象；批量操作保留逐票预览、选中数量和不可操作原因。加载中、无数据、接口失败、无权限、禁用与处理中均应有明确反馈。
- 保留提交锁定、原有遮罩/Esc/关闭规则、未保存保护及失败上下文；全屏切换、关闭和重开不丢失应保留的输入，不允许重复提交。关闭、全屏等功能图标保留，不为统一风格给标题、字段或按钮添加装饰 Emoji。
公共维护与分模块落地
- 框架能力维护在
AppDialog.vue，默认尺寸、字号和间距维护在adminDensityTokens.css，通用外观维护在adminDensity.css。彩色分区推广时提取到公共令牌与显式接入的样式原语；模块只维护字段顺序、列数、业务分组和已确认的尺寸例外，不复制通用 CSS。 - 已提供的分区原语为
density-dialog-section，通过data-tone="summary/source/work"分别选择汇总绿、来源蓝、录入黄；分区标题使用density-dialog-section__title，连续分区容器使用density-dialog-sections。弹窗通过admin-density-dialog接入；保留抽屉并显式采用相同详情密度时使用admin-density-drawer admin-density-drawer--detail；实际侧滑编辑使用admin-density admin-density-drawer admin-density-drawer--editor，复用相同分区、连续编辑表和底栏，不改变其他抽屉。公共选择器保持原弹窗的优先级。测量样板与订单弹窗共同消费--admin-dialog-*令牌，后续模块沿用同一入口。 - 弹窗内简短说明显式使用
density-dialog-note，由公共样式维护辅助字号、颜色和尾距；业务页面不重复这些普通说明外观。 - JSON及原文快照显式使用
density-code-block，由公共样式维护代码字号、底色和边框；长内容完整换行，沿用外框正文滚动，不另设固定高度、内容截断或纵向滚动。快照属于诊断证据，不据此将数据库ID展示为业务编号。 - 连续信息表需要单元格编辑时，在
density-table上显式添加density-table--editable；数值与单位使用density-table-editor横排。输入的普通边框融入表格，保留悬停、键盘焦点及禁用反馈；页面只配置标签列宽和字段排列，不复制输入框外观。 - 小表单继续使用
density-form；末项已有明确紧凑尾距约定时显式添加density-form--flush-end，不改变其他表单末项为校验错误保留的空间。 - Teleport 弹框自身显式使用
admin-density-dialog，原有ElMessageBox使用admin-density-confirm；原生el-dialog的外观按同一规范接入，是否收敛到AppDialog按实际能力和消费者核对，避免一次替换全部弹窗。抽屉继续使用既有admin-density-drawer边界。 - 按“盘点当前大模块 → 填写逐操作矩阵 → 完成样板组 → 人工截图确认 → 推广本模块其余弹窗 → 模块整体核对”的流程推进。先从“国内头程”的订单列表相关弹窗开始，以测量弹窗为样板，再依次整理订单测量、测量数据审核、库位管理、托盘管理、整柜业务、船期管理。实际入口以
adminNavigation.ts和模块路由为准，共享弹窗记录全部直接调用方。 - 后续每个大模块按同一流程开展，进度和截图结论写入对应模块核对记录；本规范只维护稳定规则。页面字段、状态、权限、接口、计算口径、校验和提交逻辑继续按当前业务契约执行。
- 代码检查与人工视觉结论分别报告，逐项核对普通/全屏/关闭重开、长内容、空态、错误和权限状态；缺少截图时标记“待人工截图确认”。按模块汇总发布范围，部署继续沿用对应环境授权规则。
彩色图标
导航性质的详情页签采用与客户管理一致的彩色 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。
国内仓、客户管理的样式维护边界
2026-10-21 用户确认 Admin 表头统一采用低饱和浅蓝底 #edf4ff、深蓝文字 #284b78，替代灰色表头。公共颜色由 foundation.css 的 --cc-list-table-header-bg 与 --cc-list-table-header-text 维护，标准列表、工作台、弹框/抽屉内 Element 表格及 density-table 共用；不改变正文行、搜索区和详情标签底色。
2026-10-21 用户确认 Admin 所有列表的搜索/筛选区与下方表格分开，作为独立区块，圆角统一为 5px。公共尺寸由 foundation.css 的 --cc-list-query-radius 与 --cc-list-query-gap 维护；DataTable 的筛选容器统一提供边框、底色及下方 16px 间距，内部 QueryToolbar 不重复套卡片；独立 QueryToolbar 使用相同圆角，沿用列表布局已有的区块间距。此约定替代下述历史连续列表模式中搜索区与表格相连的外观，不改变字段、查询行为和操作承载。
2026-09-30 确认的连续列表模式见 排车列表公共接入规范：通过 DataTable appearance="integrated" 显式接入标题、业务按钮、查询、结果和分页共用卡片；仅操作列使用蓝色普通文字、红色危险文字并禁止悬停下划线。该模式的行高、卡片、搜索与页头样式由 DataTable 统一维护，行操作外观由 adminTextActions.css 维护；查询、顶部和弹框按钮保持原样。此约定优先于本节历史的行内描边、图标和独立路由标题规则；未接入页面保持默认。当前接入范围与特殊页面见 推广核对记录。
本节维护表适用于已接入页面及其实际子组件，当前范围以推广核对记录为准。此次收敛以保留业务字段、权限、计算与承载方式为前提。
2026-10-20 用户确认固化自营模块的蓝白、清爽、少提示文字风格，作为后续 Admin 改版基线。配色、卡片和图表外观统一从 蓝白卡片式工作台风格参考 进入；该文档按总览、标准列表、复杂分析、运行看板与图表弹窗列出参考页面和公共样式入口。adminWorkbenchTokens.css、adminWorkbench.css、adminWorkbenchChartTheme.ts 只在显式 admin-workbench 范围内提供外观，保留本规范的业务密度、表单和浮层承载。按确定的模块范围分批接入、逐页核对，不直接改写全局默认值或将样板通过视为全端验收通过。
页面和区块不再常驻重复的功能介绍。一般流程、计费规则和图表图例复用 InlineHelp.vue，在标题或对应操作旁显示信息图标，鼠标移入或键盘聚焦时浮层展示说明，不展开正文或增加独立说明行。已有包含交互操作的统计说明弹层保留其原交互。错误、权限、过期状态、操作阻断和危险后果仍直接展示，不通过全局隐藏段落或说明组件来精简页面。
| 要修改什么 | 唯一维护位置 | 页面需要做什么 |
|---|---|---|
| 正文/辅助/分区/页头字号 | 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 与业务事件 |
| 列表状态／分类页签（国内订单、尾程订单、车辆、供应商、整柜业务、国内／海外货柜工作台、退货库存） | adminDensity.css 的 .density-status-tabs |
原生按钮使用 is-active，Element 页签同时保留 density-element-tabs；保留业务分类、图标、数量、查询与切换，不在页面复制页签样式；详情页签继续使用原有详情规则 |
| 详情返回导航 | .density-back |
使用 link，保留返回事件和可访问名称；客户管理按纯文字约定保留返回文字 |
| 详情页头与业务摘要 | .density-detail-header / .density-detail-heading / .density-detail-title / .density-detail-overview |
与国内订单样板共用排版；页面提供实际业务编号、状态及摘要，不复制标题字号和摘要间距 |
| 连续白底独立详情容器 | DetailPageLayout 上的 .density-detail-layout |
显式接入统一页头分隔线、正文间距与零区块间隙；正文去掉重复面板，业务仅保留列数和长字段跨列 |
| 详情页签及彩色图标 | .density-tabs、.density-tab-icon |
保留标签、键盘事件和激活态；只配置业务内容 |
| 现有 Element 详情页签 | .density-element-tabs |
保留 el-tabs 的键盘处理、权限条件与切换事件，标签复用彩色图标 |
| 现有原生资料表、状态历史表 | .density-table |
保留字段、记录排序、业务列宽和固定操作列；不另写行高、边线和表头底色 |
| 分组页面与弹框表单 | .density-form |
显式接入统一标签字号和字段间距，模块只维护列数、跨列及字段顺序 |
| 既有 FormSection 分组 | .density-form-section |
在 FormSection 上显式添加，复用公共标题字号和分组间距，保留业务标题与分组顺序 |
| Element 描述表 | .density-descriptions |
页面显式接入统一标签/内容字号与行高；保留原字段及列数 |
| 连续信息表边框、标签底色、文字与内边距 | .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 左边距。不得将两份间距叠加，也不以更强选择器在页面逐个覆盖。
纯文字行操作由 adminTextActions.css 统一将按钮横向内边距和组间距减半：每侧 5px、组间距 3px（随公共间距变量缩放），相邻文字间留白由 26px 收紧为 13px。描边操作继续使用原间距；页面不单独覆盖文字操作间距。
防止维护退化
- 同一通用外观只有一个实现。 已由公共类接管的按钮配色、页签高度、信息表边框或弹框内边距，删除原页面声明，不能保留两套后再增加优先级或
!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 保留业务所需面积；指标卡和图表不得套用
.density-fields或其他详情表格样式，模型画布和打印尺寸不套普通行高。空态、错误、长内容、处理中、只读和无权限仍要可用。 - 获准采用蓝白外观的页面按 蓝白样板接入入口 选择对应页面类型；列表参考销量分析，复杂分析参考库存分析，运行看板参考数据采集，不一律复制经营总览的大指标卡。保留现有密度根，显式接入主题根和公共类，浮层自行声明作用域；具体覆盖与截图结论回到目标模块现有矩阵。
完整接入示例
下面展示已有页面的接入结构，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。既有 Element 页签使用 density-element-tabs；页签栏与正文分离时隐藏空内容容器。在 el-tab-pane 内承载正文的页面必须同时使用 density-contained-tabs，保留正文并由公共样式设置内容间距。不得依赖页面 CSS 覆盖隐藏规则。既有原生资料/历史表用 density-table，分组表单用 density-form。返回按钮使用 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。接入时补充受影响清单，不移除国内仓和客户管理基线，也不通过递归扫描全后台推导范围。- 动态类检查显式执行预装/已确认、
dense开/关，以及 DOMESTIC/OVERSEAS 入口；货柜已确认清单与船期浮层有独立开关断言。接入其他条件时补充真实上下文和对应开关用例，不能一律传preload、强行把所有条件置真，或只断言出现过类名。 - 检查必须同时覆盖 CSS 独立导入、公共原语的实际祖先、Teleport 容器自己的类、变量定义与消费、按钮间距、普通/悬停/焦点/禁用，以及原有业务行为。源码合同只防止已知结构退化，不能证明最终 CSS 优先级或布局视觉正确。
- 发布前的代码门禁为密度合同、受影响业务测试、类型检查、全量测试和构建；维护指引后运行 AGENTS 索引合同。人工按 1920×1080、100% 缩放检查独立打开/刷新、列表到详情、浮层普通/全屏/重开、长数据和权限状态。缺少对应截图时保留“待人工截图确认”。