AIPortPilot/frontend/src/components/shared/WorkspaceTabs.tsx

/** Multi-Workspace Tab 管理器 — 多 Tab + 独立上下文 + 最多 8 个。 */

"use client";

import { X, Plus } from "lucide-react";

/** 工作区 Tab 定义。 */
export interface WorkspaceTab {
  id: string;
  title: string;
  href: string;
}

/** Workspace Tabs Props。 */
interface WorkspaceTabsProps {
  tabs: WorkspaceTab[];
  activeId: string;
  onSwitch: (id: string) => void;
  onClose: (id: string) => void;
  onAdd: () => void;
}

/** 最大 Tab 数量。 */
const MAX_TABS = 8;

/**
 * Multi-Workspace Tab 管理器组件。
 *
 * 支持多 Tab 独立上下文，最多 8 个 Tab，超出时淘汰最久未访问的 Tab。
 */
export function WorkspaceTabs({ tabs, activeId, onSwitch, onClose, onAdd }: WorkspaceTabsProps) {
  return (
    <div
      className="flex items-center gap-1 border-b bg-white px-2"
      role="tablist"
      aria-label="工作区标签"
    >
      {tabs.map((tab) => (
        <div
          key={tab.id}
          className={`group flex items-center gap-1.5 rounded-t-md border-b-2 px-3 py-2 text-sm transition-colors ${
            tab.id === activeId
              ? "border-indigo-500 text-indigo-600"
              : "border-transparent text-gray-600 hover:text-gray-900"
          }`}
          role="tab"
          aria-selected={tab.id === activeId}
        >
          <button
            type="button"
            onClick={() => onSwitch(tab.id)}
            className="truncate"
          >
            {tab.title}
          </button>
          {tabs.length > 1 && (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                onClose(tab.id);
              }}
              className="text-gray-300 transition-colors hover:text-red-500"
              aria-label={`关闭 ${tab.title}`}
            >
              <X size={14} aria-hidden="true" />
            </button>
          )}
        </div>
      ))}
      {tabs.length < MAX_TABS && (
        <button
          type="button"
          onClick={onAdd}
          className="flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600"
          aria-label="新建工作区"
        >
          <Plus size={14} aria-hidden="true" />
          新建
        </button>
      )}
    </div>
  );
}