forked from 77media/video-flow
122 lines
4.5 KiB
TypeScript
122 lines
4.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { ChevronLeft, ChevronRight, Clock, Calendar, Tag, Film, BookOpen, Info } from 'lucide-react';
|
|
import { ScriptMeta } from '../pages/script-overview';
|
|
|
|
interface ScriptMetaInfoProps {
|
|
meta: ScriptMeta;
|
|
}
|
|
|
|
export function ScriptMetaInfo({ meta }: ScriptMetaInfoProps) {
|
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
|
|
return (
|
|
<div className="relative h-full">
|
|
{/* 收起时的触发按钮 */}
|
|
<AnimatePresence initial={false}>
|
|
{!isExpanded && (
|
|
<motion.button
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.8 }}
|
|
onClick={() => setIsExpanded(true)}
|
|
className="absolute left-0 top-8 z-10 p-3 bg-white/5 hover:bg-white/10
|
|
backdrop-blur-sm rounded-r-xl border-l-2 border-blue-500/50
|
|
shadow-[0_0_15px_rgba(59,130,246,0.2)] transition-colors group"
|
|
>
|
|
<Info className="w-6 h-6 text-blue-400 group-hover:text-blue-300 transition-colors" />
|
|
</motion.button>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* 主内容区域 */}
|
|
<motion.div
|
|
initial={false}
|
|
animate={{
|
|
width: isExpanded ? 'auto' : 0,
|
|
opacity: isExpanded ? 1 : 0,
|
|
x: isExpanded ? 0 : -20,
|
|
}}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
className={`
|
|
bg-white/5 backdrop-blur-sm rounded-xl overflow-hidden h-full
|
|
${isExpanded ? 'border border-white/10' : ''}
|
|
`}
|
|
>
|
|
<div className="w-[320px] h-full">
|
|
<div className="p-6">
|
|
{/* 标题和展开/收起按钮 */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-semibold">剧本信息</h2>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => setIsExpanded(false)}
|
|
className="p-2 hover:bg-white/10 rounded-lg transition-colors
|
|
text-white/60 hover:text-white"
|
|
>
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</motion.button>
|
|
</div>
|
|
|
|
{/* 剧本标题 */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-white/60">
|
|
<BookOpen className="w-4 h-4" />
|
|
<span>剧本标题</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold">{meta.title}</h1>
|
|
</div>
|
|
|
|
{/* 类型和体裁 */}
|
|
<div className="mt-6 space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Film className="w-4 h-4 text-white/60" />
|
|
<span className="text-white/60">类型</span>
|
|
</div>
|
|
<span>{meta.type}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-white/60 mr-4">体裁</span>
|
|
<span>{meta.genre}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 标签 */}
|
|
<div className="mt-6 space-y-2">
|
|
<div className="flex items-center gap-2 text-white/60">
|
|
<Tag className="w-4 h-4" />
|
|
<span>标签</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{meta.tags.map(tag => (
|
|
<span
|
|
key={tag}
|
|
className="px-3 py-1 bg-white/10 rounded-full text-sm"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 时长和上传时间 */}
|
|
<div className="mt-6 space-y-4 pt-4 border-t border-white/10">
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-white/60" />
|
|
<span className="text-white/60">建议时长</span>
|
|
<span className="ml-2">{meta.duration}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="w-4 h-4 text-white/60" />
|
|
<span className="text-white/60">上传时间</span>
|
|
<span className="ml-2">{meta.uploadTime}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|