# React_Admin_Template

**Repository Path**: han-jun-qiang/react_-admin_-template

## Basic Information

- **Project Name**: React_Admin_Template
- **Description**: 一个基于 React 19 + Vite + Ant Design 5 + TypeScript 的企业级后台管理系统模板。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-02
- **Last Updated**: 2026-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Admin Template

一个基于 React 19 + Vite + Ant Design 5 + TypeScript 的企业级后台管理系统模板。

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| React | ^19 | UI 框架 |
| Vite | ^8 | 构建工具 |
| TypeScript | ~6 | 类型系统 |
| Ant Design | ^5 | UI 组件库 |
| @ant-design/pro-components | ^2 | 高级组件（ProLayout 等） |
| React Router DOM | ^7 | 路由管理 |
| Zustand | ^5 | 状态管理 |
| Axios | ^1 | HTTP 请求 |

## 功能特性

- ✅ 登录 / 退出登录（Token 认证）
- ✅ 路由守卫（未登录自动跳转登录页）
- ✅ 仪表盘
- ✅ 用户管理
- ✅ 权限管理（角色管理 / 菜单管理）
- ✅ 亮色 / 暗色主题切换
- ✅ 403 / 404 错误页
- ✅ 代码规范（ESLint + Prettier + Husky）
- ✅ 生产环境 Express 静态服务 + API 代理

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 配置环境变量

```bash
cp .env.example .env.local
```

编辑 `.env.local`，填写你的后端 API 地址：

```env
PORT=3000
API_TARGET=http://your-api-server.com
```

### 3. 启动开发服务器

```bash
npm run dev
```

访问 [http://localhost:3000](http://localhost:3000)

## 可用命令

| 命令 | 说明 |
|------|------|
| `npm run dev` | 启动开发服务器 |
| `npm run build` | 构建生产包 |
| `npm run preview` | 预览生产包 |
| `npm start` | 启动生产 Express 服务 |
| `npm run lint` | 代码检查 |
| `npm run lint:fix` | 自动修复代码问题 |
| `npm run format` | 格式化代码 |

## 项目结构

```
src/
├── api/              # API 请求模块
│   └── modules/      # 按业务拆分的 API 模块
├── assets/           # 静态资源
├── layouts/          # 布局组件
├── locales/          # 国际化配置
├── pages/            # 页面组件
│   ├── 403/          # 无权限页
│   ├── 404/          # 404 页
│   ├── dashboard/    # 仪表盘
│   ├── login/        # 登录页
│   ├── permission/   # 权限管理
│   │   ├── menu/     # 菜单管理
│   │   └── role/     # 角色管理
│   └── user/         # 用户管理
├── router/           # 路由配置
├── store/            # 状态管理（Zustand）
├── types/            # TypeScript 类型定义
└── utils/            # 工具函数

server/               # 生产环境 Express 服务
├── config/
│   └── proxy.cjs     # API 代理配置
├── middleware/       # Express 中间件
└── index.cjs         # 服务入口
```

## API 代理配置

开发环境和生产环境的 API 代理均通过 `server/config/proxy.cjs` 统一管理。

修改 `.env.local` 中的 `API_TARGET` 即可切换代理目标：

```env
API_TARGET=http://your-api-server.com
```

前端请求 `/api/xxx` 会被代理到 `http://your-api-server.com/xxx`。

## 认证方式

使用 Token 认证，Token 存储在 `localStorage`（key: `token`）。

请求时自动在 Header 中携带：`Authorization: Bearer <token>`

当接口返回 `401` 时，自动清除 Token 并跳转到登录页。

## License

MIT