From 7b92f69d6ac482be7126eac8add17066a68462a4 Mon Sep 17 00:00:00 2001
From: zhangzheng <zhangzheng97212@gmail.com>
Date: Thu, 12 Mar 2026 15:51:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=96=B9=E7=BD=91=E7=BB=9C=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 WebApp/client/public/onebyone/index.html  |  6 +++-
 WebApp/client/public/onebyone/renderer.js | 39 +++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/WebApp/client/public/onebyone/index.html b/WebApp/client/public/onebyone/index.html
index 9705c55..84dea38 100644
--- a/WebApp/client/public/onebyone/index.html
+++ b/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>
diff --git a/WebApp/client/public/onebyone/renderer.js b/WebApp/client/public/onebyone/renderer.js
index 13f571f..98f58bd 100644
--- a/WebApp/client/public/onebyone/renderer.js
+++ b/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;
+            }
+        }
     }
 
     // 渲染本地视频