docs/Admin货柜管理样式核对记录.md

# Admin 货柜管理样式核对记录

## 本次范围与状态

用户确认继续优化货柜管理的 4 个菜单。本轮按下表实现列表、独立新建/详情页、智能装柜工作台及关联弹框的密度统一。代码检查结果在文末记录；未进行本轮浏览器视觉验收，所有修改后效果均待人工截图确认。

统一使用 [Admin 高密度界面规范](Admin高密度界面规范.md)，以国内仓与客户管理为样板。普通列表、行内描边按钮、详情返回与页签、连续信息表、表单和浮层框架复用公共能力；业务状态、权限、接口、字段顺序、独立页面/弹框/抽屉承载方式保持现有契约。

## 4 个菜单与实际入口

范围依据：[Admin 导航](../apps/admin-web/src/core/navigation/adminNavigation.ts) 的 `container-management` 分组。下表源码路径相对 `apps/admin-web/src/modules/`。

| 菜单 | 页面与路由 | 新建、详情及相关组件 | 改造前继续核对 |
|---|---|---|---|
| 订舱列表 | `ocean-bookings/pages/OceanBookingsView.vue`，`/ocean-bookings` | `/ocean-bookings/new` 与 `/:bookingId` 共用 `OceanBookingDetailView.vue`；`OceanBookingDocumentsPanel`、`OceanBookingPrintDialog`、`CarrierScheduleQueryPanel` 和确认放舱弹框 | 新建与详情分别核对；资料、打印、船期、放舱资格及处理中状态不能丢失 |
| 拖车列表 | `trucking/pages/TruckAppointmentsView.vue`，`/trucking` | `TruckAppointmentCreateView.vue`（`/trucking/new`）、`TruckAppointmentDetailView.vue`（`/trucking/:id`）；共用 `TruckAppointmentForm`、`TruckAttachmentDialog` | 新建是独立页面，编辑经详情页 `edit=1`；表单、附件、返回目标和状态资格分别核对 |
| 送柜报关 | `container-loading/pages/DomesticContainersView.vue`，`/container-loading/domestic` | 列表共用 `ContainersView.vue`；详情经 `DomesticContainerDetailView.vue` 到 `ContainerDetailView.vue`，均传 `workbench="DOMESTIC"`；另有 `SmartLoadingWorkbenchView.vue` 深链 | 模拟柜、关联订舱、装柜/预装关联、报关、费用、出仓及智能装柜入口按实际权限展开 |
| 清关提柜 | `container-loading/pages/OverseasContainersView.vue`，`/container-loading/overseas` | 列表共用 `ContainersView.vue`；详情经 `OverseasContainerDetailView.vue` 到 `ContainerDetailView.vue`，均传 `workbench="OVERSEAS"` | 船节点、清关资料、码头车队、提柜/还柜、异常、文件和尾程费用按实际权限展开 |

路由事实：[订舱](../apps/admin-web/src/modules/ocean-bookings/routes.ts)、[拖车](../apps/admin-web/src/modules/trucking/routes.ts)、[货柜工作台](../apps/admin-web/src/modules/container-loading/routes.ts)。不将“国内仓”的整柜业务 `/domestic-containers` 当作这里的送柜报关页面。

## 共享边界与例外

1. `ContainersView.vue` 和 `ContainerDetailView.vue` 同时服务国内、海外。可以复用样式，但两个模式分别保留字段、操作权限和业务资格；不能只验国内模式就声称覆盖清关提柜。
2. `ContainerSimulationCreate.vue`、`PalletLabelPrintDialog.vue` 已被国内仓预装入口以 `dense` 接入。货柜管理接入时优先沿用该参数，并回归原国内仓调用；不复制组件或撤销已有密度。
3. 货柜详情实际引用 `ContainerOverviewPanel`、`CarrierScheduleQueryPanel`、`ContainerCustomsPanel`、`LoadingListDetailDrawer`、`ContainerFeesPanel`、`ContainerLastLegFeesPanel` 和 `OceanBookingLinkDialog`。沿这些组件继续盘点实际页签、弹框与消息确认；不要因为父详情接入了公共类就把全部子页面记为完成。
4. `LoadingListDetailDrawer` 当前是嵌入内容组件，名称不决定承载方式。它同时服务预装和已确认清单；为货柜详情的已确认模式接入密度时，要同步修改原“未接入模式保持默认”的合同与两个实际消费者用例，不能只放开样式后删检查。
5. 智能装柜的模型/画布、船期轨迹、打印标签与 PDF 保留必要面积；只压缩周边表单、说明和装饰留白。航运业务编号、实际柜号、长文件名应有完整展示方式。

## 原型与逐操作矩阵

原型先读 [局部指引](悦/货代SAAS平台后台/AGENTS.md)，目标模块为 `prototype-src/modules/06-containers.html`：订舱 `page-booking-list` / `page-booking-detail`，拖车 `page-truck-list` / `page-truck-add` / `page-truck-edit`，历史货柜与装柜入口 `page-ct-list` / `page-ct-manifest` / `page-ct-board`。

历史原型没有完整表达当前国内/海外双工作台，不能照其页面数量恢复旧菜单。本轮以用户确认的密度规则和当前实际组件、事件为依据，保留如下承载方式：

| 页面/模式 | 操作与承载方式 | 当前组件与依据 | 采用公共规则/业务例外 | 验证与截图 |
|---|---|---|---|---|
| 订舱 | 列表查看/编辑，跳转独立页面 | `page-booking-list`；`OceanBookingsView.open` | 灰色纯文字描边；草稿编辑、已放舱查看资格保留 | 待人工截图确认 |
| 订舱 | 新建草稿、保存及详情 | `page-booking-detail`；`OceanBookingDetailView` 的 `booking-groups` | 轻量返回与标题同区；原业务分组与字段顺序保留，去除内层卡片；柜型操作列保留在首列 | 待人工截图确认 |
| 订舱 | 删除草稿、确认放舱 | `removeDraft` / `releaseDialogOpen` 与 `submitRelease` | 删除消息独立接入；放舱保留 560px 居中确认与只读、处理中门禁 | 待人工截图确认 |
| 订舱 | 上传/替换、下载、作废资料与作废历史 | `OceanBookingDocumentsPanel.selectFile/download/remove` | 类型分组改连续资料行，长文件名换行；替换与作废仍需原消息确认 | 待人工截图确认 |
| 订舱 | 选择打印类型、PDF 预览/下载 | `OceanBookingPrintDialog.preview/backToSelection/download` | 保留 1120px 弹框、预览视口及 PDF 输出尺寸；选择项减小留白 | 待人工截图确认 |
| 订舱 | 船期与状态历史 | `CarrierScheduleQueryPanel`；`OceanBookingDetailView` 的 `detail.histories` | 船期显式 `dense`；状态历史表保留时间、状态变化、操作人、原因与原排序 | 待人工截图确认 |
| 拖车 | 列表详情/编辑，独立新建页 | `page-truck-list` / `page-truck-add`；`TruckAppointmentsView.openDetail`、`TruckAppointmentCreateView` | 行内纯文字描边；新建页返回和标题同区，不再放进表单说明末尾 | 待人工截图确认 |
| 拖车 | 编辑、只读详情及保存 | `page-truck-edit`；`TruckAppointmentDetailView`、`TruckAppointmentForm` | 返回/编号/状态同区；桌面四列表单、关联与长地址跨列保留，公共表单字号间距 | 待人工截图确认 |
| 拖车 | 状态变更确认与历史 | `changeStatus`、`history` | 原资格和确认消息；历史连续表格保留全部记录及操作人/原因 | 待人工截图确认 |
| 拖车 | 附件查看、上传/关联、删除 | `TruckAttachmentDialog` | 保留 640px 居中弹框；连续附件行，删除红色描边，消息独立接入 | 待人工截图确认 |
| 送柜报关 DOMESTIC | 列表、编辑基础资料 | `DomesticContainersView → ContainersView`；`openEdit/save` | 未完结/已完结页签 38px；查看、编辑、装柜、清单保持原排列；820px 双列表单使用公共弹框 | 待人工截图确认 |
| 送柜报关 DOMESTIC | 新增模拟柜、关联订舱 | `ContainerSimulationCreate`；`OceanBookingLinkDialog.save` | 模拟柜沿用 `dense`；关联保留 680px 弹框和候选资格 | 待人工截图确认 |
| 送柜报关 DOMESTIC | 智能装柜、分配/移除、调整箱数 | `SmartLoadingWorkbenchView.recommend/openAssign/assign/remove/startQuantityEdit` | 独立深链；保留容量进度、同柜组与封托说明、列表和分配弹框；普通行内操作接入描边 | 待人工截图确认 |
| 双工作台详情 | 返回、概要、业务页签 | `ContainerDetailView` 的 `workbench-tabs` | Element 页签保留键盘行为，改 38px 彩色图标；概要为紧凑摘要，字段为四组连续描述表 | 待人工截图确认 |
| 送柜报关 DOMESTIC | 异常标记/取消与历史 | `ContainerOverviewPanel` 的 `exception`；`ContainerDetailView.exceptionOpen` | 历史原因自然换行；520px 原因弹框独立接入 | 待人工截图确认 |
| 送柜报关 DOMESTIC | PDA 进度与照片、国内出仓门禁 | `ContainerOverviewPanel` 的 `pda`；`confirmDeparture` | 去除内层卡片、数字改小摘要；保留进度、照片原图入口、全部门禁展开及离仓确认 | 待人工截图确认 |
| 送柜报关 DOMESTIC | 报关资料、下载、上传完成文件、开始/完成报关 | `ContainerCustomsPanel` | 连续原生资料表，操作首列；纯文字描边，不改变全买单/退税分流或完成条件 | 待人工截图确认 |
| 送柜报关 DOMESTIC | 装柜清单页签、打印清单/托盘码 | `LoadingListDetailDrawer`；`printLoadingList`；`PalletLabelPrintDialog` | 预装/已确认模式均由调用者显式接入；保持嵌入内容及打印载体，PDF 尺寸不变 | 待人工截图确认 |
| 清关提柜 OVERSEAS | 列表、车队选择、发送/重试邮件与记录 | `ContainersView.selectRowFleet/sendPickupEmail/retryEmail/openEmailHistory` | 原列表控件与业务资格；邮件记录 1100px 弹框、重试确认独立接入，邮件正文保留换行 | 待人工截图确认 |
| 清关提柜 OVERSEAS | 预约/实际提柜、还柜及拖车历史 | `drayageActionOpen`、`drayageHistoryOpen`；详情 `emptyReturnOpen` | 520px 时间与原因表单、980px 历史；超时状态和服务端时间事实原样保留 | 待人工截图确认 |
| 清关提柜 OVERSEAS | 清关/DO 文件上传下载、PU 保存、完成清关 | `ContainerOverviewPanel` 的 `documents`；`documentOpen/clearanceOpen` | 操作首列描边；文件与 PU 保持不同流程，520px 弹框；无资料/只读/失败状态保留 | 待人工截图确认 |
| 订舱/双工作台 | 履约轨迹、任务历史、人工船节点补录 | `CarrierScheduleQueryPanel` | 原轨迹分组和时间顺序保留；长摘要换行，展开查询事实为连续信息表；620px 补录弹框仅在 `dense` 模式接入 | 待人工截图确认 |
| 双工作台费用页签 | 头程新增、调整、通过/驳回/作废、凭证、财务分摊 | `ContainerFeesPanel` | 行内纯文字描边，页内工具栏复用公共尺寸；编辑/驳回弹框和消息独立接入，客户归属与金额口径不变 | 待人工截图确认 |
| 双工作台费用页签 | 尾程新增/调整、提交/审核/作废、付款凭证预览 | `ContainerLastLegFeesPanel` | 620px 双列表单、900px 预览及消息独立接入；保留图片 65vh 与全部权限条件 | 待人工截图确认 |

交付按菜单逐个覆盖完整工作区；两种货柜模式共享代码时同时回归。代码检查和人工截图分别记录，不将入口盘点或公共规范可复用等同于本模块已优化。

## 公共实现与范围控制

- `adminDensity.css` 增补 `density-element-tabs`、`density-table` 和 `density-form`，分别供现有 Element 页签、原生资料/历史表和分组表单显式使用；样式仍限定在密度入口内。原生表保留业务列宽和固定操作列。
- `LoadingListDetailDrawer` 增加可选 `dense`；预装默认接入规则保留，货柜已确认清单显式开启，其他未开启消费者仍保持原布局。其局部密度类统一命名为 `loading-density`。
- `CarrierScheduleQueryPanel` 增加可选 `dense`；订舱和货柜详情开启，独立船期入口未开启；原有无密度模式用原尺寸兜底。
- 修改仅涉及样式、布局、图标及可选密度参数；不修改 API、业务权限、字段、提交资格或状态推导。图片原图、标签和 PDF 输出保持原功能。
- 密度合同显式登记 4 个菜单、独立新建/详情和实际子组件，分别检查 DOMESTIC/OVERSEAS 入口、共享组件开启/关闭及预装/已确认模式。原有国内仓与客户管理清单保留。

## 2026-09-14 代码验证结果

- 货柜、订舱、拖车、船期、清单与公共密度定向回归：53 个文件、485 项通过；补充的原生表、共享入口检查及智能装柜/双工作台回归 50 项通过。
- 最终全量 `pnpm test`：249 个文件、1918 项全部通过。首次全量运行中仅跨模块状态合同仍锁定拖车旧图标，更新外观断言后完整复跑通过；原权限、状态、路由和业务提交断言保留。
- `pnpm typecheck`、`pnpm build` 与 `git diff --check` 通过；AGENTS 索引合同 1050 项通过。
- 本轮业务脚本与修改前版本对比，仅增加样式导入、确认浮层类和可选密度参数，没有修改业务处理逻辑。实际浏览器加载、长数据布局、浮层普通/全屏/重开及各权限状态仍待 1920×1080、100% 缩放人工截图确认。
- 本轮未部署、未启动后端或修改业务数据。代码验证不替代实际业务写入及视觉验收。