From 5e0baa4923f805b2edd84073803da7f360c5d963 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: Mon, 9 Jan 2023 11:12:18 +0800 Subject: [PATCH 1/2] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E6=8F=90=E4=BE=9B=E7=9A=84=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/settings/designColorRecommend.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/settings/designColorRecommend.json b/src/settings/designColorRecommend.json index 79420979..51ba9739 100644 --- a/src/settings/designColorRecommend.json +++ b/src/settings/designColorRecommend.json @@ -6,6 +6,13 @@ "name": "碧空绿", "pinyin": "bikonlv" }, + { + "CMYK": [73, 17, 20, 1], + "RGB": [102, 169, 201], + "hex": "#66a9c9", + "name": "涧石蓝", + "pinyin": "jianshilan" + }, { "CMYK": [4, 13, 67, 0], "RGB": [248, 223, 114], @@ -19,12 +26,5 @@ "hex": "#3c7eff", "name": "深海蓝", "pinyin": "shenhailan" - }, - { - "CMYK": [59, 12, 19, 0], - "RGB": [138, 188, 209], - "hex": "#8abcd1", - "name": "秋波蓝", - "pinyin": "qiubolan" } ] From 462a613bd32aa4f0f3ee6c69d797888717bbf26d 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: Mon, 9 Jan 2023 11:25:03 +0800 Subject: [PATCH 2/2] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20JSON=20?= =?UTF-8?q?=E5=BA=8F=E5=88=97=E5=8C=96=E6=97=A0=E6=B3=95=E5=A4=84=E7=90=86?= =?UTF-8?q?=E5=87=BD=E6=95=B0=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/utils/utils.ts | 34 +++++++++++++++++++ .../components/ChartsItemBox/index.vue | 5 +-- .../ChartData/hooks/useFile.hooks.ts | 6 ++-- .../EditTools/hooks/useFile.hooks.ts | 6 ++-- .../components/EditTools/utils/index.ts | 6 ++-- .../chart/ContentEdit/hooks/useDrag.hook.ts | 4 +-- src/views/edit/index.vue | 8 ++--- 7 files changed, 51 insertions(+), 18 deletions(-) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 51b296ae..dea4b542 100644 --- a/src/utils/utils.ts +++ b/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 + }) +} diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index 655fe824..dbb9cda7 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/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) } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts b/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts index 42f38798..08258951 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts +++ b/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('下载失败，数据错误！') } 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 587b9fe4..d492cc80 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts +++ b/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) { diff --git a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts index 39876c08..39e7af13 100644 --- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts +++ b/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) => { - return v === undefined ? null : v - }), + JSONStringify(chartEditStore.getStorageInfo || []), undefined, 'json' ) diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index b87bdd5f..3aae5547 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/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 = JSON.parse(drayDataString) + const dropData: Exclude = JSONParse(drayDataString) // 创建新图表组件 let newComponent: CreateComponentType = await createComponent(dropData) diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue index 42d1e4ab..54186cda 100644 --- a/src/views/edit/index.vue +++ b/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 }))