优化

src/modules/first-leg/routes.ts

@@ -9,6 +9,7 @@ export const firstLegModule = {
       path: 'orders/first-leg',
       name: 'first-leg-orders',
       component: () => import('./views/FirstLegOrdersView.vue'),
+      props: { createPage: false },
       release: 'active',
       meta: { title: '头程订单', description: '创建、查询并跟进本企业头程订单', permission: 'order:first-leg:list' },
       navigation: { key: 'first-leg-orders', title: '头程下单', icon: FileText },
@@ -17,6 +18,7 @@ export const firstLegModule = {
       path: 'orders/first-leg/create',
       name: 'first-leg-order-create',
       component: () => import('./views/FirstLegOrdersView.vue'),
+      props: { createPage: true },
       release: 'active',
       meta: { title: '创建头程订单', description: '填写发货、目的地和货物信息', permission: 'order:first-leg:create' },
     },

src/modules/first-leg/views/FirstLegOrdersView.test.mjs

@@ -12,8 +12,10 @@ test('routes the confirmed first-leg path to the implemented order view', () =>
 
 test('opens order creation as a dedicated protected page while keeping draft editing in a drawer', () => {
   assert.match(routerSource, /path: 'orders\/first-leg\/create'[\s\S]*?name: 'first-leg-order-create'[\s\S]*?release: 'active'[\s\S]*?permission: 'order:first-leg:create'/)
+  assert.match(routerSource, /name: 'first-leg-order-create'[\s\S]*?props: \{ createPage: true \}/)
   assert.match(source, /router\.push\(\{ name: 'first-leg-order-create' \}\)/)
-  assert.match(source, /const isCreatePage = computed\(\(\) => route\.name === 'first-leg-order-create'\)/)
+  assert.match(source, /defineProps<\{ createPage\?: boolean \}>/)
+  assert.match(source, /const isCreatePage = computed\(\(\) => props\.createPage\)/)
   assert.match(source, /<FirstLegOrderEditorShell[^>]*:page="isCreatePage"/)
   assert.match(editorShellSource, /<section v-if="page" class="first-leg-editor-page">/)
   assert.match(editorShellSource, /<el-drawer[\s\S]*v-else/)
@@ -206,8 +208,9 @@ test('discards stale inbound billing responses when the drawer closes or the use
 })
 
 test('protects unsaved drafts and exposes recoverable load failures', () => {
-  assert.match(source, /onBeforeRouteLeave/)
-  assert.match(source, /beforeunload/)
+  assert.match(source, /useUnsavedWorkRegistration\(/)
+  assert.match(source, /routeKey: unsavedRouteKey/)
+  assert.doesNotMatch(source, /onBeforeRouteLeave|beforeunload/)
   assert.match(source, /confirmDiscardChanges/)
   assert.match(source, /:before-close="requestCloseEditor"/)
   assert.match(source, /store\.loadError/)

src/modules/first-leg/views/FirstLegOrdersView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox, type FormInstance, type FormItemRule, type FormRules } from 'element-plus'
 import { AlertTriangle, Box, Eye, FilePlus2, MapPin, PackageCheck, Pencil, Plus, Send, Trash2 } from '@lucide/vue'
 import { FIRST_LEG_ORDER_STATUSES, FIRST_LEG_TRANSPORT_MODES, type FirstLegOrderStatus } from '@chongchong/shared'
@@ -13,6 +13,7 @@ import { getMerchantInboundBilling } from '@/modules/first-leg/api/inboundBillin
 import { useFirstLegOrdersStore } from '@/modules/first-leg/store/firstLegOrders'
 import { useTenantAdministrationStore } from '@/modules/tenant-management/public'
 import { useAuthStore } from '@/modules/auth/public'
+import { useUnsavedWorkRegistration } from '@/navigation/workspace-tabs/unsavedWork'
 import type { FirstLegPartyRole, FirstLegPartySnapshot } from '@/modules/first-leg/data/firstLegParties'
 import type { FirstLegOrder, FirstLegOrderDraft } from '@/modules/first-leg/types/firstLegOrder'
 import type { MerchantInboundBilling } from '@/modules/first-leg/types/inboundBilling'
@@ -29,9 +30,9 @@ import {
 const store = useFirstLegOrdersStore()
 const tenantStore = useTenantAdministrationStore()
 const auth = useAuthStore()
-const route = useRoute()
 const router = useRouter()
-const isCreatePage = computed(() => route.name === 'first-leg-order-create')
+const props = withDefaults(defineProps<{ createPage?: boolean }>(), { createPage: false })
+const isCreatePage = computed(() => props.createPage)
 const canViewCompanyProfile = computed(() => auth.hasPermission('company:profile:view'))
 const companyAuditLoaded = ref(false)
 const companySubmissionBlocked = computed(() => companyAuditLoaded.value && tenantStore.company.auditStatus !== 'ACTIVE')
@@ -220,6 +221,14 @@ function emptyDraft(): FirstLegOrderDraft {
 const form = reactive<FirstLegOrderDraft>(emptyDraft())
 const serializedDraft = computed(() => JSON.stringify(form))
 const editorDirty = computed(() => (editorOpen.value || isCreatePage.value) && serializedDraft.value !== editorBaseline.value)
+const unsavedRouteKey = props.createPage ? 'first-leg-order-create' : 'first-leg-orders'
+
+useUnsavedWorkRegistration({
+  key: `first-leg-order-editor:${unsavedRouteKey}`,
+  routeKey: unsavedRouteKey,
+  label: props.createPage ? '创建头程订单' : '头程订单编辑',
+  dirty: editorDirty,
+})
 
 const filteredOrders = computed(() => store.orders.filter((order) => {
   const keywordValue = appliedFilters.value.keyword
@@ -284,14 +293,7 @@ function errorMessage(error: unknown) {
   return error instanceof Error ? error.message : '服务暂时不可用'
 }
 
-function handleBeforeUnload(event: BeforeUnloadEvent) {
-  if (!editorDirty.value) return
-  event.preventDefault()
-  event.returnValue = ''
-}
-
 onMounted(() => {
-  window.addEventListener('beforeunload', handleBeforeUnload)
   loadPrivateAddresses()
   void loadPageData()
 })
@@ -308,15 +310,9 @@ watch(detailOpen, (open) => {
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', handleBeforeUnload)
   resetInboundBillingState()
 })
 
-onBeforeRouteLeave(async () => {
-  if (!editorDirty.value) return true
-  return confirmDiscardChanges()
-})
-
 function markEditorClean() {
   editorBaseline.value = serializedDraft.value
 }