style: optimize log display for more compact layout

- Move log message to same line as timestamp and level
- Reduce padding and font sizes for tighter spacing
- Optimize log data display with left border and indentation
- Add responsive design for mobile devices
- Achieve more compact display with fewer lines per log entry
This commit is contained in:
lilong.129
2025-06-08 09:34:13 +08:00
parent 5f7698c6b4
commit f2607f7664
2 changed files with 59 additions and 25 deletions

View File

@@ -1 +1 @@
v5.0.0-beta-2506080929 v5.0.0-beta-2506080934

View File

@@ -746,9 +746,10 @@ const htmlTemplate = `<!DOCTYPE html>
.log-entry { .log-entry {
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
padding: 8px 12px; padding: 4px 8px;
font-family: monospace; font-family: monospace;
font-size: 0.85em; font-size: 0.8em;
line-height: 1.2;
} }
.log-entry:last-child { .log-entry:last-child {
@@ -775,20 +776,25 @@ const htmlTemplate = `<!DOCTYPE html>
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin-bottom: 4px; margin-bottom: 2px;
flex-wrap: nowrap;
} }
.log-time { .log-time {
color: #6c757d; color: #6c757d;
font-size: 0.8em; font-size: 0.75em;
white-space: nowrap;
min-width: 180px;
} }
.log-level { .log-level {
padding: 2px 6px; padding: 1px 4px;
border-radius: 4px; border-radius: 3px;
font-size: 0.7em; font-size: 0.65em;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
min-width: 45px;
text-align: center;
} }
.log-level.debug { .log-level.debug {
@@ -813,19 +819,21 @@ const htmlTemplate = `<!DOCTYPE html>
.log-message { .log-message {
color: #495057; color: #495057;
margin-bottom: 4px;
word-wrap: break-word; word-wrap: break-word;
flex: 1;
margin-left: 10px;
} }
.log-data { .log-data {
background: #e9ecef; background: #f8f9fa;
border: 1px solid #dee2e6; border-left: 3px solid #dee2e6;
border-radius: 4px; padding: 2px 6px;
padding: 4px 6px; margin: 2px 0 2px 195px;
font-size: 0.8em; font-size: 0.75em;
color: #6c757d; color: #6c757d;
max-height: 100px; max-height: 80px;
overflow-y: auto; overflow-y: auto;
word-break: break-all;
} }
.controls { .controls {
@@ -931,6 +939,32 @@ const htmlTemplate = `<!DOCTYPE html>
.screenshot-item.small .screenshot-image img { .screenshot-item.small .screenshot-image img {
max-height: 150px; max-height: 150px;
} }
.log-header {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.log-time {
min-width: auto;
font-size: 0.7em;
}
.log-level {
min-width: 35px;
font-size: 0.6em;
}
.log-message {
margin-left: 0;
font-size: 0.75em;
}
.log-data {
margin-left: 10px;
font-size: 0.7em;
}
} }
</style> </style>
</head> </head>
@@ -1143,16 +1177,16 @@ const htmlTemplate = `<!DOCTYPE html>
<h4>📋 Step Logs</h4> <h4>📋 Step Logs</h4>
<div class="logs-container"> <div class="logs-container">
{{range $logEntry := $stepLogs}} {{range $logEntry := $stepLogs}}
<div class="log-entry {{$logEntry.Level}}"> <div class="log-entry {{$logEntry.Level}}">
<div class="log-header"> <div class="log-header">
<span class="log-time">{{$logEntry.Time}}</span> <span class="log-time">{{$logEntry.Time}}</span>
<span class="log-level {{$logEntry.Level}}">{{$logEntry.Level}}</span> <span class="log-level {{$logEntry.Level}}">{{$logEntry.Level}}</span>
</div> <span class="log-message">{{$logEntry.Message}}</span>
<div class="log-message">{{$logEntry.Message}}</div> </div>
{{if $logEntry.Data}} {{if $logEntry.Data}}
<div class="log-data">{{safeHTML (toJSON $logEntry.Data)}}</div> <div class="log-data">{{safeHTML (toJSON $logEntry.Data)}}</div>
{{end}} {{end}}
</div> </div>
{{end}} {{end}}
</div> </div>
</div> </div>