更新 ServerCard 组件,增强流量周期数据匹配逻辑,添加调试日志以便于排查问题,确保服务器ID匹配的准确性,提升数据展示的可靠性和可读性。

This commit is contained in:
wood chen 2025-04-18 21:11:43 +08:00
parent dfb648a32b
commit 31ff14b6f6
3 changed files with 115 additions and 18 deletions

View File

@ -66,9 +66,18 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
// 获取匹配当前服务器的流量计费周期
const getServerCycleData = () => {
if (!cycleStats) return null
if (!cycleStats) {
console.log('cycleStats is null or undefined');
return null;
}
// 确保服务器ID的所有可能形式
const serverId = String(serverInfo.id);
const serverIdNum = Number(serverInfo.id);
console.log(`ServerCard: Looking for server "${serverInfo.name}" with ID:`, serverId, 'type:', typeof serverInfo.id);
console.log('All cycleStats:', cycleStats);
const serverId = serverInfo.id.toString()
const matchedCycles: Array<{
name: string;
from: string;
@ -80,15 +89,60 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
}> = []
// 遍历所有流量周期查找匹配当前服务器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
Object.entries(cycleStats).forEach(([cycleId, cycleData]) => {
console.log(`\nChecking cycle ${cycleId}:`, cycleData.name);
if (!cycleData.server_name) {
console.log(` No server_name in this cycle`);
return;
}
const serverIdsInCycle = Object.keys(cycleData.server_name);
console.log(` Server IDs in this cycle:`, serverIdsInCycle);
// 检查各种可能的ID形式
let matchedId = null;
// 1. 直接匹配字符串ID
if (serverIdsInCycle.includes(serverId)) {
matchedId = serverId;
console.log(` ✓ Direct string match: ${serverId}`);
}
// 2. 尝试匹配数字ID (如果API返回的是数字ID)
else if (serverIdsInCycle.includes(String(serverIdNum))) {
matchedId = String(serverIdNum);
console.log(` ✓ Numeric match: ${serverIdNum}`);
}
// 3. 通过名称匹配
else {
// 检查名称是否匹配
const serverNames = Object.entries(cycleData.server_name);
for (const [id, name] of serverNames) {
if (name === serverInfo.name) {
matchedId = id;
console.log(` ✓ Name match: ${serverInfo.name} -> ID: ${id}`);
break;
}
}
// 如果还没匹配尝试循环比较所有ID
if (!matchedId) {
for (const id of serverIdsInCycle) {
console.log(` Comparing IDs: ${id} vs ${serverId}`);
if (Number(id) === serverIdNum) {
matchedId = id;
console.log(` ✓ Found match after conversion: ${id}`);
break;
}
}
}
}
// 如果找到匹配的ID且有对应的传输数据
if (matchedId && cycleData.transfer && cycleData.transfer[matchedId] !== undefined) {
console.log(` ✓ Found valid transfer data for server ${serverInfo.name} (ID: ${matchedId}) in cycle ${cycleId}`);
const transfer = cycleData.transfer[matchedId];
const progress = (transfer / cycleData.max) * 100;
matchedCycles.push({
name: cycleData.name,
@ -96,13 +150,16 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
to: cycleData.to,
max: cycleData.max,
transfer: transfer,
nextUpdate: cycleData.next_update?.[serverId] || "",
nextUpdate: cycleData.next_update?.[matchedId] || "",
progress: progress
})
});
} else {
console.log(` ✗ No valid transfer data found for this server in this cycle`);
}
})
});
return matchedCycles.length > 0 ? matchedCycles : null
console.log('Matched cycles result:', matchedCycles);
return matchedCycles.length > 0 ? matchedCycles : null;
}
const serverCycleData = getServerCycleData()
@ -171,7 +228,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
</div>
{/* 添加流量使用统计 */}
{serverCycleData && (
{serverCycleData && serverCycleData.length > 0 && (
<div className="mt-3">
{serverCycleData.map((cycle, index) => (
<div key={index} className="mt-3 bg-muted/30 rounded-md p-2">
@ -198,6 +255,11 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
style={{ width: `${Math.min(cycle.progress, 100)}%` }}
/>
</div>
{cycle.nextUpdate && (
<div className="mt-1 text-[10px] text-muted-foreground">
{t("cycleTransfer.nextUpdate")}: {new Date(cycle.nextUpdate).toLocaleTimeString()}
</div>
)}
</div>
))}
</div>

View File

@ -57,6 +57,9 @@ export function ServiceTracker({ serverList }: { serverList: NezhaServer[] }) {
)
}
// 调试日志
console.log('cycle_transfer_stats data:', serviceData?.data?.cycle_transfer_stats);
return (
<div className="mt-4 w-full mx-auto ">
{serviceData.data.cycle_transfer_stats && (

View File

@ -12,7 +12,7 @@ import { SORT_ORDERS, SORT_TYPES } from "@/context/sort-context"
import { useSort } from "@/hooks/use-sort"
import { useStatus } from "@/hooks/use-status"
import { useWebSocketContext } from "@/hooks/use-websocket-context"
import { fetchServerGroup } from "@/lib/nezha-api"
import { fetchServerGroup, fetchService } from "@/lib/nezha-api"
import { cn, formatNezhaInfo } from "@/lib/utils"
import { NezhaWebsocketResponse } from "@/types/nezha-api"
import { ServerGroup } from "@/types/nezha-api"
@ -111,6 +111,33 @@ export default function Servers() {
?.map((item: ServerGroup) => item.group.name) || []),
]
// 获取cycle_transfer_stats数据
const { data: serviceData } = useQuery({
queryKey: ["service"],
queryFn: () => fetchService(),
refetchOnMount: true,
refetchOnWindowFocus: true,
refetchInterval: 10000,
})
const cycleTransferStats = serviceData?.data?.cycle_transfer_stats
console.log('Server.tsx - cycleTransferStats:', cycleTransferStats);
// 检查服务器ID是否匹配
if (cycleTransferStats && nezhaWsData?.servers) {
console.log('Server IDs in cycleTransferStats:');
Object.entries(cycleTransferStats).forEach(([cycleId, cycleData]) => {
if (cycleData.server_name) {
console.log(`Cycle ${cycleId} server IDs:`, Object.keys(cycleData.server_name));
}
});
console.log('Server IDs from websocket:');
nezhaWsData.servers.forEach(server => {
console.log(`Server ${server.name} ID:`, server.id, typeof server.id);
});
}
if (!connected && !lastMessage) {
return (
<div className="flex flex-col items-center min-h-96 justify-center ">
@ -376,7 +403,12 @@ export default function Servers() {
{inline === "0" && (
<section ref={containerRef} className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6 server-card-list">
{filteredServers.map((serverInfo) => (
<ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
<ServerCard
now={nezhaWsData.now}
key={serverInfo.id}
serverInfo={serverInfo}
cycleStats={cycleTransferStats}
/>
))}
</section>
)}