Commit fb6115782cdbb5a316fd03854941657d50b799b2

Authored by fengwotao
1 parent e42dc58e

perf(external/Componse): 移除组合下的小标题2

1   -import { PublicConfigClass } from '@/packages/public'
2   -import { CreateComponentType } from '@/packages/index.d'
3   -import { TitleConfig } from './index'
4   -import cloneDeep from 'lodash/cloneDeep'
5   -
6   -export const option = {
7   - dataset: '我是标题',
8   - attribute: {
9   - titleColor: '#fff',
10   - titleSize: 16,
11   - svg_7: 'blue',
12   - svg_8: 'red',
13   - svg_16: 'red',
14   - svg_14: 'red',
15   - svg_21: 'red',
16   - svg_7_opacity: 1,
17   - svg_8_opacity: 1,
18   - svg_16_opacity: 1,
19   - svg_14_opacity: 1,
20   - linearGradient: {
21   - stop_color1: '#447799',
22   - stop_color2: '#224488',
23   - svg_21_opacity1: 1,
24   - svg_21_opacity2: 1,
25   - }
26   - }
27   -}
28   -
29   -export default class Config extends PublicConfigClass implements CreateComponentType {
30   - public key = TitleConfig.key
31   - public chartConfig = cloneDeep(TitleConfig)
32   - public option = cloneDeep(option)
33   -}
1   -<template>
2   - <CollapseItem name="配置" :expanded="true">
3   - <SettingItemBox name="文字">
4   - <SettingItem name="内容">
5   - <n-input size="small" v-model:value="optionData.dataset"></n-input>
6   - </SettingItem>
7   - <SettingItem name="颜色">
8   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.titleColor"></n-color-picker>
9   - </SettingItem>
10   - <SettingItem>
11   - <n-button size="small" @click="optionData.attribute.titleColor ='#fff'"> 恢复默认 </n-button>
12   - </SettingItem>
13   - <SettingItem name="大小">
14   - <n-input-number v-model:value="optionData.attribute.titleSize" size="small" placeholder="大小"></n-input-number>
15   - </SettingItem>
16   - </SettingItemBox>
17   - <SettingItemBox name="左边装饰">
18   - <SettingItem name="颜色">
19   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_16"></n-color-picker>
20   - </SettingItem>
21   - <SettingItem name="透明度">
22   - <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_16_opacity" size="small" placeholder="透明度1"></n-input-number>
23   - </SettingItem>
24   - </SettingItemBox>
25   - <SettingItemBox name="三角装饰">
26   - <SettingItem name="颜色">
27   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_14"></n-color-picker>
28   - </SettingItem>
29   - <SettingItem name="透明度">
30   - <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_14_opacity" size="small" placeholder="透明度1"></n-input-number>
31   - </SettingItem>
32   - </SettingItemBox>
33   - <SettingItemBox name="右边装饰">
34   - <SettingItem name="颜色1">
35   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_7"></n-color-picker>
36   - </SettingItem>
37   - <SettingItem name="颜色2">
38   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_8"></n-color-picker>
39   - </SettingItem>
40   - <SettingItem name="透明度1">
41   - <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_7_opacity" size="small" placeholder="透明度1"></n-input-number>
42   - </SettingItem>
43   - <SettingItem name="透明度2">
44   - <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_8_opacity" size="small" placeholder="透明度2"></n-input-number>
45   - </SettingItem>
46   - </SettingItemBox>
47   - <SettingItemBox name="装饰渐变">
48   - <SettingItem name="渐变颜色1">
49   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.linearGradient.stop_color1"></n-color-picker>
50   - </SettingItem>
51   - <SettingItem name="渐变颜色2">
52   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.linearGradient.stop_color2"></n-color-picker>
53   - </SettingItem>
54   - <SettingItem name="透明度1">
55   - <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.linearGradient.svg_21_opacity1" size="small" placeholder="透明度1"></n-input-number>
56   - </SettingItem>
57   - <SettingItem name="透明度2">
58   - <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.linearGradient.svg_21_opacity2" size="small" placeholder="透明度1"></n-input-number>
59   - </SettingItem>
60   - </SettingItemBox>
61   - </CollapseItem>
62   -</template>
63   -
64   -<script setup lang="ts">
65   -import { PropType } from 'vue'
66   -import { option } from './config'
67   -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
68   -
69   -defineProps({
70   - optionData: {
71   - type: Object as PropType<typeof option>,
72   - required: true
73   - }
74   -})
75   -</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('Title')
7   -export const TitleConfig: ConfigType = {
8   - key,
9   - chartKey,
10   - conKey,
11   - title: '小标题',
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 xmlns="http://www.w3.org/2000/svg" width="782" height="600">
4   - <defs>
5   - <defs>
6   - <linearGradient id="my-cool-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
7   - <stop offset="0%"
8   - :style="{ stopColor: attribute.linearGradient.stop_color1, stopOpacity: attribute.linearGradient.svg_21_opacity1 }" />
9   - <stop offset="100%"
10   - :style="{ stopColor: attribute.linearGradient.stop_color2, stopOpacity: attribute.linearGradient.svg_21_opacity2 }" />
11   - </linearGradient>
12   - </defs>
13   - </defs>
14   - <g>
15   - <rect stroke="#000" id="svg_6" height="0" width="2" y="189.5" x="523" fill="#fff" />
16   - <path :opacity="attribute.svg_7_opacity" transform="rotate(-137 422.766 284.992)" stroke="#000" id="svg_7"
17   - d="m412.87465,287.39672l3.95636,-4.80932l15.82545,0l-3.95636,4.80932l-15.82545,0z" :fill="attribute.svg_7" />
18   - <path :opacity="attribute.svg_8_opacity" transform="rotate(44 444.883 283.871)" stroke="#000" id="svg_8"
19   - d="m435.52609,286.39738l3.74294,-5.0534l14.97175,0l-3.74294,5.0534l-14.97175,0z" :fill="attribute.svg_8" />
20   - <rect id="svg_10" height="0" width="1" y="242.5" x="235" stroke="#000" fill="#fff" />
21   - <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" :font-size="attribute.titleSize"
22   - stroke-width="0" id="svg_12" y="290.5" x="214" stroke="#000" :fill="attribute.titleColor">{{ dataset }}</text>
23   - <path :opacity="attribute.svg_14_opacity" transform="rotate(90 198.922 284.168)" stroke="#000" id="svg_14"
24   - d="m193.42189,288.16843l5.50043,-8.00001l5.50043,8.00001l-11.00085,0z" stroke-width="0"
25   - :fill="attribute.svg_14" />
26   - <path id="svg_15" d="m259.7,311.34437l0.5,-1.00001l0.5,1.00001l-1.00001,0z" stroke-width="0" stroke="#000"
27   - fill="#000000" />
28   - <rect stroke="#000" id="svg_16" height="33" width="4" y="269" x="181" :fill="attribute.svg_16"
29   - :opacity="attribute.svg_16_opacity" />
30   - <rect id="svg_17" height="0" width="2" y="368.5" x="187" stroke="#000" fill="#6D97AB" />
31   - <rect id="svg_18" height="13" width="0" y="290.5" x="167" stroke="#000" fill="#6D97AB" />
32   - <rect id="svg_20" height="0" width="1" y="193.5" x="281" stroke="#000" fill="#6D97AB" />
33   - <path stroke="#000" id="svg_21" d="m184,269l299.00001,0l0,33l-299.00001,0l0,-33z" opacity="0.35"
34   - fill="url(#my-cool-gradient)" />
35   - </g>
36   -
37   - </svg>
38   - </div>
39   -</template>
40   -<script setup lang="ts">
41   -import { PropType, toRefs } from 'vue'
42   -import { CreateComponentType } from '@/packages/index.d'
43   -
44   -const props = defineProps({
45   - chartConfig: {
46   - type: Object as PropType<CreateComponentType>,
47   - required: true
48   - }
49   -})
50   -
51   -//修改默认宽高距离位置
52   -props.chartConfig.attr.w = 600
53   -props.chartConfig.attr.h = 100
54   -props.chartConfig.attr.x = 200
55   -props.chartConfig.attr.y = 200
56   -
57   -const { dataset, attribute } = toRefs(props.chartConfig.option)
58   -
59   -const { w, h } = toRefs(props.chartConfig.attr)
60   -
61   -
62   -</script>
63   -
64   -<style lang="scss" scoped>
65   -.go-content-box {
66   - display: flex;
67   - align-items: center;
68   - justify-content: center;
69   -
70   - .content {
71   - width: v-bind('w + "px"');
72   - height: v-bind('h + "px"');
73   - }
74   -}
75   -</style>