perf(views/chart): 拆分主页面左上角保存内容和缩略图

@@ -43,7 +43,22 @@
             </n-button>
           </div>
         </template>
-        <span>保存</span>
+        <span>保存内容</span>
+      </n-tooltip>
+      <!-- 保存缩略图 -->
+      <n-tooltip v-if="!isCustomerUser" placement="bottom" trigger="hover">
+        <template #trigger>
+          <div class="save-btn">
+            <n-button size="small" type="primary" ghost @click="thumbnailSyncUpdate()">
+              <template #icon>
+                <n-icon>
+                  <Awake />
+                </n-icon>
+              </template>
+            </n-button>
+          </div>
+        </template>
+        <span>保存缩略图</span>
       </n-tooltip>
     </n-space>
   </n-space>
@@ -53,7 +68,7 @@
 import { toRefs, Ref, reactive, computed } from 'vue'
 import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
-import { Save } from '@vicons/carbon'
+import { Save, Awake } from '@vicons/carbon'
 import { useRemoveKeyboard } from '../../../hooks/useKeyboard.hook'
 
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -71,7 +86,7 @@ const { setItem } = useChartLayoutStore()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()
-const { dataSyncUpdate } = useSyncRemote()
+const { dataSyncUpdate ,thumbnailSyncUpdate } = useSyncRemote()
 const { isCustomerUser } = useRole()
 
 interface ItemType<T> {

@@ -70,22 +70,47 @@ export const useSyncRemote = () => {
     }
   }
 
-  // 数据保存
-  const dataSyncUpdate = throttle(async (updateImg = true) => {
+  /**
+   * 数据保存和缩略图保存逻辑拆分
+   */
+
+  //dataSyncUpdate 数据保存
+  const dataSyncUpdate = throttle(async () => {
     if (!fetchRouteParamsLocation()) return
 
     // 客户角色只有查看权限
     if (unref(isCustomerUser)) return
 
-    const { dataViewId, state, organizationId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
+    const { dataViewId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
 
     if (dataViewId === null || dataViewId === '') {
       window['$message'].error('数据初未始化成功,请刷新页面！')
       return
     }
     projectInfoStore.setSaveStatus(SyncEnum.START)
-    // 异常处理：缩略图上传失败不影响JSON的保存
-    try {
+    // 保存数据
+    const saveContent = {
+      dataViewContent: {
+        id: dataViewContent.id,
+        content: JSONStringify(chartEditStore.getStorageInfo || {})
+      },
+      dataViewName,
+      dataViewId
+    }
+    await contentUpdateApi(saveContent as unknown as BaseUpdateContentParams)
+    window['$message'].success('保存成功！')
+    // 成功状态
+    setTimeout(() => {
+      projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
+    }, 1000)
+    return
+    // 失败状态
+    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
+  }, 3000)
+
+  //thumbnailSyncUpdate 缩略图保存
+  const thumbnailSyncUpdate = throttle(async(updateImg = true)=>{
+    const {  state, organizationId, dataViewName } = projectInfoStore.getProjectInfo
       if (updateImg) {
         // 获取缩略图片
         const range = document.querySelector('.go-edit-range') as HTMLElement
@@ -96,7 +121,6 @@ export const useSyncRemote = () => {
           useCORS: true,
           logging: false
         })
-
         // 上传预览图
         const uploadParams = new FormData()
         uploadParams.append(
@@ -104,7 +128,6 @@ export const useSyncRemote = () => {
           base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
         )
         const uploadRes = await uploadFile(uploadParams)
-
         // 保存预览图
         if (uploadRes) {
           await saveDataViewList({
@@ -116,28 +139,7 @@ export const useSyncRemote = () => {
           })
         }
       }
-    } catch (e) {
-      console.log(e)
-    }
-    // 保存数据
-    const saveContent = {
-      dataViewContent: {
-        id: dataViewContent.id,
-        content: JSONStringify(chartEditStore.getStorageInfo || {})
-      },
-      dataViewName,
-      dataViewId
-    }
-    await contentUpdateApi(saveContent as unknown as BaseUpdateContentParams)
-    window['$message'].success('保存成功！')
-    // 成功状态
-    setTimeout(() => {
-      projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
-    }, 1000)
-    return
-    // 失败状态
-    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-  }, 3000)
+  })
 
   // * 定时处理
   const intervalDataSyncUpdate = () => {
@@ -145,7 +147,6 @@ export const useSyncRemote = () => {
     // const syncTiming = setInterval(() => {
     //   dataSyncUpdate()
     // }, saveInterval * 1000)
-
     // // 销毁
     // onUnmounted(() => {
     //   clearInterval(syncTiming)
@@ -154,6 +155,7 @@ export const useSyncRemote = () => {
   return {
     dataSyncFetch,
     dataSyncUpdate,
+    thumbnailSyncUpdate,
     intervalDataSyncUpdate
   }
 }