【m】布局修改完成确认

WebApp/client/public/onebyone/renderer.js

@@ -38,6 +38,8 @@ class UIRenderer {
             sidebar: document.getElementById('sidebar'),
             chatContent: document.getElementById('chatContent'),
             userList: document.getElementById('userList'),
+            localMediaStatus: document.getElementById('localMediaStatus'),
+            localMuteIcon: document.querySelector('[data-field="localUser.muteIcon"]'),
 
             // 控制按钮
             micBtn: document.getElementById('micBtn'),
@@ -66,6 +68,7 @@ class UIRenderer {
             case 'LOCAL_MEDIA_CHANGE':
                 this.renderControlButtons(state.session.localUser.mediaState);
                 this.renderLocalVideo(state.session.localUser);
+                this.renderLocalUserStatus(state.session.localUser);
                 break;
             case 'REMOTE_MEDIA_CHANGE':
                 this.renderRemoteVideo(state.session.remoteUser);
@@ -142,6 +145,36 @@ class UIRenderer {
         if (this.elements.localAudioWave) {
             toggleElement(this.elements.localAudioWave, localUser.mediaState.isSpeaking);
         }
+
+        // 同时渲染本地用户状态
+        this.renderLocalUserStatus(localUser);
+    }
+
+    // 渲染本地用户状态
+    renderLocalUserStatus(localUser) {
+        // 更新本地媒体状态文本
+        if (this.elements.localMediaStatus) {
+            if (!localUser.mediaState.audio) {
+                this.elements.localMediaStatus.textContent = '静音中';
+                this.elements.localMediaStatus.className = 'text-xs text-gray-500';
+            } else if (!localUser.mediaState.video) {
+                this.elements.localMediaStatus.textContent = '视频关闭';
+                this.elements.localMediaStatus.className = 'text-xs text-gray-500';
+            } else {
+                this.elements.localMediaStatus.textContent = '在线';
+                this.elements.localMediaStatus.className = 'text-xs text-green-400';
+            }
+        }
+
+        // 更新静音图标
+        if (this.elements.localMuteIcon) {
+            if (!localUser.mediaState.audio) {
+                this.elements.localMuteIcon.classList.remove('hidden');
+                this.elements.localMuteIcon.className = 'fas fa-microphone-slash text-gray-500 text-xs';
+            } else {
+                this.elements.localMuteIcon.classList.add('hidden');
+            }
+        }
     }
 
     // 渲染控制按钮
@@ -200,6 +233,24 @@ class UIRenderer {
         messageDiv.className = messageClass;
         messageDiv.dataset.messageId = message.id;
 
+        let contentHTML = '';
+        if (message.type === 'file' && message.content.startsWith('data:image/')) {
+            // 图片消息
+            contentHTML = `
+                <div class="message-image-container">
+                    <img src="${message.content}" class="message-image" alt="${message.fileName || '图片'}">
+                    ${message.fileName ? `<div class="message-image-name">${message.fileName}</div>` : ''}
+                </div>
+            `;
+        } else {
+            // 文本消息
+            contentHTML = `
+                <div class="message-text">
+                    ${message.content}
+                </div>
+            `;
+        }
+
         messageDiv.innerHTML = `
             <div class="message-header">
                 <img src="${message.senderAvatar}" class="message-avatar">
@@ -209,7 +260,7 @@ class UIRenderer {
                 </div>
             </div>
             <div class="message-content">
-                ${message.content}
+                ${contentHTML}
             </div>
         `;