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

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

一、项目定位

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="请输入金额" 
  />
  <!-- 用户输入: 1234567.89 -->
  <!-- 显示效果: 1,234,567.89 -->
  <!-- 实际值: 1234567.89 (纯数字) -->
</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 复制代码

<!-- 自动添加 loading="lazy" 属性 -->
<!-- 大量图片时显著提升性能 -->

⑤ 专业图片预览器

集成 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。

使用方法：

按住 Ctrl + Shift（Mac 用 Cmd + Shift）
点击页面任意元素
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	一键部署
三级等保	❌	✅	自动登出

八、项目结构

csharp 复制代码

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 是一个生产级别的前端项目，它不是简单的组件堆砌，而是经过深思熟虑的增强和优化。

核心价值：

开箱即用的业务组件
- 省市区选择、千分位输入等常见需求
- 无需重复造轮子，节省开发时间
完善的开发工具链
- 代码检查器、格式化、自动部署
- 提升开发效率和团队协作
丰富的工具库生态
- dayjs、xe-utils、mitt 等主流库
- 覆盖日常开发 90% 的场景
符合安全合规要求
- 三级等保自动登出
- 满足政企项目需求
持续维护和更新
- 跟随 Vue 3 和 Element Plus 更新
- 持续添加实用功能

项目地址：RuoYi-SpringBoot3-ElementPlus
开发文档：RuoYi-SpringBoot3-Pro 文档