fix: 🐛 主题设置登录页和首页不一致问题修复

Former-commit-id: fbd82fa91166dbeb1203d24abc1e2ae799867c94

src/layout/components/Settings/index.vue

@@ -79,11 +79,8 @@ const currentThemeColor = computed(() => {
 });
 onMounted(() => {
   window.document.body.setAttribute("layout", settingsStore.layout);
-  const theme =
+  const theme = settingsStore.theme;
-    localStorage.getItem("vueuse-color-scheme") || defaultSettings.theme;
+  if (theme == "dark") {
-  settingsStore.changeSetting({ key: "theme", value: theme });
-
-  if (theme != "light") {
     document.documentElement.classList.add("dark");
   }
 

src/store/modules/settings.ts

@@ -20,9 +20,7 @@ export const useSettingsStore = defineStore("setting", () => {
   );
 
   const theme = useStorage<string>("theme", defaultSettings.theme);
-  if (theme.value == "light") {
+
-    document.body.classList.remove("dark");
-  }
   // actions
   function changeSetting(param: { key: string; value: any }) {
     const { key, value } = param;
@@ -47,6 +45,9 @@ export const useSettingsStore = defineStore("setting", () => {
         break;
       case "theme":
         theme.value = value;
+        if (theme.value !== "dark") {
+          document.documentElement.classList.remove("dark");
+        }
         break;
     }
   }

src/views/login/index.vue

@@ -9,7 +9,7 @@
         :inactive-icon="IconEpSunny"
         active-color="var(--el-fill-color-dark)"
         inactive-color="var(--el-color-primary)"
-        @change="toggleDark"
+        @change="handleThemeChange"
       />
       <lang-select class="ml-4 cursor-pointer" />
     </div>
@@ -104,7 +104,7 @@
     </el-card>
 
     <!-- ICP备案 -->
-    <div class="absolute bottom-1 text-[6px] text-center">
+    <div class="absolute bottom-1 text-[10px] text-center">
       <p>
         Copyright © 2021 - 2023 youlai.tech All Rights Reserved. 有来技术
         版权所有
@@ -121,6 +121,7 @@ import LangSelect from "@/components/LangSelect/index.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import IconEpSunny from "~icons/ep/sunny";
 import IconEpMoon from "~icons/ep/moon";
+import { useSettingsStore } from "@/store/modules/settings";
 
 // 状态管理依赖
 import { useUserStore } from "@/store/modules/user";
@@ -138,6 +139,14 @@ const route = useRoute();
 const isDark = useDark();
 const toggleDark = () => useToggle(isDark);
 
+function handleThemeChange() {
+  toggleDark();
+  useSettingsStore().changeSetting({
+    key: "theme",
+    value: isDark.value ? "dark" : "light",
+  });
+}
+
 /**
  * 按钮loading
  */
@@ -264,6 +273,16 @@ function handleLogin() {
 
 onMounted(() => {
   getCaptcha();
+
+  // 主题初始化
+  const theme = useSettingsStore().theme;
+  console.log("登录页面主题", theme);
+  useSettingsStore().changeSetting({ key: "theme", value: theme });
+  if (theme == "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
 });
 </script>
 
@@ -275,6 +294,7 @@ onMounted(() => {
 .login-container {
   @apply w-full h-full flex-center;
 
+  overflow-y: auto;
   background: url("@/assets/images/login-bg.jpg") no-repeat center right;
 
   .login-form {