@pubinfo-nightly/core 2025.11.14

package/src/features/stores/modules/route.ts

@@ -0,0 +1,582 @@
+import type { Route } from '#/vue-router';
+import type { RouteLocationNormalizedLoaded, RouteMeta, RouteRecordRaw } from 'vue-router';
+
+import { cloneDeep, defaultTo, get, has, isArray, isString, isUndefined, merge, omit } from 'lodash-es';
+import { defineStore } from 'pinia';
+import { setupDefaultLayout } from '@/core';
+import { callHookAsync } from '@/core/ctx';
+import { postRbacResourceMineOrAllResourceTree } from '@/features/api/modules/rbac';
+import { useWarn } from '@/features/composables';
+import { RESOURCE_TYPE } from '@/features/enum';
+import { getAsyncRoutes, getSystemRoutes } from '@/features/router';
+import { resolveRoutePath } from '@/utils';
+import { STORE_NAME } from '../enum';
+import { formatBackRoutes } from '../utils';
+import useSettingsStore from './settings';
+import useTabbarStore from './tabbar';
+import useUserStore from './user';
+
+export type RouteData = Route.recordMainRaw;
+
+const useRouteStore = defineStore(
+  STORE_NAME.ROUTE,
+  () => {
+    const asyncRoutes = getAsyncRoutes();
+
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    const tabbarStore = useTabbarStore();
+
+    const isGenerate = ref(false);
+    const routesRaw = ref<RouteData[]>([]);
+    const remoteRoutesRaw = ref<API.PubResourceTreeBo[]>([]);
+    const filesystemRoutesRaw = ref<RouteRecordRaw[]>([]);
+    const currentRemoveRoutes = ref<Array<{
+      (): void
+      system?: boolean
+    }>>([]);
+
+    /** 如果权限功能开启 / 不展示无权限菜单，则需要对路由数据进行筛选过滤 */
+    const needFilterRoutes = computed(() => {
+      const { app, menu } = settingsStore.settings;
+      return app.enablePermission && !menu.showWithoutPermission;
+    });
+
+    /**
+     * 创建面包屑对象
+     * @param currentRouter 当前路由对象
+     * @param baseUrl 基础路径
+     * @returns 面包屑对象
+     */
+    function createBreadcrumb(currentRouter: RouteRecordRaw, baseUrl?: RouteRecordRaw['path']): Route.breadcrumb {
+      const { title, icon, activeIcon, breadcrumb = true } = defaultTo(currentRouter.meta, {} as RouteMeta);
+      const path = defaultTo(baseUrl, currentRouter.path);
+      return {
+        path,
+        title,
+        icon,
+        activeIcon,
+        hide: !breadcrumb,
+      };
+    }
+
+    /**
+     * 创建路由
+     * @param rawRoute 原始路由
+     * @param baseUrl 基础路径
+     * @param auth 路由元数据中的权限
+     * @param breadcrumb 路由面包屑
+     * @returns 创建的路由
+     */
+    function createRoute(rawRoute: RouteRecordRaw, baseUrl: RouteRecordRaw['path'], auth: RouteMeta['auth'], breadcrumb: Route.breadcrumb[]) {
+      const breadcrumbStack = cloneDeep(breadcrumb);
+      const currentBreadcrumb = createBreadcrumb(rawRoute, baseUrl);
+      breadcrumbStack.push(currentBreadcrumb);
+
+      function removeChildren(route: RouteRecordRaw) {
+        if (has(route, 'children')) {
+          return omit(route, 'children');
+        }
+        return route;
+      }
+
+      const needMergeRouteRawData = {
+        path: baseUrl,
+        meta: {
+          auth,
+          breadcrumbNeste: breadcrumbStack,
+        },
+      };
+      const raw = toRaw(rawRoute);
+      const cloned = cloneDeep(raw);
+      const cleaned = removeChildren(cloned);
+      const finalRoute = merge(cleaned, needMergeRouteRawData) as RouteRecordRaw;
+      return finalRoute;
+    }
+
+    /**
+     * 递归地展开系统路由，同时创建面包屑。
+     * @param route - 要展开的路由。
+     * @returns 展开后的路由。
+     */
+    function flattenSystemRoutes<T extends RouteRecordRaw>(route: T): T {
+      if (route.children) {
+        route.children = flattenAsyncRoutesRecursive(
+          route.children,
+          [createBreadcrumb(route)],
+          route.path,
+          route.meta?.auth,
+        );
+      }
+      return route;
+    }
+
+    /**
+     * 递归地将异步路由扁平化。
+     *
+     * @param rawRoutes - 要扁平化的原始路由。
+     * @param breadcrumb - 当前路由的面包屑。
+     * @param baseUrl - 当前路由的基本URL。
+     * @param baseAuth - 当前路由的基本身份验证。
+     * @returns 扁平化后的路由。
+     */
+    function flattenAsyncRoutesRecursive(
+      rawRoutes: RouteRecordRaw[],
+      breadcrumb: Route.breadcrumb[] = [],
+      baseUrl = '',
+      baseAuth: RouteMeta['auth'],
+    ): RouteRecordRaw[] {
+      return toRaw(rawRoutes).reduce<RouteRecordRaw[]>((flatRoute, rawRoute) => {
+        const childrenBaseUrl = resolveRoutePath(baseUrl, rawRoute.path);
+        const childrenBaseAuth = defaultTo(rawRoute.meta?.auth, baseAuth);
+        const route = createRoute(rawRoute,
+          childrenBaseUrl,
+          childrenBaseAuth,
+          breadcrumb,
+        );
+        flatRoute.push(route);
+
+        if (rawRoute.children) {
+          const childrenRoutes = flattenAsyncRoutesRecursive(
+            rawRoute.children,
+            route?.meta?.breadcrumbNeste,
+            childrenBaseUrl,
+            childrenBaseAuth,
+          );
+
+          childrenRoutes.forEach((item) => {
+            if (flatRoute.some(v => v.path === item.path)) {
+              flatRoute.forEach((v, i) => {
+                if (v.path === item.path) {
+                  flatRoute[i] = item;
+                }
+              });
+            }
+            else {
+              flatRoute.push(item);
+            }
+          });
+        }
+        return flatRoute;
+      }, []);
+    }
+
+    /**
+     * 计算属性，返回扁平化的路由。
+     * 扁平化的路由是通过合并原始路由中每个路由的子路由而获得的。
+     * 扁平化的路由是通过合并 routesRaw 值中每个路由的子路由而获得的。
+     * @returns {RouteRecordRaw[]} 扁平化的路由。
+     */
+    const flatRoutes = computed(() => {
+      const flatRoutesRaw: RouteRecordRaw[] = [];
+
+      if (routesRaw.value.length) {
+        routesRaw.value.forEach((item) => {
+          // 开发模式应用只在TopMode中显示，点击时显示开发状态
+          if (get(item, 'meta.isDev', false)) {
+            useWarn(`开发模式应用"${item.meta?.title}"的子路由将不会被注册到vue-router中`);
+            return; // 跳过开发模式应用的路由扁平化
+          }
+
+          // TODO V1: 兼容写法，垫补后续逻辑需要有 children
+          if (item.children?.length) {
+            let tmpRoutes = cloneDeep(item.children);
+            tmpRoutes = tmpRoutes.map((childrenRoute) => {
+              return merge(
+                childrenRoute,
+                {
+                  meta: {
+                    auth: defaultTo(
+                      childrenRoute.meta?.auth,
+                      item.meta?.auth,
+                    ),
+                  },
+                },
+              );
+            });
+            flatRoutesRaw.push(...tmpRoutes);
+          }
+        });
+        flatRoutesRaw.forEach(item => flattenSystemRoutes(item));
+      }
+
+      return flatRoutesRaw;
+    });
+
+    /**
+     * 获取扁平化的系统路由。
+     * @returns {Array<RouteRecordRaw>} 扁平化的系统路由。
+     */
+    const flatSystemRoutes = computed(() => {
+      const systemRoutes = getSystemRoutes();
+      const routes = [...systemRoutes];
+      routes.forEach(item => flattenSystemRoutes(item));
+      return routes;
+    });
+
+    /**
+     * 确定用户是否有权限访问特定路由。
+     * @param permissions - 用户的权限。
+     * @param route - 要检查权限的路由。
+     * @returns 一个布尔值，指示用户是否有权限。
+     */
+    function hasPermission(permissions: string[], route: RouteData | RouteRecordRaw) {
+      if (isUndefined(route.meta?.auth)) {
+        return true;
+      }
+      const auth = route.meta.auth;
+      return toRaw(permissions).some((permissionCode) => {
+        if (isString(auth)) {
+          return auth !== ''
+            ? auth === permissionCode
+            : true;
+        }
+        else if (isArray(auth)) {
+          return auth.length !== 0
+            ? auth.includes(permissionCode)
+            : true;
+        }
+        else {
+          useWarn('路由权限类型配置错误, 请检查路由 meta.auth');
+          return false;
+        }
+      });
+    }
+
+    /**
+     * 根据提供的权限过滤异步路由。
+     *
+     * @template T - 路由数组的类型。
+     * @param {T} routes - 要过滤的路由数组。
+     * @param {string[]} permissions - 要检查的权限。
+     * @returns {T} - 过滤后的路由数组。
+     */
+    function filterAsyncRoutes<T extends Array<RouteData | RouteRecordRaw>>(routes: T, permissions: string[]): T {
+      const res: Array<RouteData | RouteRecordRaw> = [];
+      routes.forEach((route) => {
+        if (hasPermission(permissions, route)) {
+          const tmpRoute = cloneDeep(route);
+          if (tmpRoute.children && tmpRoute.children.length > 0) {
+            tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions);
+            if (tmpRoute.children.length || get(tmpRoute, 'meta.isDev', false)) {
+              res.push(tmpRoute);
+            }
+          }
+          else {
+            // TODO V1: 兼容写法，垫补后续逻辑需要有 children
+            if (get(tmpRoute, 'meta.isDev', false)) {
+              tmpRoute.children = [];
+            }
+            res.push(tmpRoute);
+          }
+        }
+      });
+      return res as T;
+    }
+
+    /**
+     * 计算属性，根据用户权限返回筛选后的路由。
+     * 如果权限功能已启用，则对路由进行筛选。
+     * 否则，原样返回路由。
+     *
+     * @returns {RouteData[]} 筛选后的路由。
+     */
+    const routes = computed<RouteData[]>(() => {
+      return needFilterRoutes.value
+        ? filterAsyncRoutes(routesRaw.value, userStore?.user?.permissions ?? [])
+        : cloneDeep(routesRaw.value);
+    });
+
+    // 将设置 meta.singleMenu 的一级路由转换成二级路由
+    function convertSingleRoutes<T extends RouteData[]>(routes: T) {
+      routes.map((route) => {
+        // 在应用级配置 meta.layoutComponent
+        const Layout = setupDefaultLayout(route?.meta?.layoutComponent);
+
+        if (route.children && route.children.length > 0) {
+          route.children.forEach((item, index, arr) => {
+            if (item.meta?.singleMenu) {
+              const { name, ...rest } = item;
+              arr[index] = {
+                ...rest,
+                component: Layout,
+                children: [
+                  {
+                    path: '',
+                    name,
+                    component: item.component,
+                    meta: {
+                      title: item.meta.title,
+                      sidebar: false,
+                      breadcrumb: false,
+                    },
+                  },
+                ],
+              } as RouteRecordRaw;
+              delete arr[index].meta!.singleMenu;
+            }
+
+            if (!item.component) {
+              item.component = Layout;
+            }
+
+            // 给一级路由设置 provider
+            if (route.meta?.provider) {
+              (item.meta as any) = {
+                ...item.meta,
+                provider: route.meta.provider,
+              };
+            }
+          });
+        }
+        return route;
+      });
+      return routes;
+    }
+
+    /**
+     * 过滤不启用的路由
+     * @param routes
+     */
+    function filterEnabledRoutes(routes: RouteData[]) {
+      if (!routes.length) {
+        return [];
+      }
+
+      return routes.filter((route) => {
+        if (route.children && route.children.length > 0) {
+          route.children = filterEnabledRoutes(route.children as any) as any;
+        }
+
+        return route?.meta?.enabled !== false;
+      });
+    }
+
+    /**
+     * 生成路由
+     */
+    async function generateRoutes() {
+      const res = await postRbacResourceMineOrAllResourceTree({ needAll: !needFilterRoutes.value });
+      if (res.success) {
+        remoteRoutesRaw.value = res?.data ?? [];
+        const staticRoutes = convertSingleRoutes(filterEnabledRoutes(cloneDeep(asyncRoutes)));
+
+        // 后端返回的路由树
+        const remoteRoutes = res.data?.map((route) => {
+          // 将本地应用替换成静态路由
+          if (route.type === RESOURCE_TYPE.APP) {
+            const foundStaticRoute = staticRoutes.find(staticRoute => staticRoute.meta?.auth === route.code);
+            // 但其子路由不会被注册到vue-router中，这由菜单系统和路由扁平化逻辑处理
+            if (foundStaticRoute && get(foundStaticRoute, 'meta.isDev', false)) {
+              useWarn(`静态应用"${foundStaticRoute.meta?.title}"处于开发模式，将在TopMode中显示开发状态`);
+            }
+            return foundStaticRoute;
+          }
+
+          // 将动态应用数据格式化成路由数据
+          if (route.type === RESOURCE_TYPE.DYNAMIC_APP) {
+            if (route.meta?.isDev) {
+              useWarn(`动态应用"${route.name}"处于开发模式，将在TopMode中显示开发状态`);
+            }
+
+            return formatBackRoutes([route])[0] as any;
+          }
+
+          return false;
+        }).filter(route => !!route) ?? [];
+
+        // 未出现在后端路由树中的静态路由
+        const restStaticRoutes = staticRoutes.filter((staticRoute) => {
+          const { auth } = staticRoute.meta ?? {};
+
+          if (isString(auth)) {
+            return !res.data?.map(route => route.code).includes(auth);
+          }
+
+          return true;
+        });
+
+        // 对后端路由和本地路由进行排序
+        const sortedRoutes = sortRoutesByRemoteOrder(
+          [...remoteRoutes, ...restStaticRoutes],
+          res.data ?? [],
+        );
+
+        // 对路由进行转换
+        routesRaw.value = await callHookAsync<RouteData[]>('route:transform', sortedRoutes);
+      }
+
+      if (settingsStore.settings.app.enablePermission) {
+        await userStore.getPermissions();
+      }
+
+      isGenerate.value = true;
+
+      // 加载常驻标签页
+      if (settingsStore.settings.tabbar.enable) {
+        tabbarStore.initPermanentTab();
+      }
+    }
+
+    function sortRoutesByRemoteOrder(
+      _routesRaw: RouteData[],
+      _remoteRoutesRaw: API.PubResourceTreeBo[],
+    ): RouteData[] {
+      const orderMap = new Map(_remoteRoutesRaw.map((r, i) => [r.code, i]));
+
+      const matched = _routesRaw.filter(r => orderMap.has(r.meta?.auth as string));
+      const unmatched = _routesRaw.filter(r => !orderMap.has(r.meta?.auth as string));
+
+      matched.sort((a, b) => {
+        const orderA = orderMap.get(a.meta.auth! as string) ?? Infinity;
+        const orderB = orderMap.get(b.meta.auth! as string) ?? Infinity;
+        return orderA - orderB;
+      });
+
+      return [...matched, ...unmatched];
+    }
+
+    /**
+     * 设置当前要移除的路由。
+     * @param {(() => void)[]} routes - 要设置的路由。
+     */
+    function setCurrentRemoveRoutes(routes: Array<{
+      (): void
+      system?: boolean
+    }>) {
+      currentRemoveRoutes.value = routes;
+    }
+
+    /**
+     * 移除所有路由并重置相关变量。
+     */
+    function removeRoutes(isRefresh = false) {
+      isGenerate.value = false;
+      routesRaw.value = [];
+      filesystemRoutesRaw.value = [];
+
+      if (isRefresh) {
+        currentRemoveRoutes.value = currentRemoveRoutes.value.filter(fn => fn.system);
+      }
+      else {
+        currentRemoveRoutes.value.forEach(removeRoute => removeRoute());
+        currentRemoveRoutes.value = [];
+      }
+    }
+
+    /**
+     * 根据路由的 meta.id 从远程路由原始数据中查找对应的资源
+     * @param route - 路由对象,如果不传则从当前路由获取
+     * @returns {API.PubResourceTreeBo | undefined} 找到的远程路由数据,未找到则返回 undefined
+     */
+    function getRemoteRouteById(route?: RouteData | RouteRecordRaw | RouteLocationNormalizedLoaded): API.PubResourceTreeBo | undefined {
+      // 如果没有传入 route,则尝试从 vue-router 获取当前路由
+      const targetRoute = route ?? (typeof useRoute === 'function' ? useRoute() : undefined);
+
+      if (!targetRoute) {
+        useWarn('getRemoteRouteById: 无法获取路由对象');
+        return undefined;
+      }
+
+      const id = targetRoute.meta?.id;
+
+      if (!id) {
+        useWarn('getRemoteRouteById: 路由 meta 中未找到 id');
+        return undefined;
+      }
+
+      /**
+       * 递归搜索路由树
+       * @param routes - 路由数组
+       * @returns 找到的路由数据
+       */
+      function searchInTree(routes: API.PubResourceTreeBo[]): API.PubResourceTreeBo | undefined {
+        for (const route of routes) {
+          if (route.id === id) {
+            return route;
+          }
+          if (route.children && route.children.length > 0) {
+            const found = searchInTree(route.children);
+            if (found) {
+              return found;
+            }
+          }
+        }
+        return undefined;
+      }
+
+      return searchInTree(remoteRoutesRaw.value);
+    }
+
+    /**
+     * 获取当前路由所属的顶层应用(APP)的远程路由原始数据
+     * @param route - 路由对象,如果不传则从当前路由获取
+     * @returns {API.PubResourceTreeBo | undefined} 找到的顶层应用远程路由数据,未找到则返回 undefined
+     */
+    function getRemoteAppRouteById(route?: RouteData | RouteRecordRaw | RouteLocationNormalizedLoaded): API.PubResourceTreeBo | undefined {
+      // 如果没有传入 route,则尝试从 vue-router 获取当前路由
+      const targetRoute = route ?? (typeof useRoute === 'function' ? useRoute() : undefined);
+
+      if (!targetRoute) {
+        useWarn('getRemoteAppRouteById: 无法获取路由对象');
+        return undefined;
+      }
+
+      const id = targetRoute.meta?.id;
+
+      if (!id) {
+        useWarn('getRemoteAppRouteById: 路由 meta 中未找到 id');
+        return undefined;
+      }
+
+      /**
+       * 递归搜索路由树,返回找到的节点的顶层应用
+       * @param routes - 路由数组
+       * @param parentApp - 当前的顶层应用
+       * @returns 找到的顶层应用
+       */
+      function searchInTree(
+        routes: API.PubResourceTreeBo[],
+        parentApp?: API.PubResourceTreeBo,
+      ): API.PubResourceTreeBo | undefined {
+        for (const route of routes) {
+          // 记录当前的顶层应用(type 为 APP 或 DYNAMIC_APP)
+          const currentApp = route.type === RESOURCE_TYPE.APP || route.type === RESOURCE_TYPE.DYNAMIC_APP
+            ? route
+            : parentApp;
+
+          if (route.id === id) {
+            return currentApp;
+          }
+
+          if (route.children && route.children.length > 0) {
+            const found = searchInTree(route.children, currentApp);
+            if (found) {
+              return found;
+            }
+          }
+        }
+        return undefined;
+      }
+
+      return searchInTree(remoteRoutesRaw.value);
+    }
+
+    return {
+      isGenerate,
+      routes,
+      currentRemoveRoutes,
+      flatRoutes,
+      flatSystemRoutes,
+      remoteRoutesRaw,
+      generateRoutes,
+      setCurrentRemoveRoutes,
+      removeRoutes,
+      getRemoteRouteById,
+      getRemoteAppRouteById,
+    };
+  },
+);
+
+export default useRouteStore;
+export type RouteStore = ReturnType<typeof useRouteStore>;