v2.0

web/src/router/base.ts

@@ -0,0 +1,45 @@
+import type { AppRouteRecordRaw } from '@/router/types';
+import { ErrorPage, RedirectName, Layout } from '@/router/constant';
+
+// 404 on a page
+export const ErrorPageRoute: AppRouteRecordRaw = {
+  path: '/:path(.*)*',
+  name: 'ErrorPage',
+  component: Layout,
+  meta: {
+    title: 'ErrorPage',
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: 'ErrorPageSon',
+      component: ErrorPage,
+      meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
+
+export const RedirectRoute: AppRouteRecordRaw = {
+  path: '/redirect',
+  name: RedirectName,
+  component: Layout,
+  meta: {
+    title: RedirectName,
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: RedirectName,
+      component: () => import('@/views/redirect/index.vue'),
+      meta: {
+        title: RedirectName,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};

web/src/router/constant.ts

@@ -0,0 +1,7 @@
+export const RedirectName = 'Redirect';
+
+export const ErrorPage = () => import('@/views/exception/404.vue');
+
+export const Layout = () => import('@/layout/index.vue');
+
+export const ParentLayout = () => import('@/layout/parentLayout.vue');

web/src/router/generator-routers.ts

@@ -0,0 +1,154 @@
+import { adminMenus } from '@/api/system/menu';
+import { constantRouterIcon } from './router-icons';
+import { RouteRecordRaw } from 'vue-router';
+import { Layout, ParentLayout } from '@/router/constant';
+import type { AppRouteRecordRaw } from '@/router/types';
+
+const Iframe = () => import('@/views/iframe/index.vue');
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
+
+LayoutMap.set('LAYOUT', Layout);
+LayoutMap.set('IFRAME', Iframe);
+
+/**
+ * 格式化 后端 结构信息并递归生成层级路由表
+ * @param routerMap
+ * @param parent
+ * @returns {*}
+ */
+export const routerGenerator = (routerMap, parent?): any[] => {
+  return routerMap.map((item) => {
+    const currentRouter: any = {
+      // 路由地址 动态拼接生成如 /dashboard/workplace
+      path: `${(parent && parent.path) || ''}/${item.path}`,
+      // 路由名称，建议唯一
+      name: item.name || '',
+      // 该路由对应页面的 组件
+      component: item.component,
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: {
+        ...item.meta,
+        label: item.meta.title,
+        icon: constantRouterIcon[item.meta.icon] || null,
+        permissions: item.meta.permissions || null,
+      },
+    };
+
+    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    currentRouter.path = currentRouter.path.replace('//', '/');
+    // 重定向
+    item.redirect && (currentRouter.redirect = item.redirect);
+    // 是否有子菜单，并递归处理
+    if (item.children && item.children.length > 0) {
+      //如果未定义 redirect 默认第一个子路由为 redirect
+      !item.redirect && (currentRouter.redirect = `${item.path}/${item.children[0].path}`);
+      // Recursion
+      currentRouter.children = routerGenerator(item.children, currentRouter);
+    }
+    return currentRouter;
+  });
+};
+
+/**
+ * 动态生成菜单
+ * @returns {Promise<Router>}
+ */
+export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
+  return new Promise((resolve, reject) => {
+    adminMenus()
+      .then((result) => {
+        const routeList = routerGenerator(result.list);
+        asyncImportRoute(routeList);
+
+        resolve(routeList);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * 查找views中对应的组件文件
+ * */
+let viewsModules: Record<string, () => Promise<Recordable>>;
+export const asyncImportRoute = (routes: AppRouteRecordRaw[] | undefined): void => {
+  viewsModules = viewsModules || import.meta.glob('../views/**/*.{vue,tsx}');
+  if (!routes) return;
+  routes.forEach((item) => {
+    if (!item.component && item.meta?.frameSrc) {
+      item.component = 'IFRAME';
+    }
+    const { component, name } = item;
+    const { children } = item;
+    if (component) {
+      const layoutFound = LayoutMap.get(component as string);
+      if (layoutFound) {
+        item.component = layoutFound;
+      } else {
+        item.component = dynamicImport(viewsModules, component as string);
+      }
+    } else if (name) {
+      item.component = ParentLayout;
+    }
+    children && asyncImportRoute(children);
+  });
+};
+
+/**
+ * 动态导入
+ * */
+export const dynamicImport = (
+  viewsModules: Record<string, () => Promise<Recordable>>,
+  component: string
+) => {
+  const keys = Object.keys(viewsModules);
+  const matchKeys = keys.filter((key) => {
+    let k = key.replace('../views', '');
+    const lastIndex = k.lastIndexOf('.');
+    k = k.substring(0, lastIndex);
+    return k === component;
+  });
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0];
+    return viewsModules[matchKey];
+  }
+  if (matchKeys?.length > 1) {
+    console.warn(
+      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure'
+    );
+    return;
+  }
+};
+
+/**
+ * 移除隐藏的菜单
+ * @param menus
+ */
+export const removeHiddenMenus = (menus: RouteRecordRaw[]) => {
+  const arr = [];
+  for (let j = 0; j < menus.length; j++) {
+    // console.log('menus[j]:' + JSON.stringify(menus[j]));
+    if (menus[j].meta?.type === 3) {
+      continue;
+    }
+    if (menus[j].meta?.hidden === true) {
+      continue;
+    }
+
+    // @ts-ignore
+    if (menus[j].children?.length > 0) {
+      // @ts-ignore
+      menus[j].children = removeHiddenMenus(menus[j].children);
+      if (menus[j].children?.length === 0) {
+        delete menus[j].children;
+      }
+    }
+
+    // @ts-ignore
+    arr.push(menus[j]);
+  }
+
+  // @ts-ignore
+  return arr;
+};

web/src/router/index.ts

@@ -0,0 +1,60 @@
+import { App } from 'vue';
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import { RedirectRoute } from '@/router/base';
+import { PageEnum } from '@/enums/pageEnum';
+import { createRouterGuards } from './router-guards';
+
+const modules = import.meta.globEager('./modules/**/*.ts');
+
+const routeModuleList: RouteRecordRaw[] = [];
+
+Object.keys(modules).forEach((key) => {
+  const mod = modules[key].default || {};
+  const modList = Array.isArray(mod) ? [...mod] : [mod];
+  routeModuleList.push(...modList);
+});
+
+function sortRoute(a, b) {
+  return (a.meta?.sort || 0) - (b.meta?.sort || 0);
+}
+
+routeModuleList.sort(sortRoute);
+
+export const RootRoute: RouteRecordRaw = {
+  path: '/',
+  name: 'Root',
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    title: 'Root',
+  },
+};
+
+export const LoginRoute: RouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+  },
+};
+
+//需要验证权限
+export const asyncRoutes = [...routeModuleList];
+
+//普通路由 无需验证权限
+export const constantRouter: any[] = [LoginRoute, RootRoute, RedirectRoute];
+
+const router = createRouter({
+  history: createWebHashHistory(''),
+  routes: constantRouter,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
+
+export function setupRouter(app: App) {
+  app.use(router);
+  // 创建路由守卫
+  createRouterGuards(router);
+}
+
+export default router;

web/src/router/modules/about.ts

@@ -0,0 +1,32 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { ProjectOutlined } from '@vicons/antd';
+import { renderIcon, renderNew } from '@/utils/index';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/about',
+    name: 'about',
+    component: Layout,
+    meta: {
+      sort: 10,
+      isRoot: true,
+      activeMenu: 'about_index',
+      icon: renderIcon(ProjectOutlined),
+    },
+    children: [
+      {
+        path: 'index',
+        name: `about_index`,
+        meta: {
+          title: '关于',
+          extra: renderNew(),
+          activeMenu: 'about_index',
+        },
+        component: () => import('@/views/about/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/comp.ts

@@ -0,0 +1,131 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout, ParentLayout } from '@/router/constant';
+import { WalletOutlined } from '@vicons/antd';
+import { renderIcon, renderNew } from '@/utils';
+
+const routeName = 'comp';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/comp',
+    name: routeName,
+    component: Layout,
+    redirect: '/comp/table',
+    meta: {
+      title: '组件示例',
+      icon: renderIcon(WalletOutlined),
+      sort: 8,
+    },
+    children: [
+      {
+        path: 'table',
+        name: `${routeName}_table`,
+        redirect: '/comp/table/basic',
+        component: ParentLayout,
+        meta: {
+          title: '表格',
+        },
+        children: [
+          {
+            path: 'basic',
+            name: `${routeName}_table_basic`,
+            meta: {
+              title: '基础表格',
+            },
+            component: () => import('@/views/comp/table/basic.vue'),
+          },
+          {
+            path: 'editCell',
+            name: `${routeName}_table_editCell`,
+            meta: {
+              title: '单元格编辑',
+            },
+            component: () => import('@/views/comp/table/editCell.vue'),
+          },
+          {
+            path: 'editRow',
+            name: `${routeName}_table_editRow`,
+            meta: {
+              title: '整行编辑',
+            },
+            component: () => import('@/views/comp/table/editRow.vue'),
+          },
+        ],
+      },
+      {
+        path: 'form',
+        name: `${routeName}_form`,
+        redirect: '/comp/form/basic',
+        component: ParentLayout,
+        meta: {
+          title: '表单',
+        },
+        children: [
+          {
+            path: 'basic',
+            name: `${routeName}_form_basic`,
+            meta: {
+              title: '基础使用',
+            },
+            component: () => import('@/views/comp/form/basic.vue'),
+          },
+          {
+            path: 'useForm',
+            name: `useForm`,
+            meta: {
+              title: 'useForm',
+            },
+            component: () => import('@/views/comp/form/useForm.vue'),
+          },
+        ],
+      },
+      {
+        path: 'upload',
+        name: `${routeName}_upload`,
+        meta: {
+          title: '上传图片',
+        },
+        component: () => import('@/views/comp/upload/index.vue'),
+      },
+      {
+        path: 'modal',
+        name: `${routeName}_modal`,
+        meta: {
+          title: '弹窗扩展',
+        },
+        component: () => import('@/views/comp/modal/index.vue'),
+      },
+      {
+        path: 'richtext',
+        name: `richtext`,
+        meta: {
+          title: '富文本',
+          extra: renderNew(),
+        },
+        component: () => import('@/views/comp/richtext/vue-quill.vue'),
+      },
+      {
+        path: 'drag',
+        name: `Drag`,
+        meta: {
+          title: '拖拽',
+          extra: renderNew(),
+        },
+        component: () => import('@/views/comp/drag/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/dashboard.ts

@@ -0,0 +1,64 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { DashboardOutlined } from '@vicons/antd';
+import { renderIcon } from '@/utils/index';
+
+const routeName = 'dashboard';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/dashboard',
+    name: routeName,
+    redirect: '/dashboard/console',
+    component: Layout,
+    meta: {
+      title: 'Dashboard',
+      icon: renderIcon(DashboardOutlined),
+      permissions: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],
+      sort: 0,
+    },
+    children: [
+      {
+        path: 'console',
+        name: `${routeName}_console`,
+        meta: {
+          title: '主控台',
+          permissions: ['dashboard_console'],
+          affix: true,
+        },
+        component: () => import('@/views/dashboard/console/console.vue'),
+      },
+      // {
+      //   path: 'monitor',
+      //   name: `${ routeName }_monitor`,
+      //   meta: {
+      //     title: '监控页',
+      //     permissions: ['dashboard_monitor']
+      //   },
+      //   component: () => import('@/views/dashboard/monitor/monitor.vue')
+      // },
+      {
+        path: 'workplace',
+        name: `${routeName}_workplace`,
+        meta: {
+          title: '工作台',
+          keepAlive: true,
+          permissions: ['dashboard_workplace'],
+        },
+        component: () => import('@/views/dashboard/workplace/workplace.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/docs.ts

@@ -0,0 +1,19 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { DocumentTextOutline } from '@vicons/ionicons5';
+import { renderIcon } from '@/utils/index';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/external',
+    name: 'https://naive-ui-admin-docs.vercel.app',
+    component: Layout,
+    meta: {
+      title: '项目文档',
+      icon: renderIcon(DocumentTextOutline),
+      sort: 9,
+    },
+  },
+];
+
+export default routes;

web/src/router/modules/exception.ts

@@ -0,0 +1,57 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { ExclamationCircleOutlined } from '@vicons/antd';
+import { renderIcon } from '@/utils/index';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/exception',
+    name: 'Exception',
+    redirect: '/exception/403',
+    component: Layout,
+    meta: {
+      title: '异常页面',
+      icon: renderIcon(ExclamationCircleOutlined),
+      sort: 3,
+    },
+    children: [
+      {
+        path: '403',
+        name: 'exception-403',
+        meta: {
+          title: '403',
+        },
+        component: () => import('@/views/exception/403.vue'),
+      },
+      {
+        path: '404',
+        name: 'exception-404',
+        meta: {
+          title: '404',
+        },
+        component: () => import('@/views/exception/404.vue'),
+      },
+      {
+        path: '500',
+        name: 'exception-500',
+        meta: {
+          title: '500',
+        },
+        component: () => import('@/views/exception/500.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/form.ts

@@ -0,0 +1,57 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { ProfileOutlined } from '@vicons/antd';
+import { renderIcon } from '@/utils/index';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/form',
+    name: 'Form',
+    redirect: '/form/basic-form',
+    component: Layout,
+    meta: {
+      title: '表单页面',
+      icon: renderIcon(ProfileOutlined),
+      sort: 3,
+    },
+    children: [
+      {
+        path: 'basic-form',
+        name: 'form-basic-form',
+        meta: {
+          title: '基础表单',
+        },
+        component: () => import('@/views/form/basicForm/index.vue'),
+      },
+      {
+        path: 'step-form',
+        name: 'form-step-form',
+        meta: {
+          title: '分步表单',
+        },
+        component: () => import('@/views/form/stepForm/stepForm.vue'),
+      },
+      {
+        path: 'detail',
+        name: 'form-detail',
+        meta: {
+          title: '表单详情',
+        },
+        component: () => import('@/views/form/detail/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/frame.ts

@@ -0,0 +1,24 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { DesktopOutline } from '@vicons/ionicons5';
+import { renderIcon } from '@/utils/index';
+
+const IFrame = () => import('@/views/iframe/index.vue');
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/frame',
+    name: 'Frame',
+    redirect: '/frame/docs',
+    component: Layout,
+    meta: {
+      title: '外部页面',
+      sort: 8,
+      icon: renderIcon(DesktopOutline),
+    },
+    children: [
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/list.ts

@@ -0,0 +1,51 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { TableOutlined } from '@vicons/antd';
+import { renderIcon } from '@/utils/index';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/list',
+    name: 'List',
+    redirect: '/list/basic-list',
+    component: Layout,
+    meta: {
+      title: '列表页面',
+      icon: renderIcon(TableOutlined),
+      sort: 2,
+    },
+    children: [
+      {
+        path: 'basic-list',
+        name: 'basic-list',
+        meta: {
+          title: '基础列表',
+        },
+        component: () => import('@/views/list/basicList/index.vue'),
+      },
+      {
+        path: 'basic-info/:id?',
+        name: 'basic-info',
+        meta: {
+          title: '基础详情',
+          hidden: true,
+          activeMenu: 'basic-list',
+        },
+        component: () => import('@/views/list/basicList/info.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/result.ts

@@ -0,0 +1,57 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { CheckCircleOutlined } from '@vicons/antd';
+import { renderIcon } from '@/utils/index';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/result',
+    name: 'Result',
+    redirect: '/result/success',
+    component: Layout,
+    meta: {
+      title: '结果页面',
+      icon: renderIcon(CheckCircleOutlined),
+      sort: 4,
+    },
+    children: [
+      {
+        path: 'success',
+        name: 'result-success',
+        meta: {
+          title: '成功页',
+        },
+        component: () => import('@/views/result/success.vue'),
+      },
+      {
+        path: 'fail',
+        name: 'result-fail',
+        meta: {
+          title: '失败页',
+        },
+        component: () => import('@/views/result/fail.vue'),
+      },
+      {
+        path: 'info',
+        name: 'result-info',
+        meta: {
+          title: '信息页',
+        },
+        component: () => import('@/views/result/info.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/setting.ts

@@ -0,0 +1,49 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { SettingOutlined } from '@vicons/antd';
+import { renderIcon } from '@/utils/index';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/setting',
+    name: 'Setting',
+    redirect: '/setting/account',
+    component: Layout,
+    meta: {
+      title: '设置页面',
+      icon: renderIcon(SettingOutlined),
+      sort: 5,
+    },
+    children: [
+      {
+        path: 'account',
+        name: 'setting-account',
+        meta: {
+          title: '个人设置',
+        },
+        component: () => import('@/views/setting/account/account.vue'),
+      },
+      {
+        path: 'system',
+        name: 'setting-system',
+        meta: {
+          title: '系统设置',
+        },
+        component: () => import('@/views/setting/system/system.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/modules/system.ts

@@ -0,0 +1,49 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { OptionsSharp } from '@vicons/ionicons5';
+import { renderIcon } from '@/utils/index';
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/system',
+    name: 'System',
+    redirect: '/system/menu',
+    component: Layout,
+    meta: {
+      title: '系统设置',
+      icon: renderIcon(OptionsSharp),
+      sort: 1,
+    },
+    children: [
+      {
+        path: 'menu',
+        name: 'system_menu',
+        meta: {
+          title: '菜单权限管理',
+        },
+        component: () => import('@/views/permission/menu/menu.vue'),
+      },
+      {
+        path: 'role',
+        name: 'system_role',
+        meta: {
+          title: '角色权限管理',
+        },
+        component: () => import('@/views/permission/role/role.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

web/src/router/router-guards.ts

@@ -0,0 +1,109 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { isNavigationFailure, Router } from 'vue-router';
+import { useUserStoreWidthOut } from '@/store/modules/user';
+import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+import { storage } from '@/utils/Storage';
+import { PageEnum } from '@/enums/pageEnum';
+import { ErrorPageRoute } from '@/router/base';
+
+const LOGIN_PATH = PageEnum.BASE_LOGIN;
+
+const whitePathList = [LOGIN_PATH]; // no redirect whitelist
+
+export function createRouterGuards(router: Router) {
+  const userStore = useUserStoreWidthOut();
+  const asyncRouteStore = useAsyncRouteStoreWidthOut();
+  router.beforeEach(async (to, from, next) => {
+    const Loading = window['$loading'] || null;
+    Loading && Loading.start();
+    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
+      next(PageEnum.BASE_HOME);
+      return;
+    }
+
+    // Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      next();
+      return;
+    }
+
+    const token = storage.get(ACCESS_TOKEN);
+
+    if (!token) {
+      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next();
+        return;
+      }
+      // redirect login page
+      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+        path: LOGIN_PATH,
+        replace: true,
+      };
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        };
+      }
+      next(redirectData);
+      return;
+    }
+
+    if (asyncRouteStore.getIsDynamicAddedRoute) {
+      next();
+      return;
+    }
+
+    const userInfo = await userStore.GetInfo();
+    await userStore.GetConfig();
+    const routes = await asyncRouteStore.generateRoutes(userInfo);
+
+    // 动态添加可访问路由表
+    routes.forEach((item) => {
+      router.addRoute(item as unknown as RouteRecordRaw);
+    });
+
+    //添加404
+    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name);
+    if (isErrorPage === -1) {
+      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
+    }
+
+    const redirectPath = (from.query.redirect || to.path) as string;
+    const redirect = decodeURIComponent(redirectPath);
+    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+    asyncRouteStore.setDynamicAddedRoute(true);
+    next(nextData);
+    Loading && Loading.finish();
+  });
+
+  router.afterEach((to, _, failure) => {
+    document.title = (to?.meta?.title as string) || document.title;
+    if (isNavigationFailure(failure)) {
+      //console.log('failed navigation', failure)
+    }
+    const asyncRouteStore = useAsyncRouteStoreWidthOut();
+    // 在这里设置需要缓存的组件名称
+    const keepAliveComponents = asyncRouteStore.keepAliveComponents;
+    const currentComName: any = to.matched.find((item) => item.name == to.name)?.name;
+    if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
+      // 需要缓存的组件
+      keepAliveComponents.push(currentComName);
+    } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
+      // 不需要缓存的组件
+      const index = asyncRouteStore.keepAliveComponents.findIndex((name) => name == currentComName);
+      if (index != -1) {
+        keepAliveComponents.splice(index, 1);
+      }
+    }
+    asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
+    const Loading = window['$loading'] || null;
+    Loading && Loading.finish();
+  });
+
+  router.onError((error) => {
+    console.log(error, '路由错误');
+  });
+}

web/src/router/router-icons.ts

@@ -0,0 +1,53 @@
+import { renderIcon } from '@/utils/index';
+import {
+  AppstoreOutlined,
+  CheckCircleOutlined,
+  DashboardOutlined,
+  ExclamationCircleOutlined,
+  ProfileOutlined,
+  ProjectOutlined,
+  SettingOutlined,
+  TableOutlined,
+  WalletOutlined,
+  DeleteOutlined,
+  EditOutlined,
+} from '@vicons/antd';
+import {
+  DesktopOutline,
+  DocumentTextOutline,
+  OptionsSharp,
+  SettingsOutline,
+  LogoBuffer,
+  KeyOutline,
+  VolumeLowOutline,
+  CodeSlashOutline,
+  EaselOutline,
+  TimerOutline,
+  OptionsOutline,
+} from '@vicons/ionicons5';
+
+//前端路由图标映射表
+export const constantRouterIcon = {
+  EditOutlined: renderIcon(EditOutlined),
+  DeleteOutlined: renderIcon(DeleteOutlined),
+  OptionsOutline: renderIcon(OptionsOutline),
+  TimerOutline: renderIcon(TimerOutline),
+  EaselOutline: renderIcon(EaselOutline),
+  CodeSlashOutline: renderIcon(CodeSlashOutline),
+  VolumeLowOutline: renderIcon(VolumeLowOutline),
+  DashboardOutlined: renderIcon(DashboardOutlined),
+  SettingsOutline: renderIcon(SettingsOutline),
+  OptionsSharp: renderIcon(OptionsSharp),
+  TableOutlined: renderIcon(TableOutlined),
+  ExclamationCircleOutlined: renderIcon(ExclamationCircleOutlined),
+  ProfileOutlined: renderIcon(ProfileOutlined),
+  CheckCircleOutlined: renderIcon(CheckCircleOutlined),
+  SettingOutlined: renderIcon(SettingOutlined),
+  WalletOutlined: renderIcon(WalletOutlined),
+  DesktopOutline: renderIcon(DesktopOutline),
+  DocumentTextOutline: renderIcon(DocumentTextOutline),
+  ProjectOutlined: renderIcon(ProjectOutlined),
+  AppstoreOutlined: renderIcon(AppstoreOutlined),
+  LogoBuffer: renderIcon(LogoBuffer),
+  KeyOutline: renderIcon(KeyOutline),
+};

web/src/router/types.ts

@@ -0,0 +1,55 @@
+import type { RouteRecordRaw, RouteMeta } from 'vue-router';
+import { defineComponent } from 'vue';
+
+export type Component<T extends any = any> =
+  | ReturnType<typeof defineComponent>
+  | (() => Promise<typeof import('*.vue')>)
+  | (() => Promise<T>);
+
+export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+  name: string;
+  meta: RouteMeta;
+  component?: Component | string;
+  components?: Component;
+  children?: AppRouteRecordRaw[];
+  props?: Recordable;
+  fullPath?: string;
+}
+
+export interface Meta {
+  // 名称
+  title: string;
+  // 是否忽略权限
+  ignoreAuth?: boolean;
+  permissions?: string[];
+  // 是否不缓存
+  noKeepAlive?: boolean;
+  // 是否固定在tab上
+  affix?: boolean;
+  // tab上的图标
+  icon?: string;
+  // 跳转地址
+  frameSrc?: string;
+  // 外链跳转地址
+  externalLink?: string;
+  //隐藏
+  hidden?: boolean;
+}
+
+export interface Menu {
+  title: string;
+  label: string;
+  key: string;
+  meta: RouteMeta;
+  name: string;
+  component?: Component | string;
+  components?: Component;
+  children?: AppRouteRecordRaw[];
+  props?: Recordable;
+  fullPath?: string;
+  icon?: any;
+  path: string;
+  permissions?: string[];
+  redirect?: string;
+  sort?: number;
+}