# 聊天记录调试指南

## 问题总结

1. **Controller层优化完成**：
   - 移除了业务逻辑，业务代码移到Service层
   - 使用专门的Request和Response DTO
   - 统一使用Result返回格式

2. **前端调用问题修复**：
   - 添加了缺失的`useUserStore`导入
   - 修正了API调用方法（搜索和最近消息改为POST）

## 调试步骤

### 1. 检查前端基础环境
在浏览器控制台运行：
```javascript
// 检查token
console.log('Token:', localStorage.getItem('token'))

// 检查用户信息
console.log('User store:', window.Vue?.config?.globalProperties?.$stores?.user)

// 检查API基础配置
console.log('API Base URL:', 'http://localhost:8080') // 根据实际情况修改
```

### 2. 手动测试API调用
在浏览器控制台运行：
```javascript
// 测试获取用户消息分页
fetch('/message/user/page?current=1&size=5', {
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`,
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log('分页API结果:', data))
.catch(err => console.error('分页API错误:', err))

// 测试搜索消息
fetch('/message/user/search', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ keyword: '测试', limit: 5 })
})
.then(res => res.json())
.then(data => console.log('搜索API结果:', data))
.catch(err => console.error('搜索API错误:', err))

// 测试获取最近消息
fetch('/message/user/recent', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ limit: 5 })
})
.then(res => res.json())
.then(data => console.log('最近消息API结果:', data))
.catch(err => console.error('最近消息API错误:', err))
```

### 3. 检查聊天记录按钮事件
在聊天页面控制台运行：
```javascript
// 查找聊天记录按钮
const historyButton = document.querySelector('.header-right .action-btn')
console.log('聊天记录按钮:', historyButton)

// 检查点击事件
if (historyButton) {
  historyButton.addEventListener('click', () => {
    console.log('聊天记录按钮被点击')
  })
}

// 检查抽屉状态
const drawer = document.querySelector('.history-drawer')
console.log('聊天记录抽屉:', drawer)
```

### 4. 检查Vue组件状态
在聊天页面控制台运行：
```javascript
// 检查Vue实例
const app = document.querySelector('#app').__vue__
console.log('Vue app:', app)

// 检查聊天记录相关的响应式数据
console.log('showHistory:', app?.setupState?.showHistory?.value)
console.log('historyMessages:', app?.setupState?.historyMessages?.value)
console.log('historyLoading:', app?.setupState?.historyLoading?.value)
```

## 常见问题排查

### 1. Token问题
- 检查localStorage中是否有token
- 检查token是否过期
- 检查token格式是否正确

### 2. 网络请求问题
- 检查浏览器Network面板
- 检查是否有CORS错误
- 检查API路径是否正确

### 3. 后端认证问题
- 检查后端日志中的认证信息
- 检查UserContextHolder是否正确设置
- 检查CurrentUserUtil.requireCurrentUserId()是否抛出异常

### 4. 前端组件问题
- 检查Vue组件是否正确挂载
- 检查响应式数据是否正确初始化
- 检查事件绑定是否正确

## 修复后的API接口

### 后端接口
- `GET /message/user/page` - 获取用户消息分页
- `POST /message/user/search` - 搜索用户消息
- `POST /message/user/recent` - 获取用户最近消息

### 前端调用
```javascript
// 获取分页消息
messageApi.getUserMessages(1, 20)

// 搜索消息
messageApi.searchUserMessages('关键词', 50)

// 获取最近消息
messageApi.getRecentMessages(10)
```

## 预期结果
- 点击聊天记录按钮后，抽屉正常打开
- 控制台显示API调用日志
- 聊天记录正确加载和显示
- 搜索功能正常工作