优化图片上传的逻辑

src/pages/projectDetail/projectDetail.js

@@ -79,6 +79,7 @@ const ProjectDetail = () => {
   const [drawingSegmentId, setDrawingSegmentId] = useState(null);
   const [totalDrawableSegments, setTotalDrawableSegments] = useState(0);
   const [completedDrawings, setCompletedDrawings] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
 
   const fileInputRef = useRef(null);
 
@@ -371,8 +372,15 @@ const ProjectDetail = () => {
       return;
     }
 
+    // 获取当前处理的分镜
+    const currentSegment = segments.find(s => s.id === uploadSegmentId);
+    if (!currentSegment) {
+      toast.error('分镜不存在');
+      return;
+    }
+
     try {
-      setLoading(true);
+      setIsUploading(true);
 
       // 如果是图片类型，先上传到Coze获取链接
       if (uploadType === 'image') {
@@ -389,6 +397,15 @@ const ProjectDetail = () => {
           draw_status: 2 // 设置为已完成状态
         });
 
+        // 直接更新本地状态，不刷新整个页面
+        setSegments(prevSegments =>
+          prevSegments.map(seg =>
+            seg.id === uploadSegmentId
+              ? { ...seg, image_path: imageUrl, draw_status: 2 }
+              : seg
+          )
+        );
+
         toast.success('图片上传成功');
       } else {
         // 其他类型文件（音频、视频）的处理逻辑
@@ -407,16 +424,31 @@ const ProjectDetail = () => {
         }
 
         await bookInfoService.updateBookInfo(uploadSegmentId, updateData);
+
+        // 直接更新本地状态，不刷新整个页面
+        setSegments(prevSegments =>
+          prevSegments.map(seg =>
+            seg.id === uploadSegmentId
+              ? { ...seg, ...updateData }
+              : seg
+          )
+        );
+
         toast.success('文件上传成功');
       }
 
+      // 关闭上传对话框
       setShowUploadModal(false);
-      await loadProjectDetail();
+      // 清空选择的文件
+      setSelectedFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
     } catch (error) {
       console.error('文件上传失败:', error);
       toast.error(`文件上传失败: ${error.message}`);
     } finally {
-      setLoading(false);
+      setIsUploading(false);
     }
   };
 
@@ -2035,7 +2067,7 @@ const ProjectDetail = () => {
   };
 
   if (loading && !silentLoading) {
-    return <div className="text-center p-5">加载中...</div>;
+    return null; // 移除加载中的显示
   }
 
   return (
@@ -2781,9 +2813,21 @@ const ProjectDetail = () => {
           <Button
             variant="primary"
             onClick={handleFileUpload}
-            disabled={loading || !selectedFile}
+            disabled={isUploading || !selectedFile}
           >
-            {loading ? '上传中...' : '上传'}
+            {isUploading ? (
+              <>
+                <Spinner
+                  as="span"
+                  animation="border"
+                  size="sm"
+                  role="status"
+                  aria-hidden="true"
+                  className="me-1"
+                />
+                上传中...
+              </>
+            ) : '上传'}
           </Button>
         </Modal.Footer>
       </Modal>