From 2bf60a8a22143241a5d95769b7b3965987caba9e Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Sat, 8 Feb 2025 19:58:09 +0800
Subject: [PATCH] feat: Improve user avatar and dropdown menu in NavBar

---
 next.config.mjs                   |  4 +++
 src/components/layout/nav-bar.tsx | 44 ++++++++++++++++++++++---------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index 5897695..d2d7411 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -8,6 +8,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "q58.pro",
       },
+      {
+        protocol: "https",
+        hostname: "i-aws.czl.net",
+      },
     ],
   },
 };
diff --git a/src/components/layout/nav-bar.tsx b/src/components/layout/nav-bar.tsx
index c5efdb8..e76c365 100644
--- a/src/components/layout/nav-bar.tsx
+++ b/src/components/layout/nav-bar.tsx
@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import { User } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 
 import DynamicLogo from "../dynamic-logo";
@@ -41,24 +42,43 @@ export function NavBar() {
                   <Button
                     variant="outline"
                     size="icon"
-                    className="overflow-hidden rounded-full"
+                    className="relative h-9 w-9 overflow-hidden rounded-full"
                   >
-                    <Image
-                      src={user.avatarUrl as string}
-                      width={36}
-                      height={36}
-                      alt="Avatar"
-                      className="overflow-hidden rounded-full"
-                    />
+                    {user.avatarUrl ? (
+                      <Image
+                        src={user.avatarUrl}
+                        width={36}
+                        height={36}
+                        alt={user.name || "用户头像"}
+                        className="h-full w-full object-cover"
+                        onError={(e) => {
+                          const target = e.target as HTMLImageElement;
+                          target.style.display = "none";
+                          target.nextElementSibling?.classList.remove("hidden");
+                        }}
+                      />
+                    ) : null}
+                    <User className="h-5 w-5" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                  <DropdownMenuLabel>
+                    {user.name || user.username || "用户"}
+                  </DropdownMenuLabel>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem>Settings</DropdownMenuItem>
-                  <DropdownMenuItem>Support</DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link href="/dashboard">控制台</Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link href="/dashboard/clients">应用管理</Link>
+                  </DropdownMenuItem>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem>Logout</DropdownMenuItem>
+                  <DropdownMenuItem
+                    className="text-red-600 dark:text-red-400"
+                    onClick={() => signOut()}
+                  >
+                    退出登录
+                  </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             ) : (