简柏林 / thingskit-view · Commits

Commit 52854df6ecf6a13df6c76b48e89c249af744496b

Authored by fengwotao
1 parent bffac482

perf(external/Componse): 新增组合下的小标题3

Inline Side-by-side
Showing 5 changed files with 241 additions and 2 deletions
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { Title3Config } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +
  6 +export const option = {
  7 + dataset: '我是标题',
  8 + attribute: {
  9 + linearColors: [
  10 + '#21649C',
  11 + '#060F1E',
  12 + '#2AFFFF',
  13 + '#2AFFFF',
  14 + '#2AFFFF',
  15 + '#2AFFFF',
  16 + '#2affff',
  17 + '#16d9d9',
  18 + '#2affff',
  19 + '#2affff',
  20 + '#2affff',
  21 + '#2affff'
  22 + ],
  23 + fontSize: 20,
  24 + fontPos: {
  25 + x: 0,
  26 + y: 20
  27 + },
  28 + fontColor: '#2AFFFF'
  29 + }
  30 +}
  31 +
  32 +export default class Config extends PublicConfigClass implements CreateComponentType {
  33 + public key = Title3Config.key
  34 + public chartConfig = cloneDeep(Title3Config)
  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="颜色">
  11 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  12 + </SettingItem>
  13 + <SettingItem name="x轴位置">
  14 + <n-input-number v-model:value="optionData.attribute.fontPos.x" />
  15 + </SettingItem>
  16 + <SettingItem name="y轴位置">
  17 + <n-input-number v-model:value="optionData.attribute.fontPos.y" />
  18 + </SettingItem>
  19 + </SettingItemBox>
  20 + <SettingItemBox
  21 + :name="`装饰颜色-${index + 1}`"
  22 + v-for="(item, index) in optionData.attribute.linearColors"
  23 + :key="index"
  24 + >
  25 + <SettingItem name="颜色">
  26 + <n-color-picker
  27 + size="small"
  28 + :modes="['hex']"
  29 + v-model:value="optionData.attribute.linearColors[index]"
  30 + ></n-color-picker>
  31 + </SettingItem>
  32 + <SettingItem>
  33 + <n-button
  34 + size="small"
  35 + @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
  36 + >
  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 +
  50 +defineProps({
  51 + optionData: {
  52 + type: Object as PropType<typeof option>,
  53 + required: true
  54 + }
  55 +})
  56 +</script>
  1 +import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
  2 +import { EPackagesCategoryEnum } from '@/packages/components/external/types'
  3 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  4 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  5 +
  6 +const { key, chartKey, conKey } = useWidgetKey('Title3')
  7 +export const Title3Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题3',
  12 + category: ChatCategoryEnum.MORE,
  13 + categoryName: ChatCategoryEnumName.MORE,
  14 + package: EPackagesCategoryEnum.COMPOSES,
  15 + chartFrame: ChartFrameEnum.NAIVE_UI,
  16 + image: 'dateTime.png'
  17 +}
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg :width="w" :height="h" fill="none">
  4 + <defs>
  5 + <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  6 + <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  8 + </linearGradient>
  9 + <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  10 + <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  12 + </linearGradient>
  13 + <linearGradient id="linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
  14 + <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
  15 + <stop offset="1" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  16 + </linearGradient>
  17 + </defs>
  18 + <g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)">
  19 + <path
  20 + id="矩形 16"
  21 + fill-rule="evenodd"
  22 + fill="url(#linear_0)"
  23 + transform="translate(6.249999895402425e-8 2) rotate(0 160 13)"
  24 + opacity="1"
  25 + :d="`M0,${h - 5} L${w},${h - 5} L${w},0 L0,0 L0,${h - 5} Z`"
  26 + />
  27 + <g opacity="1" :transform="`translate(34.0000000625 ${h / 2 - 26 / 2}) rotate(0 46 13)`">
  28 + <text>
  29 + <tspan
  30 + :x="attribute.fontPos.x"
  31 + :y="attribute.fontPos.y"
  32 + :font-size="attribute.fontSize"
  33 + line-height="0"
  34 + :fill="attribute.fontColor"
  35 + opacity="1"
  36 + font-family="YouSheBiaoTiHei"
  37 + letter-spacing="0"
  38 + >
  39 + {{ dataset }}
  40 + </tspan>
  41 + </text>
  42 + </g>
  43 + <path
  44 + id="路径 5"
  45 + style="stroke: url(#linear_1); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
  46 + transform="translate(6.249999895402425e-8 30) rotate(0 160 0)"
  47 + d="M0,0L320,0 "
  48 + />
  49 + <path
  50 + id="路径 5"
  51 + style="stroke: url(#linear_2); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
  52 + transform="translate(6.249999895402425e-8 0) rotate(0 160 0)"
  53 + d="M0,0L320,0 "
  54 + />
  55 + <path
  56 + id="路径 5"
  57 + :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
  58 + transform="translate(0 0.0005) rotate(0 2.000000062499999 0)"
  59 + d="M0,0L4,0 "
  60 + />
  61 + <path
  62 + id="路径 5"
  63 + :style="{ stroke: attribute.linearColors[11], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
  64 + :transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`"
  65 + d="M0,0 L4,0 "
  66 + />
  67 + <g opacity="1" :transform="`translate(10.0000000625 ${h / 2 - 18 / 2}) rotate(0 8.598076211353316 9)`">
  68 + <path
  69 + id="三角形 1"
  70 + fill-rule="evenodd"
  71 + :style="{ fill: attribute.linearColors[6] }"
  72 + transform="translate(4 0) rotate(0 6.598076211353316 4.5)"
  73 + opacity="1"
  74 + d="M2.8,9L13.2,9L0,0L2.8,9Z "
  75 + />
  76 + <path
  77 + id="三角形 1"
  78 + fill-rule="evenodd"
  79 + :style="{ fill: attribute.linearColors[7] }"
  80 + transform="translate(4 9) rotate(0 6.598076211353316 4.5)"
  81 + opacity="1"
  82 + d="M13.2,0L2.8,0L0,9L13.2,0Z "
  83 + />
  84 + <path
  85 + id="圆形 7"
  86 + fill-rule="evenodd"
  87 + :style="{ fill: attribute.linearColors[8] }"
  88 + transform="translate(0 7) rotate(0 2 2)"
  89 + opacity="1"
  90 + 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 "
  91 + />
  92 + </g>
  93 + <path
  94 + id="矩形 17"
  95 + fill-rule="evenodd"
  96 + :style="{ fill: attribute.linearColors[9] }"
  97 + transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)"
  98 + opacity="1"
  99 + :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`"
  100 + />
  101 + </g>
  102 + </svg>
  103 + </div>
  104 +</template>
  105 +<script setup lang="ts">
  106 +import { PropType, toRefs } from 'vue'
  107 +import { CreateComponentType } from '@/packages/index.d'
  108 +
  109 +const props = defineProps({
  110 + chartConfig: {
  111 + type: Object as PropType<CreateComponentType>,
  112 + required: true
  113 + }
  114 +})
  115 +
  116 +const { dataset, attribute } = toRefs(props.chartConfig.option)
  117 +
  118 +const { w, h } = toRefs(props.chartConfig.attr)
  119 +</script>
  120 +
  121 +<style lang="scss" scoped>
  122 +.go-content-box {
  123 + width: v-bind('w+"px"');
  124 + height: v-bind('h+"px"');
  125 + display: flex;
  126 + align-items: center;
  127 + justify-content: center;
  128 +}
  129 +</style>
1 -import { ButtonConfig } from './Button/index'  
2 import { Title1Config } from './Title1/index' 1 import { Title1Config } from './Title1/index'
3 import { Title2Config } from './Title2/index' 2 import { Title2Config } from './Title2/index'
  3 +import { Title3Config } from './Title3/index'
  4 +import { ButtonConfig } from './Button/index'
4 import { CameraConfig } from './Camera/index' 5 import { CameraConfig } from './Camera/index'
5 6
6 -export default [ButtonConfig, Title1Config, CameraConfig,Title2Config] 7 +export default [Title1Config, Title2Config, Title3Config, CameraConfig, ButtonConfig]