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

2026-06-04 17:25:36 +08:00
parent 61b479e2be
commit 6f547560d1
40 changed files with 1805 additions and 628 deletions
--- a/src/web/features/models/ModelListPage.tsx
+++ b/src/web/features/models/ModelListPage.tsx
@@ -1,8 +1,10 @@
-import { Space } from "antd";
-import { useState } from "react";
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Space } from "antd";
+import { useCallback, useMemo, useState } from "react";

 import type { Model, TestModelRequest } from "../../../shared/api";

+import { FilterToolbar } from "../../shared/components/FilterToolbar";
 import {
  useCreateModel,
  useDeleteModel,
@@ -11,21 +13,46 @@ import {
  useUpdateModel,
 } from "../../shared/hooks/use-models";
 import { useProviderOptions } from "../../shared/hooks/use-providers";
+import { useConfirmAction } from "../../shared/hooks/useConfirmAction";
+import { usePageSearchParams } from "../../shared/hooks/usePageSearchParams";
 import { ModelFormModal } from "./components/ModelFormModal";
 import { ModelTable } from "./components/ModelTable";
-import { ModelToolbar } from "./components/ModelToolbar";
+
+const CAPABILITY_OPTIONS = [
+  { label: "文本", value: "text" },
+  { label: "推理", value: "reasoning" },
+  { label: "图片识别", value: "image-recognition" },
+  { label: "图片生成", value: "image-generation" },
+  { label: "音频识别", value: "audio-recognition" },
+  { label: "音频生成", value: "audio-generation" },
+  { label: "视频识别", value: "video-recognition" },
+  { label: "视频生成", value: "video-generation" },
+];

 export function ModelListPage() {
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
-  const [keyword, setKeyword] = useState("");
+  const { confirmAction } = useConfirmAction();
+  const { params, resetAll, setParams } = usePageSearchParams({
+    defaults: { page: "1", pageSize: "20" },
+  });
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingModel, setEditingModel] = useState<Model | null>(null);

-  const { data: modelData, isLoading: modelLoading } = useModelList({
-    keyword: keyword || undefined,
-    page,
-    pageSize,
+  const apiPage = Number(params["page"]) || 1;
+  const apiPageSize = Number(params["pageSize"]) || 20;
+  const keyword = params["keyword"] ?? "";
+  const providerIdFilter = params["providerId"];
+  const capabilitiesFilter = params["capabilities"];
+  const sortBy = params["sortBy"];
+  const sortOrder = params["sortOrder"];
+
+  const { data: modelData, isFetching: modelLoading } = useModelList({
+    capabilities: capabilitiesFilter ?? undefined,
+    keyword: keyword ?? undefined,
+    page: apiPage,
+    pageSize: apiPageSize,
+    providerId: providerIdFilter ?? undefined,
+    sortBy: sortBy ?? undefined,
+    sortOrder: sortOrder,
  });

  const {
@@ -41,42 +68,107 @@ export function ModelListPage() {
  const testModelMutation = useTestModelConnection();

  const isSubmitting = createModelMutation.isPending || updateModelMutation.isPending;
-  const isActionPending = deleteModelMutation.isPending;
-  const modelProviders = providerOptionsData?.items ?? [];
+  const modelProviders = useMemo(() => providerOptionsData?.items ?? [], [providerOptionsData?.items]);
+
+  const providerOptions = useMemo(() => modelProviders.map((p) => ({ label: p.name, value: p.id })), [modelProviders]);
+
+  const handleSearch = useCallback(
+    (value: string) => {
+      setParams({ keyword: value || undefined, page: "1" });
+    },
+    [setParams],
+  );
+
+  const handleReset = useCallback(() => {
+    resetAll();
+  }, [resetAll]);
+
+  const handleTableChange = useCallback(
+    (
+      pagination: { current?: number; pageSize?: number },
+      sorter: { columnKey?: string; field?: string | string[]; order?: string },
+    ) => {
+      const patch: Record<string, string | undefined> = {
+        page: String(pagination.current ?? apiPage),
+        pageSize: String(pagination.pageSize ?? apiPageSize),
+      };
+      const sortField = sorter.columnKey! ?? (typeof sorter.field === "string" ? sorter.field : undefined);
+      if (sorter.order && sortField) {
+        patch["sortBy"] = sortField;
+        patch["sortOrder"] = sorter.order === "ascend" ? "asc" : "desc";
+      } else {
+        patch["sortBy"] = undefined;
+        patch["sortOrder"] = undefined;
+      }
+      setParams(patch);
+    },
+    [setParams, apiPage, apiPageSize],
+  );
+
+  const filters = useMemo(
+    () => [
+      {
+        key: "providerId",
+        label: "供应商",
+        onChange: (value: string | undefined) => {
+          setParams({ page: "1", providerId: value });
+        },
+        options: providerOptions,
+        placeholder: "供应商",
+        value: providerIdFilter,
+      },
+      {
+        key: "capabilities",
+        label: "能力",
+        onChange: (value: string | undefined) => {
+          setParams({ capabilities: value, page: "1" });
+        },
+        options: CAPABILITY_OPTIONS,
+        placeholder: "能力",
+        value: capabilitiesFilter,
+      },
+    ],
+    [setParams, providerOptions, providerIdFilter, capabilitiesFilter],
+  );
+
+  const handleDelete = useCallback(
+    (id: string) => confirmAction(() => deleteModelMutation.mutateAsync(id), "模型已删除"),
+    [confirmAction, deleteModelMutation],
+  );

  return (
    <Space className="app-page-flex" orientation="vertical" size="large">
-      <ModelToolbar
-        keyword={keyword}
-        onSearch={(value) => {
-          setKeyword(value);
-          setPage(1);
-        }}
-        onSearchClear={() => {
-          setKeyword("");
-          setPage(1);
-        }}
-        openCreateDialog={() => {
-          setEditingModel(null);
-          setDialogOpen(true);
-        }}
+      <FilterToolbar
+        actions={
+          <Button
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setEditingModel(null);
+              setDialogOpen(true);
+            }}
+            type="primary"
+          >
+            新建模型
+          </Button>
+        }
+        filters={filters}
+        search={{ keyword, onReset: handleReset, onSearch: handleSearch, placeholder: "搜索模型名称或 ID" }}
      />

      <ModelTable
        data={modelData}
-        loading={modelLoading || providerOptionsLoading || isActionPending}
-        onDelete={(id) => deleteModelMutation.mutateAsync(id)}
+        loading={modelLoading || providerOptionsLoading}
+        onChange={handleTableChange}
+        onDelete={handleDelete}
        onEdit={(model) => {
          setEditingModel(model);
          setDialogOpen(true);
        }}
-        onPageChange={(p, ps) => {
-          setPage(p);
-          setPageSize(ps);
-        }}
-        page={page}
-        pageSize={pageSize}
+        page={apiPage}
+        pageSize={apiPageSize}
        providers={modelProviders}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
      />

      <ModelFormModal
--- a/src/web/features/models/ProviderListPage.tsx
+++ b/src/web/features/models/ProviderListPage.tsx
@@ -1,8 +1,10 @@
-import { Space } from "antd";
-import { useState } from "react";
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Space } from "antd";
+import { useCallback, useMemo, useState } from "react";

 import type { Provider } from "../../../shared/api";

+import { FilterToolbar } from "../../shared/components/FilterToolbar";
 import {
  useCreateProvider,
  useDeleteProvider,
@@ -10,21 +12,39 @@ import {
  useTestProviderConfig,
  useUpdateProvider,
 } from "../../shared/hooks/use-providers";
+import { useConfirmAction } from "../../shared/hooks/useConfirmAction";
+import { usePageSearchParams } from "../../shared/hooks/usePageSearchParams";
 import { ProviderFormModal } from "./components/ProviderFormModal";
 import { ProviderTable } from "./components/ProviderTable";
-import { ProviderToolbar } from "./components/ProviderToolbar";
+
+const TYPE_OPTIONS = [
+  { label: "OpenAI", value: "openai" },
+  { label: "OpenAI 兼容", value: "openai-compatible" },
+  { label: "Anthropic", value: "anthropic" },
+];

 export function ProviderListPage() {
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
-  const [keyword, setKeyword] = useState("");
+  const { confirmAction } = useConfirmAction();
+  const { params, resetAll, setParams } = usePageSearchParams({
+    defaults: { page: "1", pageSize: "20" },
+  });
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingProvider, setEditingProvider] = useState<null | Provider>(null);

-  const { data: providerData, isLoading: providerLoading } = useProviderList({
+  const apiPage = Number(params["page"]) || 1;
+  const apiPageSize = Number(params["pageSize"]) || 20;
+  const keyword = params["keyword"] ?? "";
+  const typeFilter = params["type"];
+  const sortBy = params["sortBy"];
+  const sortOrder = params["sortOrder"];
+
+  const { data: providerData, isFetching: providerLoading } = useProviderList({
    keyword: keyword || undefined,
-    page,
-    pageSize,
+    page: apiPage,
+    pageSize: apiPageSize,
+    sortBy: sortBy ?? undefined,
+    sortOrder: sortOrder,
+    type: typeFilter ?? undefined,
  });

  const createProviderMutation = useCreateProvider();
@@ -33,40 +53,93 @@ export function ProviderListPage() {
  const testProviderConfigMutation = useTestProviderConfig();

  const isSubmitting = createProviderMutation.isPending || updateProviderMutation.isPending;
-  const isActionPending = deleteProviderMutation.isPending;
+
+  const handleSearch = useCallback(
+    (value: string) => {
+      setParams({ keyword: value || undefined, page: "1" });
+    },
+    [setParams],
+  );
+
+  const handleReset = useCallback(() => {
+    resetAll();
+  }, [resetAll]);
+
+  const handleTableChange = useCallback(
+    (
+      pagination: { current?: number; pageSize?: number },
+      sorter: { columnKey?: string; field?: string | string[]; order?: string },
+    ) => {
+      const patch: Record<string, string | undefined> = {
+        page: String(pagination.current ?? apiPage),
+        pageSize: String(pagination.pageSize ?? apiPageSize),
+      };
+      const sortField = sorter.columnKey! ?? (typeof sorter.field === "string" ? sorter.field : undefined);
+      if (sorter.order && sortField) {
+        patch["sortBy"] = sortField;
+        patch["sortOrder"] = sorter.order === "ascend" ? "asc" : "desc";
+      } else {
+        patch["sortBy"] = undefined;
+        patch["sortOrder"] = undefined;
+      }
+      setParams(patch);
+    },
+    [setParams, apiPage, apiPageSize],
+  );
+
+  const filters = useMemo(
+    () => [
+      {
+        key: "type",
+        label: "类型",
+        onChange: (value: string | undefined) => {
+          setParams({ page: "1", type: value });
+        },
+        options: TYPE_OPTIONS,
+        placeholder: "类型",
+        value: typeFilter,
+      },
+    ],
+    [setParams, typeFilter],
+  );
+
+  const handleDelete = useCallback(
+    (id: string) => confirmAction(() => deleteProviderMutation.mutateAsync(id), "供应商已删除"),
+    [confirmAction, deleteProviderMutation],
+  );

  return (
    <Space className="app-page-flex" orientation="vertical" size="large">
-      <ProviderToolbar
-        keyword={keyword}
-        onSearch={(value) => {
-          setKeyword(value);
-          setPage(1);
-        }}
-        onSearchClear={() => {
-          setKeyword("");
-          setPage(1);
-        }}
-        openCreateDialog={() => {
-          setEditingProvider(null);
-          setDialogOpen(true);
-        }}
+      <FilterToolbar
+        actions={
+          <Button
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setEditingProvider(null);
+              setDialogOpen(true);
+            }}
+            type="primary"
+          >
+            新建供应商
+          </Button>
+        }
+        filters={filters}
+        search={{ keyword, onReset: handleReset, onSearch: handleSearch, placeholder: "搜索供应商名称" }}
      />

      <ProviderTable
        data={providerData}
-        loading={providerLoading || isActionPending}
-        onDelete={(id) => deleteProviderMutation.mutateAsync(id)}
+        loading={providerLoading}
+        onChange={handleTableChange}
+        onDelete={handleDelete}
        onEdit={(provider) => {
          setEditingProvider(provider);
          setDialogOpen(true);
        }}
-        onPageChange={(p, ps) => {
-          setPage(p);
-          setPageSize(ps);
-        }}
-        page={page}
-        pageSize={pageSize}
+        page={apiPage}
+        pageSize={apiPageSize}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
      />

      <ProviderFormModal
--- a/src/web/features/models/components/ModelTable.tsx
+++ b/src/web/features/models/components/ModelTable.tsx
@@ -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;
+}
--- a/src/web/features/models/components/ModelToolbar.tsx
+++ b/src/web/features/models/components/ModelToolbar.tsx
@@ -1,37 +0,0 @@
-import { PlusOutlined } from "@ant-design/icons";
-import { Button, Flex, Input, Space } from "antd";
-import { useState } from "react";
-
-interface ModelToolbarProps {
-  keyword: string;
-  onSearch: (value: string) => void;
-  onSearchClear: () => void;
-  openCreateDialog: () => void;
-}
-
-export function ModelToolbar({ keyword, onSearch, onSearchClear, openCreateDialog }: ModelToolbarProps) {
-  const [draftKeyword, setDraftKeyword] = useState(keyword);
-
-  return (
-    <Flex align="center" gap="large" justify="space-between" wrap="wrap">
-      <div />
-      <Space size="small">
-        <Input.Search
-          allowClear
-          enterButton="搜索"
-          onChange={(event) => setDraftKeyword(event.target.value)}
-          onClear={() => {
-            setDraftKeyword("");
-            onSearchClear();
-          }}
-          onSearch={(value) => onSearch(value)}
-          placeholder="搜索模型名称或 ID"
-          value={draftKeyword}
-        />
-        <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
-          新建模型
-        </Button>
-      </Space>
-    </Flex>
-  );
-}
--- a/src/web/features/models/components/ProviderTable.tsx
+++ b/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"
--- a/src/web/features/models/components/ProviderToolbar.tsx
+++ b/src/web/features/models/components/ProviderToolbar.tsx
@@ -1,37 +0,0 @@
-import { PlusOutlined } from "@ant-design/icons";
-import { Button, Flex, Input, Space } from "antd";
-import { useState } from "react";
-
-interface ProviderToolbarProps {
-  keyword: string;
-  onSearch: (value: string) => void;
-  onSearchClear: () => void;
-  openCreateDialog: () => void;
-}
-
-export function ProviderToolbar({ keyword, onSearch, onSearchClear, openCreateDialog }: ProviderToolbarProps) {
-  const [draftKeyword, setDraftKeyword] = useState(keyword);
-
-  return (
-    <Flex align="center" gap="large" justify="space-between" wrap="wrap">
-      <div />
-      <Space size="small">
-        <Input.Search
-          allowClear
-          enterButton="搜索"
-          onChange={(event) => setDraftKeyword(event.target.value)}
-          onClear={() => {
-            setDraftKeyword("");
-            onSearchClear();
-          }}
-          onSearch={(value) => onSearch(value)}
-          placeholder="搜索供应商名称"
-          value={draftKeyword}
-        />
-        <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
-          新建供应商
-        </Button>
-      </Space>
-    </Flex>
-  );
-}
--- a/src/web/features/projects/components/ProjectTable.tsx
+++ b/src/web/features/projects/components/ProjectTable.tsx
@@ -1,184 +1,169 @@
-import type { TableColumnsType } from "antd";
+import type { TableColumnsType, TableProps } from "antd";

 import { DeleteOutlined, EditOutlined, InboxOutlined, LoginOutlined, RedoOutlined } 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 { useNavigate } from "react-router";

-import type { Project, ProjectListResponse, ProjectStatus } from "../../../../shared/api";
+import type { Project, ProjectListResponse } from "../../../../shared/api";
+
+import { formatDatetime } from "../../../shared/utils/format";

 interface ProjectTableProps {
  data: ProjectListResponse | undefined;
  loading: boolean;
-  onArchive: (id: string) => Promise<unknown>;
-  onDelete: (id: string) => Promise<unknown>;
+  onArchive: (id: string) => Promise<void>;
+  onChange: (
+    pagination: { current?: number; pageSize?: number },
+    sorter: { columnKey?: string; field?: string | string[]; order?: string },
+  ) => void;
+  onDelete: (id: string) => Promise<void>;
  onEdit: (project: Project) => void;
-  onPageChange: (page: number, pageSize: number) => void;
-  onRestore: (id: string) => Promise<unknown>;
+  onRestore: (id: string) => Promise<void>;
  page: number;
  pageSize: number;
-  status: ProjectStatus;
+  sortBy?: string;
+  sortOrder?: string;
 }

-const COLUMNS: TableColumnsType<Project> = [
-  { dataIndex: "name", ellipsis: true, title: "名称", width: 140 },
-  { dataIndex: "description", ellipsis: true, title: "描述" },
-  {
-    align: "center",
-    dataIndex: "status",
-    render: (_value, record: Project) => {
-      if (record.status === "archived") {
-        return <Tag>已归档</Tag>;
-      }
-      return <Tag color="blue">进行中</Tag>;
-    },
-    title: "状态",
-    width: 90,
-  },
-  {
-    align: "center",
-    dataIndex: "createdAt",
-    render: (_value, record: Project) => formatDatetime(record.createdAt),
-    title: "创建时间",
-    width: 180,
-  },
-  {
-    align: "center",
-    dataIndex: "updatedAt",
-    render: (_value, record: Project) => formatDatetime(record.updatedAt),
-    title: "更新时间",
-    width: 180,
-  },
-];
-
 export function ProjectTable({
  data,
  loading,
  onArchive,
+  onChange,
  onDelete,
  onEdit,
-  onPageChange,
  onRestore,
  page,
  pageSize,
-  status,
+  sortBy,
+  sortOrder,
 }: ProjectTableProps) {
-  const { message } = AntApp.useApp();
  const navigate = useNavigate();

-  const handleArchive = useCallback(
-    async (id: string) => {
-      try {
-        await onArchive(id);
-        message.success("项目已归档");
-      } catch (err: unknown) {
-        message.error((err as Error).message);
-      }
-    },
-    [onArchive, message],
-  );
-
-  const handleRestore = useCallback(
-    async (id: string) => {
-      try {
-        await onRestore(id);
-        message.success("项目已恢复");
-      } catch (err: unknown) {
-        message.error((err as Error).message);
-      }
-    },
-    [onRestore, message],
-  );
-
-  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<Project>[number]>(
-    () => ({
-      dataIndex: "op",
-      render: (_value, record: Project) => {
-        if (record.status === "active") {
+  const columns = useMemo<TableColumnsType<Project>>(
+    () => [
+      {
+        dataIndex: "name",
+        ellipsis: true,
+        sorter: true,
+        sortOrder:
+          sortBy === "name" ? (sortOrder === "asc" ? "ascend" : sortOrder === "desc" ? "descend" : null) : null,
+        title: "名称",
+        width: 140,
+      },
+      { dataIndex: "description", ellipsis: true, title: "描述" },
+      {
+        align: "center",
+        dataIndex: "status",
+        render: (_value: unknown, record: Project) => {
+          if (record.status === "archived") {
+            return <Tag>已归档</Tag>;
+          }
+          return <Tag color="blue">进行中</Tag>;
+        },
+        title: "状态",
+        width: 90,
+      },
+      {
+        align: "center",
+        dataIndex: "createdAt",
+        render: (_value: unknown, record: Project) => formatDatetime(record.createdAt),
+        sorter: true,
+        sortOrder:
+          sortBy === "createdAt" ? (sortOrder === "asc" ? "ascend" : sortOrder === "desc" ? "descend" : null) : null,
+        title: "创建时间",
+        width: 180,
+      },
+      {
+        align: "center",
+        dataIndex: "updatedAt",
+        render: (_value: unknown, record: Project) => formatDatetime(record.updatedAt),
+        sorter: true,
+        sortOrder:
+          sortBy === "updatedAt" ? (sortOrder === "asc" ? "ascend" : sortOrder === "desc" ? "descend" : null) : null,
+        title: "更新时间",
+        width: 180,
+      },
+      {
+        dataIndex: "op",
+        render: (_value: unknown, record: Project) => {
+          if (record.status === "active") {
+            return (
+              <Space size="small">
+                <Button
+                  icon={<LoginOutlined />}
+                  onClick={() => void navigate(`/workbench/${record.id}`)}
+                  size="small"
+                  type="link"
+                >
+                  工作台
+                </Button>
+                <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
+                  编辑
+                </Button>
+                <Popconfirm
+                  description="归档后项目将变为只读。"
+                  onConfirm={() => void onArchive(record.id)}
+                  title="确认归档此项目？"
+                >
+                  <Button color="orange" icon={<InboxOutlined />} size="small" variant="link">
+                    归档
+                  </Button>
+                </Popconfirm>
+              </Space>
+            );
+          }
          return (
            <Space size="small">
-              <Button
-                icon={<LoginOutlined />}
-                onClick={() => void navigate(`/workbench/${record.id}`)}
-                size="small"
-                type="link"
-              >
-                工作台
-              </Button>
-              <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
-                编辑
-              </Button>
+              <Popconfirm onConfirm={() => void onRestore(record.id)} title="确认恢复此项目？">
+                <Button icon={<RedoOutlined />} size="small" type="link">
+                  恢复
+                </Button>
+              </Popconfirm>
              <Popconfirm
-                description="归档后项目将变为只读。"
-                onConfirm={() => void handleArchive(record.id)}
-                title="确认归档此项目？"
+                description="此操作不可恢复。"
+                onConfirm={() => void onDelete(record.id)}
+                title="确认永久删除此项目？"
              >
-                <Button color="orange" icon={<InboxOutlined />} size="small" variant="link">
-                  归档
+                <Button danger icon={<DeleteOutlined />} size="small" type="link">
+                  删除
                </Button>
              </Popconfirm>
            </Space>
          );
-        }
-        return (
-          <Space size="small">
-            <Popconfirm onConfirm={() => void handleRestore(record.id)} title="确认恢复此项目？">
-              <Button icon={<RedoOutlined />} size="small" type="link">
-                恢复
-              </Button>
-            </Popconfirm>
-            <Popconfirm
-              description="此操作不可恢复。"
-              onConfirm={() => void handleDelete(record.id)}
-              title="确认永久删除此项目？"
-            >
-              <Button danger icon={<DeleteOutlined />} size="small" type="link">
-                删除
-              </Button>
-            </Popconfirm>
-          </Space>
-        );
+        },
+        title: "操作",
+        width: 260,
      },
-      title: "操作",
-      width: status === "active" ? 260 : 160,
-    }),
-    [navigate, onEdit, handleArchive, handleRestore, handleDelete, status],
+    ],
+    [navigate, onEdit, onArchive, onRestore, onDelete, sortBy, sortOrder],
  );

-  const columns = useMemo(() => [...COLUMNS, operationColumn], [operationColumn]);
+  const handleTableChange: TableProps<Project>["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 formatDatetime(dateStr: string): string {
-  const d = new Date(dateStr);
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
-}
--- a/src/web/features/projects/components/ProjectToolbar.tsx
+++ b/src/web/features/projects/components/ProjectToolbar.tsx
@@ -1,55 +0,0 @@
-import { PlusOutlined } from "@ant-design/icons";
-import { Button, Flex, Input, Space, Tabs } from "antd";
-import { useState } from "react";
-
-import type { ProjectStatus } from "../../../../shared/api";
-
-interface ProjectToolbarProps {
-  activeTab: ProjectStatus;
-  keyword: string;
-  onSearch: (value: string) => void;
-  onSearchClear: () => void;
-  onTabChange: (key: string) => void;
-  openCreateDialog: () => void;
-}
-
-const STATUS_TAB_ITEMS = [
-  { key: "active", label: "进行中" },
-  { key: "archived", label: "已归档" },
-];
-
-export function ProjectToolbar({
-  activeTab,
-  keyword,
-  onSearch,
-  onSearchClear,
-  onTabChange,
-  openCreateDialog,
-}: ProjectToolbarProps) {
-  const [draftKeyword, setDraftKeyword] = useState(keyword);
-
-  return (
-    <Flex align="center" gap="large" justify="space-between" wrap="wrap">
-      <Tabs activeKey={activeTab} items={STATUS_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="搜索名称或描述"
-          value={draftKeyword}
-        />
-        {activeTab === "active" && (
-          <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
-            新建项目
-          </Button>
-        )}
-      </Space>
-    </Flex>
-  );
-}
--- a/src/web/features/projects/index.tsx
+++ b/src/web/features/projects/index.tsx
@@ -1,8 +1,10 @@
-import { Space } from "antd";
-import { useState } from "react";
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Space } from "antd";
+import { useCallback, useMemo, useState } from "react";

 import type { Project, ProjectStatus } from "../../../shared/api";

+import { FilterToolbar } from "../../shared/components/FilterToolbar";
 import {
  useArchiveProject,
  useCreateProject,
@@ -11,20 +13,40 @@ import {
  useRestoreProject,
  useUpdateProject,
 } from "../../shared/hooks/use-projects";
+import { useConfirmAction } from "../../shared/hooks/useConfirmAction";
+import { usePageSearchParams } from "../../shared/hooks/usePageSearchParams";
 import { ProjectFormModal } from "./components/ProjectFormModal";
 import { ProjectTable } from "./components/ProjectTable";
-import { ProjectToolbar } from "./components/ProjectToolbar";
+
+const STATUS_OPTIONS = [
+  { label: "进行中", value: "active" },
+  { label: "已归档", value: "archived" },
+];

 export function ProjectsPage() {
-  const [tabValue, setTabValue] = useState<ProjectStatus>("active");
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
-  const [keyword, setKeyword] = useState("");
-
+  const { confirmAction } = useConfirmAction();
+  const { params, resetAll, setParams } = usePageSearchParams({
+    defaults: { page: "1", pageSize: "20" },
+  });
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingProject, setEditingProject] = useState<null | Project>(null);

-  const { data, isLoading } = useProjectList({ keyword: keyword || undefined, page, pageSize, status: tabValue });
+  const apiPage = Number(params["page"]) || 1;
+  const apiPageSize = Number(params["pageSize"]) || 20;
+  const keyword = params["keyword"] ?? "";
+  const statusFilter = params["status"] as ProjectStatus | undefined;
+  const sortBy = params["sortBy"];
+  const sortOrder = params["sortOrder"];
+
+  const { data, isFetching } = useProjectList({
+    keyword: keyword || undefined,
+    page: apiPage,
+    pageSize: apiPageSize,
+    sortBy: sortBy ?? undefined,
+    sortOrder: sortOrder,
+    status: statusFilter,
+  });
+
  const createMutation = useCreateProject();
  const updateMutation = useUpdateProject();
  const archiveMutation = useArchiveProject();
@@ -32,54 +54,111 @@ export function ProjectsPage() {
  const deleteMutation = useDeleteProject();

  const isSubmitting = createMutation.isPending || updateMutation.isPending;
-  const isRowActionPending = archiveMutation.isPending || restoreMutation.isPending || deleteMutation.isPending;
+
+  const handleSearch = useCallback(
+    (value: string) => {
+      setParams({ keyword: value || undefined, page: "1" });
+    },
+    [setParams],
+  );
+
+  const handleReset = useCallback(() => {
+    resetAll();
+  }, [resetAll]);
+
+  const handleTableChange = useCallback(
+    (
+      pagination: { current?: number; pageSize?: number },
+      sorter: { columnKey?: string; field?: string | string[]; order?: string },
+    ) => {
+      const patch: Record<string, string | undefined> = {
+        page: String(pagination.current ?? apiPage),
+        pageSize: String(pagination.pageSize ?? apiPageSize),
+      };
+      const sortField = sorter.columnKey! ?? (typeof sorter.field === "string" ? sorter.field : undefined);
+      if (sorter.order && sortField) {
+        patch["sortBy"] = sortField;
+        patch["sortOrder"] = sorter.order === "ascend" ? "asc" : "desc";
+      } else {
+        patch["sortBy"] = undefined;
+        patch["sortOrder"] = undefined;
+      }
+      setParams(patch);
+    },
+    [setParams, apiPage, apiPageSize],
+  );
+
+  const filters = useMemo(
+    () => [
+      {
+        key: "status",
+        label: "状态",
+        onChange: (value: string | undefined) => {
+          setParams({ page: "1", status: value });
+        },
+        options: STATUS_OPTIONS,
+        placeholder: "状态",
+        value: statusFilter,
+      },
+    ],
+    [setParams, statusFilter],
+  );
+
+  const handleArchive = useCallback(
+    (id: string) => confirmAction(() => archiveMutation.mutateAsync(id), "项目已归档"),
+    [confirmAction, archiveMutation],
+  );
+
+  const handleRestore = useCallback(
+    (id: string) => confirmAction(() => restoreMutation.mutateAsync(id), "项目已恢复"),
+    [confirmAction, restoreMutation],
+  );
+
+  const handleDelete = useCallback(
+    (id: string) => confirmAction(() => deleteMutation.mutateAsync(id), "项目已永久删除"),
+    [confirmAction, deleteMutation],
+  );

  return (
    <Space className="app-page-flex" orientation="vertical" size="large">
-      <ProjectToolbar
-        activeTab={tabValue}
-        keyword={keyword}
-        onSearch={(value) => {
-          setKeyword(value);
-          setPage(1);
-        }}
-        onSearchClear={() => {
-          setKeyword("");
-          setPage(1);
-        }}
-        onTabChange={(key) => {
-          setTabValue(key as ProjectStatus);
-          setPage(1);
-        }}
-        openCreateDialog={() => {
-          setEditingProject(null);
-          setDialogOpen(true);
-        }}
+      <FilterToolbar
+        actions={
+          <Button
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setEditingProject(null);
+              setDialogOpen(true);
+            }}
+            type="primary"
+          >
+            新建项目
+          </Button>
+        }
+        filters={filters}
+        search={{ keyword, onReset: handleReset, onSearch: handleSearch, placeholder: "搜索名称或描述" }}
      />

      <ProjectTable
        data={data}
-        loading={isLoading || isRowActionPending}
-        onArchive={(id) => archiveMutation.mutateAsync(id)}
-        onDelete={(id) => deleteMutation.mutateAsync(id)}
+        loading={isFetching}
+        onArchive={handleArchive}
+        onChange={handleTableChange}
+        onDelete={handleDelete}
        onEdit={(project) => {
          setEditingProject(project);
          setDialogOpen(true);
        }}
-        onPageChange={(p, ps) => {
-          setPage(p);
-          setPageSize(ps);
-        }}
-        onRestore={(id) => restoreMutation.mutateAsync(id)}
-        page={page}
-        pageSize={pageSize}
-        status={tabValue}
+        onRestore={handleRestore}
+        page={apiPage}
+        pageSize={apiPageSize}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
      />

      <ProjectFormModal
        editingProject={editingProject}
        onCancel={() => setDialogOpen(false)}
-        onCreate={(data) => createMutation.mutateAsync(data)}
+        onCreate={(formData) => createMutation.mutateAsync(formData)}
        onOpenChange={setDialogOpen}
        onUpdate={(args) => updateMutation.mutateAsync(args)}
        open={dialogOpen}
--- a/src/web/shared/components/FilterToolbar.tsx
+++ b/src/web/shared/components/FilterToolbar.tsx
@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+
+import { SearchOutlined, UndoOutlined } from "@ant-design/icons";
+import { Button, Flex, Input, Select, Space } from "antd";
+import { useEffect, useRef, useState } from "react";
+
+export interface FilterConfig {
+  key: string;
+  label: string;
+  onChange: (value: string | undefined) => void;
+  options: Array<{ label: string; value: string }>;
+  placeholder: string;
+  value?: string;
+}
+
+export interface FilterToolbarProps {
+  actions?: ReactNode;
+  filters?: FilterConfig[];
+  search?: SearchConfig;
+}
+
+export interface SearchConfig {
+  keyword?: string;
+  onReset: () => void;
+  onSearch: (value: string) => void;
+  placeholder: string;
+}
+
+export function FilterToolbar({ actions, filters, search }: FilterToolbarProps) {
+  const [draftKeyword, setDraftKeyword] = useState(search?.keyword ?? "");
+  const prevKeywordRef = useRef(search?.keyword);
+
+  useEffect(() => {
+    if (search?.keyword !== prevKeywordRef.current) {
+      prevKeywordRef.current = search?.keyword;
+      setDraftKeyword(search?.keyword ?? "");
+    }
+  }, [search?.keyword]);
+
+  return (
+    <Flex align="center" gap="large" justify="space-between" wrap="wrap">
+      <Space size="small" wrap>
+        {filters?.map((filter) => (
+          <Select
+            allowClear
+            key={filter.key}
+            onChange={filter.onChange}
+            options={filter.options}
+            placeholder={filter.placeholder}
+            style={{ minWidth: 120 }}
+            value={filter.value}
+          />
+        ))}
+        {search && (
+          <Input.Search
+            allowClear
+            enterButton={<Button icon={<SearchOutlined />} type="primary" />}
+            onChange={(e) => setDraftKeyword(e.target.value)}
+            onClear={() => {
+              setDraftKeyword("");
+              search.onSearch("");
+            }}
+            onSearch={(value) => search.onSearch(value)}
+            placeholder={search.placeholder}
+            style={{ width: 220 }}
+            value={draftKeyword}
+          />
+        )}
+        <Button icon={<UndoOutlined />} onClick={search?.onReset} title="重置" />
+      </Space>
+      {actions && <Space size="small">{actions}</Space>}
+    </Flex>
+  );
+}
--- a/src/web/shared/hooks/use-models.ts
+++ b/src/web/shared/hooks/use-models.ts
@@ -37,16 +37,22 @@ export async function fetchModel(id: string): Promise<Model> {
 }

 export async function fetchModelList(params: {
+  capabilities?: string;
  keyword?: string;
  page?: number;
  pageSize?: number;
  providerId?: string;
+  sortBy?: string;
+  sortOrder?: string;
 }): Promise<ModelListResponse> {
  const searchParams = new URLSearchParams();
  if (params.page) searchParams.set("page", String(params.page));
  if (params.pageSize) searchParams.set("pageSize", String(params.pageSize));
  if (params.keyword) searchParams.set("keyword", params.keyword);
  if (params.providerId) searchParams.set("providerId", params.providerId);
+  if (params.sortBy) searchParams.set("sortBy", params.sortBy);
+  if (params.sortOrder) searchParams.set("sortOrder", params.sortOrder);
+  if (params.capabilities) searchParams.set("capabilities", params.capabilities);
  const qs = searchParams.toString();
  const url = `/api/models${qs ? `?${qs}` : ""}`;
  const response = await fetch(url);
@@ -110,7 +116,15 @@ export function useModel(id: string) {
  });
 }

-export function useModelList(params: { keyword?: string; page?: number; pageSize?: number; providerId?: string }) {
+export function useModelList(params: {
+  capabilities?: string;
+  keyword?: string;
+  page?: number;
+  pageSize?: number;
+  providerId?: string;
+  sortBy?: string;
+  sortOrder?: string;
+}) {
  return useQuery({
    queryFn: () => fetchModelList(params),
    queryKey: [...MODELS_KEY, "list", params],
--- a/src/web/shared/hooks/use-projects.ts
+++ b/src/web/shared/hooks/use-projects.ts
@@ -43,12 +43,16 @@ export async function fetchProjectList(params: {
  keyword?: string;
  page?: number;
  pageSize?: number;
+  sortBy?: string;
+  sortOrder?: string;
  status?: ProjectStatus;
 }): Promise<ProjectListResponse> {
  const searchParams = new URLSearchParams();
  if (params.page) searchParams.set("page", String(params.page));
  if (params.pageSize) searchParams.set("pageSize", String(params.pageSize));
  if (params.keyword) searchParams.set("keyword", params.keyword);
+  if (params.sortBy) searchParams.set("sortBy", params.sortBy);
+  if (params.sortOrder) searchParams.set("sortOrder", params.sortOrder);
  if (params.status) searchParams.set("status", params.status);
  const qs = searchParams.toString();
  const url = `/api/projects${qs ? `?${qs}` : ""}`;
@@ -115,7 +119,14 @@ export function useProject(id: string) {
  });
 }

-export function useProjectList(params: { keyword?: string; page?: number; pageSize?: number; status?: ProjectStatus }) {
+export function useProjectList(params: {
+  keyword?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortOrder?: string;
+  status?: ProjectStatus;
+}) {
  return useQuery({
    queryFn: () => fetchProjectList(params),
    queryKey: [...PROJECTS_KEY, "list", params],
--- a/src/web/shared/hooks/use-providers.ts
+++ b/src/web/shared/hooks/use-providers.ts
@@ -41,11 +41,17 @@ export async function fetchProviderList(params: {
  keyword?: string;
  page?: number;
  pageSize?: number;
+  sortBy?: string;
+  sortOrder?: string;
+  type?: string;
 }): Promise<ProviderListResponse> {
  const searchParams = new URLSearchParams();
  if (params.page) searchParams.set("page", String(params.page));
  if (params.pageSize) searchParams.set("pageSize", String(params.pageSize));
  if (params.keyword) searchParams.set("keyword", params.keyword);
+  if (params.sortBy) searchParams.set("sortBy", params.sortBy);
+  if (params.sortOrder) searchParams.set("sortOrder", params.sortOrder);
+  if (params.type) searchParams.set("type", params.type);
  const qs = searchParams.toString();
  const url = `/api/providers${qs ? `?${qs}` : ""}`;
  const response = await fetch(url);
@@ -119,7 +125,14 @@ export function useProvider(id: string) {
  });
 }

-export function useProviderList(params: { keyword?: string; page?: number; pageSize?: number }) {
+export function useProviderList(params: {
+  keyword?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortOrder?: string;
+  type?: string;
+}) {
  return useQuery({
    queryFn: () => fetchProviderList(params),
    queryKey: [...PROVIDERS_KEY, "list", params],
--- a/src/web/shared/hooks/useConfirmAction.ts
+++ b/src/web/shared/hooks/useConfirmAction.ts
@@ -0,0 +1,24 @@
+import { App } from "antd";
+import { useCallback } from "react";
+
+export interface UseConfirmActionResult {
+  confirmAction: (action: () => Promise<unknown>, successMessage: string) => Promise<void>;
+}
+
+export function useConfirmAction(): UseConfirmActionResult {
+  const { message } = App.useApp();
+
+  const confirmAction = useCallback(
+    async (action: () => Promise<unknown>, successMessage: string) => {
+      try {
+        await action();
+        message.success(successMessage);
+      } catch (err: unknown) {
+        message.error((err as Error).message);
+      }
+    },
+    [message],
+  );
+
+  return { confirmAction };
+}
--- a/src/web/shared/hooks/usePageSearchParams.ts
+++ b/src/web/shared/hooks/usePageSearchParams.ts
@@ -0,0 +1,74 @@
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router";
+
+export interface UsePageSearchParamsOptions {
+  defaults?: Record<string, string>;
+}
+
+export interface UsePageSearchParamsResult {
+  params: Record<string, string>;
+  resetAll: () => void;
+  setParam: (key: string, value: string | undefined) => void;
+  setParams: (patch: Record<string, string | undefined>) => void;
+}
+
+export function usePageSearchParams(options?: UsePageSearchParamsOptions): UsePageSearchParamsResult {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const defaults = useMemo(() => options?.defaults ?? {}, [options?.defaults]);
+
+  const params = useMemo(() => {
+    const result: Record<string, string> = {};
+    for (const [key, value] of searchParams.entries()) {
+      result[key] = value;
+    }
+    for (const [key, value] of Object.entries(defaults)) {
+      if (!(key in result)) result[key] = value;
+    }
+    return result;
+  }, [searchParams, defaults]);
+
+  const setParam = useCallback(
+    (key: string, value: string | undefined) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (value === undefined || value === "") {
+            next.delete(key);
+          } else {
+            next.set(key, value);
+          }
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  const setParams = useCallback(
+    (patch: Record<string, string | undefined>) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          for (const [key, value] of Object.entries(patch)) {
+            if (value === undefined || value === "") {
+              next.delete(key);
+            } else {
+              next.set(key, value);
+            }
+          }
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  const resetAll = useCallback(() => {
+    setSearchParams(new URLSearchParams(), { replace: true });
+  }, [setSearchParams]);
+
+  return { params, resetAll, setParam, setParams };
+}
--- a/src/web/shared/utils/format.ts
+++ b/src/web/shared/utils/format.ts
@@ -0,0 +1,5 @@
+export function formatDatetime(dateStr: string): string {
+  const d = new Date(dateStr);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}