src/modules/warehouse-resources/pallets/pages/PalletsView.vue

@@ -3,7 +3,7 @@ import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Boxes, Plus, Save } from '@lucide/vue'
+import { Boxes, Layers, Package, PackageCheck, Plus, Save } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
 import { listAllPlatformWarehouses, type PlatformWarehouseResource } from '@/modules/warehouses'
@@ -346,7 +346,20 @@ onMounted(() => {
 
 <template>
   <AdminPage as="div" class="pallet-page admin-density admin-workbench">
-
+    <section class="summary-grid" aria-label="托盘数量概览">
+      <article class="workbench-metric workbench-tone is-compact" data-tone="blue">
+        <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Layers aria-hidden="true" /></span><h2 class="workbench-metric-label">托盘总数</h2></div>
+        <div class="workbench-metric-value"><strong>{{ summary.totalCount.toLocaleString('zh-CN') }}</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.idleCount.toLocaleString('zh-CN') }}</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"><Package aria-hidden="true" /></span><h2 class="workbench-metric-label">占用托盘</h2></div>
+        <div class="workbench-metric-value"><strong>{{ summary.occupiedCount.toLocaleString('zh-CN') }}</strong><span>个</span></div>
+      </article>
+    </section>
     <ListPageLayout aria-label="托盘列表页面">
 
 
@@ -364,11 +377,6 @@ onMounted(() => {
         :empty-text="filtered ? '暂无符合筛选条件的托盘' : '暂无托盘数据'"
         aria-label="托盘列表"
       >
-        <template #before-results>    <section class="summary-grid" aria-label="托盘数量概览">
-      <article><span>托盘总数</span><strong>{{ summary.totalCount }}</strong></article>
-      <article><span>闲置托盘</span><strong class="idle">{{ summary.idleCount }}</strong></article>
-      <article><span>占用托盘</span><strong class="occupied">{{ summary.occupiedCount }}</strong></article>
-    </section></template>
         <template #toolbar-start><h1>托盘管理</h1></template>
         <template #filters>
         <QueryToolbar
@@ -480,9 +488,7 @@ onMounted(() => {
 
 <style scoped>
 .pallet-page { display: grid; min-width: 0; gap: var(--admin-space-6, 16px); }
-.summary-grid { display:flex; flex-wrap:wrap; gap:var(--admin-space-3, 8px) 28px; padding:var(--admin-space-3, 8px) var(--admin-space-5, 12px); border:1px solid var(--workbench-border); background:var(--workbench-surface); }
-.summary-grid article { display:flex; align-items:baseline; gap:var(--admin-space-3, 8px); }
-.summary-grid span { color:var(--workbench-muted); font-size:var(--admin-font-caption, 12px); }.summary-grid strong { font-size:var(--admin-font-section, 14px); }.summary-grid .idle { color:var(--el-color-success); }.summary-grid .occupied { color:var(--el-color-warning); }
+.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--workbench-grid-gap); }
 .table-panel { min-width: 0; }
 .context-empty { padding: var(--admin-space-6, 16px); color: var(--workbench-muted); text-align: center; }
 .pallet-row-actions { white-space: nowrap; }

src/styles/adminDensity.test.ts

@@ -219,6 +219,14 @@ const cssRoot = (css: string) => {
 }
 
 describe('approved Admin density ownership', () => {
+  it('keeps domestic pallet metric appearance owned by shared workbench styles', () => {
+    const page = parse(read('modules/warehouse-resources/pallets/pages/PalletsView.vue')).descriptor
+    const css = page.styles.map(style => style.content).join('\n')
+    expect(page.template!.content).toContain('workbench-metric workbench-tone is-compact')
+    expect(css).not.toMatch(/\.summary-grid\s+(?:article|span|strong|\.idle|\.occupied)\b/)
+    expect(css).not.toMatch(/\.workbench-metric[\s.{]/)
+  })
+
   it('lets local transport editors fill the workspace and keeps form density in shared primitives', () => {
     const editor = read('modules/overseas-business/pages/TransportOrderFormView.vue')
     const demand = parse(read('modules/overseas-business/components/TransportDemandForm.vue')).descriptor