feat:init

src/components/cursor/index.tsx

@@ -0,0 +1,92 @@
+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;