web架构师编辑器内容-完成属性设置的优化

对于业务组件来说，其属性是有很多的，如果把所有属性都平铺在页面上，就会非常长，而且想要更改其中的某些属性，可能需要向下滚动很久才能找到，对于UI的交互不是很友好，需要对属性的不同特性进行分组。
改造前：
在这里插入图片描述
改造后：

先来看一下通用属性：

// defaultProps.ts
export interface CommonComponentProps {// actionsactionType: string;url: string;// sizeheight: string;width: string;paddingLeft: string;paddingRight: string;paddingTop: string;paddingBottom: string;// border typeborderStyle: string;borderColor: string;borderWidth: string;borderRadius: string;// shadow and opacityboxShadow: string;opacity: string;// position and x,yposition: string;left: string;top: string;right: string;
}

CommonComponentProps一开始就是按照不同的属性进行分类的，所以比较符合我们的一个需求。
首先，组件总属性分两大类：业务组件(独特属性)，通用属性(CommonComponentProps)

// 文本组件
export interface TextComponentProps extends CommonComponentProps {text: string;fontSize: string;fontFamily: string;fontWeight: string;fontStyle: string;textDecoration: string;lineHeight: string;textAlign: string;color: string;backgroundColor: string;
}
// 图片组件
export interface ImageComponentProps extends CommonComponentProps {src: string;
}

将组件通用属性分类分多个小类： size，border type，shadow…
然后创建一个新的组件 EditGroup，
<EditGroups :props="currentElement.props">
在EditGroup 中的目的就是 props 转换成数组的多项，每个数组对应一个选项卡:

[{text: '基础属性',// specialProps = Object.keys(props.props) - allNormalPropsitems: specialProps,},{text: '尺寸',items: [...]}
]

通用属性这里是定死的，我们手动添加这样的关系即可。

[{text: '尺寸',items: ['height', 'width', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']},...
]

数据的前期准备：
这里的属性需要使用默认属性完成一个混入，也就是将属性添加完整：

// 完成数据的一个混入
// defaultProps.ts
const imageDefaultProps: ImageComponentProps = {src: 'test.url',...commonDefaultProps
}
const textDefautlProps: TextComponentProps = {// basic props - font stylestext: "正文内容",fontSize: "14px",fontFamily: "",fontWeight: "normal",fontStyle: "normal",textDecoration: "none",lineHeight: "1",textAlign: "left",color: "#000000",backgroundColor: "",...commonDefaultProps,
}
// store.ts
export const testComponents: ComponentData[] = [
{ id: uuidv4(), name: 'l-text', layerName:'图层3', props: { ...textDefaultProps, text: 'hello3', fontSize: '15px', actionType: 'url', url: 'https://www.baidu.com', 'lineHeight': '3', textAlign: 'left', fontFamily: '' }},
{ id: uuidv4(), name: 'l-image', layerName:'图层4', props: { ...imageDefaultProps, src: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg', width: '100px' }},
]

propsMap 对应关系的继续添加，这里也要将对应关系添加完整。
业务组件 - 独特属性需要经过计算
其实就是所有属性的数组（全集）通用属性的数组（子集）求差集的得出的结果:
specialProps = Object.keys(props.props) - allNormalProps
然后将 specialProps 得出的内容，添加到数组的第一项去
最终循环数组得出对应的界面
代码实现：

将属性数据混入补充完整

export const testComponents: ComponentData[] = [{ id: uuidv4(), name: 'l-text', layerName:'图层1', props: { ...textDefaultProps, text: 'hello', fontSize: '20px', color: '#000000', 'lineHeight': '1', textAlign: 'left', fontFamily: '' }},{ id: uuidv4(), name: 'l-text', layerName:'图层2', props: { ...textDefaultProps, text: 'hello2', fontSize: '10px', fontWeight: 'bold', 'lineHeight': '2', textAlign: 'left', fontFamily: '' }},{ id: uuidv4(), name: 'l-text', layerName:'图层3', props: { ...textDefaultProps, text: 'hello3', fontSize: '15px', actionType: 'url', url: 'https://www.baidu.com', 'lineHeight': '3', textAlign: 'left', fontFamily: '' }},{ id: uuidv4(), name: 'l-image', layerName:'图层4', props: { ...imageDefaultProps, src: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg', width: '100px' }},
]

EditGroup.vue

<template><div class="edit-groups"><div v-for="item in newGroups" :key="item.text"><h1>{{item.text}}</h1><pre>{{item.items}}</pre></div></div>
</template><script lang="ts">
import { AllComponentProps } from 'lego-bricks-sea';
import { difference } from 'lodash'
import { defineComponent, PropType, computed } from 'vue';
export interface GroupProps {text: string;items: string[];
}
const defaultEditGroups: GroupProps[] = [{text: '尺寸',items: ['height','width','paddingLeft','paddingRight','paddingTop','paddingBottom',],},{text: '边框',items: ['borderStyle', 'borderColor', 'borderWidth', 'borderRadius'],},{text: '阴影与透明度',items: ['opacity', 'boxShadow'],},{text: '位置',items: ['left', 'top'],},{text: '事件功能',items: ['actionType', 'url'],},
];
export default defineComponent({props: {props: {type: Object as PropType<AllComponentProps>,required: true,},groups: {type: Array as PropType<GroupProps[]>,default: defaultEditGroups,},},setup(props) {const newGroups = computed(() => {const allNormalProps = props.groups.reduce((prev, current) => {return [...prev, ...current.items]}, [] as string[])const specialProps = difference(Object.keys(props.props), allNormalProps)return [{text: '基本属性',items: specialProps},...props.groups]})return {newGroups}},
});
</script><style></style>