Skip to main content

Vue 3 Widget 组件库

开箱即用的数字员工 UI 组件，5 分钟搭建完整交互界面。

为什么选择 Widget？​

开箱即用​

不需要从零设计 UI，像搭积木一样组合组件：

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

<template>
    <PilotKit token="xxx" figureId="xxx" ttsPer="xxx">
        <ConversationList />
        <Subtitle />
        <ControlPanel />
    </PilotKit>
</template>

自动适配​

PC 端、移动端自动切换布局，无需额外代码。所有组件都支持 variant 属性：

  • auto：自动检测设备类型（默认）
  • mobile：强制移动端样式
  • desktop：强制桌面端样式

可定制（当你需要时）​

每个组件都支持样式覆盖和自定义渲染，不会被"封装"限制住：

<template>
    <!-- 自定义渲染 -->
    <Subtitle v-slot="{speakerName, fullText}">
        <div class="my-subtitle">
            <span>{{ speakerName }}</span>
            <p>{{ fullText }}</p>
        </div>
    </Subtitle>
</template>

Widget vs SDK​

SDK 指 @bdky/aaas-pilot-kit-vue3，提供底层 Composables 和事件能力，需要自行实现 UI。

场景推荐方案
快速上线，UI 要求不高Widget
需要完全自定义 UI 设计Vue 3 SDK
80% 默认 + 20% 微调Widget + 样式定制
深度集成到现有设计系统Vue 3 SDK
不确定？先用 Widget 试试

如果遇到限制，再切换到 SDK 也很容易——它们共享相同的底层 API。Widget 内部使用的 Composables 和事件都来自 @bdky/aaas-pilot-kit-vue3。

组件一览​

核心容器​

组件用途
PilotKit核心容器，集成 Provider + 数字人渲染

消息展示​

组件用途
ConversationList消息历史列表
Conversation单条消息
Subtitle实时字幕

交互控制​

组件用途
ControlPanel语音/文字输入控制面板
Input独立文字输入框
RecommendedQuestions推荐问题列表

覆盖层​

组件用途
StartupScreen启动引导页（iOS 手动激活）
LoadingOverlay加载中状态
StatusOverlay通用状态提示（忙碌、超时等）

布局辅助​

组件用途
LayoutFlex 布局容器
FillAdapter自适应填充空间

开发工具​

组件用途
DebugPanel调试面板，显示事件和状态

下一步​

技术支持​