perf: 优化编辑 JSON 交互功能

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

@@ -1,6 +1,6 @@
 <template>
   <n-space class="go-mt-0">
-    <n-button v-for="item in btnList" :key="item.title" ghost @click="item.event">
+    <n-button v-for="item in comBtnList" :key="item.title" :type="item.type" ghost @click="item.event">
       <template #icon>
         <component :is="item.icon"></component>
       </template>
@@ -10,16 +10,17 @@
 </template>
 
 <script setup lang="ts">
-import { shallowReactive } from 'vue'
+import { computed } from 'vue'
 import { renderIcon, goDialog, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useRoute } from 'vue-router'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { syncData } from '../../ContentEdit/components/EditTools/hooks/useSyncUpdate.hook'
 import { icon } from '@/plugins'
+import { cloneDeep } from 'lodash'
 
-const { BrowsersOutlineIcon, SendIcon } = icon.ionicons5
+const { BrowsersOutlineIcon, SendIcon, AnalyticsIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 
 const routerParamsInfo = useRoute()
@@ -42,7 +43,8 @@ const previewHandle = () => {
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     } else {
       sessionStorageInfo.push({
-        id: previewId, ...storageInfo
+        id: previewId,
+        ...storageInfo
       })
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     }
@@ -63,7 +65,14 @@ const sendHandle = () => {
   })
 }
 
-const btnList = shallowReactive([
+const btnList = [
+  {
+    select: true,
+    title: '同步内容',
+    type: 'primary',
+    icon: renderIcon(AnalyticsIcon),
+    event: syncData
+  },
   {
     select: true,
     title: '预览',
@@ -76,9 +85,18 @@ const btnList = shallowReactive([
     icon: renderIcon(SendIcon),
     event: sendHandle
   }
-])
+]
 
+const comBtnList = computed(() => {
+  if (chartEditStore.getEditCanvas.isCodeEdit) {
+    return btnList
+  }
+  const cloneList = cloneDeep(btnList)
+  cloneList.shift()
+  return cloneList
+})
 </script>
+
 <style lang="scss" scoped>
 .align-center {
   margin-top: -4px;