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

前沿

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

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

🏠 Homepage

✨ 演示地址

平台内的几个示例页面

• 应用管理

• 表单设计

• 表单权限

• 数据管理
  

• 部门，角色，用户管理
  

• 表单设计和使用

安装

git clone https://github.com/brick-family/brick.git

pnpm i

开发

• 本地开发(使用本地物料库)

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

运行测试

pnpm run test

环境

• pnpm 7.x

• node 16.x

项目目录

packages

包名称规则

• b-开头的 package 是基础包，都是提供基础服务
• c-开头的包，是大型业务组件或者模块
• lowcode-开头的项目，是 web 页面

├── 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	https://www.tslang.cn/
umi	插件化的企业级前端应用框架。	https://umijs.org/zh-CN
immer	创建不可变数据	https://immerjs.github.io/immer/docs/introduction
@legendapp/state	Legend-State 是一个超快速且强大的 JavaScript 应用状态库	https://github.com/LegendApp/legend-state
ahooks	提供了大量自应用的高级 Hooks	https://github.com/alibaba/hooks
@antv/x6	提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用	https://github.com/antvis/x6
@ant-design/pro-components	基于 antd，对组件最了封装，简单易用	https://procomponents.ant.design/
xxxx	xxxxx	xxxx

联系我

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

总结

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

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

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

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

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

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