From 920dee6265d102d01423cfc503ba86f2839fd5c7 Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Wed, 28 May 2025 17:10:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96log=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/dashboard/templates/wx_logs.html | 208 ++++++++++++++++---------
 1 file changed, 134 insertions(+), 74 deletions(-)

diff --git a/admin/dashboard/templates/wx_logs.html b/admin/dashboard/templates/wx_logs.html
index e8a6d95..4fb0687 100644
--- a/admin/dashboard/templates/wx_logs.html
+++ b/admin/dashboard/templates/wx_logs.html
@@ -5,32 +5,44 @@
 {% block content %}
 <div>
     <el-card class="log-card">
-        <div slot="header" class="clearfix">
-            <span>日志查看</span>
-            <el-radio-group v-model="logType" size="small" style="margin-left: 20px;" @change="loadLogs">
-                <el-radio-button label="info">信息日志</el-radio-button>
-                <el-radio-button label="error">错误日志</el-radio-button>
-                <el-radio-button label="debug">调试日志</el-radio-button>
-            </el-radio-group>
-            <el-select v-model="logLines" size="small" style="margin-left: 20px;" @change="loadLogs">
-                <el-option label="最近100行" :value="100"></el-option>
-                <el-option label="最近500行" :value="500"></el-option>
-                <el-option label="最近1000行" :value="1000"></el-option>
-            </el-select>
-            <el-select v-model="refreshInterval" size="small" style="margin-left: 20px; width: 100px;" @change="handleRefreshInterval">
-                <el-option label="手动" :value="0"></el-option>
-                <el-option label="1秒" :value="1"></el-option>
-                <el-option label="3秒" :value="3"></el-option>
-                <el-option label="5秒" :value="5"></el-option>
-                <el-option label="10秒" :value="10"></el-option>
-                <el-option label="60秒" :value="60"></el-option>
-            </el-select>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button>
-        </div>
+        <template slot="header">
+            <div class="flex items-center justify-between">
+                <span class="text-lg font-semibold">日志查看</span>
+                <div class="flex items-center space-x-4">
+                    <el-radio-group v-model="logType" size="small" @change="loadLogs">
+                        <el-radio-button label="info">信息日志</el-radio-button>
+                        <el-radio-button label="error">错误日志</el-radio-button>
+                        <el-radio-button label="debug">调试日志</el-radio-button>
+                    </el-radio-group>
+                    <el-select v-model="logLines" size="small" @change="loadLogs">
+                        <el-option label="最近100行" :value="100"></el-option>
+                        <el-option label="最近500行" :value="500"></el-option>
+                        <el-option label="最近1000行" :value="1000"></el-option>
+                    </el-select>
+                    <el-select v-model="refreshInterval" size="small" style="width: 100px;" @change="handleRefreshInterval">
+                        <el-option label="手动" :value="0"></el-option>
+                        <el-option label="1秒" :value="1"></el-option>
+                        <el-option label="3秒" :value="3"></el-option>
+                        <el-option label="5秒" :value="5"></el-option>
+                        <el-option label="10秒" :value="10"></el-option>
+                        <el-option label="60秒" :value="60"></el-option>
+                    </el-select>
+                    <el-button size="small" type="primary" @click="loadLogs">刷新</el-button>
+                </div>
+            </div>
+        </template>
         
-        <div v-loading="loading">
-            <div v-if="logContent && logContent.length > 0" class="log-content">
-                <pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre>
+        <div v-loading="loading" class="relative">
+            <div class="mb-4 flex items-center">
+                <el-input v-model="searchQuery" placeholder="搜索日志内容" clearable @input="filterLogs" size="small" style="width: 300px;"></el-input>
+                <el-checkbox v-model="autoScroll" class="ml-4">自动滚动到底部</el-checkbox>
+            </div>
+            <div v-if="filteredLogs.length > 0" class="log-content">
+                <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>
             </div>
             <div v-else class="empty-log">
                 <el-empty description="暂无日志内容"></el-empty>
@@ -51,9 +63,12 @@
                 logType: 'info',
                 logLines: 100,
                 logContent: [],
-                refreshInterval: 0, // 新增，定时刷新间隔（秒），0为不自动刷新
-                refreshTimer: null, // 新增，定时器句柄
-                currentView: '9' // 设置当前菜单项
+                filteredLogs: [],
+                searchQuery: '',
+                autoScroll: true,
+                refreshInterval: 0,
+                refreshTimer: null,
+                currentView: '9'
             }
         },
         mounted() {
@@ -63,30 +78,52 @@
             this.clearRefreshTimer();
         },
         methods: {
-            loadLogs() {
+            async loadLogs() {
                 this.loading = true;
-                axios.get(`/api/wx_logs?type=${this.logType}&lines=${this.logLines}`)
-                    .then(response => {
-                        if (response.data.success) {
-                            this.logContent = response.data.data.content || [];
-                            // 日志内容更新后自动滚动到底部
-                            this.$nextTick(() => {
-                                const logDiv = this.$el.querySelector('.log-content');
-                                if (logDiv) {
-                                    logDiv.scrollTop = logDiv.scrollHeight;
-                                }
-                            });
-                        } else {
-                            this.$message.error('加载日志失败');
+                try {
+                    const response = await axios.get(`/api/wx_logs?type=${this.logType}&lines=${this.logLines}`);
+                    if (response.data.success) {
+                        this.logContent = response.data.data.content || [];
+                        this.filterLogs();
+                        this.scrollToBottom();
+                    } else {
+                        this.$message.error('加载日志失败');
+                    }
+                } catch (error) {
+                    console.error('加载日志出错:', error);
+                    this.$message.error('加载日志出错');
+                } finally {
+                    this.loading = false;
+                }
+            },
+            filterLogs() {
+                if (!this.searchQuery) {
+                    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.$nextTick(() => this.scrollToBottom());
+            },
+            formatTimestamp(timestamp) {
+                return new Date(timestamp).toLocaleString('zh-CN', { 
+                    year: 'numeric', month: '2-digit', day: '2-digit', 
+                    hour: '2-digit', minute: '2-digit', second: '2-digit' 
+                });
+            },
+            scrollToBottom() {
+                if (this.autoScroll) {
+                    this.$nextTick(() => {
+                        const logDiv = this.$el.querySelector('.log-content');
+                        if (logDiv) {
+                            logDiv.scrollTop = logDiv.scrollHeight;
                         }
-                    })
-                    .catch(error => {
-                        console.error('加载日志出错:', error);
-                        this.$message.error('加载日志出错');
-                    })
-                    .finally(() => {
-                        this.loading = false;
                     });
+                }
             },
             handleRefreshInterval() {
                 this.clearRefreshTimer();
@@ -106,30 +143,53 @@
     });
 </script>
 
-<style>
-    .log-card {
-        margin-bottom: 20px;
-    }
-    
-    .log-content {
-        max-height: 700px;
-        overflow-y: auto;
-        overflow-x: auto;
-        background-color: #f5f5f5;
-        padding: 10px;
-        border-radius: 4px;
-    }
-    
-    .log-content pre {
-        margin: 0;
-        white-space: pre;
-        word-break: normal;
-        word-wrap: normal;
-        font-family: monospace;
-    }
-    
-    .empty-log {
-        padding: 40px 0;
-    }
+<style scoped>
+.log-card {
+    margin: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.log-content {
+    max-height: 600px;
+    overflow-y: auto;
+    background-color: #f8fafc;
+    padding: 16px;
+    border-radius: 4px;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+.log-entry {
+    display: flex;
+    padding: 8px 0;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.log-timestamp {
+    flex: 0 0 180px;
+    color: #6b7280;
+    font-size: 0.9rem;
+}
+
+.log-level {
+    flex: 0 0 100px;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.log-message {
+    flex: 1;
+    word-break: break-all;
+    font-size: 0.9rem;
+}
+
+.log-level-INFO { background-color: #e6f3ff; }
+.log-level-WARNING { background-color: #fefcbf; }
+.log-level-ERROR { background-color: #fee2e2; }
+
+.empty-log {
+    padding: 40px 0;
+    text-align: center;
+}
 </style>
 {% endblock %}
\ No newline at end of file