feat: support mobile layout adaptation

This commit is contained in:
vben
2020-12-15 14:59:22 +08:00
parent 683d1f52ca
commit c774a6d3a0
35 changed files with 586 additions and 627 deletions

View File

@@ -1,8 +1,9 @@
import type { Menu, MenuModule } from '/@/router/types';
import type { RouteRecordNormalized } from 'vue-router';
import { appStore } from '/@/store/modules/app';
import { permissionStore } from '/@/store/modules/permission';
import { transformMenuModule, flatMenus, getAllParentPath } from '/@/router/helper/menuHelper';
import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper';
import { filter } from '/@/utils/helper/treeHelper';
import router from '/@/router';
import { PermissionModeEnum } from '/@/enums/appEnum';
@@ -10,6 +11,8 @@ import { pathToRegexp } from 'path-to-regexp';
import modules from 'globby!/@/router/menus/modules/**/*.@(ts)';
const reg = /(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
const menuModules: MenuModule[] = [];
Object.keys(modules).forEach((key) => {
@@ -38,18 +41,9 @@ const staticMenus: Menu[] = [];
async function getAsyncMenus() {
// 前端角色控制菜单 直接取菜单文件
if (!isBackMode()) {
return staticMenus;
}
return permissionStore.getBackMenuListState;
return !isBackMode() ? staticMenus : permissionStore.getBackMenuListState;
}
// 获取深层扁平化菜单
export const getFlatMenus = async (): Promise<Menu[]> => {
const menus = await getAsyncMenus();
return flatMenus(menus);
};
// 获取菜单 树级
export const getMenus = async (): Promise<Menu[]> => {
const menus = await getAsyncMenus();
@@ -61,7 +55,7 @@ export const getMenus = async (): Promise<Menu[]> => {
export async function getCurrentParentPath(currentPath: string) {
const menus = await getAsyncMenus();
const allParentPath = await getAllParentPath(menus, currentPath);
return allParentPath[0];
return allParentPath?.[0];
}
// 获取1级菜单删除children
@@ -81,27 +75,24 @@ export async function getChildrenMenus(parentPath: string) {
return parent.children;
}
// 扁平化children
export async function getFlatChildrenMenus(children: Menu[]) {
return flatMenus(children);
}
// 通用过滤方法
function basicFilter(routes: RouteRecordNormalized[]) {
return (menu: Menu) => {
const matchRoute = routes.find((route) => {
if (route.meta.externalLink) {
const match = route.path.match(reg)?.[0];
if (match && match === menu.path) {
return true;
}
if (route.meta) {
if (route.meta.carryParam) {
return pathToRegexp(route.path).test(menu.path);
}
if (route.meta.ignoreAuth) return true;
if (route.meta?.carryParam) {
return pathToRegexp(route.path).test(menu.path);
}
const isSame = route.path === menu.path;
if (!isSame) return false;
return route.path === menu.path;
if (route.meta?.ignoreAuth) return true;
return isSame || pathToRegexp(route.path).test(menu.path);
});
if (!matchRoute) return false;