对话逻辑修复
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
// 完整的聊天记录功能测试脚本
|
||||
// 在聊天页面的浏览器控制台中运行
|
||||
|
||||
(function() {
|
||||
console.log('=== 聊天记录功能完整测试 ===');
|
||||
|
||||
// 1. 检查基础环境
|
||||
function checkBasicEnvironment() {
|
||||
console.log('\n1. 检查基础环境:');
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
console.log('- Token存在:', !!token);
|
||||
|
||||
if (!token) {
|
||||
console.error('❌ 没有找到token，请先登录');
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('- 当前页面:', window.location.pathname);
|
||||
console.log('- Token长度:', token.length);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// 2. 测试API调用
|
||||
async function testAPIEndpoints() {
|
||||
console.log('\n2. 测试API端点:');
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
const baseURL = window.location.origin; // 使用当前域名
|
||||
|
||||
const headers = {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
// 测试分页API
|
||||
try {
|
||||
console.log('- 测试分页API...');
|
||||
const pageResponse = await fetch(`${baseURL}/message/user/page?current=1&size=5`, {
|
||||
method: 'GET',
|
||||
headers
|
||||
});
|
||||
|
||||
console.log(' 状态码:', pageResponse.status);
|
||||
const pageData = await pageResponse.json();
|
||||
console.log(' 响应数据:', pageData);
|
||||
|
||||
if (pageResponse.ok && pageData.code === 200) {
|
||||
console.log(' ✅ 分页API成功');
|
||||
} else {
|
||||
console.log(' ❌ 分页API失败:', pageData.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(' ❌ 分页API错误:', error.message);
|
||||
}
|
||||
|
||||
// 测试搜索API
|
||||
try {
|
||||
console.log('- 测试搜索API...');
|
||||
const searchResponse = await fetch(`${baseURL}/message/user/search`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify({ keyword: '测试', limit: 5 })
|
||||
});
|
||||
|
||||
console.log(' 状态码:', searchResponse.status);
|
||||
const searchData = await searchResponse.json();
|
||||
console.log(' 响应数据:', searchData);
|
||||
|
||||
if (searchResponse.ok && searchData.code === 200) {
|
||||
console.log(' ✅ 搜索API成功');
|
||||
} else {
|
||||
console.log(' ❌ 搜索API失败:', searchData.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(' ❌ 搜索API错误:', error.message);
|
||||
}
|
||||
|
||||
// 测试最近消息API
|
||||
try {
|
||||
console.log('- 测试最近消息API...');
|
||||
const recentResponse = await fetch(`${baseURL}/message/user/recent`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify({ limit: 5 })
|
||||
});
|
||||
|
||||
console.log(' 状态码:', recentResponse.status);
|
||||
const recentData = await recentResponse.json();
|
||||
console.log(' 响应数据:', recentData);
|
||||
|
||||
if (recentResponse.ok && recentData.code === 200) {
|
||||
console.log(' ✅ 最近消息API成功');
|
||||
} else {
|
||||
console.log(' ❌ 最近消息API失败:', recentData.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(' ❌ 最近消息API错误:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 检查前端组件
|
||||
function checkFrontendComponents() {
|
||||
console.log('\n3. 检查前端组件:');
|
||||
|
||||
// 检查聊天记录按钮
|
||||
const historyButton = document.querySelector('.header-right .action-btn');
|
||||
console.log('- 聊天记录按钮:', !!historyButton);
|
||||
|
||||
if (!historyButton) {
|
||||
console.log(' ❌ 未找到聊天记录按钮');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查Vue实例
|
||||
const app = document.querySelector('#app');
|
||||
const vueInstance = app?.__vue__ || app?._vnode?.component?.ctx;
|
||||
console.log('- Vue实例:', !!vueInstance);
|
||||
|
||||
if (vueInstance) {
|
||||
// 检查响应式数据
|
||||
const setupState = vueInstance.setupState || vueInstance.$data;
|
||||
console.log('- showHistory:', setupState?.showHistory?.value);
|
||||
console.log('- historyLoading:', setupState?.historyLoading?.value);
|
||||
console.log('- historyMessages长度:', setupState?.historyMessages?.value?.length || 0);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// 4. 模拟点击测试
|
||||
function simulateClickTest() {
|
||||
console.log('\n4. 模拟点击测试:');
|
||||
|
||||
const historyButton = document.querySelector('.header-right .action-btn');
|
||||
if (!historyButton) {
|
||||
console.log('❌ 无法进行点击测试，按钮不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('- 模拟点击聊天记录按钮...');
|
||||
|
||||
// 添加事件监听器来监控点击
|
||||
let clickDetected = false;
|
||||
const clickHandler = () => {
|
||||
clickDetected = true;
|
||||
console.log(' ✅ 检测到点击事件');
|
||||
};
|
||||
|
||||
historyButton.addEventListener('click', clickHandler, { once: true });
|
||||
|
||||
// 模拟点击
|
||||
historyButton.click();
|
||||
|
||||
// 检查抽屉是否打开
|
||||
setTimeout(() => {
|
||||
const drawer = document.querySelector('.ant-drawer');
|
||||
const drawerVisible = drawer && !drawer.classList.contains('ant-drawer-hidden');
|
||||
|
||||
console.log('- 抽屉是否可见:', drawerVisible);
|
||||
|
||||
if (clickDetected && drawerVisible) {
|
||||
console.log(' ✅ 聊天记录功能正常');
|
||||
} else {
|
||||
console.log(' ❌ 聊天记录功能异常');
|
||||
if (!clickDetected) console.log(' - 点击事件未触发');
|
||||
if (!drawerVisible) console.log(' - 抽屉未显示');
|
||||
}
|
||||
|
||||
// 清理事件监听器
|
||||
historyButton.removeEventListener('click', clickHandler);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 5. 检查网络请求
|
||||
function monitorNetworkRequests() {
|
||||
console.log('\n5. 监控网络请求:');
|
||||
|
||||
// 重写fetch来监控请求
|
||||
const originalFetch = window.fetch;
|
||||
const requests = [];
|
||||
|
||||
window.fetch = function(...args) {
|
||||
const url = args[0];
|
||||
if (typeof url === 'string' && url.includes('/message/user/')) {
|
||||
console.log('- 检测到消息API请求:', url);
|
||||
requests.push({ url, timestamp: Date.now() });
|
||||
}
|
||||
return originalFetch.apply(this, args);
|
||||
};
|
||||
|
||||
// 5秒后恢复原始fetch并报告结果
|
||||
setTimeout(() => {
|
||||
window.fetch = originalFetch;
|
||||
console.log('- 监控期间的API请求数量:', requests.length);
|
||||
requests.forEach(req => {
|
||||
console.log(` ${new Date(req.timestamp).toLocaleTimeString()}: ${req.url}`);
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// 主测试函数
|
||||
async function runCompleteTest() {
|
||||
try {
|
||||
// 检查基础环境
|
||||
if (!checkBasicEnvironment()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 开始监控网络请求
|
||||
monitorNetworkRequests();
|
||||
|
||||
// 测试API端点
|
||||
await testAPIEndpoints();
|
||||
|
||||
// 检查前端组件
|
||||
checkFrontendComponents();
|
||||
|
||||
// 模拟点击测试
|
||||
simulateClickTest();
|
||||
|
||||
console.log('\n=== 测试完成 ===');
|
||||
console.log('请查看上述结果，如果API测试成功但前端功能异常，请检查:');
|
||||
console.log('1. Vue组件是否正确挂载');
|
||||
console.log('2. 事件绑定是否正确');
|
||||
console.log('3. 响应式数据是否正确更新');
|
||||
console.log('4. 是否有JavaScript错误');
|
||||
|
||||
} catch (error) {
|
||||
console.error('测试过程中发生错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 运行测试
|
||||
runCompleteTest();
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user