diff --git a/src/views/Forget/ForgetPage.vue b/src/views/Forget/ForgetPage.vue
index e1a7291..e175794 100644
--- a/src/views/Forget/ForgetPage.vue
+++ b/src/views/Forget/ForgetPage.vue
@@ -62,7 +62,7 @@
- {{
+ {{
t("login.resetPassword")
}}
@@ -103,6 +103,7 @@ import {Rule} from "ant-design-vue/lib/form";
import {checkRotatedCaptcha, getRotatedCaptchaData} from "@/api/captcha";
import {message} from "ant-design-vue";
import {resetPasswordApi, sendMessage} from "@/api/user";
+import {useDebounceFn} from "@vueuse/core";
const router = useRouter();
const {t} = useI18n();
@@ -118,7 +119,7 @@ const resetPasswordRotateEvent = {
showRotateCaptcha.value = false;
},
refresh: () => {
- getRotateCaptcha();
+ refreshCaptcha();
},
};
const ResetPasswordForm: UnwrapRef = reactive({
@@ -231,6 +232,11 @@ async function sendCaptcha() {
});
}
+/**
+ * 重置密码表单提交 防抖
+ */
+const resetPassword = useDebounceFn(resetPasswordSubmit, 1000);
+
/**
* 重置密码表单提交
*/
@@ -251,6 +257,11 @@ async function resetPasswordSubmit() {
});
}
+/**
+ * 刷新验证码 节流
+ */
+const refreshCaptcha = useDebounceFn(getRotateCaptcha, 3000);
+
/**
* 获取旋转验证码数据
*/
diff --git a/src/views/Login/LoginFooter.vue b/src/views/Login/LoginFooter.vue
index 63d4c2c..175ef8f 100644
--- a/src/views/Login/LoginFooter.vue
+++ b/src/views/Login/LoginFooter.vue
@@ -6,14 +6,14 @@
router.push('/qrlogin')
}" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
-
-
+
-
+
@@ -29,6 +29,7 @@ import {message} from "ant-design-vue";
import gitee from "@/assets/svgs/gitee.svg";
import {generateClientId} from "@/api/oauth/wechat.ts";
import {getQQUrl} from "@/api/oauth/qq.ts";
+import {useDebounceFn} from "@vueuse/core";
const router = useRouter();
const {t} = useI18n();
@@ -94,10 +95,15 @@ function getLocalClientId(): string | null {
}
}
+/**
+ * Open the Github OAuth page in a new window with debounce
+ */
+const openGithubUrlDebounce = useDebounceFn(openGithubUrl, 1000);
+
/**
* Open the Github OAuth page in a new window
*/
-const openGithubUrl = () => {
+function openGithubUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
@@ -124,11 +130,17 @@ const openGithubUrl = () => {
}
};
window.addEventListener("message", messageHandler);
-};
+}
+
+/**
+ * Open the Gitee OAuth page in a new window with debounce
+ */
+const openGiteebUrlDebounce = useDebounceFn(openGiteeUrl, 1000);
+
/**
* Open the Gitee OAuth page in a new window
*/
-const openGiteeUrl = () => {
+function openGiteeUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
@@ -156,11 +168,17 @@ const openGiteeUrl = () => {
}
};
window.addEventListener("message", messageHandler);
-};
+}
+
+/**
+ * Open the QQ OAuth page in a new window with debounce
+ */
+const openQQbUrlDebounce = useDebounceFn(openQQUrl, 1000);
+
/**
* Open the QQ OAuth page in a new window
*/
-const openQQUrl = () => {
+function openQQUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
@@ -187,7 +205,7 @@ const openQQUrl = () => {
}
};
window.addEventListener("message", messageHandler);
-};
+}
onBeforeMount(() => {
getGithubRedirectUrl();
diff --git a/src/views/Login/LoginPage.vue b/src/views/Login/LoginPage.vue
index b40a5ed..5de69df 100644
--- a/src/views/Login/LoginPage.vue
+++ b/src/views/Login/LoginPage.vue
@@ -46,7 +46,8 @@
- {{
+ {{
t("login.sendCaptcha")
}}
@@ -67,7 +68,7 @@
-
+
{{ t("login.loginAndRegister") }}
@@ -118,7 +119,7 @@
-
+
{{
t("login.login")
}}
@@ -191,6 +192,7 @@ import {checkRotatedCaptcha, getRotatedCaptchaData} from "@/api/captcha";
import {message} from "ant-design-vue";
import {accountLoginApi, phoneLoginApi, sendMessage} from "@/api/user";
import useStore from "@/store";
+import {useDebounceFn, useThrottleFn} from "@vueuse/core";
const router = useRouter();
const {t} = useI18n();
@@ -202,24 +204,24 @@ const captchaData = reactive({angle: 0, image: "", thumb: "", key: ""});
const captchaErrorCount = ref(0);
const phoneLoginRotateEvent = {
confirm: (angle: number) => {
- checkPhoneLoginCaptcha(angle);
+ checkPhoneLoginCaptchaDebounce(angle);
},
close: () => {
showPhoneRotateCaptcha.value = false;
},
refresh: () => {
- getRotateCaptcha();
+ refreshCaptcha();
},
};
const accountLoginRotateEvent = {
confirm: (angle: number) => {
- checkAccountLoginCaptcha(angle);
+ checkAccountLoginCaptchaDebounce(angle);
},
close: () => {
showAccountRotateCaptcha.value = false;
},
refresh: () => {
- getRotateCaptcha();
+ refreshCaptcha();
},
};
// 账号登录表单数据
@@ -264,7 +266,7 @@ const rules: Record = {
]
};
-const state = reactive({
+const state: any = reactive({
countDownTime: 60,
showCountDown: false,
});
@@ -307,6 +309,11 @@ onMounted(() => {
}
});
+/**
+ * 发送验证码节流
+ */
+const sendCaptchaThrottle = useThrottleFn(sendCaptcha, 3000);
+
/**
* 发送验证码
*/
@@ -323,6 +330,11 @@ async function sendCaptcha() {
});
}
+/**
+ * 账号登录 防抖
+ */
+const accountLoginSubmitDebounce = useDebounceFn(accountLoginSubmit, 3000);
+
/**
* 账号登录提交
*/
@@ -339,6 +351,11 @@ async function accountLoginSubmit() {
});
}
+/**
+ * 手机登录提交 防抖
+ */
+const phoneLoginSubmitDebounce = useDebounceFn(phoneLoginSubmit, 3000);
+
/**
* 手机登录提交
*/
@@ -367,6 +384,11 @@ async function phoneLoginSubmit() {
});
}
+/**
+ * 刷新验证码 节流
+ */
+const refreshCaptcha = useThrottleFn(getRotateCaptcha, 3000);
+
/**
* 获取旋转验证码数据
*/
@@ -383,6 +405,11 @@ async function getRotateCaptcha() {
}
}
+/**
+ * 检查手机登录旋转验证码 防抖
+ */
+const checkPhoneLoginCaptchaDebounce = useDebounceFn(checkPhoneLoginCaptcha, 500);
+
/**
* 验证旋转验证码
* @param angle
@@ -413,6 +440,11 @@ async function checkPhoneLoginCaptcha(angle: number) {
}
}
+/**
+ * 检查账户登录旋转验证码 防抖
+ */
+const checkAccountLoginCaptchaDebounce = useDebounceFn(checkAccountLoginCaptcha, 500);
+
/**
* 检查账户登录旋转验证码
* @param angle
diff --git a/src/views/QRLogin/QRLoginFooter.vue b/src/views/QRLogin/QRLoginFooter.vue
index 6b2cae5..a769bb3 100644
--- a/src/views/QRLogin/QRLoginFooter.vue
+++ b/src/views/QRLogin/QRLoginFooter.vue
@@ -6,14 +6,14 @@
router.push('/login')
}" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">{{ t("login.phoneLoginAndRegister") }}
-
-
+
-
+
@@ -29,6 +29,7 @@ import {message} from "ant-design-vue";
import gitee from "@/assets/svgs/gitee.svg";
import {generateClientId} from "@/api/oauth/wechat.ts";
import {getQQUrl} from "@/api/oauth/qq.ts";
+import {useDebounceFn} from "@vueuse/core";
const router = useRouter();
const {t} = useI18n();
@@ -95,10 +96,15 @@ function getLocalClientId(): string | null {
}
}
+/**
+ * Open the Github OAuth page in a new window with debounce
+ */
+const openGithubUrlDebounce = useDebounceFn(openGithubUrl, 1000);
+
/**
* Open the Github OAuth page in a new window
*/
-const openGithubUrl = () => {
+function openGithubUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
@@ -125,11 +131,17 @@ const openGithubUrl = () => {
}
};
window.addEventListener("message", messageHandler);
-};
+}
+
+/**
+ * Open the Gitee OAuth page in a new window with debounce
+ */
+const openGiteebUrlDebounce = useDebounceFn(openGiteeUrl, 1000);
+
/**
* Open the Gitee OAuth page in a new window
*/
-const openGiteeUrl = () => {
+function openGiteeUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
@@ -157,13 +169,17 @@ const openGiteeUrl = () => {
}
};
window.addEventListener("message", messageHandler);
-};
+}
+/**
+ * Open the QQ OAuth page in a new window with debounce
+ */
+const openQQbUrlDebounce = useDebounceFn(openQQUrl, 1000);
/**
* Open the QQ OAuth page in a new window
*/
-const openQQUrl = () => {
+function openQQUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
@@ -190,7 +206,8 @@ const openQQUrl = () => {
}
};
window.addEventListener("message", messageHandler);
-};
+}
+
onBeforeMount(() => {
getGithubRedirectUrl();
getGiteeRedirectUrl();