Merge branch 'ft' into 'main'

feat(external/Componse): 组合新增标题

See merge request yunteng/thingskit-view!13

@@ -15,5 +15,5 @@ export const LeftCenterRightHeadConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     package: EPackagesCategoryEnum.COMPOSES,
     package: EPackagesCategoryEnum.COMPOSES,
     chartFrame: ChartFrameEnum.COMMON,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'left_center_rightHead.png',
+    image: 'customHead1.png',
 }
 }

 <template>
 <template>
   <div class="go-animat">
   <div class="go-animat">
     <div class="go-animat-item" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }">
     <div class="go-animat-item" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }">
-      <svg :width="animat.w + 'px'" :height="animat.h + 'px'">
+      <svg :width="w" :height="h">
         <polyline
         <polyline
           fill="transparent"
           fill="transparent"
           stroke-width="3"
           stroke-width="3"
-          :points="`0,20 ${animat.w / 5.555555555555556},20   ${animat.w / 5},40  ${animat.w / 4},40  ${
-            animat.w / 3.703703703703704
-          },60  ${animat.w / 1.388888888888889},60  ${animat.w / 1.333333333333333},40  ${animat.w / 1.25},40  ${
-            animat.w / 1.219512195121951
-          },20  ${animat.w},20`"
+          :points="`0,20 ${w / 5.555555555555556},20   ${w / 5},40  ${w / 4},40  ${
+            w / 3.703703703703704
+          },60  ${w / 1.388888888888889},60  ${w / 1.333333333333333},40  ${w / 1.25},40  ${
+            w / 1.219512195121951
+          },20  ${w},20`"
           :stroke="animat.colors[0]"
           :stroke="animat.colors[0]"
         >
         >
           <animate
           <animate
@@ -28,7 +28,7 @@
         <polyline
         <polyline
           fill="transparent"
           fill="transparent"
           stroke-width="2"
           stroke-width="2"
-          :points="`${animat.w / 3.333333333333333},80 ${animat.w / 1.428571428571429},80`"
+          :points="`${w / 3.333333333333333},80 ${w / 1.428571428571429},80`"
           :stroke="animat.colors[1]"
           :stroke="animat.colors[1]"
         >
         >
           <animate
           <animate
@@ -70,6 +70,8 @@ props.chartConfig.attr.h = 300
 props.chartConfig.attr.x = 0
 props.chartConfig.attr.x = 0
 props.chartConfig.attr.y = 0
 props.chartConfig.attr.y = 0
 
 
+const { w, h } = toRefs(props.chartConfig.attr)
+
 const { animat } = toRefs(props.chartConfig.option)
 const { animat } = toRefs(props.chartConfig.option)
 </script>
 </script>
 
 

@@ -13,5 +13,5 @@ export const LeftCenterRightHeadCommonConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     package: EPackagesCategoryEnum.COMPOSES,
     package: EPackagesCategoryEnum.COMPOSES,
     chartFrame: ChartFrameEnum.COMMON,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'left_center_rightHead.png',
+    image: 'customHead2.png',
 }
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ButtonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '默认',
+  /**
+   * Naive UI button部分属性
+   */
+  attribute:{
+    //尺寸
+   size:'medium',
+   //透明
+   ghost:false,
+   //加载
+   loading:false,
+   //自定义颜色
+   color:'#ffffff',
+   //文字背景
+   textColor:'black'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ButtonConfig.key
+  public chartConfig = cloneDeep(ButtonConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="按钮配置" :expanded="true">
+    <SettingItemBox name="信息">
+      <SettingItem name="文字">
+        <n-input size="small" v-model:value="optionData.dataset"></n-input>
+      </SettingItem>
+      <SettingItem name="文字颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.textColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.textColor ='black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="属性">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.color ='#ffffff'"> 恢复默认 </n-button>
+      </SettingItem>
+      <SettingItem name="是否透明">
+        <n-switch v-model:value="optionData.attribute.ghost" />
+      </SettingItem>
+      <SettingItem name="是否加载">
+        <n-switch v-model:value="optionData.attribute.loading" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

-import { useWidgetKey } from '@/packages/external/useWidgetKey'
-import { ConfigType, ChartFrameEnum } from '@/packages/index.d'
-import { EPackagesCategoryEnum } from '../../../types'
+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
 
 
-const { key, conKey, chartKey } = useWidgetKey('WordCloud')
-export const WordCloudConfig: ConfigType = {
-  key,
-  chartKey,
-  conKey,
-  title: '词云',
-  category: ChatCategoryEnum.MORE,
-  categoryName: ChatCategoryEnumName.MORE,
-  package: EPackagesCategoryEnum.COMPOSES,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'words_cloud.png'
+const { key, chartKey, conKey } = useWidgetKey('Button')
+export const ButtonConfig: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '按钮',
+    category: ChatCategoryEnum.MORE,
+    categoryName: ChatCategoryEnumName.MORE,
+    package: EPackagesCategoryEnum.COMPOSES,
+    chartFrame: ChartFrameEnum.NAIVE_UI,
+    image: 'button.png',
 }
 }

+<template>
+  <div  class="go-content-box">
+      <n-button class="content"  @click="handleClick" v-bind={...attribute}>{{dataset}}</n-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import {option as configOption} from './config'
+
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+//修改默认宽高距离位置
+props.chartConfig.attr.w = 100
+props.chartConfig.attr.h = 50
+props.chartConfig.attr.x = 200
+props.chartConfig.attr.y = 200
+
+const { dataset,attribute }= toRefs(props.chartConfig.option) as unknown as typeof configOption
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const handleClick=()=>{
+  attribute.loading=true
+  window['$message'].success('您点击了按钮')
+  attribute.loading=false
+}
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.go-content-box{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .content{
+    width:v-bind('w + "px"');
+    height:v-bind('h + "px"');
+  }
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { DateTimeConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  /**
+   * Naive UI Date Picker部分属性
+   */
+  dataset:[Date.now(), Date.now()],
+  attribute:{
+    //是否支持清除
+    clearable:false,
+    //是否禁用
+    disabled:false,
+    //尺寸
+    size:'medium'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = DateTimeConfig.key
+  public chartConfig = cloneDeep(DateTimeConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="日期时间配置" :expanded="true">
+    <SettingItemBox name="属性">
+      <SettingItem name="是否支持清除">
+        <n-switch v-model:value="optionData.attribute.clearable" />
+      </SettingItem>
+      <SettingItem name="是否禁用">
+        <n-switch v-model:value="optionData.attribute.disabled" />
+      </SettingItem>
+      <SettingItem name="尺寸">
+        <n-select v-model:value="optionData.attribute.size" :options="options" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const options=[
+        {
+          label: "小型",
+          value: 'small',
+        },
+        {
+          label: '中等',
+          value: 'medium'
+        },
+        {
+          label: '大型',
+          value: 'large'
+        },
+]
+</script>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('DateTime')
+export const DateTimeConfig: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '日期时间',
+    category: ChatCategoryEnum.MORE,
+    categoryName: ChatCategoryEnumName.MORE,
+    package: EPackagesCategoryEnum.COMPOSES,
+    chartFrame: ChartFrameEnum.NAIVE_UI,
+    image: 'dateTime.png',
+}

+<template>
+  <div class="go-content-box" >
+    <n-date-picker class="content" @confirm="handleOnConfirm" v-bind={...attribute} v-model:value="dataset" type="datetimerange" />
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+//修改默认宽高距离位置
+props.chartConfig.attr.w = 600
+props.chartConfig.attr.h = 100
+props.chartConfig.attr.x = 200
+props.chartConfig.attr.y = 200
+
+const { dataset,attribute }= toRefs(props.chartConfig.option)
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const handleOnConfirm=(values:[number, number])=>{
+  window['$message'].success(`您选中了时间段[${values}]`)
+}
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .content{
+    width:v-bind('w + "px"');
+    height:v-bind('h + "px"');
+  }
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TitleConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset:'我是标题',
+  attribute:{
+    titleColor:'#fff',
+    titleSize:'16',
+    svg_7:'blue',
+    svg_8:'red',
+    svg_16:'red',
+    svg_14:'red',
+    svg_21:'red',
+    svg_7_opacity:1,
+    svg_8_opacity:1,
+    svg_16_opacity:1,
+    svg_14_opacity:1,
+    linearGradient:{
+      stop_color1:'#447799',
+      stop_color2:'#224488',
+      svg_21_opacity1:1,
+      svg_21_opacity2:1,
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TitleConfig.key
+  public chartConfig = cloneDeep(TitleConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="配置" :expanded="true">
+    <SettingItemBox name="文字">
+      <SettingItem name="内容">
+        <n-input size="small" v-model:value="optionData.dataset"></n-input>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.titleColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.titleColor ='#fff'"> 恢复默认 </n-button>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="optionData.attribute.titleSize" size="small" placeholder="大小"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="左边装饰">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_16"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="透明度">
+        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_16_opacity" size="small" placeholder="透明度1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="三角装饰">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_14"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="透明度">
+        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_14_opacity" size="small" placeholder="透明度1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="右边装饰">
+      <SettingItem name="颜色1">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_7"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色2">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_8"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="透明度1">
+        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_7_opacity" size="small" placeholder="透明度1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="透明度2">
+        <n-input-number  :min="0" :max="1" v-model:value="optionData.attribute.svg_8_opacity" size="small" placeholder="透明度2"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="装饰渐变">
+      <SettingItem name="渐变颜色1">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.linearGradient.stop_color1"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="渐变颜色2">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.linearGradient.stop_color2"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="透明度1">
+        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.linearGradient.svg_21_opacity1" size="small" placeholder="透明度1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="透明度2">
+        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.linearGradient.svg_21_opacity2" size="small" placeholder="透明度1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Title')
+export const TitleConfig: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '标题',
+    category: ChatCategoryEnum.MORE,
+    categoryName: ChatCategoryEnumName.MORE,
+    package: EPackagesCategoryEnum.COMPOSES,
+    chartFrame: ChartFrameEnum.NAIVE_UI,
+    image: 'dateTime.png',
+}

+<template>
+  <div class="go-content-box" >
+<svg xmlns="http://www.w3.org/2000/svg" width="782" height="600">
+  <defs>
+  <defs>
+                <linearGradient id="my-cool-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <stop offset="0%"  :style="{stopColor:attribute.linearGradient.stop_color1,stopOpacity:attribute.linearGradient.svg_21_opacity1 }"/>
+                    <stop offset="100%" :style="{stopColor:attribute.linearGradient.stop_color2,stopOpacity:attribute.linearGradient.svg_21_opacity2}"/>
+                </linearGradient>
+            </defs>
+  </defs>
+ <g>
+  <rect stroke="#000" id="svg_6" height="0" width="2" y="189.5" x="523" fill="#fff"/>
+  <path :opacity="attribute.svg_7_opacity"  transform="rotate(-137 422.766 284.992)" stroke="#000" id="svg_7" d="m412.87465,287.39672l3.95636,-4.80932l15.82545,0l-3.95636,4.80932l-15.82545,0z" :fill="attribute.svg_7"/>
+  <path :opacity="attribute.svg_8_opacity" transform="rotate(44 444.883 283.871)" stroke="#000" id="svg_8" d="m435.52609,286.39738l3.74294,-5.0534l14.97175,0l-3.74294,5.0534l-14.97175,0z" :fill="attribute.svg_8"/>
+  <rect id="svg_10" height="0" width="1" y="242.5" x="235" stroke="#000" fill="#fff"/>
+  <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" :font-size="attribute.titleSize" stroke-width="0" id="svg_12" y="290.5" x="214" stroke="#000" :fill="attribute.titleColor">{{ dataset }}</text>
+  <path  :opacity="attribute.svg_14_opacity"  transform="rotate(90 198.922 284.168)" stroke="#000" id="svg_14" d="m193.42189,288.16843l5.50043,-8.00001l5.50043,8.00001l-11.00085,0z" stroke-width="0" :fill="attribute.svg_14"/>
+  <path id="svg_15" d="m259.7,311.34437l0.5,-1.00001l0.5,1.00001l-1.00001,0z" stroke-width="0" stroke="#000" fill="#000000"/>
+  <rect stroke="#000" id="svg_16" height="33" width="4" y="269" x="181" :fill="attribute.svg_16" :opacity="attribute.svg_16_opacity"/>
+  <rect id="svg_17" height="0" width="2" y="368.5" x="187" stroke="#000" fill="#6D97AB"/>
+  <rect id="svg_18" height="13" width="0" y="290.5" x="167" stroke="#000" fill="#6D97AB"/>
+  <rect id="svg_20" height="0" width="1" y="193.5" x="281" stroke="#000" fill="#6D97AB"/>
+  <path stroke="#000" id="svg_21" d="m184,269l299.00001,0l0,33l-299.00001,0l0,-33z" opacity="0.35" fill="url(#my-cool-gradient)"/>
+ </g>
+
+</svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+//修改默认宽高距离位置
+props.chartConfig.attr.w = 600
+props.chartConfig.attr.h = 100
+props.chartConfig.attr.x = 200
+props.chartConfig.attr.y = 200
+
+const { dataset,attribute }= toRefs(props.chartConfig.option)
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .content{
+    width:v-bind('w + "px"');
+    height:v-bind('h + "px"');
+  }
+}
+</style>

-import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
-import { WordCloudConfig } from './index'
-import { CreateComponentType } from '@/packages/index.d'
-import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
-
-export const includes = []
-
-export const ShapeEnumList = [
-  { label: '圆形', value: 'circle' },
-  { label: '心形', value: 'cardioid' },
-  { label: '钻石', value: 'diamond' },
-  { label: '右三角形', value: 'triangle-forward' },
-  { label: '三角形', value: 'triangle' },
-  { label: '五边形', value: 'pentagon' },
-  { label: '星星', value: 'star' }
-]
-
-export const option = {
-  dataset: [...dataJson],
-  tooltip: {},
-  series: [
-    {
-      type: 'wordCloud',
-
-      // “云”绘制的形状，可以是表示为回调函数，也可以是固定关键字。
-      // 可用值有：circle|cardioid|diamond|triangle-forward|triangle|pentagon|star
-      shape: 'circle',
-
-      // 白色区域将被排除在绘制文本之外的剪影图像。
-      // 随着云的形状生长，形状选项将继续应用。
-      // maskImage: maskImage,
-
-      // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
-      // Default to be put in the center and has 75% x 80% size.
-      left: 'center',
-      top: 'center',
-      width: '70%',
-      height: '80%',
-      right: null,
-      bottom: null,
-
-      // 文本大小范围，默认 [12,60]
-      sizeRange: [12, 60],
-
-      // 文本旋转范围和程度的步骤。 文本将通过旋转步骤45在[-90，90]中随机旋转
-      rotationRange: [0, 0],
-      rotationStep: 0,
-
-      // size of the grid in pixels for marking the availability of the canvas
-      // 网格大小越大，单词之间的差距就越大。
-      gridSize: 8,
-
-      // 设置为true，以允许单词在画布之外部分地绘制。允许绘制大于画布的大小
-      drawOutOfBound: false,
-
-      // If perform layout animation.
-      // NOTE disable it will lead to UI blocking when there is lots of words.
-      layoutAnimation: true,
-
-      // Global text style
-      textStyle: {
-        fontFamily: 'sans-serif',
-        fontWeight: 'bold'
-        // 颜色可以是回调功能或颜色字符串
-        // color: function () {
-        //   // 随机颜色
-        //   return (
-        //     'rgb(' +
-        //     [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(
-        //       ','
-        //     ) +
-        //     ')'
-        //   )
-        // }
-      },
-      emphasis: {
-        focus: 'self',
-
-        textStyle: {
-          shadowBlur: 10,
-          shadowColor: '#333'
-        }
-      },
-      data: [...dataJson]
-    }
-  ]
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = WordCloudConfig.key
-  public chartConfig = cloneDeep(WordCloudConfig)
-  // 图表配置项
-  public option = echartOptionProfixHandle(option, includes)
-}

-<template>
-  <collapse-item name="词云" expanded>
-    <setting-item-box name="形状">
-      <setting-item>
-        <n-select v-model:value="optionData.series[0].shape" size="small" :options="ShapeEnumList" />
-      </setting-item>
-      <setting-item>
-        <n-checkbox v-model:checked="optionData.series[0].drawOutOfBound" size="small">允许出边</n-checkbox>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="布局">
-      <setting-item name="宽度">
-        <n-slider
-          v-model:value="series.width"
-          :min="0"
-          :max="100"
-          :format-tooltip="sliderFormatTooltip"
-          @update:value="updateWidth"
-        ></n-slider>
-      </setting-item>
-      <setting-item name="高度">
-        <n-slider
-          v-model:value="series.height"
-          :min="0"
-          :max="100"
-          :format-tooltip="sliderFormatTooltip"
-          @update:value="updateHeight"
-        ></n-slider>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="样式" alone>
-      <setting-item name="字体区间(最小/最大字体)">
-        <n-slider v-model:value="optionData.series[0].sizeRange" range :step="1" :min="6" :max="100" />
-      </setting-item>
-      <setting-item name="旋转角度">
-        <n-slider v-model:value="series.rotationStep" :step="15" :min="0" :max="45" @update:value="updateRotation" />
-      </setting-item>
-    </setting-item-box>
-  </collapse-item>
-</template>
-
-<script setup lang="ts">
-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'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-const series = computed(() => {
-  const { width, height, rotationStep } = props.optionData.series[0]
-  return {
-    width: +width.replace('%', ''),
-    height: +height.replace('%', ''),
-    rotationStep
-  }
-})
-
-const sliderFormatTooltip = (v: number) => {
-  return `${v}%`
-}
-
-const updateWidth = (value: number) => {
-  props.optionData.series[0].width = `${value}%`
-}
-
-const updateHeight = (value: number) => {
-  props.optionData.series[0].height = `${value}%`
-}
-
-const updateRotation = (value: number) => {
-  props.optionData.series[0].rotationStep = value
-  props.optionData.series[0].rotationRange = value === 0 ? [0, 0] : [-90, 90]
-}
-</script>

-[
-  {
-    "name": "数据可视化",
-    "value": 8000,
-    "textStyle": {
-      "color": "#78fbb2"
-    },
-    "emphasis": {
-      "textStyle": {
-        "color": "red"
-      }
-    }
-  },
-  {
-    "name": "GO VIEW",
-    "value": 6181
-  },
-  {
-    "name": "低代码",
-    "value": 4386
-  },
-  {
-    "name": "Vue3",
-    "value": 4055
-  },
-  {
-    "name": "TypeScript4",
-    "value": 2467
-  },
-  {
-    "name": "Vite2",
-    "value": 2244
-  },
-  {
-    "name": "NaiveUI",
-    "value": 1898
-  },
-  {
-    "name": "ECharts5",
-    "value": 1484
-  },
-  {
-    "name": "Axios",
-    "value": 1112
-  },
-  {
-    "name": "Pinia2",
-    "value": 965
-  },
-  {
-    "name": "PlopJS",
-    "value": 847
-  },
-  {
-    "name": "sfc",
-    "value": 582
-  },
-  {
-    "name": "SCSS",
-    "value": 555
-  },
-  {
-    "name": "pnpm",
-    "value": 550
-  },
-  {
-    "name": "eslint",
-    "value": 462
-  },
-  {
-    "name": "json",
-    "value": 366
-  },
-  {
-    "name": "图表",
-    "value": 360
-  },
-  {
-    "name": "地图",
-    "value": 282
-  },
-  {
-    "name": "时钟",
-    "value": 273
-  },
-  {
-    "name": "标题",
-    "value": 265
-  }
-]

-<template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()"
-    :update-options="{ replaceMerge: replaceMergeArr }" autoresize></v-chart>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, PropType } from 'vue'
-import VChart from 'vue-echarts'
-import 'echarts-wordcloud'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import config, { includes } from './config'
-import { mergeTheme, setOption } from '@/packages/public/chart'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import { GridComponent, TooltipComponent } from 'echarts/components'
-import dataJson from './data.json'
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<config>,
-    required: true
-  }
-})
-
-use([CanvasRenderer, GridComponent, TooltipComponent])
-
-const replaceMergeArr = ref<string[]>()
-
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-
-const dataSetHandle = (dataset: typeof dataJson) => {
-  try {
-    dataset && (props.chartConfig.option.series[0].data = dataset)
-    vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option)
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-// dataset 无法变更条数的补丁
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    dataSetHandle(newData)
-  },
-  {
-    deep: false
-  }
-)
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
-  dataSetHandle(newData)
-})
-</script>

-import { WordCloudConfig } from './WordCloud/index'
+import { ButtonConfig } from './Button/index'
+import { DateTimeConfig } from './DateTime/index'
+import { TitleConfig } from './Title/index'
 
 
-export default [WordCloudConfig]
+export default [ButtonConfig,DateTimeConfig,TitleConfig]