feat: 登陆注册UI调整,用户协议和隐私政策跳转调整

This commit is contained in:
zdl
2025-10-15 11:03:00 +08:00
parent 29816de72b
commit 4e9acd12c2
18 changed files with 3068 additions and 49 deletions

View File

@@ -0,0 +1,84 @@
// 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: "full", // 移动端:全屏
sm: "xl", // 小屏xl
md: "2xl", // 中屏2xl
lg: "4xl" // 大屏4xl
});
// 条件渲染:只在打开时才渲染 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={modalSize === "full" ? "100%" : "900px"}
my={modalSize === "full" ? 0 : 8}
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={8}>
<AuthFormContent />
</ModalBody>
</ModalContent>
</Modal>
);
}