From aed648fed514b2412ff316b449ad20b77e0b57d5 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Sat, 22 Feb 2025 00:49:22 +0800
Subject: [PATCH] refactor: Remove AuthStateSync component and update layout

---
 src/app/()/page.tsx                     |   4 +-
 src/app/(auth)/layout.tsx               |   2 -
 src/components/auth/auth-state-sync.tsx |  20 ---
 src/components/layout/header-client.tsx | 191 ++++++++++++++++++++++++
 src/components/layout/header.tsx        |  26 ++++
 5 files changed, 219 insertions(+), 24 deletions(-)
 delete mode 100644 src/components/auth/auth-state-sync.tsx
 create mode 100644 src/components/layout/header-client.tsx
 create mode 100644 src/components/layout/header.tsx

diff --git a/src/app/()/page.tsx b/src/app/()/page.tsx
index afc01bf..ac4bb3d 100644
--- a/src/app/()/page.tsx
+++ b/src/app/()/page.tsx
@@ -18,12 +18,12 @@ import {
   TypographyLead,
   TypographyMuted,
 } from "@/components/ui/typography";
-import { NavBar } from "@/components/layout/nav-bar";
+import { Header } from "@/components/layout/header";
 
 export default function HomePage() {
   return (
     <div className="flex min-h-screen flex-col">
-      <NavBar />
+      <Header />
       <main className="flex-1">
         <Section className="pb-0">
           <Container>
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 7b7afd1..591fd82 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -1,7 +1,6 @@
 import { redirect } from "next/navigation";
 
 import { getCurrentUser } from "@/lib/session";
-import { AuthStateSync } from "@/components/auth/auth-state-sync";
 
 export default async function AuthLayout({
   children,
@@ -17,7 +16,6 @@ export default async function AuthLayout({
 
   return (
     <>
-      <AuthStateSync />
       <div className="min-h-screen">
         <div className="flex h-screen w-screen flex-col items-center justify-center">
           {children}
diff --git a/src/components/auth/auth-state-sync.tsx b/src/components/auth/auth-state-sync.tsx
deleted file mode 100644
index 04f7a54..0000000
--- a/src/components/auth/auth-state-sync.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-
-export function AuthStateSync() {
-  const { data: session, status, update } = useSession();
-  const router = useRouter();
-  const pathname = usePathname();
-
-  useEffect(() => {
-    // 当状态从"loading"变为"authenticated"时，强制刷新路由
-    if (status === "authenticated" && session?.user) {
-      router.refresh();
-    }
-  }, [status, session]);
-
-  return null;
-}
diff --git a/src/components/layout/header-client.tsx b/src/components/layout/header-client.tsx
new file mode 100644
index 0000000..a05ddab
--- /dev/null
+++ b/src/components/layout/header-client.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { ChevronDown, User } from "lucide-react";
+import { signOut } from "next-auth/react";
+
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { ThemeToggle } from "../theme-toggle";
+
+interface HeaderClientProps {
+  initialUser: any;
+}
+
+export function HeaderClient({ initialUser }: HeaderClientProps) {
+  const [user, setUser] = useState(initialUser);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleSignOut = async () => {
+    await signOut({ redirect: false });
+    setUser(null);
+    router.refresh();
+    router.push("/");
+  };
+
+  const renderNavLinks = () => {
+    if (!user) return null;
+
+    return (
+      <div className="ml-8 flex items-center space-x-1">
+        <Link
+          href="/dashboard"
+          className={cn(
+            "rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+            pathname === "/dashboard"
+              ? "bg-accent text-accent-foreground"
+              : "text-muted-foreground",
+          )}
+        >
+          控制台
+        </Link>
+        <Link
+          href="/dashboard/clients"
+          className={cn(
+            "rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+            pathname.startsWith("/dashboard/clients")
+              ? "bg-accent text-accent-foreground"
+              : "text-muted-foreground",
+          )}
+        >
+          应用管理
+        </Link>
+        <Link
+          href="/dashboard/settings"
+          className={cn(
+            "rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+            pathname === "/dashboard/settings"
+              ? "bg-accent text-accent-foreground"
+              : "text-muted-foreground",
+          )}
+        >
+          设置
+        </Link>
+        {user.role === "ADMIN" && (
+          <>
+            <div className="mx-2 h-4 w-px bg-border" />
+            <Link
+              href="/admin"
+              className={cn(
+                "rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+                pathname === "/admin"
+                  ? "bg-accent text-accent-foreground"
+                  : "text-muted-foreground",
+              )}
+            >
+              管理后台
+            </Link>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    "rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+                    pathname.startsWith("/admin/") && pathname !== "/admin"
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  管理功能
+                  <ChevronDown className="ml-1 h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem asChild>
+                  <Link
+                    href="/admin/users"
+                    className={cn(
+                      "w-full",
+                      pathname === "/admin/users" && "bg-accent",
+                    )}
+                  >
+                    用户列表
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link
+                    href="/admin/clients"
+                    className={cn(
+                      "w-full",
+                      pathname === "/admin/clients" && "bg-accent",
+                    )}
+                  >
+                    应用管理
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link
+                    href="/admin/authorizations"
+                    className={cn(
+                      "w-full",
+                      pathname === "/admin/authorizations" && "bg-accent",
+                    )}
+                  >
+                    授权管理
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link
+                    href="/admin/logs"
+                    className={cn(
+                      "w-full",
+                      pathname === "/admin/logs" && "bg-accent",
+                    )}
+                  >
+                    系统日志
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex items-center space-x-4">
+      {renderNavLinks()}
+      <ThemeToggle />
+      {user ? (
+        <div className="flex items-center gap-3">
+          <Avatar className="h-8 w-8">
+            <AvatarImage src={user.avatarUrl || undefined} />
+            <AvatarFallback>
+              {user.name?.charAt(0) || user.username?.charAt(0)}
+            </AvatarFallback>
+          </Avatar>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleSignOut}
+            className="text-muted-foreground hover:text-red-600"
+          >
+            退出
+          </Button>
+        </div>
+      ) : (
+        <Button
+          variant="outline"
+          size="sm"
+          className="border-[#25263A] text-[#25263A] hover:bg-[#25263A] hover:text-white dark:border-[#A0A1B2] dark:text-[#A0A1B2] dark:hover:bg-[#A0A1B2] dark:hover:text-[#25263A]"
+          onClick={() => router.push("/sign-in")}
+        >
+          登录
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
new file mode 100644
index 0000000..b9b9397
--- /dev/null
+++ b/src/components/layout/header.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+import { getCurrentUser } from "@/lib/session";
+import { HeaderClient } from "@/components/layout/header-client";
+
+export async function Header() {
+  const user = await getCurrentUser();
+
+  return (
+    <header className="sticky top-0 z-10 bg-white shadow-md dark:bg-gray-800">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-14 items-center justify-between">
+          <div className="flex items-center">
+            <Link href="/" className="flex items-center space-x-3">
+              <h1 className="text-2xl font-bold text-[#25263A] dark:text-white">
+                Q58 Connect
+              </h1>
+            </Link>
+          </div>
+
+          <HeaderClient initialUser={user} />
+        </div>
+      </div>
+    </header>
+  );
+}