This commit is contained in:
ditiqi 2025-02-18 10:56:42 +08:00
parent 1f79e3275f
commit 2a52a7ed96
3 changed files with 109 additions and 131 deletions

View File

@ -11,130 +11,117 @@ import { env } from "@web/src/env";
const { Title, Text, Paragraph } = Typography; const { Title, Text, Paragraph } = Typography;
const AuthPage: React.FC = () => { const AuthPage: React.FC = () => {
const { const { showLogin, isLoading, toggleForm, handleLogin, handleRegister } =
showLogin, useAuthForm();
isLoading, const { isAuthenticated } = useAuth();
toggleForm, const location = useLocation();
handleLogin, const navigate = useNavigate();
handleRegister
} = useAuthForm();
const { isAuthenticated } = useAuth();
const location = useLocation();
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (isAuthenticated) { if (isAuthenticated) {
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const redirectUrl = params.get("redirect_url") || "/"; const redirectUrl = params.get("redirect_url") || "/";
navigate(redirectUrl, { replace: true }); navigate(redirectUrl, { replace: true });
} }
}, [isAuthenticated, location]); }, [isAuthenticated, location]);
return ( return (
<div className="min-h-screen flex items-center justify-center p-4"> <div className="min-h-screen flex items-center justify-center p-4">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}>
> <div className="w-full max-w-5xl shadow-elegant border-2 border-white rounded-xl overflow-hidden transition-all duration-300 relative">
<div <div className="flex flex-col md:flex-row min-h-[650px]">
className="w-full max-w-5xl shadow-elegant border-2 border-white rounded-xl overflow-hidden transition-all duration-300 relative" {/* Left Panel - Welcome Section */}
> <div className="w-full md:w-1/2 p-12 bg-gradient-to-br from-primary to-primary-600 text-white flex flex-col justify-center relative overflow-hidden">
<div className="flex flex-col md:flex-row min-h-[650px]"> <motion.div
{/* Left Panel - Welcome Section */} initial={{ opacity: 0, y: 20 }}
<div className="w-full md:w-1/2 p-12 bg-gradient-to-br from-primary to-primary-600 text-white flex flex-col justify-center relative overflow-hidden"> animate={{ opacity: 1, y: 0 }}
<motion.div transition={{ delay: 0.2, duration: 0.5 }}>
initial={{ opacity: 0, y: 20 }} <div className="text-4xl text-white mb-4 font-serif">
animate={{ opacity: 1, y: 0 }} {env.APP_NAME || "信箱"}
transition={{ delay: 0.2, duration: 0.5 }} </div>
> <Paragraph className="text-lg mb-8 text-blue-100 leading-relaxed text-justify">
<div className="text-4xl text-white mb-4 font-serif"> <br></br>
{env.APP_NAME || '信箱'}
</div> </Paragraph>
<Paragraph className="text-lg mb-8 text-blue-100 leading-relaxed text-justify"> {showLogin && (
<Button
</Paragraph> type="default"
{showLogin && ( ghost
<Button size="large"
type="default" onClick={toggleForm}
ghost className="w-fit hover:bg-white hover:text-blue-700 transition-all">
size="large"
onClick={toggleForm} </Button>
className="w-fit hover:bg-white hover:text-blue-700 transition-all" )}
> </motion.div>
</div>
</Button>
)}
</motion.div>
</div>
{/* Right Panel - Form Section */} {/* Right Panel - Form Section */}
<div className="w-full md:w-1/2 p-10 lg:p-16 bg-white relative rounded-xl"> <div className="w-full md:w-1/2 p-10 lg:p-16 bg-white relative rounded-xl">
<AnimatePresence mode="wait">
<AnimatePresence mode="wait"> {showLogin ? (
{showLogin ? ( <motion.div
<motion.div key="login"
key="login" initial={{ opacity: 0, x: 50 }}
initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }}
animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -50 }}
exit={{ opacity: 0, x: -50 }} transition={{ duration: 0.3 }}>
transition={{ duration: 0.3 }} <motion.div className="mb-8">
> <Title level={3} className="mb-2">
<motion.div className="mb-8">
<Title level={3} className="mb-2"></Title> </Title>
<Text type="secondary"> <Text type="secondary">
使{' '} 使{" "}
<Button <Button
type="link" type="link"
onClick={toggleForm} onClick={toggleForm}
className="p-0 font-medium" className="p-0 font-medium">
>
</Button>
</Button> </Text>
</Text> </motion.div>
</motion.div> <LoginForm
<LoginForm onSubmit={handleLogin}
onSubmit={handleLogin} isLoading={isLoading}
isLoading={isLoading} />
/> </motion.div>
) : (
</motion.div> <motion.div
) : ( key="register"
<motion.div initial={{ opacity: 0, x: 50 }}
key="register" animate={{ opacity: 1, x: 0 }}
initial={{ opacity: 0, x: 50 }} exit={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.3 }}>
exit={{ opacity: 0, x: -50 }} <motion.div className="mb-8">
transition={{ duration: 0.3 }} <Title level={3} className="mb-2">
>
<motion.div className="mb-8"> </Title>
<Title level={3} className="mb-2"></Title> <Text type="secondary">
<Text type="secondary"> {" "}
{' '} <Button
<Button type="link"
type="link" onClick={toggleForm}
onClick={toggleForm} className="p-0 font-medium">
className="p-0 font-medium"
> </Button>
</Text>
</Button> </motion.div>
</Text> <RegisterForm
</motion.div> onSubmit={handleRegister}
<RegisterForm isLoading={isLoading}
onSubmit={handleRegister} />
isLoading={isLoading} </motion.div>
/> )}
</AnimatePresence>
</motion.div> </div>
)} </div>
</AnimatePresence> </div>
</div> </motion.div>
</div> </div>
</div> );
</motion.div>
</div>
);
}; };
export default AuthPage; export default AuthPage;

View File

@ -17,7 +17,7 @@ export function Footer() {
{/* 开发组织信息 */} {/* 开发组织信息 */}
<div className="text-center md:text-left space-y-2"> <div className="text-center md:text-left space-y-2">
<h3 className="text-white font-semibold text-sm flex items-center justify-center md:justify-start"> <h3 className="text-white font-semibold text-sm flex items-center justify-center md:justify-start">
</h3> </h3>
<p className="text-white text-xs italic"> <p className="text-white text-xs italic">

View File

@ -1,9 +0,0 @@
module.exports = async ({ page, context }) => {
await page.setViewport({ width: 1920, height: 1080 });
await page.goto("http://192.168.139.239:8090", {
waitUntil: "networkidle0",
});
await page.evaluate(() => {
document.documentElement.requestFullscreen();
});
};