plus-ui Frontend Management Platform

The plus-ui frontend repository is built using the following modern web technologies:

• Vue 3: Core progressive JavaScript framework.
• TypeScript: For static typing and improved developer experience.
• Element Plus: UI component library.
• Vite: Next-generation frontend tooling for fast builds and HMR.

The repository uses the following branching strategy:

• 6.X branch: The stable release branch, suitable for production use.
• dev branch: The development branch, used for ongoing feature development and testing.

The plus-ui frontend is designed to work with specific backend frameworks. Choose the one that matches your architectural needs:

• RuoYi-Vue-Plus: A distributed cluster framework.
• RuoYi-Cloud-Plus: A microservices-based framework.

Follow these steps to set up your local development environment. This project uses pnpm as the package manager.

1. Install dependencies

Use the following command to install dependencies, utilizing the npmmirror registry for faster access in certain regions:

2. Start the development server

Run the development server to begin working on the project.

3. Build for production

Generate the production-ready build files.

Default Access URL: http://localhost:80

# Install dependencies
pnpm install --registry=https://registry.npmmirror.com

# Start development server
pnpm dev

# Build production environment
pnpm build:prod

The application routing is split into two main arrays exported from the router configuration:

1. constantRoutes: Contains static routes that are always available, such as login, register, 404, and the main Layout structure. These are typically not permission-dependent.
2. dynamicRoutes: An empty array by default, intended to be populated with routes loaded dynamically based on the user's permissions and roles at runtime.

Routes are defined using the RouteRecordRaw type from vue-router.

import { constantRoutes, dynamicRoutes } from '@/router';

// constantRoutes contains static routes like /login, /404
// dynamicRoutes is used for permission-based routes

Retrieve a paginated list of currently online users. This function accepts an OnlineQuery object and returns a PageResult containing OnlineVO objects.

import { list } from '@/api/monitor/online';

// Example usage:
const response = await list({
  // query parameters based on OnlineQuery type
});

Use deptTreeSelect to retrieve the department tree structure associated with a specific role ID.

import { deptTreeSelect } from '@/api/system/role';

const deptTree = await deptTreeSelect(1);

Use the ResetPwdForm interface when implementing a password reset feature that requires the user to provide their current password before setting a new one.

export interface ResetPwdForm {
  oldPassword: string;
  newPassword: string;
  confirmPassword: string;
}

Toggle the enabled/disabled status of a role using changeRoleStatus.

import { changeRoleStatus } from '@/api/system/role';

// status is typically '0' or '1'
await changeRoleStatus(1, '0');

Use the registerCurrentSnailUser function to perform a POST request to the /snail-ai/user/register endpoint. This function returns an AxiosPromise containing a SnailOpenApiUser object, which represents the newly registered snail user.

import { registerCurrentSnailUser } from '@/api/ai/agent';

async function handleRegistration() {
  try {
    const user = await registerCurrentSnailUser();
    console.log('Registered user:', user);
  } catch (error) {
    console.error('Registration failed:', error);
  }
}