导航文章排他自动折叠

themes/gitbook/components/NavPostList.js

@@ -1,8 +1,9 @@
-import NavPostListEmpty from './NavPostListEmpty'
-import { useRouter } from 'next/router'
-import NavPostItem from './NavPostItem'
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+import NavPostItem from './NavPostItem'
 
 /**
  * 博客列表滚动分页
@@ -11,11 +12,23 @@ import { siteConfig } from '@/lib/config'
  * @returns {JSX.Element}
  * @constructor
  */
-const NavPostList = (props) => {
+const NavPostList = props => {
   const { filteredNavPages } = props
+  const { locale, currentSearch } = useGlobal()
   const router = useRouter()
-  let selectedSth = false
-  const groupedArray = filteredNavPages?.reduce((groups, item) => {
+
+  // 存放被展开的分组
+  const [expandedGroups, setExpandedGroups] = useState([])
+
+  // 排他折叠
+  const GITBOOK_EXCLUSIVE_COLLAPSE = siteConfig(
+    'GITBOOK_EXCLUSIVE_COLLAPSE',
+    null,
+    CONFIG
+  )
+
+  // 按照分类、分组折叠内榕
+  const categoryFolders = filteredNavPages?.reduce((groups, item) => {
     const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
 
     let existingGroup = null
@@ -35,32 +48,77 @@ const NavPostList = (props) => {
     return groups
   }, [])
 
-  // 处理是否选中
-  groupedArray?.map((group) => {
-    let groupSelected = false
-    for (const post of group?.items) {
+  // 首次打开页面时，跟踪是否已经选择了一个项
+  categoryFolders?.forEach(group => {
+    let hasExpandFolder = false
+    group.items.forEach(post => {
       if (router.asPath.split('?')[0] === '/' + post.slug) {
-        groupSelected = true
-        selectedSth = true
+        hasExpandFolder = true
       }
-    }
-    group.selected = groupSelected
-    return null
+    })
+    group.selected = hasExpandFolder
   })
 
   // 如果都没有选中默认打开第一个
-  if (!selectedSth && groupedArray && groupedArray?.length > 0) {
-    groupedArray[0].selected = true
+  useEffect(() => {
+    if (expandedGroups.length === 0) {
+      setExpandedGroups([0])
+    }
+  }, [])
+
+  // 折叠项切换，当折叠或展开数组时会调用
+  const toggleItem = index => {
+    let newExpandedGroups = [...expandedGroups] // 创建一个新的展开分组数组
+
+    // 如果expandedGroups中不存在，增加入，若存在则移除
+    if (expandedGroups.includes(index)) {
+      // 如果expandedGroups中包含index，则移除index
+      newExpandedGroups = newExpandedGroups.filter(
+        expandedIndex => expandedIndex !== index
+      )
+    } else {
+      // 如果expandedGroups中不包含index，则加入index
+      newExpandedGroups.push(index)
+    }
+    // 是否排他
+    if (GITBOOK_EXCLUSIVE_COLLAPSE) {
+      // 如果折叠菜单排他性为 true，则只展开当前分组，关闭其他已展开的分组
+      newExpandedGroups = newExpandedGroups.filter(
+        expandedIndex => expandedIndex === index
+      )
+    }
+
+    // 更新展开分组数组
+    setExpandedGroups(newExpandedGroups)
+  }
+  if (!categoryFolders || categoryFolders.length === 0) {
+    // 空白内容
+    return (
+      <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <p className='text-gray-500 dark:text-gray-300'>
+          {locale.COMMON.NO_RESULTS_FOUND}{' '}
+          {currentSearch && <div>{currentSearch}</div>}
+        </p>
+      </div>
+    )
   }
 
-  if (!groupedArray || groupedArray.length === 0) {
-    return <NavPostListEmpty />
-  } else {
-    return <div id='posts-wrapper' className='w-full flex-grow space-y-0.5 tracking-wider'>
-            {/* 文章列表 */}
-            {groupedArray?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
-        </div>
-  }
+  return (
+    <div
+      id='posts-wrapper'
+      className='w-full flex-grow space-y-0.5 tracking-wider'>
+      {/* 文章列表 */}
+      {categoryFolders?.map((group, index) => (
+        <NavPostItem
+          key={index}
+          group={group}
+          onHeightChange={props.onHeightChange}
+          expanded={expandedGroups.includes(index)} // 将展开状态传递给子组件
+          toggleItem={() => toggleItem(index)} // 将切换函数传递给子组件
+        />
+      ))}
+    </div>
+  )
 }
 
 export default NavPostList