简单海报系统架构方案设计文档

项目要求

参考泥石流海报 制作一个类似的海报生成系统，帮助当地商家更好的销售商品

需求分析：

需求描述了什么问题

一个可以简单拖拽或输入特定信息就可以生成Web页面，web页面经过审核后可以在线被分享浏览的系统
需要可视化的编辑器， 审核功能， 组件库; 作品统计

用户分析

1. 模板作品创作者
2. 模板使用者
3. 平台管理员

技术需求

前端工程化

统一数据格式

{
    // 作品
    work: {
        title: '作品标题',
        setting: { /* 一些可能的配置项，用不到就先预留 */ },
        props: { /* 页面 body 的一些设置，如背景色 */ },
        components: [
            // components 要用数组，有序结构

            // 单个 node 要符合常见的 vnode 格式
            {
                id: 'xxx', // 每个组件都有 id ，不重复
                name: '文本1',
                tag: 'text',
                attrs: { fontSize: '20px' },
                children: [
                    '文本1' // 文本内容，有时候放在 children ，有时候放在 attrs 或者 props ，没有标准，看实际情况来确定
                ]
            },
            {
                id: 'yyy',
                name: '图片1',
                tag: 'image',
                attrs: { src: 'xxx.png', width: '100px' },
                children: null
            },
        ]
    },

    // 画布当前选中的组件
    activeComponentId: 'xxx'
}

数据传递

模块划分

B端 h5-SSR
编辑器 biz-editor-server； biz-editor-fe
编辑器端制作发布作品、保存模板，并能查看作品的浏览、分享等数据，管理账户作品及模板等
H5 web
H5端用于显示成品作品，使用服务端渲染提高性能与用户体验，收集浏览及分享数据，发送到统计服务端
管理系统 admin-fe;admin-server
管理端管理作品，紧急下架，编辑器端用户管理，查看网站所有数据（用户数、浏览量、作品数量等）

架构图

扩展性保证

• 扩展组件
• 扩展编辑器功能
• 扩展页面信息
• 其他扩展功能

开发提效

• 组件平台
• 脚手架

运维保障