Add File

src/elderly/components/AvatarStage.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { XmovAvatar } from './XmovAvatar';
+
+interface AvatarStageProps {
+  isActive?: boolean;
+  websocketUrl?: string;
+  onSDKStatusChange?: (status: 'loading' | 'ready' | 'error' | 'config-missing') => void;
+  onWSStatusChange?: (status: 'disconnected' | 'connecting' | 'connected') => void;
+  onLogMessage?: (message: string) => void;
+}
+
+/**
+ * 数字人画面组件 - 承载 xmovsdk 渲染流
+ * 占据主要屏幕空间，支持 9:16 竖屏
+ * 连接到 WebSocket (10002端口) 接收消息驱动数字人说话
+ */
+export const AvatarStage: React.FC<AvatarStageProps> = ({
+  isActive = false,
+  websocketUrl = 'ws://127.0.0.1:10002',
+  onSDKStatusChange,
+  onWSStatusChange,
+  onLogMessage,
+}) => {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  const handleSDKReady = () => {
+    console.log('[AvatarStage] 数字人SDK就绪');
+  };
+
+  const handleSDKError = (error: any) => {
+    console.error('[AvatarStage] 数字人SDK错误:', error);
+  };
+
+  const handleSpeaking = (speaking: boolean) => {
+    setIsSpeaking(speaking);
+  };
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <XmovAvatar
+        isActive={isActive || isSpeaking}
+        websocketUrl={websocketUrl}
+        onSDKReady={handleSDKReady}
+        onSDKError={handleSDKError}
+        onSpeaking={handleSpeaking}
+        onSDKStatusChange={onSDKStatusChange}
+        onWSStatusChange={onWSStatusChange}
+        onLogMessage={onLogMessage}
+      />
+    </div>
+  );
+};