feat: 添加双人对练语音通话功能

- 后端：扩展 SSE 支持 WebRTC 信令消息转发
- 前端：创建 WebRTC 连接管理模块 (webrtc.ts)
- 前端：创建 useVoiceCall 组合式函数
- 前端：在对练房间添加语音通话 UI
- 集成 Web Speech API 实现语音转文字

frontend/src/views/trainee/duo-practice-room.vue

@@ -18,6 +18,16 @@
         </div>
       </div>
       <div class="header-right">
+        <!-- 语音通话状态 -->
+        <div class="voice-status" v-if="voiceCall.isCallActive.value">
+          <el-icon class="voice-icon" :class="{ active: voiceCall.callState.value === 'connected' }">
+            <Microphone />
+          </el-icon>
+          <span class="call-duration" v-if="voiceCall.callState.value === 'connected'">
+            {{ voiceCall.formatDuration(voiceCall.callDuration.value) }}
+          </span>
+          <span class="call-status" v-else>{{ voiceCallStatusText }}</span>
+        </div>
         <el-tag :type="statusType" size="large">{{ statusText }}</el-tag>
       </div>
     </div>
@@ -81,6 +91,100 @@
           </el-button>
         </div>
 
+        <!-- 语音通话控制 -->
+        <div class="voice-control" v-if="store.isPracticing">
+          <h4>语音通话</h4>
+          
+          <!-- 未通话状态 -->
+          <div class="voice-idle" v-if="voiceCall.callState.value === 'idle'">
+            <el-button 
+              type="success" 
+              size="large" 
+              round
+              @click="voiceCall.startCall"
+            >
+              <el-icon><Microphone /></el-icon>
+              发起语音
+            </el-button>
+            <p class="voice-hint">点击发起语音通话，实时对话</p>
+          </div>
+
+          <!-- 呼叫中状态 -->
+          <div class="voice-ringing" v-else-if="voiceCall.callState.value === 'ringing'">
+            <div class="ringing-animation">
+              <el-icon :size="48" class="pulse"><Microphone /></el-icon>
+            </div>
+            <p>正在呼叫对方...</p>
+            <el-button type="danger" round @click="voiceCall.endCall">取消</el-button>
+          </div>
+
+          <!-- 来电状态 -->
+          <div class="voice-incoming" v-else-if="voiceCall.callState.value === 'ringing' && !isCallInitiator">
+            <div class="incoming-animation">
+              <el-icon :size="48" class="shake"><PhoneFilled /></el-icon>
+            </div>
+            <p>对方发起语音通话</p>
+            <div class="incoming-actions">
+              <el-button type="success" circle size="large" @click="voiceCall.answerCall">
+                <el-icon><Microphone /></el-icon>
+              </el-button>
+              <el-button type="danger" circle size="large" @click="voiceCall.rejectCall">
+                <el-icon><Close /></el-icon>
+              </el-button>
+            </div>
+          </div>
+
+          <!-- 连接中状态 -->
+          <div class="voice-connecting" v-else-if="voiceCall.callState.value === 'connecting'">
+            <el-icon :size="32" class="spin"><Loading /></el-icon>
+            <p>正在连接...</p>
+          </div>
+
+          <!-- 通话中状态 -->
+          <div class="voice-connected" v-else-if="voiceCall.callState.value === 'connected'">
+            <div class="call-info">
+              <div class="call-timer">{{ voiceCall.formatDuration(voiceCall.callDuration.value) }}</div>
+              <div class="audio-levels">
+                <div class="level-item">
+                  <span>我</span>
+                  <div class="level-bar">
+                    <div class="level-fill" :style="{ width: (voiceCall.localAudioLevel.value * 100) + '%' }"></div>
+                  </div>
+                </div>
+                <div class="level-item">
+                  <span>对方</span>
+                  <div class="level-bar">
+                    <div class="level-fill remote" :style="{ width: (voiceCall.remoteAudioLevel.value * 100) + '%' }"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 实时转写 -->
+            <div class="transcription" v-if="voiceCall.currentTranscript.value">
+              <el-icon><Edit /></el-icon>
+              <span>{{ voiceCall.currentTranscript.value }}</span>
+            </div>
+
+            <div class="call-controls">
+              <el-button 
+                :type="voiceCall.isMuted.value ? 'danger' : 'default'" 
+                circle 
+                size="large"
+                @click="voiceCall.toggleMute"
+              >
+                <el-icon>
+                  <MuteNotification v-if="voiceCall.isMuted.value" />
+                  <Microphone v-else />
+                </el-icon>
+              </el-button>
+              <el-button type="danger" circle size="large" @click="voiceCall.endCall">
+                <el-icon><Close /></el-icon>
+              </el-button>
+            </div>
+          </div>
+        </div>
+
         <!-- 操作按钮 -->
         <div class="action-buttons">
           <template v-if="store.isHost && store.isReady">
@@ -170,14 +274,46 @@
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
-import { ArrowLeft, CopyDocument, Plus, Share } from '@element-plus/icons-vue'
+import { 
+  ArrowLeft, CopyDocument, Plus, Share, Microphone, 
+  Close, Loading, MuteNotification, Edit, PhoneFilled 
+} from '@element-plus/icons-vue'
 import { useDuoPracticeStore } from '@/stores/duoPracticeStore'
+import { useVoiceCall } from '@/composables/useVoiceCall'
 import type { RoomMessage } from '@/api/duoPractice'
 
 const route = useRoute()
 const router = useRouter()
 const store = useDuoPracticeStore()
 const messagesContainer = ref<HTMLElement | null>(null)
+const isCallInitiator = ref(false)
+
+// 语音通话
+const voiceCall = useVoiceCall({
+  roomCode: computed(() => store.roomCode).value,
+  onTranscript: handleTranscript
+})
+
+// 语音通话状态文本
+const voiceCallStatusText = computed(() => {
+  const statusMap: Record<string, string> = {
+    'idle': '未连接',
+    'requesting': '请求中...',
+    'ringing': '呼叫中...',
+    'connecting': '连接中...',
+    'connected': '通话中',
+    'ended': '已结束'
+  }
+  return statusMap[voiceCall.callState.value] || ''
+})
+
+// 处理语音转写
+function handleTranscript(text: string, isFinal: boolean) {
+  if (isFinal && text.trim()) {
+    // 将转写的文字作为消息发送
+    store.sendMessage(text)
+  }
+}
 
 // 计算属性
 const statusType = computed(() => {
@@ -277,10 +413,28 @@ const scrollToBottom = () => {
   })
 }
 
-// 监听消息变化，自动滚动到底部
-watch(() => store.messages.length, () => {
+// 监听消息变化，处理信令消息并自动滚动
+watch(() => store.messages, (messages) => {
+  // 处理新消息
+  const latestMsg = messages[messages.length - 1]
+  if (latestMsg) {
+    // 检查是否是信令消息
+    const signalTypes = ['voice_start', 'voice_offer', 'voice_answer', 'ice_candidate', 'voice_end']
+    if (signalTypes.includes(latestMsg.message_type)) {
+      // 不处理自己发的信令
+      const myUserId = store.isHost ? store.hostUser?.id : store.guestUser?.id
+      if (latestMsg.user_id !== myUserId) {
+        try {
+          const payload = latestMsg.content ? JSON.parse(latestMsg.content) : {}
+          voiceCall.handleSignal(latestMsg.message_type, payload, latestMsg.user_id || 0)
+        } catch (e) {
+          console.error('[DuoPracticeRoom] 解析信令失败:', e)
+        }
+      }
+    }
+  }
   scrollToBottom()
-})
+}, { deep: true })
 
 // 初始化
 onMounted(async () => {
@@ -296,6 +450,10 @@ onMounted(async () => {
 
 onUnmounted(() => {
   store.stopPolling()
+  // 结束语音通话
+  if (voiceCall.isCallActive.value) {
+    voiceCall.endCall()
+  }
 })
 </script>
 
@@ -340,6 +498,41 @@ onUnmounted(() => {
       }
     }
   }
+  
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    
+    .voice-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      background: #f0f9eb;
+      border-radius: 20px;
+      
+      .voice-icon {
+        color: #67c23a;
+        
+        &.active {
+          animation: pulse 1.5s infinite;
+        }
+      }
+      
+      .call-duration {
+        font-family: monospace;
+        font-size: 14px;
+        font-weight: 500;
+        color: #67c23a;
+      }
+      
+      .call-status {
+        font-size: 13px;
+        color: #67c23a;
+      }
+    }
+  }
 }
 
 .room-body {
@@ -442,6 +635,137 @@ onUnmounted(() => {
     }
   }
   
+  .voice-control {
+    margin-top: 24px;
+    padding: 20px;
+    background: #f8f9fc;
+    border-radius: 12px;
+    
+    h4 {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+    }
+    
+    .voice-idle {
+      text-align: center;
+      
+      .voice-hint {
+        margin-top: 12px;
+        font-size: 12px;
+        color: #999;
+      }
+    }
+    
+    .voice-ringing, .voice-incoming, .voice-connecting {
+      text-align: center;
+      
+      p {
+        margin: 12px 0;
+        color: #666;
+      }
+      
+      .ringing-animation, .incoming-animation {
+        .el-icon {
+          color: #67c23a;
+        }
+        
+        .pulse {
+          animation: pulse 1.5s infinite;
+        }
+        
+        .shake {
+          animation: shake 0.5s infinite;
+        }
+      }
+      
+      .incoming-actions {
+        display: flex;
+        justify-content: center;
+        gap: 24px;
+        margin-top: 16px;
+      }
+    }
+    
+    .voice-connecting {
+      .spin {
+        animation: spin 1s linear infinite;
+        color: #409eff;
+      }
+    }
+    
+    .voice-connected {
+      .call-info {
+        .call-timer {
+          text-align: center;
+          font-size: 24px;
+          font-weight: 600;
+          font-family: monospace;
+          color: #67c23a;
+          margin-bottom: 16px;
+        }
+        
+        .audio-levels {
+          .level-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+            
+            span {
+              width: 40px;
+              font-size: 12px;
+              color: #666;
+            }
+            
+            .level-bar {
+              flex: 1;
+              height: 6px;
+              background: #e0e0e0;
+              border-radius: 3px;
+              overflow: hidden;
+              
+              .level-fill {
+                height: 100%;
+                background: linear-gradient(90deg, #67c23a, #95d475);
+                transition: width 0.1s ease;
+                
+                &.remote {
+                  background: linear-gradient(90deg, #409eff, #79bbff);
+                }
+              }
+            }
+          }
+        }
+      }
+      
+      .transcription {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 12px;
+        background: #fff;
+        border-radius: 8px;
+        margin: 16px 0;
+        font-size: 13px;
+        color: #666;
+        
+        .el-icon {
+          color: #409eff;
+          margin-top: 2px;
+        }
+      }
+      
+      .call-controls {
+        display: flex;
+        justify-content: center;
+        gap: 24px;
+        margin-top: 16px;
+      }
+    }
+  }
+  
   .action-buttons {
     margin-top: auto;
     display: flex;
@@ -450,6 +774,23 @@ onUnmounted(() => {
   }
 }
 
+// 动画
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.1); opacity: 0.8; }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 .chat-panel {
   flex: 1;
   display: flex;