diff --git a/.gitignore b/.gitignore index 14d7d69..db83a01 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ /.hbuilderx /.idea /node_modules +/iconfont-preview.html diff --git a/common/js/ai-service.js b/common/js/ai-service.js index 58353d1..88c4dff 100644 --- a/common/js/ai-service.js +++ b/common/js/ai-service.js @@ -431,4 +431,4 @@ export default { return null; // #endif } -}; \ No newline at end of file +}; diff --git a/common/js/config.js b/common/js/config.js index ec8d65b..4b3fbbc 100644 --- a/common/js/config.js +++ b/common/js/config.js @@ -77,16 +77,18 @@ export default { * 然后将 site.js 文件放到 `unpackage\dist\build\mp-weixin\` 目录下面 */ // 商户ID - uniacid: uniacid, //825 + uniacid: 1, //825 //api请求地址 - baseUrl: domain, + baseUrl: 'https://dev.aigc-quickapp.com/', + // baseUrl: 'http://localhost:8010/', // 图片域名 - imgDomain: domain, + imgDomain: 'https://dev.aigc-quickapp.com/', + //imgDomain: 'http://localhost:8010/', // H5端域名 - h5Domain: domain, + h5Domain: 'https://dev.aigc-quickapp.com/', // // api请求地址 // baseUrl: 'https://tsaas.liveplatform.cn/', diff --git a/common/js/golbalConfig.js b/common/js/golbalConfig.js index f00e78a..d412a07 100644 --- a/common/js/golbalConfig.js +++ b/common/js/golbalConfig.js @@ -69,6 +69,10 @@ export default { servicerConfig() { return this.$store.state.servicerConfig; }, + // 企业微信配置 + wxworkConfig() { + return this.$store.state.wxworkConfig; + }, diySeckillInterval() { return this.$store.state.diySeckillInterval; }, diff --git a/common/js/util.js b/common/js/util.js index 9977c54..8fc002c 100644 --- a/common/js/util.js +++ b/common/js/util.js @@ -606,6 +606,33 @@ export default { + /** + * 打开微信企业客服 + * @param {Function} fallbackFunc 降级处理函数 + */ + openWxWorkServiceChat(fallbackFunc) { + // #ifdef MP-WEIXIN + let wxworkConfig = store.state?.wxworkConfig + if (wxworkConfig?.enable && wxworkConfig?.contact_url) { + // 直接使用活码链接跳转 + wx.navigateToMiniProgram({ + appId: 'wxeb490c6f9b154ef9', // 是企业微信官方小程序的AppID(固定值, 由腾讯企业微信团队维护, 不需要修改,用于展示"添加企业微信联系人"的官方页面) + path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig?.contact_url)}`, + success: () => { + console.log('跳转企业微信成功'); + }, + fail: (err) => { + console.error('跳转企业微信失败:', err); + // 降级处理:使用原有客服方式 + fallbackFunc && fallbackFunc(); + } + }); + } else { + fallbackFunc && fallbackFunc(); + } + // #endif + }, + /** * 自定义模板的跳转链接 * @param {Object} link @@ -669,16 +696,19 @@ export default { // #endif // #ifdef MP-WEIXIN - wx.openCustomerServiceChat({ - extInfo: { - url: config.wxwork_url - }, - corpId: config.corpid, - showMessageCard: true, - sendMessageTitle: 'this.sendMessageTitle', - sendMessagePath: 'this.sendMessagePath', - sendMessageImg: 'this.sendMessageImg' + this.openWxWorkServiceChat(() => { + wx.openCustomerServiceChat({ + extInfo: { + url: config.wxwork_url + }, + corpId: config.corpid, + showMessageCard: true, + sendMessageTitle: 'this.sendMessageTitle', + sendMessagePath: 'this.sendMessagePath', + sendMessageImg: 'this.sendMessageImg' + }); }); + // #endif break; case 'third': diff --git a/components/ai-chat-message/README.md b/components/ai-chat-message/README.md new file mode 100644 index 0000000..0f999a8 --- /dev/null +++ b/components/ai-chat-message/README.md @@ -0,0 +1,271 @@ +# AI智能客服组件 + +一个功能完整的AI智能客服对话组件,支持多种消息类型和交互功能。 + +## 功能特性 + +- ✅ 支持对话上下文管理 +- ✅ 支持多种消息类型:文本、Markdown、文件、音频、视频、链接、商品卡片 +- ✅ 支持语音输入和录音 +- ✅ 支持图片、文件、位置等附件发送 +- ✅ 支持消息操作按钮(点赞、踩等) +- ✅ 支持历史消息加载 +- ✅ 响应式设计,适配多端 + +## 安装使用 + +### 1. 引入组件 + +在 `pages.json` 中注册组件: + +```json +{ + "usingComponents": { + "ai-chat-message": "/components/ai-chat-message/ai-chat-message" + } +} +``` + +### 2. 在页面中使用 + +```vue + + + +``` + +## 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 + +``` + +## 注意事项 + +1. 组件已适配项目中已有的 `ns-loading` 组件 +2. 需要配置对应的图标字体文件 +3. 音频播放功能在 H5 和 APP 端支持较好 +4. 文件预览功能依赖平台能力 +5. 语音输入功能需要用户授权麦克风权限 \ No newline at end of file diff --git a/components/ai-chat-message/ai-chat-message.vue b/components/ai-chat-message/ai-chat-message.vue index 9f6b438..c24fab4 100644 --- a/components/ai-chat-message/ai-chat-message.vue +++ b/components/ai-chat-message/ai-chat-message.vue @@ -2759,4 +2759,4 @@ $radius-lg: 36rpx; } } } - \ No newline at end of file + diff --git a/components/ai-chat-message/demo.vue b/components/ai-chat-message/demo.vue new file mode 100644 index 0000000..dad9d5f --- /dev/null +++ b/components/ai-chat-message/demo.vue @@ -0,0 +1,288 @@ + + + + + \ No newline at end of file diff --git a/components/hover-nav/hover-nav.vue b/components/hover-nav/hover-nav.vue index 61ad55b..e75fb19 100644 --- a/components/hover-nav/hover-nav.vue +++ b/components/hover-nav/hover-nav.vue @@ -2,25 +2,60 @@ - - - - - + + +