使用 Next.js、 Prisma 和 PostgreSQL 全栈开发视频网站

通过上一篇文章，我们对乔巴乐高海报平台的整体架构有了初步的了解。今天我们深入到编辑器部分，对其中的难点和实现细节进行分析。

这是目前生产的编辑器页面：

不难看出和市面上大部分低代码平台一样，由三部分组成：左侧组件列表、中间画布区域、右侧属性区域。

大致操作流程就是拖动左侧的组件到中间的画布，选中组件，右侧属性面板就会展示与该组件关联的属性。编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成。

从中看出组件串联其中，在前面一篇文章中，我们大致分析了整体页面和组件的数据结构，但没有细化。抽取一下文字、图片、素材组件的通用特性：

• 尺寸属性（Size）* 宽度（width）* 高度（height）
• 填充属性（Padding）* 上填充（padding-top）* 右填充（padding-right）* 下填充（padding-bottom）* 左填充（padding-left）
• 视觉格式属性* 指定如何定位元素（position）* 指定所定位元素的上边缘的位置（top）* 指定所定位元素的右边缘的位置（right）* 指定所定位元素底边的位置（bottom）* 指定定位元素左边缘的位置（left）* 将一个或多个阴影应用于元素的框（box-shadow）
• 颜色属性（Color）* 透明度（opacity）
• 边框属性（Border）* 设置元素所有四个侧面的边框颜色（border-color）* 设置元素所有四个侧面的边框宽度（border-width）* 在元素的所有四个面上设置边框的样式（border-style）* 定义元素边界角的形状（border-radius）

除此之外，文字组件还具有以下属性：

• 字体属性(Fonts)* 定义元素的字体列表（font-family）* 定义文本的字体大小（font-size）* 定义文本的字体样式（font-style）* 指定文本的字体粗细（font-weight）
• 文字属性(Text)* 设置内联内容的水平对齐方式（text-align）* 指定添加到文本的装饰（text-decoration）* 设置文本行之间的高度（line-height）

图片组件还具有：

• 图片属性（Image）* 图片链接（src）

素材组件还具有：

• 背景属性(Background)* 定义元素的背景色（background-color）

我们将上面的操作流程拆解为三步：

• 1⃣️ 拖动左侧的组件到中间的画布
• 2⃣️ 选中组件，右侧属性面板就会展示与该组件关联的属性
• 3⃣️ 编辑右侧属性，画布中对应的组件样式就会同步更新

添加组件到画布

通过上一篇文章，我们知道编辑器整体的数据结构是这么设计的：

state:{ 
// 所有添加到画布中的组件数据 
componentData:[], 
} 

reducers:{ 
// 添加组件到componentData 
addComponentData(){}, 
// 编辑组件，更新componentData及curComponent 
editComponentData(){}, 
// 删除组件 
delComponentData(){} 
} 
1
2
3
4
5
6
7
8
9
10
11
12
13

那么从左侧组件列表添加组件到画布的操作其实就是向componentData中push一条组件数据。

这里主要是关注下组件列表要怎么设计：为了便于用户快速创建活动，组件列表最好是预设一些模板，其实就是针对文字、图片和素材分别提供一些已有的元素。这样当对应组件点击添加到画布时，对应就会commit一个mutation来修改store中的componentData。