diff --git a/components/script-renderer/ScriptRenderer.tsx b/components/script-renderer/ScriptRenderer.tsx
index 3ae72ad..b4d63df 100644
--- a/components/script-renderer/ScriptRenderer.tsx
+++ b/components/script-renderer/ScriptRenderer.tsx
@@ -14,9 +14,10 @@ interface ScriptRendererProps {
   isPauseWorkFlow: boolean;
   applyScript: any;
   mode: string;
+  from: string;
 }
 
-export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPauseWorkFlow, setAnyAttribute, isPauseWorkFlow, applyScript, mode }) => {
+export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPauseWorkFlow, setAnyAttribute, isPauseWorkFlow, applyScript, mode, from }) => {
   const [activeBlockId, setActiveBlockId] = useState<string | null>(null);
   const [hoveredBlockId, setHoveredBlockId] = useState<string | null>(null);
   const contentRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
@@ -72,7 +73,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
       default:
         return <p className="mb-2">
           {
-            isInit ? (
+            (isInit && from !== 'tab') ? (
               <TypewriterText text={content.text || ''} stableId={content.type} />
             ) : (
               <span>{content.text}</span>
diff --git a/components/ui/character-tab-content.tsx b/components/ui/character-tab-content.tsx
index 2922bc2..6720792 100644
--- a/components/ui/character-tab-content.tsx
+++ b/components/ui/character-tab-content.tsx
@@ -142,12 +142,6 @@ export function CharacterTabContent({
     setIgnoreReplace(true);
   };
 
-  const handleReplaceCharacter = (url: string) => {
-    setEnableAnimation(true);
-    // 替换角色
-
-    setIsReplacePanelOpen(true);
-  };
   // President Alfred King  Samuel Ryan
   const handleConfirmReplace = (selectedShots: string[], addToLibrary: boolean) => {
     // 处理替换确认逻辑
@@ -192,7 +186,7 @@ export function CharacterTabContent({
     // 使用真实的角色数据
     const selectedRole = userRoleLibrary[index];
     if (selectedRole) {
-      handleReplaceCharacter(selectedRole.imageUrl);
+      handleStartReplaceCharacter();
     }
   };
 
diff --git a/components/ui/script-tab-content.tsx b/components/ui/script-tab-content.tsx
index 887c4c8..1cb1e71 100644
--- a/components/ui/script-tab-content.tsx
+++ b/components/ui/script-tab-content.tsx
@@ -43,6 +43,7 @@ export function ScriptTabContent({
           isPauseWorkFlow={isPauseWorkFlow}
           applyScript={applyScript}
           mode='manual'
+          from='tab'
         />
       </motion.div>
     </div>
diff --git a/components/ui/shot-tab-content.tsx b/components/ui/shot-tab-content.tsx
index 56f1358..52e419d 100644
--- a/components/ui/shot-tab-content.tsx
+++ b/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}