优化

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

@@ -456,7 +456,7 @@ describe('ContainersView', () => {
     expect(source).toContain("import RowActions, { type RowActionItem } from '@/shared/components/RowActions.vue'")
     expect(source).toContain("{ key: 'view', label: '查看', ariaLabel: containerViewLabel(row), priority: 500")
     expect(source).toContain("hasAction(row, 'EDIT_CONTAINER')")
-    expect(source).toContain('<RowActions :actions="containerRowActions(row as ContainerWorkbenchRow)"')
+    expect(source).toContain('<RowActions text-actions :actions="containerRowActions(row as ContainerWorkbenchRow)"')
     expect(source).not.toContain("row.containerNo ? '修改集装箱号' : '录入集装箱号'")
     expect(source).toContain('货柜基础资料不提供柜号写入')
     expect(source).toContain('containerNo: optional(detail.value?.containerNo || null)')
@@ -465,7 +465,8 @@ describe('ContainersView', () => {
     expect(source).toContain("row.planStatus === 'EDITING' ? canSmartLoading.value")
     expect(source).not.toContain('canSmartLoading && row.containerNo')
     expect(source).not.toContain('link type="primary" :aria-label="containerViewLabel')
-    expect(source).toContain(':loading="loading" stripe preference-key="container-loading-table"')
+    expect(source).toContain(':loading="loading" preference-key="container-loading-table"')
+    expect(source).toContain('appearance="integrated" :stripe="false"')
   })
 
   it('updates an ACTIVE TRUCKING fleet inline and records actual empty return once', async () => {
@@ -579,7 +580,7 @@ describe('ContainersView', () => {
     try {
       await flushPromises()
       const actions = wrapper.find('.el-table__body .row-actions')
-      expect(actions.findAll('button').map((button) => button.text())).toEqual(['查看', '编辑', ({ EDITING: '装柜', LOADING: '预装清单', COMPLETED: '装柜清单' })[planStatus], ''])
+      expect(actions.findAll('button').map((button) => button.text())).toEqual(['查看', '编辑', ({ EDITING: '装柜', LOADING: '预装清单', COMPLETED: '装柜清单' })[planStatus], '更多'])
       await actions.find('button[aria-label="更多货柜操作"]').trigger('click')
       await flushPromises()
       const link = Array.from(document.body.querySelectorAll<HTMLElement>('.el-dropdown-menu__item'))

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

@@ -730,8 +730,12 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
   <AdminPage class="admin-density" as="div">
     <section class="container-page">
       <ListPageLayout :ariaLabel="isDomestic ? '送柜报关工作台' : '清关提柜工作台'">
-      <template #toolbar>
-        <div class="container-query-panel">
+
+
+        <section id="container-workbench-results" ><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" preference-key="container-loading-table" empty-text="暂无货柜">
+        <template #toolbar-start><h1>{{ isDomestic ? '货柜列表' : '清关提柜' }}</h1></template>
+        <template #filters>
+        <div class="container-query-panel integrated-query-group">
           <div class="container-scope-tabs density-tabs" role="tablist" aria-label="货柜完结状态">
             <button type="button" role="tab" aria-controls="container-workbench-results" :aria-selected="scope === 'ACTIVE'" :tabindex="scope === 'ACTIVE' ? 0 : -1" :class="['container-scope-tab', { active: scope === 'ACTIVE' }]" @click="scope = 'ACTIVE'">未完结</button>
             <button type="button" role="tab" aria-controls="container-workbench-results" :aria-selected="scope === 'HISTORY'" :tabindex="scope === 'HISTORY' ? 0 : -1" :class="['container-scope-tab', { active: scope === 'HISTORY' }]" @click="scope = 'HISTORY'">已完结</button>
@@ -739,13 +743,13 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
           <QueryToolbar v-model="filters" class="container-query-toolbar" ariaLabel="货柜筛选" :fields="queryFields" preference-key="container-loading-query" @search="search" />
         </div>
       </template>
-      <template v-if="loadError" #state>
+        <template #notices><template v-if="loadError">
         <LoadErrorState title="货柜列表加载失败" :message="loadError.message" :loading="loading" @retry="loadRows"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
-      </template>
-        <section v-if="!loadError" id="container-workbench-results" class="surface-panel table-panel">
-          <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" stripe preference-key="container-loading-table" empty-text="暂无货柜">
+      </template></template>
+
+
             <template #toolbar-actions><ContainerSimulationCreate dense v-if="isDomestic && canCreate" :load-warehouse-options="loadSimulationWarehouses" @created="loadRows" /></template>
-            <template #actions="{ row }"><RowActions :actions="containerRowActions(row as ContainerWorkbenchRow)" more-label="更多货柜操作" @action="handleContainerRowAction($event, row as ContainerWorkbenchRow)" /></template>
+            <template #actions="{ row }"><RowActions text-actions :actions="containerRowActions(row as ContainerWorkbenchRow)" more-label="更多货柜操作" @action="handleContainerRowAction($event, row as ContainerWorkbenchRow)" /></template>
             <template #emptyReturnWarning="{ row }"><el-tag :type="drayageWarningType(row as ContainerBookingResource)" effect="light" :title="drayageWarningTitle(row as ContainerBookingResource)">{{ drayageWarningText(row as ContainerBookingResource) }}</el-tag></template>
             <template #cabinet="{ row }"><strong>{{ row.cabinetNo }}</strong><small>系统生成</small></template>
             <template #oceanBooking="{ row }"><span v-if="row.oceanBookingId"><strong>{{ row.billOfLadingNo || '已关联订舱' }}</strong><small>{{ row.containerNo ? `集装箱号：${row.containerNo}` : '集装箱号：待补录' }}</small></span><span v-else>未关联</span></template>
@@ -764,8 +768,7 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
             <template #actualSailingAt="{ row }">{{ formatTime(row.actualFacts?.actualSailingAt) }}</template>
             <template #estimatedPortArrivalAt="{ row }">{{ formatTime(row.estimatedPortArrivalAt) }}</template>
             <template #actualPortArrivalAt="{ row }">{{ formatTime(row.actualFacts?.actualPortArrivalAt) }}</template>
-          </DataTable>
-        </section>
+          </DataTable></section>
       </ListPageLayout>
 
     <OceanBookingLinkDialog v-model="linkOpen" :container="linkTarget" @linked="loadRows" />
@@ -819,7 +822,7 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
 </template>
 
 <style scoped>
-.container-page { display: grid; gap: var(--admin-space-5); min-width: 0; }.container-page small { display: block; margin-top: var(--admin-space-1); color: var(--cc-muted); }.container-query-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }.container-scope-tabs { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 0; border-bottom: 1px solid #e5e7eb; scrollbar-width: thin; }.container-query-toolbar { border: 0; }.row-actions { flex-wrap: nowrap; white-space: nowrap; }.row-actions :deep(.el-button + .el-button) { margin-left: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5); }.form-grid :deep(.el-select),.form-grid :deep(.el-date-editor),.form-grid :deep(.el-input-number),.simulation-form :deep(.el-select),.simulation-form :deep(.el-input-number),.fleet-select { width: 100%; }.arrival-time-cell { display: flex; align-items: center; width: 100%; min-width: 0; padding-right: var(--admin-space-1); box-sizing: border-box; }.arrival-time-picker { width: 200px !important; max-width: 100%; min-width: 0; box-sizing: border-box; }.details :deep(.el-descriptions__label) { width: 120px; }.drayage-load-alert { margin-bottom: var(--admin-space-5); }.drayage-summary { margin-bottom: var(--admin-space-5); }
+.container-page { display: grid; gap: var(--admin-space-5); min-width: 0; }.container-page small { display: block; margin-top: var(--admin-space-1); color: var(--cc-muted); }.container-query-panel { min-width: 0; }.container-scope-tabs { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 0; border-bottom: 1px solid #e5e7eb; scrollbar-width: thin; }.container-query-toolbar { border: 0; }.row-actions { flex-wrap: nowrap; white-space: nowrap; }.row-actions :deep(.el-button + .el-button) { margin-left: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5); }.form-grid :deep(.el-select),.form-grid :deep(.el-date-editor),.form-grid :deep(.el-input-number),.simulation-form :deep(.el-select),.simulation-form :deep(.el-input-number),.fleet-select { width: 100%; }.arrival-time-cell { display: flex; align-items: center; width: 100%; min-width: 0; padding-right: var(--admin-space-1); box-sizing: border-box; }.arrival-time-picker { width: 200px !important; max-width: 100%; min-width: 0; box-sizing: border-box; }.details :deep(.el-descriptions__label) { width: 120px; }.drayage-load-alert { margin-bottom: var(--admin-space-5); }.drayage-summary { margin-bottom: var(--admin-space-5); }
 .container-query-panel { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
 .container-query-toolbar :deep(.query-toolbar__tail) { width: 100%; flex: 0 0 100%; }
 .container-page .table-panel { width: 100%; max-width: 100%; min-width: 0; }

src/modules/container-loading/routes.ts

@@ -5,7 +5,7 @@ export const containerLoadingRoutes = [
     path: 'container-loading/domestic',
     name: 'domestic-container-workbench',
     component: () => import('./pages/DomesticContainersView.vue'),
-    meta: { title: '货柜列表', description: '管理国内送柜、装柜、出口报关与出仓', permission: 'platform:firstleg:container:list' },
+    meta: { showPageHeading: false, title: '货柜列表', description: '管理国内送柜、装柜、出口报关与出仓', permission: 'platform:firstleg:container:list' },
   },
   {
     path: 'container-loading/domestic/:containerId',
@@ -23,7 +23,7 @@ export const containerLoadingRoutes = [
     path: 'container-loading/overseas',
     name: 'overseas-container-workbench',
     component: () => import('./pages/OverseasContainersView.vue'),
-    meta: { title: '清关提柜', description: '管理海运轨迹、目的港清关、提柜与还空', permission: 'platform:firstleg:terminal-drayage:list' },
+    meta: { showPageHeading: false, title: '清关提柜', description: '管理海运轨迹、目的港清关、提柜与还空', permission: 'platform:firstleg:terminal-drayage:list' },
   },
   {
     path: 'container-loading/overseas/:containerId',