|
|
|
@ -80,46 +80,78 @@ |
|
|
|
padding: 0 20px; |
|
|
|
overflow-y: auto; |
|
|
|
min-width: 250px; /* 保证最小宽度 */ |
|
|
|
background-color: #fff; |
|
|
|
border-left: 1px solid #ddd; |
|
|
|
} |
|
|
|
|
|
|
|
.log-detail-panel h4 { |
|
|
|
margin-top: 10px; |
|
|
|
border-bottom: 2px solid #007bff; |
|
|
|
padding-bottom: 5px; |
|
|
|
color: #0056b3; |
|
|
|
background-color: #f8f9fa; |
|
|
|
border-bottom: 1px solid #dee2e6; |
|
|
|
padding: 12px 20px; |
|
|
|
margin: 0 -20px 0 -20px; /* Extend to panel edges */ |
|
|
|
font-size: 1.1em; |
|
|
|
color: #343a40; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item { |
|
|
|
margin-bottom: 12px; |
|
|
|
margin-top: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item-label { |
|
|
|
font-size: 0.9em; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
color: #6c757d; |
|
|
|
text-transform: uppercase; |
|
|
|
margin-bottom: 5px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item-value { |
|
|
|
background-color: #f7f7f7; |
|
|
|
padding: 12px; |
|
|
|
border-radius: 4px; |
|
|
|
word-break: break-all; |
|
|
|
white-space: pre-wrap; |
|
|
|
background-color: #212529; /* Dark background for code */ |
|
|
|
color: #f8f9fa; /* Light text */ |
|
|
|
padding: 15px; |
|
|
|
border-radius: 5px; |
|
|
|
white-space: pre; /* Prevent wrapping, preserve whitespace */ |
|
|
|
overflow-x: auto; /* Add horizontal scrollbar */ |
|
|
|
margin-top: 4px; |
|
|
|
font-size: 0.95em; |
|
|
|
line-height: 1.6; |
|
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; |
|
|
|
font-size: 0.9em; |
|
|
|
line-height: 1.7; |
|
|
|
border: 1px solid #495057; |
|
|
|
} |
|
|
|
|
|
|
|
/* 可拖动调整大小的分割线 */ |
|
|
|
.resizer { |
|
|
|
flex: 0 0 5px; |
|
|
|
background: #e9ecef; |
|
|
|
flex: 0 0 10px; /* Wider grab area */ |
|
|
|
cursor: col-resize; |
|
|
|
transition: background-color 0.2s ease; |
|
|
|
background: #f1f3f5; /* A bit darker than page bg */ |
|
|
|
border-left: 1px solid #dee2e6; |
|
|
|
border-right: 1px solid #dee2e6; |
|
|
|
position: relative; |
|
|
|
transition: all 0.2s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.resizer::before { |
|
|
|
content: '⋮'; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%) rotate(90deg); |
|
|
|
color: #adb5bd; |
|
|
|
font-size: 1.2em; |
|
|
|
line-height: 0; |
|
|
|
transition: color 0.2s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.resizer:hover, |
|
|
|
.resizer.is-dragging { |
|
|
|
background: #007bff; |
|
|
|
border-color: #0056b3; |
|
|
|
} |
|
|
|
|
|
|
|
.resizer:hover::before, |
|
|
|
.resizer.is-dragging::before { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
#detail-placeholder { |
|
|
|
@ -275,8 +307,7 @@ |
|
|
|
<p>请从左侧选择一条日志以查看详情</p> |
|
|
|
</div> |
|
|
|
<div id="detail-content" class="d-none"> |
|
|
|
<h4>日志详情</h4> |
|
|
|
<!-- 详情将在这里动态生成 --> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -435,9 +466,9 @@ |
|
|
|
function showLogDetail(index) { |
|
|
|
const log = allLogsData[index]; |
|
|
|
if (!log) return; |
|
|
|
|
|
|
|
|
|
|
|
detailPlaceholder.classList.add('d-none'); |
|
|
|
|
|
|
|
|
|
|
|
const dataContent = (log.Data && Array.isArray(log.Data) && log.Data.length > 0) |
|
|
|
? log.Data.join('\n') |
|
|
|
: 'N/A'; |
|
|
|
@ -448,8 +479,8 @@ |
|
|
|
<div class="detail-item-value">${dataContent}</div> |
|
|
|
</div> |
|
|
|
`; |
|
|
|
|
|
|
|
detailContent.innerHTML = '<h4>日志详情</h4>' + detailHtml; |
|
|
|
|
|
|
|
detailContent.innerHTML = detailHtml; |
|
|
|
detailContent.classList.remove('d-none'); |
|
|
|
} |
|
|
|
|
|
|
|
|
