zhongyidian
76c67b492e
- 在 .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 和其他组件文件，统一代码风格，提升可读性。
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
|
|
|
|
export interface ErrorAlertProps {
|
|
/** 文本 */
|
|
text: string
|
|
/** 是否可见 */
|
|
visible?: boolean
|
|
/** 点击遮罩层回调 */
|
|
onMaskClick?: () => void
|
|
/** 关闭回调 */
|
|
onClose?: () => void
|
|
/** 自定义 zIndex */
|
|
zIndex?: number
|
|
}
|
|
|
|
/**
|
|
* Alert 组件 - 提示弹窗
|
|
* @returns
|
|
*/
|
|
const ErrorAlert = ({
|
|
text,
|
|
visible = true,
|
|
onMaskClick,
|
|
onClose,
|
|
zIndex = 10000,
|
|
}: ErrorAlertProps) => {
|
|
if (!visible) return null
|
|
|
|
return (
|
|
<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/蒙版遮罩')})`,
|
|
}}
|
|
onClick={onMaskClick || onClose}
|
|
/>
|
|
|
|
{/* 内容 */}
|
|
<div className="relative w-full z-10 flex flex-col items-center justify-center gap-10">
|
|
{/* 标题和副标题容器 - 带深色背景条 */}
|
|
<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>
|
|
|
|
{/* 继续按钮 */}
|
|
<div
|
|
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/按钮')}
|
|
`,
|
|
}}
|
|
onClick={onClose}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ErrorAlert
|