(开源) 写了一个无代码平台 brick

前沿

无代码开发是一种无需编写代码或通过少量代码就可以快速生成应用程序的开发平台。它可以快速交付应用程序,解决传统软件开发模式带来的周期长、成本高等问题。无代码开发平台,允许用户通过拖拽和放置组件的方式来构建应用界面。

brick 是一个无代码开发平台,采用 React+Typescript+Lowcode-engine 开发。

🏠 Homepage

演示地址

平台内的几个示例页面

  • 应用管理
  • 表单设计
  • 表单权限
  • 数据管理

  • 部门,角色,用户管理

  • 表单设计和使用

安装

sh 复制代码
git clone https://github.com/brick-family/brick.git

pnpm i

开发

  • 本地开发(使用本地物料库)
sh 复制代码
  1. pnpm i
  2. pnpm run watch  开启监听
  3. pnpm run dev:ui:local 启动低代码平台
  4. pnpm run dev:lc 启动物料组件
  5. 访问 http://localhost:8000

运行测试

sh 复制代码
pnpm run test

环境

  • pnpm 7.x

  • node 16.x

项目目录

packages

包名称规则

  • b-开头的 package 是基础包,都是提供基础服务
  • c-开头的包,是大型业务组件或者模块
  • lowcode-开头的项目,是 web 页面
css 复制代码
├── b-biz-component    提供业务组件
├── b-component        提供基础组件
├── b-core             核心模块,提供通用的Processor,请求等
├── b-processor        各模块通用的Processor
├── b-services         提供接口请求
├── b-types            通用TS类型
├── b-utils            工具类
├── c-lowcode-editor   低代码引擎编辑器
├── c-ui-material      物料库(供低代码引擎使用)
├── c-workflow         工作流模块
├── lowcode-admin      无代码后台管理系统
├── lowcode-h5         无代码h5平台
└── lowcode-platform   无代码平台

项目启动

  • 第一次运行,需要执行

    1. pnpm run pkg 编译下依赖包
  • 本地开发(使用本地物料库)

    1. pnpm i
    2. pnpm run watch
    3. pnpm run dev:ui 启动低代码平台
    4. pnpm run dev:lc 启动物料组件
    5. 访问 http://localhost:8000

功能特性

本平台支持多租户, 主要功能包含表单管理,工作流,仪表盘大屏等。

功能列表

多租户

  • 租户管理
  • 应用管理
权限管理
  • 租户权限
  • 应用权限

表单管理

  • 表单设计
  • 流程表单
各类型字段
  • 单行文本
  • 多行文本
  • 数字
  • 日期
  • 单选按钮组
  • 复选框组
  • 下拉框
  • 下拉复选
  • 关联数据
  • 富文本
  • 子表单
  • 用户选择器
  • 图片
  • 附件
  • 布局

工作流

  • 工作流的设计
  • 工作流节点内容
    • 创建数据
    • 修改数据
    • 删除数据
    • 审批
    • 抄送
    • 跳转
    • 条件
    • 子流程
    • xxxx

仪表盘大屏

  • 大屏设计
  • 图表组件类型
    • 柱状图
    • 折线图
    • xxxx

集成第三方

  • 企业微信
  • 钉钉
  • 飞书

项目架构

项目用 React umi 开发框架,采用 typescript 编写,对各模块功能做了详细拆分,低代码搭建使用的是lowcode-engine,提供基础能力。

技术栈和依赖项

技术 说明 官网
typescript JavaScript 的一个超集,支持 ECMAScript 6 www.tslang.cn/
umi 插件化的企业级前端应用框架。 umijs.org/zh-CN
immer 创建不可变数据 immerjs.github.io/immer/docs/...
@legendapp/state Legend-State 是一个超快速且强大的 JavaScript 应用状态库 github.com/LegendApp/l...
ahooks 提供了大量自应用的高级 Hooks github.com/alibaba/hoo...
@antv/x6 提供简单易用的节点定制能力和开箱即用的交互组件,方便我们快速搭建流程图、DAG 图、ER 图等图应用 github.com/antvis/x6
@ant-design/pro-components 基于 antd,对组件最了封装,简单易用 procomponents.ant.design/
xxxx xxxxx xxxx

联系我

建立了一个微信交流群,请添加微信号brickmaster1,备注brick,我会拉你进群

总结

大家可以尝试一下,目前还不算太稳定,有bug可以提issues,我会第一时间修复.

大家觉得有帮助,请在github帮忙star一下。

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

相关推荐
paopaokaka_luck2 小时前
【360】基于springboot的志愿服务管理系统
java·spring boot·后端·spring·毕业设计
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
码农小旋风4 小时前
详解K8S--声明式API
后端
Peter_chq4 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
Yaml44 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
小小小妮子~4 小时前
Spring Boot详解:从入门到精通
java·spring boot·后端
hong1616884 小时前
Spring Boot中实现多数据源连接和切换的方案
java·spring boot·后端
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js