From 561513e6e158df71f19dab2ccbb2a53f5fb68589 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 20 Jan 2025 00:45:35 +0800
Subject: [PATCH] fix: init background

---
 src/App.tsx                 | 10 +++++-----
 src/hooks/use-background.ts | 38 +++++++++++++++++++++++++++----------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 65914ed..4866b31 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,11 +28,6 @@ const App: React.FC = () => {
   const [isCustomCodeInjected, setIsCustomCodeInjected] = useState(false)
   const { backgroundImage: customBackgroundImage } = useBackground()
 
-  // 检测是否强制指定了主题颜色
-  const forceTheme =
-    // @ts-expect-error ForceTheme is a global variable
-    (window.ForceTheme as string) !== "" ? window.ForceTheme : undefined
-
   useEffect(() => {
     if (settingData?.data?.config?.custom_code) {
       InjectContext(settingData?.data?.config?.custom_code)
@@ -40,6 +35,11 @@ const App: React.FC = () => {
     }
   }, [settingData?.data?.config?.custom_code])
 
+  // 检测是否强制指定了主题颜色
+  const forceTheme =
+    // @ts-expect-error ForceTheme is a global variable
+    (window.ForceTheme as string) !== "" ? window.ForceTheme : undefined
+
   useEffect(() => {
     if (forceTheme === "dark" || forceTheme === "light") {
       setTheme(forceTheme)
diff --git a/src/hooks/use-background.ts b/src/hooks/use-background.ts
index 487c2bb..1f70651 100644
--- a/src/hooks/use-background.ts
+++ b/src/hooks/use-background.ts
@@ -9,23 +9,41 @@ declare global {
 const BACKGROUND_CHANGE_EVENT = "backgroundChange"
 
 export function useBackground() {
-  const [backgroundImage, setBackgroundImage] = useState<string | undefined>(() => {
-    // 首先检查 sessionStorage 中是否有保存的背景图
-    const savedImage = sessionStorage.getItem("savedBackgroundImage")
-    // 如果 window.CustomBackgroundImage 为空但有保存的背景图，则恢复它
-    if (!window.CustomBackgroundImage && savedImage) {
-      window.CustomBackgroundImage = savedImage
-    }
-    return window.CustomBackgroundImage || undefined
-  })
+  const [backgroundImage, setBackgroundImage] = useState<string | undefined>(undefined)
 
   useEffect(() => {
+    // 监听背景变化
     const handleBackgroundChange = () => {
       setBackgroundImage(window.CustomBackgroundImage || undefined)
     }
 
+    // 初始化检查
+    const checkInitialBackground = () => {
+      if (window.CustomBackgroundImage) {
+        setBackgroundImage(window.CustomBackgroundImage)
+      } else {
+        const savedImage = sessionStorage.getItem("savedBackgroundImage")
+        if (savedImage) {
+          window.CustomBackgroundImage = savedImage
+          setBackgroundImage(savedImage)
+        }
+      }
+    }
+
+    // 设置一个轮询来检查初始背景
+    const intervalId = setInterval(() => {
+      if (window.CustomBackgroundImage || sessionStorage.getItem("savedBackgroundImage")) {
+        checkInitialBackground()
+        clearInterval(intervalId)
+      }
+    }, 100)
+
     window.addEventListener(BACKGROUND_CHANGE_EVENT, handleBackgroundChange)
-    return () => window.removeEventListener(BACKGROUND_CHANGE_EVENT, handleBackgroundChange)
+
+    return () => {
+      window.removeEventListener(BACKGROUND_CHANGE_EVENT, handleBackgroundChange)
+      clearInterval(intervalId)
+    }
   }, [])
 
   const updateBackground = (newBackground: string | undefined) => {