feat: ip info i18n

.env.example

@@ -15,3 +15,4 @@ 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_DisableIndex=false
 NEXT_PUBLIC_ShowTagCount=false
+NEXT_PUBLIC_ShowIpInfo=false

app/(main)/ClientComponents/ServerIPInfo.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { IPInfo } from "@/app/api/server-ip/route";
+import { Loader } from "@/components/loading/Loader";
+import { Card, CardContent } from "@/components/ui/card";
+import { nezhaFetcher } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import useSWRImmutable from "swr/immutable";
+
+export default function ServerIPInfo({ server_id }: { server_id: number }) {
+  const t = useTranslations("IPInfo");
+
+  const { data } = useSWRImmutable<IPInfo>(
+    `/api/server-ip?server_id=${server_id}`,
+    nezhaFetcher,
+  );
+
+  if (!data) {
+    return (
+      <div className="mb-11">
+        <Loader visible />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <section className="flex flex-wrap gap-2 mb-4">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"ASN"}</p>
+              <div className="text-xs">
+                {data.asn.autonomous_system_organization}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("asn_number")}</p>
+              <div className="text-xs">
+                AS{data.asn.autonomous_system_number}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">
+                {t("registered_country")}
+              </p>
+              <div className="text-xs">
+                {data.city.registered_country?.names.en}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"ISO"}</p>
+              <div className="text-xs">{data.city.country?.iso_code}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("city")}</p>
+              <div className="text-xs">{data.city.city?.names.en}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("longitude")}</p>
+              <div className="text-xs">{data.city.location?.longitude}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("latitude")}</p>
+              <div className="text-xs">{data.city.location?.latitude}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("time_zone")}</p>
+              <div className="text-xs">{data.city.location?.time_zone}</div>
+            </section>
+          </CardContent>
+        </Card>
+        {data.city.postal && (
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+            <CardContent className="px-1.5 py-1">
+              <section className="flex flex-col items-start gap-0.5">
+                <p className="text-xs text-muted-foreground">
+                  {t("postal_code")}
+                </p>
+                <div className="text-xs">{data.city.postal?.code}</div>
+              </section>
+            </CardContent>
+          </Card>
+        )}
+      </section>
+    </>
+  );
+}

app/(main)/server/[id]/page.tsx

@@ -5,22 +5,15 @@ import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailC
 import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient";
 import TabSwitch from "@/components/TabSwitch";
 import { Separator } from "@/components/ui/separator";
-import GetIPInfo from "@/lib/GetIPInfo";
-import { use, useEffect, useState } from "react";
+import getEnv from "@/lib/env-entry";
+import { use, useState } from "react";
+
+import ServerIPInfo from "../../ClientComponents/ServerIPInfo";
 
 export default function Page(props: { params: Promise<{ id: string }> }) {
   const params = use(props.params);
   const tabs = ["Detail", "Network"];
   const [currentTab, setCurrentTab] = useState(tabs[0]);
-
-  useEffect(() => {
-    const updateViews = async () => {
-      const ipInfo = await GetIPInfo({ server_id: params.id });
-      console.log(ipInfo);
-    };
-    updateViews();
-  }, []);
-
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-2">
       <ServerDetailClient server_id={Number(params.id)} />
@@ -42,6 +35,9 @@ export default function Page(props: { params: Promise<{ id: string }> }) {
         />
       </div>
       <div style={{ display: currentTab === tabs[1] ? "block" : "none" }}>
+        {getEnv("NEXT_PUBLIC_ShowIpInfo") && (
+          <ServerIPInfo server_id={Number(params.id)} />
+        )}
         <NetworkChartClient
           server_id={Number(params.id)}
           show={currentTab === tabs[1]}

app/api/server-ip/route.ts

@@ -0,0 +1,72 @@
+import { auth } from "@/auth";
+import getEnv from "@/lib/env-entry";
+import { GetServerIP } from "@/lib/serverFetch";
+import fs from "fs";
+import { AsnResponse, CityResponse, Reader } from "maxmind";
+import { redirect } from "next/navigation";
+import { NextRequest, NextResponse } from "next/server";
+import path from "path";
+
+export const dynamic = "force-dynamic";
+
+interface ResError extends Error {
+  statusCode: number;
+  message: string;
+}
+
+export type IPInfo = {
+  city: CityResponse;
+  asn: AsnResponse;
+};
+
+export async function GET(req: NextRequest) {
+  if (getEnv("SitePassword")) {
+    const session = await auth();
+    if (!session) {
+      redirect("/");
+    }
+  }
+
+  if (!getEnv("NEXT_PUBLIC_ShowIpInfo")) {
+    return NextResponse.json(
+      { error: "NEXT_PUBLIC_ShowIpInfo is disable" },
+      { status: 400 },
+    );
+  }
+
+  const { searchParams } = new URL(req.url);
+  const server_id = searchParams.get("server_id");
+
+  if (!server_id) {
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const ip = await GetServerIP({ server_id: Number(server_id) });
+
+    const cityDbPath = path.join(process.cwd(), "lib", "GeoLite2-City.mmdb");
+
+    const asnDbPath = path.join(process.cwd(), "lib", "GeoLite2-ASN.mmdb");
+
+    const cityDbBuffer = fs.readFileSync(cityDbPath);
+    const asnDbBuffer = fs.readFileSync(asnDbPath);
+
+    const cityLookup = new Reader<CityResponse>(cityDbBuffer);
+    const asnLookup = new Reader<AsnResponse>(asnDbBuffer);
+
+    const data: IPInfo = {
+      city: cityLookup.get(ip) as CityResponse,
+      asn: asnLookup.get(ip) as AsnResponse,
+    };
+    return NextResponse.json(data, { status: 200 });
+  } catch (error) {
+    const err = error as ResError;
+    console.error("Error in GET handler:", err);
+    const statusCode = err.statusCode || 500;
+    const message = err.message || "Internal Server Error";
+    return NextResponse.json({ error: message }, { status: statusCode });
+  }
+}

lib/GetIPInfo.ts

@@ -1,35 +0,0 @@
-"use server";
-
-import fs from "fs";
-import path from 'path';
-import { AsnResponse, CityResponse, Reader } from "maxmind";
-
-import { GetServerIP } from "./serverFetch";
-
-type IPInfo = {
-  city: CityResponse;
-  asn: AsnResponse;
-};
-
-export default async function GetIPInfo({
-  server_id,
-}: {
-  server_id: string;
-}): Promise<IPInfo> {
-  const ip = await GetServerIP({ server_id: Number(server_id) });
-
-  const cityDbPath = path.join(process.cwd(),"lib", 'GeoLite2-City.mmdb');
-
-    const asnDbPath = path.join(process.cwd(),"lib", 'GeoLite2-ASN.mmdb');
-
-  const cityDbBuffer = fs.readFileSync(cityDbPath);
-  const asnDbBuffer = fs.readFileSync(asnDbPath);
-
-  const cityLookup = new Reader<CityResponse>(cityDbBuffer);
-  const asnLookup = new Reader<AsnResponse>(asnDbBuffer);
-
-  return {
-    city: cityLookup.get(ip) as CityResponse,
-    asn: asnLookup.get(ip) as AsnResponse,
-  };
-}

messages/en.json

@@ -55,6 +55,15 @@
     "avg_delay": "Latency",
     "chart_fetch_error_message": "Failed to fetch network data, please check if the server monitoring is enabled"
   },
+  "IPInfo": {
+    "asn_number": "Origin ASN",
+    "registered_country": "Registered Country",
+    "time_zone": "Time Zone",
+    "postal_code": "Postal Code",
+    "city": "City",
+    "longitude": "Longitude",
+    "latitude": "Latitude"
+  },
   "NetworkChart": {
     "ServerMonitorCount": "Services"
   },

messages/ja.json

@@ -55,6 +55,15 @@
     "avg_delay": "遅延",
     "chart_fetch_error_message": "ネットワークデータの取得に失敗しました。サーバーの監視が有効になっているかどうかを確認してください"
   },
+  "IPInfo": {
+    "asn_number": "ASN",
+    "registered_country": "Registered Country",
+    "time_zone": "時刻",
+    "postal_code": "郵便番号",
+    "city": "都市",
+    "longitude": "経度",
+    "latitude": "緯度"
+  },
   "NetworkChart": {
     "ServerMonitorCount": "サービス"
   },

messages/zh-t.json

@@ -55,6 +55,15 @@
     "avg_delay": "延遲",
     "chart_fetch_error_message": "獲取網絡數據失敗，請檢查是否開啟服務端監控"
   },
+  "IPInfo": {
+    "asn_number": "ASN Number",
+    "registered_country": "注册地區",
+    "time_zone": "時區",
+    "postal_code": "郵遞區號",
+    "city": "城市",
+    "longitude": "經度",
+    "latitude": "緯度"
+  },
   "NetworkChart": {
     "ServerMonitorCount": "個監測服務"
   },

messages/zh.json

@@ -58,6 +58,15 @@
   "NetworkChart": {
     "ServerMonitorCount": "个监控服务"
   },
+  "IPInfo": {
+    "asn_number": "ASN 编号",
+    "registered_country": "注册地",
+    "time_zone": "时区",
+    "postal_code": "邮政编码",
+    "city": "城市",
+    "longitude": "经度",
+    "latitude": "纬度"
+  },
   "ServerDetailClient": {
     "detail_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
     "status": "状态",