Commit fb6115782cdbb5a316fd03854941657d50b799b2
1 parent
e42dc58e
perf(external/Componse): 移除组合下的小标题2
Showing
4 changed files
with
0 additions
and
200 deletions
src/packages/components/external/Composes/Mores/Title/config.ts
deleted
100644 → 0
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 | -} |
src/packages/components/external/Composes/Mores/Title/config.vue
deleted
100644 → 0
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> |
src/packages/components/external/Composes/Mores/Title/index.ts
deleted
100644 → 0
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 | -} |
src/packages/components/external/Composes/Mores/Title/index.vue
deleted
100644 → 0
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> |