feat:碎片完善

src/components/puzzle/PuzzlePiecePortal.tsx

@@ -0,0 +1,46 @@
+import { forwardRef } from "react";
+import { createPortal } from "react-dom";
+import PuzzlePieceDisplay from "./PuzzlePieceDisplay";
+
+interface PuzzlePiecePortalProps {
+  residence: string;
+  pieceId: number;
+  /** 是否隐藏（飞行时隐藏原始碎片） */
+  hidden?: boolean;
+}
+
+/**
+ * 碎片 Portal 组件
+ * 将碎片渲染到 document.body，确保在最上层显示
+ */
+const PuzzlePiecePortal = forwardRef<HTMLDivElement, PuzzlePiecePortalProps>(
+  ({ residence, pieceId, hidden = false }, ref) => {
+    return createPortal(
+      <div
+        ref={ref}
+        className="fixed z-[99999] pointer-events-none"
+        style={{
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "120px",
+          height: "120px",
+          opacity: hidden ? 0 : 1,
+          visibility: hidden ? "hidden" : "visible",
+        }}
+      >
+        <PuzzlePieceDisplay
+          residence={residence}
+          pieceId={pieceId}
+          showGlow={true}
+          className="w-full h-full"
+        />
+      </div>,
+      document.body
+    );
+  }
+);
+
+PuzzlePiecePortal.displayName = "PuzzlePiecePortal";
+
+export default PuzzlePiecePortal;