diff --git a/LTEMvcApp/Views/Home/Logs.cshtml b/LTEMvcApp/Views/Home/Logs.cshtml index ef8c7ef..1c76a6d 100644 --- a/LTEMvcApp/Views/Home/Logs.cshtml +++ b/LTEMvcApp/Views/Home/Logs.cshtml @@ -44,22 +44,42 @@ font-weight: bold; } - .log-item > span { + .log-item > span, .log-list-header > span { text-overflow: ellipsis; overflow: hidden; padding-right: 15px; } - .log-timestamp { flex-basis: 20%; } - .log-layer { flex-basis: 15%; } - .log-direction { flex-basis: 15%; } - .log-message { flex-basis: 40%; } - .log-info { flex-basis: 10%; } + + /* 列宽定义:固定与弹性结合 */ + .log-timestamp { flex: 0 0 170px; } /* 固定宽度 */ + .log-layer { flex: 0 0 100px; } /* 固定宽度 */ + .log-direction { flex: 0 0 120px; } /* 固定宽度 */ + .log-info { flex: 0 0 80px; } /* 固定宽度 */ + .log-message { + flex: 1 1 0; /* 弹性增长和收缩,占据剩余空间 */ + min-width: 150px; /* 保证最小宽度 */ + } + + /* 日志列表标题栏 */ + .log-list-header { + display: flex; + justify-content: space-between; + padding: 8px 10px; + padding-right: 27px; /* 10px base padding + 17px for a standard scrollbar */ + background-color: #f8f9fa; + font-weight: bold; + border-bottom: 2px solid #dee2e6; + color: #495057; + font-size: 0.9em; + white-space: nowrap; + } /* 右侧日志详情 */ .log-detail-panel { flex-grow: 1; padding: 0 20px; overflow-y: auto; + min-width: 250px; /* 保证最小宽度 */ } .log-detail-panel h4 { @@ -89,6 +109,19 @@ line-height: 1.6; } + /* 可拖动调整大小的分割线 */ + .resizer { + flex: 0 0 5px; + background: #e9ecef; + cursor: col-resize; + transition: background-color 0.2s ease; + } + + .resizer:hover, + .resizer.is-dragging { + background: #007bff; + } + #detail-placeholder { color: #999; text-align: center; @@ -206,6 +239,14 @@
+请从左侧选择一条日志以查看详情
@@ -256,6 +300,8 @@ const resetLogsBtn = document.getElementById('reset-logs-btn'); const addTestDataBtn = document.getElementById('add-test-data-btn'); const reconnectBtn = document.getElementById('reconnect-btn'); + const logListPanel = document.querySelector('.log-list-panel'); + const resizer = document.getElementById('drag-resizer'); let allLogsData = []; let eventSource = null; @@ -269,7 +315,8 @@ contentId: 'log-content-area', tag: 'div', rows_in_block: 50, - blocks_in_cluster: 4 + blocks_in_cluster: 4, + no_data_text: "正在等待日志..." }); // 更新连接状态 @@ -580,6 +627,48 @@ connectSSE(); }); + // --- Resizer Logic --- + let isResizing = false; + + resizer.addEventListener('mousedown', (e) => { + isResizing = true; + resizer.classList.add('is-dragging'); + document.body.style.cursor = 'col-resize'; + document.body.style.userSelect = 'none'; + + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + }); + + function onMouseMove(e) { + if (!isResizing) return; + + const container = logListPanel.parentElement; + const containerRect = container.getBoundingClientRect(); + const newLeftWidth = e.clientX - containerRect.left; + + // Constraints + const leftPanelMinWidth = 400; // in pixels + const rightPanelMinWidth = 250; // in pixels + const maxWidth = container.offsetWidth - rightPanelMinWidth - resizer.offsetWidth; + + if (newLeftWidth >= leftPanelMinWidth && newLeftWidth <= maxWidth) { + logListPanel.style.flexBasis = `${newLeftWidth}px`; + } + } + + function onMouseUp() { + if (!isResizing) return; + isResizing = false; + resizer.classList.remove('is-dragging'); + document.body.style.cursor = 'default'; + document.body.style.userSelect = 'auto'; + + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + } + // --- End Resizer Logic --- + // 初始化连接 connectSSE(); });