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

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">