22 KiB
Admin 列表样式推广核对记录
文档职责：仅维护模块范围、业务例外与检查／截图记录。通用样式统一以 Admin 界面规范 为准；下文日期批次中的旧外观不再作为新改造要求。普通样式任务只在涉及本模块范围、例外或验收证据时查阅本文。
本轮依据与边界
2026-10-21 后续视觉确认：列表页签对齐与灰白斑马纹以蓝白工作台当前规范为准；下文“无斑马纹”为此前批次实现记录，不再作为接入要求。
2026-09-30，用户确认排车列表样式后授权按客户管理、国内仓、货柜管理、海外仓顺序推广；特殊页面保留待人工确认。直接视觉依据为本轮截图 41fea1ee-f30a-46db-97b0-82ec96846ec7/image-1.png 与 排车样板。仅修改测试环境工作区 apps/admin-web，不部署或发布。
统一布局：左侧列表名称、右侧原业务按钮与字段设置，搜索和表格位于同一连续卡片。仅列表操作列采用蓝色普通文字、红色危险文字、悬停无下划线；查询、顶部、弹框按钮不变。列显隐、排序和拖动宽度使用公共浏览器偏好存储。保持所有业务字段、状态、权限和事件，不改变详情、新增、编辑、审核、文件预览与删除确认的承载方式。
修改前页面与操作矩阵
以下实现路径均相对 apps/admin-web/src/modules/。列表变化依据上述截图；其它操作以现有组件和事件为核对入口，保持原样，未定义的新承载方式不在本轮引入。
| 模块 | 页面 / 入口 | 当前实现与操作证据 | 本轮结论 |
|---|---|---|---|
| 客户管理 | 客户列表 /customers |
customers/pages/CustomersView.vue：customerRowActions、handleCustomerRowAction、openCreate，客户详情路由及编辑/审核/重置密码弹框 |
接入连续列表；详情、新增、编辑、审核、资质与确认操作保持 |
| 客户管理 | 海外仓阶梯费用 | customers/pages/OverseasStorageFeesView.vue：openEdit、save，费用编辑 AppDialog |
接入连续列表；费用编辑弹框保持 |
| 国内仓 | 订单列表 | unified-orders/pages/UnifiedOrdersView.vue：状态页签、unifiedOrderRowActions、详情分支及批量审核、导入、扣货与文件入口 |
仅列表分支接入；详情和各弹框保持 |
| 国内仓 | 订单测量 / 测量数据审核 | inbounds/components/InboundTaskList.vue：taskLabel、客户查询警告、测量和审核选择事件 |
两个路由共用列表接入；作业弹框和确认保持 |
| 国内仓 | 预装清单 | loading-lists/components/LoadingListsView.vue：mode、列表权限判断、清单行操作、详情导航 |
接入连续列表；权限错误态和详情保持 |
| 国内仓 | 库位管理 | warehouse-resources/locations/pages/LocationsView.vue：仓库加载与列表分别失败、编辑与删除确认 |
接入连续列表；独立错误提示、维护弹框和确认保持 |
| 国内仓 | 托盘管理 | warehouse-resources/pallets/pages/PalletsView.vue：仓库加载、新增/编辑/停用/删除行操作 |
接入连续列表；维护弹框和确认保持 |
| 国内仓 | 整柜业务 | domestic-containers/pages/DomesticContainersView.vue：入库/出库/库存页签、库存汇总及维护入口 |
三个视图共用连续列表，页签、汇总和原操作保持 |
| 国内仓 | 船期日历 | sailing-calendar/pages/SailingCalendarView.vue：日历和渠道/模板/船期管理工作区 |
保留现状；日历布局待人工确认 |
| 货柜管理 | 订舱列表 | ocean-bookings/pages/OceanBookingsView.vue：列表查询、行操作和订舱资料入口 |
接入连续列表；新建、编辑、详情、放舱及文件保持 |
| 货柜管理 | 拖车列表 | trucking/pages/TruckAppointmentsView.vue：拖车查询和行操作 |
接入连续列表；创建、编辑、详情和确认保持 |
| 货柜管理 | 送柜报关 / 清关提柜 | container-loading/pages/ContainersView.vue：workbench 双模式、在途/历史页签、行操作、预计到仓维护 |
两个工作台共用列表接入；所有详情、节点、订舱、资料、邮件和确认保持 |
| 海外仓 | 尾程订单 | overseas-warehouse/pages/LastMileOrdersView.vue：普通列表与柜子工作台分支、行操作和柜级计划弹框 |
普通列表可接入；柜子工作台保留业务结构并单独核对 |
| 海外仓 | 入库单 | overseas-warehouse/pages/InboundOrdersView.vue：预约、行操作及详情 |
接入连续列表；预约和详情保持 |
| 海外仓 | 海外库位 | overseas-warehouse/pages/LocationsView.vue：普通/A0/虚拟库位资格和维护操作 |
接入连续列表；受保护资格和确认保持 |
| 海外仓 | 排车列表 | overseas-warehouse/pages/DispatchesView.vue 已确认样板 |
保留样板；字段设置和列宽偏好保持 |
| 海外仓 | 出库单 | overseas-warehouse/pages/OutboundsView.vue：按类型新建、取消、出库详情和选择作业弹框 |
仅主列表接入；新建候选及各弹框保持 |
| 海外仓 | 派送单 | overseas-warehouse/pages/DeliveryOrdersView.vue：行操作、资料汇总和签收入口 |
接入连续列表；签收、详情和资料保持 |
| 海外仓 | 换标单 | overseas-warehouse/pages/RelabelOrdersView.vue：新增、详情与编辑入口 |
接入连续列表；表单与详情保持 |
| 海外仓 | 托盘管理 | overseas-warehouse/pages/PalletsView.vue：详情、单张打印及原维护入口 |
接入连续列表；打印尺寸和其它操作保持 |
| 海外仓 | 库存管理 | overseas-warehouse/pages/InventoryView.vue：库存汇总、导出、详情和行操作 |
接入连续列表；汇总数据、导出及详情保持 |
| 海外仓 | 退货库存 / 退货箱号 | overseas-warehouse/pages/ReturnInventoryManagementView.vue 两种 mode |
沿实际公共列表组件接入；明细和作业保持 |
| 海外仓 | 进销存记录（关联入口） | overseas-warehouse/pages/InventoryTransactionsView.vue：只读边界提示、关系查询、导出 |
接入连续列表；只读边界与关系查询保持 |
本轮实现与待确认项
客户管理 2 个、国内仓 7 个、货柜管理 4 个、海外仓 11 个菜单列表已接入；另外接入海外库存关联的进销存记录，共 25 个列表入口（含原排车样板）。包装页面继续复用实际公共列表组件；整柜的三种业务页签、测量与审核双模式、货柜国内/海外双工作台、尾程订单隐藏柜子工作台和退货库存/流水/箱号分支均保留。
船期日历 /sailing-calendar 保留原样。日历与渠道/模板/船期管理工作区不等同于标准业务列表；需要人工确认顶部按钮、查询及日历的排列，再决定如何接入。本轮没有隐藏或移除该入口。
尾程订单隐藏柜子工作台仍保留自身卡片与分页，通过公共 results 插槽承载。修正了共享表格在自定义工作台或列表加载失败时重置页码的问题；普通列表继续使用原服务端分页。
新增页面的视觉均待人工在 1920×1080、100% 缩放下截图确认；样板截图不代表其余页面视觉已验收。重点核对页签、多字段查询、长编号横向滚动、汇总、危险文字、每页数量、字段显隐及拖动后刷新列宽。
验证记录
客户管理相关回归 9 个文件、120 项通过；特殊工作台、公共表格和其它受影响回归 7 个文件、180 项通过。源码审计确认已接入页面的原业务点击事件全部保留；除退货列表增加列配置与公共表格导入外，业务脚本保持不变，API 和权限没有修改。退货库存/流水/箱号增加行为回归，覆盖搜索分页、偏好隔离与详情入口。
2026-09-30 最终完整 pnpm test：263 个文件、2131 项全部通过。pnpm build（包含 vue-tsc --noEmit）通过。仅修改本地测试环境代码；未提交、未部署或发布。
第二批修改前页面与操作矩阵（2026-09-30）
用户授权继续客户服务、海外仓、财务管理、通用、系统管理等剩余页面；沿当前菜单扩展海外业务和消息入口。上一批海外仓标准列表复核并保持。隐藏原型菜单不启用，首页数据看板不是列表，保留并记录待人工确认。
本批仍只改变主列表布局和操作列外观。下列实现路径相对 apps/admin-web/src/modules/；详情、新建、编辑、审核、文件预览、打印及删除/停用确认仍沿原组件、路由和事件，不引入新承载方式。视觉依据与第一批相同。
| 模块 | 页面 / 路由 | 当前列表实现及操作核对入口 | 结论 |
|---|---|---|---|
| 客户服务 / 通用 | 异常订单 /overseas-warehouse/exception-orders |
overseas-warehouse/pages/ExceptionOrdersView.vue：toolbar-actions、actions、related、handlerName、status、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 客户服务 / 通用 | 客户回访 /overseas-warehouse/customer-visits |
overseas-warehouse/pages/CustomerVisitsView.vue：actions、status、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 客户服务 / 通用 | 称重机器 /general/mojia-sku-sync |
overseas-warehouse/pages/MojiaSkuSyncView.vue：toolbar-start、toolbar-actions、actions、sourceCode、kind、image、dimensions、syncStatus、match、measuredAt、failure；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 海外业务 | 海外采购订单 /overseas-business/purchases |
overseas-business/pages/PurchaseOrdersView.vue：actions、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 海外业务 | 本土卡车 /overseas-business/trucks |
overseas-business/pages/TransportOrdersView.vue：toolbar-actions、actions、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 海外业务 | 本土散板 /overseas-business/looseboards |
overseas-business/pages/TransportOrdersView.vue：toolbar-actions、actions、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 财务管理 | 客户账户 /finance/customer-accounts |
finance/pages/FinanceCustomerAccountsView.vue：toolbar-actions、actions、customerName、customerCode、contactName、contactPhone、lastChangedAt、actualBalance、frozenBalance、availableBalance、creditLimit、creditExpiresOn、creditUsed、pendingRechargeCount、status、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 财务管理 | 客户应收应付 /finance/customer-arap |
finance/pages/FinanceCustomerArapView.vue：toolbar-actions、actions、customerName、direction、businessReference、sourceType、supplierName、sourceStatus、status、generated、businessDate、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 财务管理 | 应收款统计表 /finance/receivable-statistics |
finance/pages/FinanceReceivableStatisticsView.vue：toolbar-actions、customerName、totalReceivable、totalReceived、totalOutstanding、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 财务管理 | 客户对账单 /finance/customer-statements |
finance/pages/FinanceCustomerStatementsView.vue：toolbar-actions、actions、status、customerConfirmationStatus、customerName、lastPaymentAt、settled、createdByName、createdAt、submittedAt、reviewedAt、issuedAt、customerConfirmedByName、customerConfirmedAt、updatedByName、updatedAt、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 财务管理 | 结算单应收 /finance/settlement-receivables |
finance/pages/FinanceSettlementReceivablesView.vue：包装页，实际列表为 FinanceFormalSettlementPage 的 kind 双模式；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 财务管理 | 结算单应付 /finance/settlement-payables |
finance/pages/FinanceSettlementPayablesView.vue：包装页，实际列表为 FinanceFormalSettlementPage 的 kind 双模式；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 供应商列表 /suppliers |
suppliers/pages/SuppliersView.vue：toolbar-actions、actions、name、category、truckingScope、carrierCodes、license、status、settlement；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 快递公司 /master-data/express-companies |
master-data/express-companies/pages/ExpressCompaniesView.vue：toolbar-actions、actions、company、website、status、empty、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 往来单位 /master-data/counterparties |
master-data/counterparties/pages/PartnersView.vue：toolbar-actions、actions、partner、type、address、status、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 费用项目 /master-data/fee-items |
fee-items/pages/FeeItemsView.vue：toolbar-actions、actions、feeItem、tradeScope、pickup、warehouse、supplierCategory、allocationFee、description、status、empty、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 海外仓报价 /overseas-master-data/quotes |
overseas-master-data/pages/OverseasQuotesView.vue：toolbar-actions、actions、status；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 汇率管理 /overseas-master-data/exchange-rates |
overseas-master-data/pages/ExchangeRatesView.vue：toolbar-actions、actions、conversion、status；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 车辆列表 /overseas-master-data/vehicles |
overseas-master-data/pages/VehiclesView.vue：toolbar-actions、actions、status、region；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 仓库管理 /warehouses |
warehouses/pages/WarehousesView.vue：toolbar-actions、actions、warehouse、warehouseType、countryCode、address、contact、status、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 船期价格表 /first-leg-pricing/carrier-rates |
fba-pricing/carrier-rates/pages/CarrierRatesView.vue：toolbar-actions、actions、version、scope、status、contents、issues、empty、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 通用 | 下载中心 /downloads |
downloads/pages/DownloadCenterView.vue：pagination-left、actions、type、status、progress、requester、requestedAt、completedAt、expiresAt；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 系统管理 | 用户管理 /system/users |
iam/pages/InternalUsersView.vue：toolbar-actions、actions、roles、status、lastLoginAt、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 系统管理 | 角色权限 /system/roles |
iam/pages/RolesView.vue：toolbar-actions、actions、role、permissionSummary、roleType、status、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 系统管理 | 菜单权限 /system/permissions |
iam/pages/PermissionsView.vue：toolbar-start、toolbar-actions、actions、name、code、endpoint、status、pagination-left；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 系统管理 | PDA版本 /system/pda-releases |
pda-releases/pages/PdaReleasesView.vue：toolbar-start、toolbar-actions、actions、app、packageType、status、mandatory、sizeBytes、createdAt、publishedAt；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 消息入口 | 我的消息 /notifications |
notifications/pages/PlatformNotificationsView.vue：toolbar-actions、pagination-left、actions、category、sentAt、status；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 消息入口 | 消息管理 /notifications/messages |
notifications/pages/MessageManagementView.vue：toolbar-actions、pagination-left、actions、category、scheduledAt、sentAt、status；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
| 消息入口 | 模板管理 /notifications/templates |
notifications/pages/MessageTemplatesView.vue：toolbar-actions、pagination-left、actions、status；原详情/表单/确认保持 |
接入公共连续列表；业务展示与操作保持 |
应收款统计保留月份、客户筛选、汇总、CNY 边界、打印/导出及原打印媒体规则；权限树保留展开、收起、保护提示和树形参数；PDA 版本保留国内/海外应用切换、当前版本事实和发布/停发确认；称重机器保留现有筛选、连接测试、人工推送和分页。这些页面沿实际结构单独处理，不删功能套标准模板。
第二批新增 29 个列表路由，复用 27 个实际列表组件；两个结算单包装路由继续复用 FinanceFormalSettlementPage，应收/应付各自保存字段和列宽偏好，本土卡车/散板继续共用原运输订单列表。菜单核对覆盖当前全部正式可见业务列表，加上三个消息入口与库存流水关联入口，共 54 个接入入口；未发现遗漏。隐藏原型菜单保持隐藏。
称重机器从独立 Element 分页改为公共表格分页，保留原 10/20/30/40/50/100 选项、服务端分页和查询条件。新增行为回归验证查询及每页数量变化回到第一页、每页数量变化仅发送一次查询、字段设置可用、列宽重新挂载恢复和原操作入口。PDA 与称重机器原加载中的 aria-busy 状态随列表保留。
源码核对确认第二批全部原点击表达式和业务脚本保留，仅清理已移除的装饰图标导入；未修改 API、权限、计算规则、状态或详情/表单承载方式。旧样式断言同步到连续卡片、通知区、纯文字“更多”和无斑马纹；原业务断言继续保留。
第二批异常及待确认清单
| 项目 | 当前处理 | 后续确认 |
|---|---|---|
首页数据看板 /dashboard |
保留原工作区，未套列表布局 | 人工确认是否需要独立调整看板顶部 |
船期日历 /sailing-calendar |
已按用户截图制作连续工作台版本，保留日历及渠道/模板/船期工作区 | 待人工确认新版按钮、查询与日历排列；见单页收尾记录 |
| 财务统计/打印、结算汇总、权限树、PDA应用切换、供应商分类及尾程柜子工作台 | 沿原结构接入，保留全部业务控件；自动检查通过 | 人工重点核对汇总、页签、树展开、打印和条件切换 |
| 所有新增页面真实视觉 | 未使用 AI 操作页面或截图替代验收 | 待人工 1920×1080、100% 缩放截图确认 |
| 完整测试中的 Vue 编译提示 | 出现 v-model 对 const reactive query 的非阻断提示；完整测试及构建通过，本轮未扩展修改 |
后续专项核查对应绑定 |
第二批验证结果
2026-09-30 完整 pnpm test：264 个文件、2133 项全部通过。pnpm build（包含 vue-tsc --noEmit）通过，git diff --check 通过。菜单/包装组件核对和原操作事件审计通过。所有修改均在本地测试环境工作区；未提交、未部署或发布。视觉验收仍待人工截图确认。
船期日历单页收尾（2026-09-30）
用户提供当前页面截图 codex-clipboard-e64ee273-3108-4711-be25-f63785611e59.png，授权按上述建议制作一版。仅处理测试环境的船期日历；首页数据看板和其它待确认页面留到后续逐页处理。
| 操作 | 截图/当前代码依据 | 本版结论 |
|---|---|---|
| 页头、筛选、日历与当日船次 | 截图显示独立筛选、日历、当日详情卡片；SailingCalendarView.vue 的 calendar-toolbar、calendar-layout |
共用连续容器；左标题/右业务按钮，下面筛选与日历/当日详情；保留月切换、今天、时区和船期数量 |
| 查询与重置 | 原筛选字段绑定、下拉自动查询、关键字回车及 resetFilters |
全部保留，重置仍在筛选区 |
| 单次新增/编辑 | 原 dialogOpen 居中 760px 表单及 openCreate/openEdit |
保留原表单与承载方式；页头保留新增单个船次，当日详情新增仍保留 |
| 渠道与周模板/批量生成 | 原 openManagement 居中管理工作区 |
按钮移到页头右侧；内部管理表格、生成步骤及权限保留 |
| 船次详情、货量明细、历史、订柜建议 | 原右侧详情、openVolumeDetail/openHistory/openBookingAdvice |
保留原交互和浮层，只合并外层卡片 |
| 复制、取消及批量生成确认 | 原 copySelected、cancelSelected、confirmTemplateGeneration |
原权限、确认、处理中和提示保留；不改业务状态 |
| 文件预览/审核 | 本页面无此类独立入口 | 不新增 |
公共页头及筛选沿 DataTable appearance="integrated" 的 results 插槽接入日历工作台；无列表列配置，不展示字段设置或虚构分页。日期格紧凑排列，保留日期、数量、航线和容量提示。修改后的视觉待人工在 1920×1080、100% 缩放下截图确认。
本版验证：公共表格与密度合同 51 项通过；新增船期日历行为回归 2 项通过，覆盖月切换、日期/船次选择、关键字查询、重置、失败重试及只读权限。源码审计确认除公共组件导入外业务脚本未变，全部事件和查询绑定保留。完整测试 265 个文件、2135 项通过，构建（含类型检查）及 git diff --check 通过。代码版本已完成，未提交、未部署；新版视觉待用户截图确认。