@skyfox2000/webui 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.2.5",
+   "version": "1.2.7",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],
@@ -66,4 +66,4 @@
       "vite-plugin-dts": "^4.5.4",
       "vue-tsc": "^2.2.10"
    }
-}
+}

package/src/components/layout/header/headerExits.vue

@@ -2,11 +2,10 @@
 import { ref } from 'vue';
 import { Modal, Flex } from 'ant-design-vue';
 import { mainAppApis } from '@skyfox2000/microbase';
-import { ToolIcon } from '../../common';
+import { ToolIcon, Tooltip } from '../../common';
 import { useUserInfo } from '@/index';
 
 const userInfoStore = useUserInfo();
-
 const open = ref(false);
 const confirmExit = () => {
    open.value = false;
@@ -18,11 +17,13 @@ const confirmExit = () => {
 };
 </script>
 <template>
-   <ToolIcon icon="icon-logout" @click="open = true" clickable class="w-5 h-5" title="退出系统" />
+   <Tooltip title="退出平台">
+      <ToolIcon icon="icon-logout" @click="open = true" clickable class="w-5 h-5" title="退出系统" />
+   </Tooltip>
    <Modal v-model:open="open" title="确定退出？" ok-text="确定" cancel-text="取消" :width="380" @ok="confirmExit">
       <Flex align="center" justify="flex-start" :style="{ padding: '0 32px', margin: '20px 0' }">
          <ToolIcon icon="icon-question-circle" color="orange" class="w-[60px] h-[60px]" />
-         <div style="margin: 0 0 0 20px; font-weight: 400; font-size: 16px">是否退出系统，<br />清除用户缓存信息？</div>
+         <div style="margin: 0 0 0 20px; font-weight: 400; font-size: 16px">是否退出平台，<br />清除用户缓存信息？</div>
       </Flex>
    </Modal>
 </template>

package/src/components/layout/header/index.vue

@@ -5,6 +5,7 @@ import { ToolIcon } from '../../common';
 import Breadcrumb from '../breadcrumb/index.vue';
 import HeaderExits from './headerExits.vue';
 import User from './user.vue';
+import DateTime from '../datetime/index.vue';
 
 const { useToken } = theme;
 const { token } = useToken();
@@ -21,7 +22,7 @@ const onCollapseClick = () => {
          height: '40px',
          lineHeight: '1',
          paddingLeft: '10px',
-         paddingRight: '10px',
+         paddingRight: '20px',
          backgroundColor: token.colorBgContainer,
       }"
    >
@@ -37,7 +38,8 @@ const onCollapseClick = () => {
       </div>
       <div>
          <Space size="middle" class="flex items-center">
-            <User class="w-7 h-7" />
+            <DateTime />
+            <User />
             <HeaderExits />
          </Space>
       </div>

package/src/components/layout/header/user.vue

@@ -6,6 +6,9 @@ const userInfo = useUserInfo().userInfo;
 </script>
 <template>
    <Tooltip :title="userInfo.Name">
-      <AppIcon icon="icon-account" />
+      <div class="flex items-center flex-nowrap">
+         <span class="mr-2 text-sm whitespace-nowrap">{{ userInfo.Name }}</span>
+         <AppIcon icon="icon-account" />
+      </div>
    </Tooltip>
 </template>

package/src/directives/permission.ts

@@ -93,8 +93,12 @@ const checkPermission = (params: PermissionParams): boolean => {
       let hasPermitPermission = false;
 
       // 检查角色权限
-      if (!isEmpty(role) && role !== undefined) {
-         hasRolePermission = userInfoStore.hasRole(role);
+      if (!isEmpty(role)) {
+         hasRolePermission = userInfoStore.hasRole(role!);
+      }
+
+      if (userInfoStore.isAdmin()) {
+         return hasRolePermission;
       }
 
       // 检查功能权限

package/src/router/index.ts

@@ -1,5 +1,5 @@
 import { useUserInfo } from '@/stores/userInfo';
-import { isMicroApp, mainAppApis, RouteRecord, EnvConfig } from '@skyfox2000/microbase';
+import { RouteRecord, EnvConfig } from '@skyfox2000/microbase';
 import { RouteLocationNormalizedGeneric, RouteRecordRaw, Router, createRouter, createWebHashHistory } from 'vue-router';
 import { useAppInfo } from '@/stores/appInfo';
 import { Ref, ref } from 'vue';
@@ -166,16 +166,6 @@ router.beforeEach((to, _from, next) => {
    }
 });
 
-/**
- * 子应用更新主应用路由
- */
-router.afterEach((to: RouteLocationNormalizedGeneric) => {
-   if (isMicroApp() && mainAppApis.value) {
-      const { mainAppPush } = mainAppApis.value;
-      if (mainAppPush) mainAppPush(to.hash);
-   }
-});
-
 /**
  * 继续执行之前挂起的导航
  * @param path 默认路径

package/src/stores/appInfo.ts

@@ -1,15 +1,25 @@
 import { defineStore } from 'pinia';
-import { Router, RouteRecordRaw } from 'vue-router';
-import { AppAction, AppInfo, AppSource, isBaseMicroApp, isMicroApp, RouteRecord } from '@skyfox2000/microbase';
+import { RouteRecordRaw } from 'vue-router';
+import {
+   AppAction,
+   AppInfo,
+   AppSource,
+   isBaseMicroApp,
+   isMicroApp,
+   mainAppApis,
+   RouteRecord,
+   EnvConfig,
+} from '@skyfox2000/microbase';
 import AppRouter, { addAppRoutes, continueNavigation, flattenRoute, LOGIN_PATH } from '@/router';
 import { usePageInfo } from './pageInfo';
+import { isEmpty } from '@/utils/isEmpty';
 
 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 APPINFO_STORE_KEY = 'appInfoStore';
 
 /** 授权应用相关接口 */
 const AppUrlList: {
@@ -27,31 +37,68 @@ const AppUrlList: {
 // 定义一个映射，用于存储不同路由路径对应的组件包装器
 const wrapperMap = new Map<string, Component>();
 
+/**
+ * 检查路由权限
+ * @param route 路由信息
+ * @returns 是否有权限访问
+ */
+const checkRoutePermission = (route: RouteRecord): boolean => {
+   const userInfoStore = useUserInfo();
+   const { roles, permission }: { roles?: string | string[]; permission?: string } = route.meta || {};
+   // 如果都没有配置，默认允许访问
+   if (isEmpty(roles) && isEmpty(permission)) {
+      return true;
+   }
+
+   if (EnvConfig.VITE_PERMISSION_MODE === 'role') {
+      // 仅判断角色权限
+      if (!isEmpty(roles) && roles) {
+         return userInfoStore.hasRole(roles);
+      }
+      // 如果没有配置角色，默认允许访问
+      return true;
+   } else if (EnvConfig.VITE_PERMISSION_MODE === 'permit') {
+      // 角色和权限任意一个有效即可
+      let hasRolePermission = false;
+      let hasPermitPermission = false;
+
+      // 检查角色权限
+      if (!isEmpty(roles) && roles) {
+         hasRolePermission = userInfoStore.hasRole(roles);
+      }
+
+      // 如果是管理员，只需要检查角色权限
+      if (userInfoStore.isAdmin()) {
+         return hasRolePermission;
+      }
+
+      // 检查功能权限
+      if (!isEmpty(permission) && permission) {
+         hasPermitPermission = userInfoStore.hasPermit(route.path, permission);
+      }
+
+      // 任意一个有权限即可
+      return hasRolePermission || hasPermitPermission;
+   }
+
+   // 默认不允许访问
+   return false;
+};
+
 // 根据用户权限过滤路由
-const filterRoutes = (routes: RouteRecord[], userInfoStore: any) => {
+const filterRoutes = (routes: RouteRecord[]) => {
    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;
+         // 检查路由权限
+         const hasPermission = checkRoutePermission(routeCopy);
 
          // 如果当前路由有权限访问
-         if (hasRole || hasPermission) {
+         if (hasPermission) {
             if (routeCopy.children) {
-               routeCopy.children = filterRoutes(routeCopy.children, userInfoStore);
+               routeCopy.children = filterRoutes(routeCopy.children);
             }
             return routeCopy;
          }
@@ -102,10 +149,6 @@ const findFirstPage = (routes: RouteRecord[], path = ''): string | undefined =>
 
 export const useAppInfo = defineStore('appInfo', {
    state: (): {
-      /// 微前端基座路由
-      microRouter: any;
-      /// 微前端基座方法
-      microActions: Record<string, () => void>;
       /// 当前选中的
       appInfo: AppInfo & {
          /**
@@ -136,8 +179,6 @@ export const useAppInfo = defineStore('appInfo', {
        */
       menuLoaded: boolean;
    } => ({
-      microRouter: null,
-      microActions: {},
       appInfo: {
          Id: '',
          Name: '',
@@ -159,10 +200,6 @@ export const useAppInfo = defineStore('appInfo', {
       menuLoaded: false,
    }),
    actions: {
-      init(router: Router, microActions: Record<string, () => void>) {
-         this.microRouter = router;
-         this.microActions = microActions;
-      },
       /**
        * 加载授权应用列表
        */
@@ -264,8 +301,8 @@ export const useAppInfo = defineStore('appInfo', {
 
          if (!isMicroApp() || !isBaseMicroApp()) {
             /// 非基座应用，获取用户应用权限
+            const userInfoStore = useUserInfo();
             /// 获取用户应用权限
-            const userInfoStore = await useUserInfo();
             await userInfoStore.getRolePermits(appInfo.Id);
 
             if (this.appInfo.Routes.length) this.setAppRoutes(this.appInfo.Routes);
@@ -306,13 +343,16 @@ export const useAppInfo = defineStore('appInfo', {
          });
 
          /// 根据用户权限过滤菜单
-         const userInfoStore = useUserInfo();
-         if (userInfoStore.isLogin) {
-            const filteredRoutes = filterRoutes(this.appInfo.Routes, userInfoStore as any);
+         if (useUserInfo().isLogin) {
+            const filteredRoutes = filterRoutes(this.appInfo.Routes);
             addAppRoutes(filteredRoutes);
             this.appInfo.defaultPage = findFirstPage(filteredRoutes) || '';
             if (this.appInfo.defaultPage) {
                this.menuLoaded = true;
+               if (mainAppApis.value && mainAppApis.value.mainAppPush) {
+                  const fullPath = this.formatRoute(this.appInfo.defaultPage);
+                  mainAppApis.value.mainAppPush(fullPath);
+               }
                continueNavigation(this.appInfo.defaultPage);
             }
          }
@@ -347,19 +387,11 @@ export const useAppInfo = defineStore('appInfo', {
             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 });
+            // 直接使用当前应用路由AppRouter
+            AppRouter.push({ path });
+            if (mainAppApis.value && mainAppApis.value.mainAppPush) {
+               const fullPath = this.formatRoute(path);
+               mainAppApis.value.mainAppPush(fullPath);
             }
          });
       },
@@ -433,7 +465,7 @@ export const useAppInfo = defineStore('appInfo', {
          return matched.reverse();
       },
 
-      clear() {
+      clean() {
          /// 清空信息
          this.appInfo = {
             Id: '',
@@ -457,18 +489,15 @@ export const useAppInfo = defineStore('appInfo', {
       },
 
       logout() {
-         if (this.microRouter) {
-            // 避免界面跳动
-            // this.microRouter.push({ path: LOGIN_PATH + '#/' });
-            if (this.microActions && typeof this.microActions['login'] === 'function') {
-               this.microActions['login']();
+         // 清理应用信息
+         this.clean();
+         AppRouter.push({ path: LOGIN_PATH + '#/' });
+         if (isMicroApp()) {
+            if (mainAppApis.value && mainAppApis.value.mainAppPush) {
+               mainAppApis.value.mainAppPush(LOGIN_PATH + '#/');
             }
-         } else AppRouter.push({ path: LOGIN_PATH + '#/' });
+         }
       },
    },
-   persist: {
-      key: APPINFO_STORE_KEY,
-      storage: localStorage,
-      pick: ['appList'],
-   },
+   persist: false,
 });

package/src/stores/pageInfo.ts

@@ -128,4 +128,5 @@ export const usePageInfo = defineStore('pageInfo', {
          this.TabActive = path;
       },
    },
+   persist: false,
 });

package/src/stores/settingInfo.ts

@@ -2,8 +2,6 @@ import { SettingInfo } from '@skyfox2000/microbase';
 
 import { defineStore } from 'pinia';
 
-const SETTINGINFO_STORE_KEY = 'settingInfoStore';
-
 export const useSettingInfo = defineStore('settingInfo', {
    state: (): SettingInfo => ({
       fullscreen: false,
@@ -45,9 +43,5 @@ export const useSettingInfo = defineStore('settingInfo', {
          });
       },
    },
-   persist: {
-      key: SETTINGINFO_STORE_KEY,
-      storage: localStorage,
-      pick: ['fullscreen', 'menuCollapse', 'tableColumns'],
-   },
+   persist: false,
 });

package/src/stores/userInfo.ts

@@ -5,8 +5,6 @@ import { LoginInfo, UserInfo } from '@skyfox2000/microbase';
 import { ref } from 'vue';
 import { useAppInfo } from './appInfo';
 
-const USERINFO_STORE_KEY = 'userInfoStore';
-
 const TokenError = 'Token解析失败';
 const LoginExpired = '登录过期，请重新登录';
 
@@ -45,7 +43,9 @@ const LoginUrlList: {
  */
 const loginApi = <T>(loginInfo: LoginInfo): Promise<ApiResponse<T> | null | undefined> => {
    let loginParams: ReqParams = {
-      Option: {},
+      Option: {
+         Mode: 'MicroApp',
+      },
       Query: loginInfo,
    };
 
@@ -57,20 +57,6 @@ const loginApi = <T>(loginInfo: LoginInfo): Promise<ApiResponse<T> | null | unde
    });
 };
 
-/**
- * 界面授权信息接口
- */
-interface AuthInfo {
-   /** 应用ID */
-   appId: string;
-   /** 用户角色级别 */
-   level: string;
-   /** 权限信息 */
-   permits: Record<string, string[]>;
-   /** 最后更新时间 */
-   lastTime: number;
-}
-
 /**
  * 获取用户界面授权
  * @param appId 应用ID
@@ -180,8 +166,26 @@ interface UserState {
    refreshToken?: string;
 }
 
+/**
+ * 界面授权信息接口
+ */
+interface AuthInfo {
+   /** 应用ID */
+   appId: string;
+   /** 权限信息 */
+   permits: Record<string, string[]>;
+   /** 最后更新时间 */
+   lastTime: number;
+}
+
+/** 用户角色级别 */
+const userLevel = ref<string>('');
 /** 授权信息（私有） */
+/** 应用ID
+ * 这是子应用，不可能有多个应用
+ */
 const auth = ref<AuthInfo | null>(null);
+
 /**
  * 当前登录用户信息
  */
@@ -193,23 +197,12 @@ export const useUserInfo = defineStore('userInfo', {
          Name: '',
          Code: '',
          TenantId: null,
-         UserLevel: 'Guest',
+         UserLevel: '',
       },
       token: '',
       refreshToken: '',
    }),
    actions: {
-      /**
-       * 启动时初始化用户信息
-       */
-      init() {
-         if (this.token && this.isLogin) {
-            checkToken(this.token, () => this.clean());
-            setToken(this.token);
-         } else {
-            this.clean();
-         }
-      },
       /**
        * 登录操作
        * @param loginInfo 登录信息
@@ -228,10 +221,12 @@ export const useUserInfo = defineStore('userInfo', {
                this.isLogin = true;
 
                if (expandUser(loginInfo)) {
+                  // 用户信息不显示用户级别，必须通过接口获取
                   this.userInfo = {
                      ...this.userInfo,
                      ...loginInfo.UserInfo!,
                   };
+                  userLevel.value = loginInfo.UserInfo!.UserLevel;
                } else {
                   message.error('用户信息解析失败');
                   return;
@@ -239,7 +234,7 @@ export const useUserInfo = defineStore('userInfo', {
 
                // 加载子应用
                if (redirect) {
-                  const appInfoStore = await useAppInfo();
+                  const appInfoStore = useAppInfo();
                   appInfoStore.toDefaultApp();
                }
             }
@@ -262,14 +257,13 @@ export const useUserInfo = defineStore('userInfo', {
          }
 
          try {
-            const result = await getRolePermitsApi<AuthInfo>(appId);
+            const result: AuthInfo | null | undefined = await getRolePermitsApi<AuthInfo>(appId);
             if (result) {
                // 保存授权信息到内存中
                auth.value = {
                   appId: appId,
-                  level: this.userInfo.UserLevel,
                   permits: (result as AuthInfo).permits || [],
-                  lastTime: (result as AuthInfo).lastTime,
+                  lastTime: result.lastTime,
                };
 
                return true;
@@ -288,25 +282,27 @@ export const useUserInfo = defineStore('userInfo', {
        * @returns 是否有角色权限
        */
       hasRole(role: string | string[]): boolean {
-         if (!auth.value || !auth.value.level) {
+         if (!userLevel.value) {
             return false;
          }
          if (Array.isArray(role)) {
-            return role.includes(auth.value.level);
+            return role.includes(userLevel.value);
          }
-         return auth.value.level === role;
+         return userLevel.value === role;
       },
 
       /**
        * 检查功能权限
+       * @param url 所在页面
        * @param permitCode 资源权限编码
        * @returns 是否有功能权限
        */
       hasPermit(url: string, permitCode: string): boolean {
-         if (!auth.value || !auth.value.permits) {
+         const authInfo = auth.value;
+         if (!authInfo || !authInfo.permits) {
             return false;
          }
-         return auth.value.permits[url]?.includes(permitCode) ?? false;
+         return authInfo.permits[url]?.includes(permitCode) ?? false;
       },
 
       /**
@@ -317,19 +313,29 @@ export const useUserInfo = defineStore('userInfo', {
          return this.userInfo;
       },
 
+      /**
+       * 设置用户信息
+       * 仅允许设置一次，启动时设置，避免通过其它方式设置
+       * @param userInfo 用户信息
+       * @param token 用户Token
+       */
       setUserInfo(userInfo: UserInfo, token: string) {
          if (!checkToken(token)) {
             this.clean();
             return;
          }
 
-         this.userInfo = {
-            ...this.userInfo,
-            ...userInfo,
-         };
-         this.token = token;
-         setToken(this.token);
-         this.isLogin = true;
+         if (!userLevel.value) {
+            // 仅允许设置一次，启动时设置，避免通过其它方式设置
+            userLevel.value = userInfo.UserLevel;
+            this.userInfo = {
+               ...this.userInfo,
+               ...userInfo,
+            };
+            this.token = token;
+            setToken(this.token);
+            this.isLogin = true;
+         }
       },
 
       /**
@@ -348,6 +354,28 @@ export const useUserInfo = defineStore('userInfo', {
          return '';
       },
 
+      /**
+       * 是否超级管理员
+       */
+      isSuperAdmin(): boolean {
+         return userLevel.value === 'Super';
+      },
+
+      /**
+       * 是否管理员
+       */
+      isAdmin(): boolean {
+         return userLevel.value === 'Super' || userLevel.value === 'Admin';
+      },
+
+      /**
+       * 获取用户级别
+       * @returns 用户级别
+       */
+      getUserLevel(): string {
+         return userLevel.value;
+      },
+
       /*
        * 清理登录信息
        */
@@ -365,10 +393,11 @@ export const useUserInfo = defineStore('userInfo', {
          this.isLogin = false;
          // 清理授权信息
          auth.value = null;
+         userLevel.value = '';
 
          // 动态导入并使用appInfo
-         const appInfoStore = await useAppInfo();
-         appInfoStore.clear();
+         const appInfoStore = useAppInfo();
+         appInfoStore.clean();
          return Promise.resolve();
       },
 
@@ -391,7 +420,7 @@ export const useUserInfo = defineStore('userInfo', {
                message.success('已退出登录');
             }, 1000);
             setTimeout(async () => {
-               const appInfoStore = await useAppInfo();
+               const appInfoStore = useAppInfo();
                appInfoStore.logout();
             }, 2000);
          }
@@ -399,9 +428,5 @@ export const useUserInfo = defineStore('userInfo', {
          return Promise.resolve();
       },
    },
-   persist: {
-      key: USERINFO_STORE_KEY,
-      storage: localStorage,
-      pick: ['isLogin', 'userInfo', 'token', 'refreshToken'],
-   },
+   persist: false,
 });

package/src/utils/main-openapis.ts

@@ -61,12 +61,4 @@ export const getUserInfo = (): UserInfo => {
    if (mainAppApis.value && mainAppApis.value.getUserInfo) return mainAppApis.value.getUserInfo();
    const userInfoStore = useUserInfo();
    return userInfoStore.getUserInfo();
-};
-
-/**
- * 子应用推送路由变更
- */
-export const mainAppPush = (subPath: string) => {
-   const appInfoStore = useAppInfo();
-   appInfoStore.push(subPath);
-};
+};