【m】修改渲染顺序

WebApp/client/public/onebyone/renderer.js

@@ -5,6 +5,7 @@
 import { formatTime, formatTimestamp, toggleElement, toggleButtonState } from './utils.js';
 import { mockCallSession } from './models.js';
 import chatMessage from './chatmessage.js';
+import store from './store.js';
 class UIRenderer {
     constructor(stateManager) {
         this.stateManager = stateManager;
@@ -103,60 +104,74 @@ class UIRenderer {
     }
 
 
-    // 渲染状态变化
+    /**
+     * 渲染方法 - 根据状态变化更新UI
+     * @param {Object} state - 当前应用状态
+     * @param {Object} changes - 状态变化对象
+     */
     render(state, changes) {
+        // 根据变化类型执行不同的渲染操作
         switch (changes.type) {
             case 'INIT':
-                this.renderHeader(state.session);
-                this.renderRemoteVideo(state.session.remoteUser);
-                this.renderLocalVideo(state.session.localUser, state.localStream);
-                this.renderControlButtons(state.session.localUser.mediaState);
-                this.renderChatMessages(chatMessage.getMessageState().messages);
-                this.renderUserList(state.session.localUser, state.session.remoteUser);
-
+                // 初始化渲染 - 渲染所有UI元素
+                this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
+                this.renderLocalVideo(state.session.localUser, state.localStream); // 渲染本地视频
+                this.renderControlButtons(state.session.localUser.mediaState); // 渲染控制按钮
+                this.renderChatMessages(chatMessage.getMessageState().messages); // 渲染聊天消息
+                this.renderUserList(state.session.localUser, state.session.remoteUser); // 渲染用户列表
+                this.renderHeader(state.session);               // 渲染头部信息
                 // 初始化时检查远程流状态，显示或隐藏占位背景
                 if (this.elements.remoteVideoPlaceholder) {
                     if (state.remoteStream) {
-                        this.elements.remoteVideoPlaceholder.classList.add('hidden');
+                        this.elements.remoteVideoPlaceholder.classList.add('hidden'); // 有远程流时隐藏占位背景
                     } else {
-                        this.elements.remoteVideoPlaceholder.classList.remove('hidden');
+                        this.elements.remoteVideoPlaceholder.classList.remove('hidden'); // 无远程流时显示占位背景
                     }
                 }
                 break;
             case 'DURATION_UPDATE':
+                // 通话时长更新 - 渲染通话时长
                 this.renderCallDuration(changes.duration);
                 break;
             case 'LOCAL_MEDIA_CHANGE':
-                this.renderControlButtons(state.session.localUser.mediaState);
-                this.renderLocalVideo(state.session.localUser, state.localStream);
-                this.renderLocalUserStatus(state.session.localUser);
-                this.renderUserList(state.session.localUser, state.session.remoteUser);
+                // 本地媒体状态变化 - 更新相关UI
+                this.renderControlButtons(state.session.localUser.mediaState); // 渲染控制按钮
+                this.renderLocalVideo(state.session.localUser, state.localStream); // 渲染本地视频
+                this.renderLocalUserStatus(state.session.localUser); // 渲染本地用户状态
+                this.renderUserList(state.session.localUser, state.session.remoteUser); // 渲染用户列表
                 break;
             case 'LOCAL_STREAM_OBTAINED':
-                this.renderLocalStream(state.localStream);
-                this.renderLocalVideo(state.session.localUser, state.localStream);
+                // 本地流获取成功 - 更新本地视频显示
+                this.renderLocalStream(state.localStream); // 渲染本地流
+                this.renderLocalVideo(state.session.localUser, state.localStream); // 渲染本地视频
                 break;
             case 'REMOTE_STREAM_OBTAINED':
-                this.renderRemoteStream(state.remoteStream);
+                // 远程流获取成功 - 更新远程视频显示
+                this.renderRemoteStream(state.remoteStream); // 渲染远程流
                 // 当获取到远程流时，隐藏连接中提示
                 if (this.elements.connectingOverlay) {
                     this.elements.connectingOverlay.classList.add('hidden');
                 }
                 break;
             case 'REMOTE_MEDIA_CHANGE':
-                this.renderRemoteVideo(state.session.remoteUser);
-                this.renderUserList(state.session.localUser, state.session.remoteUser);
+                // 远程媒体状态变化 - 更新远程视频和用户列表
+                this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
+                this.renderUserList(state.session.localUser, state.session.remoteUser); // 渲染用户列表
                 break;
             case 'USER_LIST_UPDATE':
+                // 用户列表更新 - 重新渲染用户列表
                 this.renderUserList(changes.localUser, changes.remoteUser);
                 break;
             case 'NETWORK_CHANGE':
+                // 网络状态变化 - 渲染网络状态
                 this.renderNetworkStatus(changes.quality);
                 break;
             case 'CALL_STATUS_CHANGE':
+                // 通话状态变化 - 渲染通话状态
                 this.renderCallStatus(changes.status);
                 break;
             case 'CALL_ENDED':
+                // 通话结束 - 渲染通话结束界面
                 this.renderCallEnded();
                 break;
         }
@@ -175,15 +190,8 @@ class UIRenderer {
 
     // 渲染头部
     renderHeader(session) {
-        if (this.elements.headerTitle) {
-            // 未连接时不显示红框部分
-            if (session.status === 'idle' || session.status === 'connecting') {
-                this.elements.headerTitle.textContent = '通话';
-            } else {
-                this.elements.headerTitle.textContent = `与 ${session.remoteUser.name} 的通话`;
-            }
-        }
 
+        this.renderHeaderTitle();
         if (this.elements.encryptionBadge) {
             toggleElement(this.elements.encryptionBadge, session.isEncrypted);
         }
@@ -198,6 +206,14 @@ class UIRenderer {
 
         this.renderCallDuration(session.duration);
     }
+    renderHeaderTitle() {
+        if (this.elements.headerTitle) {
+            const connectionId = store.getConnectionId() || '';
+            // 未连接时不显示红框部分
+            this.elements.headerTitle.textContent = `通话 (${connectionId})`;
+
+        }
+    }
 
     // 渲染通话时长
     renderCallDuration(duration) {