From c4d801a847ed900e54baf27fb097704f2e181fbb Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sun, 1 Dec 2024 11:35:38 +0800 Subject: [PATCH 1/2] feat: card inline --- .../ClientComponents/ServerListClient.tsx | 60 ++++-- components/ServerCardInline.tsx | 178 ++++++++++++++++++ messages/en.json | 12 +- messages/ja.json | 12 +- messages/zh-t.json | 12 +- messages/zh.json | 12 +- 6 files changed, 267 insertions(+), 19 deletions(-) create mode 100644 components/ServerCardInline.tsx diff --git a/app/(main)/ClientComponents/ServerListClient.tsx b/app/(main)/ClientComponents/ServerListClient.tsx index c69098a..8d84195 100644 --- a/app/(main)/ClientComponents/ServerListClient.tsx +++ b/app/(main)/ClientComponents/ServerListClient.tsx @@ -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(defaultTag); + const [inline, setInline] = useState("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)] " > - + + + {getEnv("NEXT_PUBLIC_ShowTag") === "true" && ( )} -
- {filteredServers.map((serverInfo) => ( - - ))} -
+ {inline === "1" && ( +
+ {filteredServers.map((serverInfo) => ( + + ))} +
+ )} + + {inline === "0" && ( +
+ {filteredServers.map((serverInfo) => ( + + ))} +
+ )} ); } diff --git a/components/ServerCardInline.tsx b/components/ServerCardInline.tsx new file mode 100644 index 0000000..1b6698f --- /dev/null +++ b/components/ServerCardInline.tsx @@ -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 ? ( + + +
+ +
+ {showFlag ? : null} +
+
+

+ {name} +

+
+
+
+
+
+
+ {host.Platform.includes("Windows") ? ( + + ) : ( +

+ )} +

+
+

{t("System")}

+
+ {host.Platform.includes("Windows") + ? "Windows" + : GetOsName(host.Platform)} +
+
+
+
+

{t("Uptime")}

+
+ {(serverInfo?.status.Uptime / 86400).toFixed(0)} {"Days"} +
+
+
+

{t("CPU")}

+
+ {cpu.toFixed(2)}% +
+ +
+
+

{t("Mem")}

+
+ {mem.toFixed(2)}% +
+ +
+
+

{t("STG")}

+
+ {stg.toFixed(2)}% +
+ +
+
+

{t("Upload")}

+
+ {up >= 1024 + ? `${(up / 1024).toFixed(2)}G/s` + : `${up.toFixed(2)}M/s`} +
+
+
+

{t("Download")}

+
+ {down >= 1024 + ? `${(down / 1024).toFixed(2)}G/s` + : `${down.toFixed(2)}M/s`} +
+
+
+

+ {t("TotalUpload")} +

+
+ {formatBytes(serverInfo.status.NetOutTransfer)} +
+
+
+

+ {t("TotalDownload")} +

+
+ {formatBytes(serverInfo.status.NetInTransfer)} +
+
+
+
+ + + ) : ( + +
+ +
+ {showFlag ? : null} +
+
+

+ {name} +

+
+
+ + ); +} diff --git a/messages/en.json b/messages/en.json index f5c176b..74641a5 100644 --- a/messages/en.json +++ b/messages/en.json @@ -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", diff --git a/messages/ja.json b/messages/ja.json index eed7905..e6c8202 100644 --- a/messages/ja.json +++ b/messages/ja.json @@ -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": "遅延", diff --git a/messages/zh-t.json b/messages/zh-t.json index 918eb09..07b76a5 100644 --- a/messages/zh-t.json +++ b/messages/zh-t.json @@ -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": "延遲", diff --git a/messages/zh.json b/messages/zh.json index 69267a9..918e77a 100644 --- a/messages/zh.json +++ b/messages/zh.json @@ -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": "延迟", From ff52d52f11392c923b1794d3d64174e67e89817e Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sun, 1 Dec 2024 11:37:12 +0800 Subject: [PATCH 2/2] fix: build --- components/ServerCardInline.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/ServerCardInline.tsx b/components/ServerCardInline.tsx index 1b6698f..a7a9f4d 100644 --- a/components/ServerCardInline.tsx +++ b/components/ServerCardInline.tsx @@ -1,7 +1,6 @@ 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 {