可视化布局

前言

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

效果图

特性

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

项目相关

实现原理

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

• 多布局代码
• 单一布局代码
• 节点代码

代码文件

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

代码架构

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

地址

在线地址

项目地址

结束语

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