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:
2026-04-16 16:55:20 +00:00
parent baf2b26de0
commit 9f9f57b379
4 changed files with 202 additions and 42 deletions

View File

@@ -0,0 +1,74 @@
"use client";
import { Dock, DockIcon } from "@/components/ui/dock";
import { signOut } from "next-auth/react";
import { Home, User, LogOut, Download, BookOpen, LayoutDashboard } from "lucide-react";
export function HomeDock({
isAuthenticated,
onLoginClick,
}: {
isAuthenticated: boolean;
onLoginClick?: () => void;
}) {
return (
<div className="fixed bottom-8 left-1/2 -translate-x-1/2">
<Dock>
<DockIcon>
<a href="/" aria-label="首页">
<Home className="h-5 w-5 text-slate-700" />
</a>
</DockIcon>
<DockIcon>
<a
href="https://file.liukersun.com"
target="_blank"
rel="noopener noreferrer"
aria-label="下载网站"
>
<Download className="h-5 w-5 text-slate-700" />
</a>
</DockIcon>
<DockIcon>
<a
href="https://blog.liukersun.com"
target="_blank"
rel="noopener noreferrer"
aria-label="博客"
>
<BookOpen className="h-5 w-5 text-slate-700" />
</a>
</DockIcon>
{isAuthenticated && (
<DockIcon>
<a href="/dashboard" aria-label="仪表盘">
<LayoutDashboard className="h-5 w-5 text-slate-700" />
</a>
</DockIcon>
)}
<DockIcon>
{isAuthenticated ? (
<button
onClick={async () => {
await signOut({ redirect: false });
window.location.href = "/";
}}
aria-label="退出"
className="flex h-full w-full items-center justify-center"
>
<LogOut className="h-5 w-5 text-slate-700" />
</button>
) : (
<button
onClick={onLoginClick}
aria-label="登录"
className="flex h-full w-full items-center justify-center"
>
<User className="h-5 w-5 text-slate-700" />
</button>
)}
</DockIcon>
</Dock>
</div>
);
}