优化

src/modules/suppliers/pages/SuppliersView.test.ts

@@ -22,13 +22,13 @@ describe('supplier formal pages', () => {
     expect(source).toContain("access.can('platform:supplier:status')")
     expect(source).toContain("access.can('platform:supplier:list')")
     expect(source).toContain('class="density-action"')
-    expect(source).toContain('class="row-actions density-actions"')
+    expect(source).toContain('class="row-actions density-actions admin-text-actions"')
     expect(source).toContain("statusLabels[supplierRow(row).status] ?? '—'")
   })
 
   it('matches the prototype statistics, category tabs and search sequence', () => {
     expect(source).toContain('class="supplier-list-top"')
-    expect(source).toContain('class="supplier-query-panel"')
+    expect(source).toContain('class="supplier-query-panel integrated-query-group"')
     expect(source).toContain('class="supplier-query-toolbar"')
     expect(source).toContain('class="supplier-tabs density-tabs"')
     expect(source).toContain('（{{ item.value }}）')

src/modules/suppliers/pages/SuppliersView.vue

@@ -124,9 +124,13 @@ onActivated(() => {
 <template>
   <AdminPage class="admin-density">
     <ListPageLayout aria-label="供应商列表">
-      <template #toolbar>
+
+
+      <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="canView" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" empty-text="暂无供应商数据" preference-key="supplier-list">
+        <template #toolbar-start><h1>供应商列表</h1></template>
+        <template #filters>
         <div class="supplier-list-top">
-          <div class="supplier-query-panel">
+          <div class="supplier-query-panel integrated-query-group">
             <nav class="supplier-tabs density-tabs" role="tablist" aria-label="供应商分类统计">
               <button role="tab" :aria-selected="activeCategory === item.category" v-for="item in metricItems" :key="item.category" type="button" :class="{ active: activeCategory === item.category }" @click="switchCategory(item.category)"><span class="density-tab-icon" aria-hidden="true">{{ ({ BOOKING: '🚢', CUSTOMS: '📋', TRUCKING: '🚚', CERTIFICATE: '📄' })[item.category] }}</span>{{ categoryLabels[item.category] }}（{{ item.value }}）</button>
             </nav>
@@ -134,24 +138,22 @@ onActivated(() => {
           </div>
         </div>
       </template>
-      <template #state>
+        <template #notices>
         <LoadErrorState v-if="!canView" title="暂无供应商查看权限" message="请联系管理员开通供应商查看权限。" :show-retry="false" />
         <LoadErrorState v-else-if="loadError" title="供应商加载失败" :message="loadError.message" :loading="loading" @retry="load">
           <template #details><ApiErrorMeta :details="loadError" /></template>
         </LoadErrorState>
       </template>
-      <section v-if="canView" class="surface-panel table-panel">
-        <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" empty-text="暂无供应商数据" preference-key="supplier-list">
+
+
           <template #toolbar-actions>
             <el-button v-if="access.can('platform:supplier:create')" type="primary" @click="router.push({ name: 'supplier-create' })"><Plus :size="16" />新增供应商</el-button>
           </template>
-          <template #actions="{ row }">
-            <div class="row-actions density-actions">
+          <template #actions="{ row }"><div class="row-actions density-actions admin-text-actions">
               <el-button data-tone="neutral" class="density-action" size="small"   @click="router.push({ name: 'supplier-detail', params: { id: row.id } })">详情</el-button>
               <el-button data-tone="neutral" class="density-action" v-if="access.can('platform:supplier:edit')" size="small"   @click="router.push({ name: 'supplier-edit', params: { id: row.id } })">编辑</el-button>
               <el-button class="density-action" v-if="access.can('platform:supplier:status')" size="small"  :data-tone="row.status === 'ACTIVE' ? 'danger' : 'success'" :loading="actionId === row.id" @click="toggleStatus(supplierRow(row))">{{ row.status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
-            </div>
-          </template>
+            </div></template>
           <template #name="{ row }"><LineClampText :content="row.name" /></template>
           <template #category="{ row }">{{ categoryLabels[row.category as SupplierCategory] }}</template>
           <template #truckingScope="{ row }">{{ formatTruckingScope(supplierRow(row).truckingScope) }}</template>
@@ -159,15 +161,14 @@ onActivated(() => {
           <template #license="{ row }"><el-button data-tone="neutral" class="density-action" size="small"   @click="showLicense(supplierRow(row))">查看</el-button></template>
           <template #status="{ row }"><StatusBadge :status="statusLabels[supplierRow(row).status] ?? '—'" /></template>
           <template #settlement="{ row }">{{ settlementLabels[supplierRow(row).settlementPeriod] }}</template>
-        </DataTable>
-      </section>
+        </DataTable></section>
     </ListPageLayout>
     <SupplierLicenseDialog v-model="licenseOpen" :supplier="licenseSupplier" />
   </AdminPage>
 </template>
 
 <style scoped>
- .supplier-list-top { display: grid; gap: var(--admin-space-6); }.supplier-query-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: #fff; }.supplier-query-toolbar { border: 0; }
+ .supplier-list-top { display: grid; gap: var(--admin-space-6); }.supplier-query-panel { min-width: 0; }.supplier-query-toolbar { border: 0; }
 @media (max-width: 720px) { .supplier-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 380px) { .supplier-metrics { grid-template-columns: 1fr; } }
 </style>

src/modules/suppliers/routes.ts

@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
 
 export const supplierRoutes = [
-  { path: 'suppliers', name: 'supplier-list', component: () => import('@/modules/suppliers/pages/SuppliersView.vue'), meta: { title: '供应商列表', description: '维护平台公共订舱、报关、拖车和证书供应商', permission: 'platform:supplier:list' } },
+  { path: 'suppliers', name: 'supplier-list', component: () => import('@/modules/suppliers/pages/SuppliersView.vue'), meta: { showPageHeading: false, title: '供应商列表', description: '维护平台公共订舱、报关、拖车和证书供应商', permission: 'platform:supplier:list' } },
   { path: 'suppliers/new', name: 'supplier-create', component: () => import('@/modules/suppliers/pages/SupplierFormView.vue'), meta: { title: '新增供应商', showPageHeading: false, description: '新增平台公共供应商档案', permission: 'platform:supplier:create' } },
   { path: 'suppliers/:id', name: 'supplier-detail', component: () => import('@/modules/suppliers/pages/SupplierDetailView.vue'), meta: { title: '供应商详情', showPageHeading: false, description: '查看平台公共供应商完整档案', permission: 'platform:supplier:list' } },
   { path: 'suppliers/:id/edit', name: 'supplier-edit', component: () => import('@/modules/suppliers/pages/SupplierFormView.vue'), meta: { title: '编辑供应商', showPageHeading: false, description: '编辑平台公共供应商档案', permission: 'platform:supplier:edit' } },