feat(tunnels): 优化日志处理和显示

- 移除 ANSI 转义字符，保留颜色代码
- 增加日志对象格式支持，包含时间信息
- 优化日志渲染逻辑，处理不同格式的日志数据
- 更新 footer 版权信息
- 修正 GitHub 链接

Author: yangtao

README.md

@@ -1,6 +1,6 @@
 # 🚀 NodePass WebUI
 
-![Version](https://img.shields.io/badge/version-1.2.1-blue.svg)
+![Version](https://img.shields.io/badge/version-1.2.2-blue.svg)
 
 一个现代化的 NodePass 管理界面，基于 Next.js 14、HeroUI 和 TypeScript 构建。提供实时隧道监控、流量统计和端点管理功能。
 

app/api/tunnels/[id]/details/route.ts

@@ -17,6 +17,9 @@ const processAnsiColors = (text: string) => {
     // 移除时间戳前缀（如果存在）
     text = text.replace(/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\.\d{3}\s/, '');
 
+    // 只移除 \u001B 字符，保留后面的颜色代码
+    text = text.replace(/\u001B/g, ''); // 只移除 ESC 字符，保留 [32m 等
+    
     // 将 ANSI 颜色代码转换为 HTML span 标签
     const colorMap = new Map([
       [/\[32m/g, '<span class="text-green-400">'],
@@ -91,7 +94,9 @@ export async function GET(
       },
       take: 200, // 获取最近200条日志
       select: {
-        logs: true
+        logs: true,
+        eventTime: true,
+        createdAt: true
       }
     }) : [];
 
@@ -162,10 +167,21 @@ export async function GET(
       commandLine: tunnel.commandLine
     };
 
-    // 6. 处理日志数据 - 应用ANSI颜色处理
+    // 6. 处理日志数据 - 应用ANSI颜色处理，保留时间信息
     const logs = logRecords
       .filter(record => record.logs && record.logs.trim()) // 过滤空日志
-      .map(log => processAnsiColors(log.logs || '')); // 处理ANSI颜色并返回字符串
+      .map((record, index) => ({
+        id: index + 1,
+        message: processAnsiColors(record.logs || ''),
+        isHtml: true,
+        traffic: {
+          tcpRx: 0,
+          tcpTx: 0,
+          udpRx: 0,
+          udpTx: 0
+        },
+        timestamp: record.eventTime || record.createdAt // 使用事件时间或创建时间
+      }));
 
     return NextResponse.json({
       tunnelInfo,

app/api/tunnels/[id]/logs/route.ts

@@ -80,6 +80,9 @@ export async function GET(
         // 移除时间戳前缀（如果存在）
         text = text.replace(/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\.\d{3}\s/, '');
 
+        // 只移除 \u001B 字符，保留后面的颜色代码
+        text = text.replace(/\u001B/g, ''); // 只移除 ESC 字符，保留 [32m 等
+        
         // 将 ANSI 颜色代码转换为对象
         const colorMap = new Map([
           [/\[32m/g, '<span class="text-green-400">'],

app/client-layout.tsx

@@ -8,6 +8,7 @@ import { usePathname } from 'next/navigation';
 import { AuthProvider } from "./components/auth-provider";
 import { RouteGuard } from "./components/route-guard";
 import { Navbar } from "@/components/layout/navbar";
+import pkg from '../package.json';
 
 export function ClientLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
@@ -29,15 +30,9 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
               {children}
             </main>
             <footer className="w-full flex items-center justify-center py-3">
-              {/* <Link
-                isExternal
-                className="flex items-center gap-1 text-current"
-                href="https://heroui.com?utm_source=next-app-template"
-                title="heroui.com homepage"
-              >
-                <span className="text-default-600">Powered by</span>
-                <p className="text-primary">HeroUI</p>
-              </Link> */}
+              <div className="text-default-600 text-sm">
+              NodePass管理 © 2025 | v{pkg.version} | 由 <a href="https://github.com/yosebyte/nodepass" target="_blank" className="text-blue-500 hover:text-blue-600">NodePass</a> 驱动
+              </div>
             </footer>
           </div>
         )}

app/tunnels/[id]/page.tsx

@@ -34,16 +34,19 @@ const processAnsiColors = (text: string) => {
     // 移除时间戳前缀（如果存在）
     text = text.replace(/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\.\d{3}\s/, '');
 
+    // 只移除 \u001B 字符，保留后面的颜色代码
+    text = text.replace(/\u001B/g, ''); // 只移除 ESC 字符，保留 [32m 等
+    
     // 将 ANSI 颜色代码转换为 HTML span 标签
     const colorMap = new Map([
-      [/\[32m/g, '<span class="text-green-400">'],
-      [/\[31m/g, '<span class="text-red-400">'],
-      [/\[33m/g, '<span class="text-yellow-400">'],
-      [/\[34m/g, '<span class="text-blue-400">'],
-      [/\[35m/g, '<span class="text-purple-400">'],
-      [/\[36m/g, '<span class="text-cyan-400">'],
-      [/\[37m/g, '<span class="text-gray-400">'],
-      [/\[0m/g, '</span>']
+      [/\[32m/g, '<span class="text-green-400">'],   // INFO - 绿色
+      [/\[31m/g, '<span class="text-red-400">'],     // ERROR - 红色
+      [/\[33m/g, '<span class="text-yellow-400">'],  // WARN - 黄色
+      [/\[34m/g, '<span class="text-blue-400">'],    // DEBUG - 蓝色
+      [/\[35m/g, '<span class="text-purple-400">'],  // 紫色
+      [/\[36m/g, '<span class="text-cyan-400">'],    // 青色
+      [/\[37m/g, '<span class="text-gray-400">'],    // 灰色
+      [/\[0m/g, '</span>']                           // 结束标签
     ]);
 
     // 替换颜色代码
@@ -55,15 +58,16 @@ const processAnsiColors = (text: string) => {
     const openTags = (text.match(/<span/g) || []).length;
     const closeTags = (text.match(/<\/span>/g) || []).length;
 
-    // 如果开标签比闭标签多，添加缺少的闭标签
+    // 如果开始标签多于结束标签，添加结束标签
     if (openTags > closeTags) {
-      text += '</span>'.repeat(openTags - closeTags);
+      const missingCloseTags = openTags - closeTags;
+      text += '</span>'.repeat(missingCloseTags);
     }
 
     return text;
   } catch (error) {
-    console.error('处理日志颜色失败:', error);
-    return text; // 如果处理失败，返回原始文本
+    console.error('处理ANSI颜色失败:', error);
+    return text;
   }
 };
 
@@ -383,23 +387,31 @@ export default function TunnelDetailPage({ params }: { params: Promise<PageParam
         完整数据: JSON.stringify(data.tunnelInfo, null, 2)
       });
 
-      // 设置历史日志 - 处理字符串数组格式，启用HTML渲染
+      // 设置历史日志 - 处理带时间信息的日志对象
       if (data.logs && Array.isArray(data.logs)) {
         // 初始化计数器为历史日志的数量，确保新日志ID不会与历史日志冲突
         logCounterRef.current = data.logs.length;
-        const formattedLogs = data.logs.map((message: string, index: number) => ({
-          id: index + 1, // 从1开始计数，避免0值
-          message,
-          isHtml: true, // 启用HTML格式渲染
-          traffic: {
-            tcpRx: 0,
-            tcpTx: 0,
-            udpRx: 0,
-            udpTx: 0
-          },
-          timestamp: new Date() // 使用当前时间作为占位符
-        }));
-        setLogs(formattedLogs);
+        
+        // 检查日志数据格式
+        if (data.logs.length > 0 && typeof data.logs[0] === 'object') {
+          // 新格式：对象数组，包含时间信息
+          setLogs(data.logs);
+        } else {
+          // 旧格式：字符串数组，需要转换
+          const formattedLogs = data.logs.map((message: string, index: number) => ({
+            id: index + 1,
+            message,
+            isHtml: true,
+            traffic: {
+              tcpRx: 0,
+              tcpTx: 0,
+              udpRx: 0,
+              udpTx: 0
+            },
+            timestamp: new Date() // 使用当前时间作为占位符
+          }));
+          setLogs(formattedLogs);
+        }
 
         // 稍微延迟滚动，确保DOM更新完成
         setTimeout(scrollToBottom, 100);

components/layout/navbar-social.tsx

@@ -13,7 +13,7 @@ const socialLinks = [
     key: "github",
     label: "Github",
     icon: "mdi:github",
-    href: "https://github.com/yosebyte/nodepass",
+    href: "https://github.com/Mecozea/nodepass-webui",
     target: "_blank",
   },
   {

docs/DOCKER.md

@@ -115,7 +115,7 @@ volumes:
 docker pull ghcr.io/mecozea/nodepass-webui:latest
 
 # 特定版本
-docker pull ghcr.io/mecozea/nodepass-webui:v1.2.1
+docker pull ghcr.io/mecozea/nodepass-webui:v1.2.2
 ```
 
 ## 🐛 故障排除

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodepass-webui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": true,
   "scripts": {
     "dev": "tsx server.ts",