From de4d7cf896b1e7247e2aa50c374bf1482bd2f27f Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Thu, 31 Oct 2024 21:22:10 +0800
Subject: [PATCH] =?UTF-8?q?starter=20=E9=81=AE=E7=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/LoadingCover.js                | 62 +++++++++++++----------
 themes/starter/components/Testimonials.js |  2 +-
 themes/starter/index.js                   |  2 +
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/components/LoadingCover.js b/components/LoadingCover.js
index b53fa36c..9e24e255 100644
--- a/components/LoadingCover.js
+++ b/components/LoadingCover.js
@@ -13,7 +13,7 @@ export default function LoadingCover() {
     if (onLoading) {
       setIsVisible(true)
     } else {
-      const timeout = setTimeout(() => setIsVisible(false), 1500) // 等待淡出动画结束
+      const timeout = setTimeout(() => setIsVisible(false), 1800) // 等待淡出动画结束
       return () => clearTimeout(timeout)
     }
   }, [onLoading])
@@ -36,33 +36,39 @@ export default function LoadingCover() {
       <div className='mx-auto'>
         <style global>
           {`
-      .loader {
-        width: 20px;
-        aspect-ratio: 1;
-        border-radius: 50%;
-        background: #000;
-        box-shadow: 0 0 0 0 #0004;
-        animation: l2 1.5s infinite linear;
-        position: relative;
-      }
-      .loader:before,
-      .loader:after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        box-shadow: 0 0 0 0 #0004;
-        animation: inherit;
-        animation-delay: -0.5s;
-      }
-      .loader:after {
-        animation-delay: -1s;
-      }
-      @keyframes l2 {
-        100% {
-          box-shadow: 0 0 0 40px #0000;
-        }
-      }`}
+          .loader {
+            width: 20px;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: #000;
+            box-shadow: 0 0 0 0 #0004;
+            animation: l2 1.5s infinite linear;
+            position: relative;
+          }
+          .loader:before,
+          .loader:after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            box-shadow: 0 0 0 0 #0004;
+            animation: inherit;
+            animation-delay: -0.5s;
+          }
+          .loader:after {
+            animation-delay: -1s;
+          }
+            /* 深色模式下的样式 */
+          .dark .loader {
+            background: #fff; /* 白色或灰色 */
+            box-shadow: 0 0 0 0 #fff4; /* 使用白色阴影 */
+          }
+          @keyframes l2 {
+            100% {
+              box-shadow: 0 0 0 40px #0000;
+            }
+          }
+      `}
         </style>
         <div className='loader'></div>
       </div>
diff --git a/themes/starter/components/Testimonials.js b/themes/starter/components/Testimonials.js
index f1b6f3b3..faf87513 100644
--- a/themes/starter/components/Testimonials.js
+++ b/themes/starter/components/Testimonials.js
@@ -87,7 +87,7 @@ export const Testimonials = () => {
             <div className='swiper testimonial-carousel common-carousel p-5'>
               <div className='swiper-wrapper'>
                 {/* 用户评价卡牌 */}
-                {STARTER_TESTIMONIALS_ITEMS.map((item, index) => {
+                {STARTER_TESTIMONIALS_ITEMS?.map((item, index) => {
                   return (
                     <div key={index} className='swiper-slide'>
                       <div className='rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]'>
diff --git a/themes/starter/index.js b/themes/starter/index.js
index 922c05fe..49b99bac 100644
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -25,6 +25,7 @@ import CONFIG from './config'
 import { Style } from './style'
 // import { MadeWithButton } from './components/MadeWithButton'
 import Comment from '@/components/Comment'
+import LoadingCover from '@/components/LoadingCover'
 import ShareBar from '@/components/ShareBar'
 import { useGlobal } from '@/lib/global'
 import { loadWowJS } from '@/lib/plugins/wow'
@@ -84,6 +85,7 @@ const LayoutIndex = props => {
   const posts = props?.allNavPages ? props.allNavPages.slice(0, count) : []
   return (
     <>
+      <LoadingCover />
       {/* 英雄区 */}
       {siteConfig('STARTER_HERO_ENABLE') && <Hero />}
       {/* 合作伙伴 */}