Skip to main content

介绍

专为 Vue 3 应用优化的 AaaS Pilot Kit SDK，基于 Composition API 和依赖注入设计。

特性​

  • 🪝 Composition API - useAaaSPilotKit、useConversation、useConversationList 等组合式函数
  • 🎯 依赖注入 - provideAaaSPilotKit 遵循 Vue 3 provide/inject 标准范式，管理全局状态，实现跨组件状态共享
  • 📦 TypeScript 支持 - 完整的类型定义，与核心库类型保持一致
  • ⚡ 性能优化 - 内置响应式状态管理，自动处理控制器生命周期
  • 🔄 事件系统 - 简化的事件监听接口，支持流式内容更新
  • 💡 Vue 3 原生 - 充分利用 Vue 3 的响应式系统和组合式 API

安装​

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

npm

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

yarn

$ yarn add @bdky/aaas-pilot-kit-vue3

核心 API​

Provider 和依赖注入​

函数功能使用场景
provideAaaSPilotKit创建并提供控制器实例根组件中初始化
useAaaSPilotKit获取控制器和状态子组件中访问功能
injectAaaSPilotKit底层依赖注入函数高级用法和自定义封装

核心 Composables​

Composable功能返回值
useAaaSPilotKit获取控制器和状态{controller, isReady, isMuted, isRendering, create, dispose}
useAaaSPilotKitEvents绑定事件监听器void
useConversationList获取对话列表{conversationList}
useConversation处理单个对话内容{conversationContents}

事件处理​

简化的事件监听接口，支持所有核心库事件：

<script setup lang="ts">
    useAaaSPilotKitEvents({
        onReady: () => console.log('就绪'),
        onAsrMessage: (payload) => console.log('ASR结果:', payload.text),
        onRenderStart: (payload) => console.log('开始渲染:', payload),
        onConversationChange: (payload) => updateUI(payload)
    });
</script>

高级功能​

自定义 AgentService​

当需要接入私有 Agent 流式 API 协议时，可以通过继承 BaseAgentService 来创建自定义的 Agent 服务类：

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

    const options = {
        token: 'your-auth-token-here',
        figureId: '209337',
        ttsPer: 'LITE_audiobook_female_1',
        agentService: CustomAgentService // 替代 agentConfig,此时 agentConfig 可省略
    };

    // 传入自定义 AgentService
    provideAaaSPilotKit(options);
</script>

⚠️ 注意：使用自定义 agentService 时，agentConfig 配置将不可用。

详细实现指南：自定义 AgentService 配置

流式对话渲染​

父组件 - 获取对话列表

<template>
    <div>
        <ConversationItem
            v-for="conversation in conversationList"
            :key="conversation.id"
            :conversation="conversation"
        />
    </div>
</template>

<script setup lang="ts">
    import {useConversationList} from '@bdky/aaas-pilot-kit-vue3';
    import ConversationItem from './ConversationItem.vue';
    
    const {conversationList} = useConversationList();
</script>

子组件 - 渲染单个对话内容

<template>
    <div>
        <div
            v-for="item in conversationContents"
            :key="item.uiId"
            :class="['message', item.mod]"
        >
            <strong>{{ item.mod }}</strong>
            <div>{{ item.content }}</div>
            <span>{{ item.completed ? '完成' : '进行中' }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {useConversation} from '@bdky/aaas-pilot-kit-vue3';
    import {toRef} from 'vue';
    import type {AnyConversation} from '@bdky/aaas-pilot-kit';
    
    const props = defineProps<{
        conversation: AnyConversation | undefined;
    }>();
    
    const {conversationContents} = useConversation(toRef(props, 'conversation'));
</script>
为什么需要 toRef ？

由于 conversation 是通过 props 传入的，直接解构 props.conversation 会丢失响应性。使用 toRef(props, 'conversation') 可以创建一个指向 props 属性的 ref，确保当父组件传入的 conversation 变化时，useConversation 能够响应式地更新 conversationContents。

生命周期管理​

<script setup lang="ts">
    import {nextTick} from 'vue';
    import {useAaaSPilotKit} from '@bdky/aaas-pilot-kit-vue3';
    
    const {controller, create, dispose} = useAaaSPilotKit();
    // 手动控制生命周期
    const restartSession = async () => {
        dispose();
        await nextTick();
        create();
    };
</script>

完整示例​

查看详细的使用示例和最佳实践：

技术支持​