display workflow data

ui/src/pages/setting/Notify.tsx

@@ -29,7 +29,7 @@ const Notify = () => {
         </div>
 
         <div className="border rounded-md p-5 mt-7 shadow-lg">
-          <Accordion type={"single"} className="dark:text-stone-200">
+          <Accordion type={"single"} collapsible={true} className="dark:text-stone-200">
             <AccordionItem value="item-email" className="dark:border-stone-200">
               <AccordionTrigger>{t("common.provider.email")}</AccordionTrigger>
               <AccordionContent>

ui/src/pages/workflow/WorkflowDetail.tsx

@@ -96,8 +96,8 @@ const WorkflowDetail = () => {
               <WorkflowBaseInfoEditDialog
                 trigger={
                   <div className="flex flex-col space-y-1 cursor-pointer items-start">
-                    <div className="">{workflow.name ?? "未命名工作流"}</div>
-                    <div className="text-sm text-muted-foreground">{workflow.description ?? "添加流程说明"}</div>
+                    <div className="">{workflow.name ? workflow.name : "未命名工作流"}</div>
+                    <div className="text-sm text-muted-foreground">{workflow.description ? workflow.description : "添加流程说明"}</div>
                   </div>
                 }
               />

ui/src/pages/workflow/index.tsx

@@ -1,9 +1,182 @@
 import { Button } from "@/components/ui/button";
-import { Plus } from "lucide-react";
+import { MoreHorizontal, Plus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
+import { ColumnDef } from "@tanstack/react-table";
+import { Workflow as WorkflowType } from "@/domain/workflow";
+import { DataTable } from "@/components/workflow/DataTable";
+import { useState } from "react";
+import { list, remove, save } from "@/repository/workflow";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Switch } from "@/components/ui/switch";
+
+import { useTranslation } from "react-i18next";
+import CustomAlertDialog from "@/components/workflow/CustomAlertDialog";
 
 const Workflow = () => {
   const navigate = useNavigate();
+
+  const [data, setData] = useState<WorkflowType[]>([]);
+  const [pageCount, setPageCount] = useState<number>(0);
+
+  const { t } = useTranslation();
+
+  const [alertOpen, setAlertOpen] = useState(false);
+
+  const [alertProps, setAlertProps] = useState<{
+    title: string;
+    description: string;
+    onConfirm: () => void;
+  }>();
+
+  const fetchData = async (page: number, pageSize?: number) => {
+    const resp = await list({ page: page, perPage: pageSize });
+    setData(resp.items);
+    setPageCount(resp.totalPages);
+  };
+
+  const columns: ColumnDef<WorkflowType>[] = [
+    {
+      accessorKey: "name",
+      header: "名称",
+      cell: ({ row }) => {
+        let name: string = row.getValue("name");
+        if (!name) {
+          name = "未命名工作流";
+        }
+        return <div className="flex items-center">{name}</div>;
+      },
+    },
+    {
+      accessorKey: "description",
+      header: "描述",
+      cell: ({ row }) => {
+        let description: string = row.getValue("description");
+        if (!description) {
+          description = "-";
+        }
+        return description;
+      },
+    },
+    {
+      accessorKey: "executionMethod",
+      header: "执行方式",
+      cell: ({ row }) => {
+        const method = row.getValue("executionMethod");
+        if (!method) {
+          return "-";
+        } else if (method === "manual") {
+          return "手动";
+        } else if (method === "auto") {
+          const crontab: string = row.getValue("crontab");
+          return (
+            <div className="flex flex-col">
+              定时
+              <div className="text-muted-foreground text-xs">{crontab}</div>
+            </div>
+          );
+        }
+      },
+    },
+    {
+      accessorKey: "enabled",
+      header: "是否启用",
+      cell: ({ row }) => {
+        const enabled: boolean = row.getValue("enabled");
+
+        return (
+          <>
+            <Switch
+              checked={enabled}
+              onCheckedChange={() => {
+                handleCheckedChange(row.original.id ?? "");
+              }}
+            />
+          </>
+        );
+      },
+    },
+    {
+      accessorKey: "created",
+      header: "创建时间",
+      cell: ({ row }) => {
+        const date: string = row.getValue("created");
+        return new Date(date).toLocaleString();
+      },
+    },
+    {
+      accessorKey: "updated",
+      header: "更新时间",
+      cell: ({ row }) => {
+        const date: string = row.getValue("updated");
+        return new Date(date).toLocaleString();
+      },
+    },
+
+    {
+      id: "actions",
+      cell: ({ row }) => {
+        const workflow = row.original;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>操作</DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={() => {
+                  navigate(`/workflow/detail?id=${workflow.id}`);
+                }}
+              >
+                编辑
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-red-500"
+                onClick={() => {
+                  handleDeleteClick(workflow.id ?? "");
+                }}
+              >
+                {t("common.delete")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+
+  const handleCheckedChange = async (id: string) => {
+    const resp = await save({ id, enabled: !data.find((item) => item.id === id)?.enabled });
+    if (resp) {
+      setData((prev) => {
+        return prev.map((item) => {
+          if (item.id === id) {
+            return resp;
+          }
+          return item;
+        });
+      });
+    }
+  };
+
+  const handleDeleteClick = (id: string) => {
+    setAlertProps({
+      title: "删除工作流",
+      description: "确定删除工作流吗？",
+      onConfirm: async () => {
+        const resp = await remove(id);
+        if (resp) {
+          setData((prev) => {
+            return prev.filter((item) => item.id !== id);
+          });
+        }
+      },
+    });
+    setAlertOpen(true);
+  };
   const handleCreateClick = () => {
     navigate("/workflow/detail");
   };
@@ -16,6 +189,18 @@ const Workflow = () => {
           新建工作流
         </Button>
       </div>
+
+      <div>
+        <DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} />
+      </div>
+
+      <CustomAlertDialog
+        open={alertOpen}
+        onOpenChange={setAlertOpen}
+        title={alertProps?.title}
+        description={alertProps?.description}
+        confirm={alertProps?.onConfirm}
+      />
     </>
   );
 };