feat: 新增保存按钮

src/plugins/icon.ts

@@ -81,7 +81,8 @@ import {
   Scale as ScaleIcon,
   FitToScreen as FitToScreenIcon,
   FitToHeight as FitToHeightIcon,
-  FitToWidth as FitToWidthIcon
+  FitToWidth as FitToWidthIcon,
+  Save as SaveIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -237,7 +238,9 @@ const carbon = {
   ScaleIcon,
   FitToScreenIcon,
   FitToHeightIcon,
-  FitToWidthIcon
+  FitToWidthIcon,
+  // 保存
+  SaveIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/views/chart/ContentHeader/headerLeftBtn/index.vue

@@ -29,26 +29,44 @@
         </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>
 
 <script setup lang="ts">
-import { toRefs, Ref, reactive, computed } from 'vue'
+import { toRefs, ref, Ref, reactive, computed } from 'vue'
 import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
 import { useRemoveKeyboard } from '../../hooks/useKeyboard.hook'
-
+import { useSync } from '../../hooks/useSync.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-
 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()

src/views/chart/hooks/useSync.hook.ts

@@ -8,6 +8,7 @@ import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { saveInterval } from '@/settings/designSetting'
+import throttle from 'lodash/throttle'
 // 接口状态
 import { ResultEnum } from '@/enums/httpEnum'
 // 接口
@@ -119,7 +120,7 @@ export const useSync = () => {
   }
 
   // * 数据保存
-  const dataSyncUpdate = async () => {
+  const dataSyncUpdate = throttle(async () => {
     if(!fetchRouteParamsLocation()) return
 
     if(!systemStore.getFetchInfo.OSSUrl) {
@@ -164,7 +165,7 @@ export const useSync = () => {
     }
     // 失败状态
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-  }
+  }, 3000)
 
   // * 定时处理
   const intervalDataSyncUpdate = () => {