zhongyidianandClaude Opus 4.7
6d40e19346
Commit non-media application and asset changes while leaving audio, video, and environment files out of version control. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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 leading-18">{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
|