# vpbase

**Repository Path**: jhjd/vpbase

## Basic Information

- **Project Name**: vpbase
- **Description**: 基础的开发框架，用于快速实现系统开发，自带用户管理，权限管理，目录管理，角色管理。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-27
- **Last Updated**: 2026-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VpBase 后台管理系统

## 项目简介

VpBase 是一个基于 **Vue 3 + Element Plus + Pinia + Vue Router** 构建的全功能后台管理系统框架。包含前端用户管理、后台管理员管理、角色权限、菜单导航、操作日志、系统配置、文件管理和统计报表等完整功能模块。

采用红白配色主题（主色 `#EF4444`），布局结构为：**顶部导航栏 + 左侧菜单栏 + 标签导航 + 右侧内容区**。

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.5+ | 渐进式 JavaScript 框架 |
| Element Plus | 2.14+ | 企业级 UI 组件库 |
| Pinia | 3.0+ | 轻量级状态管理 |
| Vue Router | 4.5+ | 路由管理 |
| Vite | 6.1+ | 现代构建工具 |
| Less | 4.6+ | CSS 预处理器 |
| Tailwind CSS | 4.2+ | 原子化 CSS 框架 |
| ESLint + Prettier | - | 代码规范与格式化 |

## 项目结构

```
project/
├── web/                                 # 前端项目
│   ├── src/
│   │   ├── assets/                      # 静态资源
│   │   │   ├── images/                  # 图片资源
│   │   │   ├── base.less                # 基础样式
│   │   │   └── main.less                # 全局样式
│   │   ├── components/                  # 公共组件
│   │   │   └── icons/                   # 图标组件
│   │   ├── router/
│   │   │   └── index.js                 # 路由配置（前台+后台）
│   │   ├── stores/                      # Pinia 状态管理
│   │   │   └── counter.js
│   │   ├── views/
│   │   │   ├── frontend/                # 前台页面
│   │   │   │   ├── HomeView.vue         # 首页
│   │   │   │   ├── AboutView.vue        # 关于页
│   │   │   │   └── LoginView.vue        # 前台登录页
│   │   │   └── backend/                 # 后台管理页面
│   │   │       ├── LoginView.vue        # 后台登录页
│   │   │       ├── Dashboard.vue        # 控制台（统计概览）
│   │   │       ├── layout/
│   │   │       │   ├── AdminLayout.vue  # 后台管理布局组件
│   │   │       │   └── TabNav.vue       # 标签导航组件
│   │   │       ├── user/
│   │   │       │   ├── UserList.vue     # 前端用户列表
│   │   │       │   └── AdminUserList.vue # 后台管理员列表
│   │   │       ├── role/
│   │   │       │   └── RoleList.vue     # 角色管理与权限分配
│   │   │       ├── menu/
│   │   │       │   └── MenuList.vue     # 菜单与导航管理
│   │   │       ├── log/
│   │   │       │   ├── OperationLog.vue # 操作日志
│   │   │       │   └── SystemLog.vue    # 系统日志
│   │   │       ├── settings/
│   │   │       │   ├── BasicSettings.vue   # 基础配置
│   │   │       │   ├── ParamSettings.vue   # 参数配置
│   │   │       │   └── SecuritySettings.vue # 安全设置
│   │   │       ├── file/
│   │   │       │   └── FileList.vue     # 文件管理
│   │   │       └── stats/
│   │   │           └── StatsView.vue    # 统计与报表
│   │   ├── App.vue                      # 根组件
│   │   └── main.js                      # 入口文件
│   ├── package.json
│   ├── vite.config.js
│   └── index.html
├── install.sql                           # 数据库初始化脚本
└── README.md
```

## 后台管理系统路由表

| 路径 | 组件 | 模块 | 说明 |
|------|------|------|------|
| `/admin/login` | LoginView.vue | 登录 | 后台管理登录入口 |
| `/admin/dashboard` | Dashboard.vue | 控制台 | 统计卡片 + 最近操作日志 |
| `/admin/user` | UserList.vue | 用户管理 | 前端注册用户管理 |
| `/admin/admin-user` | AdminUserList.vue | 管理员管理 | 后台管理员与权限分配 |
| `/admin/role` | RoleList.vue | 角色管理 | 角色 CRUD + 权限树分配 |
| `/admin/menu` | MenuList.vue | 菜单管理 | 树形菜单配置 |
| `/admin/log/operation` | OperationLog.vue | 日志管理 | 操作日志查询与详情 |
| `/admin/log/system` | SystemLog.vue | 日志管理 | 系统错误日志监控 |
| `/admin/settings/basic` | BasicSettings.vue | 系统设置 | 网站信息/联系方式/SEO |
| `/admin/settings/param` | ParamSettings.vue | 系统设置 | 全局参数配置 |
| `/admin/settings/security` | SecuritySettings.vue | 系统设置 | 安全策略配置 |
| `/admin/file` | FileList.vue | 文件管理 | 文件上传/下载/预览 |
| `/admin/stats` | StatsView.vue | 统计报表 | 数据统计与图表展示 |

## 模块功能介绍

### 1. 用户管理
分为 **前端用户** 和 **后台管理员** 两个独立模块：

- **前端用户**（`/admin/user`）：管理前台注册的普通用户，支持用户名/邮箱搜索、状态启禁用、CRUD 操作。前端用户无角色字段，完全禁止访问后台管理系统。
- **后台管理员**（`/admin/admin-user`）：管理后台运营人员，包含角色字段（超级管理员/管理员/编辑员），支持权限树分配（7大模块细化到每个子页面的访问权限），显示最后登录时间。

### 2. 角色与权限管理
- 创建/编辑/删除后台角色（超级管理员、管理员、编辑员）
- 通过 `el-tree` 权限树为每个角色勾选可访问的菜单项
- 权限树覆盖全部后台模块：用户管理、角色管理、菜单管理、日志管理、系统设置、文件管理、统计报表

### 3. 菜单与导航管理
- 树形表格展示系统菜单结构
- 支持新增根菜单/子菜单，设置路由路径、组件路径、图标、排序
- 展开/折叠全部菜单节点
- 菜单状态（显示/隐藏）实时切换

### 4. 日志管理
- **操作日志**（`/admin/log/operation`）：记录管理员所有操作行为（登录/新增/编辑/删除/导出），支持按操作人、操作类型、时间范围筛选，可查看详情、导出和清空
- **系统日志**（`/admin/log/system`）：记录系统运行状态和错误信息，按日志级别（INFO/WARN/ERROR）和服务名称筛选，显示堆栈追踪信息

### 5. 系统设置
- **基础配置**：网站名称、Logo、描述、版权信息、联系方式、SEO 设置
- **参数配置**：时间格式、系统语言、每页条数、文件上传限制、通知开关、缓存与会话配置
- **安全设置**：登录失败锁定策略、密码复杂度要求、密码过期策略、单设备登录、会话超时、IP 白名单/黑名单

### 6. 文件管理
- 文件上传（支持拖拽上传）
- 按文件类型（图片/文档/视频/音频/其他）筛选
- 图片文件在线预览，其他类型提示下载查看
- 文件下载、删除、批量删除

### 7. 统计与报表
- 概览统计卡片（用户总数、今日访问量、月新增用户、今日操作数）
- 用户增长趋势柱状图（近7天）
- 访问来源分布图例
- 操作类型统计横向柱状图（近30天）
- 每日活跃用户 SVG 折线图（近7天）

### 8. 控制台（Dashboard）
- 4个统计概览卡片（用户总数、角色总数、今日操作日志、系统异常数）
- 最近5条操作日志快捷查看

## 数据库表结构

详见 `install.sql`，共包含 **8 张核心表**：

| 表名 | 说明 | 关联 |
|------|------|------|
| `sys_frontend_user` | 前端注册用户，无角色无后台权限 | - |
| `sys_admin_user` | 后台管理员，含角色编码 | → `sys_role.role_code` |
| `sys_role` | 后台角色定义（超级管理员/管理员/编辑员） | - |
| `sys_menu` | 菜单树（对应前端路由） | - |
| `sys_role_menu` | 角色-菜单权限关联 | → `sys_role` + `sys_menu` |
| `sys_operation_log` | 管理员操作行为日志 | → `sys_admin_user` |
| `sys_system_log` | 系统运行状态/错误日志 | - |
| `sys_file` | 上传文件记录 | → `sys_admin_user` |
| `sys_config` | 系统全局配置键值对 | - |

**用户体系设计**：
- 前端用户（`sys_frontend_user`）与后台管理员（`sys_admin_user`）**物理分表**
- 前端用户无任何角色/权限字段，彻底隔离
- 后台管理员通过 `role_code` 关联角色，角色通过 `sys_role_menu` 关联菜单权限
- 三级角色：`super_admin`（全部权限）→ `admin`（管理权限，不含安全设置）→ `editor`（内容管理与查看）

## 安装与运行

### 环境要求
- Node.js >= 18
- MySQL >= 5.7

### 安装依赖
```bash
cd web
npm install
```

### 数据库初始化
```bash
# 使用 MySQL 客户端执行
mysql -u root -p < install.sql
```

### 开发环境
```bash
npm run dev
```

### 生产构建
```bash
npm run build
```

### 预览构建结果
```bash
npm run preview
```

## 代码规范

```bash
# 运行 ESLint 检查并修复
npm run lint

# 运行 Prettier 格式化
npm run format
```

## 技术文档

- [Vue 3 官方文档](https://cn.vuejs.org/)
- [Element Plus 官方文档](https://element-plus.org/zh-CN/)
- [Pinia 官方文档](https://pinia.web3doc.top/)
- [Vue Router 官方文档](https://router.vuejs.org/zh/)
- [Vite 官方文档](https://cn.vitejs.dev/)

## 许可证

MIT