124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import type { TableColumnsType, TableProps } from "antd";
|
|
|
|
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
|
|
import { Button, Popconfirm, Space, Table } from "antd";
|
|
import { useMemo } from "react";
|
|
|
|
import type { Provider, ProviderListResponse } from "../../../../shared/api";
|
|
|
|
import { formatDatetime } from "../../../shared/utils/format";
|
|
|
|
interface ProviderTableProps {
|
|
data: ProviderListResponse | undefined;
|
|
loading: boolean;
|
|
onChange: (
|
|
pagination: { current?: number; pageSize?: number },
|
|
sorter: { columnKey?: string; field?: string | string[]; order?: string },
|
|
) => void;
|
|
onDelete: (id: string) => Promise<void>;
|
|
onEdit: (provider: Provider) => void;
|
|
page: number;
|
|
pageSize: number;
|
|
sortBy?: string;
|
|
sortOrder?: string;
|
|
}
|
|
|
|
export function ProviderTable({
|
|
data,
|
|
loading,
|
|
onChange,
|
|
onDelete,
|
|
onEdit,
|
|
page,
|
|
pageSize,
|
|
sortBy,
|
|
sortOrder,
|
|
}: ProviderTableProps) {
|
|
const columns = useMemo<TableColumnsType<Provider>>(
|
|
() => [
|
|
{
|
|
dataIndex: "name",
|
|
ellipsis: true,
|
|
sorter: true,
|
|
sortOrder:
|
|
sortBy === "name" ? (sortOrder === "asc" ? "ascend" : sortOrder === "desc" ? "descend" : null) : null,
|
|
title: "名称",
|
|
width: 180,
|
|
},
|
|
{
|
|
dataIndex: "type",
|
|
render: (_value: unknown, record: Provider) => {
|
|
const labels: Record<string, string> = {
|
|
anthropic: "Anthropic",
|
|
openai: "OpenAI",
|
|
"openai-compatible": "OpenAI 兼容",
|
|
};
|
|
return labels[record.type] ?? record.type;
|
|
},
|
|
title: "类型",
|
|
width: 140,
|
|
},
|
|
{ dataIndex: "baseUrl", ellipsis: true, title: "Base URL" },
|
|
{
|
|
align: "center",
|
|
dataIndex: "createdAt",
|
|
render: (_value: unknown, record: Provider) => formatDatetime(record.createdAt),
|
|
sorter: true,
|
|
sortOrder:
|
|
sortBy === "createdAt" ? (sortOrder === "asc" ? "ascend" : sortOrder === "desc" ? "descend" : null) : null,
|
|
title: "创建时间",
|
|
width: 180,
|
|
},
|
|
{
|
|
dataIndex: "op",
|
|
render: (_value: unknown, record: Provider) => (
|
|
<Space size="small">
|
|
<Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
|
|
编辑
|
|
</Button>
|
|
<Popconfirm
|
|
description="删除后关联的模型将无法使用。"
|
|
onConfirm={() => void onDelete(record.id)}
|
|
title="确认删除此供应商？"
|
|
>
|
|
<Button danger icon={<DeleteOutlined />} size="small" type="link">
|
|
删除
|
|
</Button>
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
title: "操作",
|
|
width: 180,
|
|
},
|
|
],
|
|
[onEdit, onDelete, sortBy, sortOrder],
|
|
);
|
|
|
|
const handleTableChange: TableProps<Provider>["onChange"] = (pagination, _filters, sorter) => {
|
|
const sortInfo =
|
|
sorter && typeof sorter === "object" && "columnKey" in sorter
|
|
? (sorter as { columnKey?: string; field?: string | string[]; order?: string })
|
|
: {};
|
|
onChange({ current: pagination.current, pageSize: pagination.pageSize }, sortInfo);
|
|
};
|
|
|
|
return (
|
|
<Table
|
|
columns={columns}
|
|
dataSource={data?.items ?? []}
|
|
loading={loading}
|
|
locale={{ emptyText: "暂无供应商数据" }}
|
|
onChange={handleTableChange}
|
|
pagination={{
|
|
current: page,
|
|
hideOnSinglePage: false,
|
|
pageSize,
|
|
showSizeChanger: true,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
total: data?.total ?? 0,
|
|
}}
|
|
rowKey="id"
|
|
/>
|
|
);
|
|
}
|