create-iking-admin/template-micro/iking-main-admin/src/mainApp/router/helper/routeHelper.ts

金合技术中台脚手架

import type { AppRouteModule, AppRouteRecordRaw } from '@/mainApp/router/types';
import type { Router, RouteRecordNormalized } from 'vue-router';

import { LAYOUT } from '@/mainApp/router/constant';
import { cloneDeep, omit } from 'lodash-es';
import { createRouter, createWebHashHistory } from 'vue-router';

export type LayoutMapKey = 'LAYOUT';
const IFRAME = () => import('@/mainApp/views/sys-default/iframe/FrameBlank.vue');

const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();

LayoutMap.set('LAYOUT', LAYOUT);
LayoutMap.set('IFRAME', IFRAME);

let dynamicViewsModules: Record<string, () => Promise<Recordable>>;

// Dynamic introduction
function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
  dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
  if (!routes) return;
  routes.forEach((item) => {
    if (item.meta?.frameSrc) {
      item.component = 'IFRAME';
    }
    const { children } = item;
    children && asyncImportRoute(children);
  });
}

// function dynamicImport(
//   dynamicViewsModules: Record<string, () => Promise<Recordable>>,
//   component: string,
// ) {
//   const keys = Object.keys(dynamicViewsModules);
//   const matchKeys = keys.filter((key) => {
//     const k = key.replace('../../views', '');
//     const startFlag = component.startsWith('/');
//     const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
//     const startIndex = startFlag ? 0 : 1;
//     const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
//     return k.substring(startIndex, lastIndex) === component;
//   });
//   if (matchKeys?.length === 1) {
//     const matchKey = matchKeys[0];
//     return dynamicViewsModules[matchKey];
//   } else if (matchKeys?.length > 1) {
//     console.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;
//   } else {
//     console.warn('在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!');
//     return EXCEPTION_COMPONENT;
//   }
// }

// 需要动态加载路由时启用
export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
  routeList.forEach((route) => {
    route.children = [cloneDeep(route)];
    const meta = route.meta || {};
    meta.single = true;
    meta.affix = false;
    route.meta = meta;
    route.children && asyncImportRoute(route.children);
  });
  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;
}

// 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: createWebHashHistory(),
  });

  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;
}