From 6cbe623e97cbea4fb4b87a0406ac0d4a74c5b13d Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 5 Nov 2021 17:21:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E6=AE=B5=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=EF=BC=8C=E5=8A=A0=E5=85=A5=E6=B7=B1=E5=A4=9C=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostListEmpty.js  | 16 ++++------------
 components/BlogPostListScroll.js |  4 ++--
 components/DarkModeButton.js     |  2 +-
 components/JumpToTopButton.js    | 13 ++++++-------
 components/SideBar.js            |  3 ++-
 components/TagsBar.js            |  2 +-
 components/TocDrawerButton.js    |  8 ++++----
 components/TopNav.js             |  2 +-
 layouts/BaseLayout.js            | 31 ++++++++++++++++++++++++++-----
 9 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/components/BlogPostListEmpty.js b/components/BlogPostListEmpty.js
index 0cca9919..37982cd9 100644
--- a/components/BlogPostListEmpty.js
+++ b/components/BlogPostListEmpty.js
@@ -6,18 +6,10 @@ import { useEffect } from 'react'
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListEmpty = () => {
-  const router = useRouter()
-  useEffect(() => {
-    setTimeout(() => {
-      router.push('/').then(() => {
-        console.log('空博客列表跳回首页')
-      })
-    }, 3000)
-  })
-  return <div className='w-full h-full min-h-screen flex justify-center mx-auto'>
-      <div className='align-middle text-center my-auto'>
-        <p className='text-gray-500 dark:text-gray-300'>没有文章了，3秒后返回首页</p>
+const BlogPostListEmpty = ({ currentSearch }) => {
+  return <div className='min-h-screen flex justify-center mx-auto'>
+    <div className='align-middle text-center my-auto'>
+        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
       </div>
   </div>
 }
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index e1092954..5d8d7a29 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -49,9 +49,9 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   const targetRef = useRef(null)
 
   if (!postsToShow || postsToShow.length === 0) {
-    return <BlogPostListEmpty />
+    return <BlogPostListEmpty currentSearch={currentSearch}/>
   } else {
-    return <div id='post-list-wrapper' className='mt-28 md:mt-32 mx-2 md:mx-20' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-20 mx-2 md:mx-20' ref={targetRef}>
 
       {currentCategory && (
         <div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 8f7325c7..7450ac3d 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -9,7 +9,7 @@ const DarkModeButton = () => {
     saveTheme(newTheme)
     changeTheme(newTheme)
   }
-  return <div className='z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
+  return <div className='z-10 p-1 duration-200 h-12 text-xl cursor-pointer dark:text-gray-300 '>
     <i id='darkModeButton' className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (userTheme === 'dark' ? 'fa-sun-o' : 'fa-moon-o')}
        onClick={handleChangeDarkMode} />
   </div>
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 73dd706a..71dea964 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import throttle from 'lodash.throttle'
+import React, { useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 
 /**
@@ -33,15 +32,15 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
   }, [show])
 
   return (
-    <div id='jump-to-top' className='right-0 fixed flex bottom-24 mr-2.5 py-1 duration-500 z-20 opacity-75'>
-      <div className='transform hover:scale-105 duration-200 '>
+    <div id='jump-to-top' className='right-0 fixed flex bottom-24 mr-4 duration-500 z-20'>
+      <div >
         <div
           onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
           style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}
-          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' bg-gray-700 px-2.5 py-2 cursor-pointer animate__animated animate__faster shadow-2xl'}>
+          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
           <div className='text-center'>
-            <div className='w-10 text-xl text-gray-100' title={locale.POST.TOP} ><i className='fa fa-arrow-up'/> </div>
-            {showPercent && (<div className='w-10 text-xs text-gray-100 dark:text-gray-200 text-center'>&nbsp;{percent}%</div>)}
+            <div className='w-10 text-xl text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} ><i className='fa fa-arrow-up'/> </div>
+            {showPercent && (<div className='w-10 text-xs text-gray-100 dark:text-gray-200'>{percent} </div>)}
           </div>
         </div>
       </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index 9c8b43f9..7f3ba827 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -6,6 +6,7 @@ import LatestPosts from '@/components/LatestPosts'
 import PostsCategories from '@/components/PostsCategories'
 import Toc from '@/components/Toc'
 import SearchInput from '@/components/SearchInput'
+import DarkModeButton from '@/components/DarkModeButton'
 
 /**
  * 侧边栏
@@ -28,7 +29,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
     }).slice(0, 5)
   }
 
-  return <aside id='sidebar' className='bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
+  return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <section>
       <InfoCard />
     </section>
diff --git a/components/TagsBar.js b/components/TagsBar.js
index f81f4cf4..dd196ffd 100644
--- a/components/TagsBar.js
+++ b/components/TagsBar.js
@@ -10,7 +10,7 @@ import Link from 'next/link'
 const TagsBar = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
-    <div id='tags-bar' className='fixed block xl:hidden top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+    <div id='tags-bar' className='fixed block lg:hidden top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
       <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
       <div className='z-30 sticky left-0 flex'>
         <div className='px-2 bg-white dark:bg-gray-800'/>
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index f2a81003..2ab87a41 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -10,13 +10,13 @@ import React from 'react'
  */
 const TocDrawerButton = (props) => {
   return (
-    <div id='jump-to-top' className='right-0 fixed flex bottom-40 mr-2.5 py-1 duration-500 z-20 opacity-70' onClick={props.onClick}>
+    <div id='jump-to-top' className='right-0 fixed flex bottom-40 mr-4 duration-500 z-30' onClick={props.onClick}>
       <div className='transform hover:scale-105 duration-200 '>
         <div style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}
-          className={'animate__fadeInUp bg-gray-700 px-2.5 py-2 cursor-pointer animate__animated animate__faster shadow-2xl'}>
+          className={'animate__fadeInUp bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
           <div className='text-center text-gray-100'>
-            <div className='w-10 text-xl ' title='目录' ><i className='fa fa-book'/> </div>
-            <div className='text-sm'>目录</div>
+            <div className='w-10 text-xl' title='目录' ><i className='fa fa-book'/> </div>
+            <div className='text-xs'>目录</div>
           </div>
         </div>
       </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index f8c875a5..03cc106e 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -28,7 +28,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
         </div>
 
         {/* 右侧功能 */}
-        <div className='flex flex-nowrap space-x-1'>
+        <div className='flex flex-nowrap space-x-1 ml-2'>
           <DarkModeButton />
         </div>
       </div>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index eb0fc361..4da6e219 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -8,7 +8,24 @@ import Footer from '@/components/Footer'
 import SideBar from '@/components/SideBar'
 import JumpToTopButton from '@/components/JumpToTopButton'
 import { useGlobal } from '@/lib/global'
+import DarkModeButton from '@/components/DarkModeButton'
 
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+ * @param children
+ * @param layout
+ * @param fullWidth
+ * @param tags
+ * @param meta
+ * @param post
+ * @param totalPosts
+ * @param currentSearch
+ * @param currentCategory
+ * @param categories
+ * @param customMeta
+ * @returns {JSX.Element}
+ * @constructor
+ */
 const BaseLayout = ({
   children,
   layout,
@@ -49,6 +66,7 @@ const BaseLayout = ({
     <div id='wrapper' className={[BLOG.font, theme].join(' ')}>
       <CommonHead meta={meta} />
 
+      {/* 顶部导航栏 */}
       <div className='block lg:hidden'>
         <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories}
                 currentCategory={currentCategory} />
@@ -56,13 +74,16 @@ const BaseLayout = ({
 
       {/* Middle Wrapper */}
       <main className='flex dark:bg-black'>
-         <div className='hidden lg:block z-10 pt-10'>
+         <div className='hidden lg:block z-10'>
            <SideBar tags={tags} post={post} posts={totalPosts} categories={categories} currentCategory={currentCategory} />
          </div>
         <div className='flex flex-grow' ref={targetRef}>
           {children}
         </div>
         <JumpToTopButton targetRef={targetRef} showPercent={true} />
+        <div className='fixed right-2 top-2 p-0.5 shadow-2xl bg-white border dark:border-gray-500 dark:bg-gray-700 rounded-full'>
+          <DarkModeButton/>
+        </div>
       </main>
 
       <Footer />
@@ -77,10 +98,10 @@ const hiddenNav = () => {
   if (document) {
     const nav = document.querySelector('#sticky-nav')
     // const sidebar = document.querySelector('#sidebar')
-    // const tagsBar = document.querySelector('#tags-bar')
+    const tagsBar = document.querySelector('#tags-bar')
     // const rightToc = document.querySelector('#right-toc')
     nav && nav.classList.replace('top-0', '-top-16')
-    // tagsBar && tagsBar.classList.replace('top-16', 'top-0')
+    tagsBar && tagsBar.classList.replace('top-16', 'top-0')
     // sidebar && sidebar.classList.replace('top-20', 'top-2')
     // rightToc && rightToc.classList.replace('top-16', 'top-0')
   }
@@ -93,10 +114,10 @@ const showNav = () => {
   if (document) {
     const nav = document.querySelector('#sticky-nav')
     // const sidebar = document.querySelector('#sidebar')
-    // const tagsBar = document.querySelector('#tags-bar')
+    const tagsBar = document.querySelector('#tags-bar')
     // const rightToc = document.querySelector('#right-toc')
     nav && nav.classList.replace('-top-16', 'top-0')
-    // tagsBar && tagsBar.classList.replace('top-0', 'top-16')
+    tagsBar && tagsBar.classList.replace('top-0', 'top-16')
     // sidebar && sidebar.classList.replace('top-2', 'top-20')
     // rightToc && rightToc.classList.replace('top-0', 'top-16')
   }