root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: pr lint

Browse Source
This commit is contained in:
hamster1963 2024-12-13 15:09:12 +08:00
parent 17946d5f0b
commit 55cc033cf5
85 changed files with 1718 additions and 2202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
.github/workflows/auto-fix-lint-format-commit.yml vendored Normal file
View File

@ -0,0 +1,56 @@
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.'
});

12
.prettierrc.mjs Normal file
View File

@ -0,0 +1,12 @@
export default {
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"],
}

49
app/(main)/ClientComponents/Global.tsx
View File

@ -1,52 +1,49 @@
"use client";
"use client"
import { ServerApi } from "@/app/types/nezha-api";
import { nezhaFetcher } from "@/lib/utils";
import useSWRImmutable from "swr/immutable";
import { ServerApi } from "@/app/types/nezha-api"
import { nezhaFetcher } from "@/lib/utils"
import useSWRImmutable from "swr/immutable"
import { geoJsonString } from "../../../lib/geo-json-string";
import GlobalInfo from "./GlobalInfo";
import GlobalLoading from "./GlobalLoading";
import { InteractiveMap } from "./InteractiveMap";
import { TooltipProvider } from "./TooltipContext";
import { geoJsonString } from "../../../lib/geo-json-string"
import GlobalInfo from "./GlobalInfo"
import GlobalLoading from "./GlobalLoading"
import { InteractiveMap } from "./InteractiveMap"
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 serverCounts: { [key: string]: number } = {};
const countryList: string[] = []
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 height = 500;
const width = 900
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]">
@ -64,5 +61,5 @@ export default function ServerGlobal() {
</TooltipProvider>
</div>
</section>
);
)
}

12
app/(main)/ClientComponents/GlobalInfo.tsx
View File

@ -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>
);
)
}

10
app/(main)/ClientComponents/GlobalLoading.tsx
View File

@ -1,10 +1,10 @@
"use client";
"use client"
import { Loader } from "@/components/loading/Loader";
import { useTranslations } from "next-intl";
import { Loader } from "@/components/loading/Loader"
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>
);
)
}

80
app/(main)/ClientComponents/InteractiveMap.tsx
View File

@ -1,18 +1,18 @@
"use client";
"use client"
import { countryCoordinates } from "@/lib/geo-limit";
import { geoEquirectangular, geoPath } from "d3-geo";
import { countryCoordinates } from "@/lib/geo-limit"
import { geoEquirectangular, geoPath } from "d3-geo"
import MapTooltip from "./MapTooltip";
import { useTooltip } from "./TooltipContext";
import MapTooltip from "./MapTooltip"
import { useTooltip } from "./TooltipContext"
interface InteractiveMapProps {
countries: string[];
serverCounts: { [key: string]: number };
width: number;
height: number;
filteredFeatures: any[];
nezhaServerList: any;
countries: string[]
serverCounts: { [key: string]: number }
width: number
height: number
filteredFeatures: any[]
nezhaServerList: any
}
export function InteractiveMap({
@ -23,20 +23,17 @@ 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}
@ -60,11 +57,9 @@ 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
@ -77,31 +72,29 @@ export function InteractiveMap({
}
onMouseEnter={() => {
if (!isHighlighted) {
setTooltipData(null);
return;
setTooltipData(null)
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 中的国家标记点 */}
@ -109,38 +102,35 @@ 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];
if (!coords) return null;
const coords = countryCoordinates[countryCode]
if (!coords) return null
// 使用投影函数将经纬度转换为 SVG 坐标
const [x, y] = projection([coords.lng, coords.lat]) || [0, 0];
const serverCount = serverCounts[countryCode] || 0;
const [x, y] = projection([coords.lng, coords.lat]) || [0, 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"
>
@ -151,11 +141,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>
);
)
}

32
app/(main)/ClientComponents/MapTooltip.tsx
View File

@ -1,20 +1,20 @@
"use client";
"use client"
import { AnimatePresence, m } from "framer-motion";
import { useTranslations } from "next-intl";
import { memo } from "react";
import { AnimatePresence, m } from "framer-motion"
import { useTranslations } from "next-intl"
import { memo } from "react"
import { useTooltip } from "./TooltipContext";
import { useTooltip } from "./TooltipContext"
const MapTooltip = memo(function MapTooltip() {
const { tooltipData } = useTooltip();
const t = useTranslations("Global");
const { tooltipData } = useTooltip()
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,14 +30,12 @@ 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")}
@ -63,7 +61,7 @@ const MapTooltip = memo(function MapTooltip() {
</div>
</m.div>
</AnimatePresence>
);
});
)
})
export default MapTooltip;
export default MapTooltip

226
app/(main)/ClientComponents/NetworkChart.tsx
View File

@ -1,14 +1,8 @@
"use client";
"use client"
import NetworkChartLoading from "@/app/(main)/ClientComponents/NetworkChartLoading";
import { NezhaAPIMonitor, ServerMonitorChart } from "@/app/types/nezha-api";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import NetworkChartLoading from "@/app/(main)/ClientComponents/NetworkChartLoading"
import { NezhaAPIMonitor, ServerMonitorChart } from "@/app/types/nezha-api"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
ChartConfig,
ChartContainer,
@ -16,68 +10,59 @@ import {
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import getEnv from "@/lib/env-entry";
import { formatTime, nezhaFetcher } from "@/lib/utils";
import { formatRelativeTime } from "@/lib/utils";
import { useTranslations } from "next-intl";
import * as React from "react";
import { useCallback, useMemo } from "react";
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
import useSWR from "swr";
} from "@/components/ui/chart"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import getEnv from "@/lib/env-entry"
import { formatTime, nezhaFetcher } from "@/lib/utils"
import { formatRelativeTime } from "@/lib/utils"
import { useTranslations } from "next-intl"
import * as React from "react"
import { useCallback, useMemo } from "react"
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
import useSWR from "swr"
interface ResultItem {
created_at: number;
[key: string]: number;
created_at: number
[key: string]: number
}
export function NetworkChartClient({
server_id,
show,
}: {
server_id: number;
show: boolean;
}) {
const t = useTranslations("NetworkChartClient");
export function 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
@ -87,7 +72,7 @@ export function NetworkChartClient({
serverName={data[0].server_name}
formattedData={formattedData}
/>
);
)
}
export const NetworkChart = React.memo(function NetworkChart({
@ -97,33 +82,33 @@ export const NetworkChart = React.memo(function NetworkChart({
serverName,
formattedData,
}: {
chartDataKey: string[];
chartConfig: ChartConfig;
chartData: ServerMonitorChart;
serverName: string;
formattedData: ResultItem[];
chartDataKey: string[]
chartConfig: ChartConfig
chartData: ServerMonitorChart
serverName: string
formattedData: ResultItem[]
}) {
const t = useTranslations("NetworkChart");
const t = useTranslations("NetworkChart")
const defaultChart = "All";
const defaultChart = "All"
const [activeChart, setActiveChart] = React.useState(defaultChart);
const [isPeakEnabled, setIsPeakEnabled] = React.useState(false);
const [activeChart, setActiveChart] = React.useState(defaultChart)
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);
return `hsl(var(--chart-${(index % 10) + 1}))`;
const index = chartDataKey.indexOf(chart)
return `hsl(var(--chart-${(index % 10) + 1}))`
},
[chartDataKey],
);
)
const chartButtons = useMemo(
() =>
@ -134,16 +119,14 @@ 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) {
@ -156,7 +139,7 @@ export const NetworkChart = React.memo(function NetworkChart({
dataKey="avg_delay"
stroke={getColorByIndex(activeChart)}
/>
);
)
}
return chartDataKey.map((key) => (
<Line
@ -169,65 +152,50 @@ 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[];
const windowSize = 7; // 增加到7个点的移动平均
const weights = [0.1, 0.1, 0.15, 0.3, 0.15, 0.1, 0.1]; // 加权平均的权重
) as ResultItem[]
const windowSize = 7 // 增加到7个点的移动平均
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 smoothed = { ...point } as ResultItem;
const window = data.slice(index - windowSize + 1, index + 1)
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;
});
}, [
isPeakEnabled,
activeChart,
formattedData,
chartData,
chartDataKey,
defaultChart,
]);
return smoothed
})
}, [isPeakEnabled, activeChart, formattedData, chartData, chartDataKey, defaultChart])
return (
<Card>
@ -240,11 +208,7 @@ 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>
@ -253,15 +217,8 @@ 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"
>
<LineChart
accessibilityLayer
data={processedData}
margin={{ left: 12, right: 12 }}
>
<ChartContainer 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"
@ -286,67 +243,64 @@ 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)
}

6
app/(main)/ClientComponents/NetworkChartLoading.tsx
View File

@ -1,5 +1,5 @@
import { Loader } from "@/components/loading/Loader";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Loader } from "@/components/loading/Loader"
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>
);
)
}

323
app/(main)/ClientComponents/ServerDetailChartClient.tsx
View File

@ -1,77 +1,59 @@
"use client";
"use client"
import { ServerDetailChartLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
import { Card, CardContent } from "@/components/ui/card";
import { ChartConfig, ChartContainer } from "@/components/ui/chart";
import {
formatBytes,
formatNezhaInfo,
formatRelativeTime,
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";
import { ServerDetailChartLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading"
import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api"
import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar"
import { Card, CardContent } from "@/components/ui/card"
import { ChartConfig, ChartContainer } from "@/components/ui/chart"
import { formatBytes, formatNezhaInfo, formatRelativeTime, 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;
cpu: number;
};
timeStamp: string
cpu: number
}
type processChartData = {
timeStamp: string;
process: number;
};
timeStamp: string
process: number
}
type diskChartData = {
timeStamp: string;
disk: number;
};
timeStamp: string
disk: number
}
type memChartData = {
timeStamp: string;
mem: number;
swap: number;
};
timeStamp: string
mem: number
swap: number
}
type networkChartData = {
timeStamp: string;
upload: number;
download: number;
};
timeStamp: string
upload: number
download: number
}
type connectChartData = {
timeStamp: string;
tcp: number;
udp: number;
};
timeStamp: string
tcp: number
udp: number
}
export default function ServerDetailChartClient({
server_id,
}: {
server_id: number;
show: boolean;
server_id: number
show: boolean
}) {
const t = useTranslations("ServerDetailChartClient");
const t = useTranslations("ServerDetailChartClient")
const { data: allFallbackData } = useSWRImmutable<ServerApi>(
"/api/server",
nezhaFetcher,
);
const fallbackData = allFallbackData?.result?.find(
(item) => item.id === server_id,
);
const { data: allFallbackData } = useSWRImmutable<ServerApi>("/api/server", nezhaFetcher)
const fallbackData = allFallbackData?.result?.find((item) => item.id === server_id)
const { data, error } = useSWRImmutable<NezhaAPISafe>(
`/api/detail?server_id=${server_id}`,
@ -79,21 +61,19 @@ 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">
@ -104,38 +84,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();
let newData = [] as cpuChartData[];
const timestamp = Date.now().toString()
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>
@ -144,9 +124,7 @@ 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}
@ -156,10 +134,7 @@ 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}
@ -200,45 +175,40 @@ 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();
let newData = [] as processChartData[];
const timestamp = Date.now().toString()
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>
@ -250,10 +220,7 @@ 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}
@ -273,12 +240,7 @@ 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"
@ -292,37 +254,34 @@ 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();
let newData = [] as memChartData[];
const timestamp = Date.now().toString()
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: {
@ -331,7 +290,7 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
swap: {
label: "Swap",
},
} satisfies ChartConfig;
} satisfies ChartConfig
return (
<Card>
@ -368,18 +327,14 @@ 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}
@ -428,40 +383,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();
let newData = [] as diskChartData[];
const timestamp = Date.now().toString()
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>
@ -471,9 +426,7 @@ 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}
@ -483,15 +436,11 @@ 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}
@ -532,44 +481,39 @@ 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();
let newData = [] as networkChartData[];
const timestamp = Date.now().toString()
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));
maxDownload = Math.ceil(maxDownload);
let maxDownload = Math.max(...networkChartData.map((item) => item.download))
maxDownload = Math.ceil(maxDownload)
if (maxDownload < 1) {
maxDownload = 1;
maxDownload = 1
}
const chartConfig = {
@ -579,7 +523,7 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
download: {
label: "Download",
},
} satisfies ChartConfig;
} satisfies ChartConfig
return (
<Card>
@ -595,9 +539,7 @@ 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>
@ -605,10 +547,7 @@ 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}
@ -660,37 +599,32 @@ 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();
let newData = [] as connectChartData[];
const timestamp = Date.now().toString()
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: {
@ -699,7 +633,7 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) {
udp: {
label: "UDP",
},
} satisfies ChartConfig;
} satisfies ChartConfig
return (
<Card>
@ -723,10 +657,7 @@ 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}
@ -775,5 +706,5 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) {
</section>
</CardContent>
</Card>
);
)
}

101
app/(main)/ClientComponents/ServerDetailClient.tsx
View File

@ -1,86 +1,74 @@
"use client";
"use client"
import { ServerDetailLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
import { BackIcon } from "@/components/Icon";
import ServerFlag from "@/components/ServerFlag";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import getEnv from "@/lib/env-entry";
import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
import { useTranslations } from "next-intl";
import { notFound, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import useSWR from "swr";
import useSWRImmutable from "swr/immutable";
import { ServerDetailLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading"
import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api"
import { BackIcon } from "@/components/Icon"
import ServerFlag from "@/components/ServerFlag"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import getEnv from "@/lib/env-entry"
import { cn, formatBytes, nezhaFetcher } from "@/lib/utils"
import { useTranslations } from "next-intl"
import { notFound, useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import useSWR from "swr"
import useSWRImmutable from "swr/immutable"
export default function ServerDetailClient({
server_id,
}: {
server_id: number;
}) {
const t = useTranslations("ServerDetailClient");
const router = useRouter();
export default function ServerDetailClient({ server_id }: { 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>(`/api/detail?server_id=${server_id}`, nezhaFetcher, {
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
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>
@ -163,9 +151,7 @@ export default function ServerDetailClient({
<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}
@ -218,9 +204,8 @@ export default function ServerDetailClient({
<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.Load15.toFixed(2) || "0.00"}
{data.status.Load1.toFixed(2) || "0.00"} / {data.status.Load5.toFixed(2) || "0.00"}{" "}
/ {data.status.Load15.toFixed(2) || "0.00"}
</div>
</section>
</CardContent>
@ -230,10 +215,7 @@ export default function ServerDetailClient({
<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>
)}
@ -245,10 +227,7 @@ export default function ServerDetailClient({
<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>
)}
@ -257,5 +236,5 @@ export default function ServerDetailClient({
</Card>
</section>
</div>
);
)
}

14
app/(main)/ClientComponents/ServerDetailLoading.tsx
View File

@ -1,6 +1,6 @@
import { BackIcon } from "@/components/Icon";
import { Skeleton } from "@/components/ui/skeleton";
import { useRouter } from "next/navigation";
import { BackIcon } from "@/components/Icon"
import { Skeleton } from "@/components/ui/skeleton"
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>
</>
);
)
}

57
app/(main)/ClientComponents/ServerIPInfo.tsx
View File

@ -1,26 +1,23 @@
"use client";
"use client"
import { IPInfo } from "@/app/api/server-ip/route";
import { Loader } from "@/components/loading/Loader";
import { Card, CardContent } from "@/components/ui/card";
import { nezhaFetcher } from "@/lib/utils";
import { useTranslations } from "next-intl";
import useSWRImmutable from "swr/immutable";
import { IPInfo } from "@/app/api/server-ip/route"
import { Loader } from "@/components/loading/Loader"
import { Card, CardContent } from "@/components/ui/card"
import { nezhaFetcher } from "@/lib/utils"
import { useTranslations } from "next-intl"
import useSWRImmutable from "swr/immutable"
export default function ServerIPInfo({ server_id }: { server_id: number }) {
const t = useTranslations("IPInfo");
const 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 (
@ -31,9 +28,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{"ASN"}</p>
<div className="text-xs">
{data.asn.autonomous_system_organization}
</div>
<div className="text-xs">{data.asn.autonomous_system_organization}</div>
</section>
</CardContent>
</Card>
@ -42,12 +37,8 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
{t("asn_number")}
</p>
<div className="text-xs">
AS{data.asn.autonomous_system_number}
</div>
<p className="text-xs text-muted-foreground">{t("asn_number")}</p>
<div className="text-xs">AS{data.asn.autonomous_system_number}</div>
</section>
</CardContent>
</Card>
@ -56,12 +47,8 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
{t("registered_country")}
</p>
<div className="text-xs">
{data.city.registered_country?.names.en}
</div>
<p className="text-xs text-muted-foreground">{t("registered_country")}</p>
<div className="text-xs">{data.city.registered_country?.names.en}</div>
</section>
</CardContent>
</Card>
@ -90,9 +77,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
{t("longitude")}
</p>
<p className="text-xs text-muted-foreground">{t("longitude")}</p>
<div className="text-xs">{data.city.location?.longitude}</div>
</section>
</CardContent>
@ -112,9 +97,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
{t("time_zone")}
</p>
<p className="text-xs text-muted-foreground">{t("time_zone")}</p>
<div className="text-xs">{data.city.location?.time_zone}</div>
</section>
</CardContent>
@ -124,9 +107,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
<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>
@ -134,5 +115,5 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
)}
</section>
</>
);
)
}

155
app/(main)/ClientComponents/ServerListClient.tsx
View File

@ -1,82 +1,79 @@
"use client";
"use client"
import { ServerApi } from "@/app/types/nezha-api";
import ServerCard from "@/components/ServerCard";
import ServerCardInline from "@/components/ServerCardInline";
import Switch from "@/components/Switch";
import getEnv from "@/lib/env-entry";
import { useFilter } from "@/lib/network-filter-context";
import { useStatus } from "@/lib/status-context";
import { cn, nezhaFetcher } from "@/lib/utils";
import { MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";
import { useEffect, useRef, useState } from "react";
import useSWR from "swr";
import { ServerApi } from "@/app/types/nezha-api"
import ServerCard from "@/components/ServerCard"
import ServerCardInline from "@/components/ServerCardInline"
import Switch from "@/components/Switch"
import getEnv from "@/lib/env-entry"
import { useFilter } from "@/lib/network-filter-context"
import { useStatus } from "@/lib/status-context"
import { cn, nezhaFetcher } from "@/lib/utils"
import { MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
import { useTranslations } from "next-intl"
import dynamic from "next/dynamic"
import { useEffect, useRef, useState } from "react"
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 { filter } = useFilter();
const t = useTranslations("ServerListClient");
const containerRef = useRef<HTMLDivElement>(null);
const defaultTag = "defaultTag";
const { status } = useStatus()
const { filter } = useFilter()
const t = useTranslations("ServerListClient")
const containerRef = useRef<HTMLDivElement>(null)
const defaultTag = "defaultTag"
const [tag, setTag] = useState<string>(defaultTag);
const [showMap, setShowMap] = useState<boolean>(false);
const [inline, setInline] = useState<string>("0");
const [tag, setTag] = useState<string>(defaultTag)
const [showMap, setShowMap] = useState<boolean>(false)
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;
setTag(savedTag);
const savedTag = sessionStorage.getItem("selectedTag") || defaultTag
setTag(savedTag)
restoreScrollPosition();
}, []);
restoreScrollPosition()
}, [])
const handleTagChange = (newTag: string) => {
setTag(newTag);
sessionStorage.setItem("selectedTag", newTag);
sessionStorage.setItem(
"scrollPosition",
String(containerRef.current?.scrollTop || 0),
);
};
setTag(newTag)
sessionStorage.setItem("selectedTag", newTag)
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 (
@ -84,61 +81,57 @@ 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);
if (displayIndexDiff !== 0) return displayIndexDiff;
return a.id - b.id;
});
const displayIndexDiff = (b.display_index || 0) - (a.display_index || 0)
if (displayIndexDiff !== 0) return displayIndexDiff
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 uniqueTags = [...new Set(allTag)];
uniqueTags.unshift(defaultTag);
const allTag = filteredServersByStatus.map((server) => server.tag).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 0;
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
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)]",
@ -151,14 +144,13 @@ export default function ServerListClient() {
</button>
<button
onClick={() => {
setInline(inline === "0" ? "1" : "0");
localStorage.setItem("inline", inline === "0" ? "1" : "0");
setInline(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",
},
)}
>
@ -186,15 +178,12 @@ 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>
)}
</>
);
)
}

94
app/(main)/ClientComponents/ServerOverviewClient.tsx
View File

@ -1,31 +1,25 @@
"use client";
"use client"
import { ServerApi } from "@/app/types/nezha-api";
import { Loader } from "@/components/loading/Loader";
import { Card, CardContent } from "@/components/ui/card";
import getEnv from "@/lib/env-entry";
import { useFilter } from "@/lib/network-filter-context";
import { useStatus } from "@/lib/status-context";
import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
import blogMan from "@/public/blog-man.webp";
import {
ArrowDownCircleIcon,
ArrowUpCircleIcon,
} from "@heroicons/react/20/solid";
import { useTranslations } from "next-intl";
import Image from "next/image";
import useSWRImmutable from "swr/immutable";
import { ServerApi } from "@/app/types/nezha-api"
import { Loader } from "@/components/loading/Loader"
import { Card, CardContent } from "@/components/ui/card"
import getEnv from "@/lib/env-entry"
import { useFilter } from "@/lib/network-filter-context"
import { useStatus } from "@/lib/status-context"
import { cn, formatBytes, nezhaFetcher } from "@/lib/utils"
import blogMan from "@/public/blog-man.webp"
import { ArrowDownCircleIcon, ArrowUpCircleIcon } 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 { filter, setFilter } = useFilter();
const t = useTranslations("ServerOverviewClient");
const { status, setStatus } = useStatus()
const { filter, setFilter } = useFilter()
const t = useTranslations("ServerOverviewClient")
const { data, error, isLoading } = useSWRImmutable<ServerApi>(
"/api/server",
nezhaFetcher,
);
const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true";
const { data, error, isLoading } = useSWRImmutable<ServerApi>("/api/server", nezhaFetcher)
const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true"
if (error) {
return (
@ -35,7 +29,7 @@ export default function ServerOverviewClient() {
</p>
<p className="text-sm font-medium opacity-40">{t("error_message")}</p>
</div>
);
)
}
return (
@ -43,26 +37,20 @@ export default function ServerOverviewClient() {
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card
onClick={() => {
setFilter(false);
setStatus("all");
setFilter(false)
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} />
@ -74,8 +62,8 @@ export default function ServerOverviewClient() {
</Card>
<Card
onClick={() => {
setFilter(false);
setStatus("online");
setFilter(false)
setStatus("online")
}}
className={cn(
"cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
@ -86,18 +74,14 @@ 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} />
@ -109,8 +93,8 @@ export default function ServerOverviewClient() {
</Card>
<Card
onClick={() => {
setFilter(false);
setStatus("offline");
setFilter(false)
setStatus("offline")
}}
className={cn(
"cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
@ -121,18 +105,14 @@ 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} />
@ -144,8 +124,8 @@ export default function ServerOverviewClient() {
</Card>
<Card
onClick={() => {
setStatus("all");
setFilter(true);
setStatus("all")
setFilter(true)
}}
className={cn(
"cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all group",
@ -157,9 +137,7 @@ 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 ? (
<>
@ -206,5 +184,5 @@ export default function ServerOverviewClient() {
</div>
)}
</>
);
)
}

32
app/(main)/ClientComponents/TooltipContext.tsx
View File

@ -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];
country: string;
count: number;
centroid: [number, number]
country: string
count: number
servers: Array<{
name: string;
status: boolean;
}>;
name: string
status: boolean
}>
}
interface TooltipContextType {
tooltipData: TooltipData | null;
setTooltipData: (data: TooltipData | null) => void;
tooltipData: TooltipData | null
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
}

10
app/(main)/footer.tsx
View File

@ -1,9 +1,9 @@
import pack from "@/package.json";
import { useTranslations } from "next-intl";
import pack from "@/package.json"
import { useTranslations } from "next-intl"
export default function Footer() {
const t = useTranslations("Footer");
const version = pack.version;
const t = useTranslations("Footer")
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>
);
)
}

103
app/(main)/header.tsx
View File

@ -1,30 +1,30 @@
"use client";
"use client"
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { ModeToggle } from "@/components/ThemeSwitcher";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import getEnv from "@/lib/env-entry";
import { DateTime } from "luxon";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import React, { useEffect, useRef, useState } from "react";
import { LanguageSwitcher } from "@/components/LanguageSwitcher"
import { ModeToggle } from "@/components/ThemeSwitcher"
import { Separator } from "@/components/ui/separator"
import { Skeleton } from "@/components/ui/skeleton"
import getEnv from "@/lib/env-entry"
import { DateTime } from "luxon"
import { useTranslations } from "next-intl"
import { useRouter } from "next/navigation"
import React, { useEffect, useRef, useState } from "react"
function Header() {
const t = useTranslations("Header");
const customLogo = getEnv("NEXT_PUBLIC_CustomLogo");
const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
const t = useTranslations("Header")
const customLogo = getEnv("NEXT_PUBLIC_CustomLogo")
const customTitle = getEnv("NEXT_PUBLIC_CustomTitle")
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");
router.push(`/`);
sessionStorage.removeItem("selectedTag")
router.push(`/`)
}}
className="flex cursor-pointer items-center text-base font-medium"
>
@ -45,14 +45,9 @@ 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">
@ -63,20 +58,20 @@ function Header() {
</section>
<Overview />
</div>
);
)
}
type links = {
link: string;
name: string;
};
link: 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">
@ -91,47 +86,45 @@ 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);
return () => clearInterval(interval);
const interval = setInterval(() => savedCallback.current(), delay || 0)
return () => clearInterval(interval)
}
return undefined
}, [delay])
}
return undefined;
}, [delay]);
};
function Overview() {
const t = useTranslations("Overview");
const [mouted, setMounted] = useState(false);
const t = useTranslations("Overview")
const [mouted, setMounted] = useState(false)
useEffect(() => {
setMounted(true);
}, []);
const timeOption = DateTime.TIME_SIMPLE;
timeOption.hour12 = true;
setMounted(true)
}, [])
const timeOption = DateTime.TIME_SIMPLE
timeOption.hour12 = true
const [timeString, setTimeString] = useState(
DateTime.now().setLocale("en-US").toLocaleString(timeOption),
);
)
useInterval(() => {
setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
}, 1000);
setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption))
}, 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>
) : (
@ -139,6 +132,6 @@ function Overview() {
)}
</div>
</section>
);
)
}
export default Header;
export default Header

24
app/(main)/layout.tsx
View File

@ -1,13 +1,13 @@
import Footer from "@/app/(main)/footer";
import Header from "@/app/(main)/header";
import { auth } from "@/auth";
import { SignIn } from "@/components/SignIn";
import getEnv from "@/lib/env-entry";
import React from "react";
import Footer from "@/app/(main)/footer"
import Header from "@/app/(main)/header"
import { auth } from "@/auth"
import { SignIn } from "@/components/SignIn"
import getEnv from "@/lib/env-entry"
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
}

6
app/(main)/page.tsx
View File

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

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

@ -1,48 +1,36 @@
"use client";
"use client"
import { NetworkChartClient } from "@/app/(main)/ClientComponents/NetworkChart";
import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailChartClient";
import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient";
import TabSwitch from "@/components/TabSwitch";
import { Separator } from "@/components/ui/separator";
import getEnv from "@/lib/env-entry";
import { use, useState } from "react";
import { NetworkChartClient } from "@/app/(main)/ClientComponents/NetworkChart"
import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailChartClient"
import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient"
import TabSwitch from "@/components/TabSwitch"
import { Separator } from "@/components/ui/separator"
import getEnv from "@/lib/env-entry"
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 tabs = ["Detail", "Network"];
const [currentTab, setCurrentTab] = useState(tabs[0]);
const params = use(props.params)
const tabs = ["Detail", "Network"]
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)} />
)}
<NetworkChartClient
server_id={Number(params.id)}
show={currentTab === tabs[1]}
/>
{getEnv("NEXT_PUBLIC_ShowIpInfo") && <ServerIPInfo server_id={Number(params.id)} />}
<NetworkChartClient server_id={Number(params.id)} show={currentTab === tabs[1]} />
</div>
</div>
);
)
}

4
app/api/auth/[...nextauth]/route.ts
View File

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

50
app/api/detail/route.ts
View File

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

50
app/api/monitor/route.ts
View File

@ -1,52 +1,46 @@
import { auth } from "@/auth";
import getEnv from "@/lib/env-entry";
import { GetServerMonitor } from "@/lib/serverFetch";
import { redirect } from "next/navigation";
import { NextRequest, NextResponse } from "next/server";
import { auth } from "@/auth"
import getEnv from "@/lib/env-entry"
import { GetServerMonitor } from "@/lib/serverFetch"
import { redirect } from "next/navigation"
import { NextRequest, NextResponse } from "next/server"
export const dynamic = "force-dynamic";
export const dynamic = "force-dynamic"
interface ResError extends Error {
statusCode: number;
message: string;
statusCode: number
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 server_id = searchParams.get("server_id");
const { searchParams } = new URL(req.url)
const server_id = searchParams.get("server_id")
if (!server_id) {
return NextResponse.json(
{ error: "server_id is required" },
{ status: 400 },
);
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;
console.error("Error in GET handler:", err);
const statusCode = err.statusCode || 500;
const message = err.message || "Internal Server Error";
return NextResponse.json({ error: message }, { status: statusCode });
const err = error as ResError
console.error("Error in GET handler:", err)
const statusCode = err.statusCode || 500
const message = err.message || "Internal Server Error"
return NextResponse.json({ error: message }, { status: statusCode })
}
}

74
app/api/server-ip/route.ts
View File

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

34
app/api/server/route.ts
View File

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

61
app/layout.tsx
View File

@ -1,28 +1,28 @@
// @auto-i18n-check. Please do not delete the line.
import { ThemeColorManager } from "@/components/ThemeColorManager";
import { MotionProvider } from "@/components/motion/motion-provider";
import getEnv from "@/lib/env-entry";
import { FilterProvider } from "@/lib/network-filter-context";
import { StatusProvider } from "@/lib/status-context";
import { cn } from "@/lib/utils";
import "@/styles/globals.css";
import type { Metadata } from "next";
import { Viewport } from "next";
import { NextIntlClientProvider } from "next-intl";
import { getLocale, getMessages } from "next-intl/server";
import { PublicEnvScript } from "next-runtime-env";
import { ThemeProvider } from "next-themes";
import { Inter as FontSans } from "next/font/google";
import React from "react";
import { ThemeColorManager } from "@/components/ThemeColorManager"
import { MotionProvider } from "@/components/motion/motion-provider"
import getEnv from "@/lib/env-entry"
import { FilterProvider } from "@/lib/network-filter-context"
import { StatusProvider } from "@/lib/status-context"
import { cn } from "@/lib/utils"
import "@/styles/globals.css"
import type { Metadata } from "next"
import { Viewport } from "next"
import { NextIntlClientProvider } from "next-intl"
import { getLocale, getMessages } from "next-intl/server"
import { PublicEnvScript } from "next-runtime-env"
import { ThemeProvider } from "next-themes"
import { Inter as FontSans } from "next/font/google"
import React from "react"
const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
});
})
const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
const disableIndex = getEnv("NEXT_PUBLIC_DisableIndex");
const customTitle = getEnv("NEXT_PUBLIC_CustomTitle")
const customDescription = getEnv("NEXT_PUBLIC_CustomDescription")
const disableIndex = getEnv("NEXT_PUBLIC_DisableIndex")
export const metadata: Metadata = {
manifest: "/manifest.json",
@ -37,22 +37,18 @@ 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;
}) {
const locale = await getLocale();
const messages = await getMessages();
export default async function LocaleLayout({ children }: { children: React.ReactNode }) {
const locale = await getLocale()
const messages = await getMessages()
return (
<html lang={locale} suppressHydrationWarning>
@ -67,12 +63,7 @@ export default async function LocaleLayout({
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"
@ -92,5 +83,5 @@ export default async function LocaleLayout({
</MotionProvider>
</body>
</html>
);
)
}

16
app/not-found.tsx
View File

@ -1,11 +1,11 @@
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useTranslations } from "next-intl"
import Link from "next/link"
import Footer from "./(main)/footer";
import Header from "./(main)/header";
import Footer from "./(main)/footer"
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,13 +13,11 @@ 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>
);
)
}

120
app/types/nezha-api.ts
View File

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

3
app/types/utils.ts
View File

@ -1,2 +1 @@
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>>

18
auth.ts
View File

@ -1,7 +1,7 @@
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import NextAuth from "next-auth"
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,11 +12,11 @@ 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" }
},
}),
],
@ -24,9 +24,9 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
async signIn({ user }) {
// @ts-ignore
if (user.error) {
return false;
return false
}
return true;
return true
},
},
});
})

22
components/BlurLayer.tsx
View File

@ -1,20 +1,20 @@
import React from "react";
import React from "react"
const BlurLayers = () => {
const computeLayerStyle = (index: number) => {
const blurAmount = index * 3.7037;
const maskStart = index * 10;
let maskEnd = maskStart + 20;
const blurAmount = index * 3.7037
const maskStart = index * 10
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

32
components/GlobalBackButton.tsx
View File

@ -1,31 +1,31 @@
"use client";
"use client"
import { useFilter } from "@/lib/network-filter-context";
import { useStatus } from "@/lib/status-context";
import { ServerStackIcon } from "@heroicons/react/20/solid";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useFilter } from "@/lib/network-filter-context"
import { useStatus } from "@/lib/status-context"
import { ServerStackIcon } from "@heroicons/react/20/solid"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
export default function GlobalBackButton() {
const router = useRouter();
const { setStatus } = useStatus();
const { setFilter } = useFilter();
const router = useRouter()
const { setStatus } = useStatus()
const { setFilter } = useFilter()
useEffect(() => {
setStatus("all");
setFilter(false);
sessionStorage.removeItem("selectedTag");
router.prefetch(`/`);
}, []);
setStatus("all")
setFilter(false)
sessionStorage.removeItem("selectedTag")
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>
);
)
}

6
components/Icon.tsx
View File

@ -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"
/>
</>
);
)
}

29
components/LanguageSwitcher.tsx
View File

@ -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";
import { localeItems } from "@/i18n-metadata";
import { setUserLocale } from "@/i18n/locale";
import { CheckCircleIcon } from "@heroicons/react/20/solid";
import { useLocale } from "next-intl";
import * as React from "react";
} from "@/components/ui/dropdown-menu"
import { localeItems } from "@/i18n-metadata"
import { setUserLocale } from "@/i18n/locale"
import { CheckCircleIcon } from "@heroicons/react/20/solid"
import { useLocale } from "next-intl"
import * as React from "react"
export function LanguageSwitcher() {
const locale = useLocale();
const locale = useLocale()
const handleSelect = (e: Event, newLocale: string) => {
e.preventDefault(); // 阻止默认的关闭行为
setUserLocale(newLocale);
};
e.preventDefault() // 阻止默认的关闭行为
setUserLocale(newLocale)
}
return (
<DropdownMenu>
@ -40,11 +40,10 @@ 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>
);
)
}

93
components/ServerCard.tsx
View File

@ -1,35 +1,26 @@
import { NezhaAPISafe } from "@/app/types/nezha-api";
import ServerFlag from "@/components/ServerFlag";
import ServerUsageBar from "@/components/ServerUsageBar";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import getEnv from "@/lib/env-entry";
import {
GetFontLogoClass,
GetOsName,
MageMicrosoftWindows,
} from "@/lib/logo-class";
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { NezhaAPISafe } from "@/app/types/nezha-api"
import ServerFlag from "@/components/ServerFlag"
import ServerUsageBar from "@/components/ServerUsageBar"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import getEnv from "@/lib/env-entry"
import { GetFontLogoClass, GetOsName, 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;
}) {
const t = useTranslations("ServerCard");
export default function 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 showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
const fixedTopServerName =
getEnv("NEXT_PUBLIC_FixedTopServerName") === "true";
const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true"
const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "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}>
@ -75,11 +66,7 @@ export default function ServerCard({
})}
>
{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]" />
@ -90,48 +77,36 @@ export default function ServerCard({
<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>
@ -158,9 +133,7 @@ export default function ServerCard({
<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,
@ -175,24 +148,16 @@ export default function ServerCard({
>
<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>
);
)
}

90
components/ServerCardInline.tsx
View File

@ -1,33 +1,25 @@
import { NezhaAPISafe } from "@/app/types/nezha-api";
import ServerFlag from "@/components/ServerFlag";
import ServerUsageBar from "@/components/ServerUsageBar";
import { Card } from "@/components/ui/card";
import getEnv from "@/lib/env-entry";
import {
GetFontLogoClass,
GetOsName,
MageMicrosoftWindows,
} from "@/lib/logo-class";
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { NezhaAPISafe } from "@/app/types/nezha-api"
import ServerFlag from "@/components/ServerFlag"
import ServerUsageBar from "@/components/ServerUsageBar"
import { Card } from "@/components/ui/card"
import getEnv from "@/lib/env-entry"
import { GetFontLogoClass, GetOsName, 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;
}) {
const t = useTranslations("ServerCard");
export default function ServerCardInline({ 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}>
@ -63,9 +55,7 @@ export default function ServerCardInline({
<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]" />
@ -76,9 +66,7 @@ export default function ServerCardInline({
<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>
@ -90,53 +78,39 @@ export default function ServerCardInline({
</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>
@ -157,24 +131,16 @@ export default function ServerCardInline({
>
<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>
);
)
}

30
components/ServerCardPopover.tsx
View File

@ -1,6 +1,6 @@
import { NezhaAPISafe } from "@/app/types/nezha-api";
import { cn, formatBytes } from "@/lib/utils";
import { useTranslations } from "next-intl";
import { NezhaAPISafe } from "@/app/types/nezha-api"
import { cn, formatBytes } from "@/lib/utils"
import { useTranslations } from "next-intl"
export function ServerCardPopoverCard({
className,
@ -8,31 +8,27 @@ export function ServerCardPopoverCard({
content,
children,
}: {
className?: string;
title: string;
content?: string;
children?: React.ReactNode;
className?: string
title: string
content?: string
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"];
status: NezhaAPISafe["status"];
host: NezhaAPISafe["host"]
status: NezhaAPISafe["status"]
}) {
const t = useTranslations("ServerCardPopover");
const t = useTranslations("ServerCardPopover")
return (
<section className="max-w-[300px]">
<ServerCardPopoverCard
@ -69,5 +65,5 @@ export default function ServerCardPopover({
content={`${(status.Uptime / 86400).toFixed(0)} Days`}
/>
</section>
);
)
}

52
components/ServerFlag.tsx
View File

@ -1,47 +1,47 @@
import getEnv from "@/lib/env-entry";
import { cn } from "@/lib/utils";
import getUnicodeFlagIcon from "country-flag-icons/unicode";
import { useEffect, useState } from "react";
import getEnv from "@/lib/env-entry"
import { cn } from "@/lib/utils"
import getUnicodeFlagIcon from "country-flag-icons/unicode"
import { useEffect, useState } from "react"
export default function ServerFlag({
country_code,
className,
}: {
country_code: string;
className?: string;
country_code: 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);
return;
setSupportsEmojiFlags(false)
return
}
const checkEmojiSupport = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const emojiFlag = "🇺🇸"; // 使用美国国旗作为测试
if (!ctx) return;
ctx.fillStyle = "#000";
ctx.textBaseline = "top";
ctx.font = "32px Arial";
ctx.fillText(emojiFlag, 0, 0);
const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")
const emojiFlag = "🇺🇸" // 使用美国国旗作为测试
if (!ctx) return
ctx.fillStyle = "#000"
ctx.textBaseline = "top"
ctx.font = "32px Arial"
ctx.fillText(emojiFlag, 0, 0)
const support = ctx.getImageData(16, 16, 1, 1).data[3] !== 0;
setSupportsEmojiFlags(support);
};
const support = ctx.getImageData(16, 16, 1, 1).data[3] !== 0
setSupportsEmojiFlags(support)
}
checkEmojiSupport();
}, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发
checkEmojiSupport()
}, [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>
);
)
}

4
components/ServerList.tsx
View File

@ -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 />
}

4
components/ServerOverview.tsx
View File

@ -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 />
}

18
components/ServerUsageBar.tsx
View File

@ -1,9 +1,9 @@
import { Progress } from "@/components/ui/progress";
import React from "react";
import { Progress } from "@/components/ui/progress"
import React from "react"
type ServerUsageBarProps = {
value: number;
};
value: number
}
export default function ServerUsageBar({ value }: ServerUsageBarProps) {
return (
@ -11,14 +11,8 @@ 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"}
/>
);
)
}

79
components/SignIn.tsx
View File

@ -1,69 +1,60 @@
"use client";
"use client"
import { getCsrfToken, signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { getCsrfToken, signIn } from "next-auth/react"
import { useTranslations } from "next-intl"
import { useRouter } from "next/navigation"
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 [loading, setLoading] = useState(false);
const [errorState, setErrorState] = useState(false);
const [successState, setSuccessState] = useState(false);
const [csrfToken, setCsrfToken] = useState("")
const [loading, setLoading] = useState(false)
const [errorState, setErrorState] = useState(false)
const [successState, setSuccessState] = useState(false)
const router = useRouter();
const router = useRouter()
useEffect(() => {
async function loadProviders() {
const csrf = await getCsrfToken();
setCsrfToken(csrf);
const csrf = await getCsrfToken()
setCsrfToken(csrf)
}
loadProviders();
}, []);
loadProviders()
}, [])
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
const formData = new FormData(e.currentTarget);
const password = formData.get("password") as string;
e.preventDefault()
setLoading(true)
const formData = new FormData(e.currentTarget)
const password = formData.get("password") as string
const res = await signIn("credentials", {
password: password,
redirect: false,
});
})
if (res?.error) {
console.log("login error");
setErrorState(true);
setSuccessState(false);
console.log("login error")
setErrorState(true)
setSuccessState(false)
} else {
console.log("login success");
setErrorState(false);
setSuccessState(true);
router.push("/");
router.refresh();
console.log("login success")
setErrorState(false)
setSuccessState(true)
router.push("/")
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
@ -81,5 +72,5 @@ export function SignIn() {
</button>
</section>
</form>
);
)
}

73
components/Switch.tsx
View File

@ -1,10 +1,10 @@
"use client";
"use client"
import getEnv from "@/lib/env-entry";
import { cn } from "@/lib/utils";
import { m } from "framer-motion";
import { useTranslations } from "next-intl";
import React, { createRef, useEffect, useRef } from "react";
import getEnv from "@/lib/env-entry"
import { cn } from "@/lib/utils"
import { m } from "framer-motion"
import { useTranslations } from "next-intl"
import React, { createRef, useEffect, useRef } from "react"
export default function Switch({
allTag,
@ -12,51 +12,51 @@ export default function Switch({
tagCountMap,
onTagChange,
}: {
allTag: string[];
nowTag: string;
tagCountMap: Record<string, number>;
onTagChange: (tag: string) => void;
allTag: string[]
nowTag: string
tagCountMap: Record<string, number>
onTagChange: (tag: string) => void
}) {
const scrollRef = useRef<HTMLDivElement>(null);
const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()));
const t = useTranslations("ServerListClient");
const scrollRef = useRef<HTMLDivElement>(null)
const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
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;
if (!container) return;
const container = scrollRef.current
if (!container) return
const isOverflowing = container.scrollWidth > container.clientWidth;
if (!isOverflowing) return;
const isOverflowing = container.scrollWidth > container.clientWidth
if (!isOverflowing) return
const onWheel = (e: WheelEvent) => {
e.preventDefault();
container.scrollLeft += e.deltaY;
};
e.preventDefault()
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,9 +71,7 @@ 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 && (
@ -89,11 +87,8 @@ 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" && (
<div className="w-fit px-1.5 rounded-full bg-muted">
{tagCountMap[tag]}
</div>
{getEnv("NEXT_PUBLIC_ShowTagCount") === "true" && tag !== "defaultTag" && (
<div className="w-fit px-1.5 rounded-full bg-muted">{tagCountMap[tag]}</div>
)}
</div>
</div>
@ -101,5 +96,5 @@ export default function Switch({
))}
</div>
</div>
);
)
}

20
components/TabSwitch.tsx
View File

@ -1,20 +1,20 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import { m } from "framer-motion";
import { useTranslations } from "next-intl";
import React from "react";
import { cn } from "@/lib/utils"
import { m } from "framer-motion"
import { useTranslations } from "next-intl"
import React from "react"
export default function TabSwitch({
tabs,
currentTab,
setCurrentTab,
}: {
tabs: string[];
currentTab: string;
setCurrentTab: (tab: string) => void;
tabs: string[]
currentTab: string
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>
);
)
}

38
components/ThemeColorManager.tsx
View File

@ -1,41 +1,39 @@
"use client";
"use client"
import { useTheme } from "next-themes";
import { useEffect } from "react";
import { useTheme } from "next-themes"
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 meta = document.querySelector('meta[name="theme-color"]');
const currentTheme = theme === "system" ? systemTheme : theme
const meta = document.querySelector('meta[name="theme-color"]')
if (!meta) {
const newMeta = document.createElement("meta");
newMeta.name = "theme-color";
document.head.appendChild(newMeta);
const newMeta = document.createElement("meta")
newMeta.name = "theme-color"
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)");
mediaQuery.addEventListener("change", updateThemeColor);
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
mediaQuery.addEventListener("change", updateThemeColor)
return () => mediaQuery.removeEventListener("change", updateThemeColor);
}, [theme, systemTheme]);
return () => mediaQuery.removeEventListener("change", updateThemeColor)
}, [theme, systemTheme])
return null;
return null
}

37
components/ThemeSwitcher.tsx
View File

@ -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";
import { cn } from "@/lib/utils";
import { CheckCircleIcon } from "@heroicons/react/20/solid";
import { Moon, Sun } from "lucide-react";
import { useTranslations } from "next-intl";
import { useTheme } from "next-themes";
} from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"
import { CheckCircleIcon } from "@heroicons/react/20/solid"
import { Moon, Sun } from "lucide-react"
import { useTranslations } from "next-intl"
import { useTheme } from "next-themes"
export function ModeToggle() {
const { setTheme, theme } = useTheme();
const t = useTranslations("ThemeSwitcher");
const { setTheme, theme } = useTheme()
const t = useTranslations("ThemeSwitcher")
const handleSelect = (e: Event, newTheme: string) => {
e.preventDefault();
setTheme(newTheme);
};
e.preventDefault()
setTheme(newTheme)
}
return (
<DropdownMenu>
@ -40,24 +40,21 @@ 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>
);
)
}

6
components/loading/Loader.tsx
View File

@ -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>
);
};
)
}

2
components/motion/framer-lazy-feature.ts
View File

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

11
components/motion/motion-provider.tsx
View File

@ -1,14 +1,13 @@
"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>
);
};
)
}

33
components/ui/animated-circular-progress-bar.tsx
View File

@ -1,11 +1,11 @@
import { cn } from "@/lib/utils";
import { cn } from "@/lib/utils"
interface Props {
max: number;
value: number;
min: number;
className?: string;
primaryColor?: string;
max: number
value: number
min: number
className?: 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 percentPx = circumference / 100;
const currentPercent = ((value - min) / (max - min)) * 100;
const circumference = 2 * Math.PI * 45
const percentPx = circumference / 100
const currentPercent = ((value - min) / (max - min)) * 100
return (
<div
@ -37,12 +37,7 @@ 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"
@ -62,8 +57,7 @@ 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
}
/>
@ -90,8 +84,7 @@ 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
}
/>
@ -103,5 +96,5 @@ export default function AnimatedCircularProgressBar({
{currentPercent}
</span>
</div>
);
)
}

20
components/ui/animated-tooltip.tsx
View File

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

17
components/ui/badge.tsx
View File

@ -1,14 +1,13 @@
import { cn } from "@/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils"
import { type VariantProps, cva } from "class-variance-authority"
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:
@ -20,16 +19,14 @@ 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 }

37
components/ui/button.tsx
View File

@ -1,7 +1,7 @@
import { cn } from "@/lib/utils";
import { Slot } from "@radix-ui/react-slot";
import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils"
import { Slot } from "@radix-ui/react-slot"
import { type VariantProps, cva } from "class-variance-authority"
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,12 +9,9 @@ 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",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
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",
},
@ -30,26 +27,22 @@ 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 }

95
components/ui/card.tsx
View File

@ -1,10 +1,8 @@
import { cn } from "@/lib/utils";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as React from "react"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
@ -13,73 +11,48 @@ const Card = React.forwardRef<
)}
{...props}
/>
));
Card.displayName = "Card";
),
)
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
));
CardHeader.displayName = "CardHeader";
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div 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>
>(({ className, ...props }, ref) => (
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className,
)}
className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
{...props}
/>
));
CardTitle.displayName = "CardTitle";
),
)
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}
/>
));
CardDescription.displayName = "CardDescription";
<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
const CardContent = React.forwardRef<HTMLDivElement, 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>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
));
CardFooter.displayName = "CardFooter";
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div 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 }

208
components/ui/chart.tsx
View File

@ -1,49 +1,47 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as React from "react";
import * as RechartsPrimitive from "recharts";
import { cn } from "@/lib/utils"
import * as React from "react"
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;
icon?: React.ComponentType;
label?: React.ReactNode
icon?: React.ComponentType
} & (
| { color?: string; theme?: never }
| { color?: never; theme: Record<keyof typeof THEMES, string> }
);
};
type ChartContextProps = {
config: ChartConfig;
};
const ChartContext = React.createContext<ChartContextProps | null>(null);
function useChart() {
const context = React.useContext(ChartContext);
if (!context) {
throw new Error("useChart must be used within a <ChartContainer />");
)
}
return context;
type ChartContextProps = {
config: ChartConfig
}
const ChartContext = React.createContext<ChartContextProps | null>(null)
function useChart() {
const context = React.useContext(ChartContext)
if (!context) {
throw new Error("useChart must be used within a <ChartContainer />")
}
return context
}
const ChartContainer = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
config: ChartConfig;
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>["children"];
config: ChartConfig
children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]
}
>(({ id, className, children, config, ...props }, ref) => {
const uniqueId = React.useId();
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
const uniqueId = React.useId()
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
return (
<ChartContext.Provider value={{ config }}>
@ -57,22 +55,18 @@ 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 (
@ -84,10 +78,8 @@ 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;
return color ? ` --color-${key}: ${color};` : null;
const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
.join("\n")}
}
@ -96,20 +88,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;
hideIndicator?: boolean;
indicator?: "line" | "dot" | "dashed";
nameKey?: string;
labelKey?: string;
hideLabel?: boolean
hideIndicator?: boolean
indicator?: "line" | "dot" | "dashed"
nameKey?: string
labelKey?: string
}
>(
(
@ -130,53 +122,43 @@ 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 key = `${labelKey || item.dataKey || item.name || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const [item] = payload
const key = `${labelKey || item.dataKey || item.name || "value"}`
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>;
}, [
label,
labelFormatter,
payload,
hideLabel,
labelClassName,
config,
labelKey,
]);
return <div className={cn("font-medium", labelClassName)}>{value}</div>
}, [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
@ -189,9 +171,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 itemConfig = getPayloadConfigFromPayload(config, item, key);
const indicatorColor = color || item.payload.fill || item.color;
const key = `${nameKey || item.name || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const indicatorColor = color || item.payload.fill || item.color
return (
<div
@ -257,33 +239,29 @@ 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;
nameKey?: string;
hideIcon?: boolean
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) {
return null;
return null
}
return (
@ -296,8 +274,8 @@ const ChartLegendContent = React.forwardRef<
)}
>
{payload.map((item) => {
const key = `${nameKey || item.dataKey || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const key = `${nameKey || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
return (
<div
@ -318,51 +296,37 @@ const ChartLegendContent = React.forwardRef<
)}
{key}
</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"
) {
configLabelKey = payload[key as keyof typeof payload] as string;
if (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 {
@ -372,4 +336,4 @@ export {
ChartLegend,
ChartLegendContent,
ChartStyle,
};
}

87
components/ui/dropdown-menu.tsx
View File

@ -1,26 +1,26 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-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,9 +35,8 @@ 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>,
@ -51,9 +50,8 @@ const DropdownMenuSubContent = React.forwardRef<
)}
{...props}
/>
));
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName;
))
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@ -70,13 +68,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
@ -88,8 +86,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>,
@ -111,9 +109,8 @@ 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>,
@ -134,26 +131,22 @@ 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>,
@ -164,21 +157,13 @@ 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>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
{...props}
/>
);
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
export {
DropdownMenu,
@ -196,4 +181,4 @@ export {
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
};
}

14
components/ui/input.tsx
View File

@ -1,7 +1,7 @@
import { cn } from "@/lib/utils";
import * as React from "react";
import { cn } from "@/lib/utils"
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 }

27
components/ui/label.tsx
View File

@ -1,25 +1,20 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as LabelPrimitive from "@radix-ui/react-label";
import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as LabelPrimitive from "@radix-ui/react-label"
import { type VariantProps, cva } from "class-variance-authority"
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}
/>
));
Label.displayName = LabelPrimitive.Root.displayName;
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label };
export { Label }

54
components/ui/navigation-menu.tsx
View File

@ -1,8 +1,8 @@
import { cn } from "@/lib/utils";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority";
import { ChevronDown } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"
import * as React from "react"
const NavigationMenu = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@ -10,17 +10,14 @@ 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>,
@ -28,20 +25,17 @@ 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>,
@ -58,8 +52,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>,
@ -73,10 +67,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>,
@ -92,9 +86,8 @@ 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>,
@ -110,9 +103,8 @@ 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,
@ -124,4 +116,4 @@ export {
NavigationMenuTrigger,
navigationMenuTriggerStyle,
NavigationMenuViewport,
};
}

18
components/ui/popover.tsx
View File

@ -1,12 +1,12 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as PopoverPrimitive from "@radix-ui/react-popover"
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 }

21
components/ui/progress.tsx
View File

@ -1,21 +1,18 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as ProgressPrimitive from "@radix-ui/react-progress"
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
@ -26,7 +23,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 }

21
components/ui/separator.tsx
View File

@ -1,17 +1,13 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
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,
) => (
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
@ -23,8 +19,7 @@ const Separator = React.forwardRef<
)}
{...props}
/>
),
);
Separator.displayName = SeparatorPrimitive.Root.displayName;
))
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator };
export { Separator }

79
components/ui/sheet.tsx
View File

@ -1,18 +1,18 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { type VariantProps, cva } from "class-variance-authority";
import { X } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { type VariantProps, cva } from "class-variance-authority"
import { X } from "lucide-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,11 +58,7 @@ 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" />
@ -70,36 +66,21 @@ 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 = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
)
SheetHeader.displayName = "SheetHeader"
const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className,
)}
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
{...props}
/>
);
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";
)
SheetFooter.displayName = "SheetFooter"
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
@ -110,8 +91,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>,
@ -122,8 +103,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,
@ -136,4 +117,4 @@ export {
SheetPortal,
SheetTitle,
SheetTrigger,
};
}

16
components/ui/skeleton.tsx
View File

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

14
components/ui/switch.tsx
View File

@ -1,8 +1,8 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as SwitchPrimitives from "@radix-ui/react-switch";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as SwitchPrimitives from "@radix-ui/react-switch"
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 }

20
components/ui/tooltip.tsx
View File

@ -1,14 +1,14 @@
"use client";
"use client"
import { cn } from "@/lib/utils";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
import { cn } from "@/lib/utils"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
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 }

8
i18n-metadata.ts
View File

@ -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 defaultLocale = getEnv("DefaultLocale") || "en";
export const locales = localeItems.map((item) => item.code)
export const defaultLocale = getEnv("DefaultLocale") || "en"

15
i18n/locale.ts
View File

@ -1,17 +1,14 @@
"use server";
"use server"
import getEnv from "@/lib/env-entry";
import { cookies } from "next/headers";
import getEnv from "@/lib/env-entry"
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)
}

10
i18n/request.ts
View File

@ -1,11 +1,11 @@
import { getUserLocale } from "@/i18n/locale";
import { getRequestConfig } from "next-intl/server";
import { getUserLocale } from "@/i18n/locale"
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,
};
});
}
})

2
lib/dev-geo.ts
View File

@ -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]]]}}
]}
`;
`

6
lib/env-entry.ts
View File

@ -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]
}

2
lib/geo-json-string.ts
View File

File diff suppressed because one or more lines are too long

7
lib/geo-limit.ts
View File

@ -1,7 +1,4 @@
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" }, // 亚美尼亚
@ -208,4 +205,4 @@ export const countryCoordinates: Record<
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" }, // 津巴布韦
};
}

42
lib/logo-class.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import type { SVGProps } from "react";
import React 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,39 +111,33 @@ 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>
);
)
}

2
lib/map-string.ts
View File

File diff suppressed because one or more lines are too long

24
lib/network-filter-context.tsx
View File

@ -1,28 +1,24 @@
"use client";
"use client"
import React, { ReactNode, createContext, useContext, useState } from "react";
import React, { ReactNode, createContext, useContext, useState } from "react"
interface FilterContextType {
filter: boolean;
setFilter: (filter: boolean) => void;
filter: boolean
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
}

214
lib/serverFetch.tsx
View File

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

26
lib/status-context.tsx
View File

@ -1,30 +1,26 @@
"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;
setStatus: (status: Status) => void;
status: Status
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
}

104
lib/utils.ts
View File

@ -1,9 +1,9 @@
import { NezhaAPISafe } from "@/app/types/nezha-api";
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import { NezhaAPISafe } from "@/app/types/nezha-api"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
return twMerge(clsx(inputs))
}
export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
@ -21,98 +21,86 @@ 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 dm = decimals < 0 ? 0 : decimals;
const sizes = [
"Bytes",
"KiB",
"MiB",
"GiB",
"TiB",
"PiB",
"EiB",
"ZiB",
"YiB",
];
const k = 1024
const dm = decimals < 0 ? 0 : decimals
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 firstDate = new Date(date1);
const secondDate = new Date(date2);
const oneDay = 24 * 60 * 60 * 1000 // 一天的毫秒数
const firstDate = new Date(date1)
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);
throw err;
});
console.error(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;
throw error;
error.status = res.status
throw error
}
return res.json();
};
return res.json()
}
export function formatRelativeTime(timestamp: number): string {
const now = Date.now();
const diff = now - timestamp;
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
const now = Date.now()
const diff = now - timestamp
const hours = Math.floor(diff / (1000 * 60 * 60))
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
const seconds = Math.floor((diff % (1000 * 60)) / 1000)
if (hours > 24) {
const days = Math.floor(hours / 24);
return `${days}d`;
const days = Math.floor(hours / 24)
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 year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hours = date.getHours().toString().padStart(2, "0");
const minutes = date.getMinutes().toString().padStart(2, "0");
const seconds = date.getSeconds().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const date = new Date(timestamp)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hours = date.getHours().toString().padStart(2, "0")
const minutes = date.getMinutes().toString().padStart(2, "0")
const seconds = date.getSeconds().toString().padStart(2, "0")
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

18
next.config.mjs
View File

@ -1,13 +1,13 @@
import withPWAInit from "@ducanh2912/next-pwa";
import withBundleAnalyzer from "@next/bundle-analyzer";
import createNextIntlPlugin from "next-intl/plugin";
import { env } from "next-runtime-env";
import withPWAInit from "@ducanh2912/next-pwa"
import withBundleAnalyzer from "@next/bundle-analyzer"
import createNextIntlPlugin from "next-intl/plugin"
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,7 +18,7 @@ const withPWA = withPWAInit({
workboxOptions: {
disableDevLogs: true,
},
});
})
/** @type {import('next').NextConfig} */
const nextConfig = {
@ -40,5 +40,5 @@ const nextConfig = {
fullUrl: true,
},
},
};
export default bundleAnalyzer(withPWA(withNextIntl(nextConfig)));
}
export default bundleAnalyzer(withPWA(withNextIntl(nextConfig)))

4
package.json
View File

@ -5,7 +5,9 @@
"scripts": {
"dev": "next dev -p 3040",
"start": "node .next/standalone/server.js",
"lint": "next lint",
"lint": "eslint",
"lint:fix": "eslint --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"

2
postcss.config.js
View File

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

11
prettier.config.js
View File

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

4
styles/globals.css
View File

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