优化

src/views/login/components/card/index.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { type FormInstance, Message } from '@arco-design/web-vue'
 import { useTabsStore, useUserStore } from '@/stores'
 
@@ -42,12 +42,24 @@ const loading = ref(false)
 
 // 登录
 const handleLogin = async () => {
+  // 检查用户是否已经登录
+  if (userStore.token) {
+    return
+  }
+  
   const isInvalid = await formRef.value?.validate()
   if (isInvalid) return
   try {
     loading.value = true
     // 调用后端接口校验卡号
     await userStore.cardLogin(form)
+    
+    // 登录成功后移除事件监听器
+    if (keyDownListener) {
+      document.removeEventListener('keydown', keyDownListener)
+      keyDownListener = null
+    }
+    
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
     await router.push({
@@ -64,24 +76,30 @@ const handleLogin = async () => {
   }
 }
 
+// 键盘事件监听器引用
+let keyDownListener: ((e: KeyboardEvent) => void) | null = null
+
 // 监听键盘输入，实现自动识别卡号
 onMounted(() => {
-  // 监听全局键盘事件，用于识别刷卡输入
-  document.addEventListener('keydown', (e) => {
+  // 只监听Enter键，用于自动登录
+  keyDownListener = (e) => {
     // 刷卡器通常会快速输入卡号并以Enter键结束
     if (e.key === 'Enter') {
       // 遇到Enter键，尝试登录
       if (form.cardNumber.trim()) {
         handleLogin()
       }
-    } else if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
-      // 只捕获单个字符的按键，忽略控制键和功能键
-      form.cardNumber += e.key
-    } else if (e.key === 'Backspace') {
-      // 处理退格键
-      form.cardNumber = form.cardNumber.slice(0, -1)
     }
-  })
+  }
+  
+  document.addEventListener('keydown', keyDownListener)
+})
+
+// 组件卸载时移除事件监听器
+onUnmounted(() => {
+  if (keyDownListener) {
+    document.removeEventListener('keydown', keyDownListener)
+  }
 })
 </script>