diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx index 9d4c238..6bb7520 100644 --- a/src/components/ServerCard.tsx +++ b/src/components/ServerCard.tsx @@ -9,13 +9,12 @@ import { useNavigate } from "react-router-dom" import PlanInfo from "./PlanInfo" 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, BarChart3, Calendar } from "lucide-react" interface ServerCardProps { - now: number; + now: number; serverInfo: NezhaServer; cycleStats?: { [key: string]: CycleTransferData @@ -25,18 +24,18 @@ interface ServerCardProps { export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardProps) { const { t } = useTranslation() const navigate = useNavigate() - const { - name, - country_code, - online, - cpu, - up, - down, - mem, - stg, - net_in_transfer, - net_out_transfer, - public_note, + const { + name, + country_code, + online, + cpu, + up, + down, + mem, + stg, + net_in_transfer, + net_out_transfer, + public_note, platform, cpu_info, mem_total, @@ -45,7 +44,10 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr udp, process, uptime, - last_active_time_string + last_active_time_string, + arch, + swap, + swap_total } = formatNezhaInfo( now, serverInfo, @@ -60,21 +62,19 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined // @ts-expect-error ShowNetTransfer is a global variable const showNetTransfer = window.ShowNetTransfer as boolean - // @ts-expect-error ShowServerDetails is a global variable - const showServerDetails = window.ShowServerDetails !== undefined ? window.ShowServerDetails as boolean : true const parsedData = parsePublicNote(public_note) - + // 获取匹配当前服务器的流量计费周期 const getServerCycleData = () => { if (!cycleStats) { return null; } - + // 确保服务器ID的所有可能形式 const serverId = String(serverInfo.id); const serverIdNum = Number(serverInfo.id); - + const matchedCycles: Array<{ name: string; from: string; @@ -84,19 +84,19 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr nextUpdate: string; progress: number; }> = [] - + // 遍历所有流量周期,查找匹配当前服务器ID的数据 Object.values(cycleStats).forEach((cycleData) => { - + if (!cycleData.server_name) { return; } - + const serverIdsInCycle = Object.keys(cycleData.server_name); - + // 检查各种可能的ID形式 let matchedId = null; - + // 1. 直接匹配字符串ID if (serverIdsInCycle.includes(serverId)) { matchedId = serverId; @@ -104,7 +104,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr // 2. 尝试匹配数字ID (如果API返回的是数字ID) else if (serverIdsInCycle.includes(String(serverIdNum))) { matchedId = String(serverIdNum); - } + } // 3. 通过名称匹配 else { // 检查名称是否匹配 @@ -115,7 +115,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr break; } } - + // 如果还没匹配,尝试循环比较所有ID if (!matchedId) { for (const id of serverIdsInCycle) { @@ -126,12 +126,12 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr } } } - + // 如果找到匹配的ID,且有对应的传输数据 if (matchedId && cycleData.transfer && cycleData.transfer[matchedId] !== undefined) { const transfer = cycleData.transfer[matchedId]; const progress = (transfer / cycleData.max) * 100; - + matchedCycles.push({ name: cycleData.name, from: cycleData.from, @@ -143,7 +143,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr }); } }); - + return matchedCycles.length > 0 ? matchedCycles : null; } @@ -160,10 +160,10 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr // 格式化网络速度 const formatSpeed = (speed: number) => { - return speed >= 1024 - ? `${(speed / 1024).toFixed(2)}G/s` - : speed >= 1 - ? `${speed.toFixed(2)}M/s` + return speed >= 1024 + ? `${(speed / 1024).toFixed(2)}G/s` + : speed >= 1 + ? `${speed.toFixed(2)}M/s` : `${(speed * 1024).toFixed(2)}K/s` } @@ -173,7 +173,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr if (value > 70) return "text-orange-400" return "text-green-500" } - + // 根据进度获取状态颜色 const getProgressColorClass = (value: number) => { if (value > 90) return "bg-red-500" @@ -214,14 +214,14 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr )} - + {parsedData?.planDataMod && (
)} - + {/* 添加流量使用统计 */} {serverCycleData && serverCycleData.length > 0 && (
@@ -273,7 +273,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr onClick={cardClick} >
- +
@@ -281,7 +281,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr {showFlag && }

{name}

- +
{platform.includes("Windows") ? ( @@ -293,14 +293,14 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
- +
{parsedData?.billingDataMod && (
)} - +
{uptime > 0 && (
@@ -308,7 +308,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr {formatUptime(uptime, t)}
)} - + {last_active_time_string && (
@@ -334,14 +334,14 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr {cycle.progress.toFixed(1)}%
- +
{formatBytes(cycle.transfer)} / {formatBytes(cycle.max)}
- +
- +
{new Date(cycle.from).toLocaleDateString()} - {new Date(cycle.to).toLocaleDateString()} @@ -364,7 +364,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr ))}
)} - + {/* 主要资源使用情况 - 全新设计 */}
{/* CPU使用率 */} @@ -379,8 +379,31 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
+ {/* CPU信息 */} + {cpu_info && cpu_info.length > 0 && ( +
+ + + +
+ {cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "} + {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "-"} +
+
+ + {cpu_info.join("\n")} + +
+
+ {arch && ( +
+ {arch} +
+ )} +
+ )}
- + {/* 内存使用率 */}
@@ -401,8 +424,43 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
+ {/* 内存信息 */} +
+
+ {mem_total > 0 ? formatBytes(mem_total) : "-"} +
+ {swap_total > 0 ? ( + + + +
90 ? "bg-red-500/10 text-red-600 dark:text-red-400" : + Number(swap) > 70 ? "bg-orange-500/10 text-orange-600 dark:text-orange-400" : "")}> + SWAP:{swap.toFixed(0)}% +
+
+ +
+
+ 总容量: + {formatBytes(swap_total)} +
+
+ 使用率: + {swap.toFixed(1)}% +
+
+
+
+
+ ):( +
+ - +
+ )} +
- + {/* 存储使用率 */}
@@ -415,9 +473,13 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
+ {/* 存储信息 */} +
+ {disk_total > 0 ? formatBytes(disk_total) : "-"} +
- + {/* 网络使用情况 */}
{/* 网络速率 */} @@ -437,67 +499,23 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr {formatSpeed(down)}
- + {/* 连接数与进程数 */}
-
- - T: {formatLargeNumber(tcp)} -
-
- - U: {formatLargeNumber(udp)} -
-
- - P: {formatLargeNumber(process)} -
+
+ + T: {formatLargeNumber(tcp)} +
+
+ + U: {formatLargeNumber(udp)} +
+
+ + P: {formatLargeNumber(process)} +
- - {/* 服务器详细信息区域 */} - {showServerDetails && ( -
- {/* CPU信息 */} - {cpu_info && cpu_info.length > 0 && ( - - - - - {cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "} - {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "-"} - - - - {cpu_info.join(", ")} - - - - )} - - {/* 内存大小 */} - {mem_total > 0 ? ( - - RAM: {formatBytes(mem_total)} - - ) : ( - - RAM: - - - )} - - {/* 存储大小 */} - {disk_total > 0 ? ( - - DISK: {formatBytes(disk_total)} - - ) : ( - - DISK: - - - )} -
- )} @@ -507,7 +525,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr )} - + {/* 网络传输信息 */} {showNetTransfer && (
@@ -528,7 +546,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
)}
- + {/* 视觉元素:左侧状态条 */}