DebugPanel

调试面板组件，用于开发阶段查看事件和状态。

基本用法

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

const isDev = import.meta.env.DEV;
</script>

<template>
    <PilotKit v-bind="props">
        <DebugPanel
            :show="isDev"
            position="bottom-right"
        />
    </PilotKit>
</template>

功能

DebugPanel 可以显示以下信息：

• 事件日志：SDK 触发的各种事件（ready、asrMessage、conversationChange 等）
• 状态变化：isReady、isMuted、isRendering 等状态
• 性能指标：TTFT（首字延迟）等性能数据

Props

属性	类型	默认值	说明
show	boolean	false	是否显示面板
position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'bottom-right'	面板位置
class	string	-	自定义类名
style	CSSProperties	-	自定义样式
features	object	见下方	启用的功能
maxLogs	number	100	最大日志条数

features 配置

<template>
    <DebugPanel
        show
        :features="{
            events: true,      // 显示事件日志
            performance: true, // 显示性能指标
            state: true        // 显示状态变化（每5秒）
        }"
    />
</template>

属性	类型	默认值	说明
events	boolean	true	是否显示事件日志
performance	boolean	true	是否显示性能指标
state	boolean	true	是否显示状态变化

日志类型

面板中的日志按类型区分颜色：

类型	颜色	说明
event	蓝色	SDK 事件
state	绿色	状态变化
performance	黄色	性能指标

交互功能

• Clear 按钮：清空所有日志
• 折叠/展开：点击 ▼/▲ 按钮切换面板大小

样式定制

类名	说明
.apk-debug-panel	根容器
.apk-debug-panel--expanded	展开状态
.apk-debug-panel--collapsed	折叠状态
.apk-debug-panel--top-left	左上位置
.apk-debug-panel--top-right	右上位置
.apk-debug-panel--bottom-left	左下位置
.apk-debug-panel--bottom-right	右下位置
.apk-debug-panel__header	头部区域
.apk-debug-panel__title	标题
.apk-debug-panel__actions	操作按钮区域
.apk-debug-panel__button	按钮
.apk-debug-panel__content	内容区域
.apk-debug-panel__log	单条日志
.apk-debug-panel__log--event	事件日志
.apk-debug-panel__log--state	状态日志
.apk-debug-panel__log--performance	性能日志
.apk-debug-panel__log-time	时间戳
.apk-debug-panel__log-type	类型标签
.apk-debug-panel__log-message	消息内容
.apk-debug-panel__log-data	数据详情
.apk-debug-panel__empty	空状态

使用建议

仅在开发环境使用

DebugPanel 会持续监听事件和状态，可能影响性能。建议仅在开发环境启用：

<script setup lang="ts">
const isDev = import.meta.env.DEV;
</script>

<template>
    <DebugPanel :show="isDev" />
</template>

监听的事件

DebugPanel 会自动监听以下事件：

事件	说明
@ready	SDK 就绪
@asrStart	ASR 开始
@asrMessage	ASR 识别结果
@renderStart	开始播报
@inactivity	用户无操作
@busy	系统繁忙
@interrupt	播报打断
@conversationChange	对话变化
@isRenderingChange	播报状态变化
@replyStart	回复开始
@ttft	首字延迟指标

相关

• Vue 3 SDK Events - 事件详细说明
• PilotKit 事件 - PilotKit 事件