From e9b7070219c8d42ab8fe010264adfad4af1ba4ea Mon Sep 17 00:00:00 2001
From: stary <834207172@qq.COM>
Date: Fri, 10 Apr 2026 21:54:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=AF=9D=E8=AE=A1=E6=95=B0=E5=92=8C?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F=E4=BF=AE=E6=94=B9=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 WebApp/client/public/onebyone/index.html  | 186 ++++++++++++----------
 WebApp/client/public/onebyone/renderer.js | 177 +++++++++++++-------
 2 files changed, 220 insertions(+), 143 deletions(-)
diff --git a/WebApp/client/public/onebyone/index.html b/WebApp/client/public/onebyone/index.html
index f424e0a..31a7f25 100644
--- a/WebApp/client/public/onebyone/index.html
+++ b/WebApp/client/public/onebyone/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,6 +9,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
 </head>
+
 <body class="h-screen w-screen flex flex-col text-white bg-grid relative">
     <!--
     ============================================================
@@ -103,7 +105,8 @@
     -->
     <header class="glass-strong h-16 flex items-center justify-between px-6 z-50 border-b border-white/10">
         <div class="flex items-center gap-3">
-            <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
+            <div
+                class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                 <i class="fas fa-video text-white text-lg"></i>
             </div>
             <div>
@@ -152,17 +155,16 @@
             <div class="absolute inset-0 video-fade-in">
                 <!-- [DATA_FIELD: remoteUser.videoStream] [TYPE: MediaStream | null] [BIND: srcObject] -->
                 <!-- [FALLBACK: remoteUser.avatar] [TYPE: string] [URL] -->
-                <video id="remoteVideo"
-                       alt="对方视频"
-                       class="w-full h-full object-contain"
-                       autoplay
-                       data-field="remoteUser.videoStream">
+                <video id="remoteVideo" alt="对方视频" class="w-full h-full object-contain" autoplay
+                    data-field="remoteUser.videoStream">
                 </video>
 
                 <!-- 远端未连接时的占位背景 -->
-                <div id="remoteVideoPlaceholder" class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80">
+                <div id="remoteVideoPlaceholder"
+                    class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80">
                     <div class="text-center">
-                        <div class="w-32 h-32 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-4">
+                        <div
+                            class="w-32 h-32 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-4">
                             <i class="fas fa-user text-4xl text-white/70"></i>
                         </div>
                         <p class="text-white text-lg font-medium">等待对方连接...</p>
@@ -175,12 +177,13 @@
                     <div class="relative">
                         <!-- [DATA_FIELD: remoteUser.avatar] [TYPE: string] [URL] [REQUIRED] -->
                         <img id="remoteAvatar"
-                             src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-                             class="w-8 h-8 rounded-full object-cover"
-                             data-field="remoteUser.avatar">
+                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+                            class="w-8 h-8 rounded-full object-cover" data-field="remoteUser.avatar">
 
                         <!-- [CONDITIONAL_RENDER: remoteUser.mediaState.isSpeaking === true] -->
-                        <div id="remoteSpeakingIndicator" class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900 hidden" data-field="remoteUser.isSpeaking"></div>
+                        <div id="remoteSpeakingIndicator"
+                            class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900 hidden"
+                            data-field="remoteUser.isSpeaking"></div>
                     </div>
                     <div>
                         <!-- [DATA_FIELD: remoteUser.name] [TYPE: string] -->
@@ -190,7 +193,8 @@
                             <span id="remoteStatus" data-field="remoteUser.status">正在通话</span>
 
                             <!-- [CONDITIONAL_RENDER: remoteUser.mediaState.isSpeaking === true && remoteUser.mediaState.audio === true] -->
-                            <div id="remoteAudioWave" class="audio-wave w-6 hidden" data-field="remoteUser.audioActivity">
+                            <div id="remoteAudioWave" class="audio-wave w-6 hidden"
+                                data-field="remoteUser.audioActivity">
                                 <span></span><span></span><span></span><span></span><span></span>
                             </div>
                         </div>
@@ -199,7 +203,9 @@
 
                 <!-- 网络状态提示 -->
                 <!-- [CONDITIONAL_RENDER: remoteUser.networkQuality !== 'excellent'] -->
-                <div id="networkStatus" class="absolute top-6 right-6 glass px-3 py-1.5 rounded-full flex items-center gap-2 text-xs hidden" data-field="remoteUser.networkQuality">
+                <div id="networkStatus"
+                    class="absolute top-6 right-6 glass px-3 py-1.5 rounded-full flex items-center gap-2 text-xs hidden"
+                    data-field="remoteUser.networkQuality">
                     <i class="fas fa-exclamation-triangle text-yellow-500"></i>
                     <!-- [DATA_FIELD: remoteUser.networkQuality] [TYPE: string] [TRANSFORM: quality => text] -->
                     <span class="text-gray-300" id="networkStatusText">网络不稳定</span>
@@ -207,9 +213,12 @@
 
                 <!-- 连接中/重连提示 -->
                 <!-- [CONDITIONAL_RENDER: callSession.status === 'connecting'] -->
-                <div id="connectingOverlay" class="absolute inset-0 bg-black/60 flex items-center justify-center hidden" data-field="callSession.status">
+                <div id="connectingOverlay" class="absolute inset-0 bg-black/60 flex items-center justify-center hidden"
+                    data-field="callSession.status">
                     <div class="text-center">
-                        <div class="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-3"></div>
+                        <div
+                            class="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-3">
+                        </div>
                         <p class="text-white font-medium">正在连接...</p>
                         <p class="text-sm text-gray-400 mt-1" id="connectingText">等待对方接受邀请</p>
                     </div>
@@ -224,20 +233,19 @@
             子区域: 本地视频 (Local Video - Picture in Picture)
             数据源: LocalUser
             -->
-            <div class="absolute bottom-6 right-6 w-64 h-48 rounded-2xl overflow-hidden shadow-2xl border-2 border-white/20 video-fade-in z-10">
+            <div
+                class="absolute bottom-6 right-6 w-64 h-48 rounded-2xl overflow-hidden shadow-2xl border-2 border-white/20 video-fade-in z-10">
                 <!-- [DATA_FIELD: localUser.videoStream] [TYPE: MediaStream | null] [BIND: srcObject] -->
                 <!-- [FALLBACK: localUser.avatar] [TYPE: string] [URL] -->
                 <video id="localVideo"
-                       src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop"
-                       alt="本地视频"
-                       class="w-full h-full object-cover"
-                       autoplay
-                       muted
-                       data-field="localUser.videoStream">
+                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop" alt="本地视频"
+                    class="w-full h-full object-cover" autoplay muted data-field="localUser.videoStream">
                 </video>
 
                 <!-- [CONDITIONAL_RENDER: localUser.mediaState.video === false] -->
-                <div id="localVideoPlaceholder" class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900 to-purple-900 hidden" data-field="localUser.videoOff">
+                <div id="localVideoPlaceholder"
+                    class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900 to-purple-900 hidden"
+                    data-field="localUser.videoOff">
                     <span class="text-4xl font-bold" id="localInitials">我</span>
                 </div>
 
@@ -250,8 +258,10 @@
                 </div>
 
                 <!-- 本地视频悬停控制 -->
-                <div class="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                    <button onclick="toggleLocalVideo()" class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors">
+                <div
+                    class="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                    <button onclick="toggleLocalVideo()"
+                        class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors">
                         <i class="fas fa-video text-xs" id="localVideoIcon"></i>
                     </button>
                 </div>
@@ -273,8 +283,8 @@
             数据源: [localUser, remoteUser]
             -->
             <div class="p-4 border-b border-white/10">
-                <h3 class="text-sm font-medium text-gray-400 mb-3">
-                    通话成员 (<!-- [DATA_FIELD: userCount] [TYPE: number] [VALUE: 2] -->2)
+                <h3 class="text-sm font-medium text-gray-400 mb-3" id="userCountDisplay">
+                    通话成员 (1)
                 </h3>
                 <div class="space-y-2" id="userList">
                     <!-- [LOOP_START: users as user] -->
@@ -283,11 +293,11 @@
                     <div class="flex items-center gap-3 p-2 rounded-lg bg-white/5" data-user-id="remote">
                         <div class="relative">
                             <!-- [DATA_FIELD: remoteUser.avatar] -->
-                            <img src=""
-                                 class="w-10 h-10 rounded-full object-cover"
-                                 data-field="remoteUser.avatar">
+                            <img src="" class="w-10 h-10 rounded-full object-cover" data-field="remoteUser.avatar">
                             <!-- [CONDITIONAL_RENDER: remoteUser.status === 'online'] -->
-                            <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900"></div>
+                            <div
+                                class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900">
+                            </div>
                         </div>
                         <div class="flex-1">
                             <!-- [DATA_FIELD: remoteUser.name] -->
@@ -297,7 +307,8 @@
                         </div>
                         <div class="flex items-center gap-2">
                             <!-- [CONDITIONAL_RENDER: remoteUser.mediaState.audio === false] -->
-                            <i class="fas fa-microphone-slash text-gray-500 text-xs hidden" data-field="remoteUser.muteIcon"></i>
+                            <i class="fas fa-microphone-slash text-gray-500 text-xs hidden"
+                                data-field="remoteUser.muteIcon"></i>
                             <!-- [CONDITIONAL_RENDER: remoteUser.mediaState.isSpeaking === true] -->
                             <div class="audio-wave w-6 hidden" data-field="remoteUser.speakingIndicator">
                                 <span></span><span></span><span></span><span></span><span></span>
@@ -308,9 +319,7 @@
                     <!-- 本地用户项 -->
                     <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5" data-user-id="local">
                         <!-- [DATA_FIELD: localUser.avatar] -->
-                        <img src=""
-                             class="w-10 h-10 rounded-full object-cover"
-                             data-field="localUser.avatar">
+                        <img src="" class="w-10 h-10 rounded-full object-cover" data-field="localUser.avatar">
                         <div class="flex-1">
                             <div class="text-sm font-medium">
                                 <!-- [DATA_FIELD: localUser.name] -->我
@@ -318,7 +327,8 @@
                                 <span class="text-xs bg-indigo-500 px-1.5 rounded ml-1">主持人</span>
                             </div>
                             <!-- [DATA_FIELD: localUser.mediaState] [TRANSFORM: state => statusText] -->
-                            <div class="text-xs text-gray-500" id="localMediaStatus" data-field="localUser.mediaStatus">静音中</div>
+                            <div class="text-xs text-gray-500" id="localMediaStatus" data-field="localUser.mediaStatus">
+                                静音中</div>
                         </div>
                         <!-- [CONDITIONAL_RENDER: localUser.mediaState.audio === false] -->
                         <i class="fas fa-microphone-slash text-gray-500 text-xs" data-field="localUser.muteIcon"></i>
@@ -347,17 +357,18 @@
                     <div class="flex gap-3">
                         <!-- [DATA_FIELD: message.senderAvatar] -->
                         <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-                             class="w-8 h-8 rounded-full object-cover"
-                             data-field="message.senderAvatar">
+                            class="w-8 h-8 rounded-full object-cover" data-field="message.senderAvatar">
                         <div class="flex-1">
                             <div class="flex items-baseline gap-2 mb-1">
                                 <!-- [DATA_FIELD: message.senderName] -->
-                                <span class="text-sm font-medium text-indigo-400" data-field="message.senderName">Sarah Chen</span>
+                                <span class="text-sm font-medium text-indigo-400" data-field="message.senderName">Sarah
+                                    Chen</span>
                                 <!-- [DATA_FIELD: message.timestamp] [FORMAT: HH:MM] -->
                                 <span class="text-xs text-gray-500" data-field="message.time">14:32</span>
                             </div>
                             <!-- [DATA_FIELD: message.content] -->
-                            <div class="glass px-3 py-2 rounded-2xl rounded-tl-none text-sm text-gray-200" data-field="message.content">
+                            <div class="glass px-3 py-2 rounded-2xl rounded-tl-none text-sm text-gray-200"
+                                data-field="message.content">
                             </div>
                         </div>
                     </div>
@@ -369,14 +380,14 @@
                     <div class="flex gap-3 flex-row-reverse">
                         <!-- [DATA_FIELD: message.senderAvatar] -->
                         <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
-                             class="w-8 h-8 rounded-full object-cover"
-                             data-field="message.senderAvatar">
+                            class="w-8 h-8 rounded-full object-cover" data-field="message.senderAvatar">
                         <div class="flex-1 flex flex-col items-end">
                             <div class="flex items-baseline gap-2 mb-1 flex-row-reverse">
                                 <span class="text-sm font-medium text-green-400">我</span>
                                 <span class="text-xs text-gray-500" data-field="message.time">14:32</span>
                             </div>
-                            <div class="bg-indigo-600 px-3 py-2 rounded-2xl rounded-tr-none text-sm text-white" data-field="message.content">
+                            <div class="bg-indigo-600 px-3 py-2 rounded-2xl rounded-tr-none text-sm text-white"
+                                data-field="message.content">
                             </div>
                         </div>
                     </div>
@@ -391,20 +402,21 @@
             -->
             <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" onclick="openImagePicker()">
+                    <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 type="file" id="imageInput" accept="image/*" class="hidden"
+                        onchange="handleImageUpload(event)">
                     <!-- [INPUT_FIELD] [BIND: inputValue] [EVENT: onEnter => sendMessage()] -->
-                    <input type="text"
-                           id="chatInput"
-                           placeholder="输入消息..."
-                           class="flex-1 bg-transparent border-none outline-none text-sm text-white placeholder-gray-500 px-2"
-                           data-field="chatInput"
-                           onkeypress="handleChatSubmit(event)">
+                    <input type="text" id="chatInput" placeholder="输入消息..."
+                        class="flex-1 bg-transparent border-none outline-none text-sm text-white placeholder-gray-500 px-2"
+                        data-field="chatInput" onkeypress="handleChatSubmit(event)">
                     <!-- [BUTTON] [EVENT: onclick => sendMessage()] -->
-                    <button onclick="sendMessage()" class="w-8 h-8 rounded-full bg-indigo-600 hover:bg-indigo-700 flex items-center justify-center transition-colors">
+                    <button onclick="sendMessage()"
+                        class="w-8 h-8 rounded-full bg-indigo-600 hover:bg-indigo-700 flex items-center justify-center transition-colors">
                         <i class="fas fa-paper-plane text-xs"></i>
                     </button>
                 </div>
@@ -439,60 +451,61 @@
 
             <!-- 麦克风控制 -->
             <!-- [DATA_FIELD: localUser.mediaState.audio] [TYPE: boolean] -->
-            <button class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group"
-                    onclick="toggleMute(this)"
-                    id="micBtn"
-                    data-field="localUser.audio"
-                    data-active="false">
+            <button
+                class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group"
+                onclick="toggleMute(this)" id="micBtn" data-field="localUser.audio" data-active="false">
                 <i class="fas fa-microphone text-lg" data-icon="default"></i>
                 <i class="fas fa-microphone-slash text-lg hidden text-red-400" data-icon="active"></i>
-                <span class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
+                <span
+                    class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                     静音 (Space)
                 </span>
             </button>
 
             <!-- 摄像头控制 -->
             <!-- [DATA_FIELD: localUser.mediaState.video] [TYPE: boolean] -->
-            <button class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group"
-                    onclick="toggleVideo(this)"
-                    id="videoBtn"
-                    data-field="localUser.video"
-                    data-active="false">
+            <button
+                class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group"
+                onclick="toggleVideo(this)" id="videoBtn" data-field="localUser.video" data-active="false">
                 <i class="fas fa-video text-lg" data-icon="default"></i>
                 <i class="fas fa-video-slash text-lg hidden text-red-400" data-icon="active"></i>
-                <span class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
+                <span
+                    class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                     关闭视频 (Ctrl+V)
                 </span>
             </button>
 
             <!-- 录屏控制 -->
             <!-- [DATA_FIELD: localUser.mediaState.recording] [TYPE: boolean] -->
-            <button class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group"
-                    onclick="toggleRecording(this)"
-                    id="recordBtn"
-                    data-field="localUser.recording"
-                    data-active="false">
+            <button
+                class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group"
+                onclick="toggleRecording(this)" id="recordBtn" data-field="localUser.recording" data-active="false">
                 <i class="fas fa-circle text-lg" data-icon="default"></i>
                 <i class="fas fa-stop text-lg hidden text-red-400" data-icon="active"></i>
-                <span class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
+                <span
+                    class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                     录制
                 </span>
             </button>
 
             <!-- 更多选项 -->
-            <button class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group">
+            <button
+                class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group">
                 <i class="fas fa-ellipsis-h text-lg"></i>
-                <span class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
+                <span
+                    class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                     更多选项
                 </span>
             </button>
 
             <!-- 结束通话 -->
             <!-- [EVENT: onclick => endCall()] [API: POST /api/call/:callId/leave] -->
-            <button class="control-btn w-14 h-14 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center text-white end-call-pulse ml-4 relative group"
-                    onclick="endCall()">
+            <button
+                class="control-btn w-14 h-14 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center text-white end-call-pulse ml-4 relative group"
+                onclick="endCall()">
                 <i class="fas fa-phone-slash text-xl"></i>
-                <span class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
+                <span
+                    class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                     结束通话
                 </span>
             </button>
@@ -500,17 +513,21 @@
 
         <!-- 右侧聊天按钮 -->
         <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 relative" 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>
+                <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>
 
     </footer>
 
     <!-- 通知组件 -->
-    <div id="notification" class="fixed top-20 left-1/2 transform -translate-x-1/2 glass px-6 py-3 rounded-full flex items-center gap-3 opacity-0 pointer-events-none transition-all duration-300 z-50 translate-y-[-20px]">
+    <div id="notification"
+        class="fixed top-20 left-1/2 transform -translate-x-1/2 glass px-6 py-3 rounded-full flex items-center gap-3 opacity-0 pointer-events-none transition-all duration-300 z-50 translate-y-[-20px]">
         <i class="fas fa-info-circle text-indigo-400"></i>
         <span class="text-sm" id="notificationText">通知内容</span>
     </div>
@@ -529,7 +546,8 @@
                 <button id="cancelEndCall" class="flex-1 py-2 rounded-lg glass hover:bg-white/10 transition-colors">
                     取消
                 </button>
-                <button id="confirmEndCall" class="flex-1 py-2 rounded-lg bg-red-500 hover:bg-red-600 transition-colors">
+                <button id="confirmEndCall"
+                    class="flex-1 py-2 rounded-lg bg-red-500 hover:bg-red-600 transition-colors">
                     结束通话
                 </button>
             </div>
@@ -546,7 +564,9 @@
                 <h3 class="text-xl font-bold mb-2" id="callRequestName">Sarah Chen</h3>
                 <p class="text-gray-400 text-sm" id="callRequestText">正在请求与您进行视频通话</p>
                 <div class="mt-4 flex items-center justify-center gap-4">
-                    <img id="callRequestAvatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" class="w-16 h-16 rounded-full object-cover border-4 border-indigo-500">
+                    <img id="callRequestAvatar"
+                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+                        class="w-16 h-16 rounded-full object-cover border-4 border-indigo-500">
                 </div>
             </div>
             <div class="flex gap-3">
@@ -556,7 +576,8 @@
                         <span>拒绝</span>
                     </div>
                 </button>
-                <button id="acceptCall" class="flex-1 py-2 rounded-lg bg-green-500 hover:bg-green-600 transition-colors">
+                <button id="acceptCall"
+                    class="flex-1 py-2 rounded-lg bg-green-500 hover:bg-green-600 transition-colors">
                     <div class="flex items-center justify-center gap-2">
                         <i class="fas fa-phone"></i>
                         <span>接受</span>
@@ -571,4 +592,5 @@
 
 
 </body>
+
 </html>
diff --git a/WebApp/client/public/onebyone/renderer.js b/WebApp/client/public/onebyone/renderer.js
index 09c2b01..4be8910 100644
--- a/WebApp/client/public/onebyone/renderer.js
+++ b/WebApp/client/public/onebyone/renderer.js
@@ -31,6 +31,7 @@ class UIRenderer {
             remoteStatus: document.getElementById('remoteStatus'),
             remoteSpeakingIndicator: document.getElementById('remoteSpeakingIndicator'),
             remoteAudioWave: document.getElementById('remoteAudioWave'),
+            remoteInfoOverlay: document.querySelector('.absolute.top-6.left-6.glass'),
             networkStatus: document.getElementById('networkStatus'),
             networkStatusText: document.getElementById('networkStatusText'),
             connectingOverlay: document.getElementById('connectingOverlay'),
@@ -47,6 +48,7 @@ class UIRenderer {
             userList: document.getElementById('userList'),
             localMediaStatus: document.getElementById('localMediaStatus'),
             localMuteIcon: document.querySelector('[data-field="localUser.muteIcon"]'),
+            userCountDisplay: document.getElementById('userCountDisplay'),
             // 控制按钮
             micBtn: document.getElementById('micBtn'),
             videoBtn: document.getElementById('videoBtn'),
@@ -174,13 +176,26 @@ class UIRenderer {
     // 渲染头部
     renderHeader(session) {
         if (this.elements.headerTitle) {
-            this.elements.headerTitle.textContent = `与 ${session.remoteUser.name} 的通话`;
+            // 未连接时不显示红框部分
+            if (session.status === 'idle' || session.status === 'connecting') {
+                this.elements.headerTitle.textContent = '通话';
+            } else {
+                this.elements.headerTitle.textContent = `与 ${session.remoteUser.name} 的通话`;
+            }
         }
 
         if (this.elements.encryptionBadge) {
             toggleElement(this.elements.encryptionBadge, session.isEncrypted);
         }
 
+        // 始终显示网络状态指示器和质量
+        if (this.elements.remoteNetworkIndicator) {
+            this.elements.remoteNetworkIndicator.classList.remove('hidden');
+        }
+        if (this.elements.remoteNetworkQuality) {
+            this.elements.remoteNetworkQuality.classList.remove('hidden');
+        }
+
         this.renderCallDuration(session.duration);
     }
 
@@ -193,16 +208,34 @@ class UIRenderer {
 
     // 渲染远端视频
     renderRemoteVideo(remoteUser) {
-        if (this.elements.remoteName) {
-            this.elements.remoteName.textContent = remoteUser.name;
-        }
+        // 找到远端信息覆盖层元素
+        const remoteInfoOverlay = this.elements.remoteName?.closest('.absolute.top-6.left-6.glass');
 
-        if (this.elements.remoteAvatar) {
-            this.elements.remoteAvatar.src = remoteUser.avatar;
-        }
+        // 未连接时不显示红框部分
+        if (remoteUser.status === 'offline') {
+            // 隐藏整个远端信息覆盖层
+            if (remoteInfoOverlay) {
+                remoteInfoOverlay.classList.add('hidden');
+            }
+        } else {
+            // 显示远端信息覆盖层
+            if (remoteInfoOverlay) {
+                remoteInfoOverlay.classList.remove('hidden');
+            }
 
-        if (this.elements.remoteStatus) {
-            this.elements.remoteStatus.textContent = this.getStatusText(remoteUser.status);
+            // 连接后更新头像和名称数据
+            if (this.elements.remoteName) {
+                this.elements.remoteName.textContent = remoteUser.name;
+            }
+
+            if (this.elements.remoteAvatar) {
+                this.elements.remoteAvatar.src = remoteUser.avatar;
+                this.elements.remoteAvatar.classList.remove('hidden');
+            }
+
+            if (this.elements.remoteStatus) {
+                this.elements.remoteStatus.textContent = this.getStatusText(remoteUser.status);
+            }
         }
 
         // 当远程视频关闭时显示占位符
@@ -444,6 +477,17 @@ class UIRenderer {
     renderUserList(localUser, remoteUser) {
         if (!this.elements.userList) return;
 
+        // 计算通话成员总数
+        let userCount = 1; // 至少有本地用户
+   if (remoteUser.status === 'online' || remoteUser.status === 'connecting') {
+        userCount++; // 只有当远程用户在线或连接中时，增加计数
+    }
+
+        // 更新通话成员总数显示
+     if (this.elements.userCountDisplay) {
+        this.elements.userCountDisplay.textContent = `通话成员 (${userCount})`;
+    }
+
         // 渲染本地用户
         const localUserElement = this.elements.userList.querySelector('[data-user-id="local"]');
         if (localUserElement) {
@@ -486,63 +530,71 @@ class UIRenderer {
         // 渲染远程用户
         const remoteUserElement = this.elements.userList.querySelector('[data-user-id="remote"]');
         if (remoteUserElement) {
-            // 渲染远程用户头像
-            const remoteAvatar = remoteUserElement.querySelector('img[data-field="remoteUser.avatar"]');
-            if (remoteAvatar) {
-                remoteAvatar.src = remoteUser.avatar;
-            }
-            // 渲染远程用户名字
-            const remoteName = remoteUserElement.querySelector('[data-field="remoteUser.name"]');
-            if (remoteName) {
-                remoteName.textContent = remoteUser.name;
-            }
-            // 渲染远程用户媒体状态
-            const remoteMediaStatus = remoteUserElement.querySelector('[data-field="remoteUser.mediaStatus"]');
-            if (remoteMediaStatus) {
-                if (!remoteUser.mediaState.audio) {
-                    remoteMediaStatus.textContent = '静音中';
-                    remoteMediaStatus.className = 'text-xs text-gray-500';
-                } else if (!remoteUser.mediaState.video) {
-                    remoteMediaStatus.textContent = '视频关闭';
-                    remoteMediaStatus.className = 'text-xs text-gray-500';
-                } else {
-                    remoteMediaStatus.textContent = '在线';
-                    remoteMediaStatus.className = 'text-xs text-green-400';
+            // 未连接时不显示远程用户信息
+            if (remoteUser.status === 'offline') {
+                remoteUserElement.classList.add('hidden');
+            } else {
+                // 连接后显示远程用户信息并更新数据
+                remoteUserElement.classList.remove('hidden');
+
+                // 渲染远程用户头像
+                const remoteAvatar = remoteUserElement.querySelector('img[data-field="remoteUser.avatar"]');
+                if (remoteAvatar) {
+                    remoteAvatar.src = remoteUser.avatar;
                 }
-            }
-            // 渲染远程用户在线状态指示器
-            const remoteStatusIndicator = remoteUserElement.querySelector('.absolute.-bottom-1.-right-1.w-3.h-3');
-            if (remoteStatusIndicator) {
-                if (remoteUser.status === 'online') {
-                    // 根据网络质量设置状态指示器颜色
-                    if (remoteUser.networkQuality === 'no_signal') {
-                        remoteStatusIndicator.classList.remove('hidden');
-                        remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-gray-500 rounded-full border-2 border-slate-900';
+                // 渲染远程用户名字
+                const remoteName = remoteUserElement.querySelector('[data-field="remoteUser.name"]');
+                if (remoteName) {
+                    remoteName.textContent = remoteUser.name;
+                }
+                // 渲染远程用户媒体状态
+                const remoteMediaStatus = remoteUserElement.querySelector('[data-field="remoteUser.mediaStatus"]');
+                if (remoteMediaStatus) {
+                    if (!remoteUser.mediaState.audio) {
+                        remoteMediaStatus.textContent = '静音中';
+                        remoteMediaStatus.className = 'text-xs text-gray-500';
+                    } else if (!remoteUser.mediaState.video) {
+                        remoteMediaStatus.textContent = '视频关闭';
+                        remoteMediaStatus.className = 'text-xs text-gray-500';
                     } else {
-                        remoteStatusIndicator.classList.remove('hidden');
-                        remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
+                        remoteMediaStatus.textContent = '在线';
+                        remoteMediaStatus.className = 'text-xs text-green-400';
                     }
-                } else {
-                    remoteStatusIndicator.classList.add('hidden');
                 }
-            }
-            // 渲染远程用户静音图标
-            const remoteMuteIcon = remoteUserElement.querySelector('[data-field="remoteUser.muteIcon"]');
-            if (remoteMuteIcon) {
-                if (!remoteUser.mediaState.audio) {
-                    remoteMuteIcon.classList.remove('hidden');
-                    remoteMuteIcon.className = 'fas fa-microphone-slash text-gray-500 text-xs';
-                } else {
-                    remoteMuteIcon.classList.add('hidden');
+                // 渲染远程用户在线状态指示器
+                const remoteStatusIndicator = remoteUserElement.querySelector('.absolute.-bottom-1.-right-1.w-3.h-3');
+                if (remoteStatusIndicator) {
+                    if (remoteUser.status === 'online') {
+                        // 根据网络质量设置状态指示器颜色
+                        if (remoteUser.networkQuality === 'no_signal') {
+                            remoteStatusIndicator.classList.remove('hidden');
+                            remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-gray-500 rounded-full border-2 border-slate-900';
+                        } else {
+                            remoteStatusIndicator.classList.remove('hidden');
+                            remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
+                        }
+                    } else {
+                        remoteStatusIndicator.classList.add('hidden');
+                    }
                 }
-            }
-            // 渲染远程用户说话状态指示器
-            const remoteSpeakingIndicator = remoteUserElement.querySelector('[data-field="remoteUser.speakingIndicator"]');
-            if (remoteSpeakingIndicator) {
-                if (remoteUser.mediaState.isSpeaking && remoteUser.mediaState.audio) {
-                    remoteSpeakingIndicator.classList.remove('hidden');
-                } else {
-                    remoteSpeakingIndicator.classList.add('hidden');
+                // 渲染远程用户静音图标
+                const remoteMuteIcon = remoteUserElement.querySelector('[data-field="remoteUser.muteIcon"]');
+                if (remoteMuteIcon) {
+                    if (!remoteUser.mediaState.audio) {
+                        remoteMuteIcon.classList.remove('hidden');
+                        remoteMuteIcon.className = 'fas fa-microphone-slash text-gray-500 text-xs';
+                    } else {
+                        remoteMuteIcon.classList.add('hidden');
+                    }
+                }
+                // 渲染远程用户说话状态指示器
+                const remoteSpeakingIndicator = remoteUserElement.querySelector('[data-field="remoteUser.speakingIndicator"]');
+                if (remoteSpeakingIndicator) {
+                    if (remoteUser.mediaState.isSpeaking && remoteUser.mediaState.audio) {
+                        remoteSpeakingIndicator.classList.remove('hidden');
+                    } else {
+                        remoteSpeakingIndicator.classList.add('hidden');
+                    }
                 }
             }
         }
@@ -786,6 +838,9 @@ class UIRenderer {
 
         // 同步更新头部网络指示器
         this.updateHeaderNetworkIndicator(quality);
+
+        // 同步更新头部网络质量文本
+        this.renderHeaderNetworkStatus(quality);
     }
 
     // 更新头部网络指示器
