调整标签下样式

components/ui/character-editor.tsx

@@ -108,7 +108,7 @@ export default function CharacterEditor({
   };
 
   return (
-    <div className="space-y-2 border border-white/10 relative p-2 pb-12 rounded-[0.5rem]">
+    <div className="space-y-2 border border-white/10 relative p-2 rounded-[0.5rem]">
       {/* 自由输入区域 */}
       <div className="relative">
         <ContentEditable
@@ -164,20 +164,6 @@ export default function CharacterEditor({
           </motion.div>
         ))}
       </div>
-
-      {/* 重新生成按钮 */}
-      <motion.button
-        onClick={handleRegenerate}
-        disabled={isRegenerating}
-        className="absolute bottom-3 right-3 flex items-center gap-1.5 px-3 py-1.5 
-          bg-blue-500/10 hover:bg-blue-500/20  text-blue-500 rounded-full 
-          transition-colors text-xs disabled:opacity-50"
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-      >
-        <RefreshCw className="w-3.5 h-3.5" />
-        <span>{isRegenerating ? "生成中..." : "重新生成"}</span>
-      </motion.button>
     </div>
   );
 }

components/ui/character-tab-content.tsx

@@ -186,7 +186,33 @@ export function CharacterTabContent({
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.2 }}
       >
-        {/* 左列：角色信息 */}
+
+        {/* 左列：角色预览 */}
+        <div className="space-y-4">
+          {/* 角色预览图 */}
+          <div className="w-full h-full mx-auto rounded-lg relative group">
+            <ImageBlurTransition
+              src={currentRole.url}
+              alt={currentRole.name}
+              width='100%'
+              height='100%'
+            />
+            {/* 应用角色按钮 */}
+            <div className='absolute top-3 right-3 flex gap-2'>
+              <motion.button
+                className="p-2 bg-black/50 hover:bg-black/70 
+                  text-white rounded-full backdrop-blur-sm transition-colors z-10"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => setIsReplaceLibraryOpen(true)}
+              >
+                <Library className="w-4 h-4" />
+              </motion.button>
+            </div>
+          </div>
+
+        </div>
+        {/* 右列：角色信息 */}
         <div className="space-y-4">
           <CharacterEditor
             initialDescription={localRole.roleDescription}
@@ -231,34 +257,33 @@ export function CharacterTabContent({
               handleReplaceCharacter(url);
             }}
           />
-        </div>
+          {/* 重新生成按钮、替换形象按钮 */}
-
+          <div className="grid grid-cols-2 gap-2">
-        {/* 右列：角色预览 */}
+            <motion.button
-        <div className="space-y-4">
+              onClick={() => console.log('Replace')}
-          {/* 角色预览图 */}
+              className="flex items-center justify-center gap-2 px-4 py-3 bg-pink-500/10 hover:bg-pink-500/20 
-          <div className="w-full h-full mx-auto rounded-lg relative group">
+                text-pink-500 rounded-lg transition-colors"
-            <ImageBlurTransition
+              whileHover={{ scale: 1.02 }}
-              src={currentRole.url}
+              whileTap={{ scale: 0.98 }}
-              alt={currentRole.name}
+            >
-              width='100%'
+              <ReplaceAll className="w-4 h-4" />
-              height='100%'
+              <span>Replace</span>
-            />
+            </motion.button>
-            {/* 应用角色按钮 */}
+            <motion.button
-            <div className='absolute top-3 right-3 flex gap-2'>
+              onClick={() => console.log('Regenerate')}
-              <motion.button
+              className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20 
-                className="p-2 bg-black/50 hover:bg-black/70 
+                text-blue-500 rounded-lg transition-colors"
-                  text-white rounded-full backdrop-blur-sm transition-colors z-10"
+              whileHover={{ scale: 1.02 }}
-                whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.98 }}
-                whileTap={{ scale: 0.95 }}
+            >
-                onClick={() => setIsReplaceLibraryOpen(true)}
+              <RefreshCw className="w-4 h-4" />
-              >
+              <span>Regenerate</span>
-                <ReplaceAll className="w-4 h-4" />
+            </motion.button>
-              </motion.button>
-            </div>
           </div>
-
         </div>
 
+        
+
       </motion.div>
 
 

components/ui/replace-panel.tsx

@@ -40,7 +40,7 @@ export function ReplacePanel({
   const [selectedShots, setSelectedShots] = useState(
     shots.filter(shot => shot.isSelected).map(shot => shot.id)
   );
-  const [addToLibrary, setAddToLibrary] = useState(true);
+  const [addToLibrary, setAddToLibrary] = useState(false);
   const [hoveredVideoId, setHoveredVideoId] = useState<string | null>(null);
   const videoRefs = useRef<{ [key: string]: HTMLVideoElement }>({});
 

components/ui/scene-editor.tsx

@@ -202,7 +202,7 @@ export default function SceneEditor({
   };
 
   return (
-    <div className={cn("space-y-2 border border-white/10 relative p-2 pb-12 rounded-[0.5rem]", className)}>
+    <div className={cn("space-y-2 border border-white/10 relative p-2 rounded-[0.5rem]", className)}>
       {/* 自由输入区域 */}
       <div className="relative">
         <ContentEditable
@@ -259,20 +259,6 @@ export default function SceneEditor({
           </motion.div>
         ))}
       </div>
-
-      {/* 重新生成按钮 */}
-      <motion.button
-        onClick={handleRegenerate}
-        disabled={isRegenerating}
-        className="absolute bottom-3 right-3 flex items-center gap-1.5 px-3 py-1.5 
-          bg-blue-500/10 hover:bg-blue-500/20  text-blue-500 rounded-full 
-          transition-colors text-xs disabled:opacity-50"
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-      >
-        <RefreshCw className="w-3.5 h-3.5" />
-        <span>{isRegenerating ? "生成中..." : "重新生成"}</span>
-      </motion.button>
     </div>
   );
 } 

components/ui/scene-tab-content.tsx

@@ -301,7 +301,20 @@ export function SceneTabContent({
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1 }}
       >
-        {/* 左列：脚本编辑器 */}
+        {/* 左列：场景预览 */}
+        <div className="space-y-4">
+          <motion.div
+            className="aspect-video rounded-lg overflow-hidden relative"
+            layoutId={`sketch-preview-${currentSketchIndex}`}
+          >
+            <img
+              src={currentScene?.url || sketches[currentSketchIndex]?.url}
+              alt={`Scene ${currentSketchIndex + 1}`}
+              className="w-full h-full object-cover"
+            />
+          </motion.div>
+        </div>
+        {/* 右列：脚本编辑器 */}
         <div className="space-y-4">
           <SceneEditor
             initialDescription={localSketch.script}
@@ -314,20 +327,29 @@ export function SceneTabContent({
             onReplaceScene={handleReplaceScene}
             className="min-h-[200px]"
           />
-        </div>
+          {/* 重新生成按钮、替换形象按钮 */}
-
+          <div className="grid grid-cols-2 gap-2">
-        {/* 右列：场景预览 */}
+            <motion.button
-        <div className="space-y-4">
+              onClick={() => console.log('Replace')}
-          <motion.div
+              className="flex items-center justify-center gap-2 px-4 py-3 bg-pink-500/10 hover:bg-pink-500/20 
-            className="aspect-video rounded-lg overflow-hidden relative"
+                text-pink-500 rounded-lg transition-colors"
-            layoutId={`sketch-preview-${currentSketchIndex}`}
+              whileHover={{ scale: 1.02 }}
-          >
+              whileTap={{ scale: 0.98 }}
-            <img
+            >
-              src={currentScene?.url || sketches[currentSketchIndex]?.url}
+              <ReplaceAll className="w-4 h-4" />
-              alt={`Scene ${currentSketchIndex + 1}`}
+              <span>Replace</span>
-              className="w-full h-full object-cover"
+            </motion.button>
-            />
+            <motion.button
-          </motion.div>
+              onClick={() => console.log('Regenerate')}
+              className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20 
+                text-blue-500 rounded-lg transition-colors"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <RefreshCw className="w-4 h-4" />
+              <span>Regenerate</span>
+            </motion.button>
+          </div>
         </div>
       </motion.div>