# react-demo

**Repository Path**: blue-cave/react-demo

## Basic Information

- **Project Name**: react-demo
- **Description**: 本项目是一个功能精简的 React 应用 Demo，仅包含必要页面，并配备了完整的开发环境与标准工程化配置（如 TypeScript、路由、ESLint、Prettier 等），便于快速上手或作为项目模板使用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-10
- **Last Updated**: 2025-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Admin Starter

一个基于 **Vite + React + TypeScript + Ant Design** 的现代管理后台脚手架。项目聚焦于统一的设计语言、登录与首页示例，以及可扩展的基础配置，帮助你快速搭建企业级前端应用。

## ✨ 功能特性

- React Router v6 + 动态路由守卫（受保护路由 / 公共路由）
- 基于上下文的登录态管理与自动注入的全局消息提醒
- Axios 请求实例、统一错误处理、Mock 机制可直接切换真实接口
- Ant Design 5 布局与组件示例，提供现代化的登录页和仪表盘
- 环境变量集中管理，可配置应用名称、接口地址、Mock
- TypeScript 全量接入，保持严格类型与生产构建通过

## 📂 目录结构

```text
src
├─ api/              # Axios 实例、业务接口
├─ components/       # 可复用的基础组件
├─ config/           # 环境变量和应用配置
├─ layouts/          # 应用布局
├─ router/           # 路由定义及守卫
├─ store/            # 全局状态（鉴权上下文）
├─ utils/            # 通用工具方法
└─ views/            # 页面视图（login、dashboard、error）
```

## 🚀 快速开始

```bash
npm install
npm run dev    # 启动开发服务器
npm run build  # 生产构建
npm run preview
npm run lint
```

开发环境默认启用 Mock 登录逻辑，可使用账号 `admin` / `123456` 体验完整流程。

## ⚙️ 环境变量说明

在项目根目录创建 `.env` 文件并根据需要进行配置：

```
VITE_APP_NAME=React 管理系统
VITE_API_BASE_URL=https://api.example.com
VITE_ENABLE_MOCK=true
```

- `VITE_APP_NAME`：自定义浏览器标题与布局展示的项目名称
- `VITE_API_BASE_URL`：后端接口的基础地址，留空时默认走 Mock
- `VITE_ENABLE_MOCK`：是否启用前端内置 Mock（true/false）

## 🔐 鉴权逻辑

- `AuthProvider` 负责管理登录态，内部持久化 token 并在初始化时尝试拉取用户信息
- `ProtectedRoute` 会在访问受限页面时自动判断是否登录，未登录则跳转到登录页
- `PublicRoute` 用于公共页面，若用户已登录会直接重定向到仪表盘

## 🌐 API 请求

- `src/api/http.ts` 创建了 axios 实例，并在请求拦截器自动注入 token
- `src/api/auth.ts` 演示了登录、获取用户信息的接口整合，当开启 Mock 时会返回示例数据

## 📦 扩展建议

- 在 `views/` 中继续扩展业务页面，通过 `router/index.tsx` 统一注册
- 使用 `store/` 目录增补更多全局状态（如权限、主题）
- 在 `api/` 中按模块拆分接口文件，保持请求逻辑集中管理

完成配置后，即可基于此模板快速迭代业务功能。欢迎根据实际需求自由定制！🛠️