63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import { theme } from "antd";
|
||
import { ReactNode, CSSProperties } from "react";
|
||
import { motion } from "framer-motion";
|
||
|
||
export default function DashboardCard({
|
||
children,
|
||
title,
|
||
className,
|
||
contentClassName,
|
||
titleClassName,
|
||
extra,
|
||
style,
|
||
contentStyle,
|
||
}: {
|
||
contentClassName?: string;
|
||
contentStyle?: CSSProperties;
|
||
extra?: ReactNode;
|
||
title?: ReactNode;
|
||
children?: ReactNode;
|
||
titleClassName?: string;
|
||
className?: string;
|
||
style?: CSSProperties;
|
||
}) {
|
||
const { token } = theme.useToken();
|
||
|
||
return (
|
||
<motion.div
|
||
className={`rounded-xl p-4 flex-col flex hover:bg-white bg-gray-50 transition-all ease-in-out shadow-elegant border-white border-2 ${className}`}
|
||
style={style}
|
||
initial={{ opacity: 0, scale: 0.8, x: -20 }} // 添加x轴位移，让动画有入场效果
|
||
animate={{
|
||
opacity: 1,
|
||
scale: 1.0,
|
||
x: 0, // 回到原位
|
||
transition: {
|
||
duration: 0.3, // 增加动画持续时间
|
||
ease: "easeOut", // 使用easeOut缓动函数，让动画结束时减速
|
||
},
|
||
}}>
|
||
<div className="flex justify-between items-center">
|
||
<div
|
||
className={titleClassName}
|
||
style={{
|
||
lineHeight: token.lineHeightLG,
|
||
fontSize: token.fontSizeLG,
|
||
fontWeight: "bold",
|
||
color: token.colorPrimaryText,
|
||
}}>
|
||
{title}
|
||
</div>
|
||
{extra && <div>{extra}</div>}
|
||
</div>
|
||
{children && (
|
||
<div
|
||
style={contentStyle}
|
||
className={`${contentClassName} flex-grow`}>
|
||
{children}
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
);
|
||
}
|