AiProvider 全局配置

AiProvider 是 AI 组件库的核心配置组件，用于在应用顶层注入全局配置。它通过 Vue 的 provide/inject 机制，为下游所有的 AI 组件（如 AiChat、AiBubble 等）提供基础的接口地址、鉴权信息、头像以及打字机特效等配置。

基础用法

建议将 AiProvider 包裹在应用的根组件或 AI 功能模块的最外层。

你好！我是由 AiProvider 配置的助手。

基础用法

全局身份配置

通过 AiProvider，你可以统一设置用户和助手的头像及名称。

谁在帮我配置？

是我，你的全局助手。

全局身份配置

API

Props

属性名	说明	类型	默认值
base-url	全局 AI 接口基础地址	string	-
token	鉴权 Token (Bearer)	string	-
headers	全局请求头追加	Record<string, string>	-
user-avatar	用户头像 URL	string	-
assistant-avatar	助手头像 URL	string	-
user-name	用户显示名称	string	-
assistant-name	助手显示名称	string	-
system-prompt	全局系统提示词	string	-
typewriter	打字机特效配置	object	{ enabled: true, charsPerFrame: 2 }

typewriter 属性定义

属性名	说明	类型	默认值
enabled	是否开启打字机效果	boolean	true
chars_per_frame	每帧渲染字符数	number	2

请求/响应拦截器 Props

属性名	说明	类型	默认值
timeout	请求超时时间(ms)	number	30000
withCredentials	是否允许携带凭证	boolean	false
mode	请求模式	'cors' | 'no-cors' | 'same-origin'	'cors'
cache	缓存模式	RequestCache	见下方

Methods

方法名	说明	参数	返回值
addRequestInterceptor	添加请求拦截器	(interceptor: AiRequestInterceptor) => number	拦截器 ID
addResponseInterceptor	添加响应拦截器	(interceptor: AiResponseInterceptor) => number	拦截器 ID
removeRequestInterceptor	移除请求拦截器	(id: number) => void	—
removeResponseInterceptor	移除响应拦截器	(id: number) => void	—
clearInterceptors	清空所有拦截器	() => void	—

拦截器使用示例

基础拦截器

💡 拦截器已增强：点击发送消息，即可在页面内和控制台看到拦截点反馈。

拦截器示例 1：基础请求/响应拦截

添加请求/响应拦截器

请求拦截器 - 添加 Token

🔑 发送消息时拦截器会自动注入 Mock Token (查看控制台)

拦截器示例 2：请求拦截 - 自动添加 Token

请求拦截器 - 自动添加 Token

响应拦截器 - 统一错误处理

🚨 统一异常捕获演示

拦截器示例 3：响应拦截 - 统一错误处理

响应拦截器 - 统一错误处理

日志记录拦截器

⏳ 实时记录请求耗时 (查看控制台)

拦截器示例 4：日志记录拦截

日志记录拦截器

类型定义

import type { AiRequestConfig, AiResponse } from '@yh-ui/components'

// 请求拦截器
interface AiRequestInterceptor {
  onRequest?: (config: AiRequestConfig) => AiRequestConfig | void | Promise<AiRequestConfig | void>
  onRequestError?: (error: Error) => void
}

// 响应拦截器
interface AiResponseInterceptor {
  onResponse?: (response: Response) => Response | void | Promise<Response | void>
  onResponseError?: (error: Error) => void
}

使用建议

• Vite/Nuxt 项目：通常在 App.vue 或 layouts/default.vue 中使用一次即可。
• 作用域隔离：如果应用中有多个不同的 AI 模块（例如一个客服机器人，一个代码助手），可以分别包裹不同的 AiProvider 来实现隔离。