优化

src/modules/overseas-warehouse/components/OverseasDetailShell.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { ArrowLeft } from '@lucide/vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
@@ -8,6 +9,7 @@ import ContractPendingNotice from './ContractPendingNotice.vue'
 withDefaults(defineProps<{
   title: string
   dense?: boolean
+  workbench?: boolean
   referenceLabel: string
   referenceValue: string
   backLabel: string
@@ -21,7 +23,8 @@ defineEmits<{ back: [] }>()
 </script>
 
 <template>
-  <AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense }" :aria-label="title">
+  <AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense, 'admin-workbench': workbench }" :aria-label="title">
+    <div :class="workbench ? 'workbench-panel is-flush is-page-surface' : 'overseas-detail-body'">
     <header v-if="dense" class="density-detail-header">
       <div class="overseas-detail-title density-detail-heading">
         <el-button link class="density-back" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />{{ backText || '返回列表' }}</el-button>
@@ -40,11 +43,13 @@ defineEmits<{ back: [] }>()
     <slot name="overview" />
     <ContractPendingNotice v-if="pending" :domain="domain" />
     <slot />
+    </div>
   </AdminPage>
 </template>
 
 <style scoped>
 .overseas-detail-page { min-width: 0; }
+.overseas-detail-body { display: contents; }
 .overseas-detail-head { display: flex; min-height: 44px; align-items: center; gap: 12px; }
 .overseas-detail-head .overseas-detail-title { min-width: 0; flex: 1; }
 .overseas-detail-head .overseas-detail-title h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
@@ -52,5 +57,6 @@ defineEmits<{ back: [] }>()
 .overseas-detail-head .overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
 .overseas-detail-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 10px; border: 1px solid #f3d19e; border-radius: 999px; background: #fdf6ec; color: #b88230; font-size: 12px; font-weight: 600; white-space: nowrap; }
 .overseas-detail-status.is-live { border-color: var(--el-color-success-light-7); background: var(--el-color-success-light-9); color: var(--el-color-success-dark-2); }
-.overseas-detail-page.admin-density { background: var(--admin-surface); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); gap: 0; }
+.overseas-detail-page.admin-density { gap: 0; }
+.overseas-detail-page.admin-density:not(.admin-workbench) { background: var(--admin-surface); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); }
 </style>