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