【m】修改各个网络图标状态

WebApp/client/public/onebyone/renderer.js

@@ -489,16 +489,79 @@ class UIRenderer {
     // 渲染网络状态
     renderNetworkStatus(quality) {
         if (this.elements.networkStatus && this.elements.networkStatusText) {
-            const showNetworkStatus = quality !== 'excellent';
+            // 始终显示网络状态
-            toggleElement(this.elements.networkStatus, showNetworkStatus);
+            toggleElement(this.elements.networkStatus, true);
 
-            if (showNetworkStatus) {
+            // 根据网络质量设置不同的图标和颜色
-                this.elements.networkStatusText.textContent = this.getNetworkQualityText(quality);
+            const networkStatus = this.elements.networkStatus;
+            const networkStatusText = this.elements.networkStatusText;
+
+            // 清除之前的图标
+            const existingIcon = networkStatus.querySelector('i');
+            if (existingIcon) {
+                existingIcon.remove();
             }
+
+            // 创建新的图标元素
+            const icon = document.createElement('i');
+
+            // 根据网络质量设置图标和样式
+            switch (quality) {
+                case 'excellent':
+                    icon.className = 'fas fa-check-circle text-green-400';
+                    networkStatusText.textContent = this.getNetworkQualityText(quality);
+                    networkStatusText.className = 'text-green-400';
+                    break;
+                case 'good':
+                    icon.className = 'fas fa-signal text-blue-400';
+                    networkStatusText.textContent = this.getNetworkQualityText(quality);
+                    networkStatusText.className = 'text-blue-400';
+                    break;
+                case 'fair':
+                    icon.className = 'fas fa-exclamation-circle text-yellow-500';
+                    networkStatusText.textContent = this.getNetworkQualityText(quality);
+                    networkStatusText.className = 'text-yellow-500';
+                    break;
+                case 'poor':
+                    icon.className = 'fas fa-exclamation-triangle text-red-500';
+                    networkStatusText.textContent = this.getNetworkQualityText(quality);
+                    networkStatusText.className = 'text-red-500';
+                    break;
+                default:
+                    icon.className = 'fas fa-question-circle text-gray-400';
+                    networkStatusText.textContent = '未知';
+                    networkStatusText.className = 'text-gray-400';
+            }
+
+            // 添加图标到网络状态元素
+            networkStatus.insertBefore(icon, networkStatusText);
         }
 
         if (this.elements.connectionQuality) {
-            this.elements.connectionQuality.textContent = `连接质量: ${this.getNetworkQualityText(quality)}`;
+            const qualityText = this.getNetworkQualityText(quality);
+            let statusClass = '';
+
+            // 根据网络质量设置文本颜色
+            switch (quality) {
+                case 'excellent':
+                    statusClass = 'text-green-400';
+                    break;
+                case 'good':
+                    statusClass = 'text-blue-400';
+                    break;
+                case 'fair':
+                    statusClass = 'text-yellow-500';
+                    break;
+                case 'poor':
+                    statusClass = 'text-red-500';
+                    break;
+                default:
+                    statusClass = 'text-gray-400';
+            }
+
+            // 更新连接质量文本和样式
+            this.elements.connectionQuality.textContent = `连接质量: ${qualityText}`;
+            this.elements.connectionQuality.className = `text-xs ${statusClass}`;
         }
     }
 

WebApp/client/public/onebyone/store.js

@@ -386,8 +386,8 @@ class CallStateManager {
         const qualities = ['good', 'fair', 'excellent', 'poor'];
         setInterval(() => {
             if (Math.random() > 0.8) {
-                const networkQuality = qualities[Math.floor(Math.random() * qualities.length)];
+                const quality = qualities[Math.floor(Math.random() * qualities.length)];
-                this.state.session.remoteUser.networkQuality = networkQuality;
+                this.state.session.remoteUser.networkQuality = quality;
                 this.notify({ type: 'NETWORK_CHANGE', quality });
             }
         }, 5000);