From 70d080ff704d3add47008bf0ba2604f223e3d000 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sat, 1 Apr 2023 22:00:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=98=E5=8E=9F=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=88=B0=E9=A2=84=E8=A7=88=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/editPageEnum.ts                     |  1 +
 .../EditTools/hooks/useSyncUpdate.hook.ts     | 11 ++--
 src/views/preview/wrapper.vue                 | 50 +++++++++----------
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts
index 518b6f70..4f779ede 100644
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -12,6 +12,7 @@ export enum DragKeyEnum {
 // 不同页面保存操作
 export enum SavePageEnum {
   CHART = 'SaveChart',
+  CHART_TO_PREVIEW = 'ChartToPreview',
   JSON = 'SaveJSON',
   CLOSE = 'close'
 }
diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
index b4c971dd..3865742d 100644
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
@@ -24,6 +24,11 @@ export const syncData = () => {
   })
 }
 
+// 同步数据到预览页
+export const syncDataToPreview = () => {
+  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
+}
+
 // 侦听器更新
 const useSyncUpdateHandle = () => {
   // 定义侦听器变量
@@ -48,8 +53,8 @@ const useSyncUpdateHandle = () => {
     //   document.hasFocus() && syncData()
     // }, editToJsonInterval)
 
-    // 失焦同步数据（暂不开启）
-    // addEventListener('blur', syncData)
+    // 失焦同步数据
+    addEventListener('blur', syncDataToPreview)
 
     // 监听编辑器保存事件 刷新工作台图表
     addEventListener(SavePageEnum.JSON, updateFn)
@@ -61,7 +66,7 @@ const useSyncUpdateHandle = () => {
   // 关闭侦听
   const unUse = () => {
     // clearInterval(timer)
-    // removeEventListener('blur', syncData)
+    removeEventListener('blur', syncDataToPreview)
     removeEventListener(SavePageEnum.JSON, updateFn)
   }
 
diff --git a/src/views/preview/wrapper.vue b/src/views/preview/wrapper.vue
index 86abc6b3..c119a661 100644
--- a/src/views/preview/wrapper.vue
+++ b/src/views/preview/wrapper.vue
@@ -1,25 +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())
-
-// 数据变更 -> 组件销毁重建
-;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
-  if (!window.opener) return
-  window.opener.addEventListener(saveEvent, async (e: any) => {
-    const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
-    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
-    key.value = Date.now()
-  })
-})
-</script>
+<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())
+
+// 数据变更 -> 组件销毁重建
+;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
+  if (!window.opener) return
+  window.opener.addEventListener(saveEvent, async (e: any) => {
+    const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
+    key.value = Date.now()
+  })
+})
+</script>