fix: tighten workspace controls

2026-07-02 18:24:35 -07:00
parent fd548eaa7b
commit 7718d9759c
9 changed files with 331 additions and 81 deletions
--- a/modules/shared/components/AccountMenu.tsx
+++ b/modules/shared/components/AccountMenu.tsx
@@ -0,0 +1,109 @@
+"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>
+  );
+}