Skip to content

B
basic-vue-admin
提交 e12c588c 作者: Vben
操作

refactor(route): refactoring the routing multi-layer model close #215

上级 37320160
正在显示 包含 275 行增加 和 345 行删除
.eslintrc.js
...@@ -38,15 +38,15 @@ module.exports = { ...@@ -38,15 +38,15 @@ module.exports = {
'@typescript-eslint/no-unused-vars': [ '@typescript-eslint/no-unused-vars': [
'error', 'error',
{ {
argsIgnorePattern: '^h$', argsIgnorePattern: '^_',
varsIgnorePattern: '^h$', varsIgnorePattern: '^_',
}, },
], ],
'no-unused-vars': [ 'no-unused-vars': [
'error', 'error',
{ {
argsIgnorePattern: '^h$', argsIgnorePattern: '^_',
varsIgnorePattern: '^h$', varsIgnorePattern: '^_',
}, },
], ],
'space-before-function-paren': 'off', 'space-before-function-paren': 'off',
......
.vscode/settings.json
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
"explorer.openEditors.visible": 0, "explorer.openEditors.visible": 0,
"editor.tabSize": 2, "editor.tabSize": 2,
"editor.renderControlCharacters": true, "editor.renderControlCharacters": true,
"window.zoomLevel": -1,
"editor.minimap.renderCharacters": false, "editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 300, "editor.minimap.maxColumn": 300,
"editor.minimap.showSlider": "always", "editor.minimap.showSlider": "always",
......
CHANGELOG.zh_CN.md
## Wip
### ✨ Refactor
- 重构路由多层模式,解决嵌套 keepalive 执行多次问题
## 2.1.0 (2021-03-15) ## 2.1.0 (2021-03-15)
### ✨ Features ### ✨ Features
......
build/vite/plugin/hmr.ts 0 → 100644
import type { Plugin } from 'vite';
/**
* TODO
* Temporarily solve the Vite circular dependency problem, and wait for a better solution to fix it later. I don't know what problems this writing will bring.
* @returns
*/
export function configHmrPlugin(): Plugin {
return {
name: 'singleHMR',
handleHotUpdate({ modules, file }) {
if (file.match(/xml$/)) return [];
modules.forEach((m) => {
m.importedModules = new Set();
m.importers = new Set();
});
return modules;
},
};
}
build/vite/plugin/index.ts
...@@ -17,6 +17,7 @@ import { configThemePlugin } from './theme'; ...@@ -17,6 +17,7 @@ import { configThemePlugin } from './theme';
import { configImageminPlugin } from './imagemin'; import { configImageminPlugin } from './imagemin';
import { configWindiCssPlugin } from './windicss'; import { configWindiCssPlugin } from './windicss';
import { configSvgIconsPlugin } from './svgSprite'; import { configSvgIconsPlugin } from './svgSprite';
import { configHmrPlugin } from './hmr';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv; const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;
...@@ -28,6 +29,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { ...@@ -28,6 +29,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
vueJsx(), vueJsx(),
]; ];
// TODO
!isBuild && vitePlugins.push(configHmrPlugin());
// @vitejs/plugin-legacy // @vitejs/plugin-legacy
VITE_LEGACY && isBuild && vitePlugins.push(legacy()); VITE_LEGACY && isBuild && vitePlugins.push(legacy());
......
src/layouts/default/header/components/Breadcrumb.vue
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
import { useGo } from '/@/hooks/web/usePage'; import { useGo } from '/@/hooks/web/usePage';
import { isString } from '/@/utils/is'; import { isString } from '/@/utils/is';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { getMenus } from '/@/router/menus';
export default defineComponent({ export default defineComponent({
name: 'LayoutBreadcrumb', name: 'LayoutBreadcrumb',
...@@ -47,7 +48,7 @@ ...@@ -47,7 +48,7 @@
const { getShowBreadCrumbIcon } = useRootSetting(); const { getShowBreadCrumbIcon } = useRootSetting();
const { t } = useI18n(); const { t } = useI18n();
watchEffect(() => { watchEffect(async () => {
if (currentRoute.value.name === REDIRECT_NAME) return; if (currentRoute.value.name === REDIRECT_NAME) return;
const matched = currentRoute.value?.matched; const matched = currentRoute.value?.matched;
......
src/layouts/page/ParentView.vue deleted 100644 → 0
<!--
* @Description: The reason is that tsx will report warnings under multi-level nesting.
-->
<template>
<div>
<RouterView>
<template #default="{ Component, route }">
<transition
:name="
getTransitionName({
route,
openCache: openCache,
enableTransition: getEnableTransition,
cacheTabs: getCaches,
def: getBasicTransition,
})
"
mode="out-in"
appear
>
<keep-alive v-if="openCache" :include="getCaches">
<component :is="Component" v-bind="getKey(Component, route)" />
</keep-alive>
<component v-else :is="Component" v-bind="getKey(Component, route)" />
</transition>
</template>
</RouterView>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, unref } from 'vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useCache, getKey } from './useCache';
import { getTransitionName } from './transition';
export default defineComponent({
parentView: true,
setup() {
const { getCaches } = useCache(false);
const { getShowMultipleTab } = useMultipleTabSetting();
const { getOpenKeepAlive } = useRootSetting();
const { getBasicTransition, getEnableTransition } = useTransitionSetting();
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
return {
getCaches,
getBasicTransition,
openCache,
getEnableTransition,
getTransitionName,
getKey,
};
},
});
</script>
src/layouts/page/index.vue
...@@ -16,9 +16,9 @@ ...@@ -16,9 +16,9 @@
appear appear
> >
<keep-alive v-if="openCache" :include="getCaches"> <keep-alive v-if="openCache" :include="getCaches">
<component :is="Component" v-bind="getKey(Component, route)" /> <component :is="Component" :key="route.fullPath" />
</keep-alive> </keep-alive>
<component v-else :is="Component" v-bind="getKey(Component, route)" /> <component v-else :is="Component" :key="route.fullPath" />
</transition> </transition>
</template> </template>
</RouterView> </RouterView>
...@@ -34,15 +34,15 @@ ...@@ -34,15 +34,15 @@
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting'; import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useCache, getKey } from './useCache';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { getTransitionName } from './transition'; import { getTransitionName } from './transition';
import { useStore } from 'vuex';
export default defineComponent({ export default defineComponent({
name: 'PageLayout', name: 'PageLayout',
components: { FrameLayout }, components: { FrameLayout },
setup() { setup() {
const { getCaches } = useCache(true);
const { getShowMultipleTab } = useMultipleTabSetting(); const { getShowMultipleTab } = useMultipleTabSetting();
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting(); const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
...@@ -51,6 +51,17 @@ ...@@ -51,6 +51,17 @@
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab)); const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
const { getters } = useStore();
const getCaches = computed((): string[] => {
if (!unref(getOpenKeepAlive)) {
return [];
}
// TODO The useStore is used here mainly to solve the problem of circular dependency hot update
const cacheTabs = getters['app-tab/getCachedTabsState'];
return cacheTabs;
});
return { return {
getTransitionName, getTransitionName,
openCache, openCache,
...@@ -58,7 +69,6 @@ ...@@ -58,7 +69,6 @@
getBasicTransition, getBasicTransition,
getCaches, getCaches,
getCanEmbedIFramePage, getCanEmbedIFramePage,
getKey,
}; };
}, },
}); });
......
src/layouts/page/useCache.ts deleted 100644 → 0
import type { FunctionalComponent } from 'vue';
import type { RouteLocation } from 'vue-router';
import { computed, ref, unref, getCurrentInstance } from 'vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const ParentLayoutName = 'ParentLayout';
const PAGE_LAYOUT_KEY = '__PAGE_LAYOUT__';
export function getKey(component: FunctionalComponent & { type: Indexable }, route: RouteLocation) {
return !!component?.type.parentView ? {} : { key: route.fullPath };
}
export function useCache(isPage: boolean) {
const { getters } = useStore();
const name = ref('');
const { currentRoute } = useRouter();
const instance = getCurrentInstance();
const routeName = instance?.type.name;
if (routeName && ![ParentLayoutName].includes(routeName)) {
name.value = routeName;
} else {
const matched = currentRoute.value?.matched;
if (!matched) {
return;
}
const len = matched.length;
if (len < 2) return;
name.value = matched[len - 2].name as string;
}
const { getOpenKeepAlive } = useRootSetting();
const getCaches = computed((): string[] => {
if (!unref(getOpenKeepAlive)) {
return [];
}
const cached = getters['app-tab/getCachedMapState'];
if (isPage) {
// page Layout
return cached.get(PAGE_LAYOUT_KEY) || [];
}
const cacheSet = new Set<string>();
cacheSet.add(unref(name));
const list = cached.get(unref(name));
if (!list) {
return Array.from(cacheSet);
}
list.forEach((item) => {
cacheSet.add(item);
});
return Array.from(cacheSet);
});
return { getCaches };
}
src/logics/mitt/tabChange.ts
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
import Mitt from '/@/utils/mitt'; import Mitt from '/@/utils/mitt';
import type { RouteLocationNormalized } from 'vue-router'; import type { RouteLocationNormalized } from 'vue-router';
import { getRoute } from '/@/router/helper/routeHelper'; import { getRawRoute } from '/@/utils';
const mitt = new Mitt(); const mitt = new Mitt();
...@@ -13,7 +13,7 @@ const key = Symbol(); ...@@ -13,7 +13,7 @@ const key = Symbol();
let lastChangeTab: RouteLocationNormalized; let lastChangeTab: RouteLocationNormalized;
export function setLastChangeTab(lastChangeRoute: RouteLocationNormalized) { export function setLastChangeTab(lastChangeRoute: RouteLocationNormalized) {
const r = getRoute(lastChangeRoute); const r = getRawRoute(lastChangeRoute);
mitt.emit(key, r); mitt.emit(key, r);
lastChangeTab = r; lastChangeTab = r;
} }
......
src/router/constant.ts
import type { AppRouteRecordRaw } from '/@/router/types';
import ParentLayout from '/@/layouts/page/ParentView.vue';
import { t } from '/@/hooks/web/useI18n';
export const REDIRECT_NAME = 'Redirect'; export const REDIRECT_NAME = 'Redirect';
export const PARENT_LAYOUT_NAME = 'ParentLayout';
export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue'); export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');
/** /**
...@@ -12,78 +10,23 @@ export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exceptio ...@@ -12,78 +10,23 @@ export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exceptio
export const LAYOUT = () => import('/@/layouts/default/index.vue'); export const LAYOUT = () => import('/@/layouts/default/index.vue');
/** /**
* @description: page-layout * @description: parent-layout
*/ */
export const getParentLayout = (name: string) => { export const getParentLayout = (_name?: string) => {
return () => return () =>
new Promise((resolve) => { new Promise((resolve) => {
resolve({ resolve({
...ParentLayout, name: PARENT_LAYOUT_NAME,
name,
}); });
}); });
}; };
// 404 on a page // export const getParentLayout = (name: string) => {
export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = { // return () =>
path: '/:path(.*)*', // new Promise((resolve) => {
name: 'ErrorPage', // resolve({
component: LAYOUT, // ...ParentLayout,
meta: { // name,
title: 'ErrorPage', // });
hideBreadcrumb: true, // });
}, // };
children: [
{
path: '/:path(.*)*',
name: 'ErrorPage',
component: EXCEPTION_COMPONENT,
meta: {
title: 'ErrorPage',
hideBreadcrumb: true,
},
},
],
};
export const REDIRECT_ROUTE: AppRouteRecordRaw = {
path: '/redirect',
name: REDIRECT_NAME,
component: LAYOUT,
meta: {
title: REDIRECT_NAME,
hideBreadcrumb: 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,
meta: {
title: 'ErrorLog',
hideBreadcrumb: true,
},
children: [
{
path: 'list',
name: 'errorLogList',
component: () => import('/@/views/sys/error-log/index.vue'),
meta: {
title: t('routes.basic.errorLogList'),
hideBreadcrumb: true,
},
},
],
};
src/router/guard/permissionGuard.ts
...@@ -5,7 +5,7 @@ import { permissionStore } from '/@/store/modules/permission'; ...@@ -5,7 +5,7 @@ import { permissionStore } from '/@/store/modules/permission';
import { PageEnum } from '/@/enums/pageEnum'; import { PageEnum } from '/@/enums/pageEnum';
import { userStore } from '/@/store/modules/user'; import { userStore } from '/@/store/modules/user';
import { PAGE_NOT_FOUND_ROUTE } from '/@/router/constant'; import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
const LOGIN_PATH = PageEnum.BASE_LOGIN; const LOGIN_PATH = PageEnum.BASE_LOGIN;
......
src/router/helper/menuHelper.ts
import { AppRouteModule } from '/@/router/types'; import { AppRouteModule } from '/@/router/types';
import type { MenuModule, Menu, AppRouteRecordRaw } from '/@/router/types'; import type { MenuModule, Menu, AppRouteRecordRaw } from '/@/router/types';
import { findPath, forEach, treeMap } from '/@/utils/helper/treeHelper'; import { findPath, treeMap } from '/@/utils/helper/treeHelper';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { isUrl } from '/@/utils/is'; import { isUrl } from '/@/utils/is';
export function getAllParentPath(treeData: any[], path: string) { export function getAllParentPath<T = Recordable>(treeData: T[], path: string) {
const menuList = findPath(treeData, (n) => n.path === path) as Menu[]; const menuList = findPath(treeData, (n) => n.path === path) as Menu[];
return (menuList || []).map((item) => item.path); return (menuList || []).map((item) => item.path);
} }
// 拼接父级路径 function joinParentPath(menus: Menu[], parentPath = '') {
function joinParentPath(list: any, node: any) { for (let index = 0; index < menus.length; index++) {
let allPaths = getAllParentPath(list, node.path); const menu = menus[index];
const p = menu.path.startsWith('/') ? menu.path : `/${menu.path}`;
allPaths = allPaths.slice(0, allPaths.length - 1); const parent = isUrl(menu.path) ? menu.path : `${parentPath}${p}`;
let parentPath = ''; menus[index].path = parent;
if (Array.isArray(allPaths) && allPaths.length >= 2) { if (menu?.children?.length) {
parentPath = allPaths[allPaths.length - 1]; joinParentPath(menu.children, parent);
} else { }
allPaths.forEach((p) => {
parentPath += /^\//.test(p) ? p : `/${p}`;
});
} }
node.path = `${/^\//.test(node.path) ? node.path : `${parentPath}/${node.path}`}`.replace(
/\/\//g,
'/'
);
return node;
} }
// 解析菜单模块 // Parsing the menu module
export function transformMenuModule(menuModule: MenuModule): Menu { export function transformMenuModule(menuModule: MenuModule): Menu {
const { menu } = menuModule; const { menu } = menuModule;
const menuList = [menu]; const menuList = [menu];
forEach(menuList, (m) => {
!isUrl(m.path) && joinParentPath(menuList, m);
});
joinParentPath(menuList);
return menuList[0]; return menuList[0];
} }
...@@ -54,17 +44,16 @@ export function transformRouteToMenu(routeModList: AppRouteModule[]) { ...@@ -54,17 +44,16 @@ export function transformRouteToMenu(routeModList: AppRouteModule[]) {
routeList.push(item); routeList.push(item);
} }
}); });
return treeMap(routeList, { const list = treeMap(routeList, {
conversion: (node: AppRouteRecordRaw) => { conversion: (node: AppRouteRecordRaw) => {
const { meta: { title, icon, hideMenu = false } = {} } = node; const { meta: { title, hideMenu = false } = {} } = node;
!isUrl(node.path) && joinParentPath(routeList, node);
return { return {
...(node.meta || {}),
name: title, name: title,
icon,
path: node.path,
hideMenu, hideMenu,
}; };
}, },
}); });
joinParentPath(list);
return list;
} }
src/router/helper/routeHelper.ts
import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types'; import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router'; import type { Router, RouteRecordNormalized } from 'vue-router';
import { getParentLayout, LAYOUT } from '/@/router/constant'; import { getParentLayout, LAYOUT } from '/@/router/constant';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { warn } from '/@/utils/log'; import { warn } from '/@/utils/log';
import { createRouter, createWebHashHistory } from 'vue-router';
export type LayoutMapKey = 'LAYOUT'; export type LayoutMapKey = 'LAYOUT';
const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>(); const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>();
let dynamicViewsModules: Record< let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
string,
() => Promise<{
[key: string]: any;
}>
>;
// 动态引入 // Dynamic introduction
function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) { function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}'); dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
if (!routes) return; if (!routes) return;
...@@ -26,19 +22,14 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) { ...@@ -26,19 +22,14 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
if (component) { if (component) {
item.component = dynamicImport(dynamicViewsModules, component as string); item.component = dynamicImport(dynamicViewsModules, component as string);
} else if (name) { } else if (name) {
item.component = getParentLayout(name); item.component = getParentLayout();
} }
children && asyncImportRoute(children); children && asyncImportRoute(children);
}); });
} }
function dynamicImport( function dynamicImport(
dynamicViewsModules: Record< dynamicViewsModules: Record<string, () => Promise<Recordable>>,
string,
() => Promise<{
[key: string]: any;
}>
>,
component: string component: string
) { ) {
const keys = Object.keys(dynamicViewsModules); const keys = Object.keys(dynamicViewsModules);
...@@ -84,18 +75,69 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul ...@@ -84,18 +75,69 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul
return (routeList as unknown) as T[]; return (routeList as unknown) as T[];
} }
// Return to the new routing structure, not affected by the original example /**
export function getRoute(route: RouteLocationNormalized): RouteLocationNormalized { * Convert multi-level routing to level 2 routing
if (!route) return route; */
const { matched, ...opt } = route; export function flatRoutes(routeModules: AppRouteModule[]) {
return { for (let index = 0; index < routeModules.length; index++) {
...opt, const routeModule = routeModules[index];
matched: (matched if (!isMultipleRoute(routeModule)) {
? matched.map((item) => ({ continue;
meta: item.meta, }
name: item.name, promoteRouteLevel(routeModule);
path: item.path, }
})) }
: undefined) as RouteRecordNormalized[],
}; // Routing level upgrade
function promoteRouteLevel(routeModule: AppRouteModule) {
// Use vue-router to splice menus
let router: Router | null = createRouter({
routes: [routeModule as any],
history: createWebHashHistory(),
});
const routes = router.getRoutes();
const children = cloneDeep(routeModule.children);
addToChildren(routes, children || [], routeModule);
router = null;
routeModule.children = routeModule.children?.filter((item) => !item.children?.length);
}
// 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) {
routeModule.children = routeModule.children || [];
routeModule.children?.push(route as any);
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;
} }
src/router/menus/index.ts
...@@ -5,6 +5,7 @@ import { appStore } from '/@/store/modules/app'; ...@@ -5,6 +5,7 @@ import { appStore } from '/@/store/modules/app';
import { permissionStore } from '/@/store/modules/permission'; import { permissionStore } from '/@/store/modules/permission';
import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper'; import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper';
import { filter } from '/@/utils/helper/treeHelper'; import { filter } from '/@/utils/helper/treeHelper';
import { isUrl } from '/@/utils/is';
import router from '/@/router'; import router from '/@/router';
import { PermissionModeEnum } from '/@/enums/appEnum'; import { PermissionModeEnum } from '/@/enums/appEnum';
import { pathToRegexp } from 'path-to-regexp'; import { pathToRegexp } from 'path-to-regexp';
...@@ -19,8 +20,6 @@ Object.keys(modules).forEach((key) => { ...@@ -19,8 +20,6 @@ Object.keys(modules).forEach((key) => {
menuModules.push(...modList); menuModules.push(...modList);
}); });
const reg = /(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
// =========================== // ===========================
// ==========Helper=========== // ==========Helper===========
// =========================== // ===========================
...@@ -40,18 +39,15 @@ const staticMenus: Menu[] = []; ...@@ -40,18 +39,15 @@ const staticMenus: Menu[] = [];
})(); })();
async function getAsyncMenus() { async function getAsyncMenus() {
// 前端角色控制菜单 直接取菜单文件
return !isBackMode() ? staticMenus : permissionStore.getBackMenuListState; return !isBackMode() ? staticMenus : permissionStore.getBackMenuListState;
} }
// 获取菜单 树级
export const getMenus = async (): Promise<Menu[]> => { export const getMenus = async (): Promise<Menu[]> => {
const menus = await getAsyncMenus(); const menus = await getAsyncMenus();
const routes = router.getRoutes(); const routes = router.getRoutes();
return !isBackMode() ? filter(menus, basicFilter(routes)) : menus; return !isBackMode() ? filter(menus, basicFilter(routes)) : menus;
}; };
// 获取当前路径的顶级路径
export async function getCurrentParentPath(currentPath: string) { export async function getCurrentParentPath(currentPath: string) {
const menus = await getAsyncMenus(); const menus = await getAsyncMenus();
...@@ -60,7 +56,7 @@ export async function getCurrentParentPath(currentPath: string) { ...@@ -60,7 +56,7 @@ export async function getCurrentParentPath(currentPath: string) {
return allParentPath?.[0]; return allParentPath?.[0];
} }
// 获取1级菜单，删除children // Get the level 1 menu, delete children
export async function getShallowMenus(): Promise<Menu[]> { export async function getShallowMenus(): Promise<Menu[]> {
const menus = await getAsyncMenus(); const menus = await getAsyncMenus();
const routes = router.getRoutes(); const routes = router.getRoutes();
...@@ -68,7 +64,7 @@ export async function getShallowMenus(): Promise<Menu[]> { ...@@ -68,7 +64,7 @@ export async function getShallowMenus(): Promise<Menu[]> {
return !isBackMode() ? shallowMenuList.filter(basicFilter(routes)) : shallowMenuList; return !isBackMode() ? shallowMenuList.filter(basicFilter(routes)) : shallowMenuList;
} }
// 获取菜单的children // Get the children of the menu
export async function getChildrenMenus(parentPath: string) { export async function getChildrenMenus(parentPath: string) {
const menus = await getAsyncMenus(); const menus = await getAsyncMenus();
const parent = menus.find((item) => item.path === parentPath); const parent = menus.find((item) => item.path === parentPath);
...@@ -78,14 +74,10 @@ export async function getChildrenMenus(parentPath: string) { ...@@ -78,14 +74,10 @@ export async function getChildrenMenus(parentPath: string) {
return !isBackMode() ? filter(parent.children, basicFilter(routes)) : parent.children; return !isBackMode() ? filter(parent.children, basicFilter(routes)) : parent.children;
} }
// 通用过滤方法
function basicFilter(routes: RouteRecordNormalized[]) { function basicFilter(routes: RouteRecordNormalized[]) {
return (menu: Menu) => { return (menu: Menu) => {
const matchRoute = routes.find((route) => { const matchRoute = routes.find((route) => {
const match = route.path.match(reg)?.[0]; if (isUrl(menu.path)) return true;
if (match && match === menu.path) {
return true;
}
if (route.meta?.carryParam) { if (route.meta?.carryParam) {
return pathToRegexp(route.path).test(menu.path); return pathToRegexp(route.path).test(menu.path);
......
src/router/routes/basic.ts 0 → 100644
import type { AppRouteRecordRaw } from '/@/router/types';
import { t } from '/@/hooks/web/useI18n';
import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
// 404 on a page
export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
path: '/:path(.*)*',
name: 'ErrorPage',
component: LAYOUT,
meta: {
title: 'ErrorPage',
hideBreadcrumb: true,
},
children: [
{
path: '/:path(.*)*',
name: 'ErrorPage',
component: EXCEPTION_COMPONENT,
meta: {
title: 'ErrorPage',
hideBreadcrumb: true,
},
},
],
};
export const REDIRECT_ROUTE: AppRouteRecordRaw = {
path: '/redirect',
name: REDIRECT_NAME,
component: LAYOUT,
meta: {
title: REDIRECT_NAME,
hideBreadcrumb: 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,
meta: {
title: 'ErrorLog',
hideBreadcrumb: true,
},
children: [
{
path: 'list',
name: 'errorLogList',
component: () => import('/@/views/sys/error-log/index.vue'),
meta: {
title: t('routes.basic.errorLogList'),
hideBreadcrumb: true,
},
},
],
};
src/router/routes/index.ts
import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types'; import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '../constant'; import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
import { mainOutRoutes } from './mainOut'; import { mainOutRoutes } from './mainOut';
import { PageEnum } from '/@/enums/pageEnum'; import { PageEnum } from '/@/enums/pageEnum';
import { t } from '/@/hooks/web/useI18n'; import { t } from '/@/hooks/web/useI18n';
import { flatRoutes } from '/@/router/helper/routeHelper';
const modules = import.meta.globEager('./modules/**/*.ts'); const modules = import.meta.globEager('./modules/**/*.ts');
...@@ -16,6 +17,9 @@ Object.keys(modules).forEach((key) => { ...@@ -16,6 +17,9 @@ Object.keys(modules).forEach((key) => {
routeModuleList.push(...modList); routeModuleList.push(...modList);
}); });
// Multi-level routing conversion
flatRoutes(routeModuleList);
export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList]; export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
export const RootRoute: AppRouteRecordRaw = { export const RootRoute: AppRouteRecordRaw = {
......
src/store/modules/permission.ts
...@@ -14,12 +14,12 @@ import { filter } from '/@/utils/helper/treeHelper'; ...@@ -14,12 +14,12 @@ import { filter } from '/@/utils/helper/treeHelper';
import { toRaw } from 'vue'; import { toRaw } from 'vue';
import { getMenuListById } from '/@/api/sys/menu'; import { getMenuListById } from '/@/api/sys/menu';
import { transformObjToRoute } from '/@/router/helper/routeHelper'; import { transformObjToRoute, flatRoutes } from '/@/router/helper/routeHelper';
import { transformRouteToMenu } from '/@/router/helper/menuHelper'; import { transformRouteToMenu } from '/@/router/helper/menuHelper';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/constant'; import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const NAME = 'app-permission'; const NAME = 'app-permission';
...@@ -113,11 +113,12 @@ class Permission extends VuexModule { ...@@ -113,11 +113,12 @@ class Permission extends VuexModule {
// Dynamically introduce components // Dynamically introduce components
routeList = transformObjToRoute(routeList); routeList = transformObjToRoute(routeList);
// Background routing to menu structure // Background routing to menu structure
const backMenuList = transformRouteToMenu(routeList); const backMenuList = transformRouteToMenu(routeList);
this.commitBackMenuListState(backMenuList); this.commitBackMenuListState(backMenuList);
flatRoutes(routeList);
routes = [PAGE_NOT_FOUND_ROUTE, ...routeList]; routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
} }
routes.push(ERROR_LOG_ROUTE); routes.push(ERROR_LOG_ROUTE);
......
src/store/modules/tab.ts
...@@ -8,8 +8,8 @@ import { PageEnum } from '/@/enums/pageEnum'; ...@@ -8,8 +8,8 @@ import { PageEnum } from '/@/enums/pageEnum';
import store from '/@/store'; import store from '/@/store';
import router from '/@/router'; import router from '/@/router';
import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/constant'; import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
import { getRoute } from '/@/router/helper/routeHelper'; import { getRawRoute } from '/@/utils';
import { useGo, useRedo } from '/@/hooks/web/usePage'; import { useGo, useRedo } from '/@/hooks/web/usePage';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
...@@ -18,8 +18,6 @@ const NAME = 'app-tab'; ...@@ -18,8 +18,6 @@ const NAME = 'app-tab';
hotModuleUnregisterModule(NAME); hotModuleUnregisterModule(NAME);
export const PAGE_LAYOUT_KEY = '__PAGE_LAYOUT__';
function isGotoPage() { function isGotoPage() {
const go = useGo(); const go = useGo();
go(unref(router.currentRoute).path, true); go(unref(router.currentRoute).path, true);
...@@ -27,7 +25,7 @@ function isGotoPage() { ...@@ -27,7 +25,7 @@ function isGotoPage() {
@Module({ namespaced: true, name: NAME, dynamic: true, store }) @Module({ namespaced: true, name: NAME, dynamic: true, store })
class Tab extends VuexModule { class Tab extends VuexModule {
cachedMapState = new Map<string, string[]>(); cachedTabsState: Set<string> = new Set();
// tab list // tab list
tabsState: RouteLocationNormalized[] = []; tabsState: RouteLocationNormalized[] = [];
...@@ -43,8 +41,8 @@ class Tab extends VuexModule { ...@@ -43,8 +41,8 @@ class Tab extends VuexModule {
return this.tabsState.find((item) => item.path === route.path)!; return this.tabsState.find((item) => item.path === route.path)!;
} }
get getCachedMapState(): Map<string, string[]> { get getCachedTabsState(): string[] {
return this.cachedMapState; return Array.from(this.cachedTabsState);
} }
get getLastDragEndIndexState(): number { get getLastDragEndIndexState(): number {
...@@ -53,7 +51,7 @@ class Tab extends VuexModule { ...@@ -53,7 +51,7 @@ class Tab extends VuexModule {
@Mutation @Mutation
commitClearCache(): void { commitClearCache(): void {
this.cachedMapState = new Map(); this.cachedTabsState = new Set();
} }
@Mutation @Mutation
...@@ -77,46 +75,16 @@ class Tab extends VuexModule { ...@@ -77,46 +75,16 @@ class Tab extends VuexModule {
@Mutation @Mutation
commitCachedMapState(): void { commitCachedMapState(): void {
const cacheMap = new Map<string, string[]>(); const cacheMap: Set<string> = new Set();
const pageCacheSet = new Set<string>();
this.tabsState.forEach((tab) => { this.tabsState.forEach((tab) => {
const item = getRoute(tab); const item = getRawRoute(tab);
const needCache = !item.meta?.ignoreKeepAlive; const needCache = !item.meta?.ignoreKeepAlive;
if (!needCache) return; if (!needCache) return;
const name = item.name as string;
if (item.meta?.affix) { cacheMap.add(name);
const name = item.name as string;
pageCacheSet.add(name);
} else if (item?.matched && needCache) {
const matched = item?.matched;
if (!matched) return;
const len = matched.length;
if (len < 2) return;
for (let i = 0; i < matched.length; i++) {
const key = matched[i].name as string;
if (i < 2) {
pageCacheSet.add(key);
}
if (i < len - 1) {
const { meta, name } = matched[i + 1];
if (meta && (meta.affix || needCache)) {
const mapList = cacheMap.get(key) || [];
if (!mapList.includes(name as string)) {
mapList.push(name as string);
}
cacheMap.set(key, mapList);
}
}
}
}
}); });
this.cachedTabsState = cacheMap;
cacheMap.set(PAGE_LAYOUT_KEY, Array.from(pageCacheSet));
this.cachedMapState = cacheMap;
} }
@Mutation @Mutation
...@@ -162,7 +130,7 @@ class Tab extends VuexModule { ...@@ -162,7 +130,7 @@ class Tab extends VuexModule {
@Mutation @Mutation
commitResetState(): void { commitResetState(): void {
this.tabsState = []; this.tabsState = [];
this.cachedMapState = new Map(); this.cachedTabsState = new Set();
} }
@Mutation @Mutation
...@@ -190,7 +158,7 @@ class Tab extends VuexModule { ...@@ -190,7 +158,7 @@ class Tab extends VuexModule {
) { ) {
return; return;
} }
this.commitTabRoutesState(getRoute(route)); this.commitTabRoutesState(getRawRoute(route));
this.commitCachedMapState(); this.commitCachedMapState();
} }
...@@ -198,17 +166,12 @@ class Tab extends VuexModule { ...@@ -198,17 +166,12 @@ class Tab extends VuexModule {
@Mutation @Mutation
async commitRedoPage() { async commitRedoPage() {
const route = router.currentRoute.value; const route = router.currentRoute.value;
for (const [key, value] of this.cachedMapState) { const name = route.name;
const index = value.findIndex((item) => item === (route.name as string));
if (index === -1) { const findVal = Array.from(this.cachedTabsState).find((item) => item === name);
continue; if (findVal) {
} this.cachedTabsState.delete(findVal);
if (value.length === 1) { // this.cachedTabsState.splice(index, 1);
this.cachedMapState.delete(key);
continue;
}
value.splice(index, 1);
this.cachedMapState.set(key, value);
} }
const redo = useRedo(); const redo = useRedo();
await redo(); await redo();
......
src/utils/index.ts
export const timestamp = () => +Date.now(); import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
import { unref } from 'vue'; import { unref } from 'vue';
import { isObject } from '/@/utils/is'; import { isObject } from '/@/utils/is';
export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
export const noop = () => {}; export const noop = () => {};
export const now = () => Date.now();
/** /**
* @description: Set ui mount node * @description: Set ui mount node
...@@ -91,3 +90,18 @@ export function setTitle(title: string, appTitle?: string) { ...@@ -91,3 +90,18 @@ export function setTitle(title: string, appTitle?: string) {
setDocumentTitle(_title); setDocumentTitle(_title);
} }
} }
export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
if (!route) return route;
const { matched, ...opt } = route;
return {
...opt,
matched: (matched
? matched.map((item) => ({
meta: item.meta,
name: item.name,
path: item.path,
}))
: undefined) as RouteRecordNormalized[],
};
}
vite.config.ts
...@@ -43,7 +43,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { ...@@ -43,7 +43,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
}, },
build: { build: {
minify: 'esbuild', // minify: 'esbuild',
outDir: OUTPUT_DIR, outDir: OUTPUT_DIR,
polyfillDynamicImport: VITE_LEGACY, polyfillDynamicImport: VITE_LEGACY,
terserOptions: { terserOptions: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论