# react-antd-pro

**Repository Path**: lengxiaoxu/react-antd-pro

## Basic Information

- **Project Name**: react-antd-pro
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-16
- **Last Updated**: 2025-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Ant Design Pro 模板项目

基于 React + TypeScript + Vite + Ant Design Pro 的企业级前端模板项目，开箱即用。

## 技术栈

### 核心框架
- **React 19** - 用户界面构建库
- **TypeScript** - JavaScript 的超集，提供类型支持
- **Vite 6** - 下一代前端构建工具
- **React Router 7** - 路由管理

### UI 组件库
- **Ant Design 5** - 企业级 UI 设计语言和组件库
- **Ant Design Pro Components** - 基于 Ant Design 的高级组件
- **Ant Design Pro Layout** - 布局组件

### 状态管理
- **Zustand** - 轻量级状态管理库

### 样式方案
- **TailwindCSS** - 实用优先的 CSS 框架
- **Less** - CSS 预处理器

### 工具库
- **Axios** - HTTP 客户端
- **ahooks** - React Hooks 库
- **dayjs** - 日期处理库
- **lodash-es** - JavaScript 工具库
- **crypto-js** - 加密库

## 快速开始

### 环境要求

- Node.js >= 18.0.0
- pnpm >= 8.0.0 (推荐) 或 npm >= 9.0.0

### 安装依赖

```bash
# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install
```

### 配置环境变量

1. 复制环境变量模板文件：

```bash
# 本地开发环境
cp envs/.env.localhost.example envs/.env.localhost

# 开发环境
cp envs/.env.development.example envs/.env.development

# 测试环境
cp envs/.env.test.example envs/.env.test

# 生产环境
cp envs/.env.production.example envs/.env.production
```

2. 根据实际情况修改环境变量文件中的配置

### 启动项目

```bash
# 本地开发（默认 localhost 模式）
pnpm dev

# 开发环境
pnpm start:dev

# 测试环境
pnpm start:test

# 生产环境
pnpm start:prod
```

### 构建项目

```bash
# 构建（默认 production 模式）
pnpm build

# 构建开发环境
pnpm build:dev

# 构建测试环境
pnpm build:test

# 构建生产环境
pnpm build:prod
```

## 项目结构

```
react-antd-pro-template/
├── envs/                    # 环境变量配置目录
│   ├── .env.example        # 环境变量示例
│   └── ...
├── public/                  # 静态资源目录
├── scripts/                 # 脚本目录
│   └── generate-api/       # API 生成脚本
├── src/
│   ├── apis/               # API 接口目录
│   ├── assets/              # 资源文件（图片、样式等）
│   ├── components/          # 通用组件
│   │   ├── BasicTable/      # 基础表格组件
│   │   ├── BasicModal/      # 基础弹窗组件
│   │   ├── BasicDrawer/     # 基础抽屉组件
│   │   └── ...
│   ├── configs/             # 配置文件
│   │   ├── app/             # 应用配置
│   │   ├── antd/            # Ant Design 主题配置
│   │   └── request/         # 请求配置
│   ├── dicts/               # 字典数据
│   ├── enums/               # 枚举定义
│   ├── hooks/               # 自定义 Hooks
│   ├── layout/              # 布局组件
│   ├── pages/               # 页面组件
│   │   ├── Login/           # 登录页
│   │   ├── Workbench/       # 工作台（示例页面）
│   │   └── Exceptions/      # 异常页面（404等）
│   ├── router/               # 路由配置
│   ├── store/                # 状态管理
│   ├── utils/                # 工具函数
│   ├── App.tsx              # 根组件
│   └── main.tsx             # 入口文件
├── .gitignore               # Git 忽略配置
├── eslint.config.js         # ESLint 配置
├── package.json             # 项目配置
├── postcss.config.js        # PostCSS 配置
├── tailwind.config.js       # TailwindCSS 配置
├── tsconfig.json            # TypeScript 配置
└── vite.config.ts           # Vite 配置
```

## 配置说明

### 应用配置

应用的基础配置在 `src/configs/app/index.ts` 中统一管理，包括：

- 项目名称、Logo 路径
- 默认路由、登录路由
- 主题色、CSS 变量前缀
- 系统设置（加密密钥等）

### 主题配置

Ant Design 主题配置在 `src/configs/antd/theme.ts` 中，支持：

- 主题色自定义
- CSS 变量前缀配置
- 组件样式定制

### 路由配置

路由配置采用模块化方式，在 `src/router/modules/` 目录下创建路由模块：

```typescript
// src/router/modules/example.tsx
import type { BasicRouteItem } from '@/router/index.type'

export const routes: BasicRouteItem[] = [
  {
    name: '示例页面',
    varName: 'example',
    icon: 'icon-example',
    path: '/example',
    componentPath: '/pages/Example',
    layout: '',
    isShow: true,
    isEnabled: true,
    sort: 1
  }
]
```

## 开发规范

### Git 提交规范

遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范：

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

**类型 (type)**:
- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 代码重构
- `perf`: 性能优化
- `test`: 测试相关
- `chore`: 构建/工具相关

**示例**:
```
feat(user): 添加用户管理功能
fix(login): 修复登录页面验证问题
docs(readme): 更新 README 文档
```

### 分支管理

- `main` - 主分支，保持可发布状态
- `dev` - 开发分支
- `feat/*` - 功能分支
- `bugfix/*` - Bug 修复分支
- `hotfix/*` - 热修复分支

### 代码规范

项目使用 ESLint + Prettier 进行代码检查和格式化：

```bash
# 检查代码
pnpm lint

# 格式化代码
pnpm format
```

## 常用功能

### 添加新页面

1. 在 `src/pages/` 目录下创建页面组件
2. 在 `src/router/modules/` 目录下添加路由配置
3. 在 `src/router/modules/index.tsx` 中导出路由

### 添加 API 接口

1. 在 `src/apis/` 目录下创建 API 文件
2. 参考 `src/apis/README.md` 了解如何添加 API

### 使用基础组件

项目提供了多个基础组件，可直接使用：

- `BasicTable` - 基础表格组件
- `BasicModal` - 基础弹窗组件
- `BasicDrawer` - 基础抽屉组件
- `BasicPage` - 基础页面组件

详细使用方法请参考各组件目录下的文档。

## 文档

- [快速开始指南](./docs/GETTING_STARTED.md)
- [配置说明](./docs/CONFIGURATION.md)
- [开发规范](./docs/DEVELOPMENT.md)
- [API 使用指南](./docs/API.md)

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！