feat(ui): optimize table UI

ui/src/pages/workflows/WorkflowList.tsx

@@ -1,13 +1,29 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, Empty, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
+import {
+  Button,
+  Divider,
+  Empty,
+  Menu,
+  Modal,
+  notification,
+  Radio,
+  Space,
+  Switch,
+  Table,
+  theme,
+  Tooltip,
+  Typography,
+  type MenuProps,
+  type TableProps,
+} from "antd";
 import { PageHeader } from "@ant-design/pro-components";
-import { Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
+import { Filter as FilterIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
 import moment from "moment";
 
 import { Workflow as WorkflowType } from "@/domain/workflow";
-import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow, type WorkflowListReq } from "@/repository/workflow";
+import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow";
 
 const WorkflowList = () => {
   const navigate = useNavigate();
@@ -15,8 +31,7 @@ const WorkflowList = () => {
 
   const { t } = useTranslation();
 
-  // a flag to fix the twice-rendering issue in strict mode
-  const mountRef = useRef(true);
+  const { token: themeToken } = theme.useToken();
 
   const [modalApi, ModelContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -63,19 +78,63 @@ const WorkflowList = () => {
       },
     },
     {
-      key: "enabled",
-      title: t("workflow.props.enabled"),
+      key: "state",
+      title: t("workflow.props.state"),
+      filterDropdown: ({ setSelectedKeys, confirm, clearFilters }) => {
+        const items: Required<MenuProps>["items"] = [
+          ["enabled", "workflow.props.state.filter.enabled"],
+          ["disabled", "workflow.props.state.filter.disabled"],
+        ].map(([key, label]) => {
+          return {
+            key,
+            label: <Radio checked={filters["state"] === key}>{t(label)}</Radio>,
+            onClick: () => {
+              if (filters["state"] !== key) {
+                setFilters((prev) => ({ ...prev, state: key }));
+                setSelectedKeys([key]);
+              }
+
+              confirm({ closeDropdown: true });
+            },
+          };
+        });
+
+        const handleResetClick = () => {
+          setFilters((prev) => ({ ...prev, state: undefined }));
+          setSelectedKeys([]);
+          clearFilters?.();
+          confirm();
+        };
+
+        const handleConfirmClick = () => {
+          confirm();
+        };
+
+        return (
+          <div style={{ padding: 0 }}>
+            <Menu items={items} selectable={false} />
+            <Divider style={{ margin: 0 }} />
+            <Space className="justify-end w-full" style={{ padding: themeToken.paddingSM }}>
+              <Button size="small" disabled={!filters.state} onClick={handleResetClick}>
+                {t("common.reset")}
+              </Button>
+              <Button type="primary" size="small" onClick={handleConfirmClick}>
+                {t("common.confirm")}
+              </Button>
+            </Space>
+          </div>
+        );
+      },
+      filterIcon: () => <FilterIcon size={14} />,
       render: (_, record) => {
         const enabled = record.enabled;
         return (
-          <>
-            <Switch
-              checked={enabled}
-              onChange={() => {
-                handleEnabledChange(record);
-              }}
-            />
-          </>
+          <Switch
+            checked={enabled}
+            onChange={() => {
+              handleEnabledChange(record);
+            }}
+          />
         );
       },
     },
@@ -136,22 +195,27 @@ const WorkflowList = () => {
   const [tableData, setTableData] = useState<WorkflowType[]>([]);
   const [tableTotal, setTableTotal] = useState<number>(0);
 
+  const [filters, setFilters] = useState<Record<string, unknown>>({});
+
   const [page, setPage] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(10);
 
-  // TODO: 表头筛选
+  useEffect(() => {
+    setFilters({ ...filters, state: searchParams.get("state") });
+    setPage(parseInt(+searchParams.get("page")! + "") || 1);
+    setPageSize(parseInt(+searchParams.get("perPage")! + "") || 10);
+  }, []);
+
   const fetchTableData = useCallback(async () => {
     if (loading) return;
     setLoading(true);
 
-    const state = searchParams.get("state");
-    const req: WorkflowListReq = { page: page, perPage: pageSize };
-    if (state == "enabled") {
-      req.enabled = true;
-    }
-
     try {
-      const resp = await listWorkflow(req);
+      const resp = await listWorkflow({
+        page: page,
+        perPage: pageSize,
+        enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined,
+      });
 
       setTableData(resp.items);
       setTableTotal(resp.totalItems);
@@ -161,14 +225,9 @@ const WorkflowList = () => {
     } finally {
       setLoading(false);
     }
-  }, [searchParams, page, pageSize]);
+  }, [filters, page, pageSize]);
 
   useEffect(() => {
-    if (mountRef.current) {
-      mountRef.current = false;
-      return;
-    }
-
     fetchTableData();
   }, [fetchTableData]);