From 9cb9aed1dcdd6c684150321ff5145b38d533b7f0 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 10 Mar 2023 17:15:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=81=AE=E7=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/simple/LayoutBase.js       |  3 +++
 themes/simple/components/Cover.js | 15 +++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 themes/simple/components/Cover.js

diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js
index 3d0aa59c..7b68d638 100644
--- a/themes/simple/LayoutBase.js
+++ b/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>
   )
 }
diff --git a/themes/simple/components/Cover.js b/themes/simple/components/Cover.js
new file mode 100644
index 00000000..2fb4bd8a
--- /dev/null
+++ b/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>
+}