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/index.ts

@@ -1,10 +1,12 @@
 export { default as ResidenceLayout } from "./ResidenceLayout";
 export { default as ClueOverlay } from "./clue";
 export type { ClueOverlayProps } from "./clue";
-export { default as Alert } from "./alert";
-export type { AlertProps } from "./alert";
-export { default as SuccessAlert } from "./success-alert";
-export type { SuccessAlertProps } from "./success-alert";
+export { default as Alert } from "./alert/title-alert";
+export type { AlertProps } from "./alert/title-alert";
+export { default as SuccessAlert } from "./alert/success-alert";
+export type { SuccessAlertProps } from "./alert/success-alert";
+export { default as ErrorAlert } from "./alert/error-alert";
+export type { ErrorAlertProps } from "./alert/error-alert";
 export { DragQuizPanel } from "./quiz";
 export type { DragQuizPanelProps } from "./quiz";
 export type {

src/components/layout/quiz/DragQuizPanel.tsx

@@ -24,7 +24,7 @@ const DragQuizPanel = ({
     >
       <div className="relative w-[1728px] h-[972px] flex flex-col items-center pt-12 pb-14 gap-10">
         {/* 题干卡片 */}
-        <div className="w-[1600px] min-h-[220px] rounded-[32px] bg-black/90 px-20 py-12 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
+        <div className="w-[1600px] rounded-[32px] bg-black/90 px-20 py-12 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
           <div className="text-[32px] leading-relaxed text-white">
             {title && <div className="mb-4">{title}</div>}
             <div>
@@ -116,9 +116,7 @@ const DragQuizPanel = ({
         </div>
 
         {error && (
-          <div className="mt-6 text-center text-[26px] text-[#ff4d4f]">
-            {error}
-          </div>
+          <div className="text-center text-[26px] text-[#ff4d4f]">{error}</div>
         )}
       </div>
     </div>
@@ -126,4 +124,3 @@ const DragQuizPanel = ({
 };
 
 export default DragQuizPanel;
-