161 lines
5.7 KiB
TypeScript
161 lines
5.7 KiB
TypeScript
import { motion } from "framer-motion";
|
|
|
|
export const EmptyStateIllustration = () => {
|
|
const springTransition = {
|
|
type: "spring",
|
|
stiffness: 100,
|
|
damping: 10
|
|
};
|
|
return (
|
|
<motion.svg
|
|
width="240"
|
|
height="200"
|
|
viewBox="0 0 240 200"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
hidden: { opacity: 0, scale: 0.8 },
|
|
visible: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
transition: {
|
|
when: "beforeChildren",
|
|
staggerChildren: 0.1
|
|
}
|
|
}
|
|
}}
|
|
transition={springTransition}
|
|
>
|
|
|
|
{/* 书籍堆叠 - 使用更现代的配色方案 */}
|
|
<motion.g
|
|
variants={{
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 80,
|
|
damping: 12
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{/* 底部书籍 */}
|
|
<path
|
|
d="M90 120H150C152.761 120 155 117.761 155 115V105C155 102.239 152.761 100 150 100H90C87.2386 100 85 102.239 85 105V115C85 117.761 87.2386 120 90 120Z"
|
|
fill="#EFF6FF"
|
|
filter="url(#shadow)"
|
|
/>
|
|
{/* 中间书籍 */}
|
|
<path
|
|
d="M95 100H155C157.761 100 160 97.7614 160 95V85C160 82.2386 157.761 80 155 80H95C92.2386 80 90 82.2386 90 85V95C90 97.7614 92.2386 100 95 100Z"
|
|
fill="#DBEAFE"
|
|
/>
|
|
{/* 顶部书籍 */}
|
|
<path
|
|
d="M100 80H160C162.761 80 165 77.7614 165 75V65C165 62.2386 162.761 60 160 60H100C97.2386 60 95 62.2386 95 65V75C95 77.7614 97.2386 80 100 80Z"
|
|
fill="#3B82F6"
|
|
/>
|
|
</motion.g>
|
|
|
|
{/* Magnifying Glass */}
|
|
<motion.g
|
|
variants={{
|
|
hidden: { scale: 0, rotate: -45, x: 20 },
|
|
visible: { scale: 1, rotate: 0, x: 0 }
|
|
}}
|
|
transition={{
|
|
type: "spring",
|
|
stiffness: 120,
|
|
damping: 15
|
|
}}
|
|
>
|
|
<circle
|
|
cx="160"
|
|
cy="70"
|
|
r="15"
|
|
stroke="#3B82F6"
|
|
strokeWidth="2"
|
|
fill="white"
|
|
filter="url(#glow)"
|
|
/>
|
|
<line
|
|
x1="150"
|
|
y1="82"
|
|
x2="140"
|
|
y2="92"
|
|
stroke="#3B82F6"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
</motion.g>
|
|
|
|
{/* Atom Structure */}
|
|
<motion.g
|
|
variants={{
|
|
hidden: { rotate: 0, opacity: 0, scale: 0.8 },
|
|
visible: {
|
|
rotate: 360,
|
|
opacity: 1,
|
|
scale: 1,
|
|
transition: {
|
|
rotate: {
|
|
duration: 25,
|
|
ease: "linear",
|
|
repeat: Infinity,
|
|
repeatType: "loop"
|
|
},
|
|
opacity: { duration: 0.5 },
|
|
scale: { duration: 0.5 }
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<ellipse cx="80" cy="100" rx="20" ry="10" stroke="#3B82F6" strokeWidth="1.5" fill="none" opacity="0.6" />
|
|
<ellipse cx="80" cy="100" rx="20" ry="10" stroke="#3B82F6" strokeWidth="2" fill="none" transform="rotate(60 80 100)" />
|
|
<ellipse cx="80" cy="100" rx="20" ry="10" stroke="#3B82F6" strokeWidth="2" fill="none" transform="rotate(-60 80 100)" />
|
|
<circle cx="80" cy="100" r="3" fill="#3B82F6" />
|
|
</motion.g>
|
|
|
|
{/* Mathematical Symbols */}
|
|
<motion.g
|
|
variants={{
|
|
hidden: { opacity: 0, y: 15 },
|
|
visible: { opacity: 1, y: 0 }
|
|
}}
|
|
|
|
fill="#3B82F6"
|
|
>
|
|
<text x="155" y="140" fontSize="16" fontFamily="serif" fontWeight="600">∫</text>
|
|
<text x="170" y="140" fontSize="16" fontFamily="serif" fontWeight="600">∑</text>
|
|
<text x="185" y="140" fontSize="16" fontFamily="serif" fontWeight="600">π</text>
|
|
</motion.g>
|
|
|
|
|
|
{/* Connection Lines */}
|
|
<motion.g
|
|
stroke="#BFDBFE"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeDasharray="4,4"
|
|
variants={{
|
|
hidden: { opacity: 0, pathLength: 0 },
|
|
visible: { opacity: 0.6, pathLength: 1 }
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
ease: "easeInOut"
|
|
}}
|
|
>
|
|
<line x1="40" y1="80" x2="60" y2="80" />
|
|
<line x1="180" y1="120" x2="200" y2="120" />
|
|
<line x1="160" y1="160" x2="180" y2="160" />
|
|
</motion.g>
|
|
</motion.svg>
|
|
|
|
);
|
|
}; |