V2Board 管理后台

基于 Vue 3 + Element Plus 的 V2Board 管理后台前端项目。 telegram 群组：https://t.me/+wWbCwgKP5zFjMmFl

功能特性

• 🎯 现代化技术栈: Vue 3 + Composition API + Element Plus
• 🔐 完整的认证系统: 基于 JWT 的登录认证
• 📊 数据可视化: 集成 ECharts 图表展示
• 📱 响应式设计: 支持桌面端和移动端
• 🎨 主题定制: 支持明暗主题切换
• 🌍 国际化支持: 支持中英文切换
• 🔒 权限控制: 基于角色的访问控制

主要功能模块

1. 仪表盘

• 数据概览统计
• 用户增长趋势图
• 收入统计图表
• 最近订单列表

2. 用户管理

• 用户列表展示
• 用户信息编辑
• 用户状态管理
• 用户搜索筛选

3. 订单管理

• 订单列表展示
• 订单状态更新
• 订单详情查看
• 订单搜索筛选

4. 服务器管理

• 服务器组管理
• 节点管理
• 路由配置
• 协议配置 (Vmess/Trojan/Shadowsocks)

5. 工单管理

• 工单列表展示
• 工单回复处理
• 工单状态管理
• 图片上传支持

6. 系统设置

• 基础配置管理
• 邮件配置
• 支付配置
• 主题设置

技术栈

• 前端框架: Vue 3.3+
• 构建工具: Vue CLI 5
• UI 组件库: Element Plus 2.3+
• 状态管理: Vuex 4
• 路由管理: Vue Router 4
• HTTP 客户端: Axios
• 图表库: ECharts 5
• 样式预处理: SCSS
• 代码规范: ESLint + Prettier

项目结构

前端-管理员/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 接口
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   ├── config/            # 配置文件
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .eslintrc.js           # ESLint 配置
├── vue.config.js          # Vue CLI 配置
└── package.json           # 项目依赖

快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

安装依赖

npm install

开发环境运行

npm run serve

访问: http://localhost:8081

生产环境构建

npm run build

代码检查

npm run lint

配置说明

API 配置

在 src/config/index.js 中配置后端 API 地址：

API_CONFIG: {
  urlMode: 'static',
  staticBaseUrl: [
    'https://your-api-domain.com'
  ]
}

认证配置

管理后台使用 auth_data 进行认证，配置在 src/config/index.js 中：

AUTH_CONFIG: {
  authDataKey: 'admin_auth_data',
  authExpireHours: 24,
  autoRefreshAuth: true
}

后台路径

后台管理路径，配置在 src/utils/configManager.js 中：

修改所有字符串 ‘后台路径’

API 接口

认证相关

• POST /api/v1/passport/auth/login - 管理员登录
• POST /api/v1/passport/auth/logout - 管理员登出

管理后台

• GET /api/v1/后台路径/config/fetch - 获取系统配置
• POST /api/v1/后台路径/config/save - 保存系统配置
• GET /api/v1/后台路径/user/fetch - 获取用户列表
• GET /api/v1/后台路径/order/fetch - 获取订单列表
• GET /api/v1/后台路径/ticket/fetch - 获取工单列表

更新日志

v1.0.0 (2024-01-01)

• 初始版本发布
• 基础功能实现
• 用户管理模块
• 订单管理模块
• 系统设置模块

许可证

MIT License

联系方式

• 项目地址: [GitHub Repository]
• 问题反馈: [Issues]
• 文档地址: [Documentation]