feat: custom bg

- window.CustomBackgroundImage
This commit is contained in:
hamster1963 2024-12-15 13:35:43 +08:00
parent 4804323380
commit ace8e7d691

View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query" import { useQuery } from "@tanstack/react-query"
import React, { useCallback, useEffect } from "react" import React, { useCallback } from "react"
import { Route, BrowserRouter as Router, Routes } from "react-router-dom" import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
import Footer from "./components/Footer" import Footer from "./components/Footer"
import Header from "./components/Header" import Header from "./components/Header"
import { fetchSetting } from "./lib/nezha-api" import { fetchSetting } from "./lib/nezha-api"
import { cn } from "./lib/utils"
import ErrorPage from "./pages/ErrorPage" import ErrorPage from "./pages/ErrorPage"
import NotFound from "./pages/NotFound" import NotFound from "./pages/NotFound"
import Server from "./pages/Server" import Server from "./pages/Server"
@ -52,12 +53,6 @@ const App: React.FC = () => {
}) })
}, []) }, [])
useEffect(() => {
if (settingData?.data?.custom_code) {
InjectContext(settingData?.data?.custom_code)
}
}, [settingData?.data?.custom_code])
if (error) { if (error) {
return <ErrorPage code={500} message={error.message} /> return <ErrorPage code={500} message={error.message} />
} }
@ -66,10 +61,28 @@ const App: React.FC = () => {
return null return null
} }
if (settingData?.data?.custom_code) {
InjectContext(settingData?.data?.custom_code)
}
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
return ( return (
<Router basename={import.meta.env.BASE_URL}> <Router basename={import.meta.env.BASE_URL}>
<div className="flex min-h-screen w-full flex-col"> <div
<main className="flex min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 bg-background p-4 md:p-10 md:pt-8"> className={cn("flex min-h-screen w-full flex-col", {
" bg-background": !customBackgroundImage,
})}
style={{
backgroundImage: customBackgroundImage ? "url(" + customBackgroundImage + ")" : undefined,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
}}
>
<main className="flex min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
<Header /> <Header />
<Routes> <Routes>
<Route path="/" element={<Server />} /> <Route path="/" element={<Server />} />