mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 17:41:56 +08:00
fix: init background
This commit is contained in:
parent
38be1e9a10
commit
561513e6e1
10
src/App.tsx
10
src/App.tsx
@ -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)
|
||||||
|
@ -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) => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user