Gbeata Admin

Gbeata Admin是一套用于快速构建后台管理系统模板

文档地址：https://anyone-yuren.github.io/gbeata-admin-docs

English ・ 简体中文 ・ 更新日志 · 报告问题 · 请求功能

新增大屏面板:分支 wk-admin-dashboard

目录

目录

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

简介

Important

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

动机 ｜ 为什么想做这个

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

特性

它能做什么

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

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

建设目标

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

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

• 完成组件库编写和测试

• 升级antd4 => antd5， 升级react与dumi、umi为最新版；

• 完成组件库自动发布npm

• 发布组件库文档

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

• 发布gitPage

• 新增spring/web动画组件

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

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

使用

Important

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

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

pnpm bootstrap

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

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

贡献

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

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