对方网络状态

WebApp/client/public/onebyone/index.html

@@ -111,8 +111,12 @@
                 <h1 class="font-bold text-lg tracking-tight" data-field="remoteUser.name" id="headerTitle">
                     与 Sarah 的通话
                 </h1>
-                <div class="flex items-center gap-2 text-xs text-gray-400">
+                <div class="flex items-center gap-3 text-xs text-gray-400">
                     <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+                    <span id="remoteNetworkQuality" class="flex items-center gap-1">
+                        <i class="fas fa-signal"></i>
+                        <span>优秀</span>
+                    </span>
                     <!-- [DATA_FIELD: callSession.duration] [TYPE: string] [FORMAT: MM:SS] [UPDATE: 每秒] -->
                     <span data-field="callSession.duration" id="callDuration">00:00</span>
                 </div>

WebApp/client/public/onebyone/renderer.js

@@ -248,6 +248,45 @@ class UIRenderer {
 
         // 渲染网络状态
         this.renderNetworkStatus(remoteUser.networkQuality);
+
+        // 渲染header中的网络状态
+        this.renderHeaderNetworkStatus(remoteUser.networkQuality);
+    }
+
+    // 渲染header中的网络状态
+    renderHeaderNetworkStatus(networkQuality) {
+        const networkQualityElement = document.getElementById('remoteNetworkQuality');
+        if (networkQualityElement) {
+            const textElement = networkQualityElement.querySelector('span');
+            const iconElement = networkQualityElement.querySelector('i');
+
+            if (textElement && iconElement) {
+                let qualityText = '未知';
+                let iconClass = 'fas fa-signal text-gray-400';
+
+                switch (networkQuality) {
+                    case 'excellent':
+                        qualityText = '优秀';
+                        iconClass = 'fas fa-signal text-green-400';
+                        break;
+                    case 'good':
+                        qualityText = '良好';
+                        iconClass = 'fas fa-signal text-green-500';
+                        break;
+                    case 'fair':
+                        qualityText = '一般';
+                        iconClass = 'fas fa-signal text-yellow-400';
+                        break;
+                    case 'poor':
+                        qualityText = '较差';
+                        iconClass = 'fas fa-signal text-red-400';
+                        break;
+                }
+
+                textElement.textContent = qualityText;
+                iconElement.className = iconClass;
+            }
+        }
     }
 
     // 渲染本地视频