Vue3 单例模式集成魔珐星云：部署高拟真具身智能大屏应用

export class AvatarService {
  private static instance: AvatarService | null = null;
  private avatar: any = null; // 持有全局唯一的星云引擎实例

  private constructor() {}

  // 暴露全局唯一的访问入口
  public static getInstance(): AvatarService {
    if (!AvatarService.instance) {
      AvatarService.instance = new AvatarService();
    }
    return AvatarService.instance;
  }

  /**
   * 初始化数字人渲染上下文
   * @param containerId 挂载的 DOM 节点 ID
   */
  public async init(containerId: string, appId: string, appSecret: string) {
    if (this.avatar) return; // 防止重复初始化
    
    this.avatar = new window.XmovAvatar({
      containerId,
      appId,
      appSecret,
      gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',
      hardwareAcceleration: 'prefer-hardware', // 强制开启硬件加速，优化大屏性能
      onVoiceStateChange: (status: string) => {
        // 监听底层播报状态，实现自动回归交互待机
        if (status === 'voice_end') this.avatar.interactiveidle();
      }
    });

    await this.avatar.init();
  }

  // 对外暴露流式对话驱动接口
  public speakStream(text: string, isStart: boolean, isEnd: boolean) {
    this.avatar?.speak(text, isStart, isEnd);
  }

  // 暴露生命周期与内存释放接口
  public destroy() {
    this.avatar?.destroy();
    this.avatar = null;
  }
}

export const avatarService = AvatarService.getInstance();

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { avatarService } from '../services/AvatarService';

// 环境配置
const APP_ID = import.meta.env.VITE_XINGYUN_APP_ID;
const APP_SECRET = import.meta.env.VITE_XINGYUN_APP_SECRET;

onMounted(async () => {
  // 仅在 DOM 挂载后，将容器 ID 交由 Service 层接管
  await avatarService.init('#nebula-sdk-container', APP_ID, APP_SECRET);
});

// 组件卸载时，强制销毁底层 3D 实例释放内存
onUnmounted(() => {
  avatarService.destroy();
});
</script>

<template>
  <div class="screen-container">
    <!-- 渲染容器，必须指定明确宽高 -->
    <div id="nebula-sdk-container" style="width: 540px; height: 960px;"></div>
  </div>
</template>