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

+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 { ButtonConfig } from './Button/index'
 import { DateTimeConfig } from './DateTime/index'
+import { TitleConfig } from './Title/index'
 
-export default [ButtonConfig,DateTimeConfig]
+export default [ButtonConfig,DateTimeConfig,TitleConfig]