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

src/components/ServerCard.tsx

@@ -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 => {
+    Object.entries(cycleStats).forEach(([cycleId, cycleData]) => {
-      if (
+      console.log(`\nChecking cycle ${cycleId}:`, cycleData.name);
-        cycleData.server_name && 
+      
-        cycleData.server_name[serverId] && 
+      if (!cycleData.server_name) {
-        cycleData.transfer && 
+        console.log(`  No server_name in this cycle`);
-        cycleData.transfer[serverId] !== undefined
+        return;
-      ) {
+      }
-        const transfer = cycleData.transfer[serverId]
+      
-        const progress = (transfer / cycleData.max) * 100
+      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>

src/components/ServiceTracker.tsx

@@ -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 && (

src/pages/Server.tsx

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