PilotKit

核心容器组件，集成 Provider 和数字人渲染，是所有 Widget 组件的根组件。

基本用法

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

<template>
    <PilotKit
        token="your-token"
        figureId="your-figure-id"
        ttsPer="your-tts-per"
        :agentConfig="{robotId: 'your-robot-id'}"
    >
        <ControlPanel />
    </PilotKit>
</template>

使用 Ref

通过 ref 可以访问控制器方法：

<script setup lang="ts">
import {ref} from 'vue';
import {PilotKit, type IPilotKitRef} from '@bdky/aaas-pilot-kit-vue3-widget';

const pilotKitRef = ref<IPilotKitRef | null>(null);

function handleSendMessage() {
    pilotKitRef.value?.input('你好');
}

function handleInterrupt() {
    pilotKitRef.value?.interrupt();
}
</script>

<template>
    <PilotKit ref="pilotKitRef" v-bind="props">
        <button @click="handleSendMessage">发送消息</button>
        <button @click="handleInterrupt">打断</button>
    </PilotKit>
</template>

Props

必填属性

属性	类型	说明
`token`	`string`	认证 Token
`figureId`	`string`	数字人形象 ID
`ttsPer`	`string`	TTS 音色 ID

Agent 配置

属性	类型	说明
`agentConfig`	`{robotId: string; token?: string}`	Agent 配置，与 `agentService` 二选一
`agentService`	`typeof BaseAgentService`	自定义 AgentService 类

agentConfig vs agentService

使用百度默认 Agent：配置 agentConfig
使用私有 Agent API：提供自定义 agentService，详见自定义 AgentService

行为配置

属性	类型	默认值	说明
`prologue`	`string`	-	开场白，SDK 就绪后自动播报
`interruptible`	`boolean`	`false`	是否允许打断播报
`timeoutSec`	`number`	`120`	无操作超时时间（秒）
`typeDelay`	`number`	`100`	中文打字机效果延迟（ms）
`enTypeDelay`	`number`	`50`	英文打字机效果延迟（ms）
`minSplitLen`	`number`	`10`	流式文本最小分割长度

渲染配置

属性	类型	默认值	说明
`rendererMode`	`'cloud-native' \| 'standard'`	`'standard'`	渲染模式
`scaleX`	`number`	`1`	水平缩放
`scaleY`	`number`	`1`	垂直缩放
`translateX`	`number`	`0`	水平偏移
`translateY`	`number`	`0`	垂直偏移

样式属性

属性	类型	说明
`class`	`string`	自定义类名
`style`	`CSSProperties`	自定义样式
`backgroundUrl`	`string`	背景图片 URL
`autoMount`	`boolean`	是否自动挂载，默认 `true`

事件

事件	类型	说明
`@ready`	`() => void`	SDK 就绪
`@needManualActivation`	`() => void`	需要手动激活（iOS iframe）
`@asrStart`	`() => void`	ASR 开始
`@asrMessage`	`(payload) => void`	ASR 识别结果
`@renderStart`	`(payload) => void`	开始播报
`@inactivity`	`(payload) => void`	用户无操作超时
`@busy`	`(payload) => void`	系统繁忙
`@interrupt`	`(payload) => void`	播报被打断
`@conversationChange`	`(payload) => void`	对话内容变化
`@isRenderingChange`	`(isRendering) => void`	播报状态变化
`@replyStart`	`(payload) => void`	回复开始
`@ttft`	`(payload) => void`	首字延迟指标

事件 Payload 类型

事件回调的 Payload 类型定义详见 Vue 3 SDK Composables 文档。

Ref 方法

通过 ref 可以访问以下方法：

方法	类型	说明
`input`	`(text: string) => void`	发送文字输入
`mute`	`(muted: boolean) => void`	设置静音状态
`interrupt`	`() => void`	打断当前播报
`dispose`	`() => void`	销毁实例
`playPrologue`	`() => void`	播放开场白
`playFromFullText`	`(text: string) => void`	播放完整文本
`playFromStreamText`	`(text: string) => void`	流式播放文本
`keepAlive`	`() => void`	保持连接活跃
`checkAudioDevice`	`() => Promise<Result>`	检测音频设备
`activateManually`	`() => Promise<void>`	手动激活（iOS）
`getIsReady`	`() => boolean`	获取就绪状态
`getIsMuted`	`() => boolean`	获取静音状态
`getIsRendering`	`() => boolean`	获取播报状态

Provide/Inject

PilotKit 内部创建了 PilotKitContext，子组件可以通过 usePilotKitContext 访问：

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

const pilotKit = usePilotKitContext();

function sendMessage() {
    pilotKit?.input('你好');
}
</script>

<template>
    <button @click="sendMessage">发送消息</button>
</template>

样式定制

CSS 类名

类名	说明
`.apk-pilot-kit`	根容器
`.apk-pilot-kit__mask`	遮罩层（children 渲染位置）

背景图片

使用 backgroundUrl 设置背景：

<template>
    <PilotKit
        backgroundUrl="https://example.com/background.jpg"
        ...
    />
</template>

基本用法​

使用 Ref​

Props​

必填属性​

Agent 配置​

行为配置​

渲染配置​

样式属性​

事件​

Ref 方法​

Provide/Inject​

样式定制​

CSS 类名​

背景图片​

相关​