feat: 定时、失焦、保存同步

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -58,12 +58,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h, onBeforeUnmount } from 'vue'
+import { ref, computed, h, watch } from 'vue'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
-import { EditEnum } from '@/enums/pageEnum'
+import { EditEnum, ChartEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useRoute } from 'vue-router'
 import { useSync } from '@/views/chart/hooks/useSync.hook'
@@ -111,12 +111,54 @@ function updateToSession(id: string) {
   }
 }
 
-onBeforeUnmount((() => {
-  // 【监听JSON代码 刷新图表】
+function useSyncUpdate() {
+  // 定义侦听器变量
+  let timer: any;
   const updateFn = (e: any) => updateComponent(e!.detail, true, false)
+  const syncData = () => {
+    if (routerParamsInfo.name == ChartEnum.CHART_HOME_NAME) {
+      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+    }
+  }
+  
+  // 开启侦听
+  const use = () => {
+    // 1、定时同步数据
+    timer = setInterval(() => {
+      // 窗口激活并且处于工作台
+      document.hasFocus() && syncData()
+    }, 5000)
+    // 2、失焦同步数据
+    addEventListener('blur', syncData)
+
+    // 【监听JSON代码 刷新工作台图表】
     addEventListener(SavePageEnum.JSON, updateFn)
-  return () => removeEventListener(SavePageEnum.JSON, updateFn)
-})())
+  }
+
+  // 关闭侦听
+  const unUse = () => {
+    clearInterval(timer)
+    removeEventListener(SavePageEnum.JSON, updateFn)
+    removeEventListener('blur', syncData)
+  }
+
+  // 路由变更时处理
+  const watchHandler = (toName: any, fromName: any) => {
+    if (fromName == ChartEnum.CHART_HOME_NAME) {
+      unUse()
+    }
+    if (toName == ChartEnum.CHART_HOME_NAME) {
+      use()
+    }
+  }
+  return watchHandler
+}
+
+watch(
+  () => routerParamsInfo.name,
+  useSyncUpdate(),
+  { immediate: true }
+)
 
 // 鼠标悬停定时器
 let mouseTime: any = null

src/views/chart/hooks/useKeyboard.hook.ts

@@ -1,5 +1,5 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { WinKeyboard, MacKeyboard, MenuEnum, SavePageEnum } from '@/enums/editPageEnum'
+import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
 import throttle from 'lodash/throttle'
 import debounce from 'lodash/debounce'
 import keymaster from 'keymaster'
@@ -23,7 +23,6 @@ export const winKeyboardValue = {
   [MenuEnum.DELETE]: 'delete',
   [MenuEnum.BACK]: winCtrlMerge('z'),
   [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')),
-  [MenuEnum.SAVE]: winCtrlMerge('s'),
   [MenuEnum.GROUP]: winCtrlMerge('g'),
   [MenuEnum.UN_GROUP]: winCtrlMerge(winShiftMerge('g')),
   [MenuEnum.LOCK]: winCtrlMerge('l'),
@@ -49,7 +48,6 @@ export const macKeyboardValue = {
   [MenuEnum.DELETE]: macCtrlMerge('backspace'),
   [MenuEnum.BACK]: macCtrlMerge('z'),
   [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')),
-  [MenuEnum.SAVE]: macCtrlMerge('s'),
   [MenuEnum.GROUP]: macCtrlMerge('g'),
   [MenuEnum.UN_GROUP]: macCtrlMerge(macShiftMerge('g')),
   [MenuEnum.LOCK]: macCtrlMerge('l'),
@@ -73,7 +71,6 @@ const winKeyList: Array<string> = [
   winKeyboardValue.back,
   winKeyboardValue.forward,
 
-  winKeyboardValue.save,
   winKeyboardValue.group,
   winKeyboardValue.unGroup,
 
@@ -99,7 +96,6 @@ const macKeyList: Array<string> = [
   macKeyboardValue.back,
   macKeyboardValue.forward,
 
-  macKeyboardValue.save,
   macKeyboardValue.group,
   macKeyboardValue.unGroup,
 
@@ -207,11 +203,6 @@ export const useAddKeyboard = () => {
       case keyboardValue.show:
         keymaster(e, throttle(() => { chartEditStore.setShow(); return false }, throttleTime))
         break;
-
-      // 保存 ct+s
-      case keyboardValue.save:
-        keymaster(e, throttle(() => { dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo })); return false }, 200))
-        break;
     }
   }
   winKeyList.forEach((key: string) => {

src/views/edit/index.vue

@@ -81,9 +81,17 @@ opener.addEventListener(SavePageEnum.CHART, (e: any) => {
   content.value = JSON.stringify(e.detail, undefined, 2)
 })
 
+// 窗口失焦 + 保存 => 同步数据
 document.addEventListener('keydown', function (e) {
   if (e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
     e.preventDefault()
+    updateSync()
+  }
+})
+addEventListener('blur', updateSync)
+
+// 同步更新
+function updateSync() {
   if (!opener) {
     return window['$message'].error('源窗口已关闭，视图同步失败')
   }
@@ -96,8 +104,7 @@ document.addEventListener('keydown', function (e) {
     window['$message'].error('内容格式有误')
     console.log(e)
   }
-  }
-})
+}
 </script>
 
 <style lang="scss" scoped>