优化

src/modules/trucking/pages/TruckAppointmentCreateView.vue

@@ -2,7 +2,11 @@
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
+import { ArrowLeft } from '@lucide/vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import TruckAppointmentForm from '../components/TruckAppointmentForm.vue'
 import TruckAttachmentDialog from '../components/TruckAttachmentDialog.vue'
@@ -12,5 +16,14 @@ const router = useRouter(); const saving = ref(false); const attachmentOpen = re
 const form = reactive<SaveTruckAppointmentRequest>({ expectedVersion: 0, plannedLoadingAt: null, payableAmount: '0.00', receivableAmount: '0.00', currency: 'RMB' })
 async function submit() { saving.value = true; error.value = null; try { await createTruckAppointment({ ...form }); ElMessage.success('拖车预约已创建'); router.push({ name: 'trucking' }) } catch (err) { error.value = getApiErrorDetails(err, '创建失败，请稍后重试') } finally { saving.value = false } }
 </script>
-<template><main class="business-page truck-editor-page"><div class="editor-actions"><el-button @click="router.push({ name: 'trucking' })">返回列表</el-button></div><section v-if="error" class="surface-panel editor-error"><ApiErrorMeta :details="error" /><span>{{ error.message }}</span></section><section class="surface-panel form-panel"><TruckAppointmentForm v-model="form" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true" /></section><TruckAttachmentDialog v-model="attachmentOpen" :attachments="[]" /></main></template>
-<style scoped>.truck-editor-page { min-width: 0; }.editor-actions { display:flex; justify-content:flex-end; }.form-panel { padding:24px; }.editor-error { display:flex; align-items:center; gap:12px; padding:14px 18px; color:#b42318; }.editor-error :deep(.api-error-meta) { margin-top:0; order:2; } @media (max-width:720px) { .form-panel { padding:16px; } }</style>
+<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>
+      <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>