93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import { cn, getBackgroundImage, getStaticImage } from "@/lib/utils";
|
|
|
|
// 原始尺寸（保持比例）
|
|
const ORIGINAL_SIZES = {
|
|
read: { width: 116, height: 140 },
|
|
unread: { width: 120, height: 121 },
|
|
} as const;
|
|
|
|
const Cursor = ({
|
|
className,
|
|
onClick,
|
|
read = false,
|
|
size = 1,
|
|
}: {
|
|
className?: string;
|
|
onClick: () => void;
|
|
/** 已阅读 / 已完成 状态；true 时显示预留的 div，由你自行实现效果 */
|
|
read?: boolean;
|
|
/** 尺寸缩放比例，默认为 1（原始大小） */
|
|
size?: number;
|
|
}) => {
|
|
// 根据 size 计算实际尺寸，保持原始比例
|
|
const baseSize = read ? ORIGINAL_SIZES.read : ORIGINAL_SIZES.unread;
|
|
const width = baseSize.width * size;
|
|
const height = baseSize.height * size;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"cursor-pointer select-none",
|
|
read ? "" : "animate-[spin_3s_linear_infinite]",
|
|
"flex justify-center items-center pl-0",
|
|
"transition-all duration-300 hover:scale-105 hover:brightness-110 hover:contrast-110 active:scale-95",
|
|
className
|
|
)}
|
|
onTouchEnd={(e) => {
|
|
e.preventDefault(); // 防止 Safari 触发两次
|
|
onClick();
|
|
}}
|
|
style={{
|
|
width: `${width}px`,
|
|
height: `${height}px`,
|
|
WebkitTapHighlightColor: "transparent",
|
|
WebkitTouchCallout: "none",
|
|
WebkitUserSelect: "none",
|
|
touchAction: "manipulation",
|
|
backgroundImage: getBackgroundImage(
|
|
read ? "components/point_" : "components/border"
|
|
),
|
|
backgroundSize: "contain",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
}}
|
|
onClick={onClick}
|
|
draggable={false}
|
|
>
|
|
{read ? (
|
|
// 已阅读 / 已完成 状态
|
|
// <div
|
|
// className="absolute -bottom-1 text-[#cf9c4d] text-2xl font-bold"
|
|
// style={{
|
|
// // 细一点的描边，避免把内部金色填充盖掉
|
|
// // WebkitTextStroke: "0.5px #ffffff",
|
|
// // 用多层白色阴影模拟更厚的外轮廓
|
|
// textShadow: [
|
|
// "0 0 2px #ffffff",
|
|
// "0 0 4px #ffffff",
|
|
// "0 0 6px rgba(0,0,0,0.35)",
|
|
// ].join(", "),
|
|
// }}
|
|
// >
|
|
// 已浏览
|
|
// </div>
|
|
<></>
|
|
) : (
|
|
// 未阅读 / 未完成 状态：保持当前效果
|
|
<img
|
|
src={getStaticImage("components/point.png")}
|
|
alt=""
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
objectPosition: "center",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Cursor;
|