# 予书管理系统 - 前端

基于 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+

---

## 安装部署

### 开发环境

```bash
# 进入项目目录
cd yushu-uivue3

# 安装依赖
npm install

# 启动开发服务
npm run dev

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

### 生产环境

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

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

### Nginx 部署

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

```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)

```properties
# 开发环境
VITE_APP_ENV = 'development'

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

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

### 生产环境 (.env.production)

```properties
# 生产环境
VITE_APP_ENV = 'production'

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

---

## 内置功能

### 系统管理

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

### 系统监控

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

### 开发工具

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

---

## 致谢

本项目基于 [RuoYi-Vue3](https://gitee.com/y_project/RuoYi-Vue) 进行二次开发，感谢若依团队的开源贡献。