完善页头页尾

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

@@ -0,0 +1,155 @@
+'use client'
+import { ReactNode, 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.png'
+
+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`} />,
+  ], [])
+
+  // ======================
+  // 渲染组件
+  // ======================
+
+  return (
+    <header className={[
+      `fixed top-0 w-full z-10`,
+    ].join(' ')}>
+      <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="/public" className={`flex items-center`}>
+              <Image src={logo} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full`} />
+            </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`}>
+            <a
+              href="#"
+              className={`w-24 h-12 flex items-center justify-center lg:text-lg font-medium`}
+            >
+              <span>登录</span>
+            </a>
+            <a
+              href="#"
+              className={`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center lg:text-lg font-medium text-white`}
+            >
+              <span>注册</span>
+            </a>
+          </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>
+  )
+}
+
+
+
+
+