更新角色编辑数据逻辑，新增上传图片功能并处理加载状态，优化角色库选择组件的用户体验。

components/pages/work-flow/use-edit-data.tsx

@@ -44,7 +44,8 @@ export const useEditData = (tabType: string) => {
     fetchUserRoleLibrary,
     optimizeRoleText,
     updateRoleText,
-    regenerateRole
+    regenerateRole,
+    uploadImageToQiniu
   } = useRoleServiceHook();
 
   const {
@@ -105,6 +106,7 @@ export const useEditData = (tabType: string) => {
     updateRoleText,
     regenerateRole,
     fetchUserRoleLibrary,
+    uploadImageToQiniu,
     // role shot
     shotSelectionList,
     selectedRoleId,

components/ui/character-tab-content.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ImageUp, Library, Play, Pause, RefreshCw, Wand2, Users, Check, ReplaceAll, X, TriangleAlert } from 'lucide-react';
+import { ImageUp, Library, Play, Pause, RefreshCw, Wand2, Users, Check, ReplaceAll, X, TriangleAlert, Loader2 } from 'lucide-react';
 import { cn } from '@/public/lib/utils';
 import { CharacterEditor } from './character-editor';
 import ImageBlurTransition from './ImageBlurTransition';
@@ -78,6 +78,7 @@ export function CharacterTabContent({
   const [isRegenerate, setIsRegenerate] = useState(false);
   const [isLoadingShots, setIsLoadingShots] = useState(false);
   const [isLoadingLibrary, setIsLoadingLibrary] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
 
   const {
     loading,
@@ -89,6 +90,7 @@ export function CharacterTabContent({
     updateRoleText,
     regenerateRole,
     fetchUserRoleLibrary,
+    uploadImageToQiniu,
     // role shot
     shotSelectionList,
     fetchRoleShots,
@@ -212,6 +214,7 @@ export function CharacterTabContent({
   };
 
   const handleUploadClick = () => {
+    setIsUploading(true);
     fileInputRef.current?.click();
   };
 
@@ -227,11 +230,12 @@ export function CharacterTabContent({
 
     // 创建本地预览URL
     const imageUrl = URL.createObjectURL(file);
-    setShowAddToLibrary(false);
-    handleReplaceCharacter(imageUrl);
-
-    // 清空input的值，这样同一个文件可以重复选择
-    event.target.value = '';
+    uploadImageToQiniu(file).then((data) => {
+      console.log('上传图片成功', data);
+      // 清空input的值，这样同一个文件可以重复选择
+      event.target.value = '';
+      setIsUploading(false);
+    });
   };
 
   // 如果loading 显示loading状态
@@ -338,8 +342,9 @@ export function CharacterTabContent({
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
                 onClick={() => handleOpenReplaceLibrary()}
+                disabled={isUploading}
               >
-                <Library className="w-4 h-4" />
+                {isUploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Library className="w-4 h-4" />}
               </motion.button>
             </div>
           </div>