From 3c2959027a12088be799cb36fbdbb5aa21a99de3 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 13 Nov 2024 14:51:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DNav=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=9A=84=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/nav/components/MenuItemCollapse.js |  15 ++-
 themes/nav/components/TopNavBar.js        | 123 +++++++++++++---------
 2 files changed, 82 insertions(+), 56 deletions(-)

diff --git a/themes/nav/components/MenuItemCollapse.js b/themes/nav/components/MenuItemCollapse.js
index 4f332337d59..065e92286fa 100755
--- a/themes/nav/components/MenuItemCollapse.js
+++ b/themes/nav/components/MenuItemCollapse.js
@@ -20,7 +20,9 @@ export const MenuItemCollapse = props => {
   if (!link || !link.show) {
     return null
   }
-
+  // #号加标题  快速跳转到指定锚点
+  const isAnchor = link?.href === '#'
+  const url = isAnchor ? `#${link.name}` : link.href
   const selected = router.pathname === link.href || router.asPath === link.href
 
   const toggleShow = () => {
@@ -42,7 +44,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.href}
+            href={url}
             target={link?.target}
             className='py-2 w-full my-auto items-center justify-between flex  '>
             <div>
@@ -72,21 +74,24 @@ export const MenuItemCollapse = props => {
       {hasSubMenu && (
         <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
           {link?.subMenus?.map((sLink, index) => {
+            // #号加标题  快速跳转到指定锚点
+            const sIsAnchor = sLink?.href === '#'
+            const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.href
+
             return (
               <div
                 key={index}
                 className='
               py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white font-bold 
               dark:bg-black text-left justify-start text-gray-600 bg-gray-50 bg-opacity-20 dark:hover:bg-gray-600 tracking-widest transition-all duration-200'>
-                {/* <Link href={sLink.href} target={link?.target}> */}
-                <a href={`/#${sLink.title}`} target={'_self'}>
+                <Link href={sUrl} target={'_self'}>
                   <div>
                     <div
                       className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`}
                     />
                     {sLink.title}
                   </div>
-                </a>
+                </Link>
               </div>
             )
           })}
diff --git a/themes/nav/components/TopNavBar.js b/themes/nav/components/TopNavBar.js
index cee758c6a2b..f9e9438b67a 100755
--- a/themes/nav/components/TopNavBar.js
+++ b/themes/nav/components/TopNavBar.js
@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
-import { MenuBarMobile } from './MenuBarMobile'
-import throttle from 'lodash.throttle'
-import SearchInput from './SearchInput'
 import DarkModeButton from '@/components/DarkModeButton'
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import SearchInput from './SearchInput'
 
 /**
  * 顶部导航栏 + 菜单
@@ -29,20 +29,22 @@ export default function TopNavBar(props) {
 
   const throttleMs = 200
 
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    const nav = document.querySelector('#nav-bg')
-    // const header = document.querySelector('#top-nav')
-    const header = document.querySelector('#container-inner')
-    const showNav = scrollS <= windowTop || scrollS < 5 || (scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
-    if (!showNav) {
-      nav && nav.classList.replace('-top-20', 'top-0')
-      windowTop = scrollS
-    } else {
-      nav && nav.classList.replace('top-0', '-top-20')
-      windowTop = scrollS
-    }
-  }, throttleMs)
+  const scrollTrigger = useCallback(
+    throttle(() => {
+      const scrollS = window.scrollY
+      const nav = document.querySelector('#nav-bg')
+      // const header = document.querySelector('#top-nav')
+      const header = document.querySelector('#container-inner')
+      const showNav =
+        scrollS <= windowTop || scrollS < 5 || scrollS <= header.clientHeight // 非首页无大图时影藏顶部 滚动条置顶时隐藏
+      if (!showNav) {
+        nav && nav.classList.replace('-top-20', 'top-0')
+        windowTop = scrollS
+      } else {
+        nav && nav.classList.replace('top-0', '-top-20')
+        windowTop = scrollS
+      }
+    }, throttleMs)
   )
 
   const toggleMenuOpen = () => {
@@ -50,42 +52,61 @@ export default function TopNavBar(props) {
   }
 
   return (
-        <div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg  md:shadow-none pb-2 md:pb-0 ' + className}>
-            {/* 图标Logo */}
-            <div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
-                <LogoBar {...props} />
-            </div>
+    <div
+      id='top-nav'
+      className={
+        'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg  md:shadow-none pb-2 md:pb-0 ' +
+        className
+      }>
+      {/* 图标Logo */}
+      <div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
+        <LogoBar {...props} />
+      </div>
 
-            {/* 移动端折叠菜单 */}
-            <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden mt-16'>
-                <div className='pt-1 py-3 lg:hidden '>
-                    <MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
-                </div>
-            </Collapse>
-
-            {/* 导航栏菜单 */}
-            <div className='h-18 px-5'>
+      {/* 导航栏菜单 */}
+      <div className='h-18 px-5'>
+        <div className='absolute top-0 right-5'>
+          {/* 搜索框、折叠按钮、仅移动端显示 */}
+          <div className='pt-1 flex md:hidden justify-end items-center space-x-3 font-serif dark:text-gray-200 '>
+            <div className='relative md:hidden top-0 right-0'>
+              <SearchInput className='my-3 rounded-full' />
+            </div>
+            <DarkModeButton className='flex text-md items-center h-full' />
+            <div
+              onClick={toggleMenuOpen}
+              className='w-4 text-center cursor-pointer text-lg hover:scale-110 duration-150'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fa-solid fa-ellipsis-vertical' />
+              )}
+            </div>
+          </div>
 
-              <div className='absolute top-0 right-5'>
-                {/* 搜索框、折叠按钮、仅移动端显示 */}
-                <div className='pt-1 flex md:hidden justify-end items-center space-x-3 font-serif dark:text-gray-200 '>
-                <div className='relative md:hidden top-0 right-0'>
-                  <SearchInput className='my-3 rounded-full' />
-                </div>
-                    <DarkModeButton className='flex text-md items-center h-full' />
-                    <div onClick={toggleMenuOpen} className='w-4 text-center cursor-pointer text-lg hover:scale-110 duration-150'>
-                        {isOpen ? <i className='fas fa-times' /> : <i className="fa-solid fa-ellipsis-vertical"/>}
-                    </div>
-                </div>
+          {/* 桌面端顶部菜单 */}
+          <div className='hidden md:flex'>
+            {/* {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)} */}
+            <SearchInput className='my-3 rounded-full' />
+            <DarkModeButton className='my-5 mr-6 text-sm flex items-center h-full pt-px' />
+          </div>
+        </div>
+      </div>
 
-                {/* 桌面端顶部菜单 */}
-                <div className='hidden md:flex'>
-                    {/* {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)} */}
-                    <SearchInput className='my-3 rounded-full' />
-                    <DarkModeButton className='my-5 mr-6 text-sm flex items-center h-full pt-px' />
-                </div>
-              </div>
-            </div>
+      {/* 移动端折叠菜单 */}
+      <Collapse
+        type='vertical'
+        collapseRef={collapseRef}
+        isOpen={isOpen}
+        className='md:hidden mt-16'>
+        <div className='pt-1 py-3 lg:hidden '>
+          <MenuBarMobile
+            {...props}
+            onHeightChange={param =>
+              collapseRef.current?.updateCollapseHeight(param)
+            }
+          />
         </div>
+      </Collapse>
+    </div>
   )
 }