Merge branch 'main' into cloudflare

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">
-              <p className="text-xs text-end w-10 font-medium">
-                {disk.toFixed(0)}%
-              </p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={disk}
-                primaryColor="hsl(var(--chart-5))"
-              />
+            <section className="flex flex-col items-end gap-0.5">
+              <section className="flex items-center gap-2">
+                <p className="text-xs text-end w-10 font-medium">
+                  {disk.toFixed(0)}%
+                </p>
+                <AnimatedCircularProgressBar
+                  className="size-3 text-[0px]"
+                  max={100}
+                  min={0}
+                  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,19 @@ 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>
+              ) : null}
+            </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">

messages/en.json

@@ -71,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

@@ -70,6 +70,7 @@
     "Region": "地域",
     "System": "システム",
     "CPU": "CPU",
+    "Load": "負荷",
     "Upload": "Upload",
     "Download": "Download"
   },

messages/zh-t.json

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

messages/zh.json

@@ -71,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.6.0-fix",
+  "version": "1.6.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3040",