Răsfoiți Sursa

✨ feat(classroom): 实现用户名显示功能,优化用户体验

- 添加getUserNameByIdSync同步用户名获取函数,优先从RTC引擎获取
- 替换多处userId显示为用户名,包括举手通知、静音操作、移出课堂等场景
- 优化系统消息和提示信息中的用户标识,提升课堂交互体验
- 确保在各种操作场景下都能正确显示用户名称而非ID
yourname 6 luni în urmă
părinte
comite
238dc6bd52
1 a modificat fișierele cu 40 adăugiri și 21 ștergeri
  1. 40 21
      src/client/mobile/components/Classroom/useClassroom.ts

+ 40 - 21
src/client/mobile/components/Classroom/useClassroom.ts

@@ -120,7 +120,6 @@ export const useClassroom = ({ user }:{ user : User }) => {
   const remoteScreenContainer = useRef<HTMLDivElement>(null); // 主屏幕共享容器(重命名)
   const remoteCameraContainer = useRef<HTMLDivElement>(null); // 摄像头小窗容器
 
-  // 辅助函数
   const showMessage = (text: string, sender?: string, senderId?: string, senderType?: UserType): void => {
     const message: Message = {
       type: 'text',
@@ -154,6 +153,26 @@ export const useClassroom = ({ user }:{ user : User }) => {
     setMessageList((prevMessageList) => [...prevMessageList, message]);
   };
 
+  // 同步版本的用户名获取,用于需要立即返回的场景
+  const getUserNameByIdSync = (userId: string): string => {
+    // 1. If RTC engine is available, try to get user info which may contain display name
+    if (aliRtcEngine.current) {
+      try {
+        const userInfo = aliRtcEngine.current.getUserInfo(userId);
+        // Check if userInfo has displayName or other name fields
+        // Note: This depends on the RTC SDK implementation and whether display name was set during joinChannel
+        if (userInfo && userInfo.displayName ) {
+          return userInfo.displayName;
+        }
+      } catch (error) {
+        console.error('获取RTC用户信息失败:', error);
+      }
+    }
+    
+    // 2. Fallback to default
+    return `用户${userId}`;
+  };
+
   // 保存消息到数据库
   const saveMessageToDatabase = async (message: Message): Promise<void> => {
     if (!classId) return;
@@ -400,7 +419,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
               timestamp: data.timestamp || Date.now()
             };
             setHandUpList([...handUpList, handUpData]);
-            showSystemMessage(`${data.studentName || data.studentId} 举手了`);
+            showSystemMessage(`${data.studentName || getUserNameByIdSync(data.studentId)} 举手了`);
           } else if (data.action === InteractionAction.CancelHandUp) {
             setHandUpList(handUpList.filter(h => h.studentId !== data.studentId));
           }
@@ -560,16 +579,16 @@ export const useClassroom = ({ user }:{ user : User }) => {
             );
             
             console.log(`已订阅用户 ${userId} 的视频流`);
-            showSystemMessage(`已显示用户 ${userId} 的视频`);
+            showSystemMessage(`已显示用户 ${getUserNameByIdSync(userId)} 的视频`);
           } catch (err) {
             console.error(`订阅用户 ${userId} 视频流失败:`, err);
-            showSystemMessage(`订阅用户 ${userId} 视频流失败`);
+            showSystemMessage(`订阅用户 ${getUserNameByIdSync(userId)} 视频流失败`);
           }
           break;
           
         case 1: // 取消订阅
           console.log(`取消订阅用户 ${userId} 的视频流`);
-          showSystemMessage(`取消订阅用户 ${userId} 的视频流`);
+          showSystemMessage(`取消订阅用户 ${getUserNameByIdSync(userId)} 的视频流`);
           removeRemoteVideo(userId, 'camera');
           break;
           
@@ -621,16 +640,16 @@ export const useClassroom = ({ user }:{ user : User }) => {
             );
             
             console.log(`已订阅用户 ${userId} 的屏幕分享流`);
-            showSystemMessage(`已显示用户 ${userId} 的屏幕分享`);
+            showSystemMessage(`已显示用户 ${getUserNameByIdSync(userId)} 的屏幕分享`);
           } catch (err) {
             console.error(`订阅用户 ${userId} 屏幕分享流失败:`, err);
-            showSystemMessage(`订阅用户 ${userId} 屏幕分享流失败`);
+            showSystemMessage(`订阅用户 ${getUserNameByIdSync(userId)} 屏幕分享流失败`);
           }
           break;
           
         case 1: // 取消订阅
           console.log(`取消订阅用户 ${userId} 的屏幕分享流`);
-          showSystemMessage(`取消订阅用户 ${userId} 的屏幕分享流`);
+          showSystemMessage(`取消订阅用户 ${getUserNameByIdSync(userId)} 的屏幕分享流`);
           removeRemoteVideo(userId, 'screen');
           break;
           
@@ -1050,7 +1069,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
       // 先保存静音消息到数据库
       await saveMessageToDatabase({
         type: 'system',
-        content: mute ? `老师已将用户 ${userId} 静音` : `老师已取消用户 ${userId} 的静音`,
+        content: mute ? `老师已将用户 ${getUserNameByIdSync(userId)} 静音` : `老师已取消用户 ${getUserNameByIdSync(userId)} 的静音`,
         sender: user?.nickname || user?.username || '老师',
         senderId: userId,
         timestamp: Date.now()
@@ -1073,7 +1092,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
         aliRtcEngine.current.muteRemoteAudioPlaying(userId, mute);
       }
       
-      showToast('info', mute ? `已静音用户 ${userId}` : `已取消静音用户 ${userId}`);
+      showToast('info', mute ? `已静音用户 ${getUserNameByIdSync(userId)}` : `已取消静音用户 ${getUserNameByIdSync(userId)}`);
     } catch (err: any) {
       setErrorMessage(`操作失败: ${err.message}`);
     }
@@ -1185,7 +1204,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
         token,
         timestamp,
       },
-      userId
+      user?.nickname || user?.username || userId
     );
   };
 
@@ -1273,8 +1292,8 @@ export const useClassroom = ({ user }:{ user : User }) => {
       // 先保存举手消息到数据库
       await saveMessageToDatabase({
         type: 'system',
-        content: question ? `学生 ${userId} 举手提问: ${question}` : `学生 ${userId} 举手`,
-        sender: user?.nickname || user?.username || `学生${userId}`,
+        content: question ? `学生 ${getUserNameByIdSync(userId)} 举手提问: ${question}` : `学生 ${getUserNameByIdSync(userId)} 举手`,
+        sender: user?.nickname || user?.username || `学生${getUserNameByIdSync(userId)}`,
         senderId: userId,
         timestamp: Date.now()
       });
@@ -1321,7 +1340,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
         aliRtcEngine.current.muteRemoteAudioPlaying(studentId, true);
       }
       
-      showToast('info', `已静音学生 ${studentId}`);
+      showToast('info', `已静音学生 ${getUserNameByIdSync(studentId)}`);
     } catch (err: any) {
       setErrorMessage(`静音失败: ${err.message}`);
     }
@@ -1334,7 +1353,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
       // 先保存踢人消息到数据库
       await saveMessageToDatabase({
         type: 'system',
-        content: `老师已将用户 ${studentId} 移出课堂`,
+        content: `老师已将用户 ${getUserNameByIdSync(studentId)} 移出课堂`,
         sender: user?.nickname || user?.username || '老师',
         senderId: userId,
         timestamp: Date.now()
@@ -1352,7 +1371,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
         level: HIGH,
       });
       
-      showToast('info', `已发送移出指令给学生 ${studentId}`);
+      showToast('info', `已发送移出指令给学生 ${getUserNameByIdSync(studentId)}`);
     } catch (err: any) {
       setErrorMessage(`移出失败: ${err.message}`);
     }
@@ -1367,7 +1386,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
         groupId: classId,
         userList: [studentId],
       });
-      showToast('info', `已禁言学生 ${studentId}(IM聊天)`);
+      showToast('info', `已禁言学生 ${getUserNameByIdSync(studentId)}(IM聊天)`);
     } catch (err: any) {
       setErrorMessage(`IM禁言失败: ${err.message}`);
     }
@@ -1382,7 +1401,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
         groupId: classId,
         userList: [studentId],
       });
-      showToast('info', `已取消禁言学生 ${studentId}(IM聊天)`);
+      showToast('info', `已取消禁言学生 ${getUserNameByIdSync(studentId)}(IM聊天)`);
     } catch (err: any) {
       setErrorMessage(`取消IM禁言失败: ${err.message}`);
     }
@@ -1499,7 +1518,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
       // 先保存应答举手消息到数据库
       await saveMessageToDatabase({
         type: 'system',
-        content: `老师已应答学生 ${studentId} 的举手`,
+        content: `老师已应答学生 ${getUserNameByIdSync(studentId)} 的举手`,
         sender: user?.nickname || user?.username || '老师',
         senderId: userId,
         timestamp: Date.now()
@@ -1514,7 +1533,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
         type: 88893,
         level: HIGH,
       });
-      showToast('info', `已应答学生 ${studentId} 的举手`);
+      showToast('info', `已应答学生 ${getUserNameByIdSync(studentId)} 的举手`);
     } catch (err: any) {
       setErrorMessage(`应答失败: ${err.message}`);
     }
@@ -1528,7 +1547,7 @@ export const useClassroom = ({ user }:{ user : User }) => {
       await saveMessageToDatabase({
         type: 'system',
         content: `问题: ${question}`,
-        sender: user?.nickname || user?.username || `用户${userId}`,
+        sender: user?.nickname || user?.username || `用户${getUserNameByIdSync(userId)}`,
         senderId: userId,
         timestamp: Date.now()
       });