From e768e0f9f04afe53b2551017b0fb17fdf55a3d2c Mon Sep 17 00:00:00 2001
From: speakeloudest <speakeloudest@gmail.com>
Date: Sun, 25 Jan 2026 00:18:05 -0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=99=BB=E5=BD=95=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/components/LoginForm.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home/components/LoginForm.vue b/src/pages/Home/components/LoginForm.vue
index b574c98..e7cbccf 100644
--- a/src/pages/Home/components/LoginForm.vue
+++ b/src/pages/Home/components/LoginForm.vue
@@ -77,9 +77,13 @@
       </Button>
       <Button
         type="submit"
-        class="h-[48px] flex-1 cursor-pointer rounded-[25px] bg-[#A8FF53] text-lg font-medium text-black hover:bg-[#96E64A]"
+        :disabled="isLoggingIn"
+        class="relative h-[48px] flex-1 cursor-pointer overflow-hidden rounded-[25px] bg-[#A8FF53] text-lg font-medium text-black hover:bg-[#96E64A]"
       >
-        登录/注册
+        <div class="flex items-center justify-center">
+          <Loader2 v-if="isLoggingIn" class="absolute left-4 h-5 w-5 animate-spin md:left-8" />
+          <span :class="{ 'ml-2': isLoggingIn }"> 登录/注册 </span>
+        </div>
       </Button>
     </div>
     <CodeSentTip ref="CodeSentTipRef" />
@@ -216,6 +220,8 @@ const handleGetCode = async () => {
   }
 }
 const router = useRouter()
+const isLoggingIn = ref(false)
+
 const handleLogin = () => {
   if (!code.value) {
     toast('请输入验证码')
@@ -224,6 +230,8 @@ const handleLogin = () => {
   if (!validateEmail(email.value)) {
     return toast.error('邮箱格式无效，请检查')
   }
+
+  isLoggingIn.value = true
   request
     .post<any, { token: string }>('/api/v1/auth/login/email', {
       email: email.value,
@@ -234,6 +242,12 @@ const handleLogin = () => {
       localStorage.setItem('UserEmail', email.value)
       router.push({ path: '/user-center' })
     })
+    .catch((error) => {
+      console.error('登录失败', error)
+    })
+    .finally(() => {
+      isLoggingIn.value = false
+    })
 }
 </script>