131 lines
4.8 KiB
TypeScript
131 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronUp } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
import type { User } from "next-auth";
|
|
import { signOut, useSession } from "next-auth/react";
|
|
import { useTheme } from "next-themes";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from "@/components/ui/sidebar";
|
|
import { guestRegex } from "@/lib/constants";
|
|
import { LoaderIcon } from "./icons";
|
|
import { toast } from "./toast";
|
|
|
|
export function SidebarUserNav({ user }: { user: User }) {
|
|
const router = useRouter();
|
|
const { data, status } = useSession();
|
|
const { setTheme, resolvedTheme } = useTheme();
|
|
|
|
const isGuest = guestRegex.test(data?.user?.email ?? "");
|
|
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
{status === "loading" ? (
|
|
<SidebarMenuButton className="h-10 justify-between bg-background data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
|
|
<div className="flex flex-row gap-2">
|
|
<div className="size-6 animate-pulse rounded-full bg-zinc-500/30" />
|
|
<span className="animate-pulse rounded-md bg-zinc-500/30 text-transparent">
|
|
正在获取登录状态
|
|
</span>
|
|
</div>
|
|
<div className="animate-spin text-zinc-500">
|
|
<LoaderIcon />
|
|
</div>
|
|
</SidebarMenuButton>
|
|
) : (
|
|
<SidebarMenuButton
|
|
className="h-10 bg-background data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
data-testid="user-nav-button"
|
|
>
|
|
<Image
|
|
alt={user.email ?? "User Avatar"}
|
|
className="rounded-full"
|
|
height={24}
|
|
src={`https://avatar.vercel.sh/${user.email}`}
|
|
width={24}
|
|
/>
|
|
<span className="truncate" data-testid="user-email">
|
|
{isGuest ? "访客用户" : (user?.name || user?.email)}
|
|
</span>
|
|
<ChevronUp className="ml-auto" />
|
|
</SidebarMenuButton>
|
|
)}
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-(--radix-popper-anchor-width)"
|
|
data-testid="user-nav-menu"
|
|
side="top"
|
|
>
|
|
<DropdownMenuItem
|
|
className="cursor-pointer"
|
|
data-testid="user-nav-item-theme"
|
|
onSelect={() =>
|
|
setTheme(resolvedTheme === "dark" ? "light" : "dark")
|
|
}
|
|
>
|
|
切换到 {resolvedTheme === "light" ? "深色" : "浅色"} 模式
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild data-testid="user-nav-item-auth">
|
|
<button
|
|
className="w-full cursor-pointer"
|
|
onClick={async () => {
|
|
if (status === "loading") {
|
|
toast({
|
|
type: "error",
|
|
description: "正在核对登录状态，请稍后重试",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (isGuest) {
|
|
router.push("/login");
|
|
} else {
|
|
try {
|
|
// 调用自定义退出 API 清除服务器端 cookie
|
|
await fetch("/api/auth/logout", { method: "POST" });
|
|
|
|
// 同时调用 signOut 确保客户端状态也被清除
|
|
await signOut({
|
|
callbackUrl: "/login",
|
|
redirect: false,
|
|
});
|
|
|
|
// 等待一小段时间确保 cookie 被清除
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// 强制跳转到登录页面（使用 replace 避免浏览器后退按钮问题）
|
|
window.location.replace("/login");
|
|
} catch (error) {
|
|
console.error("退出登录失败:", error);
|
|
// 强制跳转
|
|
window.location.replace("/login");
|
|
}
|
|
}
|
|
}}
|
|
type="button"
|
|
>
|
|
{isGuest ? "登录正式账号" : "退出登录"}
|
|
</button>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
);
|
|
}
|