新增功能

2026-03-09 09:55:04 +08:00
parent 7b76671988
commit 02ae537b4c
12 changed files with 2019 additions and 22 deletions
@@ -0,0 +1,117 @@
+# 表情功能故障排查指南
+
+## 问题描述
+表情按钮显示但点击无反应
+
+## 可能的原因
+
+### 1. 表情包资源未加载
+腾讯云 Chat UIKit 的表情包需要从 CDN 加载资源。
+
+**检查方法**：
+1. 打开浏览器开发者工具（F12）
+2. 切换到 Console 标签
+3. 查看是否有表情相关的错误信息
+4. 切换到 Network 标签
+5. 点击表情按钮，查看是否有请求失败
+
+### 2. 表情包版权限制
+根据腾讯云文档说明：
+> 为尊重表情设计版权，chat-uikit-vue3 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。默认的小黄脸表情包版权归腾讯云所有，仅供授权使用。
+
+**解决方案**：
+- 使用腾讯云提供的默认表情包（需要授权）
+- 或者配置自己的表情包
+
+### 3. 样式文件加载问题
+表情选择器的样式可能没有正确加载。
+
+**检查方法**：
+1. 打开开发者工具
+2. 点击表情按钮
+3. 检查 Elements 标签，看是否有表情选择器的 DOM 元素生成
+4. 检查该元素的样式是否正确应用
+
+## 解决方案
+
+### 方案 1：检查网络请求
+```javascript
+// 在浏览器控制台执行
+console.log('检查表情资源加载情况')
+```
+
+### 方案 2：使用自定义表情包
+如果默认表情包无法使用，可以配置自定义表情包。
+
+需要修改 `MessageInput` 组件的配置：
+
+```vue
+<MessageInput :emojiConfig="customEmojiConfig" />
+```
+
+```typescript
+const customEmojiConfig = {
+  emojiList: [
+    { name: '微笑', url: '/emoji/smile.png', code: '[微笑]' },
+    { name: '大笑', url: '/emoji/laugh.png', code: '[大笑]' },
+    // ... 更多表情
+  ]
+}
+```
+
+### 方案 3：暂时禁用表情功能
+如果表情功能不是必需的，可以暂时禁用：
+
+```vue
+<MessageInput :showEmoji="false" />
+```
+
+### 方案 4：联系腾讯云获取授权
+如果需要使用腾讯云的默认表情包，需要：
+1. 访问 [腾讯云工单系统](https://console.cloud.tencent.com/workorder/category)
+2. 提交工单申请表情包使用授权
+
+## 临时解决方案
+
+目前其他功能（文本、图片、文件、视频）都可以正常使用。表情功能可以：
+1. 先跳过，使用文本消息
+2. 或者使用 Unicode 表情符号（😊😂❤️等）直接在文本中输入
+
+## 调试步骤
+
+### 步骤 1：检查控制台错误
+打开浏览器控制台，点击表情按钮，查看是否有错误信息：
+- 404 错误：表情资源文件未找到
+- CORS 错误：跨域问题
+- 其他 JavaScript 错误
+
+### 步骤 2：检查 DOM 元素
+点击表情按钮后，检查是否生成了表情选择器的 DOM：
+```
+<div class="emoji-picker">
+  <!-- 应该有表情列表 -->
+</div>
+```
+
+### 步骤 3：检查样式
+如果 DOM 存在但不可见，可能是样式问题：
+```css
+/* 检查这些样式是否正确加载 */
+.emoji-picker {
+  display: block;
+  position: absolute;
+  /* ... */
+}
+```
+
+## 建议
+
+1. **短期方案**：使用文本消息和其他功能（图片、文件等）
+2. **中期方案**：配置自定义表情包
+3. **长期方案**：申请腾讯云表情包授权或购买商业表情包
+
+## 参考文档
+
+- [Chat UIKit Vue3 官方文档](https://cloud.tencent.com/document/product/269/123108)
+- [表情包配置说明](https://cloud.tencent.com/document/product/269/37411)
+- [工单提交](https://console.cloud.tencent.com/workorder/category)