通用报名活动皮肤编辑器

1. 项目背景：在游戏为维度的主播招募活动中，活动页面功能相似，但文字描述及主题是各种各样的。H5端页面做到了通过url中指定不同参数即可加载不同配置，以展示不同报名信息及主题配置信息。为解决重复样式变更而导致的重复发布，皮肤编辑器由此诞生。
2. 功能划分：C端iFrame预览页面 + B端配置表单 + postMessage通信 + 配置导入导出
3. 框架语言：react + typescript + less + html
4. 功能特点： 支持多种活动模板 、导入导出配置、实时预览
5. 细节实现：
①. C端页面监听message事件，处理模板切换、皮肤配置参数更新（css变量）、配置收集还原
②. B端表单页面：
a. 根据模板配置，动态生成表单项，监听表单项修改时，将修改后的值postMessage给iFrame预览页，实时更新数据
b. 本地图片通过FileReader读取为base64格式，发送给预览页，实时预览
c. 通知iframe收集变量信息，及预览框架变更iframe页更新
③. 通过jszip工具保存base64图片及样式配置到压缩包，读取zip配置信息，并还原到配置页面
6. webpack同时打包B、C端页面
7. 项目效果
①配置管理端直接交付给设计及产品同学，管理端配置完成后，审核通过即可现网生效。
②导入、导入配置方便同一类皮肤微调重复使用，减小逐个配置成本