From 2a2c6eb10d55516898c2a2c057700433b414e942 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Wed, 5 Jul 2023 23:00:34 +0800
Subject: [PATCH] =?UTF-8?q?fukasawa=E4=B8=BB=E9=A2=98=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/fukasawa/components/ArticleDetail.js |  4 +-
 themes/fukasawa/components/AsideLeft.js     | 50 +++++++++++++++++----
 themes/fukasawa/components/BlogCard.js      |  9 ++--
 themes/fukasawa/config_fuka.js              |  3 +-
 themes/fukasawa/index.js                    | 12 ++---
 themes/gitbook/components/TocDrawer.js      |  2 +-
 themes/gitbook/components/TopNavBar.js      |  2 +-
 themes/matery/index.js                      |  4 +-
 8 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
index d46ff07a..c874a200 100644
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -84,7 +84,7 @@ export default function ArticleDetail(props) {
         </header>
 
         {/* Notion文章主体 */}
-        <section id='article-wrapper' className='px-1'>
+        <section id='article-wrapper'>
           {post && <NotionPage post={post} />}
         </section>
 
@@ -98,7 +98,7 @@ export default function ArticleDetail(props) {
       {post.type === 'Post' && <ArticleAround prev={prev} next={next} /> }
 
       {/* 评论互动 */}
-      <div className="duration-200 shadow px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
+      <div className="duration-200 shadow py-6 px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
         <Comment frontMatter={post} />
       </div>
     </div>
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index 6d263e7c..298bad3e 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -10,22 +10,56 @@ import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 import SocialButton from './SocialButton'
 import { useFukasawaGlobal } from '..'
+import FUKA_CONFIG from '@/themes/fukasawa/config_fuka'
 
+// import { debounce } from 'lodash'
+// import { useEffect } from 'react'
+
+/**
+ * 侧边栏
+ * @param {*} props
+ * @returns
+ */
 function AsideLeft(props) {
   const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
   const router = useRouter()
-  const { open, setOpen } = useFukasawaGlobal()
+  const { isCollapsed, setIsCollapse } = useFukasawaGlobal()
   // 折叠侧边栏
   const toggleOpen = () => {
-    setOpen(!open)
+    setIsCollapse(!isCollapsed)
   }
-  return <div className={`sideLeft relative ${open ? 'w-80' : 'w-0'} duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
-        {/* 折叠按钮 */}
-        <div className={`${open ? 'ml-80' : ''} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
-            {open ? <i className='fas fa-bars text-xl'></i> : <i className="fa-solid fa-indent text-xl"></i>}
-        </div>
 
-        <div className={` ${open ? 'px-10' : 'hidden'}`}>
+  // 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false
+  //   useEffect(() => {
+  //     const handleResize = debounce(() => {
+  //       if (window.innerWidth < 1366 || window.scrollY >= 100) {
+  //         setIsCollapse(true)
+  //       } else {
+  //         setIsCollapse(false)
+  //       }
+  //     }, 100)
+
+  //     console.log('router', router)
+  //     if (router.pathname === '/[...slug]') {
+  //       window.addEventListener('resize', handleResize)
+  //       window.addEventListener('scroll', handleResize, { passive: true })
+  //     }
+
+  //     return () => {
+  //       if (router.pathname === '/[...slug]') {
+  //         window.removeEventListener('resize', handleResize)
+  //         window.removeEventListener('scroll', handleResize, { passive: true })
+  //       }
+  //     }
+  //   }, [])
+
+  return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} ease-in-out duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
+        {/* 折叠按钮 */}
+        {FUKA_CONFIG.SIDEBAR_COLLAPSE_BUTTON && <div className={`${isCollapsed ? '' : 'ml-80'} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
+            {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
+        </div>}
+
+        <div className={`h-full ${isCollapsed ? 'hidden' : 'px-10'}`}>
 
             <Logo {...props} />
 
diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js
index 7dc9f492..482cb5b5 100644
--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -37,17 +37,14 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
 
                 {/* 文字部分 */}
                 <div className="flex flex-col w-full">
-                    <Link
-                        href={`${BLOG.SUB_PATH}/${post.slug}`}
-                        passHref
-                        className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'
-                            } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
+                    <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                         className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
                     >
                         {post.title}
                     </Link>
 
                     {(!showPreview || showSummary) && (
-                        <p className="my-1 line-clamp-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-5">
+                        <p className="my-2 tracking-wide line-clamp-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-5">
                             {post.summary}
                         </p>
                     )}
diff --git a/themes/fukasawa/config_fuka.js b/themes/fukasawa/config_fuka.js
index d1b0422a..1e9a2a2b 100644
--- a/themes/fukasawa/config_fuka.js
+++ b/themes/fukasawa/config_fuka.js
@@ -10,7 +10,8 @@ const FUKA_CONFIG = {
   MENU_ARCHIVE: true, // 显示归档
   MENU_SEARCH: false, // 显示搜索
 
-  SIDEBAR_OPEN_SATUS_DEFAULT: true // 侧边栏默认开启
+  SIDEBAR_COLLAPSE_BUTTON: true, // 侧边栏折叠按钮
+  SIDEBAR_COLLAPSE_SATUS_DEFAULT: false // 侧边栏默认折叠收起
 
 }
 export default FUKA_CONFIG
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
index 73c99599..5c05088e 100644
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -44,19 +44,19 @@ const LayoutBase = (props) => {
   const { onLoading } = useGlobal()
 
   // 侧边栏折叠从 本地存储中获取 open 状态的初始值
-  const [open, setOpen] = useState(() => {
+  const [isCollapsed, setIsCollapse] = useState(() => {
     if (typeof window !== 'undefined') {
-      return localStorage.getItem('fukasawa-sidebarOpen') === 'true' || FUKA_CONFIG.SIDEBAR_OPEN_SATUS_DEFAULT
+      return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKA_CONFIG.SIDEBAR_COLLAPSE_SATUS_DEFAULT
     }
-    return FUKA_CONFIG.SIDEBAR_OPEN_SATUS_DEFAULT
+    return FUKA_CONFIG.SIDEBAR_COLLAPSE_SATUS_DEFAULT
   })
 
   // 在组件卸载时保存 open 状态到本地存储中
   useEffect(() => {
     if (isBrowser()) {
-      localStorage.setItem('fukasawa-sidebarOpen', open)
+      localStorage.setItem('fukasawa-sidebar-collapse', isCollapsed)
     }
-  }, [open])
+  }, [isCollapsed])
 
   // 增加一个状态以触发 Transition 组件的动画
   const [showTransition, setShowTransition] = useState(true)
@@ -71,7 +71,7 @@ const LayoutBase = (props) => {
   }
 
   return (
-        <ThemeGlobalFukasawa.Provider value={{ open, setOpen }}>
+        <ThemeGlobalFukasawa.Provider value={{ isCollapsed, setIsCollapse }}>
 
             <div id='theme-fukasawa'>
                 <CommonHead meta={meta} />
diff --git a/themes/gitbook/components/TocDrawer.js b/themes/gitbook/components/TocDrawer.js
index ca869b40..7b07044a 100644
--- a/themes/gitbook/components/TocDrawer.js
+++ b/themes/gitbook/components/TocDrawer.js
@@ -14,7 +14,7 @@ const TocDrawer = ({ post, cRef }) => {
     changeTocVisible(!tocVisible)
   }
   return <>
-    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40'>
+    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
       {/* 侧边菜单 */}
       <div
         className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
diff --git a/themes/gitbook/components/TopNavBar.js b/themes/gitbook/components/TopNavBar.js
index 555275f3..f0484e7d 100644
--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -49,7 +49,7 @@ export default function TopNavBar(props) {
             </Collapse>
 
             {/* 导航栏菜单 */}
-            <div className='flex w-full h-14 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+            <div className='flex w-full h-14 shadow glassmorphism bg-white dark:bg-hexo-black-gray px-7 items-between'>
 
                 {/* 左侧图标Logo */}
                 <LogoBar {...props} />
diff --git a/themes/matery/index.js b/themes/matery/index.js
index 8311b8fb..cd97c05c 100644
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -237,7 +237,7 @@ const LayoutSlug = props => {
                             <ShareBar post={post} />
 
                             {/* 版权说明 */}
-                            {post.type === 'Post' && <ArticleCopyright {...props} />}
+                            {post?.type === 'Post' && <ArticleCopyright {...props} />}
 
                         </article>
 
@@ -253,7 +253,7 @@ const LayoutSlug = props => {
             </div>
 
             {/* 底部文章推荐 */}
-            {post.type === 'Post' && <ArticleAdjacent {...props} />}
+            {post?.type === 'Post' && <ArticleAdjacent {...props} />}
 
             {/* 底部公告 */}
             <Announcement {...props} />