.env.example

@@ -12,6 +12,6 @@ NEXT_PUBLIC_FixedTopServerName=false
 NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
 NEXT_PUBLIC_CustomTitle=NezhaDash
 NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.
-NEXT_PUBLIC_Links='[{"link":"https://github.com/hamster1963/nezha-dash","name":"GitHub"},{"link":"https://buycoffee.top/coffee","name":"Buycoffee☕️"}]'
+NEXT_PUBLIC_Links="[{"link":"https://github.com/hamster1963/nezha-dash","name":"GitHub"},{"link":"https://buycoffee.top/coffee","name":"Buycoffee☕️"}]"
 NEXT_PUBLIC_DisableIndex=false
 NEXT_PUBLIC_ShowTagCount=false

app/(main)/ClientComponents/Global.tsx

@@ -1,45 +1,141 @@
+import { countryCodeMapping, reverseCountryCodeMapping } from "@/lib/geo";
+import { countryCoordinates } from "@/lib/geo-limit";
 import { GetNezhaData } from "@/lib/serverFetch";
+import * as turf from "@turf/turf";
+import DottedMap from "dotted-map/without-countries";
 
 import { geoJsonString } from "../../../lib/geo-json-string";
+import { mapJsonString } from "../../../lib/map-string";
 import GlobalInfo from "./GlobalInfo";
-import { InteractiveMap } from "./InteractiveMap";
+
+interface GlobalProps {
+  countries?: string[];
+}
 
 export default async function ServerGlobal() {
   const nezhaServerList = await GetNezhaData();
 
   const countrytList: string[] = [];
-  const serverCounts: { [key: string]: number } = {};
-
   nezhaServerList.result.forEach((server) => {
     if (server.host.CountryCode) {
-      const countryCode = server.host.CountryCode.toUpperCase();
+      server.host.CountryCode = server.host.CountryCode.toUpperCase();
-      if (!countrytList.includes(countryCode)) {
+      if (!countrytList.includes(server.host.CountryCode)) {
-        countrytList.push(countryCode);
+        countrytList.push(server.host.CountryCode);
       }
-      serverCounts[countryCode] = (serverCounts[countryCode] || 0) + 1;
     }
   });
 
-  const width = 900;
+  return <Global countries={countrytList} />;
-  const height = 500;
+}
+
+export async function Global({ countries = [] }: GlobalProps) {
+  const map = new DottedMap({ map: JSON.parse(mapJsonString) });
+
+  const countries_alpha3 = countries
+    .map((code) => countryCodeMapping[code])
+    .filter((code) => code !== undefined);
 
   const geoJson = JSON.parse(geoJsonString);
-  const filteredFeatures = geoJson.features.filter(
+
-    (feature: any) => feature.properties.iso_a3 !== "",
+  countries_alpha3.forEach((countryCode) => {
-  );
+    const feature = geoJson.features.find(
+      (f: any) => f.properties.iso_a3 === countryCode,
+    );
+
+    if (feature) {
+      if (countryCode === "RUS") {
+        // 获取俄罗斯的多个边界
+        const bboxList = feature.geometry.coordinates.map((polygon: any) =>
+          turf.bbox({ type: "Polygon", coordinates: polygon }),
+        );
+
+        const spacing = 20; // 单位为千米
+        const options = { units: "kilometers" };
+
+        bboxList.forEach((bbox: any) => {
+          // @ts-expect-error ignore
+          const pointGrid = turf.pointGrid(bbox, spacing, options);
+
+          // 过滤出位于当前多边形内部的点
+          const pointsWithin = turf.pointsWithinPolygon(pointGrid, feature);
+
+          if (pointsWithin.features.length === 0) {
+            const centroid = turf.centroid(feature);
+            const [lng, lat] = centroid.geometry.coordinates;
+            map.addPin({
+              lat,
+              lng,
+              svgOptions: { color: "#FF4500", radius: 0.3 },
+            });
+          } else {
+            pointsWithin.features.forEach((point: any) => {
+              const [lng, lat] = point.geometry.coordinates;
+              map.addPin({
+                lat,
+                lng,
+                svgOptions: { color: "#FF4500", radius: 0.3 },
+              });
+            });
+          }
+        });
+      }
+      // 获取国家的边界框
+      const bbox = turf.bbox(feature);
+
+      const spacing = 40; // 单位为千米，值越小点越密集
+      const options = { units: "kilometers" };
+      // @ts-expect-error ignore
+      const pointGrid = turf.pointGrid(bbox, spacing, options);
+
+      // 过滤出位于国家多边形内部的点
+      const pointsWithin = turf.pointsWithinPolygon(pointGrid, feature);
+
+      // 如果没有点在多边形内部，则使用国家的中心点
+      if (pointsWithin.features.length === 0) {
+        const centroid = turf.centroid(feature);
+        const [lng, lat] = centroid.geometry.coordinates;
+        map.addPin({
+          lat,
+          lng,
+          svgOptions: { color: "#FF4500", radius: 0.3 },
+        });
+      } else {
+        pointsWithin.features.forEach((point: any) => {
+          const [lng, lat] = point.geometry.coordinates;
+          map.addPin({
+            lat,
+            lng,
+            svgOptions: { color: "#FF4500", radius: 0.3 },
+          });
+        });
+      }
+    } else {
+      // 如果找不到feature，使用countryCoordinates中的坐标
+      const alpha2Code = reverseCountryCodeMapping[countryCode];
+      if (alpha2Code && countryCoordinates[alpha2Code]) {
+        const coordinates = countryCoordinates[alpha2Code];
+        map.addPin({
+          lat: coordinates.lat,
+          lng: coordinates.lng,
+          svgOptions: { color: "#FF4500", radius: 0.3 },
+        });
+      }
+    }
+  });
+
+  const finalMap = map.getSVG({
+    radius: 0.35,
+    color: "#D1D5DA",
+    shape: "circle",
+  });
 
   return (
     <section className="flex flex-col gap-4 mt-[3.2px]">
-      <GlobalInfo countries={countrytList} />
+      <GlobalInfo countries={countries} />
-      <div className="w-full overflow-x-auto">
+      <img
-        <InteractiveMap
+        src={`data:image/svg+xml;utf8,${encodeURIComponent(finalMap)}`}
-          countries={countrytList}
+        alt="World Map with Highlighted Countries"
-          serverCounts={serverCounts}
+      />
-          width={width}
-          height={height}
-          filteredFeatures={filteredFeatures}
-        />
-      </div>
     </section>
   );
 }

app/(main)/ClientComponents/InteractiveMap.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import { countryCodeMapping } from "@/lib/geo";
-import { geoEquirectangular, geoPath } from "d3-geo";
-import { AnimatePresence, m } from "framer-motion";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-
-interface InteractiveMapProps {
-  countries: string[];
-  serverCounts: { [key: string]: number };
-  width: number;
-  height: number;
-  filteredFeatures: any[];
-}
-
-export function InteractiveMap({
-  countries,
-  serverCounts,
-  width,
-  height,
-  filteredFeatures,
-}: InteractiveMapProps) {
-  const t = useTranslations("Global");
-
-  const [tooltipData, setTooltipData] = useState<{
-    centroid: [number, number];
-    country: string;
-    count: number;
-  } | null>(null);
-
-  const countries_alpha3 = countries
-    .map((code) => countryCodeMapping[code])
-    .filter((code) => code !== undefined);
-
-  const projection = geoEquirectangular()
-    .scale(140)
-    .translate([width / 2, height / 2])
-    .rotate([-12, 0, 0]);
-
-  const path = geoPath().projection(projection);
-
-  return (
-    <div className="relative w-full aspect-[2/1]">
-      <svg
-        width={width}
-        height={height}
-        viewBox={`0 0 ${width} ${height}`}
-        xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-auto"
-      >
-        <defs>
-          <pattern id="dots" width="2" height="2" patternUnits="userSpaceOnUse">
-            <circle cx="1" cy="1" r="0.5" fill="currentColor" />
-          </pattern>
-        </defs>
-        <g>
-          {filteredFeatures.map((feature, index) => {
-            const isHighlighted = countries_alpha3.includes(
-              feature.properties.iso_a3,
-            );
-            const countryCode = Object.entries(countryCodeMapping).find(
-              ([, alpha3]) => alpha3 === feature.properties.iso_a3,
-            )?.[0];
-            const serverCount = countryCode
-              ? serverCounts[countryCode] || 0
-              : 0;
-
-            return (
-              <path
-                key={index}
-                d={path(feature) || ""}
-                className={
-                  isHighlighted
-                    ? "fill-orange-500 hover:fill-orange-300 stroke-orange-500 dark:stroke-amber-900  dark:fill-amber-900 dark:hover:fill-amber-700 transition-all cursor-pointer"
-                    : "fill-neutral-200/50 dark:fill-neutral-800 stroke-neutral-300/40 dark:stroke-neutral-700 stroke-[0.5]"
-                }
-                onMouseEnter={() => {
-                  if (isHighlighted && path.centroid(feature)) {
-                    setTooltipData({
-                      centroid: path.centroid(feature),
-                      country: feature.properties.name,
-                      count: serverCount,
-                    });
-                  }
-                }}
-                onMouseLeave={() => setTooltipData(null)}
-              />
-            );
-          })}
-        </g>
-      </svg>
-      <AnimatePresence mode="wait">
-        {tooltipData && (
-          <m.div
-            initial={{ opacity: 0, filter: "blur(10px)" }}
-            animate={{ opacity: 1, filter: "blur(0px)" }}
-            className="absolute hidden lg:block pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700"
-            key={tooltipData.country}
-            style={{
-              left: tooltipData.centroid[0],
-              top: tooltipData.centroid[1],
-              transform: "translate(-50%, -50%)",
-            }}
-          >
-            <p className="font-medium">{tooltipData.country}</p>
-            <p className="text-neutral-600 dark:text-neutral-400">
-              {tooltipData.count} {t("Servers")}
-            </p>
-          </m.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

app/(main)/ClientComponents/NetworkChart.tsx

@@ -182,7 +182,7 @@ export const NetworkChart = React.memo(function NetworkChart({
         </div>
         <div className="flex flex-wrap">{chartButtons}</div>
       </CardHeader>
-      <CardContent className="pr-2 pl-0 py-4 sm:pt-6 sm:pb-6 sm:pr-6 sm:pl-2">
+      <CardContent className="px-2 sm:p-6">
         <ChartContainer
           config={chartConfig}
           className="aspect-auto h-[250px] w-full"
@@ -209,7 +209,8 @@ export const NetworkChart = React.memo(function NetworkChart({
             <YAxis
               tickLine={false}
               axisLine={false}
-              tickMargin={15}
+              mirror={true}
+              tickMargin={-15}
               minTickGap={20}
               tickFormatter={(value) => `${value}ms`}
             />

app/(main)/header.tsx

@@ -7,11 +7,13 @@ import { Skeleton } from "@/components/ui/skeleton";
 import getEnv from "@/lib/env-entry";
 import { DateTime } from "luxon";
 import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import React, { useEffect, useRef, useState } from "react";
 
 function Header() {
   const t = useTranslations("Header");
+  const { resolvedTheme } = useTheme();
   const customLogo = getEnv("NEXT_PUBLIC_CustomLogo");
   const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
   const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
@@ -33,15 +35,14 @@ function Header() {
               width={40}
               height={40}
               alt="apple-touch-icon"
-              src={customLogo ? customLogo : "/apple-touch-icon.png"}
+              src={
-              className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0! dark:hidden"
+                customLogo
-            />
+                  ? customLogo
-            <img
+                  : resolvedTheme === "light"
-              width={40}
+                    ? "/apple-touch-icon.png"
-              height={40}
+                    : "/apple-touch-icon-dark.png"
-              alt="apple-touch-icon"
+              }
-              src={customLogo ? customLogo : "/apple-touch-icon-dark.png"}
+              className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0!"
-              className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0! hidden dark:block"
             />
           </div>
           {customTitle ? customTitle : "NezhaDash"}

components/LanguageSwitcher.tsx

@@ -27,7 +27,7 @@ export function LanguageSwitcher() {
         <Button
           variant="outline"
           size="sm"
-          className="rounded-full px-[9px] bg-white dark:bg-black cursor-pointer hover:bg-accent/50 dark:hover:bg-accent/50"
+          className="rounded-full px-[9px] bg-white dark:bg-black cursor-pointer hover:bg-accent/50"
         >
           {localeItems.find((item) => item.code === locale)?.name}
           <span className="sr-only">Change language</span>

components/ThemeSwitcher.tsx

@@ -28,7 +28,7 @@ export function ModeToggle() {
         <Button
           variant="outline"
           size="sm"
-          className="rounded-full px-[9px] bg-white dark:bg-black cursor-pointer hover:bg-accent/50 dark:hover:bg-accent/50"
+          className="rounded-full px-[9px] bg-white dark:bg-black cursor-pointer hover:bg-accent/50"
         >
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

docker/.env.example

@@ -12,6 +12,6 @@ NEXT_PUBLIC_FixedTopServerName=false
 NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
 NEXT_PUBLIC_CustomTitle=NezhaDash
 NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.
-NEXT_PUBLIC_Links='[{"link":"https://github.com/hamster1963/nezha-dash","name":"GitHub"},{"link":"https://buycoffee.top/coffee","name":"Buycoffee☕️"}]'
+NEXT_PUBLIC_Links="[{"link":"https://github.com/hamster1963/nezha-dash","name":"GitHub"},{"link":"https://buycoffee.top/coffee","name":"Buycoffee☕️"}]"
 NEXT_PUBLIC_DisableIndex=false
 NEXT_PUBLIC_ShowTagCount=false

messages/en.json

@@ -93,8 +93,7 @@
   "Global": {
     "Loading": "Loading...",
     "Distributions": "Servers are distributed in",
-    "Regions": "Regions",
+    "Regions": "Regions"
-    "Servers": "servers"
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 Not Found",

messages/ja.json

@@ -93,8 +93,7 @@
   "Global": {
     "Loading": "Loading...",
     "Distributions": "サーバーは",
-    "Regions": "つの地域に分散されています",
+    "Regions": "つの地域に分散されています"
-    "Servers": "サーバー"
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 見つかりませんでした",

messages/zh-t.json

@@ -93,8 +93,7 @@
   "Global": {
     "Loading": "載入中...",
     "Distributions": "伺服器分佈在",
-    "Regions": "個地區",
+    "Regions": "個地區"
-    "Servers": "個伺服器"
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 未找到",

messages/zh.json

@@ -93,8 +93,7 @@
   "Global": {
     "Loading": "加载中...",
     "Distributions": "服务器分布在",
-    "Regions": "个地区",
+    "Regions": "个地区"
-    "Servers": "个服务器"
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 未找到",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nezha-dash",
-  "version": "1.5.1",
+  "version": "1.4.10",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3040",
@@ -23,15 +23,13 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@turf/turf": "^7.1.0",
-    "@types/d3-geo": "^3.1.0",
     "@types/luxon": "^3.4.2",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "caniuse-lite": "^1.0.30001684",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
-    "d3-geo": "^3.1.1",
+    "dotted-map": "^2.2.3",
-    "d3-selection": "^3.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "flag-icons": "^7.2.3",
     "framer-motion": "^12.0.0-alpha.2",
@@ -50,7 +48,7 @@
     "recharts": "^2.13.3",
     "sharp": "^0.33.5",
     "swr": "^2.2.6-beta.4",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "typescript-eslint": "^8.15.0"
   },