From fbd82fa91166dbeb1203d24abc1e2ae799867c94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Fri, 3 Nov 2023 14:29:03 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20:bug:=20=E4=B8=BB=E9=A2=98=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E7=99=BB=E5=BD=95=E9=A1=B5=E5=92=8C=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Settings/index.vue |  7 ++-----
 src/store/modules/settings.ts            |  7 ++++---
 src/views/login/index.vue                | 24 ++++++++++++++++++++++--
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 6fd3763..93d81bb 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -79,11 +79,8 @@ const currentThemeColor = computed(() => {
 });
 onMounted(() => {
   window.document.body.setAttribute("layout", settingsStore.layout);
-  const theme =
-    localStorage.getItem("vueuse-color-scheme") || defaultSettings.theme;
-  settingsStore.changeSetting({ key: "theme", value: theme });
-
-  if (theme != "light") {
+  const theme = settingsStore.theme;
+  if (theme == "dark") {
     document.documentElement.classList.add("dark");
   }
 
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 6689823..ebb391d 100644
--- a/src/store/modules/settings.ts
+++ b/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;
     }
   }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 91057eb..349b929 100644
--- a/src/views/login/index.vue
+++ b/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 {

From f0bd1999c8a520a507558ce5339c0043025b22ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Fri, 3 Nov 2023 17:27:09 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20:recycle:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                | 75 ++++++++++++++++++++++++++++++++++++++-
 src/views/login/index.vue | 29 ++++++++++++---
 2 files changed, 98 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 4441eb6..9677e1b 100644
--- a/index.html
+++ b/index.html
@@ -13,10 +13,83 @@
   </head>
 
   <body>
-    <div id="app" class="app"></div>
+    <div id="app" class="app">
+      <!--加载动画-->
+      <div class="cm-spinner"></div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
     <script>
       global = globalThis;
     </script>
+
+    <style>
+      html,
+      body,
+      #app {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .cm-spinner {
+        position: relative;
+        width: 150px;
+        height: 150px;
+        border: 3px solid transparent;
+        border-top: 4px solid #f15e41;
+        border-radius: 50%;
+        animation: spin 4s linear infinite;
+        animation: spin 4s linear infinite;
+      }
+
+      .cm-spinner::before,
+      .cm-spinner::after {
+        position: absolute;
+        inset: 6px;
+        content: "";
+        border: 4px solid transparent;
+        border-radius: 50%;
+      }
+
+      .cm-spinner::before {
+        border-top-color: #bad375;
+        animation: 3s spin linear infinite;
+        animation: 3s spin linear infinite;
+      }
+
+      .cm-spinner::after {
+        border-top-color: #26a9e0;
+        animation: spin 1.5s linear infinite;
+        animation: spin 1.5s linear infinite;
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        to {
+          transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        to {
+          transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+    </style>
   </body>
 </html>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 349b929..a9f361b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -83,7 +83,17 @@
           />
 
           <div class="captcha">
-            <img :src="captchaBase64" @click="getCaptcha" />
+            <el-image
+              :src="captchaBase64"
+              @click="getCaptcha"
+              class="w-[120px] h-[48px] cursor-pointer"
+            >
+              <template #error>
+                <div class="image-slot">
+                  <i-ep-picture />
+                </div>
+              </template>
+            </el-image>
           </div>
         </el-form-item>
 
@@ -305,10 +315,19 @@ onMounted(() => {
       top: 0;
       right: 0;
 
-      img {
-        width: 120px;
-        height: 48px;
-        cursor: pointer;
+      .image-slot {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+        width: 100%;
+        height: 100%;
+        font-size: 18px;
+        color: var(--el-text-color-secondary);
+        background: var(--el-fill-color-light);
+
+        svg {
+          margin-right: 10px;
+        }
       }
     }
   }