实现响应式导航栏组件

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

@@ -1,5 +1,5 @@
 'use client'
-import {ReactNode, useContext, useState, useEffect} from 'react'
+import {ReactNode, useState, useEffect, MouseEvent} from 'react'
 import Wrap from '@/components/wrap'
 import Image from 'next/image'
 import anno from '@/assets/header/product/anno.svg'
@@ -7,7 +7,6 @@ import Link from 'next/link'
 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'
 import {useRouter} from 'next/navigation'
 
@@ -18,8 +17,6 @@ export function Tab(props: {
   onSelect: () => void
   children: ReactNode
 }) {
-  const searchParams = useSearchParams()
-  const currentType = searchParams?.get('type') || 'short'
   return (
     <li role="tab">
       <button
@@ -35,6 +32,53 @@ export function Tab(props: {
   )
 }
 
+export default function ProductMenu() {
+  const [type, setType] = useState<TabType>('domestic')
+
+  useEffect(() => {
+    const checkMobile = () => {
+    }
+
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+  return (
+    <Wrap className="flex">
+      <ul role="tablist" className="w-48">
+        <Tab selected={type === 'domestic'} onSelect={() => setType('domestic')}>国内代理</Tab>
+        <Tab selected={type === 'oversea'} onSelect={() => setType('oversea')}>海外代理</Tab>
+      </ul>
+      <div className="flex-1">
+        {type === 'domestic'
+          ? (
+            <Domestic/>
+          ) : (
+            <Oversea/>
+          )
+        }
+      </div>
+      <aside className="hidden w-64 lg:block">
+        <h3 className="flex gap-3 items-center mb-4">
+          <Image src={anno} alt="公告" className="w-10 h-10"/>
+          <span>网站公告</span>
+        </h3>
+        <div className="flex flex-col gap-2">
+          <p>官网最新上线，体验再升级！</p>
+          <p className="text-gray-400 text-sm">
+            1.新增多样使用功能，新增多样使用
+            新增多样使用功能
+          </p>
+          <p className="text-gray-400 text-sm">
+            2.新增多样使用功能，新增多样使用
+            新增多样使用功能
+          </p>
+        </div>
+      </aside>
+    </Wrap>
+  )
+}
+
 export function Domestic(props: {}) {
   const searchParams = useSearchParams()
   const currentType = searchParams?.get('type') || 'short'
@@ -86,69 +130,6 @@ export function Domestic(props: {}) {
   )
 }
 
-export function Oversea(props: {}) {
-  return (
-    <section role="tabpanel">
-
-    </section>
-  )
-}
-
-export default function ProductMenu() {
-  const [type, setType] = useState<TabType>('domestic')
-  const searchParams = useSearchParams()
-  useEffect(() => {
-    const urlType = searchParams?.get('type')
-    console.log('URL参数:', urlType)
-  }, [searchParams])
-  // 响应式布局
-  const [isMobile, setIsMobile] = useState(false)
-
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 1024)
-    }
-
-    checkMobile()
-    window.addEventListener('resize', checkMobile)
-    return () => window.removeEventListener('resize', checkMobile)
-  }, [])
-  return (
-    <Wrap className="flex h-75">
-      <ul role="tablist" className="w-48">
-        <Tab selected={type === 'domestic'} onSelect={() => setType('domestic')}>国内代理</Tab>
-        <Tab selected={type === 'oversea'} onSelect={() => setType('oversea')}>海外代理</Tab>
-      </ul>
-      <div className="flex-1">
-        {type === 'domestic'
-          ? (
-            <Domestic/>
-          ) : (
-            <Oversea/>
-          )
-        }
-      </div>
-      <aside className="w-64">
-        <h3 className="flex gap-3 items-center mb-4">
-          <Image src={anno} alt="公告" className="w-10 h-10"/>
-          <span>网站公告</span>
-        </h3>
-        <div className="flex flex-col gap-2">
-          <p>官网最新上线，体验再升级！</p>
-          <p className="text-gray-400 text-sm">
-            1.新增多样使用功能，新增多样使用
-            新增多样使用功能
-          </p>
-          <p className="text-gray-400 text-sm">
-            2.新增多样使用功能，新增多样使用
-            新增多样使用功能
-          </p>
-        </div>
-      </aside>
-    </Wrap>
-  )
-}
-
 export function DomesticLink(props: {
   label: string
   desc: string
@@ -156,22 +137,17 @@ export function DomesticLink(props: {
   discount: number
   active?: boolean
 }) {
-  const ctx = useContext(HeaderContext)
   const router = useRouter()
-  if (!ctx) {
-    throw new Error(`HeaderContext not found`)
-  }
-
-  // const onClick = () => {
-  //   ctx.setMenu(false)
+  // const ctx = useContext(HeaderContext)
+  // if (!ctx) {
+  //   throw new Error(`HeaderContext not found`)
   // }
-  const onClick = (e: React.MouseEvent) => {
+
+  const onClick = (e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    ctx.setMenu(false)
-    setTimeout(() => {
-      router.push(props.href)
-    }, ctx.isMobile ? 100 : 0)
+    // ctx.setMenu(false)
+    router.push(props.href)
   }
 
   return (
@@ -197,3 +173,11 @@ export function DomesticLink(props: {
     </Link>
   )
 }
+
+export function Oversea(props: {}) {
+  return (
+    <section role="tabpanel">
+
+    </section>
+  )
+}