106 lines
2.7 KiB
JavaScript
106 lines
2.7 KiB
JavaScript
// src/components/Auth/AuthModalManager.js
|
||
import React from 'react';
|
||
import {
|
||
Modal,
|
||
ModalOverlay,
|
||
ModalContent,
|
||
ModalBody,
|
||
ModalCloseButton,
|
||
useBreakpointValue
|
||
} from '@chakra-ui/react';
|
||
import { useAuthModal } from '../../contexts/AuthModalContext';
|
||
import AuthFormContent from './AuthFormContent';
|
||
|
||
/**
|
||
* 全局认证弹窗管理器
|
||
* 统一的登录/注册弹窗
|
||
*/
|
||
export default function AuthModalManager() {
|
||
const {
|
||
isAuthModalOpen,
|
||
closeModal
|
||
} = useAuthModal();
|
||
|
||
// 响应式尺寸配置
|
||
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;
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={isAuthModalOpen}
|
||
onClose={closeModal}
|
||
size={modalSize}
|
||
isCentered
|
||
closeOnOverlayClick={false} // 防止误点击背景关闭
|
||
closeOnEsc={true} // 允许ESC键关闭
|
||
scrollBehavior="inside" // 内容滚动
|
||
zIndex={999} // 低于导航栏(1000)，不覆盖导航
|
||
>
|
||
{/* 半透明背景 + 模糊效果 */}
|
||
<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>
|
||
);
|
||
}
|