# react-template

**Repository Path**: qchen007/react-template

## Basic Information

- **Project Name**: react-template
- **Description**: vibing code react template
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-06
- **Last Updated**: 2026-04-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Admin - 后台管理系统

基于 React 19 + TypeScript + Ant Design 6.x 的后台管理系统，支持动态路由、权限控制、多标签页和国际化。

## 快速开始

```bash
npm install
npm run dev
```

## 功能特性

- **动态路由** - 基于后端菜单数据自动生成路由
- **权限控制** - 角色 + 权限点双重控制
- **多标签页** - 浏览器风格的多标签导航
- **国际化** - 中英文切换，i18n + Ant Design 组件本地化

## 技术栈

| 分类 | 技术 |
|------|------|
| 框架 | React 19 + TypeScript |
| 构建 | Vite |
| 路由 | React Router v7 |
| 状态 | Zustand (持久化) |
| UI | Ant Design 6.x |
| HTTP | Axios 拦截器封装 |
| i18n | react-i18next |

## 项目结构

```
src/
├── api/           # API 请求函数
├── components/    # 公共组件 (PrivateRoute, Permission, ErrorBoundary)
├── hooks/         # useDynamicRoutes, useHasPermission
├── i18n/          # i18n 配置
├── layout/        # MainLayout, Sidebar, HeaderBar, TabsNav
├── locales/       # zh-CN/, en-US/ 语言文件
├── mock/          # vite-plugin-mock 模拟接口
├── pages/         # 页面组件
├── router/        # 路由配置入口
├── store/         # Zustand store
├── styles/        # Less 全局样式
├── types/         # TypeScript 类型定义
└── utils/         # request, permission, menu 工具函数
```

## 登录账号

| 角色 | 用户名 | 密码 | 说明 |
|------|--------|------|------|
| 管理员 | admin | 123456 | 全部菜单和权限 |
| 普通用户 | user | 123456 | 受限访问 |

## 架构说明

### 动态路由

登录后调用 `/api/menus` 获取菜单树，前端根据 `component` 字段自动发现页面组件：

```
"system/user" → src/pages/system/user/index.tsx
```

### 状态管理

Zustand store 持久化到 localStorage：
- `user` - 用户信息
- `token` - 认证令牌
- `menus` - 菜单树
- `permissions` - 权限列表
- `locale` - 当前语言
- `tabs` / `collapsed` - UI 状态

### 权限控制

**路由级**：菜单配置 `meta.permissions`，无权限跳转 `/403`

**按钮级**：
```tsx
// Hook 方式
const canEdit = useHasPermission('user:edit')

// 组件方式
<Permission permissions={['user:edit']}>
  <Button>编辑</Button>
</Permission>
```

Admin 角色绕过所有权限检查。

### 请求封装

`src/utils/request.ts` 封装 axios 实例：
- 自动注入 `Authorization: Bearer <token>` 请求头
- 响应格式：`{ code: 200, data, message }`
- 401 跳转登录，403/500 显示错误提示

## Mock 接口

```
POST /api/login          # 登录
GET  /api/user/info      # 用户信息
GET  /api/menus          # 菜单树（按角色返回）
GET  /api/users          # 用户列表
GET  /api/roles          # 角色列表
GET  /api/logs           # 日志查询
```

## 新增页面

1. 创建 `src/pages/<module>/<page>/index.tsx`
2. 在菜单管理中添加配置，设置 `component` 字段
3. 设置 `meta.permissions` 控制访问权限
4. 页面标题使用 `meta.titleKey` 指向国际化 key

## 添加 API

```typescript
// src/api/user.ts
import request from '@/utils/request'

export const getUserList = (params?: object) => {
  return request.get('/api/users', { params })
}
```

## 国际化

语言文件位于 `src/locales/`：
```
src/locales/
├── zh-CN/common.json
└── en-US/common.json
```

Ant Design 组件本地化通过 `ConfigProvider` 的 `locale` 属性配置。

## License

MIT