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

@@ -5,12 +5,17 @@ import { Link } from "react-router-dom";
/**
* 认证页面底部组件
* 包含页面切换链接和登录方式切换链接
*
* 支持两种模式:
* 1. 页面模式:使用 linkTo 进行路由跳转
* 2. 弹窗模式:使用 onClick 进行弹窗切换
*/
export default function AuthFooter({
// 左侧链接配置
linkText, // 提示文本,如 "还没有账号," 或 "已有账号?"
linkLabel, // 链接文本,如 "去注册" 或 "去登录"
linkTo, // 链接路径,如 "/auth/sign-up" 或 "/auth/sign-in"
linkTo, // 链接路径,如 "/auth/sign-up" 或 "/auth/sign-in"(页面模式)
onClick, // 点击回调函数(弹窗模式,优先级高于 linkTo
// 右侧切换配置
useVerificationCode, // 当前是否使用验证码登录
@@ -19,24 +24,35 @@ export default function AuthFooter({
return (
<HStack justify="space-between" width="100%">
{/* 左侧:页面切换链接(去注册/去登录) */}
<HStack spacing={1} as={Link} to={linkTo}>
<Text fontSize="sm" color="gray.600">{linkText}</Text>
<Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
</HStack>
{onClick ? (
// 弹窗模式:使用 onClick
<HStack spacing={1} cursor="pointer" onClick={onClick}>
<Text fontSize="sm" color="gray.600">{linkText}</Text>
<Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
</HStack>
) : (
// 页面模式:使用 Link 组件跳转
<HStack spacing={1} as={Link} to={linkTo}>
<Text fontSize="sm" color="gray.600">{linkText}</Text>
<Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
</HStack>
)}
{/* 右侧:登录方式切换链接 */}
<ChakraLink
href="#"
fontSize="sm"
color="blue.500"
fontWeight="bold"
onClick={(e) => {
e.preventDefault();
onSwitchMethod();
}}
>
{useVerificationCode ? '密码登陆' : '验证码登陆'}
</ChakraLink>
{/* 右侧:登录方式切换链接(仅在提供了切换方法时显示) */}
{onSwitchMethod && (
<ChakraLink
href="#"
fontSize="sm"
color="blue.500"
fontWeight="bold"
onClick={(e) => {
e.preventDefault();
onSwitchMethod();
}}
>
{useVerificationCode ? '密码登陆' : '验证码登陆'}
</ChakraLink>
)}
</HStack>
);
}