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>

5
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,7 +16,6 @@ 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}>
@ -43,6 +41,5 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
</WebSocketProvider> </WebSocketProvider>
</QueryClientProvider> </QueryClientProvider>
</ThemeProvider> </ThemeProvider>
</MotionProvider> </MotionProvider>,
</React.StrictMode>,
) )