From 1ae404ae842e57490d368bad2990aceace81f71c Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sat, 30 Nov 2024 22:44:48 +0800
Subject: [PATCH] feat: detail net transfer info

---
 src/components/ServerCard.tsx           | 28 ++++++++++-----------
 src/components/ServerDetailOverview.tsx | 33 +++++++++++++++++++++++++
 src/locales/en/translation.json         |  4 ++-
 src/locales/zh-CN/translation.json      |  4 ++-
 src/locales/zh-TW/translation.json      |  4 ++-
 5 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 8da12c4..154a90e 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -104,26 +104,26 @@ export default function ServerCard({
             </div>
           </section>
           <section className={"flex items-center justify-between gap-1"}>
-            <Badge
-              variant="secondary"
-              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
-            >
-              {t("Upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
-            </Badge>
-            <Badge
-              variant="outline"
-              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
-            >
-              {t("Download")}:{formatBytes(serverInfo.state.net_in_transfer)}
-            </Badge>
-          </section>
+              <Badge
+                variant="secondary"
+                className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
+              >
+                {t("serverCard.upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+              >
+                {t("serverCard.download")}:{formatBytes(serverInfo.state.net_in_transfer)}
+              </Badge>
+            </section>
         </div>
       </Card>
     </section>
   ) : (
     <Card
       className={cn(
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
+        "flex flex-col lg:min-h-[91px] min-h-[123px] items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`)}
     >
diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
index 83f1b2e..cca9e18 100644
--- a/src/components/ServerDetailOverview.tsx
+++ b/src/components/ServerDetailOverview.tsx
@@ -188,6 +188,39 @@ export default function ServerDetailOverview({
           </CardContent>
         </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("serverDetail.upload")}
+              </p>
+              {server.state.net_out_transfer ? (
+                <div className="text-xs">
+                  {" "}
+                  {formatBytes(server.state.net_out_transfer)}{" "}
+                </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">
+              <p className="text-xs text-muted-foreground">
+                {t("serverDetail.download")}
+              </p>
+              {server.state.net_in_transfer ? (
+                <div className="text-xs">
+                  {" "}
+                  {formatBytes(server.state.net_in_transfer)}{" "}
+                </div>
+              ) : null}
+            </section>
+          </CardContent>
+        </Card>
+
+      </section>
     </div>
   );
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index f5f6349..9345b85 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -33,7 +33,9 @@
     "mem": "Mem",
     "disk": "Disk",
     "region": "Region",
-    "system": "System"
+    "system": "System",
+    "upload": "Upload",
+    "download": "Download"
   },
   "serverDetailChart": {
     "process": "Process",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 3995e5e..65d42d1 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -33,7 +33,9 @@
     "mem": "内存",
     "disk": "磁盘",
     "region": "区域",
-    "system": "系统"
+    "system": "系统",
+    "upload": "上传",
+    "download": "下载"
   },
   "serverDetailChart": {
     "process": "进程数",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 9cececf..c714910 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -33,7 +33,9 @@
     "mem": "內存",
     "disk": "磁盤",
     "region": "地區",
-    "system": "系統"
+    "system": "系統",
+    "upload": "上傳",
+    "download": "下載"
   },
   "serverDetailChart": {
     "process": "進程數",