可视化布局 - V2EX

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 271 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

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