完善首页页面跳转产品订购导航页面

src/components/composites/purchase/index.tsx

@@ -1,29 +1,36 @@
+'use client'
 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'
+import Link from 'next/link'
+import {useSearchParams} from 'next/navigation'
 
-export type PurchaseProps = {}
+export type TabType = 'short' | 'long' | 'fixed' | 'custom'
 
-export default async function Purchase(props: PurchaseProps) {
+export default function Purchase() {
+  const searchParams = useSearchParams()
+  const defaultTab = searchParams?.get('type') as TabType || 'short'
   return (
-    <div className="flex flex-col gap-4">
-      <Tabs defaultValue="short" className="gap-4">
-        <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
-          <Tab value="short">短效动态</Tab>
-          <Tab value="long">长效静态</Tab>
-          <Tab value="fixed">固定套餐</Tab>
-          <Tab value="custom">定制套餐</Tab>
-        </TabsList>
-        <TabsContent value="short">
-          <ShortForm/>
-        </TabsContent>
-        <TabsContent value="long">
-          <LongForm/>
-        </TabsContent>
-      </Tabs>
-    </div>
+    <>
+      <div className="flex flex-col gap-4">
+        <Tabs value={defaultTab} className="gap-4">
+          <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
+            <Tab value="short">短效动态</Tab>
+            <Tab value="long">长效静态</Tab>
+            <Tab value="fixed">固定套餐</Tab>
+            <Tab value="custom">定制套餐</Tab>
+          </TabsList>
+          <TabsContent value="short">
+            <ShortForm/>
+          </TabsContent>
+          <TabsContent value="long">
+            <LongForm/>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </>
   )
 }
 
@@ -32,13 +39,22 @@ function Tab(props: {
   children: ReactNode
 }) {
   return (
-    <TabsTrigger
-      className={merge(
-        `w-36 h-12 text-base font-normal flex-none`,
-        `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
-      )}
-      value={props.value}>
-      {props.children}
-    </TabsTrigger>
+    <Link
+      href={{
+        pathname: '/product',
+        query: {type: props.value},
+      }}
+      passHref
+      legacyBehavior // 如果需要兼容旧版行为
+    >
+      <TabsTrigger
+        className={merge(
+          `w-36 h-12 text-base font-normal flex-none`,
+          `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
+        )}
+        value={props.value}>
+        {props.children}
+      </TabsTrigger>
+    </Link>
   )
 }