perf: 编辑JSON兼容后端优化

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 }))
   }
 

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)
 
-    // 获取缩略图片
+    // 异常处理：缩略图上传失败不影响JSON的保存
-    const range = document.querySelector('.go-edit-range') as HTMLElement
+    try {
-    // 生成图片
+      if (updateImg) {
-    const canvasImage: HTMLCanvasElement = await html2canvas(range, {
+        // 获取缩略图片
-      backgroundColor: null,
+        const range = document.querySelector('.go-edit-range') as HTMLElement
-      allowTaint: true,
+        // 生成图片
-      useCORS: true
+        const canvasImage: HTMLCanvasElement = await html2canvas(range, {
-    })
+          backgroundColor: null,
+          allowTaint: true,
+          useCORS: true
+        })
 
-    // 上传预览图
+        // 上传预览图
-    let uploadParams = new FormData()
+        let uploadParams = new FormData()
-    uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
+        uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
-    const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType
+        const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType
-    // 保存预览图
+        // 保存预览图
-    if(uploadRes.code === ResultEnum.SUCCESS) {
+        if(uploadRes.code === ResultEnum.SUCCESS) {
-      await updateProjectApi({
+          await updateProjectApi({
-        id: fetchRouteParamsLocation(),
+            id: fetchRouteParamsLocation(),
-        indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
+            indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
-      })
+          })
+        }
+      }
+    } catch (e) {
+      console.log(e)
     }
 
     // 保存数据

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('内容格式有误')