完善登录与状态回显处理

src/app/(root)/@header/page.tsx

@@ -1,161 +1,14 @@
-'use client'
-import {createContext, useCallback, useEffect, useMemo, useState} from 'react'
-import Link from 'next/link'
-import Image from 'next/image'
-import {LinkItem, MenuItem} from './_server/navs'
-import SolutionMenu from './_client/solution'
-import ProductMenu from './_client/product'
-import HelpMenu from './_client/help'
-import Wrap from '@/components/wrap'
-import logo from '@/assets/logo.webp'
-
-export const HeaderContext = createContext<{
-  setMenu: (value: boolean) => void
-} | null>(null)
+import Provider from '@/app/(root)/@header/_client/provider'
+import UserCenter from '@/app/(root)/@header/_server/user-center'
 
 export type HeaderProps = {}
 
-export default function Header(props: HeaderProps) {
-
-  // ======================
-  // 滚动条状态
-  // ======================
-
-  const [scroll, setScroll] = useState(false) // Changed to false for client-side rendering
-
-  const handleScroll = useCallback(() => {
-    setScroll(window.scrollY > 48)
-  }, [])
-
-  useEffect(() => {
-    // Initialize scroll state on client
-    setScroll(window.scrollY > 48)
-    window.addEventListener('scroll', handleScroll)
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [handleScroll])
-
-  // ======================
-  // 菜单状态
-  // ======================
-
-  const [menu, setMenu] = useState(false)
-  const [page, setPage] = useState(0)
-  const pages = useMemo(() => [
-    <ProductMenu key={`product`}/>,
-    <SolutionMenu key={`solution`}/>,
-    <HelpMenu key={`help`}/>,
-  ], [])
-
-  // ======================
-  // 渲染组件
-  // ======================
-
+export default async function Header(props: HeaderProps) {
   return (
-    <HeaderContext.Provider value={{setMenu}}>
-      <header className={`fixed top-0 w-full z-10`}>
-        <div className={[
-          `transition-[background, shadow] duration-200 ease-in-out`,
-          menu
-            ? `bg-[#fffe] backdrop-blur-sm`
-            : scroll
-              ? `bg-[#fffe] backdrop-blur-sm shadow-lg`
-              : `bg-transparent shadow-none`,
-        ].join(' ')}>
-          <Wrap className="h-20 max-md:h-16 flex justify-between">
-            <div className="flex justify-between gap-8">
-              {/* logo */}
-              <Link href="/" className={`flex items-center`}>
-                <Image src={logo} alt={`logo`} height={48}/>
-              </Link>
-
-              {/* 菜单 */}
-              <nav>
-                <ul className="h-full flex items-stretch max-lg:hidden">
-                  <LinkItem text={`首页`} href={`/`}/>
-                  <MenuItem
-                    text={`产品订购`}
-                    active={menu && page === 0}
-                    onEnter={() => {
-                      setMenu(true)
-                      setPage(0)
-                    }}
-                    onLeave={() => {
-                      return setMenu(false)
-                    }}
-                  />
-                  <MenuItem
-                    text={`业务场景`}
-                    active={menu && page === 1}
-                    onEnter={() => {
-                      setMenu(true)
-                      setPage(1)
-                    }}
-                    onLeave={() => {
-                      return setMenu(false)
-                    }}
-                  />
-                  <MenuItem
-                    text={`帮助中心`}
-                    active={menu && page === 2}
-                    onEnter={() => {
-                      setMenu(true)
-                      setPage(2)
-                    }}
-                    onLeave={() => {
-                      return setMenu(false)
-                    }}
-                  />
-                  <LinkItem
-                    text={`企业服务`} href={`#`}/>
-                  <LinkItem
-                    text={`推广返利`} href={`#`}/>
-                </ul>
-              </nav>
-            </div>
-            {/* 登录 */}
-            <div className={`flex items-center`}>
-              <Link
-                href="/login"
-                className={`w-24 h-12 flex items-center justify-center lg:text-lg`}
-              >
-                <span>登录</span>
-              </Link>
-              <Link
-                href="/login"
-                className={[
-                  `w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r  rounded-sm flex items-center justify-center lg:text-lg text-white`,
-                  `transition-colors duration-200 ease-in-out`,
-                  `from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
-                ].join(' ')}
-              >
-                <span>注册</span>
-              </Link>
-            </div>
-          </Wrap>
-        </div>
-
-        {/* 下拉菜单 */}
-        <div
-          className={[
-            `shadow-lg`,
-            `overflow-hidden bg-[#fffe] backdrop-blur-sm`,
-            `transition-[opacity,padding,height] transition-discrete duration-200 ease-in-out`,
-            menu
-              ? `delay-[0s,0s,0s] opacity-100 py-8 h-auto`
-              : `delay-[0s,0s,0.2s] opacity-0 py-0 h-0`,
-          ].join(' ')}
-          onPointerEnter={() => setMenu(true)}
-          onPointerLeave={() => setMenu(false)}
-        >
-          {pages[page]}
-        </div>
-      </header>
-    </HeaderContext.Provider>
+    <header className={`fixed top-0 w-full z-10`}>
+      <Provider
+        userCenter={<UserCenter/>}
+      />
+    </header>
   )
 }
-
-
-
-