feat:大屏新增保存 使用官方自带保存逻辑

@@ -97,7 +97,8 @@ import {
   Carbon3DSoftware as Carbon3DSoftwareIcon,
   Filter as FilterIcon,
   FilterEdit as FilterEditIcon,
-  Laptop as LaptopIcon
+  Laptop as LaptopIcon,
+  Save as SaveIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -231,7 +232,7 @@ const ionicons5 = {
   // 眼睛
   EyeOutlineIcon,
   EyeOffOutlineIcon,
-  // 图表列表 
+  // 图表列表
   AlbumsIcon
 }
 
@@ -285,7 +286,9 @@ const carbon = {
   FilterIcon,
   FilterEditIcon,
   // 图层
-  LaptopIcon
+  LaptopIcon,
+  // 保存
+  SaveIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

@@ -6,10 +6,10 @@ import designColor from './designColor.json'
 export const lang = LangEnum.ZH
 
 // 水印文字
-export const watermarkText = "GoView 低代码平台"
+export const watermarkText = 'GoView 低代码平台'
 
 // 分组名称
-export const groupTitle = "分组"
+export const groupTitle = '分组'
 
 // 主题配置
 export const theme = {
@@ -17,7 +17,7 @@ export const theme = {
   darkTheme: false,
   //默认主题色
   appTheme: '#51d6a9',
-  appThemeDetail: null,
+  appThemeDetail: null
 }
 
 // 图表初始配置(px)
@@ -28,7 +28,7 @@ export const chartInitConfig = {
   h: 300,
   // 不建议动 offset
   offsetX: 0,
-  offsetY: 0,
+  offsetY: 0
 }
 
 // dialog 图标的大小
@@ -72,3 +72,6 @@ export const canvasModelIndex = 9999
 
 // 框选时蒙层的 z-index，需比所有图表高
 export const selectBoxIndex = canvasModelIndex + 10
+
+// 工作台自动保存间隔（s）
+export const saveInterval = 120

@@ -29,6 +29,22 @@
         </template>
         <span>{{ item.title }}</span>
       </n-tooltip>
+      <n-divider vertical />
+      <!-- 保存 -->
+      <n-tooltip placement="bottom" trigger="hover">
+        <template #trigger>
+          <div class="save-btn">
+            <n-button size="small" type="primary" ghost @click="dataSyncUpdate()">
+              <template #icon>
+                <n-icon>
+                  <SaveIcon></SaveIcon>
+                </n-icon>
+              </template>
+            </n-button>
+          </div>
+        </template>
+        <span>保存</span>
+      </n-tooltip>
     </n-space>
   </n-space>
 </template>
@@ -43,12 +59,14 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-
+import { useSync } from '../../hooks/useSync.hook'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
+const { SaveIcon } = icon.carbon
 const { setItem } = useChartLayoutStore()
+const { dataSyncUpdate } = useSync()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()
@@ -81,9 +99,9 @@ const btnList = reactive<ItemType<ChartLayoutStoreEnum>[]>([
   }
 ])
 
-const isBackStack = computed(()=> chartHistoryStore.getBackStack.length> 1)
+const isBackStack = computed(() => chartHistoryStore.getBackStack.length > 1)
 
-const isForwardStack = computed(()=> chartHistoryStore.getForwardStack.length> 0)
+const isForwardStack = computed(() => chartHistoryStore.getForwardStack.length > 0)
 
 const historyList = reactive<ItemType<HistoryStackEnum>[]>([
   {
@@ -101,7 +119,6 @@ const historyList = reactive<ItemType<HistoryStackEnum>[]>([
   }
 ])
 
-
 // store 描述的是展示的值，所以和 ContentConfigurations 的 collapsed 是相反的
 const styleHandle = (item: ItemType<ChartLayoutStoreEnum>) => {
   if (item.key === ChartLayoutStoreEnum.DETAILS) {
@@ -120,10 +137,10 @@ const clickHistoryHandle = (item: ItemType<HistoryStackEnum>) => {
   switch (item.key) {
     case HistoryStackEnum.BACK_STACK:
       chartEditStore.setBack()
-      break;
+      break
     case HistoryStackEnum.FORWARD_STACK:
       chartEditStore.setForward()
-      break;
+      break
   }
 }
 
@@ -142,5 +159,5 @@ const goHomeHandle = () => {
 <style lang="scss" scoped>
 .header-left-btn {
   margin-left: -37px;
- }
+}
 </style>

-import { getUUID } from '@/utils'
+import { getUUID, fetchRouteParamsLocation } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
@@ -9,6 +9,10 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.
 import { BaseEvent, EventLife } from '@/enums/eventEnum'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 import merge from 'lodash/merge'
+import { onUnmounted } from 'vue'
+import { saveInterval } from '@/settings/designSetting'
+import throttle from 'lodash/throttle'
+import html2canvas from 'html2canvas'
 
 /**
  * * 画布-版本升级对旧数据无法兼容的补丁
@@ -116,7 +120,7 @@ export const useSync = () => {
       }
 
       if (e.isGroup) {
-        (e as CreateComponentGroupType).groupList.forEach(groupItem => {
+        ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {
           intComponent(groupItem)
         })
       } else {
@@ -155,7 +159,7 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         let loadIndex = 0
-        const listLength = projectData[key].length;
+        const listLength = projectData[key].length
         for (const comItem of projectData[key]) {
           // 设置加载数量
           let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
@@ -196,7 +200,80 @@ export const useSync = () => {
     chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
   }
 
+  // 数据保存
+  const dataSyncUpdate = throttle(async (updateImg = true) => {
+    if (!fetchRouteParamsLocation()) return
+    window['$message'].success('保存成功！')
+    // let projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
+    // if (projectId === null || projectId === '') {
+    //   window['$message'].error('数据初未始化成功,请刷新页面！')
+    //   return
+    // }
+
+    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
+
+    // 异常处理：缩略图上传失败不影响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)
+        // 保存预览图
+        // if (uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
+        //   await updateProjectApi({
+        //     id: fetchRouteParamsLocation(),
+        //     indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
+        //   })
+        // }
+      }
+    } catch (e) {
+      console.log(e)
+    }
+
+    // 保存数据
+    // let params = new FormData()
+    // params.append('projectId', projectId)
+    // params.append('content', JSONStringify(chartEditStore.getStorageInfo || {}))
+    // const res = await saveProjectApi(params)
+
+    // if (res && res.code === ResultEnum.SUCCESS) {
+    //   // 成功状态
+    //   setTimeout(() => {
+    //     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
+    //   }, 1000)
+    //   return
+    // }
+    // 失败状态
+    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
+  }, 3000)
+  // * 定时处理
+  const intervalDataSyncUpdate = () => {
+    // 定时获取数据
+    const syncTiming = setInterval(() => {
+      dataSyncUpdate()
+    }, saveInterval * 1000)
+
+    // 销毁
+    onUnmounted(() => {
+      clearInterval(syncTiming)
+    })
+  }
   return {
-    updateComponent
+    updateComponent,
+    dataSyncUpdate,
+    intervalDataSyncUpdate
   }
 }