feat: detail net transfer info

src/components/ServerCard.tsx

@@ -104,26 +104,26 @@ export default function ServerCard({
             </div>
           </section>
           <section className={"flex items-center justify-between gap-1"}>
-            <Badge
+              <Badge
-              variant="secondary"
+                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"
+                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)}
+                {t("serverCard.upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
-            </Badge>
+              </Badge>
-            <Badge
+              <Badge
-              variant="outline"
+                variant="outline"
-              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+                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)}
+                {t("serverCard.download")}:{formatBytes(serverInfo.state.net_in_transfer)}
-            </Badge>
+              </Badge>
-          </section>
+            </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}`)}
     >

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>
   );
 }

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",

src/locales/zh-CN/translation.json

@@ -33,7 +33,9 @@
     "mem": "内存",
     "disk": "磁盘",
     "region": "区域",
-    "system": "系统"
+    "system": "系统",
+    "upload": "上传",
+    "download": "下载"
   },
   "serverDetailChart": {
     "process": "进程数",

src/locales/zh-TW/translation.json

@@ -33,7 +33,9 @@
     "mem": "內存",
     "disk": "磁盤",
     "region": "地區",
-    "system": "系統"
+    "system": "系統",
+    "upload": "上傳",
+    "download": "下載"
   },
   "serverDetailChart": {
     "process": "進程數",