AruSeito / study-low-code

简易可视化拖拽生成页面

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

low-code

使用说明

  1. git clone https://github.com/AruSeito/study-low-code.git 克隆该项目

  2. 根目录执行npm install安装依赖

  3. npm run start 运行程序

  4. localhost:3000 即可查看

扩展说明

组件扩展

  1. src/components下增加parser-xxxx.tsx来转换自己的插件。参数只需要传进来jsonScheme

  2. src/components/index.ts下增加解析器(后续可能会优化成自动导入)

// jsonScheme格式
jsonScheme = {
  "page": {
    "type": "Container", //根容器
    "children": [
      {
        "type": "Container", // 类型
        "props":{} // 传到组件上的参数
        "children": [  // 子类
          {
            "type": "CButton",
          },
          { 
            "type": "CInput" 
          }
        ]
      }
    ]
  }
}

配置面板扩展

待优化,目前需要每种类型搞一个tsx文件,后续会优化成只需要写json传入就渲染指定的。

TODOS

  • 物料堆

  • 画布/渲染引擎

  • 配置面板

  • 拖拽物料堆到画布

  • 画布内组件的拖拽

  • 拖拽时位置高亮

  • 选中时边框高亮

  • 配置面板json化

过程记录

实现简易的可视化拖动生成页面

About

简易可视化拖拽生成页面


Languages

Language:TypeScript 87.6%Language:HTML 8.8%Language:CSS 1.9%Language:JavaScript 1.7%