AiVoiceTrigger 语音触发
智能语音唤醒组件，提供悬浮式交互体验，支持自定义音轨波形以展示多模态大模型的聆听反馈。
基础用法
最简单的用法，使用 v-model:recording 控制双向绑定录音状态。当用户点击麦克风时，会自动展开波形面板。
状态: 空闲
基础用法
实时音轨波柱反馈
传入 amplitudes 数组可以在录音展开时通过柱状图实时模拟多模态的语音或情感解析交互。（在真实业务中可以对接 Web Audio API 返回的音量分贝数值）
实时音效模拟
捕捉交互事件
使用 @start、@stop 以及取消按钮的 @cancel 可以准确将组件交互与底层的 WebRTC 或大模型 WebSocket 推流任务绑定。同时可以使用默认插槽指定按键文本。
请打开开发者工具(F12)查看控制台事件
触发回调
实战案例：智能语音助手对话
通过组合 AiVoiceTrigger 和 AiBubble 组件，我们可以轻松构建一个包含语音输入、加载响应和气泡展示的智能语音助手界面。
应用场景实例
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| recording / v-model:recording | 是否处于展开录音状态 | boolean | false |
| variant | 展示模式：inline / floating / sphere | string | 'inline' |
| position | 悬浮位置：top-left / top-right / ... | string | 'bottom-right' |
| offset | 偏移距离 [x, y] | [number, number] | [24, 24] |
| amplitudes | 音轨高度波分布数组(需内部响应式轮询传入) | number[] | [5,5,5,...] |
| theme-overrides | 组件级别的局部主题定制覆盖变量 | ComponentThemeVars | — |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:recording | 绑定状态变化时触发 | (value: boolean) |
| start | 开始录音的挂载触发事件 | — |
| stop | 保存/结束录音触发事件（主动在展开后点击红点） | — |
| cancel | 取消录制（点击后方的小 x） | — |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 未展开录音状态时的图标后置辅助说明文本 | — |
在 Nuxt 中使用
该组件完全支持 Nuxt 3/4。在 Nuxt 项目中，该组件将被自动导入。
有关详细配置，请参阅 Nuxt 集成。
主题变量
通过 themeOverrides prop 或 CSS 变量对组件进行深度定制：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-voice-trigger-btn-size | 触发按钮尺寸 | 32px |
--yh-ai-voice-trigger-active-color | 录音激活时的背景色 | var(--yh-color-danger) |
--yh-ai-voice-trigger-wave-color | 音轨波形颜色 | var(--yh-color-danger) |
--yh-ai-voice-trigger-bg | 展开面板背景色 | var(--yh-bg-color-overlay) |