登录界面调整

inventory-web/src/views/login/index.vue

@@ -12,6 +12,7 @@
           :model="loginForm"
           :rules="loginRules"
           size="large"
+          @submit.prevent
       >
         <el-form-item prop="username">
           <el-input
@@ -20,6 +21,7 @@
               :prefix-icon="User"
           />
         </el-form-item>
+
         <el-form-item prop="password">
           <el-input
               v-model="loginForm.password"
@@ -27,11 +29,17 @@
               placeholder="请输入密码"
               :prefix-icon="Lock"
               show-password
-              @keyup.enter="onLogin"
+              @keydown.enter.prevent="onLogin"
           />
         </el-form-item>
 
-        <el-button type="primary" :loading="loading" class="w-100" @click="onLogin">
+        <el-button
+            type="primary"
+            native-type="button"
+            :loading="loading"
+            class="w-100"
+            @click="onLogin"
+        >
           立即登录
         </el-button>
 
@@ -44,7 +52,7 @@
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
-import { ElMessage } from 'element-plus'
+import { ElMessageBox } from 'element-plus' // 引入 ElMessageBox
 import { User, Lock } from '@element-plus/icons-vue'
 
 const router = useRouter()
@@ -61,18 +69,46 @@ const loginRules = {
 
 const onLogin = async () => {
   if (!loginFormRef.value) return
+
   await loginFormRef.value.validate(async (valid: boolean) => {
     if (valid) {
       loading.value = true
-      const success = await userStore.handleLogin(loginForm)
-      loading.value = false
-      if (success) {
-        ElMessage.success('登录成功')
-        router.push('/dashboard') // 登录后跳转首页
+      try {
+        // 执行登录请求
+        const success = await userStore.handleLogin(loginForm)
+
+        if (success) {
+          // 成功：跳转
+          router.push('/dashboard')
+        } else {
+          // 失败（业务逻辑拒绝，如账号密码错）：弹出模态框
+          showLoginFailAlert('用户名或密码错误')
+        }
+      } catch (error: any) {
+        // 失败（系统错误，如网络断开/500报错）：弹出模态框
+        // 优先取后端的报错信息，没有则显示默认
+        const msg = error.response?.data?.msg || error.message || '登录遇到未知错误'
+        showLoginFailAlert(msg)
+      } finally {
+        // 停止转圈，让用户可以看清弹窗
+        loading.value = false
       }
     }
   })
 }
+
+// 封装错误弹窗
+const showLoginFailAlert = (msg: string) => {
+  ElMessageBox.alert(msg, '登录失败', {
+    confirmButtonText: '确定',
+    type: 'error',
+    callback: () => {
+      // 点击确定后，清空密码框，让用户重试
+      // 页面绝对不会刷新，光标还在
+      loginForm.password = ''
+    }
+  })
+}
 </script>
 
 <style scoped>
@@ -81,7 +117,7 @@ const onLogin = async () => {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #2d3a4b; /* 深色背景 */
+  background-color: #2d3a4b;
 }
 .login-card {
   width: 400px;
@@ -94,10 +130,4 @@ const onLogin = async () => {
 .w-100 {
   width: 100%;
 }
-.tips {
-  margin-top: 15px;
-  font-size: 12px;
-  color: #999;
-  text-align: center;
-}
 </style>