perf: 优化 JSON 序列化无法处理函数的问题

src/utils/utils.ts

@@ -291,3 +291,37 @@ export const setKeyboardDressShow = (keyCode?: number) => {
   }
 }
 
+/**
+ * * JSON序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONStringify = (data: object) => {
+  return JSON.stringify(
+    data,
+    (key, val) => {
+      // 处理函数丢失问题
+      if (typeof val === 'function') {
+        return `${val}`
+      }
+      // 处理 undefined 丢失问题
+      if (typeof val === 'undefined') {
+        return 'undefined'
+      }
+      return val
+    },
+    2
+  )
+}
+
+/**
+ * * JSON反序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONParse = (data: string) => {
+  return JSON.parse(data, (k, v) => {
+    if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
+      return eval(`(function(){return ${v}})()`)
+    }
+    return v
+  })
+}

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -41,12 +41,13 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
+import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import omit from 'lodash/omit'
+
 const chartEditStore = useChartEditStore()
 
 defineProps({
@@ -70,7 +71,7 @@ const dragStartHandle = (e: DragEvent, item: ConfigType) => {
   componentInstall(item.chartKey, fetchChartComponent(item))
   componentInstall(item.conKey, fetchConfigComponent(item))
   // 将配置项绑定到拖拽属性上
-  e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSON.stringify(omit(item, ['image'])))
+  e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])))
   // 修改状态
   chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
 }

src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts

@@ -1,7 +1,7 @@
 import { ref, toRef, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { readFile, downloadTextFile } from '@/utils'
+import { readFile, downloadTextFile, JSONStringify, JSONParse } from '@/utils'
 
 export const useFile = (targetData: any) => {
   const uploadFileListRef = ref()
@@ -23,7 +23,7 @@ export const useFile = (targetData: any) => {
     nextTick(() => {
       if (file.file) {
         readFile(file.file).then((fileData: any) => {
-          targetData.value.option.dataset = JSON.parse(fileData)
+          targetData.value.option.dataset = JSONParse(fileData)
         })
       } else {
         window['$message'].error('导入数据失败，请稍后重试或联系管理员！')
@@ -35,7 +35,7 @@ export const useFile = (targetData: any) => {
   const download = () => {
     try {
       window['$message'].success('下载中，请耐心等待...')
-      downloadTextFile(JSON.stringify(targetData.value.option.dataset), undefined, 'json')
+      downloadTextFile(JSONStringify(targetData.value.option.dataset), undefined, 'json')
     } catch (error) {
       window['$message'].error('下载失败，数据错误！')
     }

src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts

@@ -1,7 +1,7 @@
 import { ref, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { readFile, goDialog } from '@/utils'
+import { readFile, goDialog, JSONParse } from '@/utils'
 import { useSync } from '@/views/chart/hooks/useSync.hook'
 
 export const useFile = () => {
@@ -34,7 +34,7 @@ export const useFile = () => {
             // 新增
             onPositiveCallback: async () => {
               try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                 await updateComponent(fileData, false, true)
                 window['$message'].success('导入成功！')
               } catch (error) {
@@ -45,7 +45,7 @@ export const useFile = () => {
             // 覆盖
             onNegativeCallback: async () => {
               try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                 await updateComponent(fileData, true, true)
                 window['$message'].success('导入成功！')
               } catch (error) {

src/views/chart/ContentEdit/components/EditTools/utils/index.ts

@@ -1,5 +1,5 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { canvasCut, downloadTextFile } from '@/utils'
+import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
 const chartEditStore = useChartEditStore()
 
 // 导出
@@ -9,9 +9,7 @@ export const exportHandle = () => {
 
   // 导出数据
   downloadTextFile(
-    JSON.stringify(chartEditStore.getStorageInfo || [], (k, v) => {
+    JSONStringify(chartEditStore.getStorageInfo || []),
-      return v === undefined ? null : v
-    }),
     undefined,
     'json'
   )

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -6,7 +6,7 @@ import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { loadingStart, loadingFinish, loadingError, setComponentPosition } from '@/utils'
+import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils'
 import { throttle, cloneDeep } from 'lodash'
 
 const chartEditStore = useChartEditStore()
@@ -28,7 +28,7 @@ export const dragHandle = async (e: DragEvent) => {
 
     // 修改状态
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
-    const dropData: Exclude<ConfigType, ['image']> = JSON.parse(drayDataString)
+    const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
 
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)

src/views/edit/index.vue

@@ -38,7 +38,7 @@ 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 { setSessionStorage, JSONStringify, JSONParse } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
 
@@ -48,7 +48,7 @@ const content = ref('')
 // 从sessionStorage 获取数据
 async function getDataBySession() {
   const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
-  content.value = JSON.stringify(localStorageInfo, undefined, 2)
+  content.value = JSONStringify(localStorageInfo)
 }
 setTimeout(getDataBySession)
 
@@ -72,7 +72,7 @@ async function importJSON() {
 // 同步 [画布页失去焦点时同步数据到JSON页，JSON页Ctrl+S 时同步数据到画布页]
 window.opener.addEventListener(SavePageEnum.CHART, (e: any) => {
   setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [e.detail])
-  content.value = JSON.stringify(e.detail, undefined, 2)
+  content.value = JSONStringify(e.detail)
 })
 
 // 窗口失焦 + 保存 => 同步数据
@@ -90,7 +90,7 @@ async function updateSync() {
     return window['$message'].error('源窗口已关闭，视图同步失败')
   }
   try {
-    const detail = JSON.parse(content.value)
+    const detail = JSONParse(content.value)
     delete detail.id
     // 保持id不变
     window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))