完善首页代理产品间距和布局 & 修复购买套餐请求参数获取

src/components/composites/purchase/custom/page.tsx

@@ -0,0 +1,244 @@
+'use client'
+import {Form, FormField} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {Button} from '@/components/ui/button'
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
+import {useForm} from 'react-hook-form'
+import {z} from 'zod'
+import {zodResolver} from '@hookform/resolvers/zod'
+import Image from 'next/image'
+import check from '@/assets/check-accent.svg'
+import banner from '../_assets/Mask-group.webp'
+import group from '../_assets/Group.webp'
+import {merge} from '@/lib/utils'
+import FreeTrial from '@/components/free-trial'
+
+const formSchema = z.object({
+  companyName: z.string().min(2, '企业名称至少2个字符'),
+  contactName: z.string().min(2, '联系人姓名至少2个字符'),
+  phone: z.string().min(11, '请输入11位手机号码').max(11, '手机号码长度不正确'),
+  monthlyUsage: z.string().min(1, '请选择您需要的用量'),
+  purpose: z.string().min(1, '输入用途'),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+export default function CollectPage() {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      companyName: '',
+      contactName: '',
+      phone: '',
+      monthlyUsage: '',
+      purpose: '',
+    },
+  })
+
+  return (
+    <>
+      <div className="bg-white rounded-lg shadow-md overflow-hidden p-6">
+        <div className="text-center mb-4">
+          <h1 className="text-2xl font-bold">优质代理IP服务商</h1>
+          <p className="text-gray-600 font-medium mt-2">
+            以技术升级为核心，提供优质的IP代理使用体验
+          </p>
+        </div>
+
+        <div className="flex flex-col md:flex-row md:gap-4">
+          <div className="w-full md:w-1/3 mb-6 md:mb-0">
+            <div className="relative h-full w-full min-h-[200px] md:min-h-[300px] rounded-xl overflow-hidden">
+              <Image
+                src={banner}
+                alt="宣传图"
+                fill
+                className="object-cover"
+                priority
+                sizes="(max-width: 768px) 100vw, 33vw"
+              />
+            </div>
+          </div>
+
+          <div className="w-full md:w-2/3 flex flex-col gap-4">
+            <p className="text-sm md:text-base text-gray-600 leading-relaxed">
+              华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。公司拥有海量优质IP资源，涵盖全球多地，能精准匹配不同客户需求，无论是数据采集、网络营销还是突破地域限制，都能提供合适方案。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行，让用户使用过程顺畅无忧，数据安全有保障。秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。
+            </p>
+
+            <div className="mt-2 md:mt-4">
+              <Button className="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 md:px-6 py-2 md:py-3 rounded-md">
+                立即咨询
+              </Button>
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mt-2 md:mt-6">
+              <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
+                <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
+                <span>IP时效3-30分钟(可定制)</span>
+              </div>
+              <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
+                <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
+                <span>IP时效3-30分钟(可定制)</span>
+              </div>
+              <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
+                <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
+                <span>IP时效3-30分钟(可定制)</span>
+              </div>
+              <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
+                <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
+                <span>支持高并发提取</span>
+              </div>
+              <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
+                <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
+                <span>支持高并发提取</span>
+              </div>
+              <div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
+                <Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
+                <span>支持高并发提取</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="text-center">
+        <h2 className="text-2xl font-semibold mb-6 mt-6">企业基本信息</h2>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <Form form={form}>
+          <div className="mx-auto max-w-xl space-y-6">
+            {/* 企业名称 */}
+            <FormField name="companyName">
+              {({id, field}) => (
+                <div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
+                  <label
+                    htmlFor={id}
+                    className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
+                    <span className="text-red-500">*</span>
+                    <span>企业名称</span>
+                  </label>
+                  <Input
+                    {...field}
+                    id={id}
+                    placeholder="请输入企业名称"
+                    className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
+                </div>
+              )}
+            </FormField>
+
+            {/* 联系人姓名 */}
+            <FormField name="contactName">
+              {({id, field}) => (
+                <div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
+                  <label
+                    htmlFor={id}
+                    className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
+                    <span className="text-red-500">*</span>
+                    <span>联系人姓名</span>
+                  </label>
+                  <Input
+                    {...field}
+                    id={id}
+                    placeholder="请输入联系人姓名"
+                    className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
+                </div>
+              )}
+            </FormField>
+
+            {/* 联系人手机号码 */}
+            <FormField name="phone">
+              {({id, field}) => (
+                <div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
+                  <label
+                    htmlFor={id}
+                    className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
+                    <span className="text-red-500">*</span>
+                    <span>联系人手机号码</span>
+                  </label>
+                  <Input
+                    {...field}
+                    id={id}
+                    placeholder="请输入手机号码"
+                    className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
+                </div>
+              )}
+            </FormField>
+
+            {/* 每月需求用量 */}
+            <FormField name="monthlyUsage">
+              {({id, field}) => (
+                <div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
+                  <label
+                    htmlFor={id}
+                    className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
+                    <span className="text-red-500">*</span>
+                    <span>每月需求用量</span>
+                  </label>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger
+                      id={id}
+                      className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs">
+                      <SelectValue placeholder="请选择您需要的用量"/>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="less20">小于20万</SelectItem>
+                      <SelectItem value="20-100">20万~100万</SelectItem>
+                      <SelectItem value="100-500">100万~500万</SelectItem>
+                      <SelectItem value="more500">大于500万</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </FormField>
+
+            {/* 用途 */}
+            <FormField name="purpose">
+              {({id, field}) => (
+                <div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
+                  <label
+                    htmlFor={id}
+                    className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
+                    <span className="text-red-500">*</span>
+                    <span>用途</span>
+                  </label>
+                  <Input
+                    {...field}
+                    id={id}
+                    placeholder="请输入用途，例如：爬虫"
+                    className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
+                </div>
+              )}
+            </FormField>
+
+            <div className="pt-4 flex justify-center">
+              <Button type="submit" className="bg-blue-600 hover:bg-blue-700 px-8">
+                提交
+              </Button>
+            </div>
+          </div>
+        </Form>
+      </div>
+
+      <div className="relative mt-8 rounded-lg overflow-hidden">
+        <div className="h-40 md:h-48 relative">
+          <div
+            className="absolute inset-0 bg-no-repeat"
+            style={{
+              backgroundImage: `url(${group.src})`,
+              backgroundPosition: 'center',
+              backgroundSize: 'cover',
+            }}
+          />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-full max-w-4xl px-6 flex flex-col md:flex-row items-center gap-4 justify-between md:gap-10">
+              <div className="text-blue-600 font-bold text-2xl md:text-2xl text-center md:text-left">
+                现在注册，免费领取5000IP
+              </div>
+              <FreeTrial className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/composites/purchase/index.tsx

@@ -4,6 +4,7 @@ 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'
+import Custom from '@/components/composites/purchase/custom/page'
 import {usePathname, useRouter, useSearchParams} from 'next/navigation'
 import SelfDesc from '@/components/features/self-desc'
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'

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

@@ -26,8 +26,6 @@ export default function Right() {
   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, setPrice] = useState<string>('0.00')
 
   useEffect(() => {
@@ -58,7 +56,7 @@ export default function Right() {
       }
     }
     price()
-  }, [dailyLimit, expire, live, quota, mode])
+  }, [expire, live, quota, mode])
   return (
     <Card className={merge(
       `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
@@ -99,7 +97,7 @@ export default function Right() {
             <li className="flex justify-between items-center">
               <span className="text-sm text-gray-500">每日限额</span>
               <span className="text-sm">
-                {dailyLimit}
+                {quota}
                 个
               </span>
             </li>
@@ -115,7 +113,7 @@ export default function Right() {
         </span>
       </p>
       <Suspense>
-        <BalanceOrLogin {...{method, price, mode, live, quota, expire, dailyLimit}}/>
+        <BalanceOrLogin {...{method, price, mode, live, quota, expire}}/>
       </Suspense>
     </Card>
   )
@@ -128,7 +126,6 @@ function BalanceOrLogin(props: {
   live: string
   quota: number
   expire: string
-  dailyLimit: number
 }) {
   const profile = use(useProfileStore(store => store.profile))
   return profile ? (
@@ -189,7 +186,7 @@ function BalanceOrLogin(props: {
             mode: Number(props.mode),
             live: Number(props.live),
             expire: Number(props.expire),
-            quota: props.mode === '1' ? props.dailyLimit : props.quota,
+            quota: props.quota,
           },
         }}/>
     </>

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

@@ -22,10 +22,8 @@ export default function Right() {
   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, setPrice] = useState<string>('0.00')
   useEffect(() => {
     const price = async () => {
@@ -55,7 +53,7 @@ export default function Right() {
       }
     }
     price()
-  }, [dailyLimit, expire, live, quota, mode])
+  }, [expire, live, quota, mode])
 
   return (
     <Card className={merge(
@@ -97,7 +95,7 @@ export default function Right() {
             <li className="flex justify-between items-center">
               <span className="text-sm text-gray-500">每日限额</span>
               <span className="text-sm">
-                {dailyLimit}
+                {quota}
                 个
               </span>
             </li>
@@ -113,7 +111,7 @@ export default function Right() {
         </span>
       </p>
       <Suspense>
-        <BalanceOrLogin {...{method, price, mode, live, quota, expire, dailyLimit}}/>
+        <BalanceOrLogin {...{method, price, mode, live, quota, expire}}/>
       </Suspense>
     </Card>
   )
@@ -126,7 +124,6 @@ function BalanceOrLogin(props: {
   live: string
   quota: number
   expire: string
-  dailyLimit: number
 }) {
   const profile = use(useProfileStore(store => store.profile))
   return profile ? (
@@ -187,7 +184,7 @@ function BalanceOrLogin(props: {
             mode: Number(props.mode),
             live: Number(props.live),
             expire: Number(props.expire),
-            quota: props.mode === '1' ? props.dailyLimit : props.quota,
+            quota: props.quota,
           },
         }}/>
     </>

src/components/wrap.tsx

@@ -7,7 +7,7 @@ export type WrapProps = {
 
 export default function Wrap(props: WrapProps) {
   return (
-    <div className={`max-w-[1232px] w-full px-4 mx-auto ${props.className}`}>
+    <div className={`max-w-[1632px] w-full px-4 mx-auto ${props.className}`}>
       {props.children}
     </div>
   )