整体架构设计v1.0

需求

https://www.yuque.com/imooc-lego/zlz87z

范围

整体设计，架构设计，没有细节

模块设计

特殊模块重点说明

1. 组件库，独立第三方，用于H5编辑器前端和后台前端
2. 自研统计服务

作品的数据结构

vuex store 集中管理

work: {
    name: '作品名称',
    id: 'xxx',
    config: {},
    props: {
        componnets: [
            {
                id: 'xxx',
                name: '文本'，
                tag: 'div',
                attrs: { color: '#000' },
                children: [
                    '文本1'
                ]
            }
        ],
    }
},
activeSelectComp: '当前选中的组件id'

数据流转关系图

图层layer通过computed计算得出

扩展性保证

扩展组件，数据结构层面

扩展编辑器的功能，如：隐藏、锁定

扩展页面的配置，config

开发提效

脚手架

组件平台

运维保障

线上服务和运维服务

安全

监控和报警

服务扩展性：流量大