feat(projects): 1.0 beta

src/store/modules/route/shared.ts

@@ -0,0 +1,271 @@
+import type { RouteRecordRaw, _RouteRecordBase, RouteLocationNormalizedLoaded } from 'vue-router';
+import type { ElegantConstRoute, RouteKey, RouteMap, LastLevelRouteKey } from '@elegant-router/types';
+import { useSvgIconRender } from '@sa/hooks';
+import { $t } from '@/locales';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+
+/**
+ * filter auth routes by roles
+ * @param routes auth routes
+ * @param roles roles
+ */
+export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: string[]) {
+  const SUPER_ROLE = 'R_SUPER';
+
+  if (roles.includes(SUPER_ROLE)) {
+    return routes;
+  }
+
+  return routes.flatMap(route => filterAuthRouteByRoles(route, roles));
+}
+
+/**
+ * filter auth route by roles
+ * @param route auth route
+ * @param roles roles
+ */
+function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
+  const routeRoles = (route.meta && route.meta.roles) || [];
+
+  if (!routeRoles.length) {
+    return [route];
+  }
+
+  const hasPermission = routeRoles.some(role => roles.includes(role));
+
+  const filterRoute = { ...route };
+
+  if (filterRoute.children?.length) {
+    filterRoute.children = filterRoute.children.flatMap(item => filterAuthRouteByRoles(item, roles));
+  }
+
+  return hasPermission ? [filterRoute] : [];
+}
+
+/**
+ * get global menus by auth routes
+ * @param routes auth routes
+ */
+export function getGlobalMenusByAuthRoutes(routes: ElegantConstRoute[]) {
+  const menus: App.Global.Menu[] = [];
+
+  routes.forEach(route => {
+    if (!route.meta?.hideInMenu) {
+      const menu = getGlobalMenuByBaseRoute(route);
+
+      if (route.children?.length) {
+        menu.children = getGlobalMenusByAuthRoutes(route.children);
+      }
+
+      menus.push(menu);
+    }
+  });
+
+  return menus;
+}
+
+/**
+ * update locale of global menus
+ * @param menus
+ */
+export function updateLocaleOfGlobalMenus(menus: App.Global.Menu[]) {
+  const result: App.Global.Menu[] = [];
+
+  menus.forEach(menu => {
+    const { i18nKey, label, children } = menu;
+
+    const newLabel = i18nKey ? $t(i18nKey) : label;
+
+    const newMenu: App.Global.Menu = {
+      ...menu,
+      label: newLabel
+    };
+
+    if (children?.length) {
+      newMenu.children = updateLocaleOfGlobalMenus(children);
+    }
+
+    result.push(newMenu);
+  });
+
+  return result;
+}
+
+/**
+ * get global menu by route
+ * @param route
+ */
+function getGlobalMenuByBaseRoute(route: RouteLocationNormalizedLoaded | ElegantConstRoute) {
+  const { SvgIconVNode } = useSvgIconRender(SvgIcon);
+
+  const { name, path } = route;
+  const { title, i18nKey, icon = import.meta.env.VITE_MENU_ICON, localIcon } = route.meta ?? {};
+
+  const label = i18nKey ? $t(i18nKey) : title!;
+
+  const menu: App.Global.Menu = {
+    key: name as string,
+    label,
+    i18nKey,
+    routeKey: name as RouteKey,
+    routePath: path as RouteMap[RouteKey],
+    icon: SvgIconVNode({ icon, localIcon, fontSize: 20 })
+  };
+
+  return menu;
+}
+
+/**
+ * get cache route names
+ * @param routes vue routes (two levels)
+ */
+export function getCacheRouteNames(routes: RouteRecordRaw[]) {
+  const cacheNames: LastLevelRouteKey[] = [];
+
+  routes.forEach(route => {
+    // only get last two level route, which has component
+    route.children?.forEach(child => {
+      if (child.component && child.meta?.keepAlive) {
+        cacheNames.push(child.name as LastLevelRouteKey);
+      }
+    });
+  });
+
+  return cacheNames;
+}
+
+/**
+ * is route exist by route name
+ * @param routeName
+ * @param routes
+ */
+export function isRouteExistByRouteName(routeName: RouteKey, routes: ElegantConstRoute[]) {
+  return routes.some(route => recursiveGetIsRouteExistByRouteName(route, routeName));
+}
+
+/**
+ * recursive get is route exist by route name
+ * @param route
+ * @param routeName
+ */
+function recursiveGetIsRouteExistByRouteName(route: ElegantConstRoute, routeName: RouteKey) {
+  let isExist = route.name === routeName;
+
+  if (isExist) {
+    return true;
+  }
+
+  if (route.children && route.children.length) {
+    isExist = route.children.some(item => recursiveGetIsRouteExistByRouteName(item, routeName));
+  }
+
+  return isExist;
+}
+
+/**
+ * get selected menu key path
+ * @param selectedKey
+ * @param menus
+ */
+export function getSelectedMenuKeyPathByKey(selectedKey: string, menus: App.Global.Menu[]) {
+  const keyPath: string[] = [];
+
+  menus.some(menu => {
+    const path = findMenuPath(selectedKey, menu);
+
+    const find = Boolean(path?.length);
+
+    if (find) {
+      keyPath.push(...path!);
+    }
+
+    return find;
+  });
+
+  return keyPath;
+}
+
+/**
+ * find menu path
+ * @param targetKey target menu key
+ * @param menu menu
+ */
+function findMenuPath(targetKey: string, menu: App.Global.Menu): string[] | null {
+  const path: string[] = [];
+
+  function dfs(item: App.Global.Menu): boolean {
+    path.push(item.key);
+
+    if (item.key === targetKey) {
+      return true;
+    }
+
+    if (item.children) {
+      for (const child of item.children) {
+        if (dfs(child)) {
+          return true;
+        }
+      }
+    }
+
+    path.pop();
+
+    return false;
+  }
+
+  if (dfs(menu)) {
+    return path;
+  }
+
+  return null;
+}
+
+/**
+ * transform menu to breadcrumb
+ * @param menu
+ */
+function transformMenuToBreadcrumb(menu: App.Global.Menu) {
+  const { children, ...rest } = menu;
+
+  const breadcrumb: App.Global.Breadcrumb = {
+    ...rest
+  };
+
+  if (children?.length) {
+    breadcrumb.options = children.map(transformMenuToBreadcrumb);
+  }
+
+  return breadcrumb;
+}
+
+/**
+ * get breadcrumbs by route
+ * @param route
+ * @param menus
+ */
+export function getBreadcrumbsByRoute(
+  route: RouteLocationNormalizedLoaded,
+  menus: App.Global.Menu[]
+): App.Global.Breadcrumb[] {
+  const key = route.name as string;
+  const activeKey = route.meta?.activeMenu;
+
+  const menuKey = activeKey || key;
+
+  for (const menu of menus) {
+    if (menu.key === menuKey) {
+      const breadcrumbMenu = menuKey !== activeKey ? menu : getGlobalMenuByBaseRoute(route);
+
+      return [transformMenuToBreadcrumb(breadcrumbMenu)];
+    }
+
+    if (menu.children?.length) {
+      const result = getBreadcrumbsByRoute(route, menu.children);
+      if (result.length > 0) {
+        return [transformMenuToBreadcrumb(menu), ...result];
+      }
+    }
+  }
+
+  return [];
+}