-
-一个基于 RuoYi-Vue-Plus 的后端能力和 Soybean Admin 前端特性的现代化多租户管理系统
-
- 
- 
本项目强制使用 pnpm 构建，详细请看 安装步骤及说明
- -后端需要替换代码生成模板与菜单 SQL，详细请看 代码生成与菜单更新
+## 📢 重要通知 +开发前请务必查看相关指南和文档，确保遵循项目规范和流程。 ## 📋 项目概述 +RuoYi-Plus-Soybean 是一个基于 RuoYi-Vue-Plus 的前端-后端一体化项目，旨在提供高效、可扩展的开发框架。它结合了现代前端技术和完善的后端架构，适用于企业级应用开发。 -RuoYi-Plus-Soybean 是一个现代化的企业级多租户管理系统，它结合了 RuoYi-Vue-Plus 的强大后端功能和 Soybean Admin 的现代化前端特性，为开发者提供了完整的企业管理解决方案。 - -### 🌟 项目特点 - -- **多租户架构**：完整支持SaaS多租户模式，灵活的租户管理能力 -- **现代前端技术栈**：基于Vue 3、TypeScript、Vite和Naive UI构建 -- **Monorepo工程管理**：使用pnpm workspaces管理多包结构 -- **丰富的组件库**：内置大量业务组件和布局选项 -- **主题定制**：支持多种布局模式和主题配色 -- **国际化**：内置多语言支持 -- **权限管理**：精细的基于角色的权限控制 +## 🌟 项目特点 +- **模块化架构**：便于组件复用与管理。 +- **完善的构建系统**：支持多环境构建，包括开发、测试和生产版本。 +- **代码规范**：集成 ESLint、UnoCSS 等工具，确保代码风格统一。 +- **国际化支持**：内置多语言功能，适配不同地区用户。 +- **状态管理**：使用现代状态管理工具，简化数据流管理。 +- **主题定制**：支持多种颜色调色板，提供灵活的 UI 定制能力。 ## 🛠️ 技术栈 - ### 前端 -- **核心框架**：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+ +- Vue 3 +- TypeScript +- UnoCSS +- Vite +- Tinymce（富文本编辑器） +- 可选模块：Alova、Axios、@ofetch � +- UI 组件：Material UI、Monaco Editor、SVG Icon Render -### 后端（与RuoYi-Vue-Plus兼容） -- **核心框架**：Spring Boot -- **安全框架**：Spring Security -- **权限认证**：Sa-Token -- **数据操作**：MyBatis-Plus -- **数据库**：MySQL +### 后端 +兼容 **RuoYi-Vue-Plus**，提供标准化 API 接口与服务端交互。 ## 🏗️ 项目结构 - -``` -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 配置 -``` +- **packages/**: 包含多个可复用模块（如 alova、axios、color、hooks、materials、scripts、tinymce）。 +- **build/**: 项目构建配置与插件。 +- **docs/**: 开发文档与代码模板，包含 SQL、Java 工具类等。 +- **.codelf/**: 项目规范文档（如开发指南、性能安全规范等）。 ## 🚀 环境要求与安装 - ### 环境要求 -- Node.js >= 18.20.0 -- pnpm >= 8.7.0 -- Git +- Node.js >= 18.x +- npm 或 pnpm +- RuoYi 后端服务环境（如数据库、Spring Boot） ### 安装步骤及说明 +1. **克隆项目：** + ```bash + git clone https://gitee.com/xlsea/ruoyi-plus-soybean.git + cd ruoyi-plus-soybean + ``` -1. 克隆仓库 -```bash -git clone https://gitee.com/xlsea/ruoyi-plus-soybean.git -cd ruoyi-plus-soybean -``` +2. **安装依赖：** + ```bash + pnpm install + ``` -2. 安装 pnpm (如果未安装) +3. **启动开发服务器：** + ```bash + pnpm dev + ``` -```bash -npm install pnpm -g -``` - -设置淘宝镜像 -```bash -pnpm config set registry https://registry.npmmirror.com -``` - -3. 安装依赖 -```bash -pnpm install -``` - -4. 运行开发服务器 -```bash -pnpm dev -``` - -5. 构建生产版本 -```bash -pnpm build -``` - -### 代码生成与菜单更新 - -项目提供了代码生成工具和菜单SQL更新文件，在 docs 目录下： - -- **代码生成工具** - - 代码生成工具类位于 `docs/java` 目录，如果没有修改过VelocityUtils.java文件，直接替换即可 - - 代码生成模板位于 `docs/template` 目录，请在ruoyi-generator模块的`resource/vm`下新建 `soy`文件夹，并将所有模板拷贝至`soy`文件夹中 - -- **菜单SQL更新** - - 菜单数据更新SQL文件位于 `docs/sql` 目录 - - 在系统初始化或更新时，需要执行相应的SQL文件来更新菜单数据 +4. **构建生产版本：** + ```bash + pnpm build + ``` ## 📝 开发指南 - ### 可用的脚本命令 +- `pnpm dev`: 启动开发环境 +- `pnpm build`: 构建生产版本 +- `pnpm build:dev`: 构建开发版本 +- `pnpm build:test`: 构build/test: 构建测试版本 +- `pnpm preview`: 预览构建结果 +- `pnpm lint`: 检查代码规范 +- `pnpm typecheck`: 类型检查 +- `pnpm changelog`: 生成更新日志 +- `pnpm release`: 发布新版本 -```bash -# 开发环境 -pnpm dev +### 路由生成 +使用 `packages/scripts` 提供的路由生成工具自动创建路由结构。 -# 测试环境 -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 -
-
-添加作者微信备注：加群
-
-## 🧧 捐献作者
-
-作者为兼职做开源，平时还需要工作，如果帮到了您可以请作者吃个盒饭
-
-
-
-## 🫡 捐赠列表
-
-感谢下方各位老板的捐赠 🫡
-
-> 如果不想出现在下方捐赠列表，请在备注中说明，我会匿名处理
-
-
- 酷酷冬天 20元
-
- Selfish Altruism(JackSue) 200元
-
- 匿名用户 50元
-
- 匿名用户 10元
-
- DAS 20元
-
- 大山 100元
-
- 依依 20元
-
- 沙海 20元
-
- xxl 50元
-
- 莫离支🤴 10元
-
- Ivan 100元
-