优化UI：播放按钮等

src/index.html

@@ -188,11 +188,21 @@
             left: 50%;
             transform: translateX(-50%);
             z-index: 10;
-            display: flex;
+            display: flex !important;
+            flex-direction: row !important;
             justify-content: center;
+            align-items: center;
             gap: 20px;
         }
         
+        /* 确保移动端也保持同一行 */
+        @media (max-width: 768px) {
+            .controls {
+                flex-direction: row !important;
+                gap: 15px;
+            }
+        }
+        
         #startButton {
             width: 60px;
             height: 60px;
@@ -291,10 +301,32 @@
             cursor: not-allowed;
         }
         
+        #stopButton {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: rgba(220, 53, 69, 0.9);
+            backdrop-filter: blur(10px);
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+            padding: 0; /* 确保没有内边距影响居中 */
+        }
+        
+        #stopButton:hover:not(:disabled) {
+            background: rgba(200, 35, 51, 0.95);
+            transform: scale(1.1);
+        }
+        
         #stopButton svg {
             width: 24px;
             height: 24px;
-            fill: white;
+            display: block; /* 确保SVG作为块级元素 */
+            margin: auto; /* 额外的居中保证 */
         }
         
         #stopButton:disabled {
@@ -312,8 +344,8 @@
         </header>
 
         <div class="main-content">
-            <!-- 音频状态显示 - 显示状态文本 -->
+            <!-- 音频状态显示 - 完全隐藏 -->
-            <div class="audio-status">
+            <div class="audio-status" style="display: none;">
                 <div class="status-indicator">
                     <span id="audioStatus" style="display: none;">未连接</span>
                 </div>
@@ -353,18 +385,8 @@
                     <svg id="callIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="white"/>
                     </svg>
-                    <!-- 通话中图标（初始隐藏） -->
+                    <!-- 通话中文字显示（初始隐藏） -->
-                    <svg id="callingIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">
+                    <span id="callingText" style="display: none; color: white; font-size: 14px;">正在通话中</span>
-                        <circle cx="12" cy="12" r="3" fill="white">
-                            <animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
-                            <animate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite"/>
-                        </circle>
-                        <circle cx="12" cy="12" r="8" stroke="white" stroke-width="2" fill="none" opacity="0.6">
-                            <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/>
-                            <animate attributeName="opacity" values="0.6;0.2;0.6" dur="2s" repeatCount="indefinite"/>
-                        </circle>
-                        <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="white" opacity="0.8"/>
-                    </svg>
                 </button>
                 <button id="stopButton" class="btn btn-danger" disabled title="结束通话" style="display: none;">
                     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

src/index.js

@@ -832,7 +832,7 @@ class WebRTCChat {
             this.startButton.disabled = true;
             this.stopButton.disabled = false;
             
-            // 显示结束通话按钮
+            // 显示停止按钮，确保在同一行
             this.stopButton.style.display = 'block';
             
             this.updateAudioStatus('正在通话中', 'connected');
@@ -1231,12 +1231,12 @@ class WebRTCChat {
     // 添加图标切换方法
     switchToCallingIcon() {
         const callIcon = document.getElementById('callIcon');
-        const callingIcon = document.getElementById('callingIcon');
+        const callingText = document.getElementById('callingText');
         const startButton = this.startButton;
         
-        if (callIcon && callingIcon && startButton) {
+        if (callIcon && callingText && startButton) {
             callIcon.style.display = 'none';
-            callingIcon.style.display = 'block';
+            callingText.style.display = 'block';
             startButton.classList.add('calling');
             startButton.title = '通话中...';
         }
@@ -1244,12 +1244,12 @@ class WebRTCChat {
     
     switchToDefaultIcon() {
         const callIcon = document.getElementById('callIcon');
-        const callingIcon = document.getElementById('callingIcon');
+        const callingText = document.getElementById('callingText');
         const startButton = this.startButton;
         
-        if (callIcon && callingIcon && startButton) {
+        if (callIcon && callingText && startButton) {
             callIcon.style.display = 'block';
-            callingIcon.style.display = 'none';
+            callingText.style.display = 'none';
             startButton.classList.remove('calling');
             startButton.title = '开始通话';
             startButton.disabled = false;

src/styles.css

@@ -423,8 +423,10 @@ header p {
     }
     
     .controls {
-        flex-direction: column;
+        flex-direction: row;
         align-items: center;
+        justify-content: center;
+        gap: 15px;
     }
     
     .text-input-group {