feature:

样式调整

components/BlogPostListScroll.js

@@ -64,7 +64,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
         <div onClick={() => {
           handleGetMore()
         }}
-             className='w-full my-4 py-4 bg-gray-300 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
+             className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
         > {hasMore ? '继续加载' : '加载完了😰'} </div>
       </div>
     </div>

components/DarkModeButton.js

@@ -11,7 +11,7 @@ const DarkModeButton = () => {
     saveTheme(newTheme)
     changeTheme(newTheme)
   }
-  return <div className='z-10 duration-200 text-xl cursor-pointer'>
+  return <div className='z-10 duration-200 text-lg cursor-pointer'>
     <FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='mx-2 my-2 hover:scale-125 transform duration-200'
        onClick={handleChangeDarkMode} />
   </div>

components/JumpToTopButton.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
+let windowTop = 0
 
 /**
  * 跳转到网页顶部
@@ -22,7 +23,8 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     const fullHeight = clientHeight - window.outerHeight
     let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
     if (per > 100) per = 100
-    const shouldShow = scrollY > 100 && per > 0
+    const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
+    windowTop = scrollY
 
     if (shouldShow !== show) {
       switchShow(shouldShow)
@@ -34,11 +36,11 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 duration-500 z-20'>
+  return (<div id='jump-to-top' className='right-5 fixed flex bottom-36 duration-500 z-20'>
       <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-        className={(show ? 'animate__fadeInRight' : 'animate__fadeOutRight') + ' shadow-card bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
+        className={(show ? '' : 'hidden') + ' animate__fadeInRight rounded-full glassmorphism p-2 cursor-pointer animate__animated animate__faster shadow-card'}>
         <div className='text-center'>
-          <div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
+          <div className='w-10 dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
             <FontAwesomeIcon icon={faArrowUp} />
           </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}

components/Progress.js

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import throttle from 'lodash.throttle'
+import React, { useEffect, useState } from 'react'
 
 /**
  * 顶部页面阅读进度条
@@ -24,8 +23,8 @@ const Progress = ({ targetRef }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [percent])
 
-  return (<div className='h-1.5 fixed left-0 top-0 w-full shadow-2xl z-40'>
-        <div className='h-1 bg-blue-500 fixed left-0 top-0 duration-200 rounded' style={{ width: `${percent}%` }}/>
+  return (<div className='h-1  fixed left-0 top-0 w-full shadow-2xl z-40 bg-blue-200'>
+        <div className='h-1 bg-blue-600 fixed left-0 top-0 duration-200 rounded' style={{ width: `${percent}%` }}/>
       </div>)
 }
 

components/StickyBar.js

@@ -8,7 +8,7 @@
 const StickyBar = ({ children }) => {
   if (!children) return <></>
   return (
-    <div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-xl'>
+    <div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-inner'>
       <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
       <div className='z-30 sticky left-0 flex'>
         <div className='pr-2 bg-white dark:bg-gray-800'/>

components/TocDrawer.js

@@ -10,7 +10,7 @@ import { useGlobal } from '@/lib/global'
  * @constructor
  */
 const TocDrawer = ({ post, cRef }) => {
-// 暴露给父组件 通过cRef.current.handleMenuClick 调用
+  // 暴露给父组件 通过cRef.current.handleMenuClick 调用
   useImperativeHandle(cRef, () => {
     return {
       handleSwitchVisible: () => switchVisible()

components/TocDrawerButton.js

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faListOl } from '@fortawesome/free-solid-svg-icons'
 
+let windowTop = 0
 /**
  * 点击召唤目录抽屉
  * 当屏幕下滑500像素后会出现该控件
@@ -12,13 +13,28 @@ import { faListOl } from '@fortawesome/free-solid-svg-icons'
  */
 const TocDrawerButton = (props) => {
   const { locale } = useGlobal()
+  const [show, switchShow] = useState(false)
+  const scrollListener = () => {
+    const scrollY = window.pageYOffset
+    const shouldShow = scrollY > 100 && scrollY < windowTop
+    console.log('目录', shouldShow, scrollY, windowTop)
+    windowTop = scrollY
+
+    if (shouldShow !== show) {
+      switchShow(shouldShow)
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  })
 
   return (
-    <div id='toc-drawer-button' className='right-1 fixed flex bottom-52 duration-500 z-40 hidden' onClick={props.onClick}>
-      <div className='transform hover:scale-105 duration-200 '>
-        <div className='animate__fadeInRight animate__animated bg-white dark:bg-gray-700 px-1 py-2.5 cursor-pointer shadow-card'>
+    <div id='toc-drawer-button' className='right-5 fixed bottom-56 duration-500 z-40' onClick={props.onClick}>
+      <div className='transform hover:scale-105 duration-200'>
+        <div className={(show ? 'animate__fadeInRight' : 'hidden') + ' px-2 py-4 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
           <div className='text-center dark:text-gray-100'>
-            <div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
+            <div className='w-10 text-md' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
           </div>
         </div>
       </div>

components/TopNav.js

@@ -14,7 +14,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 bg-white dark:bg-gray-700 opacity-90'>
+    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 glassmorphism'>
       <div className='text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-xl '>
         {/* 左侧LOGO */}
         <div className='flex ml-12'>
@@ -31,7 +31,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
         </div>
 
         {/* 右侧功能 */}
-        <div className='flex flex-nowrap space-x-1 ml-2 dark:text-gray-200'>
+        <div className='flex flex-nowrap space-x-1 ml-2 pt-1 dark:text-gray-200'>
           <DarkModeButton />
         </div>
       </div>