web/src/app/(home)/header.tsx

'use client'
import {ReactNode, useCallback, useEffect, useMemo, useState} from 'react'
import Link from 'next/link'
import Wrap from '@/components/wrap'

export type HeaderProps = {}

export default function Header(props: HeaderProps) {

  // ======================
  // 滚动条状态
  // ======================

  const [scroll, setScroll] = useState(window.scrollY > 48)

  const handleScroll = useCallback(() => {
    setScroll(window.scrollY > 48)
  }, [])
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [handleScroll])

  // ======================
  // 菜单状态
  // ======================

  const [menu, setMenu] = useState<string>('')

  // ======================
  // 覆盖状态
  // ======================

  const [overlay, setOverlay] = useState(false)

  useEffect(() => {
    setOverlay(scroll || menu !== '')
  }, [menu, scroll])

  // ======================
  // 渲染组件
  // ======================

  return (
    <header
      className={[
        `fixed top-0 w-full`,
        `transition-all duration-200 ${overlay ? `bg-[#fffe] shadow-lg backdrop-blur-sm` : 'bg-transparent shadow-transparent'}`,
      ].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`}>
            <img src={`/logo.svg`} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full bg-gray-100`}/>
          </Link>

          {/* 菜单 */}
          <nav>
            <ul className="h-full flex items-center text-xl max-lg:hidden">
              <NavItemTop>
                <Link href={`/`}>首页</Link>
              </NavItemTop>

              <NavItemTop
                onEnter={() => setMenu('product')}
                onLeave={() => setMenu('')}
              >
                <button className={`cursor-pointer`}>产品订购</button>
                <SvgDown/>
              </NavItemTop>

              <NavItemTop
                onEnter={() => setMenu('solution')}
                onLeave={() => setMenu('')}
              >
                <button className={`cursor-pointer`}>业务场景</button>
                <SvgDown/>
              </NavItemTop>

              <NavItemTop
                onEnter={() => setMenu('help')}
                onLeave={() => setMenu('')}
              >
                <button className={`cursor-pointer`}>帮助中心</button>
                <SvgDown/>
              </NavItemTop>

              <NavItemTop>
                <Link href={`#`}>企业服务</Link>
              </NavItemTop>

              <NavItemTop>
                <Link href={`#`}>推广返利</Link>
              </NavItemTop>
            </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
        className={[
          `transition-[visibility,opacity,height] duration-200 ease-in-out`,
          `${menu === ''
            ? 'delay-[200ms,0s,0s] invisible opacity-0 h-0 pointer-events-none'
            : 'delay-[0s,0s,0s] visible opacity-100 h-80'
          }`,
        ].join(' ')}>
      </div>
      {{
        'product': <ProductMenu/>,
        'solution': <SolutionMenu/>,
        'help': <HelpMenu/>,
      }[menu]}
       Using a wrapper div to handle transitions
    </header>
  )
}

function NavItemTop(props: {
  children: ReactNode
  onEnter?: () => void
  onLeave?: () => void
}) {
  return (
    <li className={`h-10 px-4 flex items-center text-xl cursor-pointer`} onPointerEnter={props.onEnter} onPointerLeave={props.onLeave}>
      {props.children}
    </li>
  )
}

function SvgDown() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
        strokeLinejoin="round"/>
    </svg>
  )
}

function ProductMenu() {
  const [type, setType] = useState<'domestic' | 'oversea'>('domestic')
  return (
    <div className={`flex`}>
      <ul role={`tablist`}>
        <li role={`tab`}>
          <button onClick={() => setType('domestic')}>
            国内代理
          </button>
        </li>
        <li role={`tab`}>
          <button onClick={() => setType('oversea')}>
            海外代理
          </button>
        </li>
      </ul>
      <section role={`tabpanel`}>
        {{
          'domestic': <div>国内代理</div>,
          'oversea': <div>海外代理</div>,
        }[type]}
      </section>
    </div>
  )
}

function SolutionMenu() {
  return (
    <div>解决方案</div>
  )
}

function HelpMenu() {
  return (
    <div>帮助中心</div>
  )
}