update

init

src/router/constant.ts

@@ -0,0 +1,24 @@
+export const REDIRECT_NAME = 'Redirect';
+
+export const PARENT_LAYOUT_NAME = 'ParentLayout';
+
+export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
+
+export const EXCEPTION_COMPONENT = () => import('/@/views/sys/exception/Exception.vue');
+
+/**
+ * @description: default layout
+ */
+export const LAYOUT = () => import('/@/layouts/default/index.vue');
+
+/**
+ * @description: parent-layout
+ */
+export const getParentLayout = (_name?: string) => {
+    return () =>
+        new Promise((resolve) => {
+            resolve({
+                name: PARENT_LAYOUT_NAME,
+            });
+        });
+};

src/router/guard/index.ts

@@ -0,0 +1,147 @@
+import type { Router, RouteLocationNormalized } from 'vue-router';
+import { useAppStoreWithOut } from '/@/store/modules/app';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { AxiosCanceler } from '/@/utils/http/axios/axiosCancel';
+import { Modal, notification } from 'ant-design-vue';
+import { warn } from '/@/utils/log';
+import { unref } from 'vue';
+import { setRouteChange } from '/@/logics/mitt/routeChange';
+import { createPermissionGuard } from './permissionGuard';
+import { createStateGuard } from './stateGuard';
+import nProgress from 'nprogress';
+import projectSetting from '/@/settings/projectSetting';
+import { createParamMenuGuard } from './paramMenuGuard';
+
+// Don't change the order of creation
+export function setupRouterGuard(router: Router) {
+    createPageGuard(router);
+    createPageLoadingGuard(router);
+    createHttpGuard(router);
+    createScrollGuard(router);
+    createMessageGuard(router);
+    createProgressGuard(router);
+    createPermissionGuard(router);
+    createParamMenuGuard(router); // must after createPermissionGuard (menu has been built.)
+    createStateGuard(router);
+}
+
+/**
+ * Hooks for handling page state
+ */
+function createPageGuard(router: Router) {
+    const loadedPageMap = new Map<string, boolean>();
+
+    router.beforeEach(async (to) => {
+        // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
+        to.meta.loaded = !!loadedPageMap.get(to.path);
+        // Notify routing changes
+        setRouteChange(to);
+
+        return true;
+    });
+
+    router.afterEach((to) => {
+        loadedPageMap.set(to.path, true);
+    });
+}
+
+// Used to handle page loading status
+function createPageLoadingGuard(router: Router) {
+    const userStore = useUserStoreWithOut();
+    const appStore = useAppStoreWithOut();
+    const { getOpenPageLoading } = useTransitionSetting();
+    router.beforeEach(async (to) => {
+        if (!userStore.getToken) {
+            return true;
+        }
+        if (to.meta.loaded) {
+            return true;
+        }
+
+        if (unref(getOpenPageLoading)) {
+            appStore.setPageLoadingAction(true);
+            return true;
+        }
+
+        return true;
+    });
+    router.afterEach(async () => {
+        if (unref(getOpenPageLoading)) {
+            // TODO Looking for a better way
+            // The timer simulates the loading time to prevent flashing too fast,
+            setTimeout(() => {
+                appStore.setPageLoading(false);
+            }, 220);
+        }
+        return true;
+    });
+}
+
+/**
+ * The interface used to close the current page to complete the request when the route is switched
+ * @param router
+ */
+function createHttpGuard(router: Router) {
+    const { removeAllHttpPending } = projectSetting;
+    let axiosCanceler: Nullable<AxiosCanceler>;
+    if (removeAllHttpPending) {
+        axiosCanceler = new AxiosCanceler();
+    }
+    router.beforeEach(async () => {
+        // Switching the route will delete the previous request
+        axiosCanceler?.removeAllPending();
+        return true;
+    });
+}
+
+// Routing switch back to the top
+function createScrollGuard(router: Router) {
+    const isHash = (href: string) => {
+        return /^#/.test(href);
+    };
+
+    const body = document.body;
+
+    router.afterEach(async (to) => {
+        // scroll top
+        isHash((to as RouteLocationNormalized & { href: string })?.href) && body.scrollTo(0, 0);
+        return true;
+    });
+}
+
+/**
+ * Used to close the message instance when the route is switched
+ * @param router
+ */
+export function createMessageGuard(router: Router) {
+    const { closeMessageOnSwitch } = projectSetting;
+
+    router.beforeEach(async () => {
+        try {
+            if (closeMessageOnSwitch) {
+                Modal.destroyAll();
+                notification.destroy();
+            }
+        } catch (error) {
+            warn('message guard error:' + error);
+        }
+        return true;
+    });
+}
+
+export function createProgressGuard(router: Router) {
+    const { getOpenNProgress } = useTransitionSetting();
+    router.beforeEach(async (to) => {
+        if (to.meta.loaded) {
+            return true;
+        }
+        unref(getOpenNProgress) && nProgress.start();
+        return true;
+    });
+
+    router.afterEach(async () => {
+        unref(getOpenNProgress) && nProgress.done();
+        return true;
+    });
+}

src/router/guard/paramMenuGuard.ts

@@ -0,0 +1,47 @@
+import type { Router } from 'vue-router';
+import { configureDynamicParamsMenu } from '../helper/menuHelper';
+import { Menu } from '../types';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+import { useAppStoreWithOut } from '/@/store/modules/app';
+
+import { usePermissionStoreWithOut } from '/@/store/modules/permission';
+
+export function createParamMenuGuard(router: Router) {
+    const permissionStore = usePermissionStoreWithOut();
+    router.beforeEach(async (to, _, next) => {
+        // filter no name route
+        if (!to.name) {
+            next();
+            return;
+        }
+
+        // menu has been built.
+        if (!permissionStore.getIsDynamicAddedRoute) {
+            next();
+            return;
+        }
+
+        let menus: Menu[] = [];
+        if (isBackMode()) {
+            menus = permissionStore.getBackMenuList;
+        } else if (isRouteMappingMode()) {
+            menus = permissionStore.getFrontMenuList;
+        }
+        menus.forEach((item) => configureDynamicParamsMenu(item, to.params));
+
+        next();
+    });
+}
+
+const getPermissionMode = () => {
+    const appStore = useAppStoreWithOut();
+    return appStore.getProjectConfig.permissionMode;
+};
+
+const isBackMode = () => {
+    return getPermissionMode() === PermissionModeEnum.BACK;
+};
+
+const isRouteMappingMode = () => {
+    return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING;
+};

src/router/guard/permissionGuard.ts

@@ -0,0 +1,172 @@
+import type { Router, RouteRecordRaw } from 'vue-router';
+
+import { usePermissionStoreWithOut } from '/@/store/modules/permission';
+
+import { PageEnum } from '/@/enums/pageEnum';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
+
+import { RootRoute } from '/@/router/routes';
+
+import { isOAuth2AppEnv } from '/@/views/sys/login/useLogin';
+
+import { HandlerEnum } from '/@/layouts/default/setting/enum';
+import { baseHandler } from '/@/layouts/default/setting/handler';
+
+import { getEnvInfo } from '/@/utils/getEnv';
+import { PAGE_NOT_FOUND_NAME } from '/@/router/constant';
+
+const LOGIN_PATH = PageEnum.BASE_LOGIN;
+//auth2登录路由
+const OAUTH2_LOGIN_PAGE_PATH = PageEnum.OAUTH2_LOGIN_PAGE_PATH;
+
+//分享免登录路由
+const SYS_FILES_PATH = PageEnum.SYS_FILES_PATH;
+
+const ROOT_PATH = RootRoute.path;
+
+//update-begin---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3不支持auth2登录------------
+//update-begin---author:wangshuai ---date:20221111  for: [VUEN-2472]分享免登录------------
+const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH, SYS_FILES_PATH];
+//update-end---author:wangshuai ---date:20221111  for: [VUEN-2472]分享免登录------------
+//update-end---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3不支持auth2登录------------
+
+export function createPermissionGuard(router: Router) {
+    const userStore = useUserStoreWithOut();
+    const permissionStore = usePermissionStoreWithOut();
+    router.beforeEach(async (to, from, next) => {
+        if (
+            from.path === ROOT_PATH &&
+            to.path === PageEnum.BASE_HOME &&
+            userStore.getUserInfo.homePath &&
+            userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
+        ) {
+            next(userStore.getUserInfo.homePath);
+            return;
+        }
+
+        const token = userStore.getToken;
+
+        // Whitelist can be directly entered
+        if (whitePathList.includes(to.path as PageEnum)) {
+            if (to.path === LOGIN_PATH && token) {
+                const isSessionTimeout = userStore.getSessionTimeout;
+                try {
+                    await userStore.afterLoginAction();
+                    if (!isSessionTimeout) {
+                        next((to.query?.redirect as string) || '/');
+                        return;
+                    }
+                } catch {}
+                //update-begin---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3不支持auth2登录------------
+            } else if (to.path === LOGIN_PATH && isOAuth2AppEnv() && !token) {
+                //退出登录进入此逻辑
+                //如果进入的页面是login页面并且当前是OAuth2app环境，并且token为空，就进入OAuth2登录页面
+                next({ path: OAUTH2_LOGIN_PAGE_PATH });
+                return;
+                //update-end---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3不支持auth2登录------------
+            }
+            next();
+            return;
+        }
+
+        // token does not exist
+        if (!token) {
+            // You can access without permission. You need to set the routing meta.ignoreAuth to true
+            if (to.meta.ignoreAuth) {
+                next();
+                return;
+            }
+
+            //update-begin---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3 Auth2未实现------------
+            let path = LOGIN_PATH;
+            if (whitePathList.includes(to.path as PageEnum)) {
+                // 在免登录白名单，如果进入的页面是login页面并且当前是OAuth2app环境，就进入OAuth2登录页面
+                if (to.path === LOGIN_PATH && isOAuth2AppEnv()) {
+                    next({ path: OAUTH2_LOGIN_PAGE_PATH });
+                } else {
+                    //在免登录白名单，直接进入
+                    next();
+                }
+            } else {
+                // 如果当前是在OAuth2APP环境，就跳转到OAuth2登录页面，否则跳转到登录页面
+                path = isOAuth2AppEnv() ? OAUTH2_LOGIN_PAGE_PATH : LOGIN_PATH;
+            }
+            //update-end---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3 Auth2未实现------------
+            // redirect login page
+            const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+                //update-begin---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3 Auth2未实现------------
+                path: path,
+                //update-end---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3 Auth2未实现------------
+                replace: true,
+            };
+            if (to.path) {
+                redirectData.query = {
+                    ...redirectData.query,
+                    redirect: to.path,
+                };
+            }
+            next(redirectData);
+            return;
+        }
+
+        // Jump to the 404 page after processing the login
+        if (
+            from.path === LOGIN_PATH &&
+            (to.name === PAGE_NOT_FOUND_ROUTE.name || to.name === PAGE_NOT_FOUND_NAME.concat('_child')) &&
+            to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
+        ) {
+            next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+            return;
+        }
+
+        const res = getEnvInfo(import.meta.env);
+        // if (from.path === LOGIN_PATH) {
+        const array = ['2', '5', '6'];
+        if (array.includes(userStore.getUserInfo.personType)) {
+            baseHandler(HandlerEnum.TABS_SHOW, false);
+            baseHandler(HandlerEnum.SHOW_BREADCRUMB, false);
+        } else {
+            // 这里判断是否交大项目，如果为交大项目，不需要tab
+            baseHandler(HandlerEnum.TABS_SHOW, res.VITE_PLATFORM != 'JD');
+            baseHandler(HandlerEnum.SHOW_BREADCRUMB, true);
+        }
+        // }
+
+        // get userinfo while last fetch time is empty
+        if (userStore.getLastUpdateTime === 0) {
+            try {
+                await userStore.getUserInfoAction();
+            } catch (err) {
+                console.info(err);
+                next();
+            }
+        }
+
+        if (permissionStore.getIsDynamicAddedRoute) {
+            next();
+            return;
+        }
+
+        const routes = await permissionStore.buildRoutesAction();
+
+        routes.forEach((route) => {
+            router.addRoute(route as unknown as RouteRecordRaw);
+        });
+
+        router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+
+        permissionStore.setDynamicAddedRoute(true);
+
+        if (to.name === PAGE_NOT_FOUND_ROUTE.name || to.name === PAGE_NOT_FOUND_NAME.concat('_child')) {
+            // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+            next({ path: to.fullPath, replace: true, query: to.query });
+        } else {
+            const redirectPath = (from.query.redirect || to.path) as string;
+            const redirect = decodeURIComponent(redirectPath);
+            const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+            next(nextData);
+        }
+    });
+}

src/router/guard/stateGuard.ts

@@ -0,0 +1,26 @@
+import type { Router } from 'vue-router';
+import { useAppStore } from '/@/store/modules/app';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useUserStore } from '/@/store/modules/user';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { PageEnum } from '/@/enums/pageEnum';
+import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
+import { removeMixTopClick } from '/@/logics/mitt/mixTopClick';
+
+export function createStateGuard(router: Router) {
+    router.afterEach((to) => {
+        // Just enter the login page and clear the authentication information
+        if (to.path === PageEnum.BASE_LOGIN) {
+            const tabStore = useMultipleTabStore();
+            const userStore = useUserStore();
+            const appStore = useAppStore();
+            const permissionStore = usePermissionStore();
+            appStore.resetAllState();
+            permissionStore.resetState();
+            tabStore.resetState();
+            userStore.resetState();
+            removeTabChangeListener();
+            removeMixTopClick();
+        }
+    });
+}

src/router/helper/menuHelper.ts

@@ -0,0 +1,96 @@
+import { AppRouteModule } from '/@/router/types';
+import type { MenuModule, Menu, AppRouteRecordRaw } from '/@/router/types';
+import { findPath, treeMap } from '/@/utils/helper/treeHelper';
+import { cloneDeep } from 'lodash-es';
+import { isUrl } from '/@/utils/is';
+import { RouteParams } from 'vue-router';
+import { toRaw } from 'vue';
+
+export function getAllParentPath<T = Recordable>(treeData: T[], path: string) {
+    const menuList = findPath(treeData, (n) => n.path === path) as Menu[];
+    return (menuList || []).map((item) => item.path);
+}
+
+function joinParentPath(menus: Menu[], parentPath = '') {
+    for (let index = 0; index < menus.length; index++) {
+        const menu = menus[index];
+        // https://next.router.vuejs.org/guide/essentials/nested-routes.html
+        // Note that nested paths that start with / will be treated as a root path.
+        // This allows you to leverage the component nesting without having to use a nested URL.
+        if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
+            // path doesn't start with /, nor is it a url, join parent path
+            menu.path = `${parentPath}/${menu.path}`;
+        }
+        if (menu?.children?.length) {
+            joinParentPath(menu.children, menu.meta?.hidePathForChildren ? parentPath : menu.path);
+        }
+    }
+}
+
+// Parsing the menu module
+export function transformMenuModule(menuModule: MenuModule): Menu {
+    const { menu } = menuModule;
+
+    const menuList = [menu];
+
+    joinParentPath(menuList);
+    return menuList[0];
+}
+
+export function transformRouteToMenu(routeModList: AppRouteModule[], routerMapping = false) {
+    const cloneRouteModList = cloneDeep(routeModList);
+    const routeList: AppRouteRecordRaw[] = [];
+
+    cloneRouteModList.forEach((item) => {
+        if (routerMapping && item.meta.hideChildrenInMenu && typeof item.redirect === 'string') {
+            item.path = item.redirect;
+        }
+        if (item.meta?.single) {
+            const realItem = item?.children?.[0];
+            realItem && routeList.push(realItem);
+        } else {
+            routeList.push(item);
+        }
+    });
+    const list = treeMap(routeList, {
+        conversion: (node: AppRouteRecordRaw) => {
+            const { meta: { title, hideMenu = false } = {} } = node;
+
+            return {
+                ...(node.meta || {}),
+                meta: node.meta,
+                name: title,
+                hideMenu,
+                alwaysShow: node.alwaysShow || false,
+                path: node.path,
+                ...(node.redirect ? { redirect: node.redirect } : {}),
+            };
+        },
+    });
+    joinParentPath(list);
+    return cloneDeep(list);
+}
+
+/**
+ * config menu with given params
+ */
+const menuParamRegex = /(?::)([\s\S]+?)((?=\/)|$)/g;
+export function configureDynamicParamsMenu(menu: Menu, params: RouteParams) {
+    const { path, paramPath } = toRaw(menu);
+    let realPath = paramPath ? paramPath : path;
+    const matchArr = realPath.match(menuParamRegex);
+
+    matchArr?.forEach((it) => {
+        const realIt = it.substr(1);
+        if (params[realIt]) {
+            realPath = realPath.replace(`:${realIt}`, params[realIt] as string);
+        }
+    });
+    // save original param path.
+    if (!paramPath && matchArr && matchArr.length > 0) {
+        menu.paramPath = path;
+    }
+    menu.path = realPath;
+    // children
+    menu.children?.forEach((item) => configureDynamicParamsMenu(item, params));
+}

src/router/helper/routeHelper.ts

@@ -0,0 +1,242 @@
+import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
+import type { Router, RouteRecordNormalized } from 'vue-router';
+
+import { getParentLayout, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
+import { cloneDeep, omit } from 'lodash-es';
+import { warn } from '/@/utils/log';
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { getTenantId, getToken } from '/@/utils/auth';
+import { URL_HASH_TAB } from '/@/utils';
+//引入online lib路由
+import { packageViews } from '/@/utils/monorepo/dynamicRouter';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+export type LayoutMapKey = 'LAYOUT';
+const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue');
+const LayoutContent = () => import('/@/layouts/default/content/index.vue');
+
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
+
+LayoutMap.set('LAYOUT', LAYOUT);
+LayoutMap.set('IFRAME', IFRAME);
+//微前端qiankun
+LayoutMap.set('LayoutsContent', LayoutContent);
+
+let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
+
+// Dynamic introduction
+function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
+    if (!dynamicViewsModules) {
+        dynamicViewsModules = import.meta.glob('../../views/**/*.{vue,tsx}');
+        //合并online lib路由
+        dynamicViewsModules = Object.assign({}, dynamicViewsModules, packageViews);
+    }
+    if (!routes) return;
+    routes.forEach((item) => {
+        //【jeecg-boot/issues/I5N2PN】左侧动态菜单怎么做国际化处理  2022-10-09
+        //菜单支持国际化翻译
+        if (item?.meta?.title) {
+            const { t } = useI18n();
+            if (item.meta.title.includes("t('") && t) {
+                item.meta.title = eval(item.meta.title);
+                //console.log('译后: ',item.meta.title)
+            }
+        }
+
+        // update-begin--author:sunjianlei---date:20210918---for:适配旧版路由选项 --------
+        // @ts-ignore 适配隐藏路由
+        if (item?.hidden) {
+            item.meta.hideMenu = true;
+            //是否隐藏面包屑
+            item.meta.hideBreadcrumb = true;
+        }
+        // @ts-ignore 添加忽略路由配置
+        if (item?.route == 0) {
+            item.meta.ignoreRoute = true;
+        }
+        // @ts-ignore 添加是否缓存路由配置
+        item.meta.ignoreKeepAlive = !item?.meta.keepAlive;
+        const token = getToken();
+        const tenantId = getTenantId();
+        // URL支持{{ window.xxx }}占位符变量
+        //update-begin---author:wangshuai ---date:20220711  for：[VUEN-1638]菜单tenantId需要动态生成------------
+        item.component = (item.component || '')
+            .replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2))
+            .replace('${token}', token)
+            .replace('${tenantId}', tenantId);
+        //update-end---author:wangshuai ---date:20220711  for：[VUEN-1638]菜单tenantId需要动态生成------------
+        // 适配 iframe
+        if (/^\/?http(s)?/.test(item.component as string)) {
+            item.component = item.component.substring(1, item.component.length);
+        }
+        if (/^http(s)?/.test(item.component as string)) {
+            if (item.meta?.internalOrExternal) {
+                // @ts-ignore 外部打开
+                item.path = item.component;
+                // update-begin--author:sunjianlei---date:20220408---for: 【VUEN-656】配置外部网址打不开，原因是带了#号，需要替换一下
+                item.path = item.path.replace('#', URL_HASH_TAB);
+                // update-end--author:sunjianlei---date:20220408---for: 【VUEN-656】配置外部网址打不开，原因是带了#号，需要替换一下
+            } else {
+                // @ts-ignore 内部打开
+                item.meta.frameSrc = item.component;
+            }
+            delete item.component;
+        }
+        // update-end--author:sunjianlei---date:20210918---for:适配旧版路由选项 --------
+        if (!item.component && item.meta?.frameSrc) {
+            item.component = 'IFRAME';
+        }
+        let { component, name } = item;
+        const { children } = item;
+        if (component) {
+            const layoutFound = LayoutMap.get(component.toUpperCase());
+            if (layoutFound) {
+                item.component = layoutFound;
+            } else {
+                // update-end--author:zyf---date:20220307--for:VUEN-219兼容后台返回动态首页,目的适配跟v2版本配置一致 --------
+                if (component.indexOf('dashboard/') > -1) {
+                    //当数据标sys_permission中component没有拼接index时前端需要拼接
+                    if (component.indexOf('/index') < 0) {
+                        component = component + '/index';
+                    }
+                }
+                // update-end--author:zyf---date:20220307---for:VUEN-219兼容后台返回动态首页,目的适配跟v2版本配置一致 --------
+                item.component = dynamicImport(dynamicViewsModules, component as string);
+            }
+        } else if (name) {
+            item.component = getParentLayout();
+        }
+        children && asyncImportRoute(children);
+    });
+}
+
+function dynamicImport(dynamicViewsModules: Record<string, () => Promise<Recordable>>, component: string) {
+    const keys = Object.keys(dynamicViewsModules);
+    const matchKeys = keys.filter((key) => {
+        const k = key.replace('../../views', '');
+        const startFlag = component.startsWith('/');
+        const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
+        const startIndex = startFlag ? 0 : 1;
+        const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
+        return k.substring(startIndex, lastIndex) === component;
+    });
+    if (matchKeys?.length === 1) {
+        const matchKey = matchKeys[0];
+        return dynamicViewsModules[matchKey];
+    } else if (matchKeys?.length > 1) {
+        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;
+    }
+}
+
+// Turn background objects into routing objects
+export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
+    routeList.forEach((route) => {
+        const component = route.component as string;
+        if (component) {
+            if (component.toUpperCase() === 'LAYOUT') {
+                route.component = LayoutMap.get(component.toUpperCase());
+            } else {
+                route.children = [cloneDeep(route)];
+                route.component = LAYOUT;
+                route.name = `${route.name}Parent`;
+                route.path = '';
+                const meta = route.meta || {};
+                meta.single = true;
+                meta.affix = false;
+                route.meta = meta;
+            }
+        } else {
+            warn('请正确配置路由：' + route?.name + '的component属性');
+        }
+        route.children && asyncImportRoute(route.children);
+    });
+    return routeList as unknown as T[];
+}
+
+/**
+ *  将多级路由转换为二级
+ */
+export function flatMultiLevelRoutes(routeModules: AppRouteModule[]) {
+    const modules: AppRouteModule[] = cloneDeep(routeModules);
+    for (let index = 0; index < modules.length; index++) {
+        const routeModule = modules[index];
+        if (!isMultipleRoute(routeModule)) {
+            continue;
+        }
+        promoteRouteLevel(routeModule);
+    }
+    return modules;
+}
+
+//提升路由级别
+function promoteRouteLevel(routeModule: AppRouteModule) {
+    // Use vue-router to splice menus
+    let router: Router | null = createRouter({
+        routes: [routeModule as unknown as RouteRecordNormalized],
+        history: createWebHashHistory(),
+    });
+
+    const routes = router.getRoutes();
+    addToChildren(routes, routeModule.children || [], routeModule);
+    router = null;
+
+    routeModule.children = routeModule.children?.map((item) => omit(item, 'children'));
+}
+
+// Add all sub-routes to the secondary route
+function addToChildren(routes: RouteRecordNormalized[], children: AppRouteRecordRaw[], routeModule: AppRouteModule) {
+    for (let index = 0; index < children.length; index++) {
+        const child = children[index];
+        const route = routes.find((item) => item.name === child.name);
+        if (!route) {
+            continue;
+        }
+        routeModule.children = routeModule.children || [];
+        if (!routeModule.children.find((item) => item.name === route.name)) {
+            routeModule.children?.push(route as unknown as AppRouteModule);
+        }
+        if (child.children?.length) {
+            addToChildren(routes, child.children, routeModule);
+        }
+    }
+}
+
+// Determine whether the level exceeds 2 levels
+function isMultipleRoute(routeModule: AppRouteModule) {
+    if (!routeModule || !Reflect.has(routeModule, 'children') || !routeModule.children?.length) {
+        return false;
+    }
+
+    const children = routeModule.children;
+
+    let flag = false;
+    for (let index = 0; index < children.length; index++) {
+        const child = children[index];
+        if (child.children?.length) {
+            flag = true;
+            break;
+        }
+    }
+    return flag;
+}
+/**
+ * 组件地址前加斜杠处理
+ * @updateBy:lsq
+ * @updateDate:2021-09-08
+ */
+export function addSlashToRouteComponent(routeList: AppRouteRecordRaw[]) {
+    routeList.forEach((route) => {
+        const component = route.component as string;
+        if (component) {
+            const layoutFound = LayoutMap.get(component);
+            if (!layoutFound) {
+                route.component = component.startsWith('/') ? component : `/${component}`;
+            }
+        }
+        route.children && addSlashToRouteComponent(route.children);
+    });
+    return routeList as unknown as T[];
+}

src/router/index.ts

@@ -0,0 +1,54 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
+import type { App } from 'vue';
+import { basicRoutes } from './routes';
+import { t } from '/@/hooks/web/useI18n';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+
+// 白名单应该包含基本静态路由
+const WHITE_NAME_LIST: string[] = [];
+const getRouteNames = (array: any[]) =>
+    array.forEach((item) => {
+        WHITE_NAME_LIST.push(item.name);
+        getRouteNames(item.children || []);
+    });
+getRouteNames(basicRoutes);
+
+// app router
+export const router = createRouter({
+    history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH),
+    routes: basicRoutes as unknown as RouteRecordRaw[],
+    strict: true,
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+});
+
+// router.beforeEach((to, from, next) => {
+//     if (to.path === '/login' || to.path === '/station/') {
+//         next();
+//     } else {
+//         const userStore = useUserStoreWithOut();
+//         if (userStore.getUserInfo.roleCodes && userStore.getUserInfo.roleCodes === 'medical_staff_role') {
+//             let url: string = window.location.href as string;
+//             url = url.replace('://', 'lol');
+//             url = (url.substring(0, url.indexOf('/')).replace('lol', '://') + '/station/') as string;
+//             window.location.replace(url);
+//         } else {
+//             next();
+//         }
+//     }
+// });
+
+// reset router
+export function resetRouter() {
+    router.getRoutes().forEach((route) => {
+        const { name } = route;
+        if (name && !WHITE_NAME_LIST.includes(name as string)) {
+            router.hasRoute(name) && router.removeRoute(name);
+        }
+    });
+}
+
+// config rout
+export function setupRouter(app: App<Element>) {
+    app.use(router);
+}

src/router/menus/index.ts

@@ -0,0 +1,139 @@
+import type { Menu, MenuModule } from '/@/router/types';
+import type { RouteRecordNormalized } from 'vue-router';
+
+import { useAppStoreWithOut } from '/@/store/modules/app';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper';
+import { filter } from '/@/utils/helper/treeHelper';
+import { isUrl } from '/@/utils/is';
+import { router } from '/@/router';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+import { pathToRegexp } from 'path-to-regexp';
+import { useUserStore } from '/@/store/modules/user';
+
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
+
+const menuModules: MenuModule[] = [];
+
+Object.keys(modules).forEach((key) => {
+    const mod = (modules as Recordable)[key].default || {};
+    const modList = Array.isArray(mod) ? [...mod] : [mod];
+    menuModules.push(...modList);
+});
+
+// ===========================
+// ==========Helper===========
+// ===========================
+
+const getPermissionMode = () => {
+    const appStore = useAppStoreWithOut();
+    return appStore.getProjectConfig.permissionMode;
+};
+const isBackMode = () => {
+    return getPermissionMode() === PermissionModeEnum.BACK;
+};
+
+const isRouteMappingMode = () => {
+    return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING;
+};
+
+const isRoleMode = () => {
+    return getPermissionMode() === PermissionModeEnum.ROLE;
+};
+
+const staticMenus: Menu[] = [];
+(() => {
+    menuModules.sort((a, b) => {
+        return (a.orderNo || 0) - (b.orderNo || 0);
+    });
+
+    for (const menu of menuModules) {
+        staticMenus.push(transformMenuModule(menu));
+    }
+})();
+
+async function getAsyncMenus() {
+    const permissionStore = usePermissionStore();
+    if (isBackMode()) {
+        return permissionStore.getBackMenuList.filter((item) => !item.meta?.hideMenu && !item.hideMenu);
+    }
+    if (isRouteMappingMode()) {
+        return permissionStore.getFrontMenuList.filter((item) => !item.hideMenu);
+    }
+    return staticMenus;
+}
+
+export const getMenus = async (): Promise<Menu[]> => {
+    const menus = await getAsyncMenus();
+    if (isRoleMode()) {
+        const routes = router.getRoutes();
+        return filter(menus, basicFilter(routes));
+    }
+    return menus;
+};
+
+export async function getCurrentParentPath(currentPath: string) {
+    const menus = await getAsyncMenus();
+    const allParentPath = await getAllParentPath(menus, currentPath);
+    return allParentPath?.[0];
+}
+
+// Get the level 1 menu, delete children
+export async function getShallowMenus(): Promise<Menu[]> {
+    const menus = await getAsyncMenus();
+    const shallowMenuList = menus.map((item) => ({ ...item, children: undefined }));
+    if (isRoleMode()) {
+        const routes = router.getRoutes();
+        return shallowMenuList.filter(basicFilter(routes));
+    }
+    return shallowMenuList;
+}
+
+// Get the children of the menu
+export async function getChildrenMenus(parentPath: string) {
+    const menus = await getMenus();
+    const parent = menus.find((item) => item.path === parentPath);
+    if (!parent || !parent.children || !!parent?.meta?.hideChildrenInMenu) {
+        return [] as Menu[];
+    }
+    if (isRoleMode()) {
+        const routes = router.getRoutes();
+        return filter(parent.children, basicFilter(routes));
+    }
+    // if (
+    //     parent.children.filter((item) => {
+    //         return useUserStore().getSpecialDownPath.indexOf(item.path) > -1;
+    //     }).length > 0 &&
+    //     useUserStore().getSpecialDownPath
+    // ) {
+    //     const child = parent.children.find((item) => useUserStore().getSpecialDownPath.indexOf(item.path) > -1);
+    //     if (!child || !child.children || !!child?.meta?.hideChildrenInMenu) {
+    //         return [] as Menu[];
+    //     }
+    //     return child?.children;
+    // }
+    return parent.children;
+}
+
+function basicFilter(routes: RouteRecordNormalized[]) {
+    return (menu: Menu) => {
+        const matchRoute = routes.find((route) => {
+            if (isUrl(menu.path)) return true;
+
+            if (route.meta?.carryParam) {
+                return pathToRegexp(route.path).test(menu.path);
+            }
+            const isSame = route.path === menu.path;
+            if (!isSame) return false;
+
+            if (route.meta?.ignoreAuth) return true;
+
+            return isSame || pathToRegexp(route.path).test(menu.path);
+        });
+
+        if (!matchRoute) return false;
+        menu.icon = (menu.icon || matchRoute.meta.icon) as string;
+        menu.meta = matchRoute.meta;
+        return true;
+    };
+}

src/router/routes/basic.ts

@@ -0,0 +1,73 @@
+import type { AppRouteRecordRaw } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+import { EXCEPTION_COMPONENT, LAYOUT, PAGE_NOT_FOUND_NAME, REDIRECT_NAME } from '/@/router/constant';
+
+// 404 on a page
+export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
+    path: '/:path(.*)*',
+    name: PAGE_NOT_FOUND_NAME,
+    component: LAYOUT,
+    meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true,
+        hideMenu: true,
+    },
+    children: [
+        {
+            path: '/:path(.*)*',
+            name: PAGE_NOT_FOUND_NAME.concat('_child'),
+            component: EXCEPTION_COMPONENT,
+            meta: {
+                title: 'ErrorPage',
+                hideBreadcrumb: true,
+                hideMenu: true,
+            },
+        },
+    ],
+};
+
+export const REDIRECT_ROUTE: AppRouteRecordRaw = {
+    path: '/redirect',
+    component: LAYOUT,
+    name: 'RedirectTo',
+    meta: {
+        title: REDIRECT_NAME,
+        hideBreadcrumb: true,
+        hideMenu: true,
+    },
+    children: [
+        {
+            path: '/redirect/:path(.*)',
+            name: REDIRECT_NAME,
+            component: () => import('/@/views/sys/redirect/index.vue'),
+            meta: {
+                title: REDIRECT_NAME,
+                hideBreadcrumb: true,
+            },
+        },
+    ],
+};
+
+export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
+    path: '/error-log',
+    name: 'ErrorLog',
+    component: LAYOUT,
+    redirect: '/error-log/list',
+    meta: {
+        title: 'ErrorLog',
+        hideBreadcrumb: true,
+        hideChildrenInMenu: true,
+    },
+    children: [
+        {
+            path: 'list',
+            name: 'ErrorLogList',
+            component: () => import('/@/views/sys/error-log/index.vue'),
+            meta: {
+                title: t('routes.basic.errorLogList'),
+                hideBreadcrumb: true,
+                currentActiveMenu: '/error-log',
+            },
+        },
+    ],
+};

src/router/routes/index.ts

@@ -0,0 +1,71 @@
+import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
+
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
+
+import { PageEnum } from '/@/enums/pageEnum';
+import { t } from '/@/hooks/web/useI18n';
+
+import { getEnvInfo } from '/@/utils/getEnv';
+
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
+
+const routeModuleList: AppRouteModule[] = [];
+
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+    const mod = (modules as Recordable)[key].default || {};
+    const modList = Array.isArray(mod) ? [...mod] : [mod];
+    routeModuleList.push(...modList);
+});
+
+export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
+
+export const RootRoute: AppRouteRecordRaw = {
+    path: '/',
+    name: 'Root',
+    redirect: PageEnum.BASE_HOME,
+    meta: {
+        title: 'Root',
+    },
+};
+const res = getEnvInfo(import.meta.env);
+export const LoginRoute: AppRouteRecordRaw = {
+    path: '/login',
+    name: 'Login',
+    //新版后台登录，如果想要使用旧版登录放开即可
+    // component: () => import('/@/views/sys/login/Login.vue'),
+    component: () =>
+        res.VITE_PLATFORM == 'JD' ? import('/@/views/system/loginmini/MiniLoginJD.vue') : import('/@/views/system/loginmini/MiniLogin.vue'),
+    meta: {
+        title: t('routes.basic.login'),
+    },
+};
+
+//update-begin---author:wangshuai ---date:20220629  for：auth2登录页面路由------------
+export const Oauth2LoginRoute: AppRouteRecordRaw = {
+    path: '/oauth2-app/login',
+    name: 'oauth2-app-login',
+    //新版钉钉免登录，如果想要使用旧版放开即可
+    // component: () => import('/@/views/sys/login/OAuth2Login.vue'),
+    component: () => import('/@/views/system/loginmini/OAuth2Login.vue'),
+    meta: {
+        title: t('routes.oauth2.login'),
+    },
+};
+//update-end---author:wangshuai ---date:20220629  for：auth2登录页面路由------------
+
+/**
+ * 【通过token直接静默登录】流程办理登录页面 中转跳转
+ */
+export const TokenLoginRoute: AppRouteRecordRaw = {
+    path: '/tokenLogin',
+    name: 'TokenLoginRoute',
+    component: () => import('/@/views/sys/login/TokenLoginPage.vue'),
+    meta: {
+        title: '带token登录页面',
+        ignoreAuth: true,
+    },
+};
+
+// Basic routing without permission
+export const basicRoutes = [LoginRoute, RootRoute, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute];

src/router/routes/modules/about.ts

@@ -0,0 +1,31 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const dashboard: AppRouteModule = {
+    path: '/about',
+    name: 'About',
+    component: LAYOUT,
+    redirect: '/about/index',
+    meta: {
+        hideChildrenInMenu: true,
+        icon: 'simple-icons:about-dot-me',
+        title: t('routes.dashboard.about'),
+        orderNo: 100000,
+    },
+    children: [
+        {
+            path: 'index',
+            name: 'AboutPage',
+            component: () => import('/@/views/sys/about/index.vue'),
+            meta: {
+                title: t('routes.dashboard.about'),
+                icon: 'simple-icons:about-dot-me',
+                hideMenu: true,
+            },
+        },
+    ],
+};
+
+export default dashboard;

src/router/routes/modules/dashboard.ts

@@ -0,0 +1,37 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const dashboard: AppRouteModule = {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: LAYOUT,
+    redirect: '/dashboard/analysis',
+    meta: {
+        orderNo: 10,
+        icon: 'ion:grid-outline',
+        title: t('routes.dashboard.dashboard'),
+    },
+    children: [
+        {
+            path: 'analysis',
+            name: 'Analysis',
+            component: () => import('/@/views/dashboard/Analysis/index.vue'),
+            meta: {
+                // affix: true,
+                title: t('routes.dashboard.analysis'),
+            },
+        },
+        {
+            path: 'workbench',
+            name: 'Workbench',
+            component: () => import('/@/views/dashboard/workbench/index.vue'),
+            meta: {
+                title: t('routes.dashboard.workbench'),
+            },
+        },
+    ],
+};
+
+export default dashboard;

src/router/types.ts

@@ -0,0 +1,58 @@
+import type { RouteRecordRaw, RouteMeta } from 'vue-router';
+import { RoleEnum } from '/@/enums/roleEnum';
+import { defineComponent } from 'vue';
+
+export type Component<T extends any = any> = ReturnType<typeof defineComponent> | (() => Promise<typeof import('*.vue')>) | (() => Promise<T>);
+
+// @ts-ignore
+export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+    name: string;
+    meta: RouteMeta;
+    component?: Component | string;
+    components?: Component;
+    children?: AppRouteRecordRaw[];
+    props?: Recordable;
+    fullPath?: string;
+    alwaysShow?: boolean;
+}
+
+export interface MenuTag {
+    type?: 'primary' | 'error' | 'warn' | 'success';
+    content?: string;
+    dot?: boolean;
+}
+
+export interface Menu {
+    name: string;
+
+    icon?: string;
+
+    path: string;
+
+    // path contains param, auto assignment.
+    paramPath?: string;
+
+    disabled?: boolean;
+
+    children?: Menu[];
+
+    orderNo?: number;
+
+    roles?: RoleEnum[];
+
+    meta?: Partial<RouteMeta>;
+
+    tag?: MenuTag;
+
+    hideMenu?: boolean;
+
+    alwaysShow?: boolean;
+}
+
+export interface MenuModule {
+    orderNo?: number;
+    menu: Menu;
+}
+
+// export type AppRouteModule = RouteModule | AppRouteRecordRaw;
+export type AppRouteModule = AppRouteRecordRaw;