@bdky/aaas-pilot-kit-vue3

介绍

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

特性

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

安装

npm

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

yarn

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

核心 API

Provider 和依赖注入

核心 Composables

事件处理

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

<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 = {
        figureId: '209337',
        agentService: CustomAgentService // 替代 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>

❓ 帮助与支持

遇到问题或有建议？欢迎通过以下方式联系我们：

• 📧 发送邮件至维护团队
• 📖 查看常见问题文档

Made with ❤️ by 百度智能云客悦 Ky-FE Team