初始化项目

src/store/modules/route/index.ts

@@ -0,0 +1,349 @@
+import { computed, ref, shallowRef } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+import { defineStore } from 'pinia';
+import { useBoolean } from '@sa/hooks';
+import type { CustomRoute, ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
+import { SetupStoreId } from '@/enum';
+import { router } from '@/router';
+import { createStaticRoutes, getAuthVueRoutes } from '@/router/routes';
+import { ROOT_ROUTE } from '@/router/routes/builtin';
+import { getRouteName, getRoutePath } from '@/router/elegant/transform';
+import { useAppStore } from '../app';
+import { useAuthStore } from '../auth';
+import { useTabStore } from '../tab';
+import {
+  filterAuthRoutesByRoles,
+  getBreadcrumbsByRoute,
+  getCacheRouteNames,
+  getGlobalMenusByAuthRoutes,
+  getSelectedMenuKeyPathByKey,
+  isRouteExistByRouteName,
+  sortRoutesByOrder,
+  transformMenuToSearchMenus,
+  updateLocaleOfGlobalMenus
+} from './shared';
+
+export const useRouteStore = defineStore(SetupStoreId.Route, () => {
+  const appStore = useAppStore();
+  const authStore = useAuthStore();
+  const tabStore = useTabStore();
+  const { bool: isInitConstantRoute, setBool: setIsInitConstantRoute } = useBoolean();
+  const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
+
+  /**
+   * Auth route mode
+   *
+   * It recommends to use static mode in the development environment, and use dynamic mode in the production
+   * environment, if use static mode in development environment, the auth routes will be auto generated by plugin
+   * "@elegant-router/vue"
+   */
+  const authRouteMode = ref(import.meta.env.VITE_AUTH_ROUTE_MODE);
+
+  /** Home route key */
+  const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
+
+  /**
+   * Set route home
+   *
+   * @param routeKey Route key
+   */
+  function setRouteHome(routeKey: LastLevelRouteKey) {
+    routeHome.value = routeKey;
+  }
+
+  /** auth routes */
+  const authRoutes = shallowRef<ElegantConstRoute[]>([]);
+
+  function addAuthRoutes(routes: ElegantConstRoute[]) {
+    const authRoutesMap = new Map(authRoutes.value.map(route => [route.name, route]));
+
+    routes.forEach(route => {
+      authRoutesMap.set(route.name, route);
+    });
+
+    authRoutes.value = Array.from(authRoutesMap.values());
+  }
+
+  const removeRouteFns: (() => void)[] = [];
+
+  /** Global menus */
+  const menus = ref<App.Global.Menu[]>([]);
+  const searchMenus = computed(() => transformMenuToSearchMenus(menus.value));
+
+  /** Get global menus */
+  function getGlobalMenus(routes: ElegantConstRoute[]) {
+    menus.value = getGlobalMenusByAuthRoutes(routes);
+  }
+
+  /** Update global menus by locale */
+  function updateGlobalMenusByLocale() {
+    menus.value = updateLocaleOfGlobalMenus(menus.value);
+  }
+
+  /** Cache routes */
+  const cacheRoutes = ref<RouteKey[]>([]);
+
+  /**
+   * Get cache routes
+   *
+   * @param routes Vue routes
+   */
+  function getCacheRoutes(routes: RouteRecordRaw[]) {
+    cacheRoutes.value = getCacheRouteNames(routes);
+  }
+
+  /**
+   * Add cache routes
+   *
+   * @param routeKey
+   */
+  function addCacheRoutes(routeKey: RouteKey) {
+    if (cacheRoutes.value.includes(routeKey)) return;
+
+    cacheRoutes.value.push(routeKey);
+  }
+
+  /**
+   * Remove cache routes
+   *
+   * @param routeKey
+   */
+  function removeCacheRoutes(routeKey: RouteKey) {
+    const index = cacheRoutes.value.findIndex(item => item === routeKey);
+
+    if (index === -1) return;
+
+    cacheRoutes.value.splice(index, 1);
+  }
+
+  /**
+   * Re cache routes by route key
+   *
+   * @param routeKey
+   */
+  async function reCacheRoutesByKey(routeKey: RouteKey) {
+    removeCacheRoutes(routeKey);
+
+    await appStore.reloadPage();
+
+    addCacheRoutes(routeKey);
+  }
+
+  /**
+   * Re cache routes by route keys
+   *
+   * @param routeKeys
+   */
+  async function reCacheRoutesByKeys(routeKeys: RouteKey[]) {
+    for await (const key of routeKeys) {
+      await reCacheRoutesByKey(key);
+    }
+  }
+
+  /** Global breadcrumbs */
+  const breadcrumbs = computed(() => getBreadcrumbsByRoute(router.currentRoute.value, menus.value));
+
+  /** Reset store */
+  async function resetStore() {
+    const routeStore = useRouteStore();
+
+    routeStore.$reset();
+
+    resetVueRoutes();
+
+    // after reset store, need to re-init constant route
+    await initConstantRoute();
+  }
+
+  /** Reset vue routes */
+  function resetVueRoutes() {
+    removeRouteFns.forEach(fn => fn());
+    removeRouteFns.length = 0;
+  }
+
+  /** init constant route */
+  async function initConstantRoute() {
+    if (isInitConstantRoute.value) return;
+
+    // if (authRouteMode.value === 'static') {
+    const { constantRoutes } = createStaticRoutes();
+
+    addAuthRoutes(constantRoutes);
+    // } else {
+    //   const { data, error } = await fetchGetConstantRoutes();
+
+    //   if (!error) {
+    //     addAuthRoutes(data);
+    //   }
+    // }
+
+    handleAuthRoutes();
+
+    setIsInitConstantRoute(true);
+  }
+
+  /** Init auth route */
+  async function initAuthRoute() {
+    if (authRouteMode.value === 'static') {
+      await initStaticAuthRoute();
+    } else {
+      await initDynamicAuthRoute();
+    }
+
+    tabStore.initHomeTab();
+  }
+
+  /** Init static auth route */
+  async function initStaticAuthRoute() {
+    const { authRoutes: staticAuthRoutes } = createStaticRoutes();
+
+    if (authStore.isStaticSuper) {
+      addAuthRoutes(staticAuthRoutes);
+    } else {
+      const filteredAuthRoutes = filterAuthRoutesByRoles(staticAuthRoutes, authStore.userInfo.roles ?? []);
+
+      addAuthRoutes(filteredAuthRoutes);
+    }
+
+    handleAuthRoutes();
+
+    setIsInitAuthRoute(true);
+  }
+
+  /** Init dynamic auth route */
+  async function initDynamicAuthRoute() {
+    const { data: routes, error } = await doGetUserRoutes();
+
+    if (!error) {
+      addAuthRoutes(routes);
+
+      handleAuthRoutes();
+
+      setRouteHome('manage_role');
+
+      handleUpdateRootRouteRedirect('manage_role');
+
+      setIsInitAuthRoute(true);
+    } else {
+      await authStore.resetStore();
+    }
+  }
+
+  /** handle auth routes */
+  function handleAuthRoutes() {
+    const sortRoutes = sortRoutesByOrder(authRoutes.value);
+
+    const vueRoutes = getAuthVueRoutes(sortRoutes);
+
+    resetVueRoutes();
+
+    addRoutesToVueRouter(vueRoutes);
+
+    getGlobalMenus(sortRoutes);
+
+    getCacheRoutes(vueRoutes);
+  }
+
+  /**
+   * Add routes to vue router
+   *
+   * @param routes Vue routes
+   */
+  function addRoutesToVueRouter(routes: RouteRecordRaw[]) {
+    routes.forEach(route => {
+      const removeFn = router.addRoute(route);
+      addRemoveRouteFn(removeFn);
+    });
+  }
+
+  /**
+   * Add remove route fn
+   *
+   * @param fn
+   */
+  function addRemoveRouteFn(fn: () => void) {
+    removeRouteFns.push(fn);
+  }
+
+  /**
+   * Update root route redirect when auth route mode is dynamic
+   *
+   * @param redirectKey Redirect route key
+   */
+  function handleUpdateRootRouteRedirect(redirectKey: LastLevelRouteKey) {
+    const redirect = getRoutePath(redirectKey);
+
+    if (redirect) {
+      const rootRoute: CustomRoute = { ...ROOT_ROUTE, redirect };
+
+      router.removeRoute(rootRoute.name);
+
+      const [rootVueRoute] = getAuthVueRoutes([rootRoute]);
+
+      router.addRoute(rootVueRoute);
+    }
+  }
+
+  /**
+   * Get is auth route exist
+   *
+   * @param routePath Route path
+   */
+  async function getIsAuthRouteExist(routePath: RouteMap[RouteKey]) {
+    const routeName = getRouteName(routePath);
+
+    if (!routeName) {
+      return false;
+    }
+
+    if (authRouteMode.value === 'static') {
+      const { authRoutes: staticAuthRoutes } = createStaticRoutes();
+      return isRouteExistByRouteName(routeName, staticAuthRoutes);
+    }
+
+    const { data } = await fetchIsRouteExist(routeName);
+
+    return data;
+  }
+
+  /**
+   * Get selected menu key path
+   *
+   * @param selectedKey Selected menu key
+   */
+  function getSelectedMenuKeyPath(selectedKey: string) {
+    return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
+  }
+
+  /**
+   * Get selected menu meta by key
+   *
+   * @param selectedKey Selected menu key
+   */
+  function getSelectedMenuMetaByKey(selectedKey: string) {
+    // The routes in router.options.routes are static, you need to use router.getRoutes() to get all the routes.
+    const allRoutes = router.getRoutes();
+
+    return allRoutes.find(route => route.name === selectedKey)?.meta || null;
+  }
+
+  return {
+    resetStore,
+    routeHome,
+    menus,
+    searchMenus,
+    updateGlobalMenusByLocale,
+    cacheRoutes,
+    reCacheRoutesByKey,
+    reCacheRoutesByKeys,
+    breadcrumbs,
+    initConstantRoute,
+    isInitConstantRoute,
+    initAuthRoute,
+    isInitAuthRoute,
+    setIsInitAuthRoute,
+    getIsAuthRouteExist,
+    getSelectedMenuKeyPath,
+    getSelectedMenuMetaByKey
+  };
+});

src/store/modules/route/shared.ts

@@ -0,0 +1,304 @@
+import type { RouteLocationNormalizedLoaded, RouteRecordRaw, _RouteRecordBase } from 'vue-router';
+import type { ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
+import { $t } from '@/locales';
+import { useSvgIcon } from '@/hooks/common/icon';
+
+/**
+ * Filter auth routes by roles
+ *
+ * @param routes Auth routes
+ * @param roles Roles
+ */
+export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: string[]) {
+  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 the route's "roles" is empty, then it is allowed to access
+  const isEmptyRoles = !routeRoles.length;
+
+  // if the user's role is included in the route's "roles", then it is allowed to access
+  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 || isEmptyRoles ? [filterRoute] : [];
+}
+
+/**
+ * sort route by order
+ *
+ * @param route route
+ */
+function sortRouteByOrder(route: ElegantConstRoute) {
+  if (route.children?.length) {
+    route.children.sort((next, prev) => (Number(next.meta?.order) || 0) - (Number(prev.meta?.order) || 0));
+    route.children.forEach(sortRouteByOrder);
+  }
+
+  return route;
+}
+
+/**
+ * sort routes by order
+ *
+ * @param routes routes
+ */
+export function sortRoutesByOrder(routes: ElegantConstRoute[]) {
+  routes.sort((next, prev) => (Number(next.meta?.order) || 0) - (Number(prev.meta?.order) || 0));
+  routes.forEach(sortRouteByOrder);
+
+  return routes;
+}
+
+/**
+ * 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?.some(child => !child.meta?.hideInMenu)) {
+        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,
+      title: 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 } = useSvgIcon();
+
+  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 }),
+    title: label
+  };
+
+  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;
+}
+
+/**
+ * Get breadcrumbs by route
+ *
+ * @param route
+ * @param menus
+ */
+export function getBreadcrumbsByRoute(
+  route: RouteLocationNormalizedLoaded,
+  menus: App.Global.Menu[]
+): App.Global.Menu[] {
+  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 breadcrumb = menuKey !== activeKey ? menu : getGlobalMenuByBaseRoute(route);
+
+      return [breadcrumb];
+    }
+
+    if (menu.children?.length) {
+      const result = getBreadcrumbsByRoute(route, menu.children);
+      if (result.length > 0) {
+        return [menu, ...result];
+      }
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Transform menu to searchMenus
+ *
+ * @param menus - menus
+ * @param treeMap
+ */
+export function transformMenuToSearchMenus(menus: App.Global.Menu[], treeMap: App.Global.Menu[] = []) {
+  if (menus && menus.length === 0) return [];
+  return menus.reduce((acc, cur) => {
+    if (!cur.children) {
+      acc.push(cur);
+    }
+    if (cur.children && cur.children.length > 0) {
+      transformMenuToSearchMenus(cur.children, treeMap);
+    }
+    return acc;
+  }, treeMap);
+}