React Admin Template

一个基于React技术栈的中后台管理系统模板，提供清晰的项目结构和完整的功能实现。

技术栈

项目采用了最新的前端技术栈，以下是主要依赖及其版本：

核心框架

• React: 19.1.1 - 用于构建用户界面的JavaScript库
• React Router DOM: 7.8.2 - 用于实现客户端路由
• TypeScript: 5.9.2 - 为JavaScript添加类型系统

UI组件库

• Ant Design: 5.27.2 - 企业级UI设计语言和React组件库
• UnoCSS: 66.5.0 - 高性能、原子化的CSS引擎

开发工具

• Vite: 7.1.2 - 下一代前端构建工具
• ESLint: 9.33.0 - 代码质量检查工具

其他依赖

• @ant-design/icons: 5.6.1 - Ant Design的图标库
• @ant-design/v5-patch-for-react-19: 1.0.3 - 适配React 19的补丁

项目特点

💡 代码规范严谨，架构清晰 ⚡️ 开箱即用，无需复杂配置 🛠️ 丰富的组件和主题配置 📋 自动化的开发流程 🔧 完善的类型支持 🎯 响应式设计，适配多种设备

环境准备

确保你的环境满足以下要求：

• NodeJS: >=18.0.0，推荐 20.0.0 或更高
• pnpm: >= 8.0.0

安装与启动

克隆项目

git clone [your-repository-url]
cd react_admin0905

安装依赖

pnpm install

启动开发服务器

pnpm dev

构建生产版本

pnpm build

预览生产版本

pnpm preview

项目结构

src/
├── api/              # API接口定义
├── assets/           # 静态资源
├── components/       # 公共组件
├── pages/            # 页面组件
│   ├── Home.tsx      # 首页
│   ├── Login.tsx     # 登录页
│   ├── Shop.tsx      # 商品列表
│   ├── UserList.tsx  # 用户列表
│   └── NotFound.tsx  # 404页
├── router/           # 路由配置
├── styles/           # 样式文件
├── types/            # TypeScript类型定义
├── utils/            # 工具函数
├── App.tsx           # 应用入口组件
└── main.tsx          # 应用挂载点

核心功能

1. 路由系统

基于React Router DOM V7实现的路由管理，支持嵌套路由、动态路由和路由守卫。

2. 商品管理

实现商品列表展示、分页、搜索和筛选功能。

3. 用户管理

用户列表展示、状态管理和操作功能。

4. 登录认证

基于JWT的用户认证系统，包含登录页面和权限控制。

使用说明

商品列表页面

• 支持分页浏览商品数据
• 可通过商品名称和分类进行搜索筛选
• 提供商品编辑和删除操作

用户列表页面

• 展示系统用户信息
• 支持用户状态切换
• 提供用户详情查看

开发规范

代码规范

项目使用ESLint进行代码质量检查，遵循React官方推荐的编码规范。

提交规范

推荐使用以下提交信息格式：

<type>(<scope>): <subject>

其中type可以是：

• feat: 新功能
• fix: 修复bug
• docs: 文档变更
• style: 格式调整，不影响代码功能
• refactor: 代码重构，不添加新功能或修复bug
• test: 添加或修改测试代码
• chore: 构建过程或辅助工具变动

许可证

项目基于MIT许可证开源。

致谢

感谢所有为项目做出贡献的开发者。如有任何问题或建议，欢迎提交Issue或Pull Request。

---

祝您使用愉快！🎉