1.0

front/README_ADMIN.md

@@ -0,0 +1,206 @@
+# 管理员端前端项目
+
+## 项目概述
+
+这是一个基于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