优化log显示效果

This commit is contained in:
liuwei
2025-05-28 17:13:03 +08:00
parent 920dee6265
commit 7be2dd256e

View File

@@ -38,11 +38,13 @@
<el-checkbox v-model="autoScroll" class="ml-4">自动滚动到底部</el-checkbox>
</div>
<div v-if="filteredLogs.length > 0" class="log-content">
{% raw %}
<div v-for="(log, index) in filteredLogs" :key="index" :class="['log-entry', `log-level-${log.level}`]">
<span class="log-timestamp">{{ formatTimestamp(log.timestamp) }}</span>
<span class="log-level" :class="{'text-blue-500': log.level === 'INFO', 'text-yellow-500': log.level === 'WARNING', 'text-red-500': log.level === 'ERROR'}">{{ log.level }}</span>
<span class="log-message">{{ log.message }}</span>
</div>
{% endraw %}
</div>
<div v-else class="empty-log">
<el-empty description="暂无日志内容"></el-empty>
@@ -101,15 +103,16 @@
this.filteredLogs = this.logContent;
} else {
const query = this.searchQuery.toLowerCase();
this.filteredLogs = this.logContent.filter(log =>
log.message.toLowerCase().includes(query) ||
log.level.toLowerCase().includes(query) ||
log.timestamp.toLowerCase().includes(query)
this.filteredLogs = this.logContent.filter(log =>
(log.message && log.message.toLowerCase().includes(query)) ||
(log.level && log.level.toLowerCase().includes(query)) ||
(log.timestamp && log.timestamp.toLowerCase().includes(query))
);
}
this.$nextTick(() => this.scrollToBottom());
},
formatTimestamp(timestamp) {
if (!timestamp) return '';
return new Date(timestamp).toLocaleString('zh-CN', {
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit'