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/layout/alert/error-alert.tsx

@@ -1,16 +1,16 @@
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getStaticImage } from '@/lib/utils'
 
 export interface ErrorAlertProps {
   /** 文本 */
-  text: string;
+  text: string
   /** 是否可见 */
-  visible?: boolean;
+  visible?: boolean
   /** 点击遮罩层回调 */
-  onMaskClick?: () => void;
+  onMaskClick?: () => void
   /** 关闭回调 */
-  onClose?: () => void;
+  onClose?: () => void
   /** 自定义 zIndex */
-  zIndex?: number;
+  zIndex?: number
 }
 
 /**
@@ -24,18 +24,15 @@ const ErrorAlert = ({
   onClose,
   zIndex = 10000,
 }: ErrorAlertProps) => {
-  if (!visible) return null;
+  if (!visible) return null
 
   return (
-    <div
-      className="absolute inset-0 z-50 flex items-center justify-center"
-      style={{ zIndex }}
-    >
+    <div className="absolute inset-0 z-50 flex items-center justify-center" style={{ zIndex }}>
       {/* 蒙版背景 */}
       <div
         className="absolute inset-0 bg-cover bg-center bg-no-repeat"
         style={{
-          backgroundImage: `url(${getStaticImage("components/蒙版遮罩")})`,
+          backgroundImage: `url(${getStaticImage('components/蒙版遮罩')})`,
         }}
         onClick={onMaskClick || onClose}
       />
@@ -45,9 +42,7 @@ const ErrorAlert = ({
         {/* 标题和副标题容器 - 带深色背景条 */}
         <div className="w-full bg-black/70 px-20 py-20 flex flex-col items-center gap-4">
           {/* 副标题 */}
-          <div className="text-white text-5xl font-medium tracking-widest">
-            {text}
-          </div>
+          <div className="text-white text-5xl font-medium tracking-widest">{text}</div>
         </div>
 
         {/* 继续按钮 */}
@@ -55,8 +50,8 @@ const ErrorAlert = ({
           className="w-[414px] h-[109px] bg-cover bg-center bg-no-repeat cursor-pointer hover:scale-105 hover:brightness-110 transition-all duration-300"
           style={{
             backgroundImage: `
-              ${getBackgroundImage("components/继续前进")},
-              ${getBackgroundImage("components/按钮")}
+              ${getBackgroundImage('components/继续前进')},
+              ${getBackgroundImage('components/按钮')}
               `,
           }}
           onClick={onClose}
@@ -64,7 +59,7 @@ const ErrorAlert = ({
         ></div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ErrorAlert;
+export default ErrorAlert

src/components/layout/alert/success-alert/index.tsx

@@ -1,27 +1,27 @@
-import { getStaticImage, getBackgroundImage } from "@/lib/utils";
-import type { MouseEvent } from "react";
-import { useEffect } from "react";
-import { useAudioManager } from "@/hooks/useAudioManager";
+import { getStaticImage, getBackgroundImage } from '@/lib/utils'
+import type { MouseEvent } from 'react'
+import { useEffect } from 'react'
+import { useAudioManager } from '@/hooks/useAudioManager'
 
 export interface SuccessAlertProps {
   /** 标题 */
-  title?: string;
+  title?: string
   /** 内容文本 */
-  content?: string;
+  content?: string
   /** 是否可见 */
-  visible?: boolean;
+  visible?: boolean
   /** 成功提示音频地址（可选） */
-  audioSrc?: string;
+  audioSrc?: string
   /** 弹窗出现时是否自动播放音频（默认 true） */
-  autoPlayAudio?: boolean;
+  autoPlayAudio?: boolean
   /** 音频分组 id，相同 channel 内互斥，不同 channel 可同时播放；不传则全局互斥 */
-  audioChannelId?: string;
+  audioChannelId?: string
   /** 点击遮罩层回调 */
-  onMaskClick?: () => void;
+  onMaskClick?: () => void
   /** 继续按钮回调 */
-  onContinue?: () => void;
+  onContinue?: () => void
   /** 关闭回调 */
-  onClose?: () => void;
+  onClose?: () => void
 }
 
 /**
@@ -29,7 +29,7 @@ export interface SuccessAlertProps {
  * 使用 components/正确版 作为背景
  */
 const SuccessAlert = ({
-  title = "恭喜你, 选择正确!",
+  title = '恭喜你, 选择正确!',
   content,
   visible = true,
   audioSrc,
@@ -40,43 +40,41 @@ const SuccessAlert = ({
   onClose,
 }: SuccessAlertProps) => {
   const { currentSrc, play, stop } = useAudioManager(
-    audioChannelId
-      ? { mode: "channel", channelId: audioChannelId }
-      : { mode: "global" }
-  );
+    audioChannelId ? { mode: 'channel', channelId: audioChannelId } : { mode: 'global' }
+  )
 
   // 弹窗显示时自动播放音频
   useEffect(() => {
-    if (!visible) return;
-    if (!autoPlayAudio) return;
-    if (!audioSrc) return;
-    play(audioSrc);
-  }, [visible, autoPlayAudio, audioSrc, play]);
+    if (!visible) return
+    if (!autoPlayAudio) return
+    if (!audioSrc) return
+    play(audioSrc)
+  }, [visible, autoPlayAudio, audioSrc, play])
 
   // 弹窗关闭时停止音频（仅当当前播放的是该弹窗的 audioSrc）
   useEffect(() => {
-    if (visible) return;
+    if (visible) return
     if (audioSrc && currentSrc === audioSrc) {
-      stop();
+      stop()
     }
-  }, [visible, audioSrc, currentSrc, stop]);
+  }, [visible, audioSrc, currentSrc, stop])
 
-  if (!visible) return null;
+  if (!visible) return null
 
   const handleContinue = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+    e.preventDefault()
+    e.stopPropagation()
     // 点击继续时停止音频
     if (audioSrc && currentSrc === audioSrc) {
-      stop();
+      stop()
     }
     // 只调用 onContinue，它会处理关闭逻辑
     if (onContinue) {
-      onContinue();
+      onContinue()
     } else if (onClose) {
-      onClose();
+      onClose()
     }
-  };
+  }
 
   return (
     <div className="fixed inset-0 z-[10000] flex items-center justify-center">
@@ -84,7 +82,7 @@ const SuccessAlert = ({
       <div
         className="absolute inset-0 bg-cover bg-center bg-no-repeat"
         style={{
-          backgroundImage: getBackgroundImage("components/蒙版遮罩"),
+          backgroundImage: getBackgroundImage('components/蒙版遮罩'),
         }}
         onClick={onMaskClick || onClose}
       />
@@ -99,15 +97,11 @@ const SuccessAlert = ({
           {/* 背景图片 - 使用 components/正确版 */}
           <img
             className="absolute inset-0 top-0 -z-10"
-            src={getStaticImage("components/正确版")}
+            src={getStaticImage('components/正确版')}
             alt="正确版"
           />
           {/* 标题 */}
-          {title && (
-            <div className="text-[#ffbe57] text-6xl font-bold text-center">
-              {title}
-            </div>
-          )}
+          {title && <div className="text-[#ffbe57] text-6xl font-bold text-center">{title}</div>}
 
           {/* 内容文本 */}
           {content && (
@@ -123,8 +117,8 @@ const SuccessAlert = ({
             className="w-[414px] h-[109px] bg-cover bg-center bg-no-repeat cursor-pointer hover:scale-105 hover:brightness-110 transition-all duration-300"
             style={{
               backgroundImage: `
-                ${getBackgroundImage("components/继续前进")},
-                ${getBackgroundImage("components/按钮")}
+                ${getBackgroundImage('components/继续前进')},
+                ${getBackgroundImage('components/按钮')}
                 `,
             }}
             onClick={handleContinue}
@@ -133,7 +127,7 @@ const SuccessAlert = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default SuccessAlert;
+export default SuccessAlert

src/components/layout/alert/title-alert.tsx

@@ -1,31 +1,25 @@
-import { Image } from "@/components";
-import { cn, getStaticImage } from "@/lib/utils";
+import { Image } from '@/components'
+import { cn, getStaticImage } from '@/lib/utils'
 
 export interface AlertProps {
   /** 标题 */
-  title: string;
+  title: string
   /** 副标题 */
-  subtitle: string;
+  subtitle: string
   /** 是否可见 */
-  visible?: boolean;
+  visible?: boolean
   /** 点击遮罩层回调 */
-  onMaskClick?: () => void;
+  onMaskClick?: () => void
   /** 关闭回调 */
-  onClose?: () => void;
+  onClose?: () => void
 }
 
 /**
  * Alert 组件 - 提示弹窗
  * @returns
  */
-const Alert = ({
-  title,
-  subtitle,
-  visible = true,
-  onMaskClick,
-  onClose,
-}: AlertProps) => {
-  if (!visible) return null;
+const Alert = ({ title, subtitle, visible = true, onMaskClick, onClose }: AlertProps) => {
+  if (!visible) return null
 
   return (
     <div className="absolute inset-0 z-50 flex items-center justify-center">
@@ -33,7 +27,7 @@ const Alert = ({
       <div
         className="absolute inset-0 bg-cover bg-center bg-no-repeat"
         style={{
-          backgroundImage: `url(${getStaticImage("components/蒙版遮罩")})`,
+          backgroundImage: `url(${getStaticImage('components/蒙版遮罩')})`,
         }}
         onClick={onMaskClick || onClose}
       />
@@ -45,28 +39,22 @@ const Alert = ({
           {/* 标题 */}
           <div
             className={cn([
-              "absolute -top-10",
-              "text-white text-7xl font-bold",
-              "[text-shadow:_-4px_-4px_0_#ae6400,_4px_-4px_0_#ae6400,_-4px_4px_0_#ae6400,_4px_4px_0_#ae6400,_-5px_0_0_#ae6400,_5px_0_0_#ae6400,_0_-5px_0_#ae6400,_0_5px_0_#ae6400,_0_0_20px_rgba(255,215,0,1),_0_0_40px_rgba(255,215,0,0.8),_0_0_60px_rgba(255,215,0,0.5)]",
+              'absolute -top-10',
+              'text-white text-7xl font-bold',
+              '[text-shadow:_-4px_-4px_0_#ae6400,_4px_-4px_0_#ae6400,_-4px_4px_0_#ae6400,_4px_4px_0_#ae6400,_-5px_0_0_#ae6400,_5px_0_0_#ae6400,_0_-5px_0_#ae6400,_0_5px_0_#ae6400,_0_0_20px_rgba(255,215,0,1),_0_0_40px_rgba(255,215,0,0.8),_0_0_60px_rgba(255,215,0,0.5)]',
             ])}
           >
             {title}
           </div>
           {/* 副标题 */}
-          <div className="text-white text-5xl font-medium tracking-widest">
-            {subtitle}
-          </div>
+          <div className="text-white text-5xl font-medium tracking-widest">{subtitle}</div>
         </div>
 
         {/* 按钮：去了解 */}
-        <Image
-          src={getStaticImage("components/去了解")}
-          onClick={onClose}
-          button
-        />
+        <Image src={getStaticImage('components/去了解')} onClick={onClose} button />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Alert;
+export default Alert