173 lines
5.0 KiB
Markdown
173 lines
5.0 KiB
Markdown
# AI智能客服弹窗集成说明
|
||
|
||
## 概述
|
||
|
||
本方案将AI智能客服弹窗功能集成到现有的浮动导航组件 `hover-nav.vue` 中，实现了对项目影响最小的集成方案。
|
||
|
||
## 集成文件
|
||
|
||
### 1. 新增组件
|
||
- `components/ai-chat-popup/ai-chat-popup.vue` - AI聊天弹窗主组件
|
||
- `components/ai-chat-popup/ai-chat-popup.json` - 组件配置文件
|
||
|
||
### 2. 修改文件
|
||
- `components/hover-nav/hover-nav.vue` - 集成AI客服按钮和弹窗
|
||
|
||
## 功能特性
|
||
|
||
### ✅ 已实现功能
|
||
1. **浮动AI客服按钮** - 在现有浮动导航中添加AI客服按钮
|
||
2. **智能弹窗** - 点击按钮弹出AI聊天界面
|
||
3. **未读消息提示** - 显示未读消息数量小红点
|
||
4. **全屏模式** - 支持全屏/窗口模式切换
|
||
5. **响应式设计** - 适配不同屏幕尺寸
|
||
6. **复用现有组件** - 基于现有的 `ai-chat-message` 组件
|
||
|
||
### 🔧 技术特点
|
||
1. **最小化影响** - 只修改现有组件，不改变项目结构
|
||
2. **模块化设计** - 弹窗组件独立，可复用
|
||
3. **事件驱动** - 完整的生命周期事件
|
||
4. **性能优化** - 按需加载，避免资源浪费
|
||
|
||
## 使用方法
|
||
|
||
### 1. 自动集成
|
||
AI客服功能已经自动集成到 `hover-nav` 组件中，无需额外配置。
|
||
|
||
### 2. 自定义配置
|
||
如果需要自定义AI客服功能，可以修改以下配置：
|
||
|
||
```vue
|
||
<!-- 在 hover-nav.vue 中自定义AI客服按钮 -->
|
||
<view class="btn-item" @click="openAIChat" :style="{backgroundImage:'url('+(aiimg?aiimg:'')+')',backgroundSize:'100% 100%'}">
|
||
<text class="iconfont icon-ai" v-if="!aiimg"></text>
|
||
<view v-if="aiUnreadCount > 0" class="unread-badge">
|
||
<text>{{ aiUnreadCount > 99 ? '99+' : aiUnreadCount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- AI聊天弹窗 -->
|
||
<ai-chat-popup
|
||
v-if="showAIChat"
|
||
:show="showAIChat"
|
||
@update:show="showAIChat = $event"
|
||
@unread-update="onUnreadUpdate"
|
||
@message-sent="onAIMessageSent"
|
||
@ai-response="onAIResponse" />
|
||
```
|
||
|
||
### 3. 事件监听
|
||
可以监听以下事件来处理业务逻辑：
|
||
|
||
```javascript
|
||
// 未读消息更新
|
||
onUnreadUpdate(count) {
|
||
this.aiUnreadCount = count
|
||
// 可以在这里添加未读消息处理逻辑
|
||
},
|
||
|
||
// AI消息发送事件
|
||
onAIMessageSent(message) {
|
||
console.log('AI消息发送:', message)
|
||
// 可以在这里添加消息发送后的处理逻辑
|
||
},
|
||
|
||
// AI回复事件
|
||
onAIResponse(message) {
|
||
console.log('AI回复:', message)
|
||
// 可以在这里添加AI回复后的处理逻辑
|
||
}
|
||
```
|
||
|
||
## 配置选项
|
||
|
||
### AI聊天弹窗组件参数
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| show | Boolean | false | 是否显示弹窗 |
|
||
| userAvatar | String | '/static/images/default-avatar.png' | 用户头像 |
|
||
| aiAvatar | String | '/static/images/ai-avatar.png' | AI头像 |
|
||
|
||
### 事件
|
||
|
||
| 事件名 | 参数 | 说明 |
|
||
|--------|------|------|
|
||
| popup-open | - | 弹窗打开事件 |
|
||
| popup-close | - | 弹窗关闭事件 |
|
||
| unread-update | count | 未读消息数量更新 |
|
||
| message-sent | message | 消息发送事件 |
|
||
| ai-response | message | AI回复事件 |
|
||
|
||
## 样式定制
|
||
|
||
### 1. AI客服按钮样式
|
||
```css
|
||
.btn-item {
|
||
/* 按钮基础样式 */
|
||
position: relative;
|
||
}
|
||
|
||
.unread-badge {
|
||
/* 未读消息小红点样式 */
|
||
position: absolute;
|
||
top: -5rpx;
|
||
right: -5rpx;
|
||
background-color: #ff4544;
|
||
color: white;
|
||
border-radius: 20rpx;
|
||
min-width: 30rpx;
|
||
height: 30rpx;
|
||
font-size: 20rpx;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
padding: 0 8rpx;
|
||
z-index: 1;
|
||
box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
|
||
}
|
||
```
|
||
|
||
### 2. 弹窗样式
|
||
弹窗样式在 `ai-chat-popup.vue` 中定义，可以根据需要自定义。
|
||
|
||
## 注意事项
|
||
|
||
1. **图标资源** - 需要确保AI图标文件存在，默认路径为 `/static/images/ai-icon.png`
|
||
2. **组件依赖** - AI聊天弹窗依赖于现有的 `ai-chat-message` 组件
|
||
3. **z-index** - 弹窗的z-index设置为1000，确保在其他元素之上
|
||
4. **响应式适配** - 弹窗已经做了移动端适配，但可能需要根据具体项目调整
|
||
|
||
## 兼容性
|
||
|
||
- ✅ H5
|
||
- ✅ 微信小程序
|
||
- ✅ APP
|
||
- ✅ 其他小程序平台
|
||
|
||
## 后续优化建议
|
||
|
||
1. **图标优化** - 可以添加更精美的AI图标
|
||
2. **动画效果** - 可以添加更流畅的打开/关闭动画
|
||
3. **主题定制** - 支持暗色主题等
|
||
4. **多语言** - 支持国际化
|
||
5. **性能优化** - 懒加载等优化措施
|
||
|
||
## 问题排查
|
||
|
||
如果AI客服功能无法正常工作，请检查：
|
||
|
||
1. 组件路径是否正确
|
||
2. 依赖的 `ai-chat-message` 组件是否存在
|
||
3. 图标资源路径是否正确
|
||
4. 控制台是否有错误信息
|
||
|
||
## 总结
|
||
|
||
本集成方案成功将AI智能客服功能添加到现有的浮动导航组件中，实现了：
|
||
|
||
- ✅ 对项目影响最小
|
||
- ✅ 功能完整可用
|
||
- ✅ 代码结构清晰
|
||
- ✅ 易于维护扩展
|
||
|
||
现在您可以在任何使用 `hover-nav` 组件的页面中享受AI智能客服功能！ |