Skip to content

anyone-yuren/react-antd-admin-pnpm

Repository files navigation

Gbeata Admin

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

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

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


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

目录

目录

简介

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

贡献

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

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