Merge pull request #2752 from tangly1024/feat/gitbook-auto-expand

gitbook导航文件夹悬停自动展开

components/Collapse.js

@@ -26,9 +26,9 @@ const Collapse = props => {
   })
 
   /**
-     * 折叠
-     * @param {*} element
-     */
+   * 折叠
+   * @param {*} element
+   */
   const collapseSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -51,9 +51,9 @@ const Collapse = props => {
   }
 
   /**
-     * 展开
-     * @param {*} element
-     */
+   * 展开
+   * @param {*} element
+   */
   const expandSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -82,13 +82,24 @@ const Collapse = props => {
       collapseSection(ref.current)
     }
     // 通知父组件高度变化
-    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
+    props?.onHeightChange &&
+      props.onHeightChange({
+        height: ref.current.scrollHeight,
+        increase: props.isOpen
+      })
   }, [props.isOpen])
 
   return (
-        <div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className || ''} overflow-hidden duration-200 `}>
-            {props.children}
-        </div>
+    <div
+      ref={ref}
+      style={
+        type === 'vertical'
+          ? { height: '0px', willChange: 'height' }
+          : { width: '0px', willChange: 'width' }
+      }
+      className={`${props.className || ''} overflow-hidden duration-300`}>
+      {props.children}
+    </div>
   )
 }
 Collapse.defaultProps = { isOpen: false }

themes/gitbook/components/NavPostItem.js

@@ -14,12 +14,20 @@ import BlogPostCard from './BlogPostCard'
 const NavPostItem = props => {
   const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
   // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态
+  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND', false, CONFIG)
 
   // 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
   const toggleOpenSubMenu = () => {
     toggleItem() // 调用父组件传递的切换函数
     // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
   }
+  const onHoverToggle = () => {
+    // 允许鼠标悬停时自动展开，而非点击展开
+    if (!hoverExpand) {
+      return
+    }
+    toggleOpenSubMenu()
+  }
 
   const groupHasLatest = group?.items?.some(post => post.isLatest)
 
@@ -27,13 +35,14 @@ const NavPostItem = props => {
     return (
       <>
         <div
+          onMouseEnter={onHoverToggle}
           onClick={toggleOpenSubMenu}
-          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
+          className='cursor-pointer relative flex justify-between text-sm p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
           key={group?.category}>
           <span>{group?.category}</span>
           <div className='inline-flex items-center select-none pointer-events-none '>
             <i
-              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
+              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}></i>
           </div>
           {groupHasLatest &&
             siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&

themes/gitbook/components/NavPostList.js

@@ -105,6 +105,7 @@ function groupArticles(filteredNavPages) {
     return []
   }
   const groups = []
+  const AUTO_SORT = siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)
 
   for (let i = 0; i < filteredNavPages.length; i++) {
     const item = filteredNavPages[i]
@@ -112,7 +113,7 @@ function groupArticles(filteredNavPages) {
 
     let existingGroup = null
     // 开启自动分组排序；将同分类的自动归到同一个文件夹，忽略Notion中的排序
-    if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
+    if (AUTO_SORT) {
       existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
     } else {
       existingGroup = groups[groups.length - 1] // 获取最后一个分组

themes/gitbook/config.js

@@ -15,6 +15,8 @@ const CONFIG = {
   // 导航文章自动排他折叠
   GITBOOK_EXCLUSIVE_COLLAPSE: true, // 一次只展开一个分类，其它文件夹自动关闭。
 
+  GITBOOK_FOLDER_HOVER_EXPAND: true, // 左侧导航文件夹鼠标悬停时自动展开；若为false，则要点击才能展开
+
   // Widget
   GITBOOK_WIDGET_REVOLVER_MAPS:
     process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件