From c1eaeeb3096d323a3845db8862cc6b2b18dba434 Mon Sep 17 00:00:00 2001
From: Rhh-Z <106086215+Rhh-Z@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:27:01 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=EF=BC=8C=E9=98=B2=E6=AD=A2=E5=9C=A8=E7=BD=91?=
 =?UTF-8?q?=E7=BB=9C=E8=BE=83=E6=85=A2=E6=83=85=E5=86=B5=E4=B8=8B=E5=A4=9A?=
 =?UTF-8?q?=E6=AC=A1=E8=A7=A6=E5=8F=91=E7=99=BB=E5=BD=95=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=20(#880)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(function): 修复点击登录后再连续敲击回车会不断触发onLogin函数的问题
---
 src/views/login/index.vue | 45 +++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 6fe4bd23a..fa8f353a4 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import {
-  ref,
-  toRaw,
-  reactive,
-  watch,
-  computed,
-  onMounted,
-  onBeforeUnmount
-} from "vue";
 import { useI18n } from "vue-i18n";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
@@ -15,10 +6,12 @@ import { message } from "@/utils/message";
 import { loginRules } from "./utils/rule";
 import phone from "./components/phone.vue";
 import TypeIt from "@/components/ReTypeit";
+import { debounce } from "@pureadmin/utils";
 import qrCode from "./components/qrCode.vue";
 import regist from "./components/regist.vue";
 import update from "./components/update.vue";
 import { useNav } from "@/layout/hooks/useNav";
+import { useEventListener } from "@vueuse/core";
 import type { FormInstance } from "element-plus";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { operates, thirdParty } from "./utils/enums";
@@ -27,6 +20,7 @@ import { useUserStoreHook } from "@/store/modules/user";
 import { initRouter, getTopMenu } from "@/router/utils";
 import { bg, avatar, illustration } from "./utils/static";
 import { ReImageVerify } from "@/components/ReImageVerify";
+import { ref, toRaw, reactive, watch, computed } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
@@ -48,6 +42,7 @@ const loginDay = ref(7);
 const router = useRouter();
 const loading = ref(false);
 const checked = ref(false);
+const disabled = ref(false);
 const ruleFormRef = ref<FormInstance>();
 const currentPage = computed(() => {
   return useUserStoreHook().currentPage;
@@ -68,42 +63,41 @@ const ruleForm = reactive({
 });
 
 const onLogin = async (formEl: FormInstance | undefined) => {
-  loading.value = true;
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
+      loading.value = true;
       useUserStoreHook()
         .loginByUsername({ username: ruleForm.username, password: "admin123" })
         .then(res => {
           if (res.success) {
             // 获取后端路由
             return initRouter().then(() => {
-              router.push(getTopMenu(true).path);
-              message("登录成功", { type: "success" });
+              disabled.value = true;
+              router
+                .push(getTopMenu(true).path)
+                .then(() => {
+                  message("登录成功", { type: "success" });
+                })
+                .finally(() => (disabled.value = false));
             });
           }
         })
         .finally(() => (loading.value = false));
     } else {
-      loading.value = false;
       return fields;
     }
   });
 };
 
-/** 使用公共函数，避免`removeEventListener`失效 */
-function onkeypress({ code }: KeyboardEvent) {
-  if (code === "Enter") {
-    onLogin(ruleFormRef.value);
-  }
-}
+const immediateDebounce: any = debounce(
+  formRef => onLogin(formRef),
+  1000,
+  true
+);
 
-onMounted(() => {
-  window.document.addEventListener("keypress", onkeypress);
-});
-
-onBeforeUnmount(() => {
-  window.document.removeEventListener("keypress", onkeypress);
+useEventListener(document, "keypress", ({ code }) => {
+  if (code === "Enter" && !disabled.value) immediateDebounce(ruleFormRef.value);
 });
 
 watch(imgCode, value => {
@@ -270,6 +264,7 @@ watch(loginDay, value => {
                   size="default"
                   type="primary"
                   :loading="loading"
+                  :disabled="disabled"
                   @click="onLogin(ruleFormRef)"
                 >
                   {{ t("login.login") }}