fix: 修复内存泄漏、焦点陷阱、语音命令误触发、WebSocket 异常处理等 5 项 bug

shijiashuai · shijiashuai · commit 825cf9ff9b80 · 2026-04-13T19:13:09.000+08:00
- DigitalHumanViewer 新增 useEffect 清理 GLTF 场景资源（geometry/material dispose）
- useFocusTrap 接受 focusKey 参数，SettingsDrawer 切换 tab 时重新聚焦首个元素
- ASRService 本地命令改为精确匹配（trim + 完整词），避免"你好"等常用词误触发
- wsClient connect() 保存 resolve/reject 引用，disconnect 时主动拒绝 pending Promise
- chatTransport WebSocket 流将
diff --git a/src/components/DigitalHumanViewer.tsx b/src/components/DigitalHumanViewer.tsx
@@ -313,6 +313,24 @@ export default function DigitalHumanViewer({
     };
   }, [modelUrl]);
 
+  // Dispose old GLTF scene resources when modelScene is replaced
+  useEffect(() => {
+    return () => {
+      modelScene?.traverse((child) => {
+        if ((child as THREE.Mesh).isMesh) {
+          const mesh = child as THREE.Mesh;
+          mesh.geometry.dispose();
+          const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+          materials.forEach((mat) => {
+            if (mat instanceof THREE.Material) {
+              mat.dispose();
+            }
+          });
+        }
+      });
+    };
+  }, [modelScene]);
+
   return (
     <div className="w-full h-full bg-transparent space-y-4" role="img" aria-label="3D数字人模型">
       <Canvas shadows dpr={[1, 2]}>
diff --git a/src/components/SettingsDrawer.tsx b/src/components/SettingsDrawer.tsx
@@ -51,7 +51,7 @@ export default function SettingsDrawer({
   const currentExpression = useDigitalHumanStore((s) => s.currentExpression);
   const currentBehavior = useDigitalHumanStore((s) => s.currentBehavior);
 
-  const drawerRef = useFocusTrap<HTMLDivElement>(show);
+  const drawerRef = useFocusTrap<HTMLDivElement>(show, activeTab);
   const { toggleTheme, isDark } = useTheme();
 
   return (
diff --git a/src/core/audio/audioService.ts b/src/core/audio/audioService.ts
@@ -509,44 +509,44 @@ export class ASRService {
 
   // 尝试执行本地命令，返回是否匹配到命令
   private tryLocalCommand(command: string): boolean {
-    const lowerCommand = command.toLowerCase();
+    const trimmed = command.trim().toLowerCase();
 
-    // 系统控制命令
-    if (lowerCommand.includes('播放') || lowerCommand.includes('开始')) {
+    // System control commands — exact match only
+    if (trimmed === '播放' || trimmed === '开始') {
       this.state.play();
       return true;
     }
-    if (lowerCommand.includes('暂停') || lowerCommand.includes('停止')) {
+    if (trimmed === '暂停' || trimmed === '停止') {
       this.state.pause();
       return true;
     }
-    if (lowerCommand.includes('重置') || lowerCommand.includes('复位')) {
+    if (trimmed === '重置' || trimmed === '复位') {
       this.state.reset();
       return true;
     }
-    if (lowerCommand.includes('取消静音')) {
+    if (trimmed === '取消静音') {
       this.state.setMuted(false);
       return true;
     }
-    if (lowerCommand.includes('静音')) {
+    if (trimmed === '静音') {
       this.state.setMuted(true);
       return true;
     }
 
-    // 快捷动作命令
-    if (lowerCommand.includes('打招呼') || lowerCommand.includes('问好') || lowerCommand.includes('你好')) {
+    // Quick action commands — exact match only
+    if (trimmed === '打招呼' || trimmed === '问好') {
       this.performGreeting();
       return true;
     }
-    if (lowerCommand.includes('跳舞')) {
+    if (trimmed === '跳舞') {
       this.performDance();
       return true;
     }
-    if (lowerCommand.includes('点头')) {
+    if (trimmed === '点头') {
       this.performNod();
       return true;
     }
-    if (lowerCommand.includes('摇头')) {
+    if (trimmed === '摇头') {
       this.performShakeHead();
       return true;
     }
diff --git a/src/core/dialogue/chatTransport.ts b/src/core/dialogue/chatTransport.ts
@@ -162,6 +162,40 @@ async function* streamOverWebSocket(
         pendingResolver = resolve;
       });
     }
+
+    // Build return value from terminal event or accumulated text
+    if (terminalEvent?.type === 'done') {
+      return {
+        response: {
+          replyText: terminalEvent.replyText,
+          emotion: terminalEvent.emotion as ChatResponsePayload['emotion'],
+          action: terminalEvent.action,
+        },
+        connectionStatus: 'connected',
+        error: null,
+      };
+    }
+
+    if (accumulatedText) {
+      return {
+        response: {
+          replyText: accumulatedText,
+          emotion: 'neutral',
+          action: 'idle',
+        },
+        connectionStatus: 'error',
+        error: terminalEvent?.type === 'error' ? terminalEvent.message : 'WebSocket 流中断',
+      };
+    }
+
+    // No tokens received and no terminal event — HTTP fallback
+    const fallback = await sendUserInput(payload, config);
+
+    if (fallback.response.replyText) {
+      yield fallback.response.replyText;
+    }
+
+    return fallback;
   } catch (error) {
     console.warn('WebSocket 请求失败，降级到 HTTP:', error);
     const fallback = await sendUserInput(payload, config);
@@ -177,38 +211,6 @@ async function* streamOverWebSocket(
     }
     client.disconnect();
   }
-
-  if (terminalEvent?.type === 'done') {
-    return {
-      response: {
-        replyText: terminalEvent.replyText,
-        emotion: terminalEvent.emotion as ChatResponsePayload['emotion'],
-        action: terminalEvent.action,
-      },
-      connectionStatus: 'connected',
-      error: null,
-    };
-  }
-
-  if (accumulatedText) {
-    return {
-      response: {
-        replyText: accumulatedText,
-        emotion: 'neutral',
-        action: 'idle',
-      },
-      connectionStatus: 'error',
-      error: terminalEvent?.type === 'error' ? terminalEvent.message : 'WebSocket 流中断',
-    };
-  }
-
-  const fallback = await sendUserInput(payload, config);
-
-  if (fallback.response.replyText) {
-    yield fallback.response.replyText;
-  }
-
-  return fallback;
 }
 
 export const webSocketChatTransport: ChatTransport = {
diff --git a/src/core/dialogue/dialogueOrchestrator.ts b/src/core/dialogue/dialogueOrchestrator.ts
@@ -190,7 +190,7 @@ export async function runDialogueTurnStream(
       await handleDialogueResponse(result.response, {
         isMuted,
         speakWith,
-        onAddAssistantMessage: undefined,
+        onAddAssistantMessage: options.onAddAssistantMessage,
         onError,
       });
 
diff --git a/src/core/dialogue/wsClient.ts b/src/core/dialogue/wsClient.ts
@@ -67,6 +67,8 @@ export class MetaHumanWSClient {
   private messageHandler: WSMessageHandler | null = null;
   private reconnectAttempts = 0;
   private maxReconnectAttempts = 5;
+  private resolveConnect: (() => void) | null = null;
+  private rejectConnect: ((reason?: unknown) => void) | null = null;
 
   constructor(sessionId: string) {
     this.sessionId = sessionId;
@@ -75,11 +77,15 @@ export class MetaHumanWSClient {
   connect(onMessage: WSMessageHandler): Promise<void> {
     return new Promise((resolve, reject) => {
       this.messageHandler = onMessage;
+      this.resolveConnect = resolve;
+      this.rejectConnect = reject;
       const url = getWebSocketUrl(this.sessionId);
       this.ws = new WebSocket(url);
 
       this.ws.onopen = () => {
         this.reconnectAttempts = 0;
+        this.resolveConnect = null;
+        this.rejectConnect = null;
         resolve();
       };
 
@@ -92,7 +98,11 @@ export class MetaHumanWSClient {
         }
       };
 
-      this.ws.onerror = (event) => reject(event);
+      this.ws.onerror = (event) => {
+        this.resolveConnect = null;
+        this.rejectConnect = null;
+        reject(event);
+      };
 
       this.ws.onclose = () => this.attemptReconnect();
     });
@@ -106,6 +116,11 @@ export class MetaHumanWSClient {
 
   disconnect(): void {
     this.reconnectAttempts = this.maxReconnectAttempts;
+    if (this.rejectConnect) {
+      this.rejectConnect(new Error('WebSocket disconnected'));
+      this.rejectConnect = null;
+      this.resolveConnect = null;
+    }
     this.ws?.close();
     this.ws = null;
   }
diff --git a/src/hooks/useChatStream.ts b/src/hooks/useChatStream.ts
@@ -22,14 +22,16 @@ export function useChatStream(options: UseChatStreamOptions) {
   const startChatPerformanceTrace = useSystemStore((s) => s.startChatPerformanceTrace);
   const markChatFirstToken = useSystemStore((s) => s.markChatFirstToken);
   const finalizeChatPerformanceTrace = useSystemStore((s) => s.finalizeChatPerformanceTrace);
+  const setLoading = useSystemStore((s) => s.setLoading);
+  const isLoading = useSystemStore((s) => s.isLoading);
   const [chatInput, setChatInput] = useState('');
-  const [isChatLoading, setIsChatLoading] = useState(false);
   const { sessionId, isMuted, onConnectionChange, onClearError, onError } = options;
 
   const handleChatSend = useCallback(
     async (text?: string) => {
       const content = (text ?? chatInput).trim();
-      if (!content || isChatLoading) return;
+      if (!content) return;
+      if (useSystemStore.getState().isLoading) return;
 
       if (!text) setChatInput('');
 
@@ -73,7 +75,8 @@ export function useChatStream(options: UseChatStreamOptions) {
           meta: { timestamp: Date.now() },
           isMuted,
           speakWith: (textToSpeak) => ttsService.speak(textToSpeak),
-          setLoading: setIsChatLoading,
+          setLoading,
+          onAddAssistantMessage: undefined,
           onAddUserMessage: (t) => {
             addChatMessage('user', t);
             assistantMessageId = addChatMessage('assistant', '', true);
@@ -116,13 +119,13 @@ export function useChatStream(options: UseChatStreamOptions) {
     },
     [
       chatInput,
-      isChatLoading,
       addChatMessage,
       updateChatMessage,
       removeChatMessage,
       startChatPerformanceTrace,
       markChatFirstToken,
       finalizeChatPerformanceTrace,
+      setLoading,
       sessionId,
       isMuted,
       onConnectionChange,
@@ -131,5 +134,5 @@ export function useChatStream(options: UseChatStreamOptions) {
     ],
   );
 
-  return { chatInput, setChatInput, isChatLoading, handleChatSend };
+  return { chatInput, setChatInput, isChatLoading: isLoading, handleChatSend };
 }
diff --git a/src/hooks/useFocusTrap.ts b/src/hooks/useFocusTrap.ts
@@ -2,10 +2,13 @@ import { useEffect, useRef } from 'react';
 
 /**
  * Traps keyboard focus within a container element when active.
- * Tab/Shift+Tab cycle through focusable elements. On activation,
- * focuses the first focusable element.
+ * Tab/Shift+Tab cycle through focusable elements. On activation
+ * or when focusKey changes, focuses the first focusable element.
  */
-export function useFocusTrap<T extends HTMLElement = HTMLDivElement>(isActive: boolean) {
+export function useFocusTrap<T extends HTMLElement = HTMLDivElement>(
+  isActive: boolean,
+  focusKey?: unknown,
+) {
   const containerRef = useRef<T>(null);
 
   useEffect(() => {
@@ -17,7 +20,7 @@ export function useFocusTrap<T extends HTMLElement = HTMLDivElement>(isActive: b
     const getFocusable = () =>
       Array.from(container.querySelectorAll<HTMLElement>(selector));
 
-    // Focus first element on activation
+    // Focus first element on activation or focusKey change
     const focusable = getFocusable();
     if (focusable.length > 0) {
       focusable[0].focus();
@@ -43,7 +46,7 @@ export function useFocusTrap<T extends HTMLElement = HTMLDivElement>(isActive: b
 
     container.addEventListener('keydown', handleKeyDown);
     return () => container.removeEventListener('keydown', handleKeyDown);
-  }, [isActive]);
+  }, [isActive, focusKey]);
 
   return containerRef;
 }
