diff --git a/bun.lockb b/bun.lockb index 373b666..e6967af 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx new file mode 100644 index 0000000..a863e93 --- /dev/null +++ b/src/components/ServerCardInline.tsx @@ -0,0 +1,193 @@ +import ServerFlag from "@/components/ServerFlag"; +import ServerUsageBar from "@/components/ServerUsageBar"; + +import { cn, formatNezhaInfo } from "@/lib/utils"; +import { NezhaServer } from "@/types/nezha-api"; +import { Card } from "./ui/card"; +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { + GetFontLogoClass, + GetOsName, + MageMicrosoftWindows, +} from "@/lib/logo-class"; +import { formatBytes } from "@/lib/format"; + +export default function ServerCardInline({ + now, + serverInfo, +}: { + now: number; + serverInfo: NezhaServer; +}) { + const { t } = useTranslation(); + const navigate = useNavigate(); + const { name, country_code, online, cpu, up, down, mem, stg } = + formatNezhaInfo(now, serverInfo); + + const showFlag = true; + + return online ? ( +
+ navigate(`/server/${serverInfo.id}`)} + > +
+ +
+ {showFlag ? : null} +
+
+

+ {name} +

+
+
+
+
+
+
+ {serverInfo.host.platform.includes("Windows") ? ( + + ) : ( +

+ )} +

+
+

+ {t("serverCard.system")} +

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

+ {t("serverCard.uptime")} +

+
+ {(serverInfo.state.uptime / 86400).toFixed(0)} {"Days"} +
+
+
+

{t("CPU")}

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

+ {t("serverCard.mem")} +

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

+ {t("serverCard.stg")} +

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

+ {t("serverCard.upload")} +

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

+ {t("serverCard.download")} +

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

+ {t("serverCard.totalUpload")} +

+
+ {formatBytes(serverInfo.state.net_out_transfer)} +
+
+
+

+ {t("serverCard.totalDownload")} +

+
+ {formatBytes(serverInfo.state.net_in_transfer)} +
+
+
+
+ +
+ ) : ( + navigate(`/server/${serverInfo.id}`)} + > +
+ +
+ {showFlag ? : null} +
+
+

+ {name} +

+
+
+ + ); +} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 9345b85..89d5d0d 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -20,7 +20,11 @@ "mem": "MEM", "stg": "STG", "upload": "Upload", - "download": "Download" + "download": "Download", + "system": "System", + "uptime": "Uptime", + "totalUpload": "Total Upload", + "totalDownload": "Total Download" }, "serverDetail": { "status": "Status", diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json index 65d42d1..cdf2b6d 100644 --- a/src/locales/zh-CN/translation.json +++ b/src/locales/zh-CN/translation.json @@ -20,7 +20,11 @@ "mem": "内存", "stg": "存储", "upload": "上传", - "download": "下载" + "download": "下载", + "system": "系统", + "uptime": "运行时间", + "totalUpload": "总上传", + "totalDownload": "总下载" }, "serverDetail": { "status": "状态", diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json index c714910..88a63a3 100644 --- a/src/locales/zh-TW/translation.json +++ b/src/locales/zh-TW/translation.json @@ -20,7 +20,11 @@ "mem": "內存", "stg": "存儲", "upload": "上傳", - "download": "下載" + "download": "下載", + "system": "系統", + "uptime": "運行時間", + "totalUpload": "總上傳", + "totalDownload": "總下載" }, "serverDetail": { "status": "狀態", diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx index f2ab9cb..c27e1b6 100644 --- a/src/pages/Server.tsx +++ b/src/pages/Server.tsx @@ -1,6 +1,6 @@ import { NezhaWebsocketResponse } from "@/types/nezha-api"; import ServerCard from "@/components/ServerCard"; -import { formatNezhaInfo } from "@/lib/utils"; +import { cn, formatNezhaInfo } from "@/lib/utils"; import ServerOverview from "@/components/ServerOverview"; import { useEffect, useState } from "react"; import { toast } from "sonner"; @@ -10,8 +10,9 @@ import GroupSwitch from "@/components/GroupSwitch"; import { ServerGroup } from "@/types/nezha-api"; import { useWebSocketContext } from "@/hooks/use-websocket-context"; import { useTranslation } from "react-i18next"; -import { ChartBarSquareIcon } from "@heroicons/react/20/solid"; +import { ChartBarSquareIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"; import { ServiceTracker } from "@/components/ServiceTracker"; +import ServerCardInline from "@/components/ServerCardInline"; export default function Servers() { const { t } = useTranslation(); @@ -23,6 +24,15 @@ export default function Servers() { const [showServices, setShowServices] = useState(false); const [currentGroup, setCurrentGroup] = useState("All"); + const [inline, setInline] = useState("0"); + + useEffect(() => { + const inlineState = localStorage.getItem("inline"); + if (inlineState !== null) { + console.log("inlineState", inlineState); + setInline(inlineState); + } + }, []); const groupTabs = [ "All", @@ -111,6 +121,21 @@ export default function Servers() { > + {showServices && } -
- {filteredServers.map((serverInfo) => ( - - ))} -
+ {inline === "1" && ( +
+ {filteredServers.map((serverInfo) => ( + + ))} +
+ )} + {inline === "0" && ( +
+ {filteredServers.map((serverInfo) => ( + + ))} +
+ )} ); }