Merge branch 'dev' into master-fetch-dev

src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts

@@ -1,49 +1,69 @@
 import { watch } from 'vue'
 import { useRoute } from 'vue-router'
+import throttle from 'lodash/throttle'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useSync } from '@/views/chart/hooks/useSync.hook'
 import { ChartEnum } from '@/enums/pageEnum'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { editToJsonInterval } from '@/settings/designSetting'
+import { goDialog } from '@/utils'
 
 const { updateComponent, dataSyncUpdate } = useSync()
 const chartEditStore = useChartEditStore()
 
+export const syncData = () => {
+  goDialog({
+    message: '是否覆盖源视图内容，此操作不可撤回?',
+    isMaskClosable: true,
+    transformOrigin: 'center',
+    onPositiveCallback: async () => {
+      window['$message'].success('正在同步编辑器...')
+      dataSyncUpdate && (await dataSyncUpdate())
+      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+    }
+  })
+}
+
 // 侦听器更新
 const useSyncUpdateHandle = () => {
   // 定义侦听器变量
   let timer: any
-  const updateFn = (e: any) => updateComponent(e!.detail, true, false)
-  const syncData = async () => {
-    dataSyncUpdate && (await dataSyncUpdate())
-    dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+
+  // 更新处理
+  const updateFn = (e: any) => {
+    window['$message'].success('正在进行更新...')
+    updateComponent(e!.detail, true)
+  }
+
+  // 页面关闭处理
+  const closeFn = () => {
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CODE_EDIT, false)
   }
 
   // 开启侦听
   const use = () => {
-    // // 1、定时同步数据
+    // 定时同步数据（暂不开启）
     // timer = setInterval(() => {
     //   // 窗口激活并且处于工作台
     //   document.hasFocus() && syncData()
     // }, editToJsonInterval)
-    // // 1、定时同步数据
-    // timer = setInterval(() => {
-    //   // 窗口激活并且处于工作台
-    //   document.hasFocus() && syncData()
-    // }, editToJsonInterval)
-    // 2、失焦同步数据
-    addEventListener('blur', syncData)
 
-    // 【监听JSON代码 刷新工作台图表】
+    // 失焦同步数据（暂不开启）
+    // addEventListener('blur', syncData)
+
+    // 监听编辑器保存事件 刷新工作台图表
     addEventListener(SavePageEnum.JSON, updateFn)
+
+    // 监听编辑页关闭
+    addEventListener(SavePageEnum.CLOSE, throttle(closeFn, 1000))
   }
 
   // 关闭侦听
   const unUse = () => {
     // clearInterval(timer)
-    // clearInterval(timer)
+    // removeEventListener('blur', syncData)
     removeEventListener(SavePageEnum.JSON, updateFn)
-    removeEventListener('blur', syncData)
   }
 
   // 路由变更时处理
@@ -55,11 +75,11 @@ const useSyncUpdateHandle = () => {
       use()
     }
   }
-  
+
   return watchHandler
 }
 
 export const useSyncUpdate = () => {
   const routerParamsInfo = useRoute()
   watch(() => routerParamsInfo.name, useSyncUpdateHandle(), { immediate: true })
-}
+}

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

@@ -66,7 +66,14 @@ import { ref, computed } from 'vue'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { fetchRouteParamsLocation, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import {
+  fetchRouteParamsLocation,
+  fetchPathByName,
+  routerTurnByPath,
+  setSessionStorage,
+  getLocalStorage
+} from '@/utils'
 import { EditEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useRoute } from 'vue-router'
@@ -137,8 +144,8 @@ const toolsMouseoutHandle = () => {
 
 // 编辑处理
 const editHandle = () => {
-  window['$message'].warning('将开启失焦更新！')
-//   window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
+  window['$message'].warning('请通过顶部【同步内容】按钮同步最新数据！')
+  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CODE_EDIT, true)
   setTimeout(() => {
     // 获取id路径
     const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')
@@ -146,7 +153,7 @@ const editHandle = () => {
     const id = fetchRouteParamsLocation()
     updateToSession(id)
     routerTurnByPath(path, [id], undefined, true)
-  }, 1000)
+  }, 2000)
 }
 
 // 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
@@ -169,7 +176,6 @@ const updateToSession = (id: string) => {
   }
 }
 
-
 // 配置列表
 const btnList: BtnListType[] = [
   {

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

@@ -1,12 +1,6 @@
 <template>
-  <n-space>
-    <n-button
-      v-for="item in btnList"
-      :key="item.key"
-      :type="item.type()"
-      ghost
-      @click="item.event"
-    >
+  <n-space class="go-mt-0">
+    <n-button v-for="item in comBtnList" :key="item.key" :type="item.type()" ghost @click="item.event">
       <template #icon>
         <component :is="item.icon"></component>
       </template>
@@ -32,9 +26,7 @@
             {{ previewPath() }}
           </n-alert>
           <n-space vertical>
-            <n-button tertiary type="primary" @click="copyPreviewPath()">
-              复制地址
-            </n-button>
+            <n-button tertiary type="primary" @click="copyPreviewPath()"> 复制地址 </n-button>
             <n-button :type="release ? 'warning' : 'primary'" @click="sendHandle">
               {{ release ? '取消发布' : '发布大屏' }}
             </n-button>
@@ -52,13 +44,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, shallowReactive, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 import { useClipboard } from '@vueuse/core'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { ResultEnum } from '@/enums/httpEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { syncData } from '../../ContentEdit/components/EditTools/hooks/useSyncUpdate.hook'
 import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { changeProjectReleaseApi } from '@/api/path'
 import {
@@ -69,11 +62,12 @@ import {
   setSessionStorage,
   getLocalStorage,
   httpErrorHandle,
-  fetchRouteParamsLocation,
+  fetchRouteParamsLocation
 } from '@/utils'
 import { icon } from '@/plugins'
+import { cloneDeep } from 'lodash'
 
-const { BrowsersOutlineIcon, SendIcon, CloseIcon } = icon.ionicons5
+const { BrowsersOutlineIcon, SendIcon, AnalyticsIcon, CloseIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 
 const previewPathRef = ref(previewPath())
@@ -101,31 +95,26 @@ const previewHandle = () => {
   // id 标识
   const previewId = typeof id === 'string' ? id : id[0]
   const storageInfo = chartEditStore.getStorageInfo
-  const sessionStorageInfo =
-    getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {
-    const repeateIndex = sessionStorageInfo.findIndex(
-      (e: { id: string }) => e.id === previewId
-    )
+    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
     // 重复替换
     if (repeateIndex !== -1) {
       sessionStorageInfo.splice(repeateIndex, 1, {
         id: previewId,
-        ...storageInfo,
+        ...storageInfo
       })
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     } else {
       sessionStorageInfo.push({
         id: previewId,
-        ...storageInfo,
+        ...storageInfo
       })
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     }
   } else {
-    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [
-      { id: previewId, ...storageInfo },
-    ])
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
   }
   // 跳转
   routerTurnByPath(path, [previewId], undefined, true)
@@ -148,11 +137,11 @@ const copyPreviewPath = (successText?: string, failureText?: string) => {
 
 // 发布
 const sendHandle = async () => {
-  const res = (await changeProjectReleaseApi({
+  const res = await changeProjectReleaseApi({
     id: fetchRouteParamsLocation(),
     // 反过来
-    state: release.value ? -1 : 1,
-  }))
+    state: release.value ? -1 : 1
+  })
 
   if (res && res.code === ResultEnum.SUCCESS) {
     modelShowHandle()
@@ -167,22 +156,38 @@ const sendHandle = async () => {
   }
 }
 
-const btnList = shallowReactive([
+const btnList = [
+  {
+    select: true,
+    title: () => '同步内容',
+    type: () => 'primary',
+    icon: renderIcon(AnalyticsIcon),
+    event: syncData
+  },
   {
     key: 'preview',
     title: () => '预览',
     type: () => 'default',
     icon: renderIcon(BrowsersOutlineIcon),
-    event: previewHandle,
+    event: previewHandle
   },
   {
     key: 'release',
     title: () => (release.value ? '已发布' : '发布'),
     icon: renderIcon(SendIcon),
     type: () => (release.value ? 'primary' : 'default'),
-    event: modelShowHandle,
-  },
-])
+    event: modelShowHandle
+  }
+]
+
+const comBtnList = computed(() => {
+  if (chartEditStore.getEditCanvas.isCodeEdit) {
+    return btnList
+  }
+  const cloneList = cloneDeep(btnList)
+  cloneList.shift()
+  return cloneList
+})
 </script>
 
 <style lang="scss" scoped>