@skyfox2000/webui 1.0.13 → 1.2.0

package/src/stores/pageInfo.ts

@@ -0,0 +1,131 @@
+import { defineStore } from 'pinia';
+import { useAppInfo } from './appInfo';
+
+/**
+ * 标签页面属性
+ */
+interface TabPaneProps {
+   /**
+    * 唯一键，为url
+    * 如允许重复，则增加编号
+    */
+   key: string;
+   /**
+    * 标签标题
+    */
+   title: string;
+   /**
+    * 是否可关闭
+    * 默认：首页不可关闭
+    */
+   closable?: boolean;
+   /**
+    * 是否缓存页面
+    */
+   keepAlive?: boolean;
+   /**
+    * 内容组件
+    */
+   content: any;
+}
+
+interface PageInfo {
+   /**
+    * 标签页激活的key
+    */
+   TabActive: string;
+   /**
+    * 标签页列表
+    */
+   TabPanes: TabPaneProps[];
+   /**
+    * 是否开启多标签页
+    */
+   TabEnabled: boolean;
+}
+
+/**
+ * 内部调用，添加Tab，页面缓存不卸载
+ * @param key 路由地址：/子应用名/#路由地址
+ */
+const addTabPane = (tabInfo: TabPaneProps): void => {
+   const pageInfoStore = usePageInfo();
+   if (pageInfoStore.TabEnabled) {
+      // 允许添加标签页
+      if (findTabPane(tabInfo.key, pageInfoStore.TabPanes)) {
+         /// 已存在标签
+         return;
+      }
+      pageInfoStore.TabPanes.push(tabInfo);
+   }
+};
+
+const findTabPane = (key: string, tabs: TabPaneProps[]) => {
+   return tabs.find((item) => item.key === key);
+};
+
+export const usePageInfo = defineStore('pageInfo', {
+   state: (): PageInfo => ({
+      TabActive: '',
+      TabPanes: [],
+      TabEnabled: true,
+   }),
+   actions: {
+      /**
+       * 删除Tab，页面缓存不卸载
+       * @param path 路由地址：路由地址
+       */
+      removeTabPane(path: string): void {
+         if (this.TabEnabled) {
+            // 删除当前标签缓存
+            const appInfoStore = useAppInfo();
+            appInfoStore.excludeComponent(path);
+            // 删除标签页
+            let curIndex = 0;
+            let tabPanes = [...this.TabPanes];
+            for (let i = 0; i < tabPanes.length; i++) {
+               if (tabPanes[i].key === path) {
+                  tabPanes.splice(i, 1);
+                  curIndex = i - 1 < 0 ? 0 : i - 1;
+                  break;
+               }
+            }
+
+            for (let i = 0; i < tabPanes.length; i++) {
+               if (tabPanes[i].key === this.TabActive) {
+                  curIndex = i;
+                  break;
+               }
+            }
+
+            this.TabPanes = tabPanes;
+            this.setTabActive(tabPanes[curIndex].key);
+         }
+      },
+
+      /**
+       * 新增或激活Tab
+       * @param path 路由地址：路由地址
+       * @returns
+       */
+      async setTabActive(path: string): Promise<void> {
+         const appInfoStore = useAppInfo();
+         let menuItem = appInfoStore.findRoute(path);
+         if (!menuItem) return;
+
+         const tabInfo = {
+            key: path,
+            title: menuItem.name!.toString(),
+            content: '',
+            closable: true,
+            // 根据路由的meta.keepAlive确定是否加入对应缓存
+            // 默认为true
+            keepAlive: !(menuItem.meta && !menuItem.meta.keepAlive),
+         };
+
+         addTabPane(tabInfo);
+
+         this.TabActive = path;
+      },
+   },
+});

package/src/stores/pinia.ts

@@ -0,0 +1,10 @@
+import { createPinia } from 'pinia';
+import piniaPersistedstate from 'pinia-plugin-persistedstate';
+
+// 创建 Pinia 实例
+const pinia = createPinia();
+
+// 应用持久化插件
+pinia.use(piniaPersistedstate);
+
+export { pinia };

package/src/stores/settingInfo.ts

@@ -0,0 +1,53 @@
+import { SettingInfo } from '@skyfox2000/microbase';
+
+import { defineStore } from 'pinia';
+
+const SETTINGINFO_STORE_KEY = 'settingInfoStore';
+
+export const useSettingInfo = defineStore('settingInfo', {
+   state: (): SettingInfo => ({
+      fullscreen: false,
+      menuCollapse: false,
+      tableColumns: {},
+   }),
+   actions: {
+      /**
+       * 设置全屏
+       */
+      setFullscreen(status: boolean) {
+         this.$patch({
+            fullscreen: status,
+         });
+      },
+      /**
+       * 设置主菜单区折叠
+       */
+      setMenuCollapse(status: boolean) {
+         this.$patch({
+            menuCollapse: status,
+         });
+      },
+      /**
+       * 获取表格头配置
+       */
+      getTableColumns(pageUrl: string) {
+         return this.tableColumns[pageUrl];
+      },
+      /**
+       * 设置表格头配置
+       */
+      setTableColumns(pageUrl: string, columns: Record<string, any>[]) {
+         this.$patch({
+            tableColumns: {
+               ...this.tableColumns,
+               [pageUrl]: columns,
+            },
+         });
+      },
+   },
+   persist: {
+      key: SETTINGINFO_STORE_KEY,
+      storage: localStorage,
+      pick: ['fullscreen', 'menuCollapse', 'tableColumns'],
+   },
+});

package/src/stores/userInfo.ts

@@ -0,0 +1,392 @@
+import { defineStore } from 'pinia';
+import { ApiResponse, httpPost, IUrlInfo, ReqParams, ResStatus, setToken } from '@skyfox2000/fapi';
+import message from 'vue-m-message';
+import { LoginInfo, UserInfo } from '@skyfox2000/microbase';
+import { ref } from 'vue';
+import { useAppInfo } from './appInfo';
+
+const USERINFO_STORE_KEY = 'userInfoStore';
+
+const TokenError = 'Token解析失败';
+const LoginExpired = '登录过期，请重新登录';
+
+/** 登录相关接口 */
+const LoginUrlList: {
+   /** 登录信息 */
+   login: IUrlInfo;
+   /** 获取界面授权 */
+   auth: IUrlInfo;
+   /** 退出登录 */
+   logout: IUrlInfo;
+} = {
+   login: {
+      api: 'PLATFORM_API',
+      url: '/openapi/LoginSrv/login',
+      loadingText: false,
+   },
+   auth: {
+      api: 'PLATFORM_API',
+      authorize: true,
+      url: '/api/RCAccountOpSrv/getPermits',
+      loadingText: false,
+   },
+   logout: {
+      api: 'PLATFORM_API',
+      authorize: true,
+      url: '/api/LoginSrv/logout',
+      loadingText: '正在退出...',
+   },
+};
+
+/**
+ * 登录接口操作
+ * @param loginInfo 登录信息
+ * @returns
+ */
+const loginApi = <T>(loginInfo: LoginInfo): Promise<ApiResponse<T> | null | undefined> => {
+   let loginParams: ReqParams = {
+      Option: {},
+      Query: loginInfo,
+   };
+
+   return httpPost<T>(LoginUrlList.login, loginParams).then((result: ApiResponse<T> | null) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         return result;
+      }
+      return null;
+   });
+};
+
+/**
+ * 界面授权信息接口
+ */
+interface AuthInfo {
+   /** 应用ID */
+   appId: string;
+   /** 用户角色级别 */
+   level: string;
+   /** 权限信息 */
+   permits: Record<string, string[]>;
+   /** 最后更新时间 */
+   lastTime: number;
+}
+
+/**
+ * 获取用户界面授权
+ * @param appId 应用ID
+ * @returns 授权信息
+ */
+const getRolePermitsApi = <T>(appId: string): Promise<T | null | undefined> => {
+   let authParams: ReqParams = {
+      Query: {
+         AppId: appId,
+      },
+   };
+
+   return httpPost<T>(LoginUrlList.auth, authParams).then((result) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         return result.data as T;
+      }
+      message.error('获取授权信息失败，' + result?.msg!);
+      return null;
+   });
+};
+
+/**
+ * 退出登录接口
+ * @returns 退出结果
+ */
+const logoutApi = <T>(): Promise<T | null | undefined> => {
+   let logoutParams: ReqParams = {
+      Option: {},
+      Query: {},
+   };
+
+   return httpPost<T>(LoginUrlList.logout, logoutParams).then((result: ApiResponse<T> | null) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         return result.data as T;
+      }
+      return null;
+   });
+};
+
+/**
+ * 解析JWT token并检查是否过期
+ * @param token JWT token字符串
+ * @returns 检查结果
+ */
+const isTokenExpired = (token: string): boolean => {
+   try {
+      const payload = JSON.parse(atob(token.split('.')[1])); // 解析payload部分
+      const exp = payload.exp; // 获取过期时间
+
+      const now = Date.now() / 1000; // 当前时间戳转换为秒
+      return now > exp; // 检查是否过期
+   } catch (error) {
+      console.error(TokenError, error);
+      return true; // 如果解析失败，认为token已过期
+   }
+};
+
+/**
+ * 检查token是否过期
+ * @returns 检查结果
+ */
+const checkToken = (token: string, onClose?: () => void): boolean => {
+   if (token == '') {
+      message.error(LoginExpired, {
+         duration: 3000,
+         onClose,
+      });
+      return false;
+   }
+
+   if (isTokenExpired(token)) {
+      message.error(LoginExpired, {
+         duration: 3000,
+         onClose,
+      });
+      return false;
+   }
+
+   return true;
+};
+
+const expandUser = (loginInfo: LoginInfo): boolean => {
+   try {
+      const payload = JSON.parse(atob(loginInfo.token!.split('.')[1])); // 解析payload部分
+      payload.user = JSON.parse(payload.user); // 解析payload部分
+
+      loginInfo.UserInfo = payload.user;
+
+      return true; // 检查是否过期
+   } catch (error) {
+      console.error(TokenError, error);
+      return false; // 如果解析失败，认为token已过期
+   }
+};
+
+/**
+ * Store状态接口
+ */
+interface UserState {
+   /** 是否登录 */
+   isLogin: boolean;
+   /** 用户信息 */
+   userInfo: UserInfo;
+   /** 用户Token */
+   token?: string;
+   /** 刷新Token */
+   refreshToken?: string;
+}
+
+/** 授权信息（私有） */
+const auth = ref<AuthInfo | null>(null);
+/**
+ * 当前登录用户信息
+ */
+export const useUserInfo = defineStore('userInfo', {
+   state: (): UserState => ({
+      isLogin: false,
+      userInfo: {
+         Id: '',
+         Name: '',
+         Code: '',
+         TenantId: null,
+         UserLevel: 'Guest',
+      },
+      token: '',
+      refreshToken: '',
+   }),
+   actions: {
+      /**
+       * 启动时初始化用户信息
+       */
+      init() {
+         if (this.token && this.isLogin) {
+            setToken(this.token);
+            checkToken(this.token, () => this.clean());
+         } else {
+            this.clean();
+         }
+      },
+      /**
+       * 登录操作
+       * @param loginInfo 登录信息
+       * @returns
+       */
+      async login(loginInfo: LoginInfo, redirect?: boolean): Promise<ApiResponse<LoginInfo> | void> {
+         const result = await loginApi<LoginInfo>(loginInfo);
+         if (result) {
+            const errInfo = result as ApiResponse<LoginInfo>;
+            if (errInfo.errno) {
+               return errInfo;
+            } else {
+               const loginInfo = result.data as LoginInfo;
+               this.token = loginInfo.token!;
+               setToken(this.token);
+               this.isLogin = true;
+
+               if (expandUser(loginInfo)) {
+                  this.userInfo = {
+                     ...this.userInfo,
+                     ...loginInfo.UserInfo!,
+                  };
+               } else {
+                  message.error('用户信息解析失败');
+                  return;
+               }
+
+               // 加载子应用
+               if (redirect) {
+                  const appInfoStore = await useAppInfo();
+                  appInfoStore.toDefaultApp();
+               }
+            }
+         }
+      },
+
+      /**
+       * 获取应用授权信息
+       * @param appId 应用ID
+       * @returns 是否获取成功
+       */
+      async getRolePermits(appId: string): Promise<boolean> {
+         if (!this.isLogin || !this.token) {
+            return false;
+         }
+
+         // 如果授权信息存在且应用ID相同，即已获取过授权信息
+         if (auth.value && auth.value.appId === appId) {
+            return true;
+         }
+
+         try {
+            const result = await getRolePermitsApi<AuthInfo>(appId);
+            if (result) {
+               // 保存授权信息到内存中
+               auth.value = {
+                  appId: appId,
+                  level: this.userInfo.UserLevel,
+                  permits: (result as AuthInfo).permits || [],
+                  lastTime: (result as AuthInfo).lastTime,
+               };
+
+               return true;
+            } else {
+               return false;
+            }
+         } catch (error) {
+            console.error('获取授权信息出错', error);
+            return false;
+         }
+      },
+
+      /**
+       * 检查角色权限
+       * @param role 资源角色编码需求
+       * @returns 是否有角色权限
+       */
+      hasRole(role: string | string[]): boolean {
+         if (!auth.value || !auth.value.level) {
+            return false;
+         }
+         if (Array.isArray(role)) {
+            return role.includes(auth.value.level);
+         }
+         return auth.value.level === role;
+      },
+
+      /**
+       * 检查功能权限
+       * @param permitCode 资源权限编码
+       * @returns 是否有功能权限
+       */
+      hasPermit(url: string, permitCode: string): boolean {
+         if (!auth.value || !auth.value.permits) {
+            return false;
+         }
+         return auth.value.permits[url]?.includes(permitCode) ?? false;
+      },
+
+      /**
+       * 获取用户信息
+       * @returns 用户Token
+       */
+      getUserInfo(): UserInfo {
+         return this.userInfo;
+      },
+
+      /**
+       * 获取用户Token
+       * @returns 用户Token
+       */
+      getToken(): string {
+         if (
+            checkToken(this.token!, () => {
+               this.clean();
+               this.logout();
+            })
+         ) {
+            return this.token!;
+         }
+         return '';
+      },
+
+      /*
+       * 清理登录信息
+       */
+      async clean(): Promise<void> {
+         this.userInfo = {
+            Id: '',
+            Name: '',
+            Code: '',
+            TenantId: '',
+            UserLevel: '',
+         };
+
+         this.token = '';
+         setToken(this.token);
+         this.isLogin = false;
+         // 清理授权信息
+         auth.value = null;
+
+         // 动态导入并使用appInfo
+         const appInfoStore = await useAppInfo();
+         appInfoStore.clear();
+         return Promise.resolve();
+      },
+
+      /**
+       * 登出操作
+       * @returns
+       */
+      async logout(): Promise<void> {
+         try {
+            // 调用后端登出接口
+            await logoutApi<any>();
+         } catch (error) {
+            console.error('调用登出接口失败', error);
+         } finally {
+            // 无论登出接口是否成功，都执行本地登出操作
+            await this.clean();
+
+            // 跳转到登录页
+            setTimeout(async () => {
+               message.success('已退出登录');
+            }, 1000);
+            setTimeout(async () => {
+               const appInfoStore = await useAppInfo();
+               appInfoStore.logout();
+            }, 2000);
+         }
+
+         return Promise.resolve();
+      },
+   },
+   persist: {
+      key: USERINFO_STORE_KEY,
+      storage: localStorage,
+      pick: ['isLogin', 'userInfo', 'token', 'refreshToken'],
+   },
+});

package/src/typings/data.d.ts

@@ -0,0 +1,81 @@
+import { Ref } from 'vue';
+import { PageControl } from './page';
+import { AnyData, ApiResponse, IUrlInfo, ReqParams } from '@skyfox2000/fapi';
+
+/**
+ * 任何控制对象的通用接口
+ * 包括TreeControl和GridControl等
+ */
+export interface AnyControl {
+   /**
+    * 所属页面控制器
+    */
+   page: PageControl<AnyData>;
+
+   /**
+    * URL信息
+    */
+   url?: IUrlInfo;
+
+   /**
+    * 是否重新加载相关数据
+    */
+   reload?: Ref<boolean>;
+}
+
+/**
+ * 通用选项
+ */
+export interface PostOptions<T> {
+   /**
+    * Page页面URL的Key
+    */
+   urlKey: string;
+
+   /**
+    * 自定义URL，优先使用
+    */
+   url?: IUrlInfo;
+
+   /**
+    * 执行提示文字
+    * - false时，不显示提示文字
+    * - 空时，显示默认文字
+    */
+   loadingText?: string | boolean;
+
+   /**
+    * 是否隐藏错误提示
+    */
+   hideErrorToast?: boolean;
+
+   /**
+    * 执行参数
+    */
+   params?: ReqParams;
+
+   /**
+    * 处理参数的函数
+    */
+   processParams?: (params: ReqParams) => ReqParams;
+
+   /**
+    * 加载状态引用
+    */
+   loadingState?: Ref<boolean>;
+}
+
+/**
+ * 执行选项
+ */
+export interface ExecuteOptions<T> extends PostOptions<T> {
+   /**
+    * 主键字段名
+    */
+   primaryKey?: string;
+
+   /**
+    * 状态字段名
+    */
+   statusKey?: string;
+}