feat:黄炎培对话对接中

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

@@ -0,0 +1,70 @@
+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;

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

@@ -0,0 +1,103 @@
+import { Image } from "@/components";
+import { getStaticImage, getBackgroundImage } from "@/lib/utils";
+import type { MouseEvent } from "react";
+
+export interface SuccessAlertProps {
+  /** 标题 */
+  title?: string;
+  /** 内容文本 */
+  content?: string;
+  /** 是否可见 */
+  visible?: boolean;
+  /** 点击遮罩层回调 */
+  onMaskClick?: () => void;
+  /** 继续按钮回调 */
+  onContinue?: () => void;
+  /** 关闭回调 */
+  onClose?: () => void;
+}
+
+/**
+ * SuccessAlert 组件 - 成功提示弹窗
+ * 使用 components/正确版 作为背景
+ */
+const SuccessAlert = ({
+  title = "恭喜你, 选择正确!",
+  content,
+  visible = true,
+  onMaskClick,
+  onContinue,
+  onClose,
+}: SuccessAlertProps) => {
+  if (!visible) return null;
+
+  const handleContinue = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // 只调用 onContinue，它会处理关闭逻辑
+    if (onContinue) {
+      onContinue();
+    } else if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[10000] flex items-center justify-center">
+      {/* 蒙版背景 */}
+      <div
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: getBackgroundImage("components/蒙版遮罩"),
+        }}
+        onClick={onMaskClick || onClose}
+      />
+
+      {/* 内容 */}
+      <div
+        className="relative w-full h-full z-10 flex flex-col items-center justify-center pointer-events-none"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 文本内容 */}
+        <div className="relative z-10 w-full h-[619px] flex flex-col items-center justify-center gap-8 pt-20 pointer-events-none">
+          {/* 背景图片 - 使用 components/正确版 */}
+          <img
+            className="absolute inset-0 top-0 -z-10"
+            src={getStaticImage("components/正确版")}
+            alt="正确版"
+          />
+          {/* 标题 */}
+          {title && (
+            <div className="text-[#ffbe57] text-6xl font-bold text-center">
+              {title}
+            </div>
+          )}
+
+          {/* 内容文本 */}
+          {content && (
+            <div className="text-white text-4xl font-medium  max-w-[1600px] leading-relaxed px-20">
+              {content}
+            </div>
+          )}
+        </div>
+
+        {/* 继续按钮 */}
+        <div className="mt-8 relative z-20 pointer-events-auto">
+          <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={handleContinue}
+            onMouseDown={(e) => e.stopPropagation()}
+          ></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SuccessAlert;