怼怼后台管理系统

基于 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 类型支持
✅ 枚举常量管理

快速开始

安装依赖

npm install
# 或
yarn install
# 或
pnpm install

开发模式

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

预览生产构建

npm run preview

默认账号

用户名：任意密码：任意

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

开发说明

路由配置

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

状态管理

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

API 请求

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

类型定义

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

后续开发建议

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

License

MIT

2.7 KiB Raw Blame History