Merge branch 'dev'

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -14,6 +15,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
@@ -41,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -14,6 +15,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
@@ -40,6 +42,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -15,6 +16,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, 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 { LineChart } from 'echarts/charts'
@@ -41,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 

src/packages/components/Charts/Lines/LineLinearSingle/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const chartEditStore = useChartEditStore()

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
@@ -7,6 +7,7 @@
 import { PropType, reactive, watch, ref, nextTick } from 'vue'
 import config, { includes } from './config'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   MapChart,
   DatasetComponent,

src/packages/components/Charts/Mores/Funnel/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { FunnelChart } from 'echarts/charts'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed(() => {

src/packages/components/Charts/Mores/Heatmap/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -38,6 +39,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

src/packages/components/Charts/Mores/Radar/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const vChartRef = ref<typeof VChart>()

src/packages/components/Charts/Mores/TreeMap/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, TreemapChart])
 
 const vChartRef = ref<typeof VChart>()

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -30,6 +31,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, GridComponent])
 
 const chartEditStore = useChartEditStore()

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
@@ -29,6 +30,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
 
 const option = reactive({

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
@@ -30,6 +31,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed(() => {

src/packages/components/Charts/Scatters/ScatterCommon/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, 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 { ScatterChart, EffectScatterChart } from 'echarts/charts'
@@ -46,6 +48,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import ecStat from 'echarts-stat'
 import { use, registerTransform } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -47,6 +49,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

src/packages/components/Decorates/Borders/Border01/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border01Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border01Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border01.png'
 }

src/packages/components/Decorates/Borders/Border02/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border02.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border02Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border02Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border02.png'
 }

src/packages/components/Decorates/Borders/Border03/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border03Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border03Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border03.png'
 }

src/packages/components/Decorates/Borders/Border04/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border04Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border04Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border04.png'
 }

src/packages/components/Decorates/Borders/Border05/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border05Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border05Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border05.png'
 }

src/packages/components/Decorates/Borders/Border06/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border06Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border06Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border06.png'
 }

src/packages/components/Decorates/Borders/Border07/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border07Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border07Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border07.png'
 }

src/packages/components/Decorates/Borders/Border08/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border08Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border08Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border08.png'
 }

src/packages/components/Decorates/Borders/Border09/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border09Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border09Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border09.png'
 }

src/packages/components/Decorates/Borders/Border10/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border10Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border10Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border10.png'
 }

src/packages/components/Decorates/Borders/Border11/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border11Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border11Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border11.png'
 }

src/packages/components/Decorates/Borders/Border12/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border12Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border12Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border12.png'
 }

src/packages/components/Decorates/Borders/Border13/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border13Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border13Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border13.png'
 }

src/packages/components/Decorates/Decorates/Decorates01/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates01Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates01Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates01.png'
 }

src/packages/components/Decorates/Decorates/Decorates02/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates02Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates02Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates02.png'
 }

src/packages/components/Decorates/Decorates/Decorates03/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates03Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates03Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image: 'decorates01.png'
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates03.png'
 }

src/packages/components/Decorates/Decorates/Decorates04/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates04Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates04Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates04.png'
 }

src/packages/components/Decorates/Decorates/Decorates05/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/decorates05.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates05Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Decorates05Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates05.png'
 }

src/packages/components/Decorates/Decorates/Decorates06/index.ts

@@ -9,6 +9,6 @@ export const Decorates06Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.COMMON,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates06.png'
 }

src/packages/components/Decorates/Mores/CountDown/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const CountDownConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const CountDownConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'countdown.png'
 }

src/packages/components/Decorates/Mores/FlipperNumber/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const FlipperNumberConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const FlipperNumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'flipper-number.png'
 }

src/packages/components/Decorates/Mores/Number/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const NumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'number.png'
 }

src/packages/components/Decorates/Mores/TimeCommon/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TimeCommonConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TimeCommonConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'time.png'
 }

src/packages/components/Decorates/Three/ThreeEarth01/index.ts

@@ -9,6 +9,6 @@ export const ThreeEarth01Config: ConfigType = {
   category: ChatCategoryEnum.THREE,
   categoryName: ChatCategoryEnumName.THREE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'threeEarth01.png'
 }

src/packages/components/Informations/Inputs/InputsDate/config.ts

@@ -0,0 +1,24 @@
+import dayjs from 'dayjs'
+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 { InputsDateConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  // 下拉展示
+  isPanel: 0,
+  dataset: dayjs().valueOf()
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsDateConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Inputs/InputsDate/config.vue

@@ -0,0 +1,98 @@
+<template>
+  <collapse-item name="展示方式" :expanded="true">
+    <setting-item-box name="选择方式">
+      <n-select
+        v-model:value="optionData.isPanel"
+        size="small"
+        :options="panelOptions"
+      />
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="基础">
+      <setting-item name="类型">
+        <n-select
+          v-model:value="optionData.componentInteractEventKey"
+          size="small"
+          :options="datePickerTypeOptions"
+        />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="默认值" :alone="true">
+      <n-date-picker
+        size="small"
+        v-model:value="optionData.dataset"
+        :type="optionData.componentInteractEventKey"
+      />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { icon } from '@/plugins'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { ComponentInteractEventEnum } from './interact'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const panelOptions = [
+  {
+    label: '下拉展示',
+    value: 0
+  },
+  {
+    label: '面板展示',
+    value: 1
+  }
+]
+
+const datePickerTypeOptions = [
+  {
+    label: '日期',
+    value: ComponentInteractEventEnum.DATE
+  },
+  {
+    label: '日期时间',
+    value: ComponentInteractEventEnum.DATE_TIME
+  },
+  {
+    label: '日期范围',
+    value: ComponentInteractEventEnum.DATE_RANGE
+  },
+  {
+    label: '月份',
+    value: ComponentInteractEventEnum.MONTH
+  },
+  {
+    label: '月份范围',
+    value: ComponentInteractEventEnum.MONTH_RANGE
+  },
+  {
+    label: '年份',
+    value: ComponentInteractEventEnum.YEAR
+  },
+  {
+    label: '年份范围',
+    value: ComponentInteractEventEnum.YEAR_RANGE
+  },
+  {
+    label: '季度',
+    value: ComponentInteractEventEnum.QUARTER
+  },
+  {
+    label: '季度范围',
+    value: ComponentInteractEventEnum.QUARTER_RANGE
+  }
+]
+</script>

src/packages/components/Informations/Inputs/InputsDate/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsDateConfig: ConfigType = {
+  key: 'InputsDate',
+  chartKey: 'VInputsDate',
+  conKey: 'VCInputsDate',
+  title: '时间选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_date.png'
+}

src/packages/components/Informations/Inputs/InputsDate/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <n-date-picker
+    v-model:value="option.dataset"
+    :panel="!!chartConfig.option.isPanel"
+    :type="chartConfig.option.componentInteractEventKey"
+    :style="`width:${w}px;`"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import dayjs from 'dayjs'
+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 rangeDate = ref<number | number[]>()
+
+const option = shallowReactive({
+  dataset: props.chartConfig.option.dataset
+})
+
+// 监听事件改变
+const onChange = (v: number | number[]) => {
+  if (v instanceof Array) {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: v[0] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_END]: v[1] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+      },
+      InteractEventOn.CHANGE
+    )
+  } else {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
+    )
+  }
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number | number[]) => {
+    option.dataset = newData
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-input {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/packages/components/Informations/Inputs/InputsDate/interact.ts

@@ -0,0 +1,64 @@
+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATE = 'date',
+  DATE_TIME = 'datetime',
+  DATE_RANGE = 'daterange',
+  DATE_TIME_RANGE = 'datetimerange',
+  MONTH = 'month',
+  MONTH_RANGE = 'monthrange',
+  YEAR = 'year',
+  YEAR_RANGE = 'yearrange',
+  QUARTER = 'quarter',
+  QUARTER_RANGE = 'quarterrange'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATE = 'date',
+  DATE_START = 'dateStart',
+  DATE_END = 'dateEnd',
+  DATE_RANGE = 'daterange'
+}
+
+const time = [
+  {
+    value: ComponentInteractParamsEnum.DATE,
+    label: '日期'
+  }
+]
+
+const timeRange = [
+  {
+    value: ComponentInteractParamsEnum.DATE_START,
+    label: '开始时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_END,
+    label: '结束时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_RANGE,
+    label: '日期范围'
+  }
+]
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATE]: time,
+      [ComponentInteractEventEnum.DATE_TIME]: time,
+      [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
+      [ComponentInteractEventEnum.MONTH]: time,
+      [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
+      [ComponentInteractEventEnum.QUARTER]: time,
+      [ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
+      [ComponentInteractEventEnum.YEAR]: time,
+      [ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
+    }
+  }
+]

src/packages/components/Informations/Inputs/InputsSelect/config.ts

@@ -0,0 +1,37 @@
+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 { InputsSelectConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  selectValue: '1',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsSelectConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsSelectConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Inputs/InputsSelect/config.vue

@@ -0,0 +1,20 @@
+<template>
+  <collapse-item name="下拉配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+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>

src/packages/components/Informations/Inputs/InputsSelect/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsSelectConfig: ConfigType = {
+  key: 'InputsSelect',
+  chartKey: 'VInputsSelect',
+  conKey: 'VCInputsSelect',
+  title: '下拉选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_select.png'
+}

src/packages/components/Informations/Inputs/InputsSelect/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <n-select
+    v-model:value="option.value.selectValue"
+    :options="option.value.dataset"
+    :style="`width:${w}px;`"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, 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: {
+    selectValue: props.chartConfig.option.selectValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.selectValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-base-selection-label {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/packages/components/Informations/Inputs/InputsSelect/interact.ts

@@ -0,0 +1,27 @@
+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: '选择项'
+        }
+      ]
+    }
+  }
+]

src/packages/components/Informations/Inputs/InputsTab/config.ts

@@ -0,0 +1,39 @@
+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 { InputsTabConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  tabLabel: '选项1',
+  // 样式
+  tabType: 'segment',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsTabConfig.key
+  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsTabConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Inputs/InputsTab/config.vue

@@ -0,0 +1,31 @@
+<template>
+  <collapse-item name="标签页配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+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
+  }
+})
+
+const tabTypeOptions = [
+  {
+    label: '线条',
+    value: 'bar'
+  },
+  {
+    label: '分段',
+    value: 'segment'
+  }
+]
+</script>

src/packages/components/Informations/Inputs/InputsTab/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsTabConfig: ConfigType = {
+  key: 'InputsTab',
+  chartKey: 'VInputsTab',
+  conKey: 'VCInputsTab',
+  title: '标签选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_tab.png'
+}

src/packages/components/Informations/Inputs/InputsTab/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <n-tabs :type="option.value.tabType" @update:value="onChange">
+    <n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
+  </n-tabs>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+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: cloneDeep(props.chartConfig.option)
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  if (v === undefined) return
+  const selectItem = option.value.dataset.find((item: { label: string; value: any }) => item.label === v)
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: selectItem.value },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.tabValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

src/packages/components/Informations/Inputs/InputsTab/interact.ts

@@ -0,0 +1,27 @@
+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: '选择项'
+        }
+      ]
+    }
+  }
+]

src/packages/components/Informations/Inputs/index.ts

@@ -0,0 +1,5 @@
+import { InputsDateConfig } from './InputsDate/index'
+import { InputsSelectConfig } from './InputsSelect/index'
+import { InputsTabConfig } from './InputsTab/index'
+
+export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]

src/packages/components/Informations/Mores/WordCloud/config.vue

@@ -1,4 +1,5 @@
 <template>
+  <global-setting :optionData="optionData"></global-setting>
   <collapse-item name="词云" expanded>
     <setting-item-box name="形状">
       <setting-item>
@@ -45,7 +46,7 @@
 import { PropType, computed } from 'vue'
 import { option, ShapeEnumList } from './config'
 // eslint-disable-next-line no-unused-vars
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {

src/packages/components/Informations/Mores/WordCloud/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -12,6 +13,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import 'echarts-wordcloud'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -38,6 +40,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, GridComponent, TooltipComponent])
 
 const replaceMergeArr = ref<string[]>()

src/packages/components/Informations/Texts/TextBarrage/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextBarrageConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TextBarrageConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'text_barrage.png'
 }

src/packages/components/Informations/Texts/TextCommon/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextCommonConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TextCommonConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'text_static.png'
 }

src/packages/components/Informations/index.d.ts

@@ -1,11 +1,14 @@
 export enum ChatCategoryEnum {
   TEXT = 'Texts',
   TITLE = 'Titles',
+  INPUTS = 'Inputs',
   MORE = 'Mores'
 }
 
 export enum ChatCategoryEnumName {
   TEXT = '文本',
   TITLE = '标题',
+  // 控件 => 数据录入
+  INPUTS = '控件',
   MORE = '更多'
 }

src/packages/components/Informations/index.ts

@@ -1,4 +1,5 @@
 import Texts from './Texts'
+import Inputs from './Inputs'
 import Mores from './Mores'
 
-export const InformationList = [...Texts, ...Mores]
+export const InformationList = [...Texts, ...Inputs, ...Mores]

src/packages/index.d.ts

@@ -1,4 +1,4 @@
-import { BaseEvent, EventLife } from '@/enums/eventEnum'
+import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -120,20 +120,26 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
+  interactActions?: InteractActionsType[],
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
-    },
+    }
     advancedEvents: {
       [K in EventLife]?: string
     }
+    interactEvents: {
+      [InteractEvents.INTERACT_ON]: InteractEventOn | undefined
+      [InteractEvents.INTERACT_COMPONENT_ID]: string | undefined
+      [InteractEvents.INTERACT_FN]: { [name: string]: string }
+    }[]
   }
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
-  option: GlobalThemeJsonType,
+  option: GlobalThemeJsonType
 }
 
 // 组件成组实例类

src/packages/public/publicConfig.ts

@@ -102,7 +102,8 @@ export class PublicConfigClass implements PublicConfigType {
     advancedEvents: {
       [EventLife.VNODE_MOUNTED]: undefined,
       [EventLife.VNODE_BEFORE_MOUNT]: undefined
-    }
+    },
+    interactEvents: []
   }
 }