diff --git a/src/components/Auth/AuthModalManager.js b/src/components/Auth/AuthModalManager.js index 0e0323b9..358e8086 100644 --- a/src/components/Auth/AuthModalManager.js +++ b/src/components/Auth/AuthModalManager.js @@ -1,13 +1,7 @@ // src/components/Auth/AuthModalManager.js import React, { useEffect, useRef } from 'react'; -import { - Modal, - ModalOverlay, - ModalContent, - ModalBody, - ModalCloseButton, - useBreakpointValue -} from '@chakra-ui/react'; +import { Modal } from 'antd'; +import { useBreakpointValue } from '@chakra-ui/react'; import { useAuthModal } from '../../hooks/useAuthModal'; import AuthFormContent from './AuthFormContent'; import { trackEventAsync } from '@lib/posthog'; @@ -44,85 +38,43 @@ export default function AuthModalManager() { } }, [isAuthModalOpen]); - // 响应式尺寸配置 - const modalSize = useBreakpointValue({ - base: "md", // 移动端:md(不占满全屏) - sm: "md", // 小屏:md - md: "lg", // 中屏:lg - lg: "xl" // 大屏:xl(更紧凑) - }); - - // 响应式宽度配置 - const modalMaxW = useBreakpointValue({ - base: "90%", // 移动端:屏幕宽度的90% - sm: "90%", // 小屏:90% - md: "700px", // 中屏:固定700px - lg: "700px" // 大屏:固定700px - }); - - // 响应式水平边距 - const modalMx = useBreakpointValue({ - base: 4, // 移动端:左右各16px边距 - md: "auto" // 桌面端:自动居中 - }); - - // 响应式垂直边距 - const modalMy = useBreakpointValue({ - base: 8, // 移动端:上下各32px边距 - md: 8 // 桌面端:上下各32px边距 - }); - - // 条件渲染:只在打开时才渲染 Modal,避免创建不必要的 Portal - if (!isAuthModalOpen) { - return null; - } + // 响应式宽度配置(Ant Design Modal 使用数字或字符串) + const modalMaxW = useBreakpointValue( + { + base: "90%", // 移动端:屏幕宽度的90% + sm: "90%", // 小屏:90% + md: "700px", // 中屏:固定700px + lg: "700px" // 大屏:固定700px + }, + { fallback: "700px", ssr: false } + ); + // ✅ 使用 Ant Design Modal,完全避开 Chakra UI Portal 的 AnimatePresence 问题 + // Ant Design Modal 不使用 Framer Motion,不会有 React 18 并发渲染的 insertBefore 错误 return ( - {/* 半透明背景 + 模糊效果 */} - - - {/* 弹窗内容容器 */} - - {/* 关闭按钮 */} - - - {/* 弹窗主体内容 */} - - - - + ); }