gitbook 布局交互优化

themes/gitbook/components/CatalogDrawerWrapper.js

@@ -0,0 +1,60 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+import Catalog from './Catalog'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogDrawerWrapper = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  return (
+    <>
+      <div
+        id='gitbook-toc-float'
+        className='fixed top-0 right-0 z-40 md:hidden'>
+        {/* 侧边菜单 */}
+        <div
+          className={
+            (tocVisible
+              ? 'animate__slideInRight '
+              : ' -mr-72 animate__slideOutRight') +
+            ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'
+          }>
+          {post && (
+            <>
+              <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+                <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+                <i
+                  className='fas fa-times p-1 cursor-pointer'
+                  onClick={() => {
+                    changeTocVisible(false)
+                  }}></i>
+              </div>
+              <div className='dark:text-gray-400 text-gray-600 px-3'>
+                <Catalog post={post} />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {/* 背景蒙版 */}
+      <div
+        id='right-drawer-background'
+        className={
+          (tocVisible ? 'block' : 'hidden') +
+          ' fixed top-0 left-0 z-30 w-full h-full'
+        }
+        onClick={switchVisible}
+      />
+    </>
+  )
+}
+export default CatalogDrawerWrapper