solosw
206 lines
4.9 KiB
Markdown
206 lines
4.9 KiB
Markdown
# 管理员端前端项目
|
||
|
||
## 项目概述
|
||
|
||
这是一个基于Vue 3 + Element Plus的管理员端前端项目，用于管理虚拟商品交易平台。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Vue 3 (Composition API)
|
||
- **UI库**: Element Plus
|
||
- **状态管理**: Pinia
|
||
- **路由**: Vue Router 4
|
||
- **HTTP客户端**: Axios
|
||
- **图表**: ECharts
|
||
- **构建工具**: Vite
|
||
- **样式**: CSS3 + Tailwind CSS
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── layouts/ # 布局组件
|
||
│ └── AdminLayout.vue # 管理端主布局
|
||
├── views/ # 页面组件
|
||
│ ├── Login.vue # 登录页面
|
||
│ └── admin/ # 管理端页面
|
||
│ ├── Dashboard.vue # 仪表盘
|
||
│ ├── Users.vue # 用户管理
|
||
│ ├── Scores.vue # 积分管理
|
||
│ └── orders/ # 订单管理
|
||
│ ├── PurchaseOrders.vue # 买单管理
|
||
│ └── SalesOrders.vue # 卖单管理
|
||
├── stores/ # Pinia状态管理
|
||
│ └── auth.js # 认证状态
|
||
├── router/ # 路由配置
|
||
│ └── index.js # 主路由文件
|
||
└── main.js # 应用入口
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
### 🔐 认证系统
|
||
- 支持管理员和代理商登录
|
||
- JWT Token认证
|
||
- 自动路由守卫
|
||
- 权限控制
|
||
|
||
### 👥 用户管理
|
||
- 用户列表查看（支持搜索、筛选、分页）
|
||
- 用户详情查看
|
||
- 用户创建、编辑、删除（仅管理员）
|
||
- 用户状态管理
|
||
- 权限级别显示
|
||
|
||
### 📋 订单管理
|
||
- 买单管理（查看、处理订单状态）
|
||
- 卖单管理（查看、处理订单状态）
|
||
- 订单详情查看
|
||
- 支持多条件筛选
|
||
- 订单状态流转
|
||
|
||
### ⭐ 积分管理
|
||
- 积分记录查看（支持搜索、筛选）
|
||
- 积分记录创建、编辑、删除（仅管理员）
|
||
- 积分变化统计
|
||
- 用户积分查询
|
||
|
||
### 📊 数据统计
|
||
- 仪表盘数据概览
|
||
- 用户角色分布图表
|
||
- 订单趋势图表
|
||
- 实时统计数据
|
||
|
||
### 🎨 界面特性
|
||
- 响应式设计，支持移动端
|
||
- 现代化UI设计
|
||
- 暗色侧边栏
|
||
- 面包屑导航
|
||
- 页面切换动画
|
||
- 数据加载状态
|
||
|
||
## 权限说明
|
||
|
||
### 管理员权限（system_role=0）
|
||
- ✅ 访问所有功能模块
|
||
- ✅ 用户管理（查看、创建、编辑、删除）
|
||
- ✅ 订单管理（查看、处理）
|
||
- ✅ 积分管理（查看、创建、编辑、删除）
|
||
- ✅ 商品管理（计划中）
|
||
- ✅ 系统配置（计划中）
|
||
|
||
### 代理商权限（system_role=1）
|
||
- ✅ 仪表盘查看（仅自己邀请的用户数据）
|
||
- ✅ 用户管理（仅查看自己邀请的用户）
|
||
- ✅ 订单管理（仅查看相关用户的订单）
|
||
- ✅ 积分管理（仅查看相关用户的积分记录）
|
||
- ❌ 无创建、编辑、删除权限
|
||
- ❌ 无商品管理权限
|
||
- ❌ 无系统配置权限
|
||
|
||
## 安装和运行
|
||
|
||
### 1. 安装依赖
|
||
```bash
|
||
cd front
|
||
npm install
|
||
```
|
||
|
||
### 2. 启动开发服务器
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 3. 构建生产版本
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
## 默认测试账户
|
||
|
||
### 管理员账户
|
||
- 手机号：`13800138000`
|
||
- 密码：`admin123`
|
||
- 权限：全部功能
|
||
|
||
### 代理商账户
|
||
- 手机号：`13800138001`
|
||
- 密码：`agent123`
|
||
- 权限：受限查看
|
||
|
||
## API配置
|
||
|
||
项目已配置axios默认baseURL为`/back`，确保后端API正确运行在对应端口。
|
||
|
||
请求拦截器会自动添加token到请求头：
|
||
```javascript
|
||
headers: {
|
||
token: localStorage.getItem('token')
|
||
}
|
||
```
|
||
|
||
响应拦截器会自动处理401未授权错误，跳转到登录页面。
|
||
|
||
## 开发规范
|
||
|
||
### 组件命名
|
||
- 页面组件：PascalCase（如：`Users.vue`）
|
||
- 布局组件：PascalCase + Layout后缀（如：`AdminLayout.vue`）
|
||
- 通用组件：PascalCase（如：`DataTable.vue`）
|
||
|
||
### 状态管理
|
||
- 使用Pinia进行状态管理
|
||
- 按功能模块划分store
|
||
- 使用Composition API风格
|
||
|
||
### 样式规范
|
||
- 优先使用Element Plus组件样式
|
||
- 使用scoped CSS避免样式污染
|
||
- 响应式设计，移动端适配
|
||
- 使用CSS变量统一主题色彩
|
||
|
||
### 代码规范
|
||
- 使用Composition API
|
||
- 使用TypeScript类型注解（计划中）
|
||
- 函数和变量使用camelCase命名
|
||
- 常量使用UPPER_SNAKE_CASE命名
|
||
|
||
## 待开发功能
|
||
|
||
- [ ] 商品管理页面
|
||
- [ ] 系统配置管理
|
||
- [ ] 数据导出功能
|
||
- [ ] 批量操作功能
|
||
- [ ] 个人信息管理
|
||
- [ ] 操作日志记录
|
||
- [ ] 系统通知功能
|
||
- [ ] 文件上传组件
|
||
- [ ] 富文本编辑器
|
||
- [ ] 国际化支持
|
||
|
||
## 注意事项
|
||
|
||
1. **权限控制**：代理商只能看到自己邀请的用户相关数据
|
||
2. **数据过滤**：前端路由守卫 + 后端API权限双重保护
|
||
3. **错误处理**：统一的错误提示和处理机制
|
||
4. **性能优化**：按需加载、虚拟滚动等优化措施
|
||
5. **安全性**：Token自动过期处理、XSS防护
|
||
|
||
## 浏览器支持
|
||
|
||
- Chrome >= 87
|
||
- Firefox >= 78
|
||
- Safari >= 14
|
||
- Edge >= 88
|
||
|
||
## 贡献指南
|
||
|
||
1. Fork项目
|
||
2. 创建特性分支
|
||
3. 提交更改
|
||
4. 推送到分支
|
||
5. 创建Pull Request
|
||
|
||
## 许可证
|
||
|
||
MIT License |