src/modules/auth/pages/LoginView.test.ts

@@ -6,6 +6,7 @@ import { createMemoryHistory, createRouter } from 'vue-router'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { useAuthStore } from '@/core/auth/auth'
+import { ApiResponseError } from '@/shared/api/http'
 import LoginView from './LoginView.vue'
 
 const loginSource = readFileSync(resolve(process.cwd(), 'src/modules/auth/pages/LoginView.vue'), 'utf8')
@@ -177,4 +178,50 @@ describe('LoginView authentication lifecycle', () => {
     expect(initialize).not.toHaveBeenCalled()
     expect(replace).not.toHaveBeenCalled()
   })
+
+  it('shows the backend credential error and diagnostic identifiers', async () => {
+    const pinia = createPinia()
+    setActivePinia(pinia)
+    const auth = useAuthStore()
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/login', component: LoginView },
+        { path: '/', component: { template: '<p>home</p>' } },
+      ],
+    })
+    await router.push('/login')
+    await router.isReady()
+    vi.spyOn(auth, 'login').mockRejectedValue(new ApiResponseError(
+      '用户名或密码错误',
+      'A0401',
+      undefined,
+      null,
+      'request-login',
+      'trace-login',
+    ))
+    const wrapper = mount(LoginView, {
+      global: {
+        plugins: [pinia, router],
+        stubs: {
+          'el-form': formStub,
+          'el-form-item': { template: '<label><slot /></label>' },
+          'el-input': { props: ['modelValue'], emits: ['update:modelValue'], template: '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />' },
+          'el-button': { emits: ['click'], template: '<button type="button" @click="$emit(\'click\')"><slot /></button>' },
+        },
+      },
+    })
+
+    const inputs = wrapper.findAll('input')
+    await inputs[0]!.setValue('platform_admin')
+    await inputs[1]!.setValue('incorrect-password')
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+
+    const alert = wrapper.get('[role="alert"]').text()
+    expect(alert).toContain('用户名或密码错误')
+    expect(alert).toContain('request-login')
+    expect(alert).toContain('trace-login')
+    expect(alert).not.toContain('登录状态已失效')
+  })
 })

src/modules/auth/pages/LoginView.vue

@@ -41,7 +41,11 @@ async function submit() {
       : requestedPath
     await router.replace(targetPath)
   } catch (error) {
-    loginError.value = getApiErrorDetails(error, '登录失败，请检查账号和密码后重试')
+    loginError.value = getApiErrorDetails(
+      error,
+      '登录失败，请检查账号和密码后重试',
+      { preserveAuthenticationMessage: true },
+    )
     ElMessage.error(loginError.value.message)
   } finally {
     loading.value = false

src/modules/ocean-bookings/api/platformOceanBookings.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { createOceanBooking, listOceanBookings, performOceanBookingAction, releaseOceanBooking, requestOceanBookingChange } from './platformOceanBookings'
+import { createOceanBooking, listOceanBookings, listWarehouseLogisticsChannels, performOceanBookingAction, releaseOceanBooking, requestOceanBookingChange } from './platformOceanBookings'
 import { http } from '@/shared/api/http'
 
 const detailResponse = (version = 0) => ({
@@ -22,7 +22,7 @@ describe('ocean bookings api', () => {
 
   it('uses version zero for create and extracts the id from the returned Detail', async () => {
     const post = vi.spyOn(http, 'post').mockResolvedValue({ code: '200', message: 'ok', data: detailResponse() })
-    const created = await createOceanBooking({ expectedVersion: 0, data: { customerId: '456', customerName: '客户', channelCode: 'SEA', channelName: '海运', warehouseId: '8', warehouseName: '义乌仓', parties: [], containerRequirements: [] } })
+    const created = await createOceanBooking({ expectedVersion: 0, data: { customerId: '456', customerName: '客户', channelCode: 'SEA', warehouseId: '8', warehouseName: '义乌仓', parties: [], containerRequirements: [] } })
     expect(post.mock.calls[0]?.[1]).toMatchObject({ expectedVersion: 0 })
     expect(post.mock.calls[0]?.[2]).toMatchObject({ headers: { 'Idempotency-Key': expect.any(String) } })
     expect(created.id).toBe('123')
@@ -43,4 +43,10 @@ describe('ocean bookings api', () => {
     expect(post.mock.calls[2]?.[0]).toContain('/123/release')
     expect(post.mock.calls[2]?.[1]).toMatchObject({ billOfLadingNo: 'BL-1', vesselName: 'VESSEL', voyageNo: 'V001', estimatedSailingAt: '2026-08-12T10:00:00', estimatedArrivalAt: '2026-09-01T10:00:00' })
   })
+
+  it('loads warehouse-scoped logistics channels from the booking contract', async () => {
+    vi.spyOn(http, 'get').mockResolvedValue({ code: '200', message: 'ok', data: [{ channelCode: 'SEA_FCL', channelName: '海运整箱' }] })
+    await expect(listWarehouseLogisticsChannels('8')).resolves.toEqual([{ channelCode: 'SEA_FCL', channelName: '海运整箱' }])
+    expect(http.get).toHaveBeenCalledWith('/platform/v1/ocean-bookings/channels', { params: { originWarehouseId: '8' } })
+  })
 })

src/modules/ocean-bookings/api/platformOceanBookings.ts

@@ -2,6 +2,11 @@ import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
 import type { OceanBookingActionRequest, OceanBookingChangeRequest, OceanBookingDetail, OceanBookingPage, OceanBookingQuery, OceanBookingResource, OceanBookingSaveRequest, OceanBookingStatus, OceanBookingReleaseRequest } from '../types'
 
 const basePath = '/platform/v1/ocean-bookings'
+
+export interface OceanLogisticsChannel {
+  channelCode: string
+  channelName: string
+}
 function pageNumber(value: number | string, fallback: number) { const n = Number(value); return Number.isFinite(n) ? Math.trunc(n) : fallback }
 function booking(raw: OceanBookingResource): OceanBookingResource {
   const item = raw as OceanBookingResource & { version?: number | string | null }
@@ -49,4 +54,8 @@ export async function performOceanBookingAction(id: string, action: Exclude<Ocea
 export async function releaseOceanBooking(id: string, request: OceanBookingReleaseRequest) { const response = await http.post<ApiEnvelope<OceanBookingDetail>, ApiEnvelope<OceanBookingDetail>>(`${basePath}/${encodeURIComponent(id)}/release`, request, { headers: { 'Idempotency-Key': idempotencyKey() } }); return detail(unwrapApiResponse(response)) }
 export async function requestOceanBookingChange(id: string, request: OceanBookingChangeRequest) { const response = await http.post<ApiEnvelope<OceanBookingDetail>, ApiEnvelope<OceanBookingDetail>>(`${basePath}/${encodeURIComponent(id)}/change-request`, request, { headers: { 'Idempotency-Key': idempotencyKey() } }); return detail(unwrapApiResponse(response)) }
 export async function printOceanBooking(id: string, type: 'SHIPPING_INSTRUCTION' | 'BILL_CONFIRMATION') { return http.get<Blob, Blob>(`${basePath}/${encodeURIComponent(id)}/print`, { params: { type }, responseType: 'blob' }) }
+export async function listWarehouseLogisticsChannels(warehouseId: string): Promise<OceanLogisticsChannel[]> {
+  const response = await http.get<ApiEnvelope<OceanLogisticsChannel[]>, ApiEnvelope<OceanLogisticsChannel[]>>(`${basePath}/channels`, { params: { originWarehouseId: warehouseId } })
+  return (unwrapApiResponse(response) || []).map((item) => ({ channelCode: String(item.channelCode), channelName: String(item.channelName) }))
+}
 export type { OceanBookingResource, OceanBookingStatus }

src/modules/ocean-bookings/pages/OceanBookingDetailView.test.ts

@@ -45,8 +45,16 @@ describe('OceanBookingDetailView interaction contract', () => {
   })
 
   it('captures channel, warehouse, capacity snapshots and uses the release DTO', () => {
-    expect(source).toContain('v-model="form.data.channelCode"')
-    expect(source).toContain('v-model="form.data.channelName"')
+    expect(source).toContain("listPlatformWarehouses({ page: 1, size: 200, warehouseType: 'DOMESTIC', status: 'ACTIVE' })")
+    expect(source).toContain("warehouse.status === 'ACTIVE' && warehouse.warehouseType === 'DOMESTIC'")
+    expect(source).toContain('label="物流渠道" prop="channelCode"')
+    expect(source).toContain('<el-select :model-value="form.data.channelCode" filterable')
+    expect(source).toContain(':model-value="form.data.channelCode" filterable')
+    expect(source).not.toContain('<el-input v-model="form.data.channelCode"')
+    expect(source).toContain('listWarehouseLogisticsChannels')
+    expect(source).toContain('void loadChannels(warehouseId)')
+    expect(source).not.toContain('v-model="form.data.channelName"')
+    expect(source).toContain('form.data.channelCode = \'\'')
     expect(source).toContain('function selectWarehouse(value: unknown)')
     expect(source).toContain('form.data.warehouseName = warehouses.value.find')
     expect(source).toContain('@update:model-value="selectWarehouse"')
@@ -62,6 +70,19 @@ describe('OceanBookingDetailView interaction contract', () => {
     expect(source).not.toContain('maxWeightKg: 28000')
   })
 
+  it('keeps every container requirement removable without collapsing its fields', () => {
+    expect(source).toContain('@click="removeContainer(index)"')
+    expect(source).toContain(':aria-label="`删除箱型 ${index + 1}`"')
+    expect(source).toContain("form.data.containerRequirements.length === 1 ? '至少保留一条箱型' : '删除该箱型'")
+    expect(source).toContain(':disabled="form.data.containerRequirements.length === 1"')
+    expect(source).toContain('function removeContainer(index: number) { if (form.data.containerRequirements.length > 1)')
+    expect(source).toContain('<table class="container-table">')
+    expect(source).toContain('.container-table-wrap{overflow-x:auto')
+    expect(source).toContain('.container-table td :deep(.el-input),.container-table td :deep(.el-input-number){width:100%;min-width:0}')
+    expect(source).toContain(':controls="false" placeholder="请输入数量"')
+    expect(source).not.toContain('class="container-row"')
+  })
+
   it('keeps view, create and edit on the formal detail route with a return action', () => {
     expect(source).toContain("router.push('/ocean-bookings')")
     expect(source).toContain("router.replace(`/ocean-bookings/${created.id}`)")
@@ -74,7 +95,11 @@ describe('OceanBookingDetailView interaction contract', () => {
     expect(source).toContain('aria-label="航线船期"')
     expect(source).toContain('aria-label="条款与柜量"')
     expect(source).toContain('grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))')
+    expect(source).toContain('.booking-group__body--fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}')
+    expect(source).toContain('class="booking-field--wide" label="交货地点"')
     expect(source).toContain('@media(max-width:720px){.booking-groups,.party-grid{grid-template-columns:1fr}')
+    expect(source).toContain('@media(max-width:520px){.booking-group__body--fields{grid-template-columns:1fr}')
+    expect(source).toContain('min-width:580px')
   })
 
   it('keeps the three real booking parties in their own three-column section', () => {

src/modules/ocean-bookings/pages/OceanBookingDetailView.vue

@@ -22,6 +22,8 @@ import {
   releaseOceanBooking,
   requestOceanBookingChange,
   updateOceanBooking,
+  listWarehouseLogisticsChannels,
+  type OceanLogisticsChannel,
   type OceanBookingAction,
 } from '../api/platformOceanBookings'
 import type {
@@ -74,24 +76,32 @@ const partners = ref<PlatformPartnerResource[]>([])
 const warehouses = ref<PlatformWarehouseResource[]>([])
 const optionsLoading = ref(false)
 const optionsError = ref('')
+const channels = ref<OceanLogisticsChannel[]>([])
+const channelsLoading = ref(false)
+const channelsError = ref('')
+const selectedChannelName = ref('')
+let channelRequestSerial = 0
 const selectableCustomers = computed(() => customers.value.filter((customer) => (
   customer.status === 'ACTIVE' || String(customer.id) === String(form.data.customerId)
 )))
 const shippingCompanies = computed(() => partners.value.filter((partner) => partner.types.includes('CARRIER')))
 const bookingAgents = computed(() => partners.value.filter((partner) => partner.types.some((type) => ['SUPPLIER', 'CUSTOMS_BROKER'].includes(type))))
+const channelUnavailable = computed(() => Boolean(form.data.warehouseId) && !channelsLoading.value && !channelsError.value && channels.value.length === 0)
 
 function blankParties(): OceanBookingParty[] {
   return partyTypes.map(({ value }) => ({ partyType: value, partyName: '', contactName: '', contactPhone: '', address: '' }))
 }
 function blankData(): OceanBookingDraftData {
   return {
-    customerId: '', customerName: '', channelCode: '', channelName: '', warehouseId: '', warehouseName: '', parties: blankParties(),
+    customerId: '', customerName: '', channelCode: '', warehouseId: '', warehouseName: '', parties: blankParties(),
     containerRequirements: [createBlankContainerRequirement()],
   }
 }
 const form = reactive<OceanBookingSaveRequest>({ expectedVersion: 0, data: blankData() })
 const rules: FormRules = {
   customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
+  warehouseId: [{ required: true, message: '请选择装柜仓库', trigger: 'change' }],
+  channelCode: [{ required: true, message: '请选择物流渠道', trigger: 'change' }],
 }
 const editable = computed(() => isNew.value || detail.value?.status === 'DRAFT')
 const canSave = computed(() => isNew.value
@@ -115,11 +125,11 @@ async function loadOptions() {
     const [customerResult, partnerResult, warehouseResult] = await Promise.all([
       listPlatformTenants({ page: 1, size: 200, status: 'ACTIVE' }),
       listPlatformPartners({ page: 1, size: 200, status: 'ACTIVE' }),
-      listPlatformWarehouses({ page: 1, size: 200, status: 'ACTIVE' }),
+      listPlatformWarehouses({ page: 1, size: 200, warehouseType: 'DOMESTIC', status: 'ACTIVE' }),
     ])
     customers.value = customerResult.records.filter((customer) => customer.status === 'ACTIVE')
     partners.value = partnerResult.records
-    warehouses.value = warehouseResult.records
+    warehouses.value = warehouseResult.records.filter((warehouse) => warehouse.status === 'ACTIVE' && warehouse.warehouseType === 'DOMESTIC')
   } catch (cause) {
     optionsError.value = getApiErrorDetails(cause, '客户及合作单位选项加载失败').message
   } finally {
@@ -135,6 +145,29 @@ function selectWarehouse(value: unknown) {
   const warehouseId = String(value || '')
   form.data.warehouseId = warehouseId
   form.data.warehouseName = warehouses.value.find((warehouse) => String(warehouse.id) === warehouseId)?.warehouseName || ''
+  form.data.channelCode = ''
+  selectedChannelName.value = ''
+  channels.value = []
+  channelsError.value = ''
+  if (warehouseId) void loadChannels(warehouseId)
+}
+async function loadChannels(warehouseId: string) {
+  const serial = ++channelRequestSerial
+  channelsLoading.value = true
+  channelsError.value = ''
+  try {
+    const result = await listWarehouseLogisticsChannels(warehouseId)
+    if (serial === channelRequestSerial && warehouseId === form.data.warehouseId) channels.value = result
+  } catch (cause) {
+    if (serial === channelRequestSerial) channelsError.value = getApiErrorDetails(cause, '物流渠道加载失败').message
+  } finally {
+    if (serial === channelRequestSerial) channelsLoading.value = false
+  }
+}
+function selectChannel(channelCode: string) {
+  const channel = channels.value.find((item) => item.channelCode === channelCode)
+  form.data.channelCode = channelCode
+  selectedChannelName.value = channel?.channelName || ''
 }
 function selectPartner(kind: 'shippingCompany' | 'bookingAgent', partnerId: string) {
   const partner = partners.value.find((item) => String(item.id) === partnerId)
@@ -150,7 +183,7 @@ function applyDetail(value: OceanBookingDetail) {
   detail.value = value
   form.expectedVersion = value.version
   form.data = {
-    customerId: value.customerId || '', customerName: value.customerName || '', channelCode: value.channelCode || '', channelName: value.channelName || '', warehouseId: value.warehouseId || '', warehouseName: value.warehouseName || '', billOfLadingNo: value.billOfLadingNo,
+    customerId: value.customerId || '', customerName: value.customerName || '', channelCode: value.channelCode || '', warehouseId: value.warehouseId || '', warehouseName: value.warehouseName || '', billOfLadingNo: value.billOfLadingNo,
     shippingCompanyId: value.shippingCompanyId, shippingCompanyName: value.shippingCompanyName,
     bookingAgentId: value.bookingAgentId, bookingAgentName: value.bookingAgentName,
     vesselName: value.vesselName, voyageNo: value.voyageNo,
@@ -162,6 +195,9 @@ function applyDetail(value: OceanBookingDetail) {
     parties: value.parties.length ? value.parties.map(({ partyType, partyName, contactName, contactPhone, address }) => ({ partyType, partyName, contactName, contactPhone, address })) : blankParties(),
     containerRequirements: value.containerRequirements.length ? value.containerRequirements.map(({ containerType, containerKind, capacityCbm, maxWeightKg, quantity }) => ({ containerType, containerKind, capacityCbm: capacityCbm ?? null, maxWeightKg: maxWeightKg ?? null, quantity: quantity ?? null })) : [createBlankContainerRequirement()],
   }
+  selectedChannelName.value = value.channelName || ''
+  channels.value = []
+  if (form.data.warehouseId) void loadChannels(form.data.warehouseId)
 }
 async function load() {
   if (!id.value || isNew.value) return
@@ -182,13 +218,14 @@ async function save() {
   saving.value = true
   actionError.value = null
   try {
+    const payload = { ...form.data }
     if (isNew.value) {
-      const created = await createOceanBooking({ expectedVersion: 0, data: form.data })
+      const created = await createOceanBooking({ expectedVersion: 0, data: payload })
       ElMessage.success('订舱已创建')
       await router.replace(`/ocean-bookings/${created.id}`)
       applyDetail(created)
     } else {
-      applyDetail(await updateOceanBooking(id.value, { expectedVersion: form.expectedVersion, data: form.data }))
+      applyDetail(await updateOceanBooking(id.value, { expectedVersion: form.expectedVersion, data: payload }))
       ElMessage.success('订舱草稿已保存')
     }
   } catch (cause) { actionError.value = getApiErrorDetails(cause) }
@@ -307,27 +344,26 @@ onMounted(() => { void load(); void loadOptions() })
         <el-alert v-if="optionsError" type="warning" :closable="false" show-icon :title="optionsError"><el-button link type="warning" :loading="optionsLoading" @click="loadOptions">重新加载选项</el-button></el-alert>
         <el-form ref="formRef" :model="form.data" :rules="rules" label-position="top" :disabled="!editable" class="booking-groups">
           <section class="booking-group" aria-label="基本信息">
-            <h3>基本信息</h3><div class="booking-group__body">
+            <h3>基本信息</h3><div class="booking-group__body booking-group__body--fields">
             <el-form-item label="订舱号"><el-input :model-value="detail?.bookingNo || '保存后生成'" disabled /></el-form-item>
             <el-form-item label="客户" prop="customerId"><el-select :model-value="form.data.customerId" filterable placeholder="请选择客户" :loading="optionsLoading" :disabled="!isNew" style="width:100%" @update:model-value="selectCustomer(String($event || ''))"><el-option v-if="form.data.customerId && !selectableCustomers.some((customer) => String(customer.id) === String(form.data.customerId))" :label="form.data.customerName || '客户名称缺失'" :value="String(form.data.customerId)" /><el-option v-for="customer in selectableCustomers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></el-form-item>
             <el-form-item label="状态"><el-input :model-value="detail ? statusLabel(detail.status) : '待创建'" disabled /></el-form-item>
-            <el-form-item label="渠道编码" prop="channelCode"><el-input v-model="form.data.channelCode" placeholder="请输入渠道编码" /></el-form-item>
-            <el-form-item label="渠道名称" prop="channelName"><el-input v-model="form.data.channelName" placeholder="请输入渠道名称" /></el-form-item>
-            <el-form-item label="装柜仓库" prop="warehouseId"><el-select :model-value="form.data.warehouseId" filterable placeholder="请选择装柜仓库" style="width:100%" @update:model-value="selectWarehouse"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="warehouse.warehouseName" :value="String(warehouse.id)" /></el-select></el-form-item>
+            <el-form-item label="装柜仓库" prop="warehouseId"><el-select :model-value="form.data.warehouseId" filterable placeholder="请选择装柜仓库" :loading="optionsLoading" style="width:100%" @update:model-value="selectWarehouse"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="warehouse.warehouseName" :value="String(warehouse.id)" /></el-select></el-form-item>
+            <el-form-item label="物流渠道" prop="channelCode"><el-select :model-value="form.data.channelCode" filterable :disabled="!form.data.warehouseId || channelsLoading || !!channelsError || channelUnavailable" :loading="channelsLoading" :placeholder="form.data.warehouseId ? '请选择物流渠道' : '请先选择装柜仓库'" no-data-text="该仓库暂无有效物流渠道" style="width:100%" @update:model-value="selectChannel(String($event || ''))"><el-option v-if="form.data.channelCode && !channels.some((channel) => channel.channelCode === form.data.channelCode)" :label="selectedChannelName || form.data.channelCode" :value="form.data.channelCode" /><el-option v-for="channel in channels" :key="channel.channelCode" :label="channel.channelName" :value="channel.channelCode"><span>{{ channel.channelName }}</span><small class="channel-code">{{ channel.channelCode }}</small></el-option></el-select><div v-if="channelsError" class="field-error"><span>{{ channelsError }}</span><el-button link type="primary" :loading="channelsLoading" @click="loadChannels(form.data.warehouseId)">重新加载</el-button></div><div v-else-if="channelUnavailable" class="field-hint">该仓库暂无有效物流渠道，请更换仓库或联系管理员。</div></el-form-item>
             <el-form-item label="提单号"><el-input v-model="form.data.billOfLadingNo" placeholder="请输入提单号（可选）" /></el-form-item>
             <el-form-item label="船公司"><el-select :model-value="form.data.shippingCompanyId" filterable clearable placeholder="请选择船公司" :loading="optionsLoading" style="width:100%" @update:model-value="selectPartner('shippingCompany', String($event || ''))"><el-option v-if="form.data.shippingCompanyId && !shippingCompanies.some((partner) => String(partner.id) === String(form.data.shippingCompanyId))" :label="form.data.shippingCompanyName || '船公司名称缺失'" :value="String(form.data.shippingCompanyId)" /><el-option v-for="partner in shippingCompanies" :key="String(partner.id)" :label="partner.partnerName" :value="String(partner.id)" /></el-select></el-form-item>
             <el-form-item label="订舱代理"><el-select :model-value="form.data.bookingAgentId" filterable clearable placeholder="请选择订舱代理" :loading="optionsLoading" style="width:100%" @update:model-value="selectPartner('bookingAgent', String($event || ''))"><el-option v-if="form.data.bookingAgentId && !bookingAgents.some((partner) => String(partner.id) === String(form.data.bookingAgentId))" :label="form.data.bookingAgentName || '订舱代理名称缺失'" :value="String(form.data.bookingAgentId)" /><el-option v-for="partner in bookingAgents" :key="String(partner.id)" :label="partner.partnerName" :value="String(partner.id)" /></el-select></el-form-item>
             </div>
           </section>
           <section class="booking-group" aria-label="航线船期">
-            <h3>航线船期</h3><div class="booking-group__body">
+            <h3>航线船期</h3><div class="booking-group__body booking-group__body--fields">
             <el-form-item label="船名"><el-input v-model="form.data.vesselName" placeholder="请输入船名" /></el-form-item>
             <el-form-item label="航次"><el-input v-model="form.data.voyageNo" placeholder="请输入航次" /></el-form-item>
             <el-form-item label="起运港代码"><el-input v-model="form.data.departurePortCode" placeholder="例如：CNNGB" /></el-form-item>
             <el-form-item label="起运港"><el-input v-model="form.data.departurePortName" placeholder="例如：宁波港" /></el-form-item>
             <el-form-item label="目的港代码"><el-input v-model="form.data.destinationPortCode" placeholder="例如：USLAX" /></el-form-item>
             <el-form-item label="目的港"><el-input v-model="form.data.destinationPortName" placeholder="例如：洛杉矶港" /></el-form-item>
-            <el-form-item label="交货地点"><el-input v-model="form.data.placeOfDelivery" placeholder="请输入最终交货地点" /></el-form-item>
+            <el-form-item class="booking-field--wide" label="交货地点"><el-input v-model="form.data.placeOfDelivery" placeholder="请输入最终交货地点" /></el-form-item>
             <el-form-item label="预计开船"><el-date-picker v-model="form.data.estimatedSailingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计开船时间" style="width:100%" /></el-form-item>
             <el-form-item label="预计到港"><el-date-picker v-model="form.data.estimatedArrivalAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计到港时间" style="width:100%" /></el-form-item>
             </div>
@@ -336,15 +372,27 @@ onMounted(() => { void load(); void loadOptions() })
             <h3>条款与柜量</h3><div class="booking-group__body">
             <el-form-item label="服务条款"><el-input v-model="form.data.serviceTerm" placeholder="例如：CY-CY" /></el-form-item>
             <el-form-item label="运费条款"><el-input v-model="form.data.freightTerm" placeholder="例如：PREPAID" /></el-form-item>
-            <div v-for="(container, index) in form.data.containerRequirements" :key="index" class="container-row">
-              <el-input v-model="container.containerType" :disabled="!editable" placeholder="箱型，如 40HC" />
-              <el-input v-model="container.containerKind" :disabled="!editable" placeholder="类型，如 FCL" />
-              <el-input-number v-model="container.capacityCbm" :disabled="!editable" :min="0.01" :precision="2" placeholder="体积 m³" />
-              <el-input-number v-model="container.maxWeightKg" :disabled="!editable" :min="0.01" :precision="2" placeholder="限重 kg" />
-              <el-input-number v-model="container.quantity" :disabled="!editable" :min="1" :max="999" />
-              <el-button v-if="editable" type="danger" plain :disabled="form.data.containerRequirements.length === 1" @click="removeContainer(index)"><Trash2 :size="15" />删除</el-button>
+            <div class="container-table-wrap" aria-label="箱型箱量">
+              <table class="container-table">
+                <thead><tr><th scope="col">操作</th><th scope="col">箱型</th><th scope="col">箱种</th><th scope="col">容量（m³）</th><th scope="col">限重（kg）</th><th scope="col">数量</th></tr></thead>
+                <tbody>
+                  <tr v-for="(container, index) in form.data.containerRequirements" :key="index">
+                    <td class="container-table__action">
+                      <el-tooltip v-if="editable" :content="form.data.containerRequirements.length === 1 ? '至少保留一条箱型' : '删除该箱型'" placement="top">
+                        <span><el-button circle plain size="small" type="danger" :aria-label="`删除箱型 ${index + 1}`" :disabled="form.data.containerRequirements.length === 1" @click="removeContainer(index)"><Trash2 :size="14" /></el-button></span>
+                      </el-tooltip>
+                      <span v-else aria-hidden="true">—</span>
+                    </td>
+                    <td><el-input v-model="container.containerType" :disabled="!editable" placeholder="如 40HC" /></td>
+                    <td><el-input v-model="container.containerKind" :disabled="!editable" placeholder="如 FCL" /></td>
+                    <td><el-input-number v-model="container.capacityCbm" :disabled="!editable" :min="0.01" :precision="2" :controls="false" placeholder="请输入容量" /></td>
+                    <td><el-input-number v-model="container.maxWeightKg" :disabled="!editable" :min="0.01" :precision="2" :controls="false" placeholder="请输入限重" /></td>
+                    <td><el-input-number v-model="container.quantity" :disabled="!editable" :min="1" :max="999" :controls="false" placeholder="请输入数量" /></td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
-            <el-button v-if="editable" class="add-container" @click="addContainer"><Plus :size="16" />新增箱型</el-button>
+            <el-button v-if="editable" class="add-container" size="small" @click="addContainer"><Plus :size="15" />新增箱型</el-button>
             <el-form-item label="备注"><el-input v-model="form.data.remark" type="textarea" :rows="3" placeholder="请输入订舱备注（可选）" /></el-form-item>
             </div>
           </section>
@@ -396,5 +444,6 @@ onMounted(() => { void load(); void loadOptions() })
 </template>
 
 <style scoped>
-.booking-detail{min-width:0}.detail-heading{display:flex;min-width:0;align-items:flex-start;gap:16px}.booking-page-toolbar{min-width:0;flex:1}.section-title p,.history-panel p{margin:5px 0 0;color:var(--cc-muted);font-size:13px}.heading-status{display:flex;align-items:center;gap:8px}.surface-panel{padding:20px}.surface-panel h2{margin:0;font-size:16px}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}.actions{display:flex;flex-wrap:wrap;gap:8px}.booking-groups{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:16px}.booking-group{min-width:0;overflow:hidden;border:1px solid #e8edf3;border-radius:8px;background:#fff}.booking-group>h3{margin:0;padding:14px 16px;border-bottom:1px solid #eef2f6;color:#1f2937;font-size:14px}.booking-group__body{padding:16px}.party-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.subsection{display:grid;gap:10px;padding:14px;border:1px solid var(--cc-border);border-radius:6px}.subsection h3{margin:0;font-size:14px}.container-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 110px auto;gap:8px;margin-bottom:10px}.add-container{width:100%;margin-bottom:18px}.history-panel strong{font-size:14px}@media(max-width:1199px){.booking-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-group:last-child{grid-column:1/-1}}@media(max-width:720px){.booking-groups,.party-grid{grid-template-columns:1fr}.booking-group:last-child{grid-column:auto}.container-row{grid-template-columns:1fr 1fr}.detail-heading{flex-direction:column}.booking-page-toolbar{width:100%}.section-title{flex-direction:column}.actions{width:100%}}@media(max-width:420px){.surface-panel{padding:12px}.booking-group__body{padding:14px}.container-row{grid-template-columns:1fr}.actions :deep(.el-button){min-height:44px}}
+.channel-code{display:block;margin-left:8px;color:var(--cc-muted);font-size:11px}.field-error,.field-hint{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;color:var(--cc-muted);font-size:12px;line-height:20px}.field-error{color:var(--el-color-danger)}
+.booking-detail{min-width:0}.detail-heading{display:flex;min-width:0;align-items:flex-start;gap:16px}.booking-page-toolbar{min-width:0;flex:1}.section-title p,.history-panel p{margin:5px 0 0;color:var(--cc-muted);font-size:13px}.heading-status{display:flex;align-items:center;gap:8px}.surface-panel{padding:20px}.surface-panel h2{margin:0;font-size:16px}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}.actions{display:flex;flex-wrap:wrap;gap:8px}.booking-groups{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:16px}.booking-group{min-width:0;overflow:hidden;border:1px solid #e8edf3;border-radius:8px;background:#fff}.booking-group>h3{margin:0;padding:14px 16px;border-bottom:1px solid #eef2f6;color:#1f2937;font-size:14px}.booking-group__body{padding:16px}.booking-group__body--fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}.booking-field--wide{grid-column:1/-1}.party-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.subsection{display:grid;gap:10px;padding:14px;border:1px solid var(--cc-border);border-radius:6px}.subsection h3{margin:0;font-size:14px}.container-table-wrap{overflow-x:auto;margin-bottom:10px}.container-table{width:100%;min-width:580px;table-layout:fixed;border-collapse:collapse;font-size:12px}.container-table th,.container-table td{padding:7px 6px;border-bottom:1px solid #eef2f6;text-align:left;vertical-align:middle}.container-table th{background:#fafafa;color:var(--cc-muted);font-weight:650;white-space:nowrap}.container-table th:first-child,.container-table td:first-child{width:56px}.container-table th:nth-child(2),.container-table td:nth-child(2){width:112px}.container-table th:nth-child(3),.container-table td:nth-child(3){width:88px}.container-table th:nth-child(4),.container-table td:nth-child(4),.container-table th:nth-child(5),.container-table td:nth-child(5){width:118px}.container-table th:nth-child(6),.container-table td:nth-child(6){width:78px}.container-table td :deep(.el-input),.container-table td :deep(.el-input-number){width:100%;min-width:0}.container-table__action{text-align:center!important}.container-table__action :deep(.el-button){width:28px;height:28px}.add-container{margin-bottom:18px}.history-panel strong{font-size:14px}@media(max-width:1599px){.booking-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-group:last-child{grid-column:1/-1}}@media(max-width:720px){.booking-groups,.party-grid{grid-template-columns:1fr}.booking-group:last-child{grid-column:auto}.detail-heading{flex-direction:column}.booking-page-toolbar{width:100%}.section-title{flex-direction:column}.actions{width:100%}}@media(max-width:520px){.booking-group__body--fields{grid-template-columns:1fr}.booking-field--wide{grid-column:auto}}@media(max-width:420px){.surface-panel{padding:12px}.booking-group__body{padding:14px}.actions :deep(.el-button){min-height:44px}}
 </style>

src/modules/ocean-bookings/types.ts

@@ -5,7 +5,7 @@ export interface OceanBookingContainer { id?: string; containerType: string; qua
 export interface OceanBookingContainerAllocation extends OceanBookingContainer { allocatedQuantity?: number | null }
 export interface OceanBookingDraftData {
   customerId: string; customerName: string; parties: OceanBookingParty[]; containerRequirements: OceanBookingContainer[]
-  channelCode: string; channelName: string; warehouseId: string; warehouseName: string
+  channelCode: string; warehouseId: string; warehouseName: string
   billOfLadingNo?: string | null
   shippingCompanyId?: string | null; shippingCompanyName?: string | null; bookingAgentId?: string | null; bookingAgentName?: string | null
   departurePortCode?: string | null; departurePortName?: string | null; destinationPortCode?: string | null; destinationPortName?: string | null

src/shared/api/http.test.ts

@@ -66,6 +66,25 @@ describe('API error diagnostics', () => {
     }
   })
 
+  it('preserves a backend credential error for an explicit login request', () => {
+    const error = new ApiResponseError(
+      '用户名或密码错误',
+      'A0401',
+      undefined,
+      null,
+      'request-login',
+      'trace-login',
+    )
+
+    expect(getApiErrorDetails(error, '登录失败', { preserveAuthenticationMessage: true })).toEqual({
+      message: '用户名或密码错误',
+      code: 'A0401',
+      requestId: 'request-login',
+      traceId: 'trace-login',
+    })
+    expect(getApiErrorDetails(error).message).toBe('登录状态已失效，请重新登录')
+  })
+
   it('extracts identifiers from an HTTP error envelope', () => {
     const error = new axios.AxiosError('Request failed', 'ERR_BAD_RESPONSE', undefined, undefined, {
       status: 503,

src/shared/api/http.ts

@@ -35,6 +35,10 @@ export interface ApiErrorDetails {
   traceId?: string
 }
 
+export interface ApiErrorDetailsOptions {
+  preserveAuthenticationMessage?: boolean
+}
+
 export const http = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
   timeout: 15_000,
@@ -113,9 +117,13 @@ export function unwrapApiResponse<T>(response: ApiEnvelope<T>): T {
   return response.data
 }
 
-export function getApiErrorDetails(error: unknown, fallback = '接口请求失败'): ApiErrorDetails {
+export function getApiErrorDetails(
+  error: unknown,
+  fallback = '接口请求失败',
+  options: ApiErrorDetailsOptions = {},
+): ApiErrorDetails {
   if (error instanceof ApiResponseError) {
-    const message = error.code === 'A0401'
+    const message = error.code === 'A0401' && !options.preserveAuthenticationMessage
       ? '登录状态已失效，请重新登录'
       : error.code === 'A0403'
         ? '当前账号无权访问该数据，请联系管理员确认权限'