wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: GlobalMap background when custom background is enable

Browse Source
This commit is contained in:
hamster1963 2024-12-25 15:28:25 +08:00
parent 74a2253e8e
commit edd2404538
2 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/GlobalMap.tsx
View File

@ -1,7 +1,7 @@
import useTooltip from "@/hooks/use-tooltip" import useTooltip from "@/hooks/use-tooltip"
import { geoJsonString } from "@/lib/geo-json-string" import { geoJsonString } from "@/lib/geo-json-string"
import { countryCoordinates } from "@/lib/geo-limit" import { countryCoordinates } from "@/lib/geo-limit"
import { formatNezhaInfo } from "@/lib/utils" import { cn, formatNezhaInfo } from "@/lib/utils"
import { NezhaServer } from "@/types/nezha-api" import { NezhaServer } from "@/types/nezha-api"
import { geoEquirectangular, geoPath } from "d3-geo" import { geoEquirectangular, geoPath } from "d3-geo"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
@ -13,6 +13,10 @@ export default function GlobalMap({ serverList, now }: { serverList: NezhaServer
const countryList: string[] = [] const countryList: string[] = []
const serverCounts: { [key: string]: number } = {} const serverCounts: { [key: string]: number } = {}
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
serverList.forEach((server) => { serverList.forEach((server) => {
if (server.country_code) { if (server.country_code) {
const countryCode = server.country_code.toUpperCase() const countryCode = server.country_code.toUpperCase()
@ -30,7 +34,11 @@ export default function GlobalMap({ serverList, now }: { serverList: NezhaServer
const filteredFeatures = geoJson.features.filter((feature: { properties: { iso_a3_eh: string } }) => feature.properties.iso_a3_eh !== "") const filteredFeatures = geoJson.features.filter((feature: { properties: { iso_a3_eh: string } }) => feature.properties.iso_a3_eh !== "")
return ( return (
<section className="flex flex-col gap-4 mt-8"> <section
className={cn("flex flex-col gap-4 mt-8", {
"bg-card/70 rounded-lg p-4": customBackgroundImage,
})}
>
<p className="text-sm font-medium opacity-40"> <p className="text-sm font-medium opacity-40">
{t("map.Distributions")} {countryList.length} {t("map.Regions")} {t("map.Distributions")} {countryList.length} {t("map.Regions")}
</p> </p>

55
src/main.tsx
View File

@ -1,6 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools" import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import React from "react"
import ReactDOM from "react-dom/client" import ReactDOM from "react-dom/client"
import { Toaster } from "sonner" import { Toaster } from "sonner"
@ -17,32 +16,30 @@ import "./index.css"
const queryClient = new QueryClient() const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById("root")!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode> <MotionProvider>
<MotionProvider> <ThemeProvider storageKey="vite-ui-theme">
<ThemeProvider storageKey="vite-ui-theme"> <QueryClientProvider client={queryClient}>
<QueryClientProvider client={queryClient}> <WebSocketProvider url="/api/v1/ws/server">
<WebSocketProvider url="/api/v1/ws/server"> <StatusProvider>
<StatusProvider> <SortProvider>
<SortProvider> <TooltipProvider>
<TooltipProvider> <App />
<App /> <Toaster
<Toaster duration={1000}
duration={1000} toastOptions={{
toastOptions={{ classNames: {
classNames: { default: "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
default: "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none", },
}, }}
}} position="top-center"
position="top-center" className={"flex items-center justify-center"}
className={"flex items-center justify-center"} />
/> <ReactQueryDevtools />
<ReactQueryDevtools /> </TooltipProvider>
</TooltipProvider> </SortProvider>
</SortProvider> </StatusProvider>
</StatusProvider> </WebSocketProvider>
</WebSocketProvider> </QueryClientProvider>
</QueryClientProvider> </ThemeProvider>
</ThemeProvider> </MotionProvider>,
</MotionProvider>
</React.StrictMode>,
) )