From 1a5028c4e94d8ed28ca567ac2767fdbc8a8516f1 Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Sun, 5 Nov 2023 17:17:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=B8=BB=E9=A2=98=E9=A6=96?=
 =?UTF-8?q?=E6=AC=A1=E5=88=87=E6=8D=A2=E6=97=A0=E6=95=88=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/Logo.vue |  3 ++-
 src/store/modules/settings.ts          |  4 +++-
 src/views/login/index.vue              | 27 ++++++++++++++------------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 7f1f4fb..468d7ff 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import defaultSettings from "@/settings";
 import { useSettingsStore } from "@/store/modules/settings";
 
 const settingsStore = useSettingsStore();
@@ -35,7 +36,7 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
       >
         <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
         <span class="ml-3 text-white text-sm font-bold">
-          {{ $t("login.title") }}</span
+          {{ defaultSettings.title }}</span
         >
       </router-link>
     </transition>
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index ebb391d..0cf8e78 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -45,7 +45,9 @@ export const useSettingsStore = defineStore("setting", () => {
         break;
       case "theme":
         theme.value = value;
-        if (theme.value !== "dark") {
+        if (theme.value === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
           document.documentElement.classList.remove("dark");
         }
         break;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index dcdbdc5..290dbb8 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <!-- 顶部 -->
-    <div class="absolute top-0 flex items-center justify-end px-25 h-20 w-full">
+    <div class="absolute top-0 flex items-center justify-end px-5 h-20 w-full">
       <el-switch
         v-model="isDark"
         inline-prompt
@@ -11,16 +11,18 @@
         inactive-color="var(--el-color-primary)"
         @change="handleThemeChange"
       />
-      <lang-select class="ml-4 cursor-pointer" />
+      <lang-select class="ml-2 cursor-pointer" />
     </div>
     <!-- 登录表单 -->
     <el-card
       class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83"
     >
-      <h2 class="text-center">
-        {{ defaultSettings.title }}
-        <el-tag class="ml-2">{{ defaultSettings.version }}</el-tag>
-      </h2>
+      <div class="text-center relative">
+        <h2>{{ defaultSettings.title }}</h2>
+        <el-tag class="ml-2 absolute top-0 right-0">{{
+          defaultSettings.version
+        }}</el-tag>
+      </div>
       <el-form
         ref="loginFormRef"
         :model="loginData"
@@ -145,17 +147,18 @@ import { LoginData } from "@/api/auth/types";
 import defaultSettings from "@/settings";
 
 const appStore = useAppStore();
+const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 const route = useRoute();
 
-const isDark = useDark();
-const toggleDark = () => useToggle(isDark);
+const isDark = ref<boolean>(settingsStore.theme === "dark");
 
-function handleThemeChange() {
-  toggleDark();
-  useSettingsStore().changeSetting({
+function handleThemeChange(isDark: boolean) {
+  console.log("登录页面主题切换", isDark);
+  useToggle(isDark);
+  settingsStore.changeSetting({
     key: "theme",
-    value: isDark.value ? "dark" : "light",
+    value: isDark ? "dark" : "light",
   });
 }