2
0
Просмотр исходного кода

✨ feat(classroom): 优化移动端教室布局和功能权限

- 调整摄像头和麦克风按钮权限,仅教师可见
- 优化横屏模式下的UI布局和交互体验
- 修复代码中多余的空行和注释格式
- 改进屏幕共享功能的视觉反馈
- 优化消息区域和控制面板的响应式布局
yourname 6 месяцев назад
Родитель
Сommit
5c1b76a828
1 измененных файлов с 38 добавлено и 35 удалено
  1. 38 35
      src/client/mobile/components/Classroom/ClassroomLayout.tsx

+ 38 - 35
src/client/mobile/components/Classroom/ClassroomLayout.tsx

@@ -72,7 +72,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
     }
 
     setIsLandscape(!isLandscape);
-    
+
     if (!isLandscape) {
       // 进入横屏模式
       if (document.documentElement.requestFullscreen) {
@@ -81,7 +81,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
       // 尝试横屏旋转(需要设备支持)
       // @ts-ignore
       if (screen.orientation && screen.orientation.lock) {
-      // @ts-ignore
+        // @ts-ignore
         screen.orientation.lock('landscape').catch(() => {
           showToast('info', '您的设备不支持自动横屏,请手动旋转设备');
         });
@@ -175,7 +175,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
 
       {/* 消息和控制面板列 */}
       <div className={`${showVideo ? `${isLandscape ? 'w-96 flex-none h-screen' : 'w-full h-[calc(100vh-300px)]'}` : 'h-full'} md:w-96 md:flex-none flex flex-col overflow-hidden ${isLandscape ? 'max-h-screen' : ''}`}>
-        {/* 消息区域 */}          
+        {/* 消息区域 */}
         {/* 消息列表 - 填充剩余空间 */}
         <MessageList messages={messageList} />
 
@@ -196,37 +196,40 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
               >
                 <VideoCameraIcon className="w-4 h-4" />
               </Button>
-              <Button
-                type="button"
-                onClick={toggleCamera}
-                className={`p-2 rounded-full ${isCameraOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
-                title={isCameraOn ? '关闭摄像头' : '开启摄像头'}
-                size="icon"
-                variant="ghost"
-              >
-                <CameraIcon className="w-4 h-4" />
-              </Button>
-              <Button
-                type="button"
-                onClick={toggleAudio}
-                className={`p-2 rounded-full ${isAudioOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
-                title={isAudioOn ? '关闭麦克风' : '开启麦克风'}
-                size="icon"
-                variant="ghost"
-              >
-                <MicrophoneIcon className="w-4 h-4" />
-              </Button>
               {role === Role.Teacher && (
-                <Button
-                  type="button"
-                  onClick={toggleScreenShare}
-                  className={`p-2 rounded-full ${isScreenSharing ? 'bg-green-500' : 'bg-blue-500'} text-white`}
-                  title={isScreenSharing ? '停止共享' : '共享屏幕'}
-                  size="icon"
-                  variant="ghost"
-                >
-                  <ShareIcon className="w-4 h-4" />
-                </Button>
+                <>
+                  <Button
+                    type="button"
+                    onClick={toggleCamera}
+                    className={`p-2 rounded-full ${isCameraOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
+                    title={isCameraOn ? '关闭摄像头' : '开启摄像头'}
+                    size="icon"
+                    variant="ghost"
+                  >
+                    <CameraIcon className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={toggleAudio}
+                    className={`p-2 rounded-full ${isAudioOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
+                    title={isAudioOn ? '关闭麦克风' : '开启麦克风'}
+                    size="icon"
+                    variant="ghost"
+                  >
+                    <MicrophoneIcon className="w-4 h-4" />
+                  </Button>
+
+                  <Button
+                    type="button"
+                    onClick={toggleScreenShare}
+                    className={`p-2 rounded-full ${isScreenSharing ? 'bg-green-500' : 'bg-blue-500'} text-white`}
+                    title={isScreenSharing ? '停止共享' : '共享屏幕'}
+                    size="icon"
+                    variant="ghost"
+                  >
+                    <ShareIcon className="w-4 h-4" />
+                  </Button>
+                </>
               )}
               {role === Role.Teacher && shareLink && (
                 <Button
@@ -262,7 +265,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
 
               {/* 图片选择按钮 */}
               <ImageSelectorButton />
-  
+
               {/* 角色特定按钮 */}
               {role === Role.Teacher && (
                 <>
@@ -273,7 +276,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
                   <AllMuteToggleButton />
                 </>
               )}
-  
+
               {/* {role === Role.Student && (
                 <>
                   <StudentHandUpButton />