【m】布局修改完成确认

WebApp/client/public/onebyone/index.html

@@ -360,9 +360,11 @@
             -->
             <div class="p-4 border-t border-white/10">
                 <div class="glass rounded-2xl flex items-center gap-2 p-2">
-                    <button class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-gray-400 transition-colors">
+                    <button class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-gray-400 transition-colors" onclick="openImagePicker()">
                         <i class="fas fa-plus"></i>
                     </button>
+                    <!-- 隐藏的文件输入元素 -->
+                    <input type="file" id="imageInput" accept="image/*" class="hidden" onchange="handleImageUpload(event)">
                     <!-- [INPUT_FIELD] [BIND: inputValue] [EVENT: onEnter => sendMessage()] -->
                     <input type="text"
                            id="chatInput"

WebApp/client/public/onebyone/main.js

@@ -180,6 +180,61 @@ function bindDomEvents() {
         }
     };
 
+    // 打开图片选择器
+    window.openImagePicker = function() {
+        document.getElementById('imageInput').click();
+    };
+
+    // 处理图片上传
+    window.handleImageUpload = function(event) {
+        const file = event.target.files[0];
+        if (file) {
+            // 检查文件类型
+            if (!file.type.startsWith('image/')) {
+                showNotification('请选择图片文件', 3000);
+                return;
+            }
+
+            // 检查文件大小（限制为5MB）
+            if (file.size > 5 * 1024 * 1024) {
+                showNotification('图片文件不能超过5MB', 3000);
+                return;
+            }
+
+            // 读取图片文件
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const imageUrl = e.target.result;
+                sendImageMessage(imageUrl, file.name);
+            };
+            reader.readAsDataURL(file);
+
+            // 重置文件输入
+            event.target.value = '';
+        }
+    };
+
+    // 发送图片消息
+    function sendImageMessage(imageUrl, fileName) {
+        const state = store.getState();
+        const newMessage = {
+            id: generateId(),
+            senderId: state.session.localUser.id,
+            senderName: state.session.localUser.name,
+            senderAvatar: state.session.localUser.avatar,
+            content: imageUrl,
+            fileName: fileName,
+            type: 'file',
+            timestamp: new Date().toISOString(),
+            isSelf: true
+        };
+
+        store.addMessage(newMessage);
+
+        // 发送消息到服务器
+        // wsManager.send('send-message', newMessage);
+    }
+
     // 键盘快捷键
     document.addEventListener('keydown', (event) => {
         // 空格键静音

WebApp/client/public/onebyone/models.js

@@ -101,7 +101,7 @@ const mockMessages = [
         id: "msg-001",
         senderId: "system",
         senderName: "系统",
-        senderAvatar: "https://via.placeholder.com/100",
+        senderAvatar: "/images/screenshot.png",
         content: "通话已建立连接",
         type: "system",
         timestamp: "2024-01-15T14:30:00.000Z",

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>
         `;
 

WebApp/client/public/onebyone/style.css

@@ -134,6 +134,30 @@ body {
     border-top-right-radius: 0;
 }
 
+/* 图片消息样式 */
+.message-image-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.message-image {
+    max-width: 200px;
+    max-height: 200px;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.message-image-name {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+}
+
+.message-text {
+    word-wrap: break-word;
+}
+
 .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
 }