简柏林 / thingskit-view · Commits

Commit 8b6f5ed789977f50357889e2d62d7d1c696a4cc2

Authored by xp.Huang
2 parents 42741879 df9f5749

Merge branch 'ft' into 'main_dev' 

feat(src/packages): 新增部分小组件和装饰

See merge request yunteng/thingskit-view!97
Inline Side-by-side
Showing 37 changed files with 2380 additions and 0 deletions
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Decorates07Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '',
  9 + attribute: {
  10 + pathColors: [
  11 + '#2e7ceb',
  12 + '#17bff6',
  13 + '#01fbfe',
  14 + ]
  15 + }
  16 +}
  17 +
  18 +export default class Config extends PublicConfigClass implements CreateComponentType {
  19 + public key = Decorates07Config.key
  20 + public attr = { ...chartInitConfig, zIndex: 1, w: 230, h: 225 }
  21 + public chartConfig = cloneDeep(Decorates07Config)
  22 + public option = cloneDeep(option)
  23 +}
... ...
  1 +<template>
  2 + <CollapseItem name="配置" :expanded="true">
  3 + <SettingItemBox
  4 + :name="`装饰颜色-${index + 1}`"
  5 + v-for="(item, index) in optionData.attribute.pathColors"
  6 + :key="index"
  7 + >
  8 + <SettingItem name="颜色">
  9 + <n-color-picker
  10 + size="small"
  11 + :modes="['hex']"
  12 + v-model:value="optionData.attribute.pathColors[index]"
  13 + ></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.pathColors[index] = option.attribute.pathColors[index]">
  17 + 恢复默认
  18 + </n-button>
  19 + </SettingItem>
  20 + </SettingItemBox>
  21 + </CollapseItem>
  22 +</template>
  23 +
  24 +<script setup lang="ts">
  25 +import { PropType } from 'vue'
  26 +import { option } from './config'
  27 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  28 +
  29 +defineProps({
  30 + optionData: {
  31 + type: Object as PropType<typeof option>,
  32 + required: true
  33 + }
  34 +})
  35 +</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('Decorates07',true)
  6 +
  7 +export const Decorates07Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '装饰07',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  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 + viewBox="0 0 180 180"
  9 + fill="none"
  10 + >
  11 + <g opacity="0.6" transform="translate(68 0) rotate(0)">
  12 + <path
  13 + id="形状结合1"
  14 + fill-rule="evenodd"
  15 + :style="{fill:attribute.pathColors[0]}"
  16 + opacity="1"
  17 + :d="`M-34,30 l34,-30 l0,30 l-34,30 l-34,-30 v-30 z`"
  18 + />
  19 + <path
  20 + id="形状结合2"
  21 + fill-rule="evenodd"
  22 + :style="{fill:attribute.pathColors[1]}"
  23 + opacity="1"
  24 + :d="`M-34,90 l34,-30 l0,30 l-34,30 l-34,-30 v-30 z`"
  25 + />
  26 + <path
  27 + id="形状结合3"
  28 + fill-rule="evenodd"
  29 + :style="{fill:attribute.pathColors[2]}"
  30 + opacity="1"
  31 + :d="`M-34,150 l34,-30 l0,30 l-34,30 l-34,-30 v-30 z`"
  32 + />
  33 + </g>
  34 + </svg>
  35 + </div>
  36 +</template>
  37 +<script setup lang="ts">
  38 +import { PropType, toRefs } from 'vue'
  39 +import { CreateComponentType } from '@/packages/index.d'
  40 +
  41 +const props = defineProps({
  42 + chartConfig: {
  43 + type: Object as PropType<CreateComponentType>,
  44 + required: true
  45 + }
  46 +})
  47 +
  48 +const { attribute } = toRefs(props.chartConfig.option)
  49 +
  50 +const { w, h } = toRefs(props.chartConfig.attr)
  51 +</script>
  52 +
  53 +<style lang="scss" scoped>
  54 +.go-content-box {
  55 + width: v-bind('w+"px"');
  56 + height: v-bind('h+"px"');
  57 + display: flex;
  58 + align-items: center;
  59 + justify-content: center;
  60 +}
  61 +</style>
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Decorates08Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '',
  9 + attribute: {
  10 + colors: [
  11 + '#19ecff',
  12 + '#36F7FF',
  13 + '#1FEEFF',
  14 + '#19ECFF',
  15 + '#9FFFFF',
  16 + '#66FFFF',
  17 + ],
  18 + }
  19 +}
  20 +
  21 +export default class Config extends PublicConfigClass implements CreateComponentType {
  22 + public key = Decorates08Config.key
  23 + public attr = { ...chartInitConfig, zIndex: 1, w: 390, h: 400 }
  24 + public chartConfig = cloneDeep(Decorates08Config)
  25 + public option = cloneDeep(option)
  26 +}
... ...
  1 +<template>
  2 + <CollapseItem name="配置" :expanded="true">
  3 + <SettingItemBox
  4 + :name="`装饰颜色-${index + 1}`"
  5 + v-for="(item, index) in optionData.attribute.colors"
  6 + :key="index"
  7 + >
  8 + <SettingItem name="颜色">
  9 + <n-color-picker
  10 + size="small"
  11 + :modes="['hex']"
  12 + v-model:value="optionData.attribute.colors[index]"
  13 + ></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">
  17 + 恢复默认
  18 + </n-button>
  19 + </SettingItem>
  20 + </SettingItemBox>
  21 + </CollapseItem>
  22 +</template>
  23 +
  24 +<script setup lang="ts">
  25 +import { PropType } from 'vue'
  26 +import { option } from './config'
  27 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  28 +
  29 +defineProps({
  30 + optionData: {
  31 + type: Object as PropType<typeof option>,
  32 + required: true
  33 + }
  34 +})
  35 +</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('Decorates08',true)
  6 +
  7 +export const Decorates08Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '装饰08',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  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 + :viewBox="`0 0 386 435`"
  9 + fill="none"
  10 + >
  11 + <g opacity="1" transform="translate(0 0) rotate(0)">
  12 + <g opacity="1" transform="translate(0 0) rotate(0)">
  13 + <g opacity="1" transform="translate(0 0) rotate(0)">
  14 + <g id="椭圆形" filter="url(#filter_3)" />
  15 + <g id="椭圆形" filter="url(#filter_4)">
  16 + <path
  17 + id="椭圆形"
  18 + style="fill: url(#linear_0); opacity: 100"
  19 + d="M383,286.5c0,-6.97067 -1.246,-13.84633 -3.738,-20.627c-2.44467,-6.65267 -6.05167,-13.11867 -10.821,-19.398c-4.71933,-6.214 -10.49133,-12.134 -17.316,-17.76c-6.79733,-5.60333 -14.50433,-10.80467 -23.121,-15.604c-8.646,-4.816 -18.03333,-9.12967 -28.162,-12.941c-10.246,-3.856 -21.051,-7.123 -32.415,-9.801c-11.58667,-2.73 -23.54567,-4.798 -35.877,-6.204c-12.66,-1.44333 -25.51,-2.165 -38.55,-2.165c-13.04,0 -25.89,0.72167 -38.55,2.165c-12.33133,1.406 -24.29033,3.474 -35.877,6.204c-11.364,2.678 -22.1691,5.945 -32.4153,9.801c-10.12887,3.812 -19.51607,8.12567 -28.1616,12.941c-8.61667,4.79933 -16.32363,10.00067 -23.1209,15.604c-6.82453,5.626 -12.59663,11.546 -17.3163,17.76c-4.76927,6.27933 -8.37629,12.74533 -10.82108,19.398c-2.49187,6.78067 -3.73781,13.65633 -3.7378,20.627c-0.00001,6.97067 1.24592,13.84633 3.73779,20.627c2.44479,6.65267 6.05182,13.11867 10.82109,19.398c4.71967,6.214 10.49177,12.134 17.3163,17.76c6.79733,5.60333 14.5043,10.80467 23.1209,15.604c8.64533,4.81533 18.03253,9.129 28.1616,12.941c10.24553,3.856 21.05063,7.123 32.4153,9.801c11.58667,2.73 23.54567,4.798 35.877,6.204c12.66,1.44333 25.51,2.165 38.55,2.165c13.04,0 25.89,-0.72167 38.55,-2.165c12.33133,-1.406 24.29033,-3.474 35.877,-6.204c11.364,-2.678 22.169,-5.945 32.415,-9.801c10.12933,-3.812 19.51667,-8.12567 28.162,-12.941c8.61667,-4.79933 16.32367,-10.00067 23.121,-15.604c6.824,-5.626 12.596,-11.546 17.316,-17.76c4.76933,-6.27933 8.37633,-12.74533 10.821,-19.398c2.492,-6.78067 3.738,-13.65633 3.738,-20.627zM389,286.5c0,7.68267 -1.36867,15.24833 -4.106,22.697c-2.65133,7.21467 -6.543,14.20033 -11.675,20.957c-5.00133,6.58467 -11.094,12.838 -18.278,18.76c-7.07733,5.83533 -15.083,11.241 -24.017,16.217c-8.90533,4.96 -18.56133,9.39833 -28.968,13.315c-10.48733,3.94667 -21.538,7.28833 -33.152,10.025c-11.81733,2.784 -24.00867,4.89233 -36.574,6.325c-12.886,1.46933 -25.96267,2.204 -39.23,2.204c-13.26733,0 -26.344,-0.73467 -39.23,-2.204c-12.56533,-1.43267 -24.75667,-3.541 -36.574,-6.325c-11.6144,-2.73733 -22.66493,-6.079 -33.1516,-10.025c-10.40713,-3.91667 -20.06313,-8.355 -28.968,-13.315c-8.934,-4.976 -16.93993,-10.38167 -24.0178,-16.217c-7.1838,-5.922 -13.2764,-12.17533 -18.2778,-18.76c-5.13171,-6.75667 -9.02329,-13.74233 -11.67474,-20.957c-2.73737,-7.44867 -4.10605,-15.01433 -4.10604,-22.697c-0.00001,-7.68267 1.36868,-15.24833 4.10606,-22.697c2.65148,-7.21467 6.54305,-14.20033 11.67472,-20.957c5.0014,-6.58467 11.094,-12.838 18.2778,-18.76c7.0778,-5.83533 15.08377,-11.241 24.0179,-16.217c8.90507,-4.96 18.56103,-9.39833 28.9679,-13.315c10.48687,-3.946 21.5374,-7.28767 33.1516,-10.025c11.81667,-2.784 24.008,-4.89233 36.574,-6.325c12.886,-1.46933 25.96267,-2.204 39.23,-2.204c13.26733,0 26.344,0.73467 39.23,2.204c12.56533,1.43267 24.75667,3.541 36.574,6.325c11.614,2.73667 22.66467,6.07833 33.152,10.025c10.40667,3.91667 20.06267,8.355 28.968,13.315c8.934,4.97667 16.93967,10.38233 24.017,16.217c7.184,5.922 13.27667,12.17533 18.278,18.76c5.132,6.75667 9.02367,13.74233 11.675,20.957c2.73733,7.44867 4.106,15.01433 4.106,22.697z"
  20 + />
  21 + </g>
  22 + <g id="椭圆形" filter="url(#filter_5)">
  23 + <path
  24 + id="椭圆形"
  25 + style="fill: url(#linear_1); opacity: 100"
  26 + d="M355,257c0,-5.33733 -1.04533,-10.606 -3.136,-15.806c-2.06133,-5.12733 -5.108,-10.11667 -9.14,-14.968c-4.00667,-4.82133 -8.911,-9.418 -14.713,-13.79c-5.79133,-4.36333 -12.36,-8.415 -19.706,-12.155c-7.37733,-3.756 -15.389,-7.121 -24.035,-10.095c-8.75,-3.01 -17.97767,-5.56 -27.683,-7.65c-9.89867,-2.132 -20.11533,-3.747 -30.65,-4.845c-10.81667,-1.12733 -21.79567,-1.691 -32.937,-1.691c-11.14133,0 -22.12033,0.56367 -32.937,1.691c-10.53467,1.098 -20.75133,2.713 -30.65,4.845c-9.70533,2.09 -18.933,4.64 -27.683,7.65c-8.64587,2.974 -16.6576,6.339 -24.0352,10.095c-7.346,3.74 -13.91453,7.79167 -19.7056,12.155c-5.80207,4.372 -10.7064,8.96867 -14.713,13.79c-4.0318,4.85133 -7.07843,9.84067 -9.1399,14.968c-2.09087,5.2 -3.1363,10.46867 -3.1363,15.806c0,5.33733 1.04543,10.606 3.1363,15.806c2.06147,5.12733 5.1081,10.11667 9.1399,14.968c4.0066,4.82133 8.91093,9.418 14.713,13.79c5.791,4.36333 12.35953,8.415 19.7056,12.155c7.3776,3.756 15.38933,7.121 24.0352,10.095c8.75,3.01 17.97767,5.56 27.683,7.65c9.89867,2.132 20.11533,3.747 30.65,4.845c10.81667,1.12733 21.79567,1.691 32.937,1.691c11.14133,0 22.12033,-0.56367 32.937,-1.691c10.53533,-1.098 20.752,-2.713 30.65,-4.845c9.70533,-2.09 18.933,-4.64 27.683,-7.65c8.646,-2.974 16.65767,-6.339 24.035,-10.095c7.346,-3.74 13.91467,-7.79167 19.706,-12.155c5.802,-4.37133 10.70633,-8.968 14.713,-13.79c4.032,-4.85133 7.07867,-9.84067 9.14,-14.968c2.09067,-5.2 3.136,-10.46867 3.136,-15.806zM361,257c0,6.11133 -1.18967,12.12633 -3.569,18.045c-2.296,5.70867 -5.66033,11.23 -10.093,16.564c-4.304,5.17933 -9.543,10.095 -15.717,14.747c-6.07067,4.57467 -12.93533,8.81133 -20.594,12.71c-7.62667,3.88267 -15.89533,7.35667 -24.806,10.422c-8.97533,3.08733 -18.43233,5.70133 -28.371,7.842c-10.11,2.17733 -20.54033,3.82633 -31.291,4.947c-11.02333,1.14867 -22.20967,1.723 -33.559,1.723c-11.34933,0 -22.53567,-0.57433 -33.559,-1.723c-10.75067,-1.12067 -21.181,-2.76967 -31.291,-4.947c-9.93867,-2.14067 -19.3958,-4.75467 -28.3714,-7.842c-8.91053,-3.06533 -17.17917,-6.53933 -24.8059,-10.422c-7.65847,-3.89933 -14.5232,-8.136 -20.5942,-12.71c-6.1738,-4.652 -11.41277,-9.56767 -15.7169,-14.747c-4.43267,-5.334 -7.7967,-10.85533 -10.0921,-16.564c-2.37967,-5.91867 -3.5695,-11.93367 -3.5695,-18.045c0,-6.11133 1.18983,-12.12633 3.5695,-18.045c2.2954,-5.70867 5.65943,-11.23 10.0921,-16.564c4.30413,-5.17933 9.5431,-10.095 15.7169,-14.747c6.07107,-4.57467 12.9358,-8.81133 20.5942,-12.71c7.6268,-3.88267 15.89543,-7.35667 24.8059,-10.422c8.9756,-3.08733 18.43273,-5.70133 28.3714,-7.842c10.11,-2.17733 20.54033,-3.82633 31.291,-4.947c11.02333,-1.14867 22.20967,-1.723 33.559,-1.723c11.34933,0 22.53567,0.57433 33.559,1.723c10.75067,1.12067 21.181,2.76967 31.291,4.947c9.93867,2.14067 19.39567,4.75467 28.371,7.842c8.91067,3.06533 17.17933,6.53933 24.806,10.422c7.65867,3.89867 14.52333,8.13533 20.594,12.71c6.174,4.652 11.413,9.56767 15.717,14.747c4.43267,5.334 7.797,10.85533 10.093,16.564c2.37933,5.91867 3.569,11.93367 3.569,18.045z"
  27 + />
  28 + </g>
  29 + <g opacity="0.56" transform="translate(50 191) rotate(0)">
  30 + <path
  31 + id="椭圆形"
  32 + :style="{fill: attribute.colors[0], opacity: 0.5}"
  33 + d="M255.253,52.5888c-1.16667,-1.91253 -2.59667,-3.8 -4.29,-5.6624l8.88,-8.072c2.20533,2.4266 4.09,4.92163 5.654,7.4851zM245.635,41.8709c-1.854,-1.53867 -3.88,-3.03637 -6.078,-4.4931l6.629,-10.0027c2.55667,1.6944 4.92767,3.4483 7.113,5.2617zM232.951,33.4091c-2.21467,-1.20953 -4.54367,-2.3739 -6.987,-3.4931l4.997,-10.9099c2.69933,1.2364 5.27967,2.52683 7.741,3.8713zM218.726,26.8647c-2.39467,-0.92887 -4.86567,-1.81297 -7.413,-2.6523l3.756,-11.3972c2.74333,0.90407 5.409,1.85793 7.997,2.8616zM203.848,21.943c-2.51,-0.70207 -5.07233,-1.3602 -7.687,-1.9744l2.744,-11.68201c2.778,0.65263 5.503,1.35264 8.175,2.10001zM188.166,18.2598c-2.538,-0.49047 -5.10933,-0.93957 -7.714,-1.3473l1.856,-11.85563c2.746,0.42981 5.45767,0.90345 8.135,1.42093zM172.485,15.8076c-2.67133,-0.3238 -5.36533,-0.6044 -8.082,-0.8418l1.045,-11.95442c2.85,0.24904 5.677,0.5435 8.481,0.88338zM156.51,14.4017c-2.674,-0.14913 -5.36033,-0.25677 -8.059,-0.3229l0.294,-11.99637c2.82333,0.06918 5.63433,0.18179 8.433,0.33783zM140.252,14.0058c-2.72533,0.018 -5.44067,0.07807 -8.146,0.1802l-0.452,-11.99151c2.82933,-0.10681 5.66867,-0.16963 8.518,-0.18846zM124.115,14.6123c-2.656,0.18367 -5.29333,0.40823 -7.912,0.6737l-1.21,-11.9388c2.746,-0.2784 5.511,-0.51383 8.295,-0.70628zM108.101,16.2467c-2.65133,0.3608 -5.27233,0.76387 -7.863,1.2092l-2.033,-11.82645c2.728,-0.46911 5.48733,-0.8935 8.278,-1.27319zM92.4227,18.9483c-2.67987,0.5642 -5.3112,1.17373 -7.894,1.8286l-2.9492,-11.63197c2.74113,-0.69498 5.5315,-1.34137 8.3711,-1.93918zM77.0008,22.8559c-2.5716,0.77107 -5.07473,1.58673 -7.5094,2.447l-3.9979,-11.3144c2.61707,-0.92473 5.30403,-1.8004 8.0609,-2.627zM62.126,28.1299c-2.47767,1.03173 -4.85403,2.1087 -7.1291,3.2309l-5.3083,-10.7621c2.50347,-1.2348 5.11157,-2.41703 7.8243,-3.5467zM48.1748,35.0426c-2.28713,1.35287 -4.42167,2.7487 -6.4036,4.1875l-7.0498,-9.7108c2.28573,-1.65933 4.73373,-3.26103 7.344,-4.8051zM35.9658,43.9745c-1.8764,1.7418 -3.51937,3.515 -4.9289,5.3196l-9.457,-7.3867c1.803,-2.3084 3.87697,-4.551 6.2219,-6.7278zM27.3622,55.1261c-0.99293,2.05987 -1.67283,4.1292 -2.0397,6.208l-11.8174,-2.0857c0.55893,-3.16687 1.57477,-6.2779 3.0475,-9.3331zM25.1762,67.7125c0.27313,2.09627 0.8639,4.18337 1.7723,6.2613l-10.9951,4.8069c-1.36433,-3.1206 -2.25653,-6.29327 -2.6766,-9.518zM30.3991,79.8654c1.34653,1.82767 2.93273,3.62567 4.7586,5.394l-8.3484,8.62c-2.30513,-2.23253 -4.3289,-4.53123 -6.0713,-6.8961zM40.8452,90.0861c1.9508,1.46533 4.0592,2.88813 6.3252,4.2684l-6.2425,10.2485c-2.59813,-1.58267 -5.02807,-3.22343 -7.2898,-4.9223zM53.9415,98.1118c2.26087,1.14507 4.6263,2.2448 7.0963,3.2992l-4.712,11.036c-2.71027,-1.15667 -5.31237,-2.36667 -7.8063,-3.63zM68.382,104.3c2.43567,0.882 4.94253,1.719 7.5206,2.511l-3.5232,11.471c-2.76693,-0.85 -5.46117,-1.74967 -8.0827,-2.699zM83.3729,108.926c2.56427,0.66733 5.1779,1.28967 7.8409,1.867l-2.5427,11.728c-2.82373,-0.612 -5.5973,-1.27267 -8.3207,-1.982zM99.0787,112.341c2.57687,0.45733 5.18497,0.87267 7.8243,1.246l-1.68,11.882c-2.77867,-0.39267 -5.52567,-0.83 -8.241,-1.312zM114.971,114.586c2.63267,0.28067 5.28533,0.51967 7.958,0.717l-0.885,11.967c-2.80133,-0.20667 -5.58267,-0.45733 -8.344,-0.752zM130.895,115.765c2.69733,0.11467 5.405,0.18733 8.123,0.218l-0.135,11.999c-2.84267,-0.032 -5.675,-0.10767 -8.497,-0.227zM147.226,115.948c2.706,-0.05333 5.4,-0.14867 8.082,-0.286l0.612,11.985c-2.80667,0.14333 -5.62533,0.243 -8.456,0.299zM163.228,115.134c2.70133,-0.22333 5.381,-0.489 8.039,-0.797l1.383,11.92c-2.78933,0.32333 -5.60067,0.602 -8.434,0.836zM179.27,113.269c2.61733,-0.39533 5.20167,-0.83233 7.753,-1.311l2.213,11.794c-2.69067,0.50467 -5.41467,0.96567 -8.172,1.383zM194.974,110.306c2.632,-0.60133 5.21267,-1.24667 7.742,-1.936l3.158,11.577c-2.69067,0.73333 -5.43333,1.41933 -8.228,2.058zM210.162,106.162c2.55867,-0.822 5.043,-1.689 7.453,-2.601l4.247,11.224c-2.60067,0.98333 -5.277,1.91733 -8.029,2.802zM224.914,100.559c2.45333,-1.09647 4.79633,-2.2381 7.029,-3.4249l5.633,10.5949c-2.474,1.316 -5.06267,2.578 -7.766,3.786zM238.611,93.2399c2.22333,-1.42993 4.28,-2.9014 6.17,-4.4144l7.5,9.3674c-2.214,1.77207 -4.60733,3.48543 -7.18,5.1401zM250.238,83.8526c1.73467,-1.82093 3.21667,-3.6684 4.446,-5.5424l10.033,6.5825c-1.626,2.479 -3.55567,4.89097 -5.789,7.2359zM257.727,72.2616c0.73667,-2.08967 1.15367,-4.1889 1.251,-6.2977l11.987,0.5523c-0.15133,3.2872 -0.79133,6.53193 -1.92,9.7342zM259,65c0,-2.1188 -0.32133,-4.2272 -0.964,-6.3252l11.473,-3.5153c0.994,3.24353 1.491,6.5237 1.491,9.8405z"
  34 + />
  35 + <path
  36 + id="椭圆形"
  37 + :style="{fill: attribute.colors[0], opacity: 0.2}"
  38 + d="M236.007,55.489c-0.934,-1.54667 -2.07933,-3.07367 -3.436,-4.581l7.433,-6.6899c1.78067,1.9784 3.30167,4.0123 4.563,6.1017zM228.284,46.8008c-1.486,-1.24467 -3.10967,-2.45673 -4.871,-3.6362l5.564,-8.3092c2.05867,1.37867 3.968,2.8053 5.728,4.2799zM218.231,40.012c-1.83867,-1.01953 -3.77633,-2.00027 -5.813,-2.9422l4.198,-9.0763c2.25733,1.0442 4.412,2.13513 6.464,3.2728zM206.751,34.6508c-1.972,-0.7764 -4.00867,-1.5151 -6.11,-2.2161l3.164,-9.4861c2.26933,0.75707 4.47267,1.55623 6.61,2.3975zM194.536,30.5568c-2.026,-0.57313 -4.09433,-1.11083 -6.205,-1.6131l2.315,-9.7283c2.24733,0.53473 4.45133,1.10777 6.612,1.7191zM181.849,27.5393c-2.04933,-0.40173 -4.12633,-0.77013 -6.231,-1.1052l1.573,-9.8756c2.22133,0.35373 4.415,0.74293 6.581,1.1676zM169.182,25.5245c-2.16667,-0.26833 -4.352,-0.5015 -6.556,-0.6995l0.894,-9.9599c2.316,0.208 4.613,0.45307 6.891,0.7352zM156.246,24.3536c-2.16133,-0.12573 -4.33267,-0.21797 -6.514,-0.2767l0.269,-9.9964c2.28533,0.06153 4.56067,0.15817 6.826,0.2899zM143.1,24.0019c-2.20867,0.00927 -4.40933,0.05263 -6.602,0.1301l-0.353,-9.9938c2.29667,-0.08113 4.60133,-0.12653 6.914,-0.1362zM130.019,24.4619c-2.142,0.1428 -4.26933,0.31843 -6.382,0.5269l-0.982,-9.9517c2.218,-0.21887 4.45067,-0.40323 6.698,-0.5531zM117.062,25.7502c-2.152,0.28673 -4.27967,0.60783 -6.383,0.9633l-1.666,-9.8602c2.218,-0.37487 4.46067,-0.71337 6.728,-1.0155zM104.382,27.896c-2.178,0.4508 -4.31697,0.9385 -6.4169,1.4631l-2.4233,-9.7019c2.23153,-0.5574 4.50227,-1.07523 6.8122,-1.5535zM91.8416,31.026c-2.11333,0.6248 -4.171,1.28667 -6.173,1.9856l-3.2961,-9.4411c2.15447,-0.7522 4.3658,-1.46357 6.634,-2.1341zM79.6749,35.2844c-1.9798,0.8144 -3.88187,1.6643 -5.7062,2.5497l-4.3662,-8.9965c2.00907,-0.97507 4.09847,-1.90883 6.2682,-2.8013zM68.3041,40.8446c-1.8008,1.0496 -3.48867,2.13203 -5.0636,3.2473l-5.779,-8.1611c1.81567,-1.28567 3.7513,-2.5276 5.8069,-3.7258zM58.4772,47.8755c-1.54693,1.3896 -2.91103,2.80543 -4.0923,4.2475l-7.7359,-6.3369c1.5042,-1.83633 3.2194,-3.61963 5.1456,-5.3499zM51.2597,56.7907c-0.86167,1.6472 -1.47697,3.30223 -1.8459,4.9651l-9.7627,-2.1659c0.5604,-2.52587 1.4763,-5.004 2.7477,-7.4344zM49.0569,66.8916c0.13867,1.69473 0.53167,3.38227 1.179,5.0626l-9.3316,3.5948c-0.9924,-2.5762 -1.5971,-5.19007 -1.8141,-7.8416zM52.8216,76.7971c1.026,1.49813 2.2498,2.97423 3.6714,4.4283l-7.1505,6.9908c-1.8272,-1.86893 -3.4177,-3.7918 -4.7715,-5.7686zM60.9628,85.2102c1.5234,1.19727 3.17527,2.36177 4.9556,3.4935l-5.3646,8.4392c-2.06147,-1.3104 -3.9849,-2.6672 -5.7703,-4.0704zM71.2813,91.8061c1.83747,0.9696 3.7656,1.9015 5.7844,2.7957l-4.0498,9.1432c-2.22807,-0.98667 -4.36193,-2.01833 -6.4016,-3.095zM82.8557,96.968c2.0116,0.75793 4.0862,1.4773 6.2238,2.1581l-3.0349,9.5279c-2.30253,-0.73333 -4.54077,-1.50933 -6.7147,-2.328zM95.1087,100.898c2.05393,0.55533 4.1487,1.075 6.2843,1.559l-2.2077,9.753c-2.2708,-0.514 -4.49987,-1.067 -6.6872,-1.659zM107.811,103.778c2.07,0.38467 4.166,0.73567 6.288,1.053l-1.479,9.89c-2.23867,-0.33467 -4.451,-0.70533 -6.637,-1.112zM120.588,105.686c2.14733,0.246 4.312,0.45767 6.494,0.635l-0.81,9.967c-2.29133,-0.186 -4.56533,-0.40833 -6.822,-0.667zM133.499,106.741c2.17333,0.108 4.356,0.182 6.548,0.222l-0.185,9.999c-2.296,-0.04267 -4.58233,-0.12067 -6.859,-0.234zM146.693,106.983c2.19867,-0.02733 4.38867,-0.089 6.57,-0.185l0.438,9.991c-2.28533,0.1 -4.57967,0.16433 -6.883,0.193zM159.707,106.416c2.16533,-0.16267 4.31467,-0.35933 6.448,-0.59l1.073,9.942c-2.24067,0.242 -4.49767,0.44867 -6.771,0.62zM172.68,105.009c2.13467,-0.30467 4.244,-0.64333 6.328,-1.016l1.761,9.844c-2.19933,0.39333 -4.42433,0.75067 -6.675,1.072zM185.378,102.73c2.15267,-0.47 4.26567,-0.97633 6.339,-1.519l2.533,9.674c-2.206,0.57733 -4.45267,1.11567 -6.74,1.615zM197.758,99.4908c2.138,-0.66007 4.21567,-1.35847 6.233,-2.0952l3.43,9.3934c-2.176,0.79467 -4.414,1.547 -6.714,2.257zM209.867,95.0676c2.004,-0.86093 3.92267,-1.7587 5.756,-2.6933l4.541,8.9097c-2.02867,1.034 -4.14533,2.02467 -6.35,2.972zM221.112,89.3089c1.79067,-1.09773 3.45933,-2.22837 5.006,-3.3919l6.011,7.9913c-1.79933,1.35393 -3.72933,2.66257 -5.79,3.9259zM230.714,82.0141c1.47533,-1.42807 2.759,-2.88 3.851,-4.3558l8.039,5.9479c-1.41933,1.91793 -3.06433,3.78223 -4.935,5.5929zM237.368,72.9103c0.742,-1.6738 1.231,-3.3548 1.467,-5.043l9.904,1.3835c-0.36533,2.6138 -1.10833,5.1848 -2.229,7.713zM239,65.5c0,-1.70767 -0.25633,-3.40717 -0.769,-5.0985l9.569,-2.9017c0.8,2.63727 1.2,5.304 1.2,8.0002z"
  39 + />
  40 + <path
  41 + id="椭圆形"
  42 + :style="{fill: attribute.colors[0], opacity: 1}"
  43 + d="M276.756,54.0128c-1.02333,-1.954 -2.28367,-3.89097 -3.781,-5.8109l11.038,-8.6111c2.016,2.584 3.731,5.22613 5.145,7.9264zM268.125,42.843c-1.71,-1.65413 -3.58967,-3.27597 -5.639,-4.8655l8.58,-11.0626c2.452,1.90187 4.71633,3.85713 6.793,5.8658zM256.266,33.5906c-2.10133,-1.353 -4.321,-2.66803 -6.659,-3.9451l6.71,-12.2871c2.63467,1.43887 5.14433,2.92617 7.529,4.4619zM242.64,26.1197c-2.29933,-1.07933 -4.681,-2.12033 -7.145,-3.123l5.277,-12.9676c2.69067,1.09487 5.29633,2.23393 7.817,3.4172zM228.123,20.1993c-2.454,-0.8678 -4.96833,-1.6969 -7.543,-2.4873l4.108,-13.38356c2.76267,0.84795 5.46333,1.73851 8.102,2.67168zM213.135,15.58c-2.54467,-0.6784 -5.133,-1.31873 -7.765,-1.921l3.122,-13.64736c2.794,0.63929 5.54367,1.31956 8.249,2.04081zM197.358,11.9703c-2.536,-0.4902 -5.101,-0.94503 -7.695,-1.3645l2.235,-13.82046c2.73533,0.44229 5.441,0.92207 8.117,1.43934zM181.748,9.44776c-2.68467,-0.35221 -5.39067,-0.66678 -8.118,-0.94369l1.414,-13.92841c2.86333,0.29072 5.705,0.62107 8.525,0.99106zM165.714,7.81089c-2.63933,-0.19469 -5.291,-0.35438 -7.955,-0.47908l0.654,-13.98469c2.79,0.13057 5.567,0.29781 8.331,0.50172zM149.667,7.0617c-2.052,-0.04113 -4.10767,-0.0617 -6.167,-0.0617l-2.065,0.00686l-0.046,-13.99992l2.111,-0.00694c2.15333,0 4.30233,0.0215 6.447,0.06451zM133.303,7.16919c-2.68667,0.08947 -5.362,0.21433 -8.026,0.37457l-0.841,-13.97475c2.78867,-0.16774 5.589,-0.29843 8.401,-0.39206zM117.395,8.12421c-2.71133,0.23666 -5.40367,0.51024 -8.077,0.82075l-1.615,-13.90649c2.80533,-0.32589 5.63033,-0.61297 8.475,-0.86123zM101.299,9.99598c-2.63007,0.38455 -5.2328,0.80502 -7.8082,1.26142l-2.4431,-13.78517c2.71427,-0.48103 5.4561,-0.92402 8.2255,-1.32895zM85.6583,12.7744c-2.68093,0.56453 -5.32067,1.16807 -7.9192,1.8106l-3.3604,-13.59076c2.75653,-0.68157 5.55483,-1.32137 8.3949,-1.91939zM70.13,16.6121c-2.54127,0.7274 -5.02907,1.49197 -7.4634,2.2937l-4.3793,-13.29742c2.6088,-0.85917 5.27207,-1.67774 7.9898,-2.45572zM55.2503,21.5264c-2.52327,0.95553 -4.96897,1.95037 -7.3371,2.9845l-5.6027,-12.8301c2.58093,-1.12703 5.2416,-2.20941 7.982,-3.24713zM40.8249,27.8419c-2.37013,1.199 -4.63297,2.43607 -6.7885,3.7112l-7.128,-12.0496c2.4202,-1.43167 4.95253,-2.81637 7.597,-4.1541zM27.6192,35.686c-2.1324,1.49947 -4.11127,3.03317 -5.9366,4.6011l-9.1223,-10.62c2.16833,-1.86253 4.50363,-3.6736 7.0059,-5.4332zM16.3974,45.3937c-1.6812,1.847 -3.14113,3.7162 -4.3798,5.6076l-11.7119,-7.6701c1.64505,-2.51193 3.55783,-4.9657 5.73833,-7.3613zM8.86227,57.02c-0.8222,2.08013 -1.37211,4.1679 -1.64973,6.2633l-13.87872,-1.8387c0.42835,-3.23313 1.26454,-6.4234 2.50859,-9.5708zM7.20605,69.6673c0.27336,2.09567 0.81905,4.18373 1.63708,6.2642l-13.029,5.123c-1.23837,-3.14947 -2.06853,-6.3416 -2.49048,-9.5764zM11.9872,81.9522c1.23547,1.8924 2.69243,3.7627 4.3709,5.6109l-10.36391,9.4122c-2.17819,-2.39847 -4.08817,-4.8551 -5.72994,-7.3699zM21.6371,92.6738c1.82367,1.56927 3.8011,3.10433 5.9323,4.6052l-8.0609,11.446c-2.5016,-1.76133 -4.83597,-3.57433 -7.0031,-5.439zM33.9839,101.416c2.15473,1.276 4.417,2.51433 6.7868,3.715l-6.3254,12.489c-2.64447,-1.33933 -5.17653,-2.72567 -7.5962,-4.159zM47.8579,108.465c2.36773,1.03533 4.8132,2.031 7.3364,2.987l-4.9625,13.091c-2.74053,-1.03867 -5.40113,-2.122 -7.9818,-3.25zM62.6072,114.075c2.4348,0.80267 4.9231,1.568 7.4649,2.296l-3.8568,13.459c-2.71847,-0.77933 -5.38237,-1.599 -7.9917,-2.459zM77.6787,118.4c2.5978,0.64333 5.23673,1.24733 7.9168,1.812l-2.8883,13.699c-2.8394,-0.59867 -5.63697,-1.239 -8.3927,-1.921zM93.4309,121.732c2.57473,0.45667 5.17677,0.87767 7.8061,1.263l-2.0287,13.852c-2.76893,-0.40533 -5.5102,-0.84867 -8.2238,-1.33zM109.255,124.048c2.674,0.31067 5.367,0.58467 8.079,0.822l-1.22,13.947c-2.84533,-0.24867 -5.671,-0.53633 -8.477,-0.863zM125.215,125.453c2.66333,0.16067 5.33833,0.286 8.025,0.376l-0.469,13.992c-2.81133,-0.094 -5.61133,-0.22533 -8.4,-0.394zM141.371,125.993l2.153,0.007c2.022,0 4.04833,-0.02 6.079,-0.06l0.278,13.997c-2.12333,0.042 -4.25833,0.063 -6.405,0.063l-2.153,-0.007zM157.696,125.671c2.66467,-0.124 5.31667,-0.283 7.956,-0.477l1.027,13.962c-2.764,0.20333 -5.541,0.37 -8.331,0.5zM173.566,124.502c2.728,-0.276 5.43467,-0.59 8.12,-0.942l1.818,13.882c-2.82067,0.36933 -5.663,0.699 -8.527,0.989zM189.602,122.404c2.59533,-0.41867 5.161,-0.873 7.697,-1.363l2.654,13.746c-2.67667,0.51667 -5.383,0.996 -8.119,1.438zM205.308,119.355c2.63267,-0.60133 5.222,-1.241 7.768,-1.919l3.602,13.528c-2.706,0.72067 -5.45633,1.40033 -8.251,2.039zM220.523,115.305c2.574,-0.78933 5.08833,-1.61733 7.543,-2.484l4.662,13.201c-2.63867,0.932 -5.33867,1.82133 -8.1,2.668zM235.438,110.027c2.464,-1.002 4.846,-2.042 7.146,-3.12l5.943,12.676c-2.52133,1.182 -5.12733,2.31967 -7.818,3.413zM249.555,103.383c2.33867,-1.276 4.559,-2.58993 6.661,-3.9418l7.573,11.7748c-2.38533,1.534 -4.89533,3.01967 -7.53,4.457zM262.439,95.0582c2.05133,-1.58807 3.93267,-3.20853 5.644,-4.8614l9.725,10.0712c-2.078,2.00667 -4.34367,3.95967 -6.797,5.859zM272.941,84.8416c1.50067,-1.91873 2.76433,-3.8547 3.791,-5.8079l12.392,6.515c-1.41867,2.69733 -3.137,5.3365 -5.155,7.9175zM279.157,72.8898c0.55733,-2.104 0.83833,-4.21727 0.843,-6.3398l14,0.0288c-0.00667,3.328 -0.443,6.6267 -1.309,9.8961zM280,66.5c0,-2.12293 -0.27667,-4.23673 -0.83,-6.3414l13.54,-3.5592c0.86,3.27113 1.29,6.57133 1.29,9.9006z"
  44 + />
  45 + </g>
  46 + <path
  47 + id="形状结合"
  48 + fill-rule="evenodd"
  49 + fill="url(#linear_2)"
  50 + opacity="0.32"
  51 + d="M118,249h-0.69l-63.31,-249h279l-63.31,249h0.31c0,16.02 -34.03,29 -76,29c-41.97,0 -76,-12.98 -76,-29z"
  52 + />
  53 + </g>
  54 + </g>
  55 + </g>
  56 + <defs>
  57 + <filter
  58 + id="filter_3"
  59 + x="71"
  60 + y="319"
  61 + width="244"
  62 + height="116"
  63 + filterUnits="userSpaceOnUse"
  64 + color-interpolation-filters="sRGB"
  65 + >
  66 + <feFlood flood-opacity="0" result="feFloodId" />
  67 + <feColorMatrix
  68 + in="SourceAlpha"
  69 + type="matrix"
  70 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  71 + result="hardAlpha"
  72 + />
  73 +
  74 + <feOffset dx="0" dy="-11" />
  75 + <feGaussianBlur stdDeviation="4.5" />
  76 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  77 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.9725490196078431 0 0 0 0 1 0 0 0 1 0" />
  78 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  79 + <feBlend mode="normal" in="SourceGraphic" in2="filter_3" result="shape" />
  80 + </filter>
  81 + <linearGradient
  82 + id="linear_0"
  83 + x1="50%"
  84 + y1="35.5035449506115%"
  85 + x2="51%"
  86 + y2="100%"
  87 + gradientUnits="objectBoundingBox"
  88 + >
  89 + <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="0" />
  90 + <stop offset="0.6766349198750631" :stop-color="attribute.colors[2]" stop-opacity="0.8" />
  91 + <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" />
  92 + </linearGradient>
  93 + <filter
  94 + id="filter_4"
  95 + x="-30"
  96 + y="166"
  97 + width="446"
  98 + height="241"
  99 + filterUnits="userSpaceOnUse"
  100 + color-interpolation-filters="sRGB"
  101 + >
  102 + <feFlood flood-opacity="0" result="feFloodId" />
  103 + <feColorMatrix
  104 + in="SourceAlpha"
  105 + type="matrix"
  106 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  107 + result="hardAlpha"
  108 + />
  109 +
  110 + <feOffset dx="0" dy="-17" />
  111 + <feGaussianBlur stdDeviation="15" />
  112 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  113 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.9725490196078431 0 0 0 0 1 0 0 0 1 0" />
  114 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  115 + <feBlend mode="normal" in="SourceGraphic" in2="filter_4" result="shape" />
  116 + </filter>
  117 + <linearGradient
  118 + id="linear_1"
  119 + x1="50%"
  120 + y1="35.5035449506115%"
  121 + x2="51%"
  122 + y2="100%"
  123 + gradientUnits="objectBoundingBox"
  124 + >
  125 + <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="0" />
  126 + <stop offset="0.6766349198750631" :stop-color="attribute.colors[2]" stop-opacity="0.8" />
  127 + <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" />
  128 + </linearGradient>
  129 + <filter
  130 + id="filter_5"
  131 + x="-2"
  132 + y="160"
  133 + width="390"
  134 + height="194"
  135 + filterUnits="userSpaceOnUse"
  136 + color-interpolation-filters="sRGB"
  137 + >
  138 + <feFlood flood-opacity="0" result="feFloodId" />
  139 + <feColorMatrix
  140 + in="SourceAlpha"
  141 + type="matrix"
  142 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  143 + result="hardAlpha"
  144 + />
  145 +
  146 + <feOffset dx="0" dy="-17" />
  147 + <feGaussianBlur stdDeviation="15" />
  148 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  149 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.9725490196078431 0 0 0 0 1 0 0 0 1 0" />
  150 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  151 + <feBlend mode="normal" in="SourceGraphic" in2="filter_5" result="shape" />
  152 + </filter>
  153 + <linearGradient
  154 + id="linear_2"
  155 + x1="50%"
  156 + y1="0%"
  157 + x2="51%"
  158 + y2="74.82884987113394%"
  159 + gradientUnits="objectBoundingBox"
  160 + >
  161 + <stop offset="0" :stop-color="attribute.colors[4]" stop-opacity="0" />
  162 + <stop offset="1" :stop-color="attribute.colors[5]" stop-opacity="1" />
  163 + </linearGradient>
  164 + </defs>
  165 + </svg>
  166 + </div>
  167 +</template>
  168 +<script setup lang="ts">
  169 +import { PropType, toRefs } from 'vue'
  170 +import { CreateComponentType } from '@/packages/index.d'
  171 +
  172 +const props = defineProps({
  173 + chartConfig: {
  174 + type: Object as PropType<CreateComponentType>,
  175 + required: true
  176 + }
  177 +})
  178 +
  179 +const { attribute } = toRefs(props.chartConfig.option)
  180 +
  181 +const { w, h } = toRefs(props.chartConfig.attr)
  182 +</script>
  183 +
  184 +<style lang="scss" scoped>
  185 +.go-content-box {
  186 + width: v-bind('w+"px"');
  187 + height: v-bind('h+"px"');
  188 + display: flex;
  189 + align-items: center;
  190 + justify-content: center;
  191 +}
  192 +</style>
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Decorates09Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '',
  9 + attribute: {
  10 + colors: [
  11 + '#66ffff',
  12 + '#025E81',
  13 + '#16CCE0',
  14 + '#025E81',
  15 + '#16CCE0',
  16 + '#17D4E7',
  17 + '#082C51',
  18 + '#17D4E7',
  19 + '#082C51',
  20 + ],
  21 + }
  22 +}
  23 +
  24 +export default class Config extends PublicConfigClass implements CreateComponentType {
  25 + public key = Decorates09Config.key
  26 + public attr = { ...chartInitConfig, zIndex: 1, w: 200, h: 200 }
  27 + public chartConfig = cloneDeep(Decorates09Config)
  28 + public option = cloneDeep(option)
  29 +}
... ...
  1 +<template>
  2 + <CollapseItem name="配置" :expanded="true">
  3 + <SettingItemBox
  4 + :name="`装饰颜色-${index + 1}`"
  5 + v-for="(item, index) in optionData.attribute.colors"
  6 + :key="index"
  7 + >
  8 + <SettingItem name="颜色">
  9 + <n-color-picker
  10 + size="small"
  11 + :modes="['hex']"
  12 + v-model:value="optionData.attribute.colors[index]"
  13 + ></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">
  17 + 恢复默认
  18 + </n-button>
  19 + </SettingItem>
  20 + </SettingItemBox>
  21 + </CollapseItem>
  22 +</template>
  23 +
  24 +<script setup lang="ts">
  25 +import { PropType } from 'vue'
  26 +import { option } from './config'
  27 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  28 +
  29 +defineProps({
  30 + optionData: {
  31 + type: Object as PropType<typeof option>,
  32 + required: true
  33 + }
  34 +})
  35 +</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('Decorates09',true)
  6 +
  7 +export const Decorates09Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '装饰09',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  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 + viewBox="0 0 171 194"
  9 + fill="none"
  10 + >
  11 + <g opacity="1" transform="translate(0 0) rotate(0)">
  12 + <path
  13 + id="椭圆形"
  14 + :style="{ fill: attribute.colors[0], opacity: 1 }"
  15 + d="M139.621,136.251c-2.61,-2.04333 -5.588,-3.925 -8.934,-5.645l3.447,-6.71c3.772,1.938 7.15133,4.07633 10.138,6.415zM117.348,125.283c-3.40467,-1.03333 -6.94467,-1.89633 -10.62,-2.589l1.397,-7.413c3.944,0.74267 7.74833,1.67033 11.413,2.783zM92.22,120.92c-2.4356,-0.14533 -4.8863,-0.218 -7.3521,-0.218c-1.2664,0 -2.52947,0.01933 -3.7892,0.058l-0.2295,-7.541c1.3362,-0.04067 2.67577,-0.061 4.0187,-0.061c2.61553,0 5.21587,0.077 7.801,0.231zM66.4938,122.095c-3.67767,0.572 -7.24003,1.312 -10.6871,2.22l-1.9218,-7.295c3.69873,-0.97467 7.5155,-1.76767 11.4503,-2.379zM42.1309,129.118c-3.43633,1.55933 -6.54803,3.28567 -9.3351,5.179l-4.2389,-6.24c3.14287,-2.13533 6.6283,-4.07167 10.4563,-5.809zM22.907,143.636c-2.01593,2.854 -3.2796,5.77967 -3.791,8.777l-7.4364,-1.269c0.7032,-4.12133 2.39173,-8.075 5.0656,-11.861zM21.2625,164.572c1.45987,2.72667 3.54307,5.337 6.2496,7.831l-5.1119,5.548c-3.33127,-3.07 -5.9273,-6.34267 -7.7881,-9.818zM39.145,180.303c3.07327,1.57333 6.3896,2.97533 9.949,4.206l-2.466,7.13c-3.89267,-1.34667 -7.53267,-2.88667 -10.92,-4.62zM63.1185,188.187c3.54973,0.66533 7.17993,1.163 10.8906,1.493l-0.6688,7.514c-3.9524,-0.35133 -7.82277,-0.882 -11.6111,-1.592zM88.7721,190.097c3.68647,-0.11533 7.32063,-0.39367 10.9025,-0.835l0.9224,7.487c-3.80967,0.46933 -7.67247,0.76533 -11.5884,0.888zM114.041,186.516c3.61867,-0.958 7.05333,-2.08633 10.304,-3.385l2.799,7.006c-3.53467,1.412 -7.259,2.636 -11.173,3.672zM137.03,176.502c3.09067,-2.10867 5.693,-4.363 7.807,-6.763l5.661,4.986c-2.53133,2.874 -5.60333,5.54367 -9.216,8.009zM150.636,158.352c0.16,-0.97 0.24,-1.944 0.24,-2.922c0,-3.072 -0.78533,-6.09 -2.356,-9.054l6.666,-3.532c2.156,4.068 3.234,8.26333 3.234,12.586c0,1.39067 -0.11367,2.774 -0.341,4.15z"
  16 + />
  17 + <g opacity="1" transform="translate(0 0) rotate(0)" class="beat">
  18 + <path
  19 + id="路径 12"
  20 + fill-rule="evenodd"
  21 + fill="url(#decorates09_linear_0)"
  22 + opacity="1"
  23 + d="M85.95 129.06L85.95 19.27L22.06 0L0 7.98L85.95 129.06Z"
  24 + />
  25 + <path
  26 + id="路径 12"
  27 + fill-rule="evenodd"
  28 + fill="url(#decorates09_linear_1)"
  29 + opacity="1"
  30 + d="M148.627 0L84.7373 19.27L84.7373 129.06L170.687 7.98L148.627 0Z"
  31 + />
  32 + <g id="路径 11" filter="url(#decorates09_filter_5)">
  33 + <path
  34 + id="路径 11"
  35 + fill-rule="evenodd"
  36 + fill="url(#decorates09_linear_2)"
  37 + opacity="1"
  38 + d="M84.333 171.824L170.283 7.97363L84.333 42.7736L84.333 171.824Z"
  39 + />
  40 + </g>
  41 + <g id="路径 11" filter="url(#decorates09_filter_6)">
  42 + <path
  43 + id="路径 11"
  44 + fill-rule="evenodd"
  45 + fill="url(#decorates09_linear_3)"
  46 + opacity="1"
  47 + d="M0 7.97363L85.95 171.824L85.95 42.7736L0 7.97363Z"
  48 + />
  49 + </g>
  50 + </g>
  51 + </g>
  52 + <defs>
  53 + <linearGradient
  54 + id="decorates09_linear_0"
  55 + x1="28.520997615990495%"
  56 + y1="0%"
  57 + x2="100%"
  58 + y2="35.79683373280602%"
  59 + gradientUnits="objectBoundingBox"
  60 + >
  61 + <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="1" />
  62 + <stop offset="1" :stop-color="attribute.colors[2]" stop-opacity="1" />
  63 + </linearGradient>
  64 + <linearGradient
  65 + id="decorates09_linear_1"
  66 + x1="30.643682376671677%"
  67 + y1="35.79683373280602%"
  68 + x2="80.6986979644222%"
  69 + y2="10.637680716914133%"
  70 + gradientUnits="objectBoundingBox"
  71 + >
  72 + <stop offset="0" :stop-color="attribute.colors[3]" stop-opacity="1" />
  73 + <stop offset="1" :stop-color="attribute.colors[4]" stop-opacity="1" />
  74 + </linearGradient>
  75 + <linearGradient
  76 + id="decorates09_linear_2"
  77 + x1="50%"
  78 + y1="0%"
  79 + x2="4.841371721988708%"
  80 + y2="96.00644548395181%"
  81 + gradientUnits="objectBoundingBox"
  82 + >
  83 + <stop offset="0" :stop-color="attribute.colors[5]" stop-opacity="1" />
  84 + <stop offset="1" :stop-color="attribute.colors[6]" stop-opacity="1" />
  85 + </linearGradient>
  86 + <filter
  87 + id="decorates09_filter_5"
  88 + x="80.3330078125"
  89 + y="-0.0263671875"
  90 + width="93.95075950190909"
  91 + height="179.8451129978739"
  92 + filterUnits="userSpaceOnUse"
  93 + color-interpolation-filters="sRGB"
  94 + >
  95 + <feFlood flood-opacity="0" result="feFloodId" />
  96 + <feColorMatrix
  97 + in="SourceAlpha"
  98 + type="matrix"
  99 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  100 + result="hardAlpha"
  101 + />
  102 +
  103 + <feOffset dx="0" dy="4" />
  104 + <feGaussianBlur stdDeviation="2" />
  105 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  106 + <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
  107 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  108 + <feBlend mode="normal" in="SourceGraphic" in2="decorates09_filter_5" result="shape" />
  109 + </filter>
  110 + <linearGradient
  111 + id="decorates09_linear_3"
  112 + x1="50%"
  113 + y1="0%"
  114 + x2="95.15862827801129%"
  115 + y2="96.00644548395181%"
  116 + gradientUnits="objectBoundingBox"
  117 + >
  118 + <stop offset="0" :stop-color="attribute.colors[7]" stop-opacity="1" />
  119 + <stop offset="1" :stop-color="attribute.colors[8]" stop-opacity="1" />
  120 + </linearGradient>
  121 + <filter
  122 + id="decorates09_filter_6"
  123 + x="-4"
  124 + y="-0.0263671875"
  125 + width="93.95075950190908"
  126 + height="179.8451129978739"
  127 + filterUnits="userSpaceOnUse"
  128 + color-interpolation-filters="sRGB"
  129 + >
  130 + <feFlood flood-opacity="0" result="feFloodId" />
  131 + <feColorMatrix
  132 + in="SourceAlpha"
  133 + type="matrix"
  134 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  135 + result="hardAlpha"
  136 + />
  137 +
  138 + <feOffset dx="0" dy="4" />
  139 + <feGaussianBlur stdDeviation="2" />
  140 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  141 + <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
  142 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  143 + <feBlend mode="normal" in="SourceGraphic" in2="decorates09_filter_6" result="shape" />
  144 + </filter>
  145 + </defs>
  146 + </svg>
  147 + </div>
  148 +</template>
  149 +<script setup lang="ts">
  150 +import { PropType, toRefs } from 'vue'
  151 +import { CreateComponentType } from '@/packages/index.d'
  152 +
  153 +const props = defineProps({
  154 + chartConfig: {
  155 + type: Object as PropType<CreateComponentType>,
  156 + required: true
  157 + }
  158 +})
  159 +
  160 +const { attribute } = toRefs(props.chartConfig.option)
  161 +
  162 +const { w, h } = toRefs(props.chartConfig.attr)
  163 +</script>
  164 +
  165 +<style lang="scss" scoped>
  166 +.go-content-box {
  167 + width: v-bind('w+"px"');
  168 + height: v-bind('h+"px"');
  169 + display: flex;
  170 + align-items: center;
  171 + justify-content: center;
  172 +}
  173 +</style>
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Decorates10Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '',
  9 + attribute: {
  10 + colors: [
  11 + '#22EB5F',
  12 + '#C48613',
  13 + '#FFFFFF',
  14 + '#39EF71',
  15 + '#FFFFFF',
  16 + '#39EF71',
  17 + '#CAFFE1',
  18 + '#04E848',
  19 + '#CAFFE1',
  20 + '#04E848',
  21 + '#CAFFE1',
  22 + '#04E848'
  23 + ]
  24 + }
  25 +}
  26 +
  27 +export default class Config extends PublicConfigClass implements CreateComponentType {
  28 + public key = Decorates10Config.key
  29 + public attr = { ...chartInitConfig, zIndex: 1, w: 200, h: 200 }
  30 + public chartConfig = cloneDeep(Decorates10Config)
  31 + public option = cloneDeep(option)
  32 +}
... ...
  1 +<template>
  2 + <CollapseItem name="配置" :expanded="true">
  3 + <SettingItemBox
  4 + :name="`装饰颜色-${index + 1}`"
  5 + v-for="(item, index) in optionData.attribute.colors"
  6 + :key="index"
  7 + >
  8 + <SettingItem name="颜色">
  9 + <n-color-picker
  10 + size="small"
  11 + :modes="['hex']"
  12 + v-model:value="optionData.attribute.colors[index]"
  13 + ></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">
  17 + 恢复默认
  18 + </n-button>
  19 + </SettingItem>
  20 + </SettingItemBox>
  21 + </CollapseItem>
  22 +</template>
  23 +
  24 +<script setup lang="ts">
  25 +import { PropType } from 'vue'
  26 +import { option } from './config'
  27 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  28 +
  29 +defineProps({
  30 + optionData: {
  31 + type: Object as PropType<typeof option>,
  32 + required: true
  33 + }
  34 +})
  35 +</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('Decorates10',true)
  6 +
  7 +export const Decorates10Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '装饰10',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  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 + viewBox="0 0 157 357"
  9 + fill="none"
  10 + >
  11 + <g opacity="1" transform="translate(0 0) rotate(0)">
  12 + <g opacity="1" transform="translate(0 0) rotate(0)">
  13 + <path
  14 + id="矩形"
  15 + fill-rule="evenodd"
  16 + fill="url(#decorates10_linear_0)"
  17 + opacity="1"
  18 + d="M72.6001 178.2L72.6001 349.8C72.6001 353.45 75.5501 356.4 79.2001 356.4L79.2001 356.4C82.8501 356.4 85.8001 353.45 85.8001 349.8L85.8001 178.2C85.8001 174.55 82.8501 171.6 79.2001 171.6L79.2001 171.6C75.5501 171.6 72.6001 174.55 72.6001 178.2Z"
  19 + />
  20 + <path
  21 + id="椭圆形"
  22 + style="fill: url(#decorates10_linear_1); opacity: 100"
  23 + d="M122.578,178.779c0,-0.26533 -0.08967,-0.57133 -0.269,-0.918c-0.306,-0.59133 -0.818,-1.22233 -1.536,-1.893c-0.89,-0.83267 -2.02333,-1.65167 -3.4,-2.457c-1.49133,-0.87267 -3.20767,-1.693 -5.149,-2.461c-4.14333,-1.638 -8.95173,-2.91467 -14.4252,-3.83c-5.7816,-0.96733 -11.85177,-1.451 -18.2105,-1.451c-6.36127,0 -12.43347,0.48367 -18.2166,1.451c-5.47487,0.91533 -10.28423,2.192 -14.4281,3.83c-1.9416,0.768 -3.65833,1.58833 -5.1502,2.461c-1.37633,0.80533 -2.50973,1.62433 -3.4002,2.457c-0.71787,0.67067 -1.2298,1.30167 -1.5358,1.893c-0.1794,0.34667 -0.2691,0.65267 -0.2691,0.918c0,0.26533 0.0897,0.57133 0.2691,0.918c0.306,0.59133 0.81793,1.22233 1.5358,1.893c0.89047,0.83267 2.02387,1.65167 3.4002,2.457c1.4918,0.87267 3.20853,1.69267 5.1502,2.46c4.14387,1.63867 8.95323,2.91567 14.4281,3.831c5.7832,0.96733 11.8554,1.451 18.2166,1.451c6.35873,0 12.4289,-0.48367 18.2105,-1.451c5.47347,-0.91533 10.28187,-2.192 14.4252,-3.83c1.94133,-0.768 3.65767,-1.58833 5.149,-2.461c1.37667,-0.80533 2.51,-1.62433 3.4,-2.457c0.718,-0.67067 1.23,-1.30167 1.536,-1.893c0.17933,-0.34667 0.269,-0.65267 0.269,-0.918zM135.778,178.779c0,2.408 -0.582,4.73667 -1.746,6.986c-1.004,1.93867 -2.419,3.76167 -4.245,5.469c-3.12,2.916 -7.35633,5.43233 -12.709,7.549c-5.00933,1.98067 -10.70983,3.50533 -17.1015,4.574c-6.50247,1.088 -13.29853,1.632 -20.3882,1.632c-7.092,0 -13.88993,-0.544 -20.3938,-1.632c-6.39307,-1.06867 -12.0944,-2.59333 -17.104,-4.574c-5.35347,-2.11667 -9.59033,-4.633 -12.7106,-7.549c-1.82647,-1.70733 -3.24147,-3.53033 -4.245,-5.469c-1.1644,-2.24933 -1.7466,-4.578 -1.7466,-6.986c0,-2.408 0.5822,-4.73667 1.7466,-6.986c1.00353,-1.93867 2.41853,-3.76167 4.245,-5.469c3.12027,-2.916 7.35713,-5.43233 12.7106,-7.549c5.0096,-1.98067 10.71093,-3.50567 17.104,-4.575c6.50387,-1.08733 13.3018,-1.631 20.3938,-1.631c7.08967,0 13.88573,0.54367 20.3882,1.631c6.39167,1.06933 12.09217,2.59433 17.1015,4.575c5.35267,2.11667 9.589,4.633 12.709,7.549c1.826,1.70733 3.241,3.53033 4.245,5.469c1.164,2.24933 1.746,4.578 1.746,6.986z"
  24 + />
  25 + <path
  26 + id="椭圆形"
  27 + style="fill: url(#decorates10_linear_2); opacity: 100"
  28 + d="M150.26,206.456c0,-1.054 -0.28667,-2.13667 -0.86,-3.248c-0.688,-1.33533 -1.76167,-2.68767 -3.221,-4.057c-1.61667,-1.51733 -3.63633,-2.988 -6.059,-4.412c-2.528,-1.48533 -5.418,-2.87367 -8.67,-4.165c-3.32867,-1.322 -6.956,-2.50967 -10.882,-3.563c-4.00933,-1.07533 -8.24433,-1.988 -12.705,-2.738c-4.57067,-0.76733 -9.29167,-1.349 -14.163,-1.745c-5.01307,-0.408 -10.10307,-0.612 -15.27,-0.612c-5.16693,0 -10.25693,0.204 -15.27,0.612c-4.87153,0.396 -9.5924,0.97767 -14.1626,1.745c-4.46107,0.75 -8.69623,1.66267 -12.7055,2.738c-3.926,1.05333 -7.55347,2.241 -10.8824,3.563c-3.2518,1.29133 -6.1416,2.67967 -8.6694,4.165c-2.4226,1.424 -4.44237,2.89467 -6.0593,4.412c-1.45912,1.36933 -2.53278,2.72167 -3.22098,4.057c-0.57321,1.11133 -0.85982,2.194 -0.85982,3.248c0,1.056 0.28674,2.14033 0.86023,3.253c0.68821,1.33533 1.76183,2.68767 3.22087,4.057c1.61673,1.51733 3.63633,2.988 6.0588,4.412c2.52767,1.48533 5.4174,2.87333 8.6692,4.164c3.32867,1.32133 6.95607,2.50867 10.8822,3.562c4.00907,1.07533 8.24427,1.98767 12.7056,2.737c4.57007,0.76733 9.291,1.34867 14.1628,1.744c5.013,0.40733 10.1031,0.611 15.2703,0.611c5.1672,0 10.2573,-0.20367 15.2703,-0.611c4.8718,-0.39533 9.5927,-0.97667 14.1627,-1.744c4.46133,-0.74933 8.69667,-1.66167 12.706,-2.737c3.926,-1.05333 7.55333,-2.24067 10.882,-3.562c3.252,-1.29067 6.14167,-2.67867 8.669,-4.164c2.42267,-1.424 4.44233,-2.89467 6.059,-4.412c1.45867,-1.36933 2.53233,-2.72167 3.221,-4.057c0.57333,-1.11267 0.86,-2.197 0.86,-3.253zM163.46,206.456c0,3.19067 -0.77567,6.291 -2.327,9.301c-1.38267,2.682 -3.356,5.22667 -5.92,7.634c-2.33333,2.19 -5.135,4.24567 -8.405,6.167c-3.11067,1.828 -6.606,3.51233 -10.486,5.053c-3.80333,1.50933 -7.91467,2.85667 -12.334,4.042c-4.416,1.18467 -9.06233,2.18633 -13.939,3.005c-4.94067,0.83 -10.03393,1.458 -15.2798,1.884c-5.36867,0.436 -10.81507,0.654 -16.3392,0.654c-5.52413,0 -10.97053,-0.218 -16.3392,-0.654c-5.24613,-0.426 -10.33943,-1.054 -15.2799,-1.884c-4.8768,-0.81867 -9.52317,-1.82033 -13.9391,-3.005c-4.41913,-1.18533 -8.53027,-2.53267 -12.3334,-4.042c-3.8802,-1.54067 -7.37557,-3.225 -10.4861,-5.053c-3.26992,-1.92133 -6.07158,-3.977 -8.40498,-6.167c-2.56421,-2.40733 -4.53762,-4.952 -5.92025,-7.634c-1.55138,-3.01 -2.32707,-6.11033 -2.32707,-9.301c0,-3.18867 0.77583,-6.288 2.32749,-9.298c1.38265,-2.68133 3.35603,-5.22533 5.92012,-7.632c2.33332,-2.19 5.13482,-4.24567 8.40449,-6.167c3.11053,-1.828 6.6058,-3.51233 10.4858,-5.053c3.80327,-1.51 7.91437,-2.858 12.3333,-4.044c4.41613,-1.18467 9.06253,-2.18667 13.9392,-3.006c4.94073,-0.83 10.0341,-1.45833 15.2801,-1.885c5.36893,-0.43667 10.81543,-0.655 16.3395,-0.655c5.52407,0 10.97057,0.21833 16.3395,0.655c5.24633,0.42667 10.33983,1.055 15.2805,1.885c4.876,0.81933 9.52233,1.82133 13.939,3.006c4.41867,1.186 8.52967,2.534 12.333,4.044c3.88,1.54067 7.37533,3.225 10.486,5.053c3.26933,1.92133 6.07067,3.977 8.404,6.167c2.56467,2.40667 4.53833,4.95067 5.921,7.632c1.55133,3.01 2.327,6.10933 2.327,9.298z"
  29 + />
  30 + <g opacity="1" transform="translate(6.92041015625 0) rotate(0)">
  31 + <g id="路径 19" filter="url(#decorates10_filter_6)">
  32 + <path
  33 + id="路径 19"
  34 + fill-rule="evenodd"
  35 + fill="url(#linear_3)"
  36 + opacity="1"
  37 + d="M71.5435 163.952L143.713 22.3718L141.443 21.6018L71.5435 47.4118L71.5435 163.952Z"
  38 + />
  39 + </g>
  40 + <g id="路径 19" filter="url(#decorates10_filter_7)">
  41 + <path
  42 + id="路径 19"
  43 + fill-rule="evenodd"
  44 + fill="url(#linear_4)"
  45 + opacity="1"
  46 + d="M0 22.3765L72.17 163.956L72.17 47.4065L0 22.3765Z"
  47 + />
  48 + </g>
  49 + <g id="路径 22" filter="url(#decorates10_filter_8)">
  50 + <path
  51 + id="路径 22"
  52 + fill-rule="evenodd"
  53 + fill="url(#linear_5)"
  54 + opacity="1"
  55 + d="M72.1 49.02L143.71 22.38L72.1 0L0 22.38L72.1 49.02Z"
  56 + />
  57 + </g>
  58 + </g>
  59 + </g>
  60 + </g>
  61 + <defs>
  62 + <linearGradient
  63 + id="decorates10_linear_0"
  64 + x1="50%"
  65 + y1="10.347697845478384%"
  66 + x2="51%"
  67 + y2="97.23011363636364%"
  68 + gradientUnits="objectBoundingBox"
  69 + >
  70 + <stop offset="0" :stop-color="attribute.colors[0]" stop-opacity="1" />
  71 + <stop offset="1" :stop-color="attribute.colors[1]" stop-opacity="0" />
  72 + </linearGradient>
  73 + <linearGradient
  74 + id="decorates10_linear_1"
  75 + x1="50%"
  76 + y1="11.147280092598066%"
  77 + x2="51%"
  78 + y2="39.858217592598066%"
  79 + gradientUnits="objectBoundingBox"
  80 + >
  81 + <stop offset="0" :stop-color="attribute.colors[2]" stop-opacity="0.15" />
  82 + <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" />
  83 + </linearGradient>
  84 + <linearGradient
  85 + id="decorates10_linear_2"
  86 + x1="50%"
  87 + y1="11.147280092598066%"
  88 + x2="51%"
  89 + y2="39.858217592598066%"
  90 + gradientUnits="objectBoundingBox"
  91 + >
  92 + <stop offset="0" :stop-color="attribute.colors[4]" stop-opacity="0.15" />
  93 + <stop offset="1" :stop-color="attribute.colors[5]" stop-opacity="1" />
  94 + </linearGradient>
  95 + <linearGradient
  96 + id="linear_3"
  97 + x1="50%"
  98 + y1="0%"
  99 + x2="51%"
  100 + y2="98.39106206293707%"
  101 + gradientUnits="objectBoundingBox"
  102 + >
  103 + <stop offset="0" :stop-color="attribute.colors[6]" stop-opacity="1" />
  104 + <stop offset="1" :stop-color="attribute.colors[7]" stop-opacity="1" />
  105 + </linearGradient>
  106 + <filter
  107 + id="decorates10_filter_6"
  108 + x="64.54345703125"
  109 + y="7.601806640625"
  110 + width="86.16995468640405"
  111 + height="170.3541424414455"
  112 + filterUnits="userSpaceOnUse"
  113 + color-interpolation-filters="sRGB"
  114 + >
  115 + <feFlood flood-opacity="0" result="feFloodId" />
  116 + <feColorMatrix
  117 + in="SourceAlpha"
  118 + type="matrix"
  119 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  120 + result="hardAlpha"
  121 + />
  122 +
  123 + <feOffset dx="0" dy="7" />
  124 + <feGaussianBlur stdDeviation="3.5" />
  125 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  126 + <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
  127 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  128 + <feBlend mode="normal" in="SourceGraphic" in2="decorates10_filter_6" result="shape" />
  129 + </filter>
  130 + <linearGradient
  131 + id="linear_4"
  132 + x1="50%"
  133 + y1="0%"
  134 + x2="51%"
  135 + y2="98.39106206293707%"
  136 + gradientUnits="objectBoundingBox"
  137 + >
  138 + <stop offset="0" :stop-color="attribute.colors[8]" stop-opacity="1" />
  139 + <stop offset="1" :stop-color="attribute.colors[9]" stop-opacity="1" />
  140 + </linearGradient>
  141 + <filter
  142 + id="decorates10_filter_7"
  143 + x="-7"
  144 + y="8.37646484375"
  145 + width="86.16995468640518"
  146 + height="169.5796097887406"
  147 + filterUnits="userSpaceOnUse"
  148 + color-interpolation-filters="sRGB"
  149 + >
  150 + <feFlood flood-opacity="0" result="feFloodId" />
  151 + <feColorMatrix
  152 + in="SourceAlpha"
  153 + type="matrix"
  154 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  155 + result="hardAlpha"
  156 + />
  157 +
  158 + <feOffset dx="0" dy="7" />
  159 + <feGaussianBlur stdDeviation="3.5" />
  160 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  161 + <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
  162 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  163 + <feBlend mode="normal" in="SourceGraphic" in2="decorates10_filter_7" result="shape" />
  164 + </filter>
  165 + <linearGradient
  166 + id="linear_5"
  167 + x1="50%"
  168 + y1="0%"
  169 + x2="51%"
  170 + y2="98.39106206293707%"
  171 + gradientUnits="objectBoundingBox"
  172 + >
  173 + <stop offset="0" :stop-color="attribute.colors[10]" stop-opacity="1" />
  174 + <stop offset="1" :stop-color="attribute.colors[11]" stop-opacity="1" />
  175 + </linearGradient>
  176 + <filter
  177 + id="decorates10_filter_8"
  178 + x="-7"
  179 + y="-14"
  180 + width="157.7133980582524"
  181 + height="77.01986802184467"
  182 + filterUnits="userSpaceOnUse"
  183 + color-interpolation-filters="sRGB"
  184 + >
  185 + <feFlood flood-opacity="0" result="feFloodId" />
  186 + <feColorMatrix
  187 + in="SourceAlpha"
  188 + type="matrix"
  189 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  190 + result="hardAlpha"
  191 + />
  192 +
  193 + <feOffset dx="0" dy="7" />
  194 + <feGaussianBlur stdDeviation="3.5" />
  195 + <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
  196 + <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
  197 + <feBlend mode="normal" in2="filter_feFlood" result="filter_feFlood_1" />
  198 + <feBlend mode="normal" in="SourceGraphic" in2="decorates10_filter_8" result="shape" />
  199 + </filter>
  200 + </defs>
  201 + </svg>
  202 + </div>
  203 +</template>
  204 +<script setup lang="ts">
  205 +import { PropType, toRefs } from 'vue'
  206 +import { CreateComponentType } from '@/packages/index.d'
  207 +
  208 +const props = defineProps({
  209 + chartConfig: {
  210 + type: Object as PropType<CreateComponentType>,
  211 + required: true
  212 + }
  213 +})
  214 +
  215 +const { attribute } = toRefs(props.chartConfig.option)
  216 +
  217 +const { w, h } = toRefs(props.chartConfig.attr)
  218 +</script>
  219 +
  220 +<style lang="scss" scoped>
  221 +.go-content-box {
  222 + width: v-bind('w+"px"');
  223 + height: v-bind('h+"px"');
  224 + display: flex;
  225 + align-items: center;
  226 + justify-content: center;
  227 +}
  228 +</style>
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Subtitle4Config } 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 + '#2AFFFF',
  12 + '#2AFFFF',
  13 + '#2affff',
  14 + '#2affff',
  15 + '#2affff',
  16 + '#2affff',
  17 + '#2affff',
  18 + '#2affff',
  19 + '#2affff',
  20 + '#2affff',
  21 + ],
  22 + fontSize: 20,
  23 + fontPos: {
  24 + x: 0,
  25 + y: 20
  26 + },
  27 + fontColor: '#2AFFFF'
  28 + }
  29 +}
  30 +
  31 +export default class Config extends PublicConfigClass implements CreateComponentType {
  32 + public key = Subtitle4Config.key
  33 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
  34 + public chartConfig = cloneDeep(Subtitle4Config)
  35 + public option = cloneDeep(option)
  36 +}
... ...
  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('Subtitle4',true)
  6 +
  7 +export const Subtitle4Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题4',
  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="subtitle4_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  12 + <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
  14 + </linearGradient>
  15 + </defs>
  16 + <g opacity="1" :transform="`translate(0 ${h / 2 - 10}) rotate(0 248 17.5)`">
  17 + <path
  18 + id="路径 13"
  19 + :style="{ stroke: attribute.linearColors[2], strokeWidth: 1, strokeOpacity: 1 }"
  20 + :transform="`translate(8 12) rotate(0 243.5 8)`"
  21 + :d="`M0,0 L14.01,16 L${w},16`"
  22 + />
  23 + <g opacity="1" transform="translate(28 0) rotate(0 46 13)">
  24 + <text>
  25 + <tspan
  26 + :x="attribute.fontPos.x"
  27 + :y="attribute.fontPos.y"
  28 + :font-size="attribute.fontSize"
  29 + line-height="0"
  30 + :fill="attribute.fontColor"
  31 + opacity="1"
  32 + font-family="YouSheBiaoTiHei"
  33 + letter-spacing="0"
  34 + >
  35 + {{ dataset }}
  36 + </tspan>
  37 + </text>
  38 + </g>
  39 + <path
  40 + id="圆形 15"
  41 + fill-rule="evenodd"
  42 + :style="{ fill: attribute.linearColors[3] }"
  43 + transform="translate(6 10) rotate(0 2.5 2.5)"
  44 + opacity="1"
  45 + 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 "
  46 + />
  47 + <path
  48 + id="圆形 15"
  49 + :style="{ stroke: attribute.linearColors[4], strokeWidth: 0.5, strokeOpacity: 0.5 }"
  50 + transform="translate(3 7) rotate(0 5.5 5.5)"
  51 + 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 "
  52 + />
  53 + <path
  54 + id="圆形 15"
  55 + :style="{ stroke: attribute.linearColors[5], strokeWidth: 0.5, strokeOpacity: 0.19 }"
  56 + transform="translate(0 4) rotate(0 8.5 8.5)"
  57 + 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 "
  58 + />
  59 + <path
  60 + id="圆形 16"
  61 + fill-rule="evenodd"
  62 + :style="{ fill: attribute.linearColors[6] }"
  63 + transform="translate(2.5 12) rotate(0 1 1)"
  64 + opacity="1"
  65 + 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 "
  66 + />
  67 + <path
  68 + id="圆形 16"
  69 + fill-rule="evenodd"
  70 + :style="{ fill: attribute.linearColors[7] }"
  71 + transform="translate(12.5 12) rotate(0 1 1)"
  72 + opacity="1"
  73 + 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 "
  74 + />
  75 + <path
  76 + id="圆形 16"
  77 + fill-rule="evenodd"
  78 + :style="{ fill: attribute.linearColors[8] }"
  79 + transform="translate(8 6.5) rotate(0 1 1)"
  80 + opacity="1"
  81 + 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 "
  82 + />
  83 + <path
  84 + id="圆形 17"
  85 + fill-rule="evenodd"
  86 + :style="{ fill: attribute.linearColors[9] }"
  87 + :transform="`translate(${w - 5} 26) rotate(0 2 2)`"
  88 + opacity="1"
  89 + 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 "
  90 + />
  91 + <path
  92 + id="矩形 44"
  93 + fill-rule="evenodd"
  94 + fill="url(#subtitle4_linear_0)"
  95 + transform="translate(23 30) rotate(0 110.5 2.5)"
  96 + opacity="1"
  97 + :d="`M5,5 L${w / 2},5 L${w / 2},0 L0,0 L5,5 Z `"
  98 + />
  99 + </g>
  100 + </svg>
  101 + </div>
  102 +</template>
  103 +<script setup lang="ts">
  104 +import { PropType, toRefs } from 'vue'
  105 +import { CreateComponentType } from '@/packages/index.d'
  106 +
  107 +const props = defineProps({
  108 + chartConfig: {
  109 + type: Object as PropType<CreateComponentType>,
  110 + required: true
  111 + }
  112 +})
  113 +
  114 +const { dataset, attribute } = toRefs(props.chartConfig.option)
  115 +
  116 +const { w, h } = toRefs(props.chartConfig.attr)
  117 +</script>
  118 +
  119 +<style lang="scss" scoped>
  120 +.go-content-box {
  121 + width: v-bind('w+"px"');
  122 + height: v-bind('h+"px"');
  123 + display: flex;
  124 + align-items: center;
  125 + justify-content: center;
  126 +}
  127 +</style>
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Subtitle5Config } 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 + '#060F1E',
  12 + '#032E52',
  13 + '#060F1E',
  14 + '#2affff',
  15 + '#2affff',
  16 + '#2affff',
  17 + '#2affff',
  18 + '#2affff',
  19 + '#2affff',
  20 + '#2affff',
  21 + '#2affff',
  22 + '#2affff',
  23 + '#2affff',
  24 + '#2affff',
  25 + '#2affff',
  26 + '#2affff',
  27 + '#2affff'
  28 + ],
  29 + fontSize: 20,
  30 + fontPos: {
  31 + x: 0,
  32 + y: 20
  33 + },
  34 + fontColor: '#2AFFFF'
  35 + }
  36 +}
  37 +
  38 +export default class Config extends PublicConfigClass implements CreateComponentType {
  39 + public key = Subtitle5Config.key
  40 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
  41 + public chartConfig = cloneDeep(Subtitle5Config)
  42 + public option = cloneDeep(option)
  43 +}
... ...
  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('Subtitle5',true)
  6 +
  7 +export const Subtitle5Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题5',
  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="subtitle5_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="0.498" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  14 + <stop offset="1" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
  15 + </linearGradient>
  16 + <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
  17 + <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  18 + <stop offset="0.5313" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
  19 + <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  20 + </linearGradient>
  21 + <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
  22 + <stop offset="0" :stop-color="attribute.linearColors[6]" stop-opacity="0" />
  23 + <stop offset="0.5313" :stop-color="attribute.linearColors[7]" stop-opacity="1" />
  24 + <stop offset="0.9988" :stop-color="attribute.linearColors[8]" stop-opacity="0" />
  25 + </linearGradient>
  26 + <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  27 + <stop offset="0" :stop-color="attribute.linearColors[9]" stop-opacity="1" />
  28 + <stop offset="1" :stop-color="attribute.linearColors[10]" stop-opacity="0" />
  29 + </linearGradient>
  30 + <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
  31 + <stop offset="0" :stop-color="attribute.linearColors[11]" stop-opacity="1" />
  32 + <stop offset="1" :stop-color="attribute.linearColors[12]" stop-opacity="0" />
  33 + </linearGradient>
  34 + </defs>
  35 + <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
  36 + <path
  37 + id="矩形 23"
  38 + fill-rule="evenodd"
  39 + fill="url(#subtitle5_linear_0)"
  40 + transform="translate(0 0) rotate(0 246 15)"
  41 + opacity="1"
  42 + :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`"
  43 + />
  44 + <g opacity="1" :transform="`translate(${w / 2 - 101 / 2 + 10} ${h / 2 - 10}) rotate(0 46 13)`">
  45 + <text>
  46 + <tspan
  47 + :x="attribute.fontPos.x"
  48 + :y="attribute.fontPos.y"
  49 + :font-size="attribute.fontSize"
  50 + line-height="0"
  51 + :fill="attribute.fontColor"
  52 + opacity="1"
  53 + font-family="YouSheBiaoTiHei"
  54 + letter-spacing="0"
  55 + >
  56 + {{ dataset }}
  57 + </tspan>
  58 + </text>
  59 + </g>
  60 + <path
  61 + id="矩形 25"
  62 + fill-rule="evenodd"
  63 + fill="url(#subtitle5_linear_1)"
  64 + :transform="`translate(0 ${h / 2 - 13 / 2}) rotate(0 0.5 6.5)`"
  65 + opacity="1"
  66 + d="M0,13L1,13L1,0L0,0L0,13Z "
  67 + />
  68 + <path
  69 + id="矩形 25"
  70 + fill-rule="evenodd"
  71 + fill="url(#subtitle5_linear_2)"
  72 + :transform="`translate(${w - 1} ${h / 2 - 13 / 2}) rotate(0 0.5 6.5)`"
  73 + opacity="1"
  74 + d="M0,13L1,13L1,0L0,0L0,13Z "
  75 + />
  76 + <g
  77 + opacity="1"
  78 + :transform="`translate(${w / 2 - 100.74343013959287 - 40} ${
  79 + h / 2 - 6.236860279185521
  80 + }) rotate(0 21.62828493020359 8.763139720814422)`"
  81 + >
  82 + <path
  83 + id="矩形 26"
  84 + fill-rule="evenodd"
  85 + fill="url(#subtitle5_linear_3)"
  86 + transform="translate(14.256569860407183 8.274519052838347) rotate(0 14.5 0.5)"
  87 + opacity="1"
  88 + d="M0,1L29,1L29,0L0,0L0,1Z "
  89 + />
  90 + <path
  91 + id="多边形 1"
  92 + :style="{stroke: attribute.linearColors[13], strokeWidth: 1,strokeOpacity: 1}"
  93 + transform="translate(2.348076211353317 2.3480762113533187) rotate(30 6.415063509461105 6.4150635094611035)"
  94 + d="M6.42,0L0.86,3.21L0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0Z "
  95 + />
  96 + <path
  97 + id="圆形 8"
  98 + fill-rule="evenodd"
  99 + :style="{ fill: attribute.linearColors[14] }"
  100 + transform="translate(6.763139720814309 6.763139720814425) rotate(0 2 2)"
  101 + opacity="1"
  102 + 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 "
  103 + />
  104 + </g>
  105 + <g
  106 + opacity="1"
  107 + :transform="`translate(${w / 2 + 90} ${
  108 + h / 2 - 6.240000000000009
  109 + }) rotate(0 21.62828493020359 8.763139720814422)`"
  110 + >
  111 + <path
  112 + id="矩形 26"
  113 + fill-rule="evenodd"
  114 + fill="url(#subtitle5_linear_4)"
  115 + transform="translate(0 8.274519052838347) rotate(0 14.5 0.5)"
  116 + opacity="1"
  117 + d="M0,0L0,1L29,1L29,0L0,0Z "
  118 + />
  119 + <path
  120 + id="多边形 1"
  121 + :style="{stroke: attribute.linearColors[15], strokeWidth: 1, strokeOpacity: 1}"
  122 + transform="translate(28.07836663013154 2.3480762113533187) rotate(-30 6.415063509461105 6.4150635094611035)"
  123 + d="M0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0L0.86,3.21L0.86,9.62Z "
  124 + />
  125 + <path
  126 + id="圆形 8"
  127 + fill-rule="evenodd"
  128 + :style="{ fill: attribute.linearColors[16] }"
  129 + transform="translate(32.49343013959276 6.763139720814425) rotate(0 2 2)"
  130 + opacity="1"
  131 + d="M2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4Z "
  132 + />
  133 + </g>
  134 + </g>
  135 + </svg>
  136 + </div>
  137 +</template>
  138 +<script setup lang="ts">
  139 +import { PropType, toRefs } from 'vue'
  140 +import { CreateComponentType } from '@/packages/index.d'
  141 +
  142 +const props = defineProps({
  143 + chartConfig: {
  144 + type: Object as PropType<CreateComponentType>,
  145 + required: true
  146 + }
  147 +})
  148 +
  149 +const { dataset, attribute } = toRefs(props.chartConfig.option)
  150 +
  151 +const { w, h } = toRefs(props.chartConfig.attr)
  152 +</script>
  153 +
  154 +<style lang="scss" scoped>
  155 +.go-content-box {
  156 + width: v-bind('w+"px"');
  157 + height: v-bind('h+"px"');
  158 + display: flex;
  159 + align-items: center;
  160 + justify-content: center;
  161 +}
  162 +</style>
... ...
  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>
... ...
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Subtitle8Config } 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 + '#2AFFFF',
  12 + '#2AFFFF',
  13 + '#2AFFFF',
  14 + '#2AFFFF',
  15 + '#0084ff',
  16 + '#0d4ea8',
  17 + '#4592ff',
  18 + '#ffcc33',
  19 + ],
  20 + fontSize: 20,
  21 + fontPos: {
  22 + x: 0,
  23 + y: 20
  24 + },
  25 + fontColor: '#2AFFFF'
  26 + }
  27 +}
  28 +
  29 +export default class Config extends PublicConfigClass implements CreateComponentType {
  30 + public key = Subtitle8Config.key
  31 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
  32 + public chartConfig = cloneDeep(Subtitle8Config)
  33 + public option = cloneDeep(option)
  34 +}
... ...
  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('Subtitle8',true)
  6 +
  7 +export const Subtitle8Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题8',
  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="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
  12 + <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
  14 + </linearGradient>
  15 + <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
  16 + <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0.5" />
  17 + <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  18 + </linearGradient>
  19 + <filter
  20 + id="subtitle8_filter_14"
  21 + x="482.00000000000006"
  22 + y="-2.4868995751603507e-14"
  23 + width="12"
  24 + height="5"
  25 + filterUnits="userSpaceOnUse"
  26 + color-interpolation-filters="sRGB"
  27 + >
  28 + <feFlood flood-opacity="0" result="BackgroundImageFix" />
  29 + <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" />
  30 + <feOffset dx="0" dy="1" />
  31 + <feGaussianBlur stdDeviation="1" />
  32 + <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" />
  33 + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_Shadow" />
  34 + <feBlend mode="normal" in="SourceGraphic" in2="effect1_Shadow" result="shape" />
  35 + </filter>
  36 + <filter
  37 + id="subtitle8_filter_16"
  38 + x="482.00000000000006"
  39 + y="28.999999999999975"
  40 + width="12"
  41 + height="4.9999999999999964"
  42 + filterUnits="userSpaceOnUse"
  43 + color-interpolation-filters="sRGB"
  44 + >
  45 + <feFlood flood-opacity="0" result="BackgroundImageFix" />
  46 + <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" />
  47 + <feOffset dx="0" dy="-1" />
  48 + <feGaussianBlur stdDeviation="1" />
  49 + <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" />
  50 + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_Shadow" />
  51 + <feBlend mode="normal" in="SourceGraphic" in2="effect1_Shadow" result="shape" />
  52 + </filter>
  53 + </defs>
  54 + <g opacity="1" transform="translate(-2.842170943040401e-14 0) rotate(0 246.00000000000003 16.999999999999773)">
  55 + <path
  56 + id="矩形 31"
  57 + fill-rule="evenodd"
  58 + :style="{ fill: attribute.linearColors[4] }"
  59 + transform="translate(17 1.9999999999999183) rotate(0 237.5 15)"
  60 + opacity="0.2"
  61 + :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `"
  62 + />
  63 + <g opacity="1" :transform="`translate(44.9999999999998 ${h / 2 - 26 / 2}) rotate(0 46 13)`">
  64 + <text>
  65 + <tspan
  66 + :x="attribute.fontPos.x"
  67 + :y="attribute.fontPos.y"
  68 + :font-size="attribute.fontSize"
  69 + line-height="0"
  70 + :fill="attribute.fontColor"
  71 + opacity="1"
  72 + font-family="YouSheBiaoTiHei"
  73 + letter-spacing="0"
  74 + >
  75 + {{ dataset }}
  76 + </tspan>
  77 + </text>
  78 + </g>
  79 + <path
  80 + id="矩形 32"
  81 + fill-rule="evenodd"
  82 + :style="{ fill: attribute.linearColors[5] }"
  83 + :transform="`translate(4.979184719828627 ${
  84 + h / 2 - 34 / 2 + 6
  85 + }) rotate(-45 12.020815280171146 12.020815280171146)`"
  86 + opacity="1"
  87 + 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 "
  88 + />
  89 + <rect
  90 + id="矩形 32"
  91 + :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 1 }"
  92 + :transform="`translate(4.979184719828627 ${
  93 + h / 2 - 34 / 2 + 6
  94 + }) rotate(-45 12.020815280171146 12.020815280171146)`"
  95 + x="0.5"
  96 + y="0.5"
  97 + rx="3.5"
  98 + width="23.04163056034229"
  99 + height="23.04163056034229"
  100 + />
  101 + <path
  102 + id="圆形 10"
  103 + fill-rule="evenodd"
  104 + :style="{ fill: attribute.linearColors[7] }"
  105 + :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12}) rotate(0 5 5)`"
  106 + opacity="1"
  107 + 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 "
  108 + />
  109 + <path
  110 + id="矩形 30"
  111 + fill-rule="evenodd"
  112 + fill="url(#subtitle8_linear_0)"
  113 + transform="translate(360 1.9999999999999183) rotate(0 66 0.5)"
  114 + opacity="1"
  115 + d="M0,0L0,1L132,1L132,0L0,0Z "
  116 + />
  117 + <path
  118 + id="矩形 30"
  119 + fill-rule="evenodd"
  120 + fill="url(#subtitle8_linear_1)"
  121 + :transform="`translate(360 ${h - 1.2}) rotate(0 66 0.5)`"
  122 + opacity="1"
  123 + d="M0,0L0,1L132,1L132,0L0,0Z "
  124 + />
  125 + </g>
  126 + </svg>
  127 + </div>
  128 +</template>
  129 +<script setup lang="ts">
  130 +import { PropType, toRefs } from 'vue'
  131 +import { CreateComponentType } from '@/packages/index.d'
  132 +
  133 +const props = defineProps({
  134 + chartConfig: {
  135 + type: Object as PropType<CreateComponentType>,
  136 + required: true
  137 + }
  138 +})
  139 +
  140 +const { dataset, attribute } = toRefs(props.chartConfig.option)
  141 +
  142 +const { w, h } = toRefs(props.chartConfig.attr)
  143 +</script>
  144 +
  145 +<style lang="scss" scoped>
  146 +.go-content-box {
  147 + width: v-bind('w+"px"');
  148 + height: v-bind('h+"px"');
  149 + display: flex;
  150 + align-items: center;
  151 + justify-content: center;
  152 +}
  153 +</style>
... ...
... ... @@ -28,6 +28,15 @@ import { Headline2Config } from '@/packages/components/external/Decorates/Headli
28 28 import { Subtitle1Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle1'
29 29 import { Subtitle2Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle2'
30 30 import { Subtitle3Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle3'
  31 +import { Subtitle4Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle4'
  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'
  35 +import { Subtitle8Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle8'
  36 +import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
  37 +import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
  38 +import { Decorates09Config } from '@/packages/components/external/Decorates/Decorates/Decorates09'
  39 +import { Decorates10Config } from '@/packages/components/external/Decorates/Decorates/Decorates10'
31 40
32 41 /**
33 42 * 重写动态注入
... ... @@ -44,6 +53,15 @@ export function useInjectLib(packagesList: EPackagesType) {
44 53 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle1Config)//小标题1
45 54 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle2Config)//小标题2
46 55 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle3Config)//小标题3
  56 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle4Config)//小标题4
  57 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle5Config)//小标题5
  58 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6
  59 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7
  60 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle8Config)//小标题8
  61 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
  62 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
  63 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates09Config)//新增装饰09
  64 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates10Config)//新增装饰10
47 65 //
48 66
49 67 //信息
... ...