From dfb648a32b5facb76f44377266bcdc56055d9d0f Mon Sep 17 00:00:00 2001 From: wood chen Date: Fri, 18 Apr 2025 21:02:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20ServerCard=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B5=81=E9=87=8F=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E7=BB=9F=E8=AE=A1=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=91=A8=E6=9C=9F=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E8=BF=9B=E5=BA=A6=E6=9D=A1=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E6=98=BE=E7=A4=BA=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E5=AF=B9=E6=B5=81=E9=87=8F=E4=BD=BF=E7=94=A8=E6=83=85?= =?UTF-8?q?=E5=86=B5=E7=9A=84=E7=90=86=E8=A7=A3=E5=92=8C=E5=8F=AF=E8=A7=86?= =?UTF-8?q?=E5=8C=96=E6=95=88=E6=9E=9C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ServerCard.tsx | 142 +++++++++++++++++++++++++++++++++- 1 file changed, 139 insertions(+), 3 deletions(-) diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx index e973f76..68069ff 100644 --- a/src/components/ServerCard.tsx +++ b/src/components/ServerCard.tsx @@ -3,7 +3,7 @@ import ServerUsageBar from "@/components/ServerUsageBar" import { formatBytes } from "@/lib/format" import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class" import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils" -import { NezhaServer } from "@/types/nezha-api" +import { CycleTransferData, NezhaServer } from "@/types/nezha-api" import { useTranslation } from "react-i18next" import { useNavigate } from "react-router-dom" @@ -12,9 +12,17 @@ import BillingInfo from "./billingInfo" import { Badge } from "./ui/badge" import { Card, CardContent, CardHeader, CardFooter } from "./ui/card" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip" -import { ArrowDown, ArrowUp, Clock, Cpu, HardDrive, Server, Activity } from "lucide-react" +import { ArrowDown, ArrowUp, Clock, Cpu, HardDrive, Server, Activity, BarChart3 } from "lucide-react" -export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) { +interface ServerCardProps { + now: number; + serverInfo: NezhaServer; + cycleStats?: { + [key: string]: CycleTransferData + }; +} + +export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardProps) { const { t } = useTranslation() const navigate = useNavigate() const { @@ -55,6 +63,49 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf const showServerDetails = window.ShowServerDetails !== undefined ? window.ShowServerDetails as boolean : true const parsedData = parsePublicNote(public_note) + + // 获取匹配当前服务器的流量计费周期 + const getServerCycleData = () => { + if (!cycleStats) return null + + const serverId = serverInfo.id.toString() + const matchedCycles: Array<{ + name: string; + from: string; + to: string; + max: number; + transfer: number; + nextUpdate: string; + progress: number; + }> = [] + + // 遍历所有流量周期，查找匹配当前服务器ID的数据 + Object.values(cycleStats).forEach(cycleData => { + if ( + cycleData.server_name && + cycleData.server_name[serverId] && + cycleData.transfer && + cycleData.transfer[serverId] !== undefined + ) { + const transfer = cycleData.transfer[serverId] + const progress = (transfer / cycleData.max) * 100 + + matchedCycles.push({ + name: cycleData.name, + from: cycleData.from, + to: cycleData.to, + max: cycleData.max, + transfer: transfer, + nextUpdate: cycleData.next_update?.[serverId] || "", + progress: progress + }) + } + }) + + return matchedCycles.length > 0 ? matchedCycles : null + } + + const serverCycleData = getServerCycleData() // 格式化运行时间 const formatUptime = (seconds: number, t: any) => { @@ -80,6 +131,13 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf if (value > 70) return "text-orange-400" return "text-green-500" } + + // 根据进度获取状态颜色 + const getProgressColorClass = (value: number) => { + if (value > 90) return "bg-red-500" + if (value > 70) return "bg-orange-500" + return "bg-emerald-500" + } if (!online) { return ( @@ -111,6 +169,39 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf )} + + {/* 添加流量使用统计 */} + {serverCycleData && ( +
+ {serverCycleData.map((cycle, index) => ( +
+
+
+ + {cycle.name} +
+ + {new Date(cycle.from).toLocaleDateString()} - {new Date(cycle.to).toLocaleDateString()} + +
+
+
+ {formatBytes(cycle.transfer)} + / {formatBytes(cycle.max)} +
+ {cycle.progress.toFixed(1)}% +
+
+
+
+
+
+ ))} +
+ )} ) @@ -163,6 +254,51 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf + {/* 流量使用统计 */} + {serverCycleData && serverCycleData.length > 0 && ( +
+ {serverCycleData.map((cycle, index) => ( +
+
+
+ + {cycle.name} +
+
+ {cycle.progress.toFixed(1)}% +
+
+ +
+
+ {formatBytes(cycle.transfer)} + / {formatBytes(cycle.max)} +
+
+ +
+
+
+
+ +
+ + {new Date(cycle.from).toLocaleDateString()} - {new Date(cycle.to).toLocaleDateString()} + + {cycle.nextUpdate && ( + + {t("cycleTransfer.nextUpdate")}: {new Date(cycle.nextUpdate).toLocaleTimeString()} + + )} +
+
+ ))} +
+ )} + {/* 主要资源使用情况 - 全新设计 */}
{/* CPU使用率 */}