开启 ppr 优化渲染性能

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