From 754bc3d3c9926125a1d89862c939e115545d5572 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 7 Jan 2025 09:56:14 +0800
Subject: [PATCH] fix(login): improve error messages and update error display
 component

---
 src/pages/login.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/pages/login.vue b/src/pages/login.vue
index 06d012fb..1640518b 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -130,7 +130,6 @@ function login() {
 
   // 进行表单校验
   if (!form.value.username || !form.value.password || (isOTP.value && !form.value.otp_password)) {
-    errorMessage.value = '请输入完整信息'
     return
   }
   // 用户名密码
@@ -175,11 +174,11 @@ function login() {
     })
     .catch((error: any) => {
       // 登录失败，显示错误提示
-      if (!error.response) errorMessage.value = '登录失败，请检查网络连接'
-      else if (error.response.status === 401) errorMessage.value = '登录失败，请检查用户名、密码或双重验证是否正确'
-      else if (error.response.status === 403) errorMessage.value = '登录失败，您没有权限访问'
-      else if (error.response.status === 500) errorMessage.value = '登录失败，服务器错误'
-      else errorMessage.value = `登录失败 ${error.response.status}，请检查用户名、密码或双重验证码是否正确`
+      if (!error.response) errorMessage.value = '登录失败，请检查网络连接！'
+      else if (error.response.status === 401) errorMessage.value = '登录失败，请检查用户名、密码或双重验证是否正确！'
+      else if (error.response.status === 403) errorMessage.value = '登录失败，您没有权限访问！'
+      else if (error.response.status === 500) errorMessage.value = '登录失败，服务器错误！'
+      else errorMessage.value = `登录失败 ${error.response.status}，请检查用户名、密码或双重验证码是否正确！`
     })
 }
 
@@ -275,9 +274,9 @@ onUnmounted(() => {
               <VCol cols="12">
                 <!-- login button -->
                 <VBtn block type="submit" @click="login"> 登录 </VBtn>
-                <div v-if="errorMessage" class="text-error mt-2 text-shadow">
+                <VAlert v-if="errorMessage" type="error" variant="tonal" class="mt-3">
                   {{ errorMessage }}
-                </div>
+                </VAlert>
               </VCol>
             </VRow>
           </VForm>