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: card inline

Browse Source
This commit is contained in:
hamster1963 2024-12-01 11:35:38 +08:00
parent a7a3228ac1
commit c4d801a847
6 changed files with 267 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,13 @@
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 { nezhaFetcher } from "@/lib/utils";
import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
import { cn, nezhaFetcher } from "@/lib/utils";
import { MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
@ -22,6 +23,15 @@ export default function ServerListClient() {
const router = useRouter();
const [tag, setTag] = useState<string>(defaultTag);
const [inline, setInline] = useState<string>("0");
useEffect(() => {
const inlineState = sessionStorage.getItem("inline");
if (inlineState !== null) {
console.log("inlineState", inlineState);
setInline(inlineState);
}
}, []);
useEffect(() => {
const savedTag = sessionStorage.getItem("selectedTag") || defaultTag;
@ -123,7 +133,22 @@ export default function ServerListClient() {
}}
className="rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 hover:bg-blue-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)] "
>
<GlobeAsiaAustraliaIcon className="size-[13px]" />
<MapIcon className="size-[13px]" />
</button>
<button
onClick={() => {
setInline(inline === "0" ? "1" : "0");
sessionStorage.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",
},
)}
>
<ViewColumnsIcon className="size-[13px]" />
</button>
{getEnv("NEXT_PUBLIC_ShowTag") === "true" && (
<Switch
@ -134,6 +159,18 @@ export default function ServerListClient() {
/>
)}
</section>
{inline === "1" && (
<section
ref={containerRef}
className="flex flex-col gap-2 overflow-x-scroll"
>
{filteredServers.map((serverInfo) => (
<ServerCardInline key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
)}
{inline === "0" && (
<section
ref={containerRef}
className="grid grid-cols-1 gap-2 md:grid-cols-2"
@ -142,6 +179,7 @@ export default function ServerListClient() {
<ServerCard key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
)}
</>
);
}

178
components/ServerCardInline.tsx Normal file
View File

@ -0,0 +1,178 @@
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 ServerCardInline({
serverInfo,
}: {
serverInfo: NezhaAPISafe;
}) {
const t = useTranslations("ServerCard");
const { id, name, country_code, online, cpu, up, down, mem, stg, host } =
formatNezhaInfo(serverInfo);
const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
const saveSession = () => {
sessionStorage.setItem("fromMainPage", "true");
};
return online ? (
<Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
<Card
className={cn(
"flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
)}
>
<section
className={cn("grid items-center gap-2 w-40")}
style={{ gridTemplateColumns: "auto auto 1fr" }}
>
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
<div
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",
)}
>
{name}
</p>
</div>
</section>
<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="text-xs font-semibold">
{host.Platform.includes("Windows") ? (
<MageMicrosoftWindows className="size-[10px]" />
) : (
<p className={`fl-${GetFontLogoClass(host.Platform)}`} />
)}
</div>
<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)}
</div>
</div>
</div>
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Uptime")}</p>
<div className="flex items-center text-xs font-semibold">
{(serverInfo?.status.Uptime / 86400).toFixed(0)} {"Days"}
</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>
<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>
<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>
<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`}
</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`}
</div>
</div>
<div className={"flex flex-col"}>
<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 flex-col"}>
<p className="text-xs text-muted-foreground">
{t("TotalDownload")}
</p>
<div className="flex items-center text-xs font-semibold">
{formatBytes(serverInfo.status.NetInTransfer)}
</div>
</div>
</section>
</div>
</Card>
</Link>
) : (
<Card
className={cn(
"flex items-center justify-start gap-3 p-3 md:px-5 min-h-[61px] min-w-[900px] flex-row",
)}
>
<section
className={cn("grid items-center gap-2 lg:w-40")}
style={{ gridTemplateColumns: "auto auto 1fr" }}
>
<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",
)}
>
{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",
)}
>
{name}
</p>
</div>
</section>
</Card>
);
}

12
messages/en.json
View File

@ -18,7 +18,11 @@
"STG": "STG",
"Upload": "Upload",
"Download": "Download",
"Offline": "Offline"
"Offline": "Offline",
"Uptime": "Uptime",
"TotalUpload": "Upload",
"TotalDownload": "Download",
"Region": "Region"
},
"TabSwitch": {
"Detail": "Detail",
@ -39,7 +43,11 @@
"Network": "Network",
"Load": "Load",
"Online": "Online",
"Offline": "Offline"
"Offline": "Offline",
"Uptime": "Uptime",
"Upload": "Upload",
"Download": "Download",
"Region": "Region"
},
"NetworkChartClient": {
"avg_delay": "Latency",

12
messages/ja.json
View File

@ -18,7 +18,11 @@
"STG": "STG",
"Upload": "Upload",
"Download": "Download",
"Offline": "Offline"
"Offline": "Offline",
"Uptime": "Uptime",
"TotalUpload": "Upload",
"TotalDownload": "Download",
"Region": "Region"
},
"TabSwitch": {
"Detail": "詳細",
@ -39,7 +43,11 @@
"Network": "ネットワーク",
"Load": "負荷",
"Online": "オンライン時間",
"Offline": "オフライン"
"Offline": "オフライン",
"Uptime": "アップタイム",
"Upload": "アップロード",
"Download": "ダウンロード",
"Region": "地域"
},
"NetworkChartClient": {
"avg_delay": "遅延",

12
messages/zh-t.json
View File

@ -18,7 +18,11 @@
"STG": "儲存",
"Upload": "上傳",
"Download": "下載",
"Offline": "離線"
"Offline": "離線",
"Uptime": "稼働時間",
"TotalUpload": "总上傳",
"TotalDownload": "总下載",
"Region": "地區"
},
"TabSwitch": {
"Detail": "詳細",
@ -39,7 +43,11 @@
"Network": "網路",
"Load": "負載",
"Online": "在線時間",
"Offline": "離線"
"Offline": "離線",
"Uptime": "稼働時間",
"Upload": "上傳",
"Download": "下載",
"Region": "地域"
},
"NetworkChartClient": {
"avg_delay": "延遲",

12
messages/zh.json
View File

@ -18,7 +18,11 @@
"STG": "存储",
"Upload": "上传",
"Download": "下载",
"Offline": "离线"
"Offline": "离线",
"Uptime": "运行时间",
"TotalUpload": "总上传",
"TotalDownload": "总下载",
"Region": "地区"
},
"TabSwitch": {
"Detail": "详情",
@ -39,7 +43,11 @@
"Network": "网络",
"Load": "负载",
"Online": "在线时间",
"Offline": "离线"
"Offline": "离线",
"Uptime": "运行时间",
"Upload": "上传",
"Download": "下载",
"Region": "地区"
},
"NetworkChartClient": {
"avg_delay": "延迟",