perf(external/Componse): 新增组合下的小标题2

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Title2Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '我是标题',
+  attribute: {
+    linearColors: ['#21649C', '#060F1E', '#2AFFFF', '#000000', '#ffcc33', '#ffcc33'],
+    fontSize: 20,
+    fontPos: {
+      x: 0,
+      y: 20
+    },
+    fontColor: '#2AFFFF'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Title2Config.key
+  public chartConfig = cloneDeep(Title2Config)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="配置" :expanded="true">
+    <SettingItemBox name="标题">
+      <SettingItem name="内容">
+        <n-input v-model:value="optionData.dataset" />
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="optionData.attribute.fontSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="x轴位置">
+        <n-input-number v-model:value="optionData.attribute.fontPos.x" />
+      </SettingItem>
+      <SettingItem name="y轴位置">
+        <n-input-number v-model:value="optionData.attribute.fontPos.y" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox
+      :name="`装饰颜色-${index + 1}`"
+      v-for="(item, index) in optionData.attribute.linearColors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.attribute.linearColors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
+        >
+          恢复默认
+        </n-button>
+      </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('Title2')
+export const Title2Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '小标题2',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: EPackagesCategoryEnum.COMPOSES,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'dateTime.png'
+}

+<template>
+  <div class="go-content-box">
+    <svg :width="w" :height="h" fill="none">
+      <defs xmlns="http://www.w3.org/2000/svg">
+        <linearGradient id="linear_title2_u" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
+        </linearGradient>
+        <linearGradient id="linear_title2_d" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[4]" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <g opacity="1" transform="translate(0 0)  rotate(0 160 15)">
+        <path
+          id="矩形 title2_u"
+          fill-rule="evenodd"
+          fill="url(#linear_title2_u)"
+          transform="translate(0 0)  rotate(0 160 15)"
+          opacity="1"
+          :d="`M2.77,${h} L${w},${h} L${w},0 L${
+            w - 11.44
+          },0 C10.58,0 9.81,0.55 9.54,1.37 L0.88,27.37 C0.68,27.98 0.78,28.65 1.15,29.17 C1.53,29.69 2.13,30 2.77,30 Z `"
+        />
+        <path
+          id="矩形 title2_u"
+          style="stroke: url(#linear_title2_d); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
+          transform="translate(0 0)  rotate(0 160 15)"
+          :d="`M2.77,${h} L${w},${h} L${w},0 L11.44,0 C10.58,0 9.81,0.55 9.54,1.37 L0.88,27.37 C0.68,27.98 0.78,28.65 1.15,29.17 C1.53,29.69 2.13,30 2.77,30 Z `"
+        />
+        <g opacity="1" :transform="`translate(24 ${h / 2 - 26 / 2})  rotate(0 46 13)`">
+          <text>
+            <tspan
+              :x="attribute.fontPos.x"
+              :y="attribute.fontPos.y"
+              :font-size="attribute.fontSize"
+              line-height="0"
+              :fill="attribute.fontColor"
+              opacity="1"
+              font-family="YouSheBiaoTiHei"
+              letter-spacing="0"
+            >
+              {{ dataset }}
+            </tspan>
+          </text>
+        </g>
+        <path
+          id="矩形 title2_d"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[4] }"
+          :transform="`translate(9  ${h / 2 - 15 / 2})  rotate(0 3.5 7.5)`"
+          opacity="1"
+          d="M0,15L2,15L7,0L5,0L0,15Z "
+        />
+        <path
+          id="矩形 title2_d"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[5] }"
+          :transform="`translate(15 ${h / 2 - 15 / 2})  rotate(0 3.5 7.5)`"
+          opacity="1"
+          d="M0,15L2,15L7,0L5,0L0,15Z "
+        />
+      </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
+  }
+})
+
+const { dataset, attribute } = toRefs(props.chartConfig.option)
+
+const { w, h } = toRefs(props.chartConfig.attr)
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

 import { ButtonConfig } from './Button/index'
 import { Title1Config } from './Title1/index'
+import { Title2Config } from './Title2/index'
 import { CameraConfig } from './Camera/index'
 
-export default [ButtonConfig, Title1Config, CameraConfig]
+export default [ButtonConfig, Title1Config, CameraConfig,Title2Config]