细节优化

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>
   )
 }

themes/simple/components/Cover.js

@@ -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>
-}

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 = [