271 lines
5.4 KiB
Markdown
271 lines
5.4 KiB
Markdown
# AI智能客服组件
|
||
|
||
一个功能完整的AI智能客服对话组件，支持多种消息类型和交互功能。
|
||
|
||
## 功能特性
|
||
|
||
- ✅ 支持对话上下文管理
|
||
- ✅ 支持多种消息类型：文本、Markdown、文件、音频、视频、链接、商品卡片
|
||
- ✅ 支持语音输入和录音
|
||
- ✅ 支持图片、文件、位置等附件发送
|
||
- ✅ 支持消息操作按钮（点赞、踩等）
|
||
- ✅ 支持历史消息加载
|
||
- ✅ 响应式设计，适配多端
|
||
|
||
## 安装使用
|
||
|
||
### 1. 引入组件
|
||
|
||
在 `pages.json` 中注册组件：
|
||
|
||
```json
|
||
{
|
||
"usingComponents": {
|
||
"ai-chat-message": "/components/ai-chat-message/ai-chat-message"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 在页面中使用
|
||
|
||
```vue
|
||
<template>
|
||
<view class="container">
|
||
<ai-chat-message
|
||
ref="chat"
|
||
:initial-messages="messages"
|
||
@message-sent="onMessageSent"
|
||
@ai-response="onAIResponse"
|
||
@action-click="onActionClick" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
messages: [
|
||
{
|
||
id: 1,
|
||
role: 'ai',
|
||
type: 'text',
|
||
content: '您好！我是AI智能客服，有什么可以帮助您的吗？',
|
||
timestamp: Date.now()
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
onMessageSent(message) {
|
||
console.log('用户发送消息:', message)
|
||
},
|
||
onAIResponse(message) {
|
||
console.log('AI回复消息:', message)
|
||
},
|
||
onActionClick({ action, message }) {
|
||
console.log('操作点击:', action, message)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## Props 配置
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| initialMessages | Array | [] | 初始消息列表 |
|
||
| userAvatar | String | '/static/images/default-avatar.png' | 用户头像 |
|
||
| aiAvatar | String | '/static/images/ai-avatar.png' | AI头像 |
|
||
| showLoadMore | Boolean | true | 是否显示加载更多 |
|
||
| maxMessages | Number | 100 | 最大消息数量 |
|
||
|
||
## Events 事件
|
||
|
||
| 事件名 | 参数 | 说明 |
|
||
|--------|------|------|
|
||
| message-sent | message | 用户发送消息 |
|
||
| ai-response | message | AI回复消息 |
|
||
| action-click | {action, message} | 操作按钮点击 |
|
||
| history-loaded | messages | 历史消息加载完成 |
|
||
| file-preview | message | 文件预览 |
|
||
| audio-play | message | 音频播放 |
|
||
| audio-pause | message | 音频暂停 |
|
||
| video-play | message | 视频播放 |
|
||
| video-pause | message | 视频暂停 |
|
||
| link-open | message | 链接打开 |
|
||
| product-view | message | 商品查看 |
|
||
| input-change | value | 输入内容变化 |
|
||
|
||
## 消息类型格式
|
||
|
||
### 文本消息
|
||
```javascript
|
||
{
|
||
id: 1,
|
||
role: 'user', // 或 'ai'
|
||
type: 'text',
|
||
content: '消息内容',
|
||
timestamp: Date.now()
|
||
}
|
||
```
|
||
|
||
### Markdown消息
|
||
```javascript
|
||
{
|
||
id: 2,
|
||
role: 'ai',
|
||
type: 'markdown',
|
||
content: '# 标题\n**粗体** *斜体* `代码`',
|
||
timestamp: Date.now()
|
||
}
|
||
```
|
||
|
||
### 文件消息
|
||
```javascript
|
||
{
|
||
id: 3,
|
||
role: 'ai',
|
||
type: 'file',
|
||
fileName: '文档.pdf',
|
||
fileSize: 1024000,
|
||
url: '文件地址',
|
||
timestamp: Date.now()
|
||
}
|
||
```
|
||
|
||
### 音频消息
|
||
```javascript
|
||
{
|
||
id: 4,
|
||
role: 'ai',
|
||
type: 'audio',
|
||
title: '语音消息',
|
||
duration: 60, // 秒
|
||
url: '音频地址',
|
||
timestamp: Date.now()
|
||
}
|
||
```
|
||
|
||
### 视频消息
|
||
```javascript
|
||
{
|
||
id: 5,
|
||
role: 'ai',
|
||
type: 'video',
|
||
title: '产品介绍',
|
||
duration: 120, // 秒
|
||
url: '视频地址',
|
||
cover: '封面图',
|
||
timestamp: Date.now()
|
||
}
|
||
```
|
||
|
||
### 链接消息
|
||
```javascript
|
||
{
|
||
id: 6,
|
||
role: 'ai',
|
||
type: 'link',
|
||
title: '帮助文档',
|
||
description: '详细的使用说明',
|
||
url: 'https://example.com',
|
||
image: '缩略图',
|
||
timestamp: Date.now()
|
||
}
|
||
```
|
||
|
||
### 商品卡片
|
||
```javascript
|
||
{
|
||
id: 7,
|
||
role: 'ai',
|
||
type: 'product',
|
||
title: '商品名称',
|
||
price: 299,
|
||
description: '商品描述',
|
||
image: '商品图片',
|
||
timestamp: Date.now()
|
||
}
|
||
```
|
||
|
||
## 方法
|
||
|
||
通过 ref 调用组件方法：
|
||
|
||
```javascript
|
||
// 添加消息
|
||
this.$refs.chat.addMessage(message)
|
||
|
||
// 清空消息
|
||
this.$refs.chat.clearMessages()
|
||
|
||
// 滚动到底部
|
||
this.$refs.chat.scrollToBottom()
|
||
```
|
||
|
||
## 样式定制
|
||
|
||
组件使用 SCSS 编写，可以通过 CSS 变量进行主题定制：
|
||
|
||
```css
|
||
.ai-chat-container {
|
||
--primary-color: #ff4544;
|
||
--bg-color: #f8f8f8;
|
||
--text-color: #333;
|
||
}
|
||
```
|
||
|
||
## 方法
|
||
|
||
通过 ref 调用组件方法：
|
||
|
||
```javascript
|
||
// 添加消息
|
||
this.$refs.chat.addMessage(message)
|
||
|
||
// 清空消息
|
||
this.$refs.chat.clearMessages()
|
||
|
||
// 滚动到底部
|
||
this.$refs.chat.scrollToBottom()
|
||
|
||
// 开始语音输入
|
||
this.$refs.chat.startVoiceInput()
|
||
|
||
// 停止语音输入
|
||
this.$refs.chat.stopVoiceInput()
|
||
```
|
||
|
||
## 样式定制
|
||
|
||
组件使用 SCSS 编写，可以通过 CSS 变量进行主题定制：
|
||
|
||
```css
|
||
.ai-chat-container {
|
||
--primary-color: #ff4544;
|
||
--bg-color: #f8f8f8;
|
||
--text-color: #333;
|
||
--border-color: #eeeeee;
|
||
--user-bg: #e6f7ff;
|
||
--ai-bg: #f6f6f6;
|
||
}
|
||
```
|
||
|
||
## 图标字体
|
||
|
||
组件使用自定义图标字体，需要在页面中引入：
|
||
|
||
```html
|
||
<style>
|
||
@import url('/components/ai-chat-message/iconfont.css');
|
||
</style>
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. 组件已适配项目中已有的 `ns-loading` 组件
|
||
2. 需要配置对应的图标字体文件
|
||
3. 音频播放功能在 H5 和 APP 端支持较好
|
||
4. 文件预览功能依赖平台能力
|
||
5. 语音输入功能需要用户授权麦克风权限 |