@@ -0,0 +1,143 @@
# Admin 高密度界面规范
## 确认依据与适用范围
2026-09-14，用户在 Admin 样式优化对话中确认订单列表样板，并要求以此推进国内仓样式统一。样板包括订单列表、测量与订单审核弹框、订单详情的基本信息、货品信息、费用信息、状态历史、测量数据、其他、拆分履约。详情页签使用与客户管理一致的彩色 Emoji 图标。
本规范固定该样板的视觉与密度规则。验收视口为 **1920× ** 。其他页面采用本规范不等于其功能或视觉已验收。
当前推广范围按 Admin 导航中的“国内仓”菜单确定，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA、海外仓与其他菜单采用规范时另行明确范围。
样板实现入口：
- [订单列表与详情 ](../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` 分组是菜单范围来源。
本规范与 [Admin/Client 前端原型还原验收规则 ](Admin-Client前端原型还原验收规则.md ) 配合使用。在本规范适用范围内，已确认的密度、容器和页签图标规则优先于历史原型中的大卡片、大留白和单色页签图标；字段、业务分组、权限、操作语义及页面/弹框/抽屉承载方式仍按当前业务契约和逐操作矩阵核对。样板中某个字段的专属宽度不能直接当作其他页面的固定宽度。
## 基本原则
1. 普通业务内容采用连续白底、细边框、描述表与数据表格。短字段以“标签 + 值”连续排列，不制作独立指标卡片。
2. 先压缩重复标题、重复汇总、容器层数和无意义留白，再调整列宽与行高。正文保持可读，不通过缩小整页、浏览器缩放或截断关键值提高密度。
3. 长编号、地址、邮箱、文件名与备注允许跨列、换行或按已确认方式查看完整值。空值显示“—”或明确的未关联状态，不显示内部数据库 ID。
4. 业务状态使用现有语义色和文字。只有真实阻断、错误、风险才使用明显的警示区域。
5. 密度改造不改变计算口径、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` 。查询、批量操作、表格、分页构成连续工作区，不重复放置正文大标题或统计卡片。
- “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；图标加文案，危险动作保留明确文字与确认。
- 列宽按实际编号、状态和按钮数量决定；不能把样板的 260px 操作列套给所有列表。核对最多按钮、加载中和权限变化后的布局。
- 数值列右对齐，单位优先放表头；编号按业务需要设置宽度。保留横向滚动、列偏好、分页和已有行内编辑能力。
### 详情与基本信息
- 第一行集中放返回、业务编号、核心状态及主要操作。下一行用可换行摘要展示关键上下文，不使用大数字概览卡。
- 页签紧接摘要。页签已表达的标题不再在正文重复占用一大行；数量、更新时间与相关操作可放紧凑工具栏。
- 短字段通常每行四组，长内容跨两组或整行。描述表标签浅灰、数值白底，边线连续；标签宽度以 112px 为样板参考，按字段实际长度调整。
- 保留字段顺序和业务分组，不使用会改变阅读顺序的自动密集填空布局。
- 同一个订单或实体内部的内容连续分区，不再层层套卡片。
### 费用、汇总与测量
- 汇总使用单行摘要或紧凑描述表。自动费用与其他费用保持各自业务口径，金额、单价、计费量、附加费和版本完整展示。
- 保留公式、计费依据和价格来源入口，不能为了减少行数合并不同口径的金额或重量。
- 测量各来源保留独立分组；展开时在表尾显示合计，折叠时在标题显示摘要，同一口径不在上下重复占位。
- 同一计算策略只保留一个明确操作入口，保存中、无权限、冻结与失败信息照常显示。
- 称重图片可用缩略图加紧凑事实行；保留查看原图、托盘/库位信息和人工修正入口。可视化、图纸、标签预览、库位示意等按业务用途保留合适尺寸。
### 历史、备注与空态
- 大量状态历史与操作日志优先使用表格：时间、事件、状态、操作人、备注。保留全部记录和原有排序，不合并或删除相似事件。
- 长备注自然换行；简短备注也可使用连续列表。空态使用简短文字，不用大型插画或为无数据区设置大最小高度。
- 真实流程进度图可以保留，不能因日志样板是表格就删除业务需要的阶段关系。
### 弹框与表单
- 保留各操作已确认的独立页面、居中弹框或抽屉承载方式。审核确认不自动变为完整详情；简单备注不套用大型作业弹框。
- 标题和底部操作保持可见，长内容只滚动正文。优先使用 `AppDialog` 的原生标题栏和已有全屏能力。
- 宽度按内容选择：简单确认/备注参考 560–600px，普通双列表单参考 680–
- 普通弹框参考上边距 6vh、最大高度 88vh；大型测量作业参考上边距 4vh、最大高度 92vh。全屏时使用组件的完整视口规则。
- 表单控件、单位、必填标识、校验错误和原因说明完整保留。长表单按业务分组排两至四列，文本域按需跨列。
- 审核确认清楚展示业务对象；批量审核保留逐票预览、选中数量和不可操作原因。保留处理中锁定、关闭未保存确认与失败上下文。
## 彩色图标
导航性质的详情页签采用与客户管理一致的彩色 Emoji，同一语义尽量复用同一图标：
| 语义 | 图标 |
|---|---|
| 基本信息 | 📋 |
| 货品、货物明细 | 📦 |
| 费用 | 💰 |
| 历史、日志 | 📝 |
| 测量、尺寸 | 📐 |
| 其他资料 | 🗂️ |
| 拆分履约 | 🧩 |
| 计费规则（客户管理已有） | ⚖️ |
图标只作辅助，保留文字标签；装饰图标设置 `aria-hidden="true"` 。选中态通过文字色和底部横线表示，不把 Emoji 强制染成单色。采用系统彩色 Emoji 字体，不引入图片生成或外部图标下载依赖。
操作按钮继续使用既有 Lucide 图标与主操作、成功、危险等语义色。本次确认不表示每个操作按钮、表头或字段都需要添加 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` | 入库/出库/库存工作区、库存详情与实际可达弹框 |
每组先统一列表，再处理详情与弹框；同一业务工作区一起交付人工查看。未注册、已重定向或只存在于历史原型的页面不能只凭文件存在就恢复或加入本轮。
## 实现与验收
1. 改造前读取最近指引，沿菜单、路由、组件与事件定位实际页面；填写逐操作矩阵。原型已有承载方式不因密度统一而替换，明确的样式改造可在已授权范围内推进。
2. 多个真实消费者使用同类密度时，将稳定尺寸与布局能力收敛到本应用的样式变量或现有共享组件的可选能力。先明确接入范围，不让全局默认变化影响尚未改造的菜单。
3. `orderDensity.css` 当前带有订单专属选择器和业务分区规则，不能直接复制多份到各模块，也不能把订单类名套给所有页面。推广时提取可复用部分，保留业务特有布局；公共能力建立后清理重复的局部规则。
4. 弹框经 Teleport 后必须仍能获得对应样式。检查普通、全屏、关闭、重开以及多个入口使用同一组件时的表现；避免无边界的全局 `.el-dialog` 、`.el-table` 或 `!important` 覆盖。
5. 每页检查长编号、长地址、多条数据、空态、失败态、无权限、禁用态及处理中状态；所有字段、单位、排序、权限与操作资格应保留。测试不得继续锁定已废弃的卡片结构，也不能删除业务断言以换取通过。
6. 按 Admin 指引运行直接影响测试、类型检查、全量测试与构建；公共组件检查实际消费者。视觉仍由用户在指定视口操作并截图，缺少证据标记“待人工截图确认”。
7. 每组交付说明修改页面、公共影响、检查结果、剩余视觉差异。任何尺寸或布局例外记录在逐页矩阵中，避免把一次性例外写成新的全局默认。
逐页核对记录模板：
| 页面/路由 | 操作及承载方式 | 原型或确认依据 | 采用规则/业务例外 | 检查与截图结论 |
|---|---|---|---|---|
| 填写具体页面 | 分别填写详情、编辑、审核、预览等 | 原型 ID、代码入口或用户确认 | 列表/描述表/日志/作业弹框等 | 代码检查结果；待人工截图确认或实际结论 |
规范只记录稳定规则和入口。各组进度、临时问题与验收结果写入对应核对记录，不写入 `AGENTS.md` 。