优化

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import OverseasDetailShell from './OverseasDetailShell.vue'
 
 interface DetailGroup {
@@ -7,6 +8,7 @@ interface DetailGroup {
 }
 
 defineProps<{
+  dense?: boolean
   title: string
   referenceLabel: string
   referenceValue: string
@@ -25,6 +27,8 @@ defineEmits<{ back: [] }>()
 
 <template>
   <OverseasDetailShell
+    :dense="dense"
+    :class="{ 'admin-density': dense }"
     :title="title"
     :reference-label="referenceLabel"
     :reference-value="referenceValue"
@@ -38,7 +42,7 @@ defineEmits<{ back: [] }>()
     <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>{{ fieldValues?.[field] ?? '—' }}</dd></div></dl>
+        <dl class="detail-fields" :class="{ 'density-fields': dense }"><div v-for="field in group.fields" :key="field"><dt>{{ field }}</dt><dd>{{ fieldValues?.[field] ?? '—' }}</dd></div></dl>
       </section>
       <slot name="content-after" />
     </section>
@@ -50,10 +54,16 @@ defineEmits<{ back: [] }>()
 .detail-group { min-width: 0; padding: 16px 18px 18px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
 .detail-group:nth-child(even) { border-right: 0; }
 .detail-group h2 { margin: 0 0 12px; color: var(--cc-text); font-size: 15px; }
-.detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
-.detail-fields > div { display: grid; min-width: 0; min-height: 46px; grid-template-columns: 126px minmax(0, 1fr); border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
-.detail-fields dt, .detail-fields dd { display: flex; min-width: 0; align-items: center; padding: 8px 10px; }
-.detail-fields dt { background: #f8fafc; color: var(--cc-muted); font-size: 12px; }
-.detail-fields dd { margin: 0; color: var(--cc-text); overflow-wrap: anywhere; }
-@media (max-width: 1100px) { .read-only-detail, .detail-fields { grid-template-columns: 1fr; } .detail-group { border-right: 0; } }
+.detail-fields:not(.density-fields) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
+.detail-fields:not(.density-fields) > div { display: grid; min-width: 0; min-height: 46px; grid-template-columns: 126px minmax(0, 1fr); border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
+.detail-fields:not(.density-fields) dt, .detail-fields:not(.density-fields) dd { display: flex; min-width: 0; align-items: center; padding: 8px 10px; }
+.detail-fields:not(.density-fields) dt { background: #f8fafc; color: var(--cc-muted); font-size: 12px; }
+.detail-fields:not(.density-fields) dd { margin: 0; color: var(--cc-text); overflow-wrap: anywhere; }
+@media (max-width: 1100px) { .read-only-detail, .detail-fields:not(.density-fields) { grid-template-columns: 1fr; } .detail-group { border-right: 0; } }
+
+.admin-density .read-only-detail { grid-template-columns: minmax(0, 1fr); border: 0; }
+.admin-density .detail-group { padding: var(--admin-space-5); border-right: 0; }
+.admin-density .detail-group h2 { margin-bottom: var(--admin-space-3); font-size: var(--admin-font-section); }
+@media(max-width:1100px) { .admin-density .density-fields { grid-template-columns: 1fr; } }
+
 </style>