.github/workflows/auto-fix-lint-format-commit.yml

@@ -1,56 +0,0 @@
-name: Auto Fix Lint and Format
-
-on:
-  pull_request_target:
-    types: [opened, synchronize]
-
-jobs:
-  auto-fix:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ github.head_ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-
-      - name: Set up Bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: "latest"
-
-      - name: Install dependencies
-        run: bun install
-
-      - name: Run linter and fix issues
-        run: bun run lint:fix
-
-      - name: Run formatter
-        run: bun run format
-
-      - name: Check for changes
-        id: check_changes
-        run: |
-          git diff --exit-code || echo "has_changes=true" >> $GITHUB_ENV
-
-      - name: Commit and push changes
-        if: steps.check_changes.outputs.has_changes == 'true' || env.has_changes == 'true'
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: "chore: auto-fix linting and formatting issues"
-          commit_options: "--no-verify"
-          file_pattern: "."
-
-      - name: Add PR comment
-        if: steps.check_changes.outputs.has_changes == 'true' || env.has_changes == 'true'
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: 'Linting and formatting issues were automatically fixed. Please review the changes.'
-            });

.prettierrc.json

@@ -1,12 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": false,
-  "printWidth": 100,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "endOfLine": "auto",
-  "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"]
-}

app/(main)/ClientComponents/Global.tsx

@@ -1,49 +1,52 @@
-"use client"
+"use client";
 
-import { ServerApi } from "@/app/types/nezha-api"
+import { ServerApi } from "@/app/types/nezha-api";
-import { nezhaFetcher } from "@/lib/utils"
+import { nezhaFetcher } from "@/lib/utils";
-import useSWRImmutable from "swr/immutable"
+import useSWRImmutable from "swr/immutable";
 
-import { geoJsonString } from "../../../lib/geo-json-string"
+import { geoJsonString } from "../../../lib/geo-json-string";
-import GlobalInfo from "./GlobalInfo"
+import GlobalInfo from "./GlobalInfo";
-import GlobalLoading from "./GlobalLoading"
+import GlobalLoading from "./GlobalLoading";
-import { InteractiveMap } from "./InteractiveMap"
+import { InteractiveMap } from "./InteractiveMap";
-import { TooltipProvider } from "./TooltipContext"
+import { TooltipProvider } from "./TooltipContext";
 
 export default function ServerGlobal() {
-  const { data: nezhaServerList, error } = useSWRImmutable<ServerApi>("/api/server", nezhaFetcher)
+  const { data: nezhaServerList, error } = useSWRImmutable<ServerApi>(
+    "/api/server",
+    nezhaFetcher,
+  );
 
   if (error)
     return (
       <div className="flex flex-col items-center justify-center">
         <p className="text-sm font-medium opacity-40">{error.message}</p>
       </div>
-    )
+    );
 
   if (!nezhaServerList) {
-    return <GlobalLoading />
+    return <GlobalLoading />;
   }
 
-  const countryList: string[] = []
+  const countryList: string[] = [];
-  const serverCounts: { [key: string]: number } = {}
+  const serverCounts: { [key: string]: number } = {};
 
   nezhaServerList.result.forEach((server) => {
     if (server.host.CountryCode) {
-      const countryCode = server.host.CountryCode.toUpperCase()
+      const countryCode = server.host.CountryCode.toUpperCase();
       if (!countryList.includes(countryCode)) {
-        countryList.push(countryCode)
+        countryList.push(countryCode);
       }
-      serverCounts[countryCode] = (serverCounts[countryCode] || 0) + 1
+      serverCounts[countryCode] = (serverCounts[countryCode] || 0) + 1;
     }
-  })
+  });
 
-  const width = 900
+  const width = 900;
-  const height = 500
+  const height = 500;
 
-  const geoJson = JSON.parse(geoJsonString)
+  const geoJson = JSON.parse(geoJsonString);
   const filteredFeatures = geoJson.features.filter(
     (feature: any) => feature.properties.iso_a3_eh !== "",
-  )
+  );
 
   return (
     <section className="flex flex-col gap-4 mt-[3.2px]">
@@ -61,5 +64,5 @@ export default function ServerGlobal() {
         </TooltipProvider>
       </div>
     </section>
-  )
+  );
 }

app/(main)/ClientComponents/GlobalInfo.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 type GlobalInfoProps = {
-  countries: string[]
+  countries: string[];
-}
+};
 
 export default function GlobalInfo({ countries }: GlobalInfoProps) {
-  const t = useTranslations("Global")
+  const t = useTranslations("Global");
   return (
     <section className="flex items-center justify-between">
       <p className="text-sm font-medium opacity-40">
         {t("Distributions")} {countries.length} {t("Regions")}
       </p>
     </section>
-  )
+  );
 }

app/(main)/ClientComponents/GlobalLoading.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import { Loader } from "@/components/loading/Loader"
+import { Loader } from "@/components/loading/Loader";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 export default function GlobalLoading() {
-  const t = useTranslations("Global")
+  const t = useTranslations("Global");
   return (
     <section className="flex flex-col gap-4 mt-[3.2px]">
       <div className="flex min-h-40 flex-col items-center justify-center font-medium text-sm">
@@ -12,5 +12,5 @@ export default function GlobalLoading() {
         <Loader visible={true} />
       </div>
     </section>
-  )
+  );
 }

app/(main)/ClientComponents/InteractiveMap.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import { countryCoordinates } from "@/lib/geo-limit"
+import { countryCoordinates } from "@/lib/geo-limit";
-import { geoEquirectangular, geoPath } from "d3-geo"
+import { geoEquirectangular, geoPath } from "d3-geo";
 
-import MapTooltip from "./MapTooltip"
+import MapTooltip from "./MapTooltip";
-import { useTooltip } from "./TooltipContext"
+import { useTooltip } from "./TooltipContext";
 
 interface InteractiveMapProps {
-  countries: string[]
+  countries: string[];
-  serverCounts: { [key: string]: number }
+  serverCounts: { [key: string]: number };
-  width: number
+  width: number;
-  height: number
+  height: number;
-  filteredFeatures: any[]
+  filteredFeatures: any[];
-  nezhaServerList: any
+  nezhaServerList: any;
 }
 
 export function InteractiveMap({
@@ -23,17 +23,20 @@ export function InteractiveMap({
   filteredFeatures,
   nezhaServerList,
 }: InteractiveMapProps) {
-  const { setTooltipData } = useTooltip()
+  const { setTooltipData } = useTooltip();
 
   const projection = geoEquirectangular()
     .scale(140)
     .translate([width / 2, height / 2])
-    .rotate([-12, 0, 0])
+    .rotate([-12, 0, 0]);
 
-  const path = geoPath().projection(projection)
+  const path = geoPath().projection(projection);
 
   return (
-    <div className="relative w-full aspect-[2/1]" onMouseLeave={() => setTooltipData(null)}>
+    <div
+      className="relative w-full aspect-[2/1]"
+      onMouseLeave={() => setTooltipData(null)}
+    >
       <svg
         width={width}
         height={height}
@@ -57,9 +60,11 @@ export function InteractiveMap({
             onMouseEnter={() => setTooltipData(null)}
           />
           {filteredFeatures.map((feature, index) => {
-            const isHighlighted = countries.includes(feature.properties.iso_a2_eh)
+            const isHighlighted = countries.includes(
+              feature.properties.iso_a2_eh,
+            );
 
-            const serverCount = serverCounts[feature.properties.iso_a2_eh] || 0
+            const serverCount = serverCounts[feature.properties.iso_a2_eh] || 0;
 
             return (
               <path
@@ -72,29 +77,31 @@ export function InteractiveMap({
                 }
                 onMouseEnter={() => {
                   if (!isHighlighted) {
-                    setTooltipData(null)
+                    setTooltipData(null);
-                    return
+                    return;
                   }
                   if (path.centroid(feature)) {
-                    const countryCode = feature.properties.iso_a2_eh
+                    const countryCode = feature.properties.iso_a2_eh;
                     const countryServers = nezhaServerList.result
                       .filter(
-                        (server: any) => server.host.CountryCode?.toUpperCase() === countryCode,
+                        (server: any) =>
+                          server.host.CountryCode?.toUpperCase() ===
+                          countryCode,
                       )
                       .map((server: any) => ({
                         name: server.name,
                         status: server.online_status,
-                      }))
+                      }));
                     setTooltipData({
                       centroid: path.centroid(feature),
                       country: feature.properties.name,
                       count: serverCount,
                       servers: countryServers,
-                    })
+                    });
                   }
                 }}
               />
-            )
+            );
           })}
 
           {/* 渲染不在 filteredFeatures 中的国家标记点 */}
@@ -102,35 +109,38 @@ export function InteractiveMap({
             // 检查该国家是否已经在 filteredFeatures 中
             const isInFilteredFeatures = filteredFeatures.some(
               (feature) => feature.properties.iso_a2_eh === countryCode,
-            )
+            );
 
             // 如果已经在 filteredFeatures 中，跳过
-            if (isInFilteredFeatures) return null
+            if (isInFilteredFeatures) return null;
 
             // 获取国家的经纬度
-            const coords = countryCoordinates[countryCode]
+            const coords = countryCoordinates[countryCode];
-            if (!coords) return null
+            if (!coords) return null;
 
             // 使用投影函数将经纬度转换为 SVG 坐标
-            const [x, y] = projection([coords.lng, coords.lat]) || [0, 0]
+            const [x, y] = projection([coords.lng, coords.lat]) || [0, 0];
-            const serverCount = serverCounts[countryCode] || 0
+            const serverCount = serverCounts[countryCode] || 0;
 
             return (
               <g
                 key={countryCode}
                 onMouseEnter={() => {
                   const countryServers = nezhaServerList.result
-                    .filter((server: any) => server.host.CountryCode?.toUpperCase() === countryCode)
+                    .filter(
+                      (server: any) =>
+                        server.host.CountryCode?.toUpperCase() === countryCode,
+                    )
                     .map((server: any) => ({
                       name: server.name,
                       status: server.online_status,
-                    }))
+                    }));
                   setTooltipData({
                     centroid: [x, y],
                     country: coords.name,
                     count: serverCount,
                     servers: countryServers,
-                  })
+                  });
                 }}
                 className="cursor-pointer"
               >
@@ -141,11 +151,11 @@ export function InteractiveMap({
                   className="fill-sky-700 stroke-white hover:fill-sky-600 dark:fill-sky-900 dark:hover:fill-sky-700 transition-all"
                 />
               </g>
-            )
+            );
           })}
         </g>
       </svg>
       <MapTooltip />
     </div>
-  )
+  );
 }

app/(main)/ClientComponents/MapTooltip.tsx

@@ -1,20 +1,20 @@
-"use client"
+"use client";
 
-import { AnimatePresence, m } from "framer-motion"
+import { AnimatePresence, m } from "framer-motion";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import { memo } from "react"
+import { memo } from "react";
 
-import { useTooltip } from "./TooltipContext"
+import { useTooltip } from "./TooltipContext";
 
 const MapTooltip = memo(function MapTooltip() {
-  const { tooltipData } = useTooltip()
+  const { tooltipData } = useTooltip();
-  const t = useTranslations("Global")
+  const t = useTranslations("Global");
 
-  if (!tooltipData) return null
+  if (!tooltipData) return null;
 
   const sortedServers = tooltipData.servers.sort((a, b) => {
-    return a.status === b.status ? 0 : a.status ? 1 : -1
+    return a.status === b.status ? 0 : a.status ? 1 : -1;
-  })
+  });
 
   return (
     <AnimatePresence mode="wait">
@@ -30,12 +30,14 @@ const MapTooltip = memo(function MapTooltip() {
           transform: "translate(10%, -50%)",
         }}
         onMouseEnter={(e) => {
-          e.stopPropagation()
+          e.stopPropagation();
         }}
       >
         <div>
           <p className="font-medium">
-            {tooltipData.country === "China" ? "Mainland China" : tooltipData.country}
+            {tooltipData.country === "China"
+              ? "Mainland China"
+              : tooltipData.country}
           </p>
           <p className="text-neutral-600 dark:text-neutral-400 mb-1">
             {tooltipData.count} {t("Servers")}
@@ -61,7 +63,7 @@ const MapTooltip = memo(function MapTooltip() {
         </div>
       </m.div>
     </AnimatePresence>
-  )
+  );
-})
+});
 
-export default MapTooltip
+export default MapTooltip;

app/(main)/ClientComponents/NetworkChart.tsx

@@ -1,8 +1,14 @@
-"use client"
+"use client";
 
-import NetworkChartLoading from "@/app/(main)/ClientComponents/NetworkChartLoading"
+import NetworkChartLoading from "@/app/(main)/ClientComponents/NetworkChartLoading";
-import { NezhaAPIMonitor, ServerMonitorChart } from "@/app/types/nezha-api"
+import { NezhaAPIMonitor, ServerMonitorChart } from "@/app/types/nezha-api";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   ChartConfig,
   ChartContainer,
@@ -10,59 +16,68 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
+} from "@/components/ui/chart";
-import { Label } from "@/components/ui/label"
+import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch"
+import { Switch } from "@/components/ui/switch";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { formatTime, nezhaFetcher } from "@/lib/utils"
+import { formatTime, nezhaFetcher } from "@/lib/utils";
-import { formatRelativeTime } from "@/lib/utils"
+import { formatRelativeTime } from "@/lib/utils";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import * as React from "react"
+import * as React from "react";
-import { useCallback, useMemo } from "react"
+import { useCallback, useMemo } from "react";
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
-import useSWR from "swr"
+import useSWR from "swr";
 
 interface ResultItem {
-  created_at: number
+  created_at: number;
-  [key: string]: number
+  [key: string]: number;
 }
 
-export function NetworkChartClient({ server_id, show }: { server_id: number; show: boolean }) {
+export function NetworkChartClient({
-  const t = useTranslations("NetworkChartClient")
+  server_id,
+  show,
+}: {
+  server_id: number;
+  show: boolean;
+}) {
+  const t = useTranslations("NetworkChartClient");
   const { data, error } = useSWR<NezhaAPIMonitor[]>(
     `/api/monitor?server_id=${server_id}`,
     nezhaFetcher,
     {
-      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 15000,
+      refreshInterval:
+        Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 15000,
       isVisible: () => show,
     },
-  )
+  );
 
   if (error) {
     return (
       <>
         <div className="flex flex-col items-center justify-center">
           <p className="text-sm font-medium opacity-40">{error.message}</p>
-          <p className="text-sm font-medium opacity-40">{t("chart_fetch_error_message")}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("chart_fetch_error_message")}
+          </p>
         </div>
         <NetworkChartLoading />
       </>
-    )
+    );
   }
 
-  if (!data) return <NetworkChartLoading />
+  if (!data) return <NetworkChartLoading />;
 
-  const transformedData = transformData(data)
+  const transformedData = transformData(data);
 
-  const formattedData = formatData(data)
+  const formattedData = formatData(data);
 
   const initChartConfig = {
     avg_delay: {
       label: t("avg_delay"),
     },
-  } satisfies ChartConfig
+  } satisfies ChartConfig;
 
-  const chartDataKey = Object.keys(transformedData)
+  const chartDataKey = Object.keys(transformedData);
 
   return (
     <NetworkChart
@@ -72,7 +87,7 @@ export function NetworkChartClient({ server_id, show }: { server_id: number; sho
       serverName={data[0].server_name}
       formattedData={formattedData}
     />
-  )
+  );
 }
 
 export const NetworkChart = React.memo(function NetworkChart({
@@ -82,33 +97,33 @@ export const NetworkChart = React.memo(function NetworkChart({
   serverName,
   formattedData,
 }: {
-  chartDataKey: string[]
+  chartDataKey: string[];
-  chartConfig: ChartConfig
+  chartConfig: ChartConfig;
-  chartData: ServerMonitorChart
+  chartData: ServerMonitorChart;
-  serverName: string
+  serverName: string;
-  formattedData: ResultItem[]
+  formattedData: ResultItem[];
 }) {
-  const t = useTranslations("NetworkChart")
+  const t = useTranslations("NetworkChart");
 
-  const defaultChart = "All"
+  const defaultChart = "All";
 
-  const [activeChart, setActiveChart] = React.useState(defaultChart)
+  const [activeChart, setActiveChart] = React.useState(defaultChart);
-  const [isPeakEnabled, setIsPeakEnabled] = React.useState(false)
+  const [isPeakEnabled, setIsPeakEnabled] = React.useState(false);
 
   const handleButtonClick = useCallback(
     (chart: string) => {
-      setActiveChart((prev) => (prev === chart ? defaultChart : chart))
+      setActiveChart((prev) => (prev === chart ? defaultChart : chart));
     },
     [defaultChart],
-  )
+  );
 
   const getColorByIndex = useCallback(
     (chart: string) => {
-      const index = chartDataKey.indexOf(chart)
+      const index = chartDataKey.indexOf(chart);
-      return `hsl(var(--chart-${(index % 10) + 1}))`
+      return `hsl(var(--chart-${(index % 10) + 1}))`;
     },
     [chartDataKey],
-  )
+  );
 
   const chartButtons = useMemo(
     () =>
@@ -119,14 +134,16 @@ export const NetworkChart = React.memo(function NetworkChart({
           className={`relative z-30 flex cursor-pointer grow basis-0 flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
           onClick={() => handleButtonClick(key)}
         >
-          <span className="whitespace-nowrap text-xs text-muted-foreground">{key}</span>
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {key}
+          </span>
           <span className="text-md font-bold leading-none sm:text-lg">
             {chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
           </span>
         </button>
       )),
     [chartDataKey, activeChart, chartData, handleButtonClick],
-  )
+  );
 
   const chartLines = useMemo(() => {
     if (activeChart !== defaultChart) {
@@ -139,7 +156,7 @@ export const NetworkChart = React.memo(function NetworkChart({
           dataKey="avg_delay"
           stroke={getColorByIndex(activeChart)}
         />
-      )
+      );
     }
     return chartDataKey.map((key) => (
       <Line
@@ -152,50 +169,65 @@ export const NetworkChart = React.memo(function NetworkChart({
         stroke={getColorByIndex(key)}
         connectNulls={true}
       />
-    ))
+    ));
-  }, [activeChart, defaultChart, chartDataKey, getColorByIndex])
+  }, [activeChart, defaultChart, chartDataKey, getColorByIndex]);
 
   const processedData = useMemo(() => {
     if (!isPeakEnabled) {
-      return activeChart === defaultChart ? formattedData : chartData[activeChart]
+      return activeChart === defaultChart
+        ? formattedData
+        : chartData[activeChart];
     }
 
     // 如果开启了削峰，对数据进行处理
     const data = (
       activeChart === defaultChart ? formattedData : chartData[activeChart]
-    ) as ResultItem[]
+    ) as ResultItem[];
-    const windowSize = 7 // 增加到7个点的移动平均
+    const windowSize = 7; // 增加到7个点的移动平均
-    const weights = [0.1, 0.1, 0.15, 0.3, 0.15, 0.1, 0.1] // 加权平均的权重
+    const weights = [0.1, 0.1, 0.15, 0.3, 0.15, 0.1, 0.1]; // 加权平均的权重
 
     return data.map((point, index) => {
-      if (index < windowSize - 1) return point
+      if (index < windowSize - 1) return point;
 
-      const window = data.slice(index - windowSize + 1, index + 1)
+      const window = data.slice(index - windowSize + 1, index + 1);
-      const smoothed = { ...point } as ResultItem
+      const smoothed = { ...point } as ResultItem;
 
       if (activeChart === defaultChart) {
         // 处理所有线路的数据
         chartDataKey.forEach((key) => {
           const values = window
             .map((w) => w[key])
-            .filter((v) => v !== undefined && v !== null) as number[]
+            .filter((v) => v !== undefined && v !== null) as number[];
           if (values.length === windowSize) {
-            smoothed[key] = values.reduce((acc, val, idx) => acc + val * weights[idx], 0)
+            smoothed[key] = values.reduce(
+              (acc, val, idx) => acc + val * weights[idx],
+              0,
+            );
           }
-        })
+        });
       } else {
         // 处理单条线路的数据
         const values = window
           .map((w) => w.avg_delay)
-          .filter((v) => v !== undefined && v !== null) as number[]
+          .filter((v) => v !== undefined && v !== null) as number[];
         if (values.length === windowSize) {
-          smoothed.avg_delay = values.reduce((acc, val, idx) => acc + val * weights[idx], 0)
+          smoothed.avg_delay = values.reduce(
+            (acc, val, idx) => acc + val * weights[idx],
+            0,
+          );
         }
       }
 
-      return smoothed
+      return smoothed;
-    })
+    });
-  }, [isPeakEnabled, activeChart, formattedData, chartData, chartDataKey, defaultChart])
+  }, [
+    isPeakEnabled,
+    activeChart,
+    formattedData,
+    chartData,
+    chartDataKey,
+    defaultChart,
+  ]);
 
   return (
     <Card>
@@ -208,7 +240,11 @@ export const NetworkChart = React.memo(function NetworkChart({
             {chartDataKey.length} {t("ServerMonitorCount")}
           </CardDescription>
           <div className="flex items-center mt-0.5 space-x-2">
-            <Switch id="Peak" checked={isPeakEnabled} onCheckedChange={setIsPeakEnabled} />
+            <Switch
+              id="Peak"
+              checked={isPeakEnabled}
+              onCheckedChange={setIsPeakEnabled}
+            />
             <Label className="text-xs" htmlFor="Peak">
               Peak cut
             </Label>
@@ -217,8 +253,15 @@ export const NetworkChart = React.memo(function NetworkChart({
         <div className="flex flex-wrap w-full">{chartButtons}</div>
       </CardHeader>
       <CardContent className="pr-2 pl-0 py-4 sm:pt-6 sm:pb-6 sm:pr-6 sm:pl-2">
-        <ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
+        <ChartContainer
-          <LineChart accessibilityLayer data={processedData} margin={{ left: 12, right: 12 }}>
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <LineChart
+            accessibilityLayer
+            data={processedData}
+            margin={{ left: 12, right: 12 }}
+          >
             <CartesianGrid vertical={false} />
             <XAxis
               dataKey="created_at"
@@ -243,64 +286,67 @@ export const NetworkChart = React.memo(function NetworkChart({
                   indicator={"line"}
                   labelKey="created_at"
                   labelFormatter={(_, payload) => {
-                    return formatTime(payload[0].payload.created_at)
+                    return formatTime(payload[0].payload.created_at);
                   }}
                 />
               }
             />
-            {activeChart === defaultChart && <ChartLegend content={<ChartLegendContent />} />}
+            {activeChart === defaultChart && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
             {chartLines}
           </LineChart>
         </ChartContainer>
       </CardContent>
     </Card>
-  )
+  );
-})
+});
 
 const transformData = (data: NezhaAPIMonitor[]) => {
-  const monitorData: ServerMonitorChart = {}
+  const monitorData: ServerMonitorChart = {};
 
   data.forEach((item) => {
-    const monitorName = item.monitor_name
+    const monitorName = item.monitor_name;
 
     if (!monitorData[monitorName]) {
-      monitorData[monitorName] = []
+      monitorData[monitorName] = [];
     }
 
     for (let i = 0; i < item.created_at.length; i++) {
       monitorData[monitorName].push({
         created_at: item.created_at[i],
         avg_delay: item.avg_delay[i],
-      })
+      });
     }
-  })
+  });
 
-  return monitorData
+  return monitorData;
-}
+};
 
 const formatData = (rawData: NezhaAPIMonitor[]) => {
-  const result: { [time: number]: ResultItem } = {}
+  const result: { [time: number]: ResultItem } = {};
 
-  const allTimes = new Set<number>()
+  const allTimes = new Set<number>();
   rawData.forEach((item) => {
-    item.created_at.forEach((time) => allTimes.add(time))
+    item.created_at.forEach((time) => allTimes.add(time));
-  })
+  });
 
-  const allTimeArray = Array.from(allTimes).sort((a, b) => a - b)
+  const allTimeArray = Array.from(allTimes).sort((a, b) => a - b);
 
   rawData.forEach((item) => {
-    const { monitor_name, created_at, avg_delay } = item
+    const { monitor_name, created_at, avg_delay } = item;
 
     allTimeArray.forEach((time) => {
       if (!result[time]) {
-        result[time] = { created_at: time }
+        result[time] = { created_at: time };
       }
 
-      const timeIndex = created_at.indexOf(time)
+      const timeIndex = created_at.indexOf(time);
       // @ts-expect-error - avg_delay is an array
-      result[time][monitor_name] = timeIndex !== -1 ? avg_delay[timeIndex] : null
+      result[time][monitor_name] =
-    })
+        timeIndex !== -1 ? avg_delay[timeIndex] : null;
-  })
+    });
+  });
 
-  return Object.values(result).sort((a, b) => a.created_at - b.created_at)
+  return Object.values(result).sort((a, b) => a.created_at - b.created_at);
-}
+};

app/(main)/ClientComponents/NetworkChartLoading.tsx

@@ -1,5 +1,5 @@
-import { Loader } from "@/components/loading/Loader"
+import { Loader } from "@/components/loading/Loader";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function NetworkChartLoading() {
   return (
@@ -19,5 +19,5 @@ export default function NetworkChartLoading() {
         <div className="aspect-auto h-[250px] w-full"></div>
       </CardContent>
     </Card>
-  )
+  );
 }

app/(main)/ClientComponents/ServerDetailChartClient.tsx

@@ -1,59 +1,77 @@
-"use client"
+"use client";
 
-import { ServerDetailChartLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading"
+import { ServerDetailChartLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
-import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api"
+import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
-import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar"
+import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
-import { ChartConfig, ChartContainer } from "@/components/ui/chart"
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
-import { formatBytes, formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils"
+import {
-import { useTranslations } from "next-intl"
+  formatBytes,
-import { useEffect, useState } from "react"
+  formatNezhaInfo,
-import { Area, AreaChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+  formatRelativeTime,
-import useSWRImmutable from "swr/immutable"
+  nezhaFetcher,
+} from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import useSWRImmutable from "swr/immutable";
 
 type cpuChartData = {
-  timeStamp: string
+  timeStamp: string;
-  cpu: number
+  cpu: number;
-}
+};
 
 type processChartData = {
-  timeStamp: string
+  timeStamp: string;
-  process: number
+  process: number;
-}
+};
 
 type diskChartData = {
-  timeStamp: string
+  timeStamp: string;
-  disk: number
+  disk: number;
-}
+};
 
 type memChartData = {
-  timeStamp: string
+  timeStamp: string;
-  mem: number
+  mem: number;
-  swap: number
+  swap: number;
-}
+};
 
 type networkChartData = {
-  timeStamp: string
+  timeStamp: string;
-  upload: number
+  upload: number;
-  download: number
+  download: number;
-}
+};
 
 type connectChartData = {
-  timeStamp: string
+  timeStamp: string;
-  tcp: number
+  tcp: number;
-  udp: number
+  udp: number;
-}
+};
 
 export default function ServerDetailChartClient({
   server_id,
 }: {
-  server_id: number
+  server_id: number;
-  show: boolean
+  show: boolean;
 }) {
-  const t = useTranslations("ServerDetailChartClient")
+  const t = useTranslations("ServerDetailChartClient");
 
-  const { data: allFallbackData } = useSWRImmutable<ServerApi>("/api/server", nezhaFetcher)
+  const { data: allFallbackData } = useSWRImmutable<ServerApi>(
-  const fallbackData = allFallbackData?.result?.find((item) => item.id === server_id)
+    "/api/server",
+    nezhaFetcher,
+  );
+  const fallbackData = allFallbackData?.result?.find(
+    (item) => item.id === server_id,
+  );
 
   const { data, error } = useSWRImmutable<NezhaAPISafe>(
     `/api/detail?server_id=${server_id}`,
@@ -61,19 +79,21 @@ export default function ServerDetailChartClient({
     {
       fallbackData,
     },
-  )
+  );
 
   if (error) {
     return (
       <>
         <div className="flex flex-col items-center justify-center">
           <p className="text-sm font-medium opacity-40">{error.message}</p>
-          <p className="text-sm font-medium opacity-40">{t("chart_fetch_error_message")}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("chart_fetch_error_message")}
+          </p>
         </div>
       </>
-    )
+    );
   }
-  if (!data) return <ServerDetailChartLoading />
+  if (!data) return <ServerDetailChartLoading />;
 
   return (
     <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
@@ -84,38 +104,38 @@ export default function ServerDetailChartClient({
       <NetworkChart data={data} />
       <ConnectChart data={data} />
     </section>
-  )
+  );
 }
 
 function CpuChart({ data }: { data: NezhaAPISafe }) {
-  const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[])
+  const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
 
-  const { cpu } = formatNezhaInfo(data)
+  const { cpu } = formatNezhaInfo(data);
 
   useEffect(() => {
     if (data) {
-      const timestamp = Date.now().toString()
+      const timestamp = Date.now().toString();
-      let newData = [] as cpuChartData[]
+      let newData = [] as cpuChartData[];
       if (cpuChartData.length === 0) {
         newData = [
           { timeStamp: timestamp, cpu: cpu },
           { timeStamp: timestamp, cpu: cpu },
-        ]
+        ];
       } else {
-        newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }]
+        newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
       }
       if (newData.length > 30) {
-        newData.shift()
+        newData.shift();
       }
-      setCpuChartData(newData)
+      setCpuChartData(newData);
     }
-  }, [data])
+  }, [data]);
 
   const chartConfig = {
     cpu: {
       label: "CPU",
     },
-  } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card>
@@ -124,7 +144,9 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
           <div className="flex items-center justify-between">
             <p className="text-md font-medium">CPU</p>
             <section className="flex items-center gap-2">
-              <p className="text-xs text-end w-10 font-medium">{cpu.toFixed(0)}%</p>
+              <p className="text-xs text-end w-10 font-medium">
+                {cpu.toFixed(0)}%
+              </p>
               <AnimatedCircularProgressBar
                 className="size-3 text-[0px]"
                 max={100}
@@ -134,7 +156,10 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
               />
             </section>
           </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <AreaChart
               accessibilityLayer
               data={cpuChartData}
@@ -175,40 +200,45 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
         </section>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function ProcessChart({ data }: { data: NezhaAPISafe }) {
-  const t = useTranslations("ServerDetailChartClient")
+  const t = useTranslations("ServerDetailChartClient");
 
-  const [processChartData, setProcessChartData] = useState([] as processChartData[])
+  const [processChartData, setProcessChartData] = useState(
+    [] as processChartData[],
+  );
 
-  const { process } = formatNezhaInfo(data)
+  const { process } = formatNezhaInfo(data);
 
   useEffect(() => {
     if (data) {
-      const timestamp = Date.now().toString()
+      const timestamp = Date.now().toString();
-      let newData = [] as processChartData[]
+      let newData = [] as processChartData[];
       if (processChartData.length === 0) {
         newData = [
           { timeStamp: timestamp, process: process },
           { timeStamp: timestamp, process: process },
-        ]
+        ];
       } else {
-        newData = [...processChartData, { timeStamp: timestamp, process: process }]
+        newData = [
+          ...processChartData,
+          { timeStamp: timestamp, process: process },
+        ];
       }
       if (newData.length > 30) {
-        newData.shift()
+        newData.shift();
       }
-      setProcessChartData(newData)
+      setProcessChartData(newData);
     }
-  }, [data])
+  }, [data]);
 
   const chartConfig = {
     process: {
       label: "Process",
     },
-  } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card>
@@ -220,7 +250,10 @@ function ProcessChart({ data }: { data: NezhaAPISafe }) {
               <p className="text-xs text-end w-10 font-medium">{process}</p>
             </section>
           </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <AreaChart
               accessibilityLayer
               data={processChartData}
@@ -240,7 +273,12 @@ function ProcessChart({ data }: { data: NezhaAPISafe }) {
                 interval="preserveStartEnd"
                 tickFormatter={(value) => formatRelativeTime(value)}
               />
-              <YAxis tickLine={false} axisLine={false} mirror={true} tickMargin={-15} />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+              />
               <Area
                 isAnimationActive={false}
                 dataKey="process"
@@ -254,34 +292,37 @@ function ProcessChart({ data }: { data: NezhaAPISafe }) {
         </section>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function MemChart({ data }: { data: NezhaAPISafe }) {
-  const t = useTranslations("ServerDetailChartClient")
+  const t = useTranslations("ServerDetailChartClient");
 
-  const [memChartData, setMemChartData] = useState([] as memChartData[])
+  const [memChartData, setMemChartData] = useState([] as memChartData[]);
 
-  const { mem, swap } = formatNezhaInfo(data)
+  const { mem, swap } = formatNezhaInfo(data);
 
   useEffect(() => {
     if (data) {
-      const timestamp = Date.now().toString()
+      const timestamp = Date.now().toString();
-      let newData = [] as memChartData[]
+      let newData = [] as memChartData[];
       if (memChartData.length === 0) {
         newData = [
           { timeStamp: timestamp, mem: mem, swap: swap },
           { timeStamp: timestamp, mem: mem, swap: swap },
-        ]
+        ];
       } else {
-        newData = [...memChartData, { timeStamp: timestamp, mem: mem, swap: swap }]
+        newData = [
+          ...memChartData,
+          { timeStamp: timestamp, mem: mem, swap: swap },
+        ];
       }
       if (newData.length > 30) {
-        newData.shift()
+        newData.shift();
       }
-      setMemChartData(newData)
+      setMemChartData(newData);
     }
-  }, [data])
+  }, [data]);
 
   const chartConfig = {
     mem: {
@@ -290,7 +331,7 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
     swap: {
       label: "Swap",
     },
-  } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card>
@@ -327,14 +368,18 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
             </section>
             <section className="flex flex-col items-end gap-0.5">
               <div className="flex text-[11px] font-medium items-center gap-2">
-                {formatBytes(data.status.MemUsed)} / {formatBytes(data.host.MemTotal)}
+                {formatBytes(data.status.MemUsed)} /{" "}
+                {formatBytes(data.host.MemTotal)}
               </div>
               <div className="flex text-[11px] font-medium items-center gap-2">
                 swap: {formatBytes(data.status.SwapUsed)}
               </div>
             </section>
           </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <AreaChart
               accessibilityLayer
               data={memChartData}
@@ -383,40 +428,40 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
         </section>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function DiskChart({ data }: { data: NezhaAPISafe }) {
-  const t = useTranslations("ServerDetailChartClient")
+  const t = useTranslations("ServerDetailChartClient");
 
-  const [diskChartData, setDiskChartData] = useState([] as diskChartData[])
+  const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
 
-  const { disk } = formatNezhaInfo(data)
+  const { disk } = formatNezhaInfo(data);
 
   useEffect(() => {
     if (data) {
-      const timestamp = Date.now().toString()
+      const timestamp = Date.now().toString();
-      let newData = [] as diskChartData[]
+      let newData = [] as diskChartData[];
       if (diskChartData.length === 0) {
         newData = [
           { timeStamp: timestamp, disk: disk },
           { timeStamp: timestamp, disk: disk },
-        ]
+        ];
       } else {
-        newData = [...diskChartData, { timeStamp: timestamp, disk: disk }]
+        newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
       }
       if (newData.length > 30) {
-        newData.shift()
+        newData.shift();
       }
-      setDiskChartData(newData)
+      setDiskChartData(newData);
     }
-  }, [data])
+  }, [data]);
 
   const chartConfig = {
     disk: {
       label: "Disk",
     },
-  } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card>
@@ -426,7 +471,9 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
             <p className="text-md font-medium">{t("Disk")}</p>
             <section className="flex flex-col items-end gap-0.5">
               <section className="flex items-center gap-2">
-                <p className="text-xs text-end w-10 font-medium">{disk.toFixed(0)}%</p>
+                <p className="text-xs text-end w-10 font-medium">
+                  {disk.toFixed(0)}%
+                </p>
                 <AnimatedCircularProgressBar
                   className="size-3 text-[0px]"
                   max={100}
@@ -436,11 +483,15 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
                 />
               </section>
               <div className="flex text-[11px] font-medium items-center gap-2">
-                {formatBytes(data.status.DiskUsed)} / {formatBytes(data.host.DiskTotal)}
+                {formatBytes(data.status.DiskUsed)} /{" "}
+                {formatBytes(data.host.DiskTotal)}
               </div>
             </section>
           </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <AreaChart
               accessibilityLayer
               data={diskChartData}
@@ -481,39 +532,44 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
         </section>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function NetworkChart({ data }: { data: NezhaAPISafe }) {
-  const t = useTranslations("ServerDetailChartClient")
+  const t = useTranslations("ServerDetailChartClient");
 
-  const [networkChartData, setNetworkChartData] = useState([] as networkChartData[])
+  const [networkChartData, setNetworkChartData] = useState(
+    [] as networkChartData[],
+  );
 
-  const { up, down } = formatNezhaInfo(data)
+  const { up, down } = formatNezhaInfo(data);
 
   useEffect(() => {
     if (data) {
-      const timestamp = Date.now().toString()
+      const timestamp = Date.now().toString();
-      let newData = [] as networkChartData[]
+      let newData = [] as networkChartData[];
       if (networkChartData.length === 0) {
         newData = [
           { timeStamp: timestamp, upload: up, download: down },
           { timeStamp: timestamp, upload: up, download: down },
-        ]
+        ];
       } else {
-        newData = [...networkChartData, { timeStamp: timestamp, upload: up, download: down }]
+        newData = [
+          ...networkChartData,
+          { timeStamp: timestamp, upload: up, download: down },
+        ];
       }
       if (newData.length > 30) {
-        newData.shift()
+        newData.shift();
       }
-      setNetworkChartData(newData)
+      setNetworkChartData(newData);
     }
-  }, [data])
+  }, [data]);
 
-  let maxDownload = Math.max(...networkChartData.map((item) => item.download))
+  let maxDownload = Math.max(...networkChartData.map((item) => item.download));
-  maxDownload = Math.ceil(maxDownload)
+  maxDownload = Math.ceil(maxDownload);
   if (maxDownload < 1) {
-    maxDownload = 1
+    maxDownload = 1;
   }
 
   const chartConfig = {
@@ -523,7 +579,7 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
     download: {
       label: "Download",
     },
-  } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card>
@@ -539,7 +595,9 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
                 </div>
               </div>
               <div className="flex flex-col w-20">
-                <p className=" text-xs text-muted-foreground">{t("Download")}</p>
+                <p className=" text-xs text-muted-foreground">
+                  {t("Download")}
+                </p>
                 <div className="flex items-center gap-1">
                   <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
                   <p className="text-xs font-medium">{down.toFixed(2)} M/s</p>
@@ -547,7 +605,10 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
               </div>
             </section>
           </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <LineChart
               accessibilityLayer
               data={networkChartData}
@@ -599,32 +660,37 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
         </section>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function ConnectChart({ data }: { data: NezhaAPISafe }) {
-  const [connectChartData, setConnectChartData] = useState([] as connectChartData[])
+  const [connectChartData, setConnectChartData] = useState(
+    [] as connectChartData[],
+  );
 
-  const { tcp, udp } = formatNezhaInfo(data)
+  const { tcp, udp } = formatNezhaInfo(data);
 
   useEffect(() => {
     if (data) {
-      const timestamp = Date.now().toString()
+      const timestamp = Date.now().toString();
-      let newData = [] as connectChartData[]
+      let newData = [] as connectChartData[];
       if (connectChartData.length === 0) {
         newData = [
           { timeStamp: timestamp, tcp: tcp, udp: udp },
           { timeStamp: timestamp, tcp: tcp, udp: udp },
-        ]
+        ];
       } else {
-        newData = [...connectChartData, { timeStamp: timestamp, tcp: tcp, udp: udp }]
+        newData = [
+          ...connectChartData,
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+        ];
       }
       if (newData.length > 30) {
-        newData.shift()
+        newData.shift();
       }
-      setConnectChartData(newData)
+      setConnectChartData(newData);
     }
-  }, [data])
+  }, [data]);
 
   const chartConfig = {
     tcp: {
@@ -633,7 +699,7 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) {
     udp: {
       label: "UDP",
     },
-  } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card>
@@ -657,7 +723,10 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) {
               </div>
             </section>
           </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <LineChart
               accessibilityLayer
               data={connectChartData}
@@ -706,5 +775,5 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) {
         </section>
       </CardContent>
     </Card>
-  )
+  );
 }

app/(main)/ClientComponents/ServerDetailClient.tsx

@@ -1,74 +1,86 @@
-"use client"
+"use client";
 
-import { ServerDetailLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading"
+import { ServerDetailLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
-import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api"
+import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
-import { BackIcon } from "@/components/Icon"
+import { BackIcon } from "@/components/Icon";
-import ServerFlag from "@/components/ServerFlag"
+import ServerFlag from "@/components/ServerFlag";
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/ui/badge";
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { cn, formatBytes, nezhaFetcher } from "@/lib/utils"
+import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import { notFound, useRouter } from "next/navigation"
+import { notFound, useRouter } from "next/navigation";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
-import useSWR from "swr"
+import useSWR from "swr";
-import useSWRImmutable from "swr/immutable"
+import useSWRImmutable from "swr/immutable";
 
-export default function ServerDetailClient({ server_id }: { server_id: number }) {
+export default function ServerDetailClient({
-  const t = useTranslations("ServerDetailClient")
+  server_id,
-  const router = useRouter()
+}: {
+  server_id: number;
+}) {
+  const t = useTranslations("ServerDetailClient");
+  const router = useRouter();
 
-  const [hasHistory, setHasHistory] = useState(false)
+  const [hasHistory, setHasHistory] = useState(false);
 
   useEffect(() => {
-    window.scrollTo({ top: 0, left: 0, behavior: "instant" })
+    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
-  }, [])
+  }, []);
 
   useEffect(() => {
-    const previousPath = sessionStorage.getItem("fromMainPage")
+    const previousPath = sessionStorage.getItem("fromMainPage");
     if (previousPath) {
-      setHasHistory(true)
+      setHasHistory(true);
     }
-  }, [])
+  }, []);
 
   const linkClick = () => {
     if (hasHistory) {
-      router.back()
+      router.back();
     } else {
-      router.push(`/`)
+      router.push(`/`);
     }
-  }
+  };
 
   const { data: allFallbackData, isLoading } = useSWRImmutable<ServerApi>(
     "/api/server",
     nezhaFetcher,
-  )
+  );
-  const fallbackData = allFallbackData?.result?.find((item) => item.id === server_id)
+  const fallbackData = allFallbackData?.result?.find(
+    (item) => item.id === server_id,
+  );
 
   if (!fallbackData && !isLoading) {
-    notFound()
+    notFound();
   }
 
-  const { data, error } = useSWR<NezhaAPISafe>(`/api/detail?server_id=${server_id}`, nezhaFetcher, {
+  const { data, error } = useSWR<NezhaAPISafe>(
-    refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+    `/api/detail?server_id=${server_id}`,
-    dedupingInterval: 1000,
+    nezhaFetcher,
-    fallbackData,
+    {
-    revalidateOnMount: false,
+      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
-    revalidateIfStale: false,
+      dedupingInterval: 1000,
-  })
+      fallbackData,
+      revalidateOnMount: false,
+      revalidateIfStale: false,
+    },
+  );
 
   if (error) {
     return (
       <>
         <div className="flex flex-col items-center justify-center">
           <p className="text-sm font-medium opacity-40">{error.message}</p>
-          <p className="text-sm font-medium opacity-40">{t("detail_fetch_error_message")}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("detail_fetch_error_message")}
+          </p>
         </div>
       </>
-    )
+    );
   }
 
-  if (!data) return <ServerDetailLoading />
+  if (!data) return <ServerDetailLoading />;
 
   return (
     <div>
@@ -151,7 +163,9 @@ export default function ServerDetailClient({ server_id }: { server_id: number })
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">{t("Region")}</p>
               <section className="flex items-start gap-1">
-                <div className="text-xs text-start">{data?.host.CountryCode.toUpperCase()}</div>
+                <div className="text-xs text-start">
+                  {data?.host.CountryCode.toUpperCase()}
+                </div>
                 <ServerFlag
                   className="text-[11px] -mt-[1px]"
                   country_code={data?.host.CountryCode}
@@ -204,8 +218,9 @@ export default function ServerDetailClient({ server_id }: { server_id: number })
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">{t("Load")}</p>
               <div className="text-xs">
-                {data.status.Load1.toFixed(2) || "0.00"} / {data.status.Load5.toFixed(2) || "0.00"}{" "}
+                {data.status.Load1.toFixed(2) || "0.00"} /{" "}
-                / {data.status.Load15.toFixed(2) || "0.00"}
+                {data.status.Load5.toFixed(2) || "0.00"} /{" "}
+                {data.status.Load15.toFixed(2) || "0.00"}
               </div>
             </section>
           </CardContent>
@@ -215,7 +230,10 @@ export default function ServerDetailClient({ server_id }: { server_id: number })
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">{t("Upload")}</p>
               {data.status.NetOutTransfer ? (
-                <div className="text-xs"> {formatBytes(data.status.NetOutTransfer)} </div>
+                <div className="text-xs">
+                  {" "}
+                  {formatBytes(data.status.NetOutTransfer)}{" "}
+                </div>
               ) : (
                 <div className="text-xs">Unknown</div>
               )}
@@ -227,7 +245,10 @@ export default function ServerDetailClient({ server_id }: { server_id: number })
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">{t("Download")}</p>
               {data.status.NetInTransfer ? (
-                <div className="text-xs"> {formatBytes(data.status.NetInTransfer)} </div>
+                <div className="text-xs">
+                  {" "}
+                  {formatBytes(data.status.NetInTransfer)}{" "}
+                </div>
               ) : (
                 <div className="text-xs">Unknown</div>
               )}
@@ -236,5 +257,5 @@ export default function ServerDetailClient({ server_id }: { server_id: number })
         </Card>
       </section>
     </div>
-  )
+  );
 }

app/(main)/ClientComponents/ServerDetailLoading.tsx

@@ -1,6 +1,6 @@
-import { BackIcon } from "@/components/Icon"
+import { BackIcon } from "@/components/Icon";
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@/components/ui/skeleton";
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
 
 export function ServerDetailChartLoading() {
   return (
@@ -14,17 +14,17 @@ export function ServerDetailChartLoading() {
         <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
       </section>
     </div>
-  )
+  );
 }
 
 export function ServerDetailLoading() {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <>
       <div
         onClick={() => {
-          router.push(`/`)
+          router.push(`/`);
         }}
         className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
       >
@@ -33,5 +33,5 @@ export function ServerDetailLoading() {
       </div>
       <Skeleton className="flex flex-wrap gap-2 h-[81px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
     </>
-  )
+  );
 }

app/(main)/ClientComponents/ServerIPInfo.tsx

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

app/(main)/ClientComponents/ServerListClient.tsx

@@ -1,79 +1,82 @@
-"use client"
+"use client";
 
-import { ServerApi } from "@/app/types/nezha-api"
+import { ServerApi } from "@/app/types/nezha-api";
-import ServerCard from "@/components/ServerCard"
+import ServerCard from "@/components/ServerCard";
-import ServerCardInline from "@/components/ServerCardInline"
+import ServerCardInline from "@/components/ServerCardInline";
-import Switch from "@/components/Switch"
+import Switch from "@/components/Switch";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { useFilter } from "@/lib/network-filter-context"
+import { useFilter } from "@/lib/network-filter-context";
-import { useStatus } from "@/lib/status-context"
+import { useStatus } from "@/lib/status-context";
-import { cn, nezhaFetcher } from "@/lib/utils"
+import { cn, nezhaFetcher } from "@/lib/utils";
-import { MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
+import { MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic"
+import dynamic from "next/dynamic";
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
-import useSWR from "swr"
+import useSWR from "swr";
 
-import GlobalLoading from "./GlobalLoading"
+import GlobalLoading from "./GlobalLoading";
 
 const ServerGlobal = dynamic(() => import("./Global"), {
   ssr: false,
   loading: () => <GlobalLoading />,
-})
+});
 
 export default function ServerListClient() {
-  const { status } = useStatus()
+  const { status } = useStatus();
-  const { filter } = useFilter()
+  const { filter } = useFilter();
-  const t = useTranslations("ServerListClient")
+  const t = useTranslations("ServerListClient");
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
-  const defaultTag = "defaultTag"
+  const defaultTag = "defaultTag";
 
-  const [tag, setTag] = useState<string>(defaultTag)
+  const [tag, setTag] = useState<string>(defaultTag);
-  const [showMap, setShowMap] = useState<boolean>(false)
+  const [showMap, setShowMap] = useState<boolean>(false);
-  const [inline, setInline] = useState<string>("0")
+  const [inline, setInline] = useState<string>("0");
 
   useEffect(() => {
-    const inlineState = localStorage.getItem("inline")
+    const inlineState = localStorage.getItem("inline");
     if (inlineState !== null) {
-      setInline(inlineState)
+      setInline(inlineState);
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    const savedTag = sessionStorage.getItem("selectedTag") || defaultTag
+    const savedTag = sessionStorage.getItem("selectedTag") || defaultTag;
-    setTag(savedTag)
+    setTag(savedTag);
 
-    restoreScrollPosition()
+    restoreScrollPosition();
-  }, [])
+  }, []);
 
   const handleTagChange = (newTag: string) => {
-    setTag(newTag)
+    setTag(newTag);
-    sessionStorage.setItem("selectedTag", newTag)
+    sessionStorage.setItem("selectedTag", newTag);
-    sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0))
+    sessionStorage.setItem(
-  }
+      "scrollPosition",
+      String(containerRef.current?.scrollTop || 0),
+    );
+  };
 
   const restoreScrollPosition = () => {
-    const savedPosition = sessionStorage.getItem("scrollPosition")
+    const savedPosition = sessionStorage.getItem("scrollPosition");
     if (savedPosition && containerRef.current) {
-      containerRef.current.scrollTop = Number(savedPosition)
+      containerRef.current.scrollTop = Number(savedPosition);
     }
-  }
+  };
 
   useEffect(() => {
     const handleRouteChange = () => {
-      restoreScrollPosition()
+      restoreScrollPosition();
-    }
+    };
 
-    window.addEventListener("popstate", handleRouteChange)
+    window.addEventListener("popstate", handleRouteChange);
     return () => {
-      window.removeEventListener("popstate", handleRouteChange)
+      window.removeEventListener("popstate", handleRouteChange);
-    }
+    };
-  }, [])
+  }, []);
 
   const { data, error } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
     refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 2000,
     dedupingInterval: 1000,
-  })
+  });
 
   if (error)
     return (
@@ -81,57 +84,61 @@ export default function ServerListClient() {
         <p className="text-sm font-medium opacity-40">{error.message}</p>
         <p className="text-sm font-medium opacity-40">{t("error_message")}</p>
       </div>
-    )
+    );
 
-  if (!data?.result) return null
+  if (!data?.result) return null;
 
-  const { result } = data
+  const { result } = data;
   const sortedServers = result.sort((a, b) => {
-    const displayIndexDiff = (b.display_index || 0) - (a.display_index || 0)
+    const displayIndexDiff = (b.display_index || 0) - (a.display_index || 0);
-    if (displayIndexDiff !== 0) return displayIndexDiff
+    if (displayIndexDiff !== 0) return displayIndexDiff;
-    return a.id - b.id
+    return a.id - b.id;
-  })
+  });
 
   const filteredServersByStatus =
     status === "all"
       ? sortedServers
       : sortedServers.filter((server) =>
           [status].includes(server.online_status ? "online" : "offline"),
-        )
+        );
 
-  const allTag = filteredServersByStatus.map((server) => server.tag).filter(Boolean)
+  const allTag = filteredServersByStatus
-  const uniqueTags = [...new Set(allTag)]
+    .map((server) => server.tag)
-  uniqueTags.unshift(defaultTag)
+    .filter(Boolean);
+  const uniqueTags = [...new Set(allTag)];
+  uniqueTags.unshift(defaultTag);
 
   const filteredServers =
     tag === defaultTag
       ? filteredServersByStatus
-      : filteredServersByStatus.filter((server) => server.tag === tag)
+      : filteredServersByStatus.filter((server) => server.tag === tag);
 
   if (filter) {
     filteredServers.sort((a, b) => {
-      if (!a.online_status && b.online_status) return 1
+      if (!a.online_status && b.online_status) return 1;
-      if (a.online_status && !b.online_status) return -1
+      if (a.online_status && !b.online_status) return -1;
-      if (!a.online_status && !b.online_status) return 0
+      if (!a.online_status && !b.online_status) return 0;
       return (
-        b.status.NetInSpeed + b.status.NetOutSpeed - (a.status.NetInSpeed + a.status.NetOutSpeed)
+        b.status.NetInSpeed +
-      )
+        b.status.NetOutSpeed -
-    })
+        (a.status.NetInSpeed + a.status.NetOutSpeed)
+      );
+    });
   }
 
-  const tagCountMap: Record<string, number> = {}
+  const tagCountMap: Record<string, number> = {};
   filteredServersByStatus.forEach((server) => {
     if (server.tag) {
-      tagCountMap[server.tag] = (tagCountMap[server.tag] || 0) + 1
+      tagCountMap[server.tag] = (tagCountMap[server.tag] || 0) + 1;
     }
-  })
+  });
 
   return (
     <>
       <section className="flex items-center gap-2 w-full overflow-hidden">
         <button
           onClick={() => {
-            setShowMap(!showMap)
+            setShowMap(!showMap);
           }}
           className={cn(
             "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
@@ -144,13 +151,14 @@ export default function ServerListClient() {
         </button>
         <button
           onClick={() => {
-            setInline(inline === "0" ? "1" : "0")
+            setInline(inline === "0" ? "1" : "0");
-            localStorage.setItem("inline", inline === "0" ? "1" : "0")
+            localStorage.setItem("inline", inline === "0" ? "1" : "0");
           }}
           className={cn(
             "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
             {
-              "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
+              "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500":
+                inline === "1",
             },
           )}
         >
@@ -178,12 +186,15 @@ export default function ServerListClient() {
       )}
 
       {inline === "0" && (
-        <section ref={containerRef} className="grid grid-cols-1 gap-2 md:grid-cols-2">
+        <section
+          ref={containerRef}
+          className="grid grid-cols-1 gap-2 md:grid-cols-2"
+        >
           {filteredServers.map((serverInfo) => (
             <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
           ))}
         </section>
       )}
     </>
-  )
+  );
 }

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -1,25 +1,31 @@
-"use client"
+"use client";
 
-import { ServerApi } from "@/app/types/nezha-api"
+import { ServerApi } from "@/app/types/nezha-api";
-import { Loader } from "@/components/loading/Loader"
+import { Loader } from "@/components/loading/Loader";
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { useFilter } from "@/lib/network-filter-context"
+import { useFilter } from "@/lib/network-filter-context";
-import { useStatus } from "@/lib/status-context"
+import { useStatus } from "@/lib/status-context";
-import { cn, formatBytes, nezhaFetcher } from "@/lib/utils"
+import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
-import blogMan from "@/public/blog-man.webp"
+import blogMan from "@/public/blog-man.webp";
-import { ArrowDownCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid"
+import {
-import { useTranslations } from "next-intl"
+  ArrowDownCircleIcon,
-import Image from "next/image"
+  ArrowUpCircleIcon,
-import useSWRImmutable from "swr/immutable"
+} from "@heroicons/react/20/solid";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import useSWRImmutable from "swr/immutable";
 
 export default function ServerOverviewClient() {
-  const { status, setStatus } = useStatus()
+  const { status, setStatus } = useStatus();
-  const { filter, setFilter } = useFilter()
+  const { filter, setFilter } = useFilter();
-  const t = useTranslations("ServerOverviewClient")
+  const t = useTranslations("ServerOverviewClient");
 
-  const { data, error, isLoading } = useSWRImmutable<ServerApi>("/api/server", nezhaFetcher)
+  const { data, error, isLoading } = useSWRImmutable<ServerApi>(
-  const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true"
+    "/api/server",
+    nezhaFetcher,
+  );
+  const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true";
 
   if (error) {
     return (
@@ -29,7 +35,7 @@ export default function ServerOverviewClient() {
         </p>
         <p className="text-sm font-medium opacity-40">{t("error_message")}</p>
       </div>
-    )
+    );
   }
 
   return (
@@ -37,20 +43,26 @@ export default function ServerOverviewClient() {
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
         <Card
           onClick={() => {
-            setFilter(false)
+            setFilter(false);
-            setStatus("all")
+            setStatus("all");
           }}
-          className={cn("cursor-pointer hover:border-blue-500 transition-all group")}
+          className={cn(
+            "cursor-pointer hover:border-blue-500 transition-all group",
+          )}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
-              <p className="text-sm font-medium md:text-base">{t("p_816-881_Totalservers")}</p>
+              <p className="text-sm font-medium md:text-base">
+                {t("p_816-881_Totalservers")}
+              </p>
               <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
                   <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
                 </span>
                 {data?.result ? (
-                  <div className="text-lg font-semibold">{data?.result.length}</div>
+                  <div className="text-lg font-semibold">
+                    {data?.result.length}
+                  </div>
                 ) : (
                   <div className="flex h-7 items-center">
                     <Loader visible={true} />
@@ -62,8 +74,8 @@ export default function ServerOverviewClient() {
         </Card>
         <Card
           onClick={() => {
-            setFilter(false)
+            setFilter(false);
-            setStatus("online")
+            setStatus("online");
           }}
           className={cn(
             "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
@@ -74,14 +86,18 @@ export default function ServerOverviewClient() {
         >
           <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
-              <p className="text-sm font-medium md:text-base">{t("p_1610-1676_Onlineservers")}</p>
+              <p className="text-sm font-medium md:text-base">
+                {t("p_1610-1676_Onlineservers")}
+              </p>
               <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
                   <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
                   <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
                 </span>
                 {data?.result ? (
-                  <div className="text-lg font-semibold">{data?.live_servers}</div>
+                  <div className="text-lg font-semibold">
+                    {data?.live_servers}
+                  </div>
                 ) : (
                   <div className="flex h-7 items-center">
                     <Loader visible={true} />
@@ -93,8 +109,8 @@ export default function ServerOverviewClient() {
         </Card>
         <Card
           onClick={() => {
-            setFilter(false)
+            setFilter(false);
-            setStatus("offline")
+            setStatus("offline");
           }}
           className={cn(
             "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
@@ -105,14 +121,18 @@ export default function ServerOverviewClient() {
         >
           <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
-              <p className="text-sm font-medium md:text-base">{t("p_2532-2599_Offlineservers")}</p>
+              <p className="text-sm font-medium md:text-base">
+                {t("p_2532-2599_Offlineservers")}
+              </p>
               <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
                   <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"></span>
                   <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
                 </span>
                 {data?.result ? (
-                  <div className="text-lg font-semibold">{data?.offline_servers}</div>
+                  <div className="text-lg font-semibold">
+                    {data?.offline_servers}
+                  </div>
                 ) : (
                   <div className="flex h-7 items-center">
                     <Loader visible={true} />
@@ -124,8 +144,8 @@ export default function ServerOverviewClient() {
         </Card>
         <Card
           onClick={() => {
-            setStatus("all")
+            setStatus("all");
-            setFilter(true)
+            setFilter(true);
           }}
           className={cn(
             "cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all group",
@@ -137,7 +157,9 @@ export default function ServerOverviewClient() {
           <CardContent className="flex h-full items-center relative px-6 py-3">
             <section className="flex flex-col gap-1 w-full">
               <div className="flex items-center w-full justify-between">
-                <p className="text-sm font-medium md:text-base">{t("network")}</p>
+                <p className="text-sm font-medium md:text-base">
+                  {t("network")}
+                </p>
               </div>
               {data?.result ? (
                 <>
@@ -184,5 +206,5 @@ export default function ServerOverviewClient() {
         </div>
       )}
     </>
-  )
+  );
 }

app/(main)/ClientComponents/TooltipContext.tsx

@@ -1,38 +1,38 @@
-"use client"
+"use client";
 
-import { ReactNode, createContext, useContext, useState } from "react"
+import { ReactNode, createContext, useContext, useState } from "react";
 
 export interface TooltipData {
-  centroid: [number, number]
+  centroid: [number, number];
-  country: string
+  country: string;
-  count: number
+  count: number;
   servers: Array<{
-    name: string
+    name: string;
-    status: boolean
+    status: boolean;
-  }>
+  }>;
 }
 
 interface TooltipContextType {
-  tooltipData: TooltipData | null
+  tooltipData: TooltipData | null;
-  setTooltipData: (data: TooltipData | null) => void
+  setTooltipData: (data: TooltipData | null) => void;
 }
 
-const TooltipContext = createContext<TooltipContextType | undefined>(undefined)
+const TooltipContext = createContext<TooltipContextType | undefined>(undefined);
 
 export function TooltipProvider({ children }: { children: ReactNode }) {
-  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null)
+  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
 
   return (
     <TooltipContext.Provider value={{ tooltipData, setTooltipData }}>
       {children}
     </TooltipContext.Provider>
-  )
+  );
 }
 
 export function useTooltip() {
-  const context = useContext(TooltipContext)
+  const context = useContext(TooltipContext);
   if (context === undefined) {
-    throw new Error("useTooltip must be used within a TooltipProvider")
+    throw new Error("useTooltip must be used within a TooltipProvider");
   }
-  return context
+  return context;
 }

app/(main)/footer.tsx

@@ -1,9 +1,9 @@
-import pack from "@/package.json"
+import pack from "@/package.json";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 export default function Footer() {
-  const t = useTranslations("Footer")
+  const t = useTranslations("Footer");
-  const version = pack.version
+  const version = pack.version;
   return (
     <footer className="mx-auto w-full max-w-5xl">
       <section className="flex flex-col">
@@ -31,5 +31,5 @@ export default function Footer() {
         </section>
       </section>
     </footer>
-  )
+  );
 }

app/(main)/header.tsx

@@ -1,30 +1,30 @@
-"use client"
+"use client";
 
-import { LanguageSwitcher } from "@/components/LanguageSwitcher"
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
-import { ModeToggle } from "@/components/ThemeSwitcher"
+import { ModeToggle } from "@/components/ThemeSwitcher";
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@/components/ui/skeleton";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { DateTime } from "luxon"
+import { DateTime } from "luxon";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react";
 
 function Header() {
-  const t = useTranslations("Header")
+  const t = useTranslations("Header");
-  const customLogo = getEnv("NEXT_PUBLIC_CustomLogo")
+  const customLogo = getEnv("NEXT_PUBLIC_CustomLogo");
-  const customTitle = getEnv("NEXT_PUBLIC_CustomTitle")
+  const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
-  const customDescription = getEnv("NEXT_PUBLIC_CustomDescription")
+  const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
 
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
         <section
           onClick={() => {
-            sessionStorage.removeItem("selectedTag")
+            sessionStorage.removeItem("selectedTag");
-            router.push(`/`)
+            router.push(`/`);
           }}
           className="flex cursor-pointer items-center text-base font-medium"
         >
@@ -45,9 +45,14 @@ function Header() {
             />
           </div>
           {customTitle ? customTitle : "NezhaDash"}
-          <Separator orientation="vertical" className="mx-2 hidden h-4 w-[1px] md:block" />
+          <Separator
+            orientation="vertical"
+            className="mx-2 hidden h-4 w-[1px] md:block"
+          />
           <p className="hidden text-sm font-medium opacity-40 md:block">
-            {customDescription ? customDescription : t("p_1079-1199_Simpleandbeautifuldashbo")}
+            {customDescription
+              ? customDescription
+              : t("p_1079-1199_Simpleandbeautifuldashbo")}
           </p>
         </section>
         <section className="flex items-center gap-2">
@@ -58,20 +63,20 @@ function Header() {
       </section>
       <Overview />
     </div>
-  )
+  );
 }
 
 type links = {
-  link: string
+  link: string;
-  name: string
+  name: string;
-}
+};
 
 function Links() {
-  const linksEnv = getEnv("NEXT_PUBLIC_Links")
+  const linksEnv = getEnv("NEXT_PUBLIC_Links");
 
-  const links: links[] | null = linksEnv ? JSON.parse(linksEnv) : null
+  const links: links[] | null = linksEnv ? JSON.parse(linksEnv) : null;
 
-  if (!links) return null
+  if (!links) return null;
 
   return (
     <div className="flex items-center gap-2">
@@ -86,45 +91,47 @@ function Links() {
           >
             {link.name}
           </a>
-        )
+        );
       })}
     </div>
-  )
+  );
 }
 
 // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
 const useInterval = (callback: () => void, delay: number | null) => {
-  const savedCallback = useRef<() => void>(() => {})
+  const savedCallback = useRef<() => void>(() => {});
   useEffect(() => {
-    savedCallback.current = callback
+    savedCallback.current = callback;
-  })
+  });
   useEffect(() => {
     if (delay !== null) {
-      const interval = setInterval(() => savedCallback.current(), delay || 0)
+      const interval = setInterval(() => savedCallback.current(), delay || 0);
-      return () => clearInterval(interval)
+      return () => clearInterval(interval);
     }
-    return undefined
+    return undefined;
-  }, [delay])
+  }, [delay]);
-}
+};
 function Overview() {
-  const t = useTranslations("Overview")
+  const t = useTranslations("Overview");
-  const [mouted, setMounted] = useState(false)
+  const [mouted, setMounted] = useState(false);
   useEffect(() => {
-    setMounted(true)
+    setMounted(true);
-  }, [])
+  }, []);
-  const timeOption = DateTime.TIME_SIMPLE
+  const timeOption = DateTime.TIME_SIMPLE;
-  timeOption.hour12 = true
+  timeOption.hour12 = true;
   const [timeString, setTimeString] = useState(
     DateTime.now().setLocale("en-US").toLocaleString(timeOption),
-  )
+  );
   useInterval(() => {
-    setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption))
+    setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
-  }, 1000)
+  }, 1000);
   return (
     <section className={"mt-10 flex flex-col md:mt-16"}>
       <p className="text-base font-semibold">{t("p_2277-2331_Overview")}</p>
       <div className="flex items-center gap-1.5">
-        <p className="text-sm font-medium opacity-50">{t("p_2390-2457_wherethetimeis")}</p>
+        <p className="text-sm font-medium opacity-50">
+          {t("p_2390-2457_wherethetimeis")}
+        </p>
         {mouted ? (
           <p className="text-sm font-medium">{timeString}</p>
         ) : (
@@ -132,6 +139,6 @@ function Overview() {
         )}
       </div>
     </section>
-  )
+  );
 }
-export default Header
+export default Header;

app/(main)/layout.tsx

@@ -1,13 +1,13 @@
-import Footer from "@/app/(main)/footer"
+import Footer from "@/app/(main)/footer";
-import Header from "@/app/(main)/header"
+import Header from "@/app/(main)/header";
-import { auth } from "@/auth"
+import { auth } from "@/auth";
-import { SignIn } from "@/components/SignIn"
+import { SignIn } from "@/components/SignIn";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import React from "react"
+import React from "react";
 
 type DashboardProps = {
-  children: React.ReactNode
+  children: React.ReactNode;
-}
+};
 export default function MainLayout({ children }: DashboardProps) {
   return (
     <div className="flex min-h-screen w-full flex-col">
@@ -17,15 +17,15 @@ export default function MainLayout({ children }: DashboardProps) {
         <Footer />
       </main>
     </div>
-  )
+  );
 }
 
 async function AuthProtected({ children }: DashboardProps) {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      return <SignIn />
+      return <SignIn />;
     }
   }
-  return children
+  return children;
 }

app/(main)/page.tsx

@@ -1,5 +1,5 @@
-import ServerList from "@/components/ServerList"
+import ServerList from "@/components/ServerList";
-import ServerOverview from "@/components/ServerOverview"
+import ServerOverview from "@/components/ServerOverview";
 
 export default async function Home() {
   return (
@@ -7,5 +7,5 @@ export default async function Home() {
       <ServerOverview />
       <ServerList />
     </div>
-  )
+  );
 }

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

@@ -1,36 +1,48 @@
-"use client"
+"use client";
 
-import { NetworkChartClient } from "@/app/(main)/ClientComponents/NetworkChart"
+import { NetworkChartClient } from "@/app/(main)/ClientComponents/NetworkChart";
-import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailChartClient"
+import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailChartClient";
-import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient"
+import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient";
-import TabSwitch from "@/components/TabSwitch"
+import TabSwitch from "@/components/TabSwitch";
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/components/ui/separator";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { use, useState } from "react"
+import { use, useState } from "react";
 
-import ServerIPInfo from "../../ClientComponents/ServerIPInfo"
+import ServerIPInfo from "../../ClientComponents/ServerIPInfo";
 
 export default function Page(props: { params: Promise<{ id: string }> }) {
-  const params = use(props.params)
+  const params = use(props.params);
-  const tabs = ["Detail", "Network"]
+  const tabs = ["Detail", "Network"];
-  const [currentTab, setCurrentTab] = useState(tabs[0])
+  const [currentTab, setCurrentTab] = useState(tabs[0]);
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-2">
       <ServerDetailClient server_id={Number(params.id)} />
       <section className="flex items-center my-2 w-full">
         <Separator className="flex-1" />
         <div className="flex justify-center w-full max-w-[200px]">
-          <TabSwitch tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
+          <TabSwitch
+            tabs={tabs}
+            currentTab={currentTab}
+            setCurrentTab={setCurrentTab}
+          />
         </div>
         <Separator className="flex-1" />
       </section>
       <div style={{ display: currentTab === tabs[0] ? "block" : "none" }}>
-        <ServerDetailChartClient server_id={Number(params.id)} show={currentTab === tabs[0]} />
+        <ServerDetailChartClient
+          server_id={Number(params.id)}
+          show={currentTab === tabs[0]}
+        />
       </div>
       <div style={{ display: currentTab === tabs[1] ? "block" : "none" }}>
-        {getEnv("NEXT_PUBLIC_ShowIpInfo") && <ServerIPInfo server_id={Number(params.id)} />}
+        {getEnv("NEXT_PUBLIC_ShowIpInfo") && (
-        <NetworkChartClient server_id={Number(params.id)} show={currentTab === tabs[1]} />
+          <ServerIPInfo server_id={Number(params.id)} />
+        )}
+        <NetworkChartClient
+          server_id={Number(params.id)}
+          show={currentTab === tabs[1]}
+        />
       </div>
     </div>
-  )
+  );
 }

app/api/auth/[...nextauth]/route.ts

@@ -1,3 +1,3 @@
-import { handlers } from "@/auth"
+import { handlers } from "@/auth";
 
-export const { GET, POST } = handlers
+export const { GET, POST } = handlers;

app/api/detail/route.ts

@@ -1,44 +1,50 @@
-import { auth } from "@/auth"
+import { auth } from "@/auth";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetServerDetail } from "@/lib/serverFetch"
+import { GetServerDetail } from "@/lib/serverFetch";
-import { redirect } from "next/navigation"
+import { redirect } from "next/navigation";
-import { NextRequest, NextResponse } from "next/server"
+import { NextRequest, NextResponse } from "next/server";
 
-export const dynamic = "force-dynamic"
+export const dynamic = "force-dynamic";
 
 interface ResError extends Error {
-  statusCode: number
+  statusCode: number;
-  message: string
+  message: string;
 }
 
 export async function GET(req: NextRequest) {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      redirect("/")
+      redirect("/");
     }
   }
 
-  const { searchParams } = new URL(req.url)
+  const { searchParams } = new URL(req.url);
-  const server_id = searchParams.get("server_id")
+  const server_id = searchParams.get("server_id");
 
   if (!server_id) {
-    return NextResponse.json({ error: "server_id is required" }, { status: 400 })
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
   }
 
   try {
-    const serverIdNum = parseInt(server_id, 10)
+    const serverIdNum = parseInt(server_id, 10);
     if (isNaN(serverIdNum)) {
-      return NextResponse.json({ error: "server_id must be a valid number" }, { status: 400 })
+      return NextResponse.json(
+        { error: "server_id must be a valid number" },
+        { status: 400 },
+      );
     }
 
-    const detailData = await GetServerDetail({ server_id: serverIdNum })
+    const detailData = await GetServerDetail({ server_id: serverIdNum });
-    return NextResponse.json(detailData, { status: 200 })
+    return NextResponse.json(detailData, { status: 200 });
   } catch (error) {
-    const err = error as ResError
+    const err = error as ResError;
-    console.error("Error in GET handler:", err)
+    console.error("Error in GET handler:", err);
-    const statusCode = err.statusCode || 500
+    const statusCode = err.statusCode || 500;
-    const message = err.message || "Internal Server Error"
+    const message = err.message || "Internal Server Error";
-    return NextResponse.json({ error: message }, { status: statusCode })
+    return NextResponse.json({ error: message }, { status: statusCode });
   }
 }

app/api/monitor/route.ts

@@ -1,46 +1,52 @@
-import { auth } from "@/auth"
+import { auth } from "@/auth";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetServerMonitor } from "@/lib/serverFetch"
+import { GetServerMonitor } from "@/lib/serverFetch";
-import { redirect } from "next/navigation"
+import { redirect } from "next/navigation";
-import { NextRequest, NextResponse } from "next/server"
+import { NextRequest, NextResponse } from "next/server";
 
-export const dynamic = "force-dynamic"
+export const dynamic = "force-dynamic";
 
 interface ResError extends Error {
-  statusCode: number
+  statusCode: number;
-  message: string
+  message: string;
 }
 
 export async function GET(req: NextRequest) {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      redirect("/")
+      redirect("/");
     }
   }
 
-  const { searchParams } = new URL(req.url)
+  const { searchParams } = new URL(req.url);
-  const server_id = searchParams.get("server_id")
+  const server_id = searchParams.get("server_id");
 
   if (!server_id) {
-    return NextResponse.json({ error: "server_id is required" }, { status: 400 })
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
   }
 
   try {
-    const serverIdNum = parseInt(server_id, 10)
+    const serverIdNum = parseInt(server_id, 10);
     if (isNaN(serverIdNum)) {
-      return NextResponse.json({ error: "server_id must be a number" }, { status: 400 })
+      return NextResponse.json(
+        { error: "server_id must be a number" },
+        { status: 400 },
+      );
     }
 
     const monitorData = await GetServerMonitor({
       server_id: serverIdNum,
-    })
+    });
-    return NextResponse.json(monitorData, { status: 200 })
+    return NextResponse.json(monitorData, { status: 200 });
   } catch (error) {
-    const err = error as ResError
+    const err = error as ResError;
-    console.error("Error in GET handler:", err)
+    console.error("Error in GET handler:", err);
-    const statusCode = err.statusCode || 500
+    const statusCode = err.statusCode || 500;
-    const message = err.message || "Internal Server Error"
+    const message = err.message || "Internal Server Error";
-    return NextResponse.json({ error: message }, { status: statusCode })
+    return NextResponse.json({ error: message }, { status: statusCode });
   }
 }

app/api/server-ip/route.ts

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

app/api/server/route.ts

@@ -1,32 +1,32 @@
-import { auth } from "@/auth"
+import { auth } from "@/auth";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetNezhaData } from "@/lib/serverFetch"
+import { GetNezhaData } from "@/lib/serverFetch";
-import { redirect } from "next/navigation"
+import { redirect } from "next/navigation";
-import { NextResponse } from "next/server"
+import { NextResponse } from "next/server";
 
-export const dynamic = "force-dynamic"
+export const dynamic = "force-dynamic";
 
 interface ResError extends Error {
-  statusCode: number
+  statusCode: number;
-  message: string
+  message: string;
 }
 
 export async function GET() {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      redirect("/")
+      redirect("/");
     }
   }
 
   try {
-    const data = await GetNezhaData()
+    const data = await GetNezhaData();
-    return NextResponse.json(data, { status: 200 })
+    return NextResponse.json(data, { status: 200 });
   } catch (error) {
-    const err = error as ResError
+    const err = error as ResError;
-    console.error("Error in GET handler:", err)
+    console.error("Error in GET handler:", err);
-    const statusCode = err.statusCode || 500
+    const statusCode = err.statusCode || 500;
-    const message = err.message || "Internal Server Error"
+    const message = err.message || "Internal Server Error";
-    return NextResponse.json({ error: message }, { status: statusCode })
+    return NextResponse.json({ error: message }, { status: statusCode });
   }
 }

app/layout.tsx

@@ -1,28 +1,28 @@
 // @auto-i18n-check. Please do not delete the line.
-import { ThemeColorManager } from "@/components/ThemeColorManager"
+import { ThemeColorManager } from "@/components/ThemeColorManager";
-import { MotionProvider } from "@/components/motion/motion-provider"
+import { MotionProvider } from "@/components/motion/motion-provider";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { FilterProvider } from "@/lib/network-filter-context"
+import { FilterProvider } from "@/lib/network-filter-context";
-import { StatusProvider } from "@/lib/status-context"
+import { StatusProvider } from "@/lib/status-context";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import "@/styles/globals.css"
+import "@/styles/globals.css";
-import type { Metadata } from "next"
+import type { Metadata } from "next";
-import { Viewport } from "next"
+import { Viewport } from "next";
-import { NextIntlClientProvider } from "next-intl"
+import { NextIntlClientProvider } from "next-intl";
-import { getLocale, getMessages } from "next-intl/server"
+import { getLocale, getMessages } from "next-intl/server";
-import { PublicEnvScript } from "next-runtime-env"
+import { PublicEnvScript } from "next-runtime-env";
-import { ThemeProvider } from "next-themes"
+import { ThemeProvider } from "next-themes";
-import { Inter as FontSans } from "next/font/google"
+import { Inter as FontSans } from "next/font/google";
-import React from "react"
+import React from "react";
 
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
-})
+});
 
-const customTitle = getEnv("NEXT_PUBLIC_CustomTitle")
+const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
-const customDescription = getEnv("NEXT_PUBLIC_CustomDescription")
+const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
-const disableIndex = getEnv("NEXT_PUBLIC_DisableIndex")
+const disableIndex = getEnv("NEXT_PUBLIC_DisableIndex");
 
 export const metadata: Metadata = {
   manifest: "/manifest.json",
@@ -37,18 +37,22 @@ export const metadata: Metadata = {
     index: disableIndex ? false : true,
     follow: disableIndex ? false : true,
   },
-}
+};
 
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-}
+};
 
-export default async function LocaleLayout({ children }: { children: React.ReactNode }) {
+export default async function LocaleLayout({
-  const locale = await getLocale()
+  children,
-  const messages = await getMessages()
+}: {
+  children: React.ReactNode;
+}) {
+  const locale = await getLocale();
+  const messages = await getMessages();
 
   return (
     <html lang={locale} suppressHydrationWarning>
@@ -63,7 +67,12 @@ export default async function LocaleLayout({ children }: { children: React.React
           href="https://fastly.jsdelivr.net/npm/font-logos@1/assets/font-logos.css"
         />
       </head>
-      <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable,
+        )}
+      >
         <MotionProvider>
           <ThemeProvider
             attribute="class"
@@ -83,5 +92,5 @@ export default async function LocaleLayout({ children }: { children: React.React
         </MotionProvider>
       </body>
     </html>
-  )
+  );
 }

app/not-found.tsx

@@ -1,11 +1,11 @@
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import Link from "next/link"
+import Link from "next/link";
 
-import Footer from "./(main)/footer"
+import Footer from "./(main)/footer";
-import Header from "./(main)/header"
+import Header from "./(main)/header";
 
 export default function NotFoundPage() {
-  const t = useTranslations("NotFoundPage")
+  const t = useTranslations("NotFoundPage");
   return (
     <div className="flex min-h-screen w-full flex-col">
       <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">
@@ -13,11 +13,13 @@ export default function NotFoundPage() {
         <section className="flex flex-col items-center min-h-44 justify-center gap-2">
           <p className="text-sm font-semibold">{t("h1_490-590_404NotFound")}</p>
           <Link href="/" className="flex items-center gap-1">
-            <p className="text-sm font-medium opacity-40">{t("h1_490-590_404NotFoundBack")}</p>
+            <p className="text-sm font-medium opacity-40">
+              {t("h1_490-590_404NotFoundBack")}
+            </p>
           </Link>
         </section>
         <Footer />
       </main>
     </div>
-  )
+  );
 }

app/types/nezha-api.ts

@@ -1,77 +1,77 @@
 export type ServerApi = {
-  live_servers: number
+  live_servers: number;
-  offline_servers: number
+  offline_servers: number;
-  total_out_bandwidth: number
+  total_out_bandwidth: number;
-  total_in_bandwidth: number
+  total_in_bandwidth: number;
-  total_out_speed: number
+  total_out_speed: number;
-  total_in_speed: number
+  total_in_speed: number;
-  result: NezhaAPISafe[]
+  result: NezhaAPISafe[];
-}
+};
 
-export type NezhaAPISafe = Omit<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">
+export type NezhaAPISafe = Omit<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">;
 
 export interface NezhaAPI {
-  id: number
+  id: number;
-  name: string
+  name: string;
-  tag: string
+  tag: string;
-  last_active: number
+  last_active: number;
-  online_status: boolean
+  online_status: boolean;
-  ipv4: string
+  ipv4: string;
-  ipv6: string
+  ipv6: string;
-  valid_ip: string
+  valid_ip: string;
-  display_index: number
+  display_index: number;
-  hide_for_guest: boolean
+  hide_for_guest: boolean;
-  host: NezhaAPIHost
+  host: NezhaAPIHost;
-  status: NezhaAPIStatus
+  status: NezhaAPIStatus;
 }
 
 export interface NezhaAPIHost {
-  Platform: string
+  Platform: string;
-  PlatformVersion: string
+  PlatformVersion: string;
-  CPU: string[]
+  CPU: string[];
-  MemTotal: number
+  MemTotal: number;
-  DiskTotal: number
+  DiskTotal: number;
-  SwapTotal: number
+  SwapTotal: number;
-  Arch: string
+  Arch: string;
-  Virtualization: string
+  Virtualization: string;
-  BootTime: number
+  BootTime: number;
-  CountryCode: string
+  CountryCode: string;
-  Version: string
+  Version: string;
-  GPU: string[]
+  GPU: string[];
 }
 
 export interface NezhaAPIStatus {
-  CPU: number
+  CPU: number;
-  MemUsed: number
+  MemUsed: number;
-  SwapUsed: number
+  SwapUsed: number;
-  DiskUsed: number
+  DiskUsed: number;
-  NetInTransfer: number
+  NetInTransfer: number;
-  NetOutTransfer: number
+  NetOutTransfer: number;
-  NetInSpeed: number
+  NetInSpeed: number;
-  NetOutSpeed: number
+  NetOutSpeed: number;
-  Uptime: number
+  Uptime: number;
-  Load1: number
+  Load1: number;
-  Load5: number
+  Load5: number;
-  Load15: number
+  Load15: number;
-  TcpConnCount: number
+  TcpConnCount: number;
-  UdpConnCount: number
+  UdpConnCount: number;
-  ProcessCount: number
+  ProcessCount: number;
-  Temperatures: number
+  Temperatures: number;
-  GPU: number
+  GPU: number;
 }
 
 export type ServerMonitorChart = {
   [key: string]: {
-    created_at: number
+    created_at: number;
-    avg_delay: number
+    avg_delay: number;
-  }[]
+  }[];
-}
+};
 
 export interface NezhaAPIMonitor {
-  monitor_id: number
+  monitor_id: number;
-  monitor_name: string
+  monitor_name: string;
-  server_id: number
+  server_id: number;
-  server_name: string
+  server_name: string;
-  created_at: number[]
+  created_at: number[];
-  avg_delay: number[]
+  avg_delay: number[];
 }

app/types/utils.ts

@@ -1 +1,2 @@
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>;

auth.ts

@@ -1,7 +1,7 @@
-import NextAuth from "next-auth"
+import NextAuth from "next-auth";
-import CredentialsProvider from "next-auth/providers/credentials"
+import CredentialsProvider from "next-auth/providers/credentials";
 
-import getEnv from "./lib/env-entry"
+import getEnv from "./lib/env-entry";
 
 export const { handlers, signIn, signOut, auth } = NextAuth({
   secret: process.env.AUTH_SECRET ?? "this_is_nezha_dash_web_secret",
@@ -12,21 +12,21 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
       credentials: { password: { label: "Password", type: "password" } },
       // authorization function
       async authorize(credentials) {
-        const { password } = credentials
+        const { password } = credentials;
         if (password === getEnv("SitePassword")) {
-          return { id: "nezha-dash-auth" }
+          return { id: "nezha-dash-auth" };
         }
-        return { error: "Invalid password" }
+        return { error: "Invalid password" };
       },
     }),
   ],
   callbacks: {
     async signIn({ user }) {
-      // @ts-expect-error user is not null
+      // @ts-ignore
       if (user.error) {
-        return false
+        return false;
       }
-      return true
+      return true;
     },
   },
-})
+});

components/BlurLayer.tsx

@@ -1,20 +1,20 @@
-import React from "react"
+import React from "react";
 
 const BlurLayers = () => {
   const computeLayerStyle = (index: number) => {
-    const blurAmount = index * 3.7037
+    const blurAmount = index * 3.7037;
-    const maskStart = index * 10
+    const maskStart = index * 10;
-    let maskEnd = maskStart + 20
+    let maskEnd = maskStart + 20;
     if (maskEnd > 100) {
-      maskEnd = 100
+      maskEnd = 100;
     }
     return {
       backdropFilter: `blur-sm(${blurAmount}px)`,
       WebkitBackdropFilter: `blur-sm(${blurAmount}px)`,
       zIndex: index + 1,
       maskImage: `linear-gradient(rgba(0, 0, 0, 0) ${maskStart}%, rgb(0, 0, 0) ${maskEnd}%)`,
-    }
+    };
-  }
+  };
 
   // 根据层数动态生成层
   const layers = Array.from({ length: 5 }).map((_, index) => (
@@ -23,13 +23,13 @@ const BlurLayers = () => {
       className={"absolute inset-0 h-full w-full"}
       style={computeLayerStyle(index)}
     />
-  ))
+  ));
 
   return (
     <div className={"fixed bottom-0 left-0 right-0 z-50 h-[140px]"}>
       <div className={"relative h-full"}>{layers}</div>
     </div>
-  )
+  );
-}
+};
 
-export default BlurLayers
+export default BlurLayers;

components/GlobalBackButton.tsx

@@ -1,31 +1,31 @@
-"use client"
+"use client";
 
-import { useFilter } from "@/lib/network-filter-context"
+import { useFilter } from "@/lib/network-filter-context";
-import { useStatus } from "@/lib/status-context"
+import { useStatus } from "@/lib/status-context";
-import { ServerStackIcon } from "@heroicons/react/20/solid"
+import { ServerStackIcon } from "@heroicons/react/20/solid";
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
-import { useEffect } from "react"
+import { useEffect } from "react";
 
 export default function GlobalBackButton() {
-  const router = useRouter()
+  const router = useRouter();
-  const { setStatus } = useStatus()
+  const { setStatus } = useStatus();
-  const { setFilter } = useFilter()
+  const { setFilter } = useFilter();
 
   useEffect(() => {
-    setStatus("all")
+    setStatus("all");
-    setFilter(false)
+    setFilter(false);
-    sessionStorage.removeItem("selectedTag")
+    sessionStorage.removeItem("selectedTag");
-    router.prefetch(`/`)
+    router.prefetch(`/`);
-  }, [])
+  }, []);
 
   return (
     <button
       onClick={() => {
-        router.push(`/`)
+        router.push(`/`);
       }}
       className="rounded-[50px] mt-[1px] w-fit text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-green-600 hover:bg-green-500 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] hover:shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] "
     >
       <ServerStackIcon className="size-[13px]" />
     </button>
-  )
+  );
 }

components/Icon.tsx

@@ -1,11 +1,11 @@
-import Image from "next/image"
+import Image from "next/image";
 
 export function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg viewBox="0 0 496 512" fill="white" {...props}>
       <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
     </svg>
-  )
+  );
 }
 
 export function BackIcon() {
@@ -30,5 +30,5 @@ export function BackIcon() {
         height="20"
       />
     </>
-  )
+  );
 }

components/LanguageSwitcher.tsx

@@ -1,25 +1,25 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
-import { localeItems } from "@/i18n-metadata"
+import { localeItems } from "@/i18n-metadata";
-import { setUserLocale } from "@/i18n/locale"
+import { setUserLocale } from "@/i18n/locale";
-import { CheckCircleIcon } from "@heroicons/react/20/solid"
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { useLocale } from "next-intl"
+import { useLocale } from "next-intl";
-import * as React from "react"
+import * as React from "react";
 
 export function LanguageSwitcher() {
-  const locale = useLocale()
+  const locale = useLocale();
 
   const handleSelect = (e: Event, newLocale: string) => {
-    e.preventDefault() // 阻止默认的关闭行为
+    e.preventDefault(); // 阻止默认的关闭行为
-    setUserLocale(newLocale)
+    setUserLocale(newLocale);
-  }
+  };
 
   return (
     <DropdownMenu>
@@ -40,10 +40,11 @@ export function LanguageSwitcher() {
             onSelect={(e) => handleSelect(e, item.code)}
             className={locale === item.code ? "bg-muted gap-3" : ""}
           >
-            {item.name} {locale === item.code && <CheckCircleIcon className="size-4" />}
+            {item.name}{" "}
+            {locale === item.code && <CheckCircleIcon className="size-4" />}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }

components/ServerCard.tsx

@@ -1,26 +1,35 @@
-import { NezhaAPISafe } from "@/app/types/nezha-api"
+import { NezhaAPISafe } from "@/app/types/nezha-api";
-import ServerFlag from "@/components/ServerFlag"
+import ServerFlag from "@/components/ServerFlag";
-import ServerUsageBar from "@/components/ServerUsageBar"
+import ServerUsageBar from "@/components/ServerUsageBar";
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card"
+import { Card } from "@/components/ui/card";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
+import {
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils"
+  GetFontLogoClass,
-import { useTranslations } from "next-intl"
+  GetOsName,
-import Link from "next/link"
+  MageMicrosoftWindows,
+} from "@/lib/logo-class";
+import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
 
-export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe }) {
+export default function ServerCard({
-  const t = useTranslations("ServerCard")
+  serverInfo,
+}: {
+  serverInfo: NezhaAPISafe;
+}) {
+  const t = useTranslations("ServerCard");
   const { id, name, country_code, online, cpu, up, down, mem, stg, host } =
-    formatNezhaInfo(serverInfo)
+    formatNezhaInfo(serverInfo);
 
-  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true"
+  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
-  const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true"
+  const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
-  const fixedTopServerName = getEnv("NEXT_PUBLIC_FixedTopServerName") === "true"
+  const fixedTopServerName =
+    getEnv("NEXT_PUBLIC_FixedTopServerName") === "true";
 
   const saveSession = () => {
-    sessionStorage.setItem("fromMainPage", "true")
+    sessionStorage.setItem("fromMainPage", "true");
-  }
+  };
 
   return online ? (
     <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
@@ -66,7 +75,11 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe })
             })}
           >
             {fixedTopServerName && (
-              <div className={"hidden col-span-1 items-center lg:flex lg:flex-row gap-2"}>
+              <div
+                className={
+                  "hidden col-span-1 items-center lg:flex lg:flex-row gap-2"
+                }
+              >
                 <div className="text-xs font-semibold">
                   {host.Platform.includes("Windows") ? (
                     <MageMicrosoftWindows className="size-[10px]" />
@@ -77,36 +90,48 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe })
                 <div className={"flex w-14 flex-col"}>
                   <p className="text-xs text-muted-foreground">{t("System")}</p>
                   <div className="flex items-center text-[10.5px] font-semibold">
-                    {host.Platform.includes("Windows") ? "Windows" : GetOsName(host.Platform)}
+                    {host.Platform.includes("Windows")
+                      ? "Windows"
+                      : GetOsName(host.Platform)}
                   </div>
                 </div>
               </div>
             )}
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("CPU")}</p>
-              <div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {cpu.toFixed(2)}%
+              </div>
               <ServerUsageBar value={cpu} />
             </div>
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("Mem")}</p>
-              <div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {mem.toFixed(2)}%
+              </div>
               <ServerUsageBar value={mem} />
             </div>
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("STG")}</p>
-              <div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {stg.toFixed(2)}%
+              </div>
               <ServerUsageBar value={stg} />
             </div>
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("Upload")}</p>
               <div className="flex items-center text-xs font-semibold">
-                {up >= 1024 ? `${(up / 1024).toFixed(2)}G/s` : `${up.toFixed(2)}M/s`}
+                {up >= 1024
+                  ? `${(up / 1024).toFixed(2)}G/s`
+                  : `${up.toFixed(2)}M/s`}
               </div>
             </div>
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("Download")}</p>
               <div className="flex items-center text-xs font-semibold">
-                {down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : `${down.toFixed(2)}M/s`}
+                {down >= 1024
+                  ? `${(down / 1024).toFixed(2)}G/s`
+                  : `${down.toFixed(2)}M/s`}
               </div>
             </div>
           </section>
@@ -133,7 +158,9 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe })
     <Card
       className={cn(
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5",
-        showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
+        showNetTransfer
+          ? "lg:min-h-[91px] min-h-[123px]"
+          : "lg:min-h-[61px] min-h-[93px]",
         {
           "flex-col": fixedTopServerName,
           "lg:flex-row": !fixedTopServerName,
@@ -148,16 +175,24 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe })
       >
         <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
         <div
-          className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}
+          className={cn(
+            "flex items-center justify-center",
+            showFlag ? "min-w-[17px]" : "min-w-0",
+          )}
         >
           {showFlag ? <ServerFlag country_code={country_code} /> : null}
         </div>
         <div className="relative">
-          <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}>
+          <p
+            className={cn(
+              "break-all font-bold tracking-tight",
+              showFlag ? "text-xs" : "text-sm",
+            )}
+          >
             {name}
           </p>
         </div>
       </section>
     </Card>
-  )
+  );
 }

components/ServerCardInline.tsx

@@ -1,25 +1,33 @@
-import { NezhaAPISafe } from "@/app/types/nezha-api"
+import { NezhaAPISafe } from "@/app/types/nezha-api";
-import ServerFlag from "@/components/ServerFlag"
+import ServerFlag from "@/components/ServerFlag";
-import ServerUsageBar from "@/components/ServerUsageBar"
+import ServerUsageBar from "@/components/ServerUsageBar";
-import { Card } from "@/components/ui/card"
+import { Card } from "@/components/ui/card";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
+import {
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils"
+  GetFontLogoClass,
-import { useTranslations } from "next-intl"
+  GetOsName,
-import Link from "next/link"
+  MageMicrosoftWindows,
+} from "@/lib/logo-class";
+import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
 
-import { Separator } from "./ui/separator"
+import { Separator } from "./ui/separator";
 
-export default function ServerCardInline({ serverInfo }: { serverInfo: NezhaAPISafe }) {
+export default function ServerCardInline({
-  const t = useTranslations("ServerCard")
+  serverInfo,
+}: {
+  serverInfo: NezhaAPISafe;
+}) {
+  const t = useTranslations("ServerCard");
   const { id, name, country_code, online, cpu, up, down, mem, stg, host } =
-    formatNezhaInfo(serverInfo)
+    formatNezhaInfo(serverInfo);
 
-  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true"
+  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
 
   const saveSession = () => {
-    sessionStorage.setItem("fromMainPage", "true")
+    sessionStorage.setItem("fromMainPage", "true");
-  }
+  };
 
   return online ? (
     <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
@@ -55,7 +63,9 @@ export default function ServerCardInline({ serverInfo }: { serverInfo: NezhaAPIS
         <Separator orientation="vertical" className="h-8 mx-0 ml-2" />
         <div className="flex flex-col gap-2">
           <section className={cn("grid grid-cols-9 items-center gap-3 flex-1")}>
-            <div className={"items-center flex flex-row gap-2 whitespace-nowrap"}>
+            <div
+              className={"items-center flex flex-row gap-2 whitespace-nowrap"}
+            >
               <div className="text-xs font-semibold">
                 {host.Platform.includes("Windows") ? (
                   <MageMicrosoftWindows className="size-[10px]" />
@@ -66,7 +76,9 @@ export default function ServerCardInline({ serverInfo }: { serverInfo: NezhaAPIS
               <div className={"flex w-14 flex-col"}>
                 <p className="text-xs text-muted-foreground">{t("System")}</p>
                 <div className="flex items-center text-[10.5px] font-semibold">
-                  {host.Platform.includes("Windows") ? "Windows" : GetOsName(host.Platform)}
+                  {host.Platform.includes("Windows")
+                    ? "Windows"
+                    : GetOsName(host.Platform)}
                 </div>
               </div>
             </div>
@@ -78,39 +90,53 @@ export default function ServerCardInline({ serverInfo }: { serverInfo: NezhaAPIS
             </div>
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("CPU")}</p>
-              <div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {cpu.toFixed(2)}%
+              </div>
               <ServerUsageBar value={cpu} />
             </div>
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("Mem")}</p>
-              <div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {mem.toFixed(2)}%
+              </div>
               <ServerUsageBar value={mem} />
             </div>
             <div className={"flex w-14 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("STG")}</p>
-              <div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {stg.toFixed(2)}%
+              </div>
               <ServerUsageBar value={stg} />
             </div>
             <div className={"flex w-16 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("Upload")}</p>
               <div className="flex items-center text-xs font-semibold">
-                {up >= 1024 ? `${(up / 1024).toFixed(2)}G/s` : `${up.toFixed(2)}M/s`}
+                {up >= 1024
+                  ? `${(up / 1024).toFixed(2)}G/s`
+                  : `${up.toFixed(2)}M/s`}
               </div>
             </div>
             <div className={"flex w-16 flex-col"}>
               <p className="text-xs text-muted-foreground">{t("Download")}</p>
               <div className="flex items-center text-xs font-semibold">
-                {down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : `${down.toFixed(2)}M/s`}
+                {down >= 1024
+                  ? `${(down / 1024).toFixed(2)}G/s`
+                  : `${down.toFixed(2)}M/s`}
               </div>
             </div>
             <div className={"flex w-20 flex-col"}>
-              <p className="text-xs text-muted-foreground">{t("TotalUpload")}</p>
+              <p className="text-xs text-muted-foreground">
+                {t("TotalUpload")}
+              </p>
               <div className="flex items-center text-xs font-semibold">
                 {formatBytes(serverInfo.status.NetOutTransfer)}
               </div>
             </div>
             <div className={"flex w-20 flex-col"}>
-              <p className="text-xs text-muted-foreground">{t("TotalDownload")}</p>
+              <p className="text-xs text-muted-foreground">
+                {t("TotalDownload")}
+              </p>
               <div className="flex items-center text-xs font-semibold">
                 {formatBytes(serverInfo.status.NetInTransfer)}
               </div>
@@ -131,16 +157,24 @@ export default function ServerCardInline({ serverInfo }: { serverInfo: NezhaAPIS
       >
         <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
         <div
-          className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}
+          className={cn(
+            "flex items-center justify-center",
+            showFlag ? "min-w-[17px]" : "min-w-0",
+          )}
         >
           {showFlag ? <ServerFlag country_code={country_code} /> : null}
         </div>
         <div className="relative w-28">
-          <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}>
+          <p
+            className={cn(
+              "break-all font-bold tracking-tight",
+              showFlag ? "text-xs" : "text-sm",
+            )}
+          >
             {name}
           </p>
         </div>
       </section>
     </Card>
-  )
+  );
 }

components/ServerCardPopover.tsx

@@ -1,6 +1,6 @@
-import { NezhaAPISafe } from "@/app/types/nezha-api"
+import { NezhaAPISafe } from "@/app/types/nezha-api";
-import { cn, formatBytes } from "@/lib/utils"
+import { cn, formatBytes } from "@/lib/utils";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 export function ServerCardPopoverCard({
   className,
@@ -8,27 +8,31 @@ export function ServerCardPopoverCard({
   content,
   children,
 }: {
-  className?: string
+  className?: string;
-  title: string
+  title: string;
-  content?: string
+  content?: string;
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }) {
   return (
     <div className={cn("mb-[6px] flex w-full flex-col", className)}>
       <div className="text-sm font-semibold">{title}</div>
-      {children ? children : <div className="break-all text-xs font-medium">{content}</div>}
+      {children ? (
+        children
+      ) : (
+        <div className="break-all text-xs font-medium">{content}</div>
+      )}
     </div>
-  )
+  );
 }
 
 export default function ServerCardPopover({
   host,
   status,
 }: {
-  host: NezhaAPISafe["host"]
+  host: NezhaAPISafe["host"];
-  status: NezhaAPISafe["status"]
+  status: NezhaAPISafe["status"];
 }) {
-  const t = useTranslations("ServerCardPopover")
+  const t = useTranslations("ServerCardPopover");
   return (
     <section className="max-w-[300px]">
       <ServerCardPopoverCard
@@ -65,5 +69,5 @@ export default function ServerCardPopover({
         content={`${(status.Uptime / 86400).toFixed(0)} Days`}
       />
     </section>
-  )
+  );
 }

components/ServerFlag.tsx

@@ -1,47 +1,47 @@
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import getUnicodeFlagIcon from "country-flag-icons/unicode"
+import getUnicodeFlagIcon from "country-flag-icons/unicode";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
 export default function ServerFlag({
   country_code,
   className,
 }: {
-  country_code: string
+  country_code: string;
-  className?: string
+  className?: string;
 }) {
-  const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false)
+  const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
 
-  const useSvgFlag = getEnv("NEXT_PUBLIC_ForceUseSvgFlag") === "true"
+  const useSvgFlag = getEnv("NEXT_PUBLIC_ForceUseSvgFlag") === "true";
 
   useEffect(() => {
     if (useSvgFlag) {
       // 如果环境变量要求直接使用 SVG，则无需检查 Emoji 支持
-      setSupportsEmojiFlags(false)
+      setSupportsEmojiFlags(false);
-      return
+      return;
     }
 
     const checkEmojiSupport = () => {
-      const canvas = document.createElement("canvas")
+      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d")
+      const ctx = canvas.getContext("2d");
-      const emojiFlag = "🇺🇸" // 使用美国国旗作为测试
+      const emojiFlag = "🇺🇸"; // 使用美国国旗作为测试
-      if (!ctx) return
+      if (!ctx) return;
-      ctx.fillStyle = "#000"
+      ctx.fillStyle = "#000";
-      ctx.textBaseline = "top"
+      ctx.textBaseline = "top";
-      ctx.font = "32px Arial"
+      ctx.font = "32px Arial";
-      ctx.fillText(emojiFlag, 0, 0)
+      ctx.fillText(emojiFlag, 0, 0);
 
-      const support = ctx.getImageData(16, 16, 1, 1).data[3] !== 0
+      const support = ctx.getImageData(16, 16, 1, 1).data[3] !== 0;
-      setSupportsEmojiFlags(support)
+      setSupportsEmojiFlags(support);
-    }
+    };
 
-    checkEmojiSupport()
+    checkEmojiSupport();
-  }, [useSvgFlag]) // 将 `useSvgFlag` 作为依赖，当其变化时重新触发
+  }, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发
 
-  if (!country_code) return null
+  if (!country_code) return null;
 
   if (supportsEmojiFlags && country_code.toLowerCase() === "tw") {
-    country_code = "cn"
+    country_code = "cn";
   }
 
   return (
@@ -52,5 +52,5 @@ export default function ServerFlag({
         getUnicodeFlagIcon(country_code)
       )}
     </span>
-  )
+  );
 }

components/ServerList.tsx

@@ -1,5 +1,5 @@
-import ServerListClient from "@/app/(main)/ClientComponents/ServerListClient"
+import ServerListClient from "@/app/(main)/ClientComponents/ServerListClient";
 
 export default async function ServerList() {
-  return <ServerListClient />
+  return <ServerListClient />;
 }

components/ServerOverview.tsx

@@ -1,5 +1,5 @@
-import ServerOverviewClient from "@/app/(main)/ClientComponents/ServerOverviewClient"
+import ServerOverviewClient from "@/app/(main)/ClientComponents/ServerOverviewClient";
 
 export default async function ServerOverview() {
-  return <ServerOverviewClient />
+  return <ServerOverviewClient />;
 }

components/ServerUsageBar.tsx

@@ -1,9 +1,9 @@
-import { Progress } from "@/components/ui/progress"
+import { Progress } from "@/components/ui/progress";
-import React from "react"
+import React from "react";
 
 type ServerUsageBarProps = {
-  value: number
+  value: number;
-}
+};
 
 export default function ServerUsageBar({ value }: ServerUsageBarProps) {
   return (
@@ -11,8 +11,14 @@ export default function ServerUsageBar({ value }: ServerUsageBarProps) {
       aria-label={"Server Usage Bar"}
       aria-labelledby={"Server Usage Bar"}
       value={value}
-      indicatorClassName={value > 90 ? "bg-red-500" : value > 70 ? "bg-orange-400" : "bg-green-500"}
+      indicatorClassName={
+        value > 90
+          ? "bg-red-500"
+          : value > 70
+            ? "bg-orange-400"
+            : "bg-green-500"
+      }
       className={"h-[3px] rounded-sm"}
     />
-  )
+  );
 }

components/SignIn.tsx

@@ -1,60 +1,69 @@
-"use client"
+"use client";
 
-import { getCsrfToken, signIn } from "next-auth/react"
+import { getCsrfToken, signIn } from "next-auth/react";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-import { Loader } from "./loading/Loader"
+import { Loader } from "./loading/Loader";
 
 export function SignIn() {
-  const t = useTranslations("SignIn")
+  const t = useTranslations("SignIn");
 
-  const [csrfToken, setCsrfToken] = useState("")
+  const [csrfToken, setCsrfToken] = useState("");
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-  const [errorState, setErrorState] = useState(false)
+  const [errorState, setErrorState] = useState(false);
-  const [successState, setSuccessState] = useState(false)
+  const [successState, setSuccessState] = useState(false);
 
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
     async function loadProviders() {
-      const csrf = await getCsrfToken()
+      const csrf = await getCsrfToken();
-      setCsrfToken(csrf)
+      setCsrfToken(csrf);
     }
-    loadProviders()
+    loadProviders();
-  }, [])
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+    e.preventDefault();
-    setLoading(true)
+    setLoading(true);
-    const formData = new FormData(e.currentTarget)
+    const formData = new FormData(e.currentTarget);
-    const password = formData.get("password") as string
+    const password = formData.get("password") as string;
     const res = await signIn("credentials", {
       password: password,
       redirect: false,
-    })
+    });
     if (res?.error) {
-      console.log("login error")
+      console.log("login error");
-      setErrorState(true)
+      setErrorState(true);
-      setSuccessState(false)
+      setSuccessState(false);
     } else {
-      console.log("login success")
+      console.log("login success");
-      setErrorState(false)
+      setErrorState(false);
-      setSuccessState(true)
+      setSuccessState(true);
-      router.push("/")
+      router.push("/");
-      router.refresh()
+      router.refresh();
     }
-    setLoading(false)
+    setLoading(false);
-  }
+  };
   return (
-    <form className="flex flex-col items-center justify-start gap-4 p-4 " onSubmit={handleSubmit}>
+    <form
+      className="flex flex-col items-center justify-start gap-4 p-4 "
+      onSubmit={handleSubmit}
+    >
       <input type="hidden" name="csrfToken" value={csrfToken} />
       <section className="flex flex-col items-start gap-2">
         <label className="flex flex-col items-start gap-1 ">
-          {errorState && <p className="text-red-500 text-sm font-semibold">{t("ErrorMessage")}</p>}
+          {errorState && (
+            <p className="text-red-500 text-sm font-semibold">
+              {t("ErrorMessage")}
+            </p>
+          )}
           {successState && (
-            <p className="text-green-500 text-sm font-semibold">{t("SuccessMessage")}</p>
+            <p className="text-green-500 text-sm font-semibold">
+              {t("SuccessMessage")}
+            </p>
           )}
           <p className="text-base font-semibold">{t("SignInMessage")}</p>
           <input
@@ -72,5 +81,5 @@ export function SignIn() {
         </button>
       </section>
     </form>
-  )
+  );
 }

components/Switch.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { m } from "framer-motion"
+import { m } from "framer-motion";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import React, { createRef, useEffect, useRef } from "react"
+import React, { createRef, useEffect, useRef } from "react";
 
 export default function Switch({
   allTag,
@@ -12,51 +12,51 @@ export default function Switch({
   tagCountMap,
   onTagChange,
 }: {
-  allTag: string[]
+  allTag: string[];
-  nowTag: string
+  nowTag: string;
-  tagCountMap: Record<string, number>
+  tagCountMap: Record<string, number>;
-  onTagChange: (tag: string) => void
+  onTagChange: (tag: string) => void;
 }) {
-  const scrollRef = useRef<HTMLDivElement>(null)
+  const scrollRef = useRef<HTMLDivElement>(null);
-  const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
+  const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()));
-  const t = useTranslations("ServerListClient")
+  const t = useTranslations("ServerListClient");
 
   useEffect(() => {
-    const savedTag = sessionStorage.getItem("selectedTag")
+    const savedTag = sessionStorage.getItem("selectedTag");
     if (savedTag && allTag.includes(savedTag)) {
-      onTagChange(savedTag)
+      onTagChange(savedTag);
     }
-  }, [allTag, onTagChange])
+  }, [allTag, onTagChange]);
 
   useEffect(() => {
-    const container = scrollRef.current
+    const container = scrollRef.current;
-    if (!container) return
+    if (!container) return;
 
-    const isOverflowing = container.scrollWidth > container.clientWidth
+    const isOverflowing = container.scrollWidth > container.clientWidth;
-    if (!isOverflowing) return
+    if (!isOverflowing) return;
 
     const onWheel = (e: WheelEvent) => {
-      e.preventDefault()
+      e.preventDefault();
-      container.scrollLeft += e.deltaY
+      container.scrollLeft += e.deltaY;
-    }
+    };
 
-    container.addEventListener("wheel", onWheel, { passive: false })
+    container.addEventListener("wheel", onWheel, { passive: false });
 
     return () => {
-      container.removeEventListener("wheel", onWheel)
+      container.removeEventListener("wheel", onWheel);
-    }
+    };
-  }, [])
+  }, []);
 
   useEffect(() => {
-    const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)]
+    const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)];
     if (currentTagRef && currentTagRef.current) {
       currentTagRef.current.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "center",
-      })
+      });
     }
-  }, [nowTag])
+  }, [nowTag]);
 
   return (
     <div
@@ -71,7 +71,9 @@ export default function Switch({
             onClick={() => onTagChange(tag)}
             className={cn(
               "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
-              nowTag === tag ? "text-black dark:text-white" : "text-stone-400 dark:text-stone-500",
+              nowTag === tag
+                ? "text-black dark:text-white"
+                : "text-stone-400 dark:text-stone-500",
             )}
           >
             {nowTag === tag && (
@@ -87,14 +89,17 @@ export default function Switch({
             <div className="relative z-20 flex items-center gap-1">
               <div className="whitespace-nowrap flex items-center gap-2">
                 {tag === "defaultTag" ? t("defaultTag") : tag}{" "}
-                {getEnv("NEXT_PUBLIC_ShowTagCount") === "true" && tag !== "defaultTag" && (
+                {getEnv("NEXT_PUBLIC_ShowTagCount") === "true" &&
-                  <div className="w-fit px-1.5 rounded-full bg-muted">{tagCountMap[tag]}</div>
+                  tag !== "defaultTag" && (
-                )}
+                    <div className="w-fit px-1.5 rounded-full bg-muted">
+                      {tagCountMap[tag]}
+                    </div>
+                  )}
               </div>
             </div>
           </div>
         ))}
       </div>
     </div>
-  )
+  );
 }

components/TabSwitch.tsx

@@ -1,20 +1,20 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { m } from "framer-motion"
+import { m } from "framer-motion";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import React from "react"
+import React from "react";
 
 export default function TabSwitch({
   tabs,
   currentTab,
   setCurrentTab,
 }: {
-  tabs: string[]
+  tabs: string[];
-  currentTab: string
+  currentTab: string;
-  setCurrentTab: (tab: string) => void
+  setCurrentTab: (tab: string) => void;
 }) {
-  const t = useTranslations("TabSwitch")
+  const t = useTranslations("TabSwitch");
   return (
     <div className="z-50 flex flex-col items-start rounded-[50px]">
       <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
@@ -46,5 +46,5 @@ export default function TabSwitch({
         ))}
       </div>
     </div>
-  )
+  );
 }

components/ThemeColorManager.tsx

@@ -1,39 +1,41 @@
-"use client"
+"use client";
 
-import { useTheme } from "next-themes"
+import { useTheme } from "next-themes";
-import { useEffect } from "react"
+import { useEffect } from "react";
 
 export function ThemeColorManager() {
-  const { theme, systemTheme } = useTheme()
+  const { theme, systemTheme } = useTheme();
 
   useEffect(() => {
     const updateThemeColor = () => {
-      const currentTheme = theme === "system" ? systemTheme : theme
+      const currentTheme = theme === "system" ? systemTheme : theme;
-      const meta = document.querySelector('meta[name="theme-color"]')
+      const meta = document.querySelector('meta[name="theme-color"]');
 
       if (!meta) {
-        const newMeta = document.createElement("meta")
+        const newMeta = document.createElement("meta");
-        newMeta.name = "theme-color"
+        newMeta.name = "theme-color";
-        document.head.appendChild(newMeta)
+        document.head.appendChild(newMeta);
       }
 
       const themeColor =
         currentTheme === "dark"
           ? "hsl(30 15% 8%)" // 深色模式背景色
-          : "hsl(0 0% 98%)" // 浅色模式背景色
+          : "hsl(0 0% 98%)"; // 浅色模式背景色
 
-      document.querySelector('meta[name="theme-color"]')?.setAttribute("content", themeColor)
+      document
-    }
+        .querySelector('meta[name="theme-color"]')
+        ?.setAttribute("content", themeColor);
+    };
 
     // Update on mount and theme change
-    updateThemeColor()
+    updateThemeColor();
 
     // Listen for system theme changes
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    mediaQuery.addEventListener("change", updateThemeColor)
+    mediaQuery.addEventListener("change", updateThemeColor);
 
-    return () => mediaQuery.removeEventListener("change", updateThemeColor)
+    return () => mediaQuery.removeEventListener("change", updateThemeColor);
-  }, [theme, systemTheme])
+  }, [theme, systemTheme]);
 
-  return null
+  return null;
 }

components/ThemeSwitcher.tsx

@@ -1,26 +1,26 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { CheckCircleIcon } from "@heroicons/react/20/solid"
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { Moon, Sun } from "lucide-react"
+import { Moon, Sun } from "lucide-react";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import { useTheme } from "next-themes"
+import { useTheme } from "next-themes";
 
 export function ModeToggle() {
-  const { setTheme, theme } = useTheme()
+  const { setTheme, theme } = useTheme();
-  const t = useTranslations("ThemeSwitcher")
+  const t = useTranslations("ThemeSwitcher");
 
   const handleSelect = (e: Event, newTheme: string) => {
-    e.preventDefault()
+    e.preventDefault();
-    setTheme(newTheme)
+    setTheme(newTheme);
-  }
+  };
 
   return (
     <DropdownMenu>
@@ -40,21 +40,24 @@ export function ModeToggle() {
           className={cn({ "gap-3 bg-muted": theme === "light" })}
           onSelect={(e) => handleSelect(e, "light")}
         >
-          {t("Light")} {theme === "light" && <CheckCircleIcon className="size-4" />}
+          {t("Light")}{" "}
+          {theme === "light" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>
         <DropdownMenuItem
           className={cn({ "gap-3 bg-muted": theme === "dark" })}
           onSelect={(e) => handleSelect(e, "dark")}
         >
-          {t("Dark")} {theme === "dark" && <CheckCircleIcon className="size-4" />}
+          {t("Dark")}{" "}
+          {theme === "dark" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>
         <DropdownMenuItem
           className={cn({ "gap-3 bg-muted": theme === "system" })}
           onSelect={(e) => handleSelect(e, "system")}
         >
-          {t("System")} {theme === "system" && <CheckCircleIcon className="size-4" />}
+          {t("System")}{" "}
+          {theme === "system" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }

components/loading/Loader.tsx

@@ -1,4 +1,4 @@
-const bars = Array(8).fill(0)
+const bars = Array(8).fill(0);
 
 export const Loader = ({ visible }: { visible: boolean }) => {
   return (
@@ -9,5 +9,5 @@ export const Loader = ({ visible }: { visible: boolean }) => {
         ))}
       </div>
     </div>
-  )
+  );
-}
+};

components/motion/framer-lazy-feature.ts

@@ -1 +1 @@
-export { domMax as default } from "framer-motion"
+export { domMax as default } from "framer-motion";

components/motion/motion-provider.tsx

@@ -1,13 +1,14 @@
-"use client"
+"use client";
 
-import { LazyMotion } from "framer-motion"
+import { LazyMotion } from "framer-motion";
 
-const loadFeatures = () => import("./framer-lazy-feature").then((res) => res.default)
+const loadFeatures = () =>
+  import("./framer-lazy-feature").then((res) => res.default);
 
 export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <LazyMotion features={loadFeatures} strict key="framer">
       {children}
     </LazyMotion>
-  )
+  );
-}
+};

components/ui/animated-circular-progress-bar.tsx

@@ -1,11 +1,11 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 interface Props {
-  max: number
+  max: number;
-  value: number
+  value: number;
-  min: number
+  min: number;
-  className?: string
+  className?: string;
-  primaryColor?: string
+  primaryColor?: string;
 }
 
 export default function AnimatedCircularProgressBar({
@@ -15,9 +15,9 @@ export default function AnimatedCircularProgressBar({
   primaryColor,
   className,
 }: Props) {
-  const circumference = 2 * Math.PI * 45
+  const circumference = 2 * Math.PI * 45;
-  const percentPx = circumference / 100
+  const percentPx = circumference / 100;
-  const currentPercent = ((value - min) / (max - min)) * 100
+  const currentPercent = ((value - min) / (max - min)) * 100;
 
   return (
     <div
@@ -37,7 +37,12 @@ export default function AnimatedCircularProgressBar({
         } as React.CSSProperties
       }
     >
-      <svg fill="none" className="size-full" strokeWidth="2" viewBox="0 0 100 100">
+      <svg
+        fill="none"
+        className="size-full"
+        strokeWidth="2"
+        viewBox="0 0 100 100"
+      >
         {currentPercent <= 90 && currentPercent >= 0 && (
           <circle
             cx="50"
@@ -57,7 +62,8 @@ export default function AnimatedCircularProgressBar({
                 transform:
                   "rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
                 transition: "all var(--transition-length) ease var(--delay)",
-                transformOrigin: "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+                transformOrigin:
+                  "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
               } as React.CSSProperties
             }
           />
@@ -84,7 +90,8 @@ export default function AnimatedCircularProgressBar({
               transitionProperty: "stroke-dasharray,transform",
               transform:
                 "rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
-              transformOrigin: "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+              transformOrigin:
+                "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
             } as React.CSSProperties
           }
         />
@@ -96,5 +103,5 @@ export default function AnimatedCircularProgressBar({
         {currentPercent}
       </span>
     </div>
-  )
+  );
 }

components/ui/animated-tooltip.tsx

@@ -1,16 +1,16 @@
-import Image from "next/image"
+import Image from "next/image";
-import Link from "next/link"
+import Link from "next/link";
-import React from "react"
+import React from "react";
 
 export const AnimatedTooltip = ({
   items,
 }: {
   items: {
-    id: number
+    id: number;
-    name: string
+    name: string;
-    designation: string
+    designation: string;
-    image: string
+    image: string;
-  }[]
+  }[];
 }) => {
   return (
     <>
@@ -29,5 +29,5 @@ export const AnimatedTooltip = ({
         </div>
       ))}
     </>
-  )
+  );
-}
+};

components/ui/badge.tsx

@@ -1,13 +1,14 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react"
+import * as React from "react";
 
 const badgeVariants = cva(
   "inline-flex items-center text-nowarp rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
@@ -19,14 +20,16 @@ const badgeVariants = cva(
       variant: "default",
     },
   },
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

components/ui/button.tsx

@@ -1,7 +1,7 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react"
+import * as React from "react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
@@ -9,9 +9,12 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        destructive:
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -27,22 +30,26 @@ const buttonVariants = cva(
       size: "default",
     },
   },
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+      <Comp
-    )
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
   },
-)
+);
-Button.displayName = "Button"
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -1,58 +1,85 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as React from "react"
+import * as React from "react";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const Card = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      ref={ref}
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div
-        "rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
+    ref={ref}
-        className,
+    className={cn(
-      )}
+      "rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
-      {...props}
+      className,
-    />
+    )}
-  ),
+    {...props}
-)
+  />
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardHeader = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  ),
+>(({ className, ...props }, ref) => (
-)
+  <div
-CardHeader.displayName = "CardHeader"
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+const CardTitle = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLParagraphElement,
-    <h3
+  React.HTMLAttributes<HTMLHeadingElement>
-      ref={ref}
+>(({ className, ...props }, ref) => (
-      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+  <h3
-      {...props}
+    ref={ref}
-    />
+    className={cn(
-  ),
+      "text-2xl font-semibold leading-none tracking-tight",
-)
+      className,
-CardTitle.displayName = "CardTitle"
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  <p
-))
+    ref={ref}
-CardDescription.displayName = "CardDescription"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardContent = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  ),
+>(({ className, ...props }, ref) => (
-)
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardFooter = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  ),
+>(({ className, ...props }, ref) => (
-)
+  <div
-CardFooter.displayName = "CardFooter"
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

components/ui/chart.tsx

@@ -1,47 +1,49 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as React from "react"
+import * as React from "react";
-import * as RechartsPrimitive from "recharts"
+import * as RechartsPrimitive from "recharts";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k: string]: {
-    label?: React.ReactNode
+    label?: React.ReactNode;
-    icon?: React.ComponentType
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
+  );
-}
+};
 
 type ChartContextProps = {
-  config: ChartConfig
+  config: ChartConfig;
-}
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    config: ChartConfig
+    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
   }
 >(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
+  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -55,18 +57,22 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
+  );
-})
+});
-ChartContainer.displayName = "Chart"
+ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -78,8 +84,10 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+    const color =
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}
 }
@@ -88,20 +96,20 @@ ${colorConfig
           .join("\n"),
       }}
     />
-  )
+  );
-}
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
     React.ComponentProps<"div"> & {
-      hideLabel?: boolean
+      hideLabel?: boolean;
-      hideIndicator?: boolean
+      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed"
+      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string
+      nameKey?: string;
-      labelKey?: string
+      labelKey?: string;
     }
 >(
   (
@@ -122,43 +130,53 @@ const ChartTooltipContent = React.forwardRef<
     },
     ref,
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     const tooltipLabel = React.useMemo(() => {
       if (hideLabel || !payload?.length) {
-        return null
+        return null;
       }
 
-      const [item] = payload
+      const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"
           ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
+          : itemConfig?.label;
 
       if (labelFormatter) {
         return (
-          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+          <div className={cn("font-medium", labelClassName)}>
-        )
+            {labelFormatter(value, payload)}
+          </div>
+        );
       }
 
       if (!value) {
-        return null
+        return null;
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
 
     if (!active || !payload?.length) {
-      return null
+      return null;
     }
 
     payload.sort((a, b) => {
-      return Number(b.value) - Number(a.value)
+      return Number(b.value) - Number(a.value);
-    })
+    });
 
-    const nestLabel = payload.length === 1 && indicator !== "dot"
+    const nestLabel = payload.length === 1 && indicator !== "dot";
 
     return (
       <div
@@ -171,9 +189,9 @@ const ChartTooltipContent = React.forwardRef<
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color
+            const indicatorColor = color || item.payload.fill || item.color;
 
             return (
               <div
@@ -239,94 +257,112 @@ const ChartTooltipContent = React.forwardRef<
                   </>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       </div>
-    )
+    );
   },
-)
+);
-ChartTooltipContent.displayName = "ChartTooltip"
+ChartTooltipContent.displayName = "ChartTooltip";
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
+      hideIcon?: boolean;
-      nameKey?: string
+      nameKey?: string;
     }
->(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+>(
-  const { config } = useChart()
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
 
-  if (!payload?.length) {
+    if (!payload?.length) {
-    return null
+      return null;
-  }
+    }
 
-  return (
+    return (
-    <div
+      <div
-      ref={ref}
+        ref={ref}
-      className={cn(
+        className={cn(
-        "flex flex-wrap items-center justify-center gap-4",
+          "flex flex-wrap items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
-        className,
+          className,
-      )}
+        )}
-    >
+      >
-      {payload.map((item) => {
+        {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`
+          const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-        return (
+          return (
-          <div
+            <div
-            key={item.value}
+              key={item.value}
-            className={cn(
+              className={cn(
-              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
-            )}
+              )}
-          >
+            >
-            {itemConfig?.icon && !hideIcon ? (
+              {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
+                <itemConfig.icon />
-            ) : (
+              ) : (
-              <div
+                <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
+                  style={{
-                  backgroundColor: item.color,
+                    backgroundColor: item.color,
-                }}
+                  }}
-              />
+                />
-            )}
+              )}
-            {key}
+              {key}
-          </div>
+            </div>
-        )
+          );
-      })}
+        })}
-    </div>
+      </div>
-  )
+    );
-})
+  },
-ChartLegendContent.displayName = "ChartLegend"
+);
+ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
-  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+  if (
-    configLabelKey = payload[key as keyof typeof payload] as string
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
-    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
   }
 
-  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -336,4 +372,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};

components/ui/dropdown-menu.tsx

@@ -1,26 +1,26 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react"
+import * as React from "react";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -35,8 +35,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -50,8 +51,9 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -68,13 +70,13 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
+));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -86,8 +88,8 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -109,8 +111,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -131,22 +134,26 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
+));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
     {...props}
   />
-))
+));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -157,13 +164,21 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
+));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({
-  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  className,
-}
+  ...props
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -181,4 +196,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-}
+};

components/ui/input.tsx

@@ -1,7 +1,7 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as React from "react"
+import * as React from "react";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -15,9 +15,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         {...props}
       />
-    )
+    );
   },
-)
+);
-Input.displayName = "Input"
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

components/ui/label.tsx

@@ -1,20 +1,25 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react"
+import * as React from "react";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-)
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+  <LabelPrimitive.Root
-))
+    ref={ref}
-Label.displayName = LabelPrimitive.Root.displayName
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };

components/ui/navigation-menu.tsx

@@ -1,8 +1,8 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react"
+import { ChevronDown } from "lucide-react";
-import * as React from "react"
+import * as React from "react";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -10,14 +10,17 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
-    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className,
+    )}
     {...props}
   >
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-))
+));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -25,17 +28,20 @@ const NavigationMenuList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.List
     ref={ref}
-    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className,
+    )}
     {...props}
   />
-))
+));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
-)
+);
 
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
@@ -52,8 +58,8 @@ const NavigationMenuTrigger = React.forwardRef<
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
-))
+));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -67,10 +73,10 @@ const NavigationMenuContent = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
@@ -86,8 +92,9 @@ const NavigationMenuViewport = React.forwardRef<
       {...props}
     />
   </div>
-))
+));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -103,8 +110,9 @@ const NavigationMenuIndicator = React.forwardRef<
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-))
+));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
 
 export {
   NavigationMenu,
@@ -116,4 +124,4 @@ export {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
   NavigationMenuViewport,
-}
+};

components/ui/popover.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react"
+import * as React from "react";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -24,7 +24,7 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
+));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };

components/ui/progress.tsx

@@ -1,18 +1,21 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react"
+import * as React from "react";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
-    indicatorClassName?: string // 添加一个新的可选属性来自定义Indicator的类名
+    indicatorClassName?: string; // 添加一个新的可选属性来自定义Indicator的类名
   }
 >(({ className, value, indicatorClassName, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className,
+    )}
     {...props}
   >
     <ProgressPrimitive.Indicator
@@ -23,7 +26,7 @@ const Progress = React.forwardRef<
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-))
+));
-Progress.displayName = ProgressPrimitive.Root.displayName
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };

components/ui/separator.tsx

@@ -1,25 +1,30 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react"
+import * as React from "react";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+>(
-  <SeparatorPrimitive.Root
+  (
-    ref={ref}
+    { className, orientation = "horizontal", decorative = true, ...props },
-    decorative={decorative}
+    ref,
-    orientation={orientation}
+  ) => (
-    className={cn(
+    <SeparatorPrimitive.Root
-      "shrink-0 bg-border",
+      ref={ref}
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      decorative={decorative}
-      className,
+      orientation={orientation}
-    )}
+      className={cn(
-    {...props}
+        "shrink-0 bg-border",
-  />
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-))
+        className,
-Separator.displayName = SeparatorPrimitive.Root.displayName
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

components/ui/sheet.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as SheetPrimitive from "@radix-ui/react-dialog"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react"
+import { X } from "lucide-react";
-import * as React from "react"
+import * as React from "react";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -26,8 +26,8 @@ const SheetOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-))
+));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -46,7 +46,7 @@ const sheetVariants = cva(
       side: "right",
     },
   },
-)
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -58,7 +58,11 @@ const SheetContent = React.forwardRef<
 >(({ side = "right", className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
@@ -66,21 +70,36 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
+));
-SheetContent.displayName = SheetPrimitive.Content.displayName
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  className,
-)
+  ...props
-SheetHeader.displayName = "SheetHeader"
+}: React.HTMLAttributes<HTMLDivElement>) => (
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
     {...props}
   />
-)
+);
-SheetFooter.displayName = "SheetFooter"
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -91,8 +110,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
+));
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -103,8 +122,8 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -117,4 +136,4 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
-}
+};

components/ui/skeleton.tsx

@@ -1,7 +1,15 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({
-  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

components/ui/switch.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react"
+import * as React from "react";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -22,7 +22,7 @@ const Switch = React.forwardRef<
       )}
     />
   </SwitchPrimitives.Root>
-))
+));
-Switch.displayName = SwitchPrimitives.Root.displayName
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };

components/ui/tooltip.tsx

@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react"
+import * as React from "react";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -23,7 +23,7 @@ const TooltipContent = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

i18n-metadata.ts

@@ -1,5 +1,5 @@
 // @auto-i18n-check. Please do not delete the line.
-import getEnv from "./lib/env-entry"
+import getEnv from "./lib/env-entry";
 
 export const localeItems = [
   { code: "en", name: "English" },
@@ -19,7 +19,7 @@ export const localeItems = [
   //{code: 'ru', name: 'Русский'},
   //{code: 'th', name: 'ไทย'},
   //{code: 'vi', name: 'Tiếng Việt'},
-]
+];
 
-export const locales = localeItems.map((item) => item.code)
+export const locales = localeItems.map((item) => item.code);
-export const defaultLocale = getEnv("DefaultLocale") || "en"
+export const defaultLocale = getEnv("DefaultLocale") || "en";

i18n/locale.ts

@@ -1,14 +1,17 @@
-"use server"
+"use server";
 
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { cookies } from "next/headers"
+import { cookies } from "next/headers";
 
-const COOKIE_NAME = "NEXT_LOCALE"
+const COOKIE_NAME = "NEXT_LOCALE";
 
 export async function getUserLocale() {
-  return (await cookies()).get(COOKIE_NAME)?.value || (getEnv("DefaultLocale") ?? "en")
+  return (
+    (await cookies()).get(COOKIE_NAME)?.value ||
+    (getEnv("DefaultLocale") ?? "en")
+  );
 }
 
 export async function setUserLocale(locale: string) {
-  ;(await cookies()).set(COOKIE_NAME, locale)
+  (await cookies()).set(COOKIE_NAME, locale);
 }

i18n/request.ts

@@ -1,11 +1,11 @@
-import { getUserLocale } from "@/i18n/locale"
+import { getUserLocale } from "@/i18n/locale";
-import { getRequestConfig } from "next-intl/server"
+import { getRequestConfig } from "next-intl/server";
 
 export default getRequestConfig(async () => {
-  const locale = await getUserLocale()
+  const locale = await getUserLocale();
 
   return {
     locale,
     messages: (await import(`../messages/${locale}.json`)).default,
-  }
+  };
-})
+});

lib/dev-geo.ts

@@ -180,4 +180,4 @@ export const devGeoString = `{"type":"FeatureCollection","features":[
 {"type":"Feature","id":"ZMB","properties":{"name":"Zambia"},"geometry":{"type":"Polygon","coordinates":[[[32.759375,-9.230599],[33.231388,-9.676722],[33.485688,-10.525559],[33.31531,-10.79655],[33.114289,-11.607198],[33.306422,-12.435778],[32.991764,-12.783871],[32.688165,-13.712858],[33.214025,-13.97186],[30.179481,-14.796099],[30.274256,-15.507787],[29.516834,-15.644678],[28.947463,-16.043051],[28.825869,-16.389749],[28.467906,-16.4684],[27.598243,-17.290831],[27.044427,-17.938026],[26.706773,-17.961229],[26.381935,-17.846042],[25.264226,-17.73654],[25.084443,-17.661816],[25.07695,-17.578823],[24.682349,-17.353411],[24.033862,-17.295843],[23.215048,-17.523116],[22.562478,-16.898451],[21.887843,-16.08031],[21.933886,-12.898437],[24.016137,-12.911046],[23.930922,-12.565848],[24.079905,-12.191297],[23.904154,-11.722282],[24.017894,-11.237298],[23.912215,-10.926826],[24.257155,-10.951993],[24.314516,-11.262826],[24.78317,-11.238694],[25.418118,-11.330936],[25.75231,-11.784965],[26.553088,-11.92444],[27.16442,-11.608748],[27.388799,-12.132747],[28.155109,-12.272481],[28.523562,-12.698604],[28.934286,-13.248958],[29.699614,-13.257227],[29.616001,-12.178895],[29.341548,-12.360744],[28.642417,-11.971569],[28.372253,-11.793647],[28.49607,-10.789884],[28.673682,-9.605925],[28.449871,-9.164918],[28.734867,-8.526559],[29.002912,-8.407032],[30.346086,-8.238257],[30.740015,-8.340007],[31.157751,-8.594579],[31.556348,-8.762049],[32.191865,-8.930359],[32.759375,-9.230599]]]}},
 {"type":"Feature","id":"ZWE","properties":{"name":"Zimbabwe"},"geometry":{"type":"Polygon","coordinates":[[[31.191409,-22.25151],[30.659865,-22.151567],[30.322883,-22.271612],[29.839037,-22.102216],[29.432188,-22.091313],[28.794656,-21.639454],[28.02137,-21.485975],[27.727228,-20.851802],[27.724747,-20.499059],[27.296505,-20.39152],[26.164791,-19.293086],[25.850391,-18.714413],[25.649163,-18.536026],[25.264226,-17.73654],[26.381935,-17.846042],[26.706773,-17.961229],[27.044427,-17.938026],[27.598243,-17.290831],[28.467906,-16.4684],[28.825869,-16.389749],[28.947463,-16.043051],[29.516834,-15.644678],[30.274256,-15.507787],[30.338955,-15.880839],[31.173064,-15.860944],[31.636498,-16.07199],[31.852041,-16.319417],[32.328239,-16.392074],[32.847639,-16.713398],[32.849861,-17.979057],[32.654886,-18.67209],[32.611994,-19.419383],[32.772708,-19.715592],[32.659743,-20.30429],[32.508693,-20.395292],[32.244988,-21.116489],[31.191409,-22.25151]]]}}
 ]}
-`
+`;

lib/env-entry.ts

@@ -1,8 +1,8 @@
-import { env } from "next-runtime-env"
+import { env } from "next-runtime-env";
 
 export default function getEnv(key: string) {
   if (key.startsWith("NEXT_PUBLIC_")) {
-    return env(key)
+    return env(key);
   }
-  return process.env[key]
+  return process.env[key];
 }

lib/geo-limit.ts

@@ -1,4 +1,7 @@
-export const countryCoordinates: Record<string, { lat: number; lng: number; name: string }> = {
+export const countryCoordinates: Record<
+  string,
+  { lat: number; lng: number; name: string }
+> = {
   // 亚洲
   AF: { lat: 33.0, lng: 65.0, name: "Afghanistan" }, // 阿富汗
   AM: { lat: 40.0, lng: 45.0, name: "Armenia" }, // 亚美尼亚
@@ -205,4 +208,4 @@ export const countryCoordinates: Record<string, { lat: number; lng: number; name
   EH: { lat: 24.5, lng: -13.0, name: "Western Sahara" }, // 西撒哈拉
   ZM: { lat: -15.0, lng: 30.0, name: "Zambia" }, // 赞比亚
   ZW: { lat: -20.0, lng: 30.0, name: "Zimbabwe" }, // 津巴布韦
-}
+};

lib/logo-class.tsx

@@ -1,5 +1,5 @@
-import React from "react"
+import React from "react";
-import type { SVGProps } from "react"
+import type { SVGProps } from "react";
 
 export function GetFontLogoClass(platform: string): string {
   if (
@@ -48,24 +48,24 @@ export function GetFontLogoClass(platform: string): string {
       "zorin",
     ].indexOf(platform) > -1
   ) {
-    return platform
+    return platform;
   }
   if (platform == "darwin") {
-    return "apple"
+    return "apple";
   }
   if (["openwrt", "linux", "immortalwrt"].indexOf(platform) > -1) {
-    return "tux"
+    return "tux";
   }
   if (platform == "amazon") {
-    return "redhat"
+    return "redhat";
   }
   if (platform == "arch") {
-    return "archlinux"
+    return "archlinux";
   }
   if (platform.toLowerCase().includes("opensuse")) {
-    return "opensuse"
+    return "opensuse";
   }
-  return "tux"
+  return "tux";
 }
 
 export function GetOsName(platform: string): string {
@@ -111,33 +111,39 @@ export function GetOsName(platform: string): string {
       "zorin",
     ].indexOf(platform) > -1
   ) {
-    return platform.charAt(0).toUpperCase() + platform.slice(1)
+    return platform.charAt(0).toUpperCase() + platform.slice(1);
   }
   if (platform == "darwin") {
-    return "macOS"
+    return "macOS";
   }
   if (["openwrt", "linux", "immortalwrt"].indexOf(platform) > -1) {
-    return "Linux"
+    return "Linux";
   }
   if (platform == "amazon") {
-    return "Redhat"
+    return "Redhat";
   }
   if (platform == "arch") {
-    return "Archlinux"
+    return "Archlinux";
   }
   if (platform.toLowerCase().includes("opensuse")) {
-    return "Opensuse"
+    return "Opensuse";
   }
-  return "Linux"
+  return "Linux";
 }
 
 export function MageMicrosoftWindows(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
       <path
         fill="currentColor"
         d="M2.75 7.189V2.865c0-.102 0-.115.115-.115h8.622c.128 0 .14 0 .14.128V11.5c0 .128 0 .128-.14.128H2.865c-.102 0-.115 0-.115-.116zM7.189 21.25H2.865c-.102 0-.115 0-.115-.116V12.59c0-.128 0-.128.128-.128h8.635c.102 0 .115 0 .115.115v8.57c0 .09 0 .103-.116.103zM21.25 7.189v4.31c0 .116 0 .116-.116.116h-8.557c-.102 0-.128 0-.128-.115V2.865c0-.09 0-.102.115-.102h8.48c.206 0 .206 0 .206.205zm-8.763 9.661v-4.273c0-.09 0-.115.103-.09h8.621c.026 0 0 .09 0 .142v8.518a.06.06 0 0 1-.017.06a.06.06 0 0 1-.06.017H12.54s-.09 0-.077-.09V16.85z"
       ></path>
     </svg>
-  )
+  );
 }

lib/network-filter-context.tsx

@@ -1,24 +1,28 @@
-"use client"
+"use client";
 
-import React, { ReactNode, createContext, useContext, useState } from "react"
+import React, { ReactNode, createContext, useContext, useState } from "react";
 
 interface FilterContextType {
-  filter: boolean
+  filter: boolean;
-  setFilter: (filter: boolean) => void
+  setFilter: (filter: boolean) => void;
 }
 
-const FilterContext = createContext<FilterContextType | undefined>(undefined)
+const FilterContext = createContext<FilterContextType | undefined>(undefined);
 
 export function FilterProvider({ children }: { children: ReactNode }) {
-  const [filter, setFilter] = useState<boolean>(false)
+  const [filter, setFilter] = useState<boolean>(false);
 
-  return <FilterContext.Provider value={{ filter, setFilter }}>{children}</FilterContext.Provider>
+  return (
+    <FilterContext.Provider value={{ filter, setFilter }}>
+      {children}
+    </FilterContext.Provider>
+  );
 }
 
 export function useFilter() {
-  const context = useContext(FilterContext)
+  const context = useContext(FilterContext);
   if (context === undefined) {
-    throw new Error("useFilter must be used within a FilterProvider")
+    throw new Error("useFilter must be used within a FilterProvider");
   }
-  return context
+  return context;
 }

lib/serverFetch.tsx

@@ -1,21 +1,21 @@
-"use server"
+"use server";
 
-import { NezhaAPI, ServerApi } from "@/app/types/nezha-api"
+import { NezhaAPI, ServerApi } from "@/app/types/nezha-api";
-import { MakeOptional } from "@/app/types/utils"
+import { MakeOptional } from "@/app/types/utils";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { unstable_noStore as noStore } from "next/cache"
+import { unstable_noStore as noStore } from "next/cache";
 
 export async function GetNezhaData() {
-  noStore()
+  noStore();
 
-  let nezhaBaseUrl = getEnv("NezhaBaseUrl")
+  let nezhaBaseUrl = getEnv("NezhaBaseUrl");
   if (!nezhaBaseUrl) {
-    console.error("NezhaBaseUrl is not set")
+    console.error("NezhaBaseUrl is not set");
-    throw new Error("NezhaBaseUrl is not set")
+    throw new Error("NezhaBaseUrl is not set");
   }
 
   // Remove trailing slash
-  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "")
+  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "");
 
   try {
     const response = await fetch(`${nezhaBaseUrl}/api/v1/server/details`, {
@@ -25,20 +25,20 @@ export async function GetNezhaData() {
       next: {
         revalidate: 0,
       },
-    })
+    });
 
     if (!response.ok) {
-      const errorText = await response.text()
+      const errorText = await response.text();
-      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`)
+      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`);
     }
 
-    const resData = await response.json()
+    const resData = await response.json();
 
     if (!resData.result) {
-      throw new Error("NezhaData fetch failed: 'result' field is missing")
+      throw new Error("NezhaData fetch failed: 'result' field is missing");
     }
 
-    const nezhaData = resData.result as NezhaAPI[]
+    const nezhaData = resData.result as NezhaAPI[];
     const data: ServerApi = {
       live_servers: 0,
       offline_servers: 0,
@@ -47,95 +47,102 @@ export async function GetNezhaData() {
       total_in_speed: 0,
       total_out_speed: 0,
       result: [],
-    }
+    };
 
-    const forceShowAllServers = getEnv("ForceShowAllServers") === "true"
+    const forceShowAllServers = getEnv("ForceShowAllServers") === "true";
     const nezhaDataFiltered = forceShowAllServers
       ? nezhaData
-      : nezhaData.filter((element) => !element.hide_for_guest)
+      : nezhaData.filter((element) => !element.hide_for_guest);
 
-    const timestamp = Date.now() / 1000
+    const timestamp = Date.now() / 1000;
     data.result = nezhaDataFiltered.map(
       (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
-        const isOnline = timestamp - element.last_active <= 300
+        const isOnline = timestamp - element.last_active <= 300;
-        element.online_status = isOnline
+        element.online_status = isOnline;
 
         if (isOnline) {
-          data.live_servers += 1
+          data.live_servers += 1;
         } else {
-          data.offline_servers += 1
+          data.offline_servers += 1;
         }
 
-        data.total_out_bandwidth += element.status.NetOutTransfer
+        data.total_out_bandwidth += element.status.NetOutTransfer;
-        data.total_in_bandwidth += element.status.NetInTransfer
+        data.total_in_bandwidth += element.status.NetInTransfer;
-        data.total_in_speed += element.status.NetInSpeed
+        data.total_in_speed += element.status.NetInSpeed;
-        data.total_out_speed += element.status.NetOutSpeed
+        data.total_out_speed += element.status.NetOutSpeed;
 
         // Remove unwanted properties
-        delete element.ipv4
+        delete element.ipv4;
-        delete element.ipv6
+        delete element.ipv6;
-        delete element.valid_ip
+        delete element.valid_ip;
 
-        return element
+        return element;
       },
-    )
+    );
 
-    return data
+    return data;
   } catch (error) {
-    console.error("GetNezhaData error:", error)
+    console.error("GetNezhaData error:", error);
-    throw error // Rethrow the error to be caught by the caller
+    throw error; // Rethrow the error to be caught by the caller
   }
 }
 
 export async function GetServerMonitor({ server_id }: { server_id: number }) {
-  let nezhaBaseUrl = getEnv("NezhaBaseUrl")
+  let nezhaBaseUrl = getEnv("NezhaBaseUrl");
   if (!nezhaBaseUrl) {
-    console.error("NezhaBaseUrl is not set")
+    console.error("NezhaBaseUrl is not set");
-    throw new Error("NezhaBaseUrl is not set")
+    throw new Error("NezhaBaseUrl is not set");
   }
 
   // Remove trailing slash
-  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "")
+  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "");
 
   try {
-    const response = await fetch(`${nezhaBaseUrl}/api/v1/monitor/${server_id}`, {
+    const response = await fetch(
-      headers: {
+      `${nezhaBaseUrl}/api/v1/monitor/${server_id}`,
-        Authorization: getEnv("NezhaAuth") as string,
+      {
+        headers: {
+          Authorization: getEnv("NezhaAuth") as string,
+        },
+        next: {
+          revalidate: 0,
+        },
       },
-      next: {
+    );
-        revalidate: 0,
-      },
-    })
 
     if (!response.ok) {
-      const errorText = await response.text()
+      const errorText = await response.text();
-      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`)
+      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`);
     }
 
-    const resData = await response.json()
+    const resData = await response.json();
-    const monitorData = resData.result
+    const monitorData = resData.result;
 
     if (!monitorData) {
-      console.error("MonitorData fetch failed:", resData)
+      console.error("MonitorData fetch failed:", resData);
-      throw new Error("MonitorData fetch failed: 'result' field is missing")
+      throw new Error("MonitorData fetch failed: 'result' field is missing");
     }
 
-    return monitorData
+    return monitorData;
   } catch (error) {
-    console.error("GetServerMonitor error:", error)
+    console.error("GetServerMonitor error:", error);
-    throw error
+    throw error;
   }
 }
 
-export async function GetServerIP({ server_id }: { server_id: number }): Promise<string> {
+export async function GetServerIP({
-  let nezhaBaseUrl = getEnv("NezhaBaseUrl")
+  server_id,
+}: {
+  server_id: number;
+}): Promise<string> {
+  let nezhaBaseUrl = getEnv("NezhaBaseUrl");
   if (!nezhaBaseUrl) {
-    console.error("NezhaBaseUrl is not set")
+    console.error("NezhaBaseUrl is not set");
-    throw new Error("NezhaBaseUrl is not set")
+    throw new Error("NezhaBaseUrl is not set");
   }
 
   // Remove trailing slash
-  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "")
+  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "");
 
   try {
     const response = await fetch(`${nezhaBaseUrl}/api/v1/server/details`, {
@@ -145,80 +152,89 @@ export async function GetServerIP({ server_id }: { server_id: number }): Promise
       next: {
         revalidate: 0,
       },
-    })
+    });
 
     if (!response.ok) {
-      const errorText = await response.text()
+      const errorText = await response.text();
-      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`)
+      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`);
     }
 
-    const resData = await response.json()
+    const resData = await response.json();
 
     if (!resData.result) {
-      throw new Error("NezhaData fetch failed: 'result' field is missing")
+      throw new Error("NezhaData fetch failed: 'result' field is missing");
     }
 
-    const nezhaData = resData.result as NezhaAPI[]
+    const nezhaData = resData.result as NezhaAPI[];
 
     // Find the server with the given ID
-    const server = nezhaData.find((element) => element.id === server_id)
+    const server = nezhaData.find((element) => element.id === server_id);
 
     if (!server) {
-      throw new Error(`Server with ID ${server_id} not found`)
+      throw new Error(`Server with ID ${server_id} not found`);
     }
 
-    return server?.valid_ip || server?.ipv4 || server?.ipv6 || ""
+    return server?.valid_ip || server?.ipv4 || server?.ipv6 || "";
   } catch (error) {
-    console.error("GetNezhaData error:", error)
+    console.error("GetNezhaData error:", error);
-    throw error // Rethrow the error to be caught by the caller
+    throw error; // Rethrow the error to be caught by the caller
   }
 }
 
 export async function GetServerDetail({ server_id }: { server_id: number }) {
-  let nezhaBaseUrl = getEnv("NezhaBaseUrl")
+  let nezhaBaseUrl = getEnv("NezhaBaseUrl");
   if (!nezhaBaseUrl) {
-    console.error("NezhaBaseUrl is not set")
+    console.error("NezhaBaseUrl is not set");
-    throw new Error("NezhaBaseUrl is not set")
+    throw new Error("NezhaBaseUrl is not set");
   }
 
   // Remove trailing slash
-  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "")
+  nezhaBaseUrl = nezhaBaseUrl.replace(/\/$/, "");
 
   try {
-    const response = await fetch(`${nezhaBaseUrl}/api/v1/server/details?id=${server_id}`, {
+    const response = await fetch(
-      headers: {
+      `${nezhaBaseUrl}/api/v1/server/details?id=${server_id}`,
-        Authorization: getEnv("NezhaAuth") as string,
+      {
+        headers: {
+          Authorization: getEnv("NezhaAuth") as string,
+        },
+        next: {
+          revalidate: 0,
+        },
       },
-      next: {
+    );
-        revalidate: 0,
-      },
-    })
 
     if (!response.ok) {
-      const errorText = await response.text()
+      const errorText = await response.text();
-      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`)
+      throw new Error(`Failed to fetch data: ${response.status} ${errorText}`);
     }
 
-    const resData = await response.json()
+    const resData = await response.json();
-    const detailDataList = resData.result
+    const detailDataList = resData.result;
 
-    if (!detailDataList || !Array.isArray(detailDataList) || detailDataList.length === 0) {
+    if (
-      console.error("MonitorData fetch failed:", resData)
+      !detailDataList ||
-      throw new Error("MonitorData fetch failed: 'result' field is missing or empty")
+      !Array.isArray(detailDataList) ||
+      detailDataList.length === 0
+    ) {
+      console.error("MonitorData fetch failed:", resData);
+      throw new Error(
+        "MonitorData fetch failed: 'result' field is missing or empty",
+      );
     }
 
-    const timestamp = Date.now() / 1000
+    const timestamp = Date.now() / 1000;
     const detailData = detailDataList.map((element) => {
-      element.online_status = timestamp - element.last_active <= 300
+      element.online_status = timestamp - element.last_active <= 300;
-      delete element.ipv4
+      delete element.ipv4;
-      delete element.ipv6
+      delete element.ipv6;
-      delete element.valid_ip
+      delete element.valid_ip;
-      return element
+      return element;
-    })[0]
+    })[0];
 
-    return detailData
+    return detailData;
   } catch (error) {
-    console.error("GetServerDetail error:", error)
+    console.error("GetServerDetail error:", error);
-    throw error // Rethrow the error to be handled by the caller
+    throw error; // Rethrow the error to be handled by the caller
   }
 }

lib/status-context.tsx

@@ -1,26 +1,30 @@
-"use client"
+"use client";
 
-import React, { ReactNode, createContext, useContext, useState } from "react"
+import React, { ReactNode, createContext, useContext, useState } from "react";
 
-type Status = "all" | "online" | "offline"
+type Status = "all" | "online" | "offline";
 
 interface StatusContextType {
-  status: Status
+  status: Status;
-  setStatus: (status: Status) => void
+  setStatus: (status: Status) => void;
 }
 
-const StatusContext = createContext<StatusContextType | undefined>(undefined)
+const StatusContext = createContext<StatusContextType | undefined>(undefined);
 
 export function StatusProvider({ children }: { children: ReactNode }) {
-  const [status, setStatus] = useState<Status>("all")
+  const [status, setStatus] = useState<Status>("all");
 
-  return <StatusContext.Provider value={{ status, setStatus }}>{children}</StatusContext.Provider>
+  return (
+    <StatusContext.Provider value={{ status, setStatus }}>
+      {children}
+    </StatusContext.Provider>
+  );
 }
 
 export function useStatus() {
-  const context = useContext(StatusContext)
+  const context = useContext(StatusContext);
   if (context === undefined) {
-    throw new Error("useStatus must be used within a StatusProvider")
+    throw new Error("useStatus must be used within a StatusProvider");
   }
-  return context
+  return context;
 }

lib/utils.ts

@@ -1,9 +1,9 @@
-import { NezhaAPISafe } from "@/app/types/nezha-api"
+import { NezhaAPISafe } from "@/app/types/nezha-api";
-import { type ClassValue, clsx } from "clsx"
+import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge"
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
@@ -21,86 +21,98 @@ export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
     disk: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100 || 0,
     stg: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100 || 0,
     country_code: serverInfo.host.CountryCode,
-  }
+  };
 }
 
 export function formatBytes(bytes: number, decimals: number = 2) {
-  if (!+bytes) return "0 Bytes"
+  if (!+bytes) return "0 Bytes";
 
-  const k = 1024
+  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals
+  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]
+  const sizes = [
+    "Bytes",
+    "KiB",
+    "MiB",
+    "GiB",
+    "TiB",
+    "PiB",
+    "EiB",
+    "ZiB",
+    "YiB",
+  ];
 
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
 export function getDaysBetweenDates(date1: string, date2: string): number {
-  const oneDay = 24 * 60 * 60 * 1000 // 一天的毫秒数
+  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
-  const firstDate = new Date(date1)
+  const firstDate = new Date(date1);
-  const secondDate = new Date(date2)
+  const secondDate = new Date(date2);
 
   // 计算两个日期之间的天数差异
-  return Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay))
+  return Math.round(
+    Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay),
+  );
 }
 
 export const fetcher = (url: string) =>
   fetch(url)
     .then((res) => {
       if (!res.ok) {
-        throw new Error(res.statusText)
+        throw new Error(res.statusText);
       }
-      return res.json()
+      return res.json();
     })
     .then((data) => data.data)
     .catch((err) => {
-      console.error(err)
+      console.error(err);
-      throw err
+      throw err;
-    })
+    });
 
 export const nezhaFetcher = async (url: string) => {
-  const res = await fetch(url)
+  const res = await fetch(url);
 
   if (!res.ok) {
-    const error = new Error("An error occurred while fetching the data.")
+    const error = new Error("An error occurred while fetching the data.");
     // @ts-expect-error - res.json() returns a Promise<any>
-    error.info = await res.json()
+    error.info = await res.json();
     // @ts-expect-error - res.status is a number
-    error.status = res.status
+    error.status = res.status;
-    throw error
+    throw error;
   }
 
-  return res.json()
+  return res.json();
-}
+};
 
 export function formatRelativeTime(timestamp: number): string {
-  const now = Date.now()
+  const now = Date.now();
-  const diff = now - timestamp
+  const diff = now - timestamp;
-  const hours = Math.floor(diff / (1000 * 60 * 60))
+  const hours = Math.floor(diff / (1000 * 60 * 60));
-  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-  const seconds = Math.floor((diff % (1000 * 60)) / 1000)
+  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
   if (hours > 24) {
-    const days = Math.floor(hours / 24)
+    const days = Math.floor(hours / 24);
-    return `${days}d`
+    return `${days}d`;
   } else if (hours > 0) {
-    return `${hours}h`
+    return `${hours}h`;
   } else if (minutes > 0) {
-    return `${minutes}m`
+    return `${minutes}m`;
   } else if (seconds >= 0) {
-    return `${seconds}s`
+    return `${seconds}s`;
   }
-  return "0s"
+  return "0s";
 }
 
 export function formatTime(timestamp: number): string {
-  const date = new Date(timestamp)
+  const date = new Date(timestamp);
-  const year = date.getFullYear()
+  const year = date.getFullYear();
-  const month = date.getMonth() + 1
+  const month = date.getMonth() + 1;
-  const day = date.getDate()
+  const day = date.getDate();
-  const hours = date.getHours().toString().padStart(2, "0")
+  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0")
+  const minutes = date.getMinutes().toString().padStart(2, "0");
-  const seconds = date.getSeconds().toString().padStart(2, "0")
+  const seconds = date.getSeconds().toString().padStart(2, "0");
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }

next.config.mjs

@@ -1,13 +1,13 @@
-import withPWAInit from "@ducanh2912/next-pwa"
+import withPWAInit from "@ducanh2912/next-pwa";
-import withBundleAnalyzer from "@next/bundle-analyzer"
+import withBundleAnalyzer from "@next/bundle-analyzer";
-import createNextIntlPlugin from "next-intl/plugin"
+import createNextIntlPlugin from "next-intl/plugin";
-import { env } from "next-runtime-env"
+import { env } from "next-runtime-env";
 
 const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
-})
+});
 
-const withNextIntl = createNextIntlPlugin()
+const withNextIntl = createNextIntlPlugin();
 
 const withPWA = withPWAInit({
   dest: "public",
@@ -18,27 +18,18 @@ const withPWA = withPWAInit({
   workboxOptions: {
     disableDevLogs: true,
   },
-})
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
     inlineCss: true,
-    serverActions: {
-      allowedOrigins: ["*"],
-    },
   },
   output: "standalone",
-  poweredByHeader: false,
-  eslint: {
-    // Warning: This allows production builds to successfully complete even if
-    // your project has ESLint errors.
-    ignoreDuringBuilds: true,
-  },
   logging: {
     fetches: {
       fullUrl: true,
     },
   },
-}
+};
-export default bundleAnalyzer(withPWA(withNextIntl(nextConfig)))
+export default bundleAnalyzer(withPWA(withNextIntl(nextConfig)));

package.json

@@ -1,13 +1,11 @@
 {
   "name": "nezha-dash",
-  "version": "1.8.1",
+  "version": "1.8.0-fix",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3040",
     "start": "node .next/standalone/server.js",
     "lint": "next lint",
-    "lint:fix": "next lint --fix",
-    "format": "prettier --write .",
     "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
     "build-dev": "next build",
     "start-dev": "next start"
@@ -15,22 +13,22 @@
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.9",
     "@heroicons/react": "^2.2.0",
-    "@radix-ui/react-dialog": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.1.4",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@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.18.0",
-    "caniuse-lite": "^1.0.30001688",
+    "caniuse-lite": "^1.0.30001687",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
@@ -52,7 +50,7 @@
     "react-dom": "^19.0.0",
     "react-intersection-observer": "^9.13.1",
     "react-wrap-balancer": "^1.1.1",
-    "recharts": "^2.15.0",
+    "recharts": "^2.14.1",
     "sharp": "^0.33.5",
     "swr": "^2.2.6-beta.5",
     "tailwind-merge": "^2.5.5",
@@ -74,10 +72,13 @@
     "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^4.0.0-beta.6",
     "typescript": "^5.7.2",
-    "vercel": "^39.2.2"
+    "vercel": "39.1.1"
   },
   "overrides": {
-    "react-is": "^19.0.0-rc-69d4b800-20241021"
+    "@types/react": "^npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "^npm:types-react-dom@19.0.0-rc.1",
+    "react-is": "^19.0.0-rc-69d4b800-20241021",
+    "vercel": "$vercel"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

postcss.config.js

@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     "@tailwindcss/postcss": {},
   },
-}
+};

prettier.config.js

@@ -0,0 +1,11 @@
+// prettier.config.js
+module.exports = {
+  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  endOfLine: "auto",
+  plugins: [
+    "prettier-plugin-tailwindcss",
+    "@trivago/prettier-plugin-sort-imports",
+  ],
+};

styles/globals.css

@@ -3,8 +3,8 @@
 @variant dark (&:is(.dark *));
 
 @theme {
-  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));