feat(ui): new WorkflowList UI using antd

2024-12-04 21:55:52 +08:00
parent 668f6ee36f
commit c522196029
28 changed files with 838 additions and 342 deletions
--- a/ui/src/api/notify.ts
+++ b/ui/src/api/notify.ts
@@ -1,7 +1,7 @@
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";

 export const notifyTest = async (channel: string) => {
-  const pb = getPb();
+  const pb = getPocketBase();

  const resp = await pb.send("/api/notify/test", {
    method: "POST",
--- a/ui/src/api/statistics.ts
+++ b/ui/src/api/statistics.ts
@@ -1,7 +1,7 @@
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";

 export const get = async () => {
-  const pb = getPb();
+  const pb = getPocketBase();

  const resp = await pb.send("/api/statistics/get", {
    method: "GET",
--- a/ui/src/api/workflow.ts
+++ b/ui/src/api/workflow.ts
@@ -1,7 +1,7 @@
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";

 export const run = async (id: string) => {
-  const pb = getPb();
+  const pb = getPocketBase();

  const resp = await pb.send("/api/workflow/run", {
    method: "POST",
--- a/ui/src/i18n/locales/en/nls.common.json
+++ b/ui/src/i18n/locales/en/nls.common.json
@@ -30,6 +30,7 @@
  "common.text.updated_at": "Updated At",
  "common.text.operations": "Operations",
  "common.text.nodata": "No data available",
+  "common.text.request_error": "Request error",

  "common.menu.settings": "Settings",
  "common.menu.logout": "Logout",
--- a/ui/src/i18n/locales/en/nls.domain.json
+++ b/ui/src/i18n/locales/en/nls.domain.json
@@ -40,7 +40,7 @@
  "domain.application.form.key_algorithm.label": "Certificate Key Algorithm (Default: RSA2048)",
  "domain.application.form.key_algorithm.placeholder": "Please select certificate key algorithm",
  "domain.application.form.timeout.label": "DNS Propagation Timeout (Seconds)",
-  "domain.application.form.timeoue.placeholder": "Please enter maximum waiting time for DNS propagation",
+  "domain.application.form.timeout.placeholder": "Please enter maximum waiting time for DNS propagation",
  "domain.application.form.disable_follow_cname.label": "Disable DNS CNAME following",
  "domain.application.form.disable_follow_cname.tips": "This option will disable Acme DNS authentication CNAME follow. If you don't understand this option, just keep it by default. ",
  "domain.application.form.disable_follow_cname.tips_link": "Learn more",
--- a/ui/src/i18n/locales/en/nls.workflow.json
+++ b/ui/src/i18n/locales/en/nls.workflow.json
@@ -20,15 +20,15 @@
  "workflow.props.description.placeholder": "Please enter description",
  "workflow.props.executionMethod": "Execution Method",
  "workflow.props.enabled": "Enabled",
-  "workflow.props.created": "Created",
-  "workflow.props.updated": "Updated",
+  "workflow.props.createdAt": "Created",
+  "workflow.props.updatedAt": "Updated",

  "workflow.action": "Action",
  "workflow.action.edit": "Edit",
  "workflow.action.create": "Create Workflow",

  "workflow.action.delete.alert.title": "Delete Workflow",
-  "workflow.action.delete.alert.description": "Are you sure you want to delete this workflow?",
+  "workflow.action.delete.alert.content": "Are you sure you want to delete this workflow?",

  "workflow.history.page.title": "Logs",
  "workflow.history.props.state": "State",
@@ -68,4 +68,3 @@
  "workflow.node.notify.form.channel.placeholder": "Please select channel",
  "workflow.node.notify.form.settingChannel.label": "Setting Channel"
 }
-
--- a/ui/src/i18n/locales/zh/nls.common.json
+++ b/ui/src/i18n/locales/zh/nls.common.json
@@ -30,6 +30,7 @@
  "common.text.updated_at": "更新时间",
  "common.text.operations": "操作",
  "common.text.nodata": "暂无数据",
+  "common.text.request_error": "请求错误",

  "common.menu.settings": "系统设置",
  "common.menu.logout": "退出登录",
--- a/ui/src/i18n/locales/zh/nls.domain.json
+++ b/ui/src/i18n/locales/zh/nls.domain.json
@@ -40,7 +40,7 @@
  "domain.application.form.key_algorithm.label": "数字证书算法（默认：RSA2048）",
  "domain.application.form.key_algorithm.placeholder": "请选择数字证书算法",
  "domain.application.form.timeout.label": "DNS 传播检查超时时间（单位：秒）",
-  "domain.application.form.timeoue.placeholder": "请输入 DNS 传播检查超时时间",
+  "domain.application.form.timeout.placeholder": "请输入 DNS 传播检查超时时间",
  "domain.application.form.disable_follow_cname.label": "禁用 DNS CNAME 跟随",
  "domain.application.form.disable_follow_cname.tips": "该选项将禁用 Acme DNS 认证 CNAME 跟随，如果你不了解此选项保持默认即可，",
  "domain.application.form.disable_follow_cname.tips_link": "了解更多",
--- a/ui/src/i18n/locales/zh/nls.workflow.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.json
@@ -20,15 +20,15 @@
  "workflow.props.description.placeholder": "请输入描述",
  "workflow.props.executionMethod": "执行方式",
  "workflow.props.enabled": "是否启用",
-  "workflow.props.created": "创建时间",
-  "workflow.props.updated": "更新时间",
+  "workflow.props.createdAt": "创建时间",
+  "workflow.props.updatedAt": "更新时间",

  "workflow.action": "操作",
  "workflow.action.edit": "编辑",
-  "workflow.action.create": "创建工作流",
+  "workflow.action.create": "新建工作流",

  "workflow.action.delete.alert.title": "删除工作流",
-  "workflow.action.delete.alert.description": "确定要删除此工作流吗？",
+  "workflow.action.delete.alert.content": "确定要删除此工作流吗？",

  "workflow.history.page.title": "日志",
  "workflow.history.props.state": "状态",
@@ -68,4 +68,3 @@
  "workflow.node.notify.form.channel.placeholder": "请选择推送渠道",
  "workflow.node.notify.form.settingChannel.label": "设置推送渠道"
 }
-
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
-import { ConfigProvider } from "antd";
+import { App, ConfigProvider } from "antd";
 import AntdLocaleZhCN from "antd/locale/zh_CN";
 import "dayjs/locale/zh-cn";

@@ -13,10 +13,19 @@ import "./global.css";
 // TODO: antd i18n
 ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
-    <ConfigProvider locale={AntdLocaleZhCN}>
-      <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-        <RouterProvider router={router} />
-      </ThemeProvider>
-    </ConfigProvider>
+    <App>
+      <ConfigProvider
+        locale={AntdLocaleZhCN}
+        theme={{
+          token: {
+            colorPrimary: "hsl(24.6 95% 53.1%)",
+          },
+        }}
+      >
+        <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+          <RouterProvider router={router} />
+        </ThemeProvider>
+      </ConfigProvider>
+    </App>
  </React.StrictMode>
 );
--- a/ui/src/pages/DashboardLayout.tsx
+++ b/ui/src/pages/DashboardLayout.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";
 import { ConfigProvider } from "@/providers/config";

 import Version from "@/components/certimate/Version";
@@ -18,7 +18,7 @@ export default function Dashboard() {
  const location = useLocation();
  const { t } = useTranslation();

-  if (!getPb().authStore.isValid || !getPb().authStore.isAdmin) {
+  if (!getPocketBase().authStore.isValid || !getPocketBase().authStore.isAdmin) {
    return <Navigate to="/login" />;
  }

@@ -31,7 +31,7 @@ export default function Dashboard() {
  };

  const handleLogoutClick = () => {
-    getPb().authStore.clear();
+    getPocketBase().authStore.clear();
    navigate("/login");
  };

@@ -57,7 +57,10 @@ export default function Dashboard() {
                    <Home className="h-4 w-4" />
                    {t("dashboard.page.title")}
                  </Link>
-                  <Link to="/workflow" className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/workflow"))}>
+                  <Link
+                    to="/workflows"
+                    className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/workflows"))}
+                  >
                    <Workflow className="h-4 w-4" />
                    {t("workflow.page.title")}
                  </Link>
@@ -103,8 +106,8 @@ export default function Dashboard() {
                      {t("dashboard.page.title")}
                    </Link>
                    <Link
-                      to="/workflow"
-                      className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2  hover:text-foreground", getClass("/workflow"))}
+                      to="/workflows"
+                      className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2  hover:text-foreground", getClass("/workflows"))}
                    >
                      <Workflow className="h-5 w-5" />
                      {t("workflow.page.title")}
--- a/ui/src/pages/LoginLayout.tsx
+++ b/ui/src/pages/LoginLayout.tsx
@@ -1,10 +1,10 @@
 import { Navigate, Outlet } from "react-router-dom";

 import Version from "@/components/certimate/Version";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";

 const LoginLayout = () => {
-  if (getPb().authStore.isValid && getPb().authStore.isAdmin) {
+  if (getPocketBase().authStore.isValid && getPocketBase().authStore.isAdmin) {
    return <Navigate to="/" />;
  }

--- a/ui/src/pages/dashboard/Dashboard.tsx
+++ b/ui/src/pages/dashboard/Dashboard.tsx
@@ -101,7 +101,7 @@ const Dashboard = () => {
            <div className="flex items-baseline">
              <div className="text-3xl text-stone-700 dark:text-stone-200">
                {statistic?.workflowTotal ? (
-                  <Link to="/workflow" className="hover:underline">
+                  <Link to="/workflows" className="hover:underline">
                    {statistic?.workflowTotal}
                  </Link>
                ) : (
@@ -122,7 +122,7 @@ const Dashboard = () => {
            <div className="flex items-baseline">
              <div className="text-3xl text-stone-700 dark:text-stone-200">
                {statistic?.workflowEnabled ? (
-                  <Link to="/workflow?state=enabled" className="hover:underline">
+                  <Link to="/workflows?state=enabled" className="hover:underline">
                    {statistic?.workflowEnabled}
                  </Link>
                ) : (
--- a/ui/src/pages/login/Login.tsx
+++ b/ui/src/pages/login/Login.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { getErrMessage } from "@/lib/error";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";

 const formSchema = z.object({
  username: z.string().email({
@@ -33,7 +33,7 @@ const Login = () => {
  // 2. Define a submit handler.
  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
-      await getPb().admins.authWithPassword(values.username, values.password);
+      await getPocketBase().admins.authWithPassword(values.username, values.password);
      navigage("/");
    } catch (e) {
      const message = getErrMessage(e);
--- a/ui/src/pages/setting/Account.tsx
+++ b/ui/src/pages/setting/Account.tsx
@@ -10,7 +10,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
 import { getErrMessage } from "@/lib/error";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";

 const formSchema = z.object({
  email: z.string().email("settings.account.email.errmsg.invalid"),
@@ -26,17 +26,17 @@ const Account = () => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      email: getPb().authStore.model?.email,
+      email: getPocketBase().authStore.model?.email,
    },
  });

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
-      await getPb().admins.update(getPb().authStore.model?.id, {
+      await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
        email: values.email,
      });

-      getPb().authStore.clear();
+      getPocketBase().authStore.clear();
      toast({
        title: t("settings.account.email.changed.message"),
        description: t("settings.account.relogin.message"),
--- a/ui/src/pages/setting/Password.tsx
+++ b/ui/src/pages/setting/Password.tsx
@@ -9,7 +9,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
 import { getErrMessage } from "@/lib/error";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";

 const formSchema = z
  .object({
@@ -44,19 +44,19 @@ const Password = () => {

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
-      await getPb().admins.authWithPassword(getPb().authStore.model?.email, values.oldPassword);
+      await getPocketBase().admins.authWithPassword(getPocketBase().authStore.model?.email, values.oldPassword);
    } catch (e) {
      const message = getErrMessage(e);
      form.setError("oldPassword", { message });
    }

    try {
-      await getPb().admins.update(getPb().authStore.model?.id, {
+      await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
        password: values.newPassword,
        passwordConfirm: values.confirmPassword,
      });

-      getPb().authStore.clear();
+      getPocketBase().authStore.clear();
      toast({
        title: t("settings.password.changed.message"),
        description: t("settings.account.relogin.message"),
--- a/ui/src/pages/workflow/WorkflowList.tsx
+++ b/ui/src/pages/workflow/WorkflowList.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Button, Modal, notification, Space, Switch, Table, Tooltip, Typography, 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 { Workflow as WorkflowType } from "@/domain/workflow";
+import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow, type WorkflowListReq } from "@/repository/workflow";
+
+const WorkflowList = () => {
+  const navigate = useNavigate();
+
+  const { t } = useTranslation();
+
+  const [modalApi, ModelContextHolder] = Modal.useModal();
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const [searchParams] = useSearchParams();
+
+  const tableColumns: TableProps<WorkflowType>["columns"] = [
+    {
+      key: "$index",
+      align: "center",
+      title: "",
+      width: 50,
+      render: (_, __, index) => (page - 1) * pageSize + index + 1,
+    },
+    {
+      key: "name",
+      title: t("common.text.name"),
+      render: (_, record) => (
+        <Space className="max-w-full" direction="vertical" size={4}>
+          <Typography.Text ellipsis>{record.name}</Typography.Text>
+          <Typography.Text type="secondary" ellipsis>
+            {record.description}
+          </Typography.Text>
+        </Space>
+      ),
+    },
+    {
+      key: "type",
+      title: t("workflow.props.executionMethod"),
+      render: (_, record) => {
+        const method = record.type;
+        if (!method) {
+          return "-";
+        } else if (method === "manual") {
+          return <Typography.Text>{t("workflow.node.start.form.executionMethod.options.manual")}</Typography.Text>;
+        } else if (method === "auto") {
+          return (
+            <Space className="max-w-full" direction="vertical" size={4}>
+              <Typography.Text>{t("workflow.node.start.form.executionMethod.options.auto")}</Typography.Text>
+              <Typography.Text type="secondary">{record.crontab ?? ""}</Typography.Text>
+            </Space>
+          );
+        }
+      },
+    },
+    {
+      key: "enabled",
+      title: t("workflow.props.enabled"),
+      render: (_, record) => {
+        const enabled = record.enabled;
+        return (
+          <>
+            <Switch
+              checked={enabled}
+              onChange={() => {
+                handleEnabledChange(record.id);
+              }}
+            />
+          </>
+        );
+      },
+    },
+    {
+      key: "lastExecutedAt",
+      title: "最近执行状态",
+      render: () => {
+        // TODO: 最近执行状态
+        return <>TODO</>;
+      },
+    },
+    {
+      key: "createdAt",
+      title: t("common.text.created_at"),
+      ellipsis: true,
+      render: (_, record) => {
+        return new Date(record.created!).toLocaleString();
+      },
+    },
+    {
+      key: "updatedAt",
+      title: t("common.text.updated_at"),
+      ellipsis: true,
+      render: (_, record) => {
+        return new Date(record.updated!).toLocaleString();
+      },
+    },
+    {
+      key: "$operations",
+      align: "end",
+      width: 100,
+      render: (_, record) => (
+        <Space>
+          <Tooltip title={t("common.edit")}>
+            <Button
+              type="link"
+              icon={<PencilIcon size={16} />}
+              onClick={() => {
+                navigate(`/workflow/detail?id=${record.id}`);
+              }}
+            />
+          </Tooltip>
+          <Tooltip title={t("common.delete")}>
+            <Button
+              type="link"
+              danger={true}
+              icon={<Trash2Icon size={16} />}
+              onClick={() => {
+                handleDeleteClick(record.id);
+              }}
+            />
+          </Tooltip>
+        </Space>
+      ),
+    },
+  ];
+  const [tableData, setTableData] = useState<WorkflowType[]>([]);
+  const [tableTotal, setTableTotal] = useState<number>(0);
+
+  const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+
+  // TODO: 表头筛选
+  const fetchTableData = 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);
+
+      setTableData(resp.items);
+      setTableTotal(resp.totalItems);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTableData();
+  }, [page, pageSize]);
+
+  const handleEnabledChange = async (id: string) => {
+    try {
+      const resp = await saveWorkflow({ id, enabled: !tableData.find((item) => item.id === id)?.enabled });
+      if (resp) {
+        setTableData((prev) => {
+          return prev.map((item) => {
+            if (item.id === id) {
+              return resp;
+            }
+            return item;
+          });
+        });
+      }
+    } catch (err) {
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
+    }
+  };
+
+  const handleDeleteClick = (id: string) => {
+    modalApi.confirm({
+      title: t("workflow.action.delete.alert.title"),
+      content: t("workflow.action.delete.alert.content"),
+      onOk: async () => {
+        try {
+          const resp = await removeWorkflow(id);
+          if (resp) {
+            setTableData((prev) => prev.filter((item) => item.id !== id));
+          }
+        } catch (err) {
+          notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
+        }
+      },
+    });
+  };
+
+  const handleCreateClick = () => {
+    navigate("/workflow/detail");
+  };
+
+  return (
+    <>
+      <PageHeader
+        title={t("workflow.page.title")}
+        extra={[
+          <Button
+            key="create"
+            type="primary"
+            icon={<PlusIcon size={16} />}
+            onClick={() => {
+              handleCreateClick();
+            }}
+          >
+            {t("workflow.action.create")}
+          </Button>,
+        ]}
+      />
+
+      <Table<WorkflowType>
+        columns={tableColumns}
+        dataSource={tableData}
+        rowKey={(record) => record.id}
+        loading={loading}
+        pagination={{
+          current: page,
+          pageSize: pageSize,
+          total: tableTotal,
+          onChange: (page, pageSize) => {
+            setPage(page);
+            setPageSize(pageSize);
+          },
+          onShowSizeChange: (page, pageSize) => {
+            setPage(page);
+            setPageSize(pageSize);
+          },
+        }}
+      />
+
+      {ModelContextHolder}
+      {NotificationContextHolder}
+    </>
+  );
+};
+
+export default WorkflowList;
--- a/ui/src/pages/workflow/index.tsx
+++ b/ui/src/pages/workflow/index.tsx
@@ -1,224 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { MoreHorizontal, Plus } from "lucide-react";
-import { useNavigate, useSearchParams } 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, WorkflowListReq } 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 [searchParams] = useSearchParams();
-
-  const fetchData = async (page: number, pageSize?: number) => {
-    const state = searchParams.get("state");
-    const req: WorkflowListReq = { page: page, perPage: pageSize };
-    if (state && state == "enabled") {
-      req.enabled = true;
-    }
-    const resp = await list(req);
-    setData(resp.items);
-    setPageCount(resp.totalPages);
-  };
-
-  const columns: ColumnDef<WorkflowType>[] = [
-    {
-      accessorKey: "name",
-      header: t("workflow.props.name"),
-      cell: ({ row }) => {
-        let name: string = row.getValue("name");
-        if (!name) {
-          name = t("workflow.props.name.default");
-        }
-        return <div className="max-w-[150px] truncate">{name}</div>;
-      },
-    },
-    {
-      accessorKey: "description",
-      header: t("workflow.props.description"),
-      cell: ({ row }) => {
-        let description: string = row.getValue("description");
-        if (!description) {
-          description = "-";
-        }
-        return <div className="max-w-[200px] truncate">{description}</div>;
-      },
-    },
-    {
-      accessorKey: "type",
-      header: t("workflow.props.executionMethod"),
-      cell: ({ row }) => {
-        const method = row.getValue("type");
-        if (!method) {
-          return "-";
-        } else if (method === "manual") {
-          return t("workflow.node.start.form.executionMethod.options.manual");
-        } else if (method === "auto") {
-          const crontab: string = row.original.crontab ?? "";
-          return (
-            <div className="flex flex-col space-y-1">
-              <div>{t("workflow.node.start.form.executionMethod.options.auto")}</div>
-              <div className="text-muted-foreground text-xs">{crontab}</div>
-            </div>
-          );
-        }
-      },
-    },
-    {
-      accessorKey: "enabled",
-      header: t("workflow.props.enabled"),
-      cell: ({ row }) => {
-        const enabled: boolean = row.getValue("enabled");
-
-        return (
-          <>
-            <Switch
-              checked={enabled}
-              onCheckedChange={() => {
-                handleCheckedChange(row.original.id ?? "");
-              }}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            />
-          </>
-        );
-      },
-    },
-    {
-      accessorKey: "created",
-      header: t("workflow.props.created"),
-      cell: ({ row }) => {
-        const date: string = row.getValue("created");
-        return new Date(date).toLocaleString();
-      },
-    },
-    {
-      accessorKey: "updated",
-      header: t("workflow.props.updated"),
-      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>{t("workflow.action")}</DropdownMenuLabel>
-              <DropdownMenuItem
-                onClick={(e) => {
-                  e.stopPropagation();
-                  navigate(`/workflow/detail?id=${workflow.id}`);
-                }}
-              >
-                {t("workflow.action.edit")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="text-red-500"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  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: t("workflow.action.delete.alert.title"),
-      description: t("workflow.action.delete.alert.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");
-  };
-
-  const handleRowClick = (id: string) => {
-    navigate(`/workflow/detail?id=${id}`);
-  };
-  return (
-    <>
-      <div className="flex justify-between items-center">
-        <div className="text-muted-foreground">{t("workflow.page.title")}</div>
-        <Button onClick={handleCreateClick}>
-          <Plus size={16} />
-          {t("workflow.action.create")}
-        </Button>
-      </div>
-
-      <div>
-        <DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} onRowClick={handleRowClick} withPagination />
-      </div>
-
-      <CustomAlertDialog
-        open={alertOpen}
-        onOpenChange={setAlertOpen}
-        title={alertProps?.title}
-        description={alertProps?.description}
-        confirm={alertProps?.onConfirm}
-      />
-    </>
-  );
-};
-
-export default Workflow;
--- a/ui/src/repository/access.ts
+++ b/ui/src/repository/access.ts
@@ -1,10 +1,10 @@
 import moment from "moment";

 import { Access } from "@/domain/access";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";

 export const list = async () => {
-  return await getPb().collection("access").getFullList<Access>({
+  return await getPocketBase().collection("access").getFullList<Access>({
    sort: "-created",
    filter: "deleted = null",
  });
@@ -12,12 +12,12 @@ export const list = async () => {

 export const save = async (data: Access) => {
  if (data.id) {
-    return await getPb().collection("access").update(data.id, data);
+    return await getPocketBase().collection("access").update(data.id, data);
  }
-  return await getPb().collection("access").create(data);
+  return await getPocketBase().collection("access").create(data);
 };

 export const remove = async (data: Access) => {
  data.deleted = moment.utc().format("YYYY-MM-DD HH:mm:ss");
-  return await getPb().collection("access").update(data.id, data);
+  return await getPocketBase().collection("access").update(data.id, data);
 };
--- a/ui/src/repository/certificate.ts
+++ b/ui/src/repository/certificate.ts
@@ -1,5 +1,5 @@
 import { Certificate } from "@/domain/certificate";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";
 import { RecordListOptions } from "pocketbase";
 import { getTimeAfter } from "@/lib/time";

@@ -10,7 +10,7 @@ type CertificateListReq = {
 };

 export const list = async (req: CertificateListReq) => {
-  const pb = getPb();
+  const pb = getPocketBase();

  let page = 1;
  if (req.page) {
--- a/ui/src/repository/deployment.ts
+++ b/ui/src/repository/deployment.ts
@@ -1,5 +1,5 @@
 import { Deployment, DeploymentListReq } from "@/domain/deployment";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";

 export const list = async (req: DeploymentListReq) => {
  let page = 1;
@@ -17,7 +17,7 @@ export const list = async (req: DeploymentListReq) => {
    filter = `domain="${req.domain}"`;
  }

-  return await getPb().collection("deployments").getList<Deployment>(page, perPage, {
+  return await getPocketBase().collection("deployments").getList<Deployment>(page, perPage, {
    filter: filter,
    sort: "-deployedAt",
    expand: "domain",
--- a/ui/src/repository/domains.ts
+++ b/ui/src/repository/domains.ts
@@ -1,6 +1,6 @@
 import { getTimeAfter } from "@/lib/time";
 import { Domain } from "@/domain/domain";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";

 type DomainListReq = {
  domain?: string;
@@ -10,7 +10,7 @@ type DomainListReq = {
 };

 export const list = async (req: DomainListReq) => {
-  const pb = getPb();
+  const pb = getPocketBase();

  let page = 1;
  if (req.page) {
@@ -43,24 +43,24 @@ export const list = async (req: DomainListReq) => {
 };

 export const get = async (id: string) => {
-  const response = await getPb().collection("domains").getOne<Domain>(id);
+  const response = await getPocketBase().collection("domains").getOne<Domain>(id);
  return response;
 };

 export const save = async (data: Domain) => {
  if (data.id) {
-    return await getPb().collection("domains").update<Domain>(data.id, data);
+    return await getPocketBase().collection("domains").update<Domain>(data.id, data);
  }
-  return await getPb().collection("domains").create<Domain>(data);
+  return await getPocketBase().collection("domains").create<Domain>(data);
 };

 export const remove = async (id: string) => {
-  return await getPb().collection("domains").delete(id);
+  return await getPocketBase().collection("domains").delete(id);
 };

 type Callback = (data: Domain) => void;
 export const subscribeId = (id: string, callback: Callback) => {
-  return getPb()
+  return getPocketBase()
    .collection("domains")
    .subscribe<Domain>(
      id,
@@ -76,5 +76,5 @@ export const subscribeId = (id: string, callback: Callback) => {
 };

 export const unsubscribeId = (id: string) => {
-  getPb().collection("domains").unsubscribe(id);
+  getPocketBase().collection("domains").unsubscribe(id);
 };
--- a/ui/src/repository/pocketbase.ts
+++ b/ui/src/repository/pocketbase.ts
@@ -4,7 +4,7 @@ const apiDomain = import.meta.env.VITE_API_DOMAIN;
 console.log(apiDomain);

 let pb: PocketBase;
-export const getPb = () => {
+export const getPocketBase = () => {
  if (pb) return pb;
  pb = new PocketBase("/");
  return pb;
--- a/ui/src/repository/settings.ts
+++ b/ui/src/repository/settings.ts
@@ -1,9 +1,9 @@
 import { EmailsSetting, Setting } from "@/domain/settings";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";

 export const getEmails = async () => {
  try {
-    const resp = await getPb().collection("settings").getFirstListItem<Setting<EmailsSetting>>("name='emails'");
+    const resp = await getPocketBase().collection("settings").getFirstListItem<Setting<EmailsSetting>>("name='emails'");
    return resp;
  } catch (e) {
    return {
@@ -14,7 +14,7 @@ export const getEmails = async () => {

 export const getSetting = async <T>(name: string) => {
  try {
-    const resp = await getPb().collection("settings").getFirstListItem<Setting<T>>(`name='${name}'`);
+    const resp = await getPocketBase().collection("settings").getFirstListItem<Setting<T>>(`name='${name}'`);
    return resp;
  } catch (e) {
    const rs: Setting<T> = {
@@ -25,7 +25,7 @@ export const getSetting = async <T>(name: string) => {
 };

 export const update = async <T>(setting: Setting<T>) => {
-  const pb = getPb();
+  const pb = getPocketBase();
  let resp: Setting<T>;
  if (setting.id) {
    resp = await pb.collection("settings").update(setting.id, setting);
--- a/ui/src/repository/workflow.ts
+++ b/ui/src/repository/workflow.ts
@@ -1,77 +1,58 @@
-import { Workflow, WorkflowNode, WorkflowRunLog } from "@/domain/workflow";
-import { getPb } from "./api";
-import { RecordListOptions } from "pocketbase";
+import { type RecordListOptions } from "pocketbase";
+
+import { type Workflow, type WorkflowNode, type WorkflowRunLog } from "@/domain/workflow";
+import { getPocketBase } from "./pocketbase";
+
+export type WorkflowListReq = {
+  page?: number;
+  perPage?: number;
+  enabled?: boolean;
+};
+
+export const list = async (req: WorkflowListReq) => {
+  const page = req.page || 1;
+  const perPage = req.perPage || 10;
+
+  const options: RecordListOptions = { sort: "-created" };
+  if (req.enabled != null) {
+    options.filter = getPocketBase().filter("enabled={:enabled}", { enabled: req.enabled });
+  }
+
+  return await getPocketBase().collection("workflow").getList<Workflow>(page, perPage, options);
+};

 export const get = async (id: string) => {
-  const response = await getPb().collection("workflow").getOne<Workflow>(id);
-  return response;
+  return await getPocketBase().collection("workflow").getOne<Workflow>(id);
 };

 export const save = async (data: Record<string, string | boolean | WorkflowNode>) => {
  if (data.id) {
-    return await getPb()
+    return await getPocketBase()
      .collection("workflow")
      .update<Workflow>(data.id as string, data);
  }
-  return await getPb().collection("workflow").create<Workflow>(data);
-};

-export type WorkflowListReq = {
-  page: number;
-  perPage?: number;
-  enabled?: boolean;
-};
-export const list = async (req: WorkflowListReq) => {
-  let page = 1;
-  if (req.page) {
-    page = req.page;
-  }
-  let perPage = 10;
-  if (req.perPage) {
-    perPage = req.perPage;
-  }
-
-  const options: RecordListOptions = {
-    sort: "-created",
-  };
-
-  if (req.enabled !== undefined) {
-    options.filter = getPb().filter("enabled={:enabled}", {
-      enabled: req.enabled,
-    });
-  }
-
-  const response = await getPb().collection("workflow").getList<Workflow>(page, perPage, options);
-
-  return response;
+  return await getPocketBase().collection("workflow").create<Workflow>(data);
 };

 export const remove = async (id: string) => {
-  return await getPb().collection("workflow").delete(id);
+  return await getPocketBase().collection("workflow").delete(id);
 };

 type WorkflowLogsReq = {
  id: string;
-  page: number;
+  page?: number;
  perPage?: number;
 };

 export const logs = async (req: WorkflowLogsReq) => {
-  let page = 1;
-  if (req.page) {
-    page = req.page;
-  }
-  let perPage = 10;
-  if (req.perPage) {
-    perPage = req.perPage;
-  }
+  const page = req.page || 1;
+  const perPage = req.perPage || 10;

-  const response = await getPb()
+  return await getPocketBase()
    .collection("workflow_run_log")
    .getList<WorkflowRunLog>(page, perPage, {
      sort: "-created",
-      filter: getPb().filter("workflow={:workflowId}", { workflowId: req.id }),
+      filter: getPocketBase().filter("workflow={:workflowId}", { workflowId: req.id }),
    });
-
-  return response;
 };
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -10,7 +10,7 @@ import Dashboard from "./pages/dashboard/Dashboard";
 import Account from "./pages/setting/Account";
 import Notify from "./pages/setting/Notify";
 import SSLProvider from "./pages/setting/SSLProvider";
-import Workflow from "./pages/workflow";
+import WorkflowList from "./pages/workflow/WorkflowList";
 import WorkflowDetail from "./pages/workflow/WorkflowDetail";
 import Certificate from "./pages/certificate";

@@ -28,8 +28,8 @@ export const router = createHashRouter([
        element: <Access />,
      },
      {
-        path: "/workflow",
-        element: <Workflow />,
+        path: "/workflows",
+        element: <WorkflowList />,
      },
      {
        path: "/certificate",