优化

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { onMounted, ref } from 'vue'
 import { ArrowLeft } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -54,13 +55,15 @@ onMounted(load)
 </script>
 
 <template>
-  <AdminPage as="div" class="inventory-detail-page admin-density">
-    <section class="inventory-overview">
-    <header class="detail-header">
-      <el-button link class="density-back" aria-label="返回整柜业务" @click="back"><ArrowLeft :size="16" />返回列表</el-button>
-      <h1>{{ detail?.inventory.containerNo || '整柜库存详情' }}</h1>
-      <StatusBadge v-if="detail" :status="inventoryStatus(detail.inventory.inventoryStatus)" />
-    </header>
+  <AdminPage as="div" class="inventory-detail-page admin-density admin-workbench">
+    <section class="inventory-overview workbench-panel is-flush is-page-surface">
+      <header class="density-detail-header">
+        <div class="density-detail-heading">
+          <el-button link class="density-back" aria-label="返回整柜业务" @click="back"><ArrowLeft :size="16" />返回列表</el-button>
+          <h1 class="density-detail-title">{{ detail?.inventory.containerNo || '整柜库存详情' }}</h1>
+          <StatusBadge v-if="detail" :status="inventoryStatus(detail.inventory.inventoryStatus)" />
+        </div>
+      </header>
 
     <LoadErrorState v-if="error" title="整柜库存详情加载失败" :message="error.message" :loading="loading" @retry="load">
       <template #details><ApiErrorMeta :details="error" /></template>
@@ -77,7 +80,7 @@ onMounted(load)
           <div><dt>出库单数量</dt><dd>{{ detail.outboundOrderCount }}</dd></div>
           <div><dt>入库箱数</dt><dd>{{ detail.inventory.inboundBoxes }} 箱</dd></div>
           <div><dt>已出库箱数</dt><dd>{{ detail.inventory.outboundBoxes }} 箱</dd></div>
-          <div><dt>当前库存</dt><dd>{{ detail.inventory.availableBoxes }} 箱</dd></div>
+          <div><dt>当前库存</dt><dd><strong class="inventory-available">{{ detail.inventory.availableBoxes }}</strong> 箱</dd></div>
           <div><dt>累计入库体积</dt><dd>{{ detail.inventory.inboundVolumeCbm.toFixed(2) }} m³</dd></div>
           <div><dt>最后更新时间</dt><dd>{{ displayTime(detail.inventory.updatedAt) }}</dd></div>
           <div><dt>库存版本</dt><dd>{{ detail.inventory.version }}</dd></div>
@@ -88,25 +91,25 @@ onMounted(load)
 
       <section v-if="detail && !error" class="transactions" aria-labelledby="transactions-heading">
         <h2 id="transactions-heading">进销存交易记录</h2>
-        <DataTable :data="detail.transactions" :columns="transactionColumns" row-key="id" stripe column-settings-mode="hide" empty-text="暂无进销存流水">
-          <template #businessType="{ row }"><StatusBadge :status="row.businessType === 'INBOUND' ? '入库' : '出库'" /></template>
-        </DataTable>
+        <div class="transactions-table workbench-table is-page-surface"><DataTable :data="detail.transactions" :columns="transactionColumns" row-key="id" stripe column-settings-mode="hide" empty-text="暂无进销存流水">
+          <template #businessType="{ row }"><el-tag :type="row.businessType === 'INBOUND' ? 'success' : 'primary'" effect="light" size="small" round>{{ row.businessType === 'INBOUND' ? '入库' : '出库' }}</el-tag></template>
+        </DataTable></div>
       </section>
   </AdminPage>
 </template>
 
 <style scoped>
 .inventory-detail-page { display: grid; min-width: 0; gap: var(--admin-space-5, 12px); }
-.inventory-overview { min-width: 0; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
-.detail-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-5, 12px); min-height: 40px; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); }
-.detail-header h1 { margin: 0; font-size: var(--admin-font-title, 16px); letter-spacing: 0; }
-.transactions { min-width: 0; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.inventory-overview { min-width: 0; }
+.transactions { min-width: 0; }
 .detail-section { min-width: 0; padding: 0 var(--admin-space-5, 12px) var(--admin-space-5, 12px); }
 .detail-section h2, .transactions h2 { margin: 0; font-size: var(--admin-font-section, 14px); letter-spacing: 0; }
 .detail-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--admin-space-3, 8px) 0 0; }
 .transactions { padding-top: var(--admin-space-5, 12px); overflow: hidden; }
 .transactions h2 { margin: 0 var(--admin-space-5, 12px) var(--admin-space-3, 8px); }
-.detail-loading { min-height: 180px; padding: var(--admin-space-7, 24px); border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); color: var(--cc-muted); }
+.transactions-table { padding: 0 var(--admin-space-5, 12px); }
+.inventory-available { color: var(--workbench-number); font-variant-numeric: tabular-nums; }
+.detail-loading { min-height: 180px; padding: var(--admin-space-7, 24px); border: 1px solid var(--workbench-border); background: var(--admin-surface, #fff); color: var(--workbench-muted); }
 @media (max-width: 960px) { .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 520px) { .detail-header { flex-wrap: wrap; } .detail-header h1 { width: 100%; font-size: 18px; } .detail-fields { grid-template-columns: 1fr; } }
+@media (max-width: 520px) { .density-detail-heading { flex-wrap: wrap; } .density-detail-title { width: 100%; font-size: 18px; } .detail-fields { grid-template-columns: 1fr; } }
 </style>