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

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())}`;
-}