简柏林 / thingskit-view · Commits

Commit 908fc1f5cc55bc85cf81b9432396fb2e5eb22ffe

Authored by fengwotao
1 parent c1c4263a

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

Inline Side-by-side
Showing 5 changed files with 261 additions and 0 deletions
  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>
... ...
... ... @@ -32,6 +32,7 @@ import { Subtitle4Config } from '@/packages/components/external/Decorates/Subtit
32 32 import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle5'
33 33 import { Subtitle6Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle6'
34 34 import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle7'
  35 +import { Subtitle8Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle8'
35 36 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
36 37 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
37 38
... ... @@ -54,6 +55,7 @@ export function useInjectLib(packagesList: EPackagesType) {
54 55 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle5Config)//小标题5
55 56 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6
56 57 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7
  58 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle8Config)//小标题8
57 59 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
58 60 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
59 61 //
... ...