RuoYi-Cloud-Vue3 Documentation

RuoYi-Cloud-Vue3 is a modern frontend implementation using the following core technologies:

• Framework: Vue 3
• UI Component Library: Element Plus
• Build Tool: Vite
• State Management: Pinia
• Routing: Vue Router 4

It is designed to work with the RuoYi-Cloud or RuoYi-Cloud-Oracle backend repositories.

The system includes several out-of-the-box management modules:

• User & Access Management: User management, Department management (tree structure), Post management, Menu management, Role management, and Online user monitoring.
• System Configuration: Dictionary management, Parameter management, and Notification/Announcements.
• Logging & Auditing: Operation logs, Login logs, and Scheduled task execution logs.
• Development Tools: Code generation (Java, HTML, XML, SQL), System API documentation (Swagger), and an Online Builder for HTML form generation.
• Monitoring: Service monitoring (CPU, Memory, Disk, Stack) and Connection pool monitoring (SQL performance analysis).

Use the following yarn commands to build the frontend project for different environments:

• Staging environment: yarn build:stage
• Production environment: yarn build:prod

To run the frontend development environment, follow these steps:

1. Clone the project: Use git to clone the repository.
2. Enter the directory: Navigate into the RuoYi-Cloud-Vue3 folder.
3. Install dependencies: Use yarn with the specified registry to ensure correct package retrieval.
4. Start the service: Run the development server.

The frontend will be accessible at http://localhost:80 after starting.

# 克隆项目
git clone https://gitcode.com/yangzongzhuan/RuoYi-Cloud-Vue3.git

# 进入项目目录
cd RuoYi-Cloud-Vue3

# 安装依赖
yarn --registry=https://registry.npmmirror.com

# 启动服务
yarn dev

The TopBar component is a horizontal navigation menu used in the application layout. It automatically renders visible menu items from the user's permission-based router list (permissionStore.sidebarRouters).

Key features include:

• Dynamic Visibility: It displays a limited number of menu items based on the window width.
• 'More' Menu: Items that exceed the calculated visible limit are automatically moved into a '更多菜单' (More Menus) sub-menu.
• Active State Management: It determines the active menu item using the current route's path or the meta.activeMenu property if defined.
• Responsive Design: It listens to window resize events to recalculate how many menu items can fit horizontally.

The TopBar component uses a computed property activeMenu to highlight the current navigation state. It follows this priority logic:

1. If the current route's meta object contains an activeMenu property, that value is used.
2. Otherwise, it defaults to the current route's path.

This allows developers to specify a different menu item to remain highlighted even when the user is on a sub-route or a related page.

The layout automatically switches between mobile and desktop modes based on the window width.

• Threshold: The breakpoint is set at 992px (consistent with Bootstrap's responsive design).
• Mobile Mode: When the width is less than 992px, the system calls useAppStore().toggleDevice('mobile') and automatically closes the sidebar with an animation.
• Desktop Mode: When the width is 992px or greater, it calls useAppStore().toggleDevice('desktop').
• Mobile Sidebar: In mobile mode, if the sidebar is opened, a drawer-bg overlay is rendered. Clicking this overlay triggers handleClickOutside(), which closes the sidebar.

The TopNav component derives its items from the permissionStore.topbarRouters. To control what appears in the top navigation, you should configure your route objects with the following properties:

• path: The URL path. If it starts with http, it is treated as an external link.
• meta.title: The text displayed in the menu.
• meta.icon: The icon class used (via svg-icon). Use '#' to skip icon rendering.
• hidden: Set to true to prevent the route from appearing in the top menu.
• children: If a route has path: '/' and contains children, the component will automatically use the first child as the menu entry to support internal jumps.
• query: A JSON string containing query parameters for internal routes.

The search functionality relies on a searchPool generated from the application's route configuration.

Search Pool Item Structure: Each item in the search pool is an object containing:

• path: The normalized route path or a full URL.
• title: An array of strings representing the breadcrumb/title hierarchy (e.g., ['System', 'User Management']).
• icon: The icon class for the menu item.
• query: (Optional) Any query parameters associated with the route.

Search Algorithm: The component performs a dual-layer search:

1. Exact Path Match: Filters items where the path includes the search query.
2. Fuzzy Match: Uses Fuse.js to find items based on title (weighted 0.7) and path (weighted 0.3).

The results are merged to ensure no duplicates are shown.

Password complexity is determined by the pwdChrType value, which is retrieved from the session cache (cache.session.get('pwrChrtype')). You can control the required character sets by setting this value to one of the following types: