chore: 后端路由模式时，本地静态路由和后端路由合并

vbenjs · Nov 15, 2024 · 39e0e69 · 39e0e69
1 parent 788a29a
commit 39e0e69
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 3 deletions.
diff --git a/apps/web-antd/src/router/access.ts b/apps/web-antd/src/router/access.ts
@@ -5,13 +5,16 @@ import type {
 
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
+import { cloneDeep } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
+import { staticMenuList } from './routes/static';
+
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 
 async function generateAccess(options: GenerateMenuAndRoutesOptions) {
@@ -29,7 +32,10 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
         content: `${$t('common.loadingMenu')}...`,
         duration: 1.5,
       });
-      return await getAllMenusApi();
+
+      const dynamicMenus = await getAllMenusApi();
+      // 本地菜单和动态菜单合并
+      return [...cloneDeep(staticMenuList), ...dynamicMenus];
     },
     // 可以指定没有权限跳转403页面
     forbiddenComponent,

diff --git a/apps/web-antd/src/router/routes/static.ts b/apps/web-antd/src/router/routes/static.ts
@@ -0,0 +1,73 @@
+import type { RouteRecordStringComponent } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+/**
+ * 该文件放非后台返回的前端静态路由
+ */
+
+/**
+ * demo
+ */
+const demoRoute: RouteRecordStringComponent[] = [
+  {
+    component: 'BasicLayout',
+    meta: {
+      hideChildrenInMenu: true,
+      icon: 'lucide:copyright',
+      order: 9999,
+      title: $t('demos.vben.about'),
+    },
+    name: 'About',
+    path: '/about',
+    children: [
+      {
+        component: '/_core/about/index',
+        meta: {
+          title: $t('demos.vben.about'),
+        },
+        name: 'VbenAbout',
+        path: '/vben-admin/about',
+      },
+    ],
+  },
+];
+
+/**
+ * 这里放本地路由
+ */
+export const staticMenuList: RouteRecordStringComponent[] = [
+  {
+    component: 'BasicLayout',
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: 'page.dashboard.title',
+    },
+    name: 'Dashboard',
+    path: '/',
+    redirect: '/analytics',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: '/dashboard/analytics/index',
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: 'page.dashboard.analytics',
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: '/dashboard/workspace/index',
+        meta: {
+          icon: 'carbon:workspace',
+          title: 'page.dashboard.workspace',
+        },
+      },
+    ],
+  },
+  ...demoRoute,
+];
diff --git a/apps/web-ele/src/router/access.ts b/apps/web-ele/src/router/access.ts
@@ -5,13 +5,16 @@ import type {
 
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
+import { cloneDeep } from '@vben/utils';
 
 import { ElMessage } from 'element-plus';
 
 import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
+import { staticMenuList } from './routes/static';
+
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 
 async function generateAccess(options: GenerateMenuAndRoutesOptions) {
@@ -29,7 +32,10 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
         duration: 1500,
         message: `${$t('common.loadingMenu')}...`,
       });
-      return await getAllMenusApi();
+
+      const dynamicMenus = await getAllMenusApi();
+      // 本地菜单和动态菜单合并
+      return [...cloneDeep(staticMenuList), ...dynamicMenus];
     },
     // 可以指定没有权限跳转403页面
     forbiddenComponent,

diff --git a/apps/web-ele/src/router/routes/static.ts b/apps/web-ele/src/router/routes/static.ts
@@ -0,0 +1,73 @@
+import type { RouteRecordStringComponent } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+/**
+ * 该文件放非后台返回的前端静态路由
+ */
+
+/**
+ * demo
+ */
+const demoRoute: RouteRecordStringComponent[] = [
+  {
+    component: 'BasicLayout',
+    meta: {
+      hideChildrenInMenu: true,
+      icon: 'lucide:copyright',
+      order: 9999,
+      title: $t('demos.vben.about'),
+    },
+    name: 'About',
+    path: '/about',
+    children: [
+      {
+        component: '/_core/about/index',
+        meta: {
+          title: $t('demos.vben.about'),
+        },
+        name: 'VbenAbout',
+        path: '/vben-admin/about',
+      },
+    ],
+  },
+];
+
+/**
+ * 这里放本地路由
+ */
+export const staticMenuList: RouteRecordStringComponent[] = [
+  {
+    component: 'BasicLayout',
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: 'page.dashboard.title',
+    },
+    name: 'Dashboard',
+    path: '/',
+    redirect: '/analytics',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: '/dashboard/analytics/index',
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: 'page.dashboard.analytics',
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: '/dashboard/workspace/index',
+        meta: {
+          icon: 'carbon:workspace',
+          title: 'page.dashboard.workspace',
+        },
+      },
+    ],
+  },
+  ...demoRoute,
+];
diff --git a/apps/web-naive/src/router/access.ts b/apps/web-naive/src/router/access.ts
@@ -5,12 +5,15 @@ import type {
 
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
+import { cloneDeep } from '@vben/utils';
 
 import { message } from '#/adapter/naive';
 import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
+import { staticMenuList } from './routes/static';
+
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 
 async function generateAccess(options: GenerateMenuAndRoutesOptions) {
@@ -27,7 +30,10 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
       message.loading(`${$t('common.loadingMenu')}...`, {
         duration: 1.5,
       });
-      return await getAllMenusApi();
+
+      const dynamicMenus = await getAllMenusApi();
+      // 本地菜单和动态菜单合并
+      return [...cloneDeep(staticMenuList), ...dynamicMenus];
     },
     // 可以指定没有权限跳转403页面
     forbiddenComponent,

diff --git a/apps/web-naive/src/router/routes/static.ts b/apps/web-naive/src/router/routes/static.ts
@@ -0,0 +1,73 @@
+import type { RouteRecordStringComponent } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+/**
+ * 该文件放非后台返回的前端静态路由
+ */
+
+/**
+ * demo
+ */
+const demoRoute: RouteRecordStringComponent[] = [
+  {
+    component: 'BasicLayout',
+    meta: {
+      hideChildrenInMenu: true,
+      icon: 'lucide:copyright',
+      order: 9999,
+      title: $t('demos.vben.about'),
+    },
+    name: 'About',
+    path: '/about',
+    children: [
+      {
+        component: '/_core/about/index',
+        meta: {
+          title: $t('demos.vben.about'),
+        },
+        name: 'VbenAbout',
+        path: '/vben-admin/about',
+      },
+    ],
+  },
+];
+
+/**
+ * 这里放本地路由
+ */
+export const staticMenuList: RouteRecordStringComponent[] = [
+  {
+    component: 'BasicLayout',
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: 'page.dashboard.title',
+    },
+    name: 'Dashboard',
+    path: '/',
+    redirect: '/analytics',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: '/dashboard/analytics/index',
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: 'page.dashboard.analytics',
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: '/dashboard/workspace/index',
+        meta: {
+          icon: 'carbon:workspace',
+          title: 'page.dashboard.workspace',
+        },
+      },
+    ],
+  },
+  ...demoRoute,
+];