yushu/yushu-uivue3

予书管理系统 - 前端

基于 Vue3 + Element Plus + Vite 的企业级管理系统前端

---

简介

予书管理系统前端采用最新的 Vue3 技术栈，配合 Element Plus 组件库，实现现代化的企业级后台管理界面。

---

技术栈

技术	说明	版本
Vue	渐进式 JavaScript 框架	3.x
Element Plus	Vue3 组件库	2.x
Vite	下一代前端构建工具	4.x
Pinia	Vue 状态管理	2.x
Vue Router	路由管理	4.x
Axios	HTTP 请求库	0.27.x
Sass	CSS 预处理器	1.x

---

UI 特性

• 玻璃拟态（Glassmorphism）设计风格
• 深色/浅色主题切换
• 动态光效与流畅动画
• 响应式布局适配
• 自定义 Element Plus 组件样式

---

环境要求

• Node.js 16.0+
• npm 8.0+ 或 yarn 1.22+

---

安装部署

开发环境

# 进入项目目录
cd yushu-uivue3

# 安装依赖
npm install

# 启动开发服务
npm run dev

# 访问地址
http://localhost:80

生产环境

# 构建生产环境
npm run build:prod

# 构建测试环境
npm run build:stage

Nginx 部署

将 dist 目录下的文件部署到 Nginx：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

---

项目结构

yushu-uivue3/
├── public/                     # 静态资源
│   └── favicon.ico
├── src/
│   ├── api/                    # API 接口定义
│   │   ├── system/             # 系统管理接口
│   │   ├── monitor/            # 系统监控接口
│   │   └── tool/               # 开发工具接口
│   ├── assets/                 # 项目资源
│   │   ├── icons/              # 图标资源
│   │   ├── images/             # 图片资源
│   │   └── styles/             # 全局样式
│   │       ├── index.scss      # 样式入口
│   │       ├── element-ui.scss # Element Plus 样式覆盖
│   │       ├── sidebar.scss    # 侧边栏样式
│   │       └── variables.module.scss
│   ├── components/             # 公共组件
│   │   ├── Breadcrumb/         # 面包屑
│   │   ├── HeaderSearch/       # 头部搜索
│   │   ├── IconSelect/         # 图标选择器
│   │   ├── Pagination/         # 分页组件
│   │   ├── RightToolbar/       # 右侧工具栏
│   │   └── ...
│   ├── directive/              # 自定义指令
│   ├── layout/                 # 布局组件
│   │   ├── components/         # 布局子组件
│   │   └── index.vue           # 主布局
│   ├── plugins/                # 插件配置
│   ├── router/                 # 路由配置
│   ├── store/                  # Pinia 状态管理
│   │   └── modules/            # 状态模块
│   ├── utils/                  # 工具函数
│   │   ├── request.js          # Axios 封装
│   │   ├── auth.js             # 认证相关
│   │   └── validate.js         # 表单验证
│   └── views/                  # 页面视图
│       ├── dashboard/          # 首页仪表盘
│       ├── system/             # 系统管理
│       │   ├── user/           # 用户管理
│       │   ├── role/           # 角色管理
│       │   ├── menu/           # 菜单管理
│       │   ├── dept/           # 部门管理
│       │   ├── post/           # 岗位管理
│       │   ├── dict/           # 字典管理
│       │   ├── param/          # 参数管理
│       │   ├── notice/         # 通知公告
│       │   ├── file/           # 文件管理
│       │   └── icon/           # 图标管理
│       ├── monitor/            # 系统监控
│       │   ├── online/         # 在线用户
│       │   ├── job/            # 定时任务
│       │   ├── operlog/        # 操作日志
│       │   ├── logininfor/     # 登录日志
│       │   ├── server/         # 服务监控
│       │   ├── cache/          # 缓存监控
│       │   └── druid/          # 数据源监控
│       ├── tool/               # 开发工具
│       │   ├── gen/            # 代码生成
│       │   ├── build/          # 表单构建
│       │   └── swagger/        # 接口文档
│       └── error/              # 错误页面
├── .env.development            # 开发环境配置
├── .env.production             # 生产环境配置
├── .env.staging                # 测试环境配置
├── vite.config.js              # Vite 配置
├── package.json                # 项目依赖
└── README.md                   # 项目说明

---

环境配置

开发环境 (.env.development)

# 开发环境
VITE_APP_ENV = 'development'

# 接口地址
VITE_APP_BASE_API = '/dev-api'

# 代理目标地址
VITE_APP_PROXY_TARGET = 'http://localhost:8080'

生产环境 (.env.production)

# 生产环境
VITE_APP_ENV = 'production'

# 接口地址
VITE_APP_BASE_API = '/prod-api'

---

内置功能

系统管理

功能	说明
用户管理	系统用户配置与权限分配
角色管理	角色权限分配，支持数据权限范围划分
菜单管理	配置系统菜单、操作权限、按钮权限
部门管理	组织机构树形结构管理
岗位管理	用户职务配置
字典管理	系统常用固定数据维护
参数管理	系统动态配置参数
通知公告	系统通知信息发布
文件管理	系统文件上传与管理
图标管理	系统图标资源管理

系统监控

功能	说明
在线用户	当前活跃用户状态监控，支持强制下线
定时任务	任务调度管理与执行日志
操作日志	系统操作日志记录与查询
登录日志	用户登录记录与异常查询
服务监控	CPU、内存、磁盘、JVM 等系统信息
缓存监控	Redis 缓存信息与命令统计
数据源监控	数据库连接池状态监控

开发工具

功能	说明
代码生成	根据数据库表生成前后端代码
表单构建	可视化表单设计器
系统接口	Swagger API 接口文档

---

致谢

本项目基于 RuoYi-Vue3 进行二次开发，感谢若依团队的开源贡献。