业务需求
基于业务功能的 h5 的可视化搭建场景，是面向产品和运营，快速搭建出活动页面，支持不断的调整运营策
实现思路
本质是实现一个JSON Schema 配置数据的工具，通过配置信息生成页面或通过打包工具打包成页面
{
"pageName":"一个活动页面",
"title":"",
componentList:[//页面相关组件列表
{//组件相关schema数据
"id":"组件id",
"componentId":"当前页面组件id",
"template":{}//组件配置相关信息字体颜色、背景颜色、字体大小
}
]
}
功能实现
- 组件schema
- FormRender实现
- 组件拖拽到iframe编辑区域
- 组件在iframe编辑区域拖换位置
制定组件schema
{
"id": "uuid 组件唯一id",
"name": "组件名称唯一",
"config": [{//FormRender 表单配置
"title": "导航类型",
"tag": "TabItem",//表单组件名称
"type": "string",
"key": "type",
"options": [{
"value": "1",
"label": "底部导航"
},
{
"value": "2",
"label": "全局导航"
}
],
"children": [
[{
"title": "选择模板",
"tag": "RadioItem",
"type": "string",
"key": "tmplateType",
"options": [{
"value": "1",
"label": "图片导航"
}
]
}]
]
}]
}
FormRender实现
schema 是 FormRender 的 props，用于描述表单的基本信息、结构和校验
[{
"title": "导航类型",
"tag": "TabItem",//表单组件名称
"type": "string",
"key": "type",
"options": [{
"value": "1",
"label": "底部导航"
},
{
"value": "2",
"label": "全局导航"
}
],
"children": [
[{
"title": "选择模板",
"tag": "RadioItem",
"type": "string",
"key": "tmplateType",
"options": [{
"value": "1",
"label": "图片导航"
}
]
}]
]
}]
组件拖拽到iframe编辑区域
拖拽是通过鼠标事件mouseup、mousedown、mousemove实现（也可以用html5拖拽api实现）
- mousedown、mousemove鼠标按下clone需要拖拽组件进行transform: translate3d移动;
- 当鼠标移动到iframe区域，通过postmessage 传递x,y值数据到iframe
- iframe通过onMessage接收x、y,判断当前组件插入位置
- mouseup鼠标放开时判断是否处于当前编辑区域，是添加数据的组件列表、否则不做任何更新
优化点
1.无法在编辑区域增加删除，组件名称标签。
优化方案：iframe编辑区域放大整个页面，可能会遇到rem大小问题，组件拖拽x,y值有偏差
2.表单编辑数据和最终提交服务端数据共用了一个字段都保存到了template，tabItem表单组件切换到其他tab，无法记录其他tab选项下的数据。
优化方案：将编辑的表单数据保存在新增字段，更新（我觉得可采取异步方式更新）到template（c端依赖template数据进行展示）
3.表单错误提示目前是在点击提交的时候去弹窗提示组件错误
优化方案：在表单onchange时，表单显示红色和错误提示文案，可通过异步更新方式校验表单避免数据更新卡顿（可参考Ant Design Form.useForm实现）
待完成
- 新增模版库功能
- 组件库动态加载(目前全量加载到页面,组件多的话包体积变大)
- 组件库无版本管理
- 组件编辑无法嵌套（可增加一个编辑组件，组件所有子项通过绝对定位，支持嵌套）
- 表单配置加校验规则配置
