开启 ppr 优化渲染性能

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>
+  )
+}