feat(ui): new WorkflowDetail using antd

ui/src/pages/AuthLayout.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Outlet } from "react-router-dom";
 
-import Version from "@/components/Version";
+import Version from "@/components/ui/Version";
 import { getPocketBase } from "@/repository/pocketbase";
 
 const AuthLayout = () => {

ui/src/pages/ConsoleLayout.tsx

@@ -15,7 +15,7 @@ import {
   Workflow as WorkflowIcon,
 } from "lucide-react";
 
-import Version from "@/components/Version";
+import Version from "@/components/ui/Version";
 import { useBrowserTheme } from "@/hooks";
 import { getPocketBase } from "@/repository/pocketbase";
 

ui/src/pages/accesses/AccessList.tsx

@@ -73,7 +73,7 @@ const AccessList = () => {
           <Space size={0}>
             <AccessEditModal
               data={record}
-              mode="edit"
+              preset="edit"
               trigger={
                 <Tooltip title={t("access.action.edit")}>
                   <Button type="link" icon={<PencilIcon size={16} />} />
@@ -83,7 +83,7 @@ const AccessList = () => {
 
             <AccessEditModal
               data={{ ...record, id: undefined, name: `${record.name}-copy` }}
-              mode="add"
+              preset="add"
               trigger={
                 <Tooltip title={t("access.action.copy")}>
                   <Button type="link" icon={<CopyIcon size={16} />} />
@@ -168,7 +168,7 @@ const AccessList = () => {
         extra={[
           <AccessEditModal
             key="create"
-            mode="add"
+            preset="add"
             trigger={
               <Button type="primary" icon={<PlusIcon size={16} />}>
                 {t("access.action.add")}

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -1,46 +1,40 @@
-import { useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { cloneElement, memo, useEffect, useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, message, notification, Switch } from "antd";
-import { ArrowLeft as ArrowLeftIcon } from "lucide-react";
+import { useDeepCompareEffect } from "ahooks";
+import { Button, Card, Form, Input, message, Modal, notification, Tabs, Typography, type FormInstance } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { PageHeader } from "@ant-design/pro-components";
+import { z } from "zod";
 
 import Show from "@/components/Show";
 import End from "@/components/workflow/End";
 import NodeRender from "@/components/workflow/NodeRender";
-import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEditDialog";
 import WorkflowLog from "@/components/workflow/WorkflowLog";
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
-import { cn } from "@/components/ui/utils";
 import { useZustandShallowSelector } from "@/hooks";
-import { allNodesValidated, WorkflowNode } from "@/domain/workflow";
+import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
 import { useWorkflowStore } from "@/stores/workflow";
 import { run as runWorkflow } from "@/api/workflow";
+import { getErrMsg } from "@/utils/error";
 
 const WorkflowDetail = () => {
-  const navigate = useNavigate();
-  const { id } = useParams();
-
   const { t } = useTranslation();
 
   const [messageApi, MessageContextHolder] = message.useMessage();
-  const [_, NotificationContextHolder] = notification.useNotification();
-
-  // 3. 使用正确的选择器和 shallow 比较
-  const { workflow, init, switchEnable, save } = useWorkflowStore(useZustandShallowSelector(["workflow", "init", "switchEnable", "save"]));
-
-  // 从 url 中获取 workflowId
-  const [locId, setLocId] = useState<string>("");
-
-  const [tab, setTab] = useState("workflow");
-
-  const [running, setRunning] = useState(false);
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
+  const { id: workflowId } = useParams();
+  const { workflow, init, setBaseInfo, switchEnable, save } = useWorkflowStore(
+    useZustandShallowSelector(["workflow", "init", "setBaseInfo", "switchEnable", "save"])
+  );
   useEffect(() => {
-    init(id ?? "");
-    if (id) {
-      setLocId(id);
-    }
-  }, [id]);
+    init(workflowId);
+  }, [workflowId]);
+
+  const [tabValue, setTabValue] = useState<"orchestrate" | "runlog">("orchestrate");
+
+  // const [running, setRunning] = useState(false);
 
   const elements = useMemo(() => {
     let current = workflow.draft as WorkflowNode;
@@ -58,130 +52,213 @@ const WorkflowDetail = () => {
     return elements;
   }, [workflow]);
 
-  const handleBackClick = () => {
-    // 返回上一步
-    navigate(-1);
+  const handleBaseInfoFormFinish = async (fields: Pick<WorkflowModel, "name" | "description">) => {
+    try {
+      await setBaseInfo(fields.name!, fields.description!);
+    } catch (err) {
+      console.error(err);
+      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
+      return false;
+    }
   };
 
   const handleEnableChange = () => {
-    if (!workflow.enabled && !allNodesValidated(workflow.draft as WorkflowNode)) {
+    if (!workflow.enabled && !allNodesValidated(workflow.content!)) {
       messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
       return;
     }
     switchEnable();
-    if (!locId) {
-      navigate(`/workflows/${workflow.id}`);
-    }
   };
 
-  const handleWorkflowSaveClick = () => {
-    if (!allNodesValidated(workflow.draft as WorkflowNode)) {
-      messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
-      return;
-    }
-    save();
-    if (!locId) {
-      navigate(`/workflows/${workflow.id}`);
-    }
-  };
+  // const handleWorkflowSaveClick = () => {
+  //   if (!allNodesValidated(workflow.draft as WorkflowNode)) {
+  //     messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
+  //     return;
+  //   }
+  //   save();
+  // };
 
-  const getTabCls = (tabName: string) => {
-    if (tab === tabName) {
-      return "text-primary border-primary";
-    }
-    return "border-transparent hover:text-primary hover:border-b-primary";
-  };
+  // const handleRunClick = async () => {
+  //   if (running) return;
 
-  const handleRunClick = async () => {
-    if (running) {
-      return;
-    }
-    setRunning(true);
-    try {
-      await runWorkflow(workflow.id as string);
-      messageApi.success(t("workflow.detail.action.run.success"));
-    } catch (e) {
-      messageApi.warning(t("workflow.detail.action.run.failed"));
-    }
-    setRunning(false);
-  };
+  //   setRunning(true);
+  //   try {
+  //     await runWorkflow(workflow.id as string);
+  //     messageApi.success(t("workflow.detail.action.run.success"));
+  //   } catch (err) {
+  //     console.error(err);
+  //     messageApi.warning(t("workflow.detail.action.run.failed"));
+  //   } finally {
+  //     setRunning(false);
+  //   }
+  // };
 
   return (
     <div>
       {MessageContextHolder}
       {NotificationContextHolder}
 
-      <WorkflowProvider>
-        <div className="h-16 sticky  top-0 left-0 z-[1]` shadow-md bg-muted/40 flex justify-between items-center">
-          <div className="px-5 text-stone-700 dark:text-stone-200 flex items-center space-x-2">
-            <ArrowLeftIcon className="cursor-pointer" onClick={handleBackClick} />
-            <WorkflowBaseInfoEditDialog
-              trigger={
-                <div className="flex flex-col space-y-1 cursor-pointer items-start">
-                  <div className="truncate  max-w-[200px]">{workflow.name ? workflow.name : t("workflow.props.name.default")}</div>
-                  <div className="text-sm text-muted-foreground truncate  max-w-[200px]">
-                    {workflow.description ? workflow.description : t("workflow.props.description.placeholder")}
-                  </div>
-                </div>
-              }
-            />
-          </div>
-
-          <div className="flex justify-between space-x-5 text-muted-foreground text-lg h-full">
-            <div
-              className={cn("h-full flex items-center cursor-pointer border-b-2", getTabCls("workflow"))}
-              onClick={() => {
-                setTab("workflow");
-              }}
-            >
-              <div>{t("workflow.detail.title")}</div>
-            </div>
-            <div
-              className={cn("h-full flex items-center cursor-pointer border-b-2", getTabCls("history"))}
-              onClick={() => {
-                setTab("history");
-              }}
-            >
-              <div>{t("workflow.detail.history")}</div>
-            </div>
-          </div>
-
-          <div className="px-5 flex items-center space-x-3">
-            <Show when={!!workflow.enabled}>
-              <Show
-                when={!!workflow.hasDraft}
-                fallback={
-                  <Button type="text" onClick={handleRunClick}>
-                    {running ? t("workflow.detail.action.running") : t("workflow.detail.action.run")}
+      <Card styles={{ body: { padding: "0.5rem", paddingBottom: 0 } }}>
+        <PageHeader
+          style={{ paddingBottom: 0 }}
+          title={workflow.name}
+          extra={[
+            <Button.Group key="actions">
+              <WorkflowBaseInfoModalForm
+                model={workflow}
+                trigger={
+                  <Button ghost type="primary">
+                    {t("common.button.edit")}
                   </Button>
                 }
-              >
-                <Button type="primary" onClick={handleWorkflowSaveClick}>
-                  {t("workflow.detail.action.save")}
-                </Button>
-              </Show>
+                onFinish={handleBaseInfoFormFinish}
+              />
+
+              <Button ghost type="primary" onClick={handleEnableChange}>
+                {workflow.enabled ? t("common.button.disable") : t("common.button.enable")}
+              </Button>
+            </Button.Group>,
+          ]}
+        >
+          <Typography.Paragraph type="secondary">{workflow.description}</Typography.Paragraph>
+          <Tabs
+            activeKey={tabValue}
+            defaultActiveKey="orchestrate"
+            items={[
+              { key: "orchestrate", label: "流程编排" },
+              { key: "runlog", label: "执行历史" },
+            ]}
+            renderTabBar={(props, DefaultTabBar) => <DefaultTabBar {...props} style={{ margin: 0 }} />}
+            tabBarStyle={{ border: "none" }}
+            onChange={(key) => setTabValue(key as typeof tabValue)}
+          />
+        </PageHeader>
+      </Card>
+
+      <div className="p-4">
+        <Card>
+          <WorkflowProvider>
+            <Show when={tabValue === "orchestrate"}>
+              <div className="flex flex-col items-center">{elements}</div>
             </Show>
 
-            <Switch checked={workflow.enabled ?? false} onChange={handleEnableChange} />
-          </div>
-        </div>
-
-        <Show when={tab === "workflow"}>
-          <div className="p-4">
-            <div className="flex flex-col items-center p-4 bg-background">{elements}</div>
-          </div>
-        </Show>
-
-        <Show when={!!locId && tab === "history"}>
-          <div className="p-4">
-            <div className="flex flex-col items-center p-4 bg-background">
+            <Show when={tabValue === "runlog"}>
               <WorkflowLog />
-            </div>
-          </div>
-        </Show>
-      </WorkflowProvider>
+            </Show>
+          </WorkflowProvider>
+        </Card>
+      </div>
     </div>
   );
 };
 
+const WorkflowBaseInfoModalForm = memo(
+  ({
+    model,
+    trigger,
+    onFinish,
+  }: {
+    model: Pick<WorkflowModel, "name" | "description">;
+    trigger?: React.ReactElement;
+    onFinish?: (fields: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
+  }) => {
+    const { t } = useTranslation();
+
+    const [open, setOpen] = useState(false);
+
+    const triggerEl = useMemo(() => {
+      if (!trigger) {
+        return null;
+      }
+
+      return cloneElement(trigger, {
+        ...trigger.props,
+        onClick: () => {
+          setOpen(true);
+          trigger.props?.onClick?.();
+        },
+      });
+    }, [trigger, setOpen]);
+
+    const formSchema = z.object({
+      name: z
+        .string({ message: t("workflow.baseinfo.form.name.placeholder") })
+        .trim()
+        .min(1, t("workflow.baseinfo.form.name.placeholder"))
+        .max(64, t("common.errmsg.string_max", { max: 64 })),
+      description: z
+        .string({ message: t("workflow.baseinfo.form.description.placeholder") })
+        .trim()
+        .min(0, t("workflow.baseinfo.form.description.placeholder"))
+        .max(256, t("common.errmsg.string_max", { max: 256 }))
+        .nullish(),
+    });
+    const formRule = createSchemaFieldRule(formSchema);
+    const [form] = Form.useForm<FormInstance<z.infer<typeof formSchema>>>();
+    const [formPending, setFormPending] = useState(false);
+
+    const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
+    useDeepCompareEffect(() => {
+      setInitialValues(model as Partial<z.infer<typeof formSchema>>);
+    }, [model]);
+
+    const handleClickOk = async () => {
+      setFormPending(true);
+      try {
+        await form.validateFields();
+      } catch (err) {
+        setFormPending(false);
+        return Promise.reject();
+      }
+
+      try {
+        const ret = await onFinish?.(form.getFieldsValue(true));
+        if (ret != null && !ret) return;
+
+        setOpen(false);
+      } finally {
+        setFormPending(false);
+      }
+    };
+
+    const handleClickCancel = () => {
+      if (formPending) return Promise.reject();
+
+      setOpen(false);
+    };
+
+    return (
+      <>
+        {triggerEl}
+
+        <Modal
+          afterClose={() => setOpen(false)}
+          cancelButtonProps={{ disabled: formPending }}
+          closable
+          confirmLoading={formPending}
+          destroyOnClose
+          okText={t("common.button.save")}
+          open={open}
+          title={t(`workflow.baseinfo.modal.title`)}
+          width={480}
+          onOk={handleClickOk}
+          onCancel={handleClickCancel}
+        >
+          <div className="pt-4 pb-2">
+            <Form form={form} initialValues={initialValues} layout="vertical">
+              <Form.Item name="name" label={t("workflow.baseinfo.form.name.label")} rules={[formRule]}>
+                <Input placeholder={t("workflow.baseinfo.form.name.placeholder")} />
+              </Form.Item>
+
+              <Form.Item name="description" label={t("workflow.baseinfo.form.description.label")} rules={[formRule]}>
+                <Input placeholder={t("workflow.baseinfo.form.description.placeholder")} />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      </>
+    );
+  }
+);
+
 export default WorkflowDetail;

ui/src/pages/workflows/WorkflowList.tsx

@@ -7,6 +7,7 @@ import {
   Divider,
   Empty,
   Menu,
+  message,
   Modal,
   notification,
   Radio,
@@ -24,7 +25,7 @@ import { Filter as FilterIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
-import { WorkflowModel } from "@/domain/workflow";
+import { allNodesValidated, type WorkflowModel } from "@/domain/workflow";
 import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow";
 import { getErrMsg } from "@/utils/error";
 
@@ -36,6 +37,7 @@ const WorkflowList = () => {
 
   const { token: themeToken } = theme.useToken();
 
+  const [messageApi, MessageContextHolder] = message.useMessage();
   const [modalApi, ModelContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
@@ -146,7 +148,7 @@ const WorkflowList = () => {
     },
     {
       key: "lastExecutedAt",
-      title: "最近执行状态",
+      title: t("workflow.props.latest_execution_status"),
       render: () => {
         // TODO: 最近执行状态
         return <>TODO</>;
@@ -237,6 +239,11 @@ const WorkflowList = () => {
 
   const handleEnabledChange = async (workflow: WorkflowModel) => {
     try {
+      if (!workflow.enabled && !allNodesValidated(workflow.content!)) {
+        messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
+        return;
+      }
+
       const resp = await saveWorkflow({
         id: workflow.id,
         enabled: !tableData.find((item) => item.id === workflow.id)?.enabled,
@@ -276,11 +283,12 @@ const WorkflowList = () => {
   };
 
   const handleCreateClick = () => {
-    navigate("/workflows/");
+    alert("TODO");
   };
 
   return (
     <div className="p-4">
+      {MessageContextHolder}
       {ModelContextHolder}
       {NotificationContextHolder}