开启 ppr 优化渲染性能

src/components/send-msg.tsx

@@ -0,0 +1,83 @@
+'use client'
+import {useEffect, useRef, useState} from 'react'
+import Cap from '@cap.js/widget'
+import {sendSMS} from '@/actions/verify'
+import {toast} from 'sonner'
+import {Button} from '@/components/ui/button'
+
+export default function SendMsg(props: {
+  phone: string
+}) {
+  const [countdown, setCountdown] = useState(0)
+  const [progress, setProgress] = useState(0)
+  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 {
+      // 检查手机号
+      const valid = /^1\d{10}$/.test(props.phone)
+      if (!valid) {
+        throw new Error('请输入正确的手机号')
+      }
+
+      // 完成挑战
+      const result = await cap.current.solve()
+      if (!result.success || !cap.current.token) {
+        throw new Error('人机验证失败')
+      }
+
+      // 发送验证码
+      const resp = await sendSMS({
+        phone: props.phone,
+        captcha: cap.current.token,
+      })
+      if (!resp.success) {
+        throw new Error(`验证码发送失败: ${resp.message}`)
+      }
+
+      setCountdown(60)
+      toast.success('验证码已发送')
+    }
+    catch (e) {
+      toast.error('验证码发送失败', {
+        description: (e as Error).message,
+      })
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      theme="outline"
+      className="whitespace-nowrap h-10"
+      disabled={countdown > 0}
+      onClick={sendCode}
+    >
+      {cap.current.token ? '1' : '0'}
+      {countdown > 0 ? `${countdown}秒后重发` : '获取验证码'}
+    </Button>
+  )
+}