优化

src/modules/suppliers/components/SupplierLicenseDialog.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed } from 'vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
@@ -13,9 +14,9 @@ const title = computed(() => {
 </script>
 
 <template>
-  <AppDialog class="admin-density-dialog" v-model="open" :title="title" width="min(560px, calc(100vw - 24px))" :show-confirm="false" cancel-text="关闭">
+  <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="open" :title="title" width="min(560px, calc(100vw - 24px))" :show-confirm="false" cancel-text="关闭">
     <div v-if="supplier" class="density-dialog-sections">
-      <section class="density-dialog-section" data-tone="source" aria-label="营业执照信息">
+      <section class="density-dialog-section workbench-evidence" data-tone="source" aria-label="营业执照信息">
         <h3 class="density-dialog-section__title">营业执照资料</h3>
         <table class="density-table license-info-table"><tbody>
           <tr><th scope="row">名称</th><td>{{ supplier.name || '—' }}</td></tr>

src/modules/suppliers/pages/SupplierDetailView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -48,7 +49,7 @@ watch(supplierId, () => { void load() }, { immediate: true })
 </script>
 
 <template>
-  <AdminPage class="admin-density" ><DetailPageLayout class="density-detail-layout surface-panel" aria-label="供应商详情">
+  <AdminPage class="admin-density admin-workbench" ><DetailPageLayout class="density-detail-layout surface-panel workbench-panel is-flush is-page-surface" aria-label="供应商详情">
     <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="router.push({ name: 'supplier-list' })"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ supplier?.name || '供应商详情' }}</h1><StatusBadge v-if="supplier" :status="statusLabels[supplier.status]" /></div><el-button v-if="supplier && access.can('platform:supplier:edit')" type="primary" @click="router.push({ name: 'supplier-edit', params: { id: supplier.id } })"><Pencil :size="16" />编辑</el-button></div></template>
     <LoadErrorState v-if="!canView" title="暂无供应商查看权限" message="请联系管理员开通供应商查看权限。" :show-retry="false" />
     <LoadErrorState v-else-if="error" title="供应商详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
@@ -63,6 +64,6 @@ watch(supplierId, () => { void load() }, { immediate: true })
 <style scoped>
 .detail-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .detail-panel { min-width: 0; }
-.detail-grid .wide-field { grid-column: span 2; }.license-row { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6); margin-top: var(--admin-space-7); padding: var(--admin-space-6); border: 1px dashed var(--cc-border); border-radius: var(--admin-radius); background: #fafafa; }.license-row strong,.license-row span { display: block; }.license-row span { margin-top: var(--admin-space-1); color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.detail-grid .wide-field { grid-column: span 2; }.license-row { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6); margin-top: var(--admin-space-7); padding: var(--admin-space-6); border: 1px dashed var(--workbench-border); border-radius: var(--admin-radius); background: var(--workbench-surface-soft); }.license-row strong,.license-row span { display: block; }.license-row span { margin-top: var(--admin-space-1); color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 @media (max-width: 720px) { .detail-header,.license-row { align-items: stretch; flex-direction: column; }.detail-actions { display: grid !important; grid-template-columns: 1fr 1fr; }.detail-actions :deep(.el-button) { min-height: 44px; }.detail-grid { grid-template-columns: 1fr; }.detail-grid div,.detail-grid div:nth-child(3n) { border-right: 0; }.detail-panel { padding: 16px; } }
 </style>

src/modules/suppliers/pages/SupplierFormView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onActivated, onDeactivated, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -95,9 +96,9 @@ watch(() => form.category, (category) => { if (category !== 'BOOKING') form.carr
 </script>
 
 <template>
-  <AdminPage class="admin-density" >
+  <AdminPage class="admin-density admin-workbench" >
     <OperationErrorToast :details="submitError" />
-    <DetailPageLayout class="density-detail-layout surface-panel" :aria-label="editing ? '编辑供应商' : '新增供应商'">
+    <DetailPageLayout class="density-detail-layout surface-panel workbench-panel is-flush is-page-surface" :aria-label="editing ? '编辑供应商' : '新增供应商'">
       <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="router.push({ name: 'supplier-list' })"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ editing ? '编辑供应商' : '新增供应商' }}</h1></div></div></template>
       <LoadErrorState v-if="!access.can(requiredPermission)" title="暂无操作权限" :message="`请联系管理员开通${editing ? '供应商编辑' : '供应商新增'}权限。`" :show-retry="false" />
       <LoadErrorState v-else-if="loadError" title="供应商加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
@@ -135,8 +136,8 @@ watch(() => form.category, (category) => { if (category !== 'BOOKING') form.carr
 
 <style scoped>
 .supplier-form-panel { min-width: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-7); }.span-2 { grid-column: 1 / -1; }
-.form-grid :deep(.el-select) { width: 100%; }.file-placeholder { display: flex; width: 100%; min-height: 96px; align-items: center; justify-content: center; flex-direction: column; gap: var(--admin-space-2); padding: var(--admin-space-6); border: 1px dashed #d9d9d9; border-radius: var(--admin-radius); background: #fafafa; color: var(--cc-muted); text-align: center; }.file-placeholder small { max-width: 420px; line-height: 1.5; }
-.form-actions { display: flex; justify-content: center; gap: var(--admin-space-5); padding: var(--admin-space-6) 0 0; border-top: 1px solid var(--cc-border); }.form-actions :deep(.el-button) { min-width: 112px; margin-left: 0; }
+.form-grid :deep(.el-select) { width: 100%; }.file-placeholder { display: flex; width: 100%; min-height: 96px; align-items: center; justify-content: center; flex-direction: column; gap: var(--admin-space-2); padding: var(--admin-space-6); border: 1px dashed var(--workbench-border); border-radius: var(--admin-radius); background: var(--workbench-surface-soft); color: var(--workbench-muted); text-align: center; }.file-placeholder small { max-width: 420px; line-height: 1.5; }
+.form-actions { display: flex; justify-content: center; gap: var(--admin-space-5); padding: var(--admin-space-6) 0 0; border-top: 1px solid var(--workbench-border); }.form-actions :deep(.el-button) { min-width: 112px; margin-left: 0; }
 @media (min-width: 1600px) { .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
 @media (min-width: 1280px) and (max-width: 1599px) { .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 @media (max-width: 720px) { .supplier-form-panel { padding: 16px; } .form-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }.form-page-header { align-items: stretch; flex-direction: column; }.form-actions { flex-direction: column; }.form-actions :deep(.el-button) { width: 100%; min-height: 44px; } }

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

@@ -30,7 +30,13 @@ describe('supplier formal pages', () => {
     expect(source).toContain('class="supplier-list-top"')
     expect(source).toContain('class="supplier-query-panel integrated-query-group"')
     expect(source).toContain('class="supplier-query-toolbar"')
-    expect(source).toContain('class="supplier-tabs density-status-tabs"')
+    expect(source).toContain('class="supplier-tabs density-status-tabs workbench-list-tabs"')
+    const toolbar = source.match(/<template #toolbar-start>([\s\S]*?)<\/template>/)?.[1]
+    const filters = source.match(/<template #filters>([\s\S]*?)<\/template>/)?.[1]
+    expect(toolbar).toContain('aria-label="供应商分类统计"')
+    expect(toolbar).toContain('（{{ item.value }}）')
+    expect(filters).toContain('<QueryToolbar')
+    expect(filters).not.toContain('role="tablist"')
     expect(source).toContain('（{{ item.value }}）')
     expect(source).not.toContain('class="supplier-metrics"')
     expect(source).toContain('@click="switchCategory(item.category)"')

src/modules/suppliers/pages/SuppliersView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onActivated, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -101,7 +102,7 @@ async function toggleStatus(row: Supplier) {
   const verb = next === 'ACTIVE' ? '启用' : '停用'
   const supplierName = row.name.trim()
   try {
-    await ElMessageBox.confirm(`确认${verb}供应商“${row.name}”吗？`, supplierName ? `${verb}供应商 · ${supplierName}` : `${verb}供应商`, { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消' })
+    await ElMessageBox.confirm(`确认${verb}供应商“${row.name}”吗？`, supplierName ? `${verb}供应商 · ${supplierName}` : `${verb}供应商`, { customClass: 'admin-density-confirm admin-workbench', type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消' })
     actionId.value = row.id
     await changeSupplierStatus(row.id, next)
     ElMessage.success(`供应商已${verb}`)
@@ -123,18 +124,19 @@ onActivated(() => {
 </script>
 
 <template>
-  <AdminPage class="admin-density">
+  <AdminPage class="admin-density admin-workbench">
     <ListPageLayout aria-label="供应商列表">
 
 
-      <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>
+      <section class="workbench-table is-page-surface"><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>
+          <nav class="supplier-tabs density-status-tabs workbench-list-tabs" role="tablist" aria-label="供应商分类统计">
+            <button role="tab" :aria-selected="activeCategory === item.category" v-for="item in metricItems" :key="item.category" type="button" :class="{ 'is-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>
+        </template>
         <template #filters>
         <div class="supplier-list-top">
           <div class="supplier-query-panel integrated-query-group">
-            <nav class="supplier-tabs density-status-tabs" role="tablist" aria-label="供应商分类统计">
-              <button role="tab" :aria-selected="activeCategory === item.category" v-for="item in metricItems" :key="item.category" type="button" :class="{ 'is-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>
             <QueryToolbar v-model="filters" class="supplier-query-toolbar" ariaLabel="供应商筛选" :fields="queryFields" @search="search" />
           </div>
         </div>