frontend: redesign homepage with magic dock and login dialog
- Replace top login/register buttons with magic dock navigation - Add dock items: home, downloads, blog, and conditional login/logout - Show dashboard icon in dock when authenticated - Extract HomePageClient for client-side dialog state
This commit is contained in:
76
frontend/app/home-page-client.tsx
Normal file
76
frontend/app/home-page-client.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { BlurFade } from "@/components/magicui/blur-fade";
|
||||
import { HomeDock } from "./home-dock";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { LoginForm } from "./login/login-form";
|
||||
|
||||
export function HomePageClient({
|
||||
isAuthenticated,
|
||||
healthText,
|
||||
hasKeycloak,
|
||||
}: {
|
||||
isAuthenticated: boolean;
|
||||
healthText: string;
|
||||
hasKeycloak: boolean;
|
||||
}) {
|
||||
const searchParams = useSearchParams();
|
||||
const [loginOpen, setLoginOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchParams.get("login") === "1" && !isAuthenticated) {
|
||||
setLoginOpen(true);
|
||||
}
|
||||
}, [searchParams, isAuthenticated]);
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4 pb-24">
|
||||
<BlurFade inView delay={0.1}>
|
||||
<h1 className="mb-4 text-center text-4xl font-extrabold tracking-tight text-slate-900">
|
||||
EvanPage
|
||||
</h1>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade inView delay={0.2}>
|
||||
<p className="mb-8 max-w-md text-center text-lg text-slate-600">
|
||||
全栈基础框架
|
||||
</p>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade inView delay={0.3}>
|
||||
<div className="rounded-2xl border bg-white/80 px-8 py-6 shadow-lg backdrop-blur">
|
||||
<p className="text-center text-sm font-medium text-slate-500">
|
||||
后端状态
|
||||
</p>
|
||||
<p className="mt-2 text-center text-xl font-semibold text-slate-800">
|
||||
{healthText}
|
||||
</p>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
<HomeDock
|
||||
isAuthenticated={isAuthenticated}
|
||||
onLoginClick={() => !isAuthenticated && setLoginOpen(true)}
|
||||
/>
|
||||
|
||||
<Dialog open={loginOpen} onOpenChange={setLoginOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-center">登录</DialogTitle>
|
||||
</DialogHeader>
|
||||
<LoginForm
|
||||
hasKeycloak={hasKeycloak}
|
||||
onSuccess={() => setLoginOpen(false)}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user