Merge pull request #1221 from tangly1024/gitbook-collapse

gitbook-collapse

components/Collapse.js

@@ -84,7 +84,7 @@ const Collapse = props => {
   }, [props.isOpen])
 
   return (
-        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={`${props.className} overflow-hidden duration-200 `}>
             {props.children}
         </div>
   )

themes/gitbook/LayoutBase.js

@@ -9,7 +9,7 @@ import SearchInput from './components/SearchInput'
 import { useGlobal } from '@/lib/global'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
-import BlogPostListScroll from './components/BlogPostListScroll'
+import NavPostList from './components/NavPostList'
 import ArticleInfo from './components/ArticleInfo'
 import Catalog from './components/Catalog'
 import { useRouter } from 'next/router'
@@ -61,10 +61,10 @@ const LayoutBase = (props) => {
                         <div className='py-14 px-6 sticky top-0 overflow-y-scroll h-screen'>
                             {slotLeft}
 
-                            <SearchInput className='my-3' />
+                            <SearchInput className='my-3 rounded-md' />
 
                             {/* 所有文章列表 */}
-                            <BlogPostListScroll posts={filterPosts} />
+                            <NavPostList posts={filterPosts} />
 
                             <AdSlot />
 

themes/gitbook/LayoutCategory.js

@@ -1,5 +1,5 @@
 import LayoutBase from './LayoutBase'
-import BlogPostListScroll from './components/BlogPostListScroll'
+import NavPostList from './components/NavPostList'
 import BlogPostListPage from './components/BlogPostListPage'
 import BLOG from '@/blog.config'
 
@@ -8,7 +8,7 @@ export const LayoutCategory = props => {
   const slotTop = <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类：</div>{category}</div>
 
   return <LayoutBase {...props} slotTop={slotTop}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <NavPostList {...props} />}
     </LayoutBase>
 }
 

themes/gitbook/LayoutSearch.js

@@ -7,7 +7,7 @@ import { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
 import BLOG from '@/blog.config'
 import Mark from 'mark.js'
-import BlogPostListScroll from './components/BlogPostListScroll'
+import NavPostList from './components/NavPostList'
 import BlogPostListPage from './components/BlogPostListPage'
 import { useRouter } from 'next/router'
 
@@ -45,7 +45,7 @@ export const LayoutSearch = (props) => {
     </div>
 
     {currentSearch && <div>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <NavPostList {...props} />}
     </div>}
   </LayoutBase>
 }

themes/gitbook/LayoutTag.js

@@ -1,6 +1,6 @@
 import LayoutBase from './LayoutBase'
 import BLOG from '@/blog.config'
-import BlogPostListScroll from './components/BlogPostListScroll'
+import NavPostList from './components/NavPostList'
 import BlogPostListPage from './components/BlogPostListPage'
 
 export const LayoutTag = (props) => {
@@ -8,7 +8,7 @@ export const LayoutTag = (props) => {
   const slotTop = <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签：</div>{tag}</div>
 
   return <LayoutBase {...props} slotTop={slotTop}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <NavPostList {...props} />}
    </LayoutBase>
 }
 

themes/gitbook/components/BlogPostCard.js

@@ -7,18 +7,10 @@ const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
   const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
   return (
-        <div key={post.id} className="py-0.5">
+        <div key={post.id} className={`${className} py-1 cursor-pointer px-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
             <div className="flex flex-col w-full">
-                <Link
-                    href={`${BLOG.SUB_PATH}/${post.slug}`}
-                    passHref
-                    className={
-                        `${className} ${currentSelected ? 'bg-gray-500 text-white font-bold' : 'text-gray-700 dark:text-gray-300 '} pl-1 hover:font-bold py-0.5 cursor-pointer`
-                    }>
-                    <div>
-                        {post.title}
-                    </div>
-
+                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
+                    {post.title}
                 </Link>
             </div>
         </div>

themes/gitbook/components/BlogPostListPage.js

@@ -1,6 +1,6 @@
 import BlogPostCard from './BlogPostCard'
 import BLOG from '@/blog.config'
-import BlogPostListEmpty from './BlogPostListEmpty'
+import NavPostListEmpty from './NavPostListEmpty'
 import PaginationSimple from './PaginationSimple'
 
 /**
@@ -15,7 +15,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
 
   if (!posts || posts.length === 0) {
-    return <BlogPostListEmpty />
+    return <NavPostListEmpty />
   }
 
   return (

themes/gitbook/components/BlogPostListScroll.js

@@ -1,35 +0,0 @@
-import BlogPostCard from './BlogPostCard'
-import BlogPostListEmpty from './BlogPostListEmpty'
-import React, { useRef } from 'react'
-
-/**
- * 博客列表滚动分页
- * @param posts 所有文章
- * @param tags 所有标签
- * @returns {JSX.Element}
- * @constructor
- */
-const BlogPostListScroll = ({ posts = [], currentSearch }) => {
-  const targetRef = useRef(null)
-  const filteredPosts = Object.assign(posts)
-
-  if (!filteredPosts || filteredPosts.length === 0) {
-    return <BlogPostListEmpty currentSearch={currentSearch} />
-  } else {
-    return <div id='container' ref={targetRef} className='w-full'>
-            {/* 文章列表 */}
-            {filteredPosts?.map((group, index) => {
-              if (group.category) {
-                return <div key={index}>
-                        <div className='text-md font-sans ' key={group.category}>{group.category}</div>
-                        {group.items?.map(post => (<div key={post.id} className='pl-6 border-l'><BlogPostCard className='text-sm' post={post} /></div>))}
-                    </div>
-              } else {
-                return <div key={index}> {group.items?.map(post => (<BlogPostCard key={post.id} post={post} className='text-md' />))}</div>
-              }
-            })}
-        </div>
-  }
-}
-
-export default BlogPostListScroll

themes/gitbook/components/NavPostItem.js

@@ -0,0 +1,39 @@
+import BlogPostCard from './BlogPostCard'
+import React, { useState } from 'react'
+import Collapse from '@/components/Collapse'
+
+/**
+ * 导航列表
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NavPostItem = (props) => {
+  const { group } = props
+  const [isOpen, changeIsOpen] = useState(group?.selected)
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (group.category) {
+    return <>
+            <div
+                onClick={toggleOpenSubMenu}
+                className='flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-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 duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
+            </div>
+            <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+                {group.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
+                    <BlogPostCard className='text-sm ml-3' post={post} /></div>))
+                }
+            </Collapse>
+        </>
+  } else {
+    return <div> {group.items?.map(post => (<BlogPostCard key={post.id} post={post} className='text-sm' />))}</div>
+  }
+}
+
+export default NavPostItem

themes/gitbook/components/NavPostList.js

@@ -0,0 +1,46 @@
+import NavPostListEmpty from './NavPostListEmpty'
+import { useRouter } from 'next/router'
+import NavPostItem from './NavPostItem'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NavPostList = (props) => {
+  const { posts = [], currentSearch } = props
+  const filteredPosts = Object.assign(posts)
+  const router = useRouter()
+  let selectedSth = false
+
+  // 处理是否选中
+  filteredPosts.map((group) => {
+    let groupSelected = false
+    for (const post of group?.items) {
+      if (router.asPath.split('?')[0] === '/' + post.slug) {
+        groupSelected = true
+        selectedSth = true
+      }
+    }
+    group.selected = groupSelected
+    return null
+  })
+
+  // 如果都没有选中默认打开第一个
+  if (!selectedSth && filteredPosts && filteredPosts.length > 0) {
+    filteredPosts[0].selected = true
+  }
+
+  if (!filteredPosts || filteredPosts.length === 0) {
+    return <NavPostListEmpty currentSearch={currentSearch} />
+  } else {
+    return <div className='w-full'>
+            {/* 文章列表 */}
+            {filteredPosts?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
+        </div>
+  }
+}
+
+export default NavPostList

themes/gitbook/components/NavPostListEmpty.js

@@ -4,9 +4,9 @@
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListEmpty = ({ currentSearch }) => {
+const NavPostListEmpty = ({ currentSearch }) => {
   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'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
   </div>
 }
-export default BlogPostListEmpty
+export default NavPostListEmpty

themes/gitbook/components/PageNavDrawer.js

@@ -1,5 +1,5 @@
 import { useGitBookGlobal } from '../LayoutBase'
-import BlogPostListScroll from './BlogPostListScroll'
+import NavPostList from './NavPostList'
 
 /**
  * 悬浮抽屉 页面内导航
@@ -22,7 +22,7 @@ const PageNavDrawer = ({ post, cRef }) => {
                     ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
                 <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
                     {/* 所有文章列表 */}
-                    <BlogPostListScroll posts={filterPosts} />
+                    <NavPostList posts={filterPosts} />
                 </div>
             </div>
         </div>

themes/gitbook/components/SearchInput.js

@@ -75,11 +75,11 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
     lock = false
   }
 
-  return <div className={'flex w-full bg-gray-100 ' + className}>
+  return <div className={'flex w-full'}>
     <input
       ref={searchInputRef}
       type='text'
-      className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={`${className} outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white`}
       onKeyUp={handleKeyUp}
       onCompositionStart={lockSearchInput}
       onCompositionUpdate={lockSearchInput}
@@ -88,7 +88,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       defaultValue={currentSearch}
     />
 
-    <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+    <div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
       onClick={handleSearch}>
         <i className={'hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
     </div>