(开源) 写了一个无代码平台 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、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

相关推荐
艾小码9 分钟前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
彭于晏Yan14 分钟前
SpringBoot优化树形结构数据查询
java·spring boot·后端
幸福摩天轮19 分钟前
npm发布包
前端
前端AK君21 分钟前
Gitlab 线上合并冲突的坑
前端
ze_juejin21 分钟前
ES6 Module 深入学习
前端
章丸丸24 分钟前
Tube - Studio Videos
前端·后端
练习时长一年36 分钟前
Spring事件监听机制(三)
java·后端·spring
NocoBase43 分钟前
6 个最佳无代码 IT 资产管理工具推荐
低代码·开源·github
2301_781392521 小时前
用spring框架实现简单的MVC业务
java·后端·spring