优化

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

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

@@ -17,4 +17,11 @@ describe('TruckAppointmentCreateView independent creation contract', () => {
     expect(source).toContain('<ApiErrorMeta :details="error" />')
     expect(source).toContain('<TruckAppointmentForm v-model="form"')
   })
+
+  it('places the return action beside the relation note instead of in a separate header row', () => {
+    expect(source).toContain('<template #relation-note-actions>')
+    expect(source).toContain('<ArrowLeft :size="16" />返回列表')
+    expect(source).not.toContain('<template #header>')
+    expect(source).not.toContain('class="editor-actions"')
+  })
 })

src/modules/trucking/pages/TruckAppointmentCreateView.vue

@@ -19,11 +19,10 @@ async function submit() { saving.value = true; error.value = null; try { await c
 <template>
   <AdminPage as="div" class="truck-editor-page">
     <DetailPageLayout aria-label="新增拖车预约">
-      <template #header><div class="editor-actions"><el-button @click="router.push({ name: 'trucking' })"><ArrowLeft :size="16" />返回列表</el-button></div></template>
       <LoadErrorState v-if="error" title="拖车预约创建失败" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
-      <section class="surface-panel form-panel"><TruckAppointmentForm v-model="form" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true" /></section>
+      <section class="surface-panel form-panel"><TruckAppointmentForm v-model="form" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true"><template #relation-note-actions><el-button @click="router.push({ name: 'trucking' })"><ArrowLeft :size="16" />返回列表</el-button></template></TruckAppointmentForm></section>
       <TruckAttachmentDialog v-model="attachmentOpen" :attachments="[]" />
     </DetailPageLayout>
   </AdminPage>
 </template>
-<style scoped>.truck-editor-page { min-width: 0; }.editor-actions { display:flex; justify-content:flex-end; }.form-panel { padding:24px; } @media (max-width:720px) { .editor-actions { justify-content:flex-start; }.form-panel { padding:16px; } }</style>
+<style scoped>.truck-editor-page { min-width: 0; }.form-panel { padding:24px; } @media (max-width:720px) { .form-panel { padding:16px; } }</style>