update: v1.6.2

feat: card inline

app/(main)/ClientComponents/ServerDetailChartClient.tsx

@@ -6,7 +6,12 @@ import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progr
 import { Card, CardContent } from "@/components/ui/card";
 import { ChartConfig, ChartContainer } from "@/components/ui/chart";
 import getEnv from "@/lib/env-entry";
-import { formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils";
+import {
+  formatBytes,
+  formatNezhaInfo,
+  formatRelativeTime,
+  nezhaFetcher,
+} from "@/lib/utils";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import {
@@ -339,7 +344,7 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
     <Card>
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
-          <div className="flex items-center">
+          <div className="flex items-center justify-between">
             <section className="flex items-center gap-4">
               <div className="flex flex-col">
                 <p className=" text-xs text-muted-foreground">{t("Mem")}</p>
@@ -368,6 +373,15 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
                 </div>
               </div>
             </section>
+            <section className="flex flex-col items-end gap-0.5">
+              <div className="flex text-[11px] font-medium items-center gap-2">
+                {formatBytes(data.status.MemUsed)} /{" "}
+                {formatBytes(data.host.MemTotal)}
+              </div>
+              <div className="flex text-[11px] font-medium items-center gap-2">
+                swap: {formatBytes(data.status.SwapUsed)}
+              </div>
+            </section>
           </div>
           <ChartContainer
             config={chartConfig}
@@ -462,17 +476,23 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
             <p className="text-md font-medium">{t("Disk")}</p>
-            <section className="flex items-center gap-2">
+            <section className="flex flex-col items-end gap-0.5">
-              <p className="text-xs text-end w-10 font-medium">
+              <section className="flex items-center gap-2">
-                {disk.toFixed(0)}%
+                <p className="text-xs text-end w-10 font-medium">
-              </p>
+                  {disk.toFixed(0)}%
-              <AnimatedCircularProgressBar
+                </p>
-                className="size-3 text-[0px]"
+                <AnimatedCircularProgressBar
-                max={100}
+                  className="size-3 text-[0px]"
-                min={0}
+                  max={100}
-                value={disk}
+                  min={0}
-                primaryColor="hsl(var(--chart-5))"
+                  value={disk}
-              />
+                  primaryColor="hsl(var(--chart-5))"
+                />
+              </section>
+              <div className="flex text-[11px] font-medium items-center gap-2">
+                {formatBytes(data.status.DiskUsed)} /{" "}
+                {formatBytes(data.host.DiskTotal)}
+              </div>
             </section>
           </div>
           <ChartContainer

app/(main)/ClientComponents/ServerDetailClient.tsx

@@ -200,6 +200,21 @@ export default function ServerDetailClient({
         </Card>
       </section>
       <section className="flex flex-wrap gap-2 mt-1">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Load")}</p>
+              {data.status.NetInTransfer ? (
+                <div className="text-xs">
+                  {data.status.Load1} / {data.status.Load5} /{" "}
+                  {data.status.Load15}
+                </div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
         <Card className="rounded-[10px] bg-transparent border-none shadow-none">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
@@ -209,7 +224,9 @@ export default function ServerDetailClient({
                   {" "}
                   {formatBytes(data.status.NetOutTransfer)}{" "}
                 </div>
-              ) : null}
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
             </section>
           </CardContent>
         </Card>
@@ -222,7 +239,9 @@ export default function ServerDetailClient({
                   {" "}
                   {formatBytes(data.status.NetInTransfer)}{" "}
                 </div>
-              ) : null}
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
             </section>
           </CardContent>
         </Card>

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 { cn, nezhaFetcher } from "@/lib/utils";
-import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
+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 = localStorage.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");
+            localStorage.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,14 +159,27 @@ export default function ServerListClient() {
           />
         )}
       </section>
-      <section
+      {inline === "1" && (
-        ref={containerRef}
+        <section
-        className="grid grid-cols-1 gap-2 md:grid-cols-2"
+          ref={containerRef}
-      >
+          className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden"
-        {filteredServers.map((serverInfo) => (
+        >
-          <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+          {filteredServers.map((serverInfo) => (
-        ))}
+            <ServerCardInline key={serverInfo.id} serverInfo={serverInfo} />
-      </section>
+          ))}
+        </section>
+      )}
+
+      {inline === "0" && (
+        <section
+          ref={containerRef}
+          className="grid grid-cols-1 gap-2 md:grid-cols-2"
+        >
+          {filteredServers.map((serverInfo) => (
+            <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+          ))}
+        </section>
+      )}
     </>
   );
 }

components/ServerCardInline.tsx

@@ -0,0 +1,177 @@
+import { NezhaAPISafe } from "@/app/types/nezha-api";
+import ServerFlag from "@/components/ServerFlag";
+import ServerUsageBar from "@/components/ServerUsageBar";
+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-20 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-16 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-16 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 w-20 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 w-20 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>
+  );
+}

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",
@@ -63,7 +71,8 @@
     "System": "System",
     "CPU": "CPU",
     "Upload": "Upload",
-    "Download": "Download"
+    "Download": "Download",
+    "Load": "Load"
   },
   "ServerDetailChartClient": {
     "chart_fetch_error_message": "Please check your environment variables and review the server console",

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": "遅延",
@@ -62,6 +70,7 @@
     "Region": "地域",
     "System": "システム",
     "CPU": "CPU",
+    "Load": "負荷",
     "Upload": "Upload",
     "Download": "Download"
   },

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": "延遲",
@@ -63,7 +71,8 @@
     "System": "系統",
     "CPU": "CPU",
     "Upload": "上傳",
-    "Download": "下載"
+    "Download": "下載",
+    "Load": "負載"
   },
   "ServerDetailChartClient": {
     "chart_fetch_error_message": "獲取伺服器詳情失敗,請檢查您的環境變數並檢查伺服器控制台",

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": "延迟",
@@ -63,10 +71,11 @@
     "System": "系统",
     "CPU": "CPU",
     "Upload": "上传",
-    "Download": "下载"
+    "Download": "下载",
+    "Load": "负载"
   },
   "ServerDetailChartClient": {
-    "chart_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
+    "chart_fetch_error_message": "获取服务器详情失败，请检查您的环境变量并检查服务器控制台",
     "Process": "进程",
     "Disk": "磁盘",
     "Mem": "内存",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nezha-dash",
-  "version": "1.5.7",
+  "version": "1.6.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3040",