优化

src/modules/container-loading/api/platformContainerLoading.test.ts

@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http } from '@/shared/api/http'
+import {
+  adjustSmartLoadingItem, assignSmartLoadingItem, createSmartLoadingPlan, getContainer,
+  listContainers, listSmartLoadingCandidates, pushSmartLoadingPreload, removeSmartLoadingItem,
+  updateContainer, updateContainerTransport,
+} from './platformContainerLoading'
+
+vi.mock('@/shared/api/http', () => ({
+  http: { get: vi.fn(), post: vi.fn(), put: vi.fn(), patch: vi.fn(), delete: vi.fn() },
+  unwrapApiResponse: <T>(response: { data: T }) => response.data,
+}))
+
+const container = { id: 9007199254740993, planId: 9007199254740994, warehouseId: 9007199254740995, shippingCompanyId: 9007199254740996, version: '2', capacityCbm: '68', maxWeightKg: '28000' }
+const plan = { id: 9007199254740993, bookingId: 9007199254740994, version: '3', status: 'EDITING', items: [{ id: 9007199254740995, loadingPlanId: 9007199254740993, accountId: 1, inboundId: 2, inboundDetailId: 3, orderId: 4, destinationWarehouseId: 5, packageCount: '6', version: '1' }] }
+
+describe('platform container loading API', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('normalizes paged container ids and numeric metadata', async () => {
+    vi.mocked(http.get).mockResolvedValueOnce({ code: '200', data: { records: [container], page: '1', size: '20', total: '1', pages: '1' } })
+    const result = await listContainers({ page: 1, size: 20 })
+    expect(result.records[0]).toMatchObject({ id: String(container.id), planId: String(container.planId), warehouseId: String(container.warehouseId), version: 2, capacityCbm: 68 })
+    expect(http.get).toHaveBeenCalledWith('/platform/v1/containers', { params: { page: 1, size: 20 } })
+  })
+
+  it('uses full-edit and transport whitelist request shapes', async () => {
+    vi.mocked(http.put).mockResolvedValue({ code: '200', data: container })
+    vi.mocked(http.patch).mockResolvedValue({ code: '200', data: container })
+    const data = { cabinetNo: 'CB-1', warehouseId: '8', warehouseName: '义乌仓', containerType: '40HQ', containerNo: null, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: null, destinationPortCode: null, destinationPortName: null, destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: null, maxWeightKg: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null }
+    await updateContainer('7', 2, data)
+    await updateContainerTransport('7', 3, { containerNo: 'MSCU1', voyageNo: 'V8' })
+    expect(http.put).toHaveBeenCalledWith('/platform/v1/containers/7', { version: 2, data })
+    expect(http.patch).toHaveBeenCalledWith('/platform/v1/containers/7/transport', { version: 3, containerNo: 'MSCU1', voyageNo: 'V8' })
+  })
+
+  it('normalizes every long id in candidates and plans', async () => {
+    vi.mocked(http.get)
+      .mockResolvedValueOnce({ code: '200', data: container })
+      .mockResolvedValueOnce({ code: '200', data: [{ accountId: 1, inboundId: 2, inboundDetailId: 3, orderId: 4, warehouseId: 5, destinationWarehouseId: 6, availablePackageCount: '7' }] })
+    expect((await getContainer('9')).id).toBe(String(container.id))
+    expect(await listSmartLoadingCandidates('5')).toMatchObject([{ accountId: '1', inboundDetailId: '3', destinationWarehouseId: '6', availablePackageCount: 7 }])
+  })
+
+  it('sends plan and item versions plus operation and idempotency keys', async () => {
+    vi.mocked(http.post).mockResolvedValue({ code: '200', data: plan })
+    vi.mocked(http.patch).mockResolvedValue({ code: '200', data: plan })
+    vi.mocked(http.delete).mockResolvedValue({ code: '200', data: plan })
+    await createSmartLoadingPlan('7', null)
+    await assignSmartLoadingItem('10', { inboundId: '2', inboundDetailId: '3', packageCount: 4, expectedVersion: 5 })
+    await adjustSmartLoadingItem('10', '11', 6, 7, 8)
+    await removeSmartLoadingItem('10', '11', 9, 10)
+    await pushSmartLoadingPreload('10', 11)
+    expect(http.post).toHaveBeenNthCalledWith(1, '/platform/v1/first-leg/smart-loading/plans', { bookingId: '7', remark: null })
+    expect(vi.mocked(http.post).mock.calls[1]?.[1]).toMatchObject({ expectedVersion: 5, operationId: expect.stringContaining('assign-') })
+    expect(vi.mocked(http.patch).mock.calls[0]?.[1]).toMatchObject({ expectedPlanVersion: 7, expectedItemVersion: 8, operationId: expect.stringContaining('adjust-') })
+    expect(vi.mocked(http.delete).mock.calls[0]?.[1]).toMatchObject({ data: { expectedPlanVersion: 9, expectedItemVersion: 10, operationId: expect.stringContaining('remove-') } })
+    expect(vi.mocked(http.post).mock.calls[2]?.[2]).toMatchObject({ headers: { 'Idempotency-Key': expect.stringContaining('push-preload-') } })
+  })
+})

src/modules/container-loading/api/platformContainerLoading.ts

@@ -0,0 +1,128 @@
+import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
+import type {
+  ContainerBookingResource,
+  ContainerPage,
+  ContainerQuery,
+  ContainerSaveRequest,
+  SmartLoadingCandidate,
+  SmartLoadingItem,
+  SmartLoadingPlan,
+} from '../types'
+
+const containerPath = '/platform/v1/containers'
+const smartLoadingPath = '/platform/v1/first-leg/smart-loading'
+
+function id(value: unknown): string { return value == null ? '' : String(value) }
+function optionalId(value: unknown): string | null { return value == null ? null : String(value) }
+function numberValue(value: unknown, fallback = 0): number {
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : fallback
+}
+function operationId(prefix: string) { return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}` }
+
+function container(raw: ContainerBookingResource): ContainerBookingResource {
+  return {
+    ...raw,
+    id: id(raw.id),
+    planId: optionalId(raw.planId),
+    warehouseId: id(raw.warehouseId),
+    shippingCompanyId: optionalId(raw.shippingCompanyId),
+    version: numberValue(raw.version),
+    capacityCbm: raw.capacityCbm == null ? null : numberValue(raw.capacityCbm),
+    maxWeightKg: raw.maxWeightKg == null ? null : numberValue(raw.maxWeightKg),
+  }
+}
+
+function item(raw: SmartLoadingItem): SmartLoadingItem {
+  return {
+    ...raw,
+    id: id(raw.id), loadingPlanId: id(raw.loadingPlanId), accountId: id(raw.accountId),
+    inboundId: id(raw.inboundId), inboundDetailId: id(raw.inboundDetailId), orderId: id(raw.orderId),
+    destinationWarehouseId: optionalId(raw.destinationWarehouseId), version: numberValue(raw.version),
+    packageCount: numberValue(raw.packageCount),
+    productQuantity: raw.productQuantity == null ? null : numberValue(raw.productQuantity),
+    grossWeightKg: raw.grossWeightKg == null ? null : numberValue(raw.grossWeightKg),
+    volumeCbm: raw.volumeCbm == null ? null : numberValue(raw.volumeCbm),
+  }
+}
+
+function plan(raw: SmartLoadingPlan): SmartLoadingPlan {
+  return { ...raw, id: id(raw.id), bookingId: id(raw.bookingId), version: numberValue(raw.version), items: (raw.items || []).map(item) }
+}
+
+export async function listContainers(query: ContainerQuery): Promise<ContainerPage> {
+  const response = await http.get<ApiEnvelope<ContainerPage>, ApiEnvelope<ContainerPage>>(containerPath, { params: query })
+  const result = unwrapApiResponse(response)
+  return { ...result, records: (result.records || []).map(container), page: numberValue(result.page, query.page), size: numberValue(result.size, query.size), total: numberValue(result.total), pages: numberValue(result.pages) }
+}
+
+export async function getContainer(containerId: string) {
+  const response = await http.get<ApiEnvelope<ContainerBookingResource>, ApiEnvelope<ContainerBookingResource>>(`${containerPath}/${encodeURIComponent(containerId)}`)
+  return container(unwrapApiResponse(response))
+}
+
+export async function createContainer(payload: ContainerSaveRequest) {
+  const response = await http.post<ApiEnvelope<ContainerBookingResource>, ApiEnvelope<ContainerBookingResource>>(containerPath, payload)
+  return container(unwrapApiResponse(response))
+}
+
+export async function updateContainer(containerId: string, version: number, data: ContainerSaveRequest) {
+  const response = await http.put<ApiEnvelope<ContainerBookingResource>, ApiEnvelope<ContainerBookingResource>>(`${containerPath}/${encodeURIComponent(containerId)}`, { version, data })
+  return container(unwrapApiResponse(response))
+}
+
+export async function updateContainerTransport(containerId: string, version: number, payload: { containerNo: string | null; voyageNo: string | null }) {
+  const response = await http.patch<ApiEnvelope<ContainerBookingResource>, ApiEnvelope<ContainerBookingResource>>(`${containerPath}/${encodeURIComponent(containerId)}/transport`, { ...payload, version })
+  return container(unwrapApiResponse(response))
+}
+
+export async function listSmartLoadingCandidates(warehouseId: string) {
+  const response = await http.get<ApiEnvelope<SmartLoadingCandidate[]>, ApiEnvelope<SmartLoadingCandidate[]>>(`${smartLoadingPath}/candidates`, { params: { warehouseId } })
+  return unwrapApiResponse(response).map((raw) => ({
+    ...raw, accountId: id(raw.accountId), inboundId: id(raw.inboundId), inboundDetailId: id(raw.inboundDetailId),
+    orderId: id(raw.orderId), warehouseId: id(raw.warehouseId), destinationWarehouseId: optionalId(raw.destinationWarehouseId),
+    availablePackageCount: numberValue(raw.availablePackageCount),
+    unitWeightKg: raw.unitWeightKg == null ? null : numberValue(raw.unitWeightKg),
+    unitVolumeCbm: raw.unitVolumeCbm == null ? null : numberValue(raw.unitVolumeCbm),
+  }))
+}
+
+export async function getSmartLoadingPlanByBooking(bookingId: string) {
+  const response = await http.get<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/by-booking/${encodeURIComponent(bookingId)}`)
+  return plan(unwrapApiResponse(response))
+}
+
+export async function getSmartLoadingPlan(planId: string) {
+  const response = await http.get<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/${encodeURIComponent(planId)}`)
+  return plan(unwrapApiResponse(response))
+}
+
+export async function createSmartLoadingPlan(bookingId: string, remark: string | null) {
+  const response = await http.post<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans`, { bookingId, remark })
+  return plan(unwrapApiResponse(response))
+}
+
+export async function assignSmartLoadingItem(planId: string, payload: { inboundId: string; inboundDetailId: string; packageCount: number; expectedVersion: number }) {
+  const response = await http.post<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/${encodeURIComponent(planId)}/assignments`, { ...payload, operationId: operationId('assign') })
+  return plan(unwrapApiResponse(response))
+}
+
+export async function recommendSmartLoading(planId: string, expectedVersion: number) {
+  const response = await http.post<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/${encodeURIComponent(planId)}/recommend`, { expectedVersion, operationId: operationId('recommend') })
+  return plan(unwrapApiResponse(response))
+}
+
+export async function adjustSmartLoadingItem(planId: string, itemId: string, packageCount: number, expectedPlanVersion: number, expectedItemVersion: number) {
+  const response = await http.patch<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/${encodeURIComponent(planId)}/items/${encodeURIComponent(itemId)}`, { packageCount, expectedPlanVersion, expectedItemVersion, operationId: operationId('adjust') })
+  return plan(unwrapApiResponse(response))
+}
+
+export async function removeSmartLoadingItem(planId: string, itemId: string, expectedPlanVersion: number, expectedItemVersion: number) {
+  const response = await http.delete<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/${encodeURIComponent(planId)}/items/${encodeURIComponent(itemId)}`, { data: { expectedPlanVersion, expectedItemVersion, operationId: operationId('remove') } })
+  return plan(unwrapApiResponse(response))
+}
+
+export async function pushSmartLoadingPreload(planId: string, expectedVersion: number) {
+  const response = await http.post<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/${encodeURIComponent(planId)}/push-preload`, { expectedVersion }, { headers: { 'Idempotency-Key': operationId('push-preload') } })
+  return plan(unwrapApiResponse(response))
+}

src/modules/container-loading/index.ts

@@ -0,0 +1,2 @@
+export * from './api/platformContainerLoading'
+export * from './types'

src/modules/container-loading/pages/ContainersView.test.ts

@@ -0,0 +1,31 @@
+import ElementPlus from 'element-plus'
+import { createPinia, setActivePinia } from 'pinia'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ContainersView from './ContainersView.vue'
+import { listAllPlatformWarehouses } from '@/modules/warehouses'
+import { listContainers } from '../api/platformContainerLoading'
+
+vi.mock('@/modules/warehouses', () => ({ listAllPlatformWarehouses: vi.fn() }))
+vi.mock('../api/platformContainerLoading', () => ({ listContainers: vi.fn(), getContainer: vi.fn(), createContainer: vi.fn(), updateContainer: vi.fn(), updateContainerTransport: vi.fn() }))
+
+describe('ContainersView', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.mocked(listAllPlatformWarehouses).mockResolvedValue([])
+    vi.mocked(listContainers).mockResolvedValue({ records: [{ id: '9001', planId: null, bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', warehouseId: '8', warehouseName: '义乌仓', containerType: '40HQ', planStatus: 'EDITING', version: 0, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: '宁波', destinationPortCode: null, destinationPortName: '长滩', destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 68, maxWeightKg: 28000, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null }], page: 1, size: 20, total: 1, pages: 1 })
+  })
+
+  it('loads the real paged contract and renders core container fields', async () => {
+    const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/', component: ContainersView }] })
+    await router.push('/'); await router.isReady()
+    const wrapper = mount(ContainersView, { global: { plugins: [ElementPlus, router] } })
+    await flushPromises()
+    expect(listContainers).toHaveBeenCalledWith(expect.objectContaining({ page: 1, size: 20 }))
+    expect(wrapper.text()).toContain('CB-1')
+    expect(wrapper.text()).toContain('MSCU-1')
+    expect(wrapper.text()).toContain('宁波 → 长滩')
+    expect(wrapper.find('button[aria-label="查看 CB-1"]').exists()).toBe(true)
+  })
+})

src/modules/container-loading/pages/ContainersView.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { Boxes, Eye, Pencil, Plus, RefreshCcw, Sparkles } from '@lucide/vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import { listAllPlatformWarehouses, type PlatformWarehouseSummaryResource } from '@/modules/warehouses'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import AppDrawer from '@/shared/components/AppDrawer.vue'
+import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import { createContainer, getContainer, listContainers, updateContainer, updateContainerTransport } from '../api/platformContainerLoading'
+import type { ContainerBookingResource, ContainerPlanStatus, ContainerSaveRequest } from '../types'
+
+type Filters = QueryModel & { keyword: string; warehouseId: string; containerType: string; status: ContainerPlanStatus | ''; sailingRange: string[] }
+type ContainerForm = ContainerSaveRequest & { id: string; version: number }
+
+const router = useRouter()
+const access = useAccessPreviewStore()
+const rows = ref<ContainerBookingResource[]>([])
+const warehouses = ref<PlatformWarehouseSummaryResource[]>([])
+const loading = ref(false)
+const warehouseLoading = ref(false)
+const loadError = ref<ApiErrorDetails | null>(null)
+const warehouseError = ref<ApiErrorDetails | null>(null)
+const page = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+const filters = ref<Filters>({ keyword: '', warehouseId: '', containerType: '', status: '', sailingRange: [] })
+const applied = ref<Filters>({ ...filters.value })
+const detailOpen = ref(false)
+const detailLoading = ref(false)
+const detailError = ref<ApiErrorDetails | null>(null)
+const detail = ref<ContainerBookingResource | null>(null)
+const detailTarget = ref<ContainerBookingResource | null>(null)
+const editorOpen = ref(false)
+const editorError = ref<ApiErrorDetails | null>(null)
+const saving = ref(false)
+const formRef = ref<FormInstance>()
+let listSequence = 0
+let detailSequence = 0
+
+function emptyForm(): ContainerForm {
+  return {
+    id: '', version: 0, containerNo: null, cabinetNo: '', warehouseId: '', warehouseName: null,
+    billOfLadingNo: null, vesselName: null, voyageNo: null, containerType: '40HQ', shippingCompanyId: null,
+    shippingCompanyName: null, departurePortCode: null, departurePortName: null, destinationPortCode: null,
+    destinationPortName: null, destinationWarehouseCode: null, destinationWarehouseName: null,
+    capacityCbm: null, maxWeightKg: null, terminalTruckingCompany: null, loadingAt: null,
+    estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null,
+    estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null,
+  }
+}
+const form = reactive<ContainerForm>(emptyForm())
+const rules: FormRules<ContainerForm> = {
+  cabinetNo: [{ required: true, message: '请输入柜次号', trigger: 'blur' }],
+  warehouseId: [{ required: true, message: '请选择装柜仓库', trigger: 'change' }],
+  containerType: [{ required: true, message: '请选择柜型', trigger: 'change' }],
+}
+
+const canCreate = computed(() => access.can('platform:firstleg:container:create'))
+const canEdit = computed(() => access.can('platform:firstleg:container:edit'))
+const canSmartLoading = computed(() => access.can('platform:firstleg:smart-loading:list'))
+const editorTitle = computed(() => form.id ? (detail.value?.planStatus === 'LOADING' ? '修改运输信息' : '编辑货柜') : '新增货柜')
+const transportOnly = computed(() => Boolean(form.id) && detail.value?.planStatus === 'LOADING')
+
+const queryFields = computed<QueryField[]>(() => [
+  { key: 'keyword', type: 'input', label: '关键词', width: 220, placeholder: '柜次号、柜号或提单号', props: { 'aria-label': '关键词', maxlength: 128 } },
+  { key: 'warehouseId', type: 'select', label: '装柜仓库', width: 220, options: warehouses.value.map((warehouse) => ({ label: `${warehouse.warehouseName}（${warehouse.warehouseCode}）`, value: String(warehouse.id) })), props: { 'aria-label': '装柜仓库', filterable: true, loading: warehouseLoading.value } },
+  { key: 'containerType', type: 'select', label: '柜型', width: 140, options: ['20GP', '40GP', '40HQ', '45HQ'].map((value) => ({ label: value, value })), props: { 'aria-label': '柜型' } },
+  { key: 'status', type: 'select', label: '排柜状态', width: 150, options: [{ label: '编辑中', value: 'EDITING' }, { label: '装柜中', value: 'LOADING' }, { label: '已完成', value: 'COMPLETED' }], props: { 'aria-label': '排柜状态' } },
+  { key: 'sailingRange', type: 'daterange', label: '预计开船', width: 260, props: { 'aria-label': '预计开船日期范围' } },
+])
+const columns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 230, fixed: 'left', slotName: 'actions' },
+  { key: 'cabinetNo', label: '柜次', minWidth: 180, slotName: 'cabinet' },
+  { key: 'containerNo', label: '集装箱号', minWidth: 150, slotName: 'containerNo' },
+  { key: 'planStatus', label: '状态', width: 110, slotName: 'status' },
+  { key: 'warehouseName', prop: 'warehouseName', label: '装柜仓库', minWidth: 160 },
+  { key: 'route', label: '航线', minWidth: 220, slotName: 'route' },
+  { key: 'containerType', prop: 'containerType', label: '柜型', width: 100 },
+  { key: 'capacity', label: '容量上限', minWidth: 150, slotName: 'capacity' },
+  { key: 'vessel', label: '船名/航次', minWidth: 180, slotName: 'vessel' },
+  { key: 'estimatedSailingAt', label: '预计开船', minWidth: 160, slotName: 'estimatedSailingAt' },
+]
+
+function optional(value: string | null) { return value?.trim() || null }
+function statusText(status: ContainerPlanStatus) { return ({ EDITING: '编辑中', LOADING: '装柜中', COMPLETED: '已完成' })[status] }
+function formatTime(value: string | null | undefined) { return value?.replace('T', ' ').slice(0, 16) || '—' }
+function replaceForm(source: ContainerBookingResource | null) {
+  Object.assign(form, emptyForm(), source || {})
+}
+function payload(): ContainerSaveRequest {
+  const selectedWarehouse = warehouses.value.find((warehouse) => String(warehouse.id) === form.warehouseId)
+  return {
+    containerNo: optional(form.containerNo), cabinetNo: form.cabinetNo.trim(),
+    warehouseId: form.warehouseId,
+    warehouseName: selectedWarehouse?.warehouseName || optional(form.warehouseName),
+    billOfLadingNo: optional(form.billOfLadingNo), vesselName: optional(form.vesselName), voyageNo: optional(form.voyageNo),
+    containerType: form.containerType,
+    shippingCompanyId: optional(form.shippingCompanyId), shippingCompanyName: optional(form.shippingCompanyName),
+    departurePortCode: optional(form.departurePortCode), departurePortName: optional(form.departurePortName),
+    destinationPortCode: optional(form.destinationPortCode), destinationPortName: optional(form.destinationPortName),
+    destinationWarehouseCode: optional(form.destinationWarehouseCode), destinationWarehouseName: optional(form.destinationWarehouseName),
+    capacityCbm: form.capacityCbm, maxWeightKg: form.maxWeightKg, terminalTruckingCompany: optional(form.terminalTruckingCompany),
+    loadingAt: form.loadingAt, estimatedSailingAt: form.estimatedSailingAt, actualSailingAt: form.actualSailingAt,
+    estimatedPortArrivalAt: form.estimatedPortArrivalAt, actualPortArrivalAt: form.actualPortArrivalAt,
+    estimatedWarehouseArrivalAt: form.estimatedWarehouseArrivalAt, actualWarehouseArrivalAt: form.actualWarehouseArrivalAt,
+  }
+}
+
+async function loadWarehouses() {
+  warehouseLoading.value = true; warehouseError.value = null
+  try { warehouses.value = await listAllPlatformWarehouses({ warehouseType: 'DOMESTIC', status: 'ACTIVE' }) }
+  catch (error) { warehouseError.value = getApiErrorDetails(error, '装柜仓库加载失败') }
+  finally { warehouseLoading.value = false }
+}
+async function loadRows() {
+  const sequence = ++listSequence
+  loading.value = true; loadError.value = null
+  const [from, to] = applied.value.sailingRange || []
+  try {
+    const result = await listContainers({
+      page: page.value, size: pageSize.value, keyword: applied.value.keyword.trim() || undefined,
+      warehouseId: applied.value.warehouseId || undefined, containerType: applied.value.containerType || undefined,
+      status: applied.value.status, estimatedSailingFrom: from ? `${from}T00:00:00` : undefined,
+      estimatedSailingTo: to ? `${to}T23:59:59` : undefined,
+    })
+    if (sequence !== listSequence) return
+    rows.value = result.records; total.value = result.total
+  } catch (error) {
+    if (sequence !== listSequence) return
+    rows.value = []; total.value = 0; loadError.value = getApiErrorDetails(error, '货柜列表加载失败，请稍后重试')
+  } finally { if (sequence === listSequence) loading.value = false }
+}
+function search() { applied.value = { ...filters.value, sailingRange: [...filters.value.sailingRange] }; page.value = 1; void loadRows() }
+async function openDetail(source: object) {
+  const row = source as ContainerBookingResource
+  detailTarget.value = row
+  detailOpen.value = true; detail.value = null; detailError.value = null; detailLoading.value = true
+  const sequence = ++detailSequence
+  try { const result = await getContainer(row.id); if (sequence === detailSequence) detail.value = result }
+  catch (error) { if (sequence === detailSequence) detailError.value = getApiErrorDetails(error, '货柜详情加载失败') }
+  finally { if (sequence === detailSequence) detailLoading.value = false }
+}
+function openCreate() { detail.value = null; editorError.value = null; replaceForm(null); editorOpen.value = true }
+async function openEdit(source: object) {
+  const row = source as ContainerBookingResource
+  editorError.value = null
+  try { detail.value = await getContainer(row.id); replaceForm(detail.value); editorOpen.value = true }
+  catch (error) { ElMessage.error(getApiErrorDetails(error, '货柜详情加载失败').message) }
+}
+async function save() {
+  if (!(await formRef.value?.validate().catch(() => false))) return
+  saving.value = true
+  editorError.value = null
+  try {
+    if (!form.id) await createContainer(payload())
+    else if (transportOnly.value) await updateContainerTransport(form.id, form.version, { containerNo: optional(form.containerNo), voyageNo: optional(form.voyageNo) })
+    else await updateContainer(form.id, form.version, payload())
+    ElMessage.success(form.id ? '货柜已更新' : '货柜已新增'); editorOpen.value = false; await loadRows()
+  } catch (error) {
+    const details = getApiErrorDetails(error, '保存失败')
+    editorError.value = { ...details, message: details.code === 'A0409' ? '数据已被其他人修改，请刷新最新数据后重试' : details.message }
+    ElMessage.error(details.code === 'A0409' ? '数据已被其他人修改，请刷新列表后重试' : details.message)
+  } finally { saving.value = false }
+}
+function goWorkbench(source: object) { const row = source as ContainerBookingResource; void router.push({ name: 'smart-loading-workbench', params: { containerId: row.id } }) }
+
+watch([page, pageSize], ([nextPage], [previousPage]) => { if (nextPage !== previousPage || page.value > 0) void loadRows() })
+onMounted(() => { void Promise.all([loadWarehouses(), loadRows()]) })
+</script>
+
+<template>
+  <section class="container-page">
+    <header class="page-header"><div><h1>货柜与智能排柜</h1><p>维护平台货柜资料，从柜次进入智能排柜并推送预装清单。</p></div><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增货柜</el-button></header>
+    <LoadErrorState v-if="warehouseError" title="装柜仓库加载失败" :message="warehouseError.message" compact @retry="loadWarehouses"><template #details><ApiErrorMeta :details="warehouseError" /></template></LoadErrorState>
+    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="货柜筛选" :fields="queryFields" preference-key="container-loading-query" @search="search" @reset="search" />
+    <LoadErrorState v-if="loadError" title="货柜列表加载失败" :message="loadError.message" :loading="loading" @retry="loadRows"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
+    <DataTable v-else v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" preference-key="container-loading-table" empty-text="暂无货柜">
+      <template #toolbar-start><div><h2>货柜列表</h2><p>共 {{ total }} 个柜次</p></div></template>
+      <template #toolbar-end><el-button :loading="loading" aria-label="刷新货柜列表" title="刷新" @click="loadRows"><RefreshCcw :size="16" /></el-button></template>
+      <template #actions="{ row }"><div class="row-actions"><el-button link type="primary" :aria-label="`查看 ${row.cabinetNo}`" @click="openDetail(row)"><Eye :size="15" />查看</el-button><el-button v-if="canEdit && row.planStatus !== 'COMPLETED'" link type="primary" @click="openEdit(row)"><Pencil :size="15" />编辑</el-button><el-button v-if="canSmartLoading && row.planStatus === 'EDITING'" link type="primary" @click="goWorkbench(row)"><Sparkles :size="15" />排柜</el-button></div></template>
+      <template #cabinet="{ row }"><strong>{{ row.cabinetNo }}</strong><small>{{ row.bookingNo }}</small></template>
+      <template #containerNo="{ row }">{{ row.containerNo || '待录入' }}</template>
+      <template #status="{ row }"><el-tag :type="row.planStatus === 'COMPLETED' ? 'success' : row.planStatus === 'LOADING' ? 'warning' : 'info'">{{ statusText(row.planStatus) }}</el-tag></template>
+      <template #route="{ row }">{{ row.departurePortName || row.departurePortCode || '—' }} → {{ row.destinationPortName || row.destinationPortCode || '—' }}</template>
+      <template #capacity="{ row }">{{ row.capacityCbm ? `${row.capacityCbm} m³` : '—' }} / {{ row.maxWeightKg ? `${row.maxWeightKg} kg` : '—' }}</template>
+      <template #vessel="{ row }">{{ [row.vesselName, row.voyageNo].filter(Boolean).join(' / ') || '—' }}</template>
+      <template #estimatedSailingAt="{ row }">{{ formatTime(row.estimatedSailingAt) }}</template>
+    </DataTable>
+
+    <AppDrawer v-model="detailOpen" title="货柜详情" size="min(760px, 94vw)" :loading="detailLoading" :show-confirm="false" cancel-text="关闭">
+      <LoadErrorState v-if="detailError" title="货柜详情加载失败" :message="detailError.message" @retry="detailTarget && openDetail(detailTarget)"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
+      <el-descriptions v-else-if="detail" :column="2" border class="details"><el-descriptions-item label="柜次号">{{ detail.cabinetNo }}</el-descriptions-item><el-descriptions-item label="集装箱号">{{ detail.containerNo || '—' }}</el-descriptions-item><el-descriptions-item label="状态">{{ statusText(detail.planStatus) }}</el-descriptions-item><el-descriptions-item label="柜型">{{ detail.containerType }}</el-descriptions-item><el-descriptions-item label="装柜仓库">{{ detail.warehouseName || '—' }}</el-descriptions-item><el-descriptions-item label="目的仓">{{ detail.destinationWarehouseName || detail.destinationWarehouseCode || '—' }}</el-descriptions-item><el-descriptions-item label="船公司">{{ detail.shippingCompanyName || '—' }}</el-descriptions-item><el-descriptions-item label="船名/航次">{{ [detail.vesselName, detail.voyageNo].filter(Boolean).join(' / ') || '—' }}</el-descriptions-item><el-descriptions-item label="提单号">{{ detail.billOfLadingNo || '—' }}</el-descriptions-item><el-descriptions-item label="拖车公司">{{ detail.terminalTruckingCompany || '—' }}</el-descriptions-item><el-descriptions-item label="预计开船">{{ formatTime(detail.estimatedSailingAt) }}</el-descriptions-item><el-descriptions-item label="预计到港">{{ formatTime(detail.estimatedPortArrivalAt) }}</el-descriptions-item></el-descriptions>
+    </AppDrawer>
+
+    <AppDrawer v-model="editorOpen" :title="editorTitle" size="min(860px, 96vw)" :confirm-loading="saving" confirm-text="保存" @confirm="save">
+      <LoadErrorState v-if="editorError" title="货柜保存失败" :message="editorError.message" compact :retry-text="form.id ? '刷新最新数据' : '重试保存'" @retry="form.id ? openEdit({ id: form.id }) : save()"><template #details><ApiErrorMeta :details="editorError" /></template></LoadErrorState>
+      <el-alert v-if="transportOnly" title="装柜中仅允许修改集装箱号和航次，其他字段已锁定。" type="warning" :closable="false" />
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="form-grid">
+        <el-form-item label="柜次号" prop="cabinetNo"><el-input v-model="form.cabinetNo" maxlength="64" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="集装箱号"><el-input v-model="form.containerNo" maxlength="64" placeholder="开始装柜前必须填写" /></el-form-item>
+        <el-form-item label="装柜仓库" prop="warehouseId"><el-select v-model="form.warehouseId" filterable :disabled="transportOnly"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="`${warehouse.warehouseName}（${warehouse.warehouseCode}）`" :value="String(warehouse.id)" /></el-select></el-form-item>
+        <el-form-item label="柜型" prop="containerType"><el-select v-model="form.containerType" :disabled="transportOnly"><el-option v-for="value in ['20GP','40GP','40HQ','45HQ']" :key="value" :label="value" :value="value" /></el-select></el-form-item>
+        <el-form-item label="容量上限（m³）"><el-input-number v-model="form.capacityCbm" :min="0.001" :precision="3" controls-position="right" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="重量上限（kg）"><el-input-number v-model="form.maxWeightKg" :min="0.001" :precision="3" controls-position="right" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="提单号"><el-input v-model="form.billOfLadingNo" maxlength="128" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="船公司"><el-input v-model="form.shippingCompanyName" maxlength="128" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="船名"><el-input v-model="form.vesselName" maxlength="128" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="航次"><el-input v-model="form.voyageNo" maxlength="64" /></el-form-item>
+        <el-form-item label="起运港代码"><el-input v-model="form.departurePortCode" maxlength="32" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="起运港名称"><el-input v-model="form.departurePortName" maxlength="128" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="目的港代码"><el-input v-model="form.destinationPortCode" maxlength="32" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="目的港名称"><el-input v-model="form.destinationPortName" maxlength="128" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="目的仓代码"><el-input v-model="form.destinationWarehouseCode" maxlength="64" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="目的仓名称"><el-input v-model="form.destinationWarehouseName" maxlength="128" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="拖车公司"><el-input v-model="form.terminalTruckingCompany" maxlength="128" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="计划装柜时间"><el-date-picker v-model="form.loadingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="预计开船时间"><el-date-picker v-model="form.estimatedSailingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" :disabled="transportOnly" /></el-form-item>
+        <el-form-item label="预计到港时间"><el-date-picker v-model="form.estimatedPortArrivalAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" :disabled="transportOnly" /></el-form-item>
+      </el-form>
+    </AppDrawer>
+  </section>
+</template>
+
+<style scoped>
+.container-page { display: grid; gap: 16px; min-width: 0; }.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.page-header h1,.page-header p,.container-page h2 { margin: 0; }.page-header p,.container-page small,.container-page h2 + p { display: block; margin-top: 4px; color: var(--cc-muted); }.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }.row-actions :deep(.el-button + .el-button) { margin-left: 0; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; margin-top: 16px; }.form-grid :deep(.el-select),.form-grid :deep(.el-date-editor),.form-grid :deep(.el-input-number) { width: 100%; }.details :deep(.el-descriptions__label) { width: 120px; }@media(max-width:720px){.page-header { flex-direction: column; }.page-header .el-button { width: 100%; min-height: 44px; }.form-grid { grid-template-columns: 1fr; }.details :deep(.el-descriptions__body table),.details :deep(tbody),.details :deep(tr),.details :deep(td){display:block;width:100%!important}.row-actions { min-width: 180px; }}
+</style>

src/modules/container-loading/pages/SmartLoadingWorkbenchView.test.ts

@@ -0,0 +1,45 @@
+import ElementPlus from 'element-plus'
+import { createPinia, setActivePinia } from 'pinia'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import SmartLoadingWorkbenchView from './SmartLoadingWorkbenchView.vue'
+import { getContainer, getSmartLoadingPlanByBooking, listSmartLoadingCandidates } from '../api/platformContainerLoading'
+
+vi.mock('../api/platformContainerLoading', () => ({
+  getContainer: vi.fn(), getSmartLoadingPlanByBooking: vi.fn(), listSmartLoadingCandidates: vi.fn(),
+  createSmartLoadingPlan: vi.fn(), assignSmartLoadingItem: vi.fn(), recommendSmartLoading: vi.fn(),
+  adjustSmartLoadingItem: vi.fn(), removeSmartLoadingItem: vi.fn(), pushSmartLoadingPreload: vi.fn(),
+}))
+
+const container = {
+  id: '9007199254740993', planId: '9007199254740994', bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1',
+  warehouseId: '8', warehouseName: '义乌仓', containerType: '40HQ', planStatus: 'EDITING' as const, version: 1,
+  billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null,
+  departurePortCode: null, departurePortName: null, destinationPortCode: null, destinationPortName: null,
+  destinationWarehouseCode: 'LAX9', destinationWarehouseName: 'LAX9', capacityCbm: 68, maxWeightKg: 28000,
+  terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null,
+  estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null,
+}
+
+describe('SmartLoadingWorkbenchView', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.mocked(getContainer).mockResolvedValue(container)
+    vi.mocked(getSmartLoadingPlanByBooking).mockResolvedValue({ id: '99', bookingId: container.id, planNo: 'LP-99', status: 'EDITING', containerNo: 'MSCU-1', voyageNo: null, version: 2, items: [] })
+    vi.mocked(listSmartLoadingCandidates).mockResolvedValue([{ accountId: '1', inboundId: '2', inboundDetailId: '3', orderId: '4', orderNo: 'ORD-1', inboundCode: 'IN-1', warehouseId: '8', destinationWarehouseId: '9', destinationWarehouseCode: 'LAX9', destinationWarehouseName: 'LAX9', customerName: '示例企业', goodsName: '服装', availablePackageCount: 12, unitWeightKg: 10, unitVolumeCbm: 0.2 }])
+  })
+
+  it('restores the real draft and explains candidate capacity', async () => {
+    const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/container-loading/:containerId/smart-loading', component: SmartLoadingWorkbenchView }] })
+    await router.push(`/container-loading/${container.id}/smart-loading`); await router.isReady()
+    const wrapper = mount(SmartLoadingWorkbenchView, { global: { plugins: [ElementPlus, router] } })
+    await flushPromises()
+    expect(getContainer).toHaveBeenCalledWith(container.id)
+    expect(getSmartLoadingPlanByBooking).toHaveBeenCalledWith(container.id)
+    expect(listSmartLoadingCandidates).toHaveBeenCalledWith('8')
+    expect(wrapper.text()).toContain('LP-99')
+    expect(wrapper.text()).toContain('ORD-1')
+    expect(wrapper.text()).toContain('按 110% 上限')
+  })
+})

src/modules/container-loading/pages/SmartLoadingWorkbenchView.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ArrowLeft, Plus, RefreshCcw, Sparkles, Trash2, Upload } from '@lucide/vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
+import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import PageToolbar from '@/shared/components/PageToolbar.vue'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import {
+  adjustSmartLoadingItem, assignSmartLoadingItem, createSmartLoadingPlan, getContainer,
+  getSmartLoadingPlanByBooking, listSmartLoadingCandidates, pushSmartLoadingPreload,
+  recommendSmartLoading, removeSmartLoadingItem,
+} from '../api/platformContainerLoading'
+import type { ContainerBookingResource, SmartLoadingCandidate, SmartLoadingItem, SmartLoadingPlan } from '../types'
+
+const route = useRoute()
+const router = useRouter()
+const access = useAccessPreviewStore()
+const containerId = computed(() => String(route.params.containerId || ''))
+const container = ref<ContainerBookingResource | null>(null)
+const plan = ref<SmartLoadingPlan | null>(null)
+const candidates = ref<SmartLoadingCandidate[]>([])
+const loading = ref(false)
+const mutating = ref(false)
+const loadError = ref<ApiErrorDetails | null>(null)
+const mutationError = ref<ApiErrorDetails | null>(null)
+const noDraft = ref(false)
+const assignOpen = ref(false)
+const selectedCandidate = ref<SmartLoadingCandidate | null>(null)
+const assignForm = reactive({ packageCount: 1 })
+const quantityDrafts = reactive<Record<string, number>>({})
+
+const canCreate = computed(() => access.can('platform:firstleg:smart-loading:create'))
+const canAssign = computed(() => access.can('platform:firstleg:smart-loading:assign'))
+const canDelete = computed(() => access.can('platform:firstleg:smart-loading:delete'))
+const canPush = computed(() => access.can('platform:firstleg:smart-loading:push'))
+const editable = computed(() => plan.value?.status === 'EDITING')
+const assignedDetailIds = computed(() => new Set((plan.value?.items || []).map((item) => item.inboundDetailId)))
+const totalVolume = computed(() => (plan.value?.items || []).reduce((sum, item) => sum + Number(item.volumeCbm || 0), 0))
+const totalWeight = computed(() => (plan.value?.items || []).reduce((sum, item) => sum + Number(item.grossWeightKg || 0), 0))
+const volumeLimit = computed(() => Number(container.value?.capacityCbm || 0) * 1.1)
+const weightLimit = computed(() => Number(container.value?.maxWeightKg || 0) * 1.1)
+const volumePercent = computed(() => volumeLimit.value ? totalVolume.value / volumeLimit.value * 100 : 0)
+const weightPercent = computed(() => weightLimit.value ? totalWeight.value / weightLimit.value * 100 : 0)
+
+const itemColumns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' },
+  { key: 'sequence', prop: 'loadSequence', label: '顺序', width: 75 },
+  { key: 'order', label: '订单/入库单', minWidth: 190, slotName: 'order' },
+  { key: 'customerName', prop: 'customerName', label: '客户', minWidth: 150 },
+  { key: 'goods', label: '货物', minWidth: 190, slotName: 'goods' },
+  { key: 'packageCount', label: '分配箱数', width: 150, slotName: 'packageCount' },
+  { key: 'volumeCbm', label: '体积', width: 120, slotName: 'volume' },
+  { key: 'grossWeightKg', label: '毛重', width: 130, slotName: 'weight' },
+  { key: 'destination', label: '目的仓', minWidth: 160, slotName: 'destination' },
+]
+const candidateColumns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 110, fixed: 'left', slotName: 'actions' },
+  { key: 'order', label: '订单/入库单', minWidth: 190, slotName: 'order' },
+  { key: 'customerName', prop: 'customerName', label: '客户', minWidth: 150 },
+  { key: 'goodsName', prop: 'goodsName', label: '货物', minWidth: 180 },
+  { key: 'availablePackageCount', prop: 'availablePackageCount', label: '可用箱数', width: 110 },
+  { key: 'unitVolumeCbm', label: '单箱体积', width: 120, slotName: 'unitVolume' },
+  { key: 'unitWeightKg', label: '单箱重量', width: 120, slotName: 'unitWeight' },
+  { key: 'route', label: '目的仓匹配', minWidth: 170, slotName: 'route' },
+]
+
+function formatNumber(value: number, digits = 3) { return Number.isFinite(value) ? value.toFixed(digits) : '0.000' }
+function candidateRow(source: object) { return source as SmartLoadingCandidate }
+function itemRow(source: object) { return source as SmartLoadingItem }
+function routeMatches(source: object) {
+  const candidate = candidateRow(source)
+  const target = container.value?.destinationWarehouseCode
+  return !target || target === candidate.destinationWarehouseCode
+}
+function explainCandidate(source: object) {
+  const candidate = candidateRow(source)
+  if (!routeMatches(candidate)) return `目的仓不一致（候选：${candidate.destinationWarehouseCode || '未设置'}）`
+  const volume = Number(candidate.unitVolumeCbm || 0)
+  const weight = Number(candidate.unitWeightKg || 0)
+  const volumeRoom = volumeLimit.value ? Math.floor(Math.max(volumeLimit.value - totalVolume.value, 0) / Math.max(volume, 0.000001)) : candidate.availablePackageCount
+  const weightRoom = weightLimit.value ? Math.floor(Math.max(weightLimit.value - totalWeight.value, 0) / Math.max(weight, 0.000001)) : candidate.availablePackageCount
+  return `按 110% 上限，当前最多可装 ${Math.max(Math.min(candidate.availablePackageCount, volumeRoom, weightRoom), 0)} 箱`
+}
+function syncDrafts() { for (const item of plan.value?.items || []) quantityDrafts[item.id] = item.packageCount }
+function acceptPlan(next: SmartLoadingPlan) { plan.value = next; noDraft.value = false; syncDrafts() }
+
+async function load() {
+  loading.value = true; loadError.value = null; noDraft.value = false
+  try {
+    container.value = await getContainer(containerId.value)
+    try { acceptPlan(await getSmartLoadingPlanByBooking(containerId.value)) }
+    catch (error) {
+      const detail = getApiErrorDetails(error)
+      if (detail.code === 'A0404') { plan.value = null; noDraft.value = true }
+      else throw error
+    }
+    candidates.value = await listSmartLoadingCandidates(container.value.warehouseId)
+  } catch (error) { loadError.value = getApiErrorDetails(error, '智能排柜工作台加载失败') }
+  finally { loading.value = false }
+}
+async function createPlan() {
+  mutating.value = true
+  mutationError.value = null
+  try { acceptPlan(await createSmartLoadingPlan(containerId.value, null)); ElMessage.success('排柜计划已创建') }
+  catch (error) { handleMutationError(error, '创建排柜计划失败') }
+  finally { mutating.value = false }
+}
+function openAssign(source: object) { const candidate = candidateRow(source); selectedCandidate.value = candidate; assignForm.packageCount = Math.min(candidate.availablePackageCount, 1); assignOpen.value = true }
+async function assign() {
+  if (!plan.value || !selectedCandidate.value || assignForm.packageCount < 1) return
+  mutating.value = true
+  mutationError.value = null
+  try {
+    acceptPlan(await assignSmartLoadingItem(plan.value.id, { inboundId: selectedCandidate.value.inboundId, inboundDetailId: selectedCandidate.value.inboundDetailId, packageCount: assignForm.packageCount, expectedVersion: plan.value.version }))
+    assignOpen.value = false; ElMessage.success('货物已分配')
+  } catch (error) { handleMutationError(error, '分配失败') }
+  finally { mutating.value = false }
+}
+async function recommend() {
+  if (!plan.value) return
+  mutating.value = true
+  mutationError.value = null
+  try { acceptPlan(await recommendSmartLoading(plan.value.id, plan.value.version)); ElMessage.success('智能建议已生成，请人工核对后再推送') }
+  catch (error) { handleMutationError(error, '智能推荐失败') }
+  finally { mutating.value = false }
+}
+async function adjust(source: object) {
+  const item = itemRow(source)
+  if (!plan.value) return
+  const count = Number(quantityDrafts[item.id])
+  if (!Number.isInteger(count) || count < 1) { ElMessage.warning('分配箱数必须为正整数'); return }
+  mutating.value = true
+  mutationError.value = null
+  try { acceptPlan(await adjustSmartLoadingItem(plan.value.id, item.id, count, plan.value.version, item.version)); ElMessage.success('箱数已调整') }
+  catch (error) { handleMutationError(error, '调整失败') }
+  finally { mutating.value = false }
+}
+async function remove(source: object) {
+  const item = itemRow(source)
+  if (!plan.value) return
+  await ElMessageBox.confirm(`确认从计划移除“${item.productNameZh || item.orderNo || item.id}”吗？`, '移除装柜明细', { type: 'warning', confirmButtonText: '移除', cancelButtonText: '取消' }).catch(() => false).then(async (confirmed) => {
+    if (!confirmed || !plan.value) return
+    mutating.value = true
+    mutationError.value = null
+    try { acceptPlan(await removeSmartLoadingItem(plan.value.id, item.id, plan.value.version, item.version)); ElMessage.success('装柜明细已移除') }
+    catch (error) { handleMutationError(error, '移除失败') }
+    finally { mutating.value = false }
+  })
+}
+async function pushPreload() {
+  if (!plan.value) return
+  const confirmed = await ElMessageBox.confirm('推送后计划进入装柜流程，不能继续调整排柜明细。确认推送预装清单？', '推送预装清单', { type: 'warning', confirmButtonText: '确认推送', cancelButtonText: '取消' }).catch(() => false)
+  if (!confirmed || !plan.value) return
+  mutating.value = true
+  mutationError.value = null
+  try { acceptPlan(await pushSmartLoadingPreload(plan.value.id, plan.value.version)); ElMessage.success('已推送预装清单') }
+  catch (error) { handleMutationError(error, '推送失败') }
+  finally { mutating.value = false }
+}
+function handleMutationError(error: unknown, fallback: string) {
+  const details = getApiErrorDetails(error, fallback)
+  mutationError.value = { ...details, message: details.code === 'A0409' ? '计划已被其他人修改，请刷新最新计划后重试' : details.message }
+  ElMessage.error(mutationError.value.message)
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <AdminPage>
+  <section class="business-page workbench">
+    <PageToolbar title="智能排柜" :description="`${container?.cabinetNo || '正在加载'} · ${container?.containerNo || '待录入集装箱号'}`">
+      <el-button text aria-label="返回货柜列表" @click="router.back()"><ArrowLeft :size="18" /></el-button>
+      <template #actions>
+        <el-button :loading="loading" title="刷新" aria-label="刷新智能排柜" @click="load"><RefreshCcw :size="16" /></el-button>
+        <el-button v-if="canAssign && editable" type="primary" plain :loading="mutating" @click="recommend"><Sparkles :size="16" />智能推荐</el-button>
+        <el-button v-if="canPush && editable" type="primary" :disabled="!plan?.items.length" :loading="mutating" @click="pushPreload"><Upload :size="16" />推送预装</el-button>
+      </template>
+    </PageToolbar>
+    <LoadErrorState v-if="loadError" title="智能排柜加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
+    <template v-else>
+      <LoadErrorState v-if="mutationError" title="排柜操作失败" :message="mutationError.message" compact retry-text="刷新最新计划" @retry="load"><template #details><ApiErrorMeta :details="mutationError" /></template></LoadErrorState>
+      <section v-if="container" class="summary-band"><div><span>柜型</span><strong>{{ container.containerType }}</strong></div><div><span>装柜仓库</span><strong>{{ container.warehouseName || '—' }}</strong></div><div><span>目的仓</span><strong>{{ container.destinationWarehouseName || container.destinationWarehouseCode || '不限' }}</strong></div><div><span>计划状态</span><strong>{{ plan?.status === 'LOADING' ? '已推送预装' : plan ? '编辑中' : '未创建' }}</strong></div></section>
+      <section v-if="container" class="capacity-grid"><div><div class="meter-title"><span>体积占用（含 110% 上限）</span><strong>{{ formatNumber(totalVolume) }} / {{ formatNumber(volumeLimit) }} m³</strong></div><el-progress :percentage="Math.min(volumePercent,100)" :status="volumePercent > 100 ? 'exception' : undefined" /></div><div><div class="meter-title"><span>重量占用（含 110% 上限）</span><strong>{{ formatNumber(totalWeight,1) }} / {{ formatNumber(weightLimit,1) }} kg</strong></div><el-progress :percentage="Math.min(weightPercent,100)" :status="weightPercent > 100 ? 'exception' : undefined" /></div></section>
+      <el-empty v-if="noDraft" description="该货柜尚未创建排柜计划"><el-button v-if="canCreate" type="primary" :loading="mutating" @click="createPlan"><Plus :size="16" />创建排柜计划</el-button></el-empty>
+      <template v-else-if="plan">
+        <DataTable :data="plan.items" :columns="itemColumns" :loading="loading || mutating" preference-key="smart-loading-items" empty-text="暂无已分配货物">
+          <template #toolbar-start><div><h2>装柜方案</h2><p>计划 {{ plan.planNo }} · 版本 {{ plan.version }}；智能建议必须经人工核对。</p></div></template>
+          <template #actions="{ row }"><div class="row-actions"><el-button v-if="canAssign && editable" link type="primary" :disabled="quantityDrafts[row.id] === row.packageCount" @click="adjust(row)">保存箱数</el-button><el-button v-if="canDelete && editable" link type="danger" @click="remove(row)"><Trash2 :size="15" />移除</el-button></div></template>
+          <template #order="{ row }"><strong>{{ row.orderNo || '—' }}</strong><small>{{ row.inboundCode || '—' }}</small></template>
+          <template #goods="{ row }"><strong>{{ row.productNameZh || '未命名货物' }}</strong><small>{{ row.skuCode || '无 SKU' }}</small></template>
+          <template #packageCount="{ row }"><el-input-number v-model="quantityDrafts[row.id]" :min="1" :step="1" :disabled="!canAssign || !editable" controls-position="right" /></template>
+          <template #volume="{ row }">{{ formatNumber(Number(row.volumeCbm || 0)) }} m³</template><template #weight="{ row }">{{ formatNumber(Number(row.grossWeightKg || 0),1) }} kg</template>
+          <template #destination="{ row }">{{ row.destinationWarehouseName || row.destinationWarehouseCode || '—' }}</template>
+        </DataTable>
+        <DataTable :data="candidates" :columns="candidateColumns" :loading="loading || mutating" preference-key="smart-loading-candidates" empty-text="当前仓库暂无可排柜货物">
+          <template #toolbar-start><div><h2>候选货物</h2><p>系统基于仓库、目的仓、可用箱数及 110% 容量上限校验。</p></div></template>
+          <template #actions="{ row }"><el-button v-if="canAssign && editable" link type="primary" :disabled="!routeMatches(row) || assignedDetailIds.has(row.inboundDetailId) || row.availablePackageCount < 1" @click="openAssign(row)"><Plus :size="15" />分配</el-button></template>
+          <template #order="{ row }"><strong>{{ row.orderNo || '—' }}</strong><small>{{ row.inboundCode || '—' }}</small></template>
+          <template #unitVolume="{ row }">{{ formatNumber(Number(row.unitVolumeCbm || 0)) }} m³</template><template #unitWeight="{ row }">{{ formatNumber(Number(row.unitWeightKg || 0),1) }} kg</template>
+          <template #route="{ row }"><el-tag :type="routeMatches(row) ? 'success' : 'danger'">{{ routeMatches(row) ? '匹配' : '冲突' }}</el-tag><small>{{ explainCandidate(row) }}</small></template>
+        </DataTable>
+      </template>
+    </template>
+    <AppDialog v-model="assignOpen" title="分配候选货物" :confirm-loading="mutating" confirm-text="确认分配" @confirm="assign"><div v-if="selectedCandidate" class="assign-dialog"><p><strong>{{ selectedCandidate.goodsName || '未命名货物' }}</strong></p><p>{{ selectedCandidate.orderNo || '—' }} · 可用 {{ selectedCandidate.availablePackageCount }} 箱</p><el-form label-position="top"><el-form-item label="本次分配箱数" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" /></el-form-item></el-form><el-alert :title="explainCandidate(selectedCandidate)" type="info" :closable="false" /></div></AppDialog>
+  </section>
+  </AdminPage>
+</template>
+
+<style scoped>
+.workbench { display: grid; gap: 16px; min-width: 0; }
+.page-header,.title-row,.header-actions,.row-actions,.meter-title { display: flex; align-items: center; }
+.page-header { align-items: flex-start; justify-content: space-between; gap: 16px; }
+.title-row { gap: 8px; }
+.title-row h1,.title-row p,.workbench h2,.workbench h2 + p { margin: 0; }
+.title-row h1 { font-size: 20px; line-height: 1.35; }
+.title-row p,.workbench h2 + p,.workbench small { display: block; margin-top: 4px; color: var(--cc-muted); }
+.header-actions,.row-actions { flex-wrap: wrap; gap: 8px; }
+.header-actions :deep(.el-button + .el-button),.row-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.summary-band { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border: 1px solid var(--cc-border); background: var(--cc-border); }
+.summary-band>div { display: grid; gap: 5px; padding: 14px; background: #fff; }
+.summary-band span { color: var(--cc-muted); font-size: 12px; }
+.capacity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
+.meter-title { justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; }
+.row-actions { min-width: 150px; }
+.workbench :deep(.el-input-number) { width: 130px; }
+.assign-dialog p { margin: 0 0 10px; }
+.assign-dialog :deep(.el-input-number) { width: 100%; }
+@media (max-width: 760px) { .page-header,.header-actions { width: 100%; flex-direction: column; align-items: stretch; } .summary-band,.capacity-grid { grid-template-columns: 1fr; } .meter-title { align-items: flex-start; flex-direction: column; } .header-actions .el-button { min-height: 44px; margin-left: 0; } }
+</style>

src/modules/container-loading/routes.ts

@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const containerLoadingRoutes = [
+  {
+    path: 'container-loading',
+    name: 'container-loading',
+    component: () => import('./pages/ContainersView.vue'),
+    meta: { title: '货柜与排柜', description: '维护货柜资料并进入智能排柜工作台', permission: 'platform:firstleg:container:list' },
+  },
+  {
+    path: 'container-loading/:containerId/smart-loading',
+    name: 'smart-loading-workbench',
+    component: () => import('./pages/SmartLoadingWorkbenchView.vue'),
+    meta: { title: '智能排柜', description: '生成、调整并确认可解释的装柜计划', permission: 'platform:firstleg:smart-loading:list' },
+  },
+] satisfies RouteRecordRaw[]

src/modules/container-loading/types.ts

@@ -0,0 +1,139 @@
+export type ContainerPlanStatus = 'EDITING' | 'LOADING' | 'COMPLETED'
+
+export interface ContainerBookingResource {
+  id: string
+  planId: string | null
+  bookingNo: string
+  containerNo: string | null
+  cabinetNo: string
+  warehouseId: string
+  warehouseName: string | null
+  billOfLadingNo: string | null
+  vesselName: string | null
+  voyageNo: string | null
+  containerType: string
+  shippingCompanyId: string | null
+  shippingCompanyName: string | null
+  departurePortCode: string | null
+  departurePortName: string | null
+  destinationPortCode: string | null
+  destinationPortName: string | null
+  destinationWarehouseCode: string | null
+  destinationWarehouseName: string | null
+  capacityCbm: number | null
+  maxWeightKg: number | null
+  terminalTruckingCompany: string | null
+  loadingAt: string | null
+  estimatedSailingAt: string | null
+  actualSailingAt: string | null
+  estimatedPortArrivalAt: string | null
+  actualPortArrivalAt: string | null
+  estimatedWarehouseArrivalAt: string | null
+  actualWarehouseArrivalAt: string | null
+  planStatus: ContainerPlanStatus
+  version: number
+  createdAt?: string | null
+  updatedAt?: string | null
+}
+
+export interface ContainerPage {
+  records: ContainerBookingResource[]
+  page: number
+  size: number
+  total: number
+  pages: number
+}
+
+export interface ContainerQuery {
+  page: number
+  size: number
+  keyword?: string
+  containerNo?: string
+  cabinetNo?: string
+  warehouseId?: string
+  containerType?: string
+  status?: ContainerPlanStatus | ''
+  estimatedSailingFrom?: string
+  estimatedSailingTo?: string
+}
+
+export interface ContainerSaveRequest {
+  containerNo: string | null
+  cabinetNo: string
+  warehouseId: string
+  warehouseName: string | null
+  billOfLadingNo: string | null
+  vesselName: string | null
+  voyageNo: string | null
+  containerType: string
+  shippingCompanyId: string | null
+  shippingCompanyName: string | null
+  departurePortCode: string | null
+  departurePortName: string | null
+  destinationPortCode: string | null
+  destinationPortName: string | null
+  destinationWarehouseCode: string | null
+  destinationWarehouseName: string | null
+  capacityCbm: number | null
+  maxWeightKg: number | null
+  terminalTruckingCompany: string | null
+  loadingAt: string | null
+  estimatedSailingAt: string | null
+  actualSailingAt: string | null
+  estimatedPortArrivalAt: string | null
+  actualPortArrivalAt: string | null
+  estimatedWarehouseArrivalAt: string | null
+  actualWarehouseArrivalAt: string | null
+}
+
+export interface SmartLoadingCandidate {
+  accountId: string
+  inboundId: string
+  inboundDetailId: string
+  orderId: string
+  orderNo: string | null
+  inboundCode: string | null
+  warehouseId: string
+  destinationWarehouseId: string | null
+  destinationWarehouseCode: string | null
+  destinationWarehouseName: string | null
+  customerName: string | null
+  goodsName: string | null
+  availablePackageCount: number
+  unitWeightKg: number | null
+  unitVolumeCbm: number | null
+}
+
+export interface SmartLoadingItem {
+  id: string
+  loadingPlanId: string
+  accountId: string
+  inboundId: string
+  inboundDetailId: string
+  orderId: string
+  orderNo: string | null
+  inboundCode: string | null
+  customerName: string | null
+  destinationWarehouseId: string | null
+  destinationWarehouseCode: string | null
+  destinationWarehouseName: string | null
+  skuCode: string | null
+  productNameZh: string | null
+  packageCount: number
+  productQuantity: number | null
+  grossWeightKg: number | null
+  volumeCbm: number | null
+  loadSequence: number | null
+  version: number
+}
+
+export interface SmartLoadingPlan {
+  id: string
+  planNo: string
+  status: ContainerPlanStatus
+  bookingId: string
+  containerNo: string | null
+  voyageNo: string | null
+  version: number
+  items: SmartLoadingItem[]
+}