Merge branch 'dev' of https://gitee.com/MTrun/go-view into master-fetch-dev

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

@@ -138,7 +138,12 @@ watchEffect(() => {
 
 <style lang="scss" scoped>
 $min-width: 500px;
+$max-width: 670px;
 @include go('edit-bottom') {
+  width: 100%;
+  min-width: $min-width;
+  min-width: $max-width;
+  padding: 0 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;

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

@@ -7,7 +7,11 @@
     @mouseleave="toolsMouseoutHandle"
   >
     <!-- PawIcon -->
-    <n-icon v-show="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE && isMiniComputed " class="asideLogo" size="22">
+    <n-icon
+      v-show="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE && isMiniComputed"
+      class="asideLogo"
+      size="22"
+    >
       <PawIcon></PawIcon>
     </n-icon>
 
@@ -58,17 +62,28 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h } from 'vue'
+import { ref, computed, h, watch } 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 { fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
+import { editToJsonInterval } from '@/settings/designSetting'
+import { EditEnum, ChartEnum } from '@/enums/pageEnum'
+import { StorageEnum } from '@/enums/storageEnum'
+import { useRoute } from 'vue-router'
+import { useSync } from '@/views/chart/hooks/useSync.hook'
+import { SavePageEnum } from '@/enums/editPageEnum'
 import { GoSystemSet } from '@/components/GoSystemSet/index'
 import { exportHandle } from './utils'
 import { useFile } from './hooks/useFile.hooks'
 import { BtnListType, TypeEnum } from './index.d'
 import { icon } from '@/plugins'
 
-const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon } = icon.ionicons5
+const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon, CreateIcon } = icon.ionicons5
 const settingStore = useSettingStore()
+const chartEditStore = useChartEditStore()
+const routerParamsInfo = useRoute()
+const { updateComponent } = useSync()
 
 // 鼠标悬停定时器
 let mouseTime: any = null
@@ -80,38 +95,16 @@ const isMini = ref<boolean>(true)
 const asideTootipDis = ref(true)
 // 文件上传
 const { importUploadFileListRef, importCustomRequest, importBeforeUpload } = useFile()
-// 配置列表
-const btnList: BtnListType[] = [
-  {
-    key: 'export',
-    type: TypeEnum.BUTTON,
-    name: '导出',
-    icon: ShareIcon,
-    handle: exportHandle
-  },
-  {
-    key: 'import',
-    type: TypeEnum.IMPORTUPLOAD,
-    name: '导入',
-    icon: DownloadIcon
-  },
-  {
-    key: 'setting',
-    type: TypeEnum.BUTTON,
-    name: '设置',
-    icon: SettingsSharpIcon,
-    handle: () => {
-      globalSettingModel.value = true
-    }
-  }
-]
 
 // 是否是侧边栏
 const isAside = computed(() => settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE)
+
 // 是否隐藏（悬浮展示）
 const isHide = computed(() => settingStore.getChartToolsStatusHide)
+
 // 是否展示最小化（与全局配置相关）
 const isMiniComputed = computed(() => isMini.value && isHide.value)
+
 // 页面渲染配置
 const btnListComputed = computed(() => {
   if (!isAside.value) return btnList
@@ -142,6 +135,119 @@ const toolsMouseoutHandle = () => {
     isMini.value = true
   }
 }
+
+// 编辑处理
+const editHandle = () => {
+  window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
+  setTimeout(() => {
+    // 获取id路径
+    const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')
+    if (!path) return
+    let { id } = routerParamsInfo.params as any
+    id = typeof id === 'string' ? id : id[0]
+    updateToSession(id)
+    routerTurnByPath(path, [id], undefined, true)
+  }, 1000)
+}
+
+// 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
+const updateToSession = (id: string) => {
+  const storageInfo = chartEditStore.getStorageInfo
+  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+
+  if (sessionStorageInfo?.length) {
+    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === id)
+    // 重复替换
+    if (repeateIndex !== -1) {
+      sessionStorageInfo.splice(repeateIndex, 1, { ...storageInfo, id })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    } else {
+      sessionStorageInfo.push({ ...storageInfo, id })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    }
+  } else {
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...storageInfo, id }])
+  }
+}
+
+// 侦听器更新
+const useSyncUpdate = () => {
+  // 定义侦听器变量
+  let timer: any
+  const updateFn = (e: any) => updateComponent(e!.detail, true, false)
+  const syncData = () => {
+    if (routerParamsInfo.name == ChartEnum.CHART_HOME_NAME) {
+      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+    }
+  }
+
+  // 开启侦听
+  const use = () => {
+    // 1、定时同步数据
+    timer = setInterval(() => {
+      // 窗口激活并且处于工作台
+      document.hasFocus() && syncData()
+    }, editToJsonInterval)
+    // 2、失焦同步数据
+    addEventListener('blur', syncData)
+
+    // 【监听JSON代码 刷新工作台图表】
+    addEventListener(SavePageEnum.JSON, updateFn)
+  }
+
+  // 关闭侦听
+  const unUse = () => {
+    clearInterval(timer)
+    removeEventListener(SavePageEnum.JSON, updateFn)
+    removeEventListener('blur', syncData)
+  }
+
+  // 路由变更时处理
+  const watchHandler = (toName: any, fromName: any) => {
+    if (fromName == ChartEnum.CHART_HOME_NAME) {
+      unUse()
+    }
+    if (toName == ChartEnum.CHART_HOME_NAME) {
+      use()
+    }
+  }
+  return watchHandler
+}
+
+watch(() => routerParamsInfo.name, useSyncUpdate(), { immediate: true })
+
+// 配置列表
+const btnList: BtnListType[] = [
+  {
+    key: 'export',
+    type: TypeEnum.BUTTON,
+    name: '导出',
+    icon: ShareIcon,
+    handle: exportHandle
+  },
+  {
+    key: 'import',
+    type: TypeEnum.IMPORTUPLOAD,
+    name: '导入',
+    icon: DownloadIcon
+  },
+  {
+    key: 'edit',
+    type: TypeEnum.BUTTON,
+    name: '编辑JSON',
+    icon: CreateIcon,
+    handle: editHandle
+  },
+  {
+    key: 'setting',
+    type: TypeEnum.BUTTON,
+    name: '设置',
+    icon: SettingsSharpIcon,
+    handle: () => {
+      globalSettingModel.value = true
+    }
+  }
+]
 </script>
 
 <style lang="scss" scoped>
@@ -168,7 +274,7 @@ $asideBottom: 70px;
     flex-direction: column-reverse;
     height: auto;
     right: 20px;
-    padding: 20px 8px;
+    padding: 30px 8px;
     bottom: $asideBottom;
     overflow: hidden;
     transition: height ease 0.4s;