可视化生成页面(2)
在第一版的基础上,完成了第二版的开发计划,加入了组件的支持,部分样式可视化的支持,优化了 UI 界面,修复了部分已知 bug。
前言
- 第一篇文章,项目基本介绍
- 重点
- 【思想】布局去定义组件位置,而不是通过组件调整位置
- 组件采用 json 方式做为可视化操作
- 组件和布局可以随意采用 react 框架做二次开发[相关介绍在后续计划中],以适应自己的相关需求
- 布局不仅仅是页面,可以在任何需要布局的地方定义
百度首页为例。
1: 创建基础布局
2: 加入文字和组件
3: 预览页面
4: 生成代码
开发中
项目功能使用介绍
相关开发计划
第二版 [已完成]
- 支持组件
- 添加文字
- 样式可视化
- flex 布局
- height
- 盒子模型 [未完成]
- 两侧可以拖动
- 改造布局侧边栏
- 分类型
第三版 [未开始]
- 构建树可视化
- 可用性优化
- 代码生成
- html 模式
- react 模式
- 页面优化
第四版 [未开始]
- 支持 css 单位
- 支持组件库自带布局
- 国际化
- 项目相关文章
- 支持后续特性
地址
参考
-
UI 参考了 alibaba/designable
-
组件思想参考了 baidu/amis
总结
在第二版加入了组件的支持,基本满足开发上的需求,但存在常用样式控制依赖于修改 css 代码,页面不能保存,交互体验等问题,以及修复对于组件的支持存在的问题,需要在下一版做改进,在下一版本中需要达到闭环。