model-platform/frontend/app/components/common/Topbar.tsx

import Icon from "./Icon";
import type { AuthUser, AuthWorkspace } from "../../context/AuthContext";

type TopbarProps = {
  activePage: string;
  apiOnline: boolean;
  user: AuthUser | null;
  currentWorkspace: AuthWorkspace;
  workspaces: AuthWorkspace[];
  workspaceMenuOpen: boolean;
  onSetWorkspaceMenuOpen: (open: boolean) => void;
  onSetCurrentWorkspace: (workspaceId: string) => void;
  onLogout: () => void;
};

export function Topbar({
  activePage,
  apiOnline,
  user,
  currentWorkspace,
  workspaces,
  workspaceMenuOpen,
  onSetWorkspaceMenuOpen,
  onSetCurrentWorkspace,
  onLogout,
}: TopbarProps) {
  const pageTitles: Record<string, string> = {
    home: "工作台",
    scripts: "构建脚本",
    schedules: "调度配置",
    system: "系统管理",
  };

  return (
    <header className="relative z-[2] flex h-[70px] min-h-[70px] items-center justify-between border-b border-[#dfe6ee] bg-white px-[22px]">
      <div className="flex items-center gap-[9px]">
        <button
          className="grid h-[31px] w-[31px] rotate-180 cursor-pointer place-items-center rounded-[7px] border border-transparent bg-white text-[#7b8999] hover:border-[#b9c9da] hover:bg-[#f7faff]"
          type="button"
        >
          <Icon name="chevron" size={19} />
        </button>
        <div>
          <span className="text-[10px] font-[650] uppercase tracking-[0.08em] text-[#94a2b3]">
            开发工作区
          </span>
          <h1 className="m-0 mt-px text-[18px] leading-[1.1] text-[#14243a]">
            {pageTitles[activePage] || "工作台"}
          </h1>
        </div>
      </div>
      <div className="flex items-center gap-[14px]">
        <div className="flex items-center gap-[7px] text-xs text-[#768597] max-xl:hidden">
          <span
            className={`size-[7px] rounded-full ${
              apiOnline
                ? "bg-[#19b878] shadow-[0_0_0_3px_rgb(25_184_120_/_11%)]"
                : "bg-[#d05151] shadow-[0_0_0_3px_rgb(208_81_81_/_10%)]"
            }`}
          />
          {apiOnline ? "服务已连接" : "服务未连接"}
        </div>
        <div className="relative flex items-center gap-[9px]">
          <button
            className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-[#e0e7ee] bg-white px-[11px] hover:border-[#b9cce0]"
            type="button"
            onClick={() => onSetWorkspaceMenuOpen(!workspaceMenuOpen)}
          >
            <span className="grid size-[30px] place-items-center rounded-[7px] bg-gradient-to-br from-[#23aa73] to-[#158d5d] text-white">
              <Icon name="workspace" size={18} />
            </span>
            <span className="flex min-w-[155px] max-xl:min-w-[130px] flex-col items-start">
              <small className="text-[10px] text-[#97a3b1]">当前 Workspace</small>
              <strong className="max-w-[190px] truncate text-[13px] text-[#26384d]">
                {currentWorkspace.workspace_name}
              </strong>
            </span>
            <Icon name="chevron" size={15} />
          </button>
          {workspaceMenuOpen && (
            <div className="absolute top-[calc(100%+7px)] right-0 z-50 w-[260px] rounded-lg border border-[#dce5ed] bg-white p-1.5 shadow-[0_14px_38px_rgb(17_43_70_/_18%)]">
              {workspaces.map((workspace) => {
                const isSelected =
                  workspace.workspace_id === currentWorkspace.workspace_id;
                return (
                  <button
                    className={`flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 px-2.5 py-2 text-left text-[#40576d] ${
                      isSelected
                        ? "bg-brand-soft"
                        : "bg-transparent hover:bg-brand-soft"
                    }`}
                    type="button"
                    key={workspace.workspace_id}
                    onClick={() => {
                      onSetCurrentWorkspace(workspace.workspace_id);
                      onSetWorkspaceMenuOpen(false);
                    }}
                  >
                    <Icon name="workspace" size={15} />
                    <span className="flex min-w-0 flex-col gap-0.5">
                      <strong className="truncate text-[11px] text-[#243a50]">
                        {workspace.workspace_name}
                      </strong>
                      <small className="text-[9px] text-[#8797a7]">
                        {isSelected ? "当前使用" : "点击切换"}
                      </small>
                    </span>
                  </button>
                );
              })}
            </div>
          )}
        </div>
        <div className="relative flex items-center gap-[9px]">
          <button
            className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-transparent bg-white px-[11px] hover:border-[#b9cce0]"
            type="button"
          >
            <span className="grid size-[34px] place-items-center rounded-full bg-gradient-to-br from-[#3b92ed] to-[#1869c9] text-sm font-bold text-white">
              {user?.display_name?.slice(0, 1) ?? "?"}
            </span>
            <span className="flex min-w-[50px] flex-col items-start">
              <strong className="max-w-[190px] truncate text-[13px] text-[#26384d]">
                {user?.display_name ?? "未知用户"}
              </strong>
              <small className="text-[10px] text-[#97a3b1]">
                {user?.role_code === "admin" ? "管理员" : "开发人员"}
              </small>
            </span>
          </button>
          <button
            className="inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent px-px py-[5px] text-xs font-semibold text-[#1474d4] hover:text-[#0d58a2]"
            type="button"
            onClick={() => {
              void onLogout();
            }}
          >
            登出
          </button>
        </div>
      </div>
    </header>
  );
}