Skip to main content

快速开始

安装​

统一使用公网包 @bdky/aaas-pilot-kit-vue3。

npm

$ npm install @bdky/aaas-pilot-kit-vue3

yarn

$ yarn add @bdky/aaas-pilot-kit-vue3
依赖说明

核心能力依赖 @bdky/aaas-pilot-kit，请参考 Vanilla SDK 配置选项 了解完整配置项 IOptions。

快速开始​

基本使用​

App.vue - 父组件（提供 Provider）

<template>
    <div class="app">
        <!-- 数字人渲染容器 -->
        <div ref="digitalHumanRef" class="digital-human-container"></div>
        <PilotComponent />
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {provideAaaSPilotKit} from '@bdky/aaas-pilot-kit-vue3';
import {type IOptions} from '@bdky/aaas-pilot-kit';
import PilotComponent from './PilotComponent.vue';

const options: IOptions = {
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // agentConfig: 若未提供自定义 agentService,此配置必填
    agentConfig: {
        token: 'xxxx',
        robotId: 'xxxx'
    }
};

// 提供 AaaSPilotKit 实例给所有子组件
const provider = provideAaaSPilotKit(options);

// 数字人渲染容器的 ref
const digitalHumanRef = ref<HTMLDivElement>();

// 挂载数字人到 DOM
onMounted(() => {
    if (digitalHumanRef.value) {
        provider.controller.value?.mount(digitalHumanRef.value);
    }
});
</script>

<style scoped>
.digital-human-container {
    width: 100%;
    height: 400px;
    position: relative;
}
</style>

PilotComponent.vue - 子组件（使用 Composables）

<template>
    <div>
        <div>状态：{{ isReady ? '就绪' : '初始化中' }}</div>
        <div>静音：{{ isMuted ? '是' : '否' }}</div>
        <div>渲染：{{ isRendering ? '进行中' : '空闲' }}</div>
        <div>对话数：{{ conversationList.length }}</div>
        <button @click="controller?.input('你好')">
            发送消息
        </button>
    </div>
</template>

<script setup lang="ts">
import {
    useAaaSPilotKit,
    useConversationList
} from '@bdky/aaas-pilot-kit-vue3';

const {controller, isReady, isMuted, isRendering} = useAaaSPilotKit();
const {conversationList} = useConversationList();
</script>
重要提示

provideAaaSPilotKit 和 useAaaSPilotKit 不能在同一个组件中使用！

  • 父组件：调用 provideAaaSPilotKit(options) 提供实例，并可以挂载数字人容器
  • 子组件：调用 useAaaSPilotKit() 等 composables 使用实例

这是 Vue 3 provide/inject 机制的要求：provide 必须在父组件，inject 必须在子组件或后代组件中。

配置选项​

完整的配置选项请参考核心库文档：

const options: IOptions = {
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // agentConfig: 若未提供自定义 agentService,此配置必填
    agentConfig: {
        token: 'your-token',
        robotId: 'your-robot-id'
    },
    // 其他配置项...
};

类型导入​

库内导出的接口与核心类型保持一致，方便在业务代码中引用：

import type {
    IAaaSPilotKitProvider,
    AaaSPilotKitProviderKey,
    IUseAaaSPilotKitResult,
    IUseAaaSPilotKitEventsProps,
    IUseConversationResult,
    IUseConversationListResult
} from '@bdky/aaas-pilot-kit-vue3';

// 从核心库导入更多类型
import type {
    IAaaSPilotKitEmitter,
    AnyConversation
} from '@bdky/aaas-pilot-kit';

下一步​