hrp-ui-base 1.0.4 → 1.0.5

package/src/components/layout/stores/useLayoutConfigStore.ts

@@ -0,0 +1,229 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { ElMessage } from "element-plus";
+import HomeController from "../../../api/bms/home/HomeController";
+import { setDarkStyle, setWhiteStyle, setFontSizeMode } from "../../../styles/style-set";
+
+export class UserConfigBo {
+  /** 字体大小 small medium large */
+  fontSize: "small" | "medium" | "large" = "medium";
+  /** 白天/黑夜 day night */
+  dayOrNight: "day" | "night" = "day";
+  /** 是否跟随系统 */
+  followSystem: boolean = false;
+  /** 是否开启新手引导 */
+  noviceGuide: boolean = false;
+  /** 用户id */
+  userId: string = "";
+  /** 用户名称 */
+  userName: string = "";
+  /** 用户头像 */
+  avatar: string = "";
+  /** 部门列表 */
+  deptBaseVoList: { deptId: string; deptName: string }[] = [];
+  /** 租户id */
+  tenantId: string = "";
+  /** 租户name */
+  tenantName: string = "";
+  /** 文件上传类型 */
+  fileUploadType: string = "";
+  /** 是否折叠左侧导航栏 */
+  navigationBar: boolean = false;
+  /** 菜单栏位置 top 顶部 left 左侧 */
+  menuPosition: "top" | "left" = "top";
+}
+
+export const useLayoutConfigStore = defineStore(
+  "layout-config",
+  () => {
+    const userConfig = ref<UserConfigBo>(new UserConfigBo());
+
+    /** 获取用户个性化配置 */
+    const getUserConfig = async () => {
+      await HomeController.getPersonalization()
+        .then((data) => {
+          if (data.code == 200 && data.res) {
+            userConfig.value.fontSize = data.res.personalizationBo.fontSize;
+            userConfig.value.dayOrNight = data.res.personalizationBo.dayOrNight;
+            userConfig.value.followSystem = data.res.personalizationBo.followSystem;
+            userConfig.value.noviceGuide = data.res.personalizationBo.noviceGuide;
+            userConfig.value.userId = data.res.userBaseInfoVo.userId;
+            userConfig.value.userName = data.res.userBaseInfoVo.userName;
+            userConfig.value.avatar = data.res.userBaseInfoVo.avatar;
+            userConfig.value.deptBaseVoList = data.res.deptBaseVoList;
+            userConfig.value.tenantId = data.res.tenantId;
+            userConfig.value.tenantName = data.res.tenantName;
+            userConfig.value.fileUploadType = data.res.fileUploadType;
+            userConfig.value.navigationBar = data.res.personalizationBo.navigationBar;
+            userConfig.value.menuPosition = data.res.personalizationBo.menuPosition || "top";
+            setLocalUserConfig();
+            followSystemColorModel(userConfig.value.followSystem, true);
+            changeFontSize(userConfig.value.fontSize, true);
+          } else {
+            changeFontSize("medium", true);
+            changeDark("day", true);
+            ElMessage({ message: "获取个人信息失败..", type: "error" });
+          }
+        })
+        .catch(() => {
+          changeFontSize("medium", true);
+          changeDark("day", true);
+          ElMessage({ message: "获取个人信息失败..", type: "error" });
+        });
+    };
+
+    /** 更改用户配置 */
+    const changeUserConfig = async () => {
+      const submitObj = {
+        fontSize: userConfig.value.fontSize,
+        dayOrNight: userConfig.value.dayOrNight,
+        followSystem: !!userConfig.value.followSystem,
+        noviceGuide: !!userConfig.value.noviceGuide,
+        navigationBar: !!userConfig.value.navigationBar,
+        menuPosition: userConfig.value.menuPosition || "top",
+      };
+      await HomeController.savePersonalization(submitObj).then((data) => {
+        if (data.code === 200) {
+          console.debug("修改成功！");
+          getUserConfig();
+        }
+      });
+    };
+
+    /** 设置本地存储 */
+    const setLocalUserConfig = () => {
+      sessionStorage.setItem("userConfig", JSON.stringify(userConfig.value));
+    };
+
+    /** 读取本地存储 */
+    const readLocalUserConfig = async () => {
+      try {
+        const userConfigSession = sessionStorage.getItem("userConfig");
+        if (userConfigSession) {
+          userConfig.value = JSON.parse(userConfigSession);
+        } else {
+          await getUserConfig();
+        }
+      } catch (error) {
+        await getUserConfig();
+      }
+    };
+
+    /** 修改字体大小 */
+    const changeFontSize = (size: "small" | "medium" | "large", isSystem?: boolean) => {
+      userConfig.value.fontSize = size;
+      setFontSizeMode(size);
+      if (!isSystem) {
+        changeUserConfig();
+      }
+    };
+
+    /** 修改黑夜模式 */
+    const changeDark = (dayOrNight: "day" | "night", isSystem?: boolean) => {
+      userConfig.value.dayOrNight = dayOrNight;
+      if (dayOrNight === "night") {
+        setDarkStyle();
+      } else {
+        setWhiteStyle();
+      }
+      if (!isSystem) {
+        changeUserConfig();
+      }
+    };
+
+    /** 跟随系统颜色模式 */
+    const followSystemColorModel = (followSystem: boolean, isSystem?: boolean) => {
+      userConfig.value.followSystem = followSystem;
+      if (followSystem) {
+        changeDark(isDarkMode() ? "night" : "day", isSystem);
+      } else {
+        changeDark(userConfig.value.dayOrNight, isSystem);
+      }
+    };
+
+    /** 切换昼夜模式的动画 */
+    function changeDarkAnimation(dayOrNight: "day" | "night", event: any) {
+      // @ts-ignore
+      if (!document.startViewTransition) {
+        changeDark(dayOrNight);
+        return;
+      }
+      // @ts-ignore
+      const transition = document.startViewTransition(() => changeDark(dayOrNight));
+      transition.ready.then(() => {
+        const x = event?.clientX || window.innerWidth - 130;
+        const y = event?.clientY || 50;
+        const endRadius = Math.hypot(
+          Math.max(x, innerWidth - x),
+          Math.max(y, innerHeight - y)
+        );
+        const clipPath = [
+          `circle(0px at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ];
+        document.documentElement.animate(
+          {
+            clipPath:
+              userConfig.value.dayOrNight === "night"
+                ? [...clipPath].reverse()
+                : clipPath,
+          },
+          {
+            duration: 400,
+            easing: "ease-in",
+            pseudoElement:
+              userConfig.value.dayOrNight === "night"
+                ? "::view-transition-old(root)"
+                : "::view-transition-new(root)",
+          }
+        );
+      });
+    }
+
+    /** 判断当前环境是否是黑夜模式 */
+    function isDarkMode() {
+      return !!(
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      );
+    }
+
+    /** 初始化基础配置 — 监听系统颜色模式变化 */
+    const initUserConfig = () => {
+      const mqList = window.matchMedia("(prefers-color-scheme: dark)");
+      mqList.addEventListener("change", (event) => {
+        if (userConfig.value.followSystem) {
+          changeDark(event.matches ? "night" : "day");
+        }
+      });
+    };
+
+    /** 修改新手引导的配置 */
+    const changeNoviceGuide = (noviceGuide: boolean) => {
+      userConfig.value.noviceGuide = noviceGuide;
+      changeUserConfig();
+    };
+
+    /** 修改菜单栏位置 */
+    const changeMenuPosition = (menuPosition: "top" | "left") => {
+      userConfig.value.menuPosition = menuPosition;
+      changeUserConfig();
+    };
+
+    return {
+      userConfig,
+      getUserConfig,
+      setLocalUserConfig,
+      readLocalUserConfig,
+      changeUserConfig,
+      changeFontSize,
+      changeDark,
+      changeDarkAnimation,
+      followSystemColorModel,
+      isDarkMode,
+      initUserConfig,
+      changeNoviceGuide,
+      changeMenuPosition,
+    };
+  }
+);

package/src/components/layout/stores/useLayoutMenuStore.ts

@@ -0,0 +1,232 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { ElMessage } from "element-plus";
+import HomeController from "../../../api/bms/home/HomeController";
+import type HomeMenu from "../../../api/bms/home/bo/HomeMenu";
+import type DomainVO from "../../../api/bms/home/bo/DomainVO";
+import exitLogin from "../../../utils/exitLogin";
+import { useLayoutTabsStore } from "./useLayoutTabsStore";
+
+/** 布局菜单 Store — 管理菜单树、系统切换、domain 信息 */
+export const useLayoutMenuStore = defineStore(
+  "layout-menu",
+  () => {
+    /** 当前人所有的权限菜单数据 */
+    const routerData = ref<HomeMenu[]>([]);
+    /** 当前选中的二级菜单 index */
+    const currentSecondIndex = ref<number>(0);
+    /** 当前应用信息 */
+    const currentApplication = ref<DomainVO>({} as DomainVO);
+    /** 收藏的列表 */
+    const collectionList = ref<HomeMenu[]>([]);
+    /** 常用的列表 */
+    const commonUseList = ref<HomeMenu[]>([]);
+
+    /** 获取路由数据 */
+    const getRouterData = async () => {
+      const sysId: string =
+        typeof localStorage.getItem("current-application-id") === "string"
+          ? (localStorage.getItem("current-application-id") as string)
+          : "";
+      await HomeController.getHomeMenu("2", sysId).then((data) => {
+        if (data.code === 200 && data.res) {
+          routerData.value =
+            data.res.homeMenuList &&
+            Array.isArray(data.res.homeMenuList) &&
+            data.res.homeMenuList.length > 0
+              ? data.res.homeMenuList
+              : [];
+        }
+      });
+    };
+
+    /** 切换二级菜单 index，isUserChange 时自动跳转第一个页面 */
+    const changeCurrentSecondIndex = (
+      index: number,
+      isUserChange: boolean = false,
+      router?: any
+    ) => {
+      currentSecondIndex.value = index;
+      try {
+        const firstUrl =
+          routerData.value[0]?.children?.[index]?.children?.[0]?.children?.[0]?.url;
+        if (firstUrl && isUserChange && router) {
+          router.push(firstUrl);
+          // 通过事件通知侧边栏展开
+          const targetThirdMenuId =
+            routerData.value[0].children[index].children[0].menuId;
+          if (targetThirdMenuId) {
+            window.dispatchEvent(
+              new CustomEvent("openSidebarMenu", {
+                detail: { url: firstUrl, targetThirdMenuId },
+              })
+            );
+          }
+        }
+      } catch (error) {
+        console.log(error);
+        ElMessage.warning("路由信息维护异常！");
+      }
+    };
+
+    /** 获取当前的 domain 信息与路由信息 */
+    const getDomainAndHomeMenu = async (aimPath: string, router?: any) => {
+      await HomeController.getDomainInfoByUrl(aimPath).then(async (data) => {
+        if (data.code == 200 && data.res) {
+          currentApplication.value = data.res;
+          localStorage.setItem("current-application-id", data.res.domainId);
+          localStorage.setItem("current-application-name", data.res.domainName);
+          localStorage.setItem("current-application", JSON.stringify(data.res));
+          // 切换系统时加载对应系统的标签页数据
+          const tabsStore = useLayoutTabsStore();
+          tabsStore.switchSystem();
+          await getRouterData();
+
+          let aimSystemIndex = -1;
+          try {
+            for (let i = 0; i < routerData.value[0].children.length; i++) {
+              let ifFindI = false;
+              for (let j = 0; j < routerData.value[0].children[i].children.length; j++) {
+                let ifFindJ = false;
+                for (
+                  let z = 0;
+                  z < routerData.value[0].children[i].children[j].children.length;
+                  z++
+                ) {
+                  if (
+                    aimPath.indexOf(
+                      routerData.value[0].children[i].children[j].children[z].url
+                    ) > -1
+                  ) {
+                    ifFindJ = true;
+                    ifFindI = true;
+                    aimSystemIndex = i;
+                    break;
+                  }
+                }
+                if (ifFindJ) break;
+              }
+              if (ifFindI) break;
+            }
+          } catch (error) {}
+
+          if (aimSystemIndex > -1) {
+            changeCurrentSecondIndex(aimSystemIndex, false);
+          } else {
+            ElMessage.warning("系统与菜单不匹配，跳转失败，请手动跳转!");
+            changeCurrentSecondIndex(0, true, router);
+          }
+        }
+      });
+    };
+
+    /** 消息跳转前先判断是否跨系统 */
+    const getDomainAndHomeMenuBefore = async (aimPath: string, router?: any) => {
+      const originApplicationId = localStorage.getItem("current-application-id");
+      await HomeController.getDomainInfoByUrl(aimPath).then(async (data) => {
+        if (data.code == 200 && data.res) {
+          if (originApplicationId != data.res.domainId) {
+            currentApplication.value = data.res;
+            localStorage.setItem("current-application-id", data.res.domainId);
+            localStorage.setItem("current-application-name", data.res.domainName);
+            localStorage.setItem("current-application", JSON.stringify(data.res));
+            await getRouterData();
+
+            let aimSystemIndex = -1;
+            try {
+              for (let i = 0; i < routerData.value[0].children.length; i++) {
+                let ifFindI = false;
+                for (let j = 0; j < routerData.value[0].children[i].children.length; j++) {
+                  let ifFindJ = false;
+                  for (
+                    let z = 0;
+                    z < routerData.value[0].children[i].children[j].children.length;
+                    z++
+                  ) {
+                    if (
+                      aimPath.indexOf(
+                        routerData.value[0].children[i].children[j].children[z].url
+                      ) > -1
+                    ) {
+                      ifFindJ = true;
+                      ifFindI = true;
+                      aimSystemIndex = i;
+                      break;
+                    }
+                  }
+                  if (ifFindJ) break;
+                }
+                if (ifFindI) break;
+              }
+            } catch (error) {}
+
+            if (aimSystemIndex > -1) {
+              changeCurrentSecondIndex(aimSystemIndex, false);
+            } else {
+              ElMessage.warning("系统与菜单不匹配，跳转失败，请手动跳转!");
+              changeCurrentSecondIndex(0, true, router);
+            }
+          }
+        }
+      });
+    };
+
+    /** 新增/取消收藏菜单 */
+    const addCollectionList = async (
+      toCollect: boolean,
+      menuId: string,
+      menuItem?: HomeMenu
+    ) => {
+      await HomeController.saveCollectedMenu({
+        menuId,
+        collected: toCollect,
+      }).then((data) => {
+        if (data.code == 200) {
+          ElMessage.success(toCollect ? "收藏成功" : "取消收藏成功");
+          getCollectionList();
+          getRouterData();
+          if (menuItem) {
+            menuItem.collected = toCollect;
+          }
+        }
+      });
+    };
+
+    /** 获取收藏列表 */
+    const getCollectionList = async () => {
+      // 可按需启用
+    };
+
+    /** 获取常用列表 */
+    const getCommonUseList = async () => {
+      // 可按需启用
+    };
+
+    /** 退出登录 */
+    const doExitLogin = (clear?: number) => {
+      exitLogin(clear);
+    };
+
+    /** 埋点 */
+    const buryingPoint = async (menuId: string) => {
+      await HomeController.buryingPoint(menuId);
+    };
+
+    return {
+      routerData,
+      currentSecondIndex,
+      currentApplication,
+      collectionList,
+      commonUseList,
+      getRouterData,
+      changeCurrentSecondIndex,
+      getDomainAndHomeMenu,
+      getDomainAndHomeMenuBefore,
+      addCollectionList,
+      getCollectionList,
+      getCommonUseList,
+      doExitLogin,
+      buryingPoint,
+    };
+  }
+);

package/src/components/layout/stores/useLayoutNoticeStore.ts

@@ -0,0 +1,77 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import NoticeController from "../../../api/notice/NoticeController";
+import type NoticeVO from "../../../api/notice/bo/NoticeVO";
+
+/** 消息通知 Store */
+export const useLayoutNoticeStore = defineStore("layout-notice", () => {
+  /** 未读消息数量 */
+  const unReadCount = ref<number>(0);
+  /** 轮询定时器 */
+  const pollingTimer = ref<any>(null);
+  /** 最新消息列表（轮询获取） */
+  const latestNotices = ref<NoticeVO[]>([]);
+
+  /** 获取未读消息数量 */
+  const getNoReadNoticeCount = async () => {
+    await NoticeController.getNoReadNoticeCount("").then((data) => {
+      if (data.code === 200) {
+        unReadCount.value = data.res || 0;
+      }
+    });
+  };
+
+  /** 标记消息已读 */
+  const readNoticeInfo = async (noticeId: string) => {
+    await NoticeController.readNoticeInfo(noticeId).then((data) => {
+      if (data.code === 200 && data.res) {
+        console.log("消息已读");
+      }
+    });
+  };
+
+  /** 获取最新通知（轮询使用） */
+  const fetchNoticeInfo = async (): Promise<NoticeVO[]> => {
+    try {
+      const res = await NoticeController.getNoticeInfo();
+      if (res.code === 200 && res.res && res.res.length > 0) {
+        latestNotices.value = res.res;
+        return res.res;
+      }
+    } catch (error) {
+      console.error("获取通知失败", error);
+    }
+    return [];
+  };
+
+  /** 开始轮询 */
+  const startPolling = (onNewNotice?: (notices: NoticeVO[]) => void, interval: number = 3000) => {
+    // 立即执行一次
+    const doFetch = async () => {
+      const notices = await fetchNoticeInfo();
+      if (notices.length > 0 && onNewNotice) {
+        onNewNotice(notices);
+      }
+    };
+    doFetch();
+    pollingTimer.value = setInterval(doFetch, interval);
+  };
+
+  /** 停止轮询 */
+  const stopPolling = () => {
+    if (pollingTimer.value) {
+      clearInterval(pollingTimer.value);
+      pollingTimer.value = null;
+    }
+  };
+
+  return {
+    unReadCount,
+    latestNotices,
+    getNoReadNoticeCount,
+    readNoticeInfo,
+    fetchNoticeInfo,
+    startPolling,
+    stopPolling,
+  };
+});