perf(src/packages): 小组件新增小标题4

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Subtitle4Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '我是标题',
+  attribute: {
+    linearColors: [
+      '#2AFFFF',
+      '#2AFFFF',
+      '#2affff',
+      '#2affff',
+      '#2affff',
+      '#2affff',
+      '#2affff',
+      '#2affff',
+      '#2affff',
+      '#2affff',
+    ],
+    fontSize: 20,
+    fontPos: {
+      x: 0,
+      y: 20
+    },
+    fontColor: '#2AFFFF'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Subtitle4Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
+  public chartConfig = cloneDeep(Subtitle4Config)
+  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="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>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
+      </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 { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Subtitle4',true)
+
+export const Subtitle4Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '小标题4',
+    category: ChatCategoryEnum.SUBTITLE,
+    categoryName: ChatCategoryEnumName.SUBTITLE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'title3.png',
+}

+<template>
+  <div class="go-content-box">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      :width="w"
+      :height="h"
+      fill="none"
+    >
+      <defs>
+        <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />
+          <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <g opacity="1" :transform="`translate(0 ${h / 2 - 10})  rotate(0 248 17.5)`">
+        <path
+          id="路径 13"
+          :style="{ stroke: attribute.linearColors[2], strokeWidth: 1, strokeOpacity: 1 }"
+          :transform="`translate(8 12)  rotate(0 243.5 8)`"
+          :d="`M0,0 L14.01,16 L${w},16`"
+        />
+        <g opacity="1" transform="translate(28 0)  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="圆形 15"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[3] }"
+          transform="translate(6 10)  rotate(0 2.5 2.5)"
+          opacity="1"
+          d="M2.5,0C1.12,0 0,1.12 0,2.5C0,3.88 1.12,5 2.5,5C3.88,5 5,3.88 5,2.5C5,1.12 3.88,0 2.5,0Z "
+        />
+        <path
+          id="圆形 15"
+          :style="{ stroke: attribute.linearColors[4], strokeWidth: 0.5, strokeOpacity: 0.5 }"
+          transform="translate(3 7)  rotate(0 5.5 5.5)"
+          d="M5.5,0C2.46,0 0,2.46 0,5.5C0,8.54 2.46,11 5.5,11C8.54,11 11,8.54 11,5.5C11,2.46 8.54,0 5.5,0Z "
+        />
+        <path
+          id="圆形 15"
+          :style="{ stroke: attribute.linearColors[5], strokeWidth: 0.5, strokeOpacity: 0.19 }"
+          transform="translate(0 4)  rotate(0 8.5 8.5)"
+          d="M8.5,0C3.81,0 0,3.81 0,8.5C0,13.19 3.81,17 8.5,17C13.19,17 17,13.19 17,8.5C17,3.81 13.19,0 8.5,0Z "
+        />
+        <path
+          id="圆形 16"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[6] }"
+          transform="translate(2.5 12)  rotate(0 1 1)"
+          opacity="1"
+          d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
+        />
+        <path
+          id="圆形 16"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[7] }"
+          transform="translate(12.5 12)  rotate(0 1 1)"
+          opacity="1"
+          d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
+        />
+        <path
+          id="圆形 16"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[8] }"
+          transform="translate(8 6.5)  rotate(0 1 1)"
+          opacity="1"
+          d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
+        />
+        <path
+          id="圆形 17"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[9] }"
+          :transform="`translate(${w - 5} 26)  rotate(0 2 2)`"
+          opacity="1"
+          d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
+        />
+        <path
+          id="矩形 44"
+          fill-rule="evenodd"
+          fill="url(#linear_0)"
+          transform="translate(23 30)  rotate(0 110.5 2.5)"
+          opacity="1"
+          :d="`M5,5 L${w / 2},5 L${w / 2},0 L0,0 L5,5 Z `"
+        />
+      </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>

@@ -28,6 +28,7 @@ import { Headline2Config } from '@/packages/components/external/Decorates/Headli
 import { Subtitle1Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle1'
 import { Subtitle2Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle2'
 import { Subtitle3Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle3'
+import { Subtitle4Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle4'
 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
 
@@ -46,6 +47,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle1Config)//小标题1
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle2Config)//小标题2
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle3Config)//小标题3
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle4Config)//小标题4
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
   //