优化目录结构

2026-05-25 20:37:36 +08:00
parent bbe7e71274
commit 40fd7f7e08
101 changed files with 108 additions and 110 deletions
--- a/client/public/call/chat/renderer-chat.js
+++ b/client/public/call/chat/renderer-chat.js
@@ -0,0 +1,61 @@
+export function createMessageElement(message, formatTimestamp) {
+    const messageDiv = document.createElement('div');
+    let messageClass = 'chat-bubble';
+
+    if (message.type === 'system') {
+        messageClass += ' message-system';
+    } else if (message.isSelf) {
+        messageClass += ' message-self';
+    } else {
+        messageClass += ' message-other';
+    }
+
+    messageDiv.className = messageClass;
+    messageDiv.dataset.messageId = message.id;
+
+    const contentHTML = message.type === 'file' && message.content.startsWith('data:image/')
+        ? `
+            <div class="message-image-container">
+                <img src="${message.content}" class="message-image" alt="${message.fileName || '\u56fe\u7247'}">
+                ${message.fileName ? `<div class="message-image-name">${message.fileName}</div>` : ''}
+            </div>
+        `
+        : `
+            <div class="message-text">
+                ${message.content}
+            </div>
+        `;
+
+    messageDiv.innerHTML = `
+        <div class="message-header">
+            <img src="${message.senderAvatar}" class="message-avatar">
+            <div>
+                <span class="message-sender">${message.senderName}</span>
+                <span class="message-time">${formatTimestamp(message.timestamp)}</span>
+            </div>
+        </div>
+        <div class="message-content">
+            ${contentHTML}
+        </div>
+    `;
+
+    return messageDiv;
+}
+
+export function renderChatMessagesInto(container, messages, formatTimestamp) {
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    const startTimeElement = document.createElement('div');
+    startTimeElement.className = 'text-center text-xs text-gray-500 my-4';
+    const startTime = messages[0]?.timestamp || new Date().toISOString();
+    startTimeElement.textContent = `\u901a\u8bdd\u5f00\u59cb ${formatTimestamp(startTime)}`;
+    container.appendChild(startTimeElement);
+
+    messages.forEach(message => {
+        container.appendChild(createMessageElement(message, formatTimestamp));
+    });
+
+    container.scrollTop = container.scrollHeight;
+}