From 2491f7ff573609c57b6d16b39424b1a93f656377 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 22 Jun 2022 18:50:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/icon.ts                           |  7 +++--
 .../ContentHeader/headerLeftBtn/index.vue     | 26 ++++++++++++++++---
 src/views/chart/hooks/useSync.hook.ts         |  5 ++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 50b4fffb..a4a40646 100644
--- a/src/plugins/icon.ts
+++ b/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/#/ 还有很多
diff --git a/src/views/chart/ContentHeader/headerLeftBtn/index.vue b/src/views/chart/ContentHeader/headerLeftBtn/index.vue
index aace7805..e29a59a0 100644
--- a/src/views/chart/ContentHeader/headerLeftBtn/index.vue
+++ b/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()
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index 09a64fc3..4d038862 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/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 = () => {