简柏林 / thingskit-view · Commits

Commit b2ae42f4c42137e8ee7e47ca236a8d6397f817eb

Authored by fengwotao
1 parent 30346660

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

Inline Side-by-side
Showing 5 changed files with 279 additions and 0 deletions
  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="subtitle_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="subtitle_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="subtitle_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="subtitle_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="subtitle_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(#subtitle_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(#subtitle_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(#subtitle_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(#subtitle_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(#subtitle_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>
... ...
... ... @@ -29,6 +29,7 @@ import { Subtitle1Config } from '@/packages/components/external/Decorates/Subtit
29 29 import { Subtitle2Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle2'
30 30 import { Subtitle3Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle3'
31 31 import { Subtitle4Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle4'
  32 +import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle5'
32 33 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
33 34 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
34 35
... ... @@ -48,6 +49,7 @@ export function useInjectLib(packagesList: EPackagesType) {
48 49 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle2Config)//小标题2
49 50 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle3Config)//小标题3
50 51 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle4Config)//小标题4
  52 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle5Config)//小标题5
51 53 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
52 54 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
53 55 //
... ...