可视化生成页面(2)

3,784 阅读2分钟

可视化生成页面(2)

在第一版的基础上,完成了第二版的开发计划,加入了组件的支持,部分样式可视化的支持,优化了 UI 界面,修复了部分已知 bug。

前言

  • 第一篇文章,项目基本介绍
  • 重点
    • 【思想】布局去定义组件位置,而不是通过组件调整位置
    • 组件采用 json 方式做为可视化操作
    • 组件和布局可以随意采用 react 框架做二次开发[相关介绍在后续计划中],以适应自己的相关需求
    • 布局不仅仅是页面,可以在任何需要布局的地方定义

百度首页为例。

1: 创建基础布局

1.png

2: 加入文字和组件

2.png

3.png

3: 预览页面

4.png

4: 生成代码

开发中

项目功能使用介绍

项目 WiKi 文档

相关开发计划

第二版 [已完成]

  • 支持组件
  • 添加文字
  • 样式可视化
    • flex 布局
    • height
    • 盒子模型 [未完成]
  • 两侧可以拖动
  • 改造布局侧边栏
    • 分类型

第三版 [未开始]

  • 构建树可视化
  • 可用性优化
  • 代码生成
    • html 模式
    • react 模式
  • 页面优化

第四版 [未开始]

  • 支持 css 单位
  • 支持组件库自带布局
  • 国际化
  • 项目相关文章
  • 支持后续特性

地址

在线地址

项目地址

参考

总结

在第二版加入了组件的支持,基本满足开发上的需求,但存在常用样式控制依赖于修改 css 代码,页面不能保存,交互体验等问题,以及修复对于组件的支持存在的问题,需要在下一版做改进,在下一版本中需要达到闭环。