feat: 新增获取项目数据功能，新增同步数据功能

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="go-edit-bottom">
-    <edit-history></edit-history>
+    <div class="go-flex-items-center">
+      <edit-history></edit-history>
+      <n-divider vertical />
+      <edit-data-sync></edit-data-sync>
+    </div>
 
     <n-space class="bottom-ri">
       <!-- 快捷键提示 -->
@@ -55,7 +59,8 @@
 import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { EditHistory } from '../EditHistory/index'
-import EditShortcutKey from '../EditShortcutKey/index.vue'
+import { EditShortcutKey } from '../EditShortcutKey/index'
+import { EditDataSync } from '../EditDataSync/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -136,12 +141,13 @@ watchEffect(() => {
 <style lang="scss" scoped>
 $min-width: 500px;
 @include go('edit-bottom') {
-  width: 100%;
-  min-width: $min-width;
-  padding: 0 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0 10px;
+  width: 100%;
+  min-width: $min-width;
+  height: 40px;
   .bottom-ri {
     position: relative;
     top: 15px;

src/views/chart/ContentEdit/components/EditDataSync/index.ts

@@ -0,0 +1,3 @@
+import EditDataSync from './index.vue'
+
+export { EditDataSync }

src/views/chart/ContentEdit/components/EditDataSync/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="go-edit-data-sync go-flex-items-center">
+    <n-text class="status-desc go-ml-2" :type="descType" depth="3">
+      {{ statusDesc }}
+    </n-text>
+    <n-spin
+      v-show="saveStatus === SyncEnum.START"
+      class="status-spin go-ml-2"
+      size="small"
+    >
+      <template #icon>
+        <n-icon size="13">
+          <reload-icon />
+        </n-icon>
+      </template>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, watchEffect } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { SyncEnum } from '@/enums/editPageEnum'
+import { icon } from '@/plugins'
+
+const { ReloadIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()
+const { saveStatus } = toRefs(chartEditStore.getEditCanvas)
+const statusDesc = ref('')
+const descType = ref('')
+
+watchEffect(() => {
+  const statusDescObj = {
+    [SyncEnum.PENDING]: {
+      text: '待同步',
+      type: '',
+    },
+    [SyncEnum.START]: {
+      text: '同步中',
+      type: 'success',
+    },
+    [SyncEnum.SUCCESS]: {
+      text: '同步成功！',
+      type: 'success',
+    },
+    [SyncEnum.FAILURE]: {
+      text: '同步失败!',
+      type: 'error',
+    },
+  }
+  statusDesc.value = statusDescObj[saveStatus.value]['text']
+  descType.value = statusDescObj[saveStatus.value]['type']
+  // 3秒重置展示
+  setTimeout(() => {
+    statusDesc.value = statusDescObj[SyncEnum.PENDING]['text']
+    descType.value = statusDescObj[SyncEnum.PENDING]['type']
+  }, 3000)
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('edit-data-sync') {
+  @include deep() {
+    .n-spin {
+      width: 13px;
+      height: 13px;
+    }
+  }
+  .status-desc {
+    font-size: 12px;
+    line-height: 40px;
+    opacity: .8;
+  }
+}
+</style>

src/views/chart/ContentEdit/components/EditHistory/index.vue

@@ -10,7 +10,7 @@
     >
       <template #trigger>
         <n-button
-          class="mr-10"
+          class="go-mr-1"
           secondary
           size="small"
           :disabled="options.length === 0"
@@ -140,9 +140,6 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" scoped>
-.mr-10 {
-  margin-right: 10px;
-}
 .edit-history-popover {
   .btn-text {
     font-size: 12px;

src/views/chart/ContentEdit/components/EditShortcutKey/index.ts

@@ -1,2 +1,3 @@
 import EditShortcutKey from './index.vue'
+
 export { EditShortcutKey }

src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts

@@ -1,61 +1,12 @@
 import { ref, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { fetchChartComponent } from '@/packages/index'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { readFile, goDialog } from '@/utils'
-import { createComponent } from '@/packages'
-
-// 更新函数
-const updateComponent = async (fileData: any, isSplace = false) => {
-  const chartEditStore = useChartEditStore()
-  const chartHistoryStore = useChartHistoryStore()
-  if (isSplace) {
-    // 清除列表
-    chartEditStore.componentList = []
-    // 清除历史记录
-    chartHistoryStore.clearBackStack()
-    chartHistoryStore.clearForwardStack()
-  }
-  // 列表组件注册
-  fileData.componentList.forEach(async (e: CreateComponentType) => {
-    if (!window['$vue'].component(e.chartConfig.chartKey)) {
-      window['$vue'].component(
-        e.chartConfig.chartKey,
-        fetchChartComponent(e.chartConfig)
-      )
-    }
-  })
-  // 数据赋值
-  for (const key in fileData) {
-    // 组件
-    if (key === ChartEditStoreEnum.COMPONENT_LIST) {
-      for (const comItem of fileData[key]) {
-        // 补充 class 上的方法
-        let newComponent: CreateComponentType = await createComponent(
-          comItem.chartConfig
-        )
-        // 不保存到记录
-        chartEditStore.addComponentList(
-          Object.assign(newComponent, comItem),
-          false,
-          true
-        )
-      }
-    } else {
-      // 非组件(顺便排除脏数据)
-      if(key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
-      Object.assign((chartEditStore as any)[key], fileData[key])
-    }
-  }
-}
+import { useSync } from '@/views/chart/hooks/useSync.hook'
 
 export const useFile = () => {
   const importUploadFileListRef = ref()
-
+  const { updateComponent } = useSync()
   // 上传-前置
   //@ts-ignore
   const importBeforeUpload = ({ file }) => {

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h } from 'vue';
+import { ref, computed } from 'vue';
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
 import { exportHandle } from './utils'

src/views/chart/ContentEdit/components/EditTools/utils/index.ts

@@ -9,7 +9,7 @@ export const exportHandle = () => {
 
   // 导出数据
   downloadTextFile(
-    JSON.stringify(chartEditStore.getStorageInfo || [], (k, v) => {
+    JSON.stringify(chartEditStore.getStorageInfo || {}, (k, v) => {
       return v === undefined ? null : v
     }),
     undefined,