登录界面调整

inventory-web/src/App.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { InfoFilled, SwitchButton, UserFilled } from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/user'
 
 const router = useRouter()
+const route = useRoute() // [新增] 获取当前路由对象
 const userStore = useUserStore()
 
+// [新增] 计算属性：判断当前是否是登录页
+const isLoginPage = computed(() => {
+  return route.path === '/login'
+})
+
 // --- 退出登录逻辑 Start ---
 const handleLogout = () => {
   ElMessageBox.confirm(
@@ -28,9 +35,7 @@ const handleLogout = () => {
           message: '已安全退出',
         })
 
-        // 3. [关键修改] 强制跳转回登录页
-        // 使用 replace，这样用户点浏览器“返回”按钮不会又回到系统里
-        // 此时 store.token 已为空，路由守卫会放行 /login
+        // 3. 强制跳转回登录页
         await router.replace('/login')
       })
       .catch(() => {
@@ -42,7 +47,7 @@ const handleLogout = () => {
 
 <template>
   <div class="app-wrapper">
-    <header class="app-header">
+    <header v-if="!isLoginPage" class="app-header">
       <div class="logo-container">
         <router-link to="/" class="home-link">
           <img src="@/assets/iris.png" class="logo" alt="Logo" />
@@ -74,7 +79,7 @@ const handleLogout = () => {
       <router-view />
     </main>
 
-    <footer class="app-footer">
+    <footer v-if="!isLoginPage" class="app-footer">
       <span class="version-tag">
         <el-icon style="vertical-align: middle; margin-right: 4px"><InfoFilled /></el-icon>
         当前版本: 1.0 Beta (测试版)
@@ -84,7 +89,6 @@ const handleLogout = () => {
 </template>
 
 <style>
-/* 保持原有的样式，不需要改动 */
 .app-wrapper {
   display: flex;
   flex-direction: column;

inventory-web/src/stores/user.ts

@@ -14,13 +14,12 @@ export const useUserStore = defineStore('user', () => {
         try {
             const res = await login(loginForm)
 
-            // [调试日志] 查看实际返回的数据结构 (调试完成后可删除)
+            // [调试日志] 查看实际返回的数据结构
             console.log('Login API Response:', res)
 
             // ============================================================
             // [关键修复] 兼容 Axios 拦截器的不同处理方式
             // 如果拦截器已经返回了 response.data，那么 res 本身就是数据对象
-            // 如果拦截器返回的是原始 response，那么数据在 res.data 中
             // ============================================================
             const data = res.data || res
 
@@ -46,9 +45,10 @@ export const useUserStore = defineStore('user', () => {
             // 持久化存储 Token
             localStorage.setItem('token', data.access_token)
 
-            return true
+            return true // 返回 true 表示登录成功
         } catch (error) {
             console.error('Login failed:', error)
+            // 返回 false 表示登录失败，Login 组件会据此停止跳转
             return false
         }
     }
@@ -61,13 +61,9 @@ export const useUserStore = defineStore('user', () => {
         username.value = ''
 
         // 2. 清空 LocalStorage (硬盘)
-        // 建议使用 removeItem 而不是 clear，避免误删该域名下其他非登录数据
         localStorage.removeItem('token')
         localStorage.removeItem('role')
         localStorage.removeItem('username')
-
-        // 注意：这里不再执行 window.location.reload()
-        // 而是把跳转控制权交给调用者 (如 App.vue 中的 router.push)
     }
 
     // 3. Getters / Helpers

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>