ASW-203 fix: application 编辑页面缺少未保存提示

2 files changed, 28 insertions, 1 deletions

diff --git a/src/components/monaco/index.vue b/src/components/monaco/index.vue
index 4dcc5ad..227dce7 100644
--- a/src/components/monaco/index.vue
+++ b/src/components/monaco/index.vue
@@ -81,6 +81,10 @@ const initEditor = () => {
     scrollbar: {
       alwaysConsumeMouseWheel: false,
     },
+    unicodeHighlight: {
+      ambiguousCharacters: false,
+      invisibleCharacters: false,
+    },
   });
   if (
     !get(monaco, 'languages.json.jsonDefaults._diagnosticsOptions.schemas', [])
diff --git a/src/views/applications/edit.vue b/src/views/applications/edit.vue
index 86f74c1..05d6536 100644
--- a/src/views/applications/edit.vue
+++ b/src/views/applications/edit.vue
@@ -431,7 +431,14 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { ref, computed, onBeforeMount, nextTick, watch } from 'vue';
+import {
+  ref,
+  computed,
+  onBeforeMount,
+  onBeforeUnmount,
+  nextTick,
+  watch,
+} from 'vue';
 import {
   applicationDetailApi,
   applicationEditApi,
@@ -916,8 +923,24 @@ const jumpBack = () => {
   });
 };
 
+const beforeunloadHandler = (event) => {
+  if (modifiedList.value.length) {
+    // 定义提示消息
+    const message = '系统可能不会保存您所做的更改。';
+    // 标准方式：现代浏览器通常不允许自定义文本
+    event.returnValue = message; // Chrome 和现代浏览器需要这行代码来触发提示框
+    // 兼容旧版浏览器
+    return message; // Firefox 需要这行代码来触发提示框
+  }
+};
+
 onBeforeMount(() => {
   getData();
+  window.addEventListener('beforeunload', beforeunloadHandler);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', beforeunloadHandler);
 });
 
 watch(