优化

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

@@ -55,8 +55,9 @@ onMounted(load)
 
 <template>
   <AdminPage as="div" class="inventory-detail-page admin-density">
+    <section class="inventory-overview">
     <header class="detail-header">
-      <el-button aria-label="返回整柜业务" @click="back"><ArrowLeft :size="16" />返回</el-button>
+      <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>
@@ -65,8 +66,7 @@ onMounted(load)
       <template #details><ApiErrorMeta :details="error" /></template>
     </LoadErrorState>
 
-    <template v-else-if="detail">
-      <section class="detail-section" aria-labelledby="inventory-basic-heading">
+      <section v-else-if="detail" class="detail-section" aria-labelledby="inventory-basic-heading">
         <h2 id="inventory-basic-heading">整柜信息</h2>
         <dl class="detail-fields density-fields">
           <div><dt>货物名称</dt><dd>{{ detail.inventory.cargoName }}</dd></div>
@@ -83,25 +83,25 @@ onMounted(load)
           <div><dt>库存版本</dt><dd>{{ detail.inventory.version }}</dd></div>
         </dl>
       </section>
+      <div v-else class="detail-loading" v-loading="loading">正在加载整柜库存详情</div>
+    </section>
 
-      <section class="transactions" aria-labelledby="transactions-heading">
+      <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>
       </section>
-    </template>
-
-    <div v-else class="detail-loading" v-loading="loading">正在加载整柜库存详情</div>
   </AdminPage>
 </template>
 
 <style scoped>
 .inventory-detail-page { display: grid; min-width: 0; gap: var(--admin-space-5, 12px); }
-.detail-header { display: flex; align-items: center; gap: var(--admin-space-5, 12px); min-height: 40px; }
+.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; }
-.detail-section, .transactions { min-width: 0; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
-.detail-section { padding: var(--admin-space-5, 12px); }
+.transactions { min-width: 0; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.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; }