refactor: 适配及启用 Arco Design Pro Vue 动态路由

Resolves #1

continew-admin-ui/src/router/app-menus/index.ts

@@ -1,8 +1,8 @@
-import { appRoutes, appExternalRoutes } from '../routes';
+import { fixedRoutes, demoRoutes } from '../routes';
 
-const mixinRoutes = [...appRoutes, ...appExternalRoutes];
+const mixinRoutes = [...fixedRoutes, ...demoRoutes];
 
-const appClientMenus = mixinRoutes.map((el) => {
+const staticMenus = mixinRoutes.map((el) => {
   const { name, path, meta, redirect, children } = el;
   return {
     name,
@@ -13,4 +13,4 @@ const appClientMenus = mixinRoutes.map((el) => {
   };
 });
 
-export default appClientMenus;
+export default staticMenus;

continew-admin-ui/src/router/guard/index.ts

@@ -11,7 +11,7 @@ function setupPageGuard(router: Router) {
 }
 
 export default function createRouteGuard(router: Router) {
-  setupPageGuard(router);
   setupUserLoginInfoGuard(router);
   setupPermissionGuard(router);
+  setupPageGuard(router);
 }

continew-admin-ui/src/router/guard/permission.ts

@@ -3,7 +3,7 @@ import NProgress from 'nprogress'; // progress bar
 
 import usePermission from '@/hooks/permission';
 import { useLoginStore, useAppStore } from '@/store';
-import { appRoutes } from '../routes';
+import { fixedRoutes, demoRoutes } from '../routes';
 import { WHITE_LIST, NOT_FOUND } from '../constants';
 
 export default function setupPermissionGuard(router: Router) {
@@ -16,7 +16,7 @@ export default function setupPermissionGuard(router: Router) {
       // 针对来自服务端的菜单配置进行处理
       // Handle routing configuration from the server
 
-      // 根据需要自行完善来源于服务端的菜单配置的permission逻辑
+      // 根据需要自行完善来源于服务端的菜单配置的 permission 逻辑
       // Refine the permission logic from the server's menu configuration as needed
       if (
         !appStore.appAsyncMenus.length &&
@@ -24,7 +24,12 @@ export default function setupPermissionGuard(router: Router) {
       ) {
         await appStore.fetchServerMenuConfig();
       }
-      const serverMenuConfig = [...appStore.appAsyncMenus, ...WHITE_LIST];
+      const serverMenuConfig = [
+        ...appStore.appAsyncMenus,
+        ...WHITE_LIST,
+        ...fixedRoutes,
+        ...demoRoutes,
+      ];
 
       let exist = false;
       while (serverMenuConfig.length && !exist) {
@@ -45,8 +50,10 @@ export default function setupPermissionGuard(router: Router) {
       if (permissionsAllow) next();
       else {
         const destination =
-          Permission.findFirstPermissionRoute(appRoutes, loginStore.roles[0]) ||
-          NOT_FOUND;
+          Permission.findFirstPermissionRoute(
+            [...fixedRoutes, ...demoRoutes],
+            loginStore.roles[0]
+          ) || NOT_FOUND;
         next(destination);
       }
     }

continew-admin-ui/src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import NProgress from 'nprogress'; // progress bar
 import 'nprogress/nprogress.css';
 
-import { appRoutes } from './routes';
+import { appRoutes, fixedRoutes, demoRoutes } from './routes';
 import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './routes/base';
 import createRouteGuard from './guard';
 
@@ -24,6 +24,8 @@ const router = createRouter({
       },
     },
     ...appRoutes,
+    ...fixedRoutes,
+    ...demoRoutes,
     REDIRECT_MAIN,
     NOT_FOUND_ROUTE,
   ],

continew-admin-ui/src/router/routes/externalModules/arco.ts

@@ -1,10 +0,0 @@
-export default {
-  path: 'https://arco.design/vue/docs/start',
-  name: 'ArcoWebsite',
-  meta: {
-    locale: 'menu.arcoWebsite',
-    icon: 'link',
-    requiresAuth: true,
-    order: 106,
-  },
-};

continew-admin-ui/src/router/routes/externalModules/github.ts

@@ -1,10 +0,0 @@
-export default {
-  path: 'https://github.com/Charles7c/continew-admin',
-  name: 'GitHub',
-  meta: {
-    locale: 'menu.github',
-    icon: 'github',
-    requiresAuth: true,
-    order: 107,
-  },
-};

continew-admin-ui/src/router/routes/index.ts

@@ -1,9 +1,8 @@
 import type { RouteRecordNormalized } from 'vue-router';
 
-const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
-const externalModules = import.meta.glob('./externalModules/*.ts', {
-  eager: true,
-});
+const appModules = import.meta.glob('./modules/*.ts', { eager: true });
+const fixedModules = import.meta.glob('./modules/fixed/*.ts', { eager: true });
+const demoModules = import.meta.glob('./modules/demo/*.ts', { eager: true });
 
 function formatModules(_modules: any, result: RouteRecordNormalized[]) {
   Object.keys(_modules).forEach((key) => {
@@ -17,9 +16,12 @@ function formatModules(_modules: any, result: RouteRecordNormalized[]) {
   return result;
 }
 
-export const appRoutes: RouteRecordNormalized[] = formatModules(modules, []);
-
-export const appExternalRoutes: RouteRecordNormalized[] = formatModules(
-  externalModules,
+export const appRoutes: RouteRecordNormalized[] = formatModules(appModules, []);
+export const fixedRoutes: RouteRecordNormalized[] = formatModules(
+  fixedModules,
+  []
+);
+export const demoRoutes: RouteRecordNormalized[] = formatModules(
+  demoModules,
   []
 );

continew-admin-ui/src/router/routes/modules/demo/exception.ts

@@ -3,18 +3,17 @@ import { AppRouteRecordRaw } from '../../types';
 
 const EXCEPTION: AppRouteRecordRaw = {
   path: '/exception',
-  name: 'exception',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.exception',
     requiresAuth: true,
     icon: 'exclamation-circle',
-    order: 104,
+    order: 904,
   },
   children: [
     {
-      path: '403',
       name: '403',
+      path: '403',
       component: () => import('@/views/arco-design/exception/403/index.vue'),
       meta: {
         locale: 'menu.exception.403',
@@ -23,8 +22,8 @@ const EXCEPTION: AppRouteRecordRaw = {
       },
     },
     {
-      path: '404',
       name: '404',
+      path: '404',
       component: () => import('@/views/arco-design/exception/404/index.vue'),
       meta: {
         locale: 'menu.exception.404',
@@ -33,8 +32,8 @@ const EXCEPTION: AppRouteRecordRaw = {
       },
     },
     {
-      path: '500',
       name: '500',
+      path: '500',
       component: () => import('@/views/arco-design/exception/500/index.vue'),
       meta: {
         locale: 'menu.exception.500',

continew-admin-ui/src/router/routes/modules/demo/form.ts

@@ -3,18 +3,17 @@ import { AppRouteRecordRaw } from '../../types';
 
 const FORM: AppRouteRecordRaw = {
   path: '/form',
-  name: 'form',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.form',
     icon: 'bookmark',
     requiresAuth: true,
-    order: 101,
+    order: 901,
   },
   children: [
     {
-      path: 'step',
       name: 'Step',
+      path: 'step',
       component: () => import('@/views/arco-design/form/step/index.vue'),
       meta: {
         locale: 'menu.form.step',
@@ -23,8 +22,8 @@ const FORM: AppRouteRecordRaw = {
       },
     },
     {
-      path: 'group',
       name: 'Group',
+      path: 'group',
       component: () => import('@/views/arco-design/form/group/index.vue'),
       meta: {
         locale: 'menu.form.group',

continew-admin-ui/src/router/routes/modules/demo/list.ts

@@ -3,18 +3,17 @@ import { AppRouteRecordRaw } from '../../types';
 
 const LIST: AppRouteRecordRaw = {
   path: '/list',
-  name: 'list',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.list',
     requiresAuth: true,
     icon: 'list',
-    order: 100,
+    order: 900,
   },
   children: [
     {
-      path: 'search-table', // The midline path complies with SEO specifications
       name: 'SearchTable',
+      path: 'search-table', // The midline path complies with SEO specifications
       component: () =>
         import('@/views/arco-design/list/search-table/index.vue'),
       meta: {
@@ -24,8 +23,8 @@ const LIST: AppRouteRecordRaw = {
       },
     },
     {
-      path: 'card',
       name: 'Card',
+      path: 'card',
       component: () => import('@/views/arco-design/list/card/index.vue'),
       meta: {
         locale: 'menu.list.cardList',

continew-admin-ui/src/router/routes/modules/demo/profile.ts

@@ -3,18 +3,17 @@ import { AppRouteRecordRaw } from '../../types';
 
 const PROFILE: AppRouteRecordRaw = {
   path: '/profile',
-  name: 'profile',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.profile',
     requiresAuth: true,
     icon: 'file',
-    order: 102,
+    order: 902,
   },
   children: [
     {
-      path: 'basic',
       name: 'Basic',
+      path: 'basic',
       component: () => import('@/views/arco-design/profile/basic/index.vue'),
       meta: {
         locale: 'menu.profile.basic',

continew-admin-ui/src/router/routes/modules/demo/result.ts

@@ -3,18 +3,17 @@ import { AppRouteRecordRaw } from '../../types';
 
 const RESULT: AppRouteRecordRaw = {
   path: '/result',
-  name: 'result',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.result',
     icon: 'check-circle',
     requiresAuth: true,
-    order: 103,
+    order: 903,
   },
   children: [
     {
-      path: 'success',
       name: 'Success',
+      path: 'success',
       component: () => import('@/views/arco-design/result/success/index.vue'),
       meta: {
         locale: 'menu.result.success',
@@ -23,8 +22,8 @@ const RESULT: AppRouteRecordRaw = {
       },
     },
     {
-      path: 'error',
       name: 'Error',
+      path: 'error',
       component: () => import('@/views/arco-design/result/error/index.vue'),
       meta: {
         locale: 'menu.result.error',

continew-admin-ui/src/router/routes/modules/demo/visualization.ts

@@ -3,18 +3,17 @@ import { AppRouteRecordRaw } from '../../types';
 
 const VISUALIZATION: AppRouteRecordRaw = {
   path: '/visualization',
-  name: 'visualization',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.visualization',
     requiresAuth: true,
     icon: 'bar-chart',
-    order: 105,
+    order: 905,
   },
   children: [
     {
-      path: 'data-analysis',
       name: 'DataAnalysis',
+      path: 'data-analysis',
       component: () =>
         import('@/views/arco-design/visualization/data-analysis/index.vue'),
       meta: {
@@ -24,8 +23,8 @@ const VISUALIZATION: AppRouteRecordRaw = {
       },
     },
     {
-      path: 'multi-dimension-data-analysis',
       name: 'MultiDimensionDataAnalysis',
+      path: 'multi-dimension-data-analysis',
       component: () =>
         import(
           '@/views/arco-design/visualization/multi-dimension-data-analysis/index.vue'
@@ -37,8 +36,8 @@ const VISUALIZATION: AppRouteRecordRaw = {
       },
     },
     {
-      path: 'monitor',
       name: 'Monitor',
+      path: 'monitor',
       component: () =>
         import('@/views/arco-design/visualization/monitor/index.vue'),
       meta: {

continew-admin-ui/src/router/routes/modules/fixed/dashboard.ts

@@ -1,9 +1,9 @@
-import { DEFAULT_LAYOUT } from '../base';
-import { AppRouteRecordRaw } from '../types';
+import { DEFAULT_LAYOUT } from '../../base';
+import { AppRouteRecordRaw } from '../../types';
 
 const DASHBOARD: AppRouteRecordRaw = {
   path: '/dashboard',
-  name: 'dashboard',
+  name: 'Dashboard',
   component: DEFAULT_LAYOUT,
   redirect: '/dashboard/workplace',
   meta: {
@@ -15,14 +15,14 @@ const DASHBOARD: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: 'workplace',
       name: 'Workplace',
+      path: 'workplace',
       component: () => import('@/views/dashboard/workplace/index.vue'),
       meta: {
         locale: 'menu.dashboard.workplace',
         requiresAuth: true,
         roles: ['*'],
-        activeMenu: 'dashboard',
+        activeMenu: 'Dashboard',
       },
     },
   ],

continew-admin-ui/src/router/routes/modules/fixed/user-center.ts

@@ -1,9 +1,8 @@
-import { DEFAULT_LAYOUT } from '../base';
-import { AppRouteRecordRaw } from '../types';
+import { DEFAULT_LAYOUT } from '../../base';
+import { AppRouteRecordRaw } from '../../types';
 
 const UserCenter: AppRouteRecordRaw = {
   path: '/login/user',
-  name: 'user',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.user',
@@ -12,8 +11,8 @@ const UserCenter: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: 'center',
       name: 'UserCenter',
+      path: 'center',
       component: () => import('@/views/system/user/center/index.vue'),
       meta: {
         locale: 'menu.user.center',

continew-admin-ui/src/router/routes/modules/monitor.ts

@@ -3,7 +3,6 @@ import { AppRouteRecordRaw } from '../types';
 
 const Monitor: AppRouteRecordRaw = {
   path: '/monitor',
-  name: 'monitor',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.monitor',
@@ -13,23 +12,21 @@ const Monitor: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: '/monitor/online',
       name: 'OnlineUser',
+      path: '/monitor/online',
       component: () => import('@/views/monitor/online/index.vue'),
       meta: {
         locale: 'menu.online.user.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
     {
-      path: '/monitor/log/login',
       name: 'LoginLog',
+      path: '/monitor/log/login',
       component: () => import('@/views/monitor/log/login/index.vue'),
       meta: {
         locale: 'menu.log.login.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
     {
@@ -39,17 +36,15 @@ const Monitor: AppRouteRecordRaw = {
       meta: {
         locale: 'menu.log.operation.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
     {
-      path: '/monitor/log/system',
       name: 'SystemLog',
+      path: '/monitor/log/system',
       component: () => import('@/views/monitor/log/system/index.vue'),
       meta: {
         locale: 'menu.log.system.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
   ],

continew-admin-ui/src/router/routes/modules/system.ts

@@ -3,7 +3,6 @@ import { AppRouteRecordRaw } from '../types';
 
 const System: AppRouteRecordRaw = {
   path: '/system',
-  name: 'system',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.system',
@@ -13,53 +12,48 @@ const System: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: '/system/user',
       name: 'User',
+      path: '/system/user',
       component: () => import('@/views/system/user/index.vue'),
       meta: {
         locale: 'menu.system.user.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
     {
-      path: '/system/role',
       name: 'Role',
+      path: '/system/role',
       component: () => import('@/views/system/role/index.vue'),
       meta: {
         locale: 'menu.system.role.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
     {
-      path: '/system/menu',
       name: 'Menu',
+      path: '/system/menu',
       component: () => import('@/views/system/menu/index.vue'),
       meta: {
         locale: 'menu.system.menu.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
     {
-      path: '/system/dept',
       name: 'Dept',
+      path: '/system/dept',
       component: () => import('@/views/system/dept/index.vue'),
       meta: {
         locale: 'menu.system.dept.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
     {
-      path: '/system/announcement',
       name: 'Announcement',
+      path: '/system/announcement',
       component: () => import('@/views/system/announcement/index.vue'),
       meta: {
         locale: 'menu.system.announcement.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
   ],

continew-admin-ui/src/router/routes/modules/tool.ts

@@ -3,7 +3,6 @@ import { AppRouteRecordRaw } from '../types';
 
 const Tool: AppRouteRecordRaw = {
   path: '/tool',
-  name: 'tool',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.tool',
@@ -13,13 +12,12 @@ const Tool: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: '/tool/generator',
       name: 'Generator',
+      path: '/tool/generator',
       component: () => import('@/views/tool/generator/index.vue'),
       meta: {
         locale: 'menu.tool.generator.list',
         requiresAuth: true,
-        roles: ['*'],
       },
     },
   ],