refactor: 统一管理页面布局 — FilterToolbar + usePageSearchParams + parseListParams
This commit is contained in:
@@ -1,20 +1,27 @@
|
||||
import type { TableColumnsType } from "antd";
|
||||
import type { TableColumnsType, TableProps } from "antd";
|
||||
|
||||
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
|
||||
import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { Button, Popconfirm, Space, Table, Tag } from "antd";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import type { Model, ModelListResponse, ProviderOption } from "../../../../shared/api";
|
||||
|
||||
import { formatDatetime } from "../../../shared/utils/format";
|
||||
|
||||
interface ModelTableProps {
|
||||
data: ModelListResponse | undefined;
|
||||
loading: boolean;
|
||||
onDelete: (id: string) => Promise<unknown>;
|
||||
onChange: (
|
||||
pagination: { current?: number; pageSize?: number },
|
||||
sorter: { columnKey?: string; field?: string | string[]; order?: string },
|
||||
) => void;
|
||||
onDelete: (id: string) => Promise<void>;
|
||||
onEdit: (model: Model) => void;
|
||||
onPageChange: (page: number, pageSize: number) => void;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
providers: ProviderOption[];
|
||||
sortBy?: string;
|
||||
sortOrder?: string;
|
||||
}
|
||||
|
||||
const CAPABILITY_LABELS: Record<string, string> = {
|
||||
@@ -28,110 +35,111 @@ const CAPABILITY_LABELS: Record<string, string> = {
|
||||
"video-recognition": "视频识别",
|
||||
};
|
||||
|
||||
function getProviderName(providerId: string, providers: ProviderOption[]): string {
|
||||
return providers.find((p) => p.id === providerId)?.name ?? providerId;
|
||||
}
|
||||
|
||||
const COLUMNS: TableColumnsType<Model> = [
|
||||
{ dataIndex: "name", ellipsis: true, title: "名称", width: 180 },
|
||||
{
|
||||
dataIndex: "providerId",
|
||||
ellipsis: true,
|
||||
title: "供应商",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
dataIndex: "capabilities",
|
||||
render: (value: string[]) =>
|
||||
value.length > 0 ? (
|
||||
<Space size={[4, 4]} wrap>
|
||||
{value.map((c) => (
|
||||
<Tag key={c}>{CAPABILITY_LABELS[c] ?? c}</Tag>
|
||||
))}
|
||||
</Space>
|
||||
) : null,
|
||||
title: "能力",
|
||||
},
|
||||
];
|
||||
|
||||
export function ModelTable({
|
||||
data,
|
||||
loading,
|
||||
onChange,
|
||||
onDelete,
|
||||
onEdit,
|
||||
onPageChange,
|
||||
page,
|
||||
pageSize,
|
||||
providers,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
}: ModelTableProps) {
|
||||
const { message } = AntApp.useApp();
|
||||
|
||||
const handleDelete = useCallback(
|
||||
async (id: string) => {
|
||||
try {
|
||||
await onDelete(id);
|
||||
message.success("模型已删除");
|
||||
} catch (err: unknown) {
|
||||
message.error((err as Error).message);
|
||||
}
|
||||
},
|
||||
[onDelete, message],
|
||||
);
|
||||
|
||||
const columnsWithProvider = useMemo<TableColumnsType<Model>>(
|
||||
() =>
|
||||
COLUMNS.map((col) =>
|
||||
"dataIndex" in col && col.dataIndex === "providerId"
|
||||
? {
|
||||
...col,
|
||||
render: (_value: unknown, record: Model) => getProviderName(record.providerId, providers),
|
||||
}
|
||||
: col,
|
||||
),
|
||||
[providers],
|
||||
);
|
||||
|
||||
const operationColumn = useMemo<TableColumnsType<Model>[number]>(
|
||||
() => ({
|
||||
dataIndex: "op",
|
||||
render: (_value: unknown, record: Model) => (
|
||||
<Space size="small">
|
||||
<Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
description="此操作不可恢复。"
|
||||
onConfirm={() => void handleDelete(record.id)}
|
||||
title="确认删除此模型？"
|
||||
>
|
||||
<Button danger icon={<DeleteOutlined />} size="small" type="link">
|
||||
删除
|
||||
const columns = useMemo<TableColumnsType<Model>>(
|
||||
() => [
|
||||
{
|
||||
dataIndex: "name",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
sortOrder:
|
||||
sortBy === "name" ? (sortOrder === "asc" ? "ascend" : sortOrder === "desc" ? "descend" : null) : null,
|
||||
title: "名称",
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
dataIndex: "providerId",
|
||||
ellipsis: true,
|
||||
render: (_value: unknown, record: Model) => getProviderName(record.providerId, providers),
|
||||
title: "供应商",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
dataIndex: "capabilities",
|
||||
render: (value: string[]) =>
|
||||
value.length > 0 ? (
|
||||
<Space size={[4, 4]} wrap>
|
||||
{value.map((c) => (
|
||||
<Tag key={c}>{CAPABILITY_LABELS[c] ?? c}</Tag>
|
||||
))}
|
||||
</Space>
|
||||
) : null,
|
||||
title: "能力",
|
||||
},
|
||||
{
|
||||
align: "center",
|
||||
dataIndex: "createdAt",
|
||||
render: (_value: unknown, record: Model) => 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: Model) => (
|
||||
<Space size="small">
|
||||
<Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
|
||||
编辑
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
}),
|
||||
[onEdit, handleDelete],
|
||||
<Popconfirm
|
||||
description="此操作不可恢复。"
|
||||
onConfirm={() => void onDelete(record.id)}
|
||||
title="确认删除此模型？"
|
||||
>
|
||||
<Button danger icon={<DeleteOutlined />} size="small" type="link">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
},
|
||||
],
|
||||
[onEdit, onDelete, providers, sortBy, sortOrder],
|
||||
);
|
||||
|
||||
const columns = useMemo(() => [...columnsWithProvider, operationColumn], [columnsWithProvider, operationColumn]);
|
||||
const handleTableChange: TableProps<Model>["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,
|
||||
onChange: onPageChange,
|
||||
pageSize,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
total: data?.total ?? 0,
|
||||
}}
|
||||
rowKey="id"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function getProviderName(providerId: string, providers: ProviderOption[]): string {
|
||||
return providers.find((p) => p.id === providerId)?.name ?? providerId;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user