开启 ppr 优化渲染性能

src/app/(auth)/login/login-card.tsx

@@ -7,15 +7,16 @@ import {Form, FormField} from '@/components/ui/form'
 import {Label} from '@/components/ui/label'
 import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import {EyeClosedIcon, EyeIcon} from 'lucide-react'
-import {useState, ReactNode} from 'react'
+import {useState, ReactNode, useEffect, Suspense} from 'react'
 import zod from 'zod'
-import {useForm} from 'react-hook-form'
+import {useForm, useFormContext, useWatch} from 'react-hook-form'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {toast} from 'sonner'
 import {useRouter} from 'next/navigation'
-import {login} from '@/actions/auth'
-import {useProfileStore} from '@/components/stores-provider'
-import Captcha from './captcha'
+import {login, LoginMode} from '@/actions/auth'
+import {useProfileStore} from '@/components/stores/profile'
+import SendMsg from '@/components/send-msg'
+import '@cap.js/widget'
 
 const smsSchema = zod.object({
   username: zod.string().length(11, '请输入正确的手机号码'),
@@ -31,15 +32,23 @@ const pwdSchema = zod.object({
 
 export type LoginSchema = zod.infer<typeof smsSchema | typeof pwdSchema>
 
-export default function LoginCard(props: {
-  defaultMode?: 'phone_code' | 'password'
-  redirect?: string
-}) {
+export default function LoginCard() {
   const router = useRouter()
   const refreshProfile = useProfileStore(store => store.refreshProfile)
-  const [mode, setMode] = useState(props.defaultMode || 'phone_code')
+  const [mode, setMode] = useState<LoginMode>('phone_code')
   const [submitting, setSubmitting] = useState(false)
 
+  const updateLoginMode = (mode: LoginMode) => {
+    sessionStorage.setItem('login_mode', mode)
+  }
+
+  useEffect(() => {
+    const mode = sessionStorage.getItem('login_mode')
+    if (mode) {
+      setMode(mode as LoginMode)
+    }
+  }, [])
+
   const form = useForm<LoginSchema>({
     resolver: zodResolver(mode === 'phone_code' ? smsSchema : pwdSchema),
     defaultValues: {
@@ -56,9 +65,12 @@ export default function LoginCard(props: {
         throw new Error(result.message || '请检查账号和密码/验证码是否正确')
       }
 
+      const params = new URLSearchParams(window.location.search)
+
       // 登录成功
       await refreshProfile()
-      router.push(props.redirect || '/')
+      updateLoginMode(mode)
+      router.push(params.get('redirect') || '/')
       toast.success('登录成功', {
         description: '欢迎回来！',
       })
@@ -114,7 +126,7 @@ export default function LoginCard(props: {
                     placeholder="请输入验证码"
                     autoComplete="one-time-code"
                   />
-                  <Captcha/>
+                  <SendMsgByUsername/>
                 </div>
               ) : (
                 <div className="relative">
@@ -193,3 +205,9 @@ function Tab(props: {
     </TabsTrigger>
   )
 }
+
+function SendMsgByUsername() {
+  const form = useFormContext<LoginSchema>()
+  const phone = form.watch('username')
+  return <SendMsg phone={phone}/>
+}