整体架构设计V1.0
需求背景
创建作品、发布作品、管理作品
范围
整体设计、架构设计
包括B端和编辑器、H5端、管理后台、独立组件库、自研统计服务，pv/uv统计，使用第三方统计服务（免费的）。
模块设计
模块拆分
B端和编辑器，比较复杂，前后端分离
H5端，考虑性能，使用SSR，只需要服务端
管理后台也前后端分离，分管理前端和管理后端
组件库分为业务组件库和组件平台
业务组件库渲染B端画布和H5页面，保证B端编辑器和H5内容和样式，即B端编辑器和H5的组件和渲染逻辑一致。组件平台创建、发布组件，支持业务组件库，方便组件扩展。
自研统计服务
模块关系图及各模块职责简要说明
自研统计服务
负责pv/uv之外的统计，pv/uv只是域名级别的访问统计，自研统计服务实现参数级别的统计。具备的功能
- 支持自定义事件统计，接受埋点统计请求（日志收集）
- 分析统计结果（日志分析）
- 提供Open API给使用方
为何自研：调研发现，第三方统计服务，若要满足上述功能，费用很贵。但统计服务是整个业务的输入环节，供公司运营使用，提供决策依据，比如从什么渠道投放广告达到收益和费用的平衡等 。有输入有输出，项目才能闭环，不能砍掉，所以只能自研。
核心数据结构
一个“作品”的数据结构
{
// 作品
work: {
title: '作品标题',
setting: {/* 一些可能的配置项，用不到就预留 */},
props: {/* 页面body的一些设置，如背景色等 */}，
components: [
// 单个node，要符合VNode规范
{
id: 'xxx',
name: '文本1',
tag: 'text',
attrs: { fontSize: 20px },
children: [
'文本1' // 文本内容，有时候放在attrs或props中，没有标准，看情况而定
]
},
{
id: 'yyy',
name: '图片1',
tag: 'image',
attrs: { src: 'xxx.png', width: '100px' },
children: null
}
]
},
// 画布当前选中的组件
activeComponentId: 'xxx'
}
使用vuex store的缓存数据，方便页面上各组件读写。
图层
使用 vuex getter计算得出，这个的getter和vue computed类似
{
layers () => {
store.work.components.map(c => {
return {
id: c.id,
name: c.name
}
})
}
}
数据结构设计的解释
- 使用vnode规范存储组件数据，vue本身也实现了VNode，使用VNode也符合vue特点。其方便组件扩展，增强页面dom节点的表述，增加数据结构的合理性并降低学习成本
- 使用数组存储组件，方便画布中的组件排序
- 不单独存储图层数据，规避图层和组件状态同步问题。这里的图层是若干组件的一个索引或者是给组件排序的一个列表，应该使用computed计算出图层的索引，满足较少数据源原则
- activeComponentId是画布和属性面板同步更新的重点，组件变了，图层就发生改变
- 重复一遍，尽量使用索引，避免数据冗余
问题（这个不属于技术方案设计文档的内容）：如何保证画布和属性面板是同步更新的？
如果要扩展一个图层面板，数据结构该怎么设计？
数据流转关系图
扩展性保证
扩展组件，当前数据结构层面可扩展，组件库层面扩展
组件库是独立的，按照已有组件规范方便扩展
数据结构上，也可以保证组件扩展
扩展编译器的功能，例如：组件隐藏、锁定、滑动翻页等，前两者在VNode中添加属性即可
扩展页面配置，vuex store setting
开发提效
- 脚手架
- 组件平台
运维保障 （后续补充）
- 线上服务和运维服务用什么
- 安全
- 监控和报警
- 服务扩展性：流量大时怎么解决
大厂自研，小厂使用第三方云服务，后续补充第三方云服务使用