项目初始化

web-vue/packages/core/router/helper/menuHelper.ts

@@ -0,0 +1,108 @@
+import { AppRouteModule } from '@jeesite/core/router/types';
+import type { MenuModule, Menu, AppRouteRecordRaw } from '@jeesite/core/router/types';
+import { findPath } from '@jeesite/core/utils/helper/treeHelper';
+import { isUrl } from '@jeesite/core/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(routeModuleList: AppRouteModule[], routerMapping = false, parentPath = '') {
+  const routeList: AppRouteRecordRaw[] = [];
+
+  routeModuleList.forEach((node) => {
+    if (node.meta.hideMenu) {
+      return;
+    }
+
+    const item = {
+      ...(node.meta || {}),
+      meta: node.meta,
+      name: node.meta.title,
+      path: node.path,
+      url: node.url,
+      target: node.target,
+      ...(node.redirect ? { redirect: node.redirect } : {}),
+      children: node.children || [],
+    };
+
+    if (item.children) {
+      item.children = transformRouteToMenu(
+        item.children,
+        routerMapping,
+        item.meta?.hidePathForChildren ? parentPath : item.path,
+      );
+    }
+
+    if (routerMapping && item.meta.hideChildrenInMenu && typeof item.redirect === 'string') {
+      item.path = item.redirect;
+    }
+
+    // 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 (!(item.path.startsWith('/') || isUrl(item.path))) {
+    //   // path doesn't start with /, nor is it a url, join parent path
+    //   item.path = `${parentPath}/${item.path}`;
+    // }
+
+    if (item.meta?.single) {
+      const realItem = item?.children?.[0];
+      realItem && routeList.push(realItem);
+    } else {
+      routeList.push(item);
+    }
+  });
+  return routeList;
+}
+
+/**
+ * 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));
+}

web-vue/packages/core/router/helper/routeHelper.ts

@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2013-Now https://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author Vben、ThinkGem
+ */
+import type { AppRouteModule, AppRouteRecordRaw } from '@jeesite/core/router/types';
+import type { Router, RouteRecordNormalized } from 'vue-router';
+
+import { cloneDeep, omit } from 'lodash-es';
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
+import { LAYOUT, IFRAME_BLANK, IFRAME_SIMPLE, EXCEPTION_COMPONENT } from '@jeesite/core/router/constant';
+import { warn, env } from '@jeesite/core/utils/log';
+
+// Dynamic introduction
+function asyncImportRoute(
+  routes: AppRouteRecordRaw[] | undefined,
+  parent: AppRouteRecordRaw | undefined,
+  root: AppRouteRecordRaw | undefined,
+) {
+  if (!routes) return;
+  routes.forEach((item) => {
+    item.meta = item.meta || {};
+    if (!item.meta.icon) {
+      item.meta.icon = 'bx:bx-circle';
+    }
+    if (parent && item.meta.hideMenu) {
+      item.meta.currentActiveMenu = parent.path;
+    }
+    const component = (item.component as string).toUpperCase();
+    if (!component || component === 'LAYOUT') {
+      item.component = LAYOUT;
+    } else if (component === 'IFRAME') {
+      item.component = root?.component ? IFRAME_BLANK : IFRAME_SIMPLE;
+    } else {
+      item.component = dynamicImport(item.component as string);
+    }
+    if (!item.component) {
+      item.component = EXCEPTION_COMPONENT;
+      item.props = item.props || {};
+      item.props.status = 404;
+    }
+    item.children && asyncImportRoute(item.children, item, root);
+  });
+}
+
+let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
+
+export function dynamicImport(component: string) {
+  if (!dynamicViewsModules) {
+    dynamicViewsModules = import.meta.glob('../../../../**/views/**/*.{vue,tsx}');
+  }
+  const keys = Object.keys(dynamicViewsModules);
+  const matchKeys = keys.filter((key) => {
+    const viewsPath = '/views',
+      l = viewsPath.length,
+      index = key.indexOf(viewsPath);
+    let k = key.substring(index + l);
+    const lastIndex = k.lastIndexOf('.');
+    k = k.substring(0, lastIndex);
+    return k === component;
+  });
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0];
+    return dynamicViewsModules[matchKey];
+  }
+  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((item) => {
+    const component = (item.component as string).toUpperCase();
+    if (component === 'BLANK') {
+      item.component = item.path;
+      item.children = [cloneDeep(item)];
+      item.component = undefined;
+    } else {
+      item.children = [cloneDeep(item)];
+      item.component = LAYOUT;
+    }
+    item.path = '';
+    item.name = `${item.name}Parent`;
+    item.meta = item.meta || {};
+    item.meta.single = true;
+    item.meta.affix = false;
+    item.children && asyncImportRoute(item.children, item, item);
+  });
+  return routeList as unknown as T[];
+}
+
+/**
+ * Convert multi-level routing to level 2 routing
+ */
+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;
+}
+
+export function createRouteHistory() {
+  if (env.VITE_ROUTE_WEB_HISTORY == 'true') {
+    return createWebHistory(env.VITE_PUBLIC_PATH);
+  } else {
+    return createWebHashHistory(env.VITE_PUBLIC_PATH);
+  }
+}
+
+// Routing level upgrade
+function promoteRouteLevel(routeModule: AppRouteModule) {
+  // Use vue-router to splice menus
+  let router: Router | null = createRouter({
+    routes: [routeModule as unknown as RouteRecordNormalized],
+    history: createRouteHistory(),
+  });
+
+  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;
+}