Alfred/src/web/features/models/components/ModelsToolbar.tsx

import { PlusOutlined } from "@ant-design/icons";
import { Button, Flex, Input, Space, Tabs } from "antd";
import { useState } from "react";

interface ModelsToolbarProps {
  activeTab: string;
  keyword: string;
  onSearch: (value: string) => void;
  onSearchClear: () => void;
  onTabChange: (key: string) => void;
  openCreateDialog: () => void;
}

const TAB_ITEMS = [
  { key: "models", label: "模型" },
  { key: "providers", label: "供应商" },
];

export function ModelsToolbar({
  activeTab,
  keyword,
  onSearch,
  onSearchClear,
  onTabChange,
  openCreateDialog,
}: ModelsToolbarProps) {
  const [draftKeyword, setDraftKeyword] = useState(keyword);
  const placeholder = activeTab === "providers" ? "搜索供应商名称" : "搜索模型名称或 ID";
  const createLabel = activeTab === "providers" ? "新建供应商" : "新建模型";

  return (
    <Flex align="center" gap="large" justify="space-between" wrap="wrap">
      <Tabs activeKey={activeTab} items={TAB_ITEMS} onChange={onTabChange} />
      <Space size="small">
        <Input.Search
          allowClear
          enterButton="搜索"
          onChange={(event) => setDraftKeyword(event.target.value)}
          onClear={() => {
            setDraftKeyword("");
            onSearchClear();
          }}
          onSearch={(value) => onSearch(value)}
          placeholder={placeholder}
          value={draftKeyword}
        />
        <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
          {createLabel}
        </Button>
      </Space>
    </Flex>
  );
}