From 29384a37445c5d68ddf494b0a03d540cc7e6fbfa 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, 12 Nov 2022 15:37:41 +0800
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E9=85=8D=E7=BD=AE=E7=BC=BA=E5=A4=B1?=
 =?UTF-8?q?=E6=B7=B1=E6=8B=B7=E8=B4=9D=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/components/Charts/Lines/LineCommon/config.ts      | 3 ++-
 .../components/Charts/Lines/LineGradientSingle/config.ts       | 3 ++-
 src/packages/components/Charts/Lines/LineGradients/config.ts   | 3 ++-
 .../components/Charts/Lines/LineLinearSingle/config.ts         | 3 ++-
 src/packages/components/Charts/Maps/MapBase/config.ts          | 3 ++-
 src/packages/components/Charts/Pies/PieCircle/config.ts        | 3 ++-
 src/packages/components/Charts/Pies/PieCommon/config.ts        | 3 ++-
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index 5b275ba0..917a5064 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
@@ -47,7 +48,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = LineCommonConfig.key
-  public chartConfig = LineCommonConfig
+  public chartConfig = cloneDeep(LineCommonConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
index dea1397a..592b704d 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
@@ -3,6 +3,7 @@ import { LineGradientSingleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
@@ -58,7 +59,7 @@ const options = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = LineGradientSingleConfig.key
-  public chartConfig = LineGradientSingleConfig
+  public chartConfig = cloneDeep(LineGradientSingleConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(options, includes)
 }
diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts
index 2037ce5f..d470bab5 100644
--- a/src/packages/components/Charts/Lines/LineGradients/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradients/config.ts
@@ -3,6 +3,7 @@ import { LineGradientsConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
@@ -85,7 +86,7 @@ const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = LineGradientsConfig.key
-  public chartConfig = LineGradientsConfig
+  public chartConfig = cloneDeep(LineGradientsConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }
diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
index fbeb875f..abcb2a31 100644
--- a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineLinearSingleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
@@ -54,7 +55,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = LineLinearSingleConfig.key
-  public chartConfig = LineLinearSingleConfig
+  public chartConfig = cloneDeep(LineLinearSingleConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }
diff --git a/src/packages/components/Charts/Maps/MapBase/config.ts b/src/packages/components/Charts/Maps/MapBase/config.ts
index 36663256..888fe6b7 100644
--- a/src/packages/components/Charts/Maps/MapBase/config.ts
+++ b/src/packages/components/Charts/Maps/MapBase/config.ts
@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { MapBaseConfig } from './index'
 import { chartInitConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = []
@@ -151,6 +152,6 @@ export const MapDefaultConfig = { ...option }
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = MapBaseConfig.key
   public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
-  public chartConfig = MapBaseConfig
+  public chartConfig = cloneDeep(MapBaseConfig)
   public option = echartOptionProfixHandle(option, includes)
 }
diff --git a/src/packages/components/Charts/Pies/PieCircle/config.ts b/src/packages/components/Charts/Pies/PieCircle/config.ts
index 15954a3d..cbee4975 100644
--- a/src/packages/components/Charts/Pies/PieCircle/config.ts
+++ b/src/packages/components/Charts/Pies/PieCircle/config.ts
@@ -1,6 +1,7 @@
 import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { PieCircleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
 
 export const includes = []
 
@@ -57,7 +58,7 @@ const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = PieCircleConfig.key
 
-  public chartConfig = PieCircleConfig
+  public chartConfig = cloneDeep(PieCircleConfig)
 
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
index 1af07f40..068450b6 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/config.ts
@@ -1,6 +1,7 @@
 import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { PieCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend']
@@ -61,7 +62,7 @@ const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = PieCommonConfig.key
 
-  public chartConfig = PieCommonConfig
+  public chartConfig = cloneDeep(PieCommonConfig)
 
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)

From 1bd67a6ea7a9a2b62660fabbd00de04b2b974ccb 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, 12 Nov 2022 16:10:14 +0800
Subject: [PATCH 2/8] =?UTF-8?q?chore:=20=E8=BD=AC=E7=A7=BBmaster-fetch?=
 =?UTF-8?q?=E5=88=86=E6=94=AF=E8=8E=B7=E5=8F=96id=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E5=88=B0dev=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/router.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/utils/router.ts b/src/utils/router.ts
index f2bf6142..f2a9c696 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -153,6 +153,19 @@ export const fetchRouteParams = () => {
   }
 }
 
+/**
+ * * 通过硬解析获取当前路由下的参数
+ * @returns object
+ */
+ export const fetchRouteParamsLocation = () => {
+  try {
+    return document.location.hash.split('/').pop() || ''
+  } catch (error) {
+    window['$message'].warning('查询路由信息失败，请联系管理员！')
+    return ''
+  }
+}
+
 /**
  * * 回到主页面
  * @param confirm

From 2f2d87826cb9fa25289ceedde5e4ee4c95a5e734 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, 12 Nov 2022 16:16:03 +0800
Subject: [PATCH 3/8] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96id=20=E7=9A=84=E6=97=A7=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/components/EditTools/index.vue | 5 ++---
 src/views/chart/ContentHeader/headerTitle/index.vue        | 6 ++----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index 9c5627ea..4bb39d79 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -66,7 +66,7 @@ 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 { fetchRouteParamsLocation, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
 import { editToJsonInterval } from '@/settings/designSetting'
 import { EditEnum, ChartEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
@@ -143,8 +143,7 @@ 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]
+    const id = fetchRouteParamsLocation()
     updateToSession(id)
     routerTurnByPath(path, [id], undefined, true)
   }, 1000)
diff --git a/src/views/chart/ContentHeader/headerTitle/index.vue b/src/views/chart/ContentHeader/headerTitle/index.vue
index 5ac70dc8..6d0d4eae 100644
--- a/src/views/chart/ContentHeader/headerTitle/index.vue
+++ b/src/views/chart/ContentHeader/headerTitle/index.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { ref, nextTick, computed } from 'vue'
-import { fetchRouteParams } from '@/utils'
+import { fetchRouteParamsLocation } from '@/utils'
 import { icon } from '@/plugins'
 const { FishIcon } = icon.ionicons5
 
@@ -39,9 +39,7 @@ const inputInstRef = ref(null)
 
 // 根据路由 id 参数获取项目信息
 const fetchProhectInfoById = () => {
-  const routeParamsRes = fetchRouteParams()
-  if (!routeParamsRes) return
-  const { id } = routeParamsRes
+  const id = fetchRouteParamsLocation()
   if (id.length) {
     return id[0]
   }

From 38fb7b381a7dfce8f0a9758f1b8eb59c83536800 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, 12 Nov 2022 17:20:11 +0800
Subject: [PATCH 4/8] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9json=E7=9A=84=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EditTools/hooks/useSyncUpdate.hook.ts     | 61 +++++++++++++++++++
 .../components/EditTools/index.vue            | 56 ++---------------
 2 files changed, 66 insertions(+), 51 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts

diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
new file mode 100644
index 00000000..73ea2eee
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
@@ -0,0 +1,61 @@
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useSync } from '@/views/chart/hooks/useSync.hook'
+import { ChartEnum } from '@/enums/pageEnum'
+import { SavePageEnum } from '@/enums/editPageEnum'
+import { editToJsonInterval } from '@/settings/designSetting'
+
+const { updateComponent } = useSync()
+const chartEditStore = useChartEditStore()
+ 
+// 侦听器更新
+const useSyncUpdateHandle = () => {
+  const routerParamsInfo = useRoute()
+  // 定义侦听器变量
+  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()
+    }, editToJsonInterval)
+    // 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
+}
+
+export const useSyncUpdate = () => {
+  const routerParamsInfo = useRoute()
+  watch(() => routerParamsInfo.name, useSyncUpdateHandle(), { immediate: true })
+}
\ No newline at end of file
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index 4bb39d79..f2d2d97d 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -62,20 +62,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h, watch } from 'vue'
+import { ref, computed } 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 { fetchRouteParamsLocation, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
-import { editToJsonInterval } from '@/settings/designSetting'
-import { EditEnum, ChartEnum } from '@/enums/pageEnum'
+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 { useSyncUpdate } from './hooks/useSyncUpdate.hook'
 import { BtnListType, TypeEnum } from './index.d'
 import { icon } from '@/plugins'
 
@@ -83,7 +81,8 @@ const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon, CreateIcon } = icon
 const settingStore = useSettingStore()
 const chartEditStore = useChartEditStore()
 const routerParamsInfo = useRoute()
-const { updateComponent } = useSync()
+// 初始化编辑 JSON 模块
+useSyncUpdate()
 
 // 鼠标悬停定时器
 let mouseTime: any = null
@@ -169,51 +168,6 @@ const updateToSession = (id: string) => {
   }
 }
 
-// 侦听器更新
-const 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()
-    }, editToJsonInterval)
-    // 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 })
 
 // 配置列表
 const btnList: BtnListType[] = [

From ae75d9b5e61d1f5543d6932ef7b7dd0a35499316 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, 12 Nov 2022 21:49:04 +0800
Subject: [PATCH 5/8] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useLifeHandler.hook.ts              | 10 +--
 src/packages/index.d.ts                       | 27 ++++++--
 src/packages/public/publicConfig.ts           | 22 ++++++-
 .../modules/chartEditStore/chartEditStore.ts  |  2 +-
 .../components/CanvasPage/index.vue           |  4 +-
 .../ChartEventMonacoEditor/index.vue          | 26 ++++----
 .../EditTools/hooks/useFile.hooks.ts          |  2 +
 .../components/EditTools/index.vue            |  2 +-
 src/views/chart/hooks/useSync.hook.ts         | 61 ++++++++++++++++---
 9 files changed, 118 insertions(+), 38 deletions(-)

diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts
index aa0d557b..1c805806 100644
--- a/src/hooks/useLifeHandler.hook.ts
+++ b/src/hooks/useLifeHandler.hook.ts
@@ -8,17 +8,17 @@ const components: { [K in string]?: any } = {}
 export const npmPkgs = { echarts }
 
 export const useLifeHandler = (chartConfig: CreateComponentType) => {
-  const events = chartConfig.events || {}
+  const events = chartConfig.events.advancedEvents || {}
   // 生成生命周期事件
   const lifeEvents = {
-    [EventLife.BEFORE_MOUNT](e: any) {
+    [EventLife.VNODE_BEFORE_MOUNT](e: any) {
       // 存储组件
       components[chartConfig.id] = e.component
-      const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim()
+      const fnStr = (events[EventLife.VNODE_BEFORE_MOUNT] || '').trim()
       generateFunc(fnStr, e)
     },
-    [EventLife.MOUNTED](e: any) {
-      const fnStr = (events[EventLife.MOUNTED] || '').trim()
+    [EventLife.VNODE_MOUNTED](e: any) {
+      const fnStr = (events[EventLife.VNODE_MOUNTED] || '').trim()
       generateFunc(fnStr, e)
     }
   }
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 94e90c91..283d9dd8 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -90,12 +90,24 @@ export const BlendModeEnumList = [
   { label: '亮度', value: 'luminosity' }
 ]
 
+// 基础事件类型
+export enum BaseEvent {
+  // 点击
+  ON_CLICK = 'onClick',
+  // 双击
+  ON_DBL_CLICK = 'onDblClick',
+  // 移入
+  ON_MOUSE_ENTER = 'onMouseenter',
+  // 移出
+  ON_MOUSE_LEAVE = 'onMouseleave',
+}
+
 // vue3 生命周期事件
-export enum EventLife {
+export enum EventLife { 
   // 渲染之后
-  MOUNTED = 'vnodeMounted',
+  VNODE_MOUNTED = 'vnodeMounted',
   // 渲染之前
-  BEFORE_MOUNT = 'vnodeBeforeMount',
+  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
 }
 
 // 组件实例类
@@ -123,8 +135,13 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
-  events?: {
-    [K in EventLife]?: string
+  events: {
+    baseEvent: {
+      [K in BaseEvent]?: string
+    },
+    advancedEvents: {
+      [K in EventLife]?: string
+    }
   }
 }
 
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index ca20e464..ab85be64 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -1,5 +1,4 @@
 import { getUUID } from '@/utils'
-import { ChartFrameEnum, PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { groupTitle } from '@/settings/designSetting'
 import {
@@ -9,6 +8,14 @@ import {
   RequestContentTypeEnum,
   RequestBodyEnum
 } from '@/enums/httpEnum'
+import {
+  BaseEvent,
+  EventLife,
+  ChartFrameEnum,
+  PublicConfigType,
+  CreateComponentType,
+  CreateComponentGroupType
+} from '@/packages/index.d'
 import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 
@@ -82,7 +89,18 @@ export class PublicConfigClass implements PublicConfigType {
   // 数据过滤
   public filter = undefined
   // 事件
-  public events = undefined
+  public events = {
+    baseEvent: {
+      [BaseEvent.ON_CLICK]: undefined,
+      [BaseEvent.ON_DBL_CLICK]: undefined,
+      [BaseEvent.ON_MOUSE_ENTER]: undefined,
+      [BaseEvent.ON_MOUSE_LEAVE]: undefined
+    },
+    advancedEvents: {
+      [EventLife.VNODE_MOUNTED]: undefined,
+      [EventLife.VNODE_BEFORE_MOUNT]: undefined
+    }
+  }
 }
 
 // 多选成组类
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index ea1759a7..d6f8ddf3 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -108,7 +108,7 @@ export const useChartEditStore = defineStore({
       chartThemeColor: defaultTheme || 'dark',
       // 全局配置
       chartThemeSetting: globalThemeJson,
-      // 预览方式
+      // 适配方式
       previewScaleType: previewScaleType
     },
     // 数据请求处理（需存储给后端）
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
index 5d4bcc23..f024a4c2 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@@ -75,7 +75,7 @@
         </n-button>
       </n-space>
       <n-space>
-        <n-text>预览方式</n-text>
+        <n-text>适配方式</n-text>
         <n-button-group>
           <n-button
             v-for="item in previewTypeList"
@@ -279,7 +279,7 @@ const customRequest = (options: UploadCustomRequestOptions) => {
   })
 }
 
-// 选择预览方式
+// 选择适配方式
 const selectPreviewType = (key: PreviewScaleEnum) => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key)
 }
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
index 1865164d..8b14ce1c 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
@@ -16,7 +16,7 @@
         <p>
           <span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
         </p>
-        <p class="go-ml-4"><n-code :code="(targetData.events || {})[eventName]" language="typescript"></n-code></p>
+        <p class="go-ml-4"><n-code :code="(targetData.events.advancedEvents || {})[eventName]" language="typescript"></n-code></p>
         <p>}<span>,</span></p>
       </div>
     </n-card>
@@ -50,7 +50,7 @@
                 <span class="func-keyNameWord">{{ eventName }}(e, components, echarts, node_modules)&nbsp;&nbsp;{</span>
               </p>
               <!-- 编辑主体 -->
-              <monaco-editor v-model:modelValue="events[eventName]" height="480px" language="javascript" />
+              <monaco-editor v-model:modelValue="advancedEvents[eventName]" height="480px" language="javascript" />
               <!-- 函数结束 -->
               <p class="go-pl-3 func-keyNameWord">}</p>
             </n-tab-pane>
@@ -166,21 +166,21 @@ const { targetData, chartEditStore } = useTargetData()
 const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
 
 const EventLifeName = {
-  [EventLife.BEFORE_MOUNT]: '渲染之前',
-  [EventLife.MOUNTED]: '渲染之后'
+  [EventLife.VNODE_BEFORE_MOUNT]: '渲染之前',
+  [EventLife.VNODE_MOUNTED]: '渲染之后'
 }
 
 const EventLifeTip = {
-  [EventLife.BEFORE_MOUNT]: '此时组件 DOM 还未存在',
-  [EventLife.MOUNTED]: '此时组件 DOM 已经存在'
+  [EventLife.VNODE_BEFORE_MOUNT]: '此时组件 DOM 还未存在',
+  [EventLife.VNODE_MOUNTED]: '此时组件 DOM 已经存在'
 }
 
 // 受控弹窗
 const showModal = ref(false)
 // 编辑区域控制
-const editTab = ref(EventLife.MOUNTED)
+const editTab = ref(EventLife.VNODE_MOUNTED)
 // events 函数模板
-let events = ref({ ...targetData.value.events })
+let advancedEvents = ref({ ...targetData.value.events.advancedEvents })
 // 事件错误标识
 const errorFlag = ref(false)
 
@@ -190,7 +190,7 @@ const validEvents = () => {
   let message = ''
   let name = ''
 
-  errorFlag.value = Object.entries(events.value).every(([eventName, str]) => {
+  errorFlag.value = Object.entries(advancedEvents.value).every(([eventName, str]) => {
     try {
       // 支持await，验证语法
       const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
@@ -221,11 +221,11 @@ const saveEvents = () => {
     window['$message'].error('事件函数错误，无法进行保存')
     return
   }
-  if (Object.values(events.value).join('').trim() === '') {
+  if (Object.values(advancedEvents.value).join('').trim() === '') {
     // 清空事件
-    targetData.value.events = undefined
+    targetData.value.events.advancedEvents = undefined
   } else {
-    targetData.value.events = { ...events.value }
+    targetData.value.events.advancedEvents = { ...advancedEvents.value }
   }
   closeEvents()
 }
@@ -234,7 +234,7 @@ watch(
   () => showModal.value,
   (newData: boolean) => {
     if (newData) {
-      events.value = { ...targetData.value.events }
+      advancedEvents.value = { ...targetData.value.events.advancedEvents }
     }
   }
 )
diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
index 1d814987..587b9fe4 100644
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
@@ -38,6 +38,7 @@ export const useFile = () => {
                 await updateComponent(fileData, false, true)
                 window['$message'].success('导入成功！')
               } catch (error) {
+                console.log(error)
                 window['$message'].error('组件导入失败，请检查文件完整性!')
               }
             },
@@ -48,6 +49,7 @@ export const useFile = () => {
                 await updateComponent(fileData, true, true)
                 window['$message'].success('导入成功！')
               } catch (error) {
+                console.log(error)
                 window['$message'].error('组件导入失败，请检查文件完整性!')
               }
             }
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index f2d2d97d..ce4eb16b 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -187,7 +187,7 @@ const btnList: BtnListType[] = [
   {
     key: 'edit',
     type: TypeEnum.BUTTON,
-    name: '编辑JSON',
+    name: '编辑',
     icon: CreateIcon,
     handle: editHandle
   },
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index 9dd410a9..3d5f1d71 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -3,28 +3,68 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
-import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 import merge from 'lodash/merge'
 
 /**
- * 合并处理
- * @param object 模板数据
+ * * 画布-版本升级对旧数据无法兼容的补丁
+ * @param object
+ */
+const canvasVersionUpdatePolyfill = (object: any) => {
+  return object
+}
+
+/**
+ * * 组件-版本升级对旧数据无法兼容的补丁
+ * @param newObject
+ * @param sources
+ */
+const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
+  try {
+    // 判断是否是组件
+    if (sources.id) {
+      // 处理事件补丁
+      const hasVnodeBeforeMount = 'vnodeBeforeMount' in sources.events
+      const hasVnodeMounted = 'vnodeMounted' in sources.events
+
+      if (hasVnodeBeforeMount) {
+        newObject.events.advancedEvents.vnodeBeforeMount = sources?.events.vnodeBeforeMount
+      }
+      if (hasVnodeMounted) {
+        newObject.events.advancedEvents.vnodeMounted = sources?.events.vnodeMounted
+      }
+      if (hasVnodeBeforeMount || hasVnodeMounted) {
+        sources.events = undefined
+      }
+      return newObject
+    }
+  } catch (error) {
+    return newObject
+  }
+}
+
+/**
+ * * 合并处理
+ * @param newObject 新的模板数据
  * @param sources 新拿到的数据
  * @returns object
  */
-const componentMerge = (object: any, sources: any, notComponent = false) => {
+const componentMerge = (newObject: any, sources: any, notComponent = false) => {
+  // 处理组件补丁
+  componentVersionUpdatePolyfill(newObject, sources)
+
   // 非组件不处理
-  if (notComponent) return merge(object, sources)
-  // 组件排除 options
+  if (notComponent) return merge(newObject, sources)
+  // 组件排除 newObject
   const option = sources.option
-  if (!option) return merge(object, sources)
+  if (!option) return merge(newObject, sources)
 
   // 为 undefined 的 sources 来源对象属性将被跳过详见 https://www.lodashjs.com/docs/lodash.merge
   sources.option = undefined
   if (option) {
     return {
-      ...merge(object, sources),
+      ...merge(newObject, sources),
       option: option
     }
   }
@@ -49,6 +89,9 @@ export const useSync = () => {
       chartHistoryStore.clearBackStack()
       chartHistoryStore.clearForwardStack()
     }
+    // 画布补丁处理
+    projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
+
     // 列表组件注册
     projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
       const intComponent = (target: CreateComponentType) => {
@@ -119,7 +162,7 @@ export const useSync = () => {
             // 分组插入到列表
             chartEditStore.addComponentList(groupClass, false, true)
           } else {
-            await  create(comItem as CreateComponentType)
+            await create(comItem as CreateComponentType)
           }
         }
       } else {

From be50eb99bf6cb502ae181fb4cc7faf9574c24636 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, 12 Nov 2022 22:03:51 +0800
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartEvent/components/ChartEventMonacoEditor/index.vue   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
index 8b14ce1c..ab8f97b8 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
@@ -223,7 +223,10 @@ const saveEvents = () => {
   }
   if (Object.values(advancedEvents.value).join('').trim() === '') {
     // 清空事件
-    targetData.value.events.advancedEvents = undefined
+    targetData.value.events.advancedEvents = {
+      vnodeBeforeMount: undefined,
+      vnodeMounted: undefined,
+    }
   } else {
     targetData.value.events.advancedEvents = { ...advancedEvents.value }
   }

From d16bc0f1577200d0eefccdfce06e2ccb44afb91a 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, 12 Nov 2022 23:03:13 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../importTemplate.ts                         |   0
 .../ChartEventAdvancedHandle/index.ts         |   3 +
 .../index.vue                                 |  50 +---
 .../components/ChartEventBaseHandle/index.ts  |   3 +
 .../components/ChartEventBaseHandle/index.vue | 214 ++++++++++++++++++
 .../ChartEventMonacoEditor/index.ts           |   3 -
 .../ChartEvent/components/index.scss          |  51 +++++
 .../components/ChartEvent/index.vue           |  13 +-
 8 files changed, 281 insertions(+), 56 deletions(-)
 rename src/views/chart/ContentConfigurations/components/ChartEvent/components/{ChartEventMonacoEditor => ChartEventAdvancedHandle}/importTemplate.ts (100%)
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts
 rename src/views/chart/ContentConfigurations/components/ChartEvent/components/{ChartEventMonacoEditor => ChartEventAdvancedHandle}/index.vue (92%)
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
 delete mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss

diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/importTemplate.ts
similarity index 100%
rename from src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts
rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/importTemplate.ts
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts
new file mode 100644
index 00000000..32daaf60
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts
@@ -0,0 +1,3 @@
+import  ChartEventAdvancedHandle from './index.vue'
+
+export { ChartEventAdvancedHandle }
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
similarity index 92%
rename from src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
index ab8f97b8..d91e67e4 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
@@ -10,10 +10,12 @@
         编辑
       </n-button>
     </template>
-    <n-card>
+    <n-card class="collapse-show-box">
       <!-- 函数体 -->
       <div v-for="eventName in EventLife" :key="eventName">
         <p>
+          <span class="func-annotate">// {{ EventLifeName[eventName] }}</span>
+          <br />
           <span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
         </p>
         <p class="go-ml-4"><n-code :code="(targetData.events.advancedEvents || {})[eventName]" language="typescript"></n-code></p>
@@ -30,7 +32,9 @@
           <n-text>高级事件编辑器（配合源码使用）</n-text>
         </n-space>
       </template>
+
       <template #header-extra> </template>
+
       <n-layout has-sider sider-placement="right">
         <n-layout style="height: 580px; padding-right: 20px">
           <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
@@ -158,9 +162,7 @@ import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { templateList } from './importTemplate'
 import { npmPkgs } from '@/hooks'
 import { icon } from '@/plugins'
-import { goDialog, toString } from '@/utils'
 import { CreateComponentType, EventLife } from '@/packages/index.d'
-import { Script } from 'vm'
 
 const { targetData, chartEditStore } = useTargetData()
 const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
@@ -244,45 +246,5 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-/* 外层也要使用 */
-.func-keyword {
-  color: #b478cf;
-}
-
-@include go('chart-data-monaco-editor') {
-  .func-keyNameWord {
-    color: #70c0e8;
-  }
-  .tab-tip {
-    font-size: 12px;
-  }
-  &.n-card.n-modal,
-  .n-card {
-    @extend .go-background-filter;
-  }
-}
-@include deep() {
-  .n-layout,
-  .n-layout-sider {
-    background-color: transparent;
-  }
-  .go-editor-area {
-    max-height: 530px;
-  }
-  .checkbox--hidden:checked {
-    & + label {
-      .n-icon {
-        transition: all 0.3s;
-        transform: rotate(180deg);
-      }
-    }
-    & ~ .go-editor-area {
-      display: none;
-    }
-  }
-  // 优化代码换行
-  .n-code > pre {
-    white-space: break-spaces;
-  }
-}
+@import '../index.scss';
 </style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts
new file mode 100644
index 00000000..d45f2f12
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts
@@ -0,0 +1,3 @@
+import  ChartEventBaseHandle from './index.vue'
+
+export { ChartEventBaseHandle }
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
new file mode 100644
index 00000000..bfe0157f
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
@@ -0,0 +1,214 @@
+<template>
+  <n-collapse-item title="基础事件配置" name="1">
+    <template #header-extra>
+      <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
+        <template #icon>
+          <n-icon>
+            <pencil-icon />
+          </n-icon>
+        </template>
+        编辑
+      </n-button>
+    </template>
+    <n-card class="collapse-show-box">
+      <!-- 函数体 -->
+      <div v-for="eventName in BaseEvent" :key="eventName">
+        <p>
+          <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
+          <br />
+          <span class="func-keyword">async {{ eventName }}</span> (mouseEvent, components) {
+        </p>
+        <p class="go-ml-4">
+          <n-code :code="(targetData.events.baseEvent || {})[eventName]" language="typescript"></n-code>
+        </p>
+        <p>}<span>,</span></p>
+      </div>
+    </n-card>
+  </n-collapse-item>
+
+  <!-- 弹窗 -->
+  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
+      <template #header>
+        <n-space>
+          <n-text>基础事件编辑器</n-text>
+        </n-space>
+      </template>
+
+      <template #header-extra> </template>
+      <n-layout has-sider sider-placement="right">
+        <n-layout style="height: 580px; padding-right: 20px">
+          <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
+            <n-tab-pane
+              v-for="(eventName, index) in BaseEvent"
+              :key="index"
+              :tab="`${EventTypeName[eventName]}-${eventName}`"
+              :name="eventName"
+            >
+              <!-- 函数名称 -->
+              <p class="go-pl-3">
+                <span class="func-keyword">async function &nbsp;&nbsp;</span>
+                <span class="func-keyNameWord">{{ eventName }}(mouseEvent, components)&nbsp;&nbsp;{</span>
+              </p>
+              <!-- 编辑主体 -->
+              <monaco-editor v-model:modelValue="baseEvent[eventName]" height="480px" language="javascript" />
+              <!-- 函数结束 -->
+              <p class="go-pl-3 func-keyNameWord">}</p>
+            </n-tab-pane>
+          </n-tabs>
+        </n-layout>
+        <n-layout-sider
+          :collapsed-width="14"
+          :width="340"
+          show-trigger="bar"
+          collapse-mode="transform"
+          content-style="padding: 12px 12px 0px 12px;margin-left: 3px;"
+        >
+          <n-tabs default-value="1" justify-content="space-evenly" type="segment">
+            <!-- 验证结果 -->
+            <n-tab-pane tab="验证结果" name="1" size="small">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3]">
+                  <template v-for="error in [validEvents()]" :key="error">
+                    <n-collapse-item title="错误函数" :name="1">
+                      <n-text depth="3">{{ error.errorFn || '暂无' }}</n-text>
+                    </n-collapse-item>
+                    <n-collapse-item title="错误信息" :name="2">
+                      <n-text depth="3">{{ error.name || '暂无' }}</n-text>
+                    </n-collapse-item>
+                    <n-collapse-item title="堆栈信息" :name="3">
+                      <n-text depth="3">{{ error.message || '暂无' }}</n-text>
+                    </n-collapse-item>
+                  </template>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+            <!-- 辅助说明 -->
+            <n-tab-pane tab="变量说明" name="2">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2]">
+                  <n-collapse-item title="mouseEvent" :name="1">
+                    <n-text depth="3">事件对象</n-text>
+                  </n-collapse-item>
+                  <n-collapse-item title="components" :name="2">
+                    <n-text depth="3">当前图表组件实例</n-text>
+                  </n-collapse-item>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+          </n-tabs>
+        </n-layout-sider>
+      </n-layout>
+
+      <template #action>
+        <n-space justify="space-between">
+          <div class="go-flex-items-center">
+            <n-tag :bordered="false" type="primary">
+              <template #icon>
+                <n-icon :component="DocumentTextIcon" />
+              </template>
+              提示
+            </n-tag>
+            <n-text class="go-ml-2" depth="2">编写方式同正常 JavaScript 写法</n-text>
+          </div>
+
+          <n-space>
+            <n-button size="medium" @click="closeEvents">取消</n-button>
+            <n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
+          </n-space>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, toRefs, toRaw } from 'vue'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { CreateComponentType, BaseEvent } from '@/packages/index.d'
+import { icon } from '@/plugins'
+
+const { targetData, chartEditStore } = useTargetData()
+const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
+
+const EventTypeName = {
+  [BaseEvent.ON_CLICK]: '单击',
+  [BaseEvent.ON_DBL_CLICK]: '双击',
+  [BaseEvent.ON_MOUSE_ENTER]: '鼠标进入',
+  [BaseEvent.ON_MOUSE_LEAVE]: '鼠标移出'
+}
+
+// 受控弹窗
+const showModal = ref(false)
+// 编辑区域控制
+const editTab = ref(BaseEvent.ON_CLICK)
+// events 函数模板
+let baseEvent = ref({ ...targetData.value.events.baseEvent })
+// 事件错误标识
+const errorFlag = ref(false)
+
+// 验证语法
+const validEvents = () => {
+  let errorFn = ''
+  let message = ''
+  let name = ''
+
+  errorFlag.value = Object.entries(baseEvent.value).every(([eventName, str]) => {
+    try {
+      // 支持await，验证语法
+      const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
+      new AsyncFunction(str)
+      return true
+    } catch (error: any) {
+      message = error.message
+      name = error.name
+      errorFn = eventName
+      return false
+    }
+  })
+  return {
+    errorFn,
+    message,
+    name
+  }
+}
+
+// 关闭事件
+const closeEvents = () => {
+  showModal.value = false
+}
+
+// 新增事件
+const saveEvents = () => {
+  if (validEvents().errorFn) {
+    window['$message'].error('事件函数错误，无法进行保存')
+    return
+  }
+  if (Object.values(baseEvent.value).join('').trim() === '') {
+    // 清空事件
+    targetData.value.events.baseEvent = {
+      onClick: undefined,
+      onDblClick: undefined,
+      onMouseenter: undefined,
+      onMouseleave: undefined,
+    }
+  } else {
+    targetData.value.events.baseEvent = { ...baseEvent.value }
+  }
+  closeEvents()
+}
+
+watch(
+  () => showModal.value,
+  (newData: boolean) => {
+    if (newData) {
+      baseEvent.value = { ...targetData.value.events.baseEvent }
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@import '../index.scss';
+</style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts
deleted file mode 100644
index b6d23e30..00000000
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import  ChartEventMonacoEditor from './index.vue'
-
-export { ChartEventMonacoEditor }
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss b/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss
new file mode 100644
index 00000000..8cd67cf8
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss
@@ -0,0 +1,51 @@
+/* 外层也要使用 */
+.func-keyword {
+  color: #b478cf;
+}
+
+.func-annotate {
+  color: #70c0e8;
+}
+
+@include go('chart-data-monaco-editor') {
+  .func-keyNameWord {
+    color: #70c0e8;
+  }
+  .tab-tip {
+    font-size: 12px;
+  }
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+}
+@include deep() {
+  .n-layout,
+  .n-layout-sider {
+    background-color: transparent;
+  }
+  .collapse-show-box {
+    .n-card__content {
+      padding-left: 20px;
+      padding-right: 10px;
+    }
+  }
+  .go-editor-area {
+    max-height: 530px;
+  }
+  .checkbox--hidden:checked {
+    & + label {
+      .n-icon {
+        transition: all 0.3s;
+        transform: rotate(180deg);
+      }
+    }
+    & ~ .go-editor-area {
+      display: none;
+    }
+  }
+  // 优化代码换行
+  .n-code > pre {
+    white-space: break-spaces;
+  }
+}
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
index a5335f5e..05e5ce4d 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
@@ -5,20 +5,15 @@
       组件 id：
       <n-text>{{ targetData.id }}</n-text>
     </n-text>
-    <n-collapse-item title="基础事件配置" name="1">
-      <div class="go-event">
-        <n-text depth="3">【单击、双击、移入、移出】在开发中，即将上线！</n-text>
-        <br/>
-        <n-text depth="3">（备注：高级事件模块可自行实现上述功能）</n-text>
-      </div>
-    </n-collapse-item>
-    <chart-event-monaco-editor></chart-event-monaco-editor>
+    <chart-event-base-handle></chart-event-base-handle>
+    <chart-event-advanced-handle></chart-event-advanced-handle>
   </n-collapse>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ChartEventMonacoEditor } from './components/ChartEventMonacoEditor'
+import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
+import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
 import { useTargetData } from '../hooks/useTargetData.hook'
 
 const { targetData } = useTargetData()

From 3308a7abbbae84eeb52b11930a1c0abc5b299790 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: Sun, 13 Nov 2022 02:36:04 +0800
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E4=BA=8B=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useLifeHandler.hook.ts              | 39 ++++++++++++++++---
 src/packages/index.d.ts                       | 10 ++---
 .../ChartEventAdvancedHandle/index.vue        |  4 +-
 .../components/ChartEventBaseHandle/index.vue | 21 +++++-----
 .../components/PreviewRenderGroup/index.vue   |  2 +
 .../components/PreviewRenderList/index.vue    |  2 +
 6 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts
index 1c805806..fde94eef 100644
--- a/src/hooks/useLifeHandler.hook.ts
+++ b/src/hooks/useLifeHandler.hook.ts
@@ -1,4 +1,4 @@
-import { CreateComponentType, EventLife } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d'
 import * as echarts from 'echarts'
 
 // 所有图表组件集合对象
@@ -7,9 +7,20 @@ const components: { [K in string]?: any } = {}
 // 项目提供的npm 包变量
 export const npmPkgs = { echarts }
 
-export const useLifeHandler = (chartConfig: CreateComponentType) => {
-  const events = chartConfig.events.advancedEvents || {}
+// 组件事件处理 hook
+export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponentGroupType) => {
+  // 处理基础事件
+  const baseEvent: { [key: string]: any } = {}
+  for (const key in chartConfig.events.baseEvent) {
+    const fnStr: string | undefined = (chartConfig.events.baseEvent as any)[key]
+    // 动态绑定基础事件
+    if (fnStr) {
+      baseEvent[key] = generateBaseFunc(fnStr)
+    }
+  }
+
   // 生成生命周期事件
+  const events = chartConfig.events.advancedEvents || {}
   const lifeEvents = {
     [EventLife.VNODE_BEFORE_MOUNT](e: any) {
       // 存储组件
@@ -22,11 +33,29 @@ export const useLifeHandler = (chartConfig: CreateComponentType) => {
       generateFunc(fnStr, e)
     }
   }
-  return lifeEvents
+  return { ...baseEvent, ...lifeEvents }
 }
 
 /**
- *
+ * 生成基础函数
+ * @param fnStr 用户方法体代码
+ * @param event 鼠标事件
+ */
+ export function generateBaseFunc(fnStr: string) {
+  try {
+    return new Function(`
+      return (
+        async function(mouseEvent){
+          ${fnStr}
+        }
+      )`)()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+/**
+ * 生成高级函数
  * @param fnStr 用户方法体代码
  * @param e 执行生命周期的动态组件实例
  */
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 283d9dd8..fbdfa2f5 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -90,16 +90,16 @@ export const BlendModeEnumList = [
   { label: '亮度', value: 'luminosity' }
 ]
 
-// 基础事件类型
+// 基础事件类型(vue不加 on)
 export enum BaseEvent {
   // 点击
-  ON_CLICK = 'onClick',
+  ON_CLICK = 'click',
   // 双击
-  ON_DBL_CLICK = 'onDblClick',
+  ON_DBL_CLICK = 'dblclick',
   // 移入
-  ON_MOUSE_ENTER = 'onMouseenter',
+  ON_MOUSE_ENTER = 'mouseenter',
   // 移出
-  ON_MOUSE_LEAVE = 'onMouseleave',
+  ON_MOUSE_LEAVE = 'mouseleave',
 }
 
 // vue3 生命周期事件
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
index d91e67e4..fe89c656 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
@@ -40,7 +40,7 @@
           <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
             <!-- 提示 -->
             <template #suffix>
-              <n-text class="tab-tip" type="warning">tips: {{ EventLifeTip[editTab] }}</n-text>
+              <n-text class="tab-tip" type="warning">提示: {{ EventLifeTip[editTab] }}</n-text>
             </template>
             <n-tab-pane
               v-for="(eventName, index) in EventLife"
@@ -140,7 +140,7 @@
               <template #icon>
                 <n-icon :component="DocumentTextIcon" />
               </template>
-              提示
+              说明
             </n-tag>
             <n-text class="go-ml-2" depth="2">通过提供的参数可为图表增加定制化的tooltip、交互事件等等</n-text>
           </div>
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
index bfe0157f..90151736 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
@@ -39,6 +39,10 @@
       <n-layout has-sider sider-placement="right">
         <n-layout style="height: 580px; padding-right: 20px">
           <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
+            <!-- 提示 -->
+            <template #suffix>
+              <n-text class="tab-tip" type="warning">提示: ECharts 组件会拦截鼠标事件</n-text>
+            </template>
             <n-tab-pane
               v-for="(eventName, index) in BaseEvent"
               :key="index"
@@ -48,7 +52,7 @@
               <!-- 函数名称 -->
               <p class="go-pl-3">
                 <span class="func-keyword">async function &nbsp;&nbsp;</span>
-                <span class="func-keyNameWord">{{ eventName }}(mouseEvent, components)&nbsp;&nbsp;{</span>
+                <span class="func-keyNameWord">{{ eventName }}(mouseEvent)&nbsp;&nbsp;{</span>
               </p>
               <!-- 编辑主体 -->
               <monaco-editor v-model:modelValue="baseEvent[eventName]" height="480px" language="javascript" />
@@ -88,10 +92,7 @@
               <n-scrollbar trigger="none" style="max-height: 505px">
                 <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2]">
                   <n-collapse-item title="mouseEvent" :name="1">
-                    <n-text depth="3">事件对象</n-text>
-                  </n-collapse-item>
-                  <n-collapse-item title="components" :name="2">
-                    <n-text depth="3">当前图表组件实例</n-text>
+                    <n-text depth="3">鼠标事件对象</n-text>
                   </n-collapse-item>
                 </n-collapse>
               </n-scrollbar>
@@ -107,7 +108,7 @@
               <template #icon>
                 <n-icon :component="DocumentTextIcon" />
               </template>
-              提示
+              说明
             </n-tag>
             <n-text class="go-ml-2" depth="2">编写方式同正常 JavaScript 写法</n-text>
           </div>
@@ -188,10 +189,10 @@ const saveEvents = () => {
   if (Object.values(baseEvent.value).join('').trim() === '') {
     // 清空事件
     targetData.value.events.baseEvent = {
-      onClick: undefined,
-      onDblClick: undefined,
-      onMouseenter: undefined,
-      onMouseleave: undefined,
+      [BaseEvent.ON_CLICK]: undefined,
+      [BaseEvent.ON_DBL_CLICK]: undefined,
+      [BaseEvent.ON_MOUSE_ENTER]: undefined,
+      [BaseEvent.ON_MOUSE_LEAVE]: undefined
     }
   } else {
     targetData.value.events.baseEvent = { ...baseEvent.value }
diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
index 422fd441..cc149e88 100644
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@@ -14,6 +14,7 @@
   >
     <component
       :is="item.chartConfig.chartKey"
+      :id="item.id"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
@@ -29,6 +30,7 @@ import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
+
 const props = defineProps({
   groupData: {
     type: Object as PropType<CreateComponentGroupType>,
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index af55e9c1..9bb0cbec 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -25,6 +25,7 @@
     <component
       v-else
       :is="item.chartConfig.chartKey"
+      :id="item.id"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
@@ -43,6 +44,7 @@ import { chartColors } from '@/settings/chartThemes/index'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
+
 const props = defineProps({
   localStorageInfo: {
     type: Object as PropType<ChartEditStorageType>,