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 1 import { Title1Config } from './Title1/index'
2 2 import { Title2Config } from './Title2/index'
3 3 import { Title3Config } from './Title3/index'
4   -import { ButtonConfig } from './Button/index'
5 4 import { CameraConfig } from './Camera/index'
6 5
7   -export default [Title1Config, Title2Config, Title3Config, CameraConfig, ButtonConfig]
  6 +export default [Title1Config, Title2Config, Title3Config, CameraConfig]
... ...