feat(external/Compose): 组合-更多下新增了按钮和日期时间两个控件

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

 <template>
   <div class="go-animat">
     <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
           fill="transparent"
           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]"
         >
           <animate
@@ -28,7 +28,7 @@
         <polyline
           fill="transparent"
           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]"
         >
           <animate
@@ -70,6 +70,8 @@ props.chartConfig.attr.h = 300
 props.chartConfig.attr.x = 0
 props.chartConfig.attr.y = 0
 
+const { w, h } = toRefs(props.chartConfig.attr)
+
 const { animat } = toRefs(props.chartConfig.option)
 </script>
 

@@ -13,5 +13,5 @@ export const LeftCenterRightHeadCommonConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     package: EPackagesCategoryEnum.COMPOSES,
     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 { 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('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 { WordCloudConfig } from './WordCloud/index'
+import { ButtonConfig } from './Button/index'
+import { DateTimeConfig } from './DateTime/index'
 
-export default [WordCloudConfig]
+export default [WordCloudConfig,ButtonConfig,DateTimeConfig]