新增角色库加载状态管理，优化角色选择和替换逻辑。更新角色库选择组件以支持加载状态，调整角色替换面板以确保用户体验流畅。同时，修复角色选择时的状态管理，增强功能的完整性。

components/ui/shot-tab-content.tsx

@@ -27,17 +27,24 @@ export function ShotTabContent({
     shotData,
     setSelectedSegment,
     regenerateVideoSegment,
-    filterRole
+    filterRole,
+    fetchUserRoleLibrary,
+    userRoleLibrary,
+    fetchRoleShots,
+    shotSelectionList,
+    applyRoleToSelectedShots
   } = useEditData('shot');
   const [selectedIndex, setSelectedIndex] = useState(currentSketchIndex);
 
   const [detections, setDetections] = useState<PersonDetection[]>([]);
   const [scanState, setScanState] = useState<'idle' | 'scanning' | 'detected'>('idle');
   const [isScanFailed, setIsScanFailed] = useState(false);
-
+  const [isLoadingLibrary, setIsLoadingLibrary] = useState(false);
   const [isReplaceLibraryOpen, setIsReplaceLibraryOpen] = useState(false);
   const [isReplacePanelOpen, setIsReplacePanelOpen] = useState(false);
-
+  const [selectedCharacter, setSelectedCharacter] = useState<any>(null);
+  const [selectedLibaryRole, setSelectedLibaryRole] = useState<any>(null);
+  const [isLoadingShots, setIsLoadingShots] = useState(false);
   const shotsEditorRef = useRef<any>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
 
@@ -91,24 +98,36 @@ export function ShotTabContent({
   };
 
   // 处理人物点击 打开角色库
-  const handlePersonClick = (person: PersonDetection) => {
+  const handlePersonClick = async (person: PersonDetection) => {
     console.log('person', person);
+    setSelectedCharacter(person);
+    setIsLoadingLibrary(true);
     setIsReplaceLibraryOpen(true);
+    await fetchUserRoleLibrary();
+    setIsLoadingLibrary(false);
   };
 
   // 从角色库中选择角色
   const handleSelectCharacter = (index: number) => {
     console.log('index', index);
+    setSelectedLibaryRole(userRoleLibrary[index]);
     setIsReplaceLibraryOpen(false);
-    // 模拟打开替换面板
-    setTimeout(() => {
-      setIsReplacePanelOpen(true);
-    }, 1000);
+    handleStartReplaceCharacter();
+  };
+
+  const handleStartReplaceCharacter = async () => {
+    setIsLoadingShots(true);
+    setIsReplacePanelOpen(true);
+    // 获取当前角色对应的视频片段
+    await fetchRoleShots(selectedCharacter?.name || '');
+    // 打开替换角色面板
+    setIsLoadingShots(false);
   };
 
   // 确认替换角色
-  const handleConfirmReplace = (selectedShots: string[], addToLibrary: boolean) => {
-
+  const handleConfirmReplace = () => {
+    applyRoleToSelectedShots(selectedLibaryRole);
+    setIsReplacePanelOpen(false);
   };
 
   // 点击按钮重新生成
@@ -373,8 +392,9 @@ export function ShotTabContent({
         onClose={() => setIsReplacePanelOpen(false)}
       >
         <ReplaceCharacterPanel
-          shots={mockShots}
-          character={mockCharacter}
+          isLoading={isLoadingShots}
+          shots={shotSelectionList}
+          role={selectedLibaryRole}
           showAddToLibrary={false}
           onClose={() => setIsReplacePanelOpen(false)}
           onConfirm={handleConfirmReplace}
@@ -382,6 +402,8 @@ export function ShotTabContent({
       </FloatingGlassPanel>
 
       <CharacterLibrarySelector
+        isLoading={isLoadingLibrary}
+        userRoleLibrary={userRoleLibrary}
         isReplaceLibraryOpen={isReplaceLibraryOpen}
         setIsReplaceLibraryOpen={setIsReplaceLibraryOpen}
         onSelect={handleSelectCharacter}