react antd console

後台管理系統的前端解決方案

?線上預覽| ?文檔

介紹

react-antd-console 是一個後台管理系統的前端解決方案，封裝了後台管理系統必要功能（如登入、鑑權、選單、麵包屑、標籤頁等），幫助開發人員專注於業務快速開發。專案基於React 18 、 Ant design 5 、 Vite和TypeScript等新版本。對於所使用的各項技術，會持續更新至最新版本

誰適合使用？

如果你正在尋找一款極簡的後台管理的前端模板，技術棧能先進且穩定，希望毫不費力地掌握其中的原理，或希望只專注於業務開發，那麼可以嘗試本項目，本項目是作者多年經驗的總結

盡可能簡單

無論是使用本專案做開發，或是學習的目的，保持簡單是必要的。因此本專案專注於：良好的程式碼層次設計、定義清晰明確的目錄結構、容易改造和拆換的模組分類等。本專案最小化的封裝了一些必要的功能，例如登入、鑑權、選單、麵包屑、標籤頁等。如果你沒有自己的UI設計，那麼可以直接使用本專案封裝的功能；如果你有自己的UI設計，那麼也可以在本專案基礎上作方便的改造

本專案崇尚極簡，核心原始碼量大約只有3400 行。上手簡單，除文件外，還有系列文章方便大家更好掌握和使用:

• 腿夾腿，帶你用react擼後台，系列一（Vite篇）
• 腿夾腿，帶你用react擼後台，系列二（項目骨架篇）
• 腿夾腿，帶你用react擼後台，系列三（版面與鑑權篇）

功能

• 最新技術堆疊: Vite (支援热更新)、 React18 、 Ant Design5 、 TypeScript (近乎100%的類型覆蓋)
• 專注業務: 封裝好的佈局(側邊選單、麵包屑、標籤頁、頁頭頁腳等)，只需要专注于业务开发
• 權限管理: 支援菜单级和按钮级權限
• 路由配置: 一份極簡配置，自動產生路由、選單、麵包屑等，支援嵌套路由、單一/無佈局等配置，支援路由動態變化等
• ?資料管理:分层（資料與檢視）架構設計，資料管理方案理論上支援存取任意UI渲染函式庫/框架（包含不限於React/Vue/Angular）
• ? 顏色換膚: 支援深/淺膚色模式下的任意顏色切換
• ?️ 多標籤頁: 可拖曳的多標籤頁，支援持久化、右鍵選單等
• ?優雅動畫: 支援路由切換動畫，標籤頁、選單、功能按鈕動畫等
• ?其他功能: 如响应式设计、国际化、 Mock 、环境配置、工程化规范等

快速開始

 # 安装依赖
npm i

# 启动服务
npm start

瀏覽器造訪http://localhost:9527

建構

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

瀏覽器相容

相容於支援es2015的瀏覽器，不相容IE，建議不低於:

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

主題

任意主色切換

Yolk

Dark

Ocean

Monokai

Cosmic

多標籤

?線上預覽| ?文檔

如何支持本項目?

• 如果喜歡這個項目或認為對你有用，請給我們的項目star ️
• 建立pull requests、提交issues、建議新功能或更新文件?