优化

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; }