chore: 保留ai-chat-popup 及 ai-chat-flaot组件

2025-11-04 16:16:03 +08:00
parent 1c2fee28ec
commit 29280f6f57
12 changed files with 1735 additions and 661 deletions
--- a/components/ai-chat-popup/README.md
+++ b/components/ai-chat-popup/README.md
@@ -0,0 +1,173 @@
+# 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智能客服功能！