hrp-ui-base 1.4.7 → 1.4.8

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

@@ -1,231 +1,231 @@
-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(async (data) => {
-        if (data.code === 200) {
-          console.debug("修改成功！");
-          // 延时后再查询详情，避免后端写入未完成时读到旧数据
-          await new Promise((resolve) => setTimeout(resolve, 500));
-          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,
-    };
-  }
-);
+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(async (data) => {
+        if (data.code === 200) {
+          console.debug("修改成功！");
+          // 延时后再查询详情，避免后端写入未完成时读到旧数据
+          await new Promise((resolve) => setTimeout(resolve, 500));
+          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,
+    };
+  }
+);