优化

client/public/call/chat/renderer-chat.js

@@ -1,3 +1,5 @@
+import { createTextElement, textValue } from '../../shared/dom.js';
+
 export function createMessageElement(message, formatTimestamp) {
     const messageDiv = document.createElement('div');
     let messageClass = 'chat-bubble';
@@ -13,31 +15,45 @@ export function createMessageElement(message, formatTimestamp) {
     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>
-        `;
+    const header = document.createElement('div');
+    header.className = 'message-header';
 
-    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>
-    `;
+    const avatar = document.createElement('img');
+    avatar.className = 'message-avatar';
+    avatar.src = textValue(message.senderAvatar);
+    avatar.alt = textValue(message.senderName, '\u7528\u6237');
+    header.appendChild(avatar);
+
+    const headerText = document.createElement('div');
+    headerText.appendChild(createTextElement('span', 'message-sender', message.senderName));
+    headerText.appendChild(createTextElement('span', 'message-time', formatTimestamp(message.timestamp)));
+    header.appendChild(headerText);
+
+    const content = document.createElement('div');
+    content.className = 'message-content';
+    const rawContent = textValue(message.content);
+
+    if (message.type === 'file' && rawContent.startsWith('data:image/')) {
+        const imageContainer = document.createElement('div');
+        imageContainer.className = 'message-image-container';
+
+        const image = document.createElement('img');
+        image.src = rawContent;
+        image.className = 'message-image';
+        image.alt = textValue(message.fileName, '\u56fe\u7247');
+        imageContainer.appendChild(image);
+
+        if (message.fileName) {
+            imageContainer.appendChild(createTextElement('div', 'message-image-name', message.fileName));
+        }
+
+        content.appendChild(imageContainer);
+    } else {
+        content.appendChild(createTextElement('div', 'message-text', rawContent));
+    }
+
+    messageDiv.appendChild(header);
+    messageDiv.appendChild(content);
 
     return messageDiv;
 }