From f10cf798e5c4ebc2a3c311fe5924d1a9cb21d94a Mon Sep 17 00:00:00 2001
From: xzz2021 <zipeng.2016@gmail.com>
Date: Mon, 10 Feb 2025 16:44:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=99=BB=E5=BD=95=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0enter=E9=94=AE=E8=A7=A6=E5=8F=91=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4,=E9=94=81=E5=B1=8F=E7=BB=84=E4=BB=B6=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E8=81=9A=E7=84=A6=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UserInfo/src/components/LockDialog.vue    | 26 ++++++++++++++++---
 .../UserInfo/src/components/LockPage.vue      |  9 +++++++
 src/views/Login/components/LoginForm.vue      |  8 +++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/UserInfo/src/components/LockDialog.vue b/src/components/UserInfo/src/components/LockDialog.vue
index 8861445..a8dc34f 100644
--- a/src/components/UserInfo/src/components/LockDialog.vue
+++ b/src/components/UserInfo/src/components/LockDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { Dialog } from '@/components/Dialog'
 import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
@@ -35,6 +35,20 @@ const dialogVisible = computed({
   }
 })
 
+//  自动聚焦输入框
+watch(
+  dialogVisible,
+  async (val) => {
+    if (val) {
+      const formExposeInput = await getComponentExpose('password')
+      setTimeout(() => {
+        formExposeInput?.focus()
+      }, 10)
+    }
+  },
+  { immediate: true }
+)
+
 const dialogTitle = ref(t('lock.lockScreen'))
 
 const rules = reactive({
@@ -48,14 +62,20 @@ const schema: FormSchema[] = reactive([
     component: 'Input',
     componentProps: {
       type: 'password',
-      showPassword: true
+      showPassword: true,
+      // 按下enter键触发登录
+      onKeydown: (_e: any) => {
+        if (_e.key === 'Enter') {
+          handleLock()
+        }
+      }
     }
   }
 ])
 
 const { formRegister, formMethods } = useForm()
 
-const { getFormData, getElFormExpose } = formMethods
+const { getFormData, getElFormExpose, getComponentExpose } = formMethods
 
 const handleLock = async () => {
   const formExpose = await getElFormExpose()
diff --git a/src/components/UserInfo/src/components/LockPage.vue b/src/components/UserInfo/src/components/LockPage.vue
index 1e5c9ef..88d6998 100644
--- a/src/components/UserInfo/src/components/LockPage.vue
+++ b/src/components/UserInfo/src/components/LockPage.vue
@@ -59,8 +59,15 @@ async function goLogin() {
   }
 }
 
+const passwordInputRef = ref<ComponentRef<typeof ElInput>>()
+
 function handleShowForm(show = false) {
   showDate.value = show
+  if (!show) {
+    requestAnimationFrame(() => {
+      passwordInputRef.value?.focus()
+    })
+  }
 }
 </script>
 
@@ -102,6 +109,8 @@ function handleShowForm(show = false) {
             :placeholder="t('lock.placeholder')"
             class="enter-x"
             v-model="password"
+            @keydown.enter="unLock"
+            ref="passwordInputRef"
           />
           <span :class="`text-14px ${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
             {{ t('lock.message') }}
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index c13b9e0..bcf2efd 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -72,7 +72,13 @@ const schema = reactive<FormSchema[]>([
       style: {
         width: '100%'
       },
-      placeholder: 'admin or test'
+      placeholder: 'admin or test',
+      // 按下enter键触发登录
+      onKeydown: (_e: any) => {
+        if (_e.key === 'Enter') {
+          signIn()
+        }
+      }
     }
   },
   {