refactor: 统一管理页面布局 — FilterToolbar + usePageSearchParams + parseListParams

src/web/features/models/components/ProviderTable.tsx

@@ -1,91 +1,120 @@
-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 } from "antd";
-import { useCallback, useMemo } from "react";
+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;
-  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: (provider: Provider) => void;
-  onPageChange: (page: number, pageSize: number) => void;
   page: number;
   pageSize: number;
+  sortBy?: string;
+  sortOrder?: string;
 }
 
-const TYPE_LABELS: Record<Provider["type"], string> = {
-  anthropic: "Anthropic",
-  openai: "OpenAI",
-  "openai-compatible": "OpenAI 兼容",
-};
-
-const COLUMNS: TableColumnsType<Provider> = [
-  { dataIndex: "name", ellipsis: true, title: "名称", width: 180 },
-  {
-    dataIndex: "type",
-    render: (value: Provider["type"]) => TYPE_LABELS[value] ?? value,
-    title: "类型",
-    width: 140,
-  },
-  { dataIndex: "baseUrl", ellipsis: true, title: "Base URL" },
-];
-
-export function ProviderTable({ data, loading, onDelete, onEdit, onPageChange, page, pageSize }: ProviderTableProps) {
-  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 operationColumn = useMemo<TableColumnsType<Provider>[number]>(
-    () => ({
-      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 handleDelete(record.id)}
-            title="确认删除此供应商？"
-          >
-            <Button danger icon={<DeleteOutlined />} size="small" type="link">
-              删除
+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>
-        </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, sortBy, sortOrder],
   );
 
-  const columns = useMemo(() => [...COLUMNS, operationColumn], [operationColumn]);
+  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,
-        onChange: onPageChange,
         pageSize,
         showSizeChanger: true,
+        showTotal: (total) => `共 ${total} 条`,
         total: data?.total ?? 0,
       }}
       rowKey="id"