简柏林 / thingskit-view · Commits

Commit df9f574932c41c6e6e0ae9e2937340f51004523a

Authored by fengwotao
1 parent 908fc1f5

perf(src/packages): 小组件新增装饰9和10

Inline Side-by-side
Showing 12 changed files with 576 additions and 5 deletions
... ... @@ -17,7 +17,7 @@ export const option = {
17 17
18 18 export default class Config extends PublicConfigClass implements CreateComponentType {
19 19 public key = Decorates07Config.key
20   - public attr = { ...chartInitConfig, zIndex: 1, w: 70, h: 180 }
  20 + public attr = { ...chartInitConfig, zIndex: 1, w: 230, h: 225 }
21 21 public chartConfig = cloneDeep(Decorates07Config)
22 22 public option = cloneDeep(option)
23 23 }
... ...
... ... @@ -3,8 +3,9 @@
3 3 <svg
4 4 xmlns="http://www.w3.org/2000/svg"
5 5 xmlns:xlink="http://www.w3.org/1999/xlink"
6   - :width="180"
7   - :height="180"
  6 + :width="w"
  7 + :height="h"
  8 + viewBox="0 0 180 180"
8 9 fill="none"
9 10 >
10 11 <g opacity="0.6" transform="translate(68 0) rotate(0)">
... ...
... ... @@ -3,8 +3,8 @@
3 3 <svg
4 4 xmlns="http://www.w3.org/2000/svg"
5 5 xmlns:xlink="http://www.w3.org/1999/xlink"
6   - :width="386"
7   - :height="485"
  6 + :width="w"
  7 + :height="h"
8 8 :viewBox="`0 0 386 435`"
9 9 fill="none"
10 10 >
... ...
  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>
... ...
... ... @@ -35,6 +35,8 @@ import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtit
35 35 import { Subtitle8Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle8'
36 36 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
37 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'
38 40
39 41 /**
40 42 * 重写动态注入
... ... @@ -58,6 +60,8 @@ export function useInjectLib(packagesList: EPackagesType) {
58 60 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle8Config)//小标题8
59 61 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
60 62 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
  63 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates09Config)//新增装饰09
  64 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates10Config)//新增装饰10
61 65 //
62 66
63 67 //信息
... ...