chore: optimize frontend (#293)

* main

* chore: update style

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/src/components/PersonalSetting.js

@@ -17,6 +17,8 @@ const PersonalSetting = () => {
   const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
   const [turnstileToken, setTurnstileToken] = useState('');
   const [loading, setLoading] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
 
   useEffect(() => {
     let status = localStorage.getItem('status');
@@ -30,6 +32,19 @@ const PersonalSetting = () => {
     }
   }, []);
 
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval); // Clean up on unmount
+  }, [disableButton, countdown]);
+
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
@@ -78,6 +93,7 @@ const PersonalSetting = () => {
   };
 
   const sendVerificationCode = async () => {
+    setDisableButton(true);
     if (inputs.email === '') return;
     if (turnstileEnabled && turnstileToken === '') {
       showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
@@ -195,8 +211,8 @@ const PersonalSetting = () => {
                 name='email'
                 type='email'
                 action={
-                  <Button onClick={sendVerificationCode} disabled={loading}>
-                    获取验证码
+                  <Button onClick={sendVerificationCode} disabled={disableButton || loading}>
+                    {disableButton ? `重新发送(${countdown})` : '获取验证码'}
                   </Button>
                 }
               />