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

frontend/src/views/MapCanvas.vue

@@ -165,6 +165,7 @@ import { mapApi, kpiApi, okrTemplateApi } from "../api/index"
 import KnowledgePanel from '../components/KnowledgePanel.vue'
 import api from "../api/index"
 import { LAYER_CONFIG, LAYER_KEYS, getLayerList } from "../config/layers"
+import { useFormGuard } from "../composables/useFormGuard"
 import StrategyLayer from "../components/strategy-map/StrategyLayer.vue"
 import ConnectionLines from "../components/strategy/ConnectionLines.vue"
 import MapCanvasToolbar from "../components/map-canvas/MapCanvasToolbar.vue"
@@ -179,6 +180,8 @@ const orderedLayerConfigs = getLayerList()
 const maps = ref<any[]>([])
 const selectedMap = ref<number | null>(null)
 const currentMap = ref<any>(null)
+const isDirty = ref(false)
+const { markDirty, markClean } = useFormGuard(isDirty)
 const allKpis = ref<any[]>([])
 const kpiNameMap = reactive<Record<string, string>>({})
 
@@ -222,6 +225,7 @@ function onChainFocus(nodes: string[] | null) { chainFocusNodes.value = nodes }
 function onUpdateConnection(idx: number, patch: any) {
   if (!connections.value[idx]) return
   Object.assign(connections.value[idx], patch)
+  markDirty()
   saveConnections()
 }
 
@@ -247,6 +251,7 @@ const editingLayerKey = ref('')
 const dialogRefreshKey = ref(0)
 const dialogForm = reactive({ name: '', description: '', icon: 'target', targetValue: null, currentValue: null, unit: '%', owner: '', isLeading: false, kpis: [] as string[] })
 function onSaveDialog(data: any) {
+  markDirty()
   // 新格式：O+KR 结构（来自两步弹窗）
   if (data.o_name) {
     if (!data.o_name?.trim()) { ElMessage.warning('请输入目标名称'); return }
@@ -489,11 +494,13 @@ function completeConnection(fromKey: string, toKey: string) {
   }).then(() => {
     ElMessage.success("连线已添加")
     connections.value.push({ from: fromKey, to: toKey, style: "solid", effect: "positive", label: "" })
+    markDirty()
     cancelLink()
     nextTick(() => { triggerRecalc(); saveConnections() })
   }).catch((e: any) => {
     if (e?.response?.status !== 400) {
       connections.value.push({ from: fromKey, to: toKey, style: "solid", effect: "positive", label: "" })
+      markDirty()
       ElMessage.success("连线已添加（本地）")
     } else {
       ElMessage.warning(e?.response?.data?.detail || "连线失败")
@@ -779,6 +786,7 @@ async function saveCanvas(silent?: boolean) {
       canvas_data: { connections: connections.value },
       version_num: currentMap.value?.version_num,
     })
+    markClean()
     if (!silent) ElMessage.success("已保存")
   } catch (e: any) {
     if (e?.response?.status === 409) {