# RuoYi-Plus-UniApp > 基于 Spring Boot 3 + Vue 3 + UniApp 的企业级全栈快速开发框架。 > 后端四层架构(Controller → Service → DAO → Mapper),前端 Vue 3 + TypeScript, > 移动端一套代码同时产出微信小程序 / H5 / APP。提供完整源码交付。 本文件面向大模型,列出文档站的知识结构与入口,便于回答与本框架相关的问题。 ## 这个框架能做什么 - 后台管理系统:权限、菜单、字典、数据权限、多租户、代码生成器 - 移动端应用:微信小程序 / 公众号 H5 / APP,一套代码多端发布 - 业务集成:支付(微信 / 支付宝)、OSS 对象存储、消息队列、工作流 - AI 能力:LangChain4j 接入大模型,支持流式对话、RAG 知识库、Agent ## 后端(Spring Boot 3 + MyBatis-Plus) ### 快速开始 - [项目简介](https://ruoyi.plus/backend/):Ruoyi-Plus-Uniapp 后端是基于Ruoyi-Vue-Plus5.X进行深度重构,提供了查询增强组件、统一响… - [快速启动](https://ruoyi.plus/backend/getting-started.html):本章节将带你快速启动 Ruoyi-Plus-Uniapp 后端项目,包含完整的环境配置和启动流程。 - [项目结构](https://ruoyi.plus/backend/project-structure.html):RuoYi-Plus-UniApp 后端采用 Spring Boot 3.x + Java 17+ 构建,遵循模块化、分… - [配置文件](https://ruoyi.plus/backend/configuration.html):本项目采用 Spring Boot 框架,使用 YAML 格式的配置文件来管理应用的各项配置。配置文件分为三个层级: ### 主应用(ruoyi-admin) - [模块解析](https://ruoyi.plus/backend/ruoyi-admin/module-resolution.html):ruoyi-admin 是基于 Spring Boot 的后台管理系统入口模块,作为整个应用程序的启动入口和配置中心。该… ### 公共模块(ruoyi-common) - [依赖版本管理 (bom)](https://ruoyi.plus/backend/common/bom.html):ruoyi-common-bom 是 RuoYi-Plus 框架的统一依赖版本管理模块,采用 Maven BOM (Bi… ### 核心模块 (core) - [模块概览](https://ruoyi.plus/backend/common/core.html):ruoyi-common-core 是RuoYi-Plus-Uniapp框架的核心基础模块,为整个系统提供通用的基础功能… - [配置管理](https://ruoyi.plus/backend/common/core/config.html):配置管理模块负责系统的核心配置,包括应用属性配置、线程池配置、异步任务配置、校验器配置等。该模块采用 Spring Bo… - [数据模型与DTO](https://ruoyi.plus/backend/common/core/domain.html):数据模型与DTO(Data Transfer Object)是ruoyi-plus-uniapp中用于数据传输和业务交互… - [工具类库](https://ruoyi.plus/backend/common/core/utils.html):ruoyi-common-core 的工具类库提供了丰富的工具方法,覆盖字符串处理、日期时间、反射操作、网络地址、文件处… - [异常处理](https://ruoyi.plus/backend/common/core/exception.html):ruoyi-common-core 提供了一套完整的异常处理体系,采用分层设计和统一管理的方式,确保系统异常的规范化处理… - [参数校验](https://ruoyi.plus/backend/common/core/validation.html):参数校验模块提供了一套完整的数据验证框架,基于 Jakarta Bean Validation (JSR-303) 标准… - [字典枚举](https://ruoyi.plus/backend/common/core/enums.html):字典枚举系统是ruoyi-plus-uniapp中的一个重要设计模式,用于管理系统中的各种状态值、类型码和选项数据。该系… - [通用服务接口](https://ruoyi.plus/backend/common/core/service.html):core 模块定义了一系列通用服务接口,为系统各模块提供统一的数据访问和业务处理规范。这些接口采用依赖注入的方式,实现了… - [文档生成 (doc)](https://ruoyi.plus/backend/common/doc.html):ruoyi-common-doc 是基于 SpringDoc 实现的自动化 API 接口文档生成模块,支持 OpenAP… ### 数据加密 (Encryption) - [概览与快速入门](https://ruoyi.plus/backend/common/encrypt.html):ruoyi-common-encrypt 是 RuoYi-Plus 框架的企业级数据安全解决方案,提供完整的数据加解密功… - [数据库字段加密](https://ruoyi.plus/backend/common/encrypt/database-encryption.html):数据库字段加密功能基于MyBatis拦截器实现,通过 @EncryptField 注解标记需要加密的字段,在数据入库前自… - [API接口加密](https://ruoyi.plus/backend/common/encrypt/api-encryption.html):API接口加密功能通过Servlet过滤器实现,支持前后端数据传输的全链路加密。系统采用RSA+AES混合加密方案,既保… - [Excel处理 (excel)](https://ruoyi.plus/backend/common/excel.html):Excel处理模块基于FastExcel(原EasyExcel)框架,提供了完整的Excel导入导出解决方案,支持数据校… - [文档模板 (doctemplate)](https://ruoyi.plus/backend/common/doctemplate.html):ruoyi-common-doctemplate 是基于 POI-TL 的 Word 文档模板处理模块,提供了简洁优雅的… - [幂等处理 (idempotent)](https://ruoyi.plus/backend/common/idempotent.html):幂等功能模块提供基于 Redis 分布式锁机制的接口防重复提交功能,确保在短时间内用户重复点击或网络抖动等场景下,同一请… - [任务调度 (job)](https://ruoyi.plus/backend/common/job.html):本模块基于 SnailJob 分布式任务调度框架,为RuoYi-Plus-UniApp提供强大的定时任务和分布式任务调度… - [JSON处理 (json)](https://ruoyi.plus/backend/common/json.html):JSON处理模块(ruoyi-common-json)提供了基于Jackson的JSON序列化和反序列化功能,是整个框架… - [日志管理 (log)](https://ruoyi.plus/backend/common/log.html):ruoyi-common-log 是系统的核心日志管理模块,基于 Spring AOP(面向切面编程)实现,提供操作日志… - [HTTP客户端 (http)](https://ruoyi.plus/backend/common/http.html):ruoyi-common-http 是基于 Forest 框架封装的声明式 HTTP 客户端模块,提供简洁高效的第三方 … ### LangChain4j AI集成 (langchain4j) - [模块概览](https://ruoyi.plus/backend/common/langchain4j.html):企业级 LLM 应用开发框架 - 提供统一的大模型接入能力 - [快速开始](https://ruoyi.plus/backend/common/langchain4j/quick-start.html):LangChain4j 是一个用于开发由大型语言模型(LLM)驱动的应用程序的 Java 框架。RuoYi-Plus 框… - [模型工厂](https://ruoyi.plus/backend/common/langchain4j/model-factory.html):ModelFactory 是 LangChain4j 模块的核心组件,负责创建和管理各种 AI 模型实例。它采用工厂模式… - [聊天服务](https://ruoyi.plus/backend/common/langchain4j/chat-service.html):ChatService 是 LangChain4j 模块的核心服务,提供同步和流式的 AI 对话功能。它支持多种对话模式… - [深度思考](https://ruoyi.plus/backend/common/langchain4j/thinking.html):深度思考(Deep Thinking / Reasoning / Chain-of-Thought)是新一代大语言模型在… - [RAG检索增强](https://ruoyi.plus/backend/common/langchain4j/rag.html):RAG(Retrieval-Augmented Generation)检索增强生成是一种结合信息检索和生成式 AI 的技… - [向量存储](https://ruoyi.plus/backend/common/langchain4j/vector-store.html):向量存储是 RAG 系统的核心组件,用于存储文档的向量表示并提供高效的相似度检索功能。RuoYi-Plus 支持多种向量… - [WebSocket流式对话](https://ruoyi.plus/backend/common/langchain4j/websocket.html):WebSocket 流式对话提供了实时、双向的 AI 对话能力,适合构建聊天应用、在线客服等场景。相比传统的 HTTP … - [邮件服务 (mail)](https://ruoyi.plus/backend/common/mail.html):邮件模块是基于 Hutool 的邮件工具构建的 Spring Boot 自动配置模块,提供简单易用的邮件发送功能。支持文… - [媒体处理 (media)](https://ruoyi.plus/backend/common/media.html):ruoyi-common-media 是一个功能强大的媒体处理模块,提供了图片处理、GIF动画生成、二维码生成和海报制作… - [统一消息推送 (message)](https://ruoyi.plus/backend/common/message.html):ruoyi-common-message 是 RuoYi-Plus 框架的统一消息推送模块,提供多通道消息路由、智能降级… - [小程序集成 (miniapp)](https://ruoyi.plus/backend/common/miniapp.html):ruoyi-common-miniapp 是基于WxJava的微信小程序服务模块,为RuoYi-Plus-UniApp提… - [公众号集成 (mp)](https://ruoyi.plus/backend/common/mp.html):ruoyi-common-mp 是基于 WxJava (weixin-java-mp 4.7.6.B) 开发的微信公众号… - [MQTT消息 (mqtt)](https://ruoyi.plus/backend/common/mqtt.html):物联网消息通信能力 - 基于 mica-mqtt 2.5.7 提供高性能 MQTT 客户端功能 - [MyBatisPlus增强 (mybatis)](https://ruoyi.plus/backend/common/mybatis.html):ruoyi-common-mybatis 是 Ruoyi-Plus-Uniapp 框架的数据访问增强模块,基于 MyBa… - [OSS存储 (oss)](https://ruoyi.plus/backend/common/oss.html):OSS(Object Storage Service)对象存储模块为若依系统提供了统一的文件存储服务,支持本地存储和多种… - [支付集成 (pay)](https://ruoyi.plus/backend/common/pay.html):RuoYi-Plus 支付模块 (ruoyi-common-pay) 是一个统一的支付服务解决方案,提供了完整的支付、退… - [OpenAPI文档 (openapi)](https://ruoyi.plus/backend/common/openapi.html):OpenAPI开放平台提供企业级API开放解决方案,通过 AppKey + AppSecret 签名认证机制,为第三方系… - [限流组件 (ratelimiter)](https://ruoyi.plus/backend/common/ratelimiter.html):ruoyi-common-ratelimiter 是基于 Redis 和 Redisson 令牌桶算法实现的分布式限流模… - [Redis缓存 (redis)](https://ruoyi.plus/backend/common/redis.html):ruoyi-common-redis 是一个基于 Redisson 实现的综合性Redis缓存模块,提供了完整的缓存解决… ### RocketMQ消息队列 (rocketmq) - [快速开始](https://ruoyi.plus/backend/common/rocketmq/quick-start.html):RocketMQ 是阿里巴巴开源的分布式消息队列中间件,具有高性能、高可靠、高实时、分布式特性。RuoYi-Plus 已… - [消息生产](https://ruoyi.plus/backend/common/rocketmq/producer.html):RMSendUtil 是 RuoYi-Plus 封装的消息生产工具类,提供了简洁易用的 API 来发送各种类型的消息。它… - [消息消费](https://ruoyi.plus/backend/common/rocketmq/consumer.html):消息消费是 RocketMQ 的核心功能之一。RuoYi-Plus 使用 Spring Boot 的注解式编程方式,通过… - [权限认证 (satoken)](https://ruoyi.plus/backend/common/satoken.html):Sa-Token权限认证模块是基于Sa-Token框架的权限认证组件,提供了完整的用户认证与权限控制功能。该模块采用JW… - [安全防护 (security)](https://ruoyi.plus/backend/common/security.html):ruoyi-common-security 是RuoYi-Plus-Uniapp框架的核心安全模块,提供应用安全防护与权… - [脱敏处理 (sensitive)](https://ruoyi.plus/backend/common/sensitive.html):ruoyi-common-sensitive 是RuoYi-Plus-Uniapp框架的数据脱敏模块,提供数据脱敏与隐私… - [序列化映射 (serialmap)](https://ruoyi.plus/backend/common/serialmap.html):序列化映射模块是 RuoYi-Plus-Uniapp 框架的核心功能模块,提供了强大的数据字典翻译和字段映射功能。该模块… - [短信服务 (sms)](https://ruoyi.plus/backend/common/sms.html):短信模块是基于若依框架开发的通用短信服务模块,提供短信发送与验证码功能。该模块集成了SMS4J框架,支持多平台短信服务商… - [社交登录 (social)](https://ruoyi.plus/backend/common/social.html):社会化登录模块(ruoyi-common-social)是基于 RuoYi-Plus 框架的第三方平台账号认证与登录功能… - [SSE推送 (sse)](https://ruoyi.plus/backend/common/sse.html):基于 Spring Boot 的服务器推送事件模块,提供实时消息推送功能,支持单机和集群环境下的消息分发。 - [多租户 (tenant)](https://ruoyi.plus/backend/common/tenant.html):租户插件模块(ruoyi-common-tenant)是一个企业级多租户解决方案,提供了数据库、缓存、认证等多个层面的完… ### 测试支持 (test) - [快速开始](https://ruoyi.plus/backend/common/test/quick-start.html):RuoYi-Plus 提供了完整的测试支持框架,基于 JUnit 5 构建,提供了一套开箱即用的测试基类和工具,帮助开发… - [测试基础类](https://ruoyi.plus/backend/common/test/base-classes.html):RuoYi-Plus 提供了四个测试基类,采用分层设计,每个基类针对不同的测试场景提供专门的功能支持。通过继承合适的基类… - [测试数据工厂](https://ruoyi.plus/backend/common/test/test-data-factory.html):TestDataBuilder 是 RuoYi-Plus 提供的测试数据生成工具,基于 JavaFaker 实现,可以快… - [Web组件 (web)](https://ruoyi.plus/backend/common/web.html):Web模块(ruoyi-common-web)是系统的 Web 应用基础模块,提供 Web 应用的核心功能和 MVC 支… - [通讯 (websocket)](https://ruoyi.plus/backend/common/websocket.html):WebSocket 通讯模块 (ruoyi-common-websocket) 提供实时双向通信与消息推送功能,支持分布… ### 系统模块 (system) - [模块概览](https://ruoyi.plus/backend/modules/system.html):系统模块 (system) 是整个后端应用的核心基础模块,基于Spring Boot + MyBatis-Plus构建,… - [认证授权 (auth)](https://ruoyi.plus/backend/modules/system/auth.html):认证授权模块是系统安全的核心组件,负责用户身份验证、权限管理和会话控制。该模块采用策略模式设计,支持多种认证方式,并集成… - [系统配置 (config)](https://ruoyi.plus/backend/modules/system/config.html):系统配置模块负责管理系统运行所需的各种参数配置和通知公告功能。该模块提供了灵活的参数管理机制,支持动态配置更新、缓存优化… - [核心功能 (core)](https://ruoyi.plus/backend/modules/system/core.html):系统核心模块(ruoyi-system/core)是 RuoYi-Plus 框架的基础业务模块,负责处理用户管理、角色权… - [字典管理 (dict)](https://ruoyi.plus/backend/modules/system/dict.html):字典管理模块是RuoYi-Plus系统的核心基础模块,提供完整的数据字典管理功能。该模块采用字典类型和字典数据两级结构设… - [系统监控 (monitor)](https://ruoyi.plus/backend/modules/system/monitor.html):监控模块是系统的重要组成部分,提供对系统运行状态、用户行为、缓存性能、异常错误等多方面的监控功能。该模块主要包含缓存监控… - [OSS存储 (oss)](https://ruoyi.plus/backend/modules/system/oss.html):OSS(Object Storage Service)对象存储模块是一个企业级的文件管理系统,支持多种存储提供商(如阿里… - [多租户 (tenant)](https://ruoyi.plus/backend/modules/system/tenant.html):多租户模块是 RuoYi-Plus 框架的核心组件之一,提供完整的 SaaS 多租户架构支持。该模块实现了租户的全生命周… ### 代码生成器 (Generator) - [模块概览](https://ruoyi.plus/backend/modules/generator.html):若依代码生成器(Generator)是一个强大的开发工具,旨在帮助开发者快速生成标准化的业务代码,大幅提升开发效率。该模… - [快速开始](https://ruoyi.plus/backend/modules/generator/quick-start.html):本章将通过一个完整的实例演示如何使用代码生成器快速生成业务代码,让你在5分钟内掌握基本使用方法。 - [表导入与配置](https://ruoyi.plus/backend/modules/generator/table-management.html):本章详细介绍如何导入数据库表到代码生成器中,以及如何对导入的表进行各项配置,包括基础信息、生成选项、关联关系等。 - [字段配置详解](https://ruoyi.plus/backend/modules/generator/column-config.html):本章详细介绍代码生成器中字段配置的各个方面,包括字段基础属性、权限控制、显示配置、查询配置、验证规则等,帮助你精确控制生… - [模板类型详解](https://ruoyi.plus/backend/modules/generator/template-types.html):代码生成器提供三种主要的模板类型,分别适用于不同的业务场景。本章将详细介绍每种模板类型的特点、适用场景、生成的代码结构以… ### 业务模块 (business) - [模块概览](https://ruoyi.plus/backend/modules/business.html):业务模块是系统的核心业务逻辑实现层,包含了多个业务子模块,每个模块负责特定的业务领域功能。 - [基础服务 (base)](https://ruoyi.plus/backend/modules/business/base.html):基础服务模块提供了系统运行所需的核心基础服务,包括多平台配置管理、支付配置管理、广告配置、账号绑定等功能。 - [商城模块 (mall)](https://ruoyi.plus/backend/modules/business/mall.html):商城模块实现了完整的电商业务功能,包括商品管理、订单处理、支付流程等核心电商能力,支持多种支付方式和多平台集成。 - [任务调度 (job)](https://ruoyi.plus/backend/modules/business/job.html):任务调度模块基于 SnailJob 分布式任务调度框架,提供可靠的定时任务和异步作业处理能力,支持任务的创建、调度、监控… ### 工作流模块 (workflow) - [模块概览](https://ruoyi.plus/backend/modules/workflow/):RuoYi-Plus 工作流模块是一个功能完善、高度可扩展的企业级工作流解决方案,基于 Dromara 开源社区的 Wa… - [核心概念](https://ruoyi.plus/backend/modules/workflow/core-concepts.html):工作流模块的核心概念是理解和使用工作流功能的基础。本文档详细介绍了工作流系统中的关键概念,包括流程定义、流程实例、任务、… - [流程定义](https://ruoyi.plus/backend/modules/workflow/definition.html):流程定义是工作流系统的核心组成部分,它描述了业务流程的结构、节点、流转规则等信息。流程定义是流程实例的模板,一个流程定义… - [流程实例](https://ruoyi.plus/backend/modules/workflow/instance.html):流程实例是流程定义的具体执行,代表一次完整的业务流程执行过程。每当用户发起一个业务申请时,系统会创建一个对应的流程实例,… - [任务管理](https://ruoyi.plus/backend/modules/workflow/task.html):任务管理是工作流系统的核心功能,负责处理流程执行过程中的待办任务。当流程流转到需要人工处理的节点时,系统会创建待办任务并… ### 扩展模块(ruoyi-extend) - [监控管理 (monitor-admin)](https://ruoyi.plus/backend/extend/monitor-admin.html):基于 Spring Boot Admin 的应用监控中心 - 提供集中化、可视化的服务监控与告警能力 - [任务服务 (snailjob-server)](https://ruoyi.plus/backend/extend/snailjob-server.html):分布式任务调度中心 - 基于 SnailJob 1.8.0 提供高性能任务调度与管理能力 ## 前端管理端(Vue 3 + Element Plus) ### 快速开始 - [项目简介](https://ruoyi.plus/frontend/):RuoYi-Plus-UniApp 前端是一个基于 Vue 3 + TypeScript 的现代化企业级 Web 管理系… - [快速启动](https://ruoyi.plus/frontend/getting-started.html):本指南将帮助你快速搭建和启动 RuoYi-Plus-UniApp 前端项目开发环境。项目基于 Vue 3.5.13 + … - [项目结构](https://ruoyi.plus/frontend/project-structure.html):RuoYi-Plus-UniApp 前端项目(plus-ui)采用现代化的 Vue 3 技术栈构建,遵循清晰的目录组织规… - [配置文件](https://ruoyi.plus/frontend/configuration.html):RyPlus-Uni 前端项目采用 Vue 3 + TypeScript + Vite 构建,配置文件体系完善,涵盖环境… ### 项目架构 - [架构概览](https://ruoyi.plus/frontend/architecture/overview.html):RuoYi-Plus-UniApp 前端管理端(plus-ui)采用现代化的前端架构设计,基于 Vue 3 生态系统构建… - [目录结构](https://ruoyi.plus/frontend/architecture/directory-structure.html):本文档详细介绍RuoYi-Plus-UniApp前端管理端(plus-ui)的目录结构。该项目基于Vue 3 + Typ… - [技术栈介绍](https://ruoyi.plus/frontend/architecture/tech-stack.html):RuoYi-Plus-UniApp 前端框架采用现代化的技术栈构建,基于 Vue 3 生态系统,结合 TypeScrip… - [模块化设计](https://ruoyi.plus/frontend/architecture/modular-design.html):RuoYi-Plus-UniApp 前端框架采用高度模块化的架构设计,通过清晰的分层结构、明确的职责边界和灵活的模块通信… - [TypeScript配置](https://ruoyi.plus/frontend/architecture/typescript-config.html):RuoYi-Plus-UniApp 框架采用 TypeScript 5.x 作为开发语言,通过完善的类型系统配置,提供了… - [类型系统](https://ruoyi.plus/frontend/architecture/type-system.html):Ruoyi-Plus-Uniapp 框架建立了完整的 TypeScript 类型体系,通过统一的类型定义规范、严格的类型… - [Vite构建配置](https://ruoyi.plus/frontend/architecture/vite-config.html):Ruoyi-Plus-Uniapp 框架基于 Vite 6.3.2 构建,通过模块化的插件系统和精细的配置策略,提供了极… ### 路由系统 (router) - [路由总览](https://ruoyi.plus/frontend/router/overview.html):本项目基于 Vue Router 4 构建了一套完整的企业级路由系统,支持权限控制、动态路由生成、多层级菜单展示和标签页… - [路由配置与守卫](https://ruoyi.plus/frontend/router/config-guards.html):路由守卫是 Vue Router 提供的核心机制,用于在路由导航过程中执行自定义逻辑。RuoYi-Plus-UI 构建了… - [权限与动态路由](https://ruoyi.plus/frontend/router/permission-dynamic.html):权限与动态路由系统是 RuoYi-Plus 前端框架的核心安全机制,基于 RBAC(Role-Based Access … ### 状态管理 (stores) - [状态管理概览](https://ruoyi.plus/frontend/stores/overview.html):RuoYi-Plus-UniApp 前端项目采用 Pinia 作为官方状态管理方案,基于 Composition API… - [用户状态 (user)](https://ruoyi.plus/frontend/stores/user-store.html):用户状态管理模块(useUserStore)是基于 Pinia 实现的用户认证与权限管理核心模块,负责处理用户身份认证、… - [权限状态 (permission)](https://ruoyi.plus/frontend/stores/permission-store.html):权限状态管理模块(usePermissionStore)是基于 Pinia 实现的权限路由管理核心模块,负责动态路由的生… - [字典状态 (dict)](https://ruoyi.plus/frontend/stores/dict-store.html):字典数据状态管理(useDictStore)是基于 Pinia 的字典数据管理模块,提供统一的字典数据存储、访问和转换功… - [通知状态 (notice)](https://ruoyi.plus/frontend/stores/notice-store.html):通知状态管理模块是系统消息中心的核心状态管理单元,基于 Pinia Composition API 构建,提供系统通知和… - [AI对话状态 (aiChat)](https://ruoyi.plus/frontend/stores/ai-chat-store.html):useAiChatStore 是基于 Pinia 的 AI 聊天数据管理模块,提供统一的会话管理和消息处理功能。该模块封… - [功能开关状态 (feature)](https://ruoyi.plus/frontend/stores/feature-store.html):useFeatureStore 是基于 Pinia 的系统功能配置管理模块,提供统一的功能开关管理。该模块从服务端获取系… ### 布局系统 (Layout) - [布局概述](https://ruoyi.plus/frontend/layout/layout-overview.html):布局系统是 RuoYi-Plus-UniApp 管理端前端应用的核心骨架,负责页面整体结构组织、导航管理、主题控制和响应… - [主布局(Layout)](https://ruoyi.plus/frontend/layout/main-layout.html):Layout.vue 是 RuoYi-Plus 前端管理系统的核心布局容器组件,负责协调和管理整个应用的界面结构。它提供… - [侧边栏(SideBar)](https://ruoyi.plus/frontend/layout/sidebar.html):侧边栏系统是后台管理界面的核心导航模块,由四个紧密协作的组件构成:Sidebar.vue(容器)、SidebarItem… - [顶部导航(NavBar)](https://ruoyi.plus/frontend/layout/navbar.html):顶部导航系统是后台管理界面的核心组成部分,提供了丰富的导航功能和工具集。该系统由核心导航组件和丰富的工具组件构成,支持水… - [标签视图(TagsView)](https://ruoyi.plus/frontend/layout/tags-view.html):标签视图系统是现代后台管理界面的核心交互组件,提供类似浏览器多标签页的管理和导航功能。该系统采用模块化架构设计,由 Ta… - [主内容区(AppMain)](https://ruoyi.plus/frontend/layout/app-main.html):主内容区系统是整个应用的核心内容渲染区域,负责根据当前路由动态加载和显示页面组件。该系统由 AppMain.vue(主内… - [设置面板(Settings)](https://ruoyi.plus/frontend/layout/settings.html):设置面板是后台管理系统的个性化配置中心,提供主题风格、菜单布局、颜色方案、水印配置等全方位的界面定制功能。该组件以右侧滑… - [前台布局 (HomeLayout)](https://ruoyi.plus/frontend/layout/home-layout.html):HomeLayout 是系统提供的极简布局方案,专为前台展示页面、登录认证页面和错误处理页面等场景设计。与功能完整的后台… ### 组件系统 (Components) - [组件概览](https://ruoyi.plus/frontend/components/overview.html):RuoYi-Plus-UI 提供了一套完整的企业级组件库,基于 Vue 3 和 Element Plus 构建,涵盖表格… ### 基础组件 - [图标系统](https://ruoyi.plus/frontend/components/basic/icon-system.html):RuoYi-Plus 前端项目采用三图标源架构,整合 Iconfont 字体图标、Iconify 图标方案与本地 SVG… - [Icon 图标](https://ruoyi.plus/frontend/components/basic/icon.html):Icon 图标组件是 RuoYi-Plus 前端框架中的核心 UI 组件,提供统一的图标展示能力。该组件整合了 Icon… - [DictTag 字典标签](https://ruoyi.plus/frontend/components/basic/dict-tag.html):基于字典数据的标签组件,支持多种显示样式和自动数据获取。 ### 表单组件 - [表单组件概览](https://ruoyi.plus/frontend/components/form/overview.html):RuoYi-Plus 前端项目提供了一套完整的表单组件体系,基于 Element Plus 进行二次封装,旨在简化表单开… - [AForm 表单容器](https://ruoyi.plus/frontend/components/form/form.html):AForm 是表单系统的核心容器组件,基于 Element Plus 的 ElForm 封装,提供了统一的表单布局、验证… - [AFormCascader 级联选择](https://ruoyi.plus/frontend/components/form/cascader.html):AFormCascader 是一个功能强大的级联选择组件,基于 Element Plus 的 ElCascader 封装… - [AFormCheckbox 复选框](https://ruoyi.plus/frontend/components/form/checkbox.html):AFormCheckbox 是一个功能丰富的复选框组件,基于 Element Plus 的 ElCheckbox 封装,… - [AFormDate 日期选择](https://ruoyi.plus/frontend/components/form/date.html):AFormDate 是一个功能完善的日期选择组件,基于 Element Plus 的 ElDatePicker 封装,支… - [AFormEditor 富文本编辑](https://ruoyi.plus/frontend/components/form/editor.html):AFormEditor 是一个功能丰富的富文本编辑器组件,基于 WangEditor 构建,支持图片上传、表格编辑、代码… - [AFormFileUpload 文件上传](https://ruoyi.plus/frontend/components/form/file-upload.html):AFormFileUpload 是一个功能丰富的文件上传组件,基于 Element Plus 的 ElUpload 封装… - [AFormImgUpload 图片上传](https://ruoyi.plus/frontend/components/form/img-upload.html):AFormImgUpload 是一个功能强大且灵活的图片上传组件,基于 Element Plus 的 Upload 组件… - [AFormInput 输入框](https://ruoyi.plus/frontend/components/form/input.html):AFormInput 是一个功能强大的输入框组件,基于 Element Plus 的 ElInput 封装,提供了统一的… - [AFormRadio 单选框](https://ruoyi.plus/frontend/components/form/radio.html):AFormRadio 是一个功能完善的单选框组件,基于 Element Plus 的 ElRadio 封装,支持标准单选… - [AFormSelect 选择器](https://ruoyi.plus/frontend/components/form/select.html):AFormSelect 是一个功能强大的选择器组件,基于 Element Plus 的 ElSelect 封装,支持单选… - [AFormSwitch 开关](https://ruoyi.plus/frontend/components/form/switch.html):AFormSwitch 是一个功能完善的开关组件,基于 Element Plus 的 ElSwitch 封装,适用于布尔… - [AFormTreeSelect 树选择](https://ruoyi.plus/frontend/components/form/tree-select.html):AFormTreeSelect 是一个功能丰富的树形选择组件,基于 Element Plus 的 ElTreeSelec… - [IconSelect 图标选择器](https://ruoyi.plus/frontend/components/form/icon-select.html):IconSelect 是一个功能强大的图标选择器组件,提供了 817+ 图标的选择功能,支持实时搜索、悬停预览和双向数据… ### 数据展示 - [ADataCard 数据卡片](https://ruoyi.plus/frontend/components/display/data-card.html):ADataCard 是一个专为数据仪表盘设计的卡片组件,用于展示关键业务指标和数据统计。该组件采用主数据 + 对比数据的… ### ADetailDialog 详情对话框 - [TableToolbar 表格工具栏](https://ruoyi.plus/frontend/components/display/table-toolbar.html):TableToolbar 是 RuoYi-Plus 前端框架中的核心表格辅助组件,为数据表格提供统一的工具栏操作入口。该… - [Pagination 分页](https://ruoyi.plus/frontend/components/display/pagination.html):基于Element Plus的增强分页组件,提供更丰富的功能和更好的用户体验。 ### 反馈组件 - [ASearchForm 搜索表单](https://ruoyi.plus/frontend/components/feedback/search-form.html):ASearchForm 是 RuoYi-Plus-UniApp 前端管理端提供的通用搜索表单容器组件,专为列表页面的搜索… ### 业务组件 - [业务组件概览](https://ruoyi.plus/frontend/components/business/overview.html):RuoYi-Plus-UniApp 前端管理端提供了一套完整的业务组件库,涵盖表单输入、数据展示、弹窗交互、图表可视化、… ### AOssMediaManager 媒体库 - [ARecharge 充值组件](https://ruoyi.plus/frontend/components/business/recharge.html):ARecharge 是一个企业级在线充值组件,提供完整的扫码支付充值功能。组件封装了从金额选择、订单创建、支付二维码生成… - [AImportExcel Excel 导入](https://ruoyi.plus/frontend/components/business/import-excel.html):AImportExcel 是一个功能完善的Excel文件导入组件,提供Excel文件的上传、导入和模板下载功能。组件采用… - [UserSelect 用户选择](https://ruoyi.plus/frontend/components/business/user-select.html):UserSelect 用户选择组件是一个功能强大的业务组件,基于 useSelection 组合函数实现,提供弹窗式的用… ### 组合式函数 (composables) - [组合式函数概览](https://ruoyi.plus/frontend/composables/overview.html):组合式函数(Composables)是 Vue 3 Composition API 的核心概念,它们是利用 Vue 的响… ### 核心组合函数 - [useAuth 认证管理](https://ruoyi.plus/frontend/composables/use-auth.html):认证与授权组合函数,提供用户认证与权限检查功能,包括权限字符串检查、角色校验、租户权限和路由访问控制。 - [useDict 字典管理](https://ruoyi.plus/frontend/composables/use-dict.html):useDict 是一个用于字典数据管理的组合式函数,提供字典数据的获取、缓存和管理功能。该 Composable 与 u… - [useHttp 请求封装](https://ruoyi.plus/frontend/composables/use-http.html):基于 Axios 的 HTTP 请求封装组合函数,提供完整的请求拦截、响应处理、错误处理和安全机制。该组合函数是前端与后… - [useToken 令牌管理](https://ruoyi.plus/frontend/composables/use-token.html):useToken 是一个专注于用户认证令牌(Token)管理的组合式函数,基于封装的 localCache 工具实现 T… - [useI18n 国际化](https://ruoyi.plus/frontend/composables/use-i18n.html):useI18n 是前端项目中的核心国际化 Composable,它对 Vue I18n 的原生 useI18n 钩子进行… ### 界面组合函数 - [useLayout 布局管理](https://ruoyi.plus/frontend/composables/use-layout.html):布局状态管理组合函数,提供统一的布局配置、响应式设计和界面状态管理功能。该 Composable 是 Plus-UI 管… - [useAnimation 动画效果](https://ruoyi.plus/frontend/composables/use-animation.html):动画工具组合函数,基于 Animate.css 提供了丰富的动画效果和管理功能,用于实现页面切换动画、组件过渡效果和 D… - [useDialog 对话框](https://ruoyi.plus/frontend/composables/use-dialog.html):对话框管理组合函数,提供对话框状态管理和操作的统一解决方案。useDialog 是一个轻量级的状态管理 Composab… - [useTheme 主题管理](https://ruoyi.plus/frontend/composables/use-theme.html):主题管理组合函数,提供对应用主题的响应式管理功能。useTheme 是整个前端主题系统的核心入口,负责主题色的设置、切换… - [useResponsiveSpan 响应式](https://ruoyi.plus/frontend/composables/use-responsive-span.html):响应式栅格组合函数,提供统一的响应式栅格计算逻辑,包含屏幕响应式、容器响应式、弹窗尺寸响应式等多种模式。该组合函数是构建… - [useTableHeight 表格高度](https://ruoyi.plus/frontend/composables/use-table-height.html):useTableHeight 是一个基于 Vue 3 Composition API 实现的表格高度自适应组合函数,用于… ### 业务组合函数 - [useSelection 选择管理](https://ruoyi.plus/frontend/composables/use-selection.html):表格选择管理组合函数,提供完整的表格行选择状态管理能力,支持单选、多选、跨页选择等多种场景,与 Element Plus… - [useDownload 下载管理](https://ruoyi.plus/frontend/composables/use-download.html):文件下载相关的组合式函数,提供了完整的文件下载解决方案,支持多种下载方式和格式。该组合函数封装了通用下载、Excel导出… - [usePrint 打印功能](https://ruoyi.plus/frontend/composables/use-print.html):打印功能组合函数,提供页面打印、PDF生成、打印预览和打印设置等功能,支持自定义打印样式和多种打印模式。 - [useSSE 服务端事件](https://ruoyi.plus/frontend/composables/use-sse.html):Server-Sent Events (SSE) 实时消息推送 Composable,提供智能退避策略的实时消息推送功能… - [useWS WebSocket通信](https://ruoyi.plus/frontend/composables/use-websocket.html):WebSocket 通信钩子函数,提供完整的 WebSocket 连接管理和消息处理功能,支持动态退避重连策略。 - [useAiChat AI对话](https://ruoyi.plus/frontend/composables/use-ai-chat.html):useAiChat 是一组用于集成 AI 对话功能的组合式函数,提供了与后端 AI 服务进行交互的完整解决方案。该模块封… ### 工具库 (utils) - [工具函数概览](https://ruoyi.plus/frontend/utils/utils-overview.html):Vue3 + TypeScript 项目的完整工具函数库,提供了丰富的实用工具函数,涵盖了前端开发中的各种常见需求。本文… - [颜色工具](https://ruoyi.plus/frontend/utils/colors.html):颜色处理相关工具函数,提供颜色验证、转换、混合和主题设置等功能,是前端主题系统和动态样式的核心支撑模块。 - [字符串工具](https://ruoyi.plus/frontend/utils/string.html):字符串处理工具库,提供全面的字符串操作、格式转换、验证和处理功能,涵盖前端开发中的各种字符串处理需求。 - [对象工具](https://ruoyi.plus/frontend/utils/object.html):对象工具函数集合,提供全面的对象处理功能。该模块是 Plus-UI 管理系统的核心工具库之一,涵盖对象基本操作、属性访问… - [日期工具](https://ruoyi.plus/frontend/utils/date.html):日期工具类,提供日期格式化、转换、计算的通用工具函数。自动兼容两种格式语法:yyyy-MM-dd HH:mm:ss 和 … - [格式化工具](https://ruoyi.plus/frontend/utils/format.html):格式化工具函数集合,提供全面的数据格式化功能,包含数值、时间、隐私数据、文本、集合、状态等各种类型的格式化处理。 - [函数工具](https://ruoyi.plus/frontend/utils/function.html):函数工具类,提供复制文本、HTTP配置、防抖节流、函数执行控制、函数转换组合、异步函数工具等实用功能。 - [验证器](https://ruoyi.plus/frontend/utils/validators.html):通用验证工具函数集合,提供全面的数据验证功能,包含文件、URL、字符串、类型、数值、日期、中国特定格式、表单、网络标识等… - [布尔值工具](https://ruoyi.plus/frontend/utils/boolean.html):布尔值处理工具类,提供多格式真假值检查、类型转换和状态切换功能,支持字符串、数字、布尔值、null/undefined等… - [加密工具](https://ruoyi.plus/frontend/utils/crypto.html):加密工具类,提供全面的加密、解密、哈希计算等安全功能,基于 CryptoJS 库实现。 - [RSA加密](https://ruoyi.plus/frontend/utils/rsa.html):基于 JSEncrypt 库的 RSA 加密解密工具,提供完整的 RSA 加密、解密、签名和验证功能,是前端安全通信的核… - [缓存工具](https://ruoyi.plus/frontend/utils/cache.html):浏览器缓存工具集合,提供对浏览器存储机制的完整封装,支持会话级和持久化的数据存储操作。所有缓存键会自动添加应用ID前缀,… - [DOM类操作](https://ruoyi.plus/frontend/utils/class.html):DOM 元素 class 操作相关工具函数,提供全面的 CSS 类名操作功能,包括检查、添加、移除、切换、替换等常用操作… - [滚动工具](https://ruoyi.plus/frontend/utils/scroll.html):滚动相关工具函数,提供平滑滚动、位置控制、可见性检测等功能,让页面滚动体验更加流畅和用户友好。 - [树形工具](https://ruoyi.plus/frontend/utils/tree.html):树结构工具函数库,提供全面的树形数据结构处理工具,用于前端各种树形数据的操作和转换。 - [模态框工具](https://ruoyi.plus/frontend/utils/modal.html):Element Plus 消息与弹窗工具函数集,提供统一的用户交互反馈功能,包括消息提示、弹窗提示、通知、确认框、输入框… - [标签页工具](https://ruoyi.plus/frontend/utils/tab.html):标签页导航操作相关工具函数,提供完整的标签页管理功能,包括页面刷新、打开、关闭、更新等操作,适用于后台管理系统的多标签页… - [To工具类](https://ruoyi.plus/frontend/utils/to.html):to.ts 是一个强大的异步执行工具函数集,专门用于将 Promise 和可能抛出异常的代码转换为 [error, da… - [主题动画](https://ruoyi.plus/frontend/utils/theme-animation.html):themeAnimation 模块提供了基于 View Transition API 的主题切换动画效果,实现从点击位置… ### 指令系统 (directives) - [权限指令](https://ruoyi.plus/frontend/directives/permission.html):权限控制指令是 RuoYi-Plus 前端框架中用于细粒度 UI 权限控制的核心功能模块。基于 Vue 3 的自定义指令… ### 样式系统 (styles) - [样式架构](https://ruoyi.plus/frontend/styles/style-architecture.html):RuoYi-Plus-UniApp 前端项目采用完整的 SCSS 模块化样式架构,基于 ITCSS (Inverted … - [UnoCSS配置](https://ruoyi.plus/frontend/styles/unocss-config.html):RuoYi-Plus-UniApp 前端项目使用 UnoCSS 作为原子化 CSS 引擎,提供即时、按需的原子化 CSS… - [工具类使用](https://ruoyi.plus/frontend/styles/utility-classes.html):RuoYi-Plus-UniApp 前端项目基于 UnoCSS 构建了一套完整的原子化 CSS 工具类系统,提供即时、按… - [全局样式](https://ruoyi.plus/frontend/styles/global-styles.html):RuoYi-Plus-UniApp 前端项目的全局样式系统提供了一套完整的基础样式规范,包括全局变量、重置样式、排版系统… - [主题系统](https://ruoyi.plus/frontend/styles/theme-system.html):RuoYi-Plus-UniApp 前端管理系统提供了一套完整且强大的主题系统,支持亮色/暗色双模式切换、自定义主题色、… - [CSS 变量系统](https://ruoyi.plus/frontend/styles/css-variables.html):RuoYi-Plus-UI 采用 CSS 自定义属性(CSS Variables)构建完整的设计系统,实现主题切换、样式… - [颜色系统](https://ruoyi.plus/frontend/styles/color-system.html):RuoYi-Plus-UI 提供了完整的颜色处理系统,包括颜色工具函数库和主题管理 Composable。颜色系统负责颜… - [SCSS Mixins](https://ruoyi.plus/frontend/styles/scss-mixins.html):RuoYi-Plus-UI 提供了一套实用的 SCSS 混合器(Mixins)函数集,封装了常用的样式模式和复杂的 CS… - [Element Plus 定制](https://ruoyi.plus/frontend/styles/element-plus-customization.html):Element Plus 是 RuoYi-Plus-UI 管理端的核心 UI 组件库。为了实现统一的视觉风格和更好的用户… - [组件样式](https://ruoyi.plus/frontend/styles/component-styles.html):RuoYi-Plus-UniApp 前端项目的组件样式系统提供了一套统一的组件样式规范和实现,确保所有UI组件保持一致的… - [动画系统](https://ruoyi.plus/frontend/styles/animations.html):RuoYi-Plus-UniApp 前端项目建立了完善的动画系统,通过 CSS 过渡(Transition)、关键帧动画… - [响应式设计](https://ruoyi.plus/frontend/styles/responsive.html):RuoYi-Plus-UniApp 前端项目采用移动优先(Mobile-First)的响应式设计理念,通过 UnoCSS… - [最佳实践](https://ruoyi.plus/frontend/styles/best-practices.html):本文档汇总了 RuoYi-Plus-UniApp 前端项目样式系统的最佳实践,涵盖 SCSS 架构、UnoCSS 原子化… ### 图标系统 (icons) - [图标系统概述](https://ruoyi.plus/frontend/icons/overview.html):项目采用双图标系统架构,结合 Iconify 和 Iconfont 两种图标方案,提供丰富的图标资源和灵活的使用方式。通… - [Iconify配置](https://ruoyi.plus/frontend/icons/iconify-config.html):Iconify 是一个强大的图标框架,提供超过 200,000 个开源图标。项目通过 UnoCSS 的 presetIc… - [Iconfont配置](https://ruoyi.plus/frontend/icons/iconfont-config.html):Iconfont 是项目的自定义字体图标系统,包含 644 个业务专属图标,通过字体文件的方式提供图标支持。相比 SVG… - [图标类型生成](https://ruoyi.plus/frontend/icons/type-generation.html):项目使用自定义 Vite 插件自动扫描图标 JSON 文件,生成 TypeScript 类型定义,为图标系统提供完整的类… - [图标组件使用](https://ruoyi.plus/frontend/icons/component-usage.html):项目提供了 Icon 和 IconSelect 两个核心组件,支持 Iconfont 和 Iconify 双图标系统,提… - [图标预设管理](https://ruoyi.plus/frontend/icons/preset-management.html):图标预设管理用于配置和优化 UnoCSS 图标系统的加载策略,确保常用图标快速可用,提升应用性能。本文档详细介绍图标预设… - [图标最佳实践](https://ruoyi.plus/frontend/icons/best-practices.html):图标使用的最佳实践指南,涵盖选择、使用、优化和维护等方面,帮助开发者高效管理图标资源。本文档基于 Plus-UI 项目实… ### 类型定义 (types) - [类型系统概览](https://ruoyi.plus/frontend/types/overview.html):RuoYi-Plus-UniApp 前端项目采用 TypeScript 构建完整的类型系统,通过全局类型声明、模块扩展和… - [API类型](https://ruoyi.plus/frontend/types/api-types.html):API 类型定义用于前后端数据交互,确保请求和响应的类型安全。 - [全局类型](https://ruoyi.plus/frontend/types/global-types.html):全局类型定义在 global.d.ts 中,通过 declare global 声明,在项目任何位置都可直接使用无需导入… - [组件类型](https://ruoyi.plus/frontend/types/component-types.html):组件类型定义是 Vue 3 TypeScript 项目中确保类型安全的核心部分。所有业务组件都使用 TypeScript… - [路由类型](https://ruoyi.plus/frontend/types/router-types.html):路由类型通过模块扩展方式扩展 Vue Router 的类型定义,添加自定义属性和功能,支持权限控制、导航配置、外部链接和… - [状态类型](https://ruoyi.plus/frontend/types/store-types.html):Store 状态类型系统是基于 Pinia 的状态管理类型定义集合,为前端应用提供类型安全的全局状态管理能力。系统涵盖用… - [工具类型](https://ruoyi.plus/frontend/types/utility-types.html):工具类型(Utility Types)是 TypeScript 提供的一组强大的类型转换工具,用于从现有类型构造新类型。… - [枚举类型](https://ruoyi.plus/frontend/types/enums.html):枚举类型是 RuoYi-Plus-UniApp 前端项目中用于定义一组命名常量的重要机制。通过使用 TypeScript… - [类型扩展](https://ruoyi.plus/frontend/types/type-extensions.html):TypeScript 类型扩展是 RuoYi-Plus 前端框架中的核心类型系统,通过模块声明和接口合并等技术,为项目提… ### 开发工具 (dev) - [Prettier配置](https://ruoyi.plus/frontend/dev/prettier-config.html):深入解析项目的 Prettier 配置和格式化规则。 - [调试技巧](https://ruoyi.plus/frontend/dev/debugging.html):前端项目的调试方法和工具使用指南。 - [性能分析](https://ruoyi.plus/frontend/dev/performance.html):前端项目的性能分析和优化指南。 - [单元测试](https://ruoyi.plus/frontend/dev/testing.html):前端项目的单元测试配置和编写指南。 - [开发最佳实践](https://ruoyi.plus/frontend/dev/best-practices.html):前端项目的开发规范和最佳实践指南。 - [自定义组件开发](https://ruoyi.plus/frontend/dev/custom-component.html):RuoYi-Plus-UniApp 前端管理端提供了一套完整的组件开发规范和工具链,帮助开发者快速构建高质量的自定义业务… ### 低代码工具 (tools) - [页面设计器](https://ruoyi.plus/frontend/tools/page-designer.html):页面设计器是一个功能强大的可视化低代码开发工具,通过拖拽组件、配置属性、AI 智能辅助,快速生成 Vue 页面代码。它采… ### 国际化 (locales) - [国际化配置](https://ruoyi.plus/frontend/i18n/i18n-config.html):RuoYi-Plus-UniApp 前端项目采用 Vue I18n 作为国际化解决方案,提供完整的多语言支持能力。系统内… - [语言包管理](https://ruoyi.plus/frontend/i18n/language-packs.html):语言包是国际化系统的核心组成部分,负责存储和组织多语言翻译文本。RuoYi-Plus 前端框架采用模块化的结构设计语言包… - [组件国际化](https://ruoyi.plus/frontend/i18n/component-i18n.html):组件国际化是前端应用实现多语言支持的核心功能,框架基于 Vue I18n 提供了增强的 useI18n() compos… - [国际化最佳实践](https://ruoyi.plus/frontend/i18n/i18n-practices.html):本文档提供在框架中使用国际化的最佳实践和常见模式,帮助开发者高效、规范地实现多语言支持。 ## 移动端(UniApp + WD UI) ### 快速开始 - [项目简介](https://ruoyi.plus/mobile/):RuoYi-Plus-UniApp 移动端是一个基于 UniApp + Vue 3 + TypeScript 的企业级跨… - [快速启动](https://ruoyi.plus/mobile/getting-started.html):本章节将指导你快速启动 RuoYi-Plus-UniApp 移动端项目,支持 H5、微信小程序、支付宝小程序、App 等… - [项目结构](https://ruoyi.plus/mobile/project-structure.html):Ruoyi-Plus-Uniapp 移动端项目采用标准的 uni-app 项目结构,基于 Vue 3 + TypeScr… - [配置文件](https://ruoyi.plus/mobile/configuration.html):RuoYi-Plus-UniApp 移动端项目采用现代化的配置体系,基于 Vite 构建工具和 uni-app 框架,提… - [开发规范](https://ruoyi.plus/mobile/dev-standards.html):本文档规定了移动端 UniApp 项目的开发规范,包括命名规范、代码风格、组件开发、API设计等方面的标准。这些规范基于… ### UniApp基础 - [UniApp概览](https://ruoyi.plus/mobile/uniapp/overview.html):uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、W… - [项目配置 (manifest.json)](https://ruoyi.plus/mobile/uniapp/manifest-config.html):manifest.json 是 UniApp 应用的核心配置清单文件,用于定义应用的基本信息、平台配置、权限声明等关键设… - [页面配置 (pages.json)](https://ruoyi.plus/mobile/uniapp/pages-config.html):pages.json 是 uni-app 的页面路由配置文件,用于配置页面路径、窗口样式、原生导航栏、底部 tabBar… - [应用配置 (uni.scss)](https://ruoyi.plus/mobile/uniapp/app-config.html):应用配置是 UniApp 项目的核心基础设施,统一管理应用的运行时配置、环境变量、样式变量等关键信息。RuoYi-Plu… - [生命周期](https://ruoyi.plus/mobile/uniapp/lifecycle.html):uni-app 的生命周期分为三类: - [路由导航](https://ruoyi.plus/mobile/uniapp/navigation.html):uni-app 使用单页面应用模型,页面跳转通过路由导航 API 实现。本文档介绍路由导航的各种方式、参数传递、以及项目… - [条件编译](https://ruoyi.plus/mobile/uniapp/conditional.html):条件编译是 uni-app 的核心特性之一,用于在不同平台编译不同的代码。通过条件编译,可以实现一套代码多端运行,同时针… - [HBuilderX使用](https://ruoyi.plus/mobile/uniapp/hbuilderx.html):HBuilderX 是 DCloud 推出的 uni-app 官方开发工具,专为 uni-app 和 App 开发优化。… ### WD UI 组件库 (78组件) - [组件库概览](https://ruoyi.plus/mobile/wd/overview.html):Wot Design Uni 是一个基于 Vue 3 + TypeScript 的 uni-app 组件库,提供 98 … - [主题定制](https://ruoyi.plus/mobile/styles/theme.html):RuoYi-Plus-UniApp 移动端提供了完整的主题定制系统,支持全局主题配置、深色模式、CSS 变量定制等功能。… - [快速开始](https://ruoyi.plus/mobile/wd/getting-started.html):WD UI (Wot Design Uni) 是一套基于 Vue 3 和 UniApp 的高质量移动端 UI 组件库,提… ### 基础组件 (6个) - [Button 按钮](https://ruoyi.plus/mobile/wd/basic/button.html):按钮用于触发一个操作,如提交表单、打开链接或执行业务逻辑。 - [Icon 图标](https://ruoyi.plus/mobile/wd/basic/icon.html):Icon 图标组件为应用提供统一的图标展示方案,支持三种图标类型:字体图标、UnoCSS图标和图片图标。WD UI 内置… - [Text 文本](https://ruoyi.plus/mobile/wd/basic/text.html):Text 文本组件是一个功能强大的文本展示组件,提供丰富的文本样式、格式化、脱敏和图标组合功能。相比原生 标签,WD T… - [Transition 动画](https://ruoyi.plus/mobile/wd/basic/transition.html):Transition 是 WD UI 提供的过渡动画组件,用于在元素显示和隐藏时添加平滑的过渡效果。组件基于 CSS3 … - [Resize 监听元素尺寸](https://ruoyi.plus/mobile/wd/basic/resize.html):Resize 是 WD UI 提供的尺寸监听组件,用于监听元素尺寸变化并触发回调事件。当组件包裹的内容尺寸发生改变时,会… - [ConfigProvider 配置](https://ruoyi.plus/mobile/wd/basic/config-provider.html):ConfigProvider 是 WD UI 提供的全局配置组件,用于向下传递配置信息,实现主题定制、深色模式切换等功能… ### 布局组件 (5个) - [Row-Col 行列布局](https://ruoyi.plus/mobile/wd/layout/row-col.html):Row-Col (行列布局) 是一套基于 24 栅格系统的布局组件,通过 Row (行) 和 Col (列) 的组合,快… - [Grid 宫格](https://ruoyi.plus/mobile/wd/layout/grid.html):Grid 宫格组件是一个强大的网格布局容器,用于在页面中展示等宽度的网格内容块。该组件常用于首页导航菜单、功能入口、图标… - [Gap 间隙槽](https://ruoyi.plus/mobile/wd/layout/gap.html):Gap 间隙槽组件是一个轻量级的布局辅助组件,用于在页面中创建固定高度的间隔空间。该组件常用于代替 margin 或 p… - [Divider 分割线](https://ruoyi.plus/mobile/wd/layout/divider.html):Divider 分割线组件用于在页面中创建视觉分隔,将内容划分为不同的区域或部分。该组件支持水平和垂直两种方向,提供实线… - [Sticky 吸顶布局](https://ruoyi.plus/mobile/wd/layout/sticky.html):Sticky (吸顶布局) 是一个粘性定位组件,用于在页面滚动时将元素固定在指定位置。该组件通过监听页面滚动事件,当目标… ### 导航组件 (10个) - [Navbar 导航栏](https://ruoyi.plus/mobile/wd/navigation/navbar.html):Navbar (导航栏) 是一个页面顶部导航组件,为页面提供导航功能。组件支持固定定位、自定义标题、左右两侧按钮、胶囊模… - [Tabbar 标签栏](https://ruoyi.plus/mobile/wd/navigation/tabbar.html):Tabbar 标签栏组件是一个底部导航栏组件,用于在不同页面或功能模块之间进行快速切换。它是移动应用中最常用的导航组件之… - [Tabs 标签页](https://ruoyi.plus/mobile/wd/navigation/tabs.html):Tabs 标签页组件是一个功能强大的内容切换组件,用于在多个平行内容区域之间切换展示。 - [Segmented 分段器](https://ruoyi.plus/mobile/wd/navigation/segmented.html):Segmented 分段器是一个用于在多个选项之间进行单选切换的组件,通常用于切换不同的视图、筛选条件或功能模式。该组件… - [Sidebar 侧边栏](https://ruoyi.plus/mobile/wd/navigation/sidebar.html):Sidebar 侧边栏是一个垂直展示的导航组件,用于在不同的内容区域之间进行切换。该组件常用于商品分类、设置页面、内容列… - [IndexBar 索引栏](https://ruoyi.plus/mobile/wd/navigation/index-bar.html):IndexBar 索引栏是一个用于列表索引分类显示和快速定位的导航组件。通过右侧的字母索引栏,用户可以快速跳转到对应的内… - [Pagination 分页](https://ruoyi.plus/mobile/wd/navigation/pagination.html):Pagination 分页组件用于在数据量过多时,将数据分页展示,提供页码导航功能。组件采用简洁的设计风格,支持文本和图… - [Paging 分页加载](https://ruoyi.plus/mobile/wd/navigation/paging.html):Paging 分页加载组件是一个功能强大的智能分页解决方案,专为复杂列表场景设计。组件基于 scroll-view 实现… - [Backtop 回到顶部](https://ruoyi.plus/mobile/wd/navigation/backtop.html):Backtop 回到顶部组件用于返回页面顶部的操作按钮。当页面滚动到一定距离后自动显示,点击后平滑滚动回到页面顶部,提升… - [Fab 悬浮按钮](https://ruoyi.plus/mobile/wd/navigation/fab.html):wd-fab 是一个功能丰富的悬浮动作按钮组件(Floating Action Button),用于在页面上提供快捷操作… ### 表单组件 (25个) - [Input 输入框](https://ruoyi.plus/mobile/wd/form/input.html):Input 输入框是表单组件中最基础和最常用的组件,用于接收用户的单行文本输入。它基于 UniApp 的原生 input… - [Textarea 文本域](https://ruoyi.plus/mobile/wd/form/textarea.html):Textarea 文本域是一个功能强大的多行文本输入组件,用于收集用户的长文本内容,如评论、反馈、描述等场景。它基于 U… - [InputNumber 计数器](https://ruoyi.plus/mobile/wd/form/input-number.html):InputNumber 计数器组件是一个专业的数字输入控件,由减号按钮、输入框和加号按钮组成,用于在特定范围内通过点击按… - [PasswordInput 密码](https://ruoyi.plus/mobile/wd/form/password-input.html):PasswordInput 密码输入框组件是一个专业的网格式密码输入控件,采用分格显示的方式,为用户提供清晰、安全的密码… - [Search 搜索](https://ruoyi.plus/mobile/wd/form/search.html):Search 搜索框组件是一个专业的搜索输入控件,提供了完整的搜索交互体验。组件支持输入、搜索、清空、取消等操作,广泛应… - [Checkbox 复选框](https://ruoyi.plus/mobile/wd/form/checkbox.html):Checkbox 复选框组件用于在一组备选项中进行多选。复选框是表单中最常用的组件之一,允许用户从一组选项中选择多个项目… - [Radio 单选框](https://ruoyi.plus/mobile/wd/form/radio.html):Radio 单选框组件用于在一组备选项中进行单选。单选框是表单中最常用的组件之一,允许用户从一组互斥的选项中选择一个项目… - [Switch 开关](https://ruoyi.plus/mobile/wd/form/switch.html):Switch 开关是一个用于在两种状态之间切换的交互式组件。通过点击或滑动操作,用户可以快速开启或关闭某个功能选项。开关… - [Rate 评分](https://ruoyi.plus/mobile/wd/form/rate.html):Rate 评分组件是一个用于快速评分操作和评分展示的交互式组件。通过直观的星级显示方式,用户可以轻松地对内容、服务或产品… - [Slider 滑块](https://ruoyi.plus/mobile/wd/form/slider.html):Slider 滑块组件是一个用于在连续或离散的数值范围内进行选择的交互式组件。通过拖动滑块,用户可以直观地设置数值,广泛… - [Picker 选择器](https://ruoyi.plus/mobile/wd/form/picker.html):Picker 选择器是一个功能强大的底部弹出式选择组件,结合了 Popup 弹出层和 PickerView 选择器视图的… - [PickerView 选择器视图](https://ruoyi.plus/mobile/wd/form/picker-view.html):PickerView 选择器视图是一个嵌入页面的滚动选择器组件,用于从一组数据中选择单个或多个值。与 Picker 组件… - [ColPicker 多列选择器](https://ruoyi.plus/mobile/wd/form/col-picker.html):ColPicker 多列选择器是一个功能强大的级联选择组件,专为移动端设计,提供流畅的多列级联选择体验。组件支持无限级选… - [SelectPicker 单复选](https://ruoyi.plus/mobile/wd/form/select-picker.html):SelectPicker 选择器是一个功能强大的表单选择组件,支持单选、多选和自定义三种选择模式。 - [DatetimePicker 时间](https://ruoyi.plus/mobile/wd/form/datetime-picker.html):DatetimePicker 日期时间选择器是一个功能全面的日期时间选择组件,基于 DatetimePickerView… - [DatetimePickerView](https://ruoyi.plus/mobile/wd/form/datetime-picker-view.html):DatetimePickerView 日期时间选择器视图是 PickerView 组件的封装,在其内部构建好日期时间选项… - [Calendar 日历](https://ruoyi.plus/mobile/wd/form/calendar.html):Calendar 日历选择器是一个功能全面的日期选择组件,提供多种选择模式和灵活的配置选项。组件支持单日选择、多日选择、… - [CalendarView 日历板](https://ruoyi.plus/mobile/wd/form/calendar-view.html):CalendarView 日历板是一个功能强大的嵌入式日历组件,提供日期单选、多选、范围选择、周维度、月维度等多种选择模… - [Upload 上传](https://ruoyi.plus/mobile/wd/form/upload.html):Upload 上传组件是一个功能强大的文件上传组件,专为移动端设计,支持图片、视频、音频和各类文档上传。组件提供了完善的… - [Form 表单](https://ruoyi.plus/mobile/wd/form/form.html):Form 表单组件是用于数据录入和校验的容器组件,统一管理表单数据、验证规则和错误提示。支持各类表单控件(输入框、选择器… - [Signature 签名](https://ruoyi.plus/mobile/wd/form/signature.html):Signature 签名组件是一个基于 Canvas 实现的高性能手写签名组件,专为电子签名、手写板、合同签署等业务场景… - [Recorder 录音](https://ruoyi.plus/mobile/wd/form/voice-recorder.html):VoiceRecorder 录音组件用于录制音频内容,基于小程序录音管理器 RecorderManager 实现。组件提… - [Keyboard 虚拟键盘](https://ruoyi.plus/mobile/wd/form/keyboard.html):Keyboard 虚拟键盘组件是一个功能完善的数字输入组件,专为移动端设计,用于输入数字、密码、身份证号、车牌号、金额等… - [NumberKeyboard 数字键盘](https://ruoyi.plus/mobile/wd/form/number-keyboard.html):NumberKeyboard 数字键盘是专门用于数字输入的虚拟键盘组件,适用于支付密码、验证码、金额输入、身份证号等场景… - [SlideVerify 滑动验证](https://ruoyi.plus/mobile/wd/form/slide-verify.html):SlideVerify 滑动验证组件要求用户手动将滑块拖动到轨道末端,以完成简单的"我不是机器人"验证。相比传统的字符验… ### 展示组件 (15个) - [Cell 单元格](https://ruoyi.plus/mobile/wd/display/cell.html):Cell 单元格是列表中的基础展示组件,用于展示标题、内容、图标等信息。单元格组件提供了灵活的布局和丰富的配置选项,支持… - [Avatar 头像](https://ruoyi.plus/mobile/wd/display/avatar.html):Avatar 头像组件用于展示用户、实体或系统角色的可视化标识。它同时支持图片、文字与图标三种展示方式,并在图片加载失败… - [Badge 徽标](https://ruoyi.plus/mobile/wd/display/badge.html):Badge 徽标组件用于在按钮、图标等元素的右上角显示数字或状态标记,常用于消息通知、购物车数量、待办事项计数等场景。组… - [Tag 标签](https://ruoyi.plus/mobile/wd/display/tag.html):Tag 标签组件用于标记和分类,提供多种预设颜色和样式。Tag 组件支持基础标签、幽灵标签、圆角标签、标记标签、可关闭标… - [Card 卡片](https://ruoyi.plus/mobile/wd/display/card.html):Card 卡片组件是一个灵活的内容容器,用于承载图片、文字、列表等内容。卡片组件提供了清晰的内容层级结构,包含标题区域、… - [Collapse 折叠面板](https://ruoyi.plus/mobile/wd/display/collapse.html):Collapse 折叠面板组件将一组内容放置在多个可折叠的面板中,点击面板的标题可以展开或收缩其内容。组件支持普通模式、… - [Steps 步骤条](https://ruoyi.plus/mobile/wd/display/steps.html):Steps 步骤条组件用于引导用户按照流程完成任务或向用户展示当前状态。步骤条通过清晰的视觉反馈,帮助用户了解当前进度和… - [Table 表格](https://ruoyi.plus/mobile/wd/display/table.html):Table 是一个功能丰富的表格组件,用于展示多条结构类似的数据。它支持配置式和子组件式两种使用方式,提供了固定表头、固… - [Img 图片](https://ruoyi.plus/mobile/wd/display/img.html):Img 是一个增强版的图片组件,在 UniApp 原生 image 组件的基础上提供了更丰富的功能和更好的用户体验。它不… - [ImgCropper 图片裁剪](https://ruoyi.plus/mobile/wd/display/img-cropper.html):ImgCropper 是一个功能完善的图片裁剪组件,提供了直观的全屏裁剪界面,让用户能够轻松地对图片进行裁剪、缩放和旋转… - [Swiper 轮播图](https://ruoyi.plus/mobile/wd/display/swiper.html):Swiper 是一个功能强大的轮播组件,支持图片和视频资源的轮播展示。它提供了丰富的配置选项和灵活的自定义能力,支持水平… - [Skeleton 骨架屏](https://ruoyi.plus/mobile/wd/display/skeleton.html):Skeleton 骨架屏组件用于在内容加载过程中展示占位图形,通过展示页面的大致结构,减少用户等待的焦虑感。 - [Curtain 幕帘](https://ruoyi.plus/mobile/wd/display/curtain.html):Curtain 幕帘组件是一种特殊的弹窗组件,主要用于展示公告类的图片弹窗。它通常用于应用首页的活动广告、运营公告、促销… - [Watermark 水印](https://ruoyi.plus/mobile/wd/display/watermark.html):Watermark 是一个功能完善的水印组件,用于在页面或组件上添加指定的图片或文字水印,可用于版权保护、品牌宣传、防截… - [Progress 进度条](https://ruoyi.plus/mobile/wd/display/progress.html):Progress 是一个进度条组件,用于展示操作的当前进度。该组件支持自定义颜色、渐变颜色、状态图标、动画过渡等特性,广… ### 反馈组件 (19个) - [ActionSheet 上拉菜单](https://ruoyi.plus/mobile/wd/feedback/action-sheet.html):ActionSheet 是一个从底部弹出的动作菜单面板组件,用于让用户在多个选项中进行选择。该组件基于 Popup 弹出… - [Popup 弹出层](https://ruoyi.plus/mobile/wd/feedback/popup.html):Popup 是一个功能完善的弹出层组件,用于展示弹窗、信息提示、操作面板等内容。该组件基于 Overlay 遮罩层和 T… - [Overlay 遮罩层](https://ruoyi.plus/mobile/wd/feedback/overlay.html):Overlay 是一个遮罩层组件,用于创建半透明的背景遮罩,强调特定的页面元素并阻止用户进行其他操作。该组件基于 Tra… - [MessageBox 弹框](https://ruoyi.plus/mobile/wd/feedback/message-box.html):MessageBox 是一个模态对话框组件,用于消息提示、确认操作和获取用户输入。该组件基于 Popup 弹出层实现,支… - [Toast 轻提示](https://ruoyi.plus/mobile/wd/feedback/toast.html):Toast 轻提示是一个轻量级的消息通知组件,用于向用户显示简短的提示信息、操作结果反馈、加载状态等场景。组件支持函数式… - [Notify 消息通知](https://ruoyi.plus/mobile/wd/feedback/notify.html):Notify 是一个消息通知组件,用于在页面顶部或底部展示通知信息。该组件基于 Popup 弹出层实现,支持函数式调用,… - [Loading 加载指示器](https://ruoyi.plus/mobile/wd/feedback/loading.html):Loading 加载指示器是一个轻量级的加载动画组件,用于表示数据加载、异步操作等过渡状态。组件基于 SVG 图形和 C… - [Circle 环形进度条](https://ruoyi.plus/mobile/wd/feedback/circle.html):Circle 环形进度条是一个基于 Canvas 绑制的圆环形进度展示组件,支持进度渐变动画、渐变色、自定义样式等特性。… - [Loadmore 加载更多](https://ruoyi.plus/mobile/wd/feedback/loadmore.html):Loadmore 加载更多组件用于在列表底部展示加载状态,适用于分页加载、下拉刷新、无限滚动等场景。组件支持三种状态:加… - [StatusTip 缺省提示](https://ruoyi.plus/mobile/wd/feedback/status-tip.html):StatusTip 缺省提示组件用于页面中的兜底占位展示,适用于空数据、网络错误、搜索无结果等场景。组件内置多种预设图片… - [Tooltip 文字提示](https://ruoyi.plus/mobile/wd/feedback/tooltip.html):Tooltip 文字提示组件用于展示简短的提示信息,常用于解释图标、按钮等元素的含义。组件基于 usePopover C… - [Popover 气泡](https://ruoyi.plus/mobile/wd/feedback/popover.html):Popover 气泡组件用于展示弹出式的提示信息或操作菜单。相比 Tooltip,Popover 更适合展示复杂内容或操… - [DropMenu 下拉菜单](https://ruoyi.plus/mobile/wd/feedback/drop-menu.html):DropMenu 下拉菜单是一个向下或向上弹出的菜单列表组件,常用于商品筛选、排序、分类切换等场景。组件由 wd-dro… - [FloatingPanel 浮动面板](https://ruoyi.plus/mobile/wd/feedback/floating-panel.html):FloatingPanel 浮动面板是一种高级交互组件,它固定在页面底部,用户可以通过上下拖动面板来浏览内容。这种交互模… - [SwipeAction 滑动操作](https://ruoyi.plus/mobile/wd/feedback/swipe-action.html):SwipeAction 是一个滑动操作组件,常用于单元格左右滑动删除等手势操作场景。该组件支持左滑和右滑两个方向,可以在… - [SortButton 排序按钮](https://ruoyi.plus/mobile/wd/feedback/sort-button.html):SortButton 排序按钮组件用于展示可切换的排序状态,支持升序、降序、重置三种状态。组件采用有限状态机模式实现状态… - [NoticeBar 通知栏](https://ruoyi.plus/mobile/wd/feedback/notice-bar.html):NoticeBar 是一个通知栏组件,用于在页面顶部或指定位置展示通知信息。该组件支持水平滚动和垂直轮播两种展示模式,提… - [CountDown 倒计时](https://ruoyi.plus/mobile/wd/feedback/count-down.html):CountDown 倒计时组件用于实时展示倒计时数值,支持毫秒精度。适用于秒杀活动、验证码倒计时、限时优惠、考试计时、抢… - [CountTo 数字滚动](https://ruoyi.plus/mobile/wd/feedback/count-to.html):CountTo 数字滚动组件用于创建数字递增/递减动画效果,常用于数据统计、金额展示、进度显示等场景。通过平滑的数字滚动… ### 组合式函数 (composables) - [组合式函数概览](https://ruoyi.plus/mobile/composables/overview.html):RuoYi-Plus-UniApp 提供了一套完整的组合式函数(Composables),基于 Vue 3 Compos… ### 核心组合函数 - [useAuth 认证管理](https://ruoyi.plus/mobile/composables/use-auth.html):useAuth 是一个用于用户认证与授权管理的组合式函数,提供完整的权限检查、角色校验和路由访问控制功能。该 Compo… - [useDict 字典管理](https://ruoyi.plus/mobile/composables/use-dict.html):useDict 是 RuoYi-Plus-UniApp 提供的字典数据管理组合式函数(Composable),用于在组件… - [useHttp 请求管理](https://ruoyi.plus/mobile/composables/use-http.html):useHttp 是 RuoYi-Plus-UniApp 提供的 HTTP 请求管理组合式函数,封装了 UniApp 的网… - [useToken 令牌管理](https://ruoyi.plus/mobile/composables/use-token.html):useToken 是 RuoYi-Plus-UniApp 移动端的认证令牌管理 Composable,基于自定义缓存工具… - [useAppInit 应用初始化](https://ruoyi.plus/mobile/composables/use-app-init.html):useAppInit 是应用级别的初始化组合式函数,负责在应用启动时根据不同平台执行相应的初始化流程。它是整个应用的启动… ### 业务组合函数 - [usePayment 支付处理](https://ruoyi.plus/mobile/composables/use-payment.html):usePayment 是 RuoYi-Plus-UniApp 框架提供的统一支付管理组合式函数,专门用于处理移动端的多平… - [useShare 分享功能](https://ruoyi.plus/mobile/composables/use-share.html):useShare 是小程序分享功能组合函数,采用页面级单例模式实现。支持微信小程序、支付宝小程序、百度小程序、QQ小程序… - [useWxShare 微信分享](https://ruoyi.plus/mobile/composables/use-wx-share.html):useWxShare 是 RuoYi-Plus-UniApp 移动端的微信H5分享组合函数,用于在微信公众号H5环境中实… - [useSubscribe 订阅消息](https://ruoyi.plus/mobile/composables/use-subscribe.html):useSubscribe 是 RuoYi-Plus-UniApp 移动端的小程序订阅消息管理 Composable,用于… - [useScroll 滚动处理](https://ruoyi.plus/mobile/composables/use-scroll.html):useScroll 是一个基于全局单例模式实现的滚动位置管理 Composable,提供跨组件的滚动状态共享和统一管理。… - [useEventBus 事件总线](https://ruoyi.plus/mobile/composables/use-event-bus.html):useEventBus 是事件总线组合函数,提供组件间的事件通信功能,支持发布订阅模式的事件管理。此组合函数集成了 Vu… - [useImageCompress 图片压缩](https://ruoyi.plus/mobile/composables/use-image-compress.html):useImageCompress 是一个跨端统一封装的图片压缩 Composable,用于在图片上传前对图片进行体积压缩… - [useWebSocket 实时通信](https://ruoyi.plus/mobile/composables/use-websocket.html):useWebSocket 是一个功能完整的 WebSocket 实时通信管理 Composable,基于 UniApp … ### 界面组合函数 - [useTheme 主题管理](https://ruoyi.plus/mobile/composables/use-theme.html):useTheme 是一个用于主题配置管理的组合式函数,提供统一的主题定制和切换能力。该 Composable 基于 WD… - [useI18n 国际化](https://ruoyi.plus/mobile/composables/use-i18n.html):useI18n 是增强的国际化组合函数,基于 wot-ui 的翻译系统,扩展了 Vue I18n 的功能特性。适配移动端… - [自定义Hook开发](https://ruoyi.plus/mobile/composables/custom-hooks.html):自定义 Hook(Composables)是 Vue 3 Composition API 的核心概念之一,用于封装和复用… ### 工具库 (utils) - [工具函数概览](https://ruoyi.plus/mobile/utils/overview.html):RuoYi-Plus-UniApp 移动端提供了一套完整且强大的工具函数库,涵盖字符串处理、日期时间、缓存管理、数据验证… ### 基础工具 - [string 字符串工具](https://ruoyi.plus/mobile/utils/string.html):string 是字符串处理工具集,提供字符串判空、格式化、HTML 处理、URL 操作、路径处理、字节长度计算等常用功能… - [boolean 布尔值工具](https://ruoyi.plus/mobile/utils/boolean.html):boolean 是布尔值处理工具模块,提供多种格式布尔值的判断、转换和状态切换功能。该工具支持字符串布尔值(如 'tru… - [function 函数工具](https://ruoyi.plus/mobile/utils/function.html):function 是函数工具集,提供剪贴板操作、HTTP配置辅助、函数防抖节流、执行控制、函数变换和异步处理等功能。该工… - [date 日期工具](https://ruoyi.plus/mobile/utils/date.html):日期工具(date)是RuoYi-Plus-UniApp移动端应用的核心工具库之一,提供了全面的日期处理功能。它封装了日… - [validators 验证工具](https://ruoyi.plus/mobile/utils/validators.html):validators 是 RuoYi-Plus-UniApp 移动端框架提供的综合验证工具集,包含 40+ 个验证函数,… ### 业务工具 - [cache 缓存工具](https://ruoyi.plus/mobile/utils/cache.html):cache 是 UniApp 本地存储的高级封装工具,提供统一、类型安全的缓存管理接口。该工具基于 UniApp 的同步… - [route 路由工具](https://ruoyi.plus/mobile/utils/route.html):route 是 UniApp 路由辅助工具,提供页面导航、TabBar 判断、URL 解析等功能。该工具基于 pages… - [platform 平台工具](https://ruoyi.plus/mobile/utils/platform.html):platform 是 UniApp 多端平台检测工具,提供运行环境判断和平台特性检测功能。该工具利用 UniApp 的条… - [tenant 租户工具](https://ruoyi.plus/mobile/utils/tenant.html):tenant 是多租户管理工具,提供租户 ID 的获取、存储和验证功能。该工具支持从多种来源获取租户 ID,包括 URL… ### 安全工具 - [crypto 加密工具](https://ruoyi.plus/mobile/utils/crypto.html):RuoYi-Plus-UniApp 移动端提供了完整的加密解密解决方案,基于 crypto-js 和 jsencrypt… - [rsa RSA加密](https://ruoyi.plus/mobile/utils/rsa.html):rsa 是 RSA 非对称加密工具模块,基于 jsencrypt 和 CryptoJS 库实现。提供数据加密、解密、签名… ### 辅助工具 - [to 异步处理](https://ruoyi.plus/mobile/utils/to.html):to 是一套完整的 Promise 错误处理工具函数集,采用 [error, data] 元组模式(也称为 Go-sty… - [logger 日志收集](https://ruoyi.plus/mobile/utils/logger.html):logger 是 RuoYi-Plus-UniApp 移动端的前端日志收集器,用于在开发环境中实时收集和上报前端日志。通… ### 页面开发 (pages) - [页面概述](https://ruoyi.plus/mobile/pages/):首页(Index Page)是 RuoYi-Plus-UniApp 移动端应用的核心入口页面,采用了创新的单页面多标签架… - [登录页面](https://ruoyi.plus/mobile/pages/login.html):登录页是移动端应用的入口页面,提供用户身份认证功能。页面支持多种登录方式、多租户、验证码、记住密码等完整的登录体验。 - [分包页面管理](https://ruoyi.plus/mobile/pages/subpackages.html):分包是 UniApp 优化小程序体积的重要手段,将非首屏页面拆分到独立的分包中,实现按需加载,提升首次启动速度。 ### 布局系统 (layouts) - [布局概述](https://ruoyi.plus/mobile/layouts/overview.html):布局系统是 RuoYi-Plus-UniApp 移动端应用的核心架构组件之一,基于 @uni-helper/vite-p… - [默认布局 (default)](https://ruoyi.plus/mobile/layouts/default.html):Default 布局是 RuoYi-Plus-UniApp 框架中最基础、最常用的页面布局模板。它通过 UniLayou… - [导航栏配置](https://ruoyi.plus/mobile/layouts/navbar.html):导航栏(Navbar)是移动端应用中最常见的顶部导航组件,用于展示页面标题、提供返回操作和快捷功能入口。RuoYi-Pl… - [标签栏配置](https://ruoyi.plus/mobile/layouts/tabbar.html):标签栏(Tabbar)是移动端应用中最常见的底部导航组件,用于在不同页面之间进行快速切换。RuoYi-Plus-UniA… - [胶囊组件](https://ruoyi.plus/mobile/layouts/capsule.html):胶囊组件(Navbar Capsule)是移动端应用中常见的导航辅助组件,通常与导航栏配合使用,提供返回和首页两个快捷操… ### 状态管理 (stores) - [状态管理概览](https://ruoyi.plus/mobile/stores/overview.html):RuoYi-Plus-UniApp 移动端采用 Pinia 作为状态管理方案,提供类型安全、模块化的全局状态管理能力。P… - [User 用户状态](https://ruoyi.plus/mobile/stores/user.html):useUserStore 是 RuoYi-Plus-UniApp 移动端的核心状态管理模块,负责用户认证、登录、权限管理… - [Dict 字典状态](https://ruoyi.plus/mobile/stores/dict.html):useDictStore 是 RuoYi-Plus-UniApp 移动端的字典数据管理模块,提供统一的字典数据存储、访问… - [Feature 功能状态](https://ruoyi.plus/mobile/stores/feature.html):useFeatureStore 是 RuoYi-Plus-UniApp 移动端的系统功能开关管理模块,用于从服务器获取并… - [Tabbar 标签栏状态](https://ruoyi.plus/mobile/stores/tabbar.html):useTabbarStore 是 RuoYi-Plus-UniApp 移动端的底部标签栏状态管理模块,用于管理标签页的状… ### 样式系统 (styles) - [样式概览](https://ruoyi.plus/mobile/styles/overview.html):RuoYi-Plus-UniApp 移动端采用了完善的样式系统架构,结合 UniApp 内置样式变量、WD UI 组件库… - [样式架构设计](https://ruoyi.plus/mobile/styles/architecture.html):RuoYi-Plus-UniApp 移动端采用 SCSS 预处理器构建样式系统,结合 BEM 命名规范和 CSS 变量实… - [UnoCSS配置](https://ruoyi.plus/mobile/styles/unocss.html):RuoYi-Plus-UniApp 移动端项目集成了 UnoCSS 作为原子化 CSS 框架,提供即时生成、按需加载的样… - [全局样式 (uni.scss)](https://ruoyi.plus/mobile/styles/global.html):RuoYi-Plus-UniApp 移动端项目采用完整的全局样式体系,基于 SCSS 预处理器和 CSS 变量实现,提供… - [rpx单位使用](https://ruoyi.plus/mobile/styles/rpx-units.html):rpx(responsive pixel)是 UniApp 提供的响应式像素单位,可以根据屏幕宽度进行自适应。rpx 单… - [主题定制](https://ruoyi.plus/mobile/styles/theme.html):RuoYi-Plus-UniApp 移动端提供了完整的主题定制系统,支持全局主题配置、深色模式、CSS 变量定制等功能。… - [响应式设计](https://ruoyi.plus/mobile/styles/responsive.html):RuoYi-Plus-UniApp 移动端项目采用完整的响应式设计体系,基于 UniApp 的 rpx 单位系统和 CS… - [组件样式](https://ruoyi.plus/mobile/styles/components.html):RuoYi-Plus-UniApp 移动端项目的 WD UI 组件库采用完整的 SCSS 样式体系,基于 BEM 命名规… - [样式最佳实践](https://ruoyi.plus/mobile/styles/best-practices.html):本文档总结了 RuoYi-Plus-UniApp 移动端项目中的样式最佳实践,涵盖 CSS 变量使用、主题定制、响应式设… ### 组件开发 - [自定义组件开发](https://ruoyi.plus/mobile/components/custom-development.html):本文档介绍如何在 RuoYi-Plus-UniApp 项目中开发自定义业务组件。业务组件是放置在 src/compone… - [组件封装规范](https://ruoyi.plus/mobile/components/encapsulation-standards.html):本文档定义了 RuoYi-Plus-UniApp 项目中组件封装的规范标准,包括命名规则、代码组织、类型定义、样式规范等… - [组件通信模式](https://ruoyi.plus/mobile/components/communication-patterns.html):本文档介绍 RuoYi-Plus-UniApp 项目中组件间通信的各种模式和最佳实践。良好的组件通信设计是构建可维护、可… - [组件生命周期](https://ruoyi.plus/mobile/components/lifecycle.html):本文档详细介绍 RuoYi-Plus-UniApp 项目中 Vue 3 组件和 UniApp 页面的生命周期,包括各个钩… - [组件测试](https://ruoyi.plus/mobile/components/testing.html):本文档介绍 RuoYi-Plus-UniApp 项目中组件测试的方法和最佳实践。良好的测试覆盖可以确保组件的稳定性和可靠… ### 平台适配 - [平台差异说明](https://ruoyi.plus/mobile/platform/differences.html):UniApp 支持编译到多个平台,但不同平台之间存在功能差异、API 差异和渲染差异。RuoYi-Plus-UniApp… - [H5端适配](https://ruoyi.plus/mobile/platform/h5.html):H5 是 UniApp 支持的重要目标平台之一,可以让应用直接在浏览器中运行。与小程序和 App 相比,H5 具有无需安… - [微信小程序适配](https://ruoyi.plus/mobile/platform/wechat.html):微信小程序是最主要的小程序平台之一,拥有庞大的用户群体和完善的生态系统。RuoYi-Plus-UniApp 项目针对微信… - [支付宝小程序适配](https://ruoyi.plus/mobile/platform/alipay.html):支付宝小程序是蚂蚁金服推出的小程序平台,拥有庞大的用户群体和完善的支付生态。RuoYi-Plus-UniApp 框架提供… ### 性能优化 - [性能优化概览](https://ruoyi.plus/mobile/performance/overview.html):性能优化是构建高质量 UniApp 应用的核心环节。RuoYi-Plus-UniApp 项目通过系统化的性能优化策略,实… - [启动性能优化](https://ruoyi.plus/mobile/performance/startup.html):启动性能是用户体验的第一印象,直接影响用户对应用的感知。一个快速启动的应用能够显著提升用户满意度和留存率。在 UniAp… - [渲染性能优化](https://ruoyi.plus/mobile/performance/rendering.html):渲染性能是影响用户体验的关键指标。良好的渲染性能可以带来更流畅的交互体验、更低的内存占用和更少的电量消耗。 - [包体积优化](https://ruoyi.plus/mobile/performance/bundle-size.html):包体积优化是 UniApp 应用性能提升的关键环节,直接影响应用下载速度、安装时间和首屏加载性能。RuoYi-Plus-… - [图片优化](https://ruoyi.plus/mobile/performance/image.html):图片资源通常是应用中占比最大的资源类型,优化不当会导致页面加载缓慢、内存占用过高、用户体验下降等问题。在移动端应用中,图… - [分包加载优化](https://ruoyi.plus/mobile/performance/subpackage.html):分包加载是 UniApp 应用性能优化的核心策略之一,通过将应用代码按照功能模块拆分成多个子包,实现按需加载,有效解决了… ### 打包发布 - [打包配置概览](https://ruoyi.plus/mobile/build/overview.html):RuoYi-Plus-UniApp 移动端采用 Vite 6.3.5 作为构建工具,支持多平台打包部署,包括 H5、微信… - [环境配置](https://ruoyi.plus/mobile/build/environment.html):RuoYi-Plus-UniApp 移动端采用多环境配置方案,通过 Vite 的环境变量系统实现开发、测试、预发布、生产… - [H5打包发布](https://ruoyi.plus/mobile/build/h5-deploy.html):H5 部署是将 UniApp 项目构建为标准的 Web 应用,通过浏览器访问。RuoYi-Plus-UniApp 的 H… - [微信小程序发布](https://ruoyi.plus/mobile/build/wechat-deploy.html):微信小程序是腾讯推出的轻量级应用形态,无需下载安装即可使用,具有接近原生应用的体验。RuoYi-Plus-UniApp … ## 最佳实践 ### Claude Code - [Skills 技能系统](https://ruoyi.plus/practices/engineering/claude-code-skills.html):Skills 是 Claude Code 的预置知识模块,通过触发词按需激活。相比每次对话都要加载的 CLAUDE.md… - [Commands 自定义命令](https://ruoyi.plus/practices/engineering/claude-code-commands.html):自定义斜杠命令(Slash Commands)是 Claude Code 的强大扩展机制,允许你将常用的提示词定义为 M… - [Hooks 钩子机制](https://ruoyi.plus/practices/engineering/claude-code-hooks.html):Hooks(钩子)是 Claude Code 的自动化机制,允许你在工具执行的特定时刻自动运行脚本或提示。通过 Hook… - [MCP 服务器配置](https://ruoyi.plus/practices/engineering/claude-code-mcp.html):MCP(Model Context Protocol)是一个开源标准协议,允许 Claude Code 连接到外部工具和… - [Sub-Agents 子代理](https://ruoyi.plus/practices/engineering/claude-code-agents.html):Sub-Agents(子代理)是 Claude Code 中的专业化 AI 助手,可以被主 Agent 调用来处理特定类… - [代码生成器使用](https://ruoyi.plus/practices/engineering/code-generator.html):代码生成器是 RuoYi-Plus-UniApp 项目的核心开发工具,能够根据数据库表结构自动生成完整的 CRUD 功能… ### 开发规范 - [开发规范概览](https://ruoyi.plus/practices/standards/overview.html):RuoYi-Plus-UniApp 项目的开发规范体系,涵盖代码、命名、注释、API、数据库、Git等多个维度,确保项目… - [代码规范](https://ruoyi.plus/practices/standards/coding.html):RuoYi-Plus 项目的代码编写规范,包含命名规范、注释规范、代码结构等最佳实践。 - [API设计规范](https://ruoyi.plus/practices/standards/api-design.html):RuoYi-Plus 项目的API接口设计规范,包含RESTful设计、响应格式、错误处理等最佳实践。 - [命名规范](https://ruoyi.plus/practices/standards/naming.html):本文档基于 RuoYi-Plus-UniApp 实际源码提取,涵盖后端 Java、前端 Vue/TypeScript、移… - [注释规范](https://ruoyi.plus/practices/standards/comment.html):良好的注释是代码可读性和可维护性的重要保障。 - [Git使用规范](https://ruoyi.plus/practices/standards/git.html):本文档定义了 RuoYi-Plus-UniApp 项目的 Git 使用规范,包括提交消息格式、分支管理策略、工作流程、合… - [数据库规范](https://ruoyi.plus/practices/standards/database.html):本规范定义了 RuoYi-Plus-UniApp 项目的数据库设计和使用标准,确保数据库结构一致性、可维护性和高性能。所… - [前端开发规范](https://ruoyi.plus/practices/standards/frontend.html):RuoYi-Plus-UniApp 前端项目基于 Vue 3 + TypeScript + Element Plus 技… - [移动端开发规范](https://ruoyi.plus/practices/standards/mobile.html):plus-uniapp 是 RuoYi-Plus-UniApp 体系的移动端实现,基于 UniApp + Vue 3 +… ### 架构设计 - [系统架构设计](https://ruoyi.plus/practices/architecture/system.html):系统架构是软件系统的顶层设计,定义了系统的组织结构、技术选型、模块划分和交互方式。良好的架构设计是系统稳定性、可扩展性和… - [数据库设计](https://ruoyi.plus/practices/architecture/database.html):本文档介绍RuoYi-Plus-UniApp项目的数据库设计规范,包括表结构设计、字段规范、索引策略、多租户隔离等内容。 - [缓存策略](https://ruoyi.plus/practices/architecture/cache.html):RuoYi-Plus-UniApp 采用 Redis + Caffeine 二级缓存架构,基于 Redisson 客户端… - [分布式设计](https://ruoyi.plus/practices/architecture/distributed.html):RuoYi-Plus-UniApp采用单体架构 + 分布式组件的混合设计模式,在保持单体应用简洁性的同时,通过引入分布式… - [多租户架构](https://ruoyi.plus/practices/architecture/multi-tenant.html):RuoYi-Plus-UniApp采用共享数据库共享表(Shared Database Shared Table) 的多… ### 后端开发 - [后端开发概览](https://ruoyi.plus/practices/backend/overview.html):RuoYi-Plus-UniApp 后端开发最佳实践体系,基于 Spring Boot 3.x + MyBatis-Pl… - [Service层最佳实践](https://ruoyi.plus/practices/backend/service-layer.html):本文档详细介绍 ruoyi-plus-uniapp 项目中 Service 层的设计原则和最佳实践。 - [Controller层最佳实践](https://ruoyi.plus/practices/backend/controller-layer.html):本文档详细介绍 RuoYi-Plus-UniApp 项目中 Controller 层的设计原则和最佳实践,基于项目实际源… - [DAO层设计模式](https://ruoyi.plus/practices/backend/dao-layer.html):本文档详细介绍 RuoYi-Plus-UniApp 项目中 DAO 层的设计模式和最佳实践,DAO 层是本项目区别于传统… - [数据访问层优化](https://ruoyi.plus/practices/backend/data-access.html):数据访问层是后端应用的核心组成部分,负责与数据库的交互操作。RuoYi-Plus 框架基于 MyBatis-Plus 构… - [事务管理策略](https://ruoyi.plus/practices/backend/transaction.html):事务管理是企业级应用开发的核心内容,确保数据的一致性和完整性。RuoYi-Plus 框架基于 Spring 事务管理机制… - [异常处理机制](https://ruoyi.plus/practices/backend/exception-handling.html):RuoYi-Plus 框架提供了完善的异常处理体系,通过统一的异常处理机制确保系统稳定性和友好的错误反馈。框架采用分层的… - [数据校验最佳实践](https://ruoyi.plus/practices/backend/validation.html):RuoYi-Plus 框架深度集成了 Bean Validation(JSR-380)规范,提供了完善的参数校验机制。通… ### 功能开发 - [权限控制实现](https://ruoyi.plus/practices/features/permission-control.html):RuoYi-Plus 框架基于 Sa-Token 实现了完善的权限控制体系,提供了细粒度的接口级权限管理、角色权限管理、… - [数据权限设计](https://ruoyi.plus/practices/features/data-permission.html):数据权限是企业级应用中实现数据隔离和访问控制的核心功能。RuoYi-Plus框架提供了一套基于MyBatis-Plus拦… - [定时任务开发](https://ruoyi.plus/practices/features/scheduled-jobs.html):定时任务是企业级应用中实现自动化处理的核心功能。RuoYi-Plus框架集成了SnailJob分布式任务调度框架,提供了… - [消息推送实现](https://ruoyi.plus/practices/features/message-push.html):消息推送是实现实时通信的关键功能,RuoYi-Plus 提供了两种成熟的消息推送方案:WebSocket 和 SSE(S… - [文件处理方案](https://ruoyi.plus/practices/features/file-processing.html):本文档详细介绍 RuoYi-Plus 框架中文件处理的最佳实践,包括 OSS 存储、文件上传下载、类型验证、安全处理等核… - [Excel操作优化](https://ruoyi.plus/practices/features/excel-operations.html):本文档详细介绍 RuoYi-Plus 框架中 Excel 导入导出的最佳实践,包括注解配置、数据转换、样式定制、大数据处… - [第三方集成策略](https://ruoyi.plus/practices/features/third-party-integration.html):RuoYi-Plus-UniApp 项目集成了多种第三方服务,为企业应用提供完整的业务支撑能力。通过模块化设计和统一的配… - [国际化实现方案](https://ruoyi.plus/practices/features/i18n.html):国际化(Internationalization, i18n)是构建面向全球用户应用的关键特性。RuoYi-Plus-U… ### 安全指南 - [安全总览](https://ruoyi.plus/practices/security/overview.html):RuoYi-Plus 框架提供了完整的企业级安全防护体系,涵盖认证授权、数据加密、敏感数据脱敏、接口安全、防攻击等多个层… - [认证与授权](https://ruoyi.plus/practices/security/auth.html):RuoYi-Plus 基于 Sa-Token 1.44.0 构建完整的认证授权体系,支持多种认证方式、细粒度权限控制、多… - [数据安全](https://ruoyi.plus/practices/security/data.html):RuoYi-Plus 提供完整的数据安全解决方案,涵盖数据加密存储、敏感数据脱敏、数据权限控制、SQL注入防护、XSS攻… - [API安全](https://ruoyi.plus/practices/security/api.html):RuoYi-Plus 提供完整的API安全解决方案,包括接口限流、重复提交防护、签名验证、数据加密、权限控制等机制。 - [客户端安全](https://ruoyi.plus/practices/security/client.html):客户端安全涵盖Web前端和移动端应用的安全防护,包括XSS防护、敏感数据处理、Token管理、请求加密、安全存储等多个方… - [安全审计](https://ruoyi.plus/practices/security/audit.html):本文档定义了 RuoYi-Plus 系统的安全审计与日志策略,包括操作日志、登录日志、敏感数据过滤和日志存储机制。 ### 部署运维 - [Docker部署指南](https://ruoyi.plus/practices/devops/docker-deploy.html):本指南介绍如何使用 Docker 容器化部署 RuoYi-Plus-UniApp 项目。推荐使用 1Panel 面板进行… ## 商业信息 - [产品矩阵](https://ruoyi.plus/products.html):抓蛙师出品的开发者工具集 - [技术服务](https://ruoyi.plus/services.html):承接后台管理系统 / 桌面软件 / 小程序 / 大模型应用定制开发,提供完整源码交付 - 联系方式:邮箱 770492966@qq.com ## 完整索引 - [sitemap.xml](https://ruoyi.plus/sitemap.xml):全部页面的完整清单