From bc26f13802090cf53f602346bb65affb24c31ca3 Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Sun, 30 Mar 2025 22:18:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20[=E6=97=A5=E5=BF=97=E7=AE=A1=E7=90=86sim?=
 =?UTF-8?q?ple]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/log-viewer.html | 128 +++++++++++++++++-----
 1 file changed, 101 insertions(+), 27 deletions(-)
diff --git a/src/main/resources/static/log-viewer.html b/src/main/resources/static/log-viewer.html
index 68d1138..c1977db 100644
--- a/src/main/resources/static/log-viewer.html
+++ b/src/main/resources/static/log-viewer.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>日志查看器</title>
+    <link rel="icon" href="data:,">
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -109,6 +110,25 @@
             min-width: 60px;
             text-align: center;
         }
+        
+        .log-message {
+            margin-bottom: 15px;
+            padding: 10px;
+            background: #fff;
+            border-radius: 4px;
+            border-left: 4px solid #2196f3;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+        
+        .error-message {
+            color: #721c24;
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 4px;
+        }
     </style>
 </head>
 <body>
@@ -131,14 +151,13 @@
     <template id="logTemplate">
         <div class="log-container">
             <div class="log-header">
-                <h1 class="log-title">日志详情</h1>
                 <div class="log-meta">
                     <div class="meta-item">
-                        <span class="meta-label">时间戳:</span>
+                        <span class="meta-label">时间:</span>
                         <span class="meta-value timestamp"></span>
                     </div>
                     <div class="meta-item">
-                        <span class="meta-label">日志级别:</span>
+                        <span class="meta-label">级别:</span>
                         <span class="meta-value">
                             <span class="level"></span>
                         </span>
@@ -163,31 +182,79 @@
         let currentPage = 1;
         
         async function loadLogs() {
-            const pageSize = document.getElementById('pageSize').value;
-            const response = await fetch(`/api/common/logs?page=${currentPage}&size=${pageSize}`);
-            const result = await response.json();
-            
-            const container = document.getElementById('logsContainer');
-            container.innerHTML = '';
-            
-            result.records.forEach(log => {
-                const template = document.getElementById('logTemplate');
-                const logElement = template.content.cloneNode(true);
+            try {
+                const pageSize = document.getElementById('pageSize').value;
+                const response = await fetch(`/api/common/logs?page=${currentPage}&size=${pageSize}`);
                 
-                // 填充基础信息
-                logElement.querySelector('.timestamp').textContent = log.timestamp;
-                logElement.querySelector('.level').textContent = log.level;
-                logElement.querySelector('.level').classList.add(`level-${log.level}`);
-                logElement.querySelector('.thread-name').textContent = log.threadName;
-                logElement.querySelector('.logger-name').textContent = log.loggerName;
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
                 
-                // 填充JSON数据
-                logElement.querySelector('.json-viewer').innerHTML = formatJSON(log);
+                const result = await response.json();
+                console.log('API Response:', result);
                 
-                container.appendChild(logElement);
-            });
-            
-            updatePageInfo(result.current, result.pages);
+                if (!result) {
+                    throw new Error('No data received from server');
+                }
+                
+                const container = document.getElementById('logsContainer');
+                container.innerHTML = '';
+                
+                // 确保 result.list 存在且是数组
+                const logs = Array.isArray(result.list) ? result.list : [];
+                
+                if (logs.length === 0) {
+                    container.innerHTML = '<div class="log-container"><p>没有找到日志数据</p></div>';
+                    return;
+                }
+                
+                logs.forEach(log => {
+                    if (!log) return; // 跳过空记录
+                    
+                    const template = document.getElementById('logTemplate');
+                    const logElement = template.content.cloneNode(true);
+                    
+                    try {
+                        // 填充基础信息
+                        const timestamp = log['@timestamp'] ? new Date(log['@timestamp']).toLocaleString() : 'N/A';
+                        logElement.querySelector('.timestamp').textContent = timestamp;
+                        
+                        const level = log.level || 'UNKNOWN';
+                        logElement.querySelector('.level').textContent = level;
+                        logElement.querySelector('.level').classList.add(`level-${level.toLowerCase()}`);
+                        
+                        logElement.querySelector('.thread-name').textContent = log.threadName || 'N/A';
+                        logElement.querySelector('.logger-name').textContent = log.loggerName || 'N/A';
+                        
+                        // 填充消息内容
+                        const messageElement = document.createElement('div');
+                        messageElement.className = 'log-message';
+                        messageElement.textContent = log.message || '';
+                        logElement.querySelector('.log-body').insertBefore(messageElement, logElement.querySelector('.json-viewer'));
+                        
+                        // 填充JSON数据
+                        logElement.querySelector('.json-viewer').innerHTML = formatJSON(log);
+                        
+                        container.appendChild(logElement);
+                    } catch (err) {
+                        console.error('Error processing log:', err, log);
+                    }
+                });
+                
+                // 更新分页信息
+                const pageNum = result.pageNum || 1;
+                const pages = result.pages || 1;
+                updatePageInfo(pageNum, pages);
+                
+            } catch (err) {
+                console.error('Error loading logs:', err);
+                const errorMessage = err.message.includes('401') 
+                    ? '访问未授权，请检查权限配置'
+                    : `加载日志时发生错误: ${err.message}`;
+                    
+                document.getElementById('logsContainer').innerHTML = 
+                    `<div class="log-container"><p class="error-message">${errorMessage}</p></div>`;
+            }
         }
         
         function prevPage() {
@@ -198,14 +265,19 @@
         }
         
         function nextPage() {
-            currentPage++;
-            loadLogs();
+            if (currentPage < totalPages) {
+                currentPage++;
+                loadLogs();
+            }
         }
         
         function updatePageInfo(current, total) {
             document.getElementById('pageInfo').textContent = `第${current}页/共${total}页`;
+            totalPages = total;
         }
         
+        let totalPages = 1;
+        
         // 格式化JSON显示
         function formatJSON(obj, indent = 0) {
             const space = '    '.repeat(indent);
@@ -216,6 +288,8 @@
                 html += isArray ? '[\n' : '{\n';
                 
                 Object.entries(obj).forEach(([key, value], index, array) => {
+                    if (value === null || value === undefined) return;
+                    
                     html += space + '    ';
                     if (!isArray) {
                         html += `<span class="json-key">"${key}"</span>: `;
