forked from 77media/video-flow
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { X } from 'lucide-react';
|
|
import WorkOffice from '@/components/workflow/work-office/work-office';
|
|
|
|
interface ScriptModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function ScriptModal({ isOpen, onClose }: ScriptModalProps) {
|
|
return (
|
|
<AnimatePresence mode="wait">
|
|
{isOpen && (
|
|
<>
|
|
{/* 背景遮罩 */}
|
|
<motion.div
|
|
className="fixed inset-0 bg-black/20 backdrop-blur-sm z-50"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.15 }}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* 弹窗内容 */}
|
|
<motion.div
|
|
className="fixed inset-0 z-50 flex items-center justify-center"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.15 }}
|
|
>
|
|
<motion.div
|
|
className="relative w-11/12 h-[90vh] bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden"
|
|
initial={{ scale: 0.95, y: 10, opacity: 0 }}
|
|
animate={{
|
|
scale: 1,
|
|
y: 0,
|
|
opacity: 1,
|
|
transition: {
|
|
type: "spring",
|
|
duration: 0.3,
|
|
bounce: 0.15,
|
|
stiffness: 300,
|
|
damping: 25
|
|
}
|
|
}}
|
|
exit={{
|
|
scale: 0.95,
|
|
y: 10,
|
|
opacity: 0,
|
|
transition: {
|
|
type: "tween",
|
|
duration: 0.1,
|
|
ease: "easeOut"
|
|
}
|
|
}}
|
|
>
|
|
{/* 关闭按钮 */}
|
|
<motion.button
|
|
className="absolute z-50 top-4 right-4 p-2 rounded-full bg-gray-100/80 dark:bg-gray-800/80 hover:bg-gray-200/80 dark:hover:bg-gray-700/80 transition-colors"
|
|
onClick={onClose}
|
|
whileHover={{ rotate: 90 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
transition={{ duration: 0.1 }}
|
|
>
|
|
<X className="w-5 h-5 text-gray-600 dark:text-gray-300" />
|
|
</motion.button>
|
|
|
|
{/* 内容区域 */}
|
|
<motion.div
|
|
className="h-full overflow-auto p-6 relative"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.1, duration: 0.2 }}
|
|
>
|
|
<WorkOffice />
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|