fix(src/packages/): 小组件小标题新增小标题9

@@ -17,7 +17,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates07Config.key
-  public attr = { ...chartInitConfig, zIndex: 1, w: 230, h: 225 }
+  public attr = { ...chartInitConfig, zIndex: 1, w: 200, h: 200 }
   public chartConfig = cloneDeep(Decorates07Config)
   public option = cloneDeep(option)
 }

@@ -17,7 +17,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates08Config.key
-  public attr = { ...chartInitConfig, zIndex: 1, w: 390, h: 400 }
+  public attr = { ...chartInitConfig, zIndex: 1, w: 200, h: 200 }
   public chartConfig = cloneDeep(Decorates08Config)
   public option = cloneDeep(option)
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Subtitle9Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '我是标题',
+  attribute: {
+    bgColor1:'#21649C',
+    bgColor2:'#060F1E',
+    bgColor3:'#2387D9',
+    bgColor4:'#000F1B',
+    bgColor5:'#2affff',
+    bgColor6:'#ffcc33',
+    bgColor7:'#000f1b',
+    fontSize: 20,
+    fontPos: {
+      x: 0,
+      y: 20
+    },
+    fontColor: '#2AFFFF'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Subtitle9Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
+  public chartConfig = cloneDeep(Subtitle9Config)
+  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="`左边背景装饰`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.bgColor1 = '#21649C'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+ <SettingItemBox :name="`右边背景装饰`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.bgColor2 = '#060F1E'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+     <SettingItemBox :name="`左边线装饰`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.bgColor3 = '#2387D9'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+     <SettingItemBox :name="`上下边线装饰`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.bgColor4 = '#000F1B'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+     <SettingItemBox :name="`右边正方形装饰`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.bgColor5 = '#2affff'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :name="`左边图形装饰`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.bgColor5 = '#ffcc33'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :name="`左边图形边框装饰`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor7"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.bgColor5 = '#000f1b'"> 恢复默认 </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('Subtitle9',true)
+
+export const Subtitle9Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '小标题9',
+    category: ChatCategoryEnum.SUBTITLE,
+    categoryName: ChatCategoryEnumName.SUBTITLE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'title8.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="subtitle9_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
+        </linearGradient>
+        <linearGradient id="subtitle9_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.bgColor4" stop-opacity="1" />
+        </linearGradient>
+      </defs>
+      <g opacity="1" transform="translate(0 0)  rotate(0 247.5 17.5)">
+        <path
+          id="矩形 8"
+          fill-rule="evenodd"
+          fill="url(#subtitle9_linear_0)"
+          transform="translate(1.0040567951318458 0)  rotate(0 246.99797160243406 17.5)"
+          opacity="1"
+          :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h}Z`"
+        />
+        <rect
+          id="矩形 8"
+          style="stroke: url(#subtitle9_linear_1); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
+          transform="translate(1.0040567951318458 0)  rotate(0 246.99797160243406 17.5)"
+          x="0.5"
+          y="0.5"
+          rx="0"
+          :width="w"
+          :height="h-1"
+        />
+        <path
+          id="矩形 10"
+          fill-rule="evenodd"
+          :style="{fill:attribute.bgColor5}"
+          :transform="`translate(${w-3} ${h/2-3.01/2-16/2})  rotate(0 1.5060851926977687 1.75)`"
+          opacity="0.5"
+          d="M0,3.5L3.01,3.5L3.01,0L0,0L0,3.5Z "
+        />
+        <path
+          id="矩形 10"
+          fill-rule="evenodd"
+          :style="{fill:attribute.bgColor5}"
+          :transform="`translate(${w-3} ${h/2-3.01/2-5/2})  rotate(0 1.5060851926977687 1.75)`"
+          opacity="1"
+          d="M0,3.5L3.01,3.5L3.01,0L0,0L0,3.5Z "
+        />
+        <path
+          id="矩形 10"
+          fill-rule="evenodd"
+          :style="{fill:attribute.bgColor5}"
+          :transform="`translate(${w-3} ${h/2-3.01/2+7/2})  rotate(0 1.5060851926977687 1.75)`"
+          opacity="0.5"
+          d="M0,3.5L3.01,3.5L3.01,0L0,0L0,3.5Z "
+        />
+        <g opacity="1" :transform="`translate(13.052738336713995 ${h/2-26/2})  rotate(0 46.5 15.5)`">
+          <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="矩形 9"
+          fill-rule="evenodd"
+          :style="{fill:attribute.bgColor6}"
+          :transform="`translate(0 ${h/2-21/2})  rotate(0 2.5101419878296145 10.5)`"
+          opacity="1"
+          d="M0,21L1.02,21C3.23,21 5.02,19.21 5.02,17L5.02,4C5.02,1.79 3.23,0 1.02,0L0,0L0,21Z "
+        />
+        <path
+          id="矩形 9"
+          :style="{stroke:attribute.bgColor7,strokeWidth: 1,strokeOpacity: 1}"
+          :transform="`translate(0 ${h/2-21/2})  rotate(0 2.5101419878296145 10.5)`"
+          d="M0,21L1.02,21C3.23,21 5.02,19.21 5.02,17L5.02,4C5.02,1.79 3.23,0 1.02,0L0,0L0,21Z "
+        />
+      </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>

@@ -34,6 +34,7 @@ import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtit
 import { Subtitle6Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle6'
 import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle7'
 import { Subtitle8Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle8'
+import { Subtitle9Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle9'
 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
 import { Decorates09Config } from '@/packages/components/external/Decorates/Decorates/Decorates09'
@@ -65,6 +66,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle8Config)//小标题8
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle9Config)//小标题9
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates09Config)//新增装饰09