From 31b5a6961b39dad7d0b98e1e7f43dded5c8a987c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=98=E6=BD=98?= <97274247@qq.com> Date: Sun, 13 Nov 2022 23:29:43 +0800 Subject: [PATCH 1/3] =?UTF-8?q?perf:=20=E6=B3=A8=E9=87=8A=E5=AE=9A?= =?UTF-8?q?=E6=97=B6=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/EditTools/hooks/useSyncUpdate.hook.ts | 12 ++++++------ .../chart/ContentEdit/components/EditTools/index.vue | 3 ++- 2 files changed, 8 insertions(+), 7 deletions(-) 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 73ea2eee..5abf212f 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts @@ -23,11 +23,11 @@ const useSyncUpdateHandle = () => { // 开启侦听 const use = () => { - // 1、定时同步数据 - timer = setInterval(() => { - // 窗口激活并且处于工作台 - document.hasFocus() && syncData() - }, editToJsonInterval) + // // 1、定时同步数据 + // timer = setInterval(() => { + // // 窗口激活并且处于工作台 + // document.hasFocus() && syncData() + // }, editToJsonInterval) // 2、失焦同步数据 addEventListener('blur', syncData) @@ -37,7 +37,7 @@ const useSyncUpdateHandle = () => { // 关闭侦听 const unUse = () => { - clearInterval(timer) + // clearInterval(timer) removeEventListener(SavePageEnum.JSON, updateFn) removeEventListener('blur', syncData) } diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index ce4eb16b..fc435ad2 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -137,7 +137,8 @@ const toolsMouseoutHandle = () => { // 编辑处理 const editHandle = () => { - window['$message'].warning('将开启失焦更新与 5 秒同步更新！') + window['$message'].warning('将开启失焦更新！') +// window['$message'].warning('将开启失焦更新与 5 秒同步更新！') setTimeout(() => { // 获取id路径 const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href') From 786458adfe03169fb918efc20150bddd0758e776 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=98=E6=BD=98?= <97274247@qq.com> Date: Tue, 15 Nov 2022 16:21:35 +0800 Subject: [PATCH 2/3] =?UTF-8?q?perf:=20=E7=BC=96=E8=BE=91JSON=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/EditTools/hooks/useSyncUpdate.hook.ts | 9 +++------ src/views/edit/index.vue | 11 +++++------ src/views/preview/wrapper.vue | 6 +++--- 3 files changed, 11 insertions(+), 15 deletions(-) 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 5abf212f..6b39b36e 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts @@ -8,17 +8,14 @@ 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 syncData = async () => { + dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo })) } // 开启侦听 diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue index bac78066..42d1e4ab 100644 --- a/src/views/edit/index.vue +++ b/src/views/edit/index.vue @@ -44,14 +44,13 @@ import { icon } from '@/plugins' const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5 const showOpenFilePicker: Function = (window as any).showOpenFilePicker -let content = ref('') - +const content = ref('') // 从sessionStorage 获取数据 -function getDataBySession() { - const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as unknown as ChartEditStorageType +async function getDataBySession() { + const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType content.value = JSON.stringify(localStorageInfo, undefined, 2) } -getDataBySession() +setTimeout(getDataBySession) // 返回父窗口 function back() { @@ -86,7 +85,7 @@ document.addEventListener('keydown', function (e) { addEventListener('blur', updateSync) // 同步更新 -function updateSync() { +async function updateSync() { if (!window.opener) { return window['$message'].error('源窗口已关闭，视图同步失败') } diff --git a/src/views/preview/wrapper.vue b/src/views/preview/wrapper.vue index 2efb661b..86abc6b3 100644 --- a/src/views/preview/wrapper.vue +++ b/src/views/preview/wrapper.vue @@ -12,12 +12,12 @@ import { ref } from 'vue' import Preview from './index.vue' let key = ref(Date.now()) -let localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as unknown as ChartEditStorageType -// 数据变更 -> 同步sessionStorage -> reload页面 （重新执行Mounted） +// 数据变更 -> 组件销毁重建 ;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => { if (!window.opener) return - window.opener.addEventListener(saveEvent, (e: any) => { + 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() }) From 656adfcf56124f245701868b50e209d1dfb35ecd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=98=E6=BD=98?= <97274247@qq.com> Date: Tue, 15 Nov 2022 16:26:52 +0800 Subject: [PATCH 3/3] =?UTF-8?q?perf:=20=E7=BC=96=E8=BE=91JSON=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=E5=90=8E=E7=AB=AF=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EditTools/hooks/useSyncUpdate.hook.ts | 3 +- src/views/chart/hooks/useSync.hook.ts | 45 +++++++++++-------- src/views/edit/index.vue | 13 +++++- 3 files changed, 39 insertions(+), 22 deletions(-) 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 6b39b36e..d3b06a95 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts @@ -6,7 +6,7 @@ import { ChartEnum } from '@/enums/pageEnum' import { SavePageEnum } from '@/enums/editPageEnum' import { editToJsonInterval } from '@/settings/designSetting' -const { updateComponent } = useSync() +const { updateComponent, dataSyncUpdate } = useSync() const chartEditStore = useChartEditStore() // 侦听器更新 @@ -15,6 +15,7 @@ const useSyncUpdateHandle = () => { let timer: any const updateFn = (e: any) => updateComponent(e!.detail, true, false) const syncData = async () => { + dataSyncUpdate && (await dataSyncUpdate()) dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo })) } diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts index a8639aa8..c7966f70 100644 --- a/src/views/chart/hooks/useSync.hook.ts +++ b/src/views/chart/hooks/useSync.hook.ts @@ -238,7 +238,7 @@ export const useSync = () => { } // * 数据保存 - const dataSyncUpdate = throttle(async () => { + const dataSyncUpdate = throttle(async (updateImg = true) => { if(!fetchRouteParamsLocation()) return let projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]; @@ -249,25 +249,32 @@ export const useSync = () => { chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START) - // 获取缩略图片 - const range = document.querySelector('.go-edit-range') as HTMLElement - // 生成图片 - const canvasImage: HTMLCanvasElement = await html2canvas(range, { - backgroundColor: null, - allowTaint: true, - useCORS: true - }) + // 异常处理：缩略图上传失败不影响JSON的保存 + try { + if (updateImg) { + // 获取缩略图片 + const range = document.querySelector('.go-edit-range') as HTMLElement + // 生成图片 + const canvasImage: HTMLCanvasElement = await html2canvas(range, { + backgroundColor: null, + allowTaint: true, + useCORS: true + }) - // 上传预览图 - let uploadParams = new FormData() - uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)) - const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType - // 保存预览图 - if(uploadRes.code === ResultEnum.SUCCESS) { - await updateProjectApi({ - id: fetchRouteParamsLocation(), - indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}` - }) + // 上传预览图 + let uploadParams = new FormData() + uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)) + const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType + // 保存预览图 + if(uploadRes.code === ResultEnum.SUCCESS) { + await updateProjectApi({ + id: fetchRouteParamsLocation(), + indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}` + }) + } + } + } catch (e) { + console.log(e) } // 保存数据 diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue index 42d1e4ab..5bf2a75a 100644 --- a/src/views/edit/index.vue +++ b/src/views/edit/index.vue @@ -38,10 +38,14 @@ 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, fetchRouteParamsLocation } from '@/utils' import { StorageEnum } from '@/enums/storageEnum' import { icon } from '@/plugins' - +import { useSync } from '@/views/chart/hooks/useSync.hook' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d' +const chartEditStore = useChartEditStore() +const { dataSyncUpdate } = useSync() const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5 const showOpenFilePicker: Function = (window as any).showOpenFilePicker const content = ref('') @@ -93,6 +97,11 @@ async function updateSync() { const detail = JSON.parse(content.value) delete detail.id // 保持id不变 + // 带后端版本额外处理请求 + if (dataSyncUpdate) { + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation()) + await dataSyncUpdate(false) // JSON界面保存不上传缩略图 + } window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail })) } catch (e) { window['$message'].error('内容格式有误')