Skip to main content

控制组件

交互控制相关组件：ControlPanel、Input、RecommendedQuestions。

ControlPanel​

语音/文字输入控制面板，支持模式切换。

基本用法​

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

<template>
    <PilotKit v-bind="props">
        <ControlPanel />
    </PilotKit>
</template>

响应式适配​

📱 详见 响应式适配指南

特性PC 端移动端
输入框宽度479px 固定100% 自适应
按钮大小54-55px50px
布局居中绝对定位全宽 flex
挂断按钮可选显示始终显示

Props​

属性类型默认值说明
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classstring-自定义类名
styleCSSProperties-自定义样式
mode'voice' | 'text'-受控模式
defaultMode'voice' | 'text''voice'默认模式
inputValuestring-受控输入值
inputPlaceholderstring'请输入...'输入框占位符
inputDisabledbooleanfalse是否禁用输入
showHangupButtonbooleanfalse是否显示挂断按钮

事件​

事件类型说明
@modeChange(mode) => void模式切换回调
@inputChange(value) => void输入变化回调
@send(value) => void发送回调
@muteToggle(muted) => void静音切换回调
@hangup() => void挂断回调

Slots​

插槽说明
default完全自定义渲染
muteIcon静音状态图标
unmuteIcon非静音状态图标
hangupIcon挂断按钮图标
asrIconASR 模式图标
keyboardIcon键盘模式图标
sendIcon发送按钮图标

自定义渲染​

<template>
    <ControlPanel>
        <!-- 完全自定义控制面板 -->
        <div class="my-control-panel">
            <button>自定义按钮</button>
        </div>
    </ControlPanel>
</template>

样式定制​

类名说明
.apk-control-panel根容器
.apk-control-panel--mobile移动端样式
.apk-control-panel__inner内层容器
.apk-control-panel__mode-btn模式切换按钮
.apk-control-panel__input-wrapper输入框容器
.apk-control-panel__input输入框
.apk-control-panel__send-btn发送按钮
.apk-control-panel__mic-btn麦克风按钮
.apk-control-panel__hangup-btn挂断按钮
.apk-control-panel__icon图标
.apk-control-panel__icon-mute静音图标

Input​

独立的文字输入框组件。

基本用法​

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

<template>
    <PilotKit v-bind="props">
        <Input placeholder="输入消息..." />
    </PilotKit>
</template>

响应式适配​

特性PC 端移动端
宽度479px100%
高度55px50px
圆角28px20px
内边距24px16px

Props​

属性类型默认值说明
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classstring-自定义类名
styleCSSProperties-自定义样式
modelValuestring-v-model 绑定值
defaultValuestring''默认值
placeholderstring'请输入...'占位符
disabledbooleanfalse是否禁用
maxLengthnumber-最大长度
autoFocusbooleanfalse是否自动聚焦
status'default' | 'error' | 'warning''default'状态
loadingbooleanfalse是否加载中
showSendIconbooleantrue是否显示发送图标

事件​

事件类型说明
@update:modelValue(value) => voidv-model 更新
@textChange(value) => void文本变化回调
@send(value) => void发送回调
@focus(e) => void聚焦回调
@blur(e) => void失焦回调
@keydown(e) => void按键回调

Slots​

插槽Props说明
default{value, setValue, handleSend, disabled, loading}自定义渲染
sendIcon-自定义发送图标

自定义渲染​

<template>
    <Input v-slot="{value, setValue, handleSend, disabled, loading}">
        <div class="my-input">
            <input
                :value="value"
                @input="e => setValue(e.target.value)"
                :disabled="disabled"
            />
            <button @click="handleSend" :disabled="loading">
                发送
            </button>
        </div>
    </Input>
</template>

样式定制​

类名说明
.apk-input根容器
.apk-input--mobile移动端样式
.apk-input--desktop桌面端样式
.apk-input__field输入框
.apk-input__send-icon发送图标
.apk-input__loader加载指示器
.apk-input--error错误状态
.apk-input--warning警告状态
.apk-input--disabled禁用状态
.apk-input--loading加载状态

RecommendedQuestions​

推荐问题列表组件。

基本用法​

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

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

function handleQuestionClick(question: string) {
    pilotKitRef.value?.input(question);
}
</script>

<template>
    <PilotKit ref="pilotKitRef" v-bind="props">
        <RecommendedQuestions
            :questions="['介绍一下自己', '你能做什么？', '帮我查询订单']"
            @questionClick="handleQuestionClick"
        />
    </PilotKit>
</template>

响应式适配​

特性PC 端移动端
布局水平排列垂直排列
背景半透明胶囊透明
问题项文字 + 箭头卡片样式
标题显示默认隐藏
分隔符显示隐藏

Props​

属性类型默认值说明
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classstring-自定义类名
styleCSSProperties-自定义样式
questionsstring[][]问题列表
titlestring'试试这样问：'标题文本
showTitlebooleanfalse是否显示标题
showDividerbooleantrue是否显示分隔符
expandedbooleanfalse是否展开状态

事件​

事件类型说明
@questionClick(question: string) => void点击问题回调

Slots​

插槽说明
arrowIcon自定义箭头图标

样式定制​

类名说明
.apk-recommended-questions根容器
.apk-recommended-questions--mobile移动端样式
.apk-recommended-questions__title标题
.apk-recommended-questions__divider分隔符
.apk-recommended-questions__list问题列表
.apk-recommended-questions__item问题项
.apk-recommended-questions__arrow箭头图标
.apk-recommended-questions__arrow-icon移动端箭头图标

相关​