未读角标增加

WebApp/client/public/onebyone/index.html

@@ -492,8 +492,10 @@
 
         <!-- 右侧聊天按钮 -->
         <div class="absolute right-6 flex items-center gap-3">
-            <button class="control-btn w-10 h-10 rounded-full glass flex items-center justify-center text-gray-300 hover:text-white hover:bg-white/10 transition-colors" onclick="toggleSidebar()">
+            <button class="control-btn w-10 h-10 rounded-full glass flex items-center justify-center text-gray-300 hover:text-white hover:bg-white/10 transition-colors relative" onclick="toggleSidebar()">
                 <i class="fas fa-comment-alt"></i>
+                <!-- 未读消息计数角标 -->
+                <span id="unreadBadge" class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-xs font-bold text-white hidden">0</span>
             </button>
         </div>
 

WebApp/client/public/onebyone/renderer.js

@@ -127,6 +127,12 @@ class UIRenderer {
                 break;
             case 'SIDEBAR_TOGGLE':
                 this.renderSidebar(changes.isOpen);
+                // 当侧边栏打开时，重置未读消息计数
+                if (changes.isOpen) {
+                    this.renderUnreadCount(0);
+                }   else{
+                    this.renderUnreadCount(changes.unreadCount);
+                }
                 break;
             case 'NETWORK_CHANGE':
                 this.renderNetworkStatus(changes.quality);

WebApp/client/public/onebyone/store.js

@@ -367,11 +367,12 @@ class CallStateManager {
         };
         // 初始化 RenderStreaming 实例后
         this.renderstreaming.onMessage = (data) => {
-            console.log('收到聊天消息:', data);
+            console.log('收到聊天:', data);
             if (data.type === 'chat-message') {
-                // 处理聊天消息
-                // 添加到消息列表并更新UI
-                store.addMessage(data.message);
+                // 处理聊天
+                // 添加到列表并更新UI
+
+                this.handleChatMessage(data.message);
             } else if (data.type === 'on-message') {
             }
 
@@ -447,7 +448,7 @@ class CallStateManager {
     }
 
 
-    // 更新远端媒体状态 (由 WebSocket 消息触发)
+    // 更新远端媒体状态 (由 WebSocket 触发)
     updateRemoteMedia(mediaState) {
         this.state.session.remoteUser.mediaState = {
             ...this.state.session.remoteUser.mediaState,
@@ -456,13 +457,14 @@ class CallStateManager {
         this.notify({ type: 'REMOTE_MEDIA_CHANGE', mediaState });
     }
 
-    // 添加消息
+    // 添加
     addMessage(message) {
         this.state.messages.push(message);
 
         // 如果侧边栏关闭且不是自己发的，增加未读
         if (!this.state.isSidebarOpen && !message.isSelf) {
             this.state.unreadCount++;
+                  this.notify({ type: 'SIDEBAR_TOGGLE', unreadCount: this.state.unreadCount });
         }
 
         this.notify({ type: 'NEW_MESSAGE', message, unreadCount: this.state.unreadCount });
@@ -810,6 +812,18 @@ class CallStateManager {
         }
     }
 
+    // 处理接收到的聊天
+    handleChatMessage(data) {
+        console.log('处理聊天:', data);
+        store.addMessage(data);
+        const isImage = data.message && data.message.startsWith('data:image/');
+        const messageType = isImage ? 'file' : 'text';
+
+
+        // 显示通知
+        showNotification(`${senderName}: ${data.message.substring(0, 20)}${data.message.length > 20 ? '...' : ''}`);
+    }
+
     // 发送媒体状态到服务器
     emitMediaStateChange() {
         const payload = {