优化

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

@@ -3,13 +3,15 @@ import { ArrowLeft } from '@lucide/vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ContractPendingNotice from './ContractPendingNotice.vue'
 
-defineProps<{
+withDefaults(defineProps<{
   title: string
   referenceLabel: string
   referenceValue: string
   backLabel: string
   domain: string
-}>()
+  pending?: boolean
+  statusText?: string
+}>(), { pending: true, statusText: '接口待接入' })
 
 defineEmits<{ back: [] }>()
 </script>
@@ -22,10 +24,10 @@ defineEmits<{ back: [] }>()
         <h1>{{ title }}</h1>
         <p>{{ referenceLabel }} <strong>{{ referenceValue }}</strong></p>
       </div>
-      <span class="overseas-detail-status" role="status">接口待接入</span>
+      <span class="overseas-detail-status" :class="{ 'is-live': !pending }" role="status">{{ statusText }}</span>
     </header>
 
-    <ContractPendingNotice :domain="domain" />
+    <ContractPendingNotice v-if="pending" :domain="domain" />
     <slot />
   </AdminPage>
 </template>
@@ -38,4 +40,5 @@ defineEmits<{ back: [] }>()
 .overseas-detail-title p { margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
 .overseas-detail-title strong { color: var(--cc-text); overflow-wrap: anywhere; }
 .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); }
 </style>

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

@@ -13,6 +13,11 @@ defineProps<{
   backLabel: string
   domain: string
   groups: DetailGroup[]
+  fieldValues?: Record<string, string | number>
+  pending?: boolean
+  statusText?: string
+  loading?: boolean
+  showContent?: boolean
 }>()
 
 defineEmits<{ back: [] }>()
@@ -25,12 +30,15 @@ defineEmits<{ back: [] }>()
     :reference-value="referenceValue"
     :back-label="backLabel"
     :domain="domain"
+    :pending="pending"
+    :status-text="statusText"
     @back="$emit('back')"
   >
-    <section class="read-only-detail" :aria-label="title">
+    <slot name="state" />
+    <section v-if="showContent !== false" v-loading="loading" class="read-only-detail" :aria-label="title" :aria-busy="loading">
       <section v-for="group in groups" :key="group.title" class="detail-group" :aria-label="group.title">
         <h2>{{ group.title }}</h2>
-        <dl class="detail-fields"><div v-for="field in group.fields" :key="field"><dt>{{ field }}</dt><dd>—</dd></div></dl>
+        <dl class="detail-fields"><div v-for="field in group.fields" :key="field"><dt>{{ field }}</dt><dd>{{ fieldValues?.[field] ?? '—' }}</dd></div></dl>
       </section>
     </section>
   </OverseasDetailShell>