优化

src/modules/loading-lists/components/LoadingListDetailDrawer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Pencil } from '@lucide/vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
+import ContainerFeesPanel from './ContainerFeesPanel.vue'
 import { loadingListStatusLabel } from '../status'
 import type { ApiErrorDetails } from '@/shared/api/http'
 import type { LoadingDetail, LoadingListMode, LoadingListSummary, PreloadSummary } from '../api/platformLoadingLists'
@@ -19,7 +19,6 @@ const props = defineProps<{
   canEdit: boolean
 }>()
 
-const open = defineModel<boolean>({ default: false })
 const emit = defineEmits<{ retry: []; edit: [] }>()
 
 const itemColumns: DataTableColumn[] = [
@@ -43,6 +42,11 @@ const itemColumns: DataTableColumn[] = [
 
 const summary = computed<LoadingListSummary | null>(() => props.detail?.summary || null)
 const preloadSummary = computed(() => props.mode === 'preload' ? summary.value as PreloadSummary | null : null)
+const feeCustomers = computed(() => {
+  const customers = new Map<string, string | null>()
+  for (const item of props.detail?.items || []) if (item.accountId) customers.set(item.accountId, item.customerName)
+  return [...customers].map(([accountId, customerName]) => ({ accountId, customerName }))
+})
 const title = computed(() => {
   if (!summary.value) return props.mode === 'preload' ? '预装清单详情' : '装柜清单详情'
   const number = props.mode === 'preload'
@@ -70,14 +74,7 @@ function formatNumber(value?: number | null, digits = 3) {
 </script>
 
 <template>
-  <AppDrawer
-    v-model="open"
-    :title="title"
-    size="min(1180px, 96vw)"
-    :loading="loading"
-    :show-footer="false"
-    destroy-on-close
-  >
+  <section v-loading="loading" class="loading-detail-content" :aria-label="title" :aria-busy="loading">
     <LoadErrorState v-if="error" title="清单详情加载失败" :message="error.message" @retry="emit('retry')">
       <template #details><ApiErrorMeta :details="error" /></template>
     </LoadErrorState>
@@ -122,6 +119,8 @@ function formatNumber(value?: number | null, digits = 3) {
         </DataTable>
       </section>
 
+      <ContainerFeesPanel :plan-id="summary.planId" :customers="feeCustomers" />
+
       <section class="history-section surface-panel" aria-label="操作历史">
         <header><h2>操作历史</h2><span>{{ detail.histories.length }} 条</span></header>
         <el-empty v-if="detail.histories.length === 0" description="暂无操作历史" :image-size="72" />
@@ -137,11 +136,11 @@ function formatNumber(value?: number | null, digits = 3) {
       </section>
       </DetailPageLayout>
     </div>
-  </AppDrawer>
+  </section>
 </template>
 
 <style scoped>
-.detail-layout { display: grid; gap: 16px; }
+.loading-detail-content, .detail-layout { display: grid; min-width: 0; gap: 16px; }
 .detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--cc-border); background: var(--cc-border); }
 .detail-summary > div { display: flex; min-width: 0; min-height: 78px; flex-direction: column; justify-content: center; gap: 7px; padding: 14px 16px; background: #fff; }
 .detail-summary span { color: var(--cc-muted); font-size: 12px; }