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

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

一、项目定位

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

核心特点：

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

二、新增功能

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

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

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

<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 千分位输入框 —— 金额输入不再繁琐

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

<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 大核心升级：

① 拖拽上传

<ImageUpload v-model="images" :drag="true" />
<!– 直接拖拽文件到上传区域 –>

② 视频和音频支持

<ImageUpload
v-model="video"
:file-type="['mp4', 'webm']"
accept="video/*"
/>
<!– 支持上传视频并预览 –>

③ 大文件支持

• 原版：5MB 限制
• 增强版：50MB 限制（可配置到 100MB）

④ 图片懒加载

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

⑤ 专业图片预览器

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

⑥ 移动端完美适配

• 自动识别设备类型
• 移动端预览全屏显示
• 触摸手势支持

⑦ 多种数据格式

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

⑧ 防重复删除

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

功能对比：

2.4 UEditor 富文本编辑器

为什么需要两个富文本编辑器？

• Vue Quill：轻量级，适合简单场景（如文章摘要、评论）
• UEditor：功能强大，适合复杂场景（如文章编辑、新闻发布）

UEditor 优势：

• 支持图片、视频、音频上传
• 支持表格编辑
• 支持公式编辑（数学公式、化学式）
• 支持代码高亮
• 支持全屏编辑

三、开发工具增强

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

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

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

使用方法：

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

3.2 Prettier 代码格式化

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

// 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）：

const config = {
user: "admin", // FTP 用户名
password: "password123", // FTP 密码
host: "example.com", // 服务器地址
port: 21, // FTP 端口
localRoot: "./dist", // 本地构建目录
remoteRoot: "/www/admin" // 远程目标路径
}

使用方法：

npm run build:prod
# 构建完成后自动上传到服务器，无需手动操作

四、工具库生态

4.1 dayjs —— 轻量级日期处理

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

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+ 实用函数

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

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。

// 创建事件总线
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 —— 拖拽排序

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

<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

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

<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），三级等保系统需要支持"用户长时间无操作自动登出"功能。

实现原理：

// 监听用户的键盘、鼠标、滚动操作
// 每次操作重置计时器
// 超时自动退出登录

配置方法（.env.production）：

# 30 分钟无操作自动登出
VITE_LOGOUT_LIMIT=1800000

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

# 不启用自动登出
VITE_LOGOUT_LIMIT=0

监控的操作类型：

• 🖱️ 鼠标移动、点击
• ⌨️ 键盘按键
• 📜 页面滚动

六、快速开始

6.1 环境准备

Node.js >= 20
npm 或 yarn 或 pnpm

6.2 安装启动

# 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 构建部署

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

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

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

七、与原版对比

八、项目结构

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 后端接口地址

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

9.2 自动登出配置

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

9.3 FTP 部署配置

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

核心价值：

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