V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
loveyou1
V2EX  ›  JavaScript

可视化布局

  •  
  •   loveyou1 · 2021-08-30 18:01:28 +08:00 · 2753 次点击
    这是一个创建于 1210 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

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

    地址

    在线地址

    项目地址

    结束语

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

    11 条回复    2021-09-01 09:08:45 +08:00
    cigaret
        1
    cigaret  
       2021-08-30 18:09:28 +08:00
    很不错啊!最近有类似的规划,可以互留联系方式交流一下嘛!
    loveyou1
        2
    loveyou1  
    OP
       2021-08-30 18:26:41 +08:00
    @cigaret 可以啊,我微 dGN5X18xMDIw
    sunny352787
        3
    sunny352787  
       2021-08-30 19:23:13 +08:00
    loveyou1
        4
    loveyou1  
    OP
       2021-08-30 19:27:12 +08:00
    @sunny352787 这两个没有直接关联,倒是给了我一个灵感,后面做布局里面组件的时候可以用 json 来生成😄。
    sunny352787
        5
    sunny352787  
       2021-08-30 19:28:56 +08:00
    @loveyou1 这个也有可视化生成工具的,我用这玩意做后台挺方便
    loveyou1
        6
    loveyou1  
    OP
       2021-08-30 19:34:01 +08:00
    @sunny352787 应该是有的,但是开源的应该不多吧...
    Taikyo
        7
    Taikyo  
       2021-08-30 23:50:55 +08:00
    支持一个,感觉挺有意思的项目
    NewYear
        8
    NewYear  
       2021-08-31 08:47:29 +08:00
    [Ctrl + z] (返回)
    [Ctrl + y] (前进)
    loveyou1
        9
    loveyou1  
    OP
       2021-08-31 10:12:14 +08:00
    @NewYear 是的,写错了
    fzcf
        10
    fzcf  
       2021-08-31 21:50:57 +08:00
    说实话我觉得意义不是很大,可能对初学者很友好,但是经验丰富的前端撸一个自适应页面框架也就十几分钟的事情。
    loveyou1
        11
    loveyou1  
    OP
       2021-09-01 09:08:45 +08:00
    @fzcf 如果在加上组件了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2842 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:19 · PVG 20:19 · LAX 04:19 · JFK 07:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.