fix: 修复的问题： │ │

│ │ - ✅ React 18 Portal insertBefore 错误                                                                                                                               │ │
│ │ - ✅ Ant Design Modal defaultProps 废弃警告

src/components/Auth/AuthModalManager.js

@@ -1,13 +1,7 @@
 // src/components/Auth/AuthModalManager.js
 import React, { useEffect, useRef } from 'react';
-import {
+import { Modal } from 'antd';
-  Modal,
+import { useBreakpointValue } from '@chakra-ui/react';
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
-  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]);
 
-  // 响应式尺寸配置
+  // 响应式宽度配置（Ant Design Modal 使用数字或字符串）
-  const modalSize = useBreakpointValue({
+  const modalMaxW = 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
-  });
+    },
-
+    { fallback: "700px", ssr: false }
-  // 响应式水平边距
+  );
-  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，完全避开 Chakra UI Portal 的 AnimatePresence 问题
+  // Ant Design Modal 不使用 Framer Motion，不会有 React 18 并发渲染的 insertBefore 错误
   return (
     <Modal
-      isOpen={isAuthModalOpen}
+      open={isAuthModalOpen}
-      onClose={closeModal}
+      onCancel={closeModal}
-      size={modalSize}
+      footer={null}
-      isCentered
+      width={modalMaxW}
-      closeOnOverlayClick={false}  // 防止误点击背景关闭
+      centered
-      closeOnEsc={true}             // 允许ESC键关闭
+      destroyOnHidden={true}
-      scrollBehavior="inside"       // 内容滚动
+      maskClosable={false}
-      zIndex={999}                  // 低于导航栏(1000)，不覆盖导航
+      keyboard={true}
+      zIndex={999}
+      styles={{
+        body: {
+          padding: '24px',
+          maxHeight: 'calc(90vh - 120px)',
+          overflowY: 'auto'
+        },
+        mask: {
+          backdropFilter: 'blur(10px)',
+          backgroundColor: 'rgba(0, 0, 0, 0.7)'
+        }
+      }}
     >
-      {/* 半透明背景 + 模糊效果 */}
-      <ModalOverlay
-        bg="blackAlpha.700"
-        backdropFilter="blur(10px)"
-      />
-
-      {/* 弹窗内容容器 */}
-      <ModalContent
-        bg="white"
-        boxShadow="2xl"
-        borderRadius="2xl"
-        maxW={modalMaxW}
-        mx={modalMx}
-        my={modalMy}
-        position="relative"
-      >
-        {/* 关闭按钮 */}
-        <ModalCloseButton
-          position="absolute"
-          right={4}
-          top={4}
-          zIndex={9999}
-          color="gray.500"
-          bg="transparent"
-          _hover={{ bg: "gray.100" }}
-          borderRadius="full"
-          size="lg"
-          onClick={closeModal}
-        />
-
-        {/* 弹窗主体内容 */}
-        <ModalBody p={6}>
       <AuthFormContent />
-        </ModalBody>
-      </ModalContent>
     </Modal>
   );
 }