From 198129b4c2a5ca263d63c0b0cd7ca54a22252c05 Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Thu, 26 Mar 2026 17:29:30 +0800
Subject: [PATCH] feat(instanceDetails): replace API logs with WebSocket for
 real-time updates

Implement WebSocket connection for instance logs to enable real-time updates instead of periodic API polling. Remove deprecated API endpoints and update log display styling with level-specific backgrounds. Add cleanup on component unmount to prevent memory leaks.
---
 src/api/index.js             |  5 ---
 src/views/InstanceDetail.vue | 76 +++++++++++++++++++++++++++++++++---
 2 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index a116e8a..ca5ac38 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -86,8 +86,6 @@ export const instanceApi = {
         api.get(`/frpcAct/instanceMgr/getInfo?instanceID=${instanceID}`),
     getInstanceStatus: (instanceID) => 
         api.get(`/frpcAct/instanceMgr/status?instanceID=${instanceID}`),
-    getInstanceLogs: (instanceID) => 
-        api.post('/frpcAct/instanceMgr/logs', { instanceID }),
     getInstanceProxies: (instanceID) => 
         api.get(`/frpcAct/proxyMgr/list?instanceID=${instanceID}`),
     createProxy: (instanceID, proxyInfo) => 
@@ -109,9 +107,6 @@ export const systemInfoApi = {
 export default api;
 
 export const TODO_API_NOTES = {
-    instanceLogs: 'TODO: /frpcAct/instanceMgr/logs - 获取实例日志 API 未在 api-backend.md 中定义',
-    instanceProxies: 'TODO: /frpcAct/instanceMgr/proxies - 获取实例代理列表 API 未在 api-backend.md 中定义',
-    logList: 'TODO: /logMgr/list - 获取系统日志 API 未在 api-backend.md 中定义',
     monitorStats: 'TODO: /monitor/stats - 获取系统监控数据 API 未在 api-backend.md 中定义',
     systemInfo: 'TODO: /system/info - 获取系统信息 API 未在 api-backend.md 中定义'
 };
diff --git a/src/views/InstanceDetail.vue b/src/views/InstanceDetail.vue
index 0f2de73..0c00b08 100644
--- a/src/views/InstanceDetail.vue
+++ b/src/views/InstanceDetail.vue
@@ -272,7 +272,7 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { instanceApi } from '../api/index.js';
 import { showNotification, formatDate, getCookie } from '../utils/functions.js';
@@ -395,17 +395,64 @@ export default {
             }
         };
 
+        let logSocket = null;
+
+        const connectLogWebSocket = () => {
+            const token = getCookie('token');
+            const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const target = __APP_TARGET__;
+            const wsUrl = `${wsProtocol}//${target}/frpcAct/instanceMgr/logs?instanceID=${instanceID.value}&token=${token}`;
+
+            logSocket = new WebSocket(wsUrl);
+
+            logSocket.onopen = () => {
+                console.log(`Connected to instance ${instanceID.value} log server`);
+            };
+
+            logSocket.onmessage = (event) => {
+                try {
+                    const log = JSON.parse(event.data);
+                    logs.value.unshift({
+                        time: log.timestamp,
+                        level: log.level,
+                        message: log.content
+                    });
+                    if (logs.value.length > 100) {
+                        logs.value.pop();
+                    }
+                } catch (error) {
+                    console.error('Error parsing log message:', error);
+                }
+            };
+
+            logSocket.onclose = () => {
+                console.log(`Disconnected from instance ${instanceID.value} log server`);
+            };
+
+            logSocket.onerror = (error) => {
+                console.error('WebSocket error:', error);
+            };
+        };
+
+        const disconnectLogWebSocket = () => {
+            if (logSocket) {
+                logSocket.close();
+                logSocket = null;
+            }
+        };
+
         const loadLogs = async () => {
             try {
-                const result = await instanceApi.getInstanceLogs(instanceID.value);
-                logs.value = result.data.map(log => ({
+                const result = await instanceApi.getInstanceInfo(instanceID.value);
+                logs.value = result.data.logs ? result.data.logs.map(log => ({
                     time: formatDate(log.timestamp),
                     level: log.level,
-                    message: log.message
-                }));
+                    message: log.content
+                })) : [];
             } catch (error) {
                 showNotification('Load logs failed', 'error');
             }
+            connectLogWebSocket();
         };
 
         const goBack = () => {
@@ -524,6 +571,10 @@ export default {
             await loadLogs();
         });
 
+        onUnmounted(() => {
+            disconnectLogWebSocket();
+        });
+
         return {
             instanceID,
             instanceName,
@@ -647,18 +698,33 @@ export default {
 .log-level {
     min-width: 60px;
     font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.log-level.DEBUG {
+    color: #52c41a;
+    background: #f6ffed;
 }
 
 .log-level.INFO {
     color: #1890ff;
+    background: #e6f7ff;
 }
 
 .log-level.WARN {
     color: #faad14;
+    background: #fffbe6;
 }
 
 .log-level.ERROR {
     color: #ff4d4f;
+    background: #fff1f0;
+}
+
+.log-level.FATAL {
+    color: #cf1322;
+    background: #fff1f0;
 }
 
 .empty-state {