优化log显示效果
This commit is contained in:
@@ -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'
|
||||||
|
|||||||
Reference in New Issue
Block a user