Gbeata Admin

Gbeata Admin is a set of templates designed for rapidly constructing backend management systems. English ・ 简体中文 ・ Changelog · Issues · Request Features

Table of Contents

目录

• 简介
• 动机 ｜ 为什么想做这个
• 特性
• 建设目标
• 第一阶段：组件库设计阶段
• 第二阶段:react-antd-admin模板搭建
• 使用
• 分支管理
• 注意点：
• 贡献

简介

[!IMPORTANT]\ 方案集成当下最流行的一些前端框架和库做集成，致力于构建一套通用型强的前端后台管理系统解决方案。

动机 ｜ 为什么想做这个

antd5已经发布很久了，之前一直在维护的一套基于antd4版本的方案由于一直在内部项目中迭代，没办法抽出时间升级，随着前端技术的迭代更新和业务需求的不断扩展，趁着内部升级的机会，也把这一年多在项目中沉淀的一些技术方案做一次整理分享。

特性

它能做什么

本方案中会集成当下主流的前端设计思路，虽然当下关于react的后台模板，市面上可选择性很多，但与其他方案不同的是，关注功能组件与业务组件开发的同时，更多的精力会放在代码本身的原子化设计和解耦上，具备的特性包括（持续补充）

• 组件库设计
• admin设计
• CICD持续集成
• 容器化部署
• 代码规范设计
• 基础模板库设计
• ...

建设目标

• [x] pnpm turbo vite 集成方案搭建
• [x] 配置代码提交规范与自动化部署
• [x] antd5组件库开发
• [x] 分包设计与应用设计
• [x] 自动化tag版本打包
• [ ] plop基础项目模板创建
• [ ] 微前端接入
• [ ] 模板编写

第一阶段：组件库设计阶段

• [x] 完成组件库编写和测试
• [x] 升级antd4 => antd5， 升级react与dumi、umi为最新版；
• [x] 完成组件库自动发布npm
• [ ] 发布组件库文档

5.0组件文档更新会滞后写，也可以参考4.0版本的组件文档使用，只是所有的multiway 更名为 gbeata 文档地址

• [ ] 发布gitPage
• [ ] 新增spring/web动画组件

第二阶段:react-antd-admin模板搭建

• [x] 技术选型
• [x] 框架设计
• [x] 主题设计
• [x] 登录页设计
• [x] 状态管理（zustand）
• [x] 路由设计，使用loadable-compoment替代React.lazy
• [x] 主题控制面板
• [x] 模块高亮搜索
• [x] 系统模板创建

使用

[!IMPORTANT]\ 代码中包含gbeata组件库，如果不想使用到package/gbeata组件库源码，可直接从npm包中安装。

git clone git@github.com:anyone-yuren/react-antd-admin-pnpm.git

pnpm bootstrap

pnpm build --filter gbeata

pnpm dev --filter gbeata-admin

也可以直接使用pnpm dev，但这样就会启动项目中所有包含dev命令的包项目。

分支管理

发布组件库分支： main

后台管理模板分支： admin

注意点：

1. 使用semantic-release做自动化发布时，不需要打包的子包，设置"private": true

2. 项目中less改造antd-style写法：

npx @chenshuai2144/less2cssinjs less2js -i src

1. 关于本地运行项目，出现gbeata未定义的问题，起初在设计组件库阶段，并没有打算直接在项目包中直接应用workspace中的源码，所以，你可以在执行 pnpm dev --filter gbeata-admin 之前，请先将gbeata组件包打包生成lib目录， 执行pnpm build --filter gbeata

贡献

欢迎各种类型的贡献，如果您有兴趣贡献代码，请随时查看我们的 GitHub 问题，并展示您的才华。

欢迎 PR，当然您也可以扫码进群讨论，或者直接联系我，QQ: 1003473088，如果这是一个很大的变化！欢迎您的加入！