开启 ppr 优化渲染性能

src/components/composites/purchase/index.tsx

@@ -14,7 +14,7 @@ export default function Purchase() {
 
   const tab = params.get('type') as TabType || 'short'
 
-  const updateTab = async (tab: string) => {
+  const updateTab = (tab: string) => {
     const newParams = new URLSearchParams(params)
     newParams.set('type', tab)
     router.push(`${path}?${newParams.toString()}`)

src/components/composites/purchase/long/right.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useContext, useMemo} from 'react'
+import {Suspense, use, useContext, useMemo} from 'react'
 import {PurchaseFormContext} from '@/components/composites/purchase/short/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import {FormField} from '@/components/ui/form'
@@ -8,7 +8,7 @@ import Image from 'next/image'
 import alipay from '../_assets/alipay.svg'
 import wechat from '../_assets/wechat.svg'
 import balance from '../_assets/balance.svg'
-import {useProfileStore} from '@/components/stores-provider'
+import {useProfileStore} from '@/components/stores/profile'
 import RechargeModal from '@/components/composites/recharge'
 import Pay from '@/components/composites/purchase/pay'
 import {buttonVariants} from '@/components/ui/button'
@@ -99,73 +99,89 @@ export default function Right() {
           {price}
         </span>
       </p>
-      {profile ? (
-        <>
-          <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
-            {({id, field}) => (
-              <RadioGroup
-                id={id}
-                defaultValue={field.value}
-                onValueChange={field.onChange}
-                className="flex flex-col gap-3">
-
-                <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
-                  <p className="flex items-center gap-3">
-                    <Image src={balance} alt="余额icon"/>
-                    <span className="text-sm text-gray-500">账户余额</span>
-                  </p>
-                  <p className="flex justify-between items-center">
-                    <span className="text-xl">{profile?.balance}</span>
-                    <RechargeModal/>
-                  </p>
-                </div>
-
-                <FormOption
-                  id={`${id}-balance`}
-                  value="balance"
-                  compare={field.value}
-                  className="p-3 w-full flex-row gap-2 justify-center">
-                  <Image src={balance} alt="余额 icon"/>
-                  <span>余额</span>
-                </FormOption>
-                <FormOption
-                  id={`${id}-wechat`}
-                  value="wechat"
-                  compare={field.value}
-                  className="p-3 w-full flex-row gap-2 justify-center">
-                  <Image src={wechat} alt="微信 logo"/>
-                  <span>微信</span>
-                </FormOption>
-                <FormOption
-                  id={`${id}-alipay`}
-                  value="alipay"
-                  compare={field.value}
-                  className="p-3 w-full flex-row gap-2 justify-center">
-                  <Image src={alipay} alt="支付宝 logo"/>
-                  <span>支付宝</span>
-                </FormOption>
-              </RadioGroup>
-            )}
-          </FormField>
-          <Pay
-            method={method}
-            amount={price}
-            resource={{
-              type: 2,
-              long: {
-                mode: Number(mode),
-                live: Number(live),
-                daily_limit: dailyLimit,
-                expire: Number(expire),
-                quota: quota,
-              },
-            }}/>
-        </>
-      ) : (
-        <Link href="/login" className={buttonVariants()}>
-          登录后支付
-        </Link>
-      )}
+      <Suspense>
+        <BalanceOrLogin {...{method, price, mode, live, quota, expire, dailyLimit}}/>
+      </Suspense>
     </Card>
   )
 }
+
+function BalanceOrLogin(props: {
+  method: 'wechat' | 'alipay' | 'balance'
+  price: string
+  mode: string
+  live: string
+  quota: number
+  expire: string
+  dailyLimit: number
+}) {
+  const profile = use(useProfileStore(store => store.profile))
+  return profile ? (
+    <>
+      <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
+        {({id, field}) => (
+          <RadioGroup
+            id={id}
+            defaultValue={field.value}
+            onValueChange={field.onChange}
+            className="flex flex-col gap-3">
+
+            <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
+              <p className="flex items-center gap-3">
+                <Image src={balance} alt="余额icon"/>
+                <span className="text-sm text-gray-500">账户余额</span>
+              </p>
+              <p className="flex justify-between items-center">
+                <span className="text-xl">{profile?.balance}</span>
+                <RechargeModal/>
+              </p>
+            </div>
+
+            <FormOption
+              id={`${id}-balance`}
+              value="balance"
+              compare={field.value}
+              className="p-3 w-full flex-row gap-2 justify-center">
+              <Image src={balance} alt="余额 icon"/>
+              <span>余额</span>
+            </FormOption>
+            <FormOption
+              id={`${id}-wechat`}
+              value="wechat"
+              compare={field.value}
+              className="p-3 w-full flex-row gap-2 justify-center">
+              <Image src={wechat} alt="微信 logo"/>
+              <span>微信</span>
+            </FormOption>
+            <FormOption
+              id={`${id}-alipay`}
+              value="alipay"
+              compare={field.value}
+              className="p-3 w-full flex-row gap-2 justify-center">
+              <Image src={alipay} alt="支付宝 logo"/>
+              <span>支付宝</span>
+            </FormOption>
+          </RadioGroup>
+        )}
+      </FormField>
+      <Pay
+        method={props.method}
+        balance={profile.balance}
+        amount={props.price}
+        resource={{
+          type: 2,
+          long: {
+            mode: Number(props.mode),
+            live: Number(props.live),
+            daily_limit: props.dailyLimit,
+            expire: Number(props.expire),
+            quota: props.quota,
+          },
+        }}/>
+    </>
+  ) : (
+    <Link href="/login" className={buttonVariants()}>
+      登录后支付
+    </Link>
+  )
+}

src/components/composites/purchase/pay.tsx

@@ -4,7 +4,7 @@ import {Button} from '@/components/ui/button'
 import balance from './_assets/balance.svg'
 import Image from 'next/image'
 import {useState} from 'react'
-import {useProfileStore} from '@/components/stores-provider'
+import {useProfileStore} from '@/components/stores/profile'
 import {Alert, AlertTitle} from '@/components/ui/alert'
 import {toast} from 'sonner'
 import {useRouter} from 'next/navigation'
@@ -18,13 +18,16 @@ import {PaymentProps} from '@/components/composites/payment/type'
 import {usePlatformType} from '@/lib/hooks'
 
 export type PayProps = {
-  method: 'alipay' | 'wechat' | 'balance'
   amount: string
   resource: Parameters<typeof createResource>[0]
-}
+} & ({
+  method: 'alipay' | 'wechat'
+} | {
+  method: 'balance'
+  balance: number
+})
 
 export default function Pay(props: PayProps) {
-  const profile = useProfileStore(store => store.profile)
   const refreshProfile = useProfileStore(store => store.refreshProfile)
   const [open, setOpen] = useState(false)
   const [trade, setTrade] = useState<PaymentProps | null>(null)
@@ -102,7 +105,7 @@ export default function Pay(props: PayProps) {
     }
   }
 
-  const balanceEnough = profile && profile.balance >= Number(props.amount)
+  const balanceEnough = balance >= Number(props.amount)
 
   return (
     <>
@@ -121,49 +124,43 @@ export default function Pay(props: PayProps) {
               </DialogTitle>
             </DialogHeader>
 
-            {profile && (
-              <div className="flex flex-col gap-4">
-                <div className="flex flex-col gap-1">
-                  <div className="flex justify-between items-center">
-                    <span className="text-weak text-sm">账户余额</span>
-                    <span className="text-lg">
-                      {profile.balance}
-                      元
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-weak text-sm">支付金额</span>
-                    <span className="text-lg text-accent">
-                      -
-                      {props.amount}
-                      元
-                    </span>
-                  </div>
-                  <hr className="my-2"/>
-                  <div className="flex justify-between items-center">
-                    <span className="text-weak text-sm">支付后余额</span>
-                    <span className={`text-lg ${balanceEnough ? 'text-done' : 'text-fail'}`}>
-                      {(profile.balance - Number(props.amount)).toFixed(2)}
-                      元
-                    </span>
-                  </div>
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1">
+                <div className="flex justify-between items-center">
+                  <span className="text-weak text-sm">账户余额</span>
+                  <span className="text-lg">
+                    {balance} 元
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-weak text-sm">支付金额</span>
+                  <span className="text-lg text-accent">
+                    - {props.amount} 元
+                  </span>
+                </div>
+                <hr className="my-2"/>
+                <div className="flex justify-between items-center">
+                  <span className="text-weak text-sm">支付后余额</span>
+                  <span className={`text-lg ${balanceEnough ? 'text-done' : 'text-fail'}`}>
+                    {(balance - Number(props.amount)).toFixed(2)} 元
+                  </span>
                 </div>
-
-                {balanceEnough ? (
-                  <Alert variant="done">
-                    <AlertTitle>
-                      检查无误后，点击确认支付按钮完成支付
-                    </AlertTitle>
-                  </Alert>
-                ) : (
-                  <Alert variant="fail">
-                    <AlertTitle>
-                      余额不足，请先充值或选择其他支付方式
-                    </AlertTitle>
-                  </Alert>
-                )}
               </div>
-            )}
+
+              {balanceEnough ? (
+                <Alert variant="done">
+                  <AlertTitle>
+                    检查无误后，点击确认支付按钮完成支付
+                  </AlertTitle>
+                </Alert>
+              ) : (
+                <Alert variant="fail">
+                  <AlertTitle>
+                    余额不足，请先充值或选择其他支付方式
+                  </AlertTitle>
+                </Alert>
+              )}
+            </div>
 
             <DialogFooter>
               <Button

src/components/composites/purchase/short/right.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useMemo} from 'react'
+import {Suspense, use, useMemo} from 'react'
 import {Schema} from '@/components/composites/purchase/short/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import {FormField} from '@/components/ui/form'
@@ -8,7 +8,7 @@ import Image from 'next/image'
 import alipay from '../_assets/alipay.svg'
 import wechat from '../_assets/wechat.svg'
 import balance from '../_assets/balance.svg'
-import {useProfileStore} from '@/components/stores-provider'
+import {useProfileStore} from '@/components/stores/profile'
 import RechargeModal from '@/components/composites/recharge'
 import {buttonVariants} from '@/components/ui/button'
 import Link from 'next/link'
@@ -18,8 +18,6 @@ import {useFormContext} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
 
 export default function Right() {
-  const profile = useProfileStore(store => store.profile)
-
   const form = useFormContext<Schema>()
 
   const method = form.watch('pay_type')
@@ -93,73 +91,89 @@ export default function Right() {
           {price}
         </span>
       </p>
-      {profile ? (
-        <>
-          <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
-            {({id, field}) => (
-              <RadioGroup
-                id={id}
-                defaultValue={field.value}
-                onValueChange={field.onChange}
-                className="flex flex-col gap-3">
-
-                <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
-                  <p className="flex items-center gap-3">
-                    <Image src={balance} alt="余额icon"/>
-                    <span className="text-sm text-gray-500">账户余额</span>
-                  </p>
-                  <p className="flex justify-between items-center">
-                    <span className="text-xl">{profile?.balance}</span>
-                    <RechargeModal/>
-                  </p>
-                </div>
-
-                <FormOption
-                  id={`${id}-balance`}
-                  value="balance"
-                  compare={field.value}
-                  className="p-3 w-full flex-row gap-2 justify-center">
-                  <Image src={balance} alt="余额 icon"/>
-                  <span>余额</span>
-                </FormOption>
-                <FormOption
-                  id={`${id}-wechat`}
-                  value="wechat"
-                  compare={field.value}
-                  className="p-3 w-full flex-row gap-2 justify-center">
-                  <Image src={wechat} alt="微信 logo"/>
-                  <span>微信</span>
-                </FormOption>
-                <FormOption
-                  id={`${id}-alipay`}
-                  value="alipay"
-                  compare={field.value}
-                  className="p-3 w-full flex-row gap-2 justify-center">
-                  <Image src={alipay} alt="支付宝 logo"/>
-                  <span>支付宝</span>
-                </FormOption>
-              </RadioGroup>
-            )}
-          </FormField>
-          <Pay
-            method={method}
-            amount={price}
-            resource={{
-              type: 1,
-              short: {
-                mode: Number(mode),
-                live: Number(live),
-                quota: quota,
-                expire: Number(expire),
-                daily_limit: dailyLimit,
-              },
-            }}/>
-        </>
-      ) : (
-        <Link href="/login" className={buttonVariants()}>
-          登录后支付
-        </Link>
-      )}
+      <Suspense>
+        <BalanceOrLogin {...{method, price, mode, live, quota, expire, dailyLimit}}/>
+      </Suspense>
     </Card>
   )
 }
+
+function BalanceOrLogin(props: {
+  method: 'wechat' | 'alipay' | 'balance'
+  price: string
+  mode: string
+  live: string
+  quota: number
+  expire: string
+  dailyLimit: number
+}) {
+  const profile = use(useProfileStore(store => store.profile))
+  return profile ? (
+    <>
+      <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
+        {({id, field}) => (
+          <RadioGroup
+            id={id}
+            defaultValue={field.value}
+            onValueChange={field.onChange}
+            className="flex flex-col gap-3">
+
+            <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
+              <p className="flex items-center gap-3">
+                <Image src={balance} alt="余额icon"/>
+                <span className="text-sm text-gray-500">账户余额</span>
+              </p>
+              <p className="flex justify-between items-center">
+                <span className="text-xl">{profile.balance}</span>
+                <RechargeModal/>
+              </p>
+            </div>
+
+            <FormOption
+              id={`${id}-balance`}
+              value="balance"
+              compare={field.value}
+              className="p-3 w-full flex-row gap-2 justify-center">
+              <Image src={balance} alt="余额 icon"/>
+              <span>余额</span>
+            </FormOption>
+            <FormOption
+              id={`${id}-wechat`}
+              value="wechat"
+              compare={field.value}
+              className="p-3 w-full flex-row gap-2 justify-center">
+              <Image src={wechat} alt="微信 logo"/>
+              <span>微信</span>
+            </FormOption>
+            <FormOption
+              id={`${id}-alipay`}
+              value="alipay"
+              compare={field.value}
+              className="p-3 w-full flex-row gap-2 justify-center">
+              <Image src={alipay} alt="支付宝 logo"/>
+              <span>支付宝</span>
+            </FormOption>
+          </RadioGroup>
+        )}
+      </FormField>
+      <Pay
+        method={props.method}
+        balance={profile.balance}
+        amount={props.price}
+        resource={{
+          type: 1,
+          short: {
+            mode: Number(props.mode),
+            live: Number(props.live),
+            quota: props.quota,
+            expire: Number(props.expire),
+            daily_limit: props.dailyLimit,
+          },
+        }}/>
+    </>
+  ) : (
+    <Link href="/login" className={buttonVariants()}>
+      登录后支付
+    </Link>
+  )
+}