# 【RuoYi-SpringBoot3-ElementPlus】：若依前端增强版 —— 功能扩展优化

## 一、项目定位

[RuoYi-SpringBoot3-ElementPlus](https://github.com/undsky/RuoYi-SpringBoot3-ElementPlus)这是一个基于 RuoYi-Vue3 的增强版前端项目，100% 保留原有功能，同时新增大量实用组件和开发工具，显著提升开发效率和用户体验。

**核心特点：**
- ✅ 保留若依所有功能，无缝替换
- ✅ 新增 8+ 实用业务组件
- ✅ 集成主流工具库和插件
- ✅ 开发工具链完善
- ✅ 支持三级等保安全标准


## 二、新增功能

### 2.1 省市区级联选择器 —— 中国行政区划完美方案

**痛点：** 项目中经常需要用户选择地址，Element Plus 原生组件需要自己准备数据源，数据量大且不易维护。

**解决方案：** 内置 `RegionCascader` 组件，开箱即用。

```vue
<template>
  
  <RegionCascader v-model="region" placeholder="请选择省市区" />
  
  
  <RegionCascader v-model="region" :level="2" />
  
  
  <RegionCascader v-model="region" :level="1" />
</template>

<script setup>
import { ref } from 'vue'
const region = ref([]) // 返回: ['山东省', '青岛市', '市南区']
</script>
```

**核心特性：**
- 支持 1-3 级灵活配置
- 数据懒加载，性能优秀
- 全局注册，直接使用
- 数据来自后端接口，实时更新

### 2.2 千分位输入框 —— 金额输入不再繁琐

**应用场景：** 电商订单、财务报表、数据统计等涉及金额的场景。

```vue
<template>
  <InputNumberQianfen 
    v-model="amount" 
    :digits="2" 
    placeholder="请输入金额" 
  />
  
  
  
</template>
```

**核心特性：**
- 自动千分位格式化
- 支持小数位数控制
- 输入时自动解析数字
- 支持负数和小数

**实现原理：** 基于 `xe-utils` 的 `commafy` 函数，轻量且高效。

### 2.3 图片上传增强 —— 拖拽、视频、大文件全支持

这是对原版 ImageUpload 组件的**全面重构**，功能提升 10 倍以上。

**8 大核心升级：**

**① 拖拽上传**
```vue
<ImageUpload v-model="images" :drag="true" />

```

**② 视频和音频支持**
```vue
<ImageUpload 
  v-model="video"
  :file-type="['mp4', 'webm']"
  accept="video/*"
/>

```

**③ 大文件支持**
- 原版：5MB 限制
- 增强版：50MB 限制（可配置到 100MB）

**④ 图片懒加载**
```html


```

**⑤ 专业图片预览器**
- 集成 `el-image-viewer` 组件
- 支持放大、缩小、旋转
- 支持键盘快捷键（← → ESC）
- 支持图片列表浏览

**⑥ 移动端完美适配**
- 自动识别设备类型
- 移动端预览全屏显示
- 触摸手势支持

**⑦ 多种数据格式**
```javascript
// 支持 3 种数据格式
form.images = 'img1.jpg,img2.jpg'  // 逗号分隔字符串
form.video = ['video1.mp4']        // 数组
form.album = '["p1.jpg","p2.jpg"]' // JSON 字符串
```

**⑧ 防重复删除**
- 添加状态标记，防止快速点击导致的重复删除
- 确保数据一致性

**功能对比：**

| 功能 | RuoYi-Vue3 | 增强版 |
|------|-----------|-------|
| 拖拽上传 | ❌ | ✅ |
| 视频支持 | ❌ | ✅ |
| 图片懒加载 | ❌ | ✅ |
| 专业预览器 | ❌ | ✅ |
| 移动端适配 | 基础 | 完美 |
| 文件大小 | 5MB | 50MB |
| JSON 格式 | ❌ | ✅ |

### 2.4 UEditor 富文本编辑器

**为什么需要两个富文本编辑器？**
- **Vue Quill**：轻量级，适合简单场景（如文章摘要、评论）
- **UEditor**：功能强大，适合复杂场景（如文章编辑、新闻发布）

**UEditor 优势：**
- 支持图片、视频、音频上传
- 支持表格编辑
- 支持公式编辑（数学公式、化学式）
- 支持代码高亮
- 支持全屏编辑

## 三、开发工具增强

### 3.1 代码检查器 —— 浏览器中直接定位代码

**痛点：** 看到浏览器页面效果，想修改代码，需要手动在项目中查找对应文件。

**解决方案：** 集成 `code-inspector-plugin`。

**使用方法：**
1. 按住 `Ctrl + Shift`（Mac 用 `Cmd + Shift`）
2. 点击页面任意元素
3. IDE 自动打开对应的源代码文件

**效果：** 开发效率提升 50% 以上，告别手动查找文件。

### 3.2 Prettier 代码格式化

**统一团队代码风格，避免代码评审时的格式争议。**

```javascript
// prettier.config.cjs 配置示例
module.exports = {
  semi: false,            // 不使用分号
  singleQuote: true,      // 使用单引号
  tabWidth: 2,            // 缩进 2 空格
  trailingComma: 'none',  // 不使用尾随逗号
  printWidth: 120         // 每行最多 120 字符
}
```

**集成效果：**
- 保存时自动格式化
- 支持 Vue、JS、CSS、HTML 等文件
- 全团队统一风格

### 3.3 FTP/SFTP 自动部署

**痛点：** 每次构建后需要手动上传文件到服务器，繁琐且容易出错。

**解决方案：** 内置部署脚本，构建完成自动上传。

**配置文件（ftp/ftp.js）：**
```javascript
const config = {
  user: "admin",                  // FTP 用户名
  password: "password123",         // FTP 密码
  host: "example.com",            // 服务器地址
  port: 21,                       // FTP 端口
  localRoot: "./dist",            // 本地构建目录
  remoteRoot: "/www/admin"        // 远程目标路径
}
```

**使用方法：**
```bash
npm run build:prod
# 构建完成后自动上传到服务器，无需手动操作
```

## 四、工具库生态

### 4.1 dayjs —— 轻量级日期处理

替代臃肿的 moment.js，体积仅 2KB。

```javascript
import dayjs from 'dayjs'

// 格式化
dayjs().format('YYYY-MM-DD HH:mm:ss')  // 2024-11-28 14:30:00

// 相对时间
dayjs().from(dayjs('2024-01-01'))      // 10 个月前

// 日期计算
dayjs().add(7, 'day')                  // 7 天后
dayjs().subtract(1, 'month')           // 1 个月前
```

### 4.2 xe-utils —— 300+ 实用函数

涵盖日常开发常见场景的工具函数库。

```javascript
import { commafy, clone, isEmpty, throttle } from 'xe-utils'

// 千分位格式化
commafy(1234567.89)  // "1,234,567.89"

// 深拷贝
const obj2 = clone(obj1)

// 判空（比自己写更严谨）
isEmpty(null)      // true
isEmpty('')        // true
isEmpty([])        // true
isEmpty({})        // true

// 节流函数
const handleScroll = throttle(() => {
  console.log('滚动事件')
}, 300)
```

### 4.3 mitt —— 事件总线

Vue 3 推荐的组件通信方案，替代 Vue 2 的 EventBus。

```javascript
// 创建事件总线
import mitt from 'mitt'
const emitter = mitt()

// 组件 A：触发事件
emitter.emit('refresh', { id: 123 })

// 组件 B：监听事件
emitter.on('refresh', (data) => {
  console.log('收到刷新事件', data.id)
})
```

### 4.4 sortablejs —— 拖拽排序

强大的拖拽库，支持列表、表格、卡片等场景。

```vue
<template>
  <div ref="listRef">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import Sortable from 'sortablejs'
import { onMounted, ref } from 'vue'

const listRef = ref()
const list = ref([
  { id: 1, name: '项目一' },
  { id: 2, name: '项目二' }
])

onMounted(() => {
  Sortable.create(listRef.value, {
    animation: 150,  // 动画效果
    onEnd: (evt) => {
      // 拖拽完成，更新数组顺序
      const item = list.value.splice(evt.oldIndex, 1)[0]
      list.value.splice(evt.newIndex, 0, item)
    }
  })
})
</script>
```

### 4.5 Vant —— 移动端 UI

轻量、可靠的移动端组件库，适配移动端场景。

```vue
<template>
  <van-button type="primary">按钮</van-button>
  <van-field v-model="username" placeholder="请输入用户名" />
  <van-picker :columns="columns" @confirm="onConfirm" />
</template>

<script setup>
import { Button, Field, Picker } from 'vant'
</script>
```

## 五、安全合规增强

### 三级等保 —— 用户无操作自动登出

**法规要求：** 根据《信息安全技术 网络安全等级保护基本要求》（GB/T 22239-2019），三级等保系统需要支持"用户长时间无操作自动登出"功能。

**实现原理：**
```javascript
// 监听用户的键盘、鼠标、滚动操作
// 每次操作重置计时器
// 超时自动退出登录
```

**配置方法（.env.production）：**
```bash
# 30 分钟无操作自动登出
VITE_LOGOUT_LIMIT=1800000

# 60 分钟无操作自动登出
VITE_LOGOUT_LIMIT=3600000

# 不启用自动登出
VITE_LOGOUT_LIMIT=0
```

**监控的操作类型：**
- 🖱️ 鼠标移动、点击
- ⌨️ 键盘按键
- 📜 页面滚动


## 六、快速开始

### 6.1 环境准备

```bash
Node.js >= 20
npm 或 yarn 或 pnpm
```

### 6.2 安装启动

```bash
# 1. 克隆项目
git clone https://github.com/undsky/RuoYi-SpringBoot3-ElementPlus.git
cd RuoYi-SpringBoot3-ElementPlus

# 2. 安装依赖（使用国内镜像加速）
npm install --registry=https://registry.npmmirror.com

# 3. 启动开发服务器
npm run dev

# 4. 浏览器访问
http://localhost:80
```

### 6.3 构建部署

```bash
# 构建生产环境（自动部署到服务器）
npm run build:prod

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

# 本地预览构建结果
npm run preview
```

## 七、与原版对比

| 功能 | RuoYi-Vue3 | 增强版 | 说明 |
|------|-----------|-------|------|
| 省市区选择器 | ❌ | ✅ | 三级联动，开箱即用 |
| 千分位输入 | ❌ | ✅ | 金额场景适用 |
| UEditor | ❌ | ✅ | 功能更强大 |
| 图片上传 | 基础 | 增强 | 拖拽、视频、大文件 |
| 日期处理 | ❌ | dayjs | 轻量级，仅 2KB |
| 事件总线 | ❌ | mitt | 组件通信 |
| PDF 预览 | ❌ | pdf-vue3 | 在线预览 |
| 拖拽排序 | ❌ | sortablejs | 拖拽功能 |
| 移动端 UI | ❌ | Vant | 移动端适配 |
| 工具函数 | ❌ | xe-utils | 300+ 函数 |
| 代码检查器 | ❌ | ✅ | 效率提升 50% |
| 代码格式化 | ❌ | Prettier | 统一风格 |
| 自动部署 | ❌ | FTP/SFTP | 一键部署 |
| 三级等保 | ❌ | ✅ | 自动登出 |

## 八、项目结构

```
RuoYi-SpringBoot3-ElementPlus/
├── ftp/                          # 🆕 FTP/SFTP 部署
│   ├── ftp.js                   # FTP 脚本
│   └── sftp.js                  # SFTP 脚本
├── public/
│   └── UEditorPlus/             # 🆕 UEditor 资源
├── src/
│   ├── api/
│   │   └── biz/                 # 🆕 业务接口
│   │       └── Region.js        # 省市区接口
│   ├── components/
│   │   ├── ImageUpload/         # 🆕 图片上传增强
│   │   ├── InputNumberQianfen/  # 🆕 千分位输入
│   │   ├── RegionCascader/      # 🆕 省市区选择
│   │   └── UEditorPlus/         # 🆕 UEditor 富文本
│   ├── views/
│   │   └── login2.vue           # 🆕 第二种登录页
│   └── App.vue                   # 🆕 自动登出逻辑
├── .prettierignore              # 🆕 格式化配置
├── prettier.config.cjs          # 🆕 格式化规则
└── vite.config.js               # 代码检查器配置

🆕 = 新增功能
```

## 九、配置说明

### 9.1 后端接口地址

```javascript
// vite.config.js
const baseUrl = 'http://localhost:8087' // 修改为实际后端地址
```

### 9.2 自动登出配置

```bash
# .env.production
VITE_LOGOUT_LIMIT=1800000  # 30分钟（建议值）
```

### 9.3 FTP 部署配置

```javascript
// ftp/ftp.js
const config = {
  user: "your-username",
  password: "your-password",
  host: "your-server.com",
  port: 21,
  localRoot: "./dist",
  remoteRoot: "/www/admin"
}
```


## 十一、总结

RuoYi-SpringBoot3-ElementPlus 是一个**生产级别**的前端项目，它不是简单的组件堆砌，而是经过深思熟虑的增强和优化。

**核心价值：**

1. **开箱即用的业务组件**
   - 省市区选择、千分位输入等常见需求
   - 无需重复造轮子，节省开发时间

2. **完善的开发工具链**
   - 代码检查器、格式化、自动部署
   - 提升开发效率和团队协作

3. **丰富的工具库生态**
   - dayjs、xe-utils、mitt 等主流库
   - 覆盖日常开发 90% 的场景

4. **符合安全合规要求**
   - 三级等保自动登出
   - 满足政企项目需求

5. **持续维护和更新**
   - 跟随 Vue 3 和 Element Plus 更新
   - 持续添加实用功能

---

+ 项目地址：[RuoYi-SpringBoot3-ElementPlus](https://github.com/undsky/RuoYi-SpringBoot3-ElementPlus)
+ 开发文档：[RuoYi-SpringBoot3-Pro 文档](https://www.undsky.com/blog/?category=RuoYi-SpringBoot3-Pro#)

RuoYi-SpringBoot3-ElementPlus这是一个基于 RuoYi-Vue3 的增强版前端项目，100% 保留原有功能，同时新增大量实用组件和开发工具，显著提升开发效率和用户体验。

【RuoYi-SpringBoot3-ElementPlus】：若依前端增强版 —— 功能扩展优化

前端

后端

开发工具

RuoYi-SpringBoot3-ElementPlus是基于RuoYi-Vue3的增强版前端框架，新增省市区级联选择、千分位输入、UEditor富文本等8+实用组件，集成dayjs、xe-utils等工具库，支持三级等保安全标准，提供代码检查器、Prettier格式化等开发工具，显著提升开发效率和项目质量。

数据一致性

网络安全

事件总线

安全合规

服务器

JSON

ddos

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【RuoYi-SpringBoot3-ElementPlus】：若依前端增强版 —— 功能扩展优化-腾讯云开发者社区-腾讯云

【RuoYi-SpringBoot3-ElementPlus】：若依前端增强版 —— 功能扩展优化

【RuoYi-SpringBoot3-ElementPlus】：若依前端增强版 —— 功能扩展优化

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐