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

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Subtitle8Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '我是标题',
+  attribute: {
+    linearColors: [
+      '#2AFFFF',
+      '#2AFFFF',
+      '#2AFFFF',
+      '#2AFFFF',
+      '#0084ff',
+      '#0d4ea8',
+      '#4592ff',
+      '#ffcc33',
+    ],
+    fontSize: 20,
+    fontPos: {
+      x: 0,
+      y: 20
+    },
+    fontColor: '#2AFFFF'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Subtitle8Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
+  public chartConfig = cloneDeep(Subtitle8Config)
+  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('Subtitle8',true)
+
+export const Subtitle8Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '小标题8',
+    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="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" 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>
+        <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0.5" />
+          <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
+        </linearGradient>
+        <filter
+          id="subtitle8_filter_14"
+          x="482.00000000000006"
+          y="-2.4868995751603507e-14"
+          width="12"
+          height="5"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dx="0" dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0.16470588235294117 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_Shadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_Shadow" result="shape" />
+        </filter>
+        <filter
+          id="subtitle8_filter_16"
+          x="482.00000000000006"
+          y="28.999999999999975"
+          width="12"
+          height="4.9999999999999964"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dx="0" dy="-1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0.16470588235294117 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_Shadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_Shadow" result="shape" />
+        </filter>
+      </defs>
+      <g opacity="1" transform="translate(-2.842170943040401e-14 0)  rotate(0 246.00000000000003 16.999999999999773)">
+        <path
+          id="矩形 31"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[4] }"
+          transform="translate(17 1.9999999999999183)  rotate(0 237.5 15)"
+          opacity="0.2"
+          :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `"
+        />
+        <g opacity="1" :transform="`translate(44.9999999999998 ${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="矩形 32"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[5] }"
+          :transform="`translate(4.979184719828627 ${
+            h / 2 - 34 / 2 + 6
+          })  rotate(-45 12.020815280171146 12.020815280171146)`"
+          opacity="1"
+          d="M4,24.04L20.04,24.04C22.25,24.04 24.04,22.25 24.04,20.04L24.04,4C24.04,1.79 22.25,0 20.04,0L4,0C1.79,0 0,1.79 0,4L0,20.04C0,22.25 1.79,24.04 4,24.04Z "
+        />
+        <rect
+          id="矩形 32"
+          :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 1 }"
+          :transform="`translate(4.979184719828627 ${
+            h / 2 - 34 / 2 + 6
+          })  rotate(-45 12.020815280171146 12.020815280171146)`"
+          x="0.5"
+          y="0.5"
+          rx="3.5"
+          width="23.04163056034229"
+          height="23.04163056034229"
+        />
+        <path
+          id="圆形 10"
+          fill-rule="evenodd"
+          :style="{ fill: attribute.linearColors[7] }"
+          :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12})  rotate(0 5 5)`"
+          opacity="1"
+          d="M5,0C2.24,0 0,2.24 0,5C0,7.76 2.24,10 5,10C7.76,10 10,7.76 10,5C10,2.24 7.76,0 5,0Z "
+        />
+        <path
+          id="矩形 30"
+          fill-rule="evenodd"
+          fill="url(#subtitle8_linear_0)"
+          transform="translate(360 1.9999999999999183)  rotate(0 66 0.5)"
+          opacity="1"
+          d="M0,0L0,1L132,1L132,0L0,0Z "
+        />
+        <path
+          id="矩形 30"
+          fill-rule="evenodd"
+          fill="url(#subtitle8_linear_1)"
+          :transform="`translate(360 ${h - 1.2})  rotate(0 66 0.5)`"
+          opacity="1"
+          d="M0,0L0,1L132,1L132,0L0,0Z "
+        />
+      </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>

@@ -32,6 +32,7 @@ import { Subtitle4Config } from '@/packages/components/external/Decorates/Subtit
 import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle5'
 import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle5'
 import { Subtitle6Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle6'
 import { Subtitle6Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle6'
 import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle7'
 import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle7'
+import { Subtitle8Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle8'
 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
 
 
@@ -54,6 +55,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle5Config)//小标题5
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle5Config)//小标题5
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle8Config)//小标题8
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
   //
   //