可视化布局

1,002 阅读1分钟

前言

面向开发者,期望通过可视化生成界面布局的 Low Code 平台,帮助开发者快速生成布局(现在处于开发功能阶段)。

效果图

layout.png

layout2.png

特性

  • 支持键盘事件 【已支持】
    • [Ctrl + c] (复制选中))
    • [Ctrl + v] (粘贴)
    • [Ctrl + Backspace] (删除选中)
    • [Ctrl + z] (返回)
    • [Ctrl + z] (前进)
  • 支持多布局 【已支持】
  • 支持历史操作 【已支持】
  • 支持可视化样式【开发中】
  • 支持导出代码【开发中】
  • 支持组件【未开始】
  • 支持 CSS 单位 (Rem, Vw)【未开始】
  • 支持布局历史存储【未开始】
  • 支持前端框架标签【未开始】

项目相关

实现原理

一个节点对应一个 AST 对象,通过操作 AST 对象的属性来触发页面的改变

layout3.png

代码文件

.github ----> github Action 配置
.vscode ----> vscode 配置 (prettier)
  src   ---|
           |
           |
         context    ---> 全局上下文
         model      ---> 数据层
         controller ---> 控制层
         pages      ---> 视图
         theme      ---> 主题配色

代码架构

   数据层 ---- 更新 -----> 页面  ---------------> 全局 context ----> 刷新页面
    ↑                     |
   改变                   操作
    |                     |
    <————————— 控制 ———————

地址

在线地址

项目地址

结束语

期望能够在日常重复业务开发中,快速生成业务的界面结构,目前处于开发阶段,欢迎大家的加入