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

src/app/(home)/@header/_client/product.tsx

@@ -1,4 +1,5 @@
-import {ReactNode, useContext, useState} from 'react'
+'use client'
+import {ReactNode, useContext, useState, useEffect} from 'react'
 import Wrap from '@/components/wrap'
 import Image from 'next/image'
 import anno from '@/assets/header/product/anno.svg'
@@ -7,6 +8,7 @@ import {merge} from '@/lib/utils'
 import prod from '@/assets/header/product/prod.svg'
 import custom from '@/assets/header/product/custom.svg'
 import {HeaderContext} from '@/app/(home)/@header/_client/provider'
+import {useSearchParams} from 'next/navigation'
 
 type TabType = 'domestic' | 'oversea'
 
@@ -15,6 +17,8 @@ export function Tab(props: {
   onSelect: () => void
   children: ReactNode
 }) {
+  const searchParams = useSearchParams()
+  const currentType = searchParams?.get('type') || 'short'
   return (
     <li role="tab">
       <button
@@ -31,6 +35,8 @@ export function Tab(props: {
 }
 
 export function Domestic(props: {}) {
+  const searchParams = useSearchParams()
+  const currentType = searchParams?.get('type') || 'short'
   return (
     <section role="tabpanel" className="flex gap-16 mr-16">
       <div className="w-64 flex flex-col">
@@ -42,20 +48,23 @@ export function Domestic(props: {}) {
         <DomesticLink
           label="动态IP"
           desc="全国300+城市级定位节点"
-          href="/product?type=dynamic"
+          href="/product?type=short"
           discount={45}
+          active={currentType === 'short'}
         />
         <DomesticLink
           label="长效静态IP"
           desc="IP 资源覆盖全国"
-          href="/product?type=dynamic"
+          href="/product?type=long"
           discount={45}
+          active={currentType === 'long'}
         />
         <DomesticLink
           label="固定IP"
           desc="全国300+城市级定位节点"
-          href="/product?type=static"
+          href="/product?type=fixed"
           discount={45}
+          active={currentType === 'fixed'}
         />
       </div>
       <div className="w-64 flex flex-col gap-4">
@@ -86,6 +95,11 @@ export function Oversea(props: {}) {
 
 export default function ProductMenu() {
   const [type, setType] = useState<TabType>('domestic')
+  const searchParams = useSearchParams()
+  useEffect(() => {
+    const urlType = searchParams?.get('type')
+    console.log('URL参数:', urlType)
+  }, [searchParams])
 
   return (
     <Wrap className="flex">
@@ -128,6 +142,7 @@ export function DomesticLink(props: {
   desc: string
   href: string
   discount: number
+  active?: boolean
 }) {
   const ctx = useContext(HeaderContext)
   if (!ctx) {
@@ -144,6 +159,7 @@ export function DomesticLink(props: {
       className={merge(
         `transition-colors duration-150 ease-in-out`,
         `p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
+        props.active ? 'bg-blue-100' : '',
       )}
       onClick={onClick}>
       <p className="flex gap-2">

src/app/(home)/page.tsx

@@ -1,8 +1,12 @@
+'use client'
 import {ReactNode} from 'react'
 import Wrap from '@/components/wrap'
 import Image from 'next/image'
+import React, {useState} from 'react'
+import {useRouter} from 'next/navigation'
 
 export default function Home() {
+  const router = useRouter()
   return (
     <main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
 
@@ -31,7 +35,9 @@ export default function Home() {
             className={[
               `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
               `bg-gradient-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
-            ].join(' ')}>
+            ].join(' ')}
+            onClick={() => router.push('/login')}
+          >
             免费试用
           </button>
         </Wrap>

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