# 管理员端前端项目

## 项目概述

这是一个基于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