import { useEffect, useRef, useState } from "react"; import { ChevronRight, LayoutGrid, LogOut, Settings } from "lucide-react"; import type { AuthUser, AuthWorkspace } from "../../context/AuthContext"; import { AccountSettingsDialog } from "./AccountSettingsDialog"; type TopbarProps = { pageTitle: string; apiOnline: boolean; user: AuthUser | null; currentWorkspace: AuthWorkspace; workspaces: AuthWorkspace[]; workspaceMenuOpen: boolean; onSetWorkspaceMenuOpen: (open: boolean) => void; onSetCurrentWorkspace: (workspaceId: string) => void; onLogout: () => void; onBack: () => void; }; export function Topbar({ pageTitle, apiOnline, user, currentWorkspace, workspaces, workspaceMenuOpen, onSetWorkspaceMenuOpen, onSetCurrentWorkspace, onLogout, onBack, }: TopbarProps) { const [userMenuOpen, setUserMenuOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); const userMenuRef = useRef(null); useEffect(() => { if (!userMenuOpen) return; const onPointerDown = (event: MouseEvent) => { if (!userMenuRef.current?.contains(event.target as Node)) { setUserMenuOpen(false); } }; document.addEventListener("mousedown", onPointerDown); return () => document.removeEventListener("mousedown", onPointerDown); }, [userMenuOpen]); const openUserMenu = () => { onSetWorkspaceMenuOpen(false); setUserMenuOpen((open) => !open); }; const roleLabel = user?.is_system_admin || user?.role_code === "admin" ? "管理员" : ["business", "business_team", "biz"].includes(user?.role_code ?? "") ? "业务团队" : "模型团队"; return (

开发工作区

{pageTitle}

{apiOnline ? "服务已连接" : "服务未连接"}

{workspaceMenuOpen && (

{workspaces.map((workspace) => { const isSelected = workspace.workspace_id === currentWorkspace.workspace_id; return ( ); })}

)}

{userMenuOpen && ( )}

); }