From 5dc58362cc04f83a2b06c85abbae3c20f6dc4907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BD=98=E6=BD=98?= <97274247@qq.com>
Date: Thu, 20 Oct 2022 14:46:19 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E9=A2=84=E8=A7=88=E9=A1=B5\JSON?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5\=E5=9B=BE=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=E5=90=8C=E6=AD=A5=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/editPageEnum.ts                     |  8 ++
 src/enums/pageEnum.ts                         |  6 ++
 src/router/index.ts                           |  3 +-
 src/router/modules/edit.route.ts              | 20 ++++
 src/router/modules/index.ts                   |  4 +-
 src/router/modules/preview.route.ts           |  2 +-
 .../components/EditTools/index.vue            | 59 ++++++++++-
 src/views/chart/hooks/useKeyboard.hook.ts     | 11 ++-
 src/views/edit/index.vue                      | 99 +++++++++++++++++++
 src/views/preview/wrapper.vue                 | 25 +++++
 10 files changed, 231 insertions(+), 6 deletions(-)
 create mode 100644 src/router/modules/edit.route.ts
 create mode 100644 src/views/edit/index.vue
 create mode 100644 src/views/preview/wrapper.vue

diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts
index df395653..bfb51ef0 100644
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -9,6 +9,12 @@ export enum DragKeyEnum {
   DRAG_KEY = 'ChartData'
 }
 
+// 不同页面保存操作
+export enum SavePageEnum {
+  CHART = 'SaveChart',
+  JSON = 'SaveJSON'
+}
+
 // 操作枚举
 export enum MenuEnum {
   // 移动
@@ -42,6 +48,8 @@ export enum MenuEnum {
   BACK = 'back',
   // 前进
   FORWORD = 'forward',
+  // 保存
+  SAVE = 'save',
   // 锁定
   LOCK = 'lock',
   // 解除锁定
diff --git a/src/enums/pageEnum.ts b/src/enums/pageEnum.ts
index d709043c..5f3b4baf 100644
--- a/src/enums/pageEnum.ts
+++ b/src/enums/pageEnum.ts
@@ -12,6 +12,12 @@ export enum PreviewEnum {
   CHART_PREVIEW_NAME = 'ChartPreview',
 }
 
+export enum EditEnum {
+  //  图表JSON编辑
+  CHART_EDIT = '/chart/edit/:id(.*)*',
+  CHART_EDIT_NAME = 'ChartEdit',
+}
+
 export enum PageEnum {
   // 登录
   BASE_LOGIN = '/login',
diff --git a/src/router/index.ts b/src/router/index.ts
index 88e42395..5fd12a68 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -21,7 +21,8 @@ const RootRoute: Array<RouteRecordRaw> = [
       ...HttpErrorPage,
       modules.projectRoutes,
       modules.chartRoutes,
-      modules.previewRoutes
+      modules.previewRoutes,
+      modules.editRoutes
     ]
   }
 ]
diff --git a/src/router/modules/edit.route.ts b/src/router/modules/edit.route.ts
new file mode 100644
index 00000000..50b8168b
--- /dev/null
+++ b/src/router/modules/edit.route.ts
@@ -0,0 +1,20 @@
+import { RouteRecordRaw } from 'vue-router'
+import { EditEnum } from '@/enums/pageEnum'
+
+// 引入路径
+const importPath = {
+  [EditEnum.CHART_EDIT_NAME]: () => import('@/views/edit/index.vue')
+}
+
+const chartRoutes: RouteRecordRaw = {
+  path: EditEnum.CHART_EDIT,
+  name: EditEnum.CHART_EDIT_NAME,
+  component: importPath[EditEnum.CHART_EDIT_NAME],
+  meta: {
+    title: '编辑',
+    isRoot: true
+  }
+}
+
+
+export default chartRoutes
\ No newline at end of file
diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts
index 3be2427b..c134d953 100644
--- a/src/router/modules/index.ts
+++ b/src/router/modules/index.ts
@@ -1,9 +1,11 @@
 import projectRoutes from './project.router'
 import chartRoutes from './chart.route'
 import previewRoutes from './preview.route'
+import editRoutes from './edit.route'
 
 export default {
   projectRoutes,
   chartRoutes,
-  previewRoutes
+  previewRoutes,
+  editRoutes
 }
\ No newline at end of file
diff --git a/src/router/modules/preview.route.ts b/src/router/modules/preview.route.ts
index d6741008..ae3d9191 100644
--- a/src/router/modules/preview.route.ts
+++ b/src/router/modules/preview.route.ts
@@ -3,7 +3,7 @@ import { PreviewEnum } from '@/enums/pageEnum'
 
 // 引入路径
 const importPath = {
-  'PreviewEnum.CHART_PREVIEW_NAME': () => import('@/views/preview/index.vue')
+  'PreviewEnum.CHART_PREVIEW_NAME': () => import('@/views/preview/wrapper.vue')
 }
 
 const chartRoutes: RouteRecordRaw = {
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index 4c66016f..3582ee75 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -58,17 +58,65 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h } from 'vue'
+import { ref, computed, h, onBeforeUnmount } 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 { StorageEnum } from '@/enums/storageEnum'
+import { useRoute } from 'vue-router'
+import { useSync } from '@/views/chart/hooks/useSync.hook'
+import { SavePageEnum } from '@/enums/editPageEnum'
 import { GoSystemSet } from '@/components/GoSystemSet/index'
 import { exportHandle } from './utils'
 import { useFile } from './hooks/useFile.hooks'
 import { BtnListType, TypeEnum } from './index.d'
 import { icon } from '@/plugins'
 
-const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon } = icon.ionicons5
+const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon, CodeSlashIcon } = icon.ionicons5
 const settingStore = useSettingStore()
+const chartEditStore = useChartEditStore()
+const routerParamsInfo = useRoute()
+const { updateComponent } = useSync()
+
+// 编辑
+const editHandle = () => {
+  // 获取id路径
+  const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')
+  if (!path) return
+  let { id } = routerParamsInfo.params as any
+  id = typeof id === 'string' ? id : id[0]
+  updateToSession(id)
+  routerTurnByPath(path, [id], undefined, true)
+}
+
+// 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
+function updateToSession(id: string) {
+  const storageInfo = chartEditStore.getStorageInfo
+  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+
+  if (sessionStorageInfo?.length) {
+    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === id)
+    // 重复替换
+    if (repeateIndex !== -1) {
+      sessionStorageInfo.splice(repeateIndex, 1, { ...storageInfo, id })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    } else {
+      sessionStorageInfo.push({ ...storageInfo, id})
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    }
+  } else {
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...storageInfo, id }])
+  }
+}
+
+onBeforeUnmount((() => {
+  // 【监听JSON代码 刷新图表】
+  const updateFn = (e: any) => updateComponent(e!.detail, true, false)
+  addEventListener(SavePageEnum.JSON, updateFn)
+  return () => removeEventListener(SavePageEnum.JSON, updateFn)
+})())
 
 // 鼠标悬停定时器
 let mouseTime: any = null
@@ -95,6 +143,13 @@ const btnList: BtnListType[] = [
     name: '导入',
     icon: DownloadIcon
   },
+  {
+    key: 'edit',
+    type: TypeEnum.BUTTON,
+    name: '编辑JSON',
+    icon: CodeSlashIcon,
+    handle: editHandle
+  },
   {
     key: 'setting',
     type: TypeEnum.BUTTON,
diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts
index fce80e5e..048f4627 100644
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/src/views/chart/hooks/useKeyboard.hook.ts
@@ -1,5 +1,5 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
+import { WinKeyboard, MacKeyboard, MenuEnum, SavePageEnum } from '@/enums/editPageEnum'
 import throttle from 'lodash/throttle'
 import debounce from 'lodash/debounce'
 import keymaster from 'keymaster'
@@ -23,6 +23,7 @@ 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'),
@@ -48,6 +49,7 @@ 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'),
@@ -71,6 +73,7 @@ const winKeyList: Array<string> = [
   winKeyboardValue.back,
   winKeyboardValue.forward,
 
+  winKeyboardValue.save,
   winKeyboardValue.group,
   winKeyboardValue.unGroup,
 
@@ -96,6 +99,7 @@ const macKeyList: Array<string> = [
   macKeyboardValue.back,
   macKeyboardValue.forward,
 
+  macKeyboardValue.save,
   macKeyboardValue.group,
   macKeyboardValue.unGroup,
 
@@ -203,6 +207,11 @@ 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) => {
diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue
new file mode 100644
index 00000000..96d4a051
--- /dev/null
+++ b/src/views/edit/index.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="go-edit">
+    <n-layout has-sider sider-placement="right">
+      <n-layout-content>
+        <div>
+          <n-space class="go-mx-1 go-my-1">
+            <n-button size="medium" @click="back">返回</n-button>
+            <n-button v-if="showOpenFilePicker" size="medium" @click="importJSON">导入</n-button>
+            <!-- <n-button size="medium" type="primary" @click="confirm">覆盖</n-button> -->
+          </n-space>
+        </div>
+        <monaco-editor
+          v-model:modelValue="content"
+          language="json"
+          :editorOptions="{
+            lineNumbers: 'on',
+            minimap: { enabled: true }
+          }"
+        />
+      </n-layout-content>
+    </n-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { SavePageEnum } from '@/enums/editPageEnum'
+import { getSessionStorageInfo } from '../preview/utils'
+import type { ChartEditStorageType } from '../preview/index.d'
+import { setSessionStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+
+const showOpenFilePicker: Function = (window as any).showOpenFilePicker
+let content = ref('')
+
+// 从sessionStorage 获取数据
+function getDataBySession () {
+  const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+  content.value = JSON.stringify(localStorageInfo, undefined, 2)
+}
+getDataBySession()
+
+// 返回父窗口
+function back() {
+  opener.name = Date.now()
+  window.open(opener.location.href, opener.name)
+}
+
+
+// 导入json文本
+async function importJSON() {
+  const files = await showOpenFilePicker()
+  const file = await files[0].getFile()
+  const fr = new FileReader()
+  fr.readAsText(file)
+  fr.onloadend = () => {
+    content.value = (fr.result || '').toString()
+  }
+}
+
+// 同步 [画布页失去焦点时同步数据到JSON页，JSON页Ctrl+S 时同步数据到画布页]
+opener.addEventListener(SavePageEnum.CHART, (e: any) => {
+  setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [e.detail])
+  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()
+    if (!opener) {
+      return window['$message'].error('源窗口已关闭，视图同步失败')
+    }
+    try {
+      const detail = JSON.parse(content.value)
+      delete detail.id
+      // 保持id不变
+      opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
+    } catch (e) {
+      window['$message'].error('内容格式有误')
+      console.log(e)
+    }
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.go-edit {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+@include deep() {
+  .go-editor-area {
+    height: calc(100% - 40px) !important;
+  }
+}
+</style>
diff --git a/src/views/preview/wrapper.vue b/src/views/preview/wrapper.vue
new file mode 100644
index 00000000..242910be
--- /dev/null
+++ b/src/views/preview/wrapper.vue
@@ -0,0 +1,25 @@
+<template>
+  <Preview :key="key"></Preview>
+</template>
+
+<script setup lang="ts">
+import { getSessionStorageInfo } from './utils'
+import type { ChartEditStorageType } from './index.d'
+import { SavePageEnum } from '@/enums/editPageEnum'
+import { setSessionStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { ref } from 'vue'
+import Preview from './index.vue'
+
+let key = ref(Date.now())
+let localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+
+// 数据变更 -> 同步sessionStorage -> reload页面 （重新执行Mounted）
+;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
+  opener.addEventListener(saveEvent, (e: any) => {
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
+    key.value = Date.now()
+  })
+})
+
+</script>

From fc13c9f7bc9bb1ff70d24c5be7b433ab2e989380 Mon Sep 17 00:00:00 2001
From: panjianhua <97274247@qq.com>
Date: Sat, 22 Oct 2022 21:16:37 +0800
Subject: [PATCH 2/3] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/edit/index.vue | 55 ++++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue
index 96d4a051..f1507b4b 100644
--- a/src/views/edit/index.vue
+++ b/src/views/edit/index.vue
@@ -1,14 +1,29 @@
 <template>
   <div class="go-edit">
-    <n-layout has-sider sider-placement="right">
-      <n-layout-content>
+    <n-layout>
+      <n-layout-header class="go-edit-header go-px-5 go-flex-items-center" bordered>
         <div>
-          <n-space class="go-mx-1 go-my-1">
-            <n-button size="medium" @click="back">返回</n-button>
-            <n-button v-if="showOpenFilePicker" size="medium" @click="importJSON">导入</n-button>
-            <!-- <n-button size="medium" type="primary" @click="confirm">覆盖</n-button> -->
-          </n-space>
+          <n-text class="go-edit-title go-mr-4">页面在线编辑器</n-text>
+          <n-button v-if="showOpenFilePicker" class="go-mr-3" size="medium" @click="importJSON">
+            <template #icon>
+              <n-icon>
+                <download-icon></download-icon>
+              </n-icon>
+            </template>
+            导入
+          </n-button>
+          <n-button class="go-mr-4" size="medium" @click="back">
+            <template #icon>
+              <n-icon>
+                <chevron-back-outline-icon></chevron-back-outline-icon>
+              </n-icon>
+            </template>
+            返回工作台
+          </n-button>
         </div>
+        <n-tag :bordered="false" type="warning"> 「按 ctrl + s 保存/更新」 </n-tag>
+      </n-layout-header>
+      <n-layout-content>
         <monaco-editor
           v-model:modelValue="content"
           language="json"
@@ -30,12 +45,14 @@ import { getSessionStorageInfo } from '../preview/utils'
 import type { ChartEditStorageType } from '../preview/index.d'
 import { setSessionStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
+import { icon } from '@/plugins'
 
+const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
 let content = ref('')
 
 // 从sessionStorage 获取数据
-function getDataBySession () {
+function getDataBySession() {
   const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
   content.value = JSON.stringify(localStorageInfo, undefined, 2)
 }
@@ -47,7 +64,6 @@ function back() {
   window.open(opener.location.href, opener.name)
 }
 
-
 // 导入json文本
 async function importJSON() {
   const files = await showOpenFilePicker()
@@ -82,7 +98,6 @@ document.addEventListener('keydown', function (e) {
     }
   }
 })
-
 </script>
 
 <style lang="scss" scoped>
@@ -90,10 +105,22 @@ document.addEventListener('keydown', function (e) {
   display: flex;
   flex-direction: column;
   height: 100vh;
-}
-@include deep() {
-  .go-editor-area {
-    height: calc(100% - 40px) !important;
+  .go-edit-header {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    justify-content: space-between;
+    .go-edit-title {
+      position: relative;
+      bottom: 3px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  @include deep() {
+    .go-editor-area {
+      height: calc(100vh - 60px) !important;
+    }
   }
 }
 </style>

From f75bb6d9a6ed0cdbaf4c153fe2c7a6071bbd618a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BD=98=E6=BD=98?= <97274247@qq.com>
Date: Wed, 26 Oct 2022 12:10:19 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E5=AE=9A=E6=97=B6=E3=80=81?=
 =?UTF-8?q?=E5=A4=B1=E7=84=A6=E3=80=81=E4=BF=9D=E5=AD=98=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EditTools/index.vue            | 56 ++++++++++++++++---
 src/views/chart/hooks/useKeyboard.hook.ts     | 11 +---
 src/views/edit/index.vue                      | 33 ++++++-----
 3 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index 3582ee75..1dcacc84 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/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)
-  addEventListener(SavePageEnum.JSON, updateFn)
-  return () => removeEventListener(SavePageEnum.JSON, updateFn)
-})())
+  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)
+  }
+
+  // 关闭侦听
+  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
diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts
index 048f4627..fce80e5e 100644
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/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) => {
diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue
index f1507b4b..0e91a38f 100644
--- a/src/views/edit/index.vue
+++ b/src/views/edit/index.vue
@@ -31,7 +31,7 @@
             lineNumbers: 'on',
             minimap: { enabled: true }
           }"
-        />
+      />
       </n-layout-content>
     </n-layout>
   </div>
@@ -81,23 +81,30 @@ 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()
-    if (!opener) {
-      return window['$message'].error('源窗口已关闭，视图同步失败')
-    }
-    try {
-      const detail = JSON.parse(content.value)
-      delete detail.id
-      // 保持id不变
-      opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
-    } catch (e) {
-      window['$message'].error('内容格式有误')
-      console.log(e)
-    }
+    updateSync()
   }
 })
+addEventListener('blur', updateSync)
+
+// 同步更新
+function updateSync() {
+  if (!opener) {
+    return window['$message'].error('源窗口已关闭，视图同步失败')
+  }
+  try {
+    const detail = JSON.parse(content.value)
+    delete detail.id
+    // 保持id不变
+    opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
+  } catch (e) {
+    window['$message'].error('内容格式有误')
+    console.log(e)
+  }
+}
 </script>
 
 <style lang="scss" scoped>