110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { Ellipsis, LogOut, Settings } from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import type { Permission, PublicAccount } from "@/modules/core/types";
|
|
import { UserAvatar } from "@/modules/shared/components/UserAvatar";
|
|
|
|
type AccountMenuProps = {
|
|
account: PublicAccount;
|
|
permissions: Permission[];
|
|
};
|
|
|
|
export function AccountMenu({ account, permissions }: AccountMenuProps): React.ReactElement {
|
|
const router = useRouter();
|
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isPending, setIsPending] = useState(false);
|
|
const canReadAccounts = permissions.includes("account:read");
|
|
const settingsHref = canReadAccounts ? `/app/settings/users?q=${encodeURIComponent(account.email)}` : "/app/settings/global";
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
return;
|
|
}
|
|
|
|
function handlePointerDown(event: PointerEvent): void {
|
|
const target = event.target;
|
|
if (target instanceof Node && !menuRef.current?.contains(target)) {
|
|
setIsOpen(false);
|
|
}
|
|
}
|
|
|
|
function handleKeyDown(event: KeyboardEvent): void {
|
|
if (event.key === "Escape") {
|
|
setIsOpen(false);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
|
|
return () => {
|
|
document.removeEventListener("pointerdown", handlePointerDown);
|
|
document.removeEventListener("keydown", handleKeyDown);
|
|
};
|
|
}, [isOpen]);
|
|
|
|
async function handleSignOut(): Promise<void> {
|
|
setIsPending(true);
|
|
await fetch("/api/auth/logout", { method: "POST" });
|
|
router.refresh();
|
|
router.replace("/login");
|
|
}
|
|
|
|
return (
|
|
<div className="relative" ref={menuRef}>
|
|
<div className="flex min-w-0 items-center gap-3 rounded-md bg-secondary/55 p-2">
|
|
<UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium leading-tight">{account.name}</p>
|
|
<p className="truncate text-xs leading-tight text-muted-foreground">{account.email}</p>
|
|
</div>
|
|
<Button
|
|
aria-expanded={isOpen}
|
|
aria-haspopup="menu"
|
|
aria-label="打开账号菜单"
|
|
onClick={() => setIsOpen((current) => !current)}
|
|
size="icon"
|
|
type="button"
|
|
variant="ghost"
|
|
className="size-9 shrink-0"
|
|
>
|
|
<Ellipsis className="size-4" aria-hidden="true" />
|
|
</Button>
|
|
</div>
|
|
|
|
{isOpen ? (
|
|
<div
|
|
className="absolute bottom-full right-0 z-30 mb-2 w-52 rounded-md border bg-popover p-1 text-popover-foreground shadow-lg"
|
|
role="menu"
|
|
>
|
|
<Link
|
|
className="flex min-h-10 items-center gap-2 rounded-sm px-3 text-sm font-medium hover:bg-secondary"
|
|
href={settingsHref}
|
|
onClick={() => setIsOpen(false)}
|
|
role="menuitem"
|
|
>
|
|
<Settings className="size-4 text-muted-foreground" aria-hidden="true" />
|
|
用户设置
|
|
</Link>
|
|
<button
|
|
className="flex min-h-10 w-full items-center gap-2 rounded-sm px-3 text-left text-sm font-medium hover:bg-secondary disabled:opacity-55"
|
|
disabled={isPending}
|
|
onClick={handleSignOut}
|
|
role="menuitem"
|
|
type="button"
|
|
>
|
|
<LogOut className="size-4 text-muted-foreground" aria-hidden="true" />
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|