优化

src/modules/domestic-containers/pages/DomesticContainersView.test.ts

@@ -2,8 +2,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
 import { createRequire } from 'node:module'
 import DomesticContainersView from './DomesticContainersView.vue'
+import DataTable from '@/shared/components/DataTable.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import QueryToolbar from '@/shared/components/QueryToolbar.vue'
 import * as api from '../api/domesticContainers'
-import type { InventoryRecord } from '../types'
+import type { InventoryPage, InventoryRecord } from '../types'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 // Use Node's supported require export so the validator retains its constructor interop.
@@ -31,11 +34,16 @@ describe('DomesticContainersView', () => {
   })
   it('keeps desktop filters and actions on one row with explicit field widths', () => { expect(source).toContain("key: 'warehouseId', type: 'select', width: 210"); expect(source).toContain("key: 'orderNo', type: 'input', width: 220"); expect(source).toContain("key: 'containerNo', type: 'input', width: 220"); expect(source).toContain("key: 'cargoName', type: 'input', width: 220"); expect(source).toContain("key: 'status', type: 'select', width: 180") })
   it('uses the shared query toolbar flow without a page-level layout override', () => { expect(source).not.toContain('.query-toolbar__filters') })
-  it('keeps all four inventory facts in the approved compact summary', () => {
-    for (const fact of ['summary.inboundBoxes', 'summary.outboundBoxes', 'summary.availableBoxes', 'summary.inboundVolumeCbm']) expect(source).toContain(fact)
+  it('keeps all four inventory facts and units in shared compact metric cards', () => {
+    for (const fact of ['summary?.inboundBoxes', 'summary?.outboundBoxes', 'summary?.availableBoxes', 'summary?.inboundVolumeCbm']) expect(source).toContain(fact)
     expect(source).toContain("import './domesticContainersSummary.css'")
-    expect(summaryStyles).toContain('display: flex; flex-wrap: wrap')
-    expect(summaryStyles).toContain('font-size: var(--admin-font-section, 14px)')
+    const summary = source.match(/<section\b[^>]*class="inventory-summary"[\s\S]*?<\/section>/)?.[0] || ''
+    expect(summary).not.toContain('v-if=')
+    expect(summary.match(/class="workbench-metric workbench-tone is-compact"/g)).toHaveLength(4)
+    expect(summary.match(/<span>箱<\/span>/g)).toHaveLength(3)
+    expect(summary).toContain("summary?.inboundVolumeCbm.toFixed(2) ?? '—' }}</strong><span>m³</span>")
+    expect(summaryStyles).toContain('grid-template-columns: repeat(4, minmax(0, 1fr))')
+    expect(summaryStyles).toContain('gap: var(--workbench-grid-gap)')
     expect(summaryStyles).not.toContain('position: absolute')
   })
   it('does not offer an inventory detail action before an inbound has formed inventory', () => { expect(source).toContain("canViewInventory(row as ContainerOrder | InventoryRecord)"); expect(source).toContain("row.status === 'COMPLETED'") })
@@ -49,10 +57,14 @@ vi.mock('@/modules/warehouses', () => ({ listAllPlatformWarehouses: vi.fn().mock
 vi.mock('../api/domesticContainers', () => ({ createDomesticContainerInbound: vi.fn(), createDomesticContainerOutbound: vi.fn(), getDomesticContainerInventory: vi.fn(), listDomesticContainerInbounds: vi.fn(), listDomesticContainerInventories: vi.fn(), listDomesticContainerOutbounds: vi.fn() }))
 const inventory: InventoryRecord = { id: 'inventory-1', warehouseId: 'warehouse-1', warehouseName: '测试仓', containerNo: 'MSCU1234567', cargoName: '测试货物', availableBoxes: 8, inboundBoxes: 10, outboundBoxes: 2, inboundVolumeCbm: 2.5, inventoryStatus: 'PARTIALLY_OUTBOUND', version: 3, updatedAt: '2026-09-30T10:00:00' }
 let mounted: VueWrapper | undefined
-async function openCreate(label: string) {
+async function mountView() {
   const view = mount(DomesticContainersView, { attachTo: document.body, global: { plugins: [ElementPlus] } })
   mounted = view
   await flushPromises()
+  return view
+}
+async function openCreate(label: string) {
+  const view = await mountView()
   if (label === '新建出库单') await view.findAll('[role="tab"]').find(tab => tab.text() === '整柜出库单')!.trigger('click')
   await flushPromises()
   await view.findAll('button').find(button => button.text() === label)!.trigger('click')
@@ -64,7 +76,7 @@ async function submitCreate() {
   document.querySelector<HTMLButtonElement>('.el-dialog__footer .el-button--primary')!.click()
   await flushPromises()
 }
-describe('DomesticContainersView create workflows', () => {
+describe('DomesticContainersView workflows', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     const empty = { records: [], page: 1, size: 20, total: 0, pages: 0 }
@@ -75,6 +87,60 @@ describe('DomesticContainersView create workflows', () => {
   })
   afterEach(() => { mounted?.unmount(); mounted = undefined; document.body.innerHTML = '' })
 
+  it('loads the overview on entry and keeps it above the list across all three tabs', async () => {
+    const view = await mountView()
+    const overview = view.get('.inventory-summary')
+    expect(view.element.firstElementChild).toBe(overview.element)
+    expect(overview.findAll('strong').map(value => value.text())).toEqual(['10', '2', '8', '2.50'])
+    expect(api.listDomesticContainerInventories).toHaveBeenCalledTimes(1)
+    for (const label of ['整柜出库单', '整柜库存', '整柜入库单']) {
+      const requests = vi.mocked(api.listDomesticContainerInventories).mock.calls.length
+      await view.findAll('[role="tab"]').find(tab => tab.text() === label)!.trigger('click')
+      await flushPromises()
+      expect(view.element.firstElementChild).toBe(overview.element)
+      expect(overview.findAll('strong').map(value => value.text())).toEqual(['10', '2', '8', '2.50'])
+      expect(api.listDomesticContainerInventories).toHaveBeenCalledTimes(requests + 1)
+    }
+  })
+
+  it.each(['整柜入库单', '整柜出库单'])('uses common filters for the overview on %s without passing order-only filters', async label => {
+    const view = await mountView()
+    await view.findAll('[role="tab"]').find(tab => tab.text() === label)!.trigger('click')
+    await flushPromises()
+    const filters = { warehouseId: 'warehouse-1', containerNo: 'MSCU1234567', cargoName: '测试货物', orderNo: 'ORDER-01', status: 'PENDING' }
+    view.findComponent(QueryToolbar).vm.$emit('search', filters)
+    await flushPromises()
+    expect(api.listDomesticContainerInventories).toHaveBeenLastCalledWith({ page: 1, size: 1, warehouseId: filters.warehouseId, containerNo: filters.containerNo, cargoName: filters.cargoName })
+    const list = label === '整柜入库单' ? api.listDomesticContainerInbounds : api.listDomesticContainerOutbounds
+    expect(list).toHaveBeenLastCalledWith({ ...filters, page: 1, size: 20 })
+  })
+
+  it('shows unknown summary values on failure while keeping the order list available and allowing retry', async () => {
+    vi.mocked(api.listDomesticContainerInventories).mockRejectedValueOnce(new Error('统计失败'))
+    const view = await mountView()
+    expect(view.findAll('.inventory-summary strong').map(value => value.text())).toEqual(['—', '—', '—', '—'])
+    expect(view.findComponent(DataTable).props('resultsVisible')).toBe(true)
+    const error = view.findComponent(LoadErrorState)
+    expect(error.props('title')).toBe('整柜库存统计加载失败')
+    error.vm.$emit('retry')
+    await flushPromises()
+    expect(view.findComponent(LoadErrorState).exists()).toBe(false)
+    expect(view.findAll('.inventory-summary strong').map(value => value.text())).toEqual(['10', '2', '8', '2.50'])
+  })
+
+  it('ignores a stale overview response after switching tabs', async () => {
+    let resolveFirst!: (value: InventoryPage) => void
+    vi.mocked(api.listDomesticContainerInventories).mockImplementationOnce(() => new Promise(resolve => { resolveFirst = resolve }))
+    const view = await mountView()
+    expect(view.get('.inventory-summary').attributes('aria-busy')).toBe('true')
+    await view.findAll('[role="tab"]').find(tab => tab.text() === '整柜出库单')!.trigger('click')
+    await flushPromises()
+    resolveFirst({ records: [], page: 1, size: 1, total: 0, pages: 0, summary: { inboundBoxes: 99, outboundBoxes: 0, availableBoxes: 99, inboundVolumeCbm: 99 } })
+    await flushPromises()
+    expect(view.findAll('.inventory-summary strong').map(value => value.text())).toEqual(['10', '2', '8', '2.50'])
+    expect(view.get('.inventory-summary').attributes('aria-busy')).toBe('false')
+  })
+
   it('keeps validation, normalized input and the idempotency key when retrying an inbound', async () => {
     vi.mocked(api.createDomesticContainerInbound).mockRejectedValueOnce(new Error('临时失败')).mockResolvedValueOnce({ id: 'order-internal', orderNo: 'ZGRK-01', replayed: false })
     const { form } = await openCreate('新建入库单')

src/modules/domestic-containers/pages/DomesticContainersView.vue

@@ -3,7 +3,7 @@ import '@/styles/adminDensity.css'
 import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
-import { Plus } from '@lucide/vue'
+import { Box, Boxes, PackageCheck, PackagePlus, Plus } from '@lucide/vue'
 import { useRouter } from 'vue-router'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -28,7 +28,10 @@ const businessTabs: Array<{ value: TabName; label: string }> = [
   { value: 'inventory', label: '整柜库存' },
 ]
 const loading = ref(false); const loadError = ref<ApiErrorDetails | null>(null); const rows = ref<(ContainerOrder | InventoryRecord)[]>([]); const page = ref(1); const pageSize = ref(20); const total = ref(0)
-const summary = ref<InventorySummary>({ inboundBoxes: 0, outboundBoxes: 0, availableBoxes: 0, inboundVolumeCbm: 0 })
+const summary = ref<InventorySummary | null>(null)
+const summaryLoading = ref(false)
+const summaryError = ref<ApiErrorDetails | null>(null)
+let loadSequence = 0
 const warehouses = ref<PlatformWarehouseSummaryResource[]>([]); const warehouseLoading = ref(false); const warehouseError = ref<ApiErrorDetails | null>(null)
 const filters = ref<QueryModel>({ warehouseId: '', orderNo: '', containerNo: '', cargoName: '', status: '' })
 const appliedFilters = ref<QueryModel>({ ...filters.value })
@@ -49,7 +52,41 @@ function displayTime(value: string) { return value ? value.replace('T', ' ').sli
 function statusLabel(row: ContainerOrder | InventoryRecord) { if ('inventoryStatus' in row) return ({ IN_STOCK: '在库', PARTIALLY_OUTBOUND: '部分出库', OUTBOUND: '已出库' } as const)[row.inventoryStatus]; return row.status === 'PENDING' ? (activeTab.value === 'inbound' ? '待入库' : '待出库') : (activeTab.value === 'inbound' ? '已入库' : '已出库') }
 function canViewInventory(row: ContainerOrder | InventoryRecord) { return 'inventoryStatus' in row || activeTab.value === 'outbound' || row.status === 'COMPLETED' }
 function queryParams() { const model = appliedFilters.value; return { page: page.value, size: pageSize.value, warehouseId: String(model.warehouseId || '') || undefined, orderNo: activeTab.value === 'inventory' ? undefined : String(model.orderNo || '') || undefined, containerNo: String(model.containerNo || '') || undefined, cargoName: String(model.cargoName || '') || undefined, status: String(model.status || '') || undefined } }
-async function load() { loading.value = true; loadError.value = null; try { const result = activeTab.value === 'inbound' ? await listDomesticContainerInbounds(queryParams()) : activeTab.value === 'outbound' ? await listDomesticContainerOutbounds(queryParams()) : await listDomesticContainerInventories(queryParams()); rows.value = result.records; total.value = result.total; if ('summary' in result) summary.value = result.summary } catch (cause) { loadError.value = getApiErrorDetails(cause, '整柜业务加载失败') } finally { loading.value = false } }
+async function load() {
+  const sequence = ++loadSequence
+  const tab = activeTab.value
+  const params = queryParams()
+  loading.value = true
+  loadError.value = null
+  summaryLoading.value = true
+  summaryError.value = null
+  summary.value = null
+  const inventoryRequest = listDomesticContainerInventories(tab === 'inventory' ? params : {
+    page: 1,
+    size: 1,
+    warehouseId: params.warehouseId,
+    containerNo: params.containerNo,
+    cargoName: params.cargoName,
+  })
+  const summaryTask = inventoryRequest.then(result => {
+    if (sequence === loadSequence) summary.value = result.summary
+  }).catch(cause => {
+    if (sequence === loadSequence && tab !== 'inventory') summaryError.value = getApiErrorDetails(cause, '整柜库存统计加载失败')
+  }).finally(() => {
+    if (sequence === loadSequence) summaryLoading.value = false
+  })
+  const listRequest = tab === 'inbound' ? listDomesticContainerInbounds(params) : tab === 'outbound' ? listDomesticContainerOutbounds(params) : inventoryRequest
+  const listTask = listRequest.then(result => {
+    if (sequence !== loadSequence) return
+    rows.value = result.records
+    total.value = result.total
+  }).catch(cause => {
+    if (sequence === loadSequence) loadError.value = getApiErrorDetails(cause, '整柜业务加载失败')
+  }).finally(() => {
+    if (sequence === loadSequence) loading.value = false
+  })
+  await Promise.all([summaryTask, listTask])
+}
 async function loadWarehouses() { warehouseLoading.value = true; warehouseError.value = null; try { warehouses.value = (await listAllPlatformWarehouses({ warehouseType: 'DOMESTIC', status: 'ACTIVE' })).filter((item) => item.warehouseType === 'DOMESTIC' && item.status === 'ACTIVE') } catch (cause) { warehouseError.value = getApiErrorDetails(cause, '国内仓候选加载失败') } finally { warehouseLoading.value = false } }
 function search(model = filters.value) { appliedFilters.value = { ...model }; if (page.value === 1) void load(); else page.value = 1 }
 function switchTab(name: TabName) { if (activeTab.value === name) return; activeTab.value = name; filters.value = { warehouseId: filters.value.warehouseId || '', orderNo: '', containerNo: '', cargoName: '', status: '' }; appliedFilters.value = { ...filters.value }; page.value = 1; void load() }
@@ -73,13 +110,31 @@ async function submit() { if (!await formRef.value?.validate().catch(() => false
 watch([page, pageSize], load); onMounted(async () => { await Promise.all([loadWarehouses(), load()]) })
 </script>
 
-<template><AdminPage as="div" class="domestic-containers-page admin-density admin-workbench">
+<template><AdminPage as="div" spacing="compact" class="domestic-containers-page admin-density admin-workbench">
+          <section v-loading="summaryLoading" class="inventory-summary" aria-label="整柜库存概览" :aria-busy="summaryLoading">
+            <article class="workbench-metric workbench-tone is-compact" data-tone="blue">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><PackagePlus aria-hidden="true" /></span><h2 class="workbench-metric-label">入库箱数</h2></div>
+              <div class="workbench-metric-value"><strong>{{ summary?.inboundBoxes ?? '—' }}</strong><span>箱</span></div>
+            </article>
+            <article class="workbench-metric workbench-tone is-compact" data-tone="green">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><PackageCheck aria-hidden="true" /></span><h2 class="workbench-metric-label">已出库箱数</h2></div>
+              <div class="workbench-metric-value"><strong>{{ summary?.outboundBoxes ?? '—' }}</strong><span>箱</span></div>
+            </article>
+            <article class="workbench-metric workbench-tone is-compact" data-tone="purple">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Boxes aria-hidden="true" /></span><h2 class="workbench-metric-label">当前库存</h2></div>
+              <div class="workbench-metric-value"><strong>{{ summary?.availableBoxes ?? '—' }}</strong><span>箱</span></div>
+            </article>
+            <article class="workbench-metric workbench-tone is-compact" data-tone="teal">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Box aria-hidden="true" /></span><h2 class="workbench-metric-label">累计入库体积</h2></div>
+              <div class="workbench-metric-value"><strong>{{ summary?.inboundVolumeCbm.toFixed(2) ?? '—' }}</strong><span>m³</span></div>
+            </article>
+          </section>
+<LoadErrorState v-if="summaryError" compact title="整柜库存统计加载失败" :message="summaryError.message" :loading="summaryLoading" @retry="load"><template #details><ApiErrorMeta :details="summaryError" /></template></LoadErrorState>
 <LoadErrorState v-if="warehouseError" compact title="国内仓候选加载失败" :message="warehouseError.message" :loading="warehouseLoading" @retry="loadWarehouses"><template #details><ApiErrorMeta :details="warehouseError" /></template></LoadErrorState>
 <ListPageLayout :aria-label="`${activeTab === 'inbound' ? '整柜入库单' : activeTab === 'outbound' ? '整柜出库单' : '整柜库存'}列表`"><section id="domestic-container-results" ><div class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" row-key="id" :preference-key="`domestic-containers-${activeTab}-table`" :empty-text="activeTab === 'inbound' ? '暂无整柜入库单' : activeTab === 'outbound' ? '暂无整柜出库单' : '暂无整柜库存'">
         <template #toolbar-start><div class="status-tabs density-status-tabs workbench-list-tabs" role="tablist" aria-label="整柜业务类型"><button v-for="(tab, index) in businessTabs" :key="tab.value" type="button" role="tab" :aria-selected="activeTab === tab.value" aria-controls="domestic-container-results" :tabindex="activeTab === tab.value ? 0 : -1" :class="['status-tab', { 'is-active': activeTab === tab.value }]" @click="switchTab(tab.value)" @keydown="handleTabKeydown($event, index)">{{ tab.label }}</button></div></template>
         <template #filters><div class="business-query-panel integrated-query-group"><QueryToolbar v-model="filters" class="business-query-toolbar" ariaLabel="整柜业务筛选" :fields="queryFields" :preference-key="`domestic-containers-${activeTab}-query`" @search="search" /></div></template>
         <template #notices><template v-if="loadError"><LoadErrorState title="整柜业务加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template></template>
-        <template #before-results><div v-if="activeTab === 'inventory'" class="inventory-summary"><div><span>入库箱数</span><strong>{{ summary.inboundBoxes }}</strong></div><div><span>已出库箱数</span><strong>{{ summary.outboundBoxes }}</strong></div><div><span>当前库存</span><strong>{{ summary.availableBoxes }}</strong></div><div><span>累计入库体积</span><strong>{{ summary.inboundVolumeCbm.toFixed(2) }} m³</strong></div></div></template>
 <template #toolbar-actions><el-button v-if="activeTab === 'inbound' && access.can('platform:domestic-container:inbound:create')" type="primary" @click="openInbound"><Plus :size="16" />新建入库单</el-button><el-button v-if="activeTab === 'outbound' && access.can('platform:domestic-container:outbound:create')" type="primary" @click="openOutbound"><Plus :size="16" />新建出库单</el-button></template><template #actions="{ row }"><div class="row-actions density-actions admin-text-actions"><el-button v-if="canViewInventory(row as ContainerOrder | InventoryRecord)" class="density-action" size="small" @click="viewInventory(row as ContainerOrder | InventoryRecord)">查看</el-button><span v-else>—</span></div></template><template #status="{ row }"><StatusBadge :status="statusLabel(row as ContainerOrder | InventoryRecord)" /></template></DataTable></div></section></ListPageLayout>
 <AppDialog v-model="dialogOpen" class="domestic-container-create-dialog admin-density-dialog admin-workbench is-dialog" :title="dialogType === 'inbound' ? '新建整柜入库单' : '新建整柜出库单'" width="min(720px, calc(100vw - 28px))" :confirm-loading="saving" :close-on-click-modal="false" :confirm-text="dialogType === 'inbound' ? '创建入库单' : '创建出库单'" @confirm="submit">
   <LoadErrorState v-if="submitError" compact title="创建失败" :message="submitError.message" :show-retry="false"><template #details><ApiErrorMeta :details="submitError" /></template></LoadErrorState>
@@ -122,4 +177,7 @@ watch([page, pageSize], load); onMounted(async () => { await Promise.all([loadWa
   </el-form>
 </AppDialog></AdminPage></template>
 
-<style scoped>.domestic-containers-page{min-width:0}.business-query-panel{min-width:0}.business-query-toolbar{border:0}.inventory-summary{display:flex;align-items:center;gap:0;margin:0 var(--admin-space-6, 16px) var(--admin-space-5, 12px);border:1px solid var(--workbench-border);background:var(--admin-label-bg, #f8fafc)}.inventory-summary>div{display:flex;align-items:baseline;gap:var(--admin-space-3, 8px);min-width:0;padding:9px var(--admin-space-6, 16px);border-right:1px solid var(--workbench-border)}.inventory-summary>div:last-child{border-right:0}.inventory-summary span{color:var(--workbench-muted);font-size:var(--admin-font-caption, 12px)}.inventory-summary strong{font-size:15px}.container-entry-table{table-layout:fixed}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:720px){.inventory-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-summary>div:nth-child(2){border-right:0}.inventory-summary>div:nth-child(-n+2){border-bottom:1px solid var(--workbench-border)}}@media(max-width:360px){.inventory-summary{grid-template-columns:1fr}.inventory-summary>div{border-right:0;border-bottom:1px solid var(--workbench-border)}.inventory-summary>div:last-child{border-bottom:0}}</style>
+<style scoped>
+.admin-workbench.domestic-containers-page.admin-page.is-spacing-compact { gap: 0; }
+.domestic-containers-page{min-width:0}.business-query-panel{min-width:0}.business-query-toolbar{border:0}.container-entry-table{table-layout:fixed}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
+</style>

src/modules/domestic-containers/pages/domesticContainersSummary.css

@@ -1,9 +1,17 @@
-.domestic-containers-page .table-panel .inventory-summary {
-  display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) 28px; margin: 0;
-  padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); border: 0; border-bottom: 1px solid var(--cc-border); background: var(--admin-surface, #fff);
+.domestic-containers-page .inventory-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--workbench-grid-gap);
 }
-.domestic-containers-page .table-panel .inventory-summary > div {
-  display: flex; align-items: baseline; min-width: 0; gap: var(--admin-space-3, 8px); padding: 0; border: 0;
+
+@media (max-width: 720px) {
+  .domestic-containers-page .inventory-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 360px) {
+  .domestic-containers-page .inventory-summary {
+    grid-template-columns: 1fr;
+  }
 }
-.domestic-containers-page .table-panel .inventory-summary span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
-.domestic-containers-page .table-panel .inventory-summary strong { font-size: var(--admin-font-section, 14px); font-weight: 600; }