fix: init background

This commit is contained in:
hamster1963 2025-01-20 00:45:35 +08:00
parent 38be1e9a10
commit 561513e6e1
2 changed files with 33 additions and 15 deletions

View File

@ -28,11 +28,6 @@ const App: React.FC = () => {
const [isCustomCodeInjected, setIsCustomCodeInjected] = useState(false) const [isCustomCodeInjected, setIsCustomCodeInjected] = useState(false)
const { backgroundImage: customBackgroundImage } = useBackground() const { backgroundImage: customBackgroundImage } = useBackground()
// 检测是否强制指定了主题颜色
const forceTheme =
// @ts-expect-error ForceTheme is a global variable
(window.ForceTheme as string) !== "" ? window.ForceTheme : undefined
useEffect(() => { useEffect(() => {
if (settingData?.data?.config?.custom_code) { if (settingData?.data?.config?.custom_code) {
InjectContext(settingData?.data?.config?.custom_code) InjectContext(settingData?.data?.config?.custom_code)
@ -40,6 +35,11 @@ const App: React.FC = () => {
} }
}, [settingData?.data?.config?.custom_code]) }, [settingData?.data?.config?.custom_code])
// 检测是否强制指定了主题颜色
const forceTheme =
// @ts-expect-error ForceTheme is a global variable
(window.ForceTheme as string) !== "" ? window.ForceTheme : undefined
useEffect(() => { useEffect(() => {
if (forceTheme === "dark" || forceTheme === "light") { if (forceTheme === "dark" || forceTheme === "light") {
setTheme(forceTheme) setTheme(forceTheme)

View File

@ -9,23 +9,41 @@ declare global {
const BACKGROUND_CHANGE_EVENT = "backgroundChange" const BACKGROUND_CHANGE_EVENT = "backgroundChange"
export function useBackground() { export function useBackground() {
const [backgroundImage, setBackgroundImage] = useState<string | undefined>(() => { const [backgroundImage, setBackgroundImage] = useState<string | undefined>(undefined)
// 首先检查 sessionStorage 中是否有保存的背景图
const savedImage = sessionStorage.getItem("savedBackgroundImage")
// 如果 window.CustomBackgroundImage 为空但有保存的背景图,则恢复它
if (!window.CustomBackgroundImage && savedImage) {
window.CustomBackgroundImage = savedImage
}
return window.CustomBackgroundImage || undefined
})
useEffect(() => { useEffect(() => {
// 监听背景变化
const handleBackgroundChange = () => { const handleBackgroundChange = () => {
setBackgroundImage(window.CustomBackgroundImage || undefined) 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) 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) => { const updateBackground = (newBackground: string | undefined) => {