Merge branch 'dev' into dev-commet

src/hooks/index.ts

@@ -2,5 +2,6 @@ export * from '@/hooks/useTheme.hook'
 export * from '@/hooks/usePreviewScale.hook'
 export * from '@/hooks/useCode.hook'
 export * from '@/hooks/useChartDataFetch.hook'
+export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
 export * from '@/hooks/useLang.hook'

src/hooks/useChartDataFetch.hook.ts

@@ -1,6 +1,7 @@
 import { ref, toRefs, toRaw } from 'vue'
 import type VChart from 'vue-echarts'
 import { customizeHttp } from '@/api/http'
+import { useChartDataPondFetch } from '@/hooks/'
 import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
@@ -23,6 +24,22 @@ export const useChartDataFetch = (
   const vChartRef = ref<typeof VChart | null>(null)
   let fetchInterval: any = 0
 
+  // 数据池
+  const { addGlobalDataInterface } = useChartDataPondFetch()
+  const { requestDataPondId } = toRefs(targetComponent.request)
+
+  // 组件类型
+  const { chartFrame } = targetComponent.chartConfig
+  
+  // eCharts 组件配合 vChart 库更新方式
+  const echartsUpdateHandle = (dataset: any) => {
+    if (chartFrame === ChartFrameEnum.ECHARTS) {
+      if (vChartRef.value) {
+        vChartRef.value.setOption({ dataset: dataset })
+      }
+    }
+  }
+
   const requestIntervalFn = () => {
     const chartEditStore = useChartEditStore()
 
@@ -41,9 +58,6 @@ export const useChartDataFetch = (
       requestInterval: targetInterval
     } = toRefs(targetComponent.request)
 
-    // 组件类型
-    const { chartFrame } = targetComponent.chartConfig
-
     // 非请求类型
     if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
 
@@ -58,16 +72,11 @@ export const useChartDataFetch = (
         clearInterval(fetchInterval)
 
         const fetchFn = async () => {
-          const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.requestGlobalConfig))
+          const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
           if (res) {
             try {
               const filter = targetComponent.filter
-              // eCharts 组件配合 vChart 库更新方式
+              echartsUpdateHandle(newFunctionHandle(res?.data, res, filter))
-              if (chartFrame === ChartFrameEnum.ECHARTS) {
-                if (vChartRef.value) {
-                  vChartRef.value.setOption({ dataset: newFunctionHandle(res?.data, res, filter) })
-                }
-              }
               // 更新回调函数
               if (updateCallback) {
                 updateCallback(newFunctionHandle(res?.data, res, filter))
@@ -94,6 +103,11 @@ export const useChartDataFetch = (
     }
   }
 
-  isPreview() && requestIntervalFn()
+  if (isPreview()) {
+    // 判断是否有数据池对应 id
+    requestDataPondId
+      ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
+      : requestIntervalFn()
+  }
   return { vChartRef }
 }

src/hooks/useChartDataPondFetch.hook.ts

@@ -0,0 +1,93 @@
+import { toRaw } from 'vue'
+import { customizeHttp } from '@/api/http'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { RequestGlobalConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { newFunctionHandle } from '@/utils'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// 数据池存储的数据类型
+type DataPondMapType = {
+  updateCallback: (...args: any) => any
+  filter?: string | undefined
+}
+
+// 数据池 Map 中请求对应 callback
+const mittDataPondMap = new Map<string, DataPondMapType[]>()
+
+// 创建单个数据项轮询接口
+const newPondItemInterval = (
+  requestGlobalConfig: RequestGlobalConfigType,
+  requestDataPondItem: RequestDataPondItemType,
+  dataPondMapItem?: DataPondMapType[]
+) => {
+  if (!dataPondMapItem) return
+
+  // 请求
+  const fetchFn = async () => {
+    try {
+      const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig))
+
+      if (res) {
+        try {
+          // 遍历更新回调函数
+          dataPondMapItem.forEach(item => {
+            item.updateCallback(newFunctionHandle(res?.data, res, item.filter))
+          })
+        } catch (error) {
+          console.error(error)
+          return error
+        }
+      }
+    } catch (error) {
+      return error
+    }
+  }
+
+  // 立即调用
+  fetchFn()
+}
+
+/**
+ * 数据池接口处理
+ */
+export const useChartDataPondFetch = () => {
+  // 新增全局接口
+  const addGlobalDataInterface = (
+    targetComponent: CreateComponentType,
+    useChartEditStore: ChartEditStoreType,
+    updateCallback: (...args: any) => any
+  ) => {
+    const chartEditStore = useChartEditStore()
+    const { requestDataPond } = chartEditStore.getRequestGlobalConfig
+
+    // 组件对应的数据池 Id
+    const requestDataPondId = '111' || (targetComponent.request.requestDataPondId as string)
+    // 新增数据项
+    const mittPondIdArr = mittDataPondMap.get(requestDataPondId) || []
+    mittPondIdArr.push({
+      updateCallback: updateCallback,
+      filter: targetComponent.filter
+    })
+    mittDataPondMap.set(requestDataPondId, mittPondIdArr)
+  }
+
+  // 初始化数据池
+  const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => {
+    const { requestDataPond } = requestGlobalConfig
+    // 根据 mapId 查找对应的数据池配置
+    for (let pondKey of mittDataPondMap.keys()) {
+      const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey)
+      if (requestDataPondItem) {
+        newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
+      }
+    }
+  }
+
+  return {
+    addGlobalDataInterface,
+    initDataPond
+  }
+}

src/plugins/icon.ts

@@ -63,7 +63,8 @@ import {
   Images as ImagesIcon,
   List as ListIcon,
   EyeOutline as EyeOutlineIcon,
-  EyeOffOutline as EyeOffOutlineIcon
+  EyeOffOutline as EyeOffOutlineIcon,
+  Albums as AlbumsIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -95,7 +96,8 @@ import {
   Carbon3DCursor as Carbon3DCursorIcon,
   Carbon3DSoftware as Carbon3DSoftwareIcon,
   Filter as FilterIcon,
-  FilterEdit as FilterEditIcon
+  FilterEdit as FilterEditIcon,
+  Laptop as LaptopIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -228,7 +230,9 @@ const ionicons5 = {
   ListIcon,
   // 眼睛
   EyeOutlineIcon,
-  EyeOffOutlineIcon
+  EyeOffOutlineIcon,
+  // 图表列表 
+  AlbumsIcon
 }
 
 const carbon = {
@@ -279,7 +283,9 @@ const carbon = {
   Carbon3DSoftwareIcon,
   // 过滤器
   FilterIcon,
-  FilterEditIcon
+  FilterEditIcon,
+  // 图层
+  LaptopIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -150,16 +150,27 @@ type RequestPublicConfigType = {
   requestParams: RequestParams
 }
 
+// 数据池项类型
+export type RequestDataPondItemType = {
+  dataPondId: string,
+  dataPondName: string,
+  dataPondRequestConfig: RequestConfigType
+}
+
 // 全局的图表请求配置
 export interface RequestGlobalConfigType extends RequestPublicConfigType {
   // 组件定制轮询时间
   requestInterval: number
   // 请求源地址
   requestOriginUrl?: string
+  // 公共数据池
+  requestDataPond: RequestDataPondItemType[]
 }
 
 // 单个图表请求配置
 export interface RequestConfigType extends RequestPublicConfigType {
+  // 所选全局数据池的对应 id
+  requestDataPondId?: string
   // 组件定制轮询时间
   requestInterval?: number
   // 获取数据的方式

src/store/modules/chartEditStore/chartEditStore.ts

@@ -113,6 +113,7 @@ export const useChartEditStore = defineStore({
     },
     // 数据请求处理（需存储给后端）
     requestGlobalConfig: {
+      requestDataPond: [],
       requestOriginUrl: '',
       requestInterval: requestInterval,
       requestIntervalUnit: requestIntervalUnit,

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -1,3 +1,8 @@
+export enum ChartModeEnum {
+  SINGLE= 'single',
+  DOUBLE = 'double'
+}
+
 export enum LayerModeEnum {
   THUMBNAIL = 'thumbnail',
   TEXT = 'text'
@@ -7,6 +12,7 @@ export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',
   DETAILS = 'details',
+  Chart_TYPE = 'chartType',
   LAYER_TYPE = 'layerType'
 }
 
@@ -17,6 +23,8 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.CHARTS]: boolean
   // 详情设置
   [ChartLayoutStoreEnum.DETAILS]: boolean
+  // 组件展示方式
+  [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum
   // 层级展示方式
   [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ChartLayoutType, LayerModeEnum } from './chartLayoutStore.d'
+import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -21,6 +21,8 @@ export const useChartLayoutStore = defineStore({
       charts: true,
       // 详情设置（收缩为true）
       details: false,
+      // 组件列表展示类型（默认单列）
+      chartType: ChartModeEnum.SINGLE,
       // 图层类型（默认图片）
       layerType: LayerModeEnum.THUMBNAIL
     },
@@ -34,6 +36,9 @@ export const useChartLayoutStore = defineStore({
     getDetails(): boolean {
       return this.details
     },
+    getChartType(): ChartModeEnum {
+      return this.chartType
+    },
     getLayerType(): LayerModeEnum {
       return this.layerType
     }

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-content-charts-item-box">
+  <div class="go-content-charts-item-box" :class="{ double: chartMode === ChartModeEnum.DOUBLE }">
     <!-- 每一项组件的渲染 -->
     <div
       class="item-box"
@@ -11,21 +11,30 @@
       @dblclick="dblclickHandle(item)"
     >
       <div class="list-header">
-        <mac-os-control-btn :mini="true" :disabled="true"></mac-os-control-btn>
+        <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
-        <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
+        <n-text class="list-header-text" depth="3">
+          <n-ellipsis>{{ item.title }}</n-ellipsis>
+        </n-text>
       </div>
       <div class="list-center go-flex-center">
         <img class="list-img" v-lazy="item.image" alt="图表图片" />
       </div>
+      <div class="list-bottom">
+        <n-text class="list-bottom-text" depth="3">
+          <n-ellipsis style="max-width: 90%">{{ item.title }}</n-ellipsis>
+        </n-text>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, Ref, computed } from 'vue'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
@@ -41,6 +50,13 @@ defineProps({
   }
 })
 
+const chartLayoutStore = useChartLayoutStore()
+
+// 组件展示状态
+const chartMode: Ref<ChartModeEnum> = computed(() => {
+  return chartLayoutStore.getChartType
+})
+
 // 拖拽处理
 const dragStartHandle = (e: DragEvent, item: ConfigType) => {
   // 动态注册图表组件
@@ -80,13 +96,19 @@ const dblclickHandle = async (item: ConfigType) => {
 
 <style lang="scss" scoped>
 /* 列表项宽度 */
-$itemWidth: 86%;
+$itemWidth: 100%;
+$halfItemWidth: 46%;
 /* 内容高度 */
 $centerHeight: 100px;
+$halfCenterHeight: 50px;
 @include go('content-charts-item-box') {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 9px;
+  padding: 10px;
   .item-box {
-    margin: 0 7%;
+    margin: 0;
-    margin-bottom: 15px;
     width: $itemWidth;
     overflow: hidden;
     border-radius: 6px;
@@ -122,6 +144,39 @@ $centerHeight: 100px;
         @extend .go-transition;
       }
     }
+    .list-bottom {
+      display: none;
+      .list-bottom-text {
+        font-size: 12px;
+        padding-left: 5px;
+      }
+    }
+  }
+  /* 缩小展示 */
+  &.double {
+    .list-header {
+      padding: 2px 5px;
+      .list-header-text {
+        display: none;
+      }
+      .list-header-control-btn {
+        transform: scale(0.7);
+      }
+    }
+    .item-box {
+      width: $halfItemWidth;
+    }
+    .list-center {
+      height: $halfCenterHeight;
+      padding-bottom: 0px;
+      .list-img {
+        height: $halfCenterHeight;
+        width: auto;
+      }
+    }
+    .list-bottom {
+      display: block;
+    }
   }
 }
 </style>

src/views/chart/ContentCharts/components/ChartsOptionContent/index.vue

@@ -123,7 +123,6 @@ $menuWidth: 65px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 10px 0;
   }
   @include deep() {
     .n-menu-item {

src/views/chart/ContentCharts/components/ChartsSearch/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="go-chart-search">
+  <div class="go-chart-search-box">
+    <div class="chart-search go-transition" :class="{ 'chart-search-focus': isFocus }">
       <n-popover
         class="chart-search-popover"
         :show-arrow="false"
@@ -11,10 +12,12 @@
         <template #trigger>
           <n-input-group>
             <n-input
-            v-model:value.trim="search"
               size="small"
+              placeholder="搜索组件"
+              v-model:value.trim="search"
               :loading="loading"
-            placeholder="请输入组件名称"
+              @focus="focusHandle(true)"
+              @blur="focusHandle(false)"
               @update:value="searchHandle"
             >
               <template #suffix>
@@ -26,11 +29,7 @@
 
         <div class="search-list-box">
           <n-scrollbar style="max-height: 500px">
-          <n-empty
+            <n-empty v-show="!searchRes.length" size="small" description="没有找到组件~"></n-empty>
-            v-show="!searchRes.length"
-            size="small"
-            description="没有找到组件~"
-          ></n-empty>
             <div
               class="list-item go-flex-items-center go-ellipsis-1"
               v-for="item in searchRes"
@@ -46,37 +45,60 @@
         </div>
       </n-popover>
     </div>
+    <n-button-group class="btn-group go-transition" :class="{ 'btn-group-focus': isFocus }" style="display: flex">
+      <n-button
+        ghost
+        size="small"
+        :key="index"
+        :type="chartMode === item.value ? 'primary' : 'tertiary'"
+        v-for="(item, index) in chartModeList"
+        @click="changeChartModeType(item.value)"
+      >
+        <n-tooltip :show-arrow="false" trigger="hover">
+          <template #trigger>
+            <n-icon size="14" :component="item.icon" />
+          </template>
+          {{ item.label }}
+        </n-tooltip>
+      </n-button>
+    </n-button-group>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
 import { icon } from '@/plugins'
+import { createComponent } from '@/packages'
+import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import { themeColor, MenuOptionsType } from '../../hooks/useAside.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ConfigType, CreateComponentType } from '@/packages/index.d'
+import { ChartModeEnum, ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { createComponent } from '@/packages'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { isString, addEventListener, removeEventListener } from '@/utils'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
-import {
+import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
-  componentInstall,
-  loadingStart,
-  loadingFinish,
-  loadingError,
-} from '@/utils'
 
 const props = defineProps({
   menuOptions: {
     type: Array,
-    default: () => [],
+    default: () => []
-  },
+  }
 })
 
-const { SearchIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
+const chartLayoutStore = useChartLayoutStore()
+const { SearchIcon, AlbumsIcon, GridIcon } = icon.ionicons5
+const isFocus = ref<boolean>(false)
 const showPopover = ref<boolean>(false)
 const loading = ref<boolean | undefined>(undefined)
 const search = ref<string | null>(null)
 const searchRes = ref<ConfigType[]>([])
+const chartMode = ref<ChartModeEnum>(chartLayoutStore.getChartType)
+
+const chartModeList = [
+  { label: '单列', icon: AlbumsIcon, value: ChartModeEnum.SINGLE },
+  { label: '双列', icon: GridIcon, value: ChartModeEnum.DOUBLE }
+]
 
 // 组件数组提取
 const listFormatHandle = (options: any[]) => {
@@ -106,9 +128,7 @@ const searchHandle = (key: string | null) => {
   }
   loading.value = true
   showPopover.value = true
-  searchRes.value = List.filter(
+  searchRes.value = List.filter((e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase()))
-    (e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase())
-  )
   setTimeout(() => {
     loading.value = undefined
   }, 500)
@@ -145,6 +165,17 @@ const selectChartHandle = async (item: ConfigType) => {
   }
 }
 
+// 聚焦设置
+const focusHandle = (value: boolean) => {
+  isFocus.value = value
+}
+
+// 修改图表展示方式
+const changeChartModeType = (value: ChartModeEnum) => {
+  chartMode.value = value
+  chartLayoutStore.setItem(ChartLayoutStoreEnum.Chart_TYPE, value)
+}
+
 addEventListener(document, 'click', (e: Event) => {
   listenerCloseHandle(e)
 })
@@ -155,13 +186,29 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$width: 178px;
+$width: 98px;
-@include go('chart-search') {
+$searchWidth: 176px;
+
+@include go('chart-search-box') {
+  display: flex;
+  .chart-search {
     width: $width;
-  margin-right: -12px;
+    margin-right: 10px;
+    &.chart-search-focus {
+      width: $searchWidth;
+      &.chart-search {
+        margin-right: 0;
+      }
+    }
+    @include deep() {
+      .chart-search-popover {
+        padding-left: 5px;
+        padding-right: 8px;
+      }
+    }
     .chart-search-popover {
       .search-list-box {
-      width: calc(#{$width} - 30px);
+        width: 163px;
         .list-item {
           z-index: 2;
           position: relative;
@@ -204,5 +251,13 @@ $width: 178px;
         }
       }
     }
+  }
+  .btn-group {
+    width: 68px;
+    overflow: hidden;
+    &.btn-group-focus {
+      width: 0px;
+    }
+  }
 }
 </style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -125,7 +125,7 @@ const sendHandle = async () => {
   if (!targetData.value?.request) return
   loading.value = true
   try {
-    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     loading.value = false
     if (res) {
       if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -102,12 +102,11 @@
 
 <script lang="ts" setup>
 import { ref, computed, watch, toRefs, toRaw } from 'vue'
-import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { RequestHttpEnum, RequestDataTypeEnum, ResultEnum } from '@/enums/httpEnum'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { icon } from '@/plugins'
 import { goDialog, toString } from '@/utils'
-import { http, customizeHttp } from '@/api/http'
+import { customizeHttp } from '@/api/http'
 import cloneDeep from 'lodash/cloneDeep'
 
 const { DocumentTextIcon } = icon.ionicons5
@@ -128,7 +127,7 @@ const sourceData = ref<any>('')
 // 动态获取数据
 const fetchTargetData = async () => {
   try {
-    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     if (res) {
       sourceData.value = res
       return

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -3,8 +3,9 @@
   <n-divider class="go-my-3" title-placement="left"></n-divider>
   <setting-item-box
     :itemRightStyle="{
-      gridTemplateColumns: '5fr 2fr 1fr'
+      gridTemplateColumns: '6fr 2fr'
     }"
+    style="padding-right: 25px;"
   >
     <template #name>
       地址
@@ -134,7 +135,7 @@ const apiList = [
   },
   {
     value: `【三维地球】${threeEarth01Url}`
-  },
+  }
 ]
 </script>
 

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

@@ -11,23 +11,20 @@ const chartEditStore = useChartEditStore()
 
 // 侦听器更新
 const useSyncUpdateHandle = () => {
-  const routerParamsInfo = useRoute()
   // 定义侦听器变量
   let timer: any
   const updateFn = (e: any) => updateComponent(e!.detail, true, false)
-  const syncData = () => {
+  const syncData = async () => {
-    if (routerParamsInfo.name == ChartEnum.CHART_HOME_NAME) {
     dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
   }
-  }
 
   // 开启侦听
   const use = () => {
-    // 1、定时同步数据
+    // // 1、定时同步数据
-    timer = setInterval(() => {
+    // timer = setInterval(() => {
-      // 窗口激活并且处于工作台
+    //   // 窗口激活并且处于工作台
-      document.hasFocus() && syncData()
+    //   document.hasFocus() && syncData()
-    }, editToJsonInterval)
+    // }, editToJsonInterval)
     // 2、失焦同步数据
     addEventListener('blur', syncData)
 
@@ -37,7 +34,7 @@ const useSyncUpdateHandle = () => {
 
   // 关闭侦听
   const unUse = () => {
-    clearInterval(timer)
+    // clearInterval(timer)
     removeEventListener(SavePageEnum.JSON, updateFn)
     removeEventListener('blur', syncData)
   }

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

@@ -137,7 +137,8 @@ const toolsMouseoutHandle = () => {
 
 // 编辑处理
 const editHandle = () => {
-  window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
+  window['$message'].warning('将开启失焦更新！')
+//   window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
   setTimeout(() => {
     // 获取id路径
     const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')

src/views/chart/ContentLayers/index.vue

@@ -81,12 +81,13 @@ import { LayersGroupListItem } from './components/LayersGroupListItem/index'
 import { icon } from '@/plugins'
 
 const { LayersIcon, GridIcon, ListIcon } = icon.ionicons5
+const { LaptopIcon } = icon.carbon
 const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 const { handleContextMenu, onClickOutSide } = useContextMenu()
 
 const layerModeList = [
-  { label: '缩略图', icon: GridIcon, value: LayerModeEnum.THUMBNAIL },
+  { label: '缩略图', icon: LaptopIcon, value: LayerModeEnum.THUMBNAIL },
   { label: '文本列表', icon: ListIcon, value: LayerModeEnum.TEXT }
 ]
 

src/views/edit/index.vue

@@ -44,14 +44,13 @@ import { icon } from '@/plugins'
 
 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
-let content = ref('')
+const content = ref('')
-
 // 从sessionStorage 获取数据
-function getDataBySession() {
+async function getDataBySession() {
-  const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+  const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
   content.value = JSON.stringify(localStorageInfo, undefined, 2)
 }
-getDataBySession()
+setTimeout(getDataBySession)
 
 // 返回父窗口
 function back() {
@@ -86,7 +85,7 @@ document.addEventListener('keydown', function (e) {
 addEventListener('blur', updateSync)
 
 // 同步更新
-function updateSync() {
+async function updateSync() {
   if (!window.opener) {
     return window['$message'].error('源窗口已关闭，视图同步失败')
   }

src/views/preview/components/PreviewRenderList/index.vue

@@ -10,7 +10,7 @@
       ...getTransformStyle(item.styles),
       ...getStatusStyle(item.status),
       ...getBlendModeStyle(item.styles) as any
-    } as any"
+    }"
   >
     <!-- 分组 -->
     <preview-render-group
@@ -36,7 +36,8 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, onMounted } from 'vue'
+import { useChartDataPondFetch } from '@/hooks'
 import { ChartEditStorageType } from '../../index.d'
 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { CreateComponentGroupType } from '@/packages/index.d'
@@ -45,6 +46,9 @@ import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle }
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
 
+// 初始化数据池
+const { initDataPond } = useChartDataPondFetch()
+
 const props = defineProps({
   localStorageInfo: {
     type: Object as PropType<ChartEditStorageType>,
@@ -63,6 +67,11 @@ const themeColor = computed(() => {
   const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor
   return chartColors[chartThemeColor]
 })
+
+// 组件渲染结束初始化数据池
+onMounted(() => {
+  initDataPond(props.localStorageInfo.requestGlobalConfig)
+})
 </script>
 
 <style lang="scss" scoped>

src/views/preview/wrapper.vue

@@ -12,12 +12,12 @@ import { ref } from 'vue'
 import Preview from './index.vue'
 
 let key = ref(Date.now())
-let localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
 
-// 数据变更 -> 同步sessionStorage -> reload页面 （重新执行Mounted）
+// 数据变更 -> 组件销毁重建
 ;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
   if (!window.opener) return
-  window.opener.addEventListener(saveEvent, (e: any) => {
+  window.opener.addEventListener(saveEvent, async (e: any) => {
+    const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
     setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
     key.value = Date.now()
   })