wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: lint

Browse Source
This commit is contained in:
hamster1963 2024-11-23 19:34:05 +08:00
parent 963b6a54a6
commit 3275ea9211
6 changed files with 54 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Footer.tsx
View File

@ -10,7 +10,10 @@ const Footer: React.FC = () => {
<a href={"https://github.com/naiba/nezha"} target="_blank"> <a href={"https://github.com/naiba/nezha"} target="_blank">
Nezha Nezha
</a> </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 Nezha-Dash
</a> </a>
</section> </section>

18
src/components/ServerCard.tsx
View File

@ -5,20 +5,14 @@ import { cn, formatNezhaInfo } from "@/lib/utils";
import { NezhaAPI } from "@/types/nezha-api"; import { NezhaAPI } from "@/types/nezha-api";
import { Card } from "./ui/card"; import { Card } from "./ui/card";
export default function ServerCard({ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPI }) {
serverInfo, const { name, country_code, online, cpu, up, down, mem, stg } =
}: {
serverInfo: NezhaAPI;
}) {
const { name, country_code, online, cpu, up, down, mem, stg } =
formatNezhaInfo(serverInfo); formatNezhaInfo(serverInfo);
const showFlag = true const showFlag = true;
return online ? ( return online ? (
<section > <section>
<Card <Card
className={cn( className={cn(
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row", "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> </div>
</section> </section>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<section <section className={cn("grid grid-cols-5 items-center gap-3")}>
className={cn("grid grid-cols-5 items-center gap-3")}
>
<div className={"flex w-14 flex-col"}> <div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{"CPU"}</p> <p className="text-xs text-muted-foreground">{"CPU"}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">

3
src/components/ServerFlag.tsx
View File

@ -11,7 +11,6 @@ export default function ServerFlag({
}) { }) {
const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false); const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
useEffect(() => { useEffect(() => {
const checkEmojiSupport = () => { const checkEmojiSupport = () => {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -38,7 +37,7 @@ export default function ServerFlag({
return ( return (
<span className={cn("text-[12px] text-muted-foreground", className)}> <span className={cn("text-[12px] text-muted-foreground", className)}>
{ !supportsEmojiFlags ? ( {!supportsEmojiFlags ? (
<span className={`fi fi-${country_code}`} /> <span className={`fi fi-${country_code}`} />
) : ( ) : (
getUnicodeFlagIcon(country_code) getUnicodeFlagIcon(country_code)

47
src/components/ServerOverview.tsx
View File

@ -7,17 +7,19 @@ type ServerOverviewProps = {
total: number; total: number;
up: number; up: number;
down: number; down: number;
} };
export default function ServerOverview({ online, offline, total, up, down }: ServerOverviewProps) {
export default function ServerOverview({
online,
offline,
total,
up,
down,
}: ServerOverviewProps) {
return ( return (
<> <>
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4"> <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card <Card className={cn("hover:border-blue-500 transition-all")}>
className={cn("hover:border-blue-500 transition-all")}
>
<CardContent className="px-6 py-3"> <CardContent className="px-6 py-3">
<section className="flex flex-col gap-1"> <section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base"> <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 flex h-2 w-2">
<span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span> <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
</span> </span>
<div className="text-lg font-semibold"> <div className="text-lg font-semibold">{total}</div>
{total}
</div>
</div> </div>
</section> </section>
</CardContent> </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 className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
</span> </span>
<div className="text-lg font-semibold"> <div className="text-lg font-semibold">{online}</div>
{online}
</div>
</div> </div>
</section> </section>
</CardContent> </CardContent>
@ -60,7 +58,6 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
<Card <Card
className={cn( className={cn(
" hover:ring-red-500 ring-1 ring-transparent transition-all", " hover:ring-red-500 ring-1 ring-transparent transition-all",
)} )}
> >
<CardContent className="px-6 py-3"> <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="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 className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
</span> </span>
<div className="text-lg font-semibold"> <div className="text-lg font-semibold">{offline}</div>
{offline}
</div>
</div> </div>
</section> </section>
</CardContent> </CardContent>
@ -83,7 +78,6 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
<Card <Card
className={cn( className={cn(
" hover:ring-purple-500 ring-1 ring-transparent transition-all", " hover:ring-purple-500 ring-1 ring-transparent transition-all",
)} )}
> >
<CardContent className="relative px-6 py-3"> <CardContent className="relative px-6 py-3">
@ -92,16 +86,15 @@ export default function ServerOverview({ online, offline, total, up, down }: Ser
{"Totalbandwidth"} {"Totalbandwidth"}
</p> </p>
<section className="flex flex-col sm:flex-row pt-[8px] sm:items-center items-start gap-1"> <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"> <p className="text-[12px] text-nowrap font-semibold">
↑{formatBytes(up)} ↑{formatBytes(up)}
</p> </p>
<p className="text-[12px] text-nowrap font-semibold"> <p className="text-[12px] text-nowrap font-semibold">
↓{formatBytes(down)} ↓{formatBytes(down)}
</p> </p>
</section> </section>
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
</section> </section>

21
src/components/ui/progress.tsx
View File

@ -1,28 +1,31 @@
import * as React from "react" import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress" import * as ProgressPrimitive from "@radix-ui/react-progress";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
const Progress = React.forwardRef< const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>, React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & { React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
indicatorClassName?: string indicatorClassName?: string;
} }
>(({ className, value, indicatorClassName, ...props }, ref) => ( >(({ className, value, indicatorClassName, ...props }, ref) => (
<ProgressPrimitive.Root <ProgressPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"relative h-4 w-full overflow-hidden rounded-full bg-secondary", "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
className className,
)} )}
{...props} {...props}
> >
<ProgressPrimitive.Indicator <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)}%)` }} style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/> />
</ProgressPrimitive.Root> </ProgressPrimitive.Root>
)) ));
Progress.displayName = ProgressPrimitive.Root.displayName Progress.displayName = ProgressPrimitive.Root.displayName;
export { Progress } export { Progress };

13
src/hooks/use-websocket.tsx
View File

@ -57,14 +57,21 @@ export default function useWebSocket(url: string): WebSocketHook {
// Attempt to reconnect with increased max attempts // Attempt to reconnect with increased max attempts
if (reconnectAttempts.current < 10) { 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; reconnectAttempts.current += 1;
console.log(`Attempting to reconnect in ${timeout/1000} seconds...`); console.log(
`Attempting to reconnect in ${timeout / 1000} seconds...`,
);
reconnectTimeout.current = setTimeout(() => { reconnectTimeout.current = setTimeout(() => {
connect(); connect();
}, timeout); }, timeout);
} else { } 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.",
);
} }
} }
}; };