Commit 986418f8a9ee0bc1b41202a79d699a5f36d79577

Authored by fengwotao
1 parent ed04f44c

perf(external/Componse): 移除组合下的按钮

1 -import { PublicConfigClass } from '@/packages/public'  
2 -import { CreateComponentType } from '@/packages/index.d'  
3 -import { ButtonConfig } from './index'  
4 -import cloneDeep from 'lodash/cloneDeep'  
5 -  
6 -export const option = {  
7 - dataset: '默认',  
8 - /**  
9 - * Naive UI button部分属性  
10 - */  
11 - attribute:{  
12 - //尺寸  
13 - size:'medium',  
14 - //透明  
15 - ghost:false,  
16 - //加载  
17 - loading:false,  
18 - //自定义颜色  
19 - color:'#ffffff',  
20 - //文字背景  
21 - textColor:'black'  
22 - }  
23 -}  
24 -  
25 -export default class Config extends PublicConfigClass implements CreateComponentType {  
26 - public key = ButtonConfig.key  
27 - public chartConfig = cloneDeep(ButtonConfig)  
28 - public option = cloneDeep(option)  
29 -}  
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.textColor"></n-color-picker>  
9 - </SettingItem>  
10 - <SettingItem>  
11 - <n-button size="small" @click="optionData.attribute.textColor ='black'"> 恢复默认 </n-button>  
12 - </SettingItem>  
13 - </SettingItemBox>  
14 - <SettingItemBox name="属性">  
15 - <SettingItem name="颜色">  
16 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.color"></n-color-picker>  
17 - </SettingItem>  
18 - <SettingItem>  
19 - <n-button size="small" @click="optionData.attribute.color ='#ffffff'"> 恢复默认 </n-button>  
20 - </SettingItem>  
21 - <SettingItem name="是否透明">  
22 - <n-switch v-model:value="optionData.attribute.ghost" />  
23 - </SettingItem>  
24 - <SettingItem name="是否加载">  
25 - <n-switch v-model:value="optionData.attribute.loading" />  
26 - </SettingItem>  
27 - </SettingItemBox>  
28 - </CollapseItem>  
29 -</template>  
30 -  
31 -<script setup lang="ts">  
32 -import { PropType } from 'vue'  
33 -import { option } from './config'  
34 -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'  
35 -  
36 -defineProps({  
37 - optionData: {  
38 - type: Object as PropType<typeof option>,  
39 - required: true  
40 - }  
41 -})  
42 -</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('Button')  
7 -export const ButtonConfig: 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: 'button.png',  
17 -}  
1 -<template>  
2 - <div class="go-content-box">  
3 - <n-button class="content" @click="handleClick" v-bind={...attribute}>{{dataset}}</n-button>  
4 - </div>  
5 -</template>  
6 -<script setup lang="ts">  
7 -import { PropType, toRefs } from 'vue'  
8 -import { CreateComponentType } from '@/packages/index.d'  
9 -import {option as configOption} from './config'  
10 -  
11 -  
12 -const props = defineProps({  
13 - chartConfig: {  
14 - type: Object as PropType<CreateComponentType>,  
15 - required: true  
16 - }  
17 -})  
18 -  
19 -//修改默认宽高距离位置  
20 -props.chartConfig.attr.w = 100  
21 -props.chartConfig.attr.h = 50  
22 -props.chartConfig.attr.x = 200  
23 -props.chartConfig.attr.y = 200  
24 -  
25 -const { dataset,attribute }= toRefs(props.chartConfig.option) as unknown as typeof configOption  
26 -  
27 -const { w, h } = toRefs(props.chartConfig.attr)  
28 -  
29 -const handleClick=()=>{  
30 - attribute.loading=true  
31 - window['$message'].success('您点击了按钮')  
32 - attribute.loading=false  
33 -}  
34 -  
35 -  
36 -  
37 -</script>  
38 -  
39 -<style lang="scss" scoped>  
40 -.go-content-box{  
41 - display: flex;  
42 - align-items: center;  
43 - justify-content: center;  
44 - .content{  
45 - width:v-bind('w + "px"');  
46 - height:v-bind('h + "px"');  
47 - }  
48 -}  
49 -</style>  
1 import { Title1Config } from './Title1/index' 1 import { Title1Config } from './Title1/index'
2 import { Title2Config } from './Title2/index' 2 import { Title2Config } from './Title2/index'
3 import { Title3Config } from './Title3/index' 3 import { Title3Config } from './Title3/index'
4 -import { ButtonConfig } from './Button/index'  
5 import { CameraConfig } from './Camera/index' 4 import { CameraConfig } from './Camera/index'
6 5
7 -export default [Title1Config, Title2Config, Title3Config, CameraConfig, ButtonConfig] 6 +export default [Title1Config, Title2Config, Title3Config, CameraConfig]