♻️ refactor(classroom): 提取图片选择功能为独立组件

- 创建ImageSelectorButton组件，封装图片选择相关逻辑
- 从ClassroomLayout中移除图片选择对话框和状态管理代码
- 在ClassroomLayout中使用新的ImageSelectorButton组件
- 移除未使用的import和变量(showImageSelector, sendImageMessageById)
- 添加uploadUserId属性到FileSelector组件以支持用户关联

src/client/mobile/components/Classroom/ClassroomLayout.tsx

@@ -8,14 +8,10 @@ import {
   ShareIcon,
   ClipboardDocumentIcon,
   PaperAirplaneIcon,
-  PhotoIcon
 } from '@heroicons/react/24/outline';
 import { Button } from '@/client/components/ui/button';
 import { Textarea } from '@/client/components/ui/textarea';
 import { Card, CardContent } from '@/client/components/ui/card';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import { toast } from 'sonner';
 import { TeacherClassControlButton } from './TeacherClassControlButton';
 import { TeacherStudentManagementButton } from './TeacherStudentManagementButton';
 import { TeacherHandUpManagementButton } from './TeacherHandUpManagementButton';
@@ -23,8 +19,8 @@ import { TeacherQuestionManagementButton } from './TeacherQuestionManagementButt
 import { AllMuteToggleButton } from './AllMuteToggleButton';
 import { StudentHandUpButton } from './StudentHandUpButton';
 import { StudentQuestionButton } from './StudentQuestionButton';
-import { FileSelector } from '@/client/components/FileSelector';
 import { MessageList } from './MessageList';
+import { ImageSelectorButton } from './ImageSelectorButton';
 
 interface ClassroomLayoutProps {
   children: ReactNode;
@@ -34,7 +30,6 @@ interface ClassroomLayoutProps {
 export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
   const [showVideo, setShowVideo] = React.useState(role !== Role.Teacher);
   const [showShareLink, setShowShareLink] = React.useState(false);
-  const [showImageSelector, setShowImageSelector] = React.useState(false);
   const {
     remoteScreenContainer,
     remoteCameraContainer,
@@ -54,8 +49,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
     shareLink,
     showCameraOverlay,
     setShowCameraOverlay,
-    showToast,
-    sendImageMessageById
+    showToast
   } = useClassroomContext();
 
   return (
@@ -167,16 +161,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
               )}
 
               {/* 图片选择按钮 */}
-              <Button
-                type="button"
-                onClick={() => setShowImageSelector(true)}
-                className="p-2 rounded-full bg-blue-500 text-white"
-                title="选择图片"
-                size="icon"
-                variant="ghost"
-              >
-                <PhotoIcon className="w-4 h-4" />
-              </Button>
+              <ImageSelectorButton />
   
               {/* 角色特定按钮 */}
               {role === Role.Teacher && (
@@ -254,43 +239,6 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
         </div>
       </div>
 
-      {/* 图片选择器对话框 */}
-      <Dialog open={showImageSelector} onOpenChange={setShowImageSelector}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>选择图片</DialogTitle>
-            <DialogDescription>
-              选择要发送的图片文件
-            </DialogDescription>
-          </DialogHeader>
-          
-          <FileSelector
-            filterType="image"
-            allowMultiple={false}
-            showPreview={true}
-            placeholder="选择图片"
-            title="选择图片"
-            description="选择要发送的图片文件"
-            onChange={(fileId) => {
-              if (fileId) {
-                // 使用文件ID发送图片消息
-                sendImageMessageById(fileId as number);
-                setShowImageSelector(false);
-              }
-            }}
-          />
-
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setShowImageSelector(false)}
-            >
-              取消
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
 
     </div>
   );

src/client/mobile/components/Classroom/ImageSelectorButton.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { PhotoIcon } from '@heroicons/react/24/outline';
+import { Button } from '@/client/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
+import { FileSelector } from '@/client/components/FileSelector';
+import { useClassroomContext } from './ClassroomProvider';
+import { useAuth } from '../../hooks/AuthProvider';
+
+export const ImageSelectorButton: React.FC = () => {
+  const [showImageSelector, setShowImageSelector] = React.useState(false);
+  const { sendImageMessageById } = useClassroomContext();
+  const { user } = useAuth()
+
+  const handleImageSelect = (fileId: number | null | number[]) => {
+    if (fileId && typeof fileId === 'number') {
+      // 使用文件ID发送图片消息
+      sendImageMessageById(fileId);
+      setShowImageSelector(false);
+    }
+  };
+
+  return (
+    <>
+      {/* 图片选择按钮 */}
+      <Button
+        type="button"
+        onClick={() => setShowImageSelector(true)}
+        className="p-2 rounded-full bg-blue-500 text-white"
+        title="选择图片"
+        size="icon"
+        variant="ghost"
+      >
+        <PhotoIcon className="w-4 h-4" />
+      </Button>
+
+      {/* 图片选择器对话框 */}
+      <Dialog open={showImageSelector} onOpenChange={setShowImageSelector}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>选择图片</DialogTitle>
+            <DialogDescription>
+              选择要发送的图片文件
+            </DialogDescription>
+          </DialogHeader>
+          
+          <FileSelector
+            filterType="image"
+            allowMultiple={false}
+            showPreview={true}
+            placeholder="选择图片"
+            title="选择图片"
+            description="选择要发送的图片文件"
+            onChange={handleImageSelect}
+            uploadUserId={user?.id}
+          />
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setShowImageSelector(false)}
+            >
+              取消
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};