303 lines
8.3 KiB
TypeScript
303 lines
8.3 KiB
TypeScript
'use client'
|
|
import {useMemo, useState, PointerEvent, ComponentProps, useSyncExternalStore, use, Suspense, MouseEvent} from 'react'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import {HeaderContext} from './_components/header/common'
|
|
import SolutionMenu from './_components/header/menu-solution'
|
|
import ProductMenu from './_components/header/menu-product'
|
|
import HelpMenu from './_components/header/menu-help'
|
|
import MobileMenu from './_components/header/menu-mobile'
|
|
import Wrap from '@/components/wrap'
|
|
import logo from '@/assets/logo.webp'
|
|
import {Button} from '@/components/ui/button'
|
|
import {useProfileStore} from '@/components/stores/profile'
|
|
import UserCenter from '@/components/composites/user-center'
|
|
import {MenuIcon} from 'lucide-react'
|
|
import down from '@/assets/header/down.svg'
|
|
import {merge} from '@/lib/utils'
|
|
|
|
export type HeaderProps = {}
|
|
|
|
export default function Header(props: HeaderProps) {
|
|
// ======================
|
|
// 滚动条状态
|
|
// ======================
|
|
|
|
const scroll = useSyncExternalStore((callback) => {
|
|
window.addEventListener('scroll', callback)
|
|
return () => {
|
|
window.removeEventListener('scroll', callback)
|
|
}
|
|
}, () => window.scrollY > 48, () => false)
|
|
|
|
// ======================
|
|
// 菜单状态
|
|
// ======================
|
|
|
|
const [menu, setMenu] = useState(false)
|
|
const [page, setPage] = useState(0)
|
|
const pages = useMemo(() => [
|
|
<ProductMenu key="product"/>,
|
|
<SolutionMenu key="solution"/>,
|
|
<HelpMenu key="help"/>,
|
|
<MobileMenu key="mobile"/>,
|
|
], [])
|
|
|
|
const toggleMobileMenu = () => {
|
|
if (menu) {
|
|
setMenu(false)
|
|
}
|
|
else {
|
|
setPage(3)
|
|
setMenu(true)
|
|
}
|
|
}
|
|
|
|
const enterMenu = (i: number) => {
|
|
return (e: PointerEvent) => {
|
|
setPage(i)
|
|
if (page !== i) {
|
|
setMenu(true)
|
|
}
|
|
else {
|
|
setMenu(!menu)
|
|
}
|
|
}
|
|
}
|
|
|
|
const leaveMenu = (e: PointerEvent) => {
|
|
setMenu(false)
|
|
}
|
|
|
|
const enterMenuContent = (e: PointerEvent) => {
|
|
setMenu(true)
|
|
}
|
|
|
|
const leaveMenuContent = (e: PointerEvent) => {
|
|
if (page != 3) {
|
|
setMenu(false)
|
|
}
|
|
}
|
|
|
|
const enterMenuMask = (e: PointerEvent) => {
|
|
if (e.pointerType !== 'mouse') {
|
|
setMenu(false)
|
|
}
|
|
}
|
|
|
|
// ======================
|
|
// 用户信息
|
|
// ======================
|
|
|
|
const profile = useProfileStore(store => store.profile)
|
|
|
|
// ======================
|
|
// render
|
|
// ======================
|
|
|
|
return (
|
|
<header
|
|
className={merge(
|
|
'fixed top-0 left-0 w-screen z-10 flex flex-col ',
|
|
menu ? 'h-screen' : 'pointer-events-none',
|
|
)}>
|
|
<HeaderContext.Provider value={{setMenu}}>
|
|
|
|
{/* 菜单栏 */}
|
|
<div className={merge(
|
|
`flex-none pointer-events-auto`,
|
|
`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`,
|
|
)}>
|
|
<Wrap className="h-20 max-md:h-16 flex justify-between">
|
|
<nav className="flex items-center justify-between lg:flex-row-reverse gap-4 lg:gap-8">
|
|
|
|
{/* 桌面端菜单 */}
|
|
<ul className="h-full items-stretch hidden lg:flex">
|
|
<LinkItem text="首页" href="/"/>
|
|
<MenuItem
|
|
text="产品订购"
|
|
active={menu && page === 0}
|
|
onPointerEnter={enterMenu(0)}
|
|
onPointerLeave={leaveMenu}
|
|
/>
|
|
<MenuItem
|
|
text="业务场景"
|
|
active={menu && page === 1}
|
|
onPointerEnter={enterMenu(1)}
|
|
onPointerLeave={leaveMenu}
|
|
/>
|
|
<MenuItem
|
|
text="帮助中心"
|
|
active={menu && page === 2}
|
|
onPointerEnter={enterMenu(2)}
|
|
onPointerLeave={leaveMenu}
|
|
/>
|
|
<LinkItem
|
|
text="业务定制"
|
|
href="/custom"/>
|
|
</ul>
|
|
|
|
{/* 移动端菜单 */}
|
|
<Button
|
|
theme="ghost"
|
|
className="lg:hidden size-10"
|
|
onClick={toggleMobileMenu}
|
|
>
|
|
<MenuIcon/>
|
|
</Button>
|
|
|
|
{/* logo */}
|
|
<Link href="/" className="flex items-center">
|
|
<Image src={logo} alt="logo" height={40} className="translate-y-0.5"/>
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* 登录 */}
|
|
<Suspense>
|
|
<ProfileOrLogin/>
|
|
</Suspense>
|
|
</Wrap>
|
|
</div>
|
|
|
|
{/* 桌面端下拉菜单 */}
|
|
<div
|
|
className={merge(
|
|
`hidden lg:flex flex-auto overflow-auto lg:flex-none lg:basis-72 shadow-lg box-content`,
|
|
`bg-[#fffe] backdrop-blur-sm`,
|
|
`transition-[opacity,padding] transition-discrete duration-200 ease-in-out`,
|
|
menu
|
|
? `delay-[0s,0s] opacity-100 py-4`
|
|
: `delay-[0s,0s] opacity-0 py-0 pointer-events-none`,
|
|
)}
|
|
onPointerEnter={enterMenuContent}
|
|
onPointerLeave={leaveMenuContent}
|
|
>
|
|
{pages[page]}
|
|
</div>
|
|
|
|
{/* 移动端侧边栏菜单 */}
|
|
{menu && page === 3 && (
|
|
<div className="lg:hidden fixed inset-0 z-20 flex">
|
|
<div
|
|
className="flex-1 bg-black/40"
|
|
onPointerDown={enterMenuMask}
|
|
/>
|
|
<div className="w-72 max-w-[80vw] bg-white shadow-xl overflow-y-auto">
|
|
{pages[3]}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 遮罩层（桌面端） */}
|
|
<div className="flex-auto" onPointerEnter={enterMenuMask}/>
|
|
|
|
</HeaderContext.Provider>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
function LinkItem(props: {
|
|
text: string
|
|
href: string
|
|
}) {
|
|
return (
|
|
<li className="group relative">
|
|
<Link
|
|
href={props.href}
|
|
className={[
|
|
`h-full px-4 flex items-center text-lg`,
|
|
`transition-colors duration-200 ease-in-out`,
|
|
`hover:text-blue-500`,
|
|
].join(' ')}
|
|
>
|
|
{props.text}
|
|
</Link>
|
|
<div className={[
|
|
`absolute bottom-0 w-full h-0.5 bg-transparent `,
|
|
`transition-colors duration-200`,
|
|
`group-hover:bg-blue-500`,
|
|
].join(' ')}>
|
|
</div>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
function MenuItem(props: {
|
|
text: string
|
|
active: boolean
|
|
} & ComponentProps<'button'>) {
|
|
return (
|
|
<li className="group relative">
|
|
<button
|
|
onPointerEnter={props.onPointerEnter}
|
|
onPointerLeave={props.onPointerLeave}
|
|
className={[
|
|
`h-full px-4 flex gap-3 items-center cursor-pointer text-lg`,
|
|
`transition-colors duration-200 ease-in-out cursor-pointer`,
|
|
props.active
|
|
? `text-blue-500`
|
|
: ``,
|
|
].join(' ')}
|
|
>
|
|
<span>{props.text}</span>
|
|
<Image
|
|
src={down}
|
|
alt="drop_menu"
|
|
className={[
|
|
`transition-transform duration-200 ease-in-out`,
|
|
props.active
|
|
? `rotate-180`
|
|
: ``,
|
|
].join(' ')}
|
|
/>
|
|
</button>
|
|
<div
|
|
className={[
|
|
`absolute bottom-0 w-full h-0.5 pointer-events-none`,
|
|
`transition-colors duration-200`,
|
|
props.active
|
|
? `bg-blue-500`
|
|
: 'bg-transparent',
|
|
].join(' ')}/>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
function ProfileOrLogin() {
|
|
const profile = use(useProfileStore(store => store.profile))
|
|
return (
|
|
<div className="flex items-center">
|
|
{profile == null
|
|
? (
|
|
<>
|
|
<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-linear-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>
|
|
</>
|
|
)
|
|
: (
|
|
<UserCenter profile={profile}/>
|
|
)
|
|
}
|
|
</div>
|
|
)
|
|
}
|