遮罩

themes/simple/LayoutBase.js

@@ -10,6 +10,7 @@ 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'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -54,6 +55,8 @@ const LayoutBase = props => {
 
             <Footer {...props} />
 
+            <Cover/>
+
         </div>
   )
 }

themes/simple/components/Cover.js

@@ -0,0 +1,15 @@
+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-50 ' : '-z-10 opacity-0 pointer-events-none'} transition-all duration-200 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>
+}