1

LTEMvcApp/Views/Home/Logs.cshtml

@@ -263,6 +263,30 @@
         margin-bottom: 10px;
         display: none;
     }
+
+    /* Layer过滤器样式 */
+    .layer-filter-dropdown {
+        margin-left: 8px;
+        padding: 2px 6px;
+        font-size: 0.8em;
+        border: 1px solid #ced4da;
+        border-radius: 3px;
+        background-color: #fff;
+        cursor: pointer;
+        min-width: 80px;
+    }
+
+    .layer-filter-dropdown:focus {
+        outline: none;
+        border-color: #007bff;
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
+
+    .log-layer {
+        display: flex;
+        align-items: center;
+        flex: 0 0 100px;
+    }
 </style>
 
 <div class="log-container">
@@ -273,7 +297,12 @@
         
         <div class="log-list-header">
             <span class="log-timestamp">Timestamp</span>
-            <span class="log-layer">Layer</span>
+            <span class="log-layer">
+                Layer
+                <select id="layer-filter" class="layer-filter-dropdown">
+                    <option value="">全部</option>
+                </select>
+            </span>
             <span class="log-direction">Direction</span>
             <span class="log-message">Message</span>
             <span class="log-info">Info</span>
@@ -333,8 +362,10 @@
         const reconnectBtn = document.getElementById('reconnect-btn');
         const logListPanel = document.querySelector('.log-list-panel');
         const resizer = document.getElementById('drag-resizer');
+        const layerFilter = document.getElementById('layer-filter');
 
         let allLogsData = [];
+        let availableLayers = new Set(); // 用于跟踪可用的日志层
         let eventSource = null;
         let reconnectAttempts = 0;
         const maxReconnectAttempts = 5;
@@ -350,6 +381,39 @@
             no_data_text: "正在等待日志..."
         });
 
+        // 更新Layer过滤器选项
+        function updateLayerFilter() {
+            const currentValue = layerFilter.value;
+            const options = ['<option value="">全部</option>'];
+            
+            // 按字母顺序排序
+            const sortedLayers = Array.from(availableLayers).sort();
+            
+            sortedLayers.forEach(layer => {
+                const selected = layer === currentValue ? ' selected' : '';
+                options.push(`<option value="${layer}"${selected}>${layer}</option>`);
+            });
+            
+            layerFilter.innerHTML = options.join('');
+        }
+
+        // 根据当前过滤器重新渲染日志列表
+        function refreshLogList() {
+            const selectedLayer = layerFilter.value;
+            let filteredLogs = allLogsData;
+            
+            if (selectedLayer) {
+                filteredLogs = allLogsData.filter(log => log.Layer === selectedLayer);
+            }
+            
+            const rows = filteredLogs.map((log, i) => formatLogItem(log, i));
+            clusterize.clear();
+            clusterize.append(rows);
+            
+            // 更新总数显示
+            totalLogsEl.textContent = filteredLogs.length;
+        }
+
         // 更新连接状态
         function updateConnectionStatus(status, text) {
             statusIndicator.className = 'status-indicator status-' + status;
@@ -377,11 +441,13 @@
         // 清空日志显示
         function clearLogsDisplay() {
             allLogsData = [];
+            availableLayers.clear();
             clusterize.clear();
             totalLogsEl.textContent = '0';
             newLogsCountEl.textContent = '';
             detailPlaceholder.classList.remove('d-none');
             detailContent.classList.add('d-none');
+            updateLayerFilter();
         }
 
         // 美化方向
@@ -443,6 +509,16 @@
         function updateLogList(logs, prepend = false) {
             if (!logs || logs.length === 0) return;
             
+            // 收集新的日志层
+            logs.forEach(log => {
+                if (log.Layer) {
+                    availableLayers.add(log.Layer);
+                }
+            });
+            
+            // 更新过滤器选项
+            updateLayerFilter();
+            
             const newRows = logs.map((log, i) => formatLogItem(log, allLogsData.length + i));
             
             if (prepend) {
@@ -451,7 +527,9 @@
                  clusterize.append(newRows);
             }
             allLogsData.push(...logs);
-            totalLogsEl.textContent = allLogsData.length;
+            
+            // 根据当前过滤器更新显示
+            refreshLogList();
             
             // 显示新日志数量
             if (!prepend) {
@@ -590,6 +668,11 @@
             };
         }
 
+        // Layer过滤器变化事件
+        layerFilter.addEventListener('change', function() {
+            refreshLogList();
+        });
+
         // 事件委托处理点击事件
         contentArea.addEventListener('click', function(e) {
             const item = e.target.closest('.log-item');
@@ -704,4 +787,5 @@
         connectSSE();
     });
 </script>
-} 
+}
+</rewritten_file>