修复表单响应性问题 & 更新套餐管理接口字段

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

@@ -8,12 +8,12 @@ import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
 import check from '../_assets/check.svg'
 import {Schema} from '@/components/composites/purchase/long/form'
-import {useFormContext} from 'react-hook-form'
+import {useFormContext, useWatch} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
 
 export default function Center() {
   const form = useFormContext<Schema>()
-  const type = form.watch('type')
+  const type = useWatch({name: 'type'})
 
   return (
     <Card className="flex-auto p-6 flex flex-col gap-6 relative">

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

@@ -14,20 +14,18 @@ import Pay from '@/components/composites/purchase/pay'
 import {buttonVariants} from '@/components/ui/button'
 import Link from 'next/link'
 import {merge} from '@/lib/utils'
-import {useFormContext} from 'react-hook-form'
+import {useFormContext, useWatch} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/long/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')
-  const mode = form.watch('type')
-  const live = form.watch('live')
-  const quota = form.watch('quota')
-  const expire = form.watch('expire')
-  const dailyLimit = form.watch('daily_limit')
+  const {control} = useFormContext<Schema>()
+  const method = useWatch({control, name: 'pay_type'})
+  const mode = useWatch({control, name: 'type'})
+  const live = useWatch({control, name: 'live'})
+  const quota = useWatch({control, name: 'quota'})
+  const expire = useWatch({control, name: 'expire'})
+  const dailyLimit = useWatch({control, name: 'daily_limit'})
 
   const price = useMemo(() => {
     const base = {
@@ -173,9 +171,8 @@ function BalanceOrLogin(props: {
           long: {
             mode: Number(props.mode),
             live: Number(props.live),
-            daily_limit: props.dailyLimit,
-            expire_at: Number(props.expire),
-            quota: props.quota,
+            expire: Number(props.expire),
+            quota: props.mode === '1' ? props.dailyLimit : props.quota,
           },
         }}/>
     </>

src/components/composites/purchase/pay.tsx

@@ -8,7 +8,7 @@ import {useProfileStore} from '@/components/stores/profile'
 import {Alert, AlertTitle} from '@/components/ui/alert'
 import {toast} from 'sonner'
 import {useRouter} from 'next/navigation'
-import {completeResource, createResource, prepareResource} from '@/actions/resource'
+import {completeResource, createResource, CreateResourceReq, prepareResource} from '@/actions/resource'
 import {
   TradeMethod,
   TradeMethodDecoration,
@@ -19,7 +19,7 @@ import {usePlatformType} from '@/lib/hooks'
 
 export type PayProps = {
   amount: string
-  resource: Parameters<typeof createResource>[0]
+  resource: CreateResourceReq
 } & ({
   method: 'alipay' | 'wechat'
 } | {

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

@@ -7,13 +7,13 @@ import {Minus, Plus} from 'lucide-react'
 import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
 import check from '../_assets/check.svg'
-import {useFormContext} from 'react-hook-form'
+import {useFormContext, useWatch} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/short/form'
 import {Card} from '@/components/ui/card'
 
 export default function Center() {
   const form = useFormContext<Schema>()
-  const type = form.watch('type')
+  const type = useWatch({name: 'type'})
 
   return (
     <Card className="flex-auto p-6 flex flex-col gap-6 relative">
@@ -82,8 +82,8 @@ export default function Center() {
                 theme="outline"
                 type="button"
                 className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
-                onClick={() => form.setValue('quota', Math.max(10_000, Number(field.value) - 5_000))}
-                disabled={Number(field.value) === 10_000}>
+                onClick={() => form.setValue('quota', Math.max(10000, Number(field.value) - 5000))}
+                disabled={Number(field.value) === 10000}>
                 <Minus/>
               </Button>
               <Input
@@ -91,14 +91,13 @@ export default function Center() {
                 id={id}
                 type="number"
                 className="w-40 h-10 border border-gray-200 rounded-sm text-center"
-                min={10_000}
-                step={5_000}
-              />
+                min={10000}
+                step={5000}/>
               <Button
                 theme="outline"
                 type="button"
                 className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
-                onClick={() => form.setValue('quota', Number(field.value) + 5_000)}>
+                onClick={() => form.setValue('quota', Number(field.value) + 5000)}>
                 <Plus/>
               </Button>
             </div>

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

@@ -14,18 +14,17 @@ import {buttonVariants} from '@/components/ui/button'
 import Link from 'next/link'
 import {merge} from '@/lib/utils'
 import Pay from '@/components/composites/purchase/pay'
-import {useFormContext} from 'react-hook-form'
+import {useFormContext, useWatch} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
 
 export default function Right() {
-  const form = useFormContext<Schema>()
-
-  const method = form.watch('pay_type')
-  const live = form.watch('live')
-  const mode = form.watch('type')
-  const dailyLimit = form.watch('daily_limit')
-  const expire = form.watch('expire')
-  const quota = form.watch('quota')
+  const {control} = useFormContext<Schema>()
+  const method = useWatch({control, name: 'pay_type'})
+  const live = useWatch({control, name: 'live'})
+  const mode = useWatch({control, name: 'type'})
+  const dailyLimit = useWatch({control, name: 'daily_limit'})
+  const expire = useWatch({control, name: 'expire'})
+  const quota = useWatch({control, name: 'quota'})
 
   const price = useMemo(() => {
     const base = live === '180' ? 150 : Number(live)
@@ -165,9 +164,8 @@ function BalanceOrLogin(props: {
           short: {
             mode: Number(props.mode),
             live: Number(props.live),
-            quota: props.quota,
-            expire_at: Number(props.expire),
-            daily_limit: props.dailyLimit,
+            expire: Number(props.expire),
+            quota: props.mode === '1' ? props.dailyLimit : props.quota,
           },
         }}/>
     </>