简柏林 / thingskit-view · Commits

Commit c1c4263aafc49842e473db3843e8b209a7bb2a09

Authored by fengwotao
1 parent 78810375

perf(src/packages): 小组件新增小标题6和7

Inline Side-by-side
Showing 11 changed files with 635 additions and 12 deletions
... ... @@ -8,7 +8,7 @@
8 8 fill="none"
9 9 >
10 10 <defs>
11   - <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  11 + <linearGradient id="subtitle4_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 12 <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />
13 13 <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
14 14 </linearGradient>
... ... @@ -91,7 +91,7 @@
91 91 <path
92 92 id="矩形 44"
93 93 fill-rule="evenodd"
94   - fill="url(#linear_0)"
  94 + fill="url(#subtitle4_linear_0)"
95 95 transform="translate(23 30) rotate(0 110.5 2.5)"
96 96 opacity="1"
97 97 :d="`M5,5 L${w / 2},5 L${w / 2},0 L0,0 L5,5 Z `"
... ...
... ... @@ -8,26 +8,26 @@
8 8 fill="none"
9 9 >
10 10 <defs>
11   - <linearGradient id="subtitle_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  11 + <linearGradient id="subtitle5_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 12 <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
13 13 <stop offset="0.498" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
14 14 <stop offset="1" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
15 15 </linearGradient>
16   - <linearGradient id="subtitle_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
  16 + <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
17 17 <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
18 18 <stop offset="0.5313" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
19 19 <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
20 20 </linearGradient>
21   - <linearGradient id="subtitle_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
  21 + <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
22 22 <stop offset="0" :stop-color="attribute.linearColors[6]" stop-opacity="0" />
23 23 <stop offset="0.5313" :stop-color="attribute.linearColors[7]" stop-opacity="1" />
24 24 <stop offset="0.9988" :stop-color="attribute.linearColors[8]" stop-opacity="0" />
25 25 </linearGradient>
26   - <linearGradient id="subtitle_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  26 + <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
27 27 <stop offset="0" :stop-color="attribute.linearColors[9]" stop-opacity="1" />
28 28 <stop offset="1" :stop-color="attribute.linearColors[10]" stop-opacity="0" />
29 29 </linearGradient>
30   - <linearGradient id="subtitle_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
  30 + <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
31 31 <stop offset="0" :stop-color="attribute.linearColors[11]" stop-opacity="1" />
32 32 <stop offset="1" :stop-color="attribute.linearColors[12]" stop-opacity="0" />
33 33 </linearGradient>
... ... @@ -36,7 +36,7 @@
36 36 <path
37 37 id="矩形 23"
38 38 fill-rule="evenodd"
39   - fill="url(#subtitle_linear_0)"
  39 + fill="url(#subtitle5_linear_0)"
40 40 transform="translate(0 0) rotate(0 246 15)"
41 41 opacity="1"
42 42 :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`"
... ... @@ -60,7 +60,7 @@
60 60 <path
61 61 id="矩形 25"
62 62 fill-rule="evenodd"
63   - fill="url(#subtitle_linear_1)"
  63 + fill="url(#subtitle5_linear_1)"
64 64 :transform="`translate(0 ${h / 2 - 13 / 2}) rotate(0 0.5 6.5)`"
65 65 opacity="1"
66 66 d="M0,13L1,13L1,0L0,0L0,13Z "
... ... @@ -68,7 +68,7 @@
68 68 <path
69 69 id="矩形 25"
70 70 fill-rule="evenodd"
71   - fill="url(#subtitle_linear_2)"
  71 + fill="url(#subtitle5_linear_2)"
72 72 :transform="`translate(${w - 1} ${h / 2 - 13 / 2}) rotate(0 0.5 6.5)`"
73 73 opacity="1"
74 74 d="M0,13L1,13L1,0L0,0L0,13Z "
... ... @@ -82,7 +82,7 @@
82 82 <path
83 83 id="矩形 26"
84 84 fill-rule="evenodd"
85   - fill="url(#subtitle_linear_3)"
  85 + fill="url(#subtitle5_linear_3)"
86 86 transform="translate(14.256569860407183 8.274519052838347) rotate(0 14.5 0.5)"
87 87 opacity="1"
88 88 d="M0,1L29,1L29,0L0,0L0,1Z "
... ... @@ -111,7 +111,7 @@
111 111 <path
112 112 id="矩形 26"
113 113 fill-rule="evenodd"
114   - fill="url(#subtitle_linear_4)"
  114 + fill="url(#subtitle5_linear_4)"
115 115 transform="translate(0 8.274519052838347) rotate(0 14.5 0.5)"
116 116 opacity="1"
117 117 d="M0,0L0,1L29,1L29,0L0,0Z "
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Subtitle6Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '我是标题',
  9 + attribute: {
  10 + linearColors: [
  11 + '#0C4370',
  12 + '#0557A0',
  13 + '#2AFFFF',
  14 + '#2AFFFF',
  15 + '#2AFFFF',
  16 + '#2AFFFF',
  17 + '#ffcc33',
  18 + '#ffcc33',
  19 + '#25e4ea',
  20 + '#73faff',
  21 + '#73faff',
  22 + '#2affff',
  23 + '#2affff',
  24 + '#2affff',
  25 + '#2affff',
  26 + '#2affff',
  27 + '#2affff',
  28 + '#2affff',
  29 + '#2affff',
  30 + '#2affff',
  31 + '#2affff',
  32 + '#2affff',
  33 + '#2affff',
  34 + '#2affff',
  35 + '#009696'
  36 + ],
  37 + fontSize: 20,
  38 + fontPos: {
  39 + x: 0,
  40 + y: 20
  41 + },
  42 + fontColor: '#2AFFFF'
  43 + }
  44 +}
  45 +
  46 +export default class Config extends PublicConfigClass implements CreateComponentType {
  47 + public key = Subtitle6Config.key
  48 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
  49 + public chartConfig = cloneDeep(Subtitle6Config)
  50 + public option = cloneDeep(option)
  51 +}
... ...
  1 +<template>
  2 + <CollapseItem name="配置" :expanded="true">
  3 + <SettingItemBox name="标题">
  4 + <SettingItem name="内容">
  5 + <n-input v-model:value="optionData.dataset" />
  6 + </SettingItem>
  7 + <SettingItem name="大小">
  8 + <n-input-number v-model:value="optionData.attribute.fontSize" />
  9 + </SettingItem>
  10 + <SettingItem name="x轴位置">
  11 + <n-input-number v-model:value="optionData.attribute.fontPos.x" />
  12 + </SettingItem>
  13 + <SettingItem name="y轴位置">
  14 + <n-input-number v-model:value="optionData.attribute.fontPos.y" />
  15 + </SettingItem>
  16 + <SettingItem name="颜色">
  17 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  18 + </SettingItem>
  19 + <SettingItem name="颜色">
  20 + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
  21 + </SettingItem>
  22 + </SettingItemBox>
  23 + <SettingItemBox
  24 + :name="`装饰颜色-${index + 1}`"
  25 + v-for="(item, index) in optionData.attribute.linearColors"
  26 + :key="index"
  27 + >
  28 + <SettingItem name="颜色">
  29 + <n-color-picker
  30 + size="small"
  31 + :modes="['hex']"
  32 + v-model:value="optionData.attribute.linearColors[index]"
  33 + ></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
  37 + 恢复默认
  38 + </n-button>
  39 + </SettingItem>
  40 + </SettingItemBox>
  41 + </CollapseItem>
  42 +</template>
  43 +
  44 +<script setup lang="ts">
  45 +import { PropType } from 'vue'
  46 +import { option } from './config'
  47 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  48 +
  49 +defineProps({
  50 + optionData: {
  51 + type: Object as PropType<typeof option>,
  52 + required: true
  53 + }
  54 +})
  55 +</script>
... ...
  1 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  2 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, chartKey, conKey } = useWidgetKey('Subtitle6',true)
  6 +
  7 +export const Subtitle6Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题6',
  12 + category: ChatCategoryEnum.SUBTITLE,
  13 + categoryName: ChatCategoryEnumName.SUBTITLE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'title3.png',
  17 +}
... ...
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg
  4 + xmlns="http://www.w3.org/2000/svg"
  5 + xmlns:xlink="http://www.w3.org/1999/xlink"
  6 + :width="w"
  7 + :height="h"
  8 + fill="none"
  9 + >
  10 + <defs>
  11 + <linearGradient id="subtitle6_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  12 + <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
  14 + </linearGradient>
  15 + <linearGradient id="subtitle6_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  16 + <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
  17 + <stop offset="0.9988" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  18 + </linearGradient>
  19 + <linearGradient id="subtitle6_linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  20 + <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
  21 + <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  22 + </linearGradient>
  23 + </defs>
  24 + <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
  25 + <path
  26 + id="矩形 45"
  27 + fill-rule="evenodd"
  28 + fill="url(#subtitle6_linear_0)"
  29 + transform="translate(0 0) rotate(0 246 15)"
  30 + opacity="1"
  31 + :d="`M0,${h} L${w},${h}L${w},0L0,0L0,${h}Z `"
  32 + />
  33 + <g opacity="1" :transform="`translate(38 ${h / 2 - 26 / 2}) rotate(0 46 13)`">
  34 + <text>
  35 + <tspan
  36 + :x="attribute.fontPos.x"
  37 + :y="attribute.fontPos.y"
  38 + :font-size="attribute.fontSize"
  39 + line-height="0"
  40 + :fill="attribute.fontColor"
  41 + opacity="1"
  42 + font-family="YouSheBiaoTiHei"
  43 + letter-spacing="0"
  44 + >
  45 + {{ dataset }}
  46 + </tspan>
  47 + </text>
  48 + </g>
  49 + <path
  50 + id="矩形 46"
  51 + fill-rule="evenodd"
  52 + fill="url(#subtitle6_linear_1)"
  53 + :transform="`translate(0 0.3) rotate(0 145 0.5)`"
  54 + opacity="1"
  55 + :d="`M0,1 L${w / 2},1 L${w / 2},0 L0,0 L0,1 Z `"
  56 + />
  57 + <path
  58 + id="矩形 46"
  59 + fill-rule="evenodd"
  60 + fill="url(#subtitle6_linear_2)"
  61 + :transform="`translate(0 ${h - 1.3}) rotate(0 145 0.5)`"
  62 + opacity="1"
  63 + :d="`M0,1 L${w / 2},1 L${w / 2},0 L0,0 L0,1 Z `"
  64 + />
  65 + <g opacity="1" :transform="`translate(12 ${h / 2 - 18 / 2}) rotate(0 9 9)`">
  66 + <path
  67 + id="圆形 18"
  68 + fill-rule="evenodd"
  69 + :style="{ fill: attribute.linearColors[6] }"
  70 + transform="translate(6 6) rotate(0 3 3)"
  71 + opacity="1"
  72 + d="M3,0C1.34,0 0,1.34 0,3C0,4.66 1.34,6 3,6C4.66,6 6,4.66 6,3C6,1.34 4.66,0 3,0Z "
  73 + />
  74 + <path
  75 + id="圆形 18"
  76 + :style="{ stroke: attribute.linearColors[7], strokeWidth: 1, strokeOpacity: 1 }"
  77 + transform="translate(3 3) rotate(0 6 6)"
  78 + d="M6,0C2.69,0 0,2.69 0,6C0,9.31 2.69,12 6,12C9.31,12 12,9.31 12,6C12,2.69 9.31,0 6,0Z "
  79 + />
  80 + <path
  81 + id="圆形 18"
  82 + :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.18 }"
  83 + transform="translate(0 0) rotate(0 9 9)"
  84 + d="M9,0C4.03,0 0,4.03 0,9C0,13.97 4.03,18 9,18C13.97,18 18,13.97 18,9C18,4.03 13.97,0 9,0Z "
  85 + />
  86 + <path
  87 + id="圆形 18"
  88 + :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }"
  89 + transform="translate(0 0) rotate(0 4.5 4.5)"
  90 + d="M9,0C4.03,0 0,4.03 0,9 "
  91 + />
  92 + <path
  93 + id="圆形 18"
  94 + :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1 }"
  95 + transform="translate(9 9) rotate(180 4.5 4.5)"
  96 + d="M9,0C4.03,0 0,4.03 0,9 "
  97 + />
  98 + </g>
  99 + <path
  100 + id="路径 14"
  101 + :style="{ stroke: attribute.linearColors[11], strokeWidth: 0.5, strokeOpacity: 1 }"
  102 + :transform="`translate(28 ${h / 2 - 8 / 2 + 8}) rotate(0 230.25 4)`"
  103 + :d="`M0,3 L7.49,8 L321.99,8 L332.25,0 L396.37,0 L401.44,4 L460.5,4 `"
  104 + />
  105 + <path
  106 + id="并集"
  107 + fill-rule="evenodd"
  108 + :style="{ fill: attribute.linearColors[12] }"
  109 + :transform="`translate(375 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
  110 + opacity="0.5"
  111 + d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
  112 + />
  113 + <path
  114 + id="并集"
  115 + fill-rule="evenodd"
  116 + :style="{ fill: attribute.linearColors[13] }"
  117 + :transform="`translate(380 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
  118 + opacity="0.5"
  119 + d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
  120 + />
  121 + <path
  122 + id="并集"
  123 + fill-rule="evenodd"
  124 + :style="{ fill: attribute.linearColors[14] }"
  125 + :transform="`translate(385 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
  126 + opacity="0.5"
  127 + d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
  128 + />
  129 + <path
  130 + id="并集"
  131 + fill-rule="evenodd"
  132 + :style="{ fill: attribute.linearColors[15] }"
  133 + :transform="`translate(390 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
  134 + opacity="0.5"
  135 + d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
  136 + />
  137 + <path
  138 + id="并集"
  139 + fill-rule="evenodd"
  140 + :style="{ fill: attribute.linearColors[16] }"
  141 + :transform="`translate(395 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
  142 + opacity="0.5"
  143 + d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
  144 + />
  145 + <path
  146 + id="并集"
  147 + fill-rule="evenodd"
  148 + :style="{ fill: attribute.linearColors[17] }"
  149 + :transform="`translate(400 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
  150 + opacity="0.5"
  151 + d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
  152 + />
  153 + <path
  154 + id="并集"
  155 + fill-rule="evenodd"
  156 + :style="{ fill: attribute.linearColors[18] }"
  157 + :transform="`translate(405 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
  158 + opacity="0.5"
  159 + d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
  160 + />
  161 + <path
  162 + id="矩形 47"
  163 + fill-rule="evenodd"
  164 + :style="{ fill: attribute.linearColors[19] }"
  165 + :transform="`translate(346 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
  166 + opacity="1"
  167 + d="M0,7L2,7L11,0L9,0L0,7Z "
  168 + />
  169 + <path
  170 + id="矩形 47"
  171 + fill-rule="evenodd"
  172 + :style="{ fill: attribute.linearColors[20] }"
  173 + :transform="`translate(342 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
  174 + opacity="0.8"
  175 + d="M0,7L2,7L11,0L9,0L0,7Z "
  176 + />
  177 + <path
  178 + id="矩形 47"
  179 + fill-rule="evenodd"
  180 + :style="{ fill: attribute.linearColors[21] }"
  181 + :transform="`translate(338 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
  182 + opacity="0.6"
  183 + d="M0,7L2,7L11,0L9,0L0,7Z "
  184 + />
  185 + <path
  186 + id="矩形 47"
  187 + fill-rule="evenodd"
  188 + :style="{ fill: attribute.linearColors[22] }"
  189 + :transform="`translate(334 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
  190 + opacity="0.4"
  191 + d="M0,7L2,7L11,0L9,0L0,7Z "
  192 + />
  193 + <path
  194 + id="路径 15"
  195 + :style="{ stroke: attribute.linearColors[23], strokeWidth: 1, strokeOpacity: 1 }"
  196 + :transform="`translate(426 ${h / 2 - 4 / 2 + 3.5}) rotate(0 30.999999999999993 2)`"
  197 + d="M0,4L25,4L33.5,0L62,0 "
  198 + />
  199 + </g>
  200 + </svg>
  201 + </div>
  202 +</template>
  203 +<script setup lang="ts">
  204 +import { PropType, toRefs } from 'vue'
  205 +import { CreateComponentType } from '@/packages/index.d'
  206 +
  207 +const props = defineProps({
  208 + chartConfig: {
  209 + type: Object as PropType<CreateComponentType>,
  210 + required: true
  211 + }
  212 +})
  213 +
  214 +const { dataset, attribute } = toRefs(props.chartConfig.option)
  215 +
  216 +const { w, h } = toRefs(props.chartConfig.attr)
  217 +</script>
  218 +
  219 +<style lang="scss" scoped>
  220 +.go-content-box {
  221 + width: v-bind('w+"px"');
  222 + height: v-bind('h+"px"');
  223 + display: flex;
  224 + align-items: center;
  225 + justify-content: center;
  226 +}
  227 +</style>
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Subtitle7Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '我是标题',
  9 + attribute: {
  10 + linearColors: [
  11 + '#21649C',
  12 + '#060F1E',
  13 + '#2284D5',
  14 + '#000F1B',
  15 + '#2affff',
  16 + '#2affff',
  17 + '#2affff',
  18 + '#2affff',
  19 + '#2affff',
  20 + '#2affff',
  21 + '#ffcc33',
  22 + '#ffcc33',
  23 + '#ffcc33',
  24 + ],
  25 + fontSize: 20,
  26 + fontPos: {
  27 + x: 0,
  28 + y: 20
  29 + },
  30 + fontColor: '#2AFFFF'
  31 + }
  32 +}
  33 +
  34 +export default class Config extends PublicConfigClass implements CreateComponentType {
  35 + public key = Subtitle7Config.key
  36 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
  37 + public chartConfig = cloneDeep(Subtitle7Config)
  38 + public option = cloneDeep(option)
  39 +}
... ...
  1 +<template>
  2 + <CollapseItem name="配置" :expanded="true">
  3 + <SettingItemBox name="标题">
  4 + <SettingItem name="内容">
  5 + <n-input v-model:value="optionData.dataset" />
  6 + </SettingItem>
  7 + <SettingItem name="大小">
  8 + <n-input-number v-model:value="optionData.attribute.fontSize" />
  9 + </SettingItem>
  10 + <SettingItem name="x轴位置">
  11 + <n-input-number v-model:value="optionData.attribute.fontPos.x" />
  12 + </SettingItem>
  13 + <SettingItem name="y轴位置">
  14 + <n-input-number v-model:value="optionData.attribute.fontPos.y" />
  15 + </SettingItem>
  16 + <SettingItem name="颜色">
  17 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  18 + </SettingItem>
  19 + <SettingItem name="颜色">
  20 + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
  21 + </SettingItem>
  22 + </SettingItemBox>
  23 + <SettingItemBox
  24 + :name="`装饰颜色-${index + 1}`"
  25 + v-for="(item, index) in optionData.attribute.linearColors"
  26 + :key="index"
  27 + >
  28 + <SettingItem name="颜色">
  29 + <n-color-picker
  30 + size="small"
  31 + :modes="['hex']"
  32 + v-model:value="optionData.attribute.linearColors[index]"
  33 + ></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
  37 + 恢复默认
  38 + </n-button>
  39 + </SettingItem>
  40 + </SettingItemBox>
  41 + </CollapseItem>
  42 +</template>
  43 +
  44 +<script setup lang="ts">
  45 +import { PropType } from 'vue'
  46 +import { option } from './config'
  47 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  48 +
  49 +defineProps({
  50 + optionData: {
  51 + type: Object as PropType<typeof option>,
  52 + required: true
  53 + }
  54 +})
  55 +</script>
... ...
  1 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  2 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, chartKey, conKey } = useWidgetKey('Subtitle7',true)
  6 +
  7 +export const Subtitle7Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题7',
  12 + category: ChatCategoryEnum.SUBTITLE,
  13 + categoryName: ChatCategoryEnumName.SUBTITLE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'title3.png',
  17 +}
... ...
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg
  4 + xmlns="http://www.w3.org/2000/svg"
  5 + xmlns:xlink="http://www.w3.org/1999/xlink"
  6 + :width="w"
  7 + :height="h"
  8 + fill="none"
  9 + >
  10 + <defs>
  11 + <linearGradient
  12 + id="subtitle7_linear_0"
  13 + x1="0%"
  14 + y1="50%"
  15 + x2="85.08200000000001%"
  16 + y2="50%"
  17 + gradientUnits="objectBoundingBox"
  18 + >
  19 + <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
  20 + <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  21 + </linearGradient>
  22 + <linearGradient id="subtitle7_linear_1" x1="0%" y1="50%" x2="87.75%" y2="50%" gradientUnits="objectBoundingBox">
  23 + <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
  24 + <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="1" />
  25 + </linearGradient>
  26 + </defs>
  27 + <g opacity="1" transform="translate(0 0) rotate(0 246 15.000499999999972)">
  28 + <path
  29 + id="矩形 12"
  30 + fill-rule="evenodd"
  31 + fill="url(#subtitle7_linear_0)"
  32 + transform="translate(0 0) rotate(0 246 13)"
  33 + opacity="1"
  34 + :d="`M0,${h - 8}L${w},${h - 8}L${w},0L0,0L0,${h - 8}Z `"
  35 + />
  36 + <rect
  37 + id="矩形 12"
  38 + style="stroke: url(#subtitle7_linear_1); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
  39 + transform="translate(0 0) rotate(0 246 13)"
  40 + x="0.5"
  41 + y="0.5"
  42 + rx="0"
  43 + width="491"
  44 + :height="h - 8"
  45 + />
  46 + <g opacity="1" :transform="`translate(30 ${h / 2 - 26.33 / 2 - 4}) rotate(0 46 13)`">
  47 + <text>
  48 + <tspan
  49 + :x="attribute.fontPos.x"
  50 + :y="attribute.fontPos.y"
  51 + :font-size="20"
  52 + line-height="0"
  53 + :fill="attribute.fontColor"
  54 + opacity="1"
  55 + font-family="YouSheBiaoTiHei"
  56 + letter-spacing="0"
  57 + >
  58 + {{ dataset }}
  59 + </tspan>
  60 + </text>
  61 + </g>
  62 + <g opacity="1" :transform="`translate(7 ${h / 2 - 17 / 2 - 4}) rotate(0 9 9)`">
  63 + <rect
  64 + id="矩形 13"
  65 + :style="{ stroke: attribute.linearColors[4], strokeWidth: 1, strokeOpacity: 1 }"
  66 + transform="translate(0 0) rotate(0 9 9)"
  67 + x="0.5"
  68 + y="0.5"
  69 + rx="0"
  70 + width="17"
  71 + height="17"
  72 + />
  73 + <path
  74 + id="直线 1"
  75 + :style="{ stroke: attribute.linearColors[5], strokeWidth: 1, strokeOpacity: 0.43 }"
  76 + transform="translate(1 1) rotate(0 8 8)"
  77 + d="M0,0L16,16 "
  78 + />
  79 + <path
  80 + id="直线 1"
  81 + :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 0.43 }"
  82 + transform="translate(1 1) rotate(0 8 8)"
  83 + d="M16,0L0,16 "
  84 + />
  85 + <path
  86 + id="矩形 14"
  87 + fill-rule="evenodd"
  88 + :style="{ fill: attribute.linearColors[7] }"
  89 + transform="translate(5 5) rotate(0 4 4)"
  90 + opacity="1"
  91 + d="M0,8L8,8L8,0L0,0L0,8Z "
  92 + />
  93 + </g>
  94 + <path
  95 + id="路径 4"
  96 + :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.2 }"
  97 + :transform="`translate(0 ${h - 10}) rotate(0 221.50000000000003 3.5)`"
  98 + d="M0,7L435.04,7L443,0 "
  99 + />
  100 + <path
  101 + id="路径 4"
  102 + :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }"
  103 + :transform="`translate(0 ${h - 3}) rotate(0 17.5208019893046 0.0005)`"
  104 + d="M0,0L35.04,0 "
  105 + />
  106 + <path
  107 + id="矩形 15"
  108 + fill-rule="evenodd"
  109 + :style="{ fill: attribute.linearColors[10] }"
  110 + :transform="`translate(441 ${h - 10}) rotate(0 9.5 3.5)`"
  111 + opacity="0.2"
  112 + d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
  113 + />
  114 + <path
  115 + id="矩形 15"
  116 + fill-rule="evenodd"
  117 + :style="{ fill: attribute.linearColors[11] }"
  118 + :transform="`translate(457 ${h - 10}) rotate(0 9.5 3.5)`"
  119 + opacity="0.6"
  120 + d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
  121 + />
  122 + <path
  123 + id="矩形 15"
  124 + fill-rule="evenodd"
  125 + :style="{ fill: attribute.linearColors[12] }"
  126 + :transform="`translate(473 ${h - 10}) rotate(0 9.5 3.5)`"
  127 + opacity="1"
  128 + d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
  129 + />
  130 + </g>
  131 + </svg>
  132 + </div>
  133 +</template>
  134 +<script setup lang="ts">
  135 +import { PropType, toRefs } from 'vue'
  136 +import { CreateComponentType } from '@/packages/index.d'
  137 +
  138 +const props = defineProps({
  139 + chartConfig: {
  140 + type: Object as PropType<CreateComponentType>,
  141 + required: true
  142 + }
  143 +})
  144 +
  145 +const { dataset, attribute } = toRefs(props.chartConfig.option)
  146 +
  147 +const { w, h } = toRefs(props.chartConfig.attr)
  148 +</script>
  149 +
  150 +<style lang="scss" scoped>
  151 +.go-content-box {
  152 + width: v-bind('w+"px"');
  153 + height: v-bind('h+"px"');
  154 + display: flex;
  155 + align-items: center;
  156 + justify-content: center;
  157 +}
  158 +</style>
... ...
... ... @@ -30,6 +30,8 @@ import { Subtitle2Config } from '@/packages/components/external/Decorates/Subtit
30 30 import { Subtitle3Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle3'
31 31 import { Subtitle4Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle4'
32 32 import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle5'
  33 +import { Subtitle6Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle6'
  34 +import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle7'
33 35 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
34 36 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
35 37
... ... @@ -50,6 +52,8 @@ export function useInjectLib(packagesList: EPackagesType) {
50 52 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle3Config)//小标题3
51 53 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle4Config)//小标题4
52 54 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle5Config)//小标题5
  55 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6
  56 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7
53 57 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
54 58 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
55 59 //
... ...