shangbangbang/front/README_ADMIN.md

管理员端前端项目

项目概述

这是一个基于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. 安装依赖

cd front
npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

默认测试账户

管理员账户

• 手机号：13800138000
• 密码：admin123
• 权限：全部功能

代理商账户

• 手机号：13800138001
• 密码：agent123
• 权限：受限查看

API配置

项目已配置axios默认baseURL为/back，确保后端API正确运行在对应端口。

请求拦截器会自动添加token到请求头：

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