mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
fix: lint
This commit is contained in:
hamster1963
parent
963b6a54a6
commit
3275ea9211
@ -10,7 +10,10 @@ const Footer: React.FC = () => {
|
||||
<a href={"https://github.com/naiba/nezha"} target="_blank">
|
||||
Nezha
|
||||
</a>
|
||||
<a href={"https://github.com/hamster1963/nezha-dash-react"} target="_blank">
|
||||
<a
|
||||
href={"https://github.com/hamster1963/nezha-dash-react"}
|
||||
target="_blank"
|
||||
>
|
||||
Nezha-Dash
|
||||
</a>
|
||||
</section>
|
||||
|
||||
@ -5,20 +5,14 @@ import { cn, formatNezhaInfo } from "@/lib/utils";
|
||||
import { NezhaAPI } from "@/types/nezha-api";
|
||||
import { Card } from "./ui/card";
|
||||
|
||||
export default function ServerCard({
|
||||
serverInfo,
|
||||
}: {
|
||||
serverInfo: NezhaAPI;
|
||||
}) {
|
||||
|
||||
const { name, country_code, online, cpu, up, down, mem, stg } =
|
||||
export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPI }) {
|
||||
const { name, country_code, online, cpu, up, down, mem, stg } =
|
||||
formatNezhaInfo(serverInfo);
|
||||
|
||||
const showFlag = true
|
||||
|
||||
const showFlag = true;
|
||||
|
||||
return online ? (
|
||||
<section >
|
||||
<section>
|
||||
<Card
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row",
|
||||
@ -49,9 +43,7 @@ export default function ServerCard({
|
||||
</div>
|
||||
</section>
|
||||
<div className="flex flex-col gap-2">
|
||||
<section
|
||||
className={cn("grid grid-cols-5 items-center gap-3")}
|
||||
>
|
||||
<section className={cn("grid grid-cols-5 items-center gap-3")}>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{"CPU"}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
|
||||
@ -11,7 +11,6 @@ export default function ServerFlag({
|
||||
}) {
|
||||
const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const checkEmojiSupport = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
@ -38,7 +37,7 @@ export default function ServerFlag({
|
||||
|
||||
return (
|
||||
<span className={cn("text-[12px] text-muted-foreground", className)}>
|
||||
{ !supportsEmojiFlags ? (
|
||||
{!supportsEmojiFlags ? (
|
||||
<span className={`fi fi-${country_code}`} />
|
||||
) : (
|
||||
getUnicodeFlagIcon(country_code)
|
||||
|
||||
@ -7,17 +7,19 @@ type ServerOverviewProps = {
|
||||
total: number;
|
||||
up: number;
|
||||
down: number;
|
||||
}
|
||||
|
||||
|
||||
export default function ServerOverview({ online, offline, total, up, down }: ServerOverviewProps) {
|
||||
};
|
||||
|
||||
export default function ServerOverview({
|
||||
online,
|
||||
offline,
|
||||
total,
|
||||
up,
|
||||
down,
|
||||
}: ServerOverviewProps) {
|
||||
return (
|
||||
<>
|
||||
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<Card
|
||||
className={cn("hover:border-blue-500 transition-all")}
|
||||
>
|
||||
<Card className={cn("hover:border-blue-500 transition-all")}>
|
||||
<CardContent className="px-6 py-3">
|
||||
<section className="flex flex-col gap-1">
|
||||
<p className="text-sm font-medium md:text-base">
|
||||
@ -27,9 +29,7 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
|
||||
</span>
|
||||
<div className="text-lg font-semibold">
|
||||
{total}
|
||||
</div>
|
||||
<div className="text-lg font-semibold">{total}</div>
|
||||
</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
@ -50,9 +50,7 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
|
||||
</span>
|
||||
|
||||
<div className="text-lg font-semibold">
|
||||
{online}
|
||||
</div>
|
||||
<div className="text-lg font-semibold">{online}</div>
|
||||
</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
@ -60,7 +58,6 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
|
||||
<Card
|
||||
className={cn(
|
||||
" hover:ring-red-500 ring-1 ring-transparent transition-all",
|
||||
|
||||
)}
|
||||
>
|
||||
<CardContent className="px-6 py-3">
|
||||
@ -73,9 +70,7 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
|
||||
<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>
|
||||
<div className="text-lg font-semibold">
|
||||
{offline}
|
||||
</div>
|
||||
<div className="text-lg font-semibold">{offline}</div>
|
||||
</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
@ -83,7 +78,6 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
|
||||
<Card
|
||||
className={cn(
|
||||
" hover:ring-purple-500 ring-1 ring-transparent transition-all",
|
||||
|
||||
)}
|
||||
>
|
||||
<CardContent className="relative px-6 py-3">
|
||||
@ -92,16 +86,15 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
|
||||
{"Totalbandwidth"}
|
||||
</p>
|
||||
|
||||
<section className="flex flex-col sm:flex-row pt-[8px] sm:items-center items-start gap-1">
|
||||
<p className="text-[12px] text-nowrap font-semibold">
|
||||
↑{formatBytes(up)}
|
||||
</p>
|
||||
<p className="text-[12px] text-nowrap font-semibold">
|
||||
↓{formatBytes(down)}
|
||||
</p>
|
||||
</section>
|
||||
<section className="flex flex-col sm:flex-row pt-[8px] sm:items-center items-start gap-1">
|
||||
<p className="text-[12px] text-nowrap font-semibold">
|
||||
↑{formatBytes(up)}
|
||||
</p>
|
||||
<p className="text-[12px] text-nowrap font-semibold">
|
||||
↓{formatBytes(down)}
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
@ -1,28 +1,31 @@
|
||||
import * as React from "react"
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||
import * as React from "react";
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
|
||||
indicatorClassName?: string
|
||||
indicatorClassName?: string;
|
||||
}
|
||||
>(({ className, value, indicatorClassName, ...props }, ref) => (
|
||||
<ProgressPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
|
||||
className={cn(
|
||||
"h-full w-full flex-1 bg-primary transition-all",
|
||||
indicatorClassName,
|
||||
)}
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
))
|
||||
Progress.displayName = ProgressPrimitive.Root.displayName
|
||||
));
|
||||
Progress.displayName = ProgressPrimitive.Root.displayName;
|
||||
|
||||
export { Progress }
|
||||
export { Progress };
|
||||
|
||||
@ -48,23 +48,30 @@ export default function useWebSocket(url: string): WebSocketHook {
|
||||
setConnected(false);
|
||||
// 清理当前的 socket
|
||||
socketRef.current = null;
|
||||
|
||||
|
||||
if (!isUnmounted.current) {
|
||||
// 检查是否已经在重连中
|
||||
if (reconnectTimeout.current) {
|
||||
clearTimeout(reconnectTimeout.current);
|
||||
}
|
||||
|
||||
|
||||
// Attempt to reconnect with increased max attempts
|
||||
if (reconnectAttempts.current < 10) {
|
||||
const timeout = Math.min(Math.pow(2, reconnectAttempts.current) * 1000, 30000); // 最大30秒
|
||||
const timeout = Math.min(
|
||||
Math.pow(2, reconnectAttempts.current) * 1000,
|
||||
30000,
|
||||
); // 最大30秒
|
||||
reconnectAttempts.current += 1;
|
||||
console.log(`Attempting to reconnect in ${timeout/1000} seconds...`);
|
||||
console.log(
|
||||
`Attempting to reconnect in ${timeout / 1000} seconds...`,
|
||||
);
|
||||
reconnectTimeout.current = setTimeout(() => {
|
||||
connect();
|
||||
}, timeout);
|
||||
} else {
|
||||
console.warn("Max reconnect attempts reached. Please refresh the page to try again.");
|
||||
console.warn(
|
||||
"Max reconnect attempts reached. Please refresh the page to try again.",
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user