Chat 对话组件
支持 AI 对话消息展示、输入框、代码块高亮的对话组件。
## 基础用法 ``` ::: ## 消息角色 支持三种消息角色：用户、AI 助手、系统。 ::: details 查看代码 ```javascript const messages = [ // 用户消息 { id: '1', role: 'user', content: '用户消息内容' }, // AI 助手消息 { id: '2', role: 'assistant', content: 'AI 助手回复内容' }, // 系统消息 { id: '3', role: 'system', content: '系统提示消息' } ] ``` ::: ## 加载状态
``` ::: ## 代码块支持 消息内容支持 Markdown 代码块，自动识别和高亮显示。 ::: details 查看示例 ```javascript const codeMessages = [ { id: '1', role: 'assistant', content: `这里是一个代码示例： \`\`\`javascript function hello() { console.log('Hello, World!') } \`\`\` 运行后会输出 \`Hello, World!\`` } ] ``` ::: ## 禁用状态 ::: details 查看代码 ```vue
``` ::: ## API ### Props | 属性 | 说明 | 类型 | 默认值 | |-----|------|------|-------| | messages | 消息列表 | `ChatMessage[]` | `[]` | | showInput | 是否显示输入框 | `boolean` | `true` | | placeholder | 输入框占位文本 | `string` | `'输入消息...'` | | disabled | 是否禁用 | `boolean` | `false` | | loading | 是否正在加载 | `boolean` | `false` | | maxHeight | 最大高度 | `string \| number` | `400` | | showClear | 是否显示清空按钮 | `boolean` | `true` | | showTimestamp | 是否显示时间戳 | `boolean` | `true` | ### ChatMessage | 属性 | 说明 | 类型 | |-----|------|------| | id | 消息唯一标识 | `string` | | role | 消息角色 | `'user' \| 'assistant' \| 'system'` | | content | 消息内容 | `string` | | timestamp | 时间戳 | `string` | | loading | 是否加载中 | `boolean` | ### Events | 事件名 | 说明 | |-------|------| | send | 发送消息时触发 | | clear | 清空对话时触发 | | copy | 复制代码块时触发 |