Uniapp/lucky_shop

Fork 0

Files

ZF sun 29280f6f57 chore: 保留ai-chat-popup 及 ai-chat-flaot组件

2025-11-04 16:16:03 +08:00

5.0 KiB

Raw Blame History

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客服按钮和弹窗

功能特性

✅ 已实现功能

浮动AI客服按钮 - 在现有浮动导航中添加AI客服按钮
智能弹窗 - 点击按钮弹出AI聊天界面
未读消息提示 - 显示未读消息数量小红点
全屏模式 - 支持全屏/窗口模式切换
响应式设计 - 适配不同屏幕尺寸
复用现有组件 - 基于现有的 ai-chat-message 组件

🔧 技术特点

最小化影响 - 只修改现有组件，不改变项目结构
模块化设计 - 弹窗组件独立，可复用
事件驱动 - 完整的生命周期事件
性能优化 - 按需加载，避免资源浪费

使用方法

1. 自动集成

AI客服功能已经自动集成到 hover-nav 组件中，无需额外配置。

2. 自定义配置

如果需要自定义AI客服功能，可以修改以下配置：

<!-- 在 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. 事件监听

可以监听以下事件来处理业务逻辑：

// 未读消息更新
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客服按钮样式

.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 中定义，可以根据需要自定义。

注意事项

图标资源 - 需要确保AI图标文件存在，默认路径为 /static/images/ai-icon.png
组件依赖 - AI聊天弹窗依赖于现有的 ai-chat-message 组件
z-index - 弹窗的z-index设置为1000，确保在其他元素之上
响应式适配 - 弹窗已经做了移动端适配，但可能需要根据具体项目调整

兼容性

✅ H5
✅ 微信小程序
✅ APP
✅ 其他小程序平台

后续优化建议

图标优化 - 可以添加更精美的AI图标
动画效果 - 可以添加更流畅的打开/关闭动画
主题定制 - 支持暗色主题等
多语言 - 支持国际化
性能优化 - 懒加载等优化措施

问题排查

如果AI客服功能无法正常工作，请检查：

组件路径是否正确
依赖的 ai-chat-message 组件是否存在
图标资源路径是否正确
控制台是否有错误信息

总结

本集成方案成功将AI智能客服功能添加到现有的浮动导航组件中，实现了：

✅ 对项目影响最小
✅ 功能完整可用
✅ 代码结构清晰
✅ 易于维护扩展

现在您可以在任何使用 hover-nav 组件的页面中享受AI智能客服功能！

5.0 KiB Raw Blame History Unescape Escape