feat:init

src/components/layout/alert/index.tsx

@@ -0,0 +1,72 @@
+import { Image } from "@/components";
+import { cn, getStaticImage } from "@/lib/utils";
+
+export interface AlertProps {
+  /** 标题 */
+  title: string;
+  /** 副标题 */
+  subtitle: string;
+  /** 是否可见 */
+  visible?: boolean;
+  /** 点击遮罩层回调 */
+  onMaskClick?: () => void;
+  /** 关闭回调 */
+  onClose?: () => void;
+}
+
+/**
+ * Alert 组件 - 提示弹窗
+ * @returns
+ */
+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">
+      {/* 蒙版背景 */}
+      <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={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)]",
+            ])}
+          >
+            {title}
+          </div>
+          {/* 副标题 */}
+          <div className="text-white text-5xl font-medium tracking-widest">
+            {subtitle}
+          </div>
+        </div>
+
+        {/* 按钮：去了解 */}
+        <Image
+          src={getStaticImage("components/去了解")}
+          onClick={onClose}
+          button
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Alert;