@skyfox2000/webui 1.0.13 → 1.2.0

package/src/stores/appInfo.ts

@@ -0,0 +1,471 @@
+import { defineStore } from 'pinia';
+import { Router, RouteRecordRaw } from 'vue-router';
+import { AppAction, AppInfo, AppSource, isBaseMicroApp, isMicroApp, RouteRecord } from '@skyfox2000/microbase';
+import AppRouter, { addAppRoutes, continueNavigation, flattenRoute, LOGIN_PATH } from '@/router';
+import { usePageInfo } from './pageInfo';
+
+import { Component, h, nextTick } from 'vue';
+import { useUserInfo } from './userInfo';
+import { ApiResponse, httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
+import message from 'vue-m-message';
+
+const APPINFO_STORE_KEY = 'appInfoStore';
+
+/** 授权应用相关接口 */
+const AppUrlList: {
+   /** 授权应用列表 */
+   appList: IUrlInfo;
+} = {
+   appList: {
+      api: 'PLATFORM_API',
+      authorize: true,
+      url: '/api/RCTenanetOpSrv/getApps',
+      loadingText: false,
+   },
+};
+
+// 定义一个映射，用于存储不同路由路径对应的组件包装器
+const wrapperMap = new Map<string, Component>();
+
+// 根据用户权限过滤路由
+const filterRoutes = (routes: RouteRecord[], userInfoStore: any) => {
+   return routes
+      .map((route) => {
+         // 创建路由对象的副本
+         const routeCopy = { ...route };
+
+         // 如果没有配置角色和权限，默认允许访问
+         if (!routeCopy.meta?.roles?.length && !routeCopy.meta?.permission?.length) {
+            if (routeCopy.children) {
+               routeCopy.children = filterRoutes(routeCopy.children, userInfoStore);
+            }
+            return routeCopy;
+         }
+
+         // 如果配置了角色或权限，满足任意一个条件即可
+         const hasRole = routeCopy.meta?.roles?.length ? userInfoStore.hasRole(routeCopy.meta.roles) : false;
+         const hasPermission = routeCopy.meta?.permission?.length
+            ? userInfoStore.hasPermit(routeCopy.meta.permission, ':page')
+            : false;
+
+         // 如果当前路由有权限访问
+         if (hasRole || hasPermission) {
+            if (routeCopy.children) {
+               routeCopy.children = filterRoutes(routeCopy.children, userInfoStore);
+            }
+            return routeCopy;
+         }
+
+         return null;
+      })
+      .filter(Boolean) as RouteRecord[];
+};
+
+/**
+ * 查找第一个可用页面路由
+ * @param routes 路由列表
+ * @param path 当前路径前缀
+ * @returns 第一个可用页面的完整路径
+ */
+const findFirstPage = (routes: RouteRecord[], path = ''): string | undefined => {
+   for (const route of routes) {
+      // 如果没有子路由且没有重定向，说明是一个页面路由
+      if (!route.children && !route.redirect) {
+         // 正确拼接路径，确保以 / 开头
+         let fullPath = path + route.path;
+         // 确保路径以 / 开头
+         if (!fullPath.startsWith('/')) {
+            fullPath = '/' + fullPath;
+         }
+         return fullPath;
+      }
+
+      // 如果有子路由且不是特殊路由，递归查找
+      if (
+         route.children &&
+         route.children.length > 0 &&
+         route.path !== '/error' &&
+         route.path !== '/login' &&
+         route.path !== '/:page(.*)'
+      ) {
+         // 递归调用并获取结果
+         const result = findFirstPage(route.children, path + route.path + '/');
+         // 如果找到结果，立即返回
+         if (result) {
+            return result;
+         }
+      }
+   }
+   // 如果没有找到任何页面路由，返回 undefined
+   return undefined;
+};
+
+export const useAppInfo = defineStore('appInfo', {
+   state: (): {
+      /// 微前端基座路由
+      microRouter: any;
+      /// 微前端基座方法
+      microActions: Record<string, () => void>;
+      /// 当前选中的
+      appInfo: AppInfo & {
+         /**
+          * 应用路由
+          */
+         Routes: RouteRecordRaw[];
+         /**
+          * 平铺路由地址，方便快速查找
+          */
+         flattenRoutes: Record<string, RouteRecord>;
+         /**
+          * 默认页面
+          */
+         defaultPage: string;
+      };
+      /// 当前应用列表
+      appList: AppInfo[];
+      /**
+       * 缓存的组件
+       */
+      CachedComponents: string[];
+      /**
+       * 不缓存的组件
+       */
+      ExcludeComponents: string[];
+      /**
+       * 菜单是否已加载完成
+       */
+      menuLoaded: boolean;
+   } => ({
+      microRouter: null,
+      microActions: {},
+      appInfo: {
+         Id: '',
+         Name: '',
+         AppCode: '',
+         Version: '',
+         Host: '',
+         Source: AppSource.Manual,
+         Action: AppAction.App,
+         Path: '',
+         Icon: '',
+         Routes: [],
+         flattenRoutes: {},
+         defaultPage: '',
+         Enabled: 1,
+      },
+      appList: [],
+      CachedComponents: [],
+      ExcludeComponents: [],
+      menuLoaded: false,
+   }),
+   actions: {
+      init(router: Router, microActions: Record<string, () => void>) {
+         this.microRouter = router;
+         this.microActions = microActions;
+      },
+      /**
+       * 加载授权应用列表
+       */
+      async loadAppList(appList?: AppInfo[]): Promise<void> {
+         return new Promise(async (resolve) => {
+            if (appList && appList.length > 0) {
+               this.appList.length = 0;
+               /// 本地加载
+               setTimeout(async () => {
+                  this.appList.push(...appList);
+                  // 添加应用路由
+                  //  addRootRoutes(this.appList);
+                  // if (this.appList.length > 0) {
+                  //    const defaultApp = this.appList.find((item) => item.Default);
+                  //    if (defaultApp) this.setActiveApp(defaultApp.AppCode);
+                  //    else this.setActiveApp(this.appList[0].AppCode);
+                  // }
+                  resolve();
+               }, 1000);
+            } else if (this.appList.length === 0) {
+               /// 远程加载
+               await this.getRemoteAppList();
+               resolve();
+            } else {
+               resolve();
+            }
+         });
+      },
+
+      async getRemoteAppList(): Promise<void> {
+         // 从服务器获取
+         return httpPost<AppInfo[]>(AppUrlList.appList, {
+            Query: {},
+         }).then((result: ApiResponse<AppInfo[]> | null) => {
+            if (result?.status === ResStatus.SUCCESS && result.data) {
+               this.appList.length = 0;
+               this.appList.push(...(result.data as AppInfo[]));
+            }
+         });
+      },
+
+      async toDefaultApp(url?: string) {
+         if (this.appList.length === 0) await this.loadAppList();
+         if (this.appList.length === 0) {
+            message.error('加载应用列表失败');
+            return;
+         }
+         // 默认地址的应用
+         let appCode = '';
+         const codes = window.location.pathname.split('/');
+         if (codes.length > 1) {
+            for (let i = codes.length - 1; i >= 0; i--) {
+               if (codes[i] !== '') {
+                  appCode = codes[i];
+                  break;
+               }
+            }
+         }
+
+         let defaultApp = null;
+         if (appCode && appCode != 'login') {
+            defaultApp = this.appList.find((item) => item.AppCode === appCode);
+         } else {
+            defaultApp = this.appList.find((item) => item.Default);
+         }
+         // 设置默认应用
+         appCode = defaultApp ? defaultApp.AppCode : this.appList[0].AppCode;
+
+         // 设置当前激活应用
+         await this.setActiveApp(appCode); // 替换当前路由并清空历史记录
+
+         // 如果未配置默认应用，则跳转到第一个应用
+         if (!url || url.startsWith('/#/') || url.includes('/error/') || window.location.hash.includes('/error/'))
+            this.push(this.appInfo.defaultPage);
+      },
+
+      /**
+       * 设置当前应用
+       * @param key 应用码
+       * @returns
+       */
+      async setActiveApp(key: string, appRoutes?: RouteRecord[]): Promise<void> {
+         this.menuLoaded = false;
+         const appInfo = this.appList.find((item) => item.AppCode === key);
+         if (!appInfo) {
+            return;
+         }
+         if (appInfo.AppCode !== this.appInfo.AppCode) {
+            this.appInfo = {
+               ...appInfo,
+               flattenRoutes: {},
+               Routes: appRoutes ?? [],
+               defaultPage: '',
+            };
+         }
+
+         if (!isMicroApp() || !isBaseMicroApp()) {
+            /// 非基座应用，获取用户应用权限
+            /// 获取用户应用权限
+            const userInfoStore = await useUserInfo();
+            await userInfoStore.getRolePermits(appInfo.Id);
+
+            if (this.appInfo.Routes.length) this.setAppRoutes(this.appInfo.Routes);
+         }
+      },
+
+      /**
+       * 设置当前应用路由信息
+       * @param routes 路由信息
+       */
+      setAppRoutes(appRoutes: RouteRecord[]): void {
+         this.appInfo = {
+            ...this.appInfo,
+            flattenRoutes: {},
+            Routes: appRoutes,
+            defaultPage: '',
+         };
+
+         const flattenRoutes = this.appInfo.flattenRoutes;
+         for (const route of appRoutes) {
+            flattenRoute(route, flattenRoutes, undefined);
+         }
+
+         /**
+          * 设置路由组件缓存信息
+          */
+         Object.keys(flattenRoutes).forEach((key) => {
+            const route = flattenRoutes[key];
+            // 如果路由有 children 或者没有 component 参数，则忽略该条
+            if (route.children || !route.component) return;
+
+            // 根据路由的 meta.keepAlive 属性决定添加到哪个数组
+            if (route.meta && route.meta.keepAlive === false) {
+               this.ExcludeComponents.push(key);
+            } else {
+               this.CachedComponents.push(key);
+            }
+         });
+
+         /// 根据用户权限过滤菜单
+         const userInfoStore = useUserInfo();
+         if (userInfoStore.isLogin) {
+            const filteredRoutes = filterRoutes(this.appInfo.Routes, userInfoStore as any);
+            addAppRoutes(filteredRoutes);
+            this.appInfo.defaultPage = findFirstPage(filteredRoutes) || '';
+            if (this.appInfo.defaultPage) {
+               this.menuLoaded = true;
+               continueNavigation(this.appInfo.defaultPage);
+            }
+         }
+      },
+
+      /**
+       * 根据地址，返回组合地址结构，/类型/子应用名/#/路由地址
+       * @param path 路由地址
+       * @returns
+       */
+      formatRoute(path: string): string {
+         let fullPath = path;
+
+         if (!path.includes('#')) {
+            if (this.appInfo.AppCode)
+               fullPath = '/' + this.appInfo.Action.toLowerCase() + '/' + this.appInfo.AppCode + '/#' + path;
+            else fullPath = '/#' + path;
+         } else if (path.startsWith('#')) {
+            fullPath = '/' + this.appInfo.Action.toLowerCase() + '/' + this.appInfo.AppCode + '/' + path;
+         }
+         return fullPath;
+      },
+
+      /**
+       * 应用导航，菜单路由，都使用此处导航
+       * @param path 路由地址
+       */
+      push(path: string): void {
+         let menuItem = this.findRoute(path);
+         if (menuItem) {
+            // 菜单路由，显示在Tab内
+            usePageInfo().setTabActive(path);
+         }
+         nextTick(() => {
+            if (isBaseMicroApp()) {
+               // 跨应用路由
+               path = this.formatRoute(path);
+               if (this.microRouter) {
+                  /// 基座路由
+                  let microRouter = this.microRouter as Router;
+                  microRouter.push({ path });
+               } else {
+                  AppRouter.push({ path });
+               }
+            } else {
+               // 非微应用，直接使用当前应用路由AppRouter
+               AppRouter.push({ path });
+            }
+         });
+      },
+
+      /**
+       * 快速查找路由信息
+       * @param key 路由地址
+       * @returns
+       */
+      findRoute(key: string): RouteRecord | undefined {
+         return this.appInfo.flattenRoutes[key];
+      },
+
+      /**
+       * 根据路由信息返回组件实例
+       * @param component 组件
+       * @param route 路由
+       * @returns 组件实例
+       */
+      cacheComponent(component: Component, route: { path: string }) {
+         // 从映射中获取当前路由路径对应的组件包装器
+         let wrapper = wrapperMap.get(route.path);
+         if (!wrapper) {
+            // 是否设置了缓存组件
+            if (this.CachedComponents.includes(route.path)) {
+               wrapper = {
+                  // 设置组件包装器的名称为路由路径
+                  name: route.path,
+                  render() {
+                     // 使用h函数创建一个组件实例
+                     return h(component);
+                  },
+               };
+               wrapperMap.set(route.path, wrapper);
+            } else return component;
+         }
+
+         // 返回当前路由路径对应的组件包装器
+         return wrapper;
+      },
+
+      /**
+       * 删除缓存组件
+       * @param path 路由地址
+       */
+      excludeComponent(path: string): void {
+         // 检查是否存在
+         if (!this.ExcludeComponents.includes(path)) {
+            this.ExcludeComponents.push(path);
+         }
+         // 删除缓存
+         this.CachedComponents.splice(this.CachedComponents.indexOf(path), 1);
+         // 删除包装器
+         wrapperMap.delete(path);
+      },
+
+      /**
+       * 路由路径层级查询，返回面包屑
+       */
+      matchedRoutes(key: string): RouteRecord[] {
+         const matched: RouteRecord[] = [];
+         const matchedRoute = this.findRoute(key);
+
+         if (matchedRoute) {
+            matched.push(matchedRoute);
+            if (matchedRoute.parent) {
+               const subMatched = this.matchedRoutes(matchedRoute.parent.path);
+               matched.push(...subMatched);
+            }
+         }
+         return matched.reverse();
+      },
+
+      clear() {
+         /// 清空信息
+         this.appInfo = {
+            Id: '',
+            Name: '',
+            AppCode: '',
+            Version: '',
+            Host: '',
+            Source: AppSource.Manual,
+            Action: AppAction.App,
+            Path: '',
+            Icon: '',
+            Routes: [],
+            flattenRoutes: {},
+            defaultPage: '',
+            Enabled: 1,
+         };
+         this.CachedComponents.splice(0, this.CachedComponents.length);
+         this.ExcludeComponents.splice(0, this.ExcludeComponents.length);
+         this.appList.splice(0, this.appList.length);
+         this.menuLoaded = false;
+      },
+
+      logout() {
+         if (this.microRouter) {
+            // 避免界面跳动
+            // this.microRouter.push({ path: LOGIN_PATH + '#/' });
+            if (this.microActions && typeof this.microActions['login'] === 'function') {
+               this.microActions['login']();
+            }
+         } else AppRouter.push({ path: LOGIN_PATH + '#/' });
+      },
+   },
+   persist: {
+      key: APPINFO_STORE_KEY,
+      storage: localStorage,
+      pick: ['appList'],
+   },
+});

package/src/stores/hostInfo.ts

@@ -0,0 +1,117 @@
+import { API_HOST, ApiResponse, httpPost, IUrlInfo, ResStatus, SERVER_HOST } from '@skyfox2000/fapi';
+
+import { HostInfo, MainOpenApis } from '@skyfox2000/microbase';
+
+import { defineStore } from 'pinia';
+
+// import { Cache, CacheKeys } from '@/utils/cache';
+
+// const HOSTINFO_STORE_KEY = 'hostInfoStore';
+
+/** 站点相关接口 */
+const HostUrlList: {
+   /** 站点信息 */
+   host: IUrlInfo;
+} = {
+   host: {
+      api: 'SITEHOST_API',
+      url: '/openapi/RCSiteHostSrv/get',
+      fieldMap: {
+         hostId: 'Id',
+         hostName: 'Title',
+      },
+      loadingText: '站点配置加载中……',
+      // 不显示错误
+      hideErrorToast: true,
+   },
+};
+
+export const useHostInfo = defineStore('hostInfo', {
+   state: (): {
+      hostInfo: HostInfo;
+   } => ({
+      hostInfo: {
+         Host: '',
+         Title: '',
+         API_HOST: {},
+         SERVER_HOST: {},
+         ExtraProps: {},
+         ExtraPropLines: [],
+      },
+   }),
+   actions: {
+      /**
+       * 加载站点信息，如加载失败，则使用本地缓存或默认参数
+       * @param hostApi 启动配置主机地址
+       * @param hostKey 站点信息，默认为当前主域名
+       * @param mainOpenApis 宿主机开放接口
+       */
+      async loadHostInfo(hostApi: string, hostKey?: string, mainOpenApis?: MainOpenApis): Promise<void> {
+         if (mainOpenApis) {
+            this._setHostInfo(mainOpenApis.getHostInfo());
+            return;
+         }
+         return new Promise((resolve) => {
+            if (!API_HOST['SITEHOST_API']) API_HOST['SITEHOST_API'] = hostApi;
+
+            const host = hostKey || window.location.origin;
+            // const cacheKey = `${CacheKeys.HOST_INFO}${host}`;
+
+            // 尝试从缓存获取
+            // const cachedHostInfo = Cache.getData<HostInfo>(cacheKey);
+            // if (cachedHostInfo) {
+            //    this._setHostInfo(cachedHostInfo);
+            //    resolve();
+            //    return;
+            // }
+
+            // 从服务器获取
+            httpPost<HostInfo>(HostUrlList.host, {
+               Query: {
+                  Host: host,
+               },
+            }).then((result: ApiResponse<HostInfo> | null) => {
+               if (result?.status === ResStatus.SUCCESS && result.data) {
+                  const hostInfo = result.data as HostInfo;
+                  this._setHostInfo(hostInfo);
+
+                  // 使用缓存代替持久化存储
+                  // 检查是否有 lastTime 字段
+                  // if (hostInfo.lastTime) {
+                  //    Cache.setWithServerTime(cacheKey, hostInfo, hostInfo.lastTime);
+                  // }
+                  // 不存储，避免数据无法更新
+               }
+               resolve();
+            });
+         });
+      },
+
+      /**
+       * 设置主机信息（私有方法）
+       */
+      _setHostInfo(hostInfo: HostInfo): void {
+         this.hostInfo = {
+            ...this.hostInfo,
+            ...hostInfo,
+         };
+         if (this.hostInfo.API_HOST) {
+            for (const key in this.hostInfo.API_HOST) API_HOST[key] = this.hostInfo.API_HOST[key];
+         }
+         if (this.hostInfo.SERVER_HOST) {
+            for (const key in this.hostInfo.SERVER_HOST) SERVER_HOST[key] = this.hostInfo.SERVER_HOST[key];
+         }
+      },
+
+      getHostInfo(): HostInfo {
+         return this.hostInfo;
+      },
+   },
+   // 使用自定义数据缓存
+   persist: false,
+   // persist: {
+   //    key: HOSTINFO_STORE_KEY,
+   //    storage: localStorage,
+   //    pick: ['hostInfo'],
+   // },
+});