优化

src/modules/trucking/components/TruckAppointmentForm.vue

@@ -8,6 +8,7 @@ import { listTruckAppointmentCandidates } from '../api/platformTrucking'
 import { listSuppliers, type Supplier } from '@/modules/suppliers'
 import { getOceanBooking, type OceanBookingDocument } from '@/modules/ocean-bookings'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 
 const props = defineProps<{ modelValue: SaveTruckAppointmentRequest; resource?: TruckAppointmentResource | null; readonly?: boolean; submitting?: boolean; submitBlocked?: boolean }>()
@@ -198,11 +199,11 @@ watch(() => props.resource?.id, (id, previous) => { if (id && id !== previous) v
         <el-alert v-if="!bookingDocumentReady" title="所选订舱缺少有效的订舱确认文件或提单文件，暂不能创建或保存拖车预约" type="warning" :closable="false" show-icon />
       </div>
       <el-form-item label="预约装柜时间" prop="plannedLoadingAt"><el-date-picker v-model="draft.plannedLoadingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预约装柜时间" /></el-form-item>
-      <el-form-item label="拖车费" prop="payableAmount"><el-input v-model="draft.payableAmount" aria-label="拖车费" inputmode="decimal"><template #append>元</template></el-input><div class="field-hint">人民币；离仓完成后计入应付。</div></el-form-item>
+      <el-form-item label="拖车费" prop="payableAmount"><template #label><span class="field-help-label">拖车费<InlineHelp title="拖车费用说明"><p>人民币；离仓完成后计入应付。</p></InlineHelp></span></template><el-input v-model="draft.payableAmount" inputmode="decimal" aria-label="拖车费"><template #append>元</template></el-input></el-form-item>
       <el-form-item class="appointment-grid__wide" label="备注（选填）"><el-input v-model="draft.remark" type="textarea" :rows="2" maxlength="1000" /></el-form-item>
     </div>
     <details class="dispatch-details" :open="dispatchDetailsOpen" @toggle="toggleDispatchDetails">
-      <summary>派车信息<span>选填，司机和车辆确定后可补充</span></summary>
+      <summary>派车信息<InlineHelp title="派车信息填写说明"><p>选填，司机和车辆确定后可补充。</p></InlineHelp></summary>
       <div class="appointment-grid dispatch-grid">
         <el-form-item label="车队联系人"><el-input v-model="draft.fleetContact" maxlength="64" /></el-form-item>
         <el-form-item label="车队电话" prop="fleetPhone"><el-input v-model="draft.fleetPhone" maxlength="32" /></el-form-item>
@@ -249,19 +250,18 @@ watch(() => props.resource?.id, (id, previous) => { if (id && id !== previous) v
 .selection-summary div { display:flex; min-width:0; gap:var(--admin-space-2); }
 .selection-summary dt { flex-shrink:0; }
 .selection-summary dd { margin:0; color:var(--el-text-color-regular); overflow-wrap:anywhere; }
-.field-error,.field-hint { width:100%; display:flex; flex-wrap:wrap; gap:var(--admin-space-2); margin-top:var(--admin-space-1); color:var(--cc-muted); font-size:var(--admin-font-caption); line-height:1.5; }
+.field-error { width:100%; display:flex; flex-wrap:wrap; gap:var(--admin-space-2); margin-top:var(--admin-space-1); color:var(--cc-muted); font-size:var(--admin-font-caption); line-height:1.5; }
 .field-error { color:var(--el-color-danger); }
+.field-help-label { display:inline-flex; align-items:center; gap:var(--admin-space-1); }
 .readiness-alerts:empty { display:none; }
 .readiness-alerts :deep(.el-alert) { margin-bottom:var(--admin-space-4); }
 .dispatch-details { border-top:1px solid var(--el-border-color-lighter); }
 .dispatch-details summary { padding:var(--admin-space-4) 0; cursor:pointer; font-size:var(--admin-font-body); font-weight:600; color:var(--el-text-color-primary); }
-.dispatch-details summary span { margin-left:var(--admin-space-3); color:var(--cc-muted); font-size:var(--admin-font-caption); font-weight:400; }
 .dispatch-details summary:focus-visible { outline:2px solid var(--cc-primary); outline-offset:2px; }
 .dispatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .form-actions { display:flex; justify-content:flex-end; gap:var(--admin-space-3); padding-top:var(--admin-space-4); border-top:1px solid var(--el-border-color-lighter); }
 @media (max-width:720px) {
   .appointment-grid,.dispatch-grid { grid-template-columns:minmax(0,1fr); }
-  .dispatch-details summary span { display:block; margin-left:var(--admin-space-4); }
 }
 @media (max-width:480px) {
   .form-actions { position:sticky; bottom:0; background:var(--el-bg-color); padding-bottom:var(--admin-space-3); z-index:2; }