diff --git a/README.md b/README.md index 20ee98f..c399b21 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,28 @@ ## TODO -业务场景页面优化实现 +表单提交失效？ -业务定制页面优化实现 +长效动态统计 页头 - 产品订购 - 网站公告 页尾 - 服务保障跳转企业微信 -- 站点导航 - 企业服务，推广返利 +- 站点导航 - 企业服务（删除推广返利） +- 可以缩短页尾，正好一列四个链接 +- 底边距太大，需要适当缩窄 首页 - 推荐文章 购买页 -- 固定套餐与定制套餐 +- 固定套餐 后台导航改进 +价格：原价和折扣价 + ### 禁止直接依赖 form `\[(.*,)?form(,.*)?\]` diff --git a/src/actions/inquiry.ts b/src/actions/inquiry.ts new file mode 100644 index 0000000..5aff122 --- /dev/null +++ b/src/actions/inquiry.ts @@ -0,0 +1,16 @@ +'use server' +import {callByDevice} from '@/actions/base' + +/** + * 提交业务定制申请 + * TODO: 后端接口待实现，当前为占位函数 + */ +export async function submitInquiry(data: { + company: string + name: string + phone: string + usage: string + purpose: string +}) { + return await callByDevice('/api/customization/submit', data) +} diff --git a/src/app/(home)/_components/header/menu-product.tsx b/src/app/(home)/_components/header/menu-product.tsx index 361bb2c..b41d11b 100644 --- a/src/app/(home)/_components/header/menu-product.tsx +++ b/src/app/(home)/_components/header/menu-product.tsx @@ -94,7 +94,7 @@ export function Domestic(props: {}) { diff --git a/src/app/(home)/customized/_assets/Group.webp b/src/app/(home)/custom/_assets/Group.webp similarity index 100% rename from src/app/(home)/customized/_assets/Group.webp rename to src/app/(home)/custom/_assets/Group.webp diff --git a/src/app/(home)/custom/page.tsx b/src/app/(home)/custom/page.tsx new file mode 100644 index 0000000..9107b68 --- /dev/null +++ b/src/app/(home)/custom/page.tsx @@ -0,0 +1,264 @@ +'use client' +import {useState} from 'react' +import Image from 'next/image' +import {useRouter} from 'next/navigation' +import {useForm} from 'react-hook-form' +import {zodResolver} from '@hookform/resolvers/zod' +import {z} from 'zod' +import {toast} from 'sonner' +import HomePage from '@/components/home/page' +import Wrap from '@/components/wrap' +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 {merge} from '@/lib/utils' +import {submitInquiry} from '@/actions/inquiry' +import group from './_assets/Group.webp' +import SelfDesc from '@/components/features/self-desc' + +const formSchema = z.object({ + company: z.string().min(2, '企业名称至少2个字符'), + name: z.string().min(2, '联系人姓名至少2个字符'), + phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的11位手机号码'), + usage: z.string().min(1, '请选择您需要的用量'), + purpose: z.string().min(2, '请输入用途说明').max(200, '用途说明不超过200字符'), +}) + +type FormValues = z.infer + +export default function CustomPage() { + const router = useRouter() + const [isSubmitting, setIsSubmitting] = useState(false) + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { + company: '', + name: '', + phone: '', + usage: '', + purpose: '', + }, + }) + + const onSubmit = async (data: FormValues) => { + setIsSubmitting(true) + try { + const result = await submitInquiry(data) + if (result.success) { + toast.success('提交成功！我们的专属顾问会在24小时内联系您') + form.reset() + } + else { + toast.error(result.message || '提交失败，请稍后重试') + } + } + catch (error) { + toast.error('网络错误，请稍后重试') + } + finally { + setIsSubmitting(false) + } + } + + const scrollToForm = () => { + const formElement = document.getElementById('inquery-form') + if (formElement) { + formElement.scrollIntoView({behavior: 'smooth', block: 'start'}) + } + } + + return ( + + + {/* 1. 顶部介绍区 */} + { + document.getElementById('inquery-form')?.scrollIntoView({behavior: 'smooth', block: 'start'}) + }}/> + + {/* 2. 表单区 */} +
+
+

业务定制

+

+ 请填写您的企业信息，我们的专属顾问将在24小时内与您联系 +

+
+
+
+ {/* 企业名称 */} + + {({id, field}) => ( +
+ +
+ +
+
+ )} + + + {/* 联系人姓名 */} + + {({id, field}) => ( +
+ +
+ +
+
+ )} + + + {/* 联系人手机号码 */} + + {({id, field}) => ( +
+ +
+ +
+
+ )} + + + {/* 每月需求用量 */} + + {({id, field}) => ( +
+ +
+ +
+
+ )} + + + {/* 用途 */} + + {({id, field}) => ( +
+ +
+ +
+
+ )} + + +
+ +
+
+
+
+ + {/* 3. 底部引导区 */} +
+ 免费试用背景 +
+
+
+ 现在注册，免费领取5000IP +
+ +
+
+
+ + + ) +} diff --git a/src/app/(home)/customized/page.tsx b/src/app/(home)/customized/page.tsx deleted file mode 100644 index 9caf1ee..0000000 --- a/src/app/(home)/customized/page.tsx +++ /dev/null @@ -1,259 +0,0 @@ -'use client' -import BreadCrumb from '@/components/bread-crumb' -import Wrap from '@/components/wrap' -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' -import HomePage from '@/components/home/page' - -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 - -export default function CollectPage() { - const form = useForm({ - resolver: zodResolver(formSchema), - defaultValues: { - companyName: '', - contactName: '', - phone: '', - monthlyUsage: '', - purpose: '', - }, - }) - - return ( - //
- // - // - - // - //
- - -
-
-

优质代理IP服务商

-

- 以技术升级为核心，提供优质的IP代理使用体验 -

-
- -
-
-
- 宣传图 -
-
- -
-

- 华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。公司拥有海量优质IP资源，涵盖全球多地，能精准匹配不同客户需求，无论是数据采集、网络营销还是突破地域限制，都能提供合适方案。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行，让用户使用过程顺畅无忧，数据安全有保障。秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。 -

- -
- -
- -
-
- 特性 - IP时效3-30分钟(可定制) -
-
- 特性 - IP时效3-30分钟(可定制) -
-
- 特性 - IP时效3-30分钟(可定制) -
-
- 特性 - 支持高并发提取 -
-
- 特性 - 支持高并发提取 -
-
- 特性 - 支持高并发提取 -
-
-
-
-
- -
-

企业基本信息

-
- -
-
-
- {/* 企业名称 */} - - {({id, field}) => ( -
- - -
- )} - - - {/* 联系人姓名 */} - - {({id, field}) => ( -
- - -
- )} - - - {/* 联系人手机号码 */} - - {({id, field}) => ( -
- - -
- )} - - - {/* 每月需求用量 */} - - {({id, field}) => ( -
- - -
- )} - - - {/* 用途 */} - - {({id, field}) => ( -
- - -
- )} - - -
- -
-
-
-
- -
-
-
-
-
-
- 现在注册，免费领取5000IP -
- -
-
-
-
- - - ) -} diff --git a/src/app/(home)/header.tsx b/src/app/(home)/header.tsx index f46250d..ae7fd6a 100644 --- a/src/app/(home)/header.tsx +++ b/src/app/(home)/header.tsx @@ -131,7 +131,7 @@ export default function Header(props: HeaderProps) { /> + href="/custom"/> {/* 移动端菜单 */} diff --git a/src/components/composites/purchase/index.tsx b/src/components/composites/purchase/index.tsx index 4be17f6..9508b95 100644 --- a/src/components/composites/purchase/index.tsx +++ b/src/components/composites/purchase/index.tsx @@ -5,6 +5,7 @@ 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 {usePathname, useRouter, useSearchParams} from 'next/navigation' +import SelfDesc from '@/components/features/self-desc' export type TabType = 'short' | 'long' | 'fixed' | 'custom' export default function Purchase() { @@ -35,6 +36,13 @@ export default function Purchase() { + + + + { + router.push('/custom') + }}/> +
) diff --git a/src/app/(home)/customized/_assets/Mask-group.webp b/src/components/features/self-desc/Mask-group.webp similarity index 100% rename from src/app/(home)/customized/_assets/Mask-group.webp rename to src/components/features/self-desc/Mask-group.webp diff --git a/src/components/features/self-desc/index.tsx b/src/components/features/self-desc/index.tsx new file mode 100644 index 0000000..5f43b28 --- /dev/null +++ b/src/components/features/self-desc/index.tsx @@ -0,0 +1,81 @@ +import Image from 'next/image' +import {Button} from '@/components/ui/button' +import banner from './Mask-group.webp' +import check from '@/assets/check-accent.svg' + +const FEATURES = [ + 'IP时效3-30分钟(可定制)', + 'IP覆盖全国各地', + '稳定长输不掉线', + '支持高并发提取', + '平均响应时长：0.03s', + '专属技术支持', +] + +export default function SelfDesc(props: { + onInquiry: () => void +}) { + return ( +
+
+

优质代理IP服务商

+

+ 以技术升级为核心，提供优质的IP代理使用体验 +

+
+ +
+
+
+ 蓝狐代理业务定制服务展示 +
+
+ +
+
+

+ 华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。 +

+

+ 公司拥有海量优质IP资源，覆盖全球多地，能精准匹配不同客户需求。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行。 +

+

+ 秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻。 +

+
+ +
+ +
+ +
+ {FEATURES.map((feature, index) => ( +
+ 特性 + {feature} +
+ ))} +
+
+
+
+ ) +} diff --git a/src/components/scene-page.tsx b/src/components/scene-page.tsx index f746533..49bd810 100644 --- a/src/components/scene-page.tsx +++ b/src/components/scene-page.tsx @@ -273,7 +273,7 @@ export default function ScenePage(props: ScenePageConfig) { diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx index 8f562bf..3dcf4b5 100644 --- a/src/mdx-components.tsx +++ b/src/mdx-components.tsx @@ -5,7 +5,6 @@ export function useMDXComponents(): MDXComponents { return { wrapper: props => (