12 KiB
12 KiB
Admin 货柜管理样式核对记录
本次范围与状态
用户确认继续优化货柜管理的 4 个菜单。本轮按下表实现列表、独立新建/详情页、智能装柜工作台及关联弹框的密度统一。代码检查结果在文末记录；未进行本轮浏览器视觉验收，所有修改后效果均待人工截图确认。
统一使用 Admin 高密度界面规范，以国内仓与客户管理为样板。普通列表、行内描边按钮、详情返回与页签、连续信息表、表单和浮层框架复用公共能力；业务状态、权限、接口、字段顺序、独立页面/弹框/抽屉承载方式保持现有契约。
4 个菜单与实际入口
范围依据：Admin 导航 的 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" |
船节点、清关资料、码头车队、提柜/还柜、异常、文件和尾程费用按实际权限展开 |
路由事实：订舱、拖车、货柜工作台。不将“国内仓”的整柜业务 /domestic-containers 当作这里的送柜报关页面。
共享边界与例外
ContainersView.vue和ContainerDetailView.vue同时服务国内、海外。可以复用样式，但两个模式分别保留字段、操作权限和业务资格；不能只验国内模式就声称覆盖清关提柜。ContainerSimulationCreate.vue、PalletLabelPrintDialog.vue已被国内仓预装入口以dense接入。货柜管理接入时优先沿用该参数，并回归原国内仓调用；不复制组件或撤销已有密度。- 货柜详情实际引用
ContainerOverviewPanel、CarrierScheduleQueryPanel、ContainerCustomsPanel、LoadingListDetailDrawer、ContainerFeesPanel、ContainerLastLegFeesPanel和OceanBookingLinkDialog。沿这些组件继续盘点实际页签、弹框与消息确认；不要因为父详情接入了公共类就把全部子页面记为完成。 LoadingListDetailDrawer当前是嵌入内容组件，名称不决定承载方式。它同时服务预装和已确认清单；为货柜详情的已确认模式接入密度时，要同步修改原“未接入模式保持默认”的合同与两个实际消费者用例，不能只放开样式后删检查。- 智能装柜的模型/画布、船期轨迹、打印标签与 PDF 保留必要面积；只压缩周边表单、说明和装饰留白。航运业务编号、实际柜号、长文件名应有完整展示方式。
原型与逐操作矩阵
原型先读 局部指引，目标模块为 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 入口、共享组件开启/关闭及预装/已确认模式。原有国内仓与客户管理清单保留。