Merge branch 'master-fetch' of https://gitee.com/dromara/go-view

2024-02-29 10:16:00 +08:00 · 2024-02-29 10:16:00 +08:00 · 382fe3b7ea
commit 382fe3b7ea
parent 78d7ece20e 81e2e4784d
37 changed files with 1597 additions and 1168 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,4 @@ node_modules
 dist-ssr
 *.local
 .vscode
+.idea
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "go-view",
-  "version": "2.2.4",
+  "version": "2.2.7",
  "engines": {
    "node": ">=12.0"
  },
@ -16,6 +16,7 @@
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@amap/amap-jsapi-types": "^0.0.8",
+    "@iconify/json": "^2.2.158",
    "@types/color": "^3.0.3",
    "@types/crypto-js": "^4.1.1",
    "@types/keymaster": "^1.6.30",
@ -32,6 +33,7 @@
    "gsap": "^3.11.3",
    "highlight.js": "^11.5.0",
    "html2canvas": "^1.4.1",
+    "iconify-icon": "^1.0.8",
    "keymaster": "^1.6.2",
    "mitt": "^3.0.0",
    "monaco-editor": "^0.33.0",
@ -41,7 +43,7 @@
    "three": "^0.145.0",
    "vue": "^3.2.31",
    "vue-demi": "^0.13.1",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "9.2.2",
    "vue-router": "4.0.12",
    "vue3-lazyload": "^0.2.5-beta",
    "vue3-sketch-ruler": "^1.3.3",
@ -50,8 +52,6 @@
  "devDependencies": {
    "@commitlint/cli": "^17.0.2",
    "@commitlint/config-conventional": "^17.0.2",
-    "@iconify/types": "^2.0.0",
-    "@iconify/vue": "^4.1.1",
    "@types/node": "^16.11.26",
    "@types/three": "^0.144.0",
    "@typescript-eslint/eslint-plugin": "^5.18.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@ -33,5 +33,5 @@ useSystemInit()

 // 全局语言
 const { locale, dateLocale } = useLang()
-
+//测试提交
 </script>
--- a/src/components/GoIconify/index.ts
+++ b/src/components/GoIconify/index.ts
@ -0,0 +1,3 @@
+import GoIconify from './index.vue';
+
+export { GoIconify };
--- a/src/components/GoIconify/index.vue
+++ b/src/components/GoIconify/index.vue
@ -0,0 +1,34 @@
+<template>
+  <iconify-icon
+    :icon="icon"
+    :rotate="`${rotate}deg`"
+    :width="width"
+    :style="{
+      color: color
+    }"
+  ></iconify-icon>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: '#999999',
+    required: false
+  },
+  width: {
+    type: [String, Number],
+    default: '20',
+    required: false
+  },
+  rotate: {
+    type: [String, Number],
+    default: '0',
+    required: false
+  }
+})
+</script>
--- a/src/hooks/useChartDataFetch.hook.ts
+++ b/src/hooks/useChartDataFetch.hook.ts
@ -119,7 +119,10 @@ export const useChartDataFetch = (

  if (isPreview()) {
    targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
-      ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
+      ? addGlobalDataInterface(targetComponent, useChartEditStore, (newData: any) => {
+          echartsUpdateHandle(newData)
+          if (updateCallback) updateCallback(newData)
+        })
      : requestIntervalFn()
  } else {
    requestIntervalFn()
--- a/src/hooks/useChartDataPondFetch.hook.ts
+++ b/src/hooks/useChartDataPondFetch.hook.ts
@ -116,7 +116,7 @@ export const useChartDataPondFetch = () => {
      const requestDataPondItem = computed(() => {
        return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
      }) as ComputedRef<RequestDataPondItemType>
-      if (requestDataPondItem) {
+      if (requestDataPondItem.value) {
        newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
      }
    }
--- a/src/main.ts
+++ b/src/main.ts
@ -1,59 +1,67 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router, { setupRouter } from '@/router'
-import i18n from '@/i18n/index'
-import { setupStore } from '@/store'
-import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
-import { GoAppProvider } from '@/components/GoAppProvider/index'
-import { setHtmlTheme } from '@/utils'
-
-// 引入全局样式
-import '@/styles/pages/index.scss'
-// 引入动画
-import 'animate.css/animate.min.css'
-// 引入标尺
-import 'vue3-sketch-ruler/lib/style.css'
-
-async function appInit() {
-  const goAppProvider = createApp(GoAppProvider)
-
-  const app = createApp(App)
-
-  // 注册全局常用的 naive-ui 组件
-  setupNaive(app)
-
-  // 注册全局自定义指令
-  setupDirectives(app)
-
-  // 注册全局自定义组件
-  setupCustomComponents(app)
-
-  // 挂载状态管理
-  setupStore(app)
-
-  // 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
-  goAppProvider.mount('#appProvider', true)
-
-  // 挂载路由
-  setupRouter(app)
-
-  // 路由准备就绪后挂载APP实例
-  await router.isReady()
-
-  // Store 准备就绪后处理主题色
-  setHtmlTheme()
-
-  // 语言注册
-  app.use(i18n)
-
-  // 挂载到页面
-  app.mount('#app', true)
-
-  // 挂载到 window
-  window['$vue'] = app
-}
-
-appInit().then(() => {
-  initFunction()
-})
-
+import { createApp } from 'vue'
+import App from './App.vue'
+import router, { setupRouter } from '@/router'
+import i18n from '@/i18n/index'
+import { setupStore } from '@/store'
+import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
+import { GoAppProvider } from '@/components/GoAppProvider/index'
+import { setHtmlTheme } from '@/utils'
+import { addCollection } from 'iconify-icon'
+import uimIcons from '@iconify/json/json/uim.json'
+import lineMdIcons from '@iconify/json/json/line-md.json'
+import wiIcons from '@iconify/json/json/wi.json'
+
+// 引入全局样式
+import '@/styles/pages/index.scss'
+// 引入动画
+import 'animate.css/animate.min.css'
+// 引入标尺
+import 'vue3-sketch-ruler/lib/style.css'
+// 注册图标
+addCollection(uimIcons)
+addCollection(lineMdIcons)
+addCollection(wiIcons)
+
+async function appInit() {
+  const goAppProvider = createApp(GoAppProvider)
+
+  const app = createApp(App)
+
+  // 注册全局常用的 naive-ui 组件
+  setupNaive(app)
+
+  // 注册全局自定义指令
+  setupDirectives(app)
+
+  // 注册全局自定义组件
+  setupCustomComponents(app)
+
+  // 挂载状态管理
+  setupStore(app)
+
+  // 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
+  goAppProvider.mount('#appProvider', true)
+
+  // 挂载路由
+  setupRouter(app)
+
+  // 路由准备就绪后挂载APP实例
+  await router.isReady()
+
+  // Store 准备就绪后处理主题色
+  setHtmlTheme()
+
+  // 语言注册
+  app.use(i18n)
+
+  // 挂载到页面
+  app.mount('#app', true)
+
+  // 挂载到 window
+  window['$vue'] = app
+}
+
+appInit().then(() => {
+  initFunction()
+})
+
--- a/src/packages/components/Charts/Maps/MapBase/config.ts
+++ b/src/packages/components/Charts/Maps/MapBase/config.ts
@ -11,7 +11,10 @@ export const option = {
  dataset: dataJson,
  mapRegion: {
    adcode: 'china',
-    showHainanIsLands: true
+    showHainanIsLands: true,
+    enter: false,
+    backSize: 20,
+    backColor: '#ffffff'
  },
  tooltip: {
    show: true,
@ -103,19 +106,19 @@ export const option = {
        borderColor: 'rgba(147, 235, 248, 0.8)',
        textStyle: {
          color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
        }
      },
      label: {
        show: false,
        color: '#FFFFFF',
-        fontSize: 12,
+        fontSize: 12
      },
      emphasis: {
        disabled: false,
        label: {
          color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
        },
        itemStyle: {
          areaColor: '#389BB7',
@ -148,6 +151,26 @@ export const option = {
        shadowOffsetY: 2,
        shadowBlur: 10
      }
+    },
+    {
+      type: 'lines',
+      zlevel: 2,
+      effect: {
+        show: true,
+        period: 4, //箭头指向速度，值越小速度越快
+        trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
+        symbol: 'arrow', //箭头图标
+        symbolSize: 7 //图标大小
+      },
+      lineStyle: {
+        normal: {
+          color: '#4fb6d2',
+          width: 1, //线条宽度
+          opacity: 0.1, //尾迹线条透明度
+          curveness: 0.3 //尾迹线条曲直度
+        }
+      },
+      data: []
    }
  ]
 }
--- a/src/packages/components/Charts/Maps/MapBase/config.vue
+++ b/src/packages/components/Charts/Maps/MapBase/config.vue
@ -69,11 +69,7 @@
        </n-space>
      </SettingItem>
      <SettingItem name="字体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[1].label.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].label.color"></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小">
        <n-input-number
@ -129,7 +125,7 @@
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
-    
+
    <SettingItemBox name="悬浮弹窗">
      <SettingItem name="显示">
        <n-space>
@ -180,6 +176,22 @@
      <SettingItem>
        <n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
      </SettingItem>
+      <SettingItem v-if="seriesList[2]">
+        <n-checkbox v-model:checked="mapRegion.enter" size="small">点击进入下级</n-checkbox>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="返回图标" v-if="mapRegion.enter">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="mapRegion.backColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="mapRegion.backSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem name="标记" :expanded="true">
@ -191,7 +203,7 @@
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
      </SettingItem>
    </SettingItemBox>
-      
+
    <SettingItemBox name="文本">
      <SettingItem name="显示">
        <n-space>
@ -223,6 +235,47 @@
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
+
+  <CollapseItem v-if="seriesList[2]" name="飞线" :expanded="true">
+    <SettingItemBox name="箭头">
+      <SettingItem name="速度">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>
+          </template>
+          值越小速度越快
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="尾迹">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number
+              v-model:value="seriesList[2].effect.trailLength"
+              size="small"
+              :min="0"
+              :max="1"
+            ></n-input-number>
+          </template>
+          特效尾迹长度[0,1]值越大，尾迹越长重
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="配置">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[2].lineStyle.normal.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>

 <script setup lang="ts">
--- a/src/packages/components/Charts/Maps/MapBase/data.json
+++ b/src/packages/components/Charts/Maps/MapBase/data.json
@ -21,6 +21,32 @@
      "value": [126.642464, 45.756967, 101]
    }
  ],
+  "line": [
+    {
+      "coords": [
+        [113.665412, 34.757975],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [101.778916, 36.623178],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [106.278179, 38.46637],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [126.642464, 45.756967],
+        [116.405285, 39.904989]
+      ]
+    }
+  ],
  "map": [
    {
      "name": "北京市",
--- a/src/packages/components/Charts/Maps/MapBase/index.vue
+++ b/src/packages/components/Charts/Maps/MapBase/index.vue
@ -1,156 +1,256 @@
-<template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
-  </v-chart>
-</template>
-
-<script setup lang="ts">
-import { PropType, reactive, watch, ref, nextTick } from 'vue'
-import config, { includes } from './config'
-import VChart from 'vue-echarts'
-import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
-import { use, registerMap } from 'echarts/core'
-import { EffectScatterChart, MapChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { useChartDataFetch } from '@/hooks'
-import { mergeTheme, setOption } from '@/packages/public/chart'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
-import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<config>,
-    required: true
-  }
-})
-
-const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
-use([
-  MapChart,
-  DatasetComponent,
-  CanvasRenderer,
-  GridComponent,
-  TooltipComponent,
-  GeoComponent,
-  EffectScatterChart,
-  VisualMapComponent
-])
-
-const option = reactive({
-  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-const vChartRef = ref<typeof VChart>()
-
-//动态获取json注册地图
-const getGeojson = (regionId: string) => {
-  return new Promise<boolean>(resolve => {
-    import(`./mapGeojson/${regionId}.json`).then(data => {
-      registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
-      resolve(true)
-    })
-  })
-}
-
-//异步时先注册空的 保证初始化不报错
-registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
-
-// 进行更换初始化地图 如果为china 单独处理
-const registerMapInitAsync = async () => {
-  await nextTick()
-  const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
-  if (adCode !== 'china') {
-    await getGeojson(adCode)
-  } else {
-    await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
-  }
-  vEchartsSetOption()
-}
-registerMapInitAsync()
-
-// 手动触发渲染
-const vEchartsSetOption = () => {
-  option.value = props.chartConfig.option
-  setOption(vChartRef.value, props.chartConfig.option)
-}
-
-// 更新数据处理
-const dataSetHandle = async (dataset: any) => {
-  props.chartConfig.option.series.forEach((item: any) => {
-    if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
-    else if (item.type === 'map' && dataset.map) item.data = dataset.map
-  })
-  if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
-
-  isPreview() && vEchartsSetOption()
-}
-// 处理海南群岛
-const hainanLandsHandle = async (newData: boolean) => {
-  if (newData) {
-    await getGeojson('china')
-  } else {
-    registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
-  }
-}
-//监听 dataset 数据发生变化
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    dataSetHandle(newData)
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
-
-//监听是否显示南海群岛
-watch(
-  () => props.chartConfig.option.mapRegion.showHainanIsLands,
-  async newData => {
-    try {
-      await hainanLandsHandle(newData)
-      vEchartsSetOption()
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    deep: false
-  }
-)
-
-//监听地图展示区域发生变化
-watch(
-  () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async newData => {
-    try {
-      await getGeojson(newData)
-      props.chartConfig.option.geo.map = newData
-      props.chartConfig.option.series.forEach((item: any) => {
-        if (item.type === 'map') item.map = newData
-      })
-      vEchartsSetOption()
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    deep: false
-  }
-)
-
-// 预览
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  dataSetHandle(newData)
-})
-</script>
+<template>
+  <div>
+    <div class="back-icon" v-if="(enter && levelHistory.length !== 0) || (enter && !isPreview())" @click="backLevel">
+      <n-icon :color="backColor" :size="backSize * 1.1">
+        <ArrowBackIcon />
+      </n-icon>
+      <span
+        :style="{
+          'font-weight': 200,
+          color: backColor,
+          'font-size': `${backSize}px`
+        }"
+      >
+        返回上级
+      </span>
+    </div>
+    <v-chart
+      ref="vChartRef"
+      :init-options="initOptions"
+      :theme="themeColor"
+      :option="option.value"
+      :manual-update="isPreview()"
+      autoresize
+      @click="chartPEvents"
+    >
+    </v-chart>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch, ref, nextTick, toRefs } from 'vue'
+import config, { includes } from './config'
+import VChart from 'vue-echarts'
+import { icon } from '@/plugins'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use, registerMap } from 'echarts/core'
+import { EffectScatterChart, MapChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import { useChartDataFetch } from '@/hooks'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
+import mapChinaJson from './mapGeojson/china.json'
+import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { ArrowBackIcon } = icon.ionicons5
+let levelHistory: any = ref([])
+
+const { backColor, backSize, enter } = toRefs(props.chartConfig.option.mapRegion)
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([
+  MapChart,
+  DatasetComponent,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  GeoComponent,
+  EffectScatterChart,
+  VisualMapComponent
+])
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+const vChartRef = ref<typeof VChart>()
+
+//动态获取json注册地图
+const getGeojson = (regionId: string) => {
+  return new Promise<boolean>(resolve => {
+    import(`./mapGeojson/${regionId}.json`).then(data => {
+      registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
+      resolve(true)
+    })
+  })
+}
+
+//异步时先注册空的 保证初始化不报错
+registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
+
+// 进行更换初始化地图 如果为china 单独处理
+const registerMapInitAsync = async () => {
+  await nextTick()
+  const adCode = `${props.chartConfig.option.mapRegion.adcode}`
+  if (adCode !== 'china') {
+    await getGeojson(adCode)
+  } else {
+    await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
+  }
+  vEchartsSetOption()
+}
+registerMapInitAsync()
+
+// 手动触发渲染
+const vEchartsSetOption = () => {
+  option.value = props.chartConfig.option
+  setOption(vChartRef.value, props.chartConfig.option)
+}
+
+// 更新数据处理
+const dataSetHandle = async (dataset: any) => {
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
+    else if (item.type === 'lines' && dataset.line) {
+      item.data = dataset.line.map((it: any) => {
+        return {
+          ...it,
+          lineStyle: {
+            color: props.chartConfig.option.series[2].lineStyle.normal.color
+          }
+        }
+      })
+    } else if (item.type === 'map' && dataset.map) item.data = dataset.map
+  })
+  if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
+
+  isPreview() && vEchartsSetOption()
+}
+// 处理海南群岛
+const hainanLandsHandle = async (newData: boolean) => {
+  if (newData) {
+    await getGeojson('china')
+  } else {
+    registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
+  }
+}
+
+// 点击区域
+const chartPEvents = (e: any) => {
+  if (e.seriesType !== 'map') return
+  if (!props.chartConfig.option.mapRegion.enter) {
+    return
+  }
+  mapChinaJson.features.forEach(item => {
+    var pattern = new RegExp(e.name)
+    if (pattern.test(item.properties.name)) {
+      let code = String(item.properties.adcode)
+      levelHistory.value.push(code)
+      checkOrMap(code)
+    }
+  })
+}
+
+// 返回上一级
+const backLevel = () => {
+  levelHistory.value = []
+  if (levelHistory.value.length > 1) {
+    levelHistory.value.pop()
+    const code = levelHistory[levelHistory.value.length - 1]
+    checkOrMap(code)
+  } else {
+    checkOrMap('china')
+  }
+}
+
+// 切换地图
+const checkOrMap = async (newData: string) => {
+  await getGeojson(newData)
+  props.chartConfig.option.geo.map = newData
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'map') item.map = newData
+  })
+  vEchartsSetOption()
+}
+
+//监听 dataset 数据发生变化
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 监听线的颜色
+if (props.chartConfig.option.series[2] && !isPreview()) {
+  watch(
+    () => props.chartConfig.option.series[2].lineStyle.normal.color,
+    () => {
+      dataSetHandle(props.chartConfig.option.dataset)
+    },
+    {
+      deep: false
+    }
+  )
+}
+
+//监听是否显示南海群岛
+if (!isPreview()) {
+  watch(
+    () => props.chartConfig.option.mapRegion.showHainanIsLands,
+    async newData => {
+      try {
+        await hainanLandsHandle(newData)
+        vEchartsSetOption()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    {
+      deep: false
+    }
+  )
+}
+//监听地图展示区域发生变化
+watch(
+  () => `${props.chartConfig.option.mapRegion.adcode}`,
+  newData => {
+    try {
+      checkOrMap(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
+</script>
+
+<style scope lang="scss">
+.back-icon {
+  z-index: 50;
+  cursor: pointer;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: 0;
+  gap: 2px;
+}
+</style>
--- a/src/packages/components/Charts/Mores/Funnel/index.vue
+++ b/src/packages/components/Charts/Mores/Funnel/index.vue
@ -1,44 +1,52 @@
-<template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-</template>
-
-<script setup lang="ts">
-import { computed, PropType } from 'vue'
-import VChart from 'vue-echarts'
-import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { FunnelChart } from 'echarts/charts'
-import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
-import { useChartDataFetch } from '@/hooks'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
-use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
-
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
-</script>
+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="(option as EChartsOption)"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { EChartsOption } from 'echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { FunnelChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>
--- a/src/packages/components/Charts/Mores/Graph/config.ts
+++ b/src/packages/components/Charts/Mores/Graph/config.ts
@ -9,7 +9,8 @@ export const includes = []
 // 关系图布局
 export const GraphLayout = [
  { label: '无', value: 'none' },
-  { label: '环形', value: 'circular' }
+  { label: '环形', value: 'circular' },
+  { label: '力引导', value: 'force' }
 ]

 // 标签开关
@ -24,44 +25,57 @@ export const LabelPosition = [
  { label: '右侧', value: 'right' },
  { label: '顶部', value: 'top' },
  { label: '底部', value: 'bottom' },
-  { label: '内部', value: 'inside' },
+  { label: '内部', value: 'inside' }
+]
+
+// 图-迭代动画
+export const LayoutAnimation = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
 ]

 export const option = {
-    dataset: { ...dataJson },
-    tooltip: {},
-    legend:{
-      show:true,
-      textStyle:{
-        color:"#eee",
-        fontSize: 14 ,
-      },
-      data: dataJson.categories.map(function (a) {
-          return a.name;
-      })
+  dataset: { ...dataJson },
+  tooltip: {},
+  legend: {
+    show: true,
+    textStyle: {
+      color: '#eee',
+      fontSize: 14
    },
-    series: [
-      {
-        type: 'graph',
-        layout: 'none', // none circular环形布局
-        data: dataJson.nodes,
-        links: dataJson.links,
-        categories: dataJson.categories,
-        label: { // 标签
-          show: 1,
-          position: 'right',
-          formatter: '{b}'
-        },
-        labelLayout: {
-          hideOverlap: true
-        },
-        lineStyle: {
-          color: 'source', // 线条颜色
-          curveness: 0.2 // 线条卷曲程度
-        }
+    data: dataJson.categories.map(function (a) {
+      return a.name
+    })
+  },
+  series: [
+    {
+      type: 'graph',
+      layout: 'none', // none circular环形布局
+      data: dataJson.nodes,
+      links: dataJson.links,
+      categories: dataJson.categories,
+      label: {
+        show: 1,
+        position: 'right',
+        formatter: '{b}'
+      },
+      labelLayout: {
+        hideOverlap: true
+      },
+      lineStyle: {
+        color: 'source', // 线条颜色
+        curveness: 0.2 // 线条卷曲程度
+      },
+      force: {
+        repulsion: 100,
+        gravity: 0.1,
+        edgeLength: 30,
+        layoutAnimation: 1,
+        friction: 0.6
      }
-    ]
-  };
+    }
+  ]
+}

 export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = GraphConfig.key
--- a/src/packages/components/Charts/Mores/Graph/config.vue
+++ b/src/packages/components/Charts/Mores/Graph/config.vue
@ -16,14 +16,14 @@
      </SettingItemBox>
      <SettingItemBox name="线条">
        <SettingItem name="弧线">
-        <!-- 需要输入两位的小数才会变化 -->
+          <!-- 需要输入两位的小数才会变化 -->
          <n-input-number
-          v-model:value="optionData.series[0].lineStyle.curveness"
-          :min="0"
-          :step="0.01"
-          placeholder="弯曲程度"
-          size="small"
-        ></n-input-number>
+            v-model:value="optionData.series[0].lineStyle.curveness"
+            :min="0"
+            :step="0.01"
+            placeholder="弯曲程度"
+            size="small"
+          ></n-input-number>
        </SettingItem>
      </SettingItemBox>
      <SettingItemBox name="图例">
@ -32,10 +32,61 @@
            size="small"
            :modes="['hex']"
            v-model:value="optionData.legend.textStyle.color"
-        ></n-color-picker>
+          ></n-color-picker>
        </SettingItem>
        <SettingItem name="文本">
-          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          <n-input-number
+            v-model:value="optionData.legend.textStyle.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="文字大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="力引导" v-if="optionData.series[0].force && graphConfig.layout == 'force'">
+        <SettingItem name="斥力因子" v-if="optionData.series[0].force.repulsion">
+          <n-input-number
+            v-model:value="optionData.series[0].force.repulsion"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="斥力因子大小"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="引力因子" v-if="optionData.series[0].force.gravity">
+          <n-input-number
+            v-model:value="optionData.series[0].force.gravity"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="引力因子"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="节点距离">
+          <n-input-number
+            v-model:value="optionData.series[0].force.edgeLength"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="节点距离"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="迭代动画">
+          <n-select v-model:value="graphConfig.force.layoutAnimation" :options="LayoutAnimation" size="small" />
+        </SettingItem>
+        <SettingItem name="节点速度">
+          <n-input-number
+            v-model:value="optionData.series[0].force.friction"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="节点速度"
+          >
          </n-input-number>
        </SettingItem>
      </SettingItemBox>
@ -46,7 +97,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { option, GraphLayout, LabelSwitch, LabelPosition, LayoutAnimation } from './config'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'

 const props = defineProps({
@ -56,7 +107,7 @@ const props = defineProps({
  }
 })

-const graphConfig = computed<typeof option.series[0]>(() => {
+const graphConfig = computed<(typeof option.series)[0]>(() => {
  return props.optionData.series[0]
 })
 </script>
--- a/src/packages/components/Charts/Mores/Graph/index.vue
+++ b/src/packages/components/Charts/Mores/Graph/index.vue
@ -1,10 +1,18 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="(option as EChartsOption)"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>

 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { EChartsOption } from 'echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
--- a/src/packages/components/Charts/Mores/Heatmap/index.vue
+++ b/src/packages/components/Charts/Mores/Heatmap/index.vue
@ -1,95 +1,103 @@
-<template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed, PropType } from 'vue'
-import VChart from 'vue-echarts'
-import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
-import dataJson from './data.json'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { HeatmapChart } from 'echarts/charts'
-import { includes } from './config'
-import { mergeTheme, setOption } from '@/packages/public/chart'
-import { useChartDataFetch } from '@/hooks'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  VisualMapComponent
-} from 'echarts/components'
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  HeatmapChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  VisualMapComponent
-])
-
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-
-const vChartRef = ref<typeof VChart>()
-
-const dataSetHandle = (dataset: typeof dataJson) => {
-  const { seriesData, xAxis, yAxis } = dataset
-  if (xAxis) {
-    // @ts-ignore
-    props.chartConfig.option.xAxis.data = xAxis
-  }
-  if (yAxis) {
-    // @ts-ignore
-    props.chartConfig.option.yAxis.data = yAxis
-  }
-  if (seriesData) {
-    props.chartConfig.option.series[0].data = seriesData
-  }
-  if (vChartRef.value && isPreview()) {
-    setOption(vChartRef.value, props.chartConfig.option)
-  }
-}
-
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    try {
-      dataSetHandle(newData)
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    deep: false
-  }
-)
-
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
-  dataSetHandle(newData)
-})
-</script>
+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="(option as EChartsOption)"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { EChartsOption } from 'echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { HeatmapChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  VisualMapComponent
+} from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  HeatmapChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  VisualMapComponent
+])
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const vChartRef = ref<typeof VChart>()
+
+const dataSetHandle = (dataset: typeof dataJson) => {
+  const { seriesData, xAxis, yAxis } = dataset
+  if (xAxis) {
+    // @ts-ignore
+    props.chartConfig.option.xAxis.data = xAxis
+  }
+  if (yAxis) {
+    // @ts-ignore
+    props.chartConfig.option.yAxis.data = yAxis
+  }
+  if (seriesData) {
+    props.chartConfig.option.series[0].data = seriesData
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
+</script>
--- a/src/packages/components/Charts/Mores/index.ts
+++ b/src/packages/components/Charts/Mores/index.ts
@ -8,4 +8,14 @@ import { DialConfig } from './Dial/index'
 import { SankeyConfig } from './Sankey/index'
 import { GraphConfig } from './Graph/index'

-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]
+export default [
+  ProcessConfig,
+  RadarConfig,
+  FunnelConfig,
+  HeatmapConfig,
+  WaterPoloConfig,
+  TreeMapConfig,
+  GraphConfig,
+  SankeyConfig,
+  DialConfig
+]
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@ -134,7 +134,10 @@ watch(
 )

 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
-  addPieInterval(newData)
+  clearPieInterval()
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(newData)
+  }
 })

 onMounted(() => {
--- a/src/packages/components/Icons/Default/Icon/index.vue
+++ b/src/packages/components/Icons/Default/Icon/index.vue
@ -1,13 +1,13 @@
 <template>
  <div class="go-icon-box">
-    <Icon :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
+    <GoIconify :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
  </div>
 </template>

 <script setup lang="ts">
 import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { Icon } from '@iconify/vue'
+import { GoIconify } from '@/components/GoIconify'

 const props = defineProps({
  chartConfig: {
--- a/src/packages/components/Informations/Texts/TextCommon/index.vue
+++ b/src/packages/components/Informations/Texts/TextCommon/index.vue
@ -70,6 +70,7 @@ const click = () => {
  display: flex;
  align-items: center;
  justify-content: v-bind('textAlign');
+  overflow: hidden;

  .content {
    color: v-bind('fontColor');
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@ -26,6 +26,16 @@ export let packagesList: PackagesType = {
  [PackagesCategoryEnum.ICONS]: IconList
 }

+// 组件缓存, 可以大幅度提升组件加载速度
+const componentCacheMap = new Map<string, any>()
+const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
+  const key = packageName + categoryName + keyName
+  if (!componentCacheMap.has(key)) {
+    componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
+  }
+  return componentCacheMap.get(key)
+}
+
 /**
 * * 获取目标组件配置信息
 * @param targetData
@ -35,10 +45,10 @@ export const createComponent = async (targetData: ConfigType) => {
  // redirectComponent 是给图片组件库和图标组件库使用的
  if (redirectComponent) {
    const [packageName, categoryName, keyName] = redirectComponent.split('/')
-    const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
+    const redirectChart = await loadConfig(packageName, categoryName, keyName)
    return new redirectChart.default()
  }
-  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
+  const chart = await loadConfig(targetData.package, category, key)
  return new chart.default()
 }

@ -84,7 +94,7 @@ export const fetchImages = async (targetData?: ConfigType) => {
  // 正则判断图片是否为 url，是则直接返回该 url
  if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
  // 新数据动态处理
-  const { image, package: targetDataPackage } = targetData
+  const { image } = targetData
  // 兼容旧数据
  if (image.includes('@') || image.includes('base64')) return image

--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@ -182,20 +182,16 @@ export const useChartEditStore = defineStore({
    },
    getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
      return this.componentList
-    },
-    // 获取需要存储的数据项
+    }
+  },
+  actions: {
+    // * 获取需要存储的数据项
    getStorageInfo(): ChartEditStorage {
      return {
        [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
        [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
        [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
      }
-    }
-  },
-  actions: {
-    // * 设置 peojectInfo 数据项
-    setProjectInfo<T extends keyof ProjectInfoType,  K extends ProjectInfoType[T]>(key: T, value: K) {
-      this.projectInfo[key] = value
    },
    // * 设置 editCanvas 数据项
    setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
@ -205,6 +201,10 @@ export const useChartEditStore = defineStore({
    setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) {
      this.editCanvasConfig[key] = value
    },
+    // * 设置 peojectInfo 数据项
+    setProjectInfo<T extends keyof ProjectInfoType, K extends ProjectInfoType[T]>(key: T, value: K) {
+      this.projectInfo[key] = value
+    },
    // * 设置右键菜单
    setRightMenuShow(value: boolean) {
      this.rightMenuShow = value
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
@ -23,7 +23,7 @@
          </n-text>
        </div>
        <div class="list-center go-flex-center go-transition" draggable="true">
-          <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
+          <GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" style="height: auto" />
          <chart-glob-image v-else class="list-img" :chartConfig="item" />
        </div>
        <div class="list-bottom">
@ -64,7 +64,7 @@ import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
-import { Icon } from '@iconify/vue'
+import { GoIconify } from '@/components/GoIconify'
 import { icon } from '@/plugins'

 import omit from 'lodash/omit'
--- a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
@ -37,7 +37,7 @@
              :title="item.title"
              @click="selectChartHandle(item)"
            >
-              <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
+              <GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
              <chart-glob-image v-else class="list-item-img" :chartConfig="item" />
              <n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
            </div>
@ -79,7 +79,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
-import { Icon } from '@iconify/vue'
+import { GoIconify } from '@/components/GoIconify'

 const props = defineProps({
  menuOptions: {
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
@ -20,14 +20,14 @@ export const syncData = () => {
    onPositiveCallback: async () => {
      window['$message'].success('正在同步编辑器...')
      dataSyncUpdate && (await dataSyncUpdate())
-      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo() }))
    }
  })
 }

 // 同步数据到预览页
 export const syncDataToPreview = () => {
-  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
+  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo() }))
 }

 // 侦听器更新
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@ -158,7 +158,7 @@ const editHandle = () => {

 // 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
 const updateToSession = (id: string) => {
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []

  if (sessionStorageInfo?.length) {
--- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
@ -1,41 +1,41 @@
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
-const chartEditStore = useChartEditStore()
-
-// 导出
-export const exportHandle = () => {
-  // 取消选中
-  chartEditStore.setTargetSelectChart(undefined)
-
-  // 导出数据
-  downloadTextFile(
-    JSONStringify(chartEditStore.getStorageInfo || []),
-    undefined,
-    'json'
-  )
-
-  // 导出图片
-  const range = document.querySelector('.go-edit-range') as HTMLElement
-  const watermark = document.getElementById('go-edit-watermark')
-  // 隐藏边距线
-  if (!range || !watermark) {
-    window['$message'].error('导出失败！')
-    return
-  }
-
-  // 记录缩放比例
-  const scaleTemp = chartEditStore.getEditCanvas.scale
-  // 百分百展示页面
-  chartEditStore.setScale(1, true)
-  // 展示水印
-  watermark.style.display = 'block'
-
-  setTimeout(() => {
-    canvasCut(range, () => {
-      // 隐藏水印
-      if (watermark) watermark.style.display = 'none'
-      // 还原页面大小
-      chartEditStore.setScale(scaleTemp, true)
-    })
-  }, 600)
-}
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
+const chartEditStore = useChartEditStore()
+
+// 导出
+export const exportHandle = () => {
+  // 取消选中
+  chartEditStore.setTargetSelectChart(undefined)
+
+  // 导出数据
+  downloadTextFile(
+    JSONStringify(chartEditStore.getStorageInfo() || []),
+    undefined,
+    'json'
+  )
+
+  // 导出图片
+  const range = document.querySelector('.go-edit-range') as HTMLElement
+  const watermark = document.getElementById('go-edit-watermark')
+  // 隐藏边距线
+  if (!range || !watermark) {
+    window['$message'].error('导出失败！')
+    return
+  }
+
+  // 记录缩放比例
+  const scaleTemp = chartEditStore.getEditCanvas.scale
+  // 百分百展示页面
+  chartEditStore.setScale(1, true)
+  // 展示水印
+  watermark.style.display = 'block'
+
+  setTimeout(() => {
+    canvasCut(range, () => {
+      // 隐藏水印
+      if (watermark) watermark.style.display = 'none'
+      // 还原页面大小
+      chartEditStore.setScale(scaleTemp, true)
+    })
+  }, 600)
+}
--- a/src/views/chart/ContentHeader/headerRightBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerRightBtn/index.vue
@ -94,7 +94,7 @@ const previewHandle = () => {
  const { id } = routerParamsInfo.params
  // id 标识
  const previewId = typeof id === 'string' ? id : id[0]
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []

  if (sessionStorageInfo?.length) {
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@ -209,9 +209,7 @@ export const useSync = () => {
            chartHistoryStore.clearForwardStack()
          }
        }
-      } else {
-        // 非组件(顺便排除脏数据)
-        if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
+      } else if (key === ChartEditStoreEnum.EDIT_CANVAS_CONFIG || key === ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG) {
        componentMerge(chartEditStore[key], projectData[key], true)
      }
    }
@ -324,7 +322,7 @@ export const useSync = () => {
    // 保存数据
    let params = new FormData()
    params.append('projectId', projectId)
-    params.append('content', JSONStringify(chartEditStore.getStorageInfo || {}))
+    params.append('content', JSONStringify(chartEditStore.getStorageInfo() || {}))
    const res= await saveProjectApi(params)

    if (res && res.code === ResultEnum.SUCCESS) {
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@ -1,27 +1,37 @@
 <template>
  <div
-    class="chart-item"
-    v-for="item in groupData.groupList"
-    :class="animationsClass(item.styles.animations)"
-    :key="item.id"
+    :class="animationsClass(groupData.styles.animations)"
    :style="{
+      ...getSizeStyle(groupData.attr),
+      ...getFilterStyle(groupData.styles),
+    }"
+  >
+    <div
+      class="chart-item"
+      v-for="item in groupData.groupList"
+      :class="animationsClass(item.styles.animations)"
+      :key="item.id"
+      :style="{
      ...getComponentAttrStyle(item.attr, groupIndex),
-      ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles),
      ...getStatusStyle(item.status),
      ...getPreviewConfigStyle(item.preview),
      ...getBlendModeStyle(item.styles) as any
    }"
-  >
-    <component
-      :is="item.chartConfig.chartKey"
-      :id="item.id"
-      :chartConfig="item"
-      :themeSetting="themeSetting"
-      :themeColor="themeColor"
-      :style="{ ...getSizeStyle(item.attr) }"
-      v-on="useLifeHandler(item)"
-    ></component>
+    >
+      <component
+        :is="item.chartConfig.chartKey"
+        :id="item.id"
+        :chartConfig="item"
+        :themeSetting="themeSetting"
+        :themeColor="themeColor"
+        :style="{
+          ...getSizeStyle(item.attr),
+          ...getFilterStyle(item.styles),
+          ...getTransformStyle(item.styles)
+        }"
+        v-on="useLifeHandler(item)"
+      ></component>
+    </div>
  </div>
 </template>

--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@ -6,7 +6,6 @@
    :key="item.id"
    :style="{
      ...getComponentAttrStyle(item.attr, index),
-      ...getFilterStyle(item.styles),
      ...getTransformStyle(item.styles),
      ...getStatusStyle(item.status),
      ...getPreviewConfigStyle(item.preview),
@ -31,7 +30,10 @@
      :chartConfig="item"
      :themeSetting="themeSetting"
      :themeColor="themeColor"
-      :style="{ ...getSizeStyle(item.attr) }"
+      :style="{ 
+        ...getSizeStyle(item.attr),
+        ...getFilterStyle(item.styles)
+      }"
      v-on="useLifeHandler(item)"
    ></component>
  </div>
--- a/src/views/preview/suspenseIndex.vue
+++ b/src/views/preview/suspenseIndex.vue
@ -47,6 +47,7 @@ setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)

 const previewRefStyle = computed(() => {
  return {
+    overflow: 'hidden',
    ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
    ...getFilterStyle(chartEditStore.editCanvasConfig)
  }
--- a/src/views/preview/wrapper.vue
+++ b/src/views/preview/wrapper.vue
@ -14,12 +14,17 @@ import Preview from './index.vue'
 let key = ref(Date.now())

 // 数据变更 -> 组件销毁重建
-;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
-  if (!window.opener) return
-  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()
+try {
+  const listenerArr = [SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW]
+  listenerArr.forEach((saveEvent: string) => {
+    if (!window.opener || !window.opener.addEventListener) return
+    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()
+    })
  })
-})
+} catch (error) {
+  console.log(error)
+}
 </script>
--- a/types/shims-vue.d.ts
+++ b/types/shims-vue.d.ts
@ -5,5 +5,4 @@ declare module '*.vue' {
 }

 declare module 'lodash/*'
-declare module 'dom-helpers'
-declare module '@iconify/vue'
+declare module 'dom-helpers'
--- a/vite.config.ts
+++ b/vite.config.ts
@ -26,7 +26,7 @@ export default ({ mode }) => defineConfig({
      },
      {
        find: 'vue-i18n',
-        replacement: 'vue-i18n/dist/vue-i18n.cjs.js', //解决i8n警告
+        replacement: 'vue-i18n/dist/vue-i18n.cjs.js' //解决i8n警告
      }
    ],
    dedupe: ['vue']
@ -56,7 +56,14 @@ export default ({ mode }) => defineConfig({
    }
  },
  plugins: [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          // 排除 iconify 图标影子组件编译报错
+          isCustomElement: tag => tag.startsWith('iconify-icon')
+        }
+      }
+    }),
    monacoEditorPlugin({
      languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
    }),