简柏林 / thingskit-view · Commits

Commit 56fcbbb0ef440b01f840810d5b6fb83909e73658

Authored by fengwotao
1 parent 6405055f

fix(src/packages/): 小组件小标题新增小标题9

Inline Side-by-side
Showing 7 changed files with 266 additions and 2 deletions
@@ -17,7 +17,7 @@ export const option = { @@ -17,7 +17,7 @@ export const option = {
17 17
18 export default class Config extends PublicConfigClass implements CreateComponentType { 18 export default class Config extends PublicConfigClass implements CreateComponentType {
19 public key = Decorates07Config.key 19 public key = Decorates07Config.key
20 - public attr = { ...chartInitConfig, zIndex: 1, w: 230, h: 225 } 20 + public attr = { ...chartInitConfig, zIndex: 1, w: 200, h: 200 }
21 public chartConfig = cloneDeep(Decorates07Config) 21 public chartConfig = cloneDeep(Decorates07Config)
22 public option = cloneDeep(option) 22 public option = cloneDeep(option)
23 } 23 }
@@ -17,7 +17,7 @@ export const option = { @@ -17,7 +17,7 @@ export const option = {
17 17
18 export default class Config extends PublicConfigClass implements CreateComponentType { 18 export default class Config extends PublicConfigClass implements CreateComponentType {
19 public key = Decorates08Config.key 19 public key = Decorates08Config.key
20 - public attr = { ...chartInitConfig, zIndex: 1, w: 390, h: 400 } 20 + public attr = { ...chartInitConfig, zIndex: 1, w: 200, h: 200 }
21 public chartConfig = cloneDeep(Decorates08Config) 21 public chartConfig = cloneDeep(Decorates08Config)
22 public option = cloneDeep(option) 22 public option = cloneDeep(option)
23 } 23 }
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Subtitle9Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '我是标题',
  9 + attribute: {
  10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2387D9',
  13 + bgColor4:'#000F1B',
  14 + bgColor5:'#2affff',
  15 + bgColor6:'#ffcc33',
  16 + bgColor7:'#000f1b',
  17 + fontSize: 20,
  18 + fontPos: {
  19 + x: 0,
  20 + y: 20
  21 + },
  22 + fontColor: '#2AFFFF'
  23 + }
  24 +}
  25 +
  26 +export default class Config extends PublicConfigClass implements CreateComponentType {
  27 + public key = Subtitle9Config.key
  28 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
  29 + public chartConfig = cloneDeep(Subtitle9Config)
  30 + public option = cloneDeep(option)
  31 +}
  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 :name="`左边背景装饰`">
  24 + <SettingItem name="颜色">
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
  26 + </SettingItem>
  27 + <SettingItem>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#21649C'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`右边背景装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#060F1E'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`左边线装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#2387D9'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`上下边线装饰`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#000F1B'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`右边正方形装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#2affff'"> 恢复默认 </n-button>
  61 + </SettingItem>
  62 + </SettingItemBox>
  63 + <SettingItemBox :name="`左边图形装饰`">
  64 + <SettingItem name="颜色">
  65 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
  66 + </SettingItem>
  67 + <SettingItem>
  68 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#ffcc33'"> 恢复默认 </n-button>
  69 + </SettingItem>
  70 + </SettingItemBox>
  71 + <SettingItemBox :name="`左边图形边框装饰`">
  72 + <SettingItem name="颜色">
  73 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor7"></n-color-picker>
  74 + </SettingItem>
  75 + <SettingItem>
  76 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#000f1b'"> 恢复默认 </n-button>
  77 + </SettingItem>
  78 + </SettingItemBox>
  79 + </CollapseItem>
  80 +</template>
  81 +
  82 +<script setup lang="ts">
  83 +import { PropType } from 'vue'
  84 +import { option } from './config'
  85 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  86 +
  87 +defineProps({
  88 + optionData: {
  89 + type: Object as PropType<typeof option>,
  90 + required: true
  91 + }
  92 +})
  93 +</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('Subtitle9',true)
  6 +
  7 +export const Subtitle9Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题9',
  12 + category: ChatCategoryEnum.SUBTITLE,
  13 + categoryName: ChatCategoryEnumName.SUBTITLE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'title8.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="subtitle9_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
  14 + </linearGradient>
  15 + <linearGradient id="subtitle9_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  16 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  17 + <stop offset="1" :stop-color="attribute.bgColor4" stop-opacity="1" />
  18 + </linearGradient>
  19 + </defs>
  20 + <g opacity="1" transform="translate(0 0) rotate(0 247.5 17.5)">
  21 + <path
  22 + id="矩形 8"
  23 + fill-rule="evenodd"
  24 + fill="url(#subtitle9_linear_0)"
  25 + transform="translate(1.0040567951318458 0) rotate(0 246.99797160243406 17.5)"
  26 + opacity="1"
  27 + :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h}Z`"
  28 + />
  29 + <rect
  30 + id="矩形 8"
  31 + style="stroke: url(#subtitle9_linear_1); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
  32 + transform="translate(1.0040567951318458 0) rotate(0 246.99797160243406 17.5)"
  33 + x="0.5"
  34 + y="0.5"
  35 + rx="0"
  36 + :width="w"
  37 + :height="h-1"
  38 + />
  39 + <path
  40 + id="矩形 10"
  41 + fill-rule="evenodd"
  42 + :style="{fill:attribute.bgColor5}"
  43 + :transform="`translate(${w-3} ${h/2-3.01/2-16/2}) rotate(0 1.5060851926977687 1.75)`"
  44 + opacity="0.5"
  45 + d="M0,3.5L3.01,3.5L3.01,0L0,0L0,3.5Z "
  46 + />
  47 + <path
  48 + id="矩形 10"
  49 + fill-rule="evenodd"
  50 + :style="{fill:attribute.bgColor5}"
  51 + :transform="`translate(${w-3} ${h/2-3.01/2-5/2}) rotate(0 1.5060851926977687 1.75)`"
  52 + opacity="1"
  53 + d="M0,3.5L3.01,3.5L3.01,0L0,0L0,3.5Z "
  54 + />
  55 + <path
  56 + id="矩形 10"
  57 + fill-rule="evenodd"
  58 + :style="{fill:attribute.bgColor5}"
  59 + :transform="`translate(${w-3} ${h/2-3.01/2+7/2}) rotate(0 1.5060851926977687 1.75)`"
  60 + opacity="0.5"
  61 + d="M0,3.5L3.01,3.5L3.01,0L0,0L0,3.5Z "
  62 + />
  63 + <g opacity="1" :transform="`translate(13.052738336713995 ${h/2-26/2}) rotate(0 46.5 15.5)`">
  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="矩形 9"
  81 + fill-rule="evenodd"
  82 + :style="{fill:attribute.bgColor6}"
  83 + :transform="`translate(0 ${h/2-21/2}) rotate(0 2.5101419878296145 10.5)`"
  84 + opacity="1"
  85 + d="M0,21L1.02,21C3.23,21 5.02,19.21 5.02,17L5.02,4C5.02,1.79 3.23,0 1.02,0L0,0L0,21Z "
  86 + />
  87 + <path
  88 + id="矩形 9"
  89 + :style="{stroke:attribute.bgColor7,strokeWidth: 1,strokeOpacity: 1}"
  90 + :transform="`translate(0 ${h/2-21/2}) rotate(0 2.5101419878296145 10.5)`"
  91 + d="M0,21L1.02,21C3.23,21 5.02,19.21 5.02,17L5.02,4C5.02,1.79 3.23,0 1.02,0L0,0L0,21Z "
  92 + />
  93 + </g>
  94 + </svg>
  95 + </div>
  96 +</template>
  97 +<script setup lang="ts">
  98 +import { PropType, toRefs } from 'vue'
  99 +import { CreateComponentType } from '@/packages/index.d'
  100 +
  101 +const props = defineProps({
  102 + chartConfig: {
  103 + type: Object as PropType<CreateComponentType>,
  104 + required: true
  105 + }
  106 +})
  107 +
  108 +const { dataset, attribute } = toRefs(props.chartConfig.option)
  109 +
  110 +const { w, h } = toRefs(props.chartConfig.attr)
  111 +</script>
  112 +
  113 +<style lang="scss" scoped>
  114 +.go-content-box {
  115 + width: v-bind('w+"px"');
  116 + height: v-bind('h+"px"');
  117 + display: flex;
  118 + align-items: center;
  119 + justify-content: center;
  120 +}
  121 +</style>
@@ -34,6 +34,7 @@ import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtit @@ -34,6 +34,7 @@ import { Subtitle5Config } from '@/packages/components/external/Decorates/Subtit
34 import { Subtitle6Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle6' 34 import { Subtitle6Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle6'
35 import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle7' 35 import { Subtitle7Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle7'
36 import { Subtitle8Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle8' 36 import { Subtitle8Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle8'
  37 +import { Subtitle9Config } from '@/packages/components/external/Decorates/Subtitle/Subtitle9'
37 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07' 38 import { Decorates07Config } from '@/packages/components/external/Decorates/Decorates/Decorates07'
38 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08' 39 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
39 import { Decorates09Config } from '@/packages/components/external/Decorates/Decorates/Decorates09' 40 import { Decorates09Config } from '@/packages/components/external/Decorates/Decorates/Decorates09'
@@ -65,6 +66,7 @@ export function useInjectLib(packagesList: EPackagesType) { @@ -65,6 +66,7 @@ export function useInjectLib(packagesList: EPackagesType) {
65 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6 66 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle6Config)//小标题6
66 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7 67 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle7Config)//小标题7
67 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle8Config)//小标题8 68 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle8Config)//小标题8
  69 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Subtitle9Config)//小标题9
68 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07 70 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates07Config)//新增装饰07
69 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08 71 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates08Config)//新增装饰08
70 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates09Config)//新增装饰09 72 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates09Config)//新增装饰09