优化登录流程状态显示

src/components/send-msg.tsx

@@ -4,39 +4,24 @@ import Cap from '@cap.js/widget'
 import {sendSMS} from '@/actions/verify'
 import {toast} from 'sonner'
 import {Button} from '@/components/ui/button'
+import {LoaderIcon} from 'lucide-react'
 
 export default function SendMsg(props: {
   phone: string
 }) {
   const [countdown, setCountdown] = useState(0)
   const [progress, setProgress] = useState(0)
+  const [mode, setMode] = useState<'ready' | 'wait' | 'check'>('ready')
   const cap = useRef(new Cap({apiEndpoint: '/'}))
-  cap.current.addEventListener('solve', (event) => {
-    console.log('captcha solve', event)
-  })
-  cap.current.addEventListener('error', (event) => {
-    console.error('captcha error', event)
-  })
-  cap.current.addEventListener('reset', (event) => {
-    console.log('captcha reset', event)
-  })
   cap.current.addEventListener('progress', (event) => {
     setProgress(event.detail.progress)
   })
 
-  // 计时
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (countdown > 0) {
-        setCountdown(countdown - 1)
-      }
-    }, 1000)
-    return () => clearInterval(interval)
-  }, [countdown])
-
   // 发送验证码
   const sendCode = async () => {
     try {
+      setMode('check')
+
       // 检查手机号
       const valid = /^1\d{10}$/.test(props.phone)
       if (!valid) {
@@ -58,16 +43,31 @@ export default function SendMsg(props: {
         throw new Error(`验证码发送失败: ${resp.message}`)
       }
 
+      setMode('wait')
       setCountdown(60)
       toast.success('验证码已发送')
     }
     catch (e) {
+      setMode('ready')
       toast.error('验证码发送失败', {
         description: (e as Error).message,
       })
     }
   }
 
+  // 计时
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (countdown > 0) {
+        setCountdown(countdown - 1)
+      }
+      else if (mode === 'wait') {
+        setMode('ready')
+      }
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [countdown, mode])
+
   return (
     <Button
       type="button"
@@ -76,8 +76,12 @@ export default function SendMsg(props: {
       disabled={countdown > 0}
       onClick={sendCode}
     >
-      {cap.current.token ? '1' : '0'}
+      {mode === 'check' && <LoaderIcon className="animate-spin"/>}
-      {countdown > 0 ? `${countdown}秒后重发` : '获取验证码'}
+      <span>
+        {mode === 'check' && '检查登录环境'}
+        {mode === 'wait' && `${countdown}秒后重发`}
+        {mode === 'ready' && '获取验证码'}
+      </span>
     </Button>
   )
 }