feat: Dynamically get the menu from the back end

Author: anncwb

.vscode/settings.json

@@ -171,10 +171,7 @@
     "packages/@vben-core/shared/design-tokens/src/**/*.css"
   ],
 
-  "i18n-ally.localesPaths": [
-    "packages/locales/src/langs",
-    "packages/@core/shared/i18n/src/langs"
-  ],
+  "i18n-ally.localesPaths": ["packages/locales/src/langs"],
   "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",

apps/backend-mock/http/menu.http

@@ -0,0 +1,6 @@
+@port = 5320
+@type = application/json
+@token = Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MCwicm9sZXMiOlsiYWRtaW4iXSwidXNlcm5hbWUiOiJ2YmVuIiwiaWF0IjoxNzE5ODkwMTEwLCJleHAiOjE3MTk5NzY1MTB9.eyAFsQ2Jk_mAQGvrEL1jF9O6YmLZ_PSYj5aokL6fCuU
+GET http://localhost:{{port}}/api/menu/getAll HTTP/1.1
+content-type: {{ type }}
+Authorization: {{ token }}

apps/backend-mock/package.json

@@ -36,8 +36,8 @@
     "typeorm": "^0.3.20"
   },
   "devDependencies": {
-    "@nestjs/cli": "^10.3.2",
-    "@nestjs/schematics": "^10.1.1",
+    "@nestjs/cli": "^10.4.0",
+    "@nestjs/schematics": "^10.1.2",
     "@types/express": "^4.17.21",
     "@types/node": "^20.14.9",
     "nodemon": "^3.1.4",

apps/backend-mock/src/app.module.ts

@@ -7,6 +7,7 @@ import Joi from 'joi';
 import { AuthModule } from './modules/auth/auth.module';
 import { DatabaseModule } from './modules/database/database.module';
 import { HealthModule } from './modules/health/health.module';
+import { MenuModule } from './modules/menu/menu.module';
 import { UsersModule } from './modules/users/users.module';
 
 @Module({
@@ -34,6 +35,7 @@ import { UsersModule } from './modules/users/users.module';
     AuthModule,
     UsersModule,
     DatabaseModule,
+    MenuModule,
   ],
 })
 export class AppModule {}

apps/backend-mock/src/models/dto/user.dto.ts

@@ -0,0 +1,9 @@
+class CreateUserDto {
+  id: number;
+  password: string;
+  realName: string;
+  roles: string[];
+  username: string;
+}
+
+export { CreateUserDto };

apps/backend-mock/src/modules/menu/menu.controller.ts

@@ -0,0 +1,62 @@
+import { sleep } from '@/utils';
+import { Controller, Get, HttpCode, HttpStatus, Request } from '@nestjs/common';
+
+@Controller('menu')
+export class MenuController {
+  /**
+   *  获取用户所有菜单
+   */
+  @Get('getAll')
+  @HttpCode(HttpStatus.OK)
+  async getAll(@Request() req: Request) {
+    // 模拟请求延迟
+    await sleep(1000);
+    // 请求用户的id
+    const userId = req.user.id;
+
+    // TODO: 改为表方式获取
+    const dashboardMenus = [
+      {
+        component: 'BasicLayout',
+        meta: {
+          order: -1,
+          title: 'page.dashboard.title',
+        },
+        name: 'Dashboard',
+        path: '/',
+        redirect: '/analytics',
+        children: [
+          {
+            name: 'Analytics',
+            path: '/analytics',
+            component: '/dashboard/analytics/index',
+            meta: {
+              affixTab: true,
+              title: 'page.dashboard.analytics',
+            },
+          },
+          {
+            name: 'Workspace',
+            path: '/workspace',
+            component: '/dashboard/workspace/index',
+            meta: {
+              title: 'page.dashboard.workspace',
+            },
+          },
+        ],
+      },
+    ];
+    const MOCK_MENUS = [
+      {
+        menus: [...dashboardMenus],
+        userId: 0,
+      },
+      {
+        menus: [...dashboardMenus],
+        userId: 1,
+      },
+    ];
+
+    return MOCK_MENUS.find((item) => item.userId === userId)?.menus ?? [];
+  }
+}

apps/backend-mock/src/modules/menu/menu.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+
+import { MenuController } from './menu.controller';
+import { MenuService } from './menu.service';
+
+@Module({
+  controllers: [MenuController],
+  providers: [MenuService],
+})
+export class MenuModule {}

apps/backend-mock/src/modules/menu/menu.service.ts

@@ -0,0 +1,4 @@
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class MenuService {}

apps/backend-mock/src/modules/users/users.service.ts

@@ -1,3 +1,4 @@
+import type { CreateUserDto } from '@/models/dto/user.dto';
 import type { Repository } from 'typeorm';
 
 import { UserEntity } from '@/models/entity/user.entity';
@@ -12,7 +13,7 @@ export class UsersService {
     private usersRepository: Repository<UserEntity>,
   ) {}
 
-  async create(user: UserEntity): Promise<UserEntity> {
+  async create(user: CreateUserDto): Promise<UserEntity> {
     user.password = await bcrypt.hash(user.password, 10); // 密码哈希
     return this.usersRepository.save(user);
   }

apps/backend-mock/src/utils/index.ts

@@ -0,0 +1,5 @@
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export { sleep };