首页添加二级路由
This commit is contained in:
Eamon
@@ -1,5 +1,5 @@
|
||||
import { useSyncExternalStore } from "react"
|
||||
import { NavLink } from "react-router-dom"
|
||||
import { useRef, useState, useSyncExternalStore } from "react"
|
||||
import { NavLink, useNavigate } from "react-router-dom"
|
||||
import Wrap from "@/components/wrap"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
@@ -15,8 +15,16 @@ export default function Header() {
|
||||
() => false,
|
||||
)
|
||||
|
||||
// ======================
|
||||
// 菜单状态
|
||||
// ======================
|
||||
const [openMenu, setOpenMenu] = useState(false)
|
||||
|
||||
const handleEnter = () => setOpenMenu(true)
|
||||
const handleLeave = () => setOpenMenu(false)
|
||||
|
||||
return (
|
||||
<header className={cn("fixed top-0 left-0 w-screen z-10 flex flex-col ")}>
|
||||
<header className={cn("fixed top-0 left-0 w-screen z-10 flex flex-col")}>
|
||||
<div
|
||||
className={cn(
|
||||
`flex-none pointer-events-auto`,
|
||||
@@ -30,11 +38,17 @@ export default function Header() {
|
||||
<nav className="flex items-center justify-between gap-4 lg:gap-8">
|
||||
<ul className="h-full items-stretch hidden lg:flex">
|
||||
<NavItem to="/">首页</NavItem>
|
||||
<NavItem to="/product">产品购买</NavItem>
|
||||
<MenuItem
|
||||
text="产品购买"
|
||||
isOpen={openMenu}
|
||||
onMouseEnter={handleEnter}
|
||||
onMouseLeave={handleLeave}
|
||||
>
|
||||
<ProductDropdown onNavigate={() => setOpenMenu(false)} />
|
||||
</MenuItem>
|
||||
<NavItem to="/ipline">IP线路表</NavItem>
|
||||
<NavItem to="/softDownload">软件下载</NavItem>
|
||||
<NavItem to="/help">帮助/教程</NavItem>
|
||||
{/* <NavItem to="/client">下载客户端</NavItem> */}
|
||||
</ul>
|
||||
</nav>
|
||||
<ProfileOrLogin />
|
||||
@@ -53,15 +67,15 @@ const NavItem = ({
|
||||
}) => (
|
||||
<NavLink
|
||||
to={to}
|
||||
className={({ isActive }) =>
|
||||
`h-full flex items-center relative px-3 ${
|
||||
isActive
|
||||
? "text-blue-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-500"
|
||||
: "text-slate-700"
|
||||
}`
|
||||
}
|
||||
className="group h-full flex items-center relative px-3 text-slate-700 hover:text-blue-500 transition-colors duration-200"
|
||||
>
|
||||
{children}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute bottom-0 left-0 right-0 h-0.5 transition-colors duration-200",
|
||||
"bg-transparent group-hover:bg-blue-500",
|
||||
)}
|
||||
/>
|
||||
</NavLink>
|
||||
)
|
||||
|
||||
@@ -89,3 +103,200 @@ function ProfileOrLogin() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MenuItem = ({
|
||||
text,
|
||||
children,
|
||||
isOpen,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
}: {
|
||||
text: string
|
||||
children: React.ReactNode
|
||||
isOpen: boolean
|
||||
onMouseEnter: () => void
|
||||
onMouseLeave: () => void
|
||||
}) => {
|
||||
const timeoutRef = useRef<number | null>(null)
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current)
|
||||
timeoutRef.current = null
|
||||
}
|
||||
onMouseEnter()
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
onMouseLeave()
|
||||
}, 150)
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
className="group relative h-full flex items-center"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<button
|
||||
className={cn(
|
||||
"h-full flex items-center gap-1 px-3 text-lg transition-colors duration-200",
|
||||
isOpen ? "text-blue-500" : "text-slate-700 hover:text-blue-500",
|
||||
)}
|
||||
>
|
||||
<span>{text}</span>
|
||||
<svg
|
||||
className={cn(
|
||||
"w-4 h-4 transition-transform duration-200",
|
||||
isOpen ? "rotate-180" : "",
|
||||
)}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<span
|
||||
className={cn(
|
||||
"absolute bottom-0 left-0 right-0 h-0.5 transition-colors duration-200",
|
||||
isOpen ? "bg-blue-500" : "bg-transparent group-hover:bg-blue-500",
|
||||
)}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-full left-0 pt-3 w-screen max-w-4xl transition-all duration-200",
|
||||
isOpen
|
||||
? "opacity-100 visible translate-y-0"
|
||||
: "opacity-0 invisible -translate-y-2 pointer-events-none",
|
||||
)}
|
||||
style={{
|
||||
left: "50%",
|
||||
transform: `translateX(-7%)`,
|
||||
}}
|
||||
>
|
||||
<div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-6">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
const ProductDropdown = ({ onNavigate }: { onNavigate: () => void }) => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleClick = (path: string) => {
|
||||
navigate(path)
|
||||
onNavigate()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<ProductCard
|
||||
title="动静态IP"
|
||||
desc="千万级动态短效IP，自动去重，高并发采集"
|
||||
tag="热门"
|
||||
onClick={() => handleClick("/product/short")}
|
||||
/>
|
||||
<ProductCard
|
||||
title="新HTTP/S5"
|
||||
desc="IP可用时长从数小时到365天全覆盖"
|
||||
tag="稳定"
|
||||
onClick={() => handleClick("/product/long")}
|
||||
/>
|
||||
<ProductCard
|
||||
title="HTTP/S5"
|
||||
desc="海量全球住宅优质IP，4G/5G真实手机IP"
|
||||
tag="全球"
|
||||
onClick={() => handleClick("/product/global")}
|
||||
/>
|
||||
<ProductCard
|
||||
title="软路由成本价"
|
||||
desc="云端自动切换IP，更易于调用与开发"
|
||||
onClick={() => handleClick("/product/tunnel")}
|
||||
/>
|
||||
<ProductCard
|
||||
title="动态Vps"
|
||||
desc="IP独享，高带宽，灵活控制存活周期"
|
||||
onClick={() => handleClick("/product/exclusive")}
|
||||
/>
|
||||
<ProductCard
|
||||
title="静态独享IP"
|
||||
desc="纯净IP，更符合跨境卖家需求的云主机"
|
||||
onClick={() => handleClick("/product/static")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-3 pt-3 border-t border-gray-100">
|
||||
<span className="text-xs font-medium text-gray-400">热门推荐:</span>
|
||||
<button
|
||||
onClick={() => handleClick("/product/short")}
|
||||
className="text-sm text-blue-600 hover:underline whitespace-nowrap"
|
||||
>
|
||||
短效代理
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleClick("/product/global")}
|
||||
className="text-sm text-blue-600 hover:underline whitespace-nowrap"
|
||||
>
|
||||
海外代理
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleClick("/product/tunnel")}
|
||||
className="text-sm text-blue-600 hover:underline whitespace-nowrap"
|
||||
>
|
||||
隧道代理
|
||||
</button>
|
||||
<span className="text-xs text-gray-300">|</span>
|
||||
<button
|
||||
onClick={() => handleClick("/custom")}
|
||||
className="text-sm text-orange-500 hover:underline font-medium whitespace-nowrap"
|
||||
>
|
||||
业务定制 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const ProductCard = ({
|
||||
title,
|
||||
desc,
|
||||
tag,
|
||||
onClick,
|
||||
}: {
|
||||
title: string
|
||||
desc: string
|
||||
tag?: string
|
||||
onClick: () => void
|
||||
}) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="group flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-all cursor-pointer border border-transparent hover:border-blue-200 text-left w-full"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-gray-800 group-hover:text-blue-600 transition-colors text-sm whitespace-nowrap">
|
||||
{title}
|
||||
</span>
|
||||
{tag && (
|
||||
<span className="text-[10px] bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full shrink-0">
|
||||
{tag}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1 leading-relaxed line-clamp-2">
|
||||
{desc}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user