优化

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

@@ -50,6 +50,8 @@ describe('TruckAppointmentForm interaction contract', () => {
   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).toContain('<slot name="relation-note-actions" />')
+    expect(source).toContain('justify-content:space-between')
     expect(source).not.toContain('class="relation-alert">历史关联快照')
     expect(source).toContain('<el-divider content-position="left">可选关联</el-divider>')
     expect(source).toContain('label="关联柜次（可选）"')

src/modules/trucking/components/TruckAppointmentForm.vue

@@ -121,7 +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">
-    <p class="relation-note">订舱、柜次和装柜计划均为可选关联，不影响独立开立拖车预约；选择后仅用于补全快照和一致性检查。</p>
+    <div class="relation-note"><span>订舱、柜次和装柜计划均为可选关联，不影响独立开立拖车预约；选择后仅用于补全快照和一致性检查。</span><div v-if="$slots['relation-note-actions']" class="relation-note__actions"><slot name="relation-note-actions" /></div></div>
     <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">
@@ -168,7 +168,10 @@ watch(() => props.readonly, (readonly) => { if (!readonly && !customers.value.le
 
 <style scoped>
 .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-note { display:flex; min-height:40px; align-items:center; justify-content:space-between; gap:16px; margin:0 0 8px; padding:6px 8px 6px 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-note > span { min-width:0; }
+.relation-note__actions { display:flex; flex:0 0 auto; align-items:center; }
+.relation-note__actions :deep(.el-button) { margin-left:0; }
 .relation-alert { margin-bottom: 16px; }
 .form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  :deep(.el-divider) { margin: 14px 0 10px; }
@@ -177,6 +180,8 @@ watch(() => props.readonly, (readonly) => { if (!readonly && !customers.value.le
 .field-hint { margin-top:4px; color:var(--cc-muted); font-size:12px; }
 @media (max-width: 480px) {
   .truck-form { padding-inline: 2px; }
+  .relation-note { align-items:flex-start; flex-direction:column; }
+  .relation-note__actions { width:100%; }
   .form-actions { position: sticky; bottom: 0; z-index: 2; margin: 8px -2px -4px; padding: 10px 2px; background: var(--el-bg-color); border-top: 1px solid var(--el-border-color-lighter); }
   .form-actions :deep(.el-button) { flex: 1; min-height: 40px; }
 }