重构项目结构，将数据层集中在 lib 包中；resource 类型更新，支持多个子套餐类型分别表示；新增长效套餐的购买流程，以及已购查询功能

src/components/composites/purchase/index.tsx

@@ -1,7 +1,8 @@
-import PurchaseForm from '@/components/composites/purchase/_client/form'
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import {ReactNode} from 'react'
 import {merge} from '@/lib/utils'
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
+import LongForm from '@/components/composites/purchase/long/form'
+import ShortForm from '@/components/composites/purchase/short/form'
 
 export type PurchaseProps = {}
 
@@ -17,10 +18,10 @@ export default async function Purchase(props: PurchaseProps) {
           <Tab value={`custom`}>定制套餐</Tab>
         </TabsList>
         <TabsContent value={`short`}>
-          <PurchaseForm/>
+          <ShortForm/>
         </TabsContent>
         <TabsContent value={`long`}>
-          <PurchaseForm/>
+          <LongForm/>
         </TabsContent>
       </Tabs>
     </div>

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

@@ -4,20 +4,15 @@ import {RadioGroup} from '@/components/ui/radio-group'
 import {Input} from '@/components/ui/input'
 import {Button} from '@/components/ui/button'
 import {Minus, Plus} from 'lucide-react'
-import {PurchaseFormContext, Schema} from '@/components/composites/purchase/_client/form'
-import {useContext} from 'react'
-import FormOption from '@/components/composites/purchase/_client/option'
+import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
 import check from '@/components/composites/purchase/_assets/check.svg'
+import {Schema} from '@/components/composites/purchase/long/form'
+import {useFormContext} from 'react-hook-form'
 
 export default function Center() {
-
-  const form = useContext(PurchaseFormContext)?.form
-  if (!form) {
-    throw new Error(`Center component must be used within PurchaseFormContext`)
-  }
-
-  const watchType = form.watch('type')
+  const form = useFormContext<Schema>()
+  const type = form.watch('type')
 
   return (
     <div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
@@ -64,17 +59,17 @@ export default function Center() {
             onValueChange={field.onChange}
             className={`flex gap-4 flex-wrap`}>
 
-            <FormOption id={`${id}-3`} value="3" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
-            <FormOption id={`${id}-5`} value="5" label="5 分钟" description="￥0.007/IP" compare={field.value}/>
-            <FormOption id={`${id}-10`} value="10" label="10 分钟" description="￥0.010/IP" compare={field.value}/>
-            <FormOption id={`${id}-20`} value="20" label="20 分钟" description="￥0.015/IP" compare={field.value}/>
-            <FormOption id={`${id}-30`} value="30" label="30 分钟" description="￥0.020/IP" compare={field.value}/>
+            <FormOption id={`${id}-1`} value="1" label="1 小时" description="￥0.3/IP" compare={field.value}/>
+            <FormOption id={`${id}-4`} value="4" label="4 小时" description="￥0.8/IP" compare={field.value}/>
+            <FormOption id={`${id}-8`} value="8" label="8 小时" description="￥1.2/IP" compare={field.value}/>
+            <FormOption id={`${id}-12`} value="12" label="12 小时" description="￥1.8/IP" compare={field.value}/>
+            <FormOption id={`${id}-24`} value="24" label="24 小时" description="￥3.5/IP" compare={field.value}/>
           </RadioGroup>
         )}
       </FormField>
 
       {/* 根据套餐类型显示不同表单项 */}
-      {watchType === '2' ? (
+      {type === '2' ? (
         /* 包量：IP 购买数量 */
         <FormField
           className={`space-y-4`}

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

@@ -0,0 +1,52 @@
+'use client'
+import {createContext} from 'react'
+import {useForm, UseFormReturn} from 'react-hook-form'
+import Center from '@/components/composites/purchase/long/center'
+import Right from '@/components/composites/purchase/long/right'
+import {Form} from '@/components/ui/form'
+import * as z from 'zod'
+import {zodResolver} from '@hookform/resolvers/zod'
+
+// 定义表单验证架构
+const schema = z.object({
+  type: z.enum(['1', '2']).default('2'),
+  live: z.enum(['1', '4', '8', '12', '24']),
+  quota: z.number().min(500, '购买数量不能少于 500 个'),
+  expire: z.enum(['7', '15', '30', '90', '180', '365']),
+  daily_limit: z.number().min(100, '每日限额不能少于 100 个'),
+  pay_type: z.enum(['wechat', 'alipay', 'balance']),
+})
+
+// 从架构中推断类型
+export type Schema = z.infer<typeof schema>
+
+type PurchaseFormContextType = {
+  form: UseFormReturn<Schema>
+  onSubmit?: () => void
+}
+
+export const LongFormContext = createContext<PurchaseFormContextType | undefined>(undefined)
+
+export default function LongForm() {
+  const form = useForm<Schema>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      type: '2', // 默认为包量套餐
+      live: '1', // 小时
+      quota: 500,
+      expire: '30', // 天
+      daily_limit: 100,
+      pay_type: 'balance', // 余额支付
+    },
+  })
+
+  return (
+    <Form form={form} className={`bg-white rounded-lg flex flex-row`}>
+      <LongFormContext.Provider value={{form}}>
+        <Center/>
+        <Right/>
+      </LongFormContext.Provider>
+    </Form>
+  )
+}
+

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

@@ -1,56 +1,51 @@
 'use client'
 import {useContext, useMemo} from 'react'
-import {PurchaseFormContext} from '@/components/composites/purchase/_client/form'
+import {PurchaseFormContext} from '@/components/composites/purchase/short/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import {FormField} from '@/components/ui/form'
-import FormOption from '@/components/composites/purchase/_client/option'
+import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
 import alipay from '@/components/composites/purchase/_assets/alipay.svg'
 import wechat from '@/components/composites/purchase/_assets/wechat.svg'
 import balance from '@/components/composites/purchase/_assets/balance.svg'
 import {useProfileStore} from '@/components/providers/StoreProvider'
 import RechargeModal from '@/components/composites/recharge'
-import Pay from '@/components/composites/purchase/_client/pay'
+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 {Schema} from '@/components/composites/purchase/long/form'
 
-export type RightProps = {}
-
-export default function Right(props: RightProps) {
+export default function Right() {
   const profile = useProfileStore(store => store.profile)
+  const form = useFormContext<Schema>()
 
-  const form = useContext(PurchaseFormContext)?.form
-  if (!form) {
-    throw new Error(`Center component must be used within PurchaseFormContext`)
-  }
-
-  const watchType = form.watch('type')
-  const watchLive = form.watch('live')
-  const watchQuota = form.watch('quota')
-  const watchExpire = form.watch('expire')
-  const watchDailyLimit = form.watch('daily_limit')
-  const payType = form.watch('pay_type')
+  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 price = useMemo(() => {
-    const count = watchType === '1' ? watchDailyLimit : watchQuota
-
-    let seconds = parseInt(watchLive, 10) * 60
-    if (seconds == 180) {
-      seconds = 150
-    }
-
-    let times = parseInt(watchExpire, 10)
-    if (watchType === '2') {
-      times = 1
-    }
-
-    return count * seconds * times / 30000
-  }, [watchDailyLimit, watchExpire, watchLive, watchQuota, watchType])
+    const base = {
+      '1': 30,
+      '4': 80,
+      '8': 120,
+      '12': 180,
+      '24': 350,
+    }[live]
+    const factor = {
+      '1': Number(expire) * dailyLimit,
+      '2': quota,
+    }[mode]
+    return (base * factor / 100).toFixed(2)
+  }, [dailyLimit, expire, live, quota, mode])
 
   return (
     <div className={merge(
-      `flex-none basis-80 p-6 flex flex-col gap-6 relative`,
+      `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
       `after:absolute after:inset-0 after:my-6 after:border-l after:border-gray-200 after:select-none after:pointer-events-none`,
     )}>
       <h3>订单详情</h3>
@@ -58,33 +53,33 @@ export default function Right(props: RightProps) {
         <li className={`flex justify-between items-center`}>
           <span className={`text-sm text-gray-500`}>套餐名称</span>
           <span className={`text-sm`}>
-            {watchType === '2' ? `包量套餐` : `包时套餐`}
+            {mode === '2' ? `包量套餐` : `包时套餐`}
           </span>
         </li>
         <li className={`flex justify-between items-center`}>
           <span className={`text-sm text-gray-500`}>IP 时效</span>
           <span className={`text-sm`}>
-            {watchLive}分钟
+            {live} 小时
           </span>
         </li>
-        {watchType === '2' ? (
+        {mode === '2' ? (
           <li className={`flex justify-between items-center`}>
             <span className={`text-sm text-gray-500`}>购买 IP 量</span>
             <span className={`text-sm`}>
-              {watchQuota}个
+              {quota}个
             </span>
           </li>
         ) : <>
           <li className={`flex justify-between items-center`}>
             <span className={`text-sm text-gray-500`}>套餐时长</span>
             <span className={`text-sm`}>
-              {watchExpire}天
+              {expire}天
             </span>
           </li>
           <li className={`flex justify-between items-center`}>
             <span className={`text-sm text-gray-500`}>每日限额</span>
             <span className={`text-sm`}>
-              {watchDailyLimit}个
+              {dailyLimit}个
             </span>
           </li>
         </>}
@@ -141,12 +136,15 @@ export default function Right(props: RightProps) {
             </RadioGroup>
           )}
         </FormField>
-        <Pay method={payType} amount={price} resource={{
-          type: Number(watchType),
-          live: Number(watchLive) * 60,
-          quota: watchQuota,
-          expire: Number(watchExpire),
-          daily_limit: watchDailyLimit,
+        <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()}>

src/components/composites/purchase/pay.tsx

@@ -1,33 +1,24 @@
 'use client'
 import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
-import alipay from '../_assets/alipay.svg'
-import wechat from '../_assets/wechat.svg'
-import balance from '../_assets/balance.svg'
+import alipay from './_assets/alipay.svg'
+import wechat from './_assets/wechat.svg'
+import balance from './_assets/balance.svg'
 import Image from 'next/image'
-import {useContext, useEffect, useRef, useState} from 'react'
-import {StoreContext, useProfileStore} from '@/components/providers/StoreProvider'
+import {useEffect, useRef, useState} from 'react'
+import {useProfileStore} from '@/components/providers/StoreProvider'
 import {Alert, AlertDescription} from '@/components/ui/alert'
-import {
-  prepareResourceByAlipay,
-  prepareResourceByWechat,
-  CreateResourceReq,
-  CreateResourceResp,
-  createResourceByBalance,
-  createResourceByAlipay,
-  createResourceByWechat,
-} from '@/actions/resource'
-import {ApiResponse} from '@/lib/api'
+import {ApiResponse, ExtraResp, ExtraReq} from '@/lib/api'
 import {toast} from 'sonner'
 import {Loader} from 'lucide-react'
 import {useRouter} from 'next/navigation'
 import * as qrcode from 'qrcode'
+import {completeResource, createResource, prepareResource} from '@/actions/resource'
 
 export type PayProps = {
   method: 'alipay' | 'wechat' | 'balance'
-  amount: number
-  resource: CreateResourceReq
-
+  amount: string
+  resource: ExtraReq<typeof createResource>
 }
 
 export default function Pay(props: PayProps) {
@@ -36,14 +27,14 @@ export default function Pay(props: PayProps) {
   const refreshProfile = useProfileStore(store => store.refreshProfile)
 
   const [open, setOpen] = useState(false)
-  const [payInfo, setPayInfo] = useState<CreateResourceResp | undefined>()
+  const [payInfo, setPayInfo] = useState<ExtraResp<typeof prepareResource> | undefined>()
   const canvas = useRef<HTMLCanvasElement>(null)
   useEffect(() => {
     if (canvas.current && payInfo) {
       qrcode.toCanvas(canvas.current, payInfo.pay_url, {
         width: 200,
         margin: 0,
-      })
+      }).then()
     }
   }, [payInfo])
 
@@ -54,15 +45,15 @@ export default function Pay(props: PayProps) {
       return
     }
 
-    let resp: ApiResponse<CreateResourceResp>
-    switch (props.method) {
-    case 'alipay':
-      resp = await prepareResourceByAlipay(props.resource)
-      break
-    case 'wechat':
-      resp = await prepareResourceByWechat(props.resource)
-      break
-    }
+    const method = {
+      alipay: 1,
+      wechat: 2,
+    }[props.method]
+
+    const resp = await prepareResource({
+      ...props.resource,
+      method,
+    })
     if (!resp.success) {
       toast.error(`创建订单失败: ${resp.message}`)
       setOpen(false)
@@ -78,17 +69,20 @@ export default function Pay(props: PayProps) {
     try {
       switch (props.method) {
       case 'alipay':
-        resp = await createResourceByAlipay({
-          trade_no: payInfo!.trade_no,
-        })
-        break
       case 'wechat':
-        resp = await createResourceByWechat({
-          trade_no: payInfo!.trade_no,
+        if (!payInfo) {
+          toast.error('无法读取支付信息', {
+            description: `请联系客服确认支付状态`,
+          })
+          return
+        }
+        resp = await completeResource({
+          trade_no: payInfo.trade_no,
         })
         break
+
       case 'balance':
-        resp = await createResourceByBalance(props.resource)
+        resp = await createResource(props.resource)
         break
       }
 
@@ -116,6 +110,8 @@ export default function Pay(props: PayProps) {
     }
   }
 
+  const balanceEnough = profile && profile.balance >= Number(props.amount)
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -156,26 +152,24 @@ export default function Pay(props: PayProps) {
                 <hr className="my-2"/>
                 <div className="flex justify-between items-center">
                   <span className="text-weak text-sm">支付后余额</span>
-                  <span className={`text-lg ${profile.balance > props.amount ? 'text-done' : `text-fail`}`}>
-                    {profile.balance - props.amount}元
+                  <span className={`text-lg ${balanceEnough ? 'text-done' : `text-fail`}`}>
+                    {(profile.balance - Number(props.amount)).toFixed(2)}元
                   </span>
                 </div>
               </div>
 
-              {profile.balance < props.amount && (
-                <Alert variant="fail">
-                  <AlertDescription>
-                    余额不足，请先充值或选择其他支付方式
-                  </AlertDescription>
-                </Alert>
-              )}
-
-              {profile.balance >= props.amount && (
+              {balanceEnough ? (
                 <Alert>
                   <AlertDescription>
                     检查无误后，点击确认支付按钮完成支付
                   </AlertDescription>
                 </Alert>
+              ) : (
+                <Alert variant="fail">
+                  <AlertDescription>
+                    余额不足，请先充值或选择其他支付方式
+                  </AlertDescription>
+                </Alert>
               )}
             </div>
           )
@@ -205,7 +199,7 @@ export default function Pay(props: PayProps) {
         <DialogFooter>
           <Button
             type="button"
-            disabled={props.method === 'balance' && !!profile && profile.balance < props.amount}
+            disabled={props.method === 'balance' && !!profile && !balanceEnough}
             onClick={onSubmit}
           >
             {props.method === 'balance' ? '确认支付' : '已完成支付'}

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

@@ -0,0 +1,210 @@
+'use client'
+import {FormField} from '@/components/ui/form'
+import {RadioGroup} from '@/components/ui/radio-group'
+import {Input} from '@/components/ui/input'
+import {Button} from '@/components/ui/button'
+import {Minus, Plus} from 'lucide-react'
+import FormOption from '@/components/composites/purchase/option'
+import Image from 'next/image'
+import check from '@/components/composites/purchase/_assets/check.svg'
+import {useFormContext} from 'react-hook-form'
+import {Schema} from '@/components/composites/purchase/short/form'
+
+export default function Center() {
+  const form = useFormContext<Schema>()
+  const type = form.watch('type')
+
+  return (
+    <div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
+
+      {/* 计费方式 */}
+      <FormField<Schema, 'type'>
+        className={`flex flex-col gap-4`}
+        name={`type`}
+        label={`计费方式`}>
+        {({id, field}) => (
+          <RadioGroup
+            id={id}
+            defaultValue={field.value}
+            onValueChange={field.onChange}
+            className={`flex gap-4`}>
+
+            <FormOption
+              id={`${id}-2`}
+              value="2"
+              label="包量套餐"
+              description="适用于短期或不定期高提取业务场景"
+              compare={field.value}/>
+
+            <FormOption
+              id={`${id}-1`}
+              value="1"
+              label="包时套餐"
+              description="适用于每日提取量稳定的业务场景"
+              compare={field.value}/>
+
+          </RadioGroup>
+        )}
+      </FormField>
+
+      {/* IP 时效 */}
+      <FormField<Schema, 'live'>
+        className={`space-y-4`}
+        name={`live`}
+        label={`IP 时效`}>
+        {({id, field}) => (
+          <RadioGroup
+            id={id}
+            defaultValue={field.value}
+            onValueChange={field.onChange}
+            className={`flex gap-4 flex-wrap`}>
+
+            <FormOption id={`${id}-3`} value="180" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
+            <FormOption id={`${id}-5`} value="300" label="5 分钟" description="￥0.01/IP" compare={field.value}/>
+            <FormOption id={`${id}-10`} value="600" label="10 分钟" description="￥0.02/IP" compare={field.value}/>
+            <FormOption id={`${id}-20`} value="1200" label="20 分钟" description="￥0.03/IP" compare={field.value}/>
+            <FormOption id={`${id}-30`} value="1800" label="30 分钟" description="￥0.06/IP" compare={field.value}/>
+          </RadioGroup>
+        )}
+      </FormField>
+
+      {/* 根据套餐类型显示不同表单项 */}
+      {type === '2' ? (
+        /* 包量：IP 购买数量 */
+        <FormField
+          className={`space-y-4`}
+          name={`quota`}
+          label={`IP 购买数量`}>
+          {({id, field}) => (
+            <div className={`flex gap-2 items-center`}>
+              <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', Math.max(10_000, Number(field.value) - 5_000))}
+                disabled={Number(field.value) === 10_000}>
+                <Minus/>
+              </Button>
+              <Input
+                {...field}
+                id={id}
+                type="number"
+                className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                min={10_000}
+                step={5_000}
+              />
+              <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)}>
+                <Plus/>
+              </Button>
+            </div>
+          )}
+        </FormField>
+      ) : (
+        <>
+          {/* 包时：套餐时效 */}
+          <FormField
+            className={`space-y-4`}
+            name={`expire`}
+            label={`套餐时效`}>
+            {({id, field}) => (
+              <RadioGroup
+                id={id}
+                defaultValue={field.value}
+                onValueChange={field.onChange}
+                className={`flex gap-4 flex-wrap`}>
+
+                <FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
+                <FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
+                <FormOption id={`${id}-30`} value="30" label="30天" compare={field.value}/>
+                <FormOption id={`${id}-90`} value="90" label="90天" compare={field.value}/>
+                <FormOption id={`${id}-180`} value="180" label="180天" compare={field.value}/>
+                <FormOption id={`${id}-365`} value="365" label="365天" compare={field.value}/>
+              </RadioGroup>
+            )}
+          </FormField>
+
+          {/* 包时：每日提取上限 */}
+          <FormField
+            className={`space-y-4`}
+            name={`daily_limit`}
+            label={`每日提取上限`}>
+            {({id, field}) => (
+              <div className={`flex gap-2 items-center`}>
+                <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('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
+                  disabled={Number(field.value) === 2_000}>
+                  <Minus/>
+                </Button>
+                <Input
+                  {...field}
+                  id={id}
+                  type="number"
+                  className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                  min={2_000}
+                  step={1_000}
+                />
+                <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('daily_limit', Number(field.value) + 1_000)}>
+                  <Plus/>
+                </Button>
+              </div>
+            )}
+          </FormField>
+        </>
+      )}
+
+      {/* 产品特性 */}
+      <div className={`space-y-6`}>
+        <h3>产品特性</h3>
+        <div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,8 +1,8 @@
 'use client'
 import {createContext} from 'react'
 import {useForm, UseFormReturn} from 'react-hook-form'
-import Center from '@/components/composites/purchase/_client/center'
-import Right from '@/components/composites/purchase/_client/right'
+import Center from '@/components/composites/purchase/short/center'
+import Right from '@/components/composites/purchase/short/right'
 import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
@@ -10,7 +10,7 @@ import {zodResolver} from '@hookform/resolvers/zod'
 // 定义表单验证架构
 const schema = z.object({
   type: z.enum(['1', '2']).default('2'),
-  live: z.enum(['3', '5', '10', '20', '30']),
+  live: z.enum(['180', '300', '600', '1200', '1800']),
   quota: z.number().min(10000, '购买数量不能少于10000个'),
   expire: z.enum(['7', '15', '30', '90', '180', '365']),
   daily_limit: z.number().min(2000, '每日限额不能少于2000个'),
@@ -34,7 +34,7 @@ export default function PurchaseForm(props: PurchaseFormProps) {
     resolver: zodResolver(schema),
     defaultValues: {
       type: '2', // 默认为包量套餐
-      live: '3', // 分钟
+      live: '180', // 分钟
       quota: 10_000, // >= 10000
       expire: '30', // 天
       daily_limit: 2_000, // >= 2000
@@ -43,14 +43,10 @@ export default function PurchaseForm(props: PurchaseFormProps) {
   })
 
   return (
-    <section role={`tabpanel`} className={`bg-white rounded-lg`}>
-      <Form form={form} className={`flex flex-row`}>
-        <PurchaseFormContext.Provider value={{form}}>
-          <Center/>
-          <Right/>
-        </PurchaseFormContext.Provider>
-      </Form>
-    </section>
+    <Form form={form} className={`bg-white rounded-lg flex flex-row`}>
+      <Center/>
+      <Right/>
+    </Form>
   )
 }
 

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

@@ -0,0 +1,167 @@
+'use client'
+import {useMemo} from 'react'
+import {Schema} from '@/components/composites/purchase/short/form'
+import {RadioGroup} from '@/components/ui/radio-group'
+import {FormField} from '@/components/ui/form'
+import FormOption from '@/components/composites/purchase/option'
+import Image from 'next/image'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import balance from '@/components/composites/purchase/_assets/balance.svg'
+import {useProfileStore} from '@/components/providers/StoreProvider'
+import RechargeModal from '@/components/composites/recharge'
+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'
+
+export default function Right() {
+  const profile = useProfileStore(store => store.profile)
+
+  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 price = useMemo(() => {
+    // var factor int32
+    // switch data.Mode {
+    // case 1:
+    //   factor = data.DailyLimit * data.Expire
+    // case 2:
+    //   factor = data.Quota
+    // }
+    //
+    // var base = data.Live
+    // if base == 180 {
+    //   base = 150
+    // }
+    //
+    // var dec = decimal.Decimal{}.
+    // Add(decimal.NewFromInt32(base * factor)).
+    // Div(decimal.NewFromInt(30000))
+    // data.price = &dec
+    const base = live === '180' ? 150 : Number(live) * 60
+    const factor = {
+      '1': Number(expire) * dailyLimit,
+      '2': quota,
+    }[mode]
+    return (base * factor / 30000).toFixed(2)
+  }, [dailyLimit, expire, live, quota, mode])
+
+  return (
+    <div className={merge(
+      `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
+      `after:absolute after:inset-0 after:my-6 after:border-l after:border-gray-200 after:select-none after:pointer-events-none`,
+    )}>
+      <h3>订单详情</h3>
+      <ul className={`flex flex-col gap-3`}>
+        <li className={`flex justify-between items-center`}>
+          <span className={`text-sm text-gray-500`}>套餐名称</span>
+          <span className={`text-sm`}>
+            {mode === '2' ? `包量套餐` : `包时套餐`}
+          </span>
+        </li>
+        <li className={`flex justify-between items-center`}>
+          <span className={`text-sm text-gray-500`}>IP 时效</span>
+          <span className={`text-sm`}>
+            {Number(live) / 60} 分钟
+          </span>
+        </li>
+        {mode === '2' ? (
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>购买 IP 量</span>
+            <span className={`text-sm`}>
+              {quota}个
+            </span>
+          </li>
+        ) : <>
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>套餐时长</span>
+            <span className={`text-sm`}>
+              {expire}天
+            </span>
+          </li>
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>每日限额</span>
+            <span className={`text-sm`}>
+              {dailyLimit}个
+            </span>
+          </li>
+        </>}
+      </ul>
+      <div className={`border-b border-gray-200`}></div>
+      <p className={`flex justify-between items-center`}>
+        <span>价格</span>
+        <span className={`text-xl text-orange-500`}>￥{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>
+      )}
+    </div>
+  )
+}