WFC/fe.wfc.user
2
0
Fork 0
Code Activity

perf: 路由重构

Browse Source
This commit is contained in:
TsMask
2024-11-29 16:51:14 +08:00
parent 5d2b71bb37
commit d7d471e552
13 changed files with 100 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/router/elegant/imports.ts
View File

@@ -4,7 +4,7 @@
// Read more: https://github.com/soybeanjs/elegant-router
import type { RouteComponent } from "vue-router";
import type { LastLevelRouteKey, RouteLayout } from "@elegant-router/types";
import type { RouteLayout } from "@elegant-router/types";
import BaseLayout from "@/layouts/base-layout/index.vue";
import BlankLayout from "@/layouts/blank-layout/index.vue";
@@ -13,29 +13,3 @@ export const layouts: Record<RouteLayout, RouteComponent | (() => Promise<RouteC
base: BaseLayout,
blank: BlankLayout,
};
export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<RouteComponent>)> = {
403: () => import("@/views/_builtin/403/index.vue"),
404: () => import("@/views/_builtin/404/index.vue"),
500: () => import("@/views/_builtin/500/index.vue"),
login: () => import("@/views/_builtin/login/index.vue"),
about: () => import("@/views/about/index.vue"),
"function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),
"function_hide-child_three": () => import("@/views/function/hide-child/three/index.vue"),
"function_hide-child_two": () => import("@/views/function/hide-child/two/index.vue"),
"function_multi-tab": () => import("@/views/function/multi-tab/index.vue"),
function_request: () => import("@/views/function/request/index.vue"),
"function_super-page": () => import("@/views/function/super-page/index.vue"),
function_tab: () => import("@/views/function/tab/index.vue"),
"function_toggle-auth": () => import("@/views/function/toggle-auth/index.vue"),
home: () => import("@/views/home/index.vue"),
manage_dept: () => import("@/views/manage/dept/index.vue"),
manage_dict: () => import("@/views/manage/dict/index.vue"),
manage_menu: () => import("@/views/manage/menu/index.vue"),
manage_post: () => import("@/views/manage/post/index.vue"),
manage_role: () => import("@/views/manage/role/index.vue"),
manage_route: () => import("@/views/manage/route/index.vue"),
"manage_user-detail": () => import("@/views/manage/user-detail/[id].vue"),
manage_user: () => import("@/views/manage/user/index.vue"),
"user-center": () => import("@/views/user-center/index.vue"),
};

112
src/router/elegant/routes.ts
View File

@@ -9,7 +9,7 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: '403',
path: '/403',
component: 'layout.blank$view.403',
component: 'layout.blank$view._builtin_403',
meta: {
title: '403',
i18nKey: 'route.403',
@@ -20,7 +20,7 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: '404',
path: '/404',
component: 'layout.blank$view.404',
component: 'layout.blank$view._builtin_404',
meta: {
title: '404',
i18nKey: 'route.404',
@@ -31,7 +31,7 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: '500',
path: '/500',
component: 'layout.blank$view.500',
component: 'layout.blank$view._builtin_500',
meta: {
title: '500',
i18nKey: 'route.500',
@@ -42,7 +42,7 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: 'about',
path: '/about',
component: 'layout.base$view.about',
component: 'layout.base$view._builtin_about',
meta: {
title: 'about',
i18nKey: 'route.about',
@@ -171,7 +171,7 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: 'home',
path: '/home',
component: 'layout.base$view.home',
component: 'layout.base$view._builtin_home',
meta: {
title: 'home',
i18nKey: 'route.home',
@@ -182,7 +182,7 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: 'login',
path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',
component: 'layout.blank$view.login',
component: 'layout.blank$view._builtin_login',
props: true,
meta: {
title: 'login',
@@ -191,106 +191,6 @@ export const generatedRoutes: GeneratedRoute[] = [
hideInMenu: true
}
},
{
name: 'manage',
path: '/manage',
component: 'layout.base',
meta: {
title: 'manage',
i18nKey: 'route.manage',
icon: 'carbon:cloud-service-management',
order: 9,
roles: ['R_ADMIN']
},
children: [
{
name: 'manage_dept',
path: '/manage/dept',
component: 'view.manage_dept',
meta: {
title: 'manage_dept',
i18nKey: 'route.manage_dept'
}
},
{
name: 'manage_dict',
path: '/manage/dict',
component: 'view.manage_dict',
meta: {
title: 'manage_dict',
i18nKey: 'route.manage_dict'
}
},
{
name: 'manage_menu',
path: '/manage/menu',
component: 'view.manage_menu',
meta: {
title: 'manage_menu',
i18nKey: 'route.manage_menu',
icon: 'material-symbols:route',
order: 3,
roles: ['R_ADMIN'],
keepAlive: true
}
},
{
name: 'manage_post',
path: '/manage/post',
component: 'view.manage_post',
meta: {
title: 'manage_post',
i18nKey: 'route.manage_post'
}
},
{
name: 'manage_role',
path: '/manage/role',
component: 'view.manage_role',
meta: {
title: 'manage_role',
i18nKey: 'route.manage_role',
icon: 'carbon:user-role',
order: 2,
roles: ['R_SUPER']
}
},
{
name: 'manage_route',
path: '/manage/route',
component: 'view.manage_route',
meta: {
title: 'manage_route',
i18nKey: 'route.manage_route'
}
},
{
name: 'manage_user',
path: '/manage/user',
component: 'view.manage_user',
meta: {
title: 'manage_user',
i18nKey: 'route.manage_user',
icon: 'ic:round-manage-accounts',
order: 1,
roles: ['R_ADMIN']
}
},
{
name: 'manage_user-detail',
path: '/manage/user-detail/:id',
component: 'view.manage_user-detail',
props: true,
meta: {
title: 'manage_user-detail',
i18nKey: 'route.manage_user-detail',
hideInMenu: true,
roles: ['R_ADMIN'],
activeMenu: 'manage_user'
}
}
]
},
{
name: 'user-center',
path: '/user-center',

82
src/router/elegant/transform.ts
View File

@@ -11,26 +11,22 @@ import type { RouteMap, RouteKey, RoutePath } from '@elegant-router/types';
* transform elegant const routes to vue routes
* @param routes elegant const routes
* @param layouts layout components
* @param views view components
*/
export function transformElegantRoutesToVueRoutes(
routes: ElegantConstRoute[],
layouts: Record<string, RouteComponent | (() => Promise<RouteComponent>)>,
views: Record<string, RouteComponent | (() => Promise<RouteComponent>)>
) {
return routes.flatMap(route => transformElegantRouteToVueRoute(route, layouts, views));
return routes.flatMap(route => transformElegantRouteToVueRoute(route, layouts ));
}
/**
* transform elegant route to vue route
* @param route elegant const route
* @param layouts layout components
* @param views view components
*/
function transformElegantRouteToVueRoute(
route: ElegantConstRoute,
layouts: Record<string, RouteComponent | (() => Promise<RouteComponent>)>,
views: Record<string, RouteComponent | (() => Promise<RouteComponent>)>
) {
const LAYOUT_PREFIX = 'layout.';
const VIEW_PREFIX = 'view.';
@@ -48,7 +44,7 @@ function transformElegantRouteToVueRoute(
throw new Error(`Layout component "${layout}" not found`);
}
return layout;
return layouts[layout];
}
function isView(component: string) {
@@ -57,12 +53,14 @@ function transformElegantRouteToVueRoute(
function getViewName(component: string) {
const view = component.replace(VIEW_PREFIX, '');
if(!views[view]) {
debugger
const v = findView(view)
console.log(v)
if(!v) {
throw new Error(`View component "${view}" not found`);
}
return view;
return v;
}
function isFirstLevelRoute(item: ElegantConstRoute) {
@@ -97,51 +95,47 @@ function transformElegantRouteToVueRoute(
if (component) {
if (isSingleLevelRoute(route)) {
const { layout, view } = getSingleLevelRouteComponent(component);
const singleLevelRoute: RouteRecordRaw = {
path,
component: layouts[layout],
component: layout,
children: [
{
name,
path: '',
component: views[view],
component: view,
...rest
} as RouteRecordRaw
]
};
return [singleLevelRoute];
}
if (isLayout(component)) {
const layoutName = getLayoutName(component);
vueRoute.component = layouts[layoutName];
vueRoute.component = getLayoutName(component);
}
if (isView(component)) {
const viewName = getViewName(component);
vueRoute.component = views[viewName];
vueRoute.component = getViewName(component);
}
}
} catch (error: any) {
console.error(`Error transforming route "${route.name}": ${error.toString()}`);
return [];
}
// add redirect to child
if (children?.length && !vueRoute.redirect) {
vueRoute.redirect = {
name: children[0].name
};
}
if (children?.length) {
const childRoutes = children.flatMap(child => transformElegantRouteToVueRoute(child, layouts, views));
const childRoutes = children.flatMap(child => transformElegantRouteToVueRoute(child, layouts));
if(isFirstLevelRoute(route)) {
vueRoute.children = childRoutes;
@@ -155,6 +149,34 @@ function transformElegantRouteToVueRoute(
return vueRoutes;
}
/**匹配views里面所有的.vue或.tsx文件 */
const views = import.meta.glob('./../../views/**/*.{vue,tsx}');
/**
* 查找页面模块
*
* 查找 `/views/system/menu/index.vue` 或 `/views/system/menu/index.tsx`
*
* 参数值为 `system/menu/index`
*
* @param dirName 组件路径
* @returns 路由懒加载函数
*/
function findView(dirName: string) {
for (const dir in views) {
let viewDirName = '';
const component = dir.match(/views\/(.+)\.(vue|tsx)/);
if (component && component.length === 3) {
viewDirName = component[1];
}
viewDirName = viewDirName.replaceAll("/", "_").replace("_index", "")
if ( viewDirName === dirName) {
return () => views[dir]();
}
}
return () => import("@/views/_builtin/404/index.vue");
}
/**
* map of route name and route path
*/
@@ -181,15 +203,6 @@ const routeMap: RouteMap = {
"function_toggle-auth": "/function/toggle-auth",
"home": "/home",
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
"manage": "/manage",
"manage_dept": "/manage/dept",
"manage_dict": "/manage/dict",
"manage_menu": "/manage/menu",
"manage_post": "/manage/post",
"manage_role": "/manage/role",
"manage_route": "/manage/route",
"manage_user": "/manage/user",
"manage_user-detail": "/manage/user-detail/:id",
"user-center": "/user-center"
};
@@ -198,6 +211,7 @@ const routeMap: RouteMap = {
* @param name route name
*/
export function getRoutePath<T extends RouteKey>(name: T) {
console.log(name)
return routeMap[name];
}

6
src/router/routes/builtin.ts
View File

@@ -1,5 +1,5 @@
import type { CustomRoute } from '@elegant-router/types';
import { layouts, views } from '../elegant/imports';
import { layouts } from '../elegant/imports';
import { transformElegantRoutesToVueRoutes } from '../elegant/transform';
export const ROOT_ROUTE: CustomRoute = {
@@ -15,7 +15,7 @@ export const ROOT_ROUTE: CustomRoute = {
const NOT_FOUND_ROUTE: CustomRoute = {
name: 'not-found',
path: '/:pathMatch(.*)*',
component: 'layout.blank$view.404',
component: 'layout.blank$view._builtin_404',
meta: {
title: 'not-found',
constant: true
@@ -27,5 +27,5 @@ const builtinRoutes: CustomRoute[] = [ROOT_ROUTE, NOT_FOUND_ROUTE];
/** create builtin vue routes */
export function createBuiltinVueRoutes() {
return transformElegantRoutesToVueRoutes(builtinRoutes, layouts, views);
return transformElegantRoutesToVueRoutes(builtinRoutes, layouts);
}

18
src/router/routes/index.ts
View File

@@ -1,6 +1,6 @@
import type { CustomRoute, ElegantConstRoute, ElegantRoute } from '@elegant-router/types';
import type { ElegantConstRoute } from '@elegant-router/types';
import { generatedRoutes } from '../elegant/routes';
import { layouts, views } from '../elegant/imports';
import { layouts } from '../elegant/imports';
import { transformElegantRoutesToVueRoutes } from '../elegant/transform';
/**
@@ -8,7 +8,7 @@ import { transformElegantRoutesToVueRoutes } from '../elegant/transform';
*
* @link https://github.com/soybeanjs/elegant-router?tab=readme-ov-file#custom-route
*/
const customRoutes: CustomRoute[] = [
const customRoutes: any[] = [
{
name: 'exception',
path: '/exception',
@@ -23,7 +23,7 @@ const customRoutes: CustomRoute[] = [
{
name: 'exception_403',
path: '/exception/403',
component: 'view.403',
component: 'view._builtin_403',
meta: {
title: 'exception_403',
i18nKey: 'route.exception_403',
@@ -33,7 +33,7 @@ const customRoutes: CustomRoute[] = [
{
name: 'exception_404',
path: '/exception/404',
component: 'view.404',
component: 'view._builtin_404',
meta: {
title: 'exception_404',
i18nKey: 'route.exception_404',
@@ -43,7 +43,7 @@ const customRoutes: CustomRoute[] = [
{
name: 'exception_500',
path: '/exception/500',
component: 'view.500',
component: 'view._builtin_500',
meta: {
title: 'exception_500',
i18nKey: 'route.exception_500',
@@ -56,9 +56,9 @@ const customRoutes: CustomRoute[] = [
/** create routes when the auth route mode is static */
export function createStaticRoutes() {
const constantRoutes: ElegantRoute[] = [];
const constantRoutes: any[] = [];
const authRoutes: ElegantRoute[] = [];
const authRoutes: any[] = [];
[...customRoutes, ...generatedRoutes].forEach(item => {
if (item.meta?.constant) {
@@ -80,5 +80,5 @@ export function createStaticRoutes() {
* @param routes Elegant routes
*/
export function getAuthVueRoutes(routes: ElegantConstRoute[]) {
return transformElegantRoutesToVueRoutes(routes, layouts, views);
return transformElegantRoutesToVueRoutes(routes, layouts);
}