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

frontend/src/views/KPIList.vue

@@ -358,6 +358,7 @@ import { ref, reactive, onMounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { kpiApi, templateApi, dashboardApi, entityApi, userApi, orgApi } from '../api/index'
 import MyDialog from '../components/MyDialog.vue'
+import { useFormGuard, trackDialogForm } from '../composables/useFormGuard'
 
 // ── 数据 ──
 const kpis = ref<any[]>([])
@@ -417,6 +418,11 @@ const showForm = ref(false)
 const editMode = ref(false)
 const form = ref<any>({})
 
+// ── 未保存离开守卫 ──
+const isDirty = ref(false)
+const { markDirty, markClean } = useFormGuard(isDirty)
+trackDialogForm(showForm, form, markDirty)
+
 // ── 维度映射 ──
 const DIM_MAP: Record<string, string> = { finance: '财务', customer: '客户', process: '内部流程', learning: '学习成长' }
 const CAT_MAP: Record<string, string> = {
@@ -613,6 +619,7 @@ async function saveKPI() {
       ElMessage.success('创建成功')
     }
     showForm.value = false
+    markClean()
     loadKpis()
     loadCategories()
   } catch (e) {
@@ -639,6 +646,7 @@ const templateKeyword = ref('')
 const templateDimFilter = ref('')
 const selectedTemplate = ref<any>(null)
 const instantiateForm = ref<any>({})
+trackDialogForm(showTemplateSelect, instantiateForm, markDirty)
 
 async function loadTemplates() {
   templateLoading.value = true
@@ -680,6 +688,7 @@ async function doInstantiate() {
     await templateApi.instantiate(selectedTemplate.value.id, data)
     ElMessage.success(`已从模板「${selectedTemplate.value.kpi_name}」创建KPI`)
     showTemplateSelect.value = false
+    markClean()
     selectedTemplate.value = null
     instantiateForm.value = {}
     loadKpis()