# 表情功能故障排查指南

## 问题描述
表情按钮显示但点击无反应

## 可能的原因

### 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)