增加按钮

src/pages/Home/components/CodeSentTip.vue

@@ -11,7 +11,7 @@
         ></div>
 
         <div
-          class="relative z-10 w-full max-w-[280px] rounded-[40px] border border-white/10 bg-[#999999] p-8 shadow-2xl"
+          class="relative z-10 w-full max-w-[280px] rounded-[40px] border border-white/0 bg-[#DDDDDD] px-8 pt-8 pb-4 shadow-2xl"
           @click.stop
         >
           <div class="space-y-2 text-black">
@@ -20,6 +20,15 @@
               验证邮件已发送至邮箱，如无法找到，请检查垃圾邮件箱或营销邮件箱。
             </p>
           </div>
+
+          <div class="flex justify-center pt-3">
+            <Button
+              class="h-[40px] w-[85px] cursor-pointer rounded-full bg-[#A8FF53] font-medium text-black hover:bg-[#96E64A]"
+              @click.stop="hide"
+            >
+              好的
+            </Button>
+          </div>
         </div>
       </div>
     </Transition>
@@ -28,6 +37,7 @@
 
 <script setup lang="ts">
 import { ref, onBeforeUnmount } from 'vue'
+import { Button } from '@/components/ui/button'
 
 const visible = ref(false)
 const timer: ReturnType<typeof setTimeout> | null = null

src/pages/Home/components/LoginForm.vue

@@ -50,12 +50,17 @@
           />
         </div>
         <Button
-          type="button"
           @click="handleGetCode"
-          :disabled="countdown > 0"
-          class="h-10 rounded-full bg-[#4B94E6] px-[32px] text-base font-bold text-white hover:bg-[#4B94E6]/90 md:px-[45px] md:text-[18px]"
+          :disabled="countdown > 0 || isSendingCode"
+          class="relative h-10 min-w-[100px] cursor-pointer overflow-hidden rounded-full bg-[#4B94E6] px-[32px] text-base font-bold text-white hover:bg-[#4B94E6]/90 md:min-w-[130px] md:px-[45px] md:text-[18px]"
         >
-          {{ countdown > 0 ? `${countdown}s` : '获取' }}
+          <div class="flex items-center justify-center">
+            <Loader2 v-if="isSendingCode" class="absolute left-4 h-4 w-4 animate-spin md:left-8" />
+
+            <span :class="{ 'ml-4': isSendingCode }">
+              {{ isSendingCode ? '发送中' : countdown > 0 ? `${countdown}s` : '获取' }}
+            </span>
+          </div>
         </Button>
       </div>
     </div>
@@ -88,6 +93,7 @@ import { toast } from 'vue-sonner'
 import CodeSentTip from '@/pages/Home/components/CodeSentTip.vue'
 import request from '@/utils/request'
 import { useRouter } from 'vue-router'
+import { Loader2 } from 'lucide-vue-next'
 
 const CodeSentTipRef = ref<InstanceType<typeof CodeSentTip> | null>(null)
 const email = ref('')
@@ -96,6 +102,7 @@ const countdown = ref(0)
 const isFocused = ref(false)
 const commonSuffixes = ['@gmail.com', '@outlook.com', '@qq.com', '@163.com']
 const activeIndex = ref(-1) // 记录当前键盘选中的索引
+const isSendingCode = ref(false) // 新增 loading 状态
 
 // 1. 逻辑：提取 @ 前的字符
 const prefix = computed(() => {
@@ -161,37 +168,43 @@ const validateEmail = (str: string) => {
   return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(str)
 }
 const emit = defineEmits(['close'])
-const handleGetCode = () => {
+const handleGetCode = async () => {
   if (!email.value) {
     toast('请输入邮箱')
     return
   }
 
-  // 发送前强制校验格式
   if (!validateEmail(email.value)) {
     return toast.error('邮箱格式无效，请检查')
   }
 
-  request
-    .get<{ exist: boolean }>('/api/v1/auth/check', {
+  isSendingCode.value = true // [开始加载]
+
+  try {
+    // 1. 检查用户是否存在
+    const { exist } = await request.get<{ exist: boolean }>('/api/v1/auth/check', {
       email: email.value,
     })
-    .then(({ exist }) => {
-      request
-        .post('/api/v1/common/send_code', {
-          //  1=登录, 2=注册,
-          email: email.value,
-          type: exist ? 2 : 1,
-        })
-        .then(() => {
-          CodeSentTipRef.value?.show()
-          countdown.value = 60
-          const timer = setInterval(() => {
-            countdown.value--
-            if (countdown.value <= 0) clearInterval(timer)
-          }, 1000)
-        })
+
+    // 2. 发送验证码
+    await request.post('/api/v1/common/send_code', {
+      email: email.value,
+      type: exist ? 2 : 1, // 1=登录, 2=注册
     })
+
+    // 3. 成功后的后续处理
+    CodeSentTipRef.value?.show()
+    countdown.value = 60
+    const timer = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) clearInterval(timer)
+    }, 1000)
+  } catch (error: any) {
+    console.error('发送验证码失败:', error)
+    // 错误处理已经在 request 拦截器或此处 toast 过了
+  } finally {
+    isSendingCode.value = false // [结束加载]
+  }
 }
 const router = useRouter()
 const handleLogin = () => {