init

src/components/Modal/index.css

@@ -0,0 +1,42 @@
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5); /* 遮罩层颜色 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideIn 0.3s ease;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

src/components/Modal/index.jsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import "./index.css";
+
+const Modal = ({
+  visible = false,
+  onClose,
+  children,
+  className = "",
+  maskClosable = true,
+}) => {
+  // 防止背景滚动
+  useEffect(() => {
+    if (visible) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [visible]);
+
+  // 点击遮罩层关闭
+  const handleMaskClick = (e) => {
+    if (maskClosable && e.target.classList.contains("modal-mask")) {
+      onClose?.();
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className={`modal-mask ${className}`} onClick={handleMaskClick}>
+      <div className="modal-content">{children}</div>
+    </div>
+  );
+};
+
+export default Modal;