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/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 {