手机端适配小于1024时菜单栏的子菜单设置固定展示

2025-06-16 17:46:21 +08:00
parent 8bbc0fc5f5
commit e2d559d4e0
3 changed files with 61 additions and 40 deletions
--- 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(' ')}/>
    </li>
--- 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'}
        />
      </div>
-      <div className="w-64 flex flex-col gap-4">
+      <div className="w-64 flex flex-col gap-4 max-lg:hidden">
        <h3 className="font-bold mb-2 flex items-center gap-3">
          <Image src={custom} alt="定制" className="w-10 h-10"/>
          <span>业务定制</span>
--- 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<HTMLDivElement>(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 (
    <HeaderContext.Provider value={{setMenu, isMobile}}>
      <div
        ref={menuRef}
        className={[
          `transition-[background, shadow] duration-200 ease-in-out`,
-          menu
+          menu || mobileMenuOpen || productDropdownOpen
            ? `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">
+        <Wrap className="h-20 flex justify-between items-center">
+          <div className="flex justify-between items-center gap-2 lg:gap-8 h-9 lg:h-auto max-lg:flex-row-reverse lg:items-stretch">
            {/* logo */}
            <Link href="/" className="flex items-center">
              <Image src={logo} alt="logo" height={40} className="translate-y-0.5"/>
            </Link>

            {/* 菜单 */}
-            <nav>
-              <ul className="h-full flex items-stretch max-lg:hidden">
+            <nav className="flex flex-col items-center">
+              <Button
+                theme="ghost"
+                className="w-9 h-9 lg:hidden"
+                onClick={toggleMobileMenu}
+                aria-expanded={productDropdownOpen}
+              >
+                <MenuIcon/>
+              </Button>
+              <ul
+                className={merge(
+                  'h-full  items-stretch max-lg:h-auto relative',
+                  'max-lg:absolute max-lg:top-full max-lg:left-0 max-lg:w-screen',
+                  'max-lg:bg-[#fffe] max-lg:backdrop-blur-sm',
+                  mobileMenuOpen
+                    ? 'max-lg:flex max-lg:flex-col max-lg:max-h-[500px] max-lg:py-4 max-lg:opacity-100'
+                    : 'max-lg:hidden max-lg:max-h-0 max-lg:py-0 max-lg:opacity-0',
+                  'lg:flex lg:items-stretch ',
+                )}
+              >
                <LinkItem text="首页" href="/"/>
+
                <MenuItem
                  text="产品订购"
                  active={menu && page === 0}
                  onEnter={() => handleMenuEnter(0)}
                  onLeave={handleMenuLeave}
                  onTouchStart={() => handleMenuEnter(0)}
-                />
+                >
+                  {/* {!isMobile && !menu && <ProductMenu/>} */}
+                </MenuItem>
                <MenuItem
                  text="业务场景"
                  active={menu && page === 1}
                  onEnter={() => handleMenuEnter(1)}
                  onLeave={handleMenuLeave}
-                  onTouchStart={() => handleMenuEnter(1)}
-                />
+                  // onTouchStart={() => handleMenuEnter(1)}
+                >
+                  {/* {!isMobile && !menu && <SolutionMenu/>} */}
+                </MenuItem>
                <MenuItem
                  text="帮助中心"
                  active={menu && page === 2}
                  onEnter={() => handleMenuEnter(2)}
                  onLeave={handleMenuLeave}
-                  onTouchStart={() => handleMenuEnter(2)}
-                />
+                  // onTouchStart={() => handleMenuEnter(2)}
+                >
+                  {/* {!isMobile && !menu && <HelpMenu/>} */}
+                </MenuItem>
                <LinkItem
                  text="企业服务"
                  href="#"/>
                <LinkItem
                  text="推广返利"
                  href="#"/>
+
              </ul>
            </nav>
          </div>
@@ -178,31 +202,26 @@ export default function Provider(props: ProviderProps) {
          <div className="flex items-center">
            {profile == undefined
              ? (
-                <>
+                <div className="flex items-center max-lg:gap-2">
                  <Link
                    href="/login"
-                    className="w-24 h-12 flex items-center justify-center lg:text-lg"
+                    className="px-2 lg:w-24 h-9 lg: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`,
+                      `px-2 lg:w-24 h-9 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>
              )
              : (
-                // <Link href="/admin">
-                //   <Button theme="gradient" className="h-12">
-                //     进入控制台
-                //   </Button>
-                // </Link>
                <UserCenter/>
              )
            }
@@ -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)}