七夏 发表于 2024-10-11 17:49:40

React 最强后台管理系统模板:React-SoybeanAdmin 1.0 正式发布!

> 历经 5 个月的持续优化和改进,`React-SoybeanAdmin 1.0` 终于与大家见面了!该项目基于 Soybean(9.8kstar)构建,采用了 `React`技术栈,打造了一款清新优雅、功能强大且极具美感的后台管理系统模板。它集合了多种前沿技术,如 React18、React-Routerv6、Vite5、TypeScript、Ant Design 和UnoCSS,能够提供一个开箱即用的后台管理解决方案,同时也是学习现代前端技术的优秀实践。

## 项目亮点

* **前沿技术栈**:采用最新的 React18、React Router v6、Vite5、TypeScript、Redux Toolkit、Ant Design 和 UnoCSS,确保技术紧跟潮流,提供最佳的开发体验。
* **强大的路由扩展**:基于 React-Router V6 扩展了路由 API,提供类似 Vue-Router 的便捷使用体验,让路由管理更加灵活高效。
* **模块化架构**:项目采用了 `pnpm monorepo` 架构,结构清晰易懂,方便开发者快速上手并进行模块化扩展。
* **严格的代码规范**:集成了 `eslint`、`prettier` 和 `simple-git-hooks`,并采用 SoybeanJS 规范,确保代码风格统一,提升团队协作效率。
* **TypeScript 类型支持**:项目通过支持严格的类型检查和内置类型推导,使得开发者可以轻松享受到高效的类型提示,大幅提升代码的可读性和维护性。
* **丰富的主题配置**:`React-SoybeanAdmin` 提供了高度定制化的主题选项,结合 UnoCSS 实现快速开发,支持暗黑模式等多种 UI 风格。
* **多语言国际化支持**:内置完善的国际化解决方案,轻松应对多语言场景,助力全球化项目。
* **灵活的权限控制**:支持前端静态路由和后端动态路由,灵活处理权限问题,同时保证路由安全性。
* **约定式路由系统**:项目采用了自动化的文件路由系统,无需手动配置路由,基于文件结构即可自动生成路由声明,减少人为错误,提高开发效率。
* **完善的页面和组件库**:内置了丰富的页面模板与通用组件,如 403、404、500 页面,布局组件、标签组件、主题配置组件等,极大提高了开发效率。
* **移动端适配**:项目不仅适用于桌面端,还完美支持移动端设备,提供了自适应布局。
* **集成 keep-alive**:框架内集成了 `keep-alive`,只需要在对应的路由中的 `meta`中声明 `{keepAlive:true}`,即可开启

## 特性详解

#### **代码规范与架构**

* 通过 `eslint` 和 `prettier` 强制保持代码风格的一致性,结合 `simple-git-hooks` 实现提交前代码检查。
* 遵循函数式编程原则,减少副作用,模块划分明确,组件放置在 `components` 目录下,页面模块化管理,符合现代 React 开发的最佳实践。

#### **权限路由**

* **前端静态路由**:在前端通过配置文件实现简单的权限控制,适合权限层级较少的场景。
* **后端动态路由**:通过后端接口动态获取路由配置,适合复杂的企业级项目。
* 严格的权限控制流程,确保应用的安全性与灵活性。

#### **主题与样式**

* 系统基于 UnoCSS,提供了灵活的主题定制能力,支持快速切换主题和暗黑模式。
* 内置丰富的类名,如 `bg-primary`、`text-primary`,开发者可以方便地应用预定义的样式,提升开发效率。

#### **TypeScript 实践**

* 项目遵循 TypeScript 的最佳实践,支持全局类型声明,确保类型安全。
* 提供了自动类型推导和丰富的类型提示,开发者只需定义少量类型,便可享受到完整的 TypeScript 体验。

## 示例截图

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/kzFgl6ibibNKqFvEy4dJMPr4BEeO1FonZK6KhQrmkickoibtKt7AbwYKic7Fjq2bJX4ib2FWj5ib7gBmOACrNM7dp3EXw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/kzFgl6ibibNKqFvEy4dJMPr4BEeO1FonZKZJ91kSeUj111Ik9xzwF0QJibfO9TYbY4axmDibJfDrNesh7Pljico2x4A/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/kzFgl6ibibNKqFvEy4dJMPr4BEeO1FonZKcXNIepAFFiaZcoNSibd5ofxLNicrswND0J6ssSxHOiaBrkjxN0W01vn21w/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/kzFgl6ibibNKqFvEy4dJMPr4BEeO1FonZKHawOqqfC25Eiakfgaxz0qaLxZK9RPhKMia3rldEQHAAp19lQXyZfDxEA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/kzFgl6ibibNKqFvEy4dJMPr4BEeO1FonZKwQzicJiaicTbxwMWmF5eOJgcETgUzqFz0FaZibsxNsToiblbN3AvtZZ9qPg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/kzFgl6ibibNKqFvEy4dJMPr4BEeO1FonZKM2oibpTlBibxnzCYM7PSJVGKNNeJunPiblm1ia7rCge1SoHYsYjMF3SBqQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

## 预览与文档

* 预览地址:https://react-soybean.ohh-889.com/
* 文档地址:https://react-soybean-docs.pages.dev/index-cn?theme=dark
* GitHub 仓库:https://github.com/mufeng889/react-soybean-admin
* Gitee 仓库:https://gitee.com/sjgk\_dl/react-admin
页: [1]
查看完整版本: React 最强后台管理系统模板:React-SoybeanAdmin 1.0 正式发布!