Skip to content

Commit

Permalink
chore(projects): update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@mufeng889
mufeng889 committed Dec 14, 2024
1 parent b7080ed commit 829780d
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 86 deletions.
145 changes: 82 additions & 63 deletions README.en-US.md
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,94 @@
```html
<div align="center">
<img src="./public/favicon.svg" width="160" />
<h1>React SoybeanAdmin</h1>
<img src="./public/favicon.svg" width="160" />
<h1>React SoybeanAdmin</h1>
<span><a href="./README.en-US.md">English</a> | 中文</span>
</div>
```

---

[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)

> [!NOTE]
> If you find `React SoybeanAdmin` helpful, or if you like our project, please give us a ⭐️ on GitHub. Your support is our motivation to keep improving and adding new features! Thank you!
> If you find `React SoybeanAdmin` helpful or like our project, please give us a ⭐️ on GitHub. Your support motivates us to keep improving and adding new features! Thank you for your support!
## Special Thanks

This project is based on the outstanding open-source project [Soybean Admin](https://github.com/soybeanjs/soybean-admin), developed by [Soybean](https://github.com/honghuangdc). It is a React implementation of the original project. Special thanks to Soybean for their contributions to open source and for providing an excellent solution for admin panel development. If you like this project, please also give a ⭐️ to the original [Soybean Admin](https://github.com/soybeanjs/soybean-admin).

## Introduction

[`React Soybean`](https://github.com/mufeng889/react-soybean-admin) is a sleek, elegant, and powerful admin template built with the latest frontend technologies, including React 18, ReactRouter V6, Vite 5, TypeScript, Redux/toolkit, and UnoCSS. It comes with rich theme configuration and components, strict code conventions, and an automated file-based routing system. Additionally, it integrates an online Mock data solution based on ApiFox. `React Soybean` provides a comprehensive one-stop admin management solution, with zero configuration needed, ready to use right out of the box. It also serves as a best practice for learning cutting-edge technologies quickly.
[`React SoybeanAdmin`](https://github.com/mufeng889/react-soybean-admin) is a fresh and elegant admin panel template built on the React18 stack. It adopts the latest frontend technologies, including:

- 🚀 React 18 + ReactRouter V6 + Redux/toolkit
- 🎨 Ant Design + UnoCSS
- 📦 Vite 5 + TypeScript
- 🔐 Role-based access control
- 📱 Mobile-friendly adaptation
- 🌍 Internationalization support
- 🎯 Mock data integration
- 📚 Comprehensive documentation

### Key Features:

- 💡 Strict coding standards and elegant architecture
- ⚡️ Ready to use out of the box, no complex setup needed
- 🛠️ Rich components and theme customization
- 📋 Automated file routing system
- 🔧 Excellent type support
- 📱 Responsive design, perfectly adapted for mobile
- 🎨 Optimistic UI: Automatically captures and displays friendly error messages for debugging and monitoring purposes within components.
- 🚀 Advanced routing features: Extends React-Router V6 API for a more Vue-like experience, making routing management more flexible and efficient.
- ⚡️ CLI tools: Built-in tools for Git commits, file deletions, releases, and more.

Whether you're learning the latest frontend technologies or developing enterprise-grade admin panels, React SoybeanAdmin is your ideal choice.

## Branches

- **`master` branch**: Latest stable version, based on React19 + ReactRouter V7.
- **`v18-router6` branch**: Legacy version, based on React18 + ReactRouter V6.

Both branches will continue to receive bug fixes. If you need the older version, switch to the appropriate branch. The `v18-router6` branch will remain advanced and feature-rich for 3-5 years.

## Versions

### React Version

- **React 18 Version:**
- **React18 Version:**
- [Preview](https://github.com/mufeng889/react-soybean-admin/)
- [Accelerated Access for China](https://react-soybean-admin.pages.dev/)
- [GitHub Repo](https://github.com/mufeng889/react-soybean-admin)
- [Gitee Repo](https://gitee.com/sjgk_dl/react-admin)
- [Faster Access in China](https://react-soybean-admin.pages.dev/)
- [GitHub Repository](https://github.com/mufeng889/react-soybean-admin)
- [Gitee Repository](https://gitee.com/sjgk_dl/react-admin)

#### Documentation

- [Docs](https://react-soybean-docs.ohh-889.com/index-en?theme=dark)
- [Docs](https://react-soybean-docs.ohh-889.com/index-cn?theme=dark)

### Vue Versions

- **NaiveUI Version:**
- [Preview](https://naive.soybeanjs.cn/)
- [GitHub Repo](https://github.com/soybeanjs/soybean-admin)
- [Gitee Repo](https://gitee.com/honghuangdc/soybean-admin)

- [Preview](https://naive.soybeanjs.cn/) - A fresh and elegant admin panel built with Vue3 + NaiveUI.
- [GitHub Repository](https://github.com/soybeanjs/soybean-admin) - Get the latest source code and contribute.
- [Gitee Repository](https://gitee.com/honghuangdc/soybean-admin) - Faster access for China users.
- Features:
- Complete TypeScript support
- Rich theme customization
- Elegant coding style
- Detailed documentation
- **AntDesignVue Version:**
- [Preview](https://antd.soybeanjs.cn/)
- [GitHub Repo](https://github.com/soybeanjs/soybean-admin-antd)
- [Gitee Repo](https://gitee.com/honghuangdc/soybean-admin-antd)
- [GitHub Repository](https://github.com/soybeanjs/soybean-admin-antd)
- [Gitee Repository](https://gitee.com/honghuangdc/soybean-admin-antd)

- **Legacy Version:**
- [Preview](https://legacy.soybeanjs.cn/)
- [GitHub Repo](https://github.com/soybeanjs/soybean-admin/tree/legacy)

## Features

- **Cutting-edge Tech Stack**: Built with the latest popular technologies, including React 18, ReactRouter V6, Vite 5, TypeScript, Redux/toolkit, and UnoCSS.
- **Clean Project Structure**: Uses a pnpm monorepo structure that is clear, elegant, and easy to understand.
- **Strict Code Conventions**: Adheres to the [SoybeanJS Guidelines](https://docs.soybeanjs.cn/zh/standard), integrating eslint, prettier, and simple-git-hooks to ensure code quality.
- **TypeScript**: With strict type checking and built-in hooks for type inference, only simple type definitions are needed to enjoy robust TypeScript type hints, greatly improving code maintainability.
- **Rich Theme Configuration**: Offers various built-in theme settings, perfectly integrated with UnoCSS.
- **Built-in Internationalization**: Easily implement multi-language support.
- **Enhanced Routing**: Extends the React-Router V6 API to offer a Vue-Router-like experience for flexible and efficient routing management.
- **Automated File-based Routing**: Convention-based routing with auto-generated imports, declarations, and types. For more details, check out [Elegant Router](https://github.com/mufeng889/react-auto-route).
- **Flexible Permission System**: Supports both frontend static routes and backend dynamic routes.
- **Comprehensive Page Components**: Includes built-in pages like 403, 404, 500, as well as layout components, tab components, theme configuration components, and more.
- **Command Line Tools**: Built-in efficient CLI tools for git commits, file deletion, publishing, and more.
- **Mobile Adaptability**: Fully supports mobile devices with responsive layouts.
- **User-friendly UI**: Automatically captures and displays errors with a friendly interface, helping users quickly locate and fix issues. It also supports in-component monitoring and reporting.

## Comprehensive Ant Design-style Documentation

- [Docs](https://react-soybean-docs.ohh-889.com/index-en?theme=dark)
- [GitHub Repository](https://github.com/soybeanjs/soybean-admin/tree/legacy)

## Ant Design-Themed Comprehensive Documentation

- [Docs](https://react-soybean-docs.ohh-889.com/index-cn?theme=dark)
![](https://ohh-1321526050.cos.ap-nanjing.myqcloud.com/docs-home.jpg)

## Sample Images
## Demo Screenshots

![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-01.png)
![](https://ohh-1321526050.cos.ap-nanjing.myqcloud.com/mobile.png)
Expand All @@ -85,92 +105,91 @@

## Usage

**Environment Setup**
### Prerequisites

Make sure your environment meets the following requirements:
Ensure your environment meets the following requirements:

- **git**: You'll need git to clone and manage the project version.
- **git**: For cloning and managing the project.
- **NodeJS**: >=18.12.0, recommended 18.19.0 or higher.
- **pnpm**: >= 8.7.0, recommended 8.14.0 or higher.

**Clone the Project**
### Clone the Repository

```bash
git clone https://github.com/soybeanjs/soybean-admin.git
```

**Install Dependencies**
### Install Dependencies

```bash
pnpm i
```

> Since this project uses pnpm monorepo management, please do not use npm or yarn to install dependencies.
> Since the project uses pnpm monorepo management, please do not use npm or yarn to install dependencies.
**Start the Project**
### Start Development Server

```bash
pnpm dev
```

**Build the Project**
### Build Project

```bash
pnpm build
```

## How to Contribute
## Contribution

We warmly welcome and appreciate all forms of contribution. If you have any ideas or suggestions, feel free to submit a [pull request](https://github.com/mufeng889/react-soybean-admin/pulls) or create a GitHub [issue](https://github.com/mufeng889/react-soybean-admin/issues/new).
We warmly welcome and appreciate all forms of contributions. If you have any ideas or suggestions, please share them via [pull requests](https://github.com/mufeng889/react-soybean-admin/pulls) or GitHub [issues](https://github.com/mufeng889/react-soybean-admin/issues/new).

## Git Commit Guidelines

This project includes a `commit` command that allows you to generate commit messages that follow the [Conventional Commits](https://www.conventionalcommits.org/) standard. When submitting a PR, please use the `commit` command to create a commit message to ensure its compliance with our conventions.
This project includes a `commit` command to generate commit messages following the [Conventional Commits](https://www.conventionalcommits.org/) standard. When submitting PRs, please use the `pnpm commit` command to create standardized commit messages.

## Browser Support

We recommend using the latest version of Chrome for the best development experience.
For the best experience, use the latest version of Chrome.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt="IE" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) |
| --- |

--- | --- | --- | --- |
| not supported | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
| --- | --- | --- | --- | --- |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

## Authors
## Open Source Authors

[Ohh-889](https://github.com/mufeng889)

[Soybean](https://github.com/honghuangdc)

## Contributors

Thanks to the following contributors. If you wish to contribute to this project, please see [How to Contribute](#how-to-contribute).
Thanks to the following contributors. If you want to contribute, please refer to [Contribution](#contribution).

<a href="https://github.com/mufeng889/react-soybean-admin/graphs/contributors">
<img src="https://contrib.rocks/image?repo=mufeng889/react-soybean-admin" />
</a>

## Community

`React Soybean` is a completely open-source and free project aimed at helping developers easily build medium to large-scale admin systems. We also offer WeChat and QQ groups for discussion and support. Feel free to ask questions within the groups.
`React Soybean` is a completely free and open-source project, aiming to make developing medium-to-large admin systems easier. We also provide QQ and WeChat groups for user discussions. Feel free to ask questions in the group.

<div>
<p>QQ Group</p>
<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-3.jpg" style="width:200px" />
</div>

<div>
<p>Add the following WeChat to be invited into the group</p>
<p>Join the WeChat group via the QR code below</p>
<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybeanjs.jpg" style="width:200px" />
</div>

<div>
<p>Add the following WeChat to be invited into the group</p>
<img src="https://ohh-1321526050.cos.ap-nanjing.myqcloud.com/ohh-889.jpg" style="width:200px" />
<p>Scan below to join the WeChat group</p>
<img src="
https://ohh-1321526050.cos.ap-nanjing.myqcloud.com/ohh-889.jpg" style="width:200px" />
</div>

## License

This project is licensed under the [MIT © 2021 Soybean](./LICENSE) license. It is intended for learning purposes only. For commercial use, please retain the author's copyright information. The author does not guarantee and assumes no responsibility for any risks arising from the use of the software.
```
This project is licensed under [MIT © 2021 Soybean](./LICENSE). It is intended for learning and reference only. For commercial use, please retain the original author's copyright information. The author does not guarantee or take responsibility for any risks associated with using the software.

67 changes: 44 additions & 23 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,51 @@
<h1>React SoybeanAdmin</h1>
<span><a href="./README.en-US.md">English</a> | 中文</span>
</div>
```

---

[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)

> [!NOTE]
> 如果您觉得 `React SoybeanAdmin`对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
> 如果您觉得 `React SoybeanAdmin` 对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
## 特别鸣谢

本项目是基于 [Soybean](https://github.com/honghuangdc) 开发的优秀开源项目 [Soybean Admin](https://github.com/soybeanjs/soybean-admin) 的 React 版本实现。在此特别感谢 Soybean 的开源贡献,为中后台开发提供了优秀的解决方案。如果您喜欢本项目,也请给原作者的 [Soybean Admin](https://github.com/soybeanjs/soybean-admin) 点个 star ⭐️。

## 简介

[`React Soybean`](https://github.com/mufeng889/react-soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 React18,ReactRouter V6, Vite5, TypeScript, Redux/toolkit 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。`React Soybean` 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。
[`React SoybeanAdmin`](https://github.com/mufeng889/react-soybean-admin) 是一个基于 React18 技术栈的清新优雅中后台模版。项目采用了最新的前端技术栈:

- 🚀 React 18 + ReactRouter V6 + Redux/toolkit
- 🎨 Ant Design + UnoCSS
- 📦 Vite 5 + TypeScript
- 🔐 基于角色的权限管理
- 📱 移动端适配
- 🌍 国际化支持
- 🎯 Mock 数据方案
- 📚 详尽的文档支持

项目特点:

- 💡 代码规范严谨,架构清晰优雅
- ⚡️ 开箱即用,无需复杂配置
- 🛠️ 丰富的组件和主题配置
- 📋 自动化的文件路由系统
- 🔧 完善的类型支持
- 📱 响应式设计,完美适配移动端
- 🎨 乐观`UI` 项目出现错误自动捕获错误,并显示友好界面,帮助用户快速定位和解决问题,还可以再组件内监控埋点上报。
- 🚀 丰富的路由功能：基于 React-Router V6 扩展了路由 API，提供类似 Vue-Router 的便捷使用体验，让路由管理更加灵活高效。
- ⚡️ 命令行工具：内置高效的命令行工具，git提交、删除文件、发布等。

无论是学习最新前端技术,还是开发企业级中后台项目,React SoybeanAdmin 都是您的不二之选。

## 分支

- `master` 分支: 最新稳定版本,基于 React19 + ReactRouter V7 版本
- `v18-router6` 分支: 基于 React18 + ReactRouter V6 版本

有问题都是会进行修复,如果需要使用旧版本,请切换到对应分支。 v18-router6 在未来3-5年依然会是市面上较为先进 功能强大的版本

## 版本

Expand All @@ -33,10 +66,14 @@
### Vue版本

- **NaiveUI 版本:**
- [预览地址](https://naive.soybeanjs.cn/)
- [Github 仓库](https://github.com/soybeanjs/soybean-admin)
- [Gitee 仓库](https://gitee.com/honghuangdc/soybean-admin)
- [预览地址](https://naive.soybeanjs.cn/) - 基于 Vue3 + NaiveUI 构建的清新优雅后台管理模板
- [Github 仓库](https://github.com/soybeanjs/soybean-admin) - 获取最新源码，参与开源贡献
- [Gitee 仓库](https://gitee.com/honghuangdc/soybean-admin) - 国内镜像仓库，访问更快捷
- 特点:
- 完整的 TypeScript 支持
- 丰富的主题配置
- 优雅的代码风格
- 完善的文档说明
- **AntDesignVue 版本:**
- [预览地址](https://antd.soybeanjs.cn/)
- [Github 仓库](https://github.com/soybeanjs/soybean-admin-antd)
Expand All @@ -47,22 +84,6 @@
- [Github 仓库](https://github.com/soybeanjs/soybean-admin/tree/legacy)


## 特性
- **前沿技术应用**：采用 React18, ReactRouter V6,Vite5, TypeScript, Redux/toolkit 和 UnoCSS 等最新流行的技术栈。
- **清晰的项目架构**：采用 pnpm monorepo 架构，结构清晰，优雅易懂。
- **严格的代码规范**：遵循 [SoybeanJS 规范](https://docs.soybeanjs.cn/zh/standard)，集成了eslint, prettier 和 simple-git-hooks，保证代码的规范性。
- **TypeScript**： 通过支持严格的类型检查和内置多个 hook 的类型推导，仅需定义简洁的类型，即可享受便捷的 TypeScript 类型提示，显著提升代码的可维护性。
- **丰富的主题配置**：内置多样的主题配置，与 UnoCSS 完美结合。
- **内置国际化方案**：轻松实现多语言支持。
- **丰富的路由功能**：基于 React-Router V6 扩展了路由 API，提供类似 Vue-Router 的便捷使用体验，让路由管理更加灵活高效。
- **自动化文件路由系统**：约定式路由,自动生成路由导入、声明和类型。更多细节请查看 [Elegant Router](https://github.com/mufeng889/react-auto-route)。
- **灵活的权限路由**：同时支持前端静态路由和后端动态路由。
- **丰富的页面组件**：内置多样页面和组件，包括403、404、500页面，以及布局组件、标签组件、主题配置组件等。
- **命令行工具**：内置高效的命令行工具，git提交、删除文件、发布等。
- **移动端适配**：完美支持移动端，实现自适应布局。
- **良好UI**：在发生错误的时候自动捕获错误，并显示友好界面，帮助用户快速定位和解决问题，还可以再组件内监控埋点上报。
## 符合Ant Design风格的保姆级文档

- [地址](https://react-soybean-docs.ohh-889.com/index-cn?theme=dark)
Expand Down

0 comments on commit 829780d

Please sign in to comment.