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 和其他组件文件,统一代码风格,提升可读性。
This commit is contained in:
1 parent
5d00adc1a5
commit
76c67b492e
216 files changed
+12454
-13976
No files matched your search
@@ -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
|
||||
Reference in new issue
Block a user