优化

src/modules/trucking/components/TruckAppointmentForm.test.ts

@@ -44,13 +44,13 @@ describe('TruckAppointmentForm interaction contract', () => {
     expect(source).toContain("plannedLoadingAt: [{ required: true, message: '请选择预计装箱时间'")
     expect(source).toContain("draft.customerName || '历史客户（需重新选择）'")
     expect(source).toContain(':value="String(draft.customerId)" disabled')
-    expect(source).toContain('props.resource?.oceanBookingNo')
-    expect(source).toContain('props.resource?.cabinetNo')
-    expect(source).not.toContain('props.resource?.containerBookingId].filter')
+    expect(source).not.toContain('const relationText = computed')
   })
 
   it('keeps booking, cabinet and loading plan optional and only uses them for completion hints', () => {
     expect(source).toContain('订舱、柜次和装柜计划均为可选关联，不影响独立开立拖车预约')
+    expect(source).toContain('class="relation-note"')
+    expect(source).not.toContain('class="relation-alert">历史关联快照')
     expect(source).toContain('<el-divider content-position="left">可选关联</el-divider>')
     expect(source).toContain('label="关联柜次（可选）"')
     expect(source).toContain('label="关联订舱（可选）"')

src/modules/trucking/components/TruckAppointmentForm.vue

@@ -38,7 +38,6 @@ const rules: FormRules = {
   grossWeightKg: [nonNegative('毛重')], volumeCbm: [nonNegative('体积')], payableAmount: [nonNegative('应付拖车费')], receivableAmount: [nonNegative('应收拖车费')],
   currency: [{ pattern: /^[A-Z]{3,8}$/, message: '币种请输入 3-8 位大写字母（如 RMB）', trigger: 'blur' }],
 }
-const relationText = computed(() => [props.resource?.customerName, props.resource?.oceanBookingNo, props.resource?.cabinetNo, props.resource?.containerNo, props.resource?.warehouseName].filter(Boolean).join(' / ') || '无历史关联')
 const customers = ref<PlatformTenantResource[]>([])
 const carriers = ref<Supplier[]>([])
 const containers = ref<ContainerBookingResource[]>([])
@@ -122,8 +121,7 @@ watch(() => props.readonly, (readonly) => { if (!readonly && !customers.value.le
 
 <template>
   <el-form ref="formRef" :model="draft" :rules="rules" label-position="top" :disabled="readonly || submitting" class="truck-form">
-    <el-alert type="info" :closable="false" class="relation-alert">订舱、柜次和装柜计划均为可选关联，不影响独立开立拖车预约；选择后仅用于补全快照和一致性检查。</el-alert>
-    <el-alert v-if="resource" type="info" :closable="false" class="relation-alert">历史关联快照：{{ relationText }}</el-alert>
+    <p class="relation-note">订舱、柜次和装柜计划均为可选关联，不影响独立开立拖车预约；选择后仅用于补全快照和一致性检查。</p>
     <el-alert v-if="relationWarning" type="warning" :closable="false" show-icon :title="relationWarning" class="relation-alert" />
     <el-alert v-if="optionsError" type="warning" :closable="false" show-icon :title="optionsError" class="relation-alert"><el-button link type="warning" :loading="optionsLoading" @click="loadOptions">重新加载选项</el-button></el-alert>
     <el-row :gutter="16">
@@ -169,10 +167,11 @@ watch(() => props.readonly, (readonly) => { if (!readonly && !customers.value.le
 </template>
 
 <style scoped>
-.truck-form { padding-bottom: 12px; }
+.truck-form { padding-bottom: 4px; }
+.relation-note { margin:0 0 8px; padding:8px 10px; border-left:3px solid var(--cc-primary); background:var(--el-fill-color-extra-light); color:var(--cc-muted); font-size:12px; line-height:1.5; }
 .relation-alert { margin-bottom: 16px; }
 .form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
- :deep(.el-divider) { margin: 18px 0 12px; }
+ :deep(.el-divider) { margin: 14px 0 10px; }
  :deep(.el-divider__text) { color: var(--el-text-color-primary); font-size: 14px; font-weight: 600; }
 :deep(.el-input), :deep(.el-textarea), :deep(.el-date-editor) { max-width: 100%; }
 .field-hint { margin-top:4px; color:var(--cc-muted); font-size:12px; }

src/modules/trucking/pages/TruckAppointmentDetailView.test.ts

@@ -5,6 +5,25 @@ import { resolve } from 'node:path'
 const source = readFileSync(resolve(process.cwd(), 'src/modules/trucking/pages/TruckAppointmentDetailView.vue'), 'utf8')
 
 describe('TruckAppointmentDetailView status contract', () => {
+  it('merges identity, status and relation snapshot into a compact overview', () => {
+    expect(source).toContain('class="truck-overview surface-panel"')
+    expect(source).toContain('class="truck-overview__heading"')
+    expect(source).toContain('class="truck-overview__identity"')
+    expect(source).toContain('class="truck-overview__status"')
+    expect(source).toContain('class="relation-snapshot"')
+    expect(source).toContain("const relationSnapshot = computed(() => resource.value ?")
+    expect(source).not.toContain('class="surface-panel status-panel"')
+    expect(source).not.toContain('class="status-bar"')
+    expect(source).not.toContain('class="detail-identity"')
+    expect(source).not.toContain('PageToolbar')
+  })
+
+  it('spaces independent form and history sections without nested overview cards', () => {
+    expect(source).toContain('.truck-detail-page :deep(.detail-page-layout__content) { display:grid; min-width:0; gap:16px; }')
+    expect(source).toContain('.form-panel { padding:16px; }')
+    expect(source).toContain('.history-section { padding:16px; }')
+  })
+
   it('matches the backend edit lifecycle and avoids a self-transition action', () => {
     expect(source).toContain('const targets: TruckAppointmentStatus[] =')
     expect(source).not.toContain('const targets: string[] =')

src/modules/trucking/pages/TruckAppointmentDetailView.vue

@@ -7,7 +7,6 @@ import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
-import PageToolbar from '@/shared/components/PageToolbar.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getTruckAppointment, listTruckAppointmentAttachments, listTruckAppointmentHistory, performTruckAppointmentAction, rescheduleTruckAppointment, updateTruckAppointment, type TruckAppointmentAction } from '../api/platformTrucking'
@@ -17,6 +16,7 @@ import { truckAppointmentActionLabel, truckAppointmentStatusLabel, truckAppointm
 const route = useRoute(); const router = useRouter(); const loading = ref(false); const saving = ref(false); const statusSaving = ref(false); const attachmentOpen = ref(false); const resource = ref<TruckAppointmentResource | null>(null); const error = ref<ApiErrorDetails | null>(null); const form = reactive<SaveTruckAppointmentRequest>({ expectedVersion: 0, customerId: null, carrierId: null, plannedLoadingAt: null })
 const history = ref<TruckAppointmentStatusHistory[]>([])
 const access = useAccessPreviewStore(); const editing = computed(() => route.query.edit === '1'); const id = computed(() => String(route.params.id)); const canEdit = computed(() => access.can('platform:firstleg:truck-appointment:edit') && ['DRAFT', 'PENDING_DISPATCH', 'RESCHEDULED'].includes(resource.value?.status || '') && editing.value); const canChangeStatus = computed(() => access.can('platform:firstleg:truck-appointment:operate')); const canManageAttachments = computed(() => access.can('platform:firstleg:truck-appointment:edit'))
+const relationSnapshot = computed(() => resource.value ? [resource.value.customerName, resource.value.oceanBookingNo, resource.value.cabinetNo, resource.value.containerNo, resource.value.warehouseName].filter(Boolean).join(' / ') || '无历史关联' : '')
 async function loadRelated() { if (!resource.value) return; const [attachments, histories] = await Promise.all([listTruckAppointmentAttachments(id.value), listTruckAppointmentHistory(id.value)]); resource.value.attachments = attachments; history.value = histories }
 async function load() { loading.value = true; error.value = null; try { const result = await getTruckAppointment(id.value); resource.value = result; Object.assign(form, { ...result, expectedVersion: result.version ?? 0 }); await loadRelated() } catch (err) { error.value = getApiErrorDetails(err, '详情加载失败，请稍后重试') } finally { loading.value = false } }
 async function submit() { saving.value = true; error.value = null; try { await updateTruckAppointment(id.value, form); ElMessage.success('拖车预约已保存'); await load() } catch (err) { error.value = getApiErrorDetails(err, '保存失败，请稍后重试') } finally { saving.value = false } }
@@ -46,14 +46,22 @@ onMounted(load)
   <AdminPage as="div" class="truck-detail-page">
     <DetailPageLayout aria-label="拖车预约详情">
       <template #header>
-        <div class="detail-heading">
-          <el-button @click="router.push({ name: 'trucking' })"><ArrowLeft :size="16" />返回列表</el-button>
-          <PageToolbar v-if="resource" class="truck-page-toolbar" as="section" :title="resource.appointmentNo || '拖车预约'" :description="[resource.customerName, resource.orderNo].filter(Boolean).join(' · ')" />
-        </div>
+        <section class="truck-overview surface-panel" aria-label="拖车预约概览">
+          <div class="truck-overview__heading">
+            <el-button link type="primary" @click="router.push({ name: 'trucking' })"><ArrowLeft :size="16" />返回列表</el-button>
+            <div class="truck-overview__identity"><h1>{{ resource?.appointmentNo || '拖车预约详情' }}</h1><p>{{ resource ? [resource.customerName, resource.orderNo].filter(Boolean).join(' · ') || '客户信息缺失' : '查看拖车预约详情' }}</p></div>
+            <span v-if="resource" class="truck-overview__status">当前状态：<strong>{{ truckAppointmentStatusLabel(resource.status) }}</strong></span>
+            <div v-if="resource && canChangeStatus" class="status-actions"><el-button v-for="status in availableTargets" :key="status" size="small" :type="status === 'CANCELLED' ? 'danger' : status === 'EXCEPTION' ? 'warning' : 'primary'" plain :loading="statusSaving" @click="changeStatus(status)">{{ truckAppointmentStatusLabels[status] }}</el-button></div>
+          </div>
+          <template v-if="resource">
+            <p class="relation-snapshot"><strong>历史关联快照：</strong>{{ relationSnapshot }}</p>
+            <el-alert v-if="dispatchBlockReason" :title="dispatchBlockReason" type="warning" :closable="false" show-icon />
+            <ApiErrorMeta v-if="error" :details="error" />
+          </template>
+        </section>
       </template>
       <LoadErrorState v-if="error && !resource" title="详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
       <template v-else-if="resource">
-        <section class="surface-panel status-panel"><div class="status-bar"><span>当前状态：<strong>{{ truckAppointmentStatusLabel(resource.status) }}</strong></span><div v-if="canChangeStatus" class="status-actions"><el-button v-for="status in availableTargets" :key="status" :type="status === 'CANCELLED' ? 'danger' : status === 'EXCEPTION' ? 'warning' : 'primary'" plain :loading="statusSaving" @click="changeStatus(status)">{{ truckAppointmentStatusLabels[status] }}</el-button></div></div><el-alert v-if="dispatchBlockReason" :title="dispatchBlockReason" type="warning" :closable="false" show-icon /><ApiErrorMeta v-if="error" :details="error" /></section>
         <section class="surface-panel form-panel"><TruckAppointmentForm v-model="form" :resource="resource" :readonly="!canEdit" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true" /></section>
         <section class="surface-panel history-section"><h3>状态历史</h3><el-empty v-if="!history.length" description="暂无状态历史" :image-size="48" /><ol v-else><li v-for="(item, index) in history" :key="item.id || `${item.createdAt}-${index}`"><strong>{{ truckAppointmentActionLabel(item.action) }}</strong><span>{{ truckAppointmentStatusLabel(item.fromStatus) }} → {{ truckAppointmentStatusLabel(item.toStatus) }}</span><small>{{ item.operatorName || item.operatorId || '系统' }} · {{ item.createdAt || item.occurredAt || '—' }}<template v-if="item.reason"> · {{ item.reason }}</template></small></li></ol></section>
         <TruckAttachmentDialog v-model="attachmentOpen" :appointment-id="id" :attachments="resource.attachments || []" :can-manage="canManageAttachments" @changed="loadRelated" />
@@ -62,9 +70,12 @@ onMounted(load)
   </AdminPage>
 </template>
 <style scoped>
-.status-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:var(--el-fill-color-light); border-radius:6px; }
+.truck-overview { overflow:hidden; }
+.truck-overview__heading { display:grid; grid-template-columns:auto minmax(260px, 1fr) auto auto; align-items:center; gap:12px 18px; padding:12px 16px; }
+.truck-overview__identity { min-width:0; }.truck-overview__identity h1 { margin:0; overflow:hidden; color:var(--cc-text); font-size:18px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.truck-overview__identity p { margin:2px 0 0; overflow:hidden; color:var(--cc-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
+.truck-overview__status { font-size:13px; white-space:nowrap; }.truck-overview__status strong { margin-left:4px; font-size:15px; }
 .status-actions { display:flex; flex-wrap:wrap; gap:8px; }.status-actions :deep(.el-button) { margin-left:0; }
-.truck-detail-page { min-width:0; }.detail-heading { display:flex; min-width:0; align-items:flex-start; gap:16px; }.truck-page-toolbar { min-width:0; flex:1; }.status-panel { padding:12px 16px; }.form-panel { padding:24px; }.history-section { padding:20px; }.history-section h3 { margin:0 0 12px; font-size:15px; }.history-section ol { display:grid; gap:12px; margin:0; padding:0; list-style:none; }.history-section li { display:grid; grid-template-columns:120px minmax(120px, 1fr) minmax(200px, 2fr); gap:12px; padding:10px 12px; border-radius:6px; background:var(--el-fill-color-lighter); }.history-section small { color:var(--cc-muted); overflow-wrap:anywhere; }
-@media (max-width: 720px) { .detail-heading { flex-direction:column; }.truck-page-toolbar { width:100%; }.form-panel { padding:16px; } }
+.relation-snapshot { margin:0; padding:9px 16px; border-top:1px solid var(--cc-border); color:var(--cc-muted); font-size:12px; line-height:1.5; }.relation-snapshot strong { margin-right:4px; color:var(--cc-text); }
+.truck-detail-page { min-width:0; }.truck-detail-page :deep(.detail-page-layout__content) { display:grid; min-width:0; gap:16px; }.form-panel { padding:16px; }.history-section { padding:16px; }.history-section h3 { margin:0 0 12px; font-size:15px; }.history-section ol { display:grid; gap:10px; margin:0; padding:0; list-style:none; }.history-section li { display:grid; grid-template-columns:120px minmax(120px, 1fr) minmax(200px, 2fr); gap:12px; padding:9px 12px; border-radius:6px; background:var(--el-fill-color-lighter); }.history-section small { color:var(--cc-muted); overflow-wrap:anywhere; }
 @media (max-width: 640px) { .history-section { padding:16px; }.history-section li { grid-template-columns:1fr; gap:4px; } }
 </style>