feat: 更新 ESLint 和 Prettier 配置，增强代码质量管理

- 在 .gitignore 中添加 public/audio/* 以忽略音频文件。
- 更新 bun.lock，添加 eslint-config-prettier 和 eslint-plugin-prettier 依赖，确保 ESLint 与 Prettier 的兼容性。
- 修改 eslint.config.ts，整合 Prettier 规则，优化代码风格一致性。
- 在 package.json 中添加 lint:fix 和 format 脚本，简化代码格式化和修复流程。
- 更新 tailwind.config.ts 和其他组件文件，统一代码风格，提升可读性。

src/components/puzzle/PuzzlePiecePortal.tsx

@@ -1,13 +1,13 @@
-import { forwardRef, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-import { motion } from "framer-motion";
-import PuzzlePieceDisplay from "./PuzzlePieceDisplay";
+import { forwardRef, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { motion } from 'framer-motion'
+import PuzzlePieceDisplay from './PuzzlePieceDisplay'
 
 interface PuzzlePiecePortalProps {
-  residence: string;
-  pieceId: number;
+  residence: string
+  pieceId: number
   /** 是否隐藏（飞行时隐藏原始碎片） */
-  hidden?: boolean;
+  hidden?: boolean
 }
 
 /**
@@ -17,38 +17,38 @@ interface PuzzlePiecePortalProps {
  */
 const PuzzlePiecePortal = forwardRef<HTMLDivElement, PuzzlePiecePortalProps>(
   ({ residence, pieceId, hidden = false }, ref) => {
-    const [isAnimating, setIsAnimating] = useState(true);
+    const [isAnimating, setIsAnimating] = useState(true)
 
     // 当组件首次渲染时，标记动画开始
     useEffect(() => {
-      setIsAnimating(true);
+      setIsAnimating(true)
       // 动画完成后，重置状态以便下次出现时重新播放
       const timer = setTimeout(() => {
-        setIsAnimating(false);
-      }, 800); // 与动画时长一致
-      return () => clearTimeout(timer);
-    }, [pieceId]); // 当 pieceId 变化时重新播放动画
+        setIsAnimating(false)
+      }, 800) // 与动画时长一致
+      return () => clearTimeout(timer)
+    }, [pieceId]) // 当 pieceId 变化时重新播放动画
 
     return createPortal(
       <div
         style={{
-          position: "fixed",
-          left: "50%",
-          top: "50%",
-          width: "120px",
-          height: "120px",
-          transform: "translate(-50%, -50%)",
-          perspective: "1000px", // 添加透视，让3D效果更明显
+          position: 'fixed',
+          left: '50%',
+          top: '50%',
+          width: '120px',
+          height: '120px',
+          transform: 'translate(-50%, -50%)',
+          perspective: '1000px', // 添加透视，让3D效果更明显
           zIndex: 99999,
-          pointerEvents: "none",
+          pointerEvents: 'none',
         }}
       >
         <motion.div
           ref={ref}
           style={{
-            width: "100%",
-            height: "100%",
-            transformStyle: "preserve-3d", // 保持3D变换
+            width: '100%',
+            height: '100%',
+            transformStyle: 'preserve-3d', // 保持3D变换
           }}
           initial={
             isAnimating
@@ -61,18 +61,18 @@ const PuzzlePiecePortal = forwardRef<HTMLDivElement, PuzzlePiecePortalProps>(
           }
           animate={
             hidden
-              ? { opacity: 0, visibility: "hidden" as const }
+              ? { opacity: 0, visibility: 'hidden' as const }
               : isAnimating
-              ? {
-                  scale: 1,
-                  rotateY: 0,
-                  opacity: 1,
-                  visibility: "visible" as const,
-                }
-              : {
-                  opacity: 1,
-                  visibility: "visible" as const,
-                }
+                ? {
+                    scale: 1,
+                    rotateY: 0,
+                    opacity: 1,
+                    visibility: 'visible' as const,
+                  }
+                : {
+                    opacity: 1,
+                    visibility: 'visible' as const,
+                  }
           }
           transition={{
             duration: 0.8, // 稍微延长动画时间，让效果更舒缓
@@ -87,23 +87,23 @@ const PuzzlePiecePortal = forwardRef<HTMLDivElement, PuzzlePiecePortalProps>(
             },
             opacity: {
               duration: 0.6,
-              ease: "easeOut",
+              ease: 'easeOut',
             },
-        }}
-      >
-        <PuzzlePieceDisplay
-          residence={residence}
-          pieceId={pieceId}
-          showGlow={true}
-          className="w-full h-full"
-        />
+          }}
+        >
+          <PuzzlePieceDisplay
+            residence={residence}
+            pieceId={pieceId}
+            showGlow={true}
+            className="w-full h-full"
+          />
         </motion.div>
       </div>,
       document.body
-    );
+    )
   }
-);
+)
 
-PuzzlePiecePortal.displayName = "PuzzlePiecePortal";
+PuzzlePiecePortal.displayName = 'PuzzlePiecePortal'
 
-export default PuzzlePiecePortal;
+export default PuzzlePiecePortal