可视化布局

[loveyou1]

前言

面向开发者，期望通过可视化生成界面布局的 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 ----> 刷新页面
    ↑                     |
   改变                   操作
    |                     |
    <————————— 控制 ———————

地址

在线地址

项目地址

结束语

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

[cigaret]

很不错啊！最近有类似的规划，可以互留联系方式交流一下嘛！

[loveyou1]

@cigaret 可以啊，我微 dGN5X18xMDIw

[sunny352787]

emmm...看看百度这个？

https://baidu.gitee.io/amis/zh-CN/docs/index

[loveyou1]

@sunny352787 这两个没有直接关联，倒是给了我一个灵感，后面做布局里面组件的时候可以用 json 来生成😄。

[sunny352787]

@loveyou1 这个也有可视化生成工具的，我用这玩意做后台挺方便

[loveyou1]

@sunny352787 应该是有的，但是开源的应该不多吧...

[Taikyo]

支持一个，感觉挺有意思的项目

[NewYear]

[Ctrl + z] (返回)
[Ctrl + y] (前进)

[loveyou1]

@NewYear 是的，写错了

[fzcf]

说实话我觉得意义不是很大，可能对初学者很友好，但是经验丰富的前端撸一个自适应页面框架也就十几分钟的事情。

[loveyou1]

@fzcf 如果在加上组件了