feat: 表单保存交互规范P0 — 全局未保存离开守卫(useFormGuard)+MapCanvas接入

frontend/src/views/KPIDetail.vue

@@ -268,13 +268,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue'
-import { useRoute, onBeforeRouteLeave } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
 import VChart from 'vue-echarts'
 import 'echarts'
 import { kpiApi, mapApi, kpiCausalityApi, orgApi, userApi } from '../api/index'
 import api from '../api/index'
+import { useFormGuard } from '../composables/useFormGuard'
 
 const route = useRoute()
 const kpi = ref<any>(null)
@@ -301,38 +302,13 @@ const fullNetworkNodes = ref<any[]>([])
 const fullNetworkEdges = ref<any[]>([])
 const fullNetworkLoading = ref(false)
 
-// 编辑未保存离开确认
+// 编辑未保存离开确认（统一守卫 composable）
 const isDirty = ref(false)
+useFormGuard(isDirty)
 let kpiSnapshot: string = ''
 
 let watchInitialized = false
 
-// 路由离开确认
-onBeforeRouteLeave((to, from, next) => {
-  if (isDirty.value) {
-    ElMessageBox.confirm('有未保存的修改，确定离开吗？', '提示', {
-      confirmButtonText: '离开',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }).then(() => next()).catch(() => next(false))
-  } else {
-    next()
-  }
-})
-
-// 页面关闭/刷新确认
-function onBeforeUnloadHandler(e: BeforeUnloadEvent) {
-  if (isDirty.value) {
-    e.preventDefault()
-    e.returnValue = ''
-  }
-}
-
-// 组件卸载时清理事件
-onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', onBeforeUnloadHandler)
-})
-
 // 监听 kpi 变化设置脏标记（跳过初始化赋值）
 watch(() => kpi.value, () => {
   if (!kpi.value) return
@@ -657,9 +633,6 @@ watch(showFullNetwork, (val) => {
 })
 
 onMounted(async () => {
-  // 注册页面关闭/刷新确认
-  window.addEventListener('beforeunload', onBeforeUnloadHandler)
-
   const r: any = await kpiApi.get(Number(route.params.id))
   kpi.value = r.data || r
   // 保存初始快照用于脏检测