优化log显示效果

This commit is contained in:
liuwei
2025-05-28 17:26:09 +08:00
parent 5f7dd71b64
commit 3062f0d6e7

View File

@@ -3,7 +3,7 @@
{% block title %}微信日志查看{% endblock %} {% block title %}微信日志查看{% endblock %}
{% block content %} {% block content %}
<div> <div class="log-page-container">
<el-card class="log-card"> <el-card class="log-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>日志查看</span> <span>日志查看</span>
@@ -28,7 +28,7 @@
<el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button> <el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button>
</div> </div>
<div v-loading="loading"> <div v-loading="loading" class="log-content-wrapper">
<div v-if="logContent && logContent.length > 0" class="log-content"> <div v-if="logContent && logContent.length > 0" class="log-content">
<pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre> <pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre>
</div> </div>
@@ -51,9 +51,10 @@
logType: 'info', logType: 'info',
logLines: 100, logLines: 100,
logContent: [], logContent: [],
refreshInterval: 0, // 新增定时刷新间隔0为不自动刷新 refreshInterval: 0,
refreshTimer: null, // 新增,定时器句柄 refreshTimer: null,
currentView: '9' // 设置当前菜单项 currentView: '9',
showTimeRangeSelector: false // 禁用时间范围选择器
} }
}, },
mounted() { mounted() {
@@ -69,7 +70,6 @@
.then(response => { .then(response => {
if (response.data.success) { if (response.data.success) {
this.logContent = response.data.data.content || []; this.logContent = response.data.data.content || [];
// 日志内容更新后自动滚动到底部
this.$nextTick(() => { this.$nextTick(() => {
const logDiv = this.$el.querySelector('.log-content'); const logDiv = this.$el.querySelector('.log-content');
if (logDiv) { if (logDiv) {
@@ -107,17 +107,32 @@
</script> </script>
<style> <style>
.log-page-container {
height: 100%;
display: flex;
flex-direction: column;
}
.log-card { .log-card {
margin-bottom: 20px; flex: 1;
display: flex;
flex-direction: column;
margin: 0;
}
.log-content-wrapper {
flex: 1;
overflow: hidden;
} }
.log-content { .log-content {
max-height: 700px; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box;
} }
.log-content pre { .log-content pre {
@@ -129,7 +144,10 @@
} }
.empty-log { .empty-log {
padding: 40px 0; height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
</style> </style>
{% endblock %} {% endblock %}