完善登录与状态回显处理

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

@@ -1,16 +1,89 @@
-'use client'
-
-import {useContext, useState} from 'react'
+import {ReactNode, 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'
+import prod from '@/assets/header/product/prod.svg'
+import custom from '@/assets/header/product/custom.svg'
+import {HeaderContext} from '@/app/(root)/@header/_client/provider'
 
 type TabType = 'domestic' | 'oversea'
 
+export function Tab(props: {
+  selected: boolean
+  onSelect: () => void
+  children: ReactNode
+}) {
+  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>
+  )
+}
+
+export function Domestic(props: {}) {
+  return (
+    <section role="tabpanel" className="flex gap-16 mr-16">
+      <div className="w-64 flex flex-col">
+        <h3 className="mb-6 font-bold flex items-center gap-3">
+          <Image src={prod} alt={`产品`} className={`w-10 h-=10`}/>
+          <span>代理产品</span>
+        </h3>
+
+        <DomesticLink
+          label={`动态IP`}
+          desc={`全国300+城市级定位节点`}
+          href={`/product?type=dynamic`}
+          discount={45}
+        />
+        <DomesticLink
+          label={`长效静态IP`}
+          desc={`IP 资源覆盖全国`}
+          href={`/product?type=dynamic`}
+          discount={45}
+        />
+        <DomesticLink
+          label={`固定IP`}
+          desc={`全国300+城市级定位节点`}
+          href={`/product?type=static`}
+          discount={45}
+        />
+      </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>
+  )
+}
+
+export function Oversea(props: {}) {
+  return (
+    <section role="tabpanel">
+
+    </section>
+  )
+}
+
 export default function ProductMenu() {
 
   const [type, setType] = useState<TabType>('domestic')