From e2d559d4e0023919a27703e373f8c1b6c64225f6 Mon Sep 17 00:00:00 2001 From: Eamon-meng <17516219072@163.com> Date: Mon, 16 Jun 2025 17:46:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E9=80=82=E9=85=8D?= =?UTF-8?q?=E5=B0=8F=E4=BA=8E1024=E6=97=B6=E8=8F=9C=E5=8D=95=E6=A0=8F?= =?UTF-8?q?=E7=9A=84=E5=AD=90=E8=8F=9C=E5=8D=95=E8=AE=BE=E7=BD=AE=E5=9B=BA?= =?UTF-8?q?=E5=AE=9A=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(home)/@header/_client/navs.tsx | 4 +- src/app/(home)/@header/_client/product.tsx | 2 +- src/app/(home)/@header/_client/provider.tsx | 95 +++++++++++++-------- 3 files changed, 61 insertions(+), 40 deletions(-) diff --git a/src/app/(home)/@header/_client/navs.tsx b/src/app/(home)/@header/_client/navs.tsx index 7f8e8a5..925b206 100644 --- a/src/app/(home)/@header/_client/navs.tsx +++ b/src/app/(home)/@header/_client/navs.tsx @@ -45,7 +45,7 @@ export function MenuItem(props: { `h-full px-4 flex gap-3 items-center cursor-pointer text-lg`, `transition-colors duration-200 ease-in-out`, props.active - ? `text-blue-500` + ? `lg:text-blue-500` : ``, ].join(' ')} > @@ -66,7 +66,7 @@ export function MenuItem(props: { `absolute bottom-0 w-full h-0.5 pointer-events-none`, `transition-colors duration-200`, props.active - ? `bg-blue-500` + ? `lg:bg-blue-500` : 'bg-transparent', ].join(' ')}/> diff --git a/src/app/(home)/@header/_client/product.tsx b/src/app/(home)/@header/_client/product.tsx index e3e1c85..94a59e2 100644 --- a/src/app/(home)/@header/_client/product.tsx +++ b/src/app/(home)/@header/_client/product.tsx @@ -68,7 +68,7 @@ export function Domestic(props: {}) { active={currentType === 'fixed'} /> -
+

定制 业务定制 diff --git a/src/app/(home)/@header/_client/provider.tsx b/src/app/(home)/@header/_client/provider.tsx index 07cc658..91c92ee 100644 --- a/src/app/(home)/@header/_client/provider.tsx +++ b/src/app/(home)/@header/_client/provider.tsx @@ -11,6 +11,8 @@ import logo from '@/assets/logo.webp' import {Button} from '@/components/ui/button' import {useProfileStore} from '@/components/providers/StoreProvider' import UserCenter from '@/components/composites/user-center' +import {MenuIcon} from 'lucide-react' +import {merge} from '@/lib/utils' export const HeaderContext = createContext<{ setMenu: (value: boolean) => void @@ -24,7 +26,7 @@ export default function Provider(props: ProviderProps) { // 滚动条状态 // ====================== const [scroll, setScroll] = useState(false) // Changed to false for client-side rendering - + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) // 控制移动端菜单展开/收起 const handleScroll = useCallback(() => { setScroll(window.scrollY > 48) }, []) @@ -47,6 +49,8 @@ export default function Provider(props: ProviderProps) { const menuRef = useRef(null) // 屏幕1024时 const [isMobile, setIsMobile] = useState(false) + // 控制产品订购下拉菜单的展开/收起 + const [productDropdownOpen, setProductDropdownOpen] = useState(false) // 点击外部关闭菜单 useEffect(() => { @@ -56,6 +60,7 @@ export default function Provider(props: ProviderProps) { // 排除所有交互元素 if (!target.closest('a, button, [role="button"], [role="tab"]')) { setMenu(false) + setProductDropdownOpen(false) // 同时关闭产品下拉菜单 } } } @@ -68,20 +73,10 @@ export default function Provider(props: ProviderProps) { }, []) const handleMenuEnter = (pageIndex: number) => { - if (isMobile) { - // 移动端: 点击切换当前菜单 - if (menu && page === pageIndex) { - // 添加关闭动画延迟 - setTimeout(() => setMenu(false), 100) - } - else { - setPage(pageIndex) - // 先设置page，再设置menu为true - setTimeout(() => setMenu(true), 0) - } + if (isMobile && menu && page === pageIndex) { + setMenu(false) } else { - // 桌面端: 悬停打开 setPage(pageIndex) setMenu(true) } @@ -89,7 +84,6 @@ export default function Provider(props: ProviderProps) { const handleMenuLeave = useCallback(() => { if (!isMobile) { - // 桌面端: 添加延迟关闭以避免意外关闭 setMenu(false) } }, [isMobile]) @@ -121,56 +115,86 @@ export default function Provider(props: ProviderProps) { return () => window.removeEventListener('resize', checkMobile) }, []) + // 切换移动菜单 + const toggleMobileMenu = () => { + setMobileMenuOpen(!mobileMenuOpen) + } return (
- -
+ +
{/* logo */} logo {/* 菜单 */} -
@@ -178,31 +202,26 @@ export default function Provider(props: ProviderProps) {
{profile == undefined ? ( - <> +
登录 注册 - +
) : ( - // - // - // ) } @@ -215,11 +234,13 @@ export default function Provider(props: ProviderProps) { className={[ `shadow-lg`, `overflow-hidden bg-[#fffe] backdrop-blur-sm`, - `transition-[opacity,padding,height] transition-discrete duration-200 ease-in-out`, + `transition-all 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`, - isMobile && `max-lg:transition-all max-lg:duration-300`, + ? `opacity-100 py-8 h-auto visible` + : `opacity-0 py-0 h-0 invisible`, + isMobile + ? `max-lg:fixed max-lg:top-65 max-lg:left-0 max-lg:right-0 max-lg:w-full max-lg:z-[60] max-lg:overflow-y-auto max-lg:max-h-[calc(100vh-5rem)]` + : `absolute top-full left-0 right-0`, ].join(' ')} onPointerEnter={() => !isMobile && setMenu(true)} onPointerLeave={() => !isMobile && setMenu(false)}