refactor: ♻️ 优化主题和主题色集中监听，避免多处初始化

youlaitech · Mar 4, 2024 · a6f2409 · a6f2409
1 parent 5800a3c
commit a6f2409
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 85 deletions.
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
@@ -55,7 +55,6 @@ import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 import { Sunny, Moon } from "@element-plus/icons-vue";
 import { LayoutEnum } from "@/enums/LayoutEnum";
 import { ThemeEnum } from "@/enums/ThemeEnum";
-import { genMixColor } from "@/utils/color";
 
 const route = useRoute();
 const appStore = useAppStore();
@@ -76,30 +75,15 @@ const settingsVisible = computed({
  */
 function changeThemeColor(color: string) {
   settingsStore.changeThemeColor(color);
-
-  const { DEFAULT, dark, light } = genMixColor(color);
-  setStyleProperty(`--el-color-primary`, DEFAULT);
-  setStyleProperty(`--el-color-primary-dark-2`, dark[2]);
-  setStyleProperty(`--el-color-primary-light-3`, light[3]);
-  setStyleProperty(`--el-color-primary-light-5`, light[5]);
-  setStyleProperty(`--el-color-primary-light-7`, light[7]);
-  setStyleProperty(`--el-color-primary-light-8`, light[8]);
-  setStyleProperty(`--el-color-primary-light-9`, light[9]);
-}
-
-function setStyleProperty(propName: string, value: string) {
-  document.documentElement.style.setProperty(propName, value);
 }
 
 /**
  * 切换主题
  */
 const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
-const changeTheme = (isDark: any) => {
-  useToggle(isDark);
-  const theme = isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT;
-  settingsStore.changeTheme(theme);
-  document.documentElement.classList.toggle("dark", theme === ThemeEnum.DARK);
+const changeTheme = (val: any) => {
+  isDark.value = val;
+  settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
 };
 
 /**
@@ -148,16 +132,10 @@ function findOutermostParent(tree: any[], findName: string) {
 
   return null;
 }
-
-onMounted(() => {
-  changeTheme(settingsStore.theme == ThemeEnum.DARK); // 初始化主题
-  changeThemeColor(settingsStore.themeColor); // 初始化主题颜色
-});
 </script>
 
 <style lang="scss" scoped>
 .settings-option {
   @apply py-1 flex-x-between;
 }
 </style>
-@/utils/color
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
@@ -1,4 +1,7 @@
 import defaultSettings from "@/settings";
+import { genMixColor } from "@/utils/color";
+import { setStyleProperty } from "@/utils";
+import { ThemeEnum } from "@/enums/ThemeEnum";
 
 type SettingsValue = boolean | string;
 
@@ -32,6 +35,33 @@ export const useSettingsStore = defineStore("setting", () => {
     defaultSettings.watermarkEnabled
   );
 
+  watch(
+    [theme, themeColor],
+    ([newTheme, newThemeColor], [oldTheme, oldThemeColor]) => {
+      if (newTheme !== oldTheme) {
+        if (newTheme === ThemeEnum.DARK) {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      }
+
+      if (newThemeColor !== oldThemeColor) {
+        const { DEFAULT, dark, light } = genMixColor(newThemeColor);
+        setStyleProperty(`--el-color-primary`, DEFAULT);
+        setStyleProperty(`--el-color-primary-dark-2`, dark[2]);
+        setStyleProperty(`--el-color-primary-light-3`, light[3]);
+        setStyleProperty(`--el-color-primary-light-5`, light[5]);
+        setStyleProperty(`--el-color-primary-light-7`, light[7]);
+        setStyleProperty(`--el-color-primary-light-8`, light[8]);
+        setStyleProperty(`--el-color-primary-light-9`, light[9]);
+      }
+    },
+    {
+      immediate: true, // 立即执行，确保在侦听器创建时执行一次
+    }
+  );
+
   const settingsMap: Record<string, Ref<SettingsValue>> = {
     fixedHeader,
     tagsView,
@@ -62,9 +92,12 @@ export const useSettingsStore = defineStore("setting", () => {
 
   /**
    * 切换主题颜色
+   *
+   * @param color 主题颜色
+   *
    */
-  function changeThemeColor(val: string) {
-    themeColor.value = val;
+  function changeThemeColor(color: string) {
+    themeColor.value = color;
   }
 
   /**

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -30,10 +30,22 @@ export function removeClass(ele: HTMLElement, cls: string) {
 }
 
 /**
+ * 判断是否是外部链接
+ *
  * @param {string} path
  * @returns {Boolean}
  */
 export function isExternal(path: string) {
   const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path);
   return isExternal;
 }
+
+/**
+ * 设置Style属性
+ *
+ * @param propName
+ * @param value
+ */
+export function setStyleProperty(propName: string, value: string) {
+  document.documentElement.style.setProperty(propName, value);
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -7,9 +7,7 @@
         inline-prompt
         :active-icon="Moon"
         :inactive-icon="Sunny"
-        active-color="var(--el-fill-color-dark)"
-        inactive-color="var(--el-color-primary)"
-        @change="handleThemeChange"
+        @change="toggleTheme"
       />
       <lang-select class="ml-2 cursor-pointer" />
     </div>
@@ -117,61 +115,36 @@
 
 <script setup lang="ts">
 import { useSettingsStore, useUserStore, useAppStore } from "@/store";
-import { Sunny, Moon } from "@element-plus/icons-vue";
-import router from "@/router";
-import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
 import { getCaptchaApi } from "@/api/auth";
 import { LoginData } from "@/api/auth/types";
-
-const route = useRoute();
-const userStore = useUserStore();
-const settingsStore = useSettingsStore();
-
+import { Sunny, Moon } from "@element-plus/icons-vue";
+import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
+import router from "@/router";
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
-/**
- * 明亮/暗黑主题切换
- */
-const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
-const handleThemeChange = (isDark: any) => {
-  const theme = isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT;
-  settingsStore.changeTheme(theme);
-  document.documentElement.classList.toggle("dark", theme === ThemeEnum.DARK);
-};
 
-/**
- * 根据屏幕宽度切换设备模式
- */
+// Stores
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
 const appStore = useAppStore();
-const { width, height } = useWindowSize();
-const icpVisible = ref(true);
-
-watchEffect(() => {
-  // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
-  if (width.value < 992) {
-    appStore.toggleDevice("mobile");
-  } else {
-    appStore.toggleDevice("desktop");
-  }
 
-  if (height.value < 600) {
-    icpVisible.value = false;
-  } else {
-    icpVisible.value = true;
-  }
-});
+// Internationalization
+const { t } = useI18n();
 
+// Reactive states
+const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
+const icpVisible = ref(true);
 const loading = ref(false); // 按钮loading
 const isCapslock = ref(false); // 是否大写锁定
 const captchaBase64 = ref(); // 验证码图片Base64字符串
 const loginFormRef = ref(ElForm); // 登录表单ref
+const { height } = useWindowSize();
 
 const loginData = ref<LoginData>({
   username: "admin",
   password: "123456",
 });
 
-const { t } = useI18n();
 const loginRules = computed(() => {
   const prefix = appStore.language === "en" ? "Please enter " : "请输入";
   return {
@@ -206,13 +179,6 @@ const loginRules = computed(() => {
   };
 });
 
-/**
- * 检查输入大小写状态
- */
-function checkCapslock(e: any) {
-  isCapslock.value = e.getModifierState("CapsLock");
-}
-
 /**
  * 获取验证码
  */
@@ -226,6 +192,7 @@ function getCaptcha() {
 /**
  * 登录
  */
+const route = useRoute();
 function handleLogin() {
   loginFormRef.value.validate((valid: boolean) => {
     if (valid) {
@@ -234,9 +201,7 @@ function handleLogin() {
         .login(loginData.value)
         .then(() => {
           const query: LocationQuery = route.query;
-
           const redirect = (query.redirect as LocationQueryValue) ?? "/";
-
           const otherQueryParams = Object.keys(query).reduce(
             (acc: any, cur: string) => {
               if (cur !== "redirect") {
@@ -250,7 +215,6 @@ function handleLogin() {
           router.push({ path: redirect, query: otherQueryParams });
         })
         .catch(() => {
-          // 验证失败，重新生成验证码
           getCaptcha();
         })
         .finally(() => {
@@ -260,18 +224,37 @@ function handleLogin() {
   });
 }
 
-onMounted(() => {
-  getCaptcha();
+/**
+ * 主题切换
+ */
+
+const toggleTheme = () => {
+  const newTheme =
+    settingsStore.theme === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
+  settingsStore.changeTheme(newTheme);
+};
+/**
+ * 根据屏幕宽度切换设备模式
+ */
 
-  // 主题初始化
-  const theme = useSettingsStore().theme;
-  useSettingsStore().changeSetting({ key: "theme", value: theme });
-  if (theme == "dark") {
-    document.documentElement.classList.add("dark");
+watchEffect(() => {
+  if (height.value < 600) {
+    icpVisible.value = false;
   } else {
-    document.documentElement.classList.remove("dark");
+    icpVisible.value = true;
   }
 });
+
+/**
+ * 检查输入大小写
+ */
+function checkCapslock(e: any) {
+  isCapslock.value = e.getModifierState("CapsLock");
+}
+
+onMounted(() => {
+  getCaptcha();
+});
 </script>
 
 <style lang="scss" scoped>