diff --git a/WebApp/client/public/onebyone/renderer.js b/WebApp/client/public/onebyone/renderer.js
index bcc0e54..7319815 100644
--- a/WebApp/client/public/onebyone/renderer.js
+++ b/WebApp/client/public/onebyone/renderer.js
@@ -91,6 +91,10 @@ class UIRenderer {
                 break;
             case 'REMOTE_STREAM_OBTAINED':
                 this.renderRemoteStream(state.remoteStream);
+                // 当获取到远程流时，隐藏连接中提示
+                if (this.elements.connectingOverlay) {
+                    this.elements.connectingOverlay.classList.add('hidden');
+                }
                 break;
             case 'REMOTE_MEDIA_CHANGE':
                 this.renderRemoteVideo(state.session.remoteUser);
@@ -106,12 +110,26 @@ class UIRenderer {
             case 'NETWORK_CHANGE':
                 this.renderNetworkStatus(changes.quality);
                 break;
+            case 'CALL_STATUS_CHANGE':
+                this.renderCallStatus(changes.status);
+                break;
             case 'CALL_ENDED':
                 this.renderCallEnded();
                 break;
         }
     }
 
+    // 渲染通话状态
+    renderCallStatus(status) {
+        if (this.elements.connectingOverlay) {
+            if (status === 'connecting') {
+                this.elements.connectingOverlay.classList.remove('hidden');
+            } else {
+                this.elements.connectingOverlay.classList.add('hidden');
+            }
+        }
+    }
+
     // 渲染头部
     renderHeader(session) {
         if (this.elements.headerTitle) {
diff --git a/WebApp/client/public/onebyone/store.js b/WebApp/client/public/onebyone/store.js
index 46517f1..40159cb 100644
--- a/WebApp/client/public/onebyone/store.js
+++ b/WebApp/client/public/onebyone/store.js
@@ -172,7 +172,9 @@ class CallStateManager {
     async setUp(connectionId) {
         //TODO
         this.connectionId = connectionId; // 获取连接ID
-
+        // 设置状态为连接中
+        this.state.session.status = 'connecting';
+        this.notify({ type: 'CALL_STATUS_CHANGE', status: 'connecting' });
         // 确保本地流已经初始化
         if (!this.state.localStream) {
             console.log('Local stream not available, waiting for initialization...');
@@ -196,6 +198,10 @@ class CallStateManager {
 
         // 连接建立回调
         this.renderstreaming.onConnect = () => {
+            // 连接建立后，更新状态为ongoing
+        this.state.session.status = 'ongoing';
+        this.notify({ type: 'CALL_STATUS_CHANGE', status: 'ongoing' });
+        
             if (this.state.localStream) {
                 const tracks = this.state.localStream.getTracks(); // 获取本地媒体轨道
                 for (const track of tracks) {