Merge branch 'ft' into 'main_dev'

chore: 更新go-view基线版本至v1.2.8

See merge request yunteng/thingskit-view!118

@@ -14,7 +14,9 @@ enum Api {
   DEVICE_PROFILE = '/device_profile/me/list',
   DEVICE = '/device',
   VIDEOURL = '/video/url/',
-  GEOJSONURL = '/map/geo_json/'
+  GEOJSONURL = '/map/geo_json/',
+  DEVICE_URL = '/device',
+  GET_ATTRBUTELIST = '/device/attributes/'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -113,3 +115,15 @@ export const getGeoJsonMap = (code: number, level: string) =>
   defHttp.get({
     url: `${Api.GEOJSONURL}${code}/${level}`
   })
+
+// 获取设备详情
+export const getDeviceDetail = (id: string) =>
+  defHttp.get({
+    url: Api.DEVICE_URL + `/${id}`
+  })
+
+// 获取产品属性
+export const getAttribute = (deviceProfileId: string) =>
+  defHttp.get({
+    url: `${Api.GET_ATTRBUTELIST}${deviceProfileId}`
+  })

@@ -75,7 +75,7 @@ export const useChartDataFetch = (
               echartsUpdateHandle(value)
               // 更新回调函数
               if (updateCallback) {
-                updateCallback(value)
+                updateCallback(value, targetComponent.request)//为了处理设备最新数据轮播列表，这里传过去当前组件的信息
               }
             } catch (error) {
               console.error(error)

@@ -49,6 +49,7 @@ export const useChartInteract = (
             Object.keys(item.interactFn).forEach(key => {
               if (Params.value[key]) {
                 Params.value[key] = param[item.interactFn[key]]
+                console.log(Params.value[key])
               }
               if (Header.value[key]) {
                 Header.value[key] = param[item.interactFn[key]]

@@ -99,7 +99,7 @@ export const originUseChartDataFetch = (
             fetchFn()
           },
           {
-            immediate: false,
+            immediate: true,
             deep: true
           }
         )

@@ -48,10 +48,10 @@ export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponen
   try {
     return new Function(`
       return (
-        async function(mouseEvent){
+        async function(components,mouseEvent){
           ${fnStr}
         }
-      )`)()
+      )`)().bind(undefined,components)
   } catch (error) {
     console.error(error)
   }

@@ -19,8 +19,9 @@
 import { LayoutHeader } from '@/layout/components/LayoutHeader'
 /**
  * THINGS_KIT 升级版本这里有冲突
- * 源文件 '@/components/GoUserInfo'
- * 修改后 '@/components/external/GoUserInfo'
+ * 修改引入路径
+ * 源文件路径 import { GoUserInfo } from '@/components/GoUserInfo'
+ * 修改后路径 import { GoUserInfo } from '@/components/external/GoUserInfo'
  */
 import { GoUserInfo } from '@/components/external/GoUserInfo'
 </script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { BarLineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 柱状折线组合图 分别定义series
+// 写死name可以定义legend显示的名称
+export const barSeriesItem = {
+  type: 'bar',
+  barWidth: 15,
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  itemStyle: {
+    color: null,
+    borderRadius: 2
+  }
+}
+
+export const lineSeriesItem = {
+  type: 'line',
+  symbol: 'circle',
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  symbolSize: 5, //设定实心点的大小
+  itemStyle: {
+    color: '#FFE47A',
+    borderWidth: 1
+  },
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    color: null
+  }
+}
+
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      show: true,
+      type: 'shadow'
+    }
+  },
+  legend: {
+    data: null
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [barSeriesItem, lineSeriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = BarLineConfig.key
+  public chartConfig = cloneDeep(BarLineConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
+    :expanded="true"
+  >
+    <SettingItemBox name="图形" v-if="item.type == 'bar'">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="线条" v-if="item.type == 'line'">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点" v-if="item.type == 'line'">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="tip颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { lineConf } from '@/packages/chartConfiguration/echarts'
+import { GlobalThemeJsonType } from '@/settings/chartThemes'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "1月",
+      "data1": 104,
+      "data2": 30
+    },
+    {
+      "product": "2月",
+      "data1": 56,
+      "data2": 56
+    },
+    {
+      "product": "3月",
+      "data1": 136,
+      "data2": 36
+    },
+    {
+      "product": "4月",
+      "data1": 86,
+      "data2": 6
+    },
+    {
+      "product": "5月",
+      "data1": 98,
+      "data2": 10
+    },
+    {
+      "product": "6月",
+      "data1": 86,
+      "data2": 70
+    },
+    {
+      "product": "7月",
+      "data1": 77,
+      "data2": 57
+    }
+  ]
+}

+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const BarLineConfig: ConfigType = {
+  key: 'BarLine',
+  chartKey: 'VBarLine',
+  conKey: 'VCBarLine',
+  title: '柱状图 & 折线图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'bar_line.png'
+}
\ No newline at end of file

+<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, computed, watch, PropType, nextTick } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+//引入柱状图 折线图
+import { BarChart, LineChart } from 'echarts/charts'
+import config, { includes, barSeriesItem, lineSeriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+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<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData.dimensions.length !== oldData.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(barSeriesItem, lineSeriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

 import { BarCommonConfig } from './BarCommon/index'
 import { BarCrossrangeConfig } from './BarCrossrange/index'
 import { CapsuleChartConfig } from './CapsuleChart/index'
+import { BarLineConfig } from './BarLine/index'
 
-export default [BarCommonConfig, BarCrossrangeConfig, CapsuleChartConfig]
+export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig, CapsuleChartConfig]

@@ -33,6 +33,10 @@ export const option = {
         width: 3,
         color: {
           type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
           colorStops: [
             {
               offset: 0,

@@ -84,7 +84,10 @@ export const option = {
         shadowColor: '#E1FFFF',
         shadowBlur: 10
       },
-      data: []
+      data: [],
+      encode: {
+        value: 2
+      }
     },
     {
       name: '区域',

@@ -3,7 +3,7 @@
     :type="type"
     :height="h"
     :processing="processing"
-    :percentage="option.dataset"
+    :percentage="dataset"
     :indicator-placement="indicatorPlacement"
     :color="color"
     :rail-color="railColor"
@@ -15,7 +15,7 @@
         fontSize: `${indicatorTextSize}px`
       }"
     >
-      {{ option.dataset }} {{ unit }}
+      {{ dataset }} {{ unit }}
     </n-text>
   </n-progress>
 </template>

@@ -14,5 +14,6 @@ export enum ChatCategoryEnumName {
   LINE = '折线图',
   SCATTER = '散点图',
   MAP = '地图',
+  COMBINATION = '组合图',
   MORE = '更多'
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { FullScreenConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  border: 6,
+  bgColor: '#84a5e9',
+  borderColor: '#84a5e9'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FullScreenConfig.key
+  public attr = { ...chartInitConfig, w: 150, h: 150, zIndex: -1 }
+  public chartConfig = cloneDeep(FullScreenConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="全屏按钮" expanded>
+    <SettingItemBox name="按钮">
+      <SettingItem name="背景色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框大小">
+        <n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const FullScreenConfig: ConfigType = {
+  key: 'FullScreen',
+  chartKey: 'VFullScreen',
+  conKey: 'VCFullScreen',
+  title: '全屏按钮',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'fullScreen.png'
+}

+<template>
+  <svg @click="toggleFullscreen" v-if="!isFullscreen" viewBox="0 0 1024 1024">
+    <path
+      d="M665.6 1017.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h268.8l6.4-268.8c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v294.4c0 32-25.6 51.2-51.2 51.2h-300.8zM51.2 396.8c-19.2 0-38.4-19.2-38.4-38.4V64C12.8 32 38.4 12.8 64 12.8h294.4c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H89.6v268.8c0 19.2-19.2 38.4-38.4 38.4zM64 1017.6c-32 0-51.2-25.6-51.2-51.2v-294.4c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v217.6l198.4-198.4c6.4-6.4 19.2-12.8 25.6-12.8s19.2 6.4 25.6 12.8c6.4 6.4 12.8 19.2 12.8 25.6 0 12.8-6.4 19.2-12.8 25.6l-198.4 198.4h217.6c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H64z m915.2-620.8c-19.2 0-38.4-19.2-38.4-38.4V140.8l-198.4 198.4c-6.4 6.4-19.2 12.8-25.6 12.8-12.8 0-19.2-6.4-25.6-12.8-12.8-12.8-12.8-38.4 0-51.2l198.4-198.4h-217.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h294.4c32 0 51.2 25.6 51.2 51.2v294.4c0 19.2-19.2 38.4-38.4 38.4z"
+      class="fullScreen-border"
+    ></path>
+  </svg>
+  <svg @click="toggleFullscreen" v-else viewBox="0 0 1024 1024">
+    <path
+      d="M379.336 697.237L153.362 921.55c-14.11 14.007-36.905 13.922-50.912-0.188-14.007-14.11-13.922-36.905 0.188-50.912l227.6-225.927H138.645c-18.99 0-34.385-15.446-34.385-34.5 0-19.053 15.395-34.5 34.385-34.5H413.72c18.99 0 34.384 15.447 34.384 34.5v276c0 9.15-3.622 17.926-10.07 24.396a34.326 34.326 0 0 1-24.314 10.104 34.326 34.326 0 0 1-24.314-10.104 34.559 34.559 0 0 1-10.071-24.396V697.237z m263.395-366.88l227.813-227.813c14.059-14.059 36.853-14.059 50.912 0 14.059 14.059 14.059 36.853 0 50.912l-225.18 225.18h187.147c18.99 0 34.385 15.445 34.385 34.5 0 19.053-15.395 34.5-34.385 34.5H608.346c-18.99 0-34.384-15.447-34.384-34.5v-276c0-9.15 3.622-17.926 10.07-24.396a34.326 34.326 0 0 1 24.314-10.105c9.12 0 17.865 3.635 24.314 10.105a34.559 34.559 0 0 1 10.07 24.395v193.223zM99.385 410a34.326 34.326 0 0 1-24.314-10.105A34.559 34.559 0 0 1 65 375.5v-276C65 80.446 80.395 65 99.385 65h275.077c18.99 0 34.384 15.446 34.384 34.5 0 19.054-15.394 34.5-34.384 34.5H133.769v241.5c0 9.15-3.622 17.925-10.07 24.395A34.326 34.326 0 0 1 99.384 410z m825.23 552H649.538c-18.99 0-34.384-15.446-34.384-34.5 0-19.054 15.394-34.5 34.384-34.5h240.693V651.5c0-19.054 15.394-34.5 34.384-34.5 18.99 0 34.385 15.446 34.385 34.5v276c0 19.054-15.395 34.5-34.385 34.5z"
+      class="fullScreen-border"
+    ></path>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, onMounted, onUnmounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+let { border, bgColor, borderColor } = toRefs(props.chartConfig.option)
+const isFullscreen = ref(false)
+const checkFullscreen = () => {
+  isFullscreen.value = !!(
+    document.fullscreenElement ||
+    (document as any).webkitFullscreenElement ||
+    (document as any).mozFullScreenElement ||
+    (document as any).msFullscreenElement
+  )
+}
+checkFullscreen()
+
+const requestFullscreen = (element: Element) => {
+  if (element.requestFullscreen) {
+    element.requestFullscreen()
+  } else if ((document as any).mozRequestFullScreen) {
+    /* Firefox */
+    (document as any).mozRequestFullScreen()
+  } else if ((document as any).webkitRequestFullscreen) {
+    /* Chrome, Safari and Opera */
+    (document as any).webkitRequestFullscreen()
+  } else if ((document as any).msRequestFullscreen) {
+    /* IE/Edge */
+    (document as any).msRequestFullscreen()
+  }
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement && document.exitFullscreen) {
+    document.exitFullscreen()
+  } else if ((document as any).mozFullScreenElement && (document as any).mozCancelFullScreen) {
+    /* Firefox */
+    (document as any).mozCancelFullScreen()
+  } else if ((document as any).webkitFullscreenElement && (document as any).webkitExitFullscreen) {
+    /* Chrome, Safari and Opera */
+    (document as any).webkitExitFullscreen()
+  } else if ((document as any).msFullscreenElement && (document as any).msExitFullscreen) {
+    /* IE/Edge */
+    (document as any).msExitFullscreen()
+  }
+}
+
+const toggleFullscreen = () => {
+  if (!isFullscreen.value) {
+    requestFullscreen(document.documentElement)
+  } else {
+    exitFullscreen()
+  }
+  isFullscreen.value = !isFullscreen.value
+  // 由于全屏状态的改变不会立即生效，所以需要延迟一段时间再去获取全屏状态
+  setTimeout(() => {
+    checkFullscreen()
+  }, 1000)
+}
+
+// 监听全屏状态的改变，保证多个全屏组件的状态一致
+onMounted(() => {
+  document.addEventListener('fullscreenchange', checkFullscreen)
+  document.addEventListener('webkitfullscreenchange', checkFullscreen)
+  document.addEventListener('mozfullscreenchange', checkFullscreen)
+  document.addEventListener('MSFullscreenChange', checkFullscreen)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', checkFullscreen)
+  document.removeEventListener('webkitfullscreenchange', checkFullscreen)
+  document.removeEventListener('mozfullscreenchange', checkFullscreen)
+  document.removeEventListener('MSFullscreenChange', checkFullscreen)
+})
+</script>
+
+<style lang="scss" scoped>
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.fullScreen-border {
+  stroke: v-bind('borderColor');
+  stroke-width: v-bind('border+"px"');
+  fill: v-bind('bgColor');
+}
+</style>

 import { NumberConfig } from './Number/index'
 import { TimeCommonConfig } from './TimeCommon/index'
 import { ClockConfig } from './Clock/index'
+import { FullScreenConfig } from './FullScreen/index'
 import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineVConfig } from './PipelineV/index'
 
-export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig, PipelineHConfig, PipelineVConfig]
+export default [
+  NumberConfig,
+  FlipperNumberConfig,
+  TimeCommonConfig,
+  CountDownConfig,
+  ClockConfig,
+  FullScreenConfig,
+  PipelineHConfig,
+  PipelineVConfig
+]

-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import {
   ArcCurve,

@@ -27,21 +27,12 @@ export class Basic {
 
     this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000)
     this.camera.position.set(0, 30, -250)
-   /**
-   * 这里升级版本有冲突,升级版本可以使用这里的代码，官方还未修复
-   * 修复官方Threejs生成缩略图无效问题，少加一个Threejs配置
-   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 属于新增代码，源代码无
-   * 修改后代码 preserveDrawingBuffer: true //缩略图生效需开启
-   * 
-   */
     this.renderer = new THREE.WebGLRenderer({
       // canvas: this.dom,
       alpha: true, // 透明
       antialias: true, // 抗锯齿
-      preserveDrawingBuffer: true//缩略图生效需开启
+      preserveDrawingBuffer: true
     })
-    //ft
     this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比
     this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
     this.dom.appendChild(this.renderer.domElement) // 添加到dom中

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import {InputsInputConfig} from "./index";
+
+export const option = {
+    // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+    [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+    // 默认值
+    inputValue: "0",
+    // 暴露配置内容给用户
+    dataset: ""
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = InputsInputConfig.key
+    public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+    public chartConfig = cloneDeep(InputsInputConfig)
+    public interactActions = interactActions
+    public option = cloneDeep(option)
+}
\ No newline at end of file

+<template>
+  <collapse-item name="输入框配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-input  v-model:value="optionData.dataset"  placeholder="若未输入，则默认值为0"/>
+    </setting-item-box>
+  </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsInputConfig: ConfigType = {
+    key: 'InputsInput',
+    chartKey: 'VInputsInput',
+    conKey: 'VCInputsInput',
+    title: '输入框',
+    category: ChatCategoryEnum.INPUTS,
+    categoryName: ChatCategoryEnumName.INPUTS,
+    package: PackagesCategoryEnum.INFORMATIONS,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'inputs_select.png'
+}
\ No newline at end of file

+<template>
+  <div>
+    <n-input :style="`width:${w}px;`" type="text"
+             v-model:value="option.value.dataset"
+             placeholder="请输入"
+             @change="onChange">
+
+    </n-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: {
+    inputValue: props.chartConfig.option.inputValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+const onChange = (v: string) => {
+  if(v == undefined) return;
+  // 存储到联动数据
+  useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATA]: v },
+      InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+    () => props.chartConfig.option,
+    (newData: any) => {
+      option.value = newData
+      onChange(newData.inputValue)
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+)
+
+</script>
+
+
+
+
+

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+    DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+    DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+    {
+        interactType: InteractEventOn.CHANGE,
+        interactName: '选择完成',
+        componentEmitEvents: {
+            [ComponentInteractEventEnum.DATA]: [
+                {
+                    value: ComponentInteractParamsEnum.DATA,
+                    label: '选择项'
+                }
+            ]
+        }
+    }
+]

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import {InputsPaginationConfig} from "./index";
+
+export const option = {
+    // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+    [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+    // 默认值
+    pageValue:1,
+    sizeValue:[2,4,8,10,20],
+    pageSize:4,
+    // 暴露配置内容给用户
+    dataset: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = InputsPaginationConfig.key
+    public attr = { ...chartInitConfig, w: 395, h: 32, zIndex: -1 }
+    public chartConfig = cloneDeep(InputsPaginationConfig)
+    public interactActions = interactActions
+    public option = cloneDeep(option)
+}
\ No newline at end of file

+<template>
+    <collapse-item name="分页配置" :expanded="true">
+      <setting-item-box :alone="false" name="分页设置">
+        <setting-item  name="默认页码" :alone="true">
+          <n-input-number v-model:value="optionData.pageValue" size="small" placeholder="字体大小"></n-input-number>
+        </setting-item>
+        <setting-item  name="分页" :alone="true">
+          <n-select v-model:value="optionData.pageSize" size="small"
+                    :options="page" />
+        </setting-item>
+        <setting-item  name="页数" :alone="true">
+          <n-input-number v-model:value="optionData.dataset" size="small" placeholder="字体大小"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {CollapseItem, SettingItem, SettingItemBox} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const page = [
+  {label:'2',value:2},
+  {label:'4',value:4},
+  {label:'8',value:8},
+  {label:'10',value:10},
+  {label:'20',value:20}
+]
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsPaginationConfig: ConfigType = {
+    key: 'InputsPagination',
+    chartKey: 'VInputsPagination',
+    conKey: 'VCInputsPagination',
+    title: '分页',
+    category: ChatCategoryEnum.INPUTS,
+    categoryName: ChatCategoryEnumName.INPUTS,
+    package: PackagesCategoryEnum.INFORMATIONS,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'inputs_pagination.png'
+}
\ No newline at end of file

+<template>
+  <div>
+    <n-pagination
+        @on-update:page="onChange" :style="`width:${w}px;`"
+        v-model:page="option.value.pageValue"
+        :page-count="option.value.dataset"
+        :page-slot="7"
+        show-size-picker
+        :page-sizes="option.value.sizeValue"
+        v-model:page-size="option.value.pageSize"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: {
+    pageValue: props.chartConfig.option.pageValue,
+    dataset:props.chartConfig.option.dataset,
+    sizeValue:props.chartConfig.option.sizeValue,
+    pageSize:props.chartConfig.option.pageSize
+  }
+})
+
+const onChange = (v: number,v2:number) => {
+  if(v == undefined) return;
+  // 存储到联动数据
+  useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATA]: v ,
+        [ComponentInteractParamsEnum.DATA2]:v2
+      },
+      InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+    () => props.chartConfig.option,
+    (newData: any) => {
+      option.value = newData
+      onChange(newData.pageValue,newData.pageSize)
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+)
+</script>
\ No newline at end of file

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+    DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+    DATA = 'data',
+    DATA2 = 'data2'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+    {
+        interactType: InteractEventOn.CHANGE,
+        interactName: '选择完成',
+        componentEmitEvents: {
+            [ComponentInteractEventEnum.DATA]: [
+                {
+                    value: ComponentInteractParamsEnum.DATA,
+                    label: '页数'
+                },
+                {
+                    value: ComponentInteractParamsEnum.DATA2,
+                    label: '每页条数'
+                }
+            ]
+        }
+    }
+]
\ No newline at end of file

 import { InputsDateConfig } from './InputsDate/index'
 import { InputsSelectConfig } from './InputsSelect/index'
 import { InputsTabConfig } from './InputsTab/index'
+import { InputsPaginationConfig } from "./InputsPagination/index";
+import { InputsInputConfig} from "./InputsInput/index";
 
-export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]
+export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsPaginationConfig,InputsInputConfig]

-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { CarouselConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import logo from '@/assets/logo.png'
- 
-// 示例图片资源
-const modules: Record<string, { default: string }>  = import.meta.glob("./images/*", {eager: true});
-const dataset = [logo]
-for (const item in modules) {
-  dataset.push(modules[item].default)
-}
-
-export const option = {
-  // 图片资源列表
-  dataset: dataset,
-  // 自动播放
-  autoplay: true,
-  // 自动播放的间隔（ms）
-  interval: 5000,
-  // 每页显示的图片数量
-  slidesPerview: 1,
-  // 轮播方向
-  direction: "horizontal",
-  // 拖曳切换
-  draggable: true,
-  // 居中显示
-  centeredSlides: false,
-  // 过渡效果
-  effect: "slide",
-  // 是否显示指示点
-  showDots: true,
-  // 指示器样式
-  dotType: "dot",
-  // 指示器位置
-  dotPlacement: "bottom",
-  // 显示箭头
-  showArrow: false,
-  // 图片样式
-  fit: "contain",
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = CarouselConfig.key
-  public chartConfig = cloneDeep(CarouselConfig)
-  public option = cloneDeep(option)
-}

-<template>
-  <collapse-item name="属性" :expanded="true">
-    <setting-item-box name="路径" :alone="true">
-      <setting-item v-for="item, index in optionData.dataset" :key="index">
-        <n-input-group>
-          <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
-          <n-button ghost @click="optionData.dataset.splice(index, 1)">
-            -
-          </n-button>
-        </n-input-group>
-      </setting-item>
-      <setting-item>
-        <n-button size="small" @click="optionData.dataset.push('')">
-          +
-        </n-button>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="播放器">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.autoplay" size="small" />
-          <n-text>自动播放</n-text>
-        </n-space>
-      </setting-item>
-      <!-- 开启自动播放时，设置间隔时间 -->
-      <setting-item name="间隔时间">
-        <n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
-      </setting-item>
-      <setting-item name="轮播方向">
-        <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
-      </setting-item>
-      <setting-item name="过渡效果">
-        <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
-      </setting-item>
-      <setting-item name="每页数量">
-        <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.centeredSlides" size="small" />
-          <n-text>居中显示</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item name="图片样式">
-        <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="指示器">
-      <setting-item name="样式">
-        <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
-      </setting-item>
-      <setting-item name="位置">
-        <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.showDots" size="small" />
-          <n-text>显示</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.showArrow" size="small" />
-          <n-text>箭头</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.draggable" size="small" />
-          <n-text>拖曳切换</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-
-  </collapse-item>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { option } from './config'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-// 字典
-const dotTypes = [
-  {
-    label: "点",
-    value: "dot"
-  },
-  {
-    label: "线",
-    value: "line"
-  }
-]
-const directions = [
-  {
-    label: "水平方向",
-    value: "horizontal"
-  },
-  {
-    label: "垂直方向",
-    value: "vertical"
-  }
-]
-const effects = [
-  {
-    label: "slide",
-    value: "slide"
-  },
-  {
-    label: "fade",
-    value: "fade"
-  },
-  {
-    label: "card",
-    value: "card"
-  },
-  {
-    label: "custom",
-    value: "custom"
-  }
-]
-const dotPlacements = [
-  {
-    label: "上边",
-    value: "top"
-  },
-  {
-    label: "下边",
-    value: "bottom"
-  },
-  {
-    label: "左边",
-    value: "left"
-  },
-  {
-    label: "右边",
-    value: "right"
-  }
-]
-
-// 适应类型
-const fitList = [
-  {
-    value: 'fill',
-    label: 'fill'
-  },
-  {
-    value: 'contain',
-    label: 'contain'
-  },
-  {
-    value: 'cover',
-    label: 'cover'
-  },
-  {
-    value: 'scale-down',
-    label: 'scale-down'
-  },
-  {
-    value: 'none',
-    label: 'none'
-  },
-]
-</script>

-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
-
-export const CarouselConfig: ConfigType = {
-  key: 'Carousel',
-  chartKey: 'VCarousel',
-  conKey: 'VCCarousel',
-  title: '轮播图',
-  category: ChatCategoryEnum.MORE,
-  categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.NAIVE_UI,
-  image: 'photo.png'
-}

-<template>
-  <div>
-    <n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
-      :dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
-      :slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
-      <n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
-        :fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
-    </n-carousel>
-  </div>
-</template>
-<script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { requireErrorImg } from '@/utils'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const option = shallowReactive({
-  dataset: configOption.dataset
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
-
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    option.dataset = newData
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
-
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option.dataset = newData
-})
-</script>

@@ -3,6 +3,5 @@ import { ImageCarouselConfig } from './ImageCarousel/index'
 import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
-import { CarouselConfig } from './Carousel/index'
 
 export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]

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

 <template>
   <div class="go-text-box">
     <div class="content">
-      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click"></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>

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

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { TablesBasicConfig } from './index'
+import dataJson from './data.json'
+
+const { dimensions, source } = dataJson
+export const option = {
+  dataset: { dimensions, source },
+  pagination: {
+    page: 1,
+    pageSize: 5
+  },
+  align: 'center',
+  style: {
+    border: 'on',
+    singleColumn: 'off',
+    singleLine: 'off',
+    bottomBordered: 'on',
+    striped: 'on',
+    fontSize: 16,
+    borderWidth: 0,
+    borderColor: 'black',
+    borderStyle: 'solid'
+  },
+  inputShow: 'none'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TablesBasicConfig.key
+  public attr = { ...chartInitConfig, w: 600, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(TablesBasicConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="表格设置" :expanded="true">
+    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
+    <setting-item-box :alone="true" name="对齐方式">
+      <setting-item :alone="true">
+        <n-select
+          v-model:value="optionData.align"
+          size="small"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="分页设置">
+      <setting-item name="默认页码" :alone="true">
+        <n-input-number v-model:value="optionData.pagination.page" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="分页" :alone="true">
+        <n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="表格数据">
+      <SettingItem name="表头名称" class="form_name">
+        <div style="width: 260px">
+          <n-input v-model:value="header" size="small" placeholder="表头数据(英文','分割)"></n-input>
+        </div>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="表格样式">
+      <SettingItem name="显示边框" :alone="true">
+        <n-select v-model:value="(optionData as any).style.border" size="small" :options="borderFlag" />
+      </SettingItem>
+      <SettingItem name="底部边框" :alone="true">
+        <n-select
+          v-model:value="(optionData as any).style.bottomBordered"
+          size="small"
+          :options="bottom_borderedFlag"
+        />
+      </SettingItem>
+      <SettingItem name="列分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleLine" size="small" :options="columnFlag" />
+      </SettingItem>
+      <SettingItem name="行分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleColumn" size="small" :options="lineFlag" />
+      </SettingItem>
+      <SettingItem name="斑马条纹" :alone="true">
+        <n-select v-model:value="(optionData as any).style.striped" size="small" :options="stripedFlag" />
+      </SettingItem>
+      <setting-item name="字体大小" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.fontSize"
+          :min="12"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框宽度" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.borderWidth"
+          :min="0"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框颜色" :alone="true">
+        <n-color-picker size="small" :modes="['rgb']" v-model:value="optionData.style.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="边框样式" :alone="true">
+        <n-select v-model:value="optionData.style.borderStyle" size="small" :options="borderStyleFlag" />
+      </setting-item>
+      <SettingItem name="表格搜索（前端静态搜索）" :alone="true">
+        <n-select v-model:value="optionData.inputShow" size="small" :options="inputSelect" />
+      </SettingItem>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, ref } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const page = [
+  { label: '2', value: 2 },
+  { label: '5', value: 5 },
+  { label: '10', value: 10 },
+  { label: '15', value: 15 },
+  { label: '30', value: 30 }
+]
+const borderFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const columnFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const lineFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const bottom_borderedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const stripedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const borderStyleFlag = [
+  { label: '实线边框', value: 'solid' },
+  { label: '虚线边框', value: 'dashed' },
+  { label: '点状边框', value: 'dotted' },
+  { label: '双线边框', value: 'double' }
+]
+const inputSelect = [
+  { label: '停用', value: 'none' },
+  { label: '启用', value: 'flex' }
+]
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const header = ref()
+const median = ref<string[]>([])
+props.optionData.dataset.dimensions.forEach(item => {
+  median.value.push(item.title)
+})
+
+//转string
+watch(
+  () => props.optionData,
+  () => {
+    median.value = []
+    props.optionData.dataset.dimensions.forEach(item => {
+      median.value.push(item.title)
+    })
+    header.value = median.value.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
+
+//更新columns
+watch([header], ([headerNew], [headerOld]) => {
+  if (headerNew !== headerOld) {
+    headerNew.split(',').forEach((item: string, index: number) => {
+      if (index + 1 <= props.optionData.dataset.dimensions.length) {
+        props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
+      }
+    })
+  }
+})
+</script>

+{
+  "dimensions": [
+    {
+      "title": "产品名称",
+      "key": "productName"
+    },
+    {
+      "title": "产品销量（万）",
+      "key": "totalSum"
+    },
+    {
+      "title": "销售额（万）",
+      "key": "totalAmount"
+    }
+  ],
+  "source": [
+    {
+      "key": 0,
+      "productName": "产品A1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 1,
+      "productName": "产品B1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 2,
+      "productName": "产品C1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 3,
+      "productName": "产品D1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 4,
+      "productName": "产品A2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 5,
+      "productName": "产品D2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 6,
+      "productName": "产品A3",
+      "totalSum": 10,
+      "totalAmount": 10
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const TablesBasicConfig: ConfigType = {
+  key: 'TablesBasic',
+  chartKey: 'VTablesBasic',
+  conKey: 'VCTablesBasic',
+  title: '基础分页表格',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'tables_basic.png'
+}

+<template>
+  <div class="go-tables-basic">
+    <n-input
+      v-model:value="inputData"
+      placeholder="请输入信息"
+      :style="`display: ${inputShow}`"
+      style="margin-bottom: 5px; float: right; width: 240px"
+    >
+      <template #prefix>
+        <n-icon :component="SearchIcon" />
+      </template>
+    </n-input>
+    <n-data-table
+      :style="`
+      width: ${w}px;
+      height: ${h}px;
+      font-size: ${option.style.fontSize}px;
+      border-width: ${option.style.border === 'on' ? option.style.borderWidth : 0}px;
+      border-color: ${option.style.borderColor};
+      border-style: ${option.style.borderStyle}`"
+      :bordered="option.style.border === 'on'"
+      :single-column="option.style.singleColumn === 'on'"
+      :single-line="option.style.singleLine === 'on'"
+      :bottom-bordered="option.style.bottomBordered === 'on'"
+      :striped="option.style.striped === 'on'"
+      :max-height="h"
+      size="small"
+      :columns="option.dataset.dimensions"
+      :data="filterData"
+      :pagination="pagination"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { icon } from '@/plugins'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { SearchIcon } = icon.ionicons5
+
+//查询字段
+const inputData = ref('')
+//前台过滤
+const filterData = computed(() => {
+  return option?.dataset?.source?.filter((item: any) => {
+    return Object.values(item).some(val => {
+      return String(val).toLowerCase().includes(inputData.value.toLowerCase())
+    })
+  })
+})
+
+const { align, pagination, inputShow } = toRefs(props.chartConfig.option)
+
+pagination.value.onChange = (page: number) => {
+  pagination.value.page = page
+}
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const option = reactive({
+  dataset: props.chartConfig.option.dataset,
+  style: props.chartConfig.option.style
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+    option?.dataset?.dimensions?.forEach((header: any) => {
+      header.align = align.value
+    })
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include go('tables-basic') {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: flex-end;
+}
+</style>

 import { TableListConfig } from './TableList'
 import { TableScrollBoardConfig } from './TableScrollBoard'
+import { TablesBasicConfig } from "./TablesBasic/index";
 
-export default [TableListConfig, TableScrollBoardConfig]
+export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig]

 <template>
   <!-- 原生方式，没有使用vue-echarts -->
-  <div :style="`width:${w}px;height:${h}px;`" ref="map3DRef"></div>
+  <n-space vertical>
+    <n-spin :show="show">
+      <div :style="`width:${w}px;height:${h}px;`" ref="map3DRef"></div>
+    </n-spin>
+  </n-space>
 </template>
 
 <script setup lang="ts">
@@ -26,6 +30,8 @@ const { w, h } = toRefs(props.chartConfig.attr)
 
 const map3DRef = ref()
 
+const show = ref(true)
+
 const chartInstance = ref()
 
 const toolBoxOption = ref({
@@ -130,6 +136,7 @@ const getGeojson = (regionId: any) => {
         const geoJsonFile = JSON.parse(geoJson)
         saveGeojson.value = geoJsonFile
         registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
+        show.value = false
         resolve(true)
       })
     })

 <template>
   <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="chart-amap" ref="vChartRef">
-    <div v-if="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
+    <div v-show="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
     <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box>
   </div>
 </template>

@@ -10,7 +10,7 @@ export const option = {
   // 时间组件展示类型，必须和 interactActions 中定义的数据一致
   [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
   // 默认值
-  selectValue: [],
+  selectValue: null,
   // 暴露配置内容给用户
   dataset: [
     {
@@ -25,7 +25,8 @@ export const option = {
       label: '选项3',
       value: '3'
     }
-  ]
+  ],
+  multiple: false
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -2,7 +2,17 @@
   <collapse-item name="下拉配置" :expanded="true">
     <setting-item-box name="默认值" :alone="true">
       <SettingItem name="选择项">
-        <n-select filterable multiple  size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+        <n-select
+          filterable
+          clearable
+          :multiple="optionData.multiple"
+          size="small"
+          v-model:value="optionData.selectValue"
+          :options="optionData.dataset"
+        />
+      </SettingItem>
+      <SettingItem name="是否多选">
+        <n-switch v-model:value="optionData.multiple" size="small"></n-switch>
       </SettingItem>
     </setting-item-box>
   </collapse-item>

 <template>
   <n-select
-    multiple
+    clearable
+    :multiple="multiple"
     v-model:value="option.value.selectValue"
     :options="option.value.dataset"
     :style="`width:${w}px;`"
@@ -15,6 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   chartConfig: {
@@ -25,6 +27,8 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
+const { multiple } = toRefs(props.chartConfig.option)
+
 const option = shallowReactive({
   value: {
     selectValue: props.chartConfig.option.selectValue,
@@ -33,7 +37,7 @@ const option = shallowReactive({
 })
 
 // 监听事件改变
-const onChange = (v: string[]) => {
+const onChange = (v: string[] | string) => {
   // 存储到联动数据
   useChartInteract(
     props.chartConfig,
@@ -55,6 +59,11 @@ watch(
     deep: true
   }
 )
+
+// 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数) 解决给另一个下拉框赋值
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
+  option.value.dataset = resData
+})
 </script>
 
 <style lang="scss" scoped>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideTableScrollBoardConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const option = {
+  header: ['列1', '列2', '列3'],
+  dataset: dataJson,
+  index: true,
+  columnWidth: [30, 100, 100],
+  align: ['center', 'right', 'right', 'right'],
+  rowNum: 5,
+  waitTime: 2,
+  headerHeight: 35,
+  carousel: 'single',
+  headerBGC: '#00BAFF',
+  oddRowBGC: '#003B51',
+  evenRowBGC: '#0A2732'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTableScrollBoardConfig.key
+  public chartConfig = cloneDeep(OverrideTableScrollBoardConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="列表" :expanded="true">
+    <SettingItemBox name="基础">
+      <SettingItem name="表行数">
+        <n-input-number
+          v-model:value="optionData.rowNum"
+          :min="1"
+          size="small"
+          placeholder="请输入自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="轮播时间(s)">
+        <n-input-number
+          v-model:value="optionData.waitTime"
+          :min="1"
+          size="small"
+          placeholder="请输入轮播时间"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="表头高度">
+        <n-input-number
+          v-model:value="optionData.headerHeight"
+          :min="1"
+          size="small"
+          placeholder="请输入表头高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="显示行号">
+        <n-switch size="small" v-model:value="optionData.index" />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="配置" :alone="true">
+      <SettingItem name="表头数据">
+        <n-input v-model:value="header" :min="1" size="small" placeholder="表头数据(英文','分割)"></n-input>
+      </SettingItem>
+      <SettingItem name="列对齐方式">
+        <n-input v-model:value="align" :min="1" size="small" placeholder="对齐方式(英文','分割)"></n-input>
+      </SettingItem>
+      <SettingItem name="列宽度">
+        <n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
+      </SettingItem>
+      <SettingItem name="轮播方式">
+        <n-select
+          v-model:value="optionData.carousel"
+          :options="[
+            { label: '单条轮播', value: 'single' },
+            { label: '整页轮播', value: 'page' },
+          ]"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="样式">
+      <SettingItem name="表头背景色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="奇数行背景色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.oddRowBGC"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="偶数行背景色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.evenRowBGC"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const header = ref()
+const align = ref()
+const columnWidth = ref()
+
+watch(
+  () => props.optionData,
+  newData => {
+    header.value = props.optionData.header.toString()
+    align.value = props.optionData.align.toString()
+    columnWidth.value = props.optionData.columnWidth.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
+
+watch([header, align, columnWidth], ([headerNew, alignNew, columnWidthNew], [headerOld, alignOld, columnWidthOld]) => {
+  if (headerNew !== headerOld) {
+    props.optionData.header = headerNew.split(',')
+  }
+  if (alignNew !== alignOld) {
+    props.optionData.align = alignNew.split(',')
+  }
+  if (columnWidthNew !== columnWidthOld) {
+    // @ts-ignore
+    props.optionData.columnWidth = columnWidthNew.split(',')
+  }
+})
+</script>

+[
+  ["行1列1", "行1列2", "行1列3"],
+  ["行2列1", "行2列2", "行2列3"],
+  ["行3列1", "行3列2", "行3列3"],
+  ["行4列1", "行4列2", "行4列3"],
+  ["行5列1", "行5列2", "行5列3"],
+  ["行6列1", "行6列2", "行6列3"],
+  ["行7列1", "行7列2", "行7列3"],
+  ["行8列1", "行8列2", "行8列3"],
+  ["行9列1", "行9列2", "行9列3"],
+  ["行10列1", "行10列2", "行10列3"]
+]

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Tables/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTableScrollBoard', true)
+
+export const OverrideTableScrollBoardConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '设备最新数据轮播列表',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'table_scrollboard.png'
+}

+<template>
+  <div class="dv-scroll-board">
+    <div
+      class="header"
+      v-if="status.header.length && status.mergedConfig"
+      :style="`background-color: ${status.mergedConfig.headerBGC};`"
+    >
+      <div
+        class="header-item"
+        v-for="(headerItem, i) in status.header"
+        :key="`${headerItem}${i}`"
+        :style="`
+        height: ${status.mergedConfig.headerHeight}px;
+        line-height: ${status.mergedConfig.headerHeight}px;
+        width: ${status.widths[i]}px;
+      `"
+        :align="status.aligns[i]"
+        v-html="headerItem"
+      />
+    </div>
+
+    <div
+      v-if="status.mergedConfig"
+      class="rows"
+      :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`"
+    >
+      <div
+        class="row-item"
+        v-for="(row, ri) in status.rows"
+        :key="`${row.toString()}${row.scroll}`"
+        :style="`
+        height: ${status.heights[ri]}px;
+        line-height: ${status.heights[ri]}px;
+        background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
+      `"
+      >
+        <div
+          class="ceil"
+          v-for="(ceil, ci) in row.ceils"
+          :key="`${ceil}${ri}${ci}`"
+          :style="`width: ${status.widths[ci]}px;`"
+          :align="status.aligns[ci]"
+          v-html="ceil"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, onUnmounted, reactive, toRefs, watch, onMounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import merge from 'lodash/merge'
+import cloneDeep from 'lodash/cloneDeep'
+import { getDeviceDetail, getAttribute } from '@/api/external/common/index'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+// 这里能拿到图表宽高等
+const { w, h } = toRefs(props.chartConfig.attr)
+// 这里能拿到上面 config.ts 里的 option 数据
+// const { rowNum, headerHeight, index, backgroundColor } = toRefs(props.chartConfig.option)
+
+const status = reactive({
+  defaultConfig: {
+    /**
+     * @description Board header
+     * @type {Array<String>}
+     * @default header = []
+     * @example header = ['column1', 'column2', 'column3']
+     */
+    header: [],
+    /**
+     * @description Board dataset
+     * @type {Array<Array>}
+     * @default dataset = []
+     */
+    dataset: [],
+    /**
+     * @description Row num
+     * @type {Number}
+     * @default rowNum = 5
+     */
+    rowNum: 5,
+    /**
+     * @description Header background color
+     * @type {String}
+     * @default headerBGC = '#00BAFF'
+     */
+    headerBGC: '#00BAFF',
+    /**
+     * @description Odd row background color
+     * @type {String}
+     * @default oddRowBGC = '#003B51'
+     */
+    oddRowBGC: '#003B51',
+    /**
+     * @description Even row background color
+     * @type {String}
+     * @default evenRowBGC = '#003B51'
+     */
+    evenRowBGC: '#0A2732',
+    /**
+     * @description Scroll wait time
+     * @type {Number}
+     * @default waitTime = 2
+     */
+    waitTime: 2,
+    /**
+     * @description Header height
+     * @type {Number}
+     * @default headerHeight = 35
+     */
+    headerHeight: 35,
+    /**
+     * @description Column width
+     * @type {Array<Number>}
+     * @default columnWidth = []
+     */
+    columnWidth: [],
+    /**
+     * @description Column align
+     * @type {Array<String>}
+     * @default align = []
+     * @example align = ['left', 'center', 'right']
+     */
+    align: [],
+    /**
+     * @description Show index
+     * @type {Boolean}
+     * @default index = false
+     */
+    index: false,
+    /**
+     * @description index Header
+     * @type {String}
+     * @default indexHeader = '#'
+     */
+    indexHeader: '#',
+    /**
+     * @description Carousel type
+     * @type {String}
+     * @default carousel = 'single'
+     * @example carousel = 'single' | 'page'
+     */
+    carousel: 'single',
+    /**
+     * @description Pause scroll when mouse hovered
+     * @type {Boolean}
+     * @default hoverPause = true
+     * @example hoverPause = true | false
+     */
+    hoverPause: true
+  },
+  mergedConfig: props.chartConfig.option,
+  header: [],
+  rowsData: [],
+  rows: [
+    {
+      ceils: [],
+      rowIndex: 0,
+      scroll: 0
+    }
+  ],
+  widths: [],
+  heights: [0],
+  avgHeight: 0,
+  aligns: [],
+  animationIndex: 0,
+  animationHandler: 0,
+  updater: 0,
+  needCalc: false
+})
+
+const calcData = () => {
+  mergeConfig()
+  calcHeaderData()
+  calcRowsData()
+  calcWidths()
+  calcHeights()
+  calcAligns()
+  animation(true)
+}
+
+onMounted(() => {
+  calcData()
+})
+
+const mergeConfig = () => {
+  status.mergedConfig = merge(cloneDeep(status.defaultConfig), props.chartConfig.option)
+}
+
+const calcHeaderData = () => {
+  let { header, index, indexHeader } = status.mergedConfig
+  if (!header.length) {
+    status.header = []
+    return
+  }
+  header = [...header]
+  if (index) header.unshift(indexHeader)
+  status.header = header
+}
+
+const calcRowsData = () => {
+  let { dataset, index, headerBGC, rowNum } = status.mergedConfig
+  if (index) {
+    dataset = dataset.map((row: any, i: number) => {
+      row = [...row]
+      const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${
+        i + 1
+      }</span>`
+      row.unshift(indexTag)
+      return row
+    })
+  }
+  dataset = dataset.map((ceils: any, i: number) => ({ ceils, rowIndex: i }))
+  const rowLength = dataset.length
+  if (rowLength > rowNum && rowLength < 2 * rowNum) {
+    dataset = [...dataset, ...dataset]
+  }
+  dataset = dataset.map((d: any, i: number) => ({ ...d, scroll: i }))
+
+  status.rowsData = dataset
+  status.rows = dataset
+}
+
+const calcWidths = () => {
+  const { mergedConfig, rowsData } = status
+  const { columnWidth, header } = mergedConfig
+  const usedWidth = columnWidth.reduce((all: any, ws: number) => all + ws, 0)
+  let columnNum = 0
+  if (rowsData[0]) {
+    columnNum = (rowsData[0] as any).ceils.length
+  } else if (header.length) {
+    columnNum = header.length
+  }
+  const avgWidth = (w.value - usedWidth) / (columnNum - columnWidth.length)
+  const widths = new Array(columnNum).fill(avgWidth)
+  status.widths = merge(widths, columnWidth)
+}
+
+const calcHeights = (onresize = false) => {
+  const { mergedConfig, header } = status
+  const { headerHeight, rowNum, dataset } = mergedConfig
+  let allHeight = h.value
+  if (header.length) allHeight -= headerHeight
+  const avgHeight = allHeight / rowNum
+  status.avgHeight = avgHeight
+  if (!onresize) status.heights = new Array(dataset.length).fill(avgHeight)
+}
+
+const calcAligns = () => {
+  const { header, mergedConfig } = status
+
+  const columnNum = header.length
+
+  let aligns = new Array(columnNum).fill('left')
+
+  const { align } = mergedConfig
+
+  status.aligns = merge(aligns, align)
+}
+
+const animation = async (start = false) => {
+  const { needCalc } = status
+
+  if (needCalc) {
+    calcRowsData()
+    calcHeights()
+    status.needCalc = false
+  }
+  let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status
+  const { waitTime, carousel, rowNum } = mergedConfig
+
+  const rowLength = rowsData.length
+  if (rowNum >= rowLength) return
+  if (start) {
+    await new Promise(resolve => setTimeout(resolve, waitTime * 1000))
+    if (updater !== status.updater) return
+  }
+  const animationNum = carousel === 'single' ? 1 : rowNum
+  let rows = rowsData.slice(animationIndex)
+  rows.push(...rowsData.slice(0, animationIndex))
+  status.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+  status.heights = new Array(rowLength).fill(avgHeight)
+  await new Promise(resolve => setTimeout(resolve, 300))
+  if (updater !== status.updater) return
+  status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
+  animationIndex += animationNum
+  const back = animationIndex - rowLength
+  if (back >= 0) animationIndex = back
+  status.animationIndex = animationIndex
+  status.animationHandler = setTimeout(animation, waitTime * 1000 - 300) as any
+}
+
+const stopAnimation = () => {
+  status.updater = (status.updater + 1) % 999999
+  if (!status.animationHandler) return
+  clearTimeout(status.animationHandler)
+}
+
+const onRestart = async () => {
+  try {
+    if (!status.mergedConfig) return
+    stopAnimation()
+    calcData()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+watch(
+  () => w.value,
+  () => {
+    onRestart()
+  }
+)
+
+watch(
+  () => h.value,
+  () => {
+    onRestart()
+  }
+)
+
+// 数据更新
+watch(
+  () => props.chartConfig.option,
+  () => {
+    onRestart()
+  },
+  { deep: true }
+)
+
+// 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数)
+//特殊处理 获取属性，把标识符转为物模型的属性名称
+useChartDataFetch(props.chartConfig, useChartEditStore, async (resData: any[], res: any) => {
+  const { requestParams } = res
+  if (!requestParams) return
+  const { Params } = requestParams
+  if (!Params) return
+  const { entityId } = Params
+  const thingsModel = await handleDeviceProfileAttributes(entityId)
+  const { attribute } = thingsModel as any
+  const resDataFormat = resData.reduce((acc, curr) => {
+    attribute.forEach((item: any) => {
+      if (item.identifier === curr[0]) {
+        curr[0] = item.name
+      }
+    })
+    acc.push(curr)
+    return [...acc]
+  }, [])
+  props.chartConfig.option.dataset = resDataFormat
+  onRestart()
+})
+
+onUnmounted(() => {
+  stopAnimation()
+})
+
+const handleDeviceProfileAttributes = async (entityId: string) => {
+  const deviceDetailRes = await getDeviceDetail(entityId)
+  const { deviceProfileId } = deviceDetailRes
+  if (!deviceProfileId) return
+  const attributeRes = await getAttribute(deviceProfileId)
+  const dataFormat = handleDataFormat(deviceDetailRes, attributeRes)
+  return dataFormat
+}
+
+const handleDataFormat = (deviceDetail: any, attributes: any) => {
+  const { name, tbDeviceId } = deviceDetail
+  const attribute = attributes.map((item: any) => ({
+    identifier: item.identifier,
+    name: item.name,
+    detail: item.detail
+  }))
+  return {
+    name,
+    tbDeviceId,
+    attribute
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dv-scroll-board {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+
+  .text {
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    font-size: 15px;
+
+    .header-item {
+      transition: all 0.3s;
+    }
+  }
+
+  .rows {
+    overflow: hidden;
+
+    .row-item {
+      display: flex;
+      font-size: 14px;
+      transition: all 0.3s;
+      overflow: hidden;
+    }
+  }
+}
+</style>

@@ -49,6 +49,7 @@ import { Decorates09Config } from '@/packages/components/external/Decorates/Deco
 import { Decorates10Config } from '@/packages/components/external/Decorates/Decorates/Decorates10'
 import { Decorates11Config } from '@/packages/components/external/Decorates/Decorates/Decorates11'
 import { Decorates12Config } from '@/packages/components/external/Decorates/Decorates/Decorates12'
+import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
 
 
 /**
@@ -112,6 +113,10 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘
   //
+
+  //列表
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.TABLES, OverrideTableScrollBoardConfig)//重写列表下的轮播列表
+  //
 }
 
 /**

@@ -4,9 +4,8 @@ import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
 import { PhotoList } from '@/packages/components/Photos/index'
 import { IconList } from '@/packages/components/Icons/index'
-
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
-import { useInjectLib } from './components/external/utils/useInjectLib'
+import { useInjectLib } from './components/external/utils/useInjectLib' // THINGS_KIT 修改注册组件
 
 const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
   eager: true
@@ -18,9 +17,8 @@ const imagesModules: Record<string, { default: string }> = import.meta.glob('../
   eager: true
 })
 
-
 // * 所有图表 
-export const packagesList: PackagesType = {
+export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
@@ -101,4 +99,4 @@ export const fetchImages = async (targetData?: ConfigType) => {
   return ''
 }
 
-useInjectLib(packagesList as any)
+useInjectLib(packagesList as any) // THINGS_KIT 修改注册组件

@@ -20,9 +20,9 @@ import cloneDeep from 'lodash/cloneDeep'
 
 /**
    * 这里更新版本有冲突 
-   * ft 修改在公共接口下拉框里默认选择公共接口
+   * ft 修改在公共接口下拉框里默认选择公共接口,不选择静态
    * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 requestDataType: RequestDataTypeEnum.AJAX,
+   * 源代码 requestDataType: RequestDataTypeEnum.STATIC,
    * 修改后的代码 requestDataType: RequestDataTypeEnum.Pond,
    * 修改后代码在//ft之间
    */

@@ -73,5 +73,5 @@ export const canvasModelIndex = 9999
 // 框选时蒙层的 z-index，需比所有图表高
 export const selectBoxIndex = canvasModelIndex + 10
 
-// 工作台自动保存间隔（s）
+// THINGS_KIT 修改工作台自动保存间隔（s）
 export const saveInterval = 30

@@ -29,12 +29,10 @@ import {
   EditCanvasConfigType
 } from './chartEditStore.d'
 
-// THINGS_KIT 引入store解决报错 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
-import { pinia } from '@/store'
 import {useChartDataSocket} from "@/hooks/external/useChartDataSocket";
+import { pinia } from '@/store'
 const chartHistoryStore = useChartHistoryStore(pinia)
 const settingStore = useSettingStore(pinia)
-
 // 编辑区域内容
 export const useChartEditStore = defineStore({
   id: 'useChartEditStore',
@@ -511,8 +509,8 @@ export const useChartEditStore = defineStore({
         }
         const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
           e = cloneDeep(e)
-          e.attr.x = this.getMousePosition.x + 30
-          e.attr.y = this.getMousePosition.y + 30
+          e.attr.x = this.getMousePosition.startX
+          e.attr.y = this.getMousePosition.startY
           // 外层生成新 id
           e.id = getUUID()
           // 分组列表生成新 id
@@ -553,7 +551,7 @@ export const useChartEditStore = defineStore({
       this.setTargetSelectChart()
 
       // 重新选中
-      const historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
+      let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
       if (isArray(historyData)) {
         // 选中目标元素，支持多个
         historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
@@ -625,7 +623,7 @@ export const useChartEditStore = defineStore({
           } else {
             const group = historyData[0] as CreateComponentGroupType
             group.groupList.forEach(item => {
-              ids.push(item.id)
+              ids.unshift(item.id)
             })
           }
           this.setGroup(ids, false)
@@ -774,7 +772,7 @@ export const useChartEditStore = defineStore({
           // 高
           groupAttr.b = b < y + h ? y + h : b
 
-          targetList.push(item)
+          targetList.unshift(item)
           historyList.push(toRaw(item))
         })
 
@@ -820,7 +818,7 @@ export const useChartEditStore = defineStore({
           if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup]))
 
           // 分离组件并还原位置属性
-          targetGroup.groupList.forEach(item => {
+          targetGroup.groupList.reverse().forEach(item => {
             item.attr.x = item.attr.x + targetGroup.attr.x
             item.attr.y = item.attr.y + targetGroup.attr.y
             if (!callBack) {
@@ -850,7 +848,7 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 锁定
-    setLock(status = true, isHistory = true) {
+    setLock(status: boolean = true, isHistory: boolean = true) {
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
@@ -879,11 +877,11 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 解除锁定
-    setUnLock(isHistory = true) {
+    setUnLock(isHistory: boolean = true) {
       this.setLock(false, isHistory)
     },
     // * 隐藏
-    setHide(status = true, isHistory = true) {
+    setHide(status: boolean = true, isHistory: boolean = true) {
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
@@ -912,7 +910,7 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 显示
-    setShow(isHistory = true) {
+    setShow(isHistory: boolean = true) {
       this.setHide(false, isHistory)
     },
     // ----------------

@@ -9,6 +9,12 @@
   }
 }
 
+@mixin dark {
+  [data-theme='dark'] {
+    @content;
+  }
+}
+
 @mixin goId($block) {
   $B: $namespace + '-' + $block;
   ##{$B} {

@@ -130,11 +130,11 @@ export const fileToUrl = (file: File): string => {
  * * file转base64
  */
 export const fileTobase64 = (file: File, callback: Function) => {
-  const reader = new FileReader()
+  let reader = new FileReader()
   reader.readAsDataURL(file)
   reader.onload = function (e: ProgressEvent<FileReader>) {
     if (e.target) {
-      const base64 = e.target.result
+      let base64 = e.target.result
       callback(base64)
     }
   }

@@ -103,6 +103,6 @@ export const useAsideHook = () => {
     selectOptions,
     selectValue,
     clickItemHandle,
-    menuOptions, 
+    menuOptions
   }
 }

@@ -35,7 +35,7 @@
 
   <!-- 弹窗 -->
   <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false" :closeOnEsc="false">
-    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 600px">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
       <template #header>
         <n-space>
           <n-text>过滤器函数编辑器</n-text>
@@ -49,12 +49,12 @@
               <n-tag type="info">
                 <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{
               </n-tag>
-              <monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
+              <monaco-editor v-model:modelValue="filter" width="660px" height="500px" language="javascript" />
               <n-tag type="info">}</n-tag>
             </n-space>
           </div>
-          <n-divider vertical style="height: 480px" />
-          <n-scrollbar style="max-height: 480px">
+          <n-divider vertical style="height: 580px" />
+          <n-scrollbar style="max-height: 580px">
             <n-space :size="15" vertical>
               <div class="editor-data-show">
                 <n-space>

@@ -72,7 +72,7 @@ const themeColor = computed(() => {
 })
 
 const handleClickPanel = () => {
-  unref(requestModal)?.openModal?.(true, unref(selectedRequestType))
+  unref(requestModal as any)?.openModal?.(true, unref(selectedRequestType))
 }
 
 // TODO socket 请求时会触发

@@ -41,13 +41,13 @@ const setConfigurationData = (params: PublicInterfaceRequestParams['Body'], valu
   } else if (unref(isDynamicForm)) {
     paramsItemList.value = paramsValue
     const needSetValue = Reflect.get(value, type)
-    unref(dynamicFormEl)?.setConfigurationData(needSetValue)
+    unref(dynamicFormEl as any)?.setConfigurationData(needSetValue)
   }
 
 }
 
 const getConfigurationData = () => {
-  const value = unref(dynamicFormEl)?.getConfigurationData()
+  const value = unref(dynamicFormEl as any)?.getConfigurationData()
   const getValue = unref(isDynamicForm) ? value : unref(isEditor) ? unref(editorValue) : {}
   const record = {
     'form-data': {},

@@ -91,7 +91,7 @@ const handleSelectedInterfaceChange = async (_value: string, option: PublicInter
   requestHttpTypeRef.value = option.requestHttpType as RequestHttpEnum
   const { Header = [], Body } = JSON.parse(option.requestParams) as PublicInterfaceRequestParams
   headerRef.value = isArray(Header) ? (Header as ParamsItemType[]).reduce((prev, next) => ({ ...prev, [next.key]: next.value }), {}) : {}
-  unref(bodyContentEl)?.setConfigurationData(unref(getSelectedInterfaceBody), Body)
+  unref(bodyContentEl as any)?.setConfigurationData(unref(getSelectedInterfaceBody), Body)
   await nextTick()
   /**
    * FT 修改新增从接口取出filter
@@ -108,16 +108,16 @@ const getGetRequestTypeName = (key: RequestContentTypeEnum) => {
 }
 
 const validate = async () => {
-  if (unref(paramsDynamicFormEl)) return await unref(paramsDynamicFormEl)?.validate()
-  if (unref(socketDynamicFormEl)) return await unref(socketDynamicFormEl)?.validate()
+  if (unref(paramsDynamicFormEl)) return await unref(paramsDynamicFormEl  as any)?.validate()
+  if (unref(socketDynamicFormEl)) return await unref(socketDynamicFormEl as any)?.validate()
 }
 
 const setDynamicFormValue = (request: ExtraRequestConfigType) => {
   const { requestParams: { Params, Body } } = request
-  if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData(Params)
-  if (unref(socketDynamicFormEl)) unref(socketDynamicFormEl)?.setConfigurationData(Params)
+  if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl as any)?.setConfigurationData(Params)
+  if (unref(socketDynamicFormEl)) unref(socketDynamicFormEl as any)?.setConfigurationData(Params)
   if (unref(bodyContentEl)) {
-    unref(bodyContentEl)?.setConfigurationData(unref(getSelectedInterfaceBody), Body)
+    unref(bodyContentEl as any)?.setConfigurationData(unref(getSelectedInterfaceBody), Body)
   }
   /**
    * ft 优化动态表单包含有entityType，则自动回填DEVICE
@@ -127,22 +127,22 @@ const setDynamicFormValue = (request: ExtraRequestConfigType) => {
     const { Params: includeEntityTypeByParams } = JSON.parse(request.requestParams as unknown as string)
     const findEntityType = includeEntityTypeByParams.find((item: Record<string, string>) => item.key === 'scope' && item.value === 'entityType')
     if (!findEntityType) return
-    if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData({
+    if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl as any)?.setConfigurationData({
       [findEntityType?.value]: DEVICE
-    })
+    }) as any
   }
   //ft
 }
 
 const getDynamicFormValue = (): Recordable => {
-  if (unref(paramsDynamicFormEl)) return unref(paramsDynamicFormEl)?.getConfigurationData() || {}
-  if (unref(socketDynamicFormEl)) return unref(socketDynamicFormEl)?.getConfigurationData() || {}
+  if (unref(paramsDynamicFormEl)) return unref(paramsDynamicFormEl as any)?.getConfigurationData() || {}
+  if (unref(socketDynamicFormEl)) return unref(socketDynamicFormEl as any)?.getConfigurationData() || {}
   return {}
 }
 
 const getConfigurationData = () => {
   const record = extraPublicInterfaceInfo(unref(getSelectedInterface))
-  const bodyValue = unref(bodyContentEl)?.getConfigurationData() || {} as RequestParams['Body']
+  const bodyValue = unref(bodyContentEl as any)?.getConfigurationData() || {} as RequestParams['Body']
   record.requestParams[RequestParamsTypeEnum.PARAMS] = getDynamicFormValue()
   record.requestParams[RequestParamsTypeEnum.HEADER] = unref(headerRef)
   record.requestParams[RequestParamsTypeEnum.BODY] = bodyValue

@@ -37,8 +37,8 @@ const openModal = async (flag = true, type: RequestDataTypeEnum) => {
   showModal.value = flag
   await nextTick()
 
-  unref(componentConfigurationEl)?.setConfigurationData(unref(selectTarget)!.request || {})
-  unref(publicInterfaceFormEl)?.setConfigurationData(unref(selectTarget)!.request || {})
+  unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
+  unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
 }
 
 const handleSaveAndRequest = () => {
@@ -55,16 +55,16 @@ const selectTarget = computed<CreateComponentType | CreateComponentGroupType | u
 
 const validate = async () => {
   if (unref(requestDataType) === RequestDataTypeEnum.Pond) {
-    return await unref(publicInterfaceFormEl)?.validate()
+    return await unref(publicInterfaceFormEl as any)?.validate()
   }
   return true
 }
 
 const getResult = () => {
   if (unref(requestDataType) === RequestDataTypeEnum.AJAX) {
-    return unref(componentConfigurationEl)?.getConfigurationData()
+    return unref(componentConfigurationEl as any)?.getConfigurationData()
   } else if (unref(requestDataType) === RequestDataTypeEnum.Pond) {
-    return unref(publicInterfaceFormEl)?.getConfigurationData()
+    return unref(publicInterfaceFormEl as any)?.getConfigurationData()
   }
 
   return {} as unknown as RequestConfigType

@@ -16,7 +16,7 @@
         <p>
           <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
           <br />
-          <span class="func-keyword">async {{ eventName }}</span> (mouseEvent) {
+          <span class="func-keyword">async {{ eventName }}</span> (mouseEvent,components) {
         </p>
         <p class="go-ml-4">
           <n-code :code="(targetData.events.baseEvent || {})[eventName] || ''" language="typescript"></n-code>
@@ -52,7 +52,7 @@
               <!-- 函数名称 -->
               <p class="go-pl-3">
                 <span class="func-keyword">async function &nbsp;&nbsp;</span>
-                <span class="func-keyNameWord">{{ eventName }}(mouseEvent)&nbsp;&nbsp;{</span>
+                <span class="func-keyNameWord">{{ eventName }}(mouseEvent,components)&nbsp;&nbsp;{</span>
               </p>
               <!-- 编辑主体 -->
               <monaco-editor v-model:modelValue="baseEvent[eventName]" height="480px" language="javascript" />

@@ -188,7 +188,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
          * 不修改这里的话，会造成联动组件绑定不了动态请求或者静态相关的组件
          * 由于只修改一处，所以没必要进行重写，原因是原作者绑定组件(必须是带有动态请求,不支持静态组件)，此项目有时需要绑定静态组件看效果，所以不判断必须是动态请求
          * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-         * 源代码 && val.request.requestDataType === RequestDataTypeEnum.AJAX && val.request.requestUrl
+         * 源代码 !val.groupList && val.request.requestDataType === RequestDataTypeEnum.AJAX && val.request.requestUrl
          * 修改后的代码 无修改
          * 修改后代码在//之间
          */
@@ -228,7 +228,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
   }))
   const tarArr = requestDataPond.concat(mapOptionList)
   targetData.value.events.interactEvents?.forEach(iaItem => {
-    mapOptionList.forEach(optionItem => {
+    tarArr.forEach(optionItem => {
       if (optionItem.id === iaItem.interactComponentId) {
         optionItem.disabled = true
       }

@@ -27,7 +27,7 @@
       </div>
     </div>
     <!-- 修复右下角白点用的 -->
-    <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div>
+    <!-- <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div> -->
   </div>
 </template>
 <script setup lang="ts">
@@ -290,7 +290,6 @@ window.onKeySpacePressHold = (isHold: boolean) => {
 
 <style lang="scss" scoped>
 @include go('sketch-rule') {
-  position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
@@ -321,6 +320,10 @@ window.onKeySpacePressHold = (isHold: boolean) => {
       border-radius: 5px;
       background-color: rgba(144, 146, 152, 0.3);
     }
+    // 修复右下角白点用的
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
   }
 
   .fix-edit-screens-block {

@@ -45,7 +45,6 @@ export const dragHandle = async (e: DragEvent) => {
     chartEditStore.setTargetSelectChart(newComponent.id)
     loadingFinish()
   } catch (error) {
-    console.log(error)
     loadingError()
     window['$message'].warning(`图表正在研发中, 敬请期待...`)
   }
@@ -232,7 +231,7 @@ export const useMouseHandle = () => {
     const startY = e.screenY
 
     // 记录历史位置
-    const prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
+    let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
     chartEditStore.getTargetChart.selectId.forEach(id => {
       if (!targetMap.has(id)) return
 
@@ -250,8 +249,8 @@ export const useMouseHandle = () => {
       chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
 
       // 当前偏移量，处理 scale 比例问题
-      const offsetX = (moveEvent.screenX - startX) / scale
-      const offsetY = (moveEvent.screenY - startY) / scale
+      let offsetX = (moveEvent.screenX - startX) / scale
+      let offsetY = (moveEvent.screenY - startY) / scale
 
       chartEditStore.getTargetChart.selectId.forEach(id => {
         if (!targetMap.has(id)) return
@@ -361,8 +360,8 @@ export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCrea
   const mousemove = throttle((moveEvent: MouseEvent) => {
     chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
 
-    const currX = Math.round((moveEvent.screenX - startX) / scale)
-    const currY = Math.round((moveEvent.screenY - startY) / scale)
+    let currX = Math.round((moveEvent.screenX - startX) / scale)
+    let currY = Math.round((moveEvent.screenY - startY) / scale)
 
     const isTop = /t/.test(point)
     const isBottom = /b/.test(point)

@@ -30,7 +30,7 @@
         <span>{{ item.title }}</span>
       </n-tooltip>
       <n-divider vertical />
-      <!-- 保存 -->
+      <!-- THINKS_KIT 新增保存按钮 -->
       <n-tooltip placement="bottom" trigger="hover">
         <template #trigger>
           <div class="save-btn">

@@ -166,7 +166,7 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         let loadIndex = 0
-        const listLength = projectData[key].length;
+        const listLength = projectData[key].length
         for (const comItem of projectData[key]) {
           // 设置加载数量
           let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())

@@ -271,7 +271,6 @@ $carousel-image-height: 60vh;
         height: $carousel-image-height;
       }
     }
-
     .login-account {
       display: flex;
       flex-direction: column;

@@ -10,7 +10,8 @@
       ...getTransformStyle(item.styles),
       ...getStatusStyle(item.status),
       ...getPreviewConfigStyle(item.preview),
-      ...getBlendModeStyle(item.styles) as any
+      ...getBlendModeStyle(item.styles) as any,
+      ...getSizeStyle(item.attr)
     }"
   >
     <!-- 分组 -->

@@ -76,35 +76,28 @@ keyRecordHandle()
   height: 100vh;
   width: 100vw;
   @include background-image('background-image');
-
   &.fit,
   &.full {
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
-
     .go-preview-scale {
       transform-origin: center center;
     }
   }
-
   &.scrollY {
     overflow-x: hidden;
-
     .go-preview-scale {
       transform-origin: left top;
     }
   }
-
   &.scrollX {
     overflow-y: hidden;
-
     .go-preview-scale {
       transform-origin: left top;
     }
   }
-
   .go-preview-entity {
     overflow: hidden;
   }