【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。

使用方法：

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

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

核心价值：

1. 开箱即用的业务组件

   • 省市区选择、千分位输入等常见需求
   • 无需重复造轮子，节省开发时间

2. 完善的开发工具链

   • 代码检查器、格式化、自动部署
   • 提升开发效率和团队协作

3. 丰富的工具库生态

   • dayjs、xe-utils、mitt 等主流库
   • 覆盖日常开发 90% 的场景

4. 符合安全合规要求

   • 三级等保自动登出
   • 满足政企项目需求

5. 持续维护和更新

   • 跟随 Vue 3 和 Element Plus 更新
   • 持续添加实用功能

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