提交 9b61e82d 作者: vben

refactor: route Module structural transformation

上级 dc42d434
...@@ -7,6 +7,5 @@ VITE_GLOB_APP_TITLE = Vben Admin ...@@ -7,6 +7,5 @@ VITE_GLOB_APP_TITLE = Vben Admin
# spa shortname # spa shortname
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x
# Menu generation mode BACK|ROLE # Whether to dynamically load all files in `src/views`
# Need to delete LocalStorage after modification VITE_DYNAMIC_IMPORT = true
VITE_GEN_MENU_MODE=ROLE
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
### ✨ Refactor ### ✨ Refactor
- 重构由后台生成菜单的逻辑 - 重构由后台生成菜单的逻辑
- Route Module 结构改造
### ⚡ Performance Improvements ### ⚡ Performance Improvements
......
...@@ -20,10 +20,11 @@ const dynamicImportTransform = function (env: any = {}): Transform { ...@@ -20,10 +20,11 @@ const dynamicImportTransform = function (env: any = {}): Transform {
return path.includes('/src/utils/helper/dynamicImport.ts'); return path.includes('/src/utils/helper/dynamicImport.ts');
}, },
transform({ code }) { transform({ code }) {
const { VITE_GEN_MENU_MODE = '' } = env; const { VITE_DYNAMIC_IMPORT } = env;
if (VITE_GEN_MENU_MODE !== 'BACK') { if (!VITE_DYNAMIC_IMPORT) {
return code; return code;
} }
// if (!isBuild) return code; // if (!isBuild) return code;
// Only convert the dir // Only convert the dir
try { try {
......
...@@ -2,7 +2,6 @@ import { resultSuccess } from '../_util'; ...@@ -2,7 +2,6 @@ import { resultSuccess } from '../_util';
import { MockMethod } from 'vite-plugin-mock'; import { MockMethod } from 'vite-plugin-mock';
const dashboardRoute = { const dashboardRoute = {
layout: {
path: '/dashboard', path: '/dashboard',
name: 'Dashboard', name: 'Dashboard',
component: 'PAGE_LAYOUT', component: 'PAGE_LAYOUT',
...@@ -11,8 +10,7 @@ const dashboardRoute = { ...@@ -11,8 +10,7 @@ const dashboardRoute = {
icon: 'ant-design:home-outlined', icon: 'ant-design:home-outlined',
title: 'Dashboard', title: 'Dashboard',
}, },
}, children: [
routes: [
{ {
path: '/welcome', path: '/welcome',
name: 'Welcome', name: 'Welcome',
...@@ -86,7 +84,6 @@ const backRoute = { ...@@ -86,7 +84,6 @@ const backRoute = {
], ],
}; };
const authRoute = { const authRoute = {
layout: {
path: '/permission', path: '/permission',
name: 'Permission', name: 'Permission',
component: 'PAGE_LAYOUT', component: 'PAGE_LAYOUT',
...@@ -95,13 +92,10 @@ const authRoute = { ...@@ -95,13 +92,10 @@ const authRoute = {
icon: 'ant-design:home-outlined', icon: 'ant-design:home-outlined',
title: '权限管理', title: '权限管理',
}, },
}, children: [frontRoute, backRoute],
routes: [frontRoute, backRoute],
}; };
const authRoute1 = { const authRoute1 = {
layout: {
path: '/permission', path: '/permission',
name: 'Permission', name: 'Permission',
component: 'PAGE_LAYOUT', component: 'PAGE_LAYOUT',
...@@ -110,9 +104,7 @@ const authRoute1 = { ...@@ -110,9 +104,7 @@ const authRoute1 = {
icon: 'ant-design:home-outlined', icon: 'ant-design:home-outlined',
title: '权限管理', title: '权限管理',
}, },
}, children: [backRoute],
routes: [backRoute],
}; };
export default [ export default [
{ {
......
...@@ -68,5 +68,7 @@ export interface MenuModule { ...@@ -68,5 +68,7 @@ export interface MenuModule {
export interface AppRouteModule { export interface AppRouteModule {
layout?: AppRouteRecordRaw; layout?: AppRouteRecordRaw;
routes: AppRouteRecordRaw[]; routes?: AppRouteRecordRaw[];
children?: AppRouteRecordRaw[];
component?: any;
} }
import type { ProjectConfig } from '/@/types/config'; import type { ProjectConfig } from '/@/types/config';
import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum'; import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum'; import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
import { primaryColor } from '../../build/config/lessModifyVars'; import { primaryColor } from '../../build/config/lessModifyVars';
import { isProdMode, getRoleMode } from '/@/utils/env'; import { isProdMode } from '/@/utils/env';
// ! You need to clear the browser cache after the change // ! You need to clear the browser cache after the change
const setting: ProjectConfig = { const setting: ProjectConfig = {
// Whether to show the configuration button // Whether to show the configuration button
showSettingButton: true, showSettingButton: true,
// 权限模式 // 权限模式
permissionMode: getRoleMode(), permissionMode: PermissionModeEnum.ROLE,
// 网站灰色模式,用于可能悼念的日期开启 // 网站灰色模式,用于可能悼念的日期开启
grayMode: false, grayMode: false,
// 色弱模式 // 色弱模式
......
import { PermissionModeEnum } from '../enums/appEnum';
import type { GlobEnvConfig } from '/@/types/config'; import type { GlobEnvConfig } from '/@/types/config';
export const getGlobEnvConfig = (): GlobEnvConfig => { export const getGlobEnvConfig = (): GlobEnvConfig => {
...@@ -47,14 +46,3 @@ export const isProdMode = (): boolean => import.meta.env.PROD; ...@@ -47,14 +46,3 @@ export const isProdMode = (): boolean => import.meta.env.PROD;
* @example: * @example:
*/ */
export const isUseMock = (): boolean => import.meta.env.VITE_USE_MOCK === 'true'; export const isUseMock = (): boolean => import.meta.env.VITE_USE_MOCK === 'true';
/**
* @description: 获取菜单生成方式
* @param {type}
* @returns:
* @example:
*/
export const getRoleMode = (): PermissionModeEnum =>
import.meta.env.VITE_GEN_MENU_MODE === PermissionModeEnum.ROLE
? PermissionModeEnum.ROLE
: PermissionModeEnum.BACK;
...@@ -48,12 +48,12 @@ export function transformRouteToMenu(routeModList: AppRouteModule[]) { ...@@ -48,12 +48,12 @@ export function transformRouteToMenu(routeModList: AppRouteModule[]) {
const cloneRouteModList = cloneDeep(routeModList); const cloneRouteModList = cloneDeep(routeModList);
const routeList: AppRouteRecordRaw[] = []; const routeList: AppRouteRecordRaw[] = [];
cloneRouteModList.forEach((item) => { cloneRouteModList.forEach((item) => {
const { layout, routes } = item; const { layout, routes, children } = item;
if (layout) { if (layout) {
layout.children = routes; layout.children = routes || children;
routeList.push(layout); routeList.push(layout);
} else { } else {
routeList.push(...routes); routes && routeList.push(...routes);
} }
}); });
return treeMap(routeList, { return treeMap(routeList, {
......
...@@ -8,6 +8,7 @@ import { toRaw } from 'vue'; ...@@ -8,6 +8,7 @@ import { toRaw } from 'vue';
import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant'; import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
// import { isDevMode } from '/@/utils/env'; // import { isDevMode } from '/@/utils/env';
import dynamicImport from './dynamicImport'; import dynamicImport from './dynamicImport';
import { omit } from 'lodash-es';
let currentTo: RouteLocationNormalized | null = null; let currentTo: RouteLocationNormalized | null = null;
...@@ -23,8 +24,16 @@ export function setCurrentTo(to: RouteLocationNormalized) { ...@@ -23,8 +24,16 @@ export function setCurrentTo(to: RouteLocationNormalized) {
export function genRouteModule(moduleList: AppRouteModule[]) { export function genRouteModule(moduleList: AppRouteModule[]) {
const ret: AppRouteRecordRaw[] = []; const ret: AppRouteRecordRaw[] = [];
for (const routeMod of moduleList) { for (const routeMod of moduleList) {
const routes = routeMod.routes as any; let routes = [];
const layout = routeMod.layout; let layout: AppRouteRecordRaw | undefined;
if (Reflect.has(routeMod, 'routes')) {
routes = routeMod.routes as any;
layout = routeMod.layout;
} else if (Reflect.has(routeMod, 'path')) {
layout = omit(routeMod, 'children') as any;
routes = routeMod.children || [];
}
const router = createRouter({ routes, history: createWebHashHistory() }); const router = createRouter({ routes, history: createWebHashHistory() });
const flatList = (toRaw(router.getRoutes()).filter( const flatList = (toRaw(router.getRoutes()).filter(
...@@ -45,7 +54,8 @@ export function genRouteModule(moduleList: AppRouteModule[]) { ...@@ -45,7 +54,8 @@ export function genRouteModule(moduleList: AppRouteModule[]) {
// 动态引入 // 动态引入
// TODO 错误写法 // TODO 错误写法
function asyncImportRoute(routes: AppRouteRecordRaw[]) { function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
if (!routes) return;
routes.forEach((item) => { routes.forEach((item) => {
const { component } = item; const { component } = item;
const { children } = item; const { children } = item;
...@@ -60,10 +70,14 @@ function asyncImportRoute(routes: AppRouteRecordRaw[]) { ...@@ -60,10 +70,14 @@ function asyncImportRoute(routes: AppRouteRecordRaw[]) {
// 将后台对象转成路由对象 // 将后台对象转成路由对象
export function transformObjToRoute(routeList: AppRouteModule[]) { export function transformObjToRoute(routeList: AppRouteModule[]) {
routeList.forEach((route) => { routeList.forEach((route) => {
asyncImportRoute(route.routes); asyncImportRoute(Reflect.has(route, 'routes') ? route.routes : route.children || []);
if (route.layout) { if (route.layout) {
route.layout.component = route.layout.component =
route.layout.component === 'PAGE_LAYOUT' ? PAGE_LAYOUT_COMPONENT : ''; route.layout.component === 'PAGE_LAYOUT' ? PAGE_LAYOUT_COMPONENT : '';
} else {
route.component = route.component === 'PAGE_LAYOUT' ? PAGE_LAYOUT_COMPONENT : '';
const _layout = omit(route, 'children') as any;
route.layout = _layout;
} }
}); });
return routeList; return routeList;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论