# 怼怼后台管理系统

基于 React + Vite + Ant Design 的现代化后台管理系统脚手架。

## 技术栈

- **框架**: React 18
- **构建工具**: Vite 5
- **UI 组件库**: Ant Design 5
- **路由**: React Router 6
- **状态管理**: Zustand
- **HTTP 客户端**: Axios
- **语言**: TypeScript
- **日期处理**: Day.js

## 项目结构

```
duidui_new_admin_web/
├── public/                 # 静态资源
├── src/
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   ├── constants/         # 常量和枚举
│   ├── layouts/           # 布局组件
│   ├── pages/             # 页面组件
│   │   ├── Dashboard/     # 仪表盘
│   │   ├── Login/         # 登录页
│   │   ├── User/          # 用户管理
│   │   └── NotFound/      # 404页面
│   ├── routes/            # 路由配置
│   ├── store/             # 状态管理
│   ├── types/             # 类型定义
│   ├── utils/             # 工具函数
│   ├── App.tsx           # 应用入口
│   ├── main.tsx          # 主文件
│   └── index.css         # 全局样式
├── index.html            # HTML模板
├── package.json          # 依赖配置
├── tsconfig.json         # TS配置
└── vite.config.ts        # Vite配置
```

## 功能特性

- ✅ 用户登录/登出
- ✅ 路由守卫
- ✅ 响应式布局
- ✅ 侧边栏菜单
- ✅ 用户信息管理
- ✅ HTTP 请求拦截
- ✅ 本地存储封装
- ✅ TypeScript 类型支持
- ✅ 枚举常量管理

## 快速开始

### 安装依赖

```bash
npm install
# 或
yarn install
# 或
pnpm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 默认账号

用户名：任意
密码：任意

（当前为模拟登录，可输入任意账号密码）

## 开发说明

### 路由配置

路由配置在 `src/routes/index.tsx` 中，使用了路由守卫来保护需要登录的页面。

### 状态管理

使用 Zustand 进行状态管理，用户信息存储在 `src/store/useUserStore.ts` 中。

### API 请求

封装了 Axios 请求，配置了请求/响应拦截器，统一处理错误和 Token。

### 类型定义

所有类型定义和枚举都在 `src/types/` 和 `src/constants/` 中，便于维护和类型检查。

## 后续开发建议

1. 接入真实的后端 API
2. 完善用户权限控制
3. 添加更多业务页面
4. 完善表单验证
5. 添加数据可视化图表
6. 优化性能和用户体验
7. 添加单元测试

## License

MIT