From 9f9f57b379fa88ef4c8d27aa4cfb0f2b8be8102c Mon Sep 17 00:00:00 2001
From: evan <liukersun@gmail.com>
Date: Thu, 16 Apr 2026 16:55:20 +0000
Subject: [PATCH] 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
---
 frontend/app/home-dock.tsx        | 74 ++++++++++++++++++++++++++++++
 frontend/app/home-page-client.tsx | 76 +++++++++++++++++++++++++++++++
 frontend/app/login-dialog.tsx     | 38 ++++++++++++++++
 frontend/app/page.tsx             | 56 ++++++-----------------
 4 files changed, 202 insertions(+), 42 deletions(-)
 create mode 100644 frontend/app/home-dock.tsx
 create mode 100644 frontend/app/home-page-client.tsx
 create mode 100644 frontend/app/login-dialog.tsx

diff --git a/frontend/app/home-dock.tsx b/frontend/app/home-dock.tsx
new file mode 100644
index 0000000..b6dd2ab
--- /dev/null
+++ b/frontend/app/home-dock.tsx
@@ -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>
+  );
+}
diff --git a/frontend/app/home-page-client.tsx b/frontend/app/home-page-client.tsx
new file mode 100644
index 0000000..6eeb421
--- /dev/null
+++ b/frontend/app/home-page-client.tsx
@@ -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>
+  );
+}
diff --git a/frontend/app/login-dialog.tsx b/frontend/app/login-dialog.tsx
new file mode 100644
index 0000000..6224847
--- /dev/null
+++ b/frontend/app/login-dialog.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { LoginForm } from "./login/login-form";
+import { ReactNode, useState } from "react";
+
+export function LoginDialog({
+  hasKeycloak,
+  children,
+}: {
+  hasKeycloak: boolean;
+  children?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger className="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-800">
+        {children ?? "登录"}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-center">登录</DialogTitle>
+        </DialogHeader>
+        <LoginForm
+          hasKeycloak={hasKeycloak}
+          onSuccess={() => setOpen(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 887811e..c7ca538 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,8 +1,14 @@
-import { BlurFade } from "@/components/magicui/blur-fade";
+import { Suspense } from "react";
+import { auth } from "@/auth";
+import { HomePageClient } from "./home-page-client";
 
 const SERVER_API_URL = process.env.SERVER_API_URL || "http://backend:8080";
+const hasKeycloak = !!process.env.AUTH_KEYCLOAK_ISSUER;
 
 export default async function HomePage() {
+  const session = await auth();
+  const isAuthenticated = !!session?.user;
+
   let healthText = "无法连接到后端服务";
 
   try {
@@ -19,46 +25,12 @@ export default async function HomePage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
-      <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>
-
-      <BlurFade inView delay={0.4}>
-        <div className="mt-8 flex gap-4">
-          <a
-            href="/login"
-            className="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-800"
-          >
-            登录
-          </a>
-          <a
-            href="/register"
-            className="rounded-lg border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50"
-          >
-            注册
-          </a>
-        </div>
-      </BlurFade>
-    </div>
+    <Suspense>
+      <HomePageClient
+        isAuthenticated={isAuthenticated}
+        healthText={healthText}
+        hasKeycloak={hasKeycloak}
+      />
+    </Suspense>
   );
 }