产品页面跳转与性能优化
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
'use client'
|
||||
import {useCallback, useEffect, useMemo, useState} from 'react'
|
||||
import {createContext, useCallback, useEffect, useMemo, useState} from 'react'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import {LinkItem, MenuItem} from './_server/navs'
|
||||
@@ -9,6 +9,10 @@ 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)
|
||||
|
||||
export type HeaderProps = {}
|
||||
|
||||
export default function Header(props: HeaderProps) {
|
||||
@@ -44,111 +48,112 @@ export default function Header(props: HeaderProps) {
|
||||
<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`}>
|
||||
<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`,
|
||||
<HeaderContext.Provider value={{setMenu}}>
|
||||
<header className={`fixed top-0 w-full z-10`}>
|
||||
<div className={[
|
||||
`transition-[background, shadow] 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>
|
||||
? `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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user