基于 FastAPI + React + React Router DOM + Ant Design 的后台管理系统模板。
- ⚡ React Router DOM - 传统路由架构
- 🎨 Ant Design - 企业级 UI 组件库
- 🔐 认证鉴权 - 基于路由守卫的权限控制
- 📦 代码分割 - 自动懒加载优化性能
- 🎯 TypeScript - 严格类型检查
- 📝 Zustand - 轻量级状态管理
- 🌐 Axios - HTTP 请求库
- 💅 Tailwind CSS - 原子化 CSS 框架
- React 19
- TypeScript 5
- Vite 7
- React Router DOM
- Ant Design 6
- Zustand 5
- Zod 4
ui/
├── src/
│ ├── router/ # React Router 配置
│ │ └── router.tsx # 路由配置文件
│ ├── pages/ # 页面组件
│ │ ├── auth/ # 认证相关页面
│ │ ├── system/ # 系统管理页面
│ │ │ ├── Users.tsx # 用户管理
│ │ │ ├── Roles.tsx # 角色管理
│ │ │ └── Menus.tsx # 菜单管理
│ │ └── user/ # 用户中心页面
│ │ ├── Profile.tsx # 个人资料
│ │ └── Settings.tsx # 设置页面
│ ├── layouts/ # 布局组件
│ │ ├── AuthLayout.tsx # 认证布局
│ │ └── DashboardLayout.tsx # 仪表板布局
│ ├── components/ # 可复用组件
│ │ └── layout/ # 布局相关组件
│ ├── store/ # 状态管理 (Zustand)
│ ├── api/ # API 接口定义
│ │ ├── auth.ts # 认证相关API
│ │ └── system/ # 系统模块API
│ │ ├── menu.ts # 菜单API
│ │ ├── role.ts # 角色API
│ │ ├── user.ts # 用户API
│ │ └── dict.ts # 字典API
│ ├── utils/ # 工具函数
│ └── types/ # TypeScript 类型定义
├── docs/ # 项目文档
│ ├── FILE_BASED_ROUTING.md # File-Based Routing 说明
│ ├── LAYOUT_GUIDE.md # 布局指南
│ └── PAGES_REFACTOR.md # 页面重构说明
└── package.json
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 构建
pnpm build
# 预览构建结果
pnpm preview
# 代码检查
pnpm lint项目使用 React Router DOM 的配置式路由架构：
- ✅ 路由守卫 - 统一的认证和权限控制
- ✅ 懒加载 - 自动代码分割，优化首屏加载
- ✅ 类型安全 - 完整的 TypeScript 类型支持
- ✅ 嵌套路由 - 支持布局嵌套和路由分组
路由结构包括：
- 认证路由：登录等公共页面
- 仪表板路由：需要认证的页面
- 系统管理路由：用户、角色、菜单管理
- 用户中心路由：个人资料、设置等
详细文档请查看 File-Based Routing 指南。
项目采用分层布局结构：
- AuthLayout：用于登录等认证页面
- DashboardLayout：用于仪表板和系统管理页面，包含侧边栏导航
- 组件化结构：可复用的头部、侧边栏和标签页组件
前端通过 /api 前缀与后端通信，代理配置：
// vite.config.ts
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8001',
changeOrigin: true,
},
},
}API 按模块组织：
- auth.ts：认证相关接口
- system/：系统管理相关接口
- menu.ts：菜单管理
- role.ts：角色管理
- user.ts：用户管理
- dict.ts：字典管理
- 使用 Zustand persist 中间件持久化 Token
- 路由级别的认证守卫（
ProtectedRoute和PublicRoute） - 通过本地存储管理认证状态
- 支持路由重定向和权限控制
MIT
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.