From 4e9b9a09cf7e15cd6de3418c81824dd4c679e8b2 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 10 Mar 2023 17:41:22 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/simple/LayoutBase.js            | 22 ++++++++++++++++------
 themes/simple/components/Cover.js      | 15 ---------------
 themes/simple/components/NavBarMenu.js |  2 +-
 3 files changed, 17 insertions(+), 22 deletions(-)
 delete mode 100644 themes/simple/components/Cover.js

diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js
index 7b68d638..514bb314 100644
--- a/themes/simple/LayoutBase.js
+++ b/themes/simple/LayoutBase.js
@@ -10,7 +10,8 @@ import BLOG from '@/blog.config'
 import { TopBar } from './components/TopBar'
 import CONFIG_SIMPLE from './config_simple'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
-import { Cover } from './components/Cover'
+import { useGlobal } from '@/lib/global'
+
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -19,6 +20,17 @@ import { Cover } from './components/Cover'
  */
 const LayoutBase = props => {
   const { children, meta } = props
+  const { onLoading } = useGlobal()
+
+  /**
+   * 路由跳转时的遮罩
+   */
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-96 flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
   if (isBrowser()) {
     loadExternalResource('/css/theme-simple.css', 'css')
   }
@@ -37,11 +49,11 @@ const LayoutBase = props => {
             {/* 主体 */}
             <div id='container-wrap' className="w-full relative">
 
-                {/* <Title {...props} /> */}
-
                 <div id='container-inner' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + '  max-w-9/10 w-full relative container mx-auto flex justify-center items-start pt-12'}>
 
-                    <div className='w-full flex-grow'>{children}</div>
+                    <div className='w-full flex-grow'>
+                        {onLoading ? LoadingCover : children}
+                    </div>
 
                     <SideBar {...props} />
 
@@ -55,8 +67,6 @@ const LayoutBase = props => {
 
             <Footer {...props} />
 
-            <Cover/>
-
         </div>
   )
 }
diff --git a/themes/simple/components/Cover.js b/themes/simple/components/Cover.js
deleted file mode 100644
index 15951145..00000000
--- a/themes/simple/components/Cover.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useGlobal } from '@/lib/global'
-
-/**
- * 一个全页面遮罩，当发生页面跳转时出现。
- * @param {*} props
- * @returns
- */
-export const Cover = (props) => {
-  const { onLoading } = useGlobal()
-  return <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-20' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300 bg-black fixed top-0 left-0 h-screen w-screen `}>
-        <div className='w-screen h-screen flex justify-center items-center'>
-            <i className="fa-solid fa-spinner text-2xl text-white animate-spin">  </i>
-        </div>
-    </div>
-}
diff --git a/themes/simple/components/NavBarMenu.js b/themes/simple/components/NavBarMenu.js
index ff604a19..afe47c61 100644
--- a/themes/simple/components/NavBarMenu.js
+++ b/themes/simple/components/NavBarMenu.js
@@ -23,7 +23,7 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
   }
   const router = useRouter()
   useEffect(() => {
-    router.events.on('routeChangeComplete', closeMenu)
+    router.events.on('routeChangeStart', closeMenu)
   })
 
   let links = [