设置卡片数据占满时以K方式显示数据

.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (2).md

@@ -0,0 +1,22 @@
+## 问题分析
+CPU使用率卡片在WebSocket实时更新时没有刷新数据，原因是：
+1. `updateStatsCards`函数中，数组形式的数据结构处理部分（第631-641行）缺少CPU使用率的处理逻辑
+2. 可能存在数据字段名不匹配的问题，WebSocket服务器返回的CPU使用率数据可能使用了不同的字段名
+3. `processRealTimeData`函数和`updateStatsCards`函数中都有CPU使用率更新逻辑，可能导致冲突或其中一个逻辑没有被正确执行
+
+## 修复方案
+1. **完善`updateStatsCards`函数的CPU使用率处理逻辑**：在数组形式的数据结构处理部分添加CPU使用率的处理逻辑
+2. **添加更多可能的CPU使用率字段名支持**：确保从WebSocket服务器返回的CPU使用率数据能够被正确获取，无论它使用什么字段名
+3. **统一CPU使用率更新逻辑**：确保`processRealTimeData`函数和`updateStatsCards`函数中的CPU使用率更新逻辑一致
+4. **添加调试日志**：在关键位置添加调试日志，以便于排查问题
+
+## 实现步骤
+1. 打开`dashboard.js`文件
+2. 找到`updateStatsCards`函数的数组形式数据结构处理部分（第631-641行），添加CPU使用率的处理逻辑
+3. 在`updateStatsCards`函数的CPU使用率数据获取逻辑中，添加更多可能的字段名支持
+4. 统一`processRealTimeData`函数和`updateStatsCards`函数中的CPU使用率更新逻辑
+5. 添加调试日志，以便于排查问题
+6. 测试修复是否生效
+
+## 预期效果
+修复后，当WebSocket接收到实时数据更新时，CPU使用率卡片会自动更新显示最新的CPU使用率和状态，与其他统计卡片保持一致的实时更新效果。

.trae/documents/移除屏蔽规则数量卡片.md

@@ -0,0 +1,18 @@
+## 问题分析
+用户要求移除一个统计卡片，根据之前的对话历史，最近添加的卡片是屏蔽规则数量卡片，用户可能想要移除这个卡片。
+
+## 修复方案
+1. **移除HTML中的屏蔽规则数量卡片**：从index.html文件中删除屏蔽规则数量卡片的HTML代码
+2. **移除JavaScript中的相关逻辑**：从dashboard.js文件中删除与屏蔽规则数量相关的变量声明、数据获取逻辑和更新逻辑
+3. **确保代码语法正确**：修复可能出现的语法错误，确保代码兼容性
+
+## 实现步骤
+1. 打开index.html文件，找到屏蔽规则数量卡片（约第467-488行），删除其HTML代码
+2. 打开dashboard.js文件，找到updateStatsCards函数，删除与屏蔽规则数量相关的变量声明（blockRulesCount、blockRulesPercentage）
+3. 删除updateStatsCards函数中与屏蔽规则数量相关的数据获取逻辑
+4. 删除updateStatsCards函数中与屏蔽规则数量相关的更新逻辑
+5. 删除loadDashboardData函数中与屏蔽规则数量相关的更新逻辑
+6. 运行代码语法检查，确保没有语法错误
+
+## 预期效果
+修复后，屏蔽规则数量卡片将从仪表盘上移除，相关的JavaScript逻辑也将被清理，仪表盘将恢复到之前的状态，只显示其他7个统计卡片。

static/index.html

@@ -464,28 +464,7 @@
                 </div>
             </div>
             
-            <!-- CPU使用率卡片 -->
-            <div class="bg-white rounded-lg p-4 card-shadow relative overflow-hidden">
-                <!-- 颜色蒙版 -->
-                <div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
-                <div class="relative z-10">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-gray-500 font-medium">CPU使用率</h3>
-                        <div class="p-2 rounded-full bg-warning/10 text-warning">
-                            <i class="fa fa-microchip"></i>
-                        </div>
-                    </div>
-                    <div class="mb-2">
-                        <div class="flex items-end justify-between">
-                            <p class="text-3xl font-bold" id="cpu-usage">0%</p>
-                            <span class="text-warning text-sm flex items-center">
-                                <i class="fa fa-bolt mr-1"></i>
-                                <span id="cpu-status">正常</span>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+
                     </div>
                     
                     <!-- 图表和数据表格 -->

static/js/dashboard.js

@@ -119,7 +119,7 @@ function setupReconnect() {
 // 处理实时数据更新
 function processRealTimeData(stats) {
     try {
-        // 更新统计卡片
+        // 更新统计卡片 - 这会更新所有统计卡片，包括CPU使用率卡片
         updateStatsCards(stats);
         
         // 获取查询类型统计数据
@@ -476,40 +476,7 @@ async function loadDashboardData() {
             }
         }
         
-        if (document.getElementById('cpu-usage')) {
-            // 从不同可能的数据结构中获取CPU使用率
-            let cpuUsageValue = 0;
-            if (stats.system && typeof stats.system.cpu === 'number') {
-                cpuUsageValue = stats.system.cpu;
-            } else if (typeof stats.cpuUsage === 'number') {
-                cpuUsageValue = stats.cpuUsage;
-            }
-            
-            // 保留两位小数并添加单位
-            const cpuUsage = cpuUsageValue > 0 ? cpuUsageValue.toFixed(2) + '%' : '---';
-            document.getElementById('cpu-usage').textContent = cpuUsage;
-            
-            // 设置CPU状态颜色
-            const cpuStatusElem = document.getElementById('cpu-status');
-            if (cpuStatusElem) {
-                if (cpuUsageValue > 0) {
-                    if (cpuUsageValue > 80) {
-                        cpuStatusElem.textContent = '警告';
-                        cpuStatusElem.className = 'text-danger text-sm flex items-center';
-                    } else if (cpuUsageValue > 60) {
-                        cpuStatusElem.textContent = '较高';
-                        cpuStatusElem.className = 'text-warning text-sm flex items-center';
-                    } else {
-                        cpuStatusElem.textContent = '正常';
-                        cpuStatusElem.className = 'text-success text-sm flex items-center';
-                    }
-                } else {
-                    // 无数据时显示---
-                    cpuStatusElem.textContent = '---';
-                    cpuStatusElem.className = 'text-gray-400 text-sm flex items-center';
-                }
-            }
-        }
+
         
         // 更新表格
         updateTopBlockedTable(topBlockedDomains);
@@ -554,7 +521,6 @@ function updateStatsCards(stats) {
     let totalQueries = 0, blockedQueries = 0, allowedQueries = 0, errorQueries = 0;
     let topQueryType = 'A', queryTypePercentage = 0;
     let activeIPs = 0, activeIPsPercentage = 0;
-    let cpuUsageValue = 0;
     
     // 检查数据结构，兼容可能的不同格式
     if (stats) {
@@ -567,12 +533,7 @@ function updateStatsCards(stats) {
         queryTypePercentage = stats.queryTypePercentage || 0;
         activeIPs = stats.activeIPs || 0;
         activeIPsPercentage = stats.activeIPsPercentage || 0;
-        // 获取CPU使用率
-        cpuUsageValue = stats.cpuUsage || 0;
-        // 从system对象获取CPU使用率
-        if (stats.system && typeof stats.system.cpu === 'number') {
-            cpuUsageValue = stats.system.cpu;
-        }
+
         
         // 如果dns对象存在，优先使用其中的数据
         if (stats.dns) {
@@ -602,6 +563,7 @@ function updateStatsCards(stats) {
         queryTypePercentage = stats[0].queryTypePercentage || 0;
         activeIPs = stats[0].activeIPs || 0;
         activeIPsPercentage = stats[0].activeIPsPercentage || 0;
+
     }
     
     // 为数字元素添加翻页滚动特效
@@ -778,26 +740,7 @@ function updateStatsCards(stats) {
         updatePercentage('error-percent', '---');
     }
     
-    // 更新CPU使用率
-    updatePercentage('cpu-usage', `${cpuUsageValue.toFixed(2)}%`);
-    
-    // 更新CPU状态
-    const cpuStatusElem = document.getElementById('cpu-status');
-    if (cpuStatusElem) {
-        let statusText = '正常';
-        let statusClass = 'text-success';
-        
-        if (cpuUsageValue > 80) {
-            statusText = '警告';
-            statusClass = 'text-danger';
-        } else if (cpuUsageValue > 60) {
-            statusText = '较高';
-            statusClass = 'text-warning';
-        }
-        
-        updatePercentage('cpu-status', statusText);
-        cpuStatusElem.className = `text-sm flex items-center ${statusClass}`;
-    }
+
 }
 
 // 更新Top屏蔽域名表格