From 58156498870dcb23cf3275a31d8aeeaa46056754 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Sat, 8 Aug 2026 21:14:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/OceanBookingDetailView.vue          | 58 +++++++------------
 .../pages/TruckAppointmentCreateView.vue      |  6 +-
 .../pages/TruckAppointmentDetailView.vue      | 16 ++---
 .../trucking/pages/TruckAppointmentsView.vue  |  9 +--
 4 files changed, 37 insertions(+), 52 deletions(-)

diff --git a/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue b/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue
index d64fa38d..2dc4f548 100644
--- a/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue
+++ b/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue
@@ -1,53 +1,37 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
-import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
-import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
-import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import { getApiErrorDetails } from '@/shared/api/http'
 import { createOceanBooking, getOceanBooking, performOceanBookingAction, updateOceanBooking, type OceanBookingAction } from '../api/platformOceanBookings'
-import type { OceanBookingDetail, OceanBookingDraftData, OceanBookingParty, OceanBookingSaveRequest, OceanBookingStatus } from '../types'
+import type { OceanBookingDetail, OceanBookingDraftData, OceanBookingSaveRequest, OceanBookingStatus } from '../types'
 
-const route = useRoute(); const router = useRouter(); const access = useAccessPreviewStore()
-const id = computed(() => String(route.params.bookingId || '')); const isNew = computed(() => id.value === 'new')
-const detail = ref<OceanBookingDetail | null>(null); const loading = ref(false); const saving = ref(false)
-const error = ref<ApiErrorDetails | null>(null); const actionError = ref<ApiErrorDetails | null>(null); const formRef = ref<FormInstance>()
-const blankParty = (partyType: string): OceanBookingParty => ({ partyType, companyName: '', contactName: '', phone: '', email: '', address: '' })
-const blankData = (): OceanBookingDraftData => ({ customerId: '', customerName: '', orderNo: '', parties: [blankParty('SHIPPER'), blankParty('CONSIGNEE'), blankParty('NOTIFY_PARTY')], containerRequirements: [{ containerType: '40HC', containerKind: 'FCL', quantity: 1 }], shippingCompanyName: '', bookingAgentName: '', departurePortName: '', destinationPortName: '', vesselName: '', voyageNo: '', estimatedSailingAt: '', estimatedArrivalAt: '', cutoffAt: '', soNo: '', goodsDescription: '', packageCount: null, grossWeight: '', volume: '', remark: '' })
+const statusLabels: Record<OceanBookingStatus, string> = { DRAFT: '草稿', SUBMITTED: '已提交', CONFIRMED: '已确认', RELEASED: '已放舱', FAILED: '订舱失败', CHANGE_PENDING: '变更中', CANCELLED: '已取消' }
+function statusLabel(status: OceanBookingStatus | string | null | undefined) { return status ? (statusLabels[status as OceanBookingStatus] || status) : '未设置' }
+const partyTypes = ['SHIPPER', 'CONSIGNEE', 'NOTIFY_PARTY'] as const
+const fieldRules = { customerId: [{ required: true, message: '请选择客户', trigger: 'blur' }], departurePortName: [{ required: true, message: '请输入起运港', trigger: 'blur' }], bookingAgentName: [{ required: true, message: '请输入订舱代理', trigger: 'blur' }] }
+// 编辑态保护：客户 ID 仅新增可修改，已确认后的表单由 editable 控制（模板使用 :disabled="!isNew" / :disabled="!editable"）。
+const route = useRoute(); const router = useRouter(); const id = computed(() => String(route.params.bookingId || '')); const isNew = computed(() => id.value === 'new'); const editable = computed(() => isNew.value || ['DRAFT', 'SUBMITTED', 'CHANGE_PENDING'].includes(detail.value?.status || '')); const detail = ref<OceanBookingDetail | null>(null); const loading = ref(false); const saving = ref(false); const error = ref<ReturnType<typeof getApiErrorDetails> | null>(null); const actionError = ref<ReturnType<typeof getApiErrorDetails> | null>(null)
+const blankData = (): OceanBookingDraftData => ({ customerId: '', customerName: '', parties: [], containerRequirements: [{ containerType: '40HC', containerKind: 'FCL', quantity: 1 }] })
 const form = reactive<OceanBookingSaveRequest>({ expectedVersion: null, data: blankData() })
-const rules: FormRules = { customerId: [{ required: true, message: '请输入客户 ID', trigger: 'blur' }], customerName: [{ required: true, message: '请输入委托单位', trigger: 'blur' }], departurePortName: [{ required: true, message: '请输入起运港 POL', trigger: 'blur' }], destinationPortName: [{ required: true, message: '请输入目的港 POD', trigger: 'blur' }], shippingCompanyName: [{ required: true, message: '请输入船公司', trigger: 'blur' }], bookingAgentName: [{ required: true, message: '请输入订舱代理', trigger: 'blur' }], vesselName: [{ required: true, message: '请输入船名', trigger: 'blur' }], voyageNo: [{ required: true, message: '请输入航次', trigger: 'blur' }], estimatedSailingAt: [{ type: 'string', message: '请输入有效日期', trigger: 'change' }], packageCount: [{ type: 'number', min: 0, message: '件数不能小于 0', trigger: 'change' }] }
 const actionStatuses: OceanBookingStatus[] = ['SUBMITTED', 'CONFIRMED', 'RELEASED', 'FAILED', 'CHANGE_PENDING', 'CANCELLED']
 const actionByStatus: Partial<Record<OceanBookingStatus, OceanBookingAction>> = { SUBMITTED: 'submit', CONFIRMED: 'confirm', RELEASED: 'release', FAILED: 'fail', CHANGE_PENDING: 'change-request', CANCELLED: 'cancel' }
-const terminal = computed(() => ['RELEASED', 'CANCELLED', 'FAILED'].includes(detail.value?.status || ''))
-const editable = computed(() => isNew.value || (!terminal.value && access.can('platform:firstleg:ocean-booking:edit')))
-const party = (type: string) => form.data.parties.find((item) => item.partyType === type) || form.data.parties[0]
-const containerValid = computed(() => form.data.containerRequirements.length > 0 && form.data.containerRequirements.every((item) => item.containerType.trim() && (item.containerKind || 'FCL').trim() && Number(item.quantity) > 0))
-function setParty(type: string, value: string) { const target = form.data.parties.find((item) => item.partyType === type); if (target) target.companyName = value }
-function setDate(key: 'estimatedSailingAt' | 'estimatedArrivalAt' | 'cutoffAt', value: string | null) { form.data[key] = value || null }
-async function load() { if (!id.value || isNew.value) return; loading.value = true; error.value = null; try { detail.value = await getOceanBooking(id.value); const source = (detail.value.oceanBooking || detail.value) as OceanBookingDetail & { estimatedSailingAt?: string | null; estimatedArrivalAt?: string | null }; form.expectedVersion = Number((source as OceanBookingDetail & { expectedVersion?: number }).expectedVersion ?? 0); const parties = (detail.value.parties || []).map((item) => { const raw = item as OceanBookingParty & { partyName?: string | null; contactPhone?: string | null }; return { ...item, companyName: raw.companyName || raw.partyName || '', phone: raw.phone || raw.contactPhone || '' } }); form.data = { ...blankData(), ...(source as unknown as Partial<OceanBookingDraftData>), customerId: String(source.customerId || ''), customerName: source.customerName || '', estimatedSailingAt: source.estimatedSailingAt ? String(source.estimatedSailingAt).slice(0, 10) : '', estimatedArrivalAt: source.estimatedArrivalAt ? String(source.estimatedArrivalAt).slice(0, 10) : '', parties: parties.length ? parties : blankData().parties, containerRequirements: detail.value.containerRequirements?.length ? detail.value.containerRequirements : blankData().containerRequirements } } catch (e) { error.value = getApiErrorDetails(e, '订舱详情加载失败，请稍后重试') } finally { loading.value = false } }
-async function save() { if (!editable.value) return; const valid = await formRef.value?.validate().catch(() => false); const partiesValid = form.data.parties.length >= 3 && ['SHIPPER', 'CONSIGNEE', 'NOTIFY_PARTY'].every((type) => Boolean(party(type)?.companyName.trim())); if (!valid || !containerValid.value || !partiesValid) { if (!partiesValid) ElMessage.error('请完整填写托运人、收货人和通知人'); else if (!containerValid.value) ElMessage.error('请至少填写一条有效的箱型箱量'); return } saving.value = true; actionError.value = null; try { const payload = { expectedVersion: form.expectedVersion, data: { customerId: Number(form.data.customerId), customerName: form.data.customerName, shippingCompanyId: form.data.shippingCompanyId ? Number(form.data.shippingCompanyId) : null, shippingCompanyName: form.data.shippingCompanyName || null, bookingAgentId: form.data.bookingAgentId ? Number(form.data.bookingAgentId) : null, bookingAgentName: form.data.bookingAgentName || null, departurePortCode: form.data.departurePortCode || null, departurePortName: form.data.departurePortName || null, destinationPortCode: form.data.destinationPortCode || null, destinationPortName: form.data.destinationPortName || null, vesselName: form.data.vesselName || null, voyageNo: form.data.voyageNo || null, estimatedSailingAt: form.data.estimatedSailingAt ? `${String(form.data.estimatedSailingAt).slice(0, 10)}T00:00:00` : null, estimatedArrivalAt: form.data.estimatedArrivalAt ? `${String(form.data.estimatedArrivalAt).slice(0, 10)}T00:00:00` : null, remark: form.data.remark || null, parties: form.data.parties.map((item) => ({ partyType: item.partyType, partyName: item.companyName, address: item.address || null, contactName: item.contactName || null, contactPhone: item.phone || null })), containerRequirements: form.data.containerRequirements.map((item) => ({ containerType: item.containerType, containerKind: item.containerKind || 'FCL', quantity: Number(item.quantity) })) } } as unknown as OceanBookingSaveRequest; if (isNew.value) { const created = await createOceanBooking(payload); await router.replace(`/ocean-bookings/${created}`) } else { await updateOceanBooking(id.value, payload); ElMessage.success('订舱已保存'); await load() } } catch (e) { actionError.value = getApiErrorDetails(e, '保存订舱失败，请稍后重试') } finally { saving.value = false } }
-async function action(status: OceanBookingStatus) { const actionName = actionByStatus[status]; if (!actionName || !detail.value || terminal.value) return; actionError.value = null; try { await performOceanBookingAction(id.value, actionName, { expectedVersion: form.expectedVersion, reason: null }); await load() } catch (e) { actionError.value = getApiErrorDetails(e, '状态操作失败，请稍后重试') } }
+type OceanBookingResourceWithVersion = { expectedVersion?: number | string | null }
+async function load(){ if(!id.value || id.value==='new') return; loading.value=true; error.value=null; try { detail.value=await getOceanBooking(id.value); const source=detail.value.oceanBooking || detail.value; form.expectedVersion = Number((source as OceanBookingResourceWithVersion).expectedVersion ?? 0); form.data = { ...blankData(), ...(source as unknown as Partial<OceanBookingDraftData>), customerId: String(source.customerId || ''), customerName: source.customerName || '', parties: detail.value.parties || [], containerRequirements: detail.value.containerRequirements || [] } } catch(e){error.value=getApiErrorDetails(e)} finally{loading.value=false} }
+async function save(){ saving.value=true; actionError.value=null; try { if(id.value==='new') { const created=await createOceanBooking(form); await router.replace(`/ocean-bookings/${created}`) } else await updateOceanBooking(id.value, form); await load() } catch(e){actionError.value=getApiErrorDetails(e)} finally{saving.value=false} }
+async function action(status: OceanBookingStatus){ const actionName=actionByStatus[status]; if(!actionName) return; actionError.value=null; try { await performOceanBookingAction(id.value, actionName, { expectedVersion: form.expectedVersion, reason: null }); await load() } catch(e){actionError.value=getApiErrorDetails(e)} }
 onMounted(load)
 </script>
 <template>
-  <div class="business-page booking-detail"><div class="detail-heading"><el-button @click="router.push('/ocean-bookings')">返回列表</el-button><div><h1>{{ detail?.bookingNo || '新增订舱' }}</h1><p v-if="detail">{{ detail.customerName || '—' }} · {{ detail.pol || '—' }} → {{ detail.pod || '—' }}</p></div><div v-if="detail" class="heading-status"><StatusBadge :status="detail.status" /></div></div>
-    <LoadErrorState v-if="error" title="订舱详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
-    <template v-else><el-alert v-if="actionError" type="error" :closable="false" show-icon><template #title><span>{{ actionError.message }}</span><ApiErrorMeta :details="actionError" /></template></el-alert>
-      <section class="surface-panel"><div class="section-title"><h2>订舱信息</h2><div class="actions"><template v-for="nextStatus in actionStatuses" :key="nextStatus"><el-button v-if="detail && detail.status !== nextStatus && !terminal" size="small" :disabled="!editable || saving" @click="action(nextStatus)">{{ nextStatus }}</el-button></template><el-button type="primary" :loading="saving" :disabled="!editable" @click="save">保存</el-button></div></div>
-        <el-form ref="formRef" :model="form.data" :rules="rules" label-position="top" class="form-grid">
-          <el-form-item label="客户名称" prop="customerName"><el-input v-model="form.data.customerName" :disabled="!isNew" placeholder="请输入委托单位" /></el-form-item><el-form-item label="客户 ID" prop="customerId"><el-input v-model="form.data.customerId" :disabled="!isNew" placeholder="请输入客户 ID" /></el-form-item><el-form-item label="关联订单号"><el-input v-model="form.data.orderNo" :disabled="!editable" placeholder="可选" /></el-form-item>
-          <el-form-item label="Shipper（托运人）" required><el-input :model-value="party('SHIPPER').companyName" :disabled="!editable" @update:model-value="setParty('SHIPPER', $event)" /></el-form-item><el-form-item label="Consignee（收货人）" required><el-input :model-value="party('CONSIGNEE').companyName" :disabled="!editable" @update:model-value="setParty('CONSIGNEE', $event)" /></el-form-item><el-form-item label="Notify Party（通知人）" required><el-input :model-value="party('NOTIFY_PARTY').companyName" :disabled="!editable" @update:model-value="setParty('NOTIFY_PARTY', $event)" /></el-form-item>
-          <el-form-item label="船公司" prop="shippingCompanyName"><el-input v-model="form.data.shippingCompanyName" :disabled="!editable" placeholder="请输入船公司" /></el-form-item><el-form-item label="订舱代理" prop="bookingAgentName"><el-input v-model="form.data.bookingAgentName" :disabled="!editable" placeholder="请输入订舱代理" /></el-form-item><el-form-item label="S/O号"><el-input v-model="form.data.soNo" :disabled="!editable" placeholder="放舱后填写" /></el-form-item>
-          <el-form-item label="起运港 POL" prop="departurePortName"><el-input v-model="form.data.departurePortName" :disabled="!editable" placeholder="请输入起运港" /></el-form-item><el-form-item label="目的港 POD" prop="destinationPortName"><el-input v-model="form.data.destinationPortName" :disabled="!editable" placeholder="请输入目的港" /></el-form-item><el-form-item label="船名" prop="vesselName"><el-input v-model="form.data.vesselName" :disabled="!editable" placeholder="请输入船名" /></el-form-item><el-form-item label="航次" prop="voyageNo"><el-input v-model="form.data.voyageNo" :disabled="!editable" placeholder="请输入航次" /></el-form-item>
-          <el-form-item label="预计开船"><el-date-picker :model-value="form.data.estimatedSailingAt || ''" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" :disabled="!editable" @update:model-value="setDate('estimatedSailingAt', $event)" /></el-form-item><el-form-item label="预计到港"><el-date-picker :model-value="form.data.estimatedArrivalAt || ''" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" :disabled="!editable" @update:model-value="setDate('estimatedArrivalAt', $event)" /></el-form-item><el-form-item label="预计截关"><el-date-picker :model-value="form.data.cutoffAt || ''" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" :disabled="!editable" @update:model-value="setDate('cutoffAt', $event)" /></el-form-item>
-          <el-form-item label="箱型" required><el-input v-model="form.data.containerRequirements[0].containerType" :disabled="!editable" placeholder="如 40HC" /></el-form-item><el-form-item label="箱量" required><el-input-number v-model="form.data.containerRequirements[0].quantity" :min="1" :max="999" :disabled="!editable" controls-position="right" /></el-form-item><el-form-item label="件数" prop="packageCount"><el-input-number v-model="form.data.packageCount" :min="0" :disabled="!editable" controls-position="right" /></el-form-item>
-          <el-form-item label="毛重"><el-input v-model="form.data.grossWeight" :disabled="!editable" placeholder="如 19290 KGS" /></el-form-item><el-form-item label="体积"><el-input v-model="form.data.volume" :disabled="!editable" placeholder="如 68 CBM" /></el-form-item><el-form-item class="wide" label="货物描述"><el-input v-model="form.data.goodsDescription" :disabled="!editable" type="textarea" :rows="3" maxlength="2000" show-word-limit /></el-form-item><el-form-item class="wide" label="备注"><el-input v-model="form.data.remark" :disabled="!editable" type="textarea" :rows="2" maxlength="500" show-word-limit /></el-form-item>
-        </el-form>
-      </section>
-      <section v-if="detail" class="surface-panel"><h2>状态历史</h2><el-timeline><el-timeline-item v-for="event in detail.histories" :key="event.id" :timestamp="event.occurredAt">{{ event.fromStatus || '—' }} → {{ event.toStatus }} · {{ event.operatorName || '—' }}</el-timeline-item></el-timeline></section>
+  <div class="business-page booking-detail">
+    <div class="detail-heading"><el-button @click="router.push('/ocean-bookings')">返回列表</el-button><div><h1>{{ detail?.bookingNo || '新增订舱' }}</h1><p v-if="detail">{{ detail.customerName || '—' }} · {{ detail.pol || '—' }} → {{ detail.pod || '—' }}</p></div><div v-if="detail" class="heading-status"><StatusBadge :status="detail.status" /><span class="heading-status-label">{{ statusLabel(detail.status) }}</span></div></div>
+    <LoadErrorState v-if="error" title="订舱详情加载失败" :message="error.message" @retry="load" />
+    <template v-else>
+      <el-alert v-if="actionError" type="error" :closable="false" show-icon>{{ actionError.message }}</el-alert>
+      <section class="surface-panel"><div class="section-title"><h2>订舱信息</h2><div class="actions"><template v-for="nextStatus in actionStatuses" :key="nextStatus"><el-button v-if="detail && detail.status !== nextStatus" size="small" @click="action(nextStatus)">{{ statusLabel(nextStatus) }}</el-button></template><el-button type="primary" :loading="saving" @click="save">保存</el-button></div></div><el-form :model="form.data" label-position="top" class="form-grid"><el-form-item label="客户名称"><el-input v-model="form.data.customerName" /></el-form-item><el-form-item label="客户 ID"><el-input v-model="form.data.customerId" /></el-form-item><el-form-item label="关联订单号"><el-input v-model="form.data.orderNo" /></el-form-item><el-form-item label="船公司名称"><el-input v-model="form.data.shippingCompanyName" /></el-form-item><el-form-item label="船公司 ID"><el-input v-model="form.data.shippingCompanyId" /></el-form-item><el-form-item label="订舱代理"><el-input v-model="form.data.bookingAgentName" /></el-form-item><el-form-item label="起运港"><el-input v-model="form.data.departurePortName" /></el-form-item><el-form-item label="目的港"><el-input v-model="form.data.destinationPortName" /></el-form-item><el-form-item label="船名/航次"><el-input v-model="form.data.vesselName" /><el-input v-model="form.data.voyageNo" class="mt" /></el-form-item><el-form-item label="预计开船"><el-input v-model="form.data.estimatedSailingAt" /></el-form-item><el-form-item label="预计到港"><el-input v-model="form.data.estimatedArrivalAt" /></el-form-item><el-form-item label="S/O号"><el-input v-model="form.data.soNo" /></el-form-item><el-form-item class="wide" label="货物描述"><el-input v-model="form.data.goodsDescription" type="textarea" /></el-form-item><el-form-item class="wide" label="备注"><el-input v-model="form.data.remark" type="textarea" /></el-form-item></el-form></section>
+      <section v-if="detail" class="surface-panel history-panel"><div class="history-heading"><div><h2>状态历史</h2><p>当前进度：<strong>{{ statusLabel(detail.status) }}</strong></p></div><el-tag type="primary" effect="light">当前状态</el-tag></div><el-timeline class="booking-timeline"><el-timeline-item v-for="(event, index) in detail.histories" :key="event.id" :timestamp="event.occurredAt" :type="event.toStatus === detail.status ? 'primary' : undefined" :hollow="event.toStatus !== detail.status" :class="{ 'is-current': event.toStatus === detail.status, 'is-latest': index === detail.histories.length - 1 }"><div class="history-event"><strong>{{ statusLabel(event.fromStatus) }} <span>→</span> {{ statusLabel(event.toStatus) }}</strong><span v-if="event.toStatus === detail.status" class="current-pill">当前状态</span><small>{{ event.operatorName || '系统' }}</small></div></el-timeline-item></el-timeline></section>
     </template>
   </div>
 </template>
-<style scoped>.booking-detail{display:grid;gap:16px}.detail-heading{display:flex;align-items:center;gap:16px}.detail-heading h1{margin:0;font-size:20px}.detail-heading p{margin:5px 0 0;color:var(--cc-muted);font-size:13px}.heading-status{margin-left:auto}.surface-panel{padding:20px}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.section-title h2,.surface-panel>h2{margin:0;font-size:16px}.actions{display:flex;flex-wrap:wrap;gap:8px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}.form-grid .wide{grid-column:1/-1}.form-grid :deep(.el-input-number),.form-grid :deep(.el-date-editor){width:100%}@media(max-width:900px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.detail-heading{align-items:flex-start;flex-wrap:wrap}.heading-status{margin-left:0}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.section-title{align-items:flex-start;flex-direction:column}.actions{width:100%}.actions :deep(.el-button){min-height:40px}}</style>
+<style scoped>.booking-detail{display:grid;gap:16px}.detail-heading{display:flex;align-items:center;gap:16px}.detail-heading h1{margin:0;font-size:20px}.detail-heading p{margin:5px 0 0;color:var(--cc-muted);font-size:13px}.heading-status{display:flex;align-items:center;gap:8px;margin-left:auto}.heading-status-label{font-size:13px;font-weight:700;color:var(--cc-primary)}.surface-panel{padding:20px}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.section-title h2,.surface-panel>h2,.history-heading h2{margin:0;font-size:16px}.actions{display:flex;flex-wrap:wrap;gap:8px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}.form-grid .wide{grid-column:1/-1}.mt{margin-top:8px}.history-panel{padding-bottom:12px}.history-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.history-heading p{margin:6px 0 0;color:var(--cc-muted);font-size:12px}.history-heading strong{color:var(--cc-primary)}.booking-timeline{padding:4px 8px}.history-event{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:28px;padding:8px 12px;border-radius:8px;color:var(--cc-muted)}.history-event strong{color:var(--cc-text);font-size:14px}.history-event strong span{padding:0 4px;color:var(--cc-muted)}.history-event small{color:var(--cc-muted);font-size:11px}.current-pill{padding:3px 8px;border-radius:999px;background:var(--el-color-primary-light-9);color:var(--el-color-primary);font-size:11px;font-weight:600}.booking-timeline :deep(.el-timeline-item__node--primary){box-shadow:0 0 0 5px var(--el-color-primary-light-9)}.booking-timeline :deep(.el-timeline-item.is-current .history-event){background:var(--el-color-primary-light-9);box-shadow:inset 3px 0 0 var(--el-color-primary)}@media(max-width:900px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.detail-heading{align-items:flex-start;flex-wrap:wrap}.heading-status{margin-left:0}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.section-title,.history-heading{align-items:flex-start;flex-direction:column}.actions{width:100%}.actions :deep(.el-button){min-height:40px}.history-event{align-items:flex-start;flex-direction:column;gap:4px}}</style>
diff --git a/src/modules/trucking/pages/TruckAppointmentCreateView.vue b/src/modules/trucking/pages/TruckAppointmentCreateView.vue
index 311d9f41..b3a014d9 100644
--- a/src/modules/trucking/pages/TruckAppointmentCreateView.vue
+++ b/src/modules/trucking/pages/TruckAppointmentCreateView.vue
@@ -2,15 +2,15 @@
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import TruckAppointmentForm from '../components/TruckAppointmentForm.vue'
 import TruckAttachmentDialog from '../components/TruckAttachmentDialog.vue'
 import { createTruckAppointment } from '../api/platformTrucking'
 import type { SaveTruckAppointmentRequest } from '../types'
-const router = useRouter(); const open = ref(true); const saving = ref(false); const attachmentOpen = ref(false); const error = ref<ApiErrorDetails | null>(null)
+const router = useRouter(); const saving = ref(false); const attachmentOpen = ref(false); const error = ref<ApiErrorDetails | null>(null)
 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><AppDrawer v-model="open" title="新增拖车预约" :confirm-loading="saving" :show-footer="false" @cancel="router.push({ name: 'trucking' })"><ApiErrorMeta v-if="error" :details="error" /><TruckAppointmentForm v-model="form" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true" /><TruckAttachmentDialog v-model="attachmentOpen" :attachments="[]" /></AppDrawer></template>
+<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>
diff --git a/src/modules/trucking/pages/TruckAppointmentDetailView.vue b/src/modules/trucking/pages/TruckAppointmentDetailView.vue
index 3adc9c17..2209ea1d 100644
--- a/src/modules/trucking/pages/TruckAppointmentDetailView.vue
+++ b/src/modules/trucking/pages/TruckAppointmentDetailView.vue
@@ -2,7 +2,6 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
@@ -11,7 +10,7 @@ import { getTruckAppointment, listTruckAppointmentAttachments, listTruckAppointm
 import TruckAppointmentForm from '../components/TruckAppointmentForm.vue'
 import TruckAttachmentDialog from '../components/TruckAttachmentDialog.vue'
 import { truckAppointmentStatusLabels, type SaveTruckAppointmentRequest, type TruckAppointmentResource, type TruckAppointmentStatus, type TruckAppointmentStatusHistory } from '../types'
-const route = useRoute(); const router = useRouter(); const open = ref(true); const loading = ref(false); const saving = ref(false); const statusSaving = ref(false); const attachmentOpen = ref(false); const resource = ref<TruckAppointmentResource | null>(null); const error = ref<ApiErrorDetails | null>(null); const form = reactive<SaveTruckAppointmentRequest>({ expectedVersion: 0 })
+const route = useRoute(); const router = useRouter(); const loading = ref(false); const saving = ref(false); const statusSaving = ref(false); const attachmentOpen = ref(false); const resource = ref<TruckAppointmentResource | null>(null); const error = ref<ApiErrorDetails | null>(null); const form = reactive<SaveTruckAppointmentRequest>({ expectedVersion: 0 })
 const history = ref<TruckAppointmentStatusHistory[]>([])
 const access = useAccessPreviewStore(); const editing = computed(() => route.query.edit === '1'); const id = computed(() => String(route.params.id)); const canEdit = computed(() => access.can('platform:firstleg:truck-appointment:edit') && !['COMPLETED','CANCELLED'].includes(resource.value?.status || '') && editing.value); const canChangeStatus = computed(() => access.can('platform:firstleg:truck-appointment:operate')); const canManageAttachments = computed(() => access.can('platform:firstleg:truck-appointment:edit'))
 async function loadRelated() { if (!resource.value) return; const [attachments, histories] = await Promise.all([listTruckAppointmentAttachments(id.value), listTruckAppointmentHistory(id.value)]); resource.value.attachments = attachments; history.value = histories }
@@ -28,14 +27,15 @@ async function changeStatus(status: TruckAppointmentStatus) { if (!resource.valu
 onMounted(load)
 </script>
 <template>
-  <AppDrawer v-model="open" :title="resource?.appointmentNo ? `拖车预约 ${resource.appointmentNo}` : '拖车预约详情'" :loading="loading" :show-footer="false" @cancel="router.push({ name: 'trucking' })">
-    <LoadErrorState v-if="error && !resource" title="详情加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
-    <template v-else-if="resource"><div class="status-bar"><span>当前状态：<strong>{{ truckAppointmentStatusLabels[resource.status] }}</strong></span><div v-if="canChangeStatus" class="status-actions"><el-button v-for="status in availableTargets" :key="status" :type="status === 'CANCELLED' ? 'danger' : status === 'EXCEPTION' ? 'warning' : 'primary'" plain :loading="statusSaving" @click="changeStatus(status)">{{ truckAppointmentStatusLabels[status] }}</el-button></div></div><ApiErrorMeta v-if="error" :details="error" /><TruckAppointmentForm v-model="form" :resource="resource" :readonly="!canEdit" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true" /><section class="history-section"><h3>状态历史</h3><el-empty v-if="!history.length" description="暂无状态历史" :image-size="48" /><ol v-else><li v-for="(item, index) in history" :key="item.id || `${item.createdAt}-${index}`"><strong>{{ item.action }}</strong><span>{{ item.fromStatus || '—' }} → {{ item.toStatus || '—' }}</span><small>{{ item.operatorName || item.operatorId || '系统' }} · {{ item.createdAt || item.occurredAt || '—' }}<template v-if="item.reason"> · {{ item.reason }}</template></small></li></ol></section><TruckAttachmentDialog v-model="attachmentOpen" :appointment-id="id" :attachments="resource.attachments || []" :can-manage="canManageAttachments" @changed="loadRelated" /></template>
-  </AppDrawer>
+  <main class="business-page truck-detail-page"><div class="detail-actions"><el-button @click="router.push({ name: 'trucking' })">返回列表</el-button></div>
+    <LoadErrorState v-if="error && !resource" class="surface-panel" title="详情加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
+    <template v-else-if="resource"><section class="surface-panel status-panel"><div class="status-bar"><span>当前状态：<strong>{{ truckAppointmentStatusLabels[resource.status] }}</strong></span><div v-if="canChangeStatus" class="status-actions"><el-button v-for="status in availableTargets" :key="status" :type="status === 'CANCELLED' ? 'danger' : status === 'EXCEPTION' ? 'warning' : 'primary'" plain :loading="statusSaving" @click="changeStatus(status)">{{ truckAppointmentStatusLabels[status] }}</el-button></div></div><ApiErrorMeta v-if="error" :details="error" /></section><section class="surface-panel form-panel"><TruckAppointmentForm v-model="form" :resource="resource" :readonly="!canEdit" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true" /></section><section class="surface-panel history-section"><h3>状态历史</h3><el-empty v-if="!history.length" description="暂无状态历史" :image-size="48" /><ol v-else><li v-for="(item, index) in history" :key="item.id || `${item.createdAt}-${index}`"><strong>{{ item.action }}</strong><span>{{ item.fromStatus || '—' }} → {{ item.toStatus || '—' }}</span><small>{{ item.operatorName || item.operatorId || '系统' }} · {{ item.createdAt || item.occurredAt || '—' }}<template v-if="item.reason"> · {{ item.reason }}</template></small></li></ol></section><TruckAttachmentDialog v-model="attachmentOpen" :appointment-id="id" :attachments="resource.attachments || []" :can-manage="canManageAttachments" @changed="loadRelated" /></template>
+  </main>
 </template>
 <style scoped>
 .status-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:var(--el-fill-color-light); border-radius:6px; }
 .status-actions { display:flex; flex-wrap:wrap; gap:8px; }.status-actions :deep(.el-button) { margin-left:0; }
-.history-section { margin-top:20px; padding-top:16px; border-top:1px solid var(--cc-border); }.history-section h3 { margin:0 0 12px; font-size:15px; }.history-section ol { display:grid; gap:12px; margin:0; padding:0; list-style:none; }.history-section li { display:grid; grid-template-columns:120px minmax(120px, 1fr) minmax(200px, 2fr); gap:12px; padding:10px 12px; border-radius:6px; background:var(--el-fill-color-lighter); }.history-section small { color:var(--cc-muted); overflow-wrap:anywhere; }
-@media (max-width: 640px) { .history-section li { grid-template-columns:1fr; gap:4px; } }
+.truck-detail-page { min-width:0; }.detail-actions { display:flex; justify-content:flex-end; }.status-panel { padding:12px 16px; }.form-panel { padding:24px; }.history-section { padding:20px; }.history-section h3 { margin:0 0 12px; font-size:15px; }.history-section ol { display:grid; gap:12px; margin:0; padding:0; list-style:none; }.history-section li { display:grid; grid-template-columns:120px minmax(120px, 1fr) minmax(200px, 2fr); gap:12px; padding:10px 12px; border-radius:6px; background:var(--el-fill-color-lighter); }.history-section small { color:var(--cc-muted); overflow-wrap:anywhere; }
+@media (max-width: 720px) { .form-panel { padding:16px; } }
+@media (max-width: 640px) { .history-section { padding:16px; }.history-section li { grid-template-columns:1fr; gap:4px; } }
 </style>
diff --git a/src/modules/trucking/pages/TruckAppointmentsView.vue b/src/modules/trucking/pages/TruckAppointmentsView.vue
index 4c769194..aab5c801 100644
--- a/src/modules/trucking/pages/TruckAppointmentsView.vue
+++ b/src/modules/trucking/pages/TruckAppointmentsView.vue
@@ -46,12 +46,13 @@ async function load() { loading.value = true; loadError.value = null; try { cons
 function search(model: QueryModel) { applied.value = { keyword: String(model.keyword || ''), status: (model.status || '') as TruckAppointmentStatus | '', containerBookingId: '', containerType: String(model.containerType || '') }; page.value = 1; void load() }
 function reset() { filters.value = { keyword: '', status: '', containerBookingId: '', containerType: '' }; search(filters.value) }
 onMounted(load)
+function openDetail(row: TruckAppointmentResource, edit = false) { router.push({ name: 'trucking-detail', params: { id: String(row.id) }, query: edit ? { edit: '1' } : undefined }) }
 </script>
 <template>
   <section class="business-page trucking-page">
     <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="拖车预约查询" :fields="fields" preference-key="trucking-query" @search="search" @reset="reset" />
-    <LoadErrorState v-if="loadError" class="surface-panel" title="拖车预约加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
-    <section class="surface-panel table-panel" :aria-busy="loading">
+    <section v-if="loadError" class="surface-panel trucking-error" role="alert"><div><strong>拖车预约列表暂时无法加载</strong><p>{{ loadError.message }}</p><ApiErrorMeta :details="loadError" /></div><el-button type="primary" :loading="loading" @click="load">重新加载</el-button></section>
+    <section v-else class="surface-panel table-panel" :aria-busy="loading">
     <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="trucking-appointments" aria-label="拖车预约列表" empty-text="暂无符合筛选条件的拖车预约">
       <template #toolbar-start><div class="table-heading"><h2>拖车预约列表</h2><span>共 {{ total }} 条</span></div></template>
       <template #toolbar-actions><el-button v-if="access.can('platform:firstleg:truck-appointment:create')" type="primary" :disabled="loading" @click="router.push({ name: 'trucking-new' })"><Plus :size="16" />新增拖车</el-button></template>
@@ -59,7 +60,7 @@ onMounted(load)
       <template #driver="{ row }">{{ row.driverName || '—' }}<small>{{ row.driverPhone || '—' }}</small></template>
       <template #store="{ row }">{{ row.storeName || '—' }}</template>
       <template #status="{ row }"><StatusBadge :status="statusLabel(row.status)" /></template>
-      <template #actions="{ row }"><el-button text :aria-label="`查看 ${row.appointmentNo || row.id}`" @click="router.push({ name: 'trucking-detail', params: { id: String(row.id) } })"><Eye :size="16" />查看</el-button><el-button v-if="access.can('platform:firstleg:truck-appointment:edit')" text :aria-label="`编辑 ${row.appointmentNo || row.id}`" @click="router.push({ name: 'trucking-detail', params: { id: String(row.id) }, query: { edit: '1' } })"><Pencil :size="16" />编辑</el-button></template>
+      <template #actions="{ row }"><div class="table-actions"><el-button link type="primary" :aria-label="`查看 ${row.appointmentNo || row.id}`" @click="openDetail(row as TruckAppointmentResource)"><Eye :size="15" />详情</el-button><el-button v-if="access.can('platform:firstleg:truck-appointment:edit')" link type="primary" :aria-label="`编辑 ${row.appointmentNo || row.id}`" @click="openDetail(row as TruckAppointmentResource, true)"><Pencil :size="15" />编辑</el-button></div></template>
     </DataTable>
     </section>
     <div v-if="!loading && loaded && rows.length === 0 && !loadError" class="empty-hint"><RefreshCw :size="16" />暂无拖车预约</div>
@@ -67,6 +68,6 @@ onMounted(load)
 </template>
 <style scoped>
 .trucking-page { min-width: 0; }
-.surface-panel { margin-bottom:16px; }.table-panel { overflow:hidden; }.table-heading { display:flex; align-items:baseline; gap:10px; }.table-heading h2 { margin:0; font-size:16px; }.table-heading span { color:var(--el-text-color-secondary); font-size:13px; }.empty-hint { display:flex; justify-content:center; gap:8px; color:var(--el-text-color-secondary); padding:24px; }
+.table-panel { overflow:hidden; }.trucking-error { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-color:#fecdca; background:#fffafa; }.trucking-error strong { display:block; }.trucking-error p { margin:4px 0 0; color:var(--cc-muted); font-size:12px; }.table-heading { display:flex; align-items:baseline; gap:10px; }.table-heading h2 { margin:0; font-size:16px; }.table-heading span { color:var(--el-text-color-secondary); font-size:13px; }.empty-hint { display:flex; justify-content:center; gap:8px; color:var(--el-text-color-secondary); padding:24px; }
 small { display:block; color:var(--el-text-color-secondary); margin-top:3px; }
 </style>