feat:碎片完善

src/components/puzzle/PuzzlePieceDisplay.tsx

@@ -0,0 +1,57 @@
+import { forwardRef } from "react";
+import { getStaticImage } from "@/lib/utils";
+
+export interface PuzzlePieceDisplayProps {
+  /** 故居名称，如 'chenyun' */
+  residence: string;
+  /** 碎片ID */
+  pieceId: number;
+  /** 是否显示发光动画 */
+  showGlow?: boolean;
+  /** 自定义类名 */
+  className?: string;
+}
+
+/**
+ * 拼图碎片显示组件
+ * - 显示碎片图片
+ * - 支持发光动画效果
+ * - 可以被 ref 引用，用于飞行动画
+ */
+const PuzzlePieceDisplay = forwardRef<HTMLDivElement, PuzzlePieceDisplayProps>(
+  ({ residence, pieceId, showGlow = true, className = "" }, ref) => {
+    // 碎片图片路径
+    const pieceImage = getStaticImage(`puzzle/${residence}/${pieceId}`);
+
+    return (
+      <div
+        ref={ref}
+        className={`relative inline-block ${className}`}
+        style={{
+          animation: showGlow ? "puzzleGlow 1s ease-in-out infinite" : "none",
+        }}
+      >
+        <style>{`
+          @keyframes puzzleGlow {
+            0%, 100% {
+              filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6));
+            }
+            50% {
+              filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1)) drop-shadow(0 0 32px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 48px rgba(255, 255, 255, 0.6));
+            }
+          }
+        `}</style>
+        <img
+          src={pieceImage}
+          alt={`碎片 ${pieceId}`}
+          className="w-full h-full object-contain"
+        />
+      </div>
+    );
+  }
+);
+
+PuzzlePieceDisplay.displayName = "PuzzlePieceDisplay";
+
+export default PuzzlePieceDisplay;
+