feat: handle timeout

Author: Candinya

lib/components/Captcha/index.tsx

@@ -27,15 +27,43 @@ const Captcha = ({
   inputName,
   cbSuccess,
   cbFail,
-  // cbTimeout, // TODO
+  cbTimeout,
 }: CaptchaProps) => {
   const [captKey, setCaptKey] = useState("");
+
+  const [isCaptchaBodyOpen, setIsCaptchaBodyOpen] = useState(false);
+
   const [captStatus, setCaptStatus] = useState<Status>("default");
   const [imageBase64, setImageBase64] = useState<string | null>(null);
   const [thumbBase64, setThumbBase64] = useState<string | null>(null);
 
   const captAutoRefreshCount = useRef(0);
 
+  const captTimeoutHandler = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelTimeout = () => {
+    if (captTimeoutHandler.current) {
+      clearTimeout(captTimeoutHandler.current);
+      captTimeoutHandler.current = null;
+    }
+  };
+  const setCaptTimeoutEvent = (when: number) => {
+    // 清除上一个超时事件
+    cancelTimeout();
+
+    // 设置新的超时事件
+    captTimeoutHandler.current = setTimeout(() => {
+      handleCloseEvent();
+
+      // 设置为超时状态
+      setCaptStatus("timeout");
+
+      // 回调超时事件
+      if (cbTimeout) {
+        cbTimeout();
+      }
+    }, when - new Date().getTime());
+  };
+
   const handleRequestCaptcha = async () => {
     // 清理当前的
     setImageBase64(null);
@@ -57,12 +85,16 @@ const Captcha = ({
       setCaptKey(captcha.k);
       setImageBase64(captcha.b);
       setThumbBase64(captcha.t);
+      setCaptTimeoutEvent(captcha.e * 1000); // 将 Unix 秒转换为毫秒
     } catch (e) {
       console.log(e);
     }
   };
 
   const handleSubmitCaptcha = async (dots: Dot[]) => {
+    // 提交了就不用再在意是否超时了
+    cancelTimeout();
+
     try {
       const res = await fetch(`${instance}/captcha/submit`, {
         method: "POST",
@@ -81,6 +113,7 @@ const Captcha = ({
         if (cbSuccess) {
           cbSuccess(captKey);
         }
+        setCaptTimeoutEvent(res.e * 1000); // 将 Unix 秒转换为毫秒
       } else {
         if (captAutoRefreshCount.current > maxFailCount) {
           // 错误次数太多，歇一会吧
@@ -116,9 +149,10 @@ const Captcha = ({
   const handleCancelEvent = () => {
     setCaptStatus("default");
     handleCloseEvent();
-  };
 
-  const [isCaptchaBodyOpen, setIsCaptchaBodyOpen] = useState(false);
+    // 取消了就不用再在意是否超时了
+    cancelTimeout();
+  };
 
   const handleCaptchaBodyVisibleChange = (visible: boolean) => {
     if (visible) {

lib/components/CaptchaBtn/index.tsx

@@ -1,19 +1,26 @@
+import type { ReactNode } from "react";
+
 import "./styles.css";
 
 import DefaultImg from "./images/default.svg";
 import CheckImg from "./images/check.svg";
 import ErrorImg from "./images/error.svg";
 import SuccessImg from "./images/success.svg";
 
-const iconMap = {
+const iconMap: {
+  readonly [_ in Status]: string;
+} = {
   default: DefaultImg,
   check: CheckImg,
   error: ErrorImg,
   over: ErrorImg,
   success: SuccessImg,
+  timeout: ErrorImg,
 };
 
-const messageMap = {
+const messageMap: {
+  readonly [_ in Status]: ReactNode;
+} = {
   default: <>点击按键开始验证</>,
   check: <>正在验证···</>,
   error: (
@@ -23,6 +30,11 @@ const messageMap = {
   ),
   over: <>失败次数过多，等会再来吧</>,
   success: <>验证通过</>,
+  timeout: (
+    <>
+      验证超时，<b>再试一次</b>吧
+    </>
+  ),
 };
 
 interface CaptchaBtnProps {

lib/components/CaptchaBtn/styles.css

@@ -5,7 +5,8 @@
 .cap-btn .cap-state__check,
 .cap-btn .cap-state__error,
 .cap-btn .cap-state__success,
-.cap-btn .cap-state__over {
+.cap-btn .cap-state__over,
+.cap-btn .cap-state__timeout {
   position: absolute;
   width: 100%;
   height: 48px;
@@ -67,6 +68,11 @@
   border: 1px solid #8bc640;
   pointer-events: none;
 }
+.cap-btn .cap-state__timeout {
+  color: #ed4630;
+  background: #fef0f0;
+  border: 1px solid #ff5a34;
+}
 .cap-btn .cap-btn__inner .cap-btn__ico {
   position: relative;
   width: 24px;

lib/types/status.ts

@@ -3,4 +3,5 @@ type Status =
   | "check" // 正在验证
   | "error" // 验证错误
   | "over" // 失败次数过多
-  | "success"; // 成功
+  | "success" // 成功
+  | "timeout"; // 超时