优化

2026-08-12 16:31:46 +08:00
parent c15d21b986
commit d8bbfe05f3
40 changed files with 1541 additions and 248 deletions
@@ -1,7 +1,6 @@
 import type { Component } from 'vue'
 import {
  Building2,
-  BarChart3,
  ContactRound,
  ClipboardList,
  CircleDollarSign,
@@ -15,6 +14,21 @@ import {
  Users,
  Warehouse as WarehouseIcon,
 } from '@lucide/vue'
+import {
+  PrototypeContainerIcon,
+  PrototypeCustomerIcon,
+  PrototypeDashboardIcon,
+  PrototypeDeliveryIcon,
+  PrototypeDomesticWarehouseIcon,
+  PrototypeFinanceIcon,
+  PrototypeGeneralIcon,
+  PrototypeOverseasBusinessIcon,
+  PrototypeOverseasWarehouseIcon,
+  PrototypeSalesIcon,
+  PrototypeServiceIcon,
+  PrototypeSupplierIcon,
+  PrototypeSystemIcon,
+} from './prototypeMenuIcons'

 export interface AdminNavigationNode {
  key: string
@@ -36,12 +50,11 @@ export interface AdminNavigationLeaf extends AdminNavigationNode {
 }

 export const adminNavigation: AdminNavigationNode[] = [
-  { key: 'dashboard', title: '首页数据看板', icon: BarChart3, path: '/dashboard' },
+  { key: 'dashboard', title: '首页数据看板', icon: PrototypeDashboardIcon, path: '/dashboard' },
  {
    key: 'customers',
    title: '客户管理',
-    icon: Building2,
-    iconColor: '#52c41a',
+    icon: PrototypeCustomerIcon,
    children: [
      { key: 'customers-list', title: '客户列表', icon: Building2, path: '/customers', permission: 'platform:customer:list', permissionAnyOf: ['platform:customer:review'] },
      { key: 'warehouse-tier-fee', title: '海外仓阶梯费用', icon: Building2, path: '/customers/overseas-storage-fees', permission: 'platform:overseas-storage-fee:list' },
@@ -50,8 +63,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'domestic-warehouse',
    title: '国内仓',
-    icon: WarehouseIcon,
-    iconColor: '#52c41a',
+    icon: PrototypeDomesticWarehouseIcon,
    children: [
      { key: 'order-list', title: '订单列表', icon: ClipboardList, path: '/orders', permission: 'platform:order:list', permissionAnyOf: ['platform:firstleg:inbound:list'] },
      { key: 'inbound-dedup', title: '订单测量', icon: ClipboardList, path: '/prototype/domestic-warehouse/inbound-dedup', hidden: true },
@@ -63,7 +75,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'overseas-delivery',
    title: '海外派送',
-    icon: Truck,
+    icon: PrototypeDeliveryIcon,
    hidden: true,
    children: [
      { key: 'outbound-dispatch', title: '派送单列表', icon: Truck, path: '/prototype/overseas-delivery/dispatch-list' },
@@ -75,7 +87,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'service-center',
    title: '服务中心',
-    icon: ClipboardList,
+    icon: PrototypeServiceIcon,
    children: [
      { key: 'booking-list', title: '订舱列表', icon: ClipboardList, path: '/ocean-bookings', permission: 'platform:firstleg:ocean-booking:list' },
      { key: 'port-schedules', title: '船期信息', icon: ClipboardList, path: '/port-schedules', permission: 'platform:firstleg:port-schedule:list' },
@@ -87,7 +99,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'supplier-center',
    title: '供应商中心',
-    icon: ContactRound,
+    icon: PrototypeSupplierIcon,
    children: [
      { key: 'supplier-list', title: '供应商列表', icon: ContactRound, path: '/prototype/supplier-center/supplier-list', hidden: true },
      { key: 'express-companies', title: '快递公司', icon: Truck, path: '/master-data/express-companies', permission: 'platform:express:list' },
@@ -97,7 +109,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'container-management',
    title: '货柜管理',
-    icon: WarehouseIcon,
+    icon: PrototypeContainerIcon,
    children: [
      { key: 'container-list', title: '货柜列表', icon: WarehouseIcon, path: '/container-loading', permission: 'platform:firstleg:container:list' },
      { key: 'container-smart-loading', title: '智能装柜', icon: ClipboardList, path: '/container-loading/smart-loading', permission: 'platform:firstleg:smart-loading:list' },
@@ -108,7 +120,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'overseas-business',
    title: '海外业务',
-    icon: Building2,
+    icon: PrototypeOverseasBusinessIcon,
    hidden: true,
    children: [
      { key: 'overseas-purchase', title: '采购订单', icon: ClipboardList, path: '/prototype/overseas-business/purchase-orders' },
@@ -119,7 +131,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'overseas-inventory',
    title: '海外仓库存',
-    icon: WarehouseIcon,
+    icon: PrototypeOverseasWarehouseIcon,
    hidden: true,
    children: [
      { key: 'fba-inbound-order', title: '入库单', icon: ClipboardList, path: '/prototype/fba-returns/inbound-orders' },
@@ -135,7 +147,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'finance',
    title: '财务管理',
-    icon: CircleDollarSign,
+    icon: PrototypeFinanceIcon,
    children: [
      { key: 'finance-customer-accounts', title: '客户账户', icon: CircleDollarSign, path: '/finance/customer-accounts', permission: 'platform:finance:account:view' },
      { key: 'finance-customer-arap', title: '客户应收应付', icon: Database, path: '/finance/customer-arap', permission: 'platform:finance:bill:view' },
@@ -147,7 +159,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'sales',
    title: '销售管理',
-    icon: Users,
+    icon: PrototypeSalesIcon,
    hidden: true,
    children: [
      { key: 'sales-visits', title: '拜访记录', icon: Users, path: '/prototype/sales/visit-records' },
@@ -157,8 +169,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'general',
    title: '通用',
-    icon: Database,
-    iconColor: '#722ed1',
+    icon: PrototypeGeneralIcon,
    children: [
      // { key: 'first-leg-orders', title: '头程订单', icon: ClipboardList, path: '/orders/first-leg', permission: 'platform:order:list', hidden: true },
      { key: 'general-product', title: '产品信息', icon: Database, path: '/prototype/general/product-information', hidden: true },
@@ -172,8 +183,7 @@ export const adminNavigation: AdminNavigationNode[] = [
  {
    key: 'system',
    title: '系统管理',
-    icon: Settings,
-    iconColor: '#8c8c8c',
+    icon: PrototypeSystemIcon,
    children: [
      { key: 'internal-users', title: '用户管理', icon: Users, path: '/system/users', permission: 'platform:user:list' },
      { key: 'roles', title: '角色权限', icon: ShieldCheck, path: '/system/roles', permission: 'platform:role:list' },
@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import {
+  PrototypeCustomerIcon,
+  PrototypeDashboardIcon,
+  PrototypeFinanceIcon,
+} from './prototypeMenuIcons'
+
+describe('prototype menu icons', () => {
+  it('renders the prototype shapes at the requested size', () => {
+    const wrapper = mount(PrototypeDashboardIcon, { props: { size: 22 } })
+
+    expect(wrapper.attributes()).toMatchObject({
+      width: '22',
+      height: '22',
+      viewBox: '0 0 24 24',
+      'aria-hidden': 'true',
+    })
+    expect(wrapper.findAll('rect')).toHaveLength(4)
+    expect(wrapper.findAll('rect').map((node) => node.attributes('fill'))).toEqual([
+      '#1677ff',
+      '#1677ff',
+      '#1677ff',
+      '#1677ff',
+    ])
+  })
+
+  it('preserves the original menu colors', () => {
+    expect(mount(PrototypeCustomerIcon).find('path').attributes('fill')).toBe('#52c41a')
+    expect(mount(PrototypeFinanceIcon).find('circle').attributes('stroke')).toBe('#f5a623')
+  })
+})
@@ -0,0 +1,90 @@
+import { defineComponent, h, type Component, type SVGAttributes } from 'vue'
+
+type SvgChild = ReturnType<typeof h>
+
+function createPrototypeMenuIcon(name: string, children: SvgChild[]): Component {
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    props: {
+      size: { type: [Number, String], default: 20 },
+    },
+    setup(props, { attrs }) {
+      return () => h('svg', {
+        ...attrs,
+        width: props.size,
+        height: props.size,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        'aria-hidden': 'true',
+      } satisfies SVGAttributes, children)
+    },
+  })
+}
+
+export const PrototypeDashboardIcon = createPrototypeMenuIcon('PrototypeDashboardIcon', [
+  h('rect', { x: 3, y: 3, width: 7, height: 8, rx: 1.5, fill: '#1677ff' }),
+  h('rect', { x: 14, y: 3, width: 7, height: 5, rx: 1.5, fill: '#1677ff', opacity: 0.6 }),
+  h('rect', { x: 3, y: 14, width: 7, height: 7, rx: 1.5, fill: '#1677ff', opacity: 0.3 }),
+  h('rect', { x: 14, y: 11, width: 7, height: 10, rx: 1.5, fill: '#1677ff', opacity: 0.8 }),
+])
+
+export const PrototypeCustomerIcon = createPrototypeMenuIcon('PrototypeCustomerIcon', [
+  h('path', { d: 'M3 21h7v-7H3v7zm0-9h7V3H3v9zm11 9h7v-5h-7v5zm0-9h7V3h-7v9z', fill: '#52c41a' }),
+])
+
+export const PrototypeDomesticWarehouseIcon = createPrototypeMenuIcon('PrototypeDomesticWarehouseIcon', [
+  h('path', { d: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2', stroke: '#52c41a', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+  h('path', { d: 'M9 14l2 2 4-4', stroke: '#52c41a', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+])
+
+export const PrototypeOverseasWarehouseIcon = createPrototypeMenuIcon('PrototypeOverseasWarehouseIcon', [
+  h('path', { d: 'M4 12a8 8 0 112.34 5.6', stroke: '#eb2f96', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+  h('path', { d: 'M4 12V7M4 12h5', stroke: '#eb2f96', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+  h('circle', { cx: 12, cy: 12, r: 2.4, fill: '#eb2f96' }),
+])
+
+export const PrototypeDeliveryIcon = createPrototypeMenuIcon('PrototypeDeliveryIcon', [
+  h('path', { d: 'M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z', fill: '#1890ff' }),
+])
+
+export const PrototypeServiceIcon = createPrototypeMenuIcon('PrototypeServiceIcon', [
+  h('path', { d: 'M4 6h16v12H4z', stroke: '#722ed1', 'stroke-width': 2 }),
+  h('path', { d: 'M4 10h16M8 14h3', stroke: '#722ed1', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+])
+
+export const PrototypeSupplierIcon = createPrototypeMenuIcon('PrototypeSupplierIcon', [
+  h('path', { d: 'M3 21V9l9-6 9 6v12', stroke: '#eb2f96', 'stroke-width': 2, 'stroke-linejoin': 'round' }),
+  h('path', { d: 'M9 21v-6h6v6', stroke: '#eb2f96', 'stroke-width': 2, 'stroke-linejoin': 'round' }),
+])
+
+export const PrototypeContainerIcon = createPrototypeMenuIcon('PrototypeContainerIcon', [
+  h('rect', { x: 2, y: 3, width: 20, height: 18, rx: 1, stroke: '#52c41a', 'stroke-width': 2 }),
+  h('path', { d: 'M2 8h20M8 3v5M16 3v5', stroke: '#52c41a', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+])
+
+export const PrototypeOverseasBusinessIcon = createPrototypeMenuIcon('PrototypeOverseasBusinessIcon', [
+  h('circle', { cx: 12, cy: 12, r: 9, stroke: '#8c8c8c', 'stroke-width': 1.5 }),
+  h('path', { d: 'M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18', stroke: '#8c8c8c', 'stroke-width': 1.5, 'stroke-linecap': 'round' }),
+])
+
+export const PrototypeFinanceIcon = createPrototypeMenuIcon('PrototypeFinanceIcon', [
+  h('circle', { cx: 12, cy: 12, r: 10, stroke: '#f5a623', 'stroke-width': 2 }),
+  h('path', { d: 'M12 6v6l4 2', stroke: '#f5a623', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+  h('circle', { cx: 12, cy: 12, r: 2, fill: '#f5a623' }),
+])
+
+export const PrototypeSalesIcon = createPrototypeMenuIcon('PrototypeSalesIcon', [
+  h('circle', { cx: 12, cy: 12, r: 10, stroke: '#1677ff', 'stroke-width': 2 }),
+  h('path', { d: 'M12 6v12M6 12h12', stroke: '#1677ff', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+])
+
+export const PrototypeGeneralIcon = createPrototypeMenuIcon('PrototypeGeneralIcon', [
+  h('rect', { x: 3, y: 3, width: 18, height: 18, rx: 2, stroke: '#722ed1', 'stroke-width': 2 }),
+  h('path', { d: 'M8 12h8M12 8v8', stroke: '#722ed1', 'stroke-width': 2, 'stroke-linecap': 'round' }),
+])
+
+export const PrototypeSystemIcon = createPrototypeMenuIcon('PrototypeSystemIcon', [
+  h('circle', { cx: 12, cy: 12, r: 3, fill: '#8c8c8c' }),
+  h('path', { d: 'M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83', stroke: '#8c8c8c', 'stroke-width': 1.5, 'stroke-linecap': 'round' }),
+])
@@ -158,4 +158,26 @@ describe('ContainersView', () => {
    expect(source).toContain("if (nextPage !== previousPage || nextSize !== previousSize) void loadRows()")
    expect(source).not.toContain('@reset=')
  })
+
+  it('uses the frozen prototype modal contract for create and edit while retaining the detail drawer', () => {
+    const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/pages/ContainersView.vue'), 'utf8')
+    expect(source).toContain('<AppDrawer v-model="detailOpen"')
+    expect(source).toContain('<AppDialog v-model="editorOpen" class="container-editor-dialog"')
+    expect(source).toContain('width="min(820px, calc(100vw - 28px))"')
+    expect(source).toContain('max-height: 90vh')
+    expect(source).toContain('overflow-y: auto')
+    expect(source).toContain('grid-template-columns: minmax(0,1fr)')
+    expect(source).not.toContain('<AppDrawer v-model="editorOpen"')
+  })
+
+  it('keeps the prototype field sequence ahead of contract-only supplemental fields', () => {
+    const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/pages/ContainersView.vue'), 'utf8')
+    const labels = ['集装箱号', '柜号', '装柜仓库', '提单号', '船名', '航次', '箱型（货柜类型）', '船公司', '起运港', '目的港', '目的仓', '货柜容量（m³）']
+    let previous = -1
+    for (const label of labels) {
+      const current = source.indexOf(`label="${label}"`, previous + 1)
+      expect(current, label).toBeGreaterThan(previous)
+      previous = current
+    }
+  })
 })
@@ -9,6 +9,7 @@ import { listPlatformPartners, type PlatformPartnerResource } from '@/modules/ma
 import { listOceanBookings, type OceanBookingResource } from '@/modules/ocean-bookings'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
 import AppDrawer from '@/shared/components/AppDrawer.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
@@ -75,7 +76,7 @@ const canEdit = computed(() => access.can('platform:firstleg:container:edit'))
 const canSmartLoading = computed(() => access.can('platform:firstleg:smart-loading:list'))
 const canViewPreload = computed(() => access.can('platform:firstleg:preload:list'))
 const canViewLoadingList = computed(() => access.can('platform:firstleg:loading-list:list'))
-const editorTitle = computed(() => form.id ? (detail.value?.planStatus === 'LOADING' ? '修改运输信息' : '编辑货柜') : '新增货柜')
+const editorTitle = computed(() => form.id ? '编辑' : '新增')
 const transportOnly = computed(() => Boolean(form.id) && detail.value?.planStatus === 'LOADING')
 const shippingCompanies = computed(() => partners.value.filter((partner) => partner.status === 'ACTIVE' && partner.types.includes('CARRIER')))
 const truckingCompanies = computed(() => partners.value.filter((partner) => partner.status === 'ACTIVE' && partner.types.some((type) => ['CARRIER', 'SUPPLIER'].includes(type))))
@@ -341,35 +342,41 @@ onMounted(() => { void Promise.all([loadWarehouses(), loadBusinessOptions(), loa
      <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-disabled="Boolean(warehouseError && !transportOnly)" confirm-text="保存" @confirm="save">
+    <AppDialog v-model="editorOpen" class="container-editor-dialog" :title="editorTitle" width="min(820px, calc(100vw - 28px))" :confirm-loading="saving" :confirm-disabled="Boolean(warehouseError && !transportOnly)" confirm-text="确定" cancel-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" />
      <LoadErrorState v-if="warehouseError && !transportOnly" title="装柜仓库加载失败" :message="warehouseError.message" compact @retry="loadWarehouses"><template #details><ApiErrorMeta :details="warehouseError" /></template></LoadErrorState>
      <el-alert v-if="businessOptionsError && !transportOnly" type="warning" :closable="false" show-icon :title="businessOptionsError"><el-button link type="warning" :loading="businessOptionsLoading" @click="loadBusinessOptions">重新加载业务选项</el-button></el-alert>
      <el-form v-if="!warehouseError || transportOnly" 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" placeholder="请输入柜次号" :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="cabinetNo"><el-input v-model="form.cabinetNo" maxlength="64" placeholder="请输入柜号" :disabled="transportOnly" /></el-form-item>
        <el-form-item label="装柜仓库" prop="warehouseId"><el-select v-model="form.warehouseId" filterable placeholder="请选择装柜仓库" :loading="warehouseLoading" loading-text="仓库加载中" no-data-text="暂无可用国内仓库" :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" placeholder="请选择柜型" :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" placeholder="请输入容量上限" :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" placeholder="请输入重量上限" :disabled="transportOnly" /></el-form-item>
        <el-form-item label="提单号"><el-input v-model="form.billOfLadingNo" maxlength="128" placeholder="请输入提单号（可选）" :disabled="transportOnly" /></el-form-item>
-        <el-form-item label="船公司"><el-select :model-value="shippingCompanyValue" filterable clearable placeholder="请选择船公司" :loading="businessOptionsLoading" loading-text="船公司加载中" no-data-text="暂无可用船公司" :disabled="transportOnly" @update:model-value="selectShippingCompany(String($event || ''))"><el-option v-if="shippingCompanyValue && !shippingCompanies.some((partner) => String(partner.id) === shippingCompanyValue)" :label="form.shippingCompanyName || '原船公司'" :value="shippingCompanyValue" /><el-option v-for="partner in shippingCompanies" :key="String(partner.id)" :label="partnerLabel(partner)" :value="String(partner.id)" /></el-select></el-form-item>
        <el-form-item label="船名"><el-input v-model="form.vesselName" maxlength="128" placeholder="请输入船名" :disabled="transportOnly" /></el-form-item>
        <el-form-item label="航次"><el-input v-model="form.voyageNo" maxlength="64" placeholder="请输入航次" /></el-form-item>
+        <el-form-item label="箱型（货柜类型）" prop="containerType"><el-select v-model="form.containerType" placeholder="请选择箱型" :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="船公司"><el-select :model-value="shippingCompanyValue" filterable clearable placeholder="请选择船公司" :loading="businessOptionsLoading" loading-text="船公司加载中" no-data-text="暂无可用船公司" :disabled="transportOnly" @update:model-value="selectShippingCompany(String($event || ''))"><el-option v-if="shippingCompanyValue && !shippingCompanies.some((partner) => String(partner.id) === shippingCompanyValue)" :label="form.shippingCompanyName || '原船公司'" :value="shippingCompanyValue" /><el-option v-for="partner in shippingCompanies" :key="String(partner.id)" :label="partnerLabel(partner)" :value="String(partner.id)" /></el-select></el-form-item>
        <el-form-item label="起运港"><el-select :model-value="departurePortValue" filterable clearable placeholder="请选择起运港" :loading="businessOptionsLoading" loading-text="港口加载中" no-data-text="暂无订舱港口数据" :disabled="transportOnly" @update:model-value="selectPort('departure', String($event || ''))"><el-option v-for="port in departurePorts" :key="port.value" :label="portLabel(port)" :value="port.value" /></el-select></el-form-item>
        <el-form-item label="目的港"><el-select :model-value="destinationPortValue" filterable clearable placeholder="请选择目的港" :loading="businessOptionsLoading" loading-text="港口加载中" no-data-text="暂无订舱港口数据" :disabled="transportOnly" @update:model-value="selectPort('destination', String($event || ''))"><el-option v-for="port in destinationPorts" :key="port.value" :label="portLabel(port)" :value="port.value" /></el-select></el-form-item>
        <el-form-item label="目的仓"><el-select :model-value="destinationWarehouseValue" filterable clearable placeholder="请选择目的仓" :loading="warehouseLoading" loading-text="目的仓加载中" no-data-text="暂无可用海外/FBA仓库" :disabled="transportOnly" @update:model-value="selectDestinationWarehouse(String($event || ''))"><el-option v-if="destinationWarehouseValue && !destinationWarehouses.some((warehouse) => warehouse.warehouseCode === destinationWarehouseValue)" :label="form.destinationWarehouseName || form.destinationWarehouseCode || '原目的仓'" :value="destinationWarehouseValue" /><el-option v-for="warehouse in destinationWarehouses" :key="String(warehouse.id)" :label="`${warehouse.warehouseName}（${warehouse.warehouseCode}）`" :value="warehouse.warehouseCode" /></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" placeholder="请输入货柜容量" :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" placeholder="请输入重量上限" :disabled="transportOnly" /></el-form-item>
        <el-form-item label="拖车公司"><el-select v-model="form.terminalTruckingCompany" filterable clearable allow-create default-first-option placeholder="请选择或输入拖车公司" :loading="businessOptionsLoading" loading-text="拖车公司加载中" no-data-text="暂无合作单位，可直接输入" :disabled="transportOnly"><el-option v-for="partner in truckingCompanies" :key="String(partner.id)" :label="partnerLabel(partner)" :value="partner.partnerName" /></el-select></el-form-item>
        <el-form-item label="计划装柜时间"><el-date-picker v-model="form.loadingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择计划装柜时间" :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" placeholder="请选择预计开船时间" :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" placeholder="请选择预计到港时间" :disabled="transportOnly" /></el-form-item>
      </el-form>
-    </AppDrawer>
+    </AppDialog>
    </section>
  </AdminPage>
 </template>

 <style scoped>
-.container-page { display: grid; gap: 16px; min-width: 0; }.container-page small { 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){.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; }}
+.container-page { display: grid; gap: 16px; min-width: 0; }.container-page small { 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: minmax(0,1fr); gap: 0; }.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; }
+:global(.container-editor-dialog.el-dialog) { display: flex; width: min(820px, calc(100vw - 28px)) !important; max-height: 90vh; margin-block: 5vh !important; overflow: hidden; flex-direction: column; border-radius: 12px; }
+:global(.container-editor-dialog .el-dialog__header) { flex: 0 0 auto; margin: 0; padding: 20px 28px; border-bottom: 1px solid #e5eaf1; }
+:global(.container-editor-dialog .el-dialog__title) { color: #1e293b; font-size: 18px; font-weight: 700; }
+:global(.container-editor-dialog .el-dialog__body) { min-height: 0; padding: 28px; overflow-y: auto; }
+:global(.container-editor-dialog .el-dialog__footer) { flex: 0 0 auto; padding: 16px 28px; border-top: 1px solid #e5eaf1; background: #f8fafc; }
+@media(max-width:720px){:global(.container-editor-dialog.el-dialog){max-height:calc(100vh - 20px);margin-block:10px!important}:global(.container-editor-dialog .el-dialog__header),:global(.container-editor-dialog .el-dialog__body),:global(.container-editor-dialog .el-dialog__footer){padding-inline:16px}.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>
@@ -1,5 +1,7 @@
 import ElementPlus from 'element-plus'
 import { createPinia, setActivePinia } from 'pinia'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
@@ -26,6 +28,8 @@ import QueryToolbar from '@/shared/components/QueryToolbar.vue'
 import { showExportTaskCreatedDialog } from '@/shared/components/exportTaskCreatedDialog'
 import CustomersView from './CustomersView.vue'

+const customersSource = readFileSync(resolve(process.cwd(), 'src/modules/customers/pages/CustomersView.vue'), 'utf8')
+
 const { routerPush, routerReplace, routeControl } = vi.hoisted(() => ({
  routerPush: vi.fn(),
  routerReplace: vi.fn(),
@@ -152,6 +156,15 @@ describe('CustomersView', () => {
    vi.mocked(showExportTaskCreatedDialog).mockResolvedValue(false)
  })

+  it('matches the frozen prototype containers for customer operations', () => {
+    expect(customersSource).toContain("router.push({ name: 'customer-detail'")
+    expect(customersSource).toContain("'min(640px, calc(100vw - 28px))'")
+    expect(customersSource).toContain("'min(680px, calc(100vw - 28px))'")
+    expect(customersSource).toContain('width="min(520px, calc(100vw - 28px))" class="customer-password-dialog"')
+    expect(customersSource).toContain('width="min(900px, calc(100vw - 28px))" class="review-decision-dialog"')
+    expect(customersSource).not.toContain('<AppDrawer v-model="editorOpen"')
+  })
+
  it('loads the complete customer detail before editing masked list fields', async () => {
    mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
    await flushPromises()
@@ -368,7 +381,7 @@ describe('CustomersView', () => {
    tableButtonByText('审核')?.click()
    await flushPromises()
    ;[...document.querySelectorAll<HTMLButtonElement>('button')]
-      .find((button) => button.textContent?.trim() === '确认通过')?.click()
+      .find((button) => button.textContent?.trim() === '审核通过')?.click()
    await flushPromises()

    expect(approveEnterpriseReview).toHaveBeenCalledWith(pendingReview.id, '企业资料与必填资质完整、清晰，审核通过')
@@ -398,7 +411,7 @@ describe('CustomersView', () => {
    tableButtonByText('审核')?.click()
    await flushPromises()
    ;[...document.querySelectorAll<HTMLButtonElement>('button')]
-      .find((button) => button.textContent?.trim() === '确认通过')?.click()
+      .find((button) => button.textContent?.trim() === '审核通过')?.click()
    await flushPromises()

    expect(approveEnterpriseReview).toHaveBeenCalledWith(pendingReview.id, '企业资料与必填资质完整、清晰，审核通过')
@@ -39,7 +39,6 @@ import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.v
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
 import FormSection from '@/shared/components/FormSection.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -204,6 +203,9 @@ let loadSequence = 0
 let reviewLoadSequence = 0
 let editorLoadSequence = 0
 const editorTitle = computed(() => editingId.value ? '编辑客户' : '新增客户')
+const editorDialogWidth = computed(() => editingId.value
+  ? 'min(640px, calc(100vw - 28px))'
+  : 'min(680px, calc(100vw - 28px))')
 const canUploadQualifications = computed(() => !editorStatus.value || ['PROFILE_REQUIRED', 'REJECTED'].includes(editorStatus.value))
 const canSubmitReview = computed(() => Boolean(editingId.value) && ['PROFILE_REQUIRED', 'REJECTED'].includes(editorStatus.value || ''))
 const uploadingQualifications = computed(() => qualifications.value.some((item) => item.uploading))
@@ -963,7 +965,7 @@ onMounted(() => { void loadCustomers() })
      </section>
    </ListPageLayout>

-    <AppDrawer v-model="editorOpen" :title="editorTitle" size="760px" class="business-drawer customer-editor">
+    <AppDialog v-model="editorOpen" :title="editorTitle" :width="editorDialogWidth" class="customer-editor-dialog" :loading="editorLoading" :confirm-loading="saving" destroy-on-close>
      <el-form ref="formRef" v-loading="editorLoading" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="editorLoading || saving || submitting || uploadingQualifications">
        <FormSection title="基础资料" description="维护工商登记和企业主体信息。"><div class="form-grid two-cols">
          <el-form-item label="公司名称" prop="tenantName" required><el-input v-model="form.tenantName" placeholder="请输入工商登记公司名称" maxlength="128" /></el-form-item>
@@ -1006,7 +1008,7 @@ onMounted(() => { void loadCustomers() })
        </FormSection>
      </el-form>
      <template #footer><div class="customer-editor-footer"><span>保存资料时会一并上传已选资质；进入审核仍需点击“提交审核”并再次确认</span><div><el-button :disabled="editorLoading || saving || submitting || uploadingQualifications" @click="editorOpen = false">关闭</el-button><el-button :loading="saving" :disabled="editorLoading || submitting || uploadingQualifications" @click="saveCustomer"><Save :size="16" />保存资料和资质</el-button><el-button v-if="canSubmitReview" type="primary" :loading="submitting" :disabled="editorLoading || saving || uploadingQualifications" @click="submitReview">提交审核</el-button></div></div></template>
-    </AppDrawer>
+    </AppDialog>

    <AppDialog v-model="qualificationPreviewOpen" :title="qualificationPreviewName || '查看资质文件'" width="min(860px, calc(100vw - 28px))" class="qualification-preview-dialog" destroy-on-close :show-confirm="false" cancel-text="关闭预览">
      <div class="qualification-preview">
@@ -1026,16 +1028,35 @@ onMounted(() => { void loadCustomers() })
      <template #footer><el-button type="primary" @click="closeApprovalResult">我已保存，关闭</el-button></template>
    </el-dialog>

-    <el-dialog v-model="decisionOpen" :title="decision.type === 'approve' ? '确认审核通过' : '确认驳回企业资料'" width="min(520px, calc(100vw - 28px))" class="review-decision-dialog" :close-on-click-modal="false">
-      <div v-if="selectedReview" class="decision-summary"><strong>{{ selectedReview.tenantName || '当前客户' }}</strong><span>客户资料审核</span></div>
+    <el-dialog v-model="decisionOpen" title="客户入驻审核" width="min(900px, calc(100vw - 28px))" class="review-decision-dialog" :close-on-click-modal="false">
+      <div v-if="selectedReview" class="review-dialog-grid">
+        <section class="review-dialog-section">
+          <h3>企业基本信息</h3>
+          <dl class="review-info-grid">
+            <div><dt>客户名称</dt><dd>{{ selectedReview.tenantName || '—' }}</dd></div>
+            <div><dt>客户编号</dt><dd>{{ selectedReview.tenantCode || '—' }}</dd></div>
+            <div><dt>联系人</dt><dd>{{ selectedReview.contactName || '—' }}</dd></div>
+            <div><dt>联系电话</dt><dd>{{ selectedReview.contactPhone || '—' }}</dd></div>
+            <div><dt>联系邮箱</dt><dd>{{ selectedReview.contactEmail || '—' }}</dd></div>
+            <div><dt>提交时间</dt><dd>{{ formatDate(selectedReview.submittedAt || selectedReview.createdAt) }}</dd></div>
+          </dl>
+        </section>
+        <section class="review-dialog-section">
+          <h3>资质文件</h3>
+          <div class="review-document-table" role="table" aria-label="待审核客户资质">
+            <div class="review-document-header" role="row"><span role="columnheader">文件类型</span><span role="columnheader">证书编号</span><span role="columnheader">状态</span></div>
+            <div class="review-document-row" role="row"><span role="cell">{{ selectedReview.qualificationType || '企业资质' }}</span><span role="cell">{{ selectedReview.certificateNo || '—' }}</span><span role="cell">待审核</span></div>
+          </div>
+        </section>
+      </div>
      <el-radio-group v-if="access.can('platform:customer:approve') && access.can('platform:customer:reject')" v-model="decision.type" class="decision-type" aria-label="审核决定"><el-radio-button label="approve">通过</el-radio-button><el-radio-button label="reject">驳回</el-radio-button></el-radio-group>
      <el-form ref="decisionFormRef" :model="decision" :rules="decisionRules" label-position="top">
-        <el-form-item prop="comment" :label="decision.type === 'approve' ? '审核说明' : '驳回原因'" required><el-input v-model="decision.comment" type="textarea" :rows="4" maxlength="300" show-word-limit :placeholder="decision.type === 'approve' ? '请填写审核通过说明' : '请明确说明需要企业修改的内容'" /></el-form-item>
+        <el-form-item prop="comment" :label="decision.type === 'approve' ? '审核意见' : '驳回原因'" required><el-input v-model="decision.comment" type="textarea" :rows="3" maxlength="300" show-word-limit :placeholder="decision.type === 'approve' ? '可填写审核意见' : '请明确说明需要企业修改的内容'" /></el-form-item>
      </el-form>
-      <template #footer><div class="drawer-footer"><el-button :disabled="reviewSubmitting" @click="decisionOpen = false">取消</el-button><el-button :type="decision.type === 'approve' ? 'success' : 'danger'" :loading="reviewSubmitting" @click="submitDecision">{{ decision.type === 'approve' ? '确认通过' : '确认驳回' }}</el-button></div></template>
+      <template #footer><div class="drawer-footer"><el-button :disabled="reviewSubmitting" @click="decisionOpen = false">返回</el-button><el-button v-if="access.can('platform:customer:reject') && decision.type === 'reject'" type="danger" :loading="reviewSubmitting" @click="submitDecision">确认驳回</el-button><el-button v-if="access.can('platform:customer:approve') && decision.type === 'approve'" type="primary" :loading="reviewSubmitting" @click="submitDecision">审核通过</el-button></div></template>
    </el-dialog>

-    <el-dialog v-model="passwordDialogOpen" title="重置客户密码" width="min(560px, calc(100vw - 28px))" :close-on-click-modal="false" :close-on-press-escape="!passwordSubmitting" :show-close="!passwordSubmitting">
+    <el-dialog v-model="passwordDialogOpen" title="重置客户密码" width="min(520px, calc(100vw - 28px))" class="customer-password-dialog" :close-on-click-modal="false" :close-on-press-escape="!passwordSubmitting" :show-close="!passwordSubmitting">
      <div v-if="passwordTenant" class="decision-summary"><div><strong>正在重置企业管理员登录密码</strong><span>{{ passwordTenant.tenantName }}</span></div><span>客户编号：{{ passwordTenant.tenantCode }}</span></div>
      <el-alert v-if="passwordError" type="error" :closable="false" show-icon role="alert"><template #title><div class="api-error-alert-title"><span>{{ passwordError.message }}</span><ApiErrorMeta :details="passwordError" /></div></template></el-alert>
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-position="top">
@@ -1115,12 +1136,29 @@ onMounted(() => { void loadCustomers() })
 .qualification-preview img { display:block; max-width:100%; height:auto; }
 .qualification-preview iframe { width:100%; min-height:min(68vh,720px); border:0; background:#fff; }
 .qualification-load-error { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid #fecdca; border-radius:6px; background:#fffafa; color:#b42318; font-size:12px; }
-.customer-editor :deep(.el-drawer__body) { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
-.customer-editor :deep(.el-drawer__footer) { flex:0 0 auto; }
+:global(.customer-editor-dialog.el-dialog) { display:flex; max-height:min(90vh,900px); flex-direction:column; }
+:global(.customer-editor-dialog .el-dialog__body) { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
+:global(.customer-editor-dialog .el-dialog__footer) { flex:0 0 auto; }
 .customer-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; } .customer-editor-footer > span { color:var(--cc-muted); font-size:12px; text-align:left; } .customer-editor-footer > div { display:flex; flex:0 0 auto; gap:8px; } .customer-editor-footer :deep(.el-button + .el-button) { margin-left:0; }
 .decision-summary { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding:12px 14px; border-radius:8px; background:#f8fafc; } .decision-summary > * { min-width:0; overflow-wrap:anywhere; } .decision-summary strong { color:var(--cc-text); font-size:13px; } .decision-summary span { color:var(--cc-muted); font-size:11px; }
+:global(.review-decision-dialog.el-dialog) { display:flex; max-height:min(90vh,820px); flex-direction:column; }
+:global(.review-decision-dialog .el-dialog__body) { min-height:0; overflow-y:auto; padding:20px 28px; }
+:global(.review-decision-dialog .el-dialog__footer) { flex:0 0 auto; }
+.review-dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:18px; }
+.review-dialog-section { min-width:0; }
+.review-dialog-section h3 { margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid #667eea; color:#1a1a2e; font-size:14px; font-weight:600; }
+.review-info-grid { display:grid; gap:7px; margin:0; }
+.review-info-grid > div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; }
+.review-info-grid dt { color:#64748b; font-size:12px; }
+.review-info-grid dd { min-width:0; margin:0; overflow-wrap:anywhere; color:#1e293b; font-size:13px; }
+.review-document-table { overflow:hidden; border:1px solid #e4e4e7; border-radius:6px; }
+.review-document-header,.review-document-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 76px; }
+.review-document-header { background:rgba(102,126,234,.08); color:#52525b; font-size:12px; font-weight:600; }
+.review-document-header > span,.review-document-row > span { min-width:0; padding:9px 10px; overflow-wrap:anywhere; border-right:1px solid #e4e4e7; }
+.review-document-header > span:last-child,.review-document-row > span:last-child { border-right:0; }
+.review-document-row { border-top:1px solid #e4e4e7; color:#334155; font-size:13px; }
 .decision-summary > div > span { display:block; margin-top:4px; }.decision-type { margin:0 0 16px; }.password-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:8px; }.dialog-hint { margin:12px 0 0; color:var(--cc-muted); font-size:12px; line-height:1.6; }.archive-confirm { display:grid; gap:8px; margin:16px 0; }.archive-confirm strong { color:var(--cc-text); }.archive-confirm span { color:var(--cc-muted); font-size:12px; }
 .approval-result-warning { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid #fecdca; border-radius:8px; background:#fffafa; color:#b42318; } .approval-result-warning strong,.approval-result-warning span { display:block; } .approval-result-warning strong { font-size:14px; } .approval-result-warning span { margin-top:4px; font-size:12px; line-height:1.5; } .approval-credentials { margin:18px 0 0; border:1px solid var(--cc-border); border-radius:8px; } .approval-credentials > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; padding:12px 14px; } .approval-credentials > div + div { border-top:1px solid var(--cc-border); } .approval-credentials dt { color:var(--cc-muted); font-size:12px; } .approval-credentials dd { display:flex; min-width:0; align-items:center; gap:10px; margin:0; } .approval-credentials code { min-width:0; flex:1; overflow-wrap:anywhere; color:var(--cc-text); font-size:14px; font-weight:700; }
-@media (max-width:720px) { .customer-editor-footer,.review-sync-error { align-items:stretch; flex-direction:column; } .customers-table-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; } .customers-table-actions :deep(.el-button) { min-height:40px; margin:0; } .qualification-table { overflow-x:auto; } .qualification-row { min-width:640px; } .customer-editor-footer > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); width:100%; } .customer-editor-footer :deep(.el-button) { min-height:40px; margin:0; } .decision-summary { align-items:flex-start; flex-direction:column; }.password-input-row { grid-template-columns:1fr; }.table-actions :deep(.el-button) { min-height:40px; } }
+@media (max-width:720px) { .customer-editor-footer,.review-sync-error { align-items:stretch; flex-direction:column; } .customers-table-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; } .customers-table-actions :deep(.el-button) { min-height:40px; margin:0; } .qualification-table { overflow-x:auto; } .qualification-row { min-width:640px; } .customer-editor-footer > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); width:100%; } .customer-editor-footer :deep(.el-button) { min-height:40px; margin:0; } .decision-summary { align-items:flex-start; flex-direction:column; }.review-dialog-grid { grid-template-columns:1fr; gap:18px; }.review-info-grid > div { grid-template-columns:92px minmax(0,1fr); }.password-input-row { grid-template-columns:1fr; }.table-actions :deep(.el-button) { min-height:40px; } }
@media (max-width:360px) { .customers-table-actions,.capital-input { grid-template-columns:1fr; } }
 </style>
@@ -15,10 +15,39 @@ describe('InboundWorkflowWorkspace', () => {
    expect(source).toContain('getPlatformInbound')
    expect(source).toContain('StatusBadge')
    expect(source).toContain('label="基本信息"')
-    expect(source).toContain('label="货物与测量"')
+    expect(source).toContain('label="货品与测量"')
    expect(source).toContain('label="测量审核"')
    expect(source).toContain('label="费用信息"')
-    expect(source).toContain('label="状态与其他"')
+    expect(source).toContain('label="状态历史"')
+    expect(source).toContain('label="其他记录"')
+  })
+
+  it('opens measurement editing and review in prototype-sized centered dialogs', () => {
+    expect(source).toContain('title="编辑入库测量数据"')
+    expect(source).toContain('width="min(1900px, calc(100vw - 32px))"')
+    expect(source).toContain('title="审核入库测量数据"')
+    expect(source).toContain('width="min(1700px, calc(100vw - 32px))"')
+    expect(source).toContain('height: 92vh')
+    expect(source).toContain('max-height: 92vh')
+    expect(source).toContain('.el-dialog__body) { min-height: 0; flex: 1 1 auto; overflow-y: auto;')
+    expect(source).toContain('@media (max-width: 720px)')
+    expect(source).toContain('@media (max-width: 360px)')
+  })
+
+  it('keeps domain writes inside their existing panels and mounts them only in dialog bodies', () => {
+    expect(source).toContain('@click="measurementDialogOpen = true"')
+    expect(source).toContain('@click="reviewDialogOpen = true"')
+    expect(source).toContain(':key="`measurement-dialog-${revision}`"')
+    expect(source).toContain(':key="`review-dialog-${revision}`"')
+    expect(source).toContain('@changed="handleReviewChanged"')
+    expect(source).toContain('<template #footer>')
+    expect(source).toContain('measurementPanelRef?.saveDraft()')
+    expect(source).toContain('measurementPanelRef?.submitForReview()')
+    expect(source).toContain("reviewPanelRef?.openReasonDialog('reject')")
+    expect(source).toContain('reviewPanelRef?.confirmApprove()')
+    expect(source).toContain('inbound-operation-dialog__footer')
+    expect(source).not.toContain('approveMeasurement')
+    expect(source).not.toContain('submitInboundMeasurement')
  })

  it('uses the established first-leg detail density without nested framed surfaces', () => {
@@ -54,7 +83,8 @@ describe('InboundWorkflowWorkspace', () => {

  it('keeps pallet and location results read-only in the overview', () => {
    expect(source).toContain(':pallet-locations="detail.palletLocations"')
-    expect(source).toContain('label="状态与其他"')
+    expect(source).toContain(':sections="[\'history\']"')
+    expect(source).toContain(':sections="[\'allocations\', \'files\', \'notes\', \'remark\']"')
    expect(source).not.toContain('reserveLocation')
    expect(source).not.toContain('allocatePallet')
  })
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { RefreshCw } from '@lucide/vue'
+import { Box, ClipboardCheck, Pencil, RefreshCw } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -27,6 +27,10 @@ const emit = defineEmits<{

 const access = useAccessPreviewStore()
 const activeTab = ref('overview')
+const measurementDialogOpen = ref(false)
+const reviewDialogOpen = ref(false)
+const measurementPanelRef = ref<InstanceType<typeof InboundMeasurementPanel> | null>(null)
+const reviewPanelRef = ref<InstanceType<typeof MeasurementReviewPanel> | null>(null)
 const loading = ref(false)
 const loadError = ref<ApiErrorDetails | null>(null)
 const detail = ref<InboundOrderDetail | null>(null)
@@ -71,6 +75,11 @@ function handleDomainChanged() {
  emit('changed')
 }

+function handleReviewChanged() {
+  reviewDialogOpen.value = false
+  handleDomainChanged()
+}
+
 watch(
  () => [props.customerId, props.inboundId],
  () => {
@@ -94,6 +103,7 @@ onBeforeUnmount(() => {
    <header class="workspace-header">
      <div>
        <div class="workspace-title-row">
+          <span class="workspace-mark" aria-hidden="true"><Box :size="20" /></span>
          <h2>入库码：{{ title }}</h2>
          <StatusBadge v-if="detail" :status="statusLabel" />
        </div>
@@ -124,14 +134,12 @@ onBeforeUnmount(() => {
      <el-tab-pane label="基本信息" name="overview">
        <InboundSummaryPanel :summary="detail.summary" :public-remark="detail.publicRemark" />
      </el-tab-pane>
-      <el-tab-pane label="货物与测量" name="measurement" lazy>
+      <el-tab-pane label="货品与测量" name="measurement" lazy>
+        <div class="workflow-launch-panel">
+          <div><h3>编辑入库测量数据</h3><p>核对原单数据、确认扫描箱数，并查看服务端计算的重量和体积结果。</p></div>
+          <el-button type="primary" @click="measurementDialogOpen = true"><Pencil :size="16" />编辑测量数据</el-button>
+        </div>
        <div class="measurement-workflow">
-          <InboundMeasurementPanel
-            :key="`measurement-${revision}`"
-            :tenant-id="customerId"
-            :inbound-id="inboundId"
-            @changed="handleDomainChanged"
-          />
          <WeightOcrPanel
            :key="`weight-${revision}`"
            :tenant-id="customerId"
@@ -141,13 +149,10 @@ onBeforeUnmount(() => {
        </div>
      </el-tab-pane>
      <el-tab-pane label="测量审核" name="review" lazy>
-        <MeasurementReviewPanel
-          v-if="canViewMeasurement"
-          :key="`review-${revision}`"
-          :tenant-id="customerId"
-          :inbound-id="inboundId"
-          @changed="handleDomainChanged"
-        />
+        <div v-if="canViewMeasurement" class="workflow-launch-panel">
+          <div><h3>审核入库测量数据</h3><p>对照原单、设备实测和称重 OCR 结果后作出审核决定。</p></div>
+          <el-button type="primary" @click="reviewDialogOpen = true"><ClipboardCheck :size="16" />审核测量数据</el-button>
+        </div>
        <el-alert
          v-else
          title="无测量审核查看权限"
@@ -165,16 +170,83 @@ onBeforeUnmount(() => {
          @changed="handleDomainChanged"
        />
      </el-tab-pane>
-      <el-tab-pane label="状态与其他" name="records" lazy>
+      <el-tab-pane label="状态历史" name="history" lazy>
+        <InboundHistoryPanel
+          :pallet-locations="[]"
+          :files="[]"
+          :internal-notes="[]"
+          :status-history="detail.statusHistory"
+          :public-remark="null"
+          :sections="['history']"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="其他记录" name="records" lazy>
        <InboundHistoryPanel
          :pallet-locations="detail.palletLocations"
          :files="detail.files"
          :internal-notes="detail.internalNotes"
-          :status-history="detail.statusHistory"
-          :public-remark="null"
+          :status-history="[]"
+          :public-remark="detail.publicRemark"
+          :sections="['allocations', 'files', 'notes', 'remark']"
        />
      </el-tab-pane>
    </el-tabs>
+
+    <el-dialog
+      v-model="measurementDialogOpen"
+      class="inbound-operation-dialog inbound-measurement-dialog"
+      title="编辑入库测量数据"
+      width="min(1900px, calc(100vw - 32px))"
+      top="4vh"
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <div class="inbound-operation-dialog__body">
+        <InboundMeasurementPanel
+          ref="measurementPanelRef"
+          :key="`measurement-dialog-${revision}`"
+          :tenant-id="customerId"
+          :inbound-id="inboundId"
+          @changed="handleDomainChanged"
+        />
+      </div>
+      <template #footer>
+        <div class="inbound-operation-dialog__footer">
+          <el-button @click="measurementDialogOpen = false">取消</el-button>
+          <el-button v-if="measurementPanelRef?.canEdit" type="primary" plain :loading="measurementPanelRef?.saving" :disabled="!measurementPanelRef?.mayMaintain" @click="measurementPanelRef?.saveDraft()">保存确认箱数</el-button>
+          <el-button v-if="measurementPanelRef?.canSubmit" type="primary" :loading="measurementPanelRef?.submitting" :disabled="!measurementPanelRef?.maySubmit" @click="measurementPanelRef?.submitForReview()">提交审核</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="reviewDialogOpen"
+      class="inbound-operation-dialog inbound-review-dialog"
+      title="审核入库测量数据"
+      width="min(1700px, calc(100vw - 32px))"
+      top="4vh"
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <div class="inbound-operation-dialog__body">
+        <MeasurementReviewPanel
+          v-if="canViewMeasurement"
+          ref="reviewPanelRef"
+          :key="`review-dialog-${revision}`"
+          :tenant-id="customerId"
+          :inbound-id="inboundId"
+          @changed="handleReviewChanged"
+        />
+      </div>
+      <template #footer>
+        <div class="inbound-operation-dialog__footer">
+          <el-button :disabled="Boolean(reviewPanelRef?.actionLoading)" @click="reviewDialogOpen = false">取消</el-button>
+          <el-button v-if="reviewPanelRef?.isPending && reviewPanelRef?.canReview" type="danger" plain :loading="reviewPanelRef?.actionLoading === 'reject'" @click="reviewPanelRef?.openReasonDialog('reject')">驳回</el-button>
+          <el-button v-if="reviewPanelRef?.isPending && reviewPanelRef?.canReview" type="primary" :loading="reviewPanelRef?.actionLoading === 'approve'" @click="reviewPanelRef?.confirmApprove()">通过并完成入库</el-button>
+          <el-button v-if="reviewPanelRef?.isRejected && reviewPanelRef?.canRelease" type="warning" plain :loading="reviewPanelRef?.actionLoading === 'release'" @click="reviewPanelRef?.openReasonDialog('release')">异常放行</el-button>
+        </div>
+      </template>
+    </el-dialog>
  </section>
 </template>

@@ -182,6 +254,7 @@ onBeforeUnmount(() => {
 .inbound-workspace { min-width: 0; }
 .workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 24px 16px; border-bottom: 1px solid var(--cc-border); }
 .workspace-title-row { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 10px; }
+.workspace-mark { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 8px; background: #1e293b; color: #fff; }
 .workspace-title-row h2 { margin: 0; overflow-wrap: anywhere; color: #172033; font-size: 16px; line-height: 1.35; }
 .workspace-header p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
 .workspace-state { margin: 24px; }
@@ -193,6 +266,19 @@ onBeforeUnmount(() => {
 .workflow-tabs :deep(.el-tabs__item) { min-height: 44px; padding: 0 18px; color: #475467; font-size: 13px; font-weight: 500; }
 .workflow-tabs :deep(.el-tabs__item.is-active) { color: var(--cc-primary); font-weight: 650; }
 .measurement-workflow { display: grid; min-width: 0; gap: 28px; }
+.workflow-launch-panel { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
+.workflow-launch-panel h3 { margin: 0; color: var(--cc-text); font-size: 15px; }
+.workflow-launch-panel p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
+.inbound-operation-dialog__body { min-width: 0; }
+.inbound-operation-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
+.inbound-operation-dialog__footer :deep(.el-button) { margin-left: 0; }
+:global(.inbound-operation-dialog.el-dialog) { display: flex; max-width: calc(100vw - 32px); height: 92vh; max-height: 92vh; margin-bottom: 0; flex-direction: column; overflow: hidden; }
+:global(.inbound-operation-dialog .el-dialog__header) { flex: 0 0 auto; margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--cc-border); }
+:global(.inbound-operation-dialog .el-dialog__body) { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; }
+:global(.inbound-operation-dialog .el-dialog__footer) { flex: 0 0 auto; padding: 14px 24px; border-top: 1px solid var(--cc-border); }
+:global(.inbound-measurement-dialog .measurement-panel) { border: 0; border-radius: 0; box-shadow: none; }
+:global(.inbound-measurement-dialog .measurement-panel__heading .measurement-panel__actions), :global(.inbound-measurement-dialog .measurement-panel__footer) { display: none; }
+:global(.inbound-review-dialog .review-actions .action-buttons) { display: none; }
@media (max-width: 720px) {
  .workspace-header { align-items: stretch; flex-direction: column; padding: 16px; }
  .workspace-header :deep(.el-button) { width: 100%; min-height: 44px; }
@@ -200,5 +286,17 @@ onBeforeUnmount(() => {
  .workflow-tabs { padding: 0 16px 16px; }
  .workflow-tabs :deep(.el-tabs__nav-wrap) { overflow-x: auto; }
  .workflow-tabs :deep(.el-tabs__item) { min-height: 44px; padding-inline: 14px; }
+  .workflow-launch-panel { align-items: stretch; flex-direction: column; padding: 16px; }
+  .workflow-launch-panel :deep(.el-button) { width: 100%; min-height: 44px; }
+  :global(.inbound-operation-dialog.el-dialog) { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px); height: 92vh; }
+  :global(.inbound-operation-dialog .el-dialog__header) { padding: 16px; }
+  :global(.inbound-operation-dialog .el-dialog__body) { padding: 14px; }
+  .inbound-operation-dialog__footer { display: grid; grid-template-columns: 1fr; }
+  .inbound-operation-dialog__footer :deep(.el-button) { width: 100%; min-height: 44px; }
+}
+@media (max-width: 360px) {
+  :global(.inbound-operation-dialog.el-dialog) { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px); }
+  :global(.inbound-operation-dialog .el-dialog__header) { padding: 14px 12px; }
+  :global(.inbound-operation-dialog .el-dialog__body) { padding: 10px; }
 }
 </style>
@@ -2,13 +2,20 @@
 import type { InboundFileSummary, InboundInternalNote, InboundPalletLocation, InboundStatusHistory } from './types'
 import { inboundHistoryActionLabel, inboundProcessStatusLabels, inboundStatusLabel } from '../status'

-defineProps<{
+const props = withDefaults(defineProps<{
  palletLocations: InboundPalletLocation[]
  files: InboundFileSummary[]
  internalNotes: InboundInternalNote[]
  statusHistory: InboundStatusHistory[]
  publicRemark: string | null
-}>()
+  sections?: Array<'allocations' | 'files' | 'notes' | 'history' | 'remark'>
+}>(), {
+  sections: () => ['allocations', 'files', 'notes', 'history', 'remark'],
+})
+
+function shows(section: 'allocations' | 'files' | 'notes' | 'history' | 'remark') {
+  return props.sections.includes(section)
+}

 function value(value: string | number | null | undefined) { return value === null || value === undefined || value === '' ? '—' : String(value) }
 function number(value: number | null) { return value === null ? '—' : value.toFixed(3) }
@@ -21,7 +28,7 @@ function date(value: string | null) {

 <template>
  <div class="history-panel">
-    <section class="history-section">
+    <section v-if="shows('allocations')" class="history-section">
      <div class="section-heading"><h3>托盘与库位</h3><span>{{ palletLocations.length }} 条分配</span></div>
      <div v-if="palletLocations.length" class="allocation-list">
        <div v-for="item in palletLocations" :key="`${item.allocationNo}-${item.palletId}-${item.locationId}`" class="allocation-row">
@@ -32,22 +39,22 @@ function date(value: string | null) {
      </div>
      <p v-else class="muted-empty">暂无托盘库位分配记录</p>
    </section>
-    <section class="history-section">
+    <section v-if="shows('files')" class="history-section">
      <div class="section-heading"><h3>文件记录</h3><span>{{ files.length }} 个文件</span></div>
      <div v-if="files.length" class="simple-list"><div v-for="file in files" :key="`${file.fileId}-${file.fileVersion}`"><strong>{{ value(file.fileNameSnapshot) }}</strong><span>{{ value(file.fileType) }} · {{ date(file.uploadedAt) }}</span></div></div>
      <p v-else class="muted-empty">暂无文件记录</p>
    </section>
-    <section class="history-section">
+    <section v-if="shows('notes')" class="history-section">
      <div class="section-heading"><h3>内部备注</h3><span>{{ internalNotes.length }} 条</span></div>
      <div v-if="internalNotes.length" class="simple-list"><div v-for="note in internalNotes" :key="String(note.id)"><strong>{{ value(note.createdByName || note.createdBy) }}</strong><span>{{ value(note.content) }} · {{ date(note.createdAt) }}</span></div></div>
      <p v-else class="muted-empty">暂无内部备注</p>
    </section>
-    <section class="history-section">
+    <section v-if="shows('history')" class="history-section">
      <div class="section-heading"><h3>状态历史</h3><span>{{ statusHistory.length }} 条</span></div>
      <ol v-if="statusHistory.length" class="timeline"><li v-for="(history, index) in statusHistory" :key="`${history.occurredAt}-${index}`"><span class="timeline-dot" /><div><strong>{{ inboundHistoryActionLabel(history.action) }}</strong><span>{{ inboundStatusLabel(history.fromStatus, inboundProcessStatusLabels) }} → {{ inboundStatusLabel(history.toStatus, inboundProcessStatusLabels) }} · {{ value(history.operatorName || history.operatorId) }}</span><small>{{ date(history.occurredAt) }}<template v-if="history.reason"> · {{ history.reason }}</template></small></div></li></ol>
      <p v-else class="muted-empty">暂无状态历史</p>
    </section>
-    <section v-if="publicRemark" class="history-section remark-section"><div class="section-heading"><h3>公开备注</h3></div><p>{{ publicRemark }}</p></section>
+    <section v-if="shows('remark') && publicRemark" class="history-section remark-section"><div class="section-heading"><h3>公开备注</h3></div><p>{{ publicRemark }}</p></section>
  </div>
 </template>

@@ -70,4 +70,3 @@ describe('inbound fee API', () => {
    expect(second).not.toBe(first)
  })
 })
-
@@ -32,4 +32,3 @@ export function createFeeAdjustmentIdempotencyKey() {
  if (uuid) return `fee-adjust-${uuid}`
  return `fee-adjust-${Date.now()}-${Math.random().toString(36).slice(2, 12)}`
 }
-
@@ -10,4 +10,3 @@ export type {
  InboundFeeSnapshot,
  InboundFeeStatus,
 } from './types'
-
@@ -51,4 +51,3 @@ export interface AdjustPublishedInboundFeeRequest {
  additionalAmount: number
  reason: string
 }
-
@@ -214,6 +214,11 @@ describe('InboundMeasurementPanel', () => {
      '机器编号',
      '测量时间',
    ])
+    const source = await import('./InboundMeasurementPanel.vue?raw').then((module) => module.default)
+    expect(source).toContain('.measurement-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));')
+    expect(source).toContain('.measurement-item__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));')
+    expect(source).toContain('.measurement-form-grid, .measurement-item__grid, .measurement-item__advanced .measurement-item__grid { grid-template-columns: 1fr; }')
+    expect(source).toContain('defineExpose({ saveDraft, submitForReview, mayMaintain, maySubmit, saving, submitting, canEdit, canSubmit })')
  })

  it('reuses the established first-leg detail surface and status patterns', async () => {
@@ -438,6 +438,8 @@ watch(
 )

 onBeforeUnmount(releaseImagePreview)
+
+defineExpose({ saveDraft, submitForReview, mayMaintain, maySubmit, saving, submitting, canEdit, canSubmit })
 </script>

 <template>
@@ -672,7 +674,8 @@ onBeforeUnmount(releaseImagePreview)
 .measurement-section { padding: 22px 20px; border-top: 1px solid var(--cc-border); }
 .measurement-section__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
 .measurement-section__heading > div { min-width: 0; }
-.measurement-form-grid, .measurement-item__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
+.measurement-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
+.measurement-item__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
 .measurement-form label, .measurement-item label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #344054; font-size: 12px; font-weight: 650; }
 .measurement-form :deep(.el-input-number), .measurement-form :deep(.el-input) { width: 100%; }
 .measurement-image-field :deep(.el-button) { width: 100%; margin: 0; }
@@ -1,11 +1,45 @@
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
+import ElementPlus from 'element-plus'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createMemoryHistory, createRouter } from 'vue-router'
 import { describe, expect, it } from 'vitest'
+import InboundOrderDetailView from './InboundOrderDetailView.vue'

 const source = readFileSync(resolve(process.cwd(), 'src/modules/inbounds/pages/InboundOrderDetailView.vue'), 'utf8')

 describe('InboundOrderDetailView', () => {
-  it('maps the compatible route parameter to customer context without a detail-page selector', () => {
+  it('maps the compatible route parameter to customer context without a detail-page selector', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', name: 'dashboard', component: { template: '<div>首页</div>' } },
+        { path: '/inbounds', name: 'inbound-orders', component: { template: '<div>入库单列表</div>' } },
+        { path: '/inbounds/:inboundId', name: 'inbound-order-detail', component: InboundOrderDetailView },
+      ],
+    })
+    await router.push('/inbounds/19001?tenantId=10002')
+    await router.isReady()
+    const wrapper = mount(InboundOrderDetailView, {
+      global: {
+        plugins: [router, ElementPlus],
+        stubs: {
+          InboundWorkflowWorkspace: {
+            props: ['customerId', 'inboundId'],
+            template: '<div data-testid="workspace">{{ customerId }}:{{ inboundId }}</div>',
+          },
+        },
+      },
+    })
+
+    expect(wrapper.get('[aria-label="面包屑"]').text()).toContain('首页入库单列表入库单详情')
+    expect(wrapper.get('[data-testid="workspace"]').text()).toBe('10002:19001')
+    expect(wrapper.findAll('button').filter((button) => button.text().includes('返回入库单列表'))).toHaveLength(2)
+    await wrapper.findAll('button').filter((button) => button.text().includes('返回入库单列表')).at(-1)?.trigger('click')
+    await flushPromises()
+    expect(router.currentRoute.value.name).toBe('inbound-orders')
+    expect(router.currentRoute.value.query.tenantId).toBe('10002')
+
    expect(source).toContain('route.query.tenantId')
    expect(source).toContain('const customerId = computed')
    expect(source).toContain("name: 'inbound-orders'")
@@ -19,5 +53,9 @@ describe('InboundOrderDetailView', () => {
    expect(source).toContain('class="surface-panel detail-page"')
    expect(source).toContain('class="detail-page-actions"')
    expect(source).toContain('返回入库单列表')
+    expect(source).toContain('class="detail-breadcrumb"')
+    expect(source).toContain('class="detail-page-footer"')
+    expect(source).toContain('@media (max-width: 720px)')
+    expect(source).toContain('@media (max-width: 360px)')
  })
 })
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, RefreshCw } from '@lucide/vue'
+import { ArrowLeft, ChevronRight, Home } from '@lucide/vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
 import FormSection from '@/shared/components/FormSection.vue'
@@ -22,10 +22,21 @@ const customerId = computed(() => routeValue(route.query.tenantId))
 function backToList() {
  void router.push({ name: 'inbound-orders', query: customerId.value ? { tenantId: customerId.value } : undefined })
 }
+
+function backToHome() {
+  void router.push({ name: 'dashboard' })
+}
 </script>

 <template>
  <AdminPage as="div" class="business-page inbound-detail-page">
+    <nav class="detail-breadcrumb" aria-label="面包屑">
+      <button type="button" @click="backToHome"><Home :size="14" />首页</button>
+      <ChevronRight :size="14" aria-hidden="true" />
+      <button type="button" @click="backToList">入库单列表</button>
+      <ChevronRight :size="14" aria-hidden="true" />
+      <span aria-current="page">入库单详情</span>
+    </nav>
    <DetailPageLayout class="surface-panel detail-page" aria-label="入库单详情">
      <template #header>
        <PageToolbar title="入库单详情" description="查看基本信息、货品与测量、费用信息、状态历史及其他记录。">
@@ -46,18 +57,28 @@ function backToList() {
          :description="inboundId ? '缺少所属企业信息，请从入库单列表重新打开' : '缺少有效的入库单标识'"
        />
      </FormSection>
+
+      <footer class="detail-page-footer">
+        <el-button @click="backToList"><ArrowLeft :size="16" />返回入库单列表</el-button>
+      </footer>
    </DetailPageLayout>
  </AdminPage>
 </template>

 <style scoped>
 .inbound-detail-page { min-width: 0; }
+.detail-breadcrumb { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 2px; color: var(--cc-muted); font-size: 13px; }
+.detail-breadcrumb button { display: inline-flex; min-height: 32px; align-items: center; gap: 5px; padding: 4px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--cc-primary); cursor: pointer; font: inherit; }
+.detail-breadcrumb button:hover { background: #f0f7ff; }
+.detail-breadcrumb button:focus-visible { outline: 3px solid rgba(102, 126, 234, .2); outline-offset: 1px; }
 .detail-page { overflow: hidden; padding: 20px 24px; }
 .detail-page-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 12px; }
+.detail-page-footer { display: flex; justify-content: flex-start; padding: 20px 0 0; border-top: 1px solid var(--cc-border); }
@media (max-width: 720px) {
  .detail-page { padding: 16px; }
  .detail-page-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .detail-page-actions :deep(.el-button) { width: 100%; min-height: 44px; }
+  .detail-page-footer :deep(.el-button) { width: 100%; min-height: 44px; }
 }
@media (max-width: 360px) { .detail-page { padding: 12px; } }
 </style>
@@ -10,12 +10,18 @@ import QueryToolbar from '@/shared/components/QueryToolbar.vue'
 import DataTable from '@/shared/components/DataTable.vue'
 import { listPlatformWarehouses } from '@/modules/warehouses'
 import { useAuthStore } from '@/core/auth/auth'
-import { downloadInboundCartonLabels, getPlatformInbound, listPlatformInbounds } from '../core/api'
-import type { InboundOrderDetail, InboundOrderSummary } from '../core/types'
+import { downloadInboundCartonLabels, listPlatformInbounds } from '../core/api'
+import type { InboundOrderSummary } from '../core/types'
+
+const routerPush = vi.fn()
+
+vi.mock('vue-router', async (importOriginal) => ({
+  ...await importOriginal<typeof import('vue-router')>(),
+  useRouter: () => ({ push: routerPush }),
+}))

 vi.mock('../core/api', () => ({
  downloadInboundCartonLabels: vi.fn(),
-  getPlatformInbound: vi.fn(),
  listPlatformInbounds: vi.fn(),
 }))

@@ -46,13 +52,6 @@ const summary: InboundOrderSummary = {
  createdAt: '2026-08-01T10:00:00', updatedAt: '2026-08-01T10:00:00',
 }

-const detail: InboundOrderDetail = {
-  summary,
-  publicRemark: '请优先安排测量',
-  palletLocations: [{ allocationNo: 1, warehouseId: '20001', palletId: '21001', palletCode: 'P-001', palletCapacityCbm: 2, allocatedVolumeCbm: 1.2, allocatedPackageCount: 6, locationId: '22001', locationCode: 'A-01', reservationNo: 'RES-1', allocationStatus: 'PREPARED' }],
-  files: [], internalNotes: [], statusHistory: [{ fromStatus: null, toStatus: 'WAIT_MEASURE', action: 'CREATE', reason: null, operatorId: '2', operatorName: '管理员', occurredAt: '2026-08-01T10:00:00' }],
-}
-
 enableAutoUnmount(afterEach)

 function mountPage() {
@@ -76,7 +75,6 @@ describe('InboundOrdersView', () => {
    setActivePinia(createPinia())
    useAuthStore().permissions = ['platform:firstleg:inbound:view']
    vi.mocked(listPlatformInbounds).mockResolvedValue({ records: [summary], page: 1, size: 20, total: 1, pages: 1 })
-    vi.mocked(getPlatformInbound).mockResolvedValue(detail)
    vi.mocked(downloadInboundCartonLabels).mockResolvedValue(new Blob(['pdf'], { type: 'application/pdf' }))
    vi.mocked(listPlatformTenants).mockResolvedValue({ records: customers, page: 1, size: 200, total: 2, pages: 1 })
    vi.mocked(listPlatformWarehouses).mockResolvedValue({
@@ -171,7 +169,7 @@ describe('InboundOrdersView', () => {
    }))
  })

-  it('passes the selected backend tab and opens an aggregate read-only detail', async () => {
+  it('passes the selected backend tab and routes view to the independent detail page', async () => {
    const wrapper = mountPage()
    const toolbar = await selectCustomer(wrapper)
    toolbar.vm.$emit('search')
@@ -183,9 +181,12 @@ describe('InboundOrdersView', () => {
    expect(listPlatformInbounds).toHaveBeenLastCalledWith('10001', expect.objectContaining({ tab: 'WAIT_REVIEW', page: 1 }))
    ;[...document.querySelectorAll<HTMLButtonElement>('button')].filter((button) => button.textContent?.trim() === '查看').at(-1)?.click()
    await flushPromises()
-    expect(getPlatformInbound).toHaveBeenCalledWith('10002', '19001')
-    expect(document.body.textContent).toContain('托盘与库位')
-    expect(document.body.textContent).toContain('请优先安排测量')
+    expect(routerPush).toHaveBeenCalledWith({
+      name: 'inbound-order-detail',
+      params: { inboundId: '19001' },
+      query: { tenantId: '10002' },
+    })
+    expect(wrapper.find('[aria-label="入库单详情抽屉"]').exists()).toBe(false)
    wrapper.unmount()
  })

@@ -6,21 +6,16 @@ import { ChevronDown, ChevronUp, ClipboardCheck, Eye, Printer, RefreshCw, Slider
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import AdminPage from '@/shared/components/AdminPage.vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
-import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
-import FormSection from '@/shared/components/FormSection.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import { firstLegBusinessTypeLabel, firstLegContainerModeLabel, firstLegDestinationTypeLabel, firstLegTaxModeLabel } from '@/shared/utils/firstLegBusinessLabels'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { listPlatformWarehouses } from '@/modules/warehouses'
-import { downloadInboundCartonLabels, getPlatformInbound, listPlatformInbounds } from '../core/api'
-import InboundHistoryPanel from '../core/InboundHistoryPanel.vue'
-import InboundSummaryPanel from '../core/InboundSummaryPanel.vue'
-import type { InboundListTab, InboundOrderDetail, InboundOrderSummary } from '../core/types'
+import { downloadInboundCartonLabels, listPlatformInbounds } from '../core/api'
+import type { InboundListTab, InboundOrderSummary } from '../core/types'
 import { inboundFeeStatusLabels, inboundLoadingStatusLabels, inboundOrderStatusLabels, inboundProcessStatusLabels, inboundReviewStatusLabels, inboundStatusLabel } from '../status'

 type FilterModel = QueryModel & {
@@ -47,11 +42,6 @@ const page = ref(1)
 const pageSize = ref(20)
 const loading = ref(false)
 const loadError = ref<ApiErrorDetails | null>(null)
-const detailOpen = ref(false)
-const detailLoading = ref(false)
-const detailError = ref<ApiErrorDetails | null>(null)
-const detail = ref<InboundOrderDetail | null>(null)
-const detailTarget = ref<InboundOrderSummary | null>(null)
 const printingInboundId = ref('')
 const result = ref({ records: [] as InboundOrderSummary[], total: 0 })
 const filters = ref<FilterModel>({ customerId: '', inboundCode: '', orderNo: '', warehouseId: '', deliveryWarehouseId: '', processStatus: '', orderStatus: '', measureReviewStatus: '', customerName: '', destinationCode: '', feeStatus: '', feeReviewStatus: '', holdFlag: '', expectedArrivalRange: [] })
@@ -66,7 +56,6 @@ const warehousesLoading = ref(false)
 const warehousesUnavailable = ref(false)
 const showAdvancedFilters = ref(false)
 let loadRequestId = 0
-let detailRequestId = 0
 let customerRequestId = 0
 let warehouseRequestId = 0
 let disposed = false
@@ -293,35 +282,7 @@ function applyFilters() {
  else page.value = 1
 }

-function resetDetail() {
-  detailRequestId += 1
-  detail.value = null
-  detailTarget.value = null
-  detailError.value = null
-  detailLoading.value = false
-}
-
-async function openDetail(row: InboundOrderSummary) {
-  const requestId = ++detailRequestId
-  detailOpen.value = true
-  detailTarget.value = row
-  detailLoading.value = true
-  detailError.value = null
-  detail.value = null
-  try {
-    const response = await getPlatformInbound(row.tenantId, row.id)
-    if (disposed || requestId !== detailRequestId) return
-    detail.value = response
-  } catch (error) {
-    if (disposed || requestId !== detailRequestId) return
-    detailError.value = getApiErrorDetails(error, '入库单详情加载失败')
-  } finally {
-    if (!disposed && requestId === detailRequestId) detailLoading.value = false
-  }
-}
-
-function closeDetail() { resetDetail() }
-function openWorkspace(row: InboundOrderSummary) {
+function openDetail(row: InboundOrderSummary) {
  void router.push({ name: 'inbound-order-detail', params: { inboundId: row.id }, query: { tenantId: row.tenantId } })
 }
 async function printCartonLabels(row: InboundOrderSummary) {
@@ -372,8 +333,6 @@ function resetFilters() {
  filters.value = { ...filters.value, customerId: '', warehouseId: '', deliveryWarehouseId: '' }
  warehouseOptions.value = []
  warehousesUnavailable.value = false
-  resetDetail()
-  detailOpen.value = false
  applyFilters()
 }

@@ -397,14 +356,12 @@ watch(() => filters.value.customerId, (customerId) => {
  if (customerId === selectedCustomerId.value) return
  selectedCustomerId.value = customerId
  filters.value = { ...filters.value, warehouseId: '', deliveryWarehouseId: '' }
-  resetDetail()
-  detailOpen.value = false
  void loadWarehouseOptions()
 })
 watch(tab, () => { if (page.value === 1) void loadInbounds(); else page.value = 1 })
 watch([page, pageSize], () => { void loadInbounds() })
 onMounted(() => { void loadCustomers(); void loadInbounds() })
-onBeforeUnmount(() => { disposed = true; loadRequestId += 1; detailRequestId += 1; customerRequestId += 1; warehouseRequestId += 1 })
+onBeforeUnmount(() => { disposed = true; loadRequestId += 1; customerRequestId += 1; warehouseRequestId += 1 })
 </script>

 <template>
@@ -454,7 +411,7 @@ onBeforeUnmount(() => { disposed = true; loadRequestId += 1; detailRequestId +=
      </header>
      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="inbound-orders-table" :loading="loading" :total="result.total" :page-sizes="[20, 50, 100]" row-key="id" :empty-text="listEmptyText" aria-label="入库单列表">
        <template #pagination-left>当前显示 {{ currentPageCount }} 条 · 共 {{ result.total }} 条</template>
-        <template #actions="{ row }"><div v-if="access.can('platform:firstleg:inbound:view')" class="row-actions"><el-button link type="primary" @click="openWorkspace(row as InboundOrderSummary)"><ClipboardCheck :size="15" />处理</el-button><el-button link :loading="printingInboundId === (row as InboundOrderSummary).id" :disabled="Boolean(printingInboundId)" @click="printCartonLabels(row as InboundOrderSummary)"><Printer :size="15" />打印箱唛</el-button><el-button link @click="openDetail(row as InboundOrderSummary)"><Eye :size="15" />查看</el-button></div><span v-else class="muted-action">无查看权限</span></template>
+        <template #actions="{ row }"><div v-if="access.can('platform:firstleg:inbound:view')" class="row-actions"><el-button link type="primary" @click="openDetail(row as InboundOrderSummary)"><ClipboardCheck :size="15" />处理</el-button><el-button link :loading="printingInboundId === (row as InboundOrderSummary).id" :disabled="Boolean(printingInboundId)" @click="printCartonLabels(row as InboundOrderSummary)"><Printer :size="15" />打印箱唛</el-button><el-button link @click="openDetail(row as InboundOrderSummary)"><Eye :size="15" />查看</el-button></div><span v-else class="muted-action">无查看权限</span></template>
        <template #inbound="{ row }"><div class="primary-cell"><strong>{{ text((row as InboundOrderSummary).inboundCode) }}</strong><span>订单 {{ text((row as InboundOrderSummary).orderNo) }}</span></div></template>
        <template #processStatus="{ row }"><el-tag :type="statusType((row as InboundOrderSummary).processStatus)" effect="light">{{ statusLabel((row as InboundOrderSummary).processStatus) }}</el-tag></template>
        <template #orderStatus="{ row }">{{ codeLabel((row as InboundOrderSummary).orderStatusSnapshot, inboundOrderStatusLabels) }}</template>
@@ -499,15 +456,6 @@ onBeforeUnmount(() => { disposed = true; loadRequestId += 1; detailRequestId +=
      </section>
    </ListPageLayout>

-    <AppDrawer v-model="detailOpen" :title="detail ? `入库单详情 · ${detail.summary.inboundCode || detail.summary.id}` : '入库单详情'" size="min(720px, 94vw)" :loading="detailLoading" :show-footer="false" destroy-on-close @closed="closeDetail">
-      <DetailPageLayout aria-label="入库单详情抽屉">
-        <section v-if="detailError" class="detail-error" role="alert"><strong>入库单详情暂时无法加载</strong><p>{{ detailError.message }}</p><ApiErrorMeta :details="detailError" /><el-button type="primary" :disabled="!detailTarget" @click="detailTarget && openDetail(detailTarget)"><RefreshCw :size="16" />重新加载</el-button></section>
-        <div v-else-if="detail" class="detail-content">
-          <FormSection title="入库概览"><InboundSummaryPanel :summary="detail.summary" :public-remark="detail.publicRemark" /></FormSection>
-          <FormSection title="资源与状态记录" :bordered="false"><InboundHistoryPanel :pallet-locations="detail.palletLocations" :files="detail.files" :internal-notes="detail.internalNotes" :status-history="detail.statusHistory" :public-remark="null" /></FormSection>
-        </div>
-      </DetailPageLayout>
-    </AppDrawer>
  </AdminPage>
 </template>

@@ -535,11 +483,6 @@ onBeforeUnmount(() => { disposed = true; loadRequestId += 1; detailRequestId +=
 .primary-cell, .status-stack { display: grid; min-width: 0; justify-items: start; gap: 4px; }
 .primary-cell strong, .primary-cell span, .status-stack span, .status-stack small { overflow-wrap: anywhere; }
 .primary-cell span, .status-stack span, .status-stack small { color: var(--cc-muted); font-size: 12px; }
-.detail-content { display: grid; gap: 24px; min-width: 0; }
-.detail-error { display: flex; min-height: 240px; align-items: flex-start; justify-content: center; flex-direction: column; }
-.detail-error strong { color: #b42318; font-size: 16px; }
-.detail-error p { margin: 7px 0; color: #172033; font-size: 13px; }
-.detail-error :deep(.el-button) { margin-top: 14px; }
@media (max-width: 900px) { .inbound-tabs { width: 100%; } }
@media (max-width: 720px) { .inbound-tab { padding-inline: 14px; } .table-tabs-row { padding: 0 10px; } .inbound-stats-row { min-height: 0; align-items: stretch; flex-direction: column; gap: 10px; padding: 10px; } .inbound-stats-row .total-info { justify-content: flex-start; } }
@media (max-width: 360px) { .inbound-tab { padding-inline: 12px; } .row-actions { align-items: flex-start; flex-direction: column; } }
@@ -58,6 +58,8 @@ describe('MeasurementReviewPanel', () => {
    expect(wrapper.text()).toContain('通过并完成入库')
    expect(wrapper.text()).not.toContain('确认费用')
    expect(getMeasurementReviewDetail).toHaveBeenCalledWith('10001', '90001')
+    const source = await import('./MeasurementReviewPanel.vue?raw').then((module) => module.default)
+    expect(source).toContain('defineExpose({ confirmApprove, openReasonDialog, isPending, isRejected, canReview, canRelease, actionLoading })')
  })

  it('shows the rejected release action only when the permission and rejected state exist', async () => {
@@ -207,6 +207,8 @@ watch(() => [customerId.value, props.inboundId], () => {
 onMounted(() => {
  if (!customerId.value || !props.inboundId) loadError.value = { message: '缺少所属企业或入库单标识，无法加载审核数据' }
 })
+
+defineExpose({ confirmApprove, openReasonDialog, isPending, isRejected, canReview, canRelease, actionLoading })
 </script>

 <template>
@@ -0,0 +1,28 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http } from '@/shared/api/http'
+import { adjustContainerFee, approveContainerFee, createContainerFee, listContainerCostDetails, listContainerFees, rejectContainerFee, voidContainerFee } from './containerFees'
+
+describe('container fee API', () => {
+  beforeEach(() => vi.restoreAllMocks())
+  it('passes accountId and exact controller DTOs', async () => {
+    const get = vi.spyOn(http, 'get').mockResolvedValue({ code: '200', data: [] })
+    const post = vi.spyOn(http, 'post').mockResolvedValue({ code: '200', data: { id: 3, sourceVersion: 1 } })
+    const values = { feeItemId: '7', direction: 'PAYABLE' as const, businessDate: '2026-08-12', amount: 100, currency: 'CNY' as const, settlementIncluded: true, remark: null }
+    await listContainerFees('9', '11'); await createContainerFee('9', '11', values)
+    await approveContainerFee('9', '11', '3'); await rejectContainerFee('9', '11', '3', '资料不全')
+    await adjustContainerFee('9', '11', '3', 2, values); await voidContainerFee('9', '11', '3', 3)
+    expect(get).toHaveBeenCalledWith('/platform/v1/loading-plans/9/fee-details', { params: { accountId: '11' } })
+    expect(post).toHaveBeenCalledWith('/platform/v1/loading-plans/9/fee-details', values, { params: { accountId: '11' } })
+    expect(post).toHaveBeenCalledWith('/platform/v1/loading-plans/9/fee-details/3/adjust', { expectedSourceVersion: 2, ...values }, { params: { accountId: '11' } })
+    expect(post).toHaveBeenCalledWith('/platform/v1/loading-plans/9/fee-details/3/void', { expectedSourceVersion: 3 }, { params: { accountId: '11' } })
+  })
+
+  it('reads allocation rows from Finance and never calculates them', async () => {
+    const get = vi.spyOn(http, 'get')
+      .mockResolvedValueOnce({ code: '200', data: [{ id: 81, containerId: 99 }] })
+      .mockResolvedValueOnce({ code: '200', data: { cost: { id: 81, containerId: 99, supplierName: '承运商A', feeItemName: '拖车费', payableAmount: 300 }, allocations: [{ id: 1, orderId: 8, volumeCbm: 2, totalVolumeCbm: 5, allocationRate: 0.4, allocatedAmount: 120 }] } })
+    const result = await listContainerCostDetails('11', '99')
+    expect(result[0]).toMatchObject({ supplierName: '承运商A', allocations: [{ orderId: '8', allocatedAmount: 120 }] })
+    expect(get).toHaveBeenNthCalledWith(2, '/platform/finance/v1/cost-entries/81', { params: { customerId: '11' } })
+  })
+})
@@ -0,0 +1,125 @@
+import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
+
+export type ContainerFeeDirection = 'RECEIVABLE' | 'PAYABLE'
+export type ContainerFeeReviewStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
+
+export interface ContainerFeeResource {
+  id: string
+  loadingPlanId: string
+  containerBookingId: string | null
+  containerNo: string | null
+  feeItemId: string
+  feeItemName: string
+  direction: ContainerFeeDirection
+  businessDate: string
+  amount: number
+  currency: 'CNY'
+  settlementIncluded: boolean
+  reviewStatus: ContainerFeeReviewStatus
+  sourceStatus: 'ACTIVE' | 'VOIDED'
+  sourceVersion: number
+  remark: string | null
+  reviewerName: string | null
+  reviewedAt: string | null
+  reviewReason: string | null
+}
+
+export interface ContainerFeeSaveRequest {
+  feeItemId: string
+  direction: ContainerFeeDirection
+  businessDate: string
+  amount: number
+  currency: 'CNY'
+  settlementIncluded: boolean
+  remark: string | null
+}
+
+export interface ApplicableFeeItem {
+  id: string
+  name: string
+  warehouseReceivable: boolean
+  warehousePayable: boolean
+  pickupReceivable: boolean
+  pickupPayable: boolean
+}
+
+export interface ContainerCostAllocation {
+  id: string
+  orderId: string
+  inboundId: string | null
+  volumeCbm: number
+  totalVolumeCbm: number
+  allocationRate: number
+  allocatedAmount: number
+  roundingAdjustment: boolean
+}
+
+export interface ContainerCostDetail {
+  id: string
+  containerId: string | null
+  supplierName: string | null
+  feeItemName: string
+  amount: number
+  allocations: ContainerCostAllocation[]
+}
+
+const id = (value: unknown) => value == null ? '' : String(value)
+const numberValue = (value: unknown) => Number.isFinite(Number(value)) ? Number(value) : 0
+const base = (planId: string) => `/platform/v1/loading-plans/${encodeURIComponent(planId)}/fee-details`
+const params = (accountId: string) => ({ accountId })
+
+function normalizeFee(raw: Record<string, unknown>): ContainerFeeResource {
+  return {
+    id: id(raw.id), loadingPlanId: id(raw.loadingPlanId), containerBookingId: raw.containerBookingId == null ? null : id(raw.containerBookingId),
+    containerNo: raw.containerNo == null ? null : String(raw.containerNo), feeItemId: id(raw.feeItemId),
+    feeItemName: String(raw.feeItemNameSnapshot || ''), direction: raw.direction as ContainerFeeDirection,
+    businessDate: String(raw.businessDate || ''), amount: numberValue(raw.amount), currency: 'CNY',
+    settlementIncluded: Boolean(raw.settlementIncluded), reviewStatus: raw.reviewStatus as ContainerFeeReviewStatus,
+    sourceStatus: raw.sourceStatus as ContainerFeeResource['sourceStatus'], sourceVersion: numberValue(raw.sourceVersion),
+    remark: raw.remark == null ? null : String(raw.remark), reviewerName: raw.reviewerName == null ? null : String(raw.reviewerName),
+    reviewedAt: raw.reviewedAt == null ? null : String(raw.reviewedAt), reviewReason: raw.reviewReason == null ? null : String(raw.reviewReason),
+  }
+}
+
+export async function listContainerFees(planId: string, accountId: string) {
+  const response = await http.get<ApiEnvelope<Record<string, unknown>[]>, ApiEnvelope<Record<string, unknown>[]>>(base(planId), { params: params(accountId) })
+  return unwrapApiResponse(response).map(normalizeFee)
+}
+
+export async function createContainerFee(planId: string, accountId: string, payload: ContainerFeeSaveRequest) {
+  const response = await http.post<ApiEnvelope<Record<string, unknown>>, ApiEnvelope<Record<string, unknown>>>(base(planId), payload, { params: params(accountId) })
+  return normalizeFee(unwrapApiResponse(response))
+}
+
+export async function approveContainerFee(planId: string, accountId: string, feeId: string) {
+  await http.post(`${base(planId)}/${encodeURIComponent(feeId)}/approve`, undefined, { params: params(accountId) })
+}
+
+export async function rejectContainerFee(planId: string, accountId: string, feeId: string, reason: string) {
+  await http.post(`${base(planId)}/${encodeURIComponent(feeId)}/reject`, { reason }, { params: params(accountId) })
+}
+
+export async function adjustContainerFee(planId: string, accountId: string, feeId: string, expectedSourceVersion: number, values: ContainerFeeSaveRequest) {
+  const response = await http.post<ApiEnvelope<Record<string, unknown>>, ApiEnvelope<Record<string, unknown>>>(`${base(planId)}/${encodeURIComponent(feeId)}/adjust`, { expectedSourceVersion, ...values }, { params: params(accountId) })
+  return normalizeFee(unwrapApiResponse(response))
+}
+
+export async function voidContainerFee(planId: string, accountId: string, feeId: string, expectedSourceVersion: number) {
+  await http.post(`${base(planId)}/${encodeURIComponent(feeId)}/void`, { expectedSourceVersion }, { params: params(accountId) })
+}
+
+export async function listApplicableFeeItems() {
+  const response = await http.get<ApiEnvelope<{ records: Record<string, unknown>[] }>, ApiEnvelope<{ records: Record<string, unknown>[] }>>('/platform/v1/fee-items', { params: { status: 'ACTIVE', page: 1, size: 200 } })
+  return (unwrapApiResponse(response).records || []).map((raw) => ({ id: id(raw.id), name: String(raw.feeTypeName || ''), warehouseReceivable: Boolean(raw.warehouseReceivable), warehousePayable: Boolean(raw.warehousePayable), pickupReceivable: Boolean(raw.pickupReceivable), pickupPayable: Boolean(raw.pickupPayable) }))
+}
+
+export async function listContainerCostDetails(customerId: string, containerId: string): Promise<ContainerCostDetail[]> {
+  const response = await http.get<ApiEnvelope<Record<string, unknown>[]>, ApiEnvelope<Record<string, unknown>[]>>('/platform/finance/v1/cost-entries', { params: { customerId } })
+  const costs = unwrapApiResponse(response).filter((raw) => id(raw.containerId) === containerId)
+  return Promise.all(costs.map(async (raw) => {
+    const costId = id(raw.id)
+    const detailResponse = await http.get<ApiEnvelope<{ cost: Record<string, unknown>; allocations: Record<string, unknown>[] }>, ApiEnvelope<{ cost: Record<string, unknown>; allocations: Record<string, unknown>[] }>>(`/platform/finance/v1/cost-entries/${encodeURIComponent(costId)}`, { params: { customerId } })
+    const detail = unwrapApiResponse(detailResponse)
+    return { id: costId, containerId: detail.cost.containerId == null ? null : id(detail.cost.containerId), supplierName: detail.cost.supplierName == null ? null : String(detail.cost.supplierName), feeItemName: String(detail.cost.feeItemName || ''), amount: numberValue(detail.cost.payableAmount), allocations: (detail.allocations || []).map((item) => ({ id: id(item.id), orderId: id(item.orderId), inboundId: item.inboundId == null ? null : id(item.inboundId), volumeCbm: numberValue(item.volumeCbm), totalVolumeCbm: numberValue(item.totalVolumeCbm), allocationRate: numberValue(item.allocationRate), allocatedAmount: numberValue(item.allocatedAmount), roundingAdjustment: Boolean(item.roundingAdjustment) })) }
+  }))
+}
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+const panel = readFileSync(resolve(process.cwd(), 'src/modules/loading-lists/components/ContainerFeesPanel.vue'), 'utf8')
+const detail = readFileSync(resolve(process.cwd(), 'src/modules/loading-lists/components/LoadingListDetailDrawer.vue'), 'utf8')
+
+describe('ContainerFeesPanel contract', () => {
+  it('is exposed from loading-list detail and derives customer context from real items', () => {
+    expect(detail).toContain('<ContainerFeesPanel :plan-id="summary.planId" :customers="feeCustomers" />')
+    expect(detail).toContain('item.accountId')
+    expect(panel).toContain('该柜次包含多个客户，请先选择费用归属客户')
+    expect(panel).toContain('装柜明细缺少客户归属，无法安全维护费用')
+  })
+
+  it('covers create, review, reject, approved adjustment and void actions', () => {
+    expect(panel).toContain('新增费用')
+    expect(panel).toContain("row.reviewStatus === 'PENDING'")
+    expect(panel).toContain('approveContainerFee')
+    expect(panel).toContain('rejectContainerFee')
+    expect(panel).toContain("row.reviewStatus === 'APPROVED'")
+    expect(panel).toContain('adjustContainerFee')
+    expect(panel).toContain('voidContainerFee')
+    expect(panel).toContain('调整后版本递增并重新进入待审核状态')
+  })
+
+  it('shows only server allocations and supplier snapshots', () => {
+    expect(panel).toContain('listContainerCostDetails')
+    expect(panel).toContain('仅展示 Finance 已持久化结果')
+    expect(panel).toContain("cost.supplierName || '服务端未返回'")
+    expect(panel).toContain('尚无与该柜次关联的财务分摊结果')
+    expect(panel).not.toMatch(/allocatedAmount\s*=|allocationRate\s*=/)
+  })
+})
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { Check, CircleX, Pencil, Plus, Trash2 } from '@lucide/vue'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
+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 StatusBadge from '@/shared/components/StatusBadge.vue'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import { adjustContainerFee, approveContainerFee, createContainerFee, listApplicableFeeItems, listContainerCostDetails, listContainerFees, rejectContainerFee, voidContainerFee, type ApplicableFeeItem, type ContainerCostDetail, type ContainerFeeDirection, type ContainerFeeResource, type ContainerFeeSaveRequest } from '../api/containerFees'
+
+const props = defineProps<{ planId: string; customers: Array<{ accountId: string; customerName: string | null }> }>()
+const access = useAccessPreviewStore()
+const accountId = ref('')
+const fees = ref<ContainerFeeResource[]>([])
+const feeItems = ref<ApplicableFeeItem[]>([])
+const costs = ref<ContainerCostDetail[]>([])
+const loading = ref(false)
+const error = ref<ApiErrorDetails | null>(null)
+const editorOpen = ref(false)
+const rejectOpen = ref(false)
+const saving = ref(false)
+const target = ref<ContainerFeeResource | null>(null)
+const formRef = ref<FormInstance>()
+const form = reactive<ContainerFeeSaveRequest>({ feeItemId: '', direction: 'RECEIVABLE', businessDate: new Date().toISOString().slice(0, 10), amount: 0, currency: 'CNY', settlementIncluded: true, remark: null })
+const rejection = ref('')
+
+const canView = computed(() => access.can('firstleg:inbound:fee-detail:view'))
+const canEdit = computed(() => access.can('firstleg:inbound:fee-detail:edit'))
+const canReview = computed(() => access.can('firstleg:inbound:fee-detail:review'))
+const customerOptions = computed(() => {
+  const unique = new Map<string, string>()
+  for (const item of props.customers) if (item.accountId) unique.set(item.accountId, item.customerName || '客户信息缺失')
+  return [...unique].map(([value, label]) => ({ value, label }))
+})
+const selectedCustomer = computed(() => customerOptions.value.find((item) => item.value === accountId.value))
+const applicableItems = computed(() => feeItems.value.filter((item) => form.direction === 'RECEIVABLE'
+  ? item.warehouseReceivable || item.pickupReceivable : item.warehousePayable || item.pickupPayable))
+const containerId = computed(() => fees.value.find((item) => item.containerBookingId)?.containerBookingId || null)
+const columns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', fixed: 'left', width: 300, slotName: 'actions', hideable: false, movable: false },
+  { key: 'feeItemName', prop: 'feeItemName', label: '费用项目', minWidth: 150 },
+  { key: 'direction', label: '方向', width: 90, slotName: 'direction' },
+  { key: 'amount', label: '金额(CNY)', width: 120, align: 'right', slotName: 'amount' },
+  { key: 'businessDate', prop: 'businessDate', label: '业务日期', width: 120 },
+  { key: 'reviewStatus', label: '审核状态', width: 110, slotName: 'reviewStatus' },
+  { key: 'sourceStatus', label: '来源状态', width: 100, slotName: 'sourceStatus' },
+  { key: 'settlementIncluded', label: '参与结算', width: 100, slotName: 'settlementIncluded' },
+  { key: 'remark', prop: 'remark', label: '备注', minWidth: 180, showOverflowTooltip: true },
+]
+const allocationColumns: DataTableColumn[] = [
+  { key: 'orderId', prop: 'orderId', label: '订单', fixed: 'left', minWidth: 150 },
+  { key: 'inboundId', prop: 'inboundId', label: '入库单', minWidth: 150 },
+  { key: 'volumeCbm', label: '订单体积(m³)', width: 125, align: 'right', slotName: 'volume' },
+  { key: 'allocationRate', label: '分摊比例', width: 110, align: 'right', slotName: 'rate' },
+  { key: 'allocatedAmount', label: '分摊金额(CNY)', width: 135, align: 'right', slotName: 'allocated' },
+]
+const rules: FormRules = { feeItemId: [{ required: true, message: '请选择费用项目', trigger: 'change' }], businessDate: [{ required: true, message: '请选择业务日期', trigger: 'change' }], amount: [{ type: 'number', min: 0, message: '金额不能小于 0', trigger: 'change' }] }
+
+function resetForm(item?: ContainerFeeResource) {
+  target.value = item || null
+  Object.assign(form, item ? { feeItemId: item.feeItemId, direction: item.direction, businessDate: item.businessDate, amount: item.amount, currency: 'CNY', settlementIncluded: item.settlementIncluded, remark: item.remark }
+    : { feeItemId: '', direction: 'RECEIVABLE', businessDate: new Date().toISOString().slice(0, 10), amount: 0, currency: 'CNY', settlementIncluded: true, remark: null })
+}
+
+async function load() {
+  if (!accountId.value || !canView.value) return
+  loading.value = true; error.value = null
+  try {
+    const [feeRows, items] = await Promise.all([listContainerFees(props.planId, accountId.value), listApplicableFeeItems()])
+    fees.value = feeRows; feeItems.value = items
+    costs.value = []
+    const currentContainerId = feeRows.find((item) => item.containerBookingId)?.containerBookingId
+    if (currentContainerId) costs.value = await listContainerCostDetails(accountId.value, currentContainerId)
+  } catch (cause) { error.value = getApiErrorDetails(cause, '柜次费用加载失败') }
+  finally { loading.value = false }
+}
+
+function openCreate() { resetForm(); editorOpen.value = true }
+function openAdjust(item: ContainerFeeResource) { resetForm(item); editorOpen.value = true }
+async function save() {
+  if (!accountId.value || !await formRef.value?.validate().catch(() => false)) return
+  saving.value = true
+  try {
+    if (target.value) await adjustContainerFee(props.planId, accountId.value, target.value.id, target.value.sourceVersion, { ...form })
+    else await createContainerFee(props.planId, accountId.value, { ...form })
+    editorOpen.value = false; ElMessage.success(target.value ? '费用调整已提交审核' : '费用已新增'); await load()
+  } catch (cause) { ElMessage.error(getApiErrorDetails(cause, '费用保存失败').message) }
+  finally { saving.value = false }
+}
+async function approve(item: ContainerFeeResource) { await approveContainerFee(props.planId, accountId.value, item.id).then(() => ElMessage.success('费用已审核通过')).then(load).catch((cause) => ElMessage.error(getApiErrorDetails(cause, '审核失败').message)) }
+function openReject(item: ContainerFeeResource) { target.value = item; rejection.value = ''; rejectOpen.value = true }
+async function reject() {
+  if (!target.value || !rejection.value.trim()) return ElMessage.warning('请输入驳回原因')
+  saving.value = true
+  try { await rejectContainerFee(props.planId, accountId.value, target.value.id, rejection.value.trim()); rejectOpen.value = false; ElMessage.success('费用已驳回'); await load() }
+  catch (cause) { ElMessage.error(getApiErrorDetails(cause, '驳回失败').message) } finally { saving.value = false }
+}
+async function voidFee(item: ContainerFeeResource) {
+  await ElMessageBox.confirm(`确认作废“${item.feeItemName}”费用？作废后将同步财务来源状态。`, '作废费用', { type: 'warning', confirmButtonText: '确认作废' })
+  await voidContainerFee(props.planId, accountId.value, item.id, item.sourceVersion).then(() => ElMessage.success('费用已作废')).then(load).catch((cause) => ElMessage.error(getApiErrorDetails(cause, '作废失败').message))
+}
+function money(value: number) { return value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }
+function initializeCustomer() { accountId.value = customerOptions.value.length === 1 ? customerOptions.value[0].value : '' }
+watch(customerOptions, initializeCustomer, { immediate: true })
+watch(accountId, () => { fees.value = []; costs.value = []; void load() })
+watch(() => form.direction, () => { if (!applicableItems.value.some((item) => item.id === form.feeItemId)) form.feeItemId = '' })
+onMounted(() => void load())
+</script>
+
+<template>
+  <section class="fees-panel surface-panel" aria-label="柜次费用维护">
+    <header class="fees-header"><div><h2>柜次费用</h2><p>费用与财务分摊均来自服务端真实记录</p></div><el-button v-if="canEdit && accountId" type="primary" @click="openCreate"><Plus :size="16" />新增费用</el-button></header>
+    <el-alert v-if="!canView" type="warning" :closable="false" show-icon title="当前账号没有查看柜次费用的权限" />
+    <template v-else>
+      <div v-if="customerOptions.length > 1" class="customer-context"><span>客户</span><el-select v-model="accountId" placeholder="请选择费用归属客户"><el-option v-for="item in customerOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></div>
+      <el-alert v-if="customerOptions.length === 0" type="warning" :closable="false" show-icon title="装柜明细缺少客户归属，无法安全维护费用" />
+      <el-alert v-else-if="!accountId" type="info" :closable="false" show-icon title="该柜次包含多个客户，请先选择费用归属客户" />
+      <LoadErrorState v-else-if="error" compact title="柜次费用加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
+      <DataTable v-else :data="fees" :columns="columns" :loading="loading" preference-key="container-fees" row-key="id" empty-text="当前客户暂无柜次费用">
+        <template #actions="{ row }"><div class="row-actions"><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="success" @click="approve(row as ContainerFeeResource)"><Check :size="15" />通过</el-button><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="danger" @click="openReject(row as ContainerFeeResource)"><CircleX :size="15" />驳回</el-button><el-button v-if="canEdit && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE'" link type="primary" @click="openAdjust(row as ContainerFeeResource)"><Pencil :size="15" />调整</el-button><el-button v-if="canReview && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE'" link type="danger" @click="voidFee(row as ContainerFeeResource)"><Trash2 :size="15" />作废</el-button></div></template>
+        <template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : 'warning'" effect="plain">{{ row.direction === 'RECEIVABLE' ? '应收' : '应付' }}</el-tag></template>
+        <template #amount="{ row }">{{ money(row.amount) }}</template><template #reviewStatus="{ row }"><StatusBadge :status="row.reviewStatus === 'PENDING' ? '待审核' : row.reviewStatus === 'APPROVED' ? '已通过' : '已驳回'" /></template><template #sourceStatus="{ row }"><StatusBadge :status="row.sourceStatus === 'ACTIVE' ? '有效' : '已作废'" /></template><template #settlementIncluded="{ row }">{{ row.settlementIncluded ? '是' : '否' }}</template>
+      </DataTable>
+
+      <div v-if="accountId" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div></header><el-empty v-if="!loading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>往来单位：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></article></div>
+    </template>
+
+    <AppDialog v-model="editorOpen" :title="target ? '调整已审核费用' : '新增柜次费用'" confirm-text="保存" :confirm-loading="saving" @confirm="save"><el-alert v-if="target" type="info" :closable="false" show-icon title="调整后版本递增并重新进入待审核状态" /><el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="fee-form"><el-form-item label="方向" prop="direction"><el-segmented v-model="form.direction" :options="[{ label: '应收', value: 'RECEIVABLE' }, { label: '应付', value: 'PAYABLE' }]" /></el-form-item><el-form-item label="费用项目" prop="feeItemId"><el-select v-model="form.feeItemId" filterable placeholder="请选择启用且适用的费用项目"><el-option v-for="item in applicableItems" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item><el-form-item label="业务日期" prop="businessDate"><el-date-picker v-model="form.businessDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="金额(CNY)" prop="amount"><el-input-number v-model="form.amount" :min="0" :precision="2" controls-position="right" /></el-form-item><el-form-item label="参与结算"><el-switch v-model="form.settlementIncluded" /></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item></el-form></AppDialog>
+    <AppDialog v-model="rejectOpen" title="驳回柜次费用" confirm-text="确认驳回" :confirm-loading="saving" @confirm="reject"><el-input v-model="rejection" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入驳回原因" /></AppDialog>
+  </section>
+</template>
+
+<style scoped>
+.fees-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: #fff; }
+.fees-header, .allocation-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
+.fees-header h2, .allocation-section h3 { margin: 0; font-size: 16px; }.fees-header p, .allocation-section p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; }
+.customer-context { display: flex; align-items: center; gap: 12px; padding: 0 18px 16px; }.customer-context > span { color: var(--cc-muted); font-size: 13px; }.customer-context :deep(.el-select) { width: min(320px, 100%); }
+.row-actions { display: flex; flex-wrap: wrap; }.allocation-section { border-top: 1px solid var(--cc-border); }.cost-block { border-top: 1px solid var(--cc-border); }.cost-summary { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 14px 18px; background: #f8fafc; font-size: 13px; }.cost-summary span { color: var(--cc-muted); }.fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 14px; }.fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
+@media (max-width: 640px) { .fees-header { align-items: stretch; flex-direction: column; }.fees-header .el-button { width: 100%; }.fee-form { grid-template-columns: 1fr; }.fee-form :deep(.el-form-item:last-child) { grid-column: auto; }.customer-context { align-items: stretch; flex-direction: column; } }
+</style>
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Pencil } from '@lucide/vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
+import ContainerFeesPanel from './ContainerFeesPanel.vue'
 import { loadingListStatusLabel } from '../status'
 import type { ApiErrorDetails } from '@/shared/api/http'
 import type { LoadingDetail, LoadingListMode, LoadingListSummary, PreloadSummary } from '../api/platformLoadingLists'
@@ -19,7 +19,6 @@ const props = defineProps<{
  canEdit: boolean
 }>()

-const open = defineModel<boolean>({ default: false })
 const emit = defineEmits<{ retry: []; edit: [] }>()

 const itemColumns: DataTableColumn[] = [
@@ -43,6 +42,11 @@ const itemColumns: DataTableColumn[] = [

 const summary = computed<LoadingListSummary | null>(() => props.detail?.summary || null)
 const preloadSummary = computed(() => props.mode === 'preload' ? summary.value as PreloadSummary | null : null)
+const feeCustomers = computed(() => {
+  const customers = new Map<string, string | null>()
+  for (const item of props.detail?.items || []) if (item.accountId) customers.set(item.accountId, item.customerName)
+  return [...customers].map(([accountId, customerName]) => ({ accountId, customerName }))
+})
 const title = computed(() => {
  if (!summary.value) return props.mode === 'preload' ? '预装清单详情' : '装柜清单详情'
  const number = props.mode === 'preload'
@@ -70,14 +74,7 @@ function formatNumber(value?: number | null, digits = 3) {
 </script>

 <template>
-  <AppDrawer
-    v-model="open"
-    :title="title"
-    size="min(1180px, 96vw)"
-    :loading="loading"
-    :show-footer="false"
-    destroy-on-close
-  >
+  <section v-loading="loading" class="loading-detail-content" :aria-label="title" :aria-busy="loading">
    <LoadErrorState v-if="error" title="清单详情加载失败" :message="error.message" @retry="emit('retry')">
      <template #details><ApiErrorMeta :details="error" /></template>
    </LoadErrorState>
@@ -122,6 +119,8 @@ function formatNumber(value?: number | null, digits = 3) {
        </DataTable>
      </section>

+      <ContainerFeesPanel :plan-id="summary.planId" :customers="feeCustomers" />
+
      <section class="history-section surface-panel" aria-label="操作历史">
        <header><h2>操作历史</h2><span>{{ detail.histories.length }} 条</span></header>
        <el-empty v-if="detail.histories.length === 0" description="暂无操作历史" :image-size="72" />
@@ -137,11 +136,11 @@ function formatNumber(value?: number | null, digits = 3) {
      </section>
      </DetailPageLayout>
    </div>
-  </AppDrawer>
+  </section>
 </template>

 <style scoped>
-.detail-layout { display: grid; gap: 16px; }
+.loading-detail-content, .detail-layout { display: grid; min-width: 0; gap: 16px; }
 .detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--cc-border); background: var(--cc-border); }
 .detail-summary > div { display: flex; min-width: 0; min-height: 78px; flex-direction: column; justify-content: center; gap: 7px; padding: 14px 16px; background: #fff; }
 .detail-summary span { color: var(--cc-muted); font-size: 12px; }
@@ -4,6 +4,7 @@ import { resolve } from 'node:path'

 const source = readFileSync(resolve(process.cwd(), 'src/modules/loading-lists/components/LoadingListsView.vue'), 'utf8')
 const detailSource = readFileSync(resolve(process.cwd(), 'src/modules/loading-lists/components/LoadingListDetailDrawer.vue'), 'utf8')
+const preloadDetailSource = readFileSync(resolve(process.cwd(), 'src/modules/loading-lists/pages/PreloadPlanDetailView.vue'), 'utf8')

 describe('LoadingListsView', () => {
  it('keeps the operation column first and fixed left in both lists', () => {
@@ -24,13 +25,31 @@ describe('LoadingListsView', () => {
    expect(source).toContain('MISSING_WAREHOUSE_CONTEXT')
  })

-  it('uses the shared query, table, drawer, dialog and error components', () => {
+  it('uses the shared query, table, dialog and error components without a detail drawer', () => {
    expect(source).toContain('QueryToolbar')
    expect(source).toContain('DataTable')
    expect(source).toContain('AppDialog')
    expect(source).toContain('LoadErrorState')
    expect(source).toContain('ApiErrorMeta')
-    expect(detailSource).toContain('AppDrawer')
+    expect(detailSource).not.toContain('AppDrawer')
+    expect(detailSource).toContain('ContainerFeesPanel')
+  })
+
+  it('opens preload detail as a route and confirmed detail inline on the list page', () => {
+    expect(source).toContain("name: 'preload-plan-detail'")
+    expect(source).toContain('v-if="!isPreload && (detailLoading || detailError || detail)"')
+    expect(source).toContain('class="confirmed-inline-detail surface-panel"')
+    expect(preloadDetailSource).toContain('返回列表')
+    expect(preloadDetailSource).toContain('router.back()')
+  })
+
+  it('keeps the real transport edit contract in a 620px centered modal', () => {
+    expect(source).toContain('class="loading-transport-dialog"')
+    expect(source).toContain('width="min(620px, calc(100vw - 28px))"')
+    expect(preloadDetailSource).toContain('width="min(620px, calc(100vw - 28px))"')
+    expect(source).not.toContain('备注信息（仅自己可见）')
+    expect(source).not.toContain('备注信息（客户可见）')
+    expect(source).not.toContain('备注信息（仓库可见）')
  })

  it('only exposes transport editing for LOADING preload details', () => {
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { Eye, Pencil } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -31,6 +31,7 @@ import {

 const props = defineProps<{ mode: LoadingListMode }>()
 const route = useRoute()
+const router = useRouter()
 const access = useAccessPreviewStore()
 const rows = ref<LoadingListSummary[]>([])
 const loading = ref(false)
@@ -39,7 +40,6 @@ const page = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 const query = reactive<QueryModel>({ keyword: '', createdRange: [] })
-const detailOpen = ref(false)
 const detailLoading = ref(false)
 const detailError = ref<ApiErrorDetails | null>(null)
 const detail = ref<LoadingDetail | null>(null)
@@ -150,11 +150,14 @@ async function openDeepLinkedDetail() {
  const key = `${props.mode}:${planId}:${warehouseId}`
  if (handledDeepLink.value === key) return
  handledDeepLink.value = key
+  if (isPreload.value) {
+    await router.replace({ name: 'preload-plan-detail', params: { planId }, query: { warehouseId } })
+    return
+  }
  selectedPlanId.value = planId
  selectedWarehouseId.value = warehouseId
  detail.value = null
  detailError.value = null
-  detailOpen.value = true
  await loadDetail()
  const expectedStatuses = isPreload.value ? ['EDITING', 'LOADING'] : ['COMPLETED']
  const loadedDetail = detail.value as LoadingDetail | null
@@ -198,11 +201,14 @@ async function loadDetail() {

 function openDetail(rowValue: object) {
  const row = rowValue as LoadingListSummary
+  if (isPreload.value) {
+    void router.push({ name: 'preload-plan-detail', params: { planId: String(row.planId) }, query: { warehouseId: String(row.warehouseId || '') } })
+    return
+  }
  selectedPlanId.value = String(row.planId)
  selectedWarehouseId.value = String(row.warehouseId || '')
  detail.value = null
  detailError.value = null
-  detailOpen.value = true
  void loadDetail()
 }

@@ -213,7 +219,6 @@ async function openEditFromRow(rowValue: object) {
  selectedWarehouseId.value = String(row.warehouseId || '')
  detail.value = null
  detailError.value = null
-  detailOpen.value = true
  await loadDetail()
  const loadedDetail = detail.value as LoadingDetail | null
  if (loadedDetail && ['EDITING', 'LOADING'].includes(loadedDetail.summary.status)) openEdit()
@@ -317,7 +322,8 @@ onMounted(() => {
    </ListPageLayout>

    <LoadingListDetailDrawer
-      v-model="detailOpen"
+      v-if="!isPreload && (detailLoading || detailError || detail)"
+      class="confirmed-inline-detail surface-panel"
      :mode="mode"
      :loading="detailLoading"
      :detail="detail"
@@ -329,7 +335,9 @@ onMounted(() => {

    <AppDialog
      v-model="editOpen"
+      class="loading-transport-dialog"
      title="编辑预装运输信息"
+      width="min(620px, calc(100vw - 28px))"
      confirm-text="保存"
      :confirm-loading="editSaving"
      :confirm-disabled="!canEdit"
@@ -352,7 +360,9 @@ onMounted(() => {
 <style scoped>
 .loading-lists-page { display: grid; min-width: 0; gap: 16px; }
 .table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: #fff; }
+.confirmed-inline-detail { padding: 20px; border: 1px solid var(--cc-border); background: #fff; }
 .transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; }
 .transport-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
-@media (max-width: 640px) { .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
+:global(.loading-transport-dialog.el-dialog) { max-height: 90vh; overflow: hidden; }
+@media (max-width: 720px) { .confirmed-inline-detail { padding: 12px; } .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
 </style>
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+const source = readFileSync(resolve(process.cwd(), 'src/modules/loading-lists/pages/PreloadPlanDetailView.vue'), 'utf8')
+
+describe('PreloadPlanDetailView prototype contract', () => {
+  it('is a formal responsive detail page with a return action', () => {
+    expect(source).toContain('<AdminPage>')
+    expect(source).toContain('返回列表')
+    expect(source).toContain('<ArrowLeft')
+    expect(source).toContain("router.push({ name: 'loading-plans' })")
+    expect(source).not.toContain('AppDrawer')
+  })
+
+  it('requires the real warehouse context and preserves status boundaries', () => {
+    expect(source).toContain('MISSING_WAREHOUSE_CONTEXT')
+    expect(source).toContain("['EDITING', 'LOADING'].includes(result.summary.status)")
+    expect(source).toContain('MODE_STATUS_MISMATCH')
+  })
+
+  it('uses the real optimistic-lock transport endpoint without inventing note writes', () => {
+    expect(source).toContain('updatePreloadTransport')
+    expect(source).toContain('expectedVersion: detail.value.summary.version')
+    expect(source).toContain('width="min(620px, calc(100vw - 28px))"')
+    expect(source).not.toContain('saveMfNote')
+  })
+})
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ArrowLeft } from '@lucide/vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import LoadingListDetailDrawer from '../components/LoadingListDetailDrawer.vue'
+import { getPreloadPlan, updatePreloadTransport, type LoadingDetail, type PreloadSummary } from '../api/platformLoadingLists'
+
+const route = useRoute()
+const router = useRouter()
+const access = useAccessPreviewStore()
+const loading = ref(false)
+const detail = ref<LoadingDetail<PreloadSummary> | null>(null)
+const error = ref<ApiErrorDetails | null>(null)
+const editOpen = ref(false)
+const editSaving = ref(false)
+const editError = ref<ApiErrorDetails | null>(null)
+const editFormRef = ref<FormInstance>()
+const editForm = reactive({ containerNo: '', voyageNo: '', operationReason: '' })
+const planId = computed(() => String(route.params.planId || ''))
+const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')
+const canEdit = computed(() => access.can('platform:firstleg:preload:edit'))
+const editRules: FormRules = {
+  containerNo: [{ max: 64, message: '集装箱号不能超过 64 个字符', trigger: 'blur' }],
+  voyageNo: [{ max: 64, message: '航次不能超过 64 个字符', trigger: 'blur' }],
+  operationReason: [{ max: 500, message: '修改原因不能超过 500 个字符', trigger: 'blur' }],
+}
+
+async function loadDetail() {
+  if (!planId.value || !warehouseId.value) {
+    error.value = { code: 'MISSING_WAREHOUSE_CONTEXT', message: '该清单缺少所属仓库信息，无法安全查询详情，请返回列表重新进入。' }
+    return
+  }
+  loading.value = true
+  error.value = null
+  try {
+    const result = await getPreloadPlan(planId.value, warehouseId.value)
+    if (!['EDITING', 'LOADING'].includes(result.summary.status)) {
+      detail.value = null
+      error.value = { code: 'MODE_STATUS_MISMATCH', message: '该计划不属于预装清单状态，请从对应清单入口查看。' }
+      return
+    }
+    detail.value = result
+  } catch (cause) {
+    error.value = getApiErrorDetails(cause, '预装清单详情加载失败，请稍后重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+function goBack() {
+  if (window.history.length > 1) router.back()
+  else void router.push({ name: 'loading-plans' })
+}
+
+function openEdit() {
+  if (!detail.value || !['EDITING', 'LOADING'].includes(detail.value.summary.status)) return
+  editForm.containerNo = detail.value.summary.containerNo || ''
+  editForm.voyageNo = detail.value.summary.voyageNo || ''
+  editForm.operationReason = ''
+  editError.value = null
+  editOpen.value = true
+}
+
+async function saveTransport() {
+  if (!detail.value || !(await editFormRef.value?.validate().catch(() => false))) return
+  editSaving.value = true
+  editError.value = null
+  try {
+    detail.value = await updatePreloadTransport(planId.value, warehouseId.value, {
+      containerNo: editForm.containerNo.trim() || null,
+      voyageNo: editForm.voyageNo.trim() || null,
+      operationReason: editForm.operationReason.trim() || null,
+      expectedVersion: detail.value.summary.version,
+    })
+    editOpen.value = false
+    ElMessage.success('运输信息已更新')
+  } catch (cause) {
+    const details = getApiErrorDetails(cause, '运输信息保存失败，请刷新详情后重试')
+    if (details.code === 'A0409' || /版本|并发|已被其他人修改/.test(details.message)) {
+      await loadDetail()
+      editError.value = { ...details, message: '运输信息已被其他人修改，系统已刷新最新版本；当前输入已保留，请核对后重新保存。' }
+    } else editError.value = details
+  } finally {
+    editSaving.value = false
+  }
+}
+
+onMounted(() => void loadDetail())
+</script>
+
+<template>
+  <AdminPage>
+    <div class="preload-detail-page">
+      <el-button link type="primary" class="back-button" @click="goBack"><ArrowLeft :size="16" />返回列表</el-button>
+      <LoadErrorState v-if="error && !detail" title="预装清单详情加载失败" :message="error.message" :loading="loading" @retry="loadDetail">
+        <template #details><ApiErrorMeta :details="error" /></template>
+      </LoadErrorState>
+      <LoadingListDetailDrawer v-else :mode="'preload'" :loading="loading" :detail="detail" :error="error" :can-edit="canEdit" @retry="loadDetail" @edit="openEdit" />
+    </div>
+
+    <AppDialog v-model="editOpen" class="loading-transport-dialog" title="编辑预装运输信息" width="min(620px, calc(100vw - 28px))" confirm-text="保存" :confirm-loading="editSaving" :confirm-disabled="!canEdit" @confirm="saveTransport">
+      <el-form ref="editFormRef" class="transport-form" :model="editForm" :rules="editRules" label-position="top">
+        <el-form-item label="集装箱号" prop="containerNo"><el-input v-model="editForm.containerNo" maxlength="64" placeholder="请输入集装箱号" /></el-form-item>
+        <el-form-item label="航次" prop="voyageNo"><el-input v-model="editForm.voyageNo" maxlength="64" placeholder="请输入航次" /></el-form-item>
+        <el-form-item label="修改原因" prop="operationReason"><el-input v-model="editForm.operationReason" type="textarea" :rows="3" maxlength="500" placeholder="选填，填写后将记录在操作历史中" /></el-form-item>
+      </el-form>
+      <LoadErrorState v-if="editError" compact title="保存失败" :message="editError.message" :show-retry="false"><template #details><ApiErrorMeta :details="editError" /></template></LoadErrorState>
+    </AppDialog>
+  </AdminPage>
+</template>
+
+<style scoped>
+.preload-detail-page { display: grid; min-width: 0; max-width: 1180px; gap: 16px; }
+.back-button { width: fit-content; }
+.transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
+.transport-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
+:global(.loading-transport-dialog.el-dialog) { max-height: 90vh; overflow: hidden; }
+@media (max-width: 720px) { .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
+</style>
@@ -2,9 +2,10 @@ import { describe, expect, it } from 'vitest'
 import { loadingListRoutes } from './routes'

 describe('loading list routes', () => {
-  it('declares separate preload and completed list entries with backend permissions', () => {
+  it('declares preload list/detail and completed list entries with backend permissions', () => {
    expect(loadingListRoutes.map((route) => [route.path, route.meta.permission])).toEqual([
      ['loading-plans', 'platform:firstleg:preload:list'],
+      ['loading-plans/:planId', 'platform:firstleg:preload:view'],
      ['loading-lists', 'platform:firstleg:loading-list:list'],
    ])
  })
@@ -11,6 +11,16 @@ export const loadingListRoutes = [
      permission: 'platform:firstleg:preload:list',
    },
  },
+  {
+    path: 'loading-plans/:planId',
+    name: 'preload-plan-detail',
+    component: () => import('./pages/PreloadPlanDetailView.vue'),
+    meta: {
+      title: '预装清单详情',
+      description: '查看预装清单基本信息、装柜货物明细和操作历史',
+      permission: 'platform:firstleg:preload:view',
+    },
+  },
  {
    path: 'loading-lists',
    name: 'loading-lists',
@@ -0,0 +1,30 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http } from '@/shared/api/http'
+import {
+  adjustInboundFeeDetail, createInboundFeeDetail, deleteInboundFeeDetail, listInboundFeeDetails,
+  reviewInboundFeeDetail, updateInboundFeeDetail, voidInboundFeeDetail, type SaveInboundFeeDetailRequest,
+} from './inboundFeeDetails'
+
+vi.mock('@/shared/api/http', async () => {
+  const actual = await vi.importActual<typeof import('@/shared/api/http')>('@/shared/api/http')
+  return { ...actual, http: { get: vi.fn(), post: vi.fn(), put: vi.fn(), delete: vi.fn() } }
+})
+
+describe('inbound fee-detail API', () => {
+  beforeEach(() => vi.clearAllMocks())
+  it('maps the complete write contract and optimistic version', async () => {
+    const payload: SaveInboundFeeDetailRequest = { feeItemId: '31', direction: 'PAYABLE', businessDate: '2026-08-12', unitPrice: 12.5, currency: 'CNY', amount: 125, settlementIncluded: true, partnerId: '41', partnerName: '测试供应商', remark: '验收' }
+    vi.mocked(http.get).mockResolvedValue({ code: '200', message: 'success', data: [] })
+    vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'success', data: null })
+    vi.mocked(http.put).mockResolvedValue({ code: '200', message: 'success', data: payload })
+    vi.mocked(http.delete).mockResolvedValue({ code: '200', message: 'success', data: null })
+    await listInboundFeeDetails('100', '88'); await createInboundFeeDetail('100', '88', payload)
+    await updateInboundFeeDetail('100', '88', '11', payload); await reviewInboundFeeDetail('100', '88', '11', 'approve')
+    await reviewInboundFeeDetail('100', '88', '11', 'reject', '金额有误'); await adjustInboundFeeDetail('100', '88', '11', 3, payload)
+    await voidInboundFeeDetail('100', '88', '11', 3); await deleteInboundFeeDetail('100', '88', '11')
+    expect(http.get).toHaveBeenCalledWith('/platform/v1/inbounds/88/fee-details', { params: { accountId: '100' } })
+    expect(http.post).toHaveBeenCalledWith('/platform/v1/inbounds/88/fee-details/11/adjust', payload, { params: { accountId: '100', expectedSourceVersion: 3 } })
+    expect(http.post).toHaveBeenCalledWith('/platform/v1/inbounds/88/fee-details/11/void', { expectedSourceVersion: 3 }, { params: { accountId: '100' } })
+    expect(http.delete).toHaveBeenCalledWith('/platform/v1/inbounds/88/fee-details/11', { params: { accountId: '100' } })
+  })
+})
@@ -0,0 +1,105 @@
+import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
+
+export type InboundFeeDirection = 'RECEIVABLE' | 'PAYABLE'
+export type InboundFeeReviewStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
+
+export interface InboundFeeDetail {
+  id: string | number
+  inboundId: string | number
+  feeItemId: string | number
+  sourceType: string
+  sourceFeeVersion: number
+  inboundCode: string | null
+  direction: InboundFeeDirection
+  partnerId: string | number | null
+  partnerName: string | null
+  businessDate: string
+  customerName: string | null
+  feeTypeNameSnapshot: string
+  unitPrice: number
+  currency: string
+  amount: number
+  remark: string | null
+  reviewStatus: InboundFeeReviewStatus
+  reviewReason: string | null
+  reviewerName: string | null
+  reviewedAt: string | null
+  publicationStatus: string
+  settlementIncluded: boolean
+}
+
+export interface SaveInboundFeeDetailRequest {
+  feeItemId: string | number
+  direction: InboundFeeDirection
+  businessDate: string
+  unitPrice: number
+  currency: string
+  amount: number
+  settlementIncluded: boolean
+  partnerId: string | number | null
+  partnerName: string | null
+  remark: string | null
+}
+
+export interface InboundFeeItemOption {
+  id: string | number
+  feeTypeName: string
+  warehousePayable: boolean
+  warehouseReceivable: boolean
+}
+
+export interface InboundFeePartnerOption { id: string | number; partnerName: string }
+
+function basePath(inboundId: string) { return `/platform/v1/inbounds/${encodeURIComponent(inboundId)}/fee-details` }
+const config = (accountId: string) => ({ params: { accountId } })
+
+export async function listInboundFeeDetails(accountId: string, inboundId: string) {
+  const response = await http.get<unknown, ApiEnvelope<InboundFeeDetail[]>>(basePath(inboundId), config(accountId))
+  return unwrapApiResponse(response) || []
+}
+
+export async function createInboundFeeDetail(accountId: string, inboundId: string, payload: SaveInboundFeeDetailRequest) {
+  return unwrapApiResponse(await http.post<unknown, ApiEnvelope<InboundFeeDetail>>(basePath(inboundId), payload, config(accountId)))
+}
+
+export async function updateInboundFeeDetail(accountId: string, inboundId: string, detailId: string, payload: SaveInboundFeeDetailRequest) {
+  return unwrapApiResponse(await http.put<unknown, ApiEnvelope<InboundFeeDetail>>(`${basePath(inboundId)}/${encodeURIComponent(detailId)}`, payload, config(accountId)))
+}
+
+export async function deleteInboundFeeDetail(accountId: string, inboundId: string, detailId: string) {
+  return unwrapApiResponse(await http.delete<unknown, ApiEnvelope<null>>(`${basePath(inboundId)}/${encodeURIComponent(detailId)}`, config(accountId)))
+}
+
+export async function reviewInboundFeeDetail(accountId: string, inboundId: string, detailId: string, action: 'approve' | 'reject', reason?: string) {
+  return unwrapApiResponse(await http.post<unknown, ApiEnvelope<null>>(
+    `${basePath(inboundId)}/${encodeURIComponent(detailId)}/${action}`,
+    action === 'reject' ? { reason } : undefined, config(accountId),
+  ))
+}
+
+export async function adjustInboundFeeDetail(accountId: string, inboundId: string, detailId: string, expectedSourceVersion: number, payload: SaveInboundFeeDetailRequest) {
+  return unwrapApiResponse(await http.post<unknown, ApiEnvelope<InboundFeeDetail>>(
+    `${basePath(inboundId)}/${encodeURIComponent(detailId)}/adjust`, payload,
+    { params: { accountId, expectedSourceVersion } },
+  ))
+}
+
+export async function voidInboundFeeDetail(accountId: string, inboundId: string, detailId: string, expectedSourceVersion: number) {
+  return unwrapApiResponse(await http.post<unknown, ApiEnvelope<null>>(
+    `${basePath(inboundId)}/${encodeURIComponent(detailId)}/void`, { expectedSourceVersion }, config(accountId),
+  ))
+}
+
+export async function listInboundFeeItemOptions() {
+  const response = await http.get<unknown, ApiEnvelope<{ records: InboundFeeItemOption[] }>>(
+    '/platform/v1/fee-items', { params: { status: 'ACTIVE', page: 1, size: 200 } },
+  )
+  return unwrapApiResponse(response).records || []
+}
+
+export async function listInboundFeePartnerOptions() {
+  const response = await http.get<unknown, ApiEnvelope<{ records: InboundFeePartnerOption[] }>>(
+    '/platform/v1/partners', { params: { status: 'ACTIVE', page: 1, size: 200 } },
+  )
+  return unwrapApiResponse(response).records || []
+}
@@ -0,0 +1,108 @@
+import ElementPlus from 'element-plus'
+import { createPinia, setActivePinia } from 'pinia'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, 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 {
+  adjustInboundFeeDetail, createInboundFeeDetail, deleteInboundFeeDetail,
+  listInboundFeeDetails, listInboundFeeItemOptions, listInboundFeePartnerOptions,
+  reviewInboundFeeDetail, updateInboundFeeDetail, voidInboundFeeDetail,
+} from '@/modules/unified-orders/api/inboundFeeDetails'
+import InboundFeeDetailManager from './InboundFeeDetailManager.vue'
+import type { InboundFeeDetail } from '@/modules/unified-orders/api/inboundFeeDetails'
+
+vi.mock('@/modules/unified-orders/api/inboundFeeDetails', () => ({
+  listInboundFeeDetails: vi.fn(), listInboundFeeItemOptions: vi.fn(), listInboundFeePartnerOptions: vi.fn(),
+  createInboundFeeDetail: vi.fn(), updateInboundFeeDetail: vi.fn(), deleteInboundFeeDetail: vi.fn(),
+  reviewInboundFeeDetail: vi.fn(), adjustInboundFeeDetail: vi.fn(), voidInboundFeeDetail: vi.fn(),
+}))
+
+const pending: InboundFeeDetail = {
+  id: '11', inboundId: '88', feeItemId: '31', sourceType: 'MANUAL', sourceFeeVersion: 1,
+  inboundCode: 'RK-88', direction: 'RECEIVABLE', partnerId: null, partnerName: null,
+  businessDate: '2026-08-12', customerName: '测试客户', feeTypeNameSnapshot: '操作费',
+  unitPrice: 10, currency: 'CNY', amount: 100, remark: 'marker', reviewStatus: 'PENDING',
+  reviewReason: null, reviewerName: null, reviewedAt: null, publicationStatus: 'DRAFT', settlementIncluded: true,
+}
+const approved: InboundFeeDetail = { ...pending, id: '12', sourceFeeVersion: 3, reviewStatus: 'APPROVED', publicationStatus: 'PUBLISHED' }
+
+enableAutoUnmount(afterEach)
+
+function mountManager(permissions: string[]) {
+  const pinia = createPinia(); setActivePinia(pinia)
+  const auth = useAuthStore(); auth.token = 'token'; auth.permissions = permissions
+  useAccessPreviewStore().initializeAfterLogin()
+  return mount(InboundFeeDetailManager, { attachTo: document.body, props: { accountId: '100', inboundId: '88' }, global: { plugins: [pinia, ElementPlus] } })
+}
+
+describe('InboundFeeDetailManager', () => {
+  beforeEach(() => {
+    vi.clearAllMocks(); document.body.innerHTML = ''
+    vi.mocked(listInboundFeeDetails).mockResolvedValue([pending, approved])
+    vi.mocked(listInboundFeeItemOptions).mockResolvedValue([{ id: '31', feeTypeName: '操作费', warehouseReceivable: true, warehousePayable: true }])
+    vi.mocked(listInboundFeePartnerOptions).mockResolvedValue([{ id: '41', partnerName: '测试往来单位' }])
+    vi.mocked(createInboundFeeDetail).mockResolvedValue(pending)
+    vi.mocked(updateInboundFeeDetail).mockResolvedValue(pending)
+    vi.mocked(adjustInboundFeeDetail).mockResolvedValue({ ...approved, reviewStatus: 'PENDING' })
+    vi.mocked(reviewInboundFeeDetail).mockResolvedValue(null)
+    vi.mocked(deleteInboundFeeDetail).mockResolvedValue(null)
+    vi.mocked(voidInboundFeeDetail).mockResolvedValue(null)
+  })
+
+  it('renders actions from backend status and exact permissions', async () => {
+    const wrapper = mountManager(['firstleg:inbound:fee-detail:view', 'firstleg:inbound:fee-detail:edit', 'firstleg:inbound:fee-detail:delete', 'firstleg:inbound:fee-detail:review'])
+    await flushPromises()
+    expect(listInboundFeeDetails).toHaveBeenCalledWith('100', '88')
+    const first = wrapper.findAll('.el-table__row')[0]!.text()
+    const second = wrapper.findAll('.el-table__row')[1]!.text()
+    const secondButtons = wrapper.findAll('.el-table__row')[1]!.findAll('button').map((button) => button.text())
+    expect(first).toContain('编辑'); expect(first).toContain('审核'); expect(first).toContain('驳回')
+    expect(second).toContain('调整'); expect(second).toContain('作废'); expect(secondButtons).not.toContain('审核')
+    expect(wrapper.find('th').text()).toContain('操作')
+  })
+
+  it('does not request or expose fee rows without view permission', async () => {
+    mountManager([]); await flushPromises()
+    expect(listInboundFeeDetails).not.toHaveBeenCalled()
+    expect(document.body.textContent).toContain('没有查看费用明细的权限')
+  })
+
+  it('approves a pending fee then refreshes rows and emits changed', async () => {
+    const wrapper = mountManager(['firstleg:inbound:fee-detail:view', 'firstleg:inbound:fee-detail:review'])
+    await flushPromises()
+    wrapper.findAll('button').find((button) => button.text().includes('审核'))?.trigger('click')
+    await flushPromises()
+    expect(reviewInboundFeeDetail).toHaveBeenCalledWith('100', '88', '11', 'approve')
+    expect(listInboundFeeDetails).toHaveBeenCalledTimes(2)
+    expect(wrapper.emitted('changed')).toHaveLength(1)
+  })
+
+  it('preserves request and trace IDs when a write fails', async () => {
+    vi.mocked(reviewInboundFeeDetail).mockRejectedValue(new ApiResponseError('状态冲突', 'A0409', 409, null, 'request-fee', 'trace-fee'))
+    const wrapper = mountManager(['firstleg:inbound:fee-detail:view', 'firstleg:inbound:fee-detail:review'])
+    await flushPromises()
+    wrapper.findAll('button').find((button) => button.text().includes('审核'))?.trigger('click')
+    await flushPromises()
+    expect(document.body.textContent).toContain('request-fee')
+    expect(document.body.textContent).toContain('trace-fee')
+  })
+
+  it('keeps currency fixed to CNY in the form and write payload', async () => {
+    const wrapper = mountManager(['firstleg:inbound:fee-detail:view', 'firstleg:inbound:fee-detail:edit'])
+    await flushPromises()
+    await wrapper.findAll('button').find((button) => button.text().includes('新增费用'))?.trigger('click')
+    await flushPromises()
+    const currency = document.querySelector<HTMLInputElement>('input[aria-label="货币 CNY"]')
+    expect(currency?.readOnly).toBe(true)
+    expect(currency?.value).toBe('CNY')
+  })
+
+  it('uses only the Element Plus table scroller without an outer horizontal scrollbar', async () => {
+    const wrapper = mountManager(['firstleg:inbound:fee-detail:view'])
+    await flushPromises()
+    expect(wrapper.find('.fee-table-shell').exists()).toBe(true)
+    expect(wrapper.find('.detail-table-wrap').exists()).toBe(false)
+  })
+})
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { Check, MoreHorizontal, Pencil, Plus, RefreshCw, Trash2, Undo2, X } from '@lucide/vue'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import StatusBadge from '@/shared/components/StatusBadge.vue'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import {
+  adjustInboundFeeDetail, createInboundFeeDetail, deleteInboundFeeDetail,
+  listInboundFeeDetails, listInboundFeeItemOptions, listInboundFeePartnerOptions,
+  reviewInboundFeeDetail, updateInboundFeeDetail, voidInboundFeeDetail,
+} from '@/modules/unified-orders/api/inboundFeeDetails'
+import type {
+  InboundFeeDetail, InboundFeeItemOption,
+  InboundFeePartnerOption, SaveInboundFeeDetailRequest,
+} from '@/modules/unified-orders/api/inboundFeeDetails'
+
+const props = defineProps<{ accountId: string; inboundId: string }>()
+const emit = defineEmits<{ changed: [] }>()
+const access = useAccessPreviewStore()
+const rows = ref<InboundFeeDetail[]>([])
+const feeItems = ref<InboundFeeItemOption[]>([])
+const partners = ref<InboundFeePartnerOption[]>([])
+const loading = ref(false)
+const saving = ref(false)
+const loadError = ref<ApiErrorDetails | null>(null)
+const actionError = ref<ApiErrorDetails | null>(null)
+const editorOpen = ref(false)
+const editorMode = ref<'create' | 'edit' | 'adjust'>('create')
+const target = ref<InboundFeeDetail | null>(null)
+const formRef = ref<FormInstance>()
+const rejectOpen = ref(false)
+const rejectReason = ref('')
+
+const emptyForm = (): SaveInboundFeeDetailRequest => ({
+  feeItemId: '', direction: 'RECEIVABLE', businessDate: new Date().toISOString().slice(0, 10),
+  unitPrice: 0, currency: 'CNY', amount: 0, settlementIncluded: true,
+  partnerId: null, partnerName: null, remark: null,
+})
+const form = reactive<SaveInboundFeeDetailRequest>(emptyForm())
+const rules: FormRules = {
+  feeItemId: [{ required: true, message: '请选择费用项目', trigger: 'change' }],
+  businessDate: [{ required: true, message: '请选择业务发生日', trigger: 'change' }],
+  unitPrice: [{ required: true, type: 'number', min: 0, message: '单价不能小于 0', trigger: 'change' }],
+  amount: [{ required: true, type: 'number', min: 0, message: '金额不能小于 0', trigger: 'change' }],
+  currency: [{ required: true, pattern: /^[A-Z]{3}$/, message: '货币须为三个大写字母', trigger: 'blur' }],
+}
+const canView = computed(() => access.can('firstleg:inbound:fee-detail:view'))
+const applicableItems = computed(() => feeItems.value.filter((item) => form.direction === 'RECEIVABLE' ? item.warehouseReceivable : item.warehousePayable))
+
+function canEdit(row: InboundFeeDetail) { return access.can('firstleg:inbound:fee-detail:edit') && row.reviewStatus !== 'APPROVED' }
+function canDelete(row: InboundFeeDetail) { return access.can('firstleg:inbound:fee-detail:delete') && row.reviewStatus !== 'APPROVED' }
+function canReview(row: InboundFeeDetail) { return access.can('firstleg:inbound:fee-detail:review') && row.reviewStatus === 'PENDING' }
+function canAdjust(row: InboundFeeDetail) { return access.can('firstleg:inbound:fee-detail:edit') && row.reviewStatus === 'APPROVED' && row.publicationStatus !== 'VOIDED' }
+function canVoid(row: InboundFeeDetail) { return access.can('firstleg:inbound:fee-detail:review') && row.reviewStatus === 'APPROVED' && row.publicationStatus !== 'VOIDED' }
+function reviewLabel(value: string) { return ({ PENDING: '待审核', APPROVED: '已审核', REJECTED: '已驳回' } as Record<string, string>)[value] || value }
+function directionLabel(value: string) { return value === 'RECEIVABLE' ? '应收' : '应付' }
+
+async function load() {
+  if (!canView.value) return
+  loading.value = true; loadError.value = null
+  try { rows.value = await listInboundFeeDetails(props.accountId, props.inboundId) }
+  catch (error) { loadError.value = getApiErrorDetails(error, '费用明细加载失败') }
+  finally { loading.value = false }
+}
+
+async function loadOptions() {
+  try { [feeItems.value, partners.value] = await Promise.all([listInboundFeeItemOptions(), listInboundFeePartnerOptions()]) }
+  catch (error) { actionError.value = getApiErrorDetails(error, '费用维护选项加载失败') }
+}
+
+function assignForm(row?: InboundFeeDetail) {
+  Object.assign(form, row ? {
+    feeItemId: row.feeItemId, direction: row.direction, businessDate: row.businessDate,
+    unitPrice: Number(row.unitPrice), currency: row.currency, amount: Number(row.amount),
+    settlementIncluded: Boolean(row.settlementIncluded), partnerId: row.partnerId,
+    partnerName: row.partnerName, remark: row.remark,
+  } : emptyForm())
+}
+
+async function openEditor(mode: 'create' | 'edit' | 'adjust', row?: InboundFeeDetail) {
+  editorMode.value = mode; target.value = row || null; assignForm(row); actionError.value = null
+  editorOpen.value = true
+  if (!feeItems.value.length) await loadOptions()
+}
+
+function normalizePayload(): SaveInboundFeeDetailRequest {
+  const partner = partners.value.find((item) => String(item.id) === String(form.partnerId))
+  return { ...form, currency: 'CNY', partnerId: form.direction === 'PAYABLE' ? form.partnerId : null,
+    partnerName: form.direction === 'PAYABLE' ? partner?.partnerName || form.partnerName : null,
+    remark: form.remark?.trim() || null }
+}
+
+async function finishAction(message: string) {
+  await load(); emit('changed'); ElMessage.success(message)
+}
+
+async function save() {
+  if (!await formRef.value?.validate()) return
+  if (form.direction === 'PAYABLE' && !form.partnerId) { actionError.value = { message: '应付费用必须选择往来单位' }; return }
+  saving.value = true; actionError.value = null
+  try {
+    const payload = normalizePayload()
+    if (editorMode.value === 'create') await createInboundFeeDetail(props.accountId, props.inboundId, payload)
+    else if (editorMode.value === 'edit' && target.value) await updateInboundFeeDetail(props.accountId, props.inboundId, String(target.value.id), payload)
+    else if (target.value) await adjustInboundFeeDetail(props.accountId, props.inboundId, String(target.value.id), target.value.sourceFeeVersion, payload)
+    editorOpen.value = false
+    await finishAction(editorMode.value === 'adjust' ? '费用调整已提交审核' : '费用明细已保存')
+  } catch (error) { actionError.value = getApiErrorDetails(error, '费用明细保存失败') }
+  finally { saving.value = false }
+}
+
+async function remove(row: InboundFeeDetail) {
+  try {
+    await ElMessageBox.confirm('删除后无法恢复，是否继续？', '删除费用明细', { type: 'warning', confirmButtonText: '删除' })
+    await deleteInboundFeeDetail(props.accountId, props.inboundId, String(row.id)); await finishAction('费用明细已删除')
+  } catch (error) { if (error !== 'cancel' && error !== 'close') actionError.value = getApiErrorDetails(error, '费用明细删除失败') }
+}
+
+async function approve(row: InboundFeeDetail) {
+  try { await reviewInboundFeeDetail(props.accountId, props.inboundId, String(row.id), 'approve'); await finishAction('费用审核通过') }
+  catch (error) { actionError.value = getApiErrorDetails(error, '费用审核失败') }
+}
+
+function openReject(row: InboundFeeDetail) { target.value = row; rejectReason.value = ''; actionError.value = null; rejectOpen.value = true }
+async function reject() {
+  if (!target.value || !rejectReason.value.trim()) { actionError.value = { message: '请填写驳回原因' }; return }
+  saving.value = true
+  try { await reviewInboundFeeDetail(props.accountId, props.inboundId, String(target.value.id), 'reject', rejectReason.value.trim()); rejectOpen.value = false; await finishAction('费用已驳回') }
+  catch (error) { actionError.value = getApiErrorDetails(error, '费用驳回失败') }
+  finally { saving.value = false }
+}
+
+async function voidRow(row: InboundFeeDetail) {
+  try {
+    await ElMessageBox.confirm('作废会同步撤销尚未结算的财务费用来源，是否继续？', '作废费用明细', { type: 'warning', confirmButtonText: '作废' })
+    await voidInboundFeeDetail(props.accountId, props.inboundId, String(row.id), row.sourceFeeVersion); await finishAction('费用明细已作废')
+  } catch (error) { if (error !== 'cancel' && error !== 'close') actionError.value = getApiErrorDetails(error, '费用作废失败') }
+}
+
+watch(() => [props.accountId, props.inboundId], () => void load())
+watch(() => form.direction, () => { if (form.direction === 'RECEIVABLE') { form.partnerId = null; form.partnerName = null } })
+onMounted(() => void load())
+</script>
+
+<template>
+  <section class="fee-detail-manager" aria-label="运单费用维护">
+    <div class="fee-toolbar">
+      <span>共 {{ rows.length }} 条应收应付费用明细</span>
+      <div>
+        <el-tooltip content="刷新费用明细" placement="top"><el-button circle aria-label="刷新费用明细" :loading="loading" @click="load"><RefreshCw :size="16" /></el-button></el-tooltip>
+        <el-button v-if="access.can('firstleg:inbound:fee-detail:edit')" type="primary" @click="openEditor('create')"><Plus :size="16" />新增费用</el-button>
+      </div>
+    </div>
+    <el-alert v-if="!canView" title="当前账号没有查看费用明细的权限" type="warning" :closable="false" show-icon />
+    <LoadErrorState v-else-if="loadError" title="费用明细加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
+    <template v-else>
+      <el-alert v-if="actionError && !editorOpen && !rejectOpen" type="error" :closable="true" @close="actionError = null"><template #title>{{ actionError.message }}</template><ApiErrorMeta :details="actionError" /></el-alert>
+      <div v-loading="loading" class="fee-table-shell">
+        <el-table :data="rows" empty-text="暂无费用数据" row-key="id">
+          <el-table-column label="操作" fixed="left" width="250">
+            <template #default="{ row }">
+              <el-button v-if="canEdit(row as InboundFeeDetail)" link type="primary" @click="openEditor('edit', row as InboundFeeDetail)"><Pencil :size="15" />编辑</el-button>
+              <el-button v-if="canReview(row as InboundFeeDetail)" link type="success" @click="approve(row as InboundFeeDetail)"><Check :size="15" />审核</el-button>
+              <el-button v-if="canReview(row as InboundFeeDetail)" link type="warning" @click="openReject(row as InboundFeeDetail)"><Undo2 :size="15" />驳回</el-button>
+              <el-button v-if="canAdjust(row as InboundFeeDetail)" link type="primary" @click="openEditor('adjust', row as InboundFeeDetail)"><Pencil :size="15" />调整</el-button>
+              <el-button v-if="canVoid(row as InboundFeeDetail)" link type="danger" @click="voidRow(row as InboundFeeDetail)"><X :size="15" />作废</el-button>
+              <el-dropdown v-if="canDelete(row as InboundFeeDetail)">
+                <el-button link aria-label="更多费用操作"><MoreHorizontal :size="17" /></el-button>
+                <template #dropdown><el-dropdown-menu>
+                  <el-dropdown-item @click="remove(row as InboundFeeDetail)"><Trash2 :size="15" />删除</el-dropdown-item>
+                </el-dropdown-menu></template>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+          <el-table-column label="审核状态" width="120"><template #default="{ row }"><StatusBadge :status="reviewLabel(row.reviewStatus)" /></template></el-table-column>
+          <el-table-column label="应收/应付" width="110"><template #default="{ row }">{{ directionLabel(row.direction) }}</template></el-table-column>
+          <el-table-column prop="feeTypeNameSnapshot" label="费用类型" min-width="150" />
+          <el-table-column label="往来单位/客户" min-width="170"><template #default="{ row }">{{ row.direction === 'PAYABLE' ? row.partnerName : row.customerName || '—' }}</template></el-table-column>
+          <el-table-column prop="businessDate" label="业务发生日" width="130" />
+          <el-table-column prop="currency" label="货币" width="90" />
+          <el-table-column label="金额" min-width="120"><template #default="{ row }">{{ Number(row.amount).toFixed(2) }}</template></el-table-column>
+          <el-table-column label="单价" min-width="110"><template #default="{ row }">{{ Number(row.unitPrice).toFixed(4) }}</template></el-table-column>
+          <el-table-column label="参与结算" width="110"><template #default="{ row }">{{ row.settlementIncluded ? '是' : '否' }}</template></el-table-column>
+          <el-table-column prop="sourceFeeVersion" label="版本" width="85" />
+          <el-table-column prop="publicationStatus" label="发布状态" min-width="110" />
+          <el-table-column prop="reviewReason" label="驳回原因" min-width="180" show-overflow-tooltip />
+          <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
+        </el-table>
+      </div>
+    </template>
+
+    <AppDialog v-model="editorOpen" :title="editorMode === 'create' ? '新增费用' : editorMode === 'adjust' ? '调整已审核费用' : '编辑费用'" width="min(680px, calc(100vw - 28px))" :confirm-loading="saving" confirm-text="保存" @confirm="save">
+      <el-alert v-if="editorMode === 'adjust'" title="调整将生成新版本并重新进入待审核状态" type="warning" :closable="false" show-icon />
+      <el-alert v-if="actionError" type="error" :closable="true" @close="actionError = null"><template #title>{{ actionError.message }}</template><ApiErrorMeta :details="actionError" /></el-alert>
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="fee-form">
+        <el-form-item label="应收/应付" prop="direction"><el-segmented v-model="form.direction" :options="[{ label: '应收', value: 'RECEIVABLE' }, { label: '应付', value: 'PAYABLE' }]" /></el-form-item>
+        <el-form-item label="费用项目" prop="feeItemId"><el-select v-model="form.feeItemId" filterable><el-option v-for="item in applicableItems" :key="item.id" :label="item.feeTypeName" :value="item.id" /></el-select></el-form-item>
+        <el-form-item v-if="form.direction === 'PAYABLE'" label="往来单位" required><el-select v-model="form.partnerId" filterable><el-option v-for="partner in partners" :key="partner.id" :label="partner.partnerName" :value="partner.id" /></el-select></el-form-item>
+        <el-form-item label="业务发生日" prop="businessDate"><el-date-picker v-model="form.businessDate" type="date" value-format="YYYY-MM-DD" /></el-form-item>
+          <el-form-item label="货币" prop="currency"><el-input model-value="CNY" readonly aria-label="货币 CNY" /></el-form-item>
+        <el-form-item label="单价" prop="unitPrice"><el-input-number v-model="form.unitPrice" :min="0" :precision="4" /></el-form-item>
+        <el-form-item label="金额" prop="amount"><el-input-number v-model="form.amount" :min="0" :precision="2" /></el-form-item>
+        <el-form-item label="参与结算"><el-switch v-model="form.settlementIncluded" /></el-form-item>
+        <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item>
+      </el-form>
+    </AppDialog>
+    <AppDialog v-model="rejectOpen" title="驳回费用" :confirm-loading="saving" confirm-text="确认驳回" confirm-type="warning" @confirm="reject">
+      <el-alert v-if="actionError" type="error" :closable="true" @close="actionError = null"><template #title>{{ actionError.message }}</template><ApiErrorMeta :details="actionError" /></el-alert>
+      <el-form label-position="top"><el-form-item label="驳回原因" required><el-input v-model="rejectReason" type="textarea" :rows="4" maxlength="500" show-word-limit /></el-form-item></el-form>
+    </AppDialog>
+  </section>
+</template>
+
+<style scoped>
+.fee-detail-manager { display: grid; min-width: 0; max-width: 100%; gap: 12px; }
+.fee-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--el-text-color-secondary); font-size: 13px; }
+.fee-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
+.fee-toolbar :deep(.el-button + .el-button) { margin-left: 0; }
+.fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 14px; }
+.fee-form :deep(.el-select), .fee-form :deep(.el-date-editor), .fee-form :deep(.el-input-number) { width: 100%; }
+.fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
+.fee-table-shell { min-width: 0; max-width: 100%; overflow: hidden; }
+.fee-table-shell :deep(.el-table) { width: 100%; max-width: 100%; }
+@media (max-width: 720px) { .fee-toolbar { align-items: flex-start; flex-direction: column; } .fee-form { grid-template-columns: 1fr; } .fee-form :deep(.el-form-item:last-child) { grid-column: auto; } }
+</style>
@@ -242,7 +242,8 @@ describe('UnifiedOrdersView contract', () => {
    expect(source).toContain("partyValue(detail.order.parties, 'RECEIVER', 'phone')")
    expect(source).not.toContain("partyValue(detail.order.parties, 'CONSIGNEE'")
    expect(source).toContain("cargoTotal(detail.order.cargoes, 'netWeightKg')")
-    expect(source).toContain('暂无费用数据')
+    expect(source).toContain('InboundFeeDetailManager')
+    expect(source).toContain('@changed="loadDetail(true)"')
    expect(source).toContain('firstLegTransportModeLabel(detail.order.order?.transportMode)')
    expect(source).toContain('firstLegPickupMethodLabel(detail.order.order?.pickupMethod)')
    expect(source).toContain('firstLegDestinationTypeLabel(detail.order.order?.destinationType)')
@@ -7,15 +7,14 @@ import {
  getPlatformUnifiedOrder,
  approvePlatformUnifiedOrder,
  addPlatformUnifiedOrderNote,
-  listPlatformUnifiedOrderFeeDetails,
  listPlatformUnifiedOrders,
  unifiedOrderStatusOptions,
  type UnifiedOrderDetailResource,
  type UnifiedOrderMainStatus,
  type UnifiedOrderResource,
-  type UnifiedOrderFeeDetailResource,
 } from '@/modules/unified-orders/api/unifiedOrders'
 import OrderFulfillmentTreePanel from '@/modules/unified-orders/components/OrderFulfillmentTreePanel.vue'
+import InboundFeeDetailManager from '@/modules/unified-orders/components/InboundFeeDetailManager.vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { listAllPlatformWarehouses, type PlatformWarehouseSummaryResource } from '@/modules/warehouses'
@@ -100,9 +99,6 @@ const noteContent = ref('')
 const noteOrder = ref<UnifiedOrderResource | null>(null)
 const relationOpen = ref(false)
 const relationOrder = ref<UnifiedOrderResource | null>(null)
-const feeDetails = ref<UnifiedOrderFeeDetailResource[]>([])
-const feeLoading = ref(false)
-const feeLoadedKey = ref('')
 const measurementDetail = ref<InboundMeasurementDetail | null>(null)
 const measurementLoading = ref(false)
 const measurementLoadedKey = ref('')
@@ -384,43 +380,10 @@ function cargoImage(cargo: Record<string, unknown>) {
  return typeof value === 'string' && value ? value : ''
 }

-function feeDate(value: string | null | undefined) {
-  return value ? formatDate(value) : '—'
-}
-
-function feeText(value: string | null | undefined) {
-  return value || '—'
-}
-
-function feeNumber(value: number | null | undefined) {
-  return value === null || value === undefined ? '—' : formatNumber(value, 4)
-}
-
 function feeReviewLabel(value: string | null | undefined) {
  return unifiedOrderReviewStatusLabel(value)
 }

-function feeDirectionLabel(value: string | null | undefined) {
-  if (!value) return '—'
-  return ({ RECEIVABLE: '应收', PAYABLE: '应付' } as Record<string, string>)[value] || '未知方向'
-}
-
-async function loadFeeDetails() {
-  const summary = detail.value?.summary
-  if (!summary?.inboundId || !can('firstleg:inbound:fee-detail:view')) return
-  const key = `${summary.tenantId}:${summary.inboundId}`
-  if (feeLoadedKey.value === key || feeLoading.value) return
-  feeLoading.value = true
-  try {
-    feeDetails.value = await listPlatformUnifiedOrderFeeDetails(String(summary.tenantId), String(summary.inboundId))
-    feeLoadedKey.value = key
-  } catch {
-    feeDetails.value = []
-  } finally {
-    feeLoading.value = false
-  }
-}
-
 function measurementValue(row: Record<string, unknown>, key: string, customerSource = false) {
  if (customerSource && key === 'unitWeightKg') {
    const total = Number(row.grossWeightKg)
@@ -492,7 +455,6 @@ async function loadMeasurementDetails() {

 function selectDetailTab(key: string) {
  activeDetailTab.value = key
-  if (key === 'fees') void loadFeeDetails()
  if (key === 'measurement') void loadMeasurementDetails()
 }

@@ -740,8 +702,6 @@ async function loadDetail(force = false) {
  if (!force && (detailLoadingKey === requestKey || detail.value?.summary.orderId === orderId.value && String(detail.value.summary.tenantId) === tenantId)) return
  const serial = ++detailRequestSerial
  detailLoadingKey = requestKey
-  feeDetails.value = []
-  feeLoadedKey.value = ''
  measurementDetail.value = null
  measurementLoadedKey.value = ''
  revokeMeasurementImages()
@@ -914,36 +874,12 @@ onMounted(() => {
            </template>

            <template v-else-if="activeDetailTab === 'fees'">
-              <div class="panel-title"><div><h2>费用信息</h2><p>共 {{ feeDetails.length }} 条应收应付费用明细</p></div><WalletCards :size="19" /></div>
-              <el-alert v-if="!can('firstleg:inbound:fee-detail:view')" title="当前账号没有查看费用明细的权限" type="warning" :closable="false" show-icon />
-              <div v-else v-loading="feeLoading" class="detail-table-wrap">
-                <el-table :data="feeDetails" empty-text="暂无费用数据" row-key="id">
-                  <el-table-column label="审核状态" min-width="120"><template #default="{ row }"><StatusBadge :status="feeReviewLabel((row as UnifiedOrderFeeDetailResource).reviewStatus)" /></template></el-table-column>
-                  <el-table-column label="应收/应付" min-width="110"><template #default="{ row }">{{ feeDirectionLabel((row as UnifiedOrderFeeDetailResource).direction) }}</template></el-table-column>
-                  <el-table-column label="客户公司名" min-width="170"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).customerName) }}</template></el-table-column>
-                  <el-table-column label="裹箱头" min-width="150"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).invoiceTitle) }}</template></el-table-column>
-                  <el-table-column label="入仓码" min-width="150"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).inboundCode) }}</template></el-table-column>
-                  <el-table-column label="业务发生日" min-width="130"><template #default="{ row }">{{ feeDate((row as UnifiedOrderFeeDetailResource).businessDate) }}</template></el-table-column>
-                  <el-table-column label="渠道" min-width="130"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).channelName) }}</template></el-table-column>
-                  <el-table-column label="目的仓" min-width="150"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).destinationName) }}</template></el-table-column>
-                  <el-table-column label="FBA编号" min-width="130"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).fbaNo) }}</template></el-table-column>
-                  <el-table-column label="箱数" width="90"><template #default="{ row }">{{ feeNumber((row as UnifiedOrderFeeDetailResource).packageCount) }}</template></el-table-column>
-                  <el-table-column label="毛重" min-width="110"><template #default="{ row }">{{ feeNumber((row as UnifiedOrderFeeDetailResource).actualGrossWeightKg) }}</template></el-table-column>
-                  <el-table-column label="体积" min-width="110"><template #default="{ row }">{{ feeNumber((row as UnifiedOrderFeeDetailResource).actualVolumeCbm) }}</template></el-table-column>
-                  <el-table-column label="费用类型" min-width="150"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).feeTypeNameSnapshot) }}</template></el-table-column>
-                  <el-table-column label="货币" width="90"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).currency) }}</template></el-table-column>
-                  <el-table-column label="应收金额" min-width="120"><template #default="{ row }">{{ feeNumber((row as UnifiedOrderFeeDetailResource).amount) }}</template></el-table-column>
-                  <el-table-column label="计费体称/重量" min-width="150"><template #default="{ row }">{{ feeNumber((row as UnifiedOrderFeeDetailResource).chargeableQuantity) }} {{ (row as UnifiedOrderFeeDetailResource).chargeUnit || '' }}</template></el-table-column>
-                  <el-table-column label="单价" min-width="110"><template #default="{ row }">{{ feeNumber((row as UnifiedOrderFeeDetailResource).unitPrice) }}</template></el-table-column>
-                  <el-table-column label="入仓时间" min-width="150"><template #default="{ row }">{{ feeDate((row as UnifiedOrderFeeDetailResource).inboundedAt) }}</template></el-table-column>
-                  <el-table-column label="出仓时间" min-width="150"><template #default="{ row }">{{ feeDate((row as UnifiedOrderFeeDetailResource).outboundAt) }}</template></el-table-column>
-                  <el-table-column label="仓储天数" min-width="110"><template #default="{ row }">{{ feeNumber((row as UnifiedOrderFeeDetailResource).storageDays) }}</template></el-table-column>
-                  <el-table-column label="参与结算" min-width="110"><template #default="{ row }">{{ (row as UnifiedOrderFeeDetailResource).settlementIncluded == null ? '—' : (row as UnifiedOrderFeeDetailResource).settlementIncluded ? '是' : '否' }}</template></el-table-column>
-                  <el-table-column label="账单编号" min-width="140"><template #default="{ row }">{{ feeText((row as UnifiedOrderFeeDetailResource).billNo) }}</template></el-table-column>
-                  <el-table-column label="结算起始日" min-width="130"><template #default="{ row }">{{ feeDate((row as UnifiedOrderFeeDetailResource).settlementStartDate) }}</template></el-table-column>
-                  <el-table-column label="结算结束日" min-width="130"><template #default="{ row }">{{ feeDate((row as UnifiedOrderFeeDetailResource).settlementEndDate) }}</template></el-table-column>
-                </el-table>
-              </div>
+              <div class="panel-title"><div><h2>费用信息</h2><p>维护运单与入库单应收应付费用</p></div><WalletCards :size="19" /></div>
+              <InboundFeeDetailManager
+                :account-id="String(detail.summary.tenantId)"
+                :inbound-id="String(detail.summary.inboundId)"
+                @changed="loadDetail(true)"
+              />
            </template>

            <template v-else-if="activeDetailTab === 'history'">