127 lines
2.7 KiB
Markdown
127 lines
2.7 KiB
Markdown
# 怼怼后台管理系统
|
|
|
|
基于 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
|
|
|