react antd console

Front-end solutions for back-end management systems

?Online Preview | ?Documentation

introduce

react-antd-console is a front-end solution for the back-end management system. It encapsulates the necessary functions of the back-end management system (such as login, authentication, menu, breadcrumbs, tabs, etc.) to help developers focus on rapid business development. The project is based on new versions such as React 18 , Ant design 5 , Vite and TypeScript . All technologies used will be continuously updated to the latest versions.

Who should use it?

If you are looking for a minimalist front-end template for back-end management, the technology stack is advanced and stable, you want to master the principles effortlessly, or you want to focus only on business development, then you can try this project. The author of this project is Summary of years of experience

as simple as possible

Whether you are using this project for development or learning purposes, keeping it simple is necessary. Therefore, this project focuses on: good code hierarchy design, clearly defined directory structure, module classification that is easy to modify and replace, etc. This project minimizes the encapsulation of some necessary functions, such as login, authentication, menu, breadcrumbs, tabs, etc. If you don’t have your own UI design, you can directly use the functions encapsulated in this project; if you have your own UI design, you can also make convenient modifications based on this project.

This project advocates minimalism, and the core source code is only about 3,400 lines. It’s easy to get started. In addition to documentation, there are also a series of articles to help you better master and use:

• Leg-to-leg, let you use react to masturbate the backstage, series one (Vite)
• Leg-to-leg, let you use React to play the backend, Series 2 (Project Skeleton)
• Leg-to-leg, let you use React to master the backend, Series 3 (Layout and Authentication)

Function

• Latest technology stack : Vite (supports热更新), React18 , Ant Design5 , TypeScript (nearly 100% type coverage)
• Focus on business : Encapsulated layout (side menu, breadcrumbs, tabs, headers and footers, etc.), you only need to专注于业务开发
• Permission management : supports菜单级and按钮级permissions
• Routing configuration : A minimalist configuration that automatically generates routing, menus, breadcrumbs, etc., supports nested routing, single/no layout and other configurations, supports dynamic changes in routing, etc.
• ? Data management :分层(data and view) architecture design, the data management solution theoretically supports access to any UI rendering library/framework (including but not limited to React/Vue/Angular)
• ? Color skin changing : supports any color switching in dark/light skin tone mode
• ?️Multi-tab : draggable multi-tab, supports persistence, right-click menu, etc.
• ? Elegant animation : supports route switching animation, tab page, menu, function button animation, etc.
• ? Other functions : such as响应式设计,国际化, Mock ,环境配置,工程化规范, etc.

quick start

 # 安装依赖
npm i

# 启动服务
npm start

Browser access http://localhost:9527

build

 # 构建生产环境包
npm run build:prod

Browser compatible

Compatible with browsers that support es2015, not compatible with IE. It is recommended to be no less than:

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

theme

Any main color switch

Yolk

Dark

Ocean

Monokai

Cosmic

multiple tags

?Online Preview | ?Documentation

How to support this project?

• If you like this project or think it is useful to you, please give our project a star ️
• Create pull requests, submit issues, suggest new features or update documentation?