Annlcc

登录

忘记密码?邮箱验证码登录

没有账号？注册一个

注册

已有账号？前往登录

忘记密码

已有账号？前往登录

RuoYi-Plus-Soybean

一个基于 RuoYi-Vue-Plus 的后端能力和 Soybean Admin 前端特性的现代化多租户管理系统

Gitee Gitee-forks Github Github-forks vue typescript vite naive-ui license

📢 重要通知

1.1.0 版本已发布，但仍然建议：

  • 在生产环境使用前进行充分测试
  • 关注项目更新，及时获取最新版本
  • 积极反馈问题，帮助我们快速迭代

后续规划

  • 工作流引擎集成
  • 多语言国际化完善
  • 性能优化和稳定性提升

如果对该项目感兴趣，可以给一个 Star 支持一下，谢谢！
请大家踊跃提交 PR 和 Issue，一起完善这个项目

❗开发前必看

本项目强制使用 pnpm 构建，详细请看 安装步骤及说明

后端需要替换代码生成模板与菜单 SQL，详细请看 代码生成与菜单更新

📋 项目概述

RuoYi-Plus-Soybean 是一个现代化的企业级多租户管理系统，它结合了 RuoYi-Vue-Plus 的强大后端功能和 Soybean Admin 的现代化前端特性，为开发者提供了完整的企业管理解决方案。

🌟 项目特点

  • 多租户架构：完整支持SaaS多租户模式，灵活的租户管理能力
  • 现代前端技术栈：基于Vue 3、TypeScript、Vite和Naive UI构建
  • Monorepo工程管理：使用pnpm workspaces管理多包结构
  • 丰富的组件库：内置大量业务组件和布局选项
  • 主题定制：支持多种布局模式和主题配色
  • 国际化：内置多语言支持
  • 权限管理：精细的基于角色的权限控制

🛠️ 技术栈

前端

  • 核心框架：Vue 3.5.x
  • 开发语言：TypeScript 5.8.x
  • 构建工具：Vite 6.2.x
  • UI组件库：Naive UI 2.41.x
  • 状态管理：Pinia 3.0.x
  • 路由：Vue Router 4.5.x
  • HTTP客户端：Axios/Alova
  • CSS：UnoCSS
  • 包管理器：pnpm 8.x+

后端（与RuoYi-Vue-Plus兼容）

  • 核心框架：Spring Boot
  • 安全框架：Spring Security
  • 权限认证：Sa-Token
  • 数据操作：MyBatis-Plus
  • 数据库：MySQL

🏗️ 项目结构

复制代码 
root
├── build                    # 构建配置和插件
│   ├── config               # 构建配置文件
│   └── plugins              # Vite 插件
├── docs                     # 文档和模板
│   ├── java                 # 代码生成工具类
│   └── template             # 代码生成模板
├── packages                 # Monorepo包
│   ├── alova                # 使用Alova的HTTP客户端实现
│   ├── axios                # 使用Axios的HTTP客户端实现
│   ├── color                # 颜色管理工具
│   ├── hooks                # 可复用的Vue组合函数
│   ├── materials            # UI组件和材料
│   ├── ofetch               # 使用ofetch的HTTP客户端实现
│   ├── scripts              # 构建和开发脚本
│   ├── uno-preset           # UnoCSS预设配置
│   └── utils                # 通用工具函数
├── public                   # 静态资源
├── src                      # 主应用源代码
│   ├── assets               # 静态资源(图片、图标)
│   ├── components           # 可复用的 Vue 组件
│   ├── constants            # 应用常量
│   ├── enum                 # TypeScript 枚举
│   ├── hooks                # Vue 组合函数
│   ├── layouts              # 页面布局
│   ├── locales              # 国际化
│   ├── plugins              # Vue 插件
│   ├── router               # Vue Router 配置
│   ├── service              # API 服务
│   ├── store                # Pinia 存储模块
│   ├── styles               # 全局样式
│   ├── theme                # 主题配置
│   ├── typings              # TypeScript 类型定义
│   ├── utils                # 工具函数
│   └── views                # 页面组件
└── vite.config.ts           # Vite 配置

🚀 环境要求与安装

环境要求

  • Node.js >= 18.20.0
  • pnpm >= 8.7.0
  • Git

安装步骤及说明

  1. 克隆仓库
bash 复制代码 
git clone https://gitee.com/xlsea/ruoyi-plus-soybean.git
cd ruoyi-plus-soybean
  1. 安装 pnpm (如果未安装)
bash 复制代码 
npm install pnpm -g

设置淘宝镜像

bash 复制代码 
pnpm config set registry https://registry.npmmirror.com
  1. 安装依赖
bash 复制代码 
pnpm install
  1. 运行开发服务器
bash 复制代码 
pnpm dev
  1. 构建生产版本
bash 复制代码 
pnpm build

代码生成与菜单更新

项目提供了代码生成工具和菜单SQL更新文件，在 docs 目录下：

  • 代码生成工具

    • 代码生成工具类位于 docs/java 目录，如果没有修改过VelocityUtils.java文件，直接替换即可
    • 代码生成模板位于 docs/template 目录，请在ruoyi-generator模块的resource/vm下新建 soy文件夹，并将所有模板拷贝至soy文件夹中

  • 菜单SQL更新

    • 菜单数据更新SQL文件位于 docs/sql 目录
    • 在系统初始化或更新时，需要执行相应的SQL文件来更新菜单数据

📝 开发指南

可用的脚本命令

bash 复制代码 
# 开发环境
pnpm dev

# 测试环境
pnpm dev:test

# 生产环境
pnpm dev:prod

# 构建生产版本
pnpm build

# 构建开发版本
pnpm build:dev

# 构建测试版本
pnpm build:test

# 预览构建
pnpm preview

# 类型检查
pnpm typecheck

# 代码规范检查并修复
pnpm lint

# 路由生成
pnpm gen-route

# 提交代码
pnpm commit

# 中文提交信息
pnpm commit:zh

# 依赖包更新
pnpm update-pkg

# 清理项目
pnpm cleanup

# 发布新版本
pnpm release

代码规范与风格

项目使用ESLint进行代码检查，遵循以下规范：

  • 命名规范：

    • Vue组件: PascalCase (如 UserProfile.vue)
    • TypeScript文件: camelCase (如 userService.ts)
    • CSS/SCSS: kebab-case (如 user-profile.scss)

  • 代码风格：

    • 使用Vue 3 Composition API
    • 使用TypeScript类型系统
    • 遵循单一职责原则

核心开发模式

状态管理

使用Pinia进行状态管理，模块位于src/store/modules目录：

  • app: 应用全局状态
  • theme: 主题配置
  • route: 路由信息
  • tab: 标签页管理
  • auth: 认证信息
  • dict: 字典管理
  • notice: 通知管理

API交互

项目支持多种HTTP客户端实现：

  • Axios:
typescript 复制代码 
import { useRequest } from '@/hooks/common/request';

const { data, loading, error } = useRequest(() => api.getData(params));
  • Hooks使用:
typescript 复制代码 
// 布尔值管理
import { useBoolean } from '@sa/hooks';
const { bool, setTrue, setFalse } = useBoolean();

// 加载状态管理
import { useLoading } from '@sa/hooks';
const { loading, startLoading, endLoading } = useLoading();

// 表格管理
import { useTable } from '@/hooks/common/table';
const { tableData, loading, getPaginationData } = useTable(fetchTableData);

组件使用

项目包含多种业务组件：

  • 表格组件：支持列设置、搜索区域和高级操作
  • 表单组件：集成验证和表单布局
  • 字典组件：字典选择、标签和单选
  • 布局组件：支持多种布局模式和主题

UnoCSS使用指南

项目优先使用 UnoCSS 来实现样式：

html 复制代码 
<div class="flex flex-col items-center justify-center p-4 m-2 bg-blue-100 dark:bg-blue-800 rounded-md">
  <span class="text-lg font-bold text-center">内容</span>
</div>

国际化

项目使用vue-i18n实现国际化支持：

typescript 复制代码 
// 在组件中使用
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
console.log(t('common.confirm'));

💎 特性与功能

前端特性

  • 多种布局模式：支持垂直、水平、混合等多种布局
  • 可配置的主题：明暗模式、主题色定制
  • 标签页管理：多种标签风格、右键菜单
  • 组件封装：进度条、图标、加载动画等
  • 路由生成：基于目录结构的路由生成
  • 权限管理：菜单和按钮级别的权限控制

业务功能

  • 用户管理：用户信息维护、角色分配
  • 角色管理：角色权限配置
  • 菜单管理：系统功能配置
  • 部门管理：组织架构维护
  • 字典管理：数据字典配置
  • 租户管理：多租户配置
  • 系统监控：登录日志、操作日志、在线用户、缓存监控
  • 代码生成：生成前后端代码，提升开发效率

🤝 贡献指南

开发流程

  1. Fork项目
  2. 创建功能分支 (git checkout -b feature/amazing-feature)
  3. 提交更改 (git commit -m 'feat: add amazing feature')
  4. 推送到分支 (git push origin feature/amazing-feature)
  5. 提交Pull Request

提交规范

项目使用约定式提交规范：

  • feat: 新功能
  • fix: 修复Bug
  • docs: 文档更新
  • style: 代码风格调整
  • refactor: 代码重构
  • perf: 性能优化
  • test: 测试代码
  • chore: 构建或工具变动

📄 许可证

MIT License

🔗 相关链接

📮 联系方式

💬 交流群

加群前请先阅读一下内容：

  • 禁止内容：黄腔、暴力言论、政治话题，违者直接飞机票（踢出群）
  • 遇到问题请先阅读 项目文档 和 Soybean 文档，某些简单问题不予理睬
  • 蜡笔小新头像为机器人助手，私聊不保证回复，问题请在群内讨论

添加作者微信备注：加群

🧧 捐献作者

作者为兼职做开源，平时还需要工作，如果帮到了您可以请作者吃个盒饭

🫡 捐赠列表

捐赠列表已移至 捐赠列表

目录

Total Likes
0
Total Comments
0

评论