303 lines
10 KiB
JavaScript
303 lines
10 KiB
JavaScript
let currentOffset = 0;
|
||
const limit = 50;
|
||
let currentView = 'groups';
|
||
let currentGroupId = null;
|
||
// 页面加载时初始化
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
loadStatistics();
|
||
loadGroupMessages();
|
||
loadMessages();
|
||
});
|
||
|
||
// 加载统计信息
|
||
async function loadStatistics() {
|
||
try {
|
||
const response = await fetch('api/statistics');
|
||
const data = await response.json();
|
||
if (data) {
|
||
const stats = data;
|
||
document.getElementById('userCount').textContent = stats.user_count;
|
||
document.getElementById('groupCount').textContent = stats.group_count;
|
||
document.getElementById('messageCount').textContent = stats.message_count;
|
||
document.getElementById('fileCount').textContent = stats.file_count;
|
||
}
|
||
} catch (error) {
|
||
console.error('加载统计信息失败:', error);
|
||
}
|
||
}
|
||
|
||
// 加载按群组分组的消息统计
|
||
async function loadGroupMessages() {
|
||
try {
|
||
const response = await fetch('api/groups');
|
||
const data = await response.json();
|
||
const groupList = document.getElementById('groupList');
|
||
|
||
if (data.success) {
|
||
const groups = data.groups || [];
|
||
groupList.innerHTML = '';
|
||
|
||
if (groups.length === 0) {
|
||
groupList.innerHTML = '<li>暂无群组</li>';
|
||
return;
|
||
} else {
|
||
currentGroupId = groups[0].id;
|
||
}
|
||
|
||
groups.forEach(group => {
|
||
const li = document.createElement('li');
|
||
li.className = 'group-item';
|
||
li.setAttribute('data-group-id', group.id);
|
||
li.onclick = () => selectGroup(group.id);
|
||
|
||
const groupName = document.createElement('div');
|
||
groupName.className = 'group-name';
|
||
groupName.textContent = group.name || group.id;
|
||
|
||
const groupInfo = document.createElement('div');
|
||
groupInfo.className = 'group-info';
|
||
groupInfo.innerHTML = `
|
||
<span>创建者: ${group.owner || '未知'}</span>
|
||
`;
|
||
|
||
li.appendChild(groupName);
|
||
li.appendChild(groupInfo);
|
||
groupList.appendChild(li);
|
||
});
|
||
|
||
// 默认选择第一个群组
|
||
if (currentView === 'groups' && groups.length > 0) {
|
||
selectGroup(groups[0].id);
|
||
}
|
||
} else {
|
||
groupList.innerHTML = '<li>加载失败</li>';
|
||
}
|
||
} catch (error) {
|
||
console.error('加载群组消息失败:', error);
|
||
}
|
||
}
|
||
|
||
// 选择群组
|
||
function selectGroup(groupId) {
|
||
currentGroupId = groupId;
|
||
currentOffset = 0;
|
||
|
||
// 更新选中状态
|
||
document.querySelectorAll('.group-item').forEach(item => {
|
||
item.classList.remove('active');
|
||
});
|
||
|
||
// 找到对应的群组项并添加选中状态
|
||
document.querySelectorAll('.group-item').forEach(item => {
|
||
// 使用data-group-id属性来准确匹配群组
|
||
if (item.getAttribute('data-group-id') === groupId) {
|
||
item.classList.add('active');
|
||
|
||
// 更新群组信息
|
||
document.getElementById('currentGroup').textContent = item.querySelector('.group-name').textContent;
|
||
document.getElementById('messageCountDisplay').textContent = '消息数量: 加载中...';
|
||
document.getElementById('latestTime').textContent = '最新消息: 加载中...';
|
||
}
|
||
});
|
||
|
||
// 加载该群组的消息
|
||
loadMessages();
|
||
|
||
// 加载统计信息
|
||
loadStatistics();
|
||
}
|
||
|
||
|
||
// 加载更多消息
|
||
async function loadMoreMessages() {
|
||
await loadMessages();
|
||
}
|
||
|
||
// 关闭聊天记录模态框
|
||
function closeChatRecordModal() {
|
||
document.getElementById('chatRecordModal').style.display = 'none';
|
||
}
|
||
|
||
// 显示聊天记录模态框
|
||
function showChatRecordModal(chatrecordData) {
|
||
const modal = document.getElementById('chatRecordModal');
|
||
const title = document.getElementById('modalTitle');
|
||
const content = document.getElementById('chatRecordContent');
|
||
|
||
// 设置模态框标题
|
||
if (chatrecordData.chatrecord && chatrecordData.chatrecord.title) {
|
||
title.textContent = chatrecordData.chatrecord.title;
|
||
} else {
|
||
title.textContent = '聊天记录';
|
||
}
|
||
|
||
// 渲染聊天记录内容
|
||
renderChatRecordContent(chatrecordData, content);
|
||
|
||
modal.style.display = 'block';
|
||
}
|
||
|
||
// 渲染聊天记录内容
|
||
function renderChatRecordContent(chatrecordData, contentElement) {
|
||
try {
|
||
if (!chatrecordData.chatrecord || !chatrecordData.chatrecord.item) {
|
||
contentElement.innerHTML = '<div class="error">聊天记录数据格式错误</div>';
|
||
return;
|
||
}
|
||
|
||
const chatItems = chatrecordData.chatrecord.item;
|
||
|
||
if (!Array.isArray(chatItems) || chatItems.length === 0) {
|
||
contentElement.innerHTML = '<div class="error">暂无聊天记录内容</div>';
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
chatItems.forEach(item => {
|
||
// 处理不同类型的聊天记录项
|
||
let contentHtml = '';
|
||
|
||
if (item.type === 'ChatRecordText') {
|
||
// 文本消息
|
||
try {
|
||
const contentData = JSON.parse(item.content);
|
||
contentHtml = contentData.content || item.content || '';
|
||
} catch (e) {
|
||
contentHtml = item.content || '';
|
||
}
|
||
} else if (item.type === 'ChatRecordImage') {
|
||
// 图片消息
|
||
contentHtml = '<div class="chat-record-image">[图片消息]</div>';
|
||
} else {
|
||
// 其他类型消息
|
||
contentHtml = `[${item.type}] ${item.content || ''}`;
|
||
}
|
||
|
||
html += `
|
||
<div class="chat-record-item">
|
||
<div class="chat-record-sender">${item.from_chatroom ? '群聊' : '私聊'}</div>
|
||
<div class="chat-record-text">${contentHtml}</div>
|
||
<div class="chat-record-time">${new Date(item.msgtime * 1000).toLocaleString()}</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
contentElement.innerHTML = html;
|
||
} catch (error) {
|
||
console.error('渲染聊天记录失败:', error);
|
||
contentElement.innerHTML = '<div class="error">渲染聊天记录失败: ' + error.message + '</div>';
|
||
}
|
||
}
|
||
|
||
// 加载消息
|
||
async function loadMessages() {
|
||
try {
|
||
const chatMessages = document.getElementById('chatMessages');
|
||
if (!currentGroupId) {
|
||
chatMessages.innerHTML = '<div class="loading">暂无消息</div>';
|
||
return;
|
||
}
|
||
let url = `api/group_messages?limit=${limit}&offset=${currentOffset}&group_id=${currentGroupId}`;
|
||
|
||
const response = await fetch(url);
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
const messages = data.messages || [];
|
||
|
||
if (messages.length === 0) {
|
||
if (currentOffset === 0) {
|
||
chatMessages.innerHTML = '<div class="loading">暂无消息</div>';
|
||
}
|
||
document.getElementById('messageCountDisplay').textContent = `消息数量: ${data.total || 0}`;
|
||
document.getElementById('latestTime').textContent = `最新消息: ${data.lastest_time || '暂无'}`;
|
||
return;
|
||
}
|
||
|
||
// 如果是第一次加载（offset=0），清空消息区域
|
||
if (currentOffset === 0) {
|
||
chatMessages.innerHTML = '';
|
||
}
|
||
|
||
// 将新消息插入到消息区域的开头（向上加载历史消息）
|
||
messages.forEach(message => {
|
||
const messageDiv = createMessageElement(message);
|
||
chatMessages.insertBefore(messageDiv, chatMessages.firstChild);
|
||
});
|
||
|
||
// 更新偏移量，用于下次加载更多
|
||
currentOffset += limit;
|
||
|
||
document.getElementById('messageCountDisplay').textContent = `消息数量: ${data.total || 0}`;
|
||
document.getElementById('latestTime').textContent = `最新消息: ${data.lastest_time || '暂无'}`;
|
||
|
||
} else {
|
||
chatMessages.innerHTML = '<div class="error">加载消息失败</div>';
|
||
}
|
||
} catch (error) {
|
||
console.error('加载消息失败:', error);
|
||
document.getElementById('chatMessages').innerHTML = '<div class="error">加载消息失败: ' + error.message + '</div>';
|
||
}
|
||
}
|
||
|
||
// 创建消息元素
|
||
function createMessageElement(message) {
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = 'message';
|
||
|
||
// 判断是否为自己的消息
|
||
if (message.is_own) {
|
||
messageDiv.classList.add('own');
|
||
}
|
||
|
||
const avatar = document.createElement('div');
|
||
avatar.className = 'avatar';
|
||
avatar.textContent = message.sender_name ? message.sender_name.charAt(0).toUpperCase() : 'U';
|
||
|
||
const contentDiv = document.createElement('div');
|
||
contentDiv.className = 'message-content';
|
||
|
||
const senderDiv = document.createElement('div');
|
||
senderDiv.className = 'message-sender';
|
||
senderDiv.textContent = message.sender_name || '未知用户';
|
||
|
||
const textDiv = document.createElement('div');
|
||
textDiv.className = 'message-text';
|
||
|
||
// 处理消息内容
|
||
if (message.content) {
|
||
if (message.type === 'chatrecord' && message.chatrecord_data) {
|
||
const chatrecordBtn = document.createElement('button');
|
||
chatrecordBtn.className = 'chatrecord-btn';
|
||
chatrecordBtn.textContent = message.display_content || '[聊天记录]';
|
||
chatrecordBtn.onclick = () => showChatRecordModal(message.chatrecord_data);
|
||
textDiv.appendChild(chatrecordBtn);
|
||
} else {
|
||
textDiv.textContent = message.display_content;
|
||
}
|
||
} else {
|
||
textDiv.textContent = '[空消息]';
|
||
}
|
||
|
||
const timeDiv = document.createElement('div');
|
||
timeDiv.className = 'message-time';
|
||
timeDiv.textContent = message.formatted_time;
|
||
|
||
contentDiv.appendChild(senderDiv);
|
||
contentDiv.appendChild(textDiv);
|
||
contentDiv.appendChild(timeDiv);
|
||
|
||
messageDiv.appendChild(avatar);
|
||
messageDiv.appendChild(contentDiv);
|
||
|
||
return messageDiv;
|
||
}
|
||
|
||
|
||
// 点击模态框外部关闭
|
||
window.onclick = function (event) {
|
||
const modal = document.getElementById('chatRecordModal');
|
||
if (event.target === modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
} |