产品页面跳转与性能优化

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

@@ -1,11 +1,13 @@
 'use client'
 
-import { useState, ReactNode } from "react"
-import Wrap from "@/components/wrap"
-import Image from "next/image"
-import prod from '@/assets/header/product/prod.svg'
-import custom from '@/assets/header/product/custom.svg'
+import {useContext, useState} from 'react'
+import Wrap from '@/components/wrap'
+import Image from 'next/image'
 import anno from '@/assets/header/product/anno.svg'
+import {Domestic, Oversea, Tab} from '@/app/(root)/@header/_server/product'
+import Link from 'next/link'
+import {merge} from '@/lib/utils'
+import {HeaderContext} from '@/app/(root)/@header/page'
 
 type TabType = 'domestic' | 'oversea'
 
@@ -22,68 +24,15 @@ export default function ProductMenu() {
       <div className="flex-1">
         {type === 'domestic'
           ? (
-            <section role="tabpanel" className="flex gap-16 mr-16">
-              <div className="w-64 flex flex-col gap-6">
-                <h3 className="font-bold mb-2 flex items-center gap-3">
-                  <Image src={prod} alt={`产品`} className={`w-10 h-=10`} />
-                  <span>代理产品</span>
-                </h3>
-                <div className="flex flex-col gap-2">
-                  <p className="flex gap-2">
-                    <span>短效动态IP</span>
-                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
-                      折扣45%
-                    </span>
-                  </p>
-                  <p className="text-gray-400 text-sm">
-                    全国300+城市级定位节点
-                  </p>
-                </div>
-                <div className="flex flex-col gap-2">
-                  <p className="flex gap-2">
-                    <span>长效静态IP</span>
-                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
-                      折扣45%
-                    </span>
-                  </p>
-                  <p className="text-gray-400 text-sm">
-                    IPI资源覆盖全国
-                  </p>
-                </div>
-                <div>
-                  <p className="flex gap-2">
-                    <span>固定IP</span>
-                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
-                      折扣45%
-                    </span>
-                  </p>
-                </div>
-              </div>
-              <div className="w-64 flex flex-col gap-4">
-                <h3 className="font-bold mb-2 flex items-center gap-3">
-                  <Image src={custom} alt="定制" className="w-10 h-10" />
-                  <span>业务定制</span>
-                </h3>
-                <div className="flex flex-col gap-2">
-                  <p>优质/企业/精选IP</p>
-                  <p className="text-gray-400 text-sm">
-                    超 1000 家企业共同信赖之选！大客户经理全
-                    程 1 对 1 沟通，随时为您排忧解难，提供 24
-                    小时不间断支持
-                  </p>
-                </div>
-              </div>
-            </section>
+            <Domestic/>
           ) : (
-            <section role="tabpanel">
-
-            </section>
+            <Oversea/>
           )
         }
       </div>
       <aside className="w-64">
         <h3 className="flex gap-3 items-center mb-4">
-          <Image src={anno} alt={`公告`} className={`w-10 h-10`} />
+          <Image src={anno} alt={`公告`} className={`w-10 h-10`}/>
           <span>网站公告</span>
         </h3>
         <div className="flex flex-col gap-2">
@@ -102,26 +51,35 @@ export default function ProductMenu() {
   )
 }
 
-
-
-
-function Tab(props: {
-  selected: boolean
-  onSelect: () => void
-  children: ReactNode
+export function DomesticLink(props: {
+  label: string
+  desc: string
+  href: string
+  discount: number
 }) {
+  const ctx = useContext(HeaderContext)
+  if (!ctx) {
+    throw new Error(`HeaderContext not found`)
+  }
+
+  const onClick = () => {
+    ctx.setMenu(false)
+  }
 
   return (
-    <li role="tab">
-      <button
-        className={[
-          `p-8 text-lg cursor-pointer border-r`,
-          props.selected ? `bg-gradient-to-r from-transparent to-blue-200 border-blue-400` : `border-gray-200`,
-        ].join(' ')}
-        onClick={props.onSelect}
-      >
-        {props.children}
-      </button>
-    </li>
+    <Link href={props.href} className={merge(
+      `transition-colors duration-150 ease-in-out`,
+      `p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
+    )} onClick={onClick}>
+      <p className="flex gap-2">
+        <span>{props.label}</span>
+        <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
+          折扣{props.discount}%
+        </span>
+      </p>
+      <p className="text-gray-400 text-sm">
+        {props.desc}
+      </p>
+    </Link>
   )
-}
+}

src/app/(root)/@header/_client/solution.tsx

@@ -8,6 +8,7 @@ import s05 from "@/assets/header/solution/05.svg"
 import s06 from "@/assets/header/solution/06.svg"
 import s07 from "@/assets/header/solution/07.svg"
 import s08 from "@/assets/header/solution/08.svg"
+import {StaticImageData} from 'next/image'
 
 export default function SolutionMenu() {
 
@@ -58,7 +59,7 @@ export default function SolutionMenu() {
 }
 
 function SolutionItem(props: {
-  icon: any
+  icon: StaticImageData
   title: string
   desc: string
 }) {
@@ -66,7 +67,7 @@ function SolutionItem(props: {
     <div
       className={[
         `h-full p-4 flex gap-4 items-start rounded-md cursor-pointer`,
-        `transition-colors duration-200 hover:bg-blue-100`,
+        `transition-colors duration-200 hover:bg-blue-50`,
       ].join(' ')}
     >
       <Image src={props.icon} alt={props.title} className="w-10 h-10" />
@@ -76,4 +77,4 @@ function SolutionItem(props: {
       </div>
     </div>
   )
-}
+}