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

src/components/composites/purchase/long/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 {Schema} from '@/components/composites/purchase/long/form'
+import {useFormContext} from 'react-hook-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
+        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
+        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}-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>
+
+      {/* 根据套餐类型显示不同表单项 */}
+      {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/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

@@ -0,0 +1,156 @@
+'use client'
+import {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'
+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/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 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 price = useMemo(() => {
+    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-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`}>
+            {live} 小时
+          </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: 2,
+          long: {
+            mode: Number(mode),
+            live: Number(live),
+            daily_limit: dailyLimit,
+            expire: Number(expire),
+            quota: quota,
+          },
+        }}/>
+      </> : (
+        <Link href={`/login`} className={buttonVariants()}>
+          登录后支付
+        </Link>
+      )}
+    </div>
+  )
+}