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

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

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

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

+<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 { BarCommonConfig } from './BarCommon/index'
 import { BarCrossrangeConfig } from './BarCrossrange/index'
 import { BarCrossrangeConfig } from './BarCrossrange/index'
 import { CapsuleChartConfig } from './CapsuleChart/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,
         width: 3,
         color: {
         color: {
           type: 'linear',
           type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
           colorStops: [
           colorStops: [
             {
             {
               offset: 0,
               offset: 0,

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

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

@@ -14,5 +14,6 @@ export enum ChatCategoryEnumName {
   LINE = '折线图',
   LINE = '折线图',
   SCATTER = '散点图',
   SCATTER = '散点图',
   MAP = '地图',
   MAP = '地图',
+  COMBINATION = '组合图',
   MORE = '更多'
   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 { NumberConfig } from './Number/index'
 import { TimeCommonConfig } from './TimeCommon/index'
 import { TimeCommonConfig } from './TimeCommon/index'
 import { ClockConfig } from './Clock/index'
 import { ClockConfig } from './Clock/index'
+import { FullScreenConfig } from './FullScreen/index'
 import { CountDownConfig } from './CountDown/index'
 import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineVConfig } from './PipelineV/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
 // @ts-nocheck
 import {
 import {
   ArcCurve,
   ArcCurve,

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

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

+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'
+}

+<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)
+}

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

+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'
+}

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

+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: '每页条数'
+                }
+            ]
+        }
+    }
+]

 import { InputsDateConfig } from './InputsDate/index'
 import { InputsDateConfig } from './InputsDate/index'
 import { InputsSelectConfig } from './InputsSelect/index'
 import { InputsSelectConfig } from './InputsSelect/index'
 import { InputsTabConfig } from './InputsTab/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 { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
 import { WordCloudConfig } from './WordCloud/index'
-import { CarouselConfig } from './Carousel/index'
 
 
 export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]
 export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
       <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>
     </setting-item-box>
     </setting-item-box>
   </collapse-item>
   </collapse-item>

 <template>
 <template>
   <div class="go-text-box">
   <div class="go-text-box">
     <div class="content">
     <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>
       <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
     </div>
     </div>
   </div>
   </div>

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
       <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>
     </setting-item-box>
     </setting-item-box>
   </collapse-item>
   </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 { TableListConfig } from './TableList'
 import { TableScrollBoardConfig } from './TableScrollBoard'
 import { TableScrollBoardConfig } from './TableScrollBoard'
+import { TablesBasicConfig } from "./TablesBasic/index";
 
 
-export default [TableListConfig, TableScrollBoardConfig]
+export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig]

 <template>
 <template>
   <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="chart-amap" ref="vChartRef">
   <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>
     <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box>
   </div>
   </div>
 </template>
 </template>

@@ -4,9 +4,8 @@ import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
 import { TableList } from '@/packages/components/Tables/index'
 import { PhotoList } from '@/packages/components/Photos/index'
 import { PhotoList } from '@/packages/components/Photos/index'
 import { IconList } from '@/packages/components/Icons/index'
 import { IconList } from '@/packages/components/Icons/index'
-
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 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', {
 const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
   eager: true
   eager: true
@@ -18,9 +17,8 @@ const imagesModules: Record<string, { default: string }> = import.meta.glob('../
   eager: true
   eager: true
 })
 })
 
 
-
 // * 所有图表 
 // * 所有图表 
-export const packagesList: PackagesType = {
+export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
   [PackagesCategoryEnum.TABLES]: TableList,
@@ -101,4 +99,4 @@ export const fetchImages = async (targetData?: ConfigType) => {
   return ''
   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,
    * 修改后的代码 requestDataType: RequestDataTypeEnum.Pond,
    * 修改后代码在//ft之间
    * 修改后代码在//ft之间
    */
    */

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

@@ -29,12 +29,10 @@ import {
   EditCanvasConfigType
   EditCanvasConfigType
 } from './chartEditStore.d'
 } 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 {useChartDataSocket} from "@/hooks/external/useChartDataSocket";
+import { pinia } from '@/store'
 const chartHistoryStore = useChartHistoryStore(pinia)
 const chartHistoryStore = useChartHistoryStore(pinia)
 const settingStore = useSettingStore(pinia)
 const settingStore = useSettingStore(pinia)
-
 // 编辑区域内容
 // 编辑区域内容
 export const useChartEditStore = defineStore({
 export const useChartEditStore = defineStore({
   id: 'useChartEditStore',
   id: 'useChartEditStore',
@@ -511,8 +509,8 @@ export const useChartEditStore = defineStore({
         }
         }
         const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
         const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
           e = cloneDeep(e)
           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
           // 外层生成新 id
           e.id = getUUID()
           e.id = getUUID()
           // 分组列表生成新 id
           // 分组列表生成新 id
@@ -553,7 +551,7 @@ export const useChartEditStore = defineStore({
       this.setTargetSelectChart()
       this.setTargetSelectChart()
 
 
       // 重新选中
       // 重新选中
-      const historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
+      let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
       if (isArray(historyData)) {
       if (isArray(historyData)) {
         // 选中目标元素，支持多个
         // 选中目标元素，支持多个
         historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
         historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
@@ -625,7 +623,7 @@ export const useChartEditStore = defineStore({
           } else {
           } else {
             const group = historyData[0] as CreateComponentGroupType
             const group = historyData[0] as CreateComponentGroupType
             group.groupList.forEach(item => {
             group.groupList.forEach(item => {
-              ids.push(item.id)
+              ids.unshift(item.id)
             })
             })
           }
           }
           this.setGroup(ids, false)
           this.setGroup(ids, false)
@@ -774,7 +772,7 @@ export const useChartEditStore = defineStore({
           // 高
           // 高
           groupAttr.b = b < y + h ? y + h : b
           groupAttr.b = b < y + h ? y + h : b
 
 
-          targetList.push(item)
+          targetList.unshift(item)
           historyList.push(toRaw(item))
           historyList.push(toRaw(item))
         })
         })
 
 
@@ -820,7 +818,7 @@ export const useChartEditStore = defineStore({
           if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup]))
           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.x = item.attr.x + targetGroup.attr.x
             item.attr.y = item.attr.y + targetGroup.attr.y
             item.attr.y = item.attr.y + targetGroup.attr.y
             if (!callBack) {
             if (!callBack) {
@@ -850,7 +848,7 @@ export const useChartEditStore = defineStore({
       }
       }
     },
     },
     // * 锁定
     // * 锁定
-    setLock(status = true, isHistory = true) {
+    setLock(status: boolean = true, isHistory: boolean = true) {
       try {
       try {
         // 暂不支持多选
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
         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)
       this.setLock(false, isHistory)
     },
     },
     // * 隐藏
     // * 隐藏
-    setHide(status = true, isHistory = true) {
+    setHide(status: boolean = true, isHistory: boolean = true) {
       try {
       try {
         // 暂不支持多选
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
         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)
       this.setHide(false, isHistory)
     },
     },
     // ----------------
     // ----------------

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

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

@@ -103,6 +103,6 @@ export const useAsideHook = () => {
     selectOptions,
     selectOptions,
     selectValue,
     selectValue,
     clickItemHandle,
     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-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>
       <template #header>
         <n-space>
         <n-space>
           <n-text>过滤器函数编辑器</n-text>
           <n-text>过滤器函数编辑器</n-text>
@@ -49,12 +49,12 @@
               <n-tag type="info">
               <n-tag type="info">
                 <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{
                 <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{
               </n-tag>
               </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-tag type="info">}</n-tag>
             </n-space>
             </n-space>
           </div>
           </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>
             <n-space :size="15" vertical>
               <div class="editor-data-show">
               <div class="editor-data-show">
                 <n-space>
                 <n-space>

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

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

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

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

@@ -16,7 +16,7 @@
         <p>
         <p>
           <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
           <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
           <br />
           <br />
-          <span class="func-keyword">async {{ eventName }}</span> (mouseEvent) {
+          <span class="func-keyword">async {{ eventName }}</span> (mouseEvent,components) {
         </p>
         </p>
         <p class="go-ml-4">
         <p class="go-ml-4">
           <n-code :code="(targetData.events.baseEvent || {})[eventName] || ''" language="typescript"></n-code>
           <n-code :code="(targetData.events.baseEvent || {})[eventName] || ''" language="typescript"></n-code>
@@ -52,7 +52,7 @@
               <!-- 函数名称 -->
               <!-- 函数名称 -->
               <p class="go-pl-3">
               <p class="go-pl-3">
                 <span class="func-keyword">async function &nbsp;&nbsp;</span>
                 <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>
               </p>
               <!-- 编辑主体 -->
               <!-- 编辑主体 -->
               <monaco-editor v-model:modelValue="baseEvent[eventName]" height="480px" language="javascript" />
               <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)
   const tarArr = requestDataPond.concat(mapOptionList)
   targetData.value.events.interactEvents?.forEach(iaItem => {
   targetData.value.events.interactEvents?.forEach(iaItem => {
-    mapOptionList.forEach(optionItem => {
+    tarArr.forEach(optionItem => {
       if (optionItem.id === iaItem.interactComponentId) {
       if (optionItem.id === iaItem.interactComponentId) {
         optionItem.disabled = true
         optionItem.disabled = true
       }
       }

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

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

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

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

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

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

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