使用服务端渲染实现购买页面跳转

src/app/(home)/product/page.tsx

@@ -1,8 +1,12 @@
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
-import Purchase from '@/components/composites/purchase'
+import Purchase, {TabType} from '@/components/composites/purchase'
 
-export type ProductPageProps = {}
+export type ProductPageProps = {
+  searchParams?: {
+    type?: TabType
+  }
+}
 
 export default function ProductPage(props: ProductPageProps) {
   return (
@@ -11,7 +15,7 @@ export default function ProductPage(props: ProductPageProps) {
         <BreadCrumb items={[
           {label: '产品中心', href: '/product'},
         ]}/>
-        <Purchase/>
+        <Purchase defaultType={props.searchParams?.type ?? 'short'}/>
       </Wrap>
     </main>
   )

src/app/admin/purchase/page.tsx

@@ -1,12 +1,16 @@
-import Purchase from '@/components/composites/purchase'
+import Purchase, {TabType} from '@/components/composites/purchase'
 import Page from '@/components/page'
 
-export type PurchasePageProps = {}
+export type PurchasePageProps = {
+  searchParams?: {
+    type?: TabType
+  }
+}
 
 export default async function PurchasePage(props: PurchasePageProps) {
   return (
     <Page className="flex-col">
-      <Purchase/>
+      <Purchase defaultType={props.searchParams?.type ?? 'short'}/>
     </Page>
   )
 }

src/components/composites/purchase/index.tsx

@@ -1,38 +1,33 @@
-'use client'
-import {ReactNode, useContext} from 'react'
+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'
-import {HeaderContext} from '@/app/(home)/@header/_client/provider'
-import {useRouter} from 'next/navigation'
 
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'
 
-export default function Purchase() {
-  const searchParams = useSearchParams()
-  const defaultTab = searchParams?.get('type') as TabType || 'short'
+type PurchaseProps = {
+  defaultType: TabType
+}
+
+export default async function Purchase(props: PurchaseProps) {
   return (
-    <>
-      <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>
-    </>
+    <div className="flex flex-col gap-4">
+      <Tabs defaultValue={props.defaultType} 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>
   )
 }
 
@@ -40,33 +35,15 @@ function Tab(props: {
   value: string
   children: ReactNode
 }) {
-  const ctx = useContext(HeaderContext)
-  const router = useRouter()
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    if (ctx) {
-      ctx.setMenu(false)
-    }
-  }
   return (
-    <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}
     >
-      <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}
-        onClick={handleClick}>
-        {props.children}
-      </TabsTrigger>
-    </Link>
+      {props.children}
+    </TabsTrigger>
   )
 }