优化日志读取与传输效率

admin/dashboard/templates/wx_logs.html

@@ -30,7 +30,7 @@
 
         <div v-loading="loading" class="log-content-wrapper">
             <div v-if="logContent && logContent.length > 0" class="log-content">
-                <pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre>
+                <pre ref="logPre"></pre>
             </div>
             <div v-else class="empty-log">
                 <el-empty description="暂无日志内容"></el-empty>
@@ -51,30 +51,60 @@
                 logType: 'info',
                 logLines: 100,
                 logContent: [],
+                logText: '',
                 refreshInterval: 0,
                 refreshTimer: null,
                 currentView: '9',
-                showTimeRangeSelector: false
+                showTimeRangeSelector: false,
+                cancelSource: null,
+                isAutoScroll: true
             }
         },
         mounted() {
             this.loadLogs();
+            this.$nextTick(() => {
+                const logDiv = this.$el.querySelector('.log-content');
+                if (logDiv) {
+                    logDiv.addEventListener('scroll', () => {
+                        const nearBottom = (logDiv.scrollHeight - logDiv.scrollTop - logDiv.clientHeight) < 50;
+                        this.isAutoScroll = nearBottom;
+                    });
+                }
+            });
         },
         beforeDestroy() {
             this.clearRefreshTimer();
+            if (this.cancelSource) {
+                this.cancelSource.cancel('component destroyed');
+                this.cancelSource = null;
+            }
         },
         methods: {
             loadLogs() {
                 this.loading = true;
-                axios.get(`/api/wx_logs?type=${this.logType}&lines=${this.logLines}`)
+                if (this.cancelSource) {
+                    this.cancelSource.cancel('new request');
+                }
+                this.cancelSource = axios.CancelToken.source();
+                axios.get(`/api/wx_logs`, {
+                    params: { type: this.logType, lines: this.logLines },
+                    headers: { 'Accept-Encoding': 'gzip' },
+                    cancelToken: this.cancelSource.token
+                })
                     .then(response => {
                         if (response.data.success) {
                             this.logContent = response.data.data.content || [];
+                            this.logText = this.logContent.join('');
                             this.$nextTick(() => {
                                 const logDiv = this.$el.querySelector('.log-content');
+                                const pre = this.$refs.logPre;
+                                if (pre) {
+                                    pre.textContent = this.logText;
+                                }
                                 if (logDiv) {
-                                    logDiv.scrollTop = logDiv.scrollHeight;
-                                    console.log('log-content scrollHeight:', logDiv.scrollHeight, 'clientHeight:', logDiv.clientHeight);
+                                    if (this.isAutoScroll) {
+                                        logDiv.scrollTop = logDiv.scrollHeight;
+                                    }
                                 }
                             });
                         } else {
@@ -82,8 +112,10 @@
                         }
                     })
                     .catch(error => {
-                        console.error('加载日志出错:', error);
-                        this.$message.error('加载日志出错');
+                        if (!axios.isCancel(error)) {
+                            console.error('加载日志出错:', error);
+                            this.$message.error('加载日志出错');
+                        }
                     })
                     .finally(() => {
                         this.loading = false;
@@ -163,4 +195,4 @@
         overflow: hidden;
     }
 </style>
-{% endblock %}
+{% endblock %}