forked from 77media/video-flow
调整标签下样式
This commit is contained in:
北枳
parent
61d9685b78
commit
8c47eae0a6
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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="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)}
|
||||
>
|
||||
<ReplaceAll className="w-4 h-4" />
|
||||
</motion.button>
|
||||
</div>
|
||||
{/* 重新生成按钮、替换形象按钮 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<motion.button
|
||||
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
|
||||
text-pink-500 rounded-lg transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<ReplaceAll className="w-4 h-4" />
|
||||
<span>Replace</span>
|
||||
</motion.button>
|
||||
<motion.button
|
||||
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>
|
||||
|
||||
|
||||
|
||||
@ -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 }>({});
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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="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 className="grid grid-cols-2 gap-2">
|
||||
<motion.button
|
||||
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
|
||||
text-pink-500 rounded-lg transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<ReplaceAll className="w-4 h-4" />
|
||||
<span>Replace</span>
|
||||
</motion.button>
|
||||
<motion.button
|
||||
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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user