Merge branch 'ft' into 'main_dev'

chore: 升级go-view版本至v1.2.9

See merge request yunteng/thingskit-view!131

@@ -32,6 +32,6 @@ module.exports = {
     'vue/no-unused-vars': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/valid-template-root': 'off',
-    'vue/no-mutating-props': 'off',
+    'vue/no-mutating-props': 'off'
   }
 }

@@ -4,3 +4,4 @@ dist
 dist-ssr
 *.local
 .vscode
+.idea

+import TKUpload from './index.vue';
+
+export { TKUpload };

+<template>
+  <n-upload
+    v-model:file-list="fileList"
+    :show-file-list="true"
+    :customRequest="customRequest"
+    :onBeforeUpload="beforeUploadHandle"
+    :onRemove="remove"
+  >
+    <n-upload-dragger>
+      <img v-if="uploadImageUrl" class="upload-show" :src="uploadImageUrl" alt="上传的图片" />
+      <div class="upload-img" v-show="!uploadImageUrl">
+        <img src="@/assets/images/canvas/noImage.png" />
+        <n-text class="upload-desc" depth="3">
+          上传文件需小于 {{ uploadSizeFormat.size }}M ，格式为 {{ uploadSizeFormat.format }} 的文件
+        </n-text>
+      </div>
+    </n-upload-dragger>
+  </n-upload>
+</template>
+
+<script lang="ts" setup name="TKUpload">
+import { ref, PropType, nextTick } from 'vue'
+import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui'
+import { fetchRouteParamsLocation } from '@/utils'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { FileTypeEnum } from '@/enums/external/fileTypeEnum'
+
+interface uploadSizeFormatIF {
+  size: number
+  format: string
+}
+
+const props = defineProps({
+  uploadImageUrl: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  uploadSizeFormat: {
+    type: Object as PropType<uploadSizeFormatIF>,
+    default: () => ({
+      size: 5,
+      format: 'png/jpg/jpeg/gif'
+    })
+  }
+})
+
+const emit = defineEmits(['sendFile', 'removeFile'])
+
+const fileList = ref<UploadFileInfo[]>()
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_upload.png`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (!uploadRes) return
+      emit('sendFile', uploadRes?.fileStaticUri)
+      window['$message'].success('上传文件成功！')
+    } else {
+      window['$message'].error('上传文件失败，请稍后重试！')
+    }
+  })
+}
+
+// 文件上传前置处理
+const beforeUploadHandle = (file: UploadFileInfo) => {
+  fileList.value = []
+  const type = file.file?.type
+  const size = file.file?.size as number
+  const typeSuffix = type?.split('/')?.at(-1)?.toUpperCase() as keyof typeof FileTypeEnum
+  if (size > 1024 * 1024 * props.uploadSizeFormat.size) {
+    window['$message'].warning(`文件超出 ${props.uploadSizeFormat.size}M限制，请重新上传！`)
+    return false
+  }
+  if (!FileTypeEnum[typeSuffix]) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+//单个点击删除
+const remove = () => {
+  fileList.value = []
+  emit('removeFile', true)
+}
+</script>
+
+<style lang="scss" scoped>
+$uploadHeight: 193px;
+@include deep() {
+  .n-card__content {
+    padding: 0;
+    overflow: hidden;
+  }
+  .n-upload-dragger {
+    padding: 5px;
+  }
+}
+.upload-show {
+  width: -webkit-fill-available;
+  height: $uploadHeight;
+  border-radius: 5px;
+}
+.upload-img {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  img {
+    height: 150px;
+  }
+  .upload-desc {
+    padding: 10px 0;
+  }
+}
+</style>

+// 文件上传时的格式映射
+export enum FileTypeEnum {
+  // 文档
+  TXT = 'text/plain',
+  JSON = 'application/json',
+  // 图片
+  PNG = 'image/png',
+  JPEG = 'image/jpeg',
+  JPG = 'image/jpg',
+  GIF = 'image/gif',
+}

@@ -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: []
     }
   ]
 }

@@ -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">

@@ -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": "北京市",

 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
-  </v-chart>
+  <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 } from 'vue'
+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'
@@ -16,6 +41,7 @@ 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({
@@ -33,6 +59,10 @@ const props = defineProps({
   }
 })
 
+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([
@@ -67,7 +97,7 @@ registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
-  const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
+  const adCode = `${props.chartConfig.option.mapRegion.adcode}`
   if (adCode !== 'china') {
     await getGeojson(adCode)
   } else {
@@ -87,7 +117,16 @@ const vEchartsSetOption = () => {
 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
+     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
 
@@ -101,6 +140,45 @@ const hainanLandsHandle = async (newData: boolean) => {
     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,
@@ -113,33 +191,42 @@ watch(
   }
 )
 
-//监听是否显示南海群岛
-watch(
-  () => props.chartConfig.option.mapRegion.showHainanIsLands,
-  async newData => {
-    try {
-      await hainanLandsHandle(newData)
-      vEchartsSetOption()
-    } catch (error) {
-      console.log(error)
+// 监听线的颜色
+if (props.chartConfig.option.series[2] && !isPreview()) {
+  watch(
+    () => props.chartConfig.option.series[2].lineStyle.normal.color,
+    () => {
+      dataSetHandle(props.chartConfig.option.dataset)
+    },
+    {
+      deep: false
     }
-  },
-  {
-    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}`,
-  async newData => {
+  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()
+      checkOrMap(newData)
     } catch (error) {
       console.log(error)
     }
@@ -154,3 +241,16 @@ 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>

@@ -9,7 +9,8 @@ export const includes = []
 // 关系图布局
 export const GraphLayout = [
   { label: '无', value: 'none' },
-  { label: '环形', value: 'circular' }
+  { label: '环形', value: 'circular' },
+  { label: '力引导', value: 'force' }
 ]
 
 // 标签开关
@@ -24,7 +25,13 @@ 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 = {
@@ -33,11 +40,11 @@ export const option = {
     legend:{
       show:true,
       textStyle:{
-        color:"#eee",
-        fontSize: 14 ,
+        color: '#eee',
+        fontSize: 14
       },
       data: dataJson.categories.map(function (a) {
-          return a.name;
+          return a.name
       })
     },
     series: [
@@ -47,7 +54,7 @@ export const option = {
         data: dataJson.nodes,
         links: dataJson.links,
         categories: dataJson.categories,
-        label: { // 标签
+        label: {
           show: 1,
           position: 'right',
           formatter: '{b}'
@@ -58,10 +65,17 @@ export const option = {
         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

@@ -35,7 +35,58 @@
         ></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>

 <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"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="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
+]

@@ -33,8 +33,6 @@ const option = shallowReactive({
   dataset: ''
 })
 
-
-
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,
@@ -78,7 +76,6 @@ watch(
       return
     }
     option.dataset = newData
-    
   }, 
   {
     immediate: true

@@ -161,6 +161,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: []
     }
   ]
 }

@@ -246,6 +246,46 @@
       </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">

@@ -26,6 +26,36 @@
       "value": [126.642464, 45.756967, 101]
     }
   ],
+  "line": [
+    {
+      "adcode": 410000,
+      "coords": [
+        [113.665412, 34.757975],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "adcode": 630000,
+      "coords": [
+        [101.778916, 36.623178],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "adcode": 640000,
+      "coords": [
+        [106.278179, 38.46637],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "adcode": 230000,
+      "coords": [
+        [126.642464, 45.756967],
+        [116.405285, 39.904989]
+      ]
+    }
+  ],
   "map": [
     {
       "name": "北京市",

@@ -202,9 +202,19 @@ const vEchartsSetOption = async () => {
 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
+    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()
 }
 
@@ -245,14 +255,16 @@ watch(
   }
 )
 
-//处理数据标点
+//处理数据标点包括飞线
 const handleDataPoint = (newData: any) => {
   if (newData === 'china') {
     dataSetHandle(dataJson)
   } else {
     const filterPoint = dataJson.point.filter((item: any) => item.adcode === newData)
+    // const filterLine = dataJson.line.filter((item: any) => item.adcode === newData)
     dataSetHandle({
-      point: filterPoint
+      point: filterPoint,
+      line: [] //由于点击单个地图模块，所以去除飞线
     })
   }
 }
@@ -310,7 +322,7 @@ const handleVChartClick = async (params: any) => {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
         if (level === 'DISTRICT') return
-        if(String(adcode).startsWith('15') && level===areaEnum.CITY) return
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
         props.chartConfig.option.mapRegion.adcode = adcode
         saveLevelStr.level = level
         handleDataPoint(adcode)

@@ -2,24 +2,11 @@
   <collapse-item name="属性" :expanded="true">
     <setting-item-box name="上传图片" :alone="true">
       <setting-item>
-        <n-card class="upload-box">
-          <n-upload
-            :show-file-list="false"
-            v-model:file-list="uploadFileListRef"
-            :customRequest="customRequest"
-            :onBeforeUpload="beforeUploadHandle"
-          >
-            <n-upload-dragger>
-              <img v-if="optionData.dataset" class="upload-show" :src="optionData.dataset" alt="背景" />
-              <div class="upload-img" v-show="!optionData.dataset">
-                <img src="@/assets/images/canvas/noImage.png" />
-                <n-text class="upload-desc" depth="3">
-                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
-                </n-text>
-              </div>
-            </n-upload-dragger>
-          </n-upload>
-        </n-card>
+        <TKUpload
+          :uploadImageUrl="props.optionData.dataset"
+          @sendFile="handleSendFile"
+          @removeFile="handleRemoveFile"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="样式">
@@ -39,14 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, nextTick } from 'vue'
+import { PropType } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { UploadCustomRequestOptions } from 'naive-ui'
-import { backgroundImageSize } from '@/settings/designSetting'
-import { fetchRouteParamsLocation } from '@/utils'
+import { TKUpload } from '@/components/external/Common/TKUpload'
 
 const props = defineProps({
   optionData: {
@@ -55,48 +38,12 @@ const props = defineProps({
   }
 })
 
-const uploadFileListRef = ref()
-
-// 上传图片前置处理
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-const beforeUploadHandle = async ({ file }) => {
-  uploadFileListRef.value = []
-  const type = file.file.type
-  const size = file.file.size
-
-  if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-    return false
-  }
-  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
-    window['$message'].warning('文件格式不符合，请重新上传！')
-    return false
-  }
-  return true
+const handleSendFile = (file: string) => {
+  if (!file) return
+  props.optionData.dataset = file
 }
 
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-        type: file.file.type
-      })
-      let uploadParams = new FormData()
-      uploadParams.append('file', newNameFile)
-      const uploadRes = await uploadFile(uploadParams)
-      if (uploadRes) {
-        props.optionData.dataset = uploadRes?.fileStaticUri
-        window['$message'].success('添加图片成功！')
-      }
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
-}
+const handleRemoveFile = (status: boolean) => (status ? (props.optionData.dataset = '') : null)
 
 // 适应类型
 const fitList = [
@@ -122,35 +69,3 @@ const fitList = [
   }
 ]
 </script>
-<style lang="scss" scoped>
-$uploadHeight: 193px;
-.upload-box {
-  cursor: pointer;
-  margin-bottom: 20px;
-  @include deep() {
-    .n-card__content {
-      padding: 0;
-      overflow: hidden;
-    }
-    .n-upload-dragger {
-      padding: 5px;
-    }
-  }
-  .upload-show {
-    width: -webkit-fill-available;
-    height: $uploadHeight;
-    border-radius: 5px;
-  }
-  .upload-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    img {
-      height: 150px;
-    }
-    .upload-desc {
-      padding: 10px 0;
-    }
-  }
-}
-</style>

 <template>
-  <div class="videoPlay">
+  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
     <video
-      style="object-fit: cover"
-      :poster="poster"
       crossOrigin="anonymous"
+      :id="`my-player`"
       ref="videoRef"
-      class="video-js vjs-default-skin vjs-big-play-centered"
-      controls
-    >
-      <source :src="path" />
-    </video>
+      class="video-js my-video vjs-theme-city vjs-big-play-centered"
+    ></video>
   </div>
 </template>
-<script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, watch, toRefs } from 'vue'
-import videojs, { VideoJsPlayer } from 'video.js'
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch, unref } from 'vue'
+import videojs from 'video.js'
+import 'videojs-flvjs-es6'
 import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.css'
-import zh from 'video.js/dist/lang/zh-CN.json'
-
-const props = withDefaults(
-  defineProps<{
-    path: string
-    autoPlay?: boolean
-    h?: number
-    poster?: string
-  }>(),
-  { autoPlay: false }
-)
+import 'video.js/dist/video-js.min.css'
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
+import { isShareMode } from '@/views/share/hook'
+import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
+import { useFingerprint } from '@/utils/external/useFingerprint'
+import { GetResult } from '@fingerprintjs/fingerprintjs'
 
-const videoRef = ref()
-
-let player: VideoJsPlayer
-
-const initPlay = async () => {
-  videojs.addLanguage('zh-CN', zh)
-  await nextTick()
-  const options: VideoJsPlayerOptions = {
-    muted: true,
-    controls: true,
-    autoplay: props.autoPlay,
-    src: props?.path,
-    poster: props?.poster,
-    language: 'zh-CN',
-    techOrder: ['html5'],
-    preload: 'none'
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  autoplay: {
+    type: Boolean
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  w: {
+    type: Number,
+    default: 300
+  },
+  h: {
+    type: Number,
+    default: 300
   }
-  player = videojs(videoRef.value, options, () => {
-    videojs.log('Video is reading')
-    if (props.autoPlay) {
-      player.play()
+})
+
+enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+  flv = 'video/x-flv'
+}
+
+const isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g
+  return reg.test(url)
+}
+
+const getVideoTypeByUrl = (url = '') => {
+  try {
+    const { protocol, pathname } = new URL(url)
+    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
+    const reg = /[^.]\w*$/
+    const mathValue = pathname.match(reg) || []
+    const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm'
+    const type = VideoPlayerType[ext]
+    return type ? type : VideoPlayerType.webm
+  } catch (error) {
+    console.error(error)
+    return VideoPlayerType.webm
+  }
+}
+
+// video标签
+const videoRef = ref<HTMLElement | null>(null)
+
+// video实例对象
+let videoPlayer: videojs.Player | null = null
+
+const fingerprintResult = ref<Nullable<GetResult>>(null)
+
+//options配置
+const options: VideoJsPlayerOptions & Recordable = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  // src: getSource() || '', // 要嵌入的视频源的源 URL
+  sources: [],
+  muted: true,
+  userActions: {
+    hotkeys: true
+  },
+  techOrder: ['html5', 'flvjs'],
+  flvjs: {
+    mediaDataSource: {
+      isLive: true,
+      cors: true,
+      withCredentials: false,
+      hasAudio: false
+    },
+    config: {
+      autoCleanupSourceBuffer: true
     }
-    player.on('ended', () => {
-      videojs.log('Play end')
-    })
-    player.on('error', () => {
-      player.errorDisplay.close()
-      videojs.log('Play parse error')
-    })
-  })
+  }
 }
 
-onMounted(() => {
-  initPlay()
-})
+const { getResult } = useFingerprint()
+async function getSource() {
+  fingerprintResult.value = await getResult()
+  let src = props.sourceSrc || ''
+  if (isRtspProtocol(props.sourceSrc!)) {
+    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
+  }
+  return [
+    {
+      type: getVideoTypeByUrl(props.sourceSrc),
+      src
+    }
+  ]
+}
 
-//直接改变路径测试
-watch(
-  () => props.path,
-  () => {
-    if (props.path && props.autoPlay) {
-      try {
-        player?.pause()
-        player?.load()
-        player?.src(props.path)
-        player?.play()
-      } catch (e) {
-        console.log(e)
+// 初始化videojs
+const initVideo = async () => {
+  if (videoRef.value) {
+    // 创建 video 实例
+    options.sources = await getSource()
+    if (options.sources && options.sources.length) {
+      if (isRtspProtocol(props.sourceSrc || '')) {
+        options.flvjs = {
+          ...(options.flvjs || {}),
+          config: {
+            headers: {
+              'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
+            }
+          }
+        }
       }
+      videoPlayer = videojs(videoRef.value, options)
     }
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  async (newData: any) => {
+    const result = await getSource()
+    // props.sourceSrc = newData
+    videoPlayer?.src(result) as any
+    videoPlayer?.play()
   },
   {
     immediate: true
   }
 )
 
-onBeforeUnmount(() => {
-  player?.dispose()
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  if (props.sourceSrc) {
+    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
+  }
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
 })
 </script>
-<style>
-.vjs-poster {
-  background-size: cover !important;
-}
-</style>
+
 <style lang="scss" scoped>
-.videoPlay {
-  flex: 1;
-  height: v-bind('`${h}px`');
-  .video-js {
-    height: 100%;
-    width: 100%;
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .my-video {
+    width: 100% !important;
+    height: 100% !important;
+    position: relative;
   }
 }
 </style>

@@ -2,29 +2,12 @@
   <CollapseItem name="播放器配置" :expanded="true">
     <setting-item-box name="上传图片" :alone="true">
       <setting-item>
-        <n-card class="upload-box">
-          <n-upload
-            :show-file-list="false"
-            v-model:file-list="uploadFileListRef"
-            :customRequest="customRequest"
-            :onBeforeUpload="beforeUploadHandle"
-          >
-            <n-upload-dragger>
-              <img v-if="optionData.poster" class="upload-show" :src="optionData.poster" alt="背景" />
-              <div class="upload-img" v-show="!optionData.poster">
-                <img src="@/assets/images/canvas/noImage.png" />
-                <n-text class="upload-desc" depth="3">
-                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
-                </n-text>
-              </div>
-            </n-upload-dragger>
-          </n-upload>
-        </n-card>
+        <TKUpload :uploadImageUrl="optionData.poster" @sendFile="handleSendFile" @removeFile="handleRemoveFile" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="源类型" :alone="true">
       <setting-item>
-        <n-radio-group @change="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
+        <n-radio-group @update:value="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
           <n-space>
             <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :value="item.value">
               {{ item.label }}
@@ -55,7 +38,12 @@
     </setting-item-box>
     <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
       <setting-item>
-        <n-select @update:value="handleSelect" v-model:value="optionData.dataset" :options="videoOptions" />
+        <n-select
+          @update:value="handleSelect"
+          v-model:value="optionData.dataset"
+          :options="videoOptions"
+          placeholder="请选择视频地址"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="自动播放">
@@ -67,15 +55,21 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, nextTick, onMounted } from 'vue'
+import { PropType, ref, onMounted } from 'vue'
 import { option, sourceTypeEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { UploadCustomRequestOptions, NTreeSelect } from 'naive-ui'
-import { backgroundImageSize } from '@/settings/designSetting'
-import { fetchRouteParamsLocation } from '@/utils'
+import { NTreeSelect } from 'naive-ui'
 import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
+import { TKUpload } from '@/components/external/Common/TKUpload'
+
+interface videoListIF {
+  name: string
+  accessMode: number
+  id: string
+  videoUrl: string
+  label: string
+  value: string
+}
 
 const props = defineProps({
   optionData: {
@@ -84,8 +78,6 @@ const props = defineProps({
   }
 })
 
-const uploadFileListRef = ref()
-
 const sourceTypes = [
   {
     value: 'custom',
@@ -99,7 +91,7 @@ const sourceTypes = [
 
 const originationOption = ref([])
 
-const videoOptions = ref([])
+const videoOptions = ref<videoListIF[]>([])
 
 const getOriginationList = async () => {
   const res = await getOrganizationList()
@@ -113,7 +105,8 @@ const handleUpdateTreeValue = (value: string) => {
 
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
-  videoOptions.value = res?.data?.map((item: any) => ({
+  if (!res) return
+  videoOptions.value = res?.data?.map((item: videoListIF) => ({
     label: item.name,
     value: item.accessMode === 1 ? item.id : item.videoUrl,
     id: item.id,
@@ -128,16 +121,16 @@ const getVideoUrlById = async (id: string) => {
   props.optionData.url = url
 }
 
-const handleChecked = ({ target }: any) => {
+const handleChecked = (value: string) => {
   props.optionData.dataset = ''
-  const { value } = target
   if (value === sourceTypeEnum.PLATFORM) {
     getOriginationList()
   }
 }
 
-const handleSelect = (value: string, e: any) => {
+const handleSelect = (_: string, e: videoListIF) => {
   const { accessMode, id } = e
+  //1表示，需要从服务端调取接口换取播放的地址，0则不需要
   if (accessMode === 1) {
     getVideoUrlById(id)
   } else {
@@ -154,76 +147,10 @@ onMounted(() => {
   }
 })
 
-// 上传图片前置处理
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-const beforeUploadHandle = async ({ file }) => {
-  uploadFileListRef.value = []
-  const type = file.file.type
-  const size = file.file.size
-
-  if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-    return false
-  }
-  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
-    window['$message'].warning('文件格式不符合，请重新上传！')
-    return false
-  }
-  return true
+const handleSendFile = (file: string) => {
+  if (!file) return
+  props.optionData.poster = file
 }
 
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-        type: file.file.type
-      })
-      let uploadParams = new FormData()
-      uploadParams.append('file', newNameFile)
-      const uploadRes = await uploadFile(uploadParams)
-      if (uploadRes) {
-        props.optionData.poster = uploadRes?.fileStaticUri
-        window['$message'].success('添加图片成功！')
-      }
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
-}
+const handleRemoveFile = (status: boolean) => (status ? (props.optionData.poster = '') : null)
 </script>
-<style lang="scss" scoped>
-$uploadHeight: 193px;
-.upload-box {
-  cursor: pointer;
-  margin-bottom: 20px;
-  @include deep() {
-    .n-card__content {
-      padding: 0;
-      overflow: hidden;
-    }
-    .n-upload-dragger {
-      padding: 5px;
-    }
-  }
-  .upload-show {
-    width: -webkit-fill-available;
-    height: $uploadHeight;
-    border-radius: 5px;
-  }
-  .upload-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    img {
-      height: 150px;
-    }
-    .upload-desc {
-      padding: 10px 0;
-    }
-  }
-}
-</style>

 <template>
   <div>
-    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" :poster="option.poster" />
+    <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="autoplay" :avatar="option.poster" />
   </div>
 </template>
 <script setup lang="ts">
@@ -16,7 +16,7 @@ const props = defineProps({
   }
 })
 
-const { h } = toRefs(props.chartConfig.attr)
+const { w, h } = toRefs(props.chartConfig.attr)
 
 const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)
 

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
     </setting-item-box>
   </collapse-item>

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="链接" :alone="true">

 <template>
   <div class="go-text-box">
     <div class="content">
-      <span style="cursor: pointer" v-if="link" @click="click">{{ option.dataset }}</span>
-      <span v-else>{{ option.dataset }}</span>
+      <span style="cursor: pointer;white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
+      <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
     </div>
   </div>
 </template>

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
     </setting-item-box>
   </collapse-item>

@@ -27,6 +27,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
@@ -36,10 +46,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()
 }
 
@@ -98,5 +108,4 @@ export const fetchImages = async (targetData?: ConfigType) => {
   }
   return ''
 }
-
 useInjectLib(packagesList as any) // THINGS_KIT 修改注册组件

@@ -24,7 +24,6 @@ import cloneDeep from 'lodash/cloneDeep'
    * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
    * 源代码 requestDataType: RequestDataTypeEnum.STATIC,
    * 修改后的代码 requestDataType: RequestDataTypeEnum.Pond,
-   * 修改后代码在//ft之间
    */
 // 请求基础属性
 export const requestConfig: RequestConfigType = {
@@ -49,7 +48,6 @@ export const requestConfig: RequestConfigType = {
     Params: {}
   }
 }
-//ft之间
 
 // 单实例类
 export class PublicConfigClass implements PublicConfigType {

@@ -162,17 +162,17 @@ 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: {
+    },
     // * 设置 editCanvas 数据项
     setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value

@@ -10,13 +10,7 @@ import { useInjectAside } from './external/useInjectAside'
 
 // 图标
 const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
-const {
-  TableSplitIcon,
-  RoadmapIcon,
-  SpellCheckIcon,
-  GraphicalDataFlowIcon,
-} = icon.carbon
-
+const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
 
 // 图表
 export type MenuOptionsType = {

@@ -9,7 +9,7 @@ export const exportHandle = () => {
 
   // 导出数据
   downloadTextFile(
-    JSONStringify(chartEditStore.getStorageInfo || []),
+    JSONStringify(chartEditStore.getStorageInfo() || []),
     undefined,
     'json'
   )

@@ -19,14 +19,14 @@ export const syncData = () => {
     transformOrigin: 'center',
     onPositiveCallback: () => {
       window['$message'].success('正在同步编辑器...')
-      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() }))
 }
 
 // 侦听器更新

@@ -160,7 +160,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) {

@@ -9,7 +9,7 @@ export const exportHandle = () => {
 
   // 导出数据
   downloadTextFile(
-    JSONStringify(chartEditStore.getStorageInfo || []),
+    JSONStringify(chartEditStore.getStorageInfo() || []),
     undefined,
     'json'
   )

@@ -32,7 +32,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) {

@@ -32,7 +32,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) {

@@ -76,7 +76,7 @@ const handleBlur = async () => {
     dataViewId,
     dataViewContent: {
       id: dataViewContent.id,
-      content: JSON.stringify(chartEditStore.getStorageInfo)
+      content: JSON.stringify(chartEditStore.getStorageInfo())
     }
   } as unknown as BaseUpdateContentParams
   await contentUpdateApi(saveContent)

@@ -92,7 +92,7 @@ export const useSyncRemote = () => {
     const saveContent = {
       dataViewContent: {
         id: dataViewContent.id,
-        content: JSONStringify(chartEditStore.getStorageInfo || {})
+        content: JSONStringify(chartEditStore.getStorageInfo() || {})
       },
       dataViewName,
       dataViewId

 <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="{
-      ...getComponentAttrStyle(item.attr, groupIndex),
-      ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles),
-      ...getStatusStyle(item.status),
-      ...getPreviewConfigStyle(item.preview),
-      ...getBlendModeStyle(item.styles) as any
+      ...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),
+		...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>
+      :style="{
+          ...getSizeStyle(item.attr),
+          ...getFilterStyle(item.styles),
+          ...getTransformStyle(item.styles)
+        }"
+       v-on="useLifeHandler(item)"
+     ></component>
+  </div>
   </div>
 </template>
 

@@ -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>

@@ -33,7 +33,7 @@ import { getFilterStyle, setTitle } from '@/utils'
 
 // THINGS_KIT 重写预览逻辑,调用接口
 import {  dragCanvas } from './utils'
-import { getEditCanvasConfigStyle,keyRecordHandle } from './utils'
+import { getEditCanvasConfigStyle, keyRecordHandle } from './utils'
 import { getSessionStorageInfo } from './external/usePreview'
 
 import { useComInstall } from './hooks/useComInstall.hook'
@@ -52,6 +52,7 @@ setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
 
 const previewRefStyle = computed(() => {
   return {
+    overflow: 'hidden',
     ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
     ...getFilterStyle(chartEditStore.editCanvasConfig)
   }

@@ -15,7 +15,7 @@ let key = ref(Date.now())
 
 // 数据变更 -> 组件销毁重建
 ;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
-  if (!window.opener) return
+  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 }])