优化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> <el-checkbox v-model="autoScroll" class="ml-4">自动滚动到底部</el-checkbox>
</div> </div>
<div v-if="filteredLogs.length > 0" class="log-content"> <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}`]"> <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-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-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> <span class="log-message">{{ log.message }}</span>
</div> </div>
{% endraw %}
</div> </div>
<div v-else class="empty-log"> <div v-else class="empty-log">
<el-empty description="暂无日志内容"></el-empty> <el-empty description="暂无日志内容"></el-empty>
@@ -102,14 +104,15 @@
} else { } else {
const query = this.searchQuery.toLowerCase(); const query = this.searchQuery.toLowerCase();
this.filteredLogs = this.logContent.filter(log => this.filteredLogs = this.logContent.filter(log =>
log.message.toLowerCase().includes(query) || (log.message && log.message.toLowerCase().includes(query)) ||
log.level.toLowerCase().includes(query) || (log.level && log.level.toLowerCase().includes(query)) ||
log.timestamp.toLowerCase().includes(query) (log.timestamp && log.timestamp.toLowerCase().includes(query))
); );
} }
this.$nextTick(() => this.scrollToBottom()); this.$nextTick(() => this.scrollToBottom());
}, },
formatTimestamp(timestamp) { formatTimestamp(timestamp) {
if (!timestamp) return '';
return new Date(timestamp).toLocaleString('zh-CN', { return new Date(timestamp).toLocaleString('zh-CN', {
year: 'numeric', month: '2-digit', day: '2-digit', year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit' hour: '2-digit', minute: '2-digit', second: '2-digit'