refactor: clean code

ui/src/App.tsx

@@ -30,7 +30,13 @@ const RootApp = () => {
     dayjs.locale(i18n.language);
   };
   i18n.on("languageChanged", handleLanguageChanged);
-  useLayoutEffect(handleLanguageChanged, [antdLocalesMap, i18n]);
+  useLayoutEffect(() => {
+    handleLanguageChanged();
+
+    return () => {
+      i18n.off("languageChanged", handleLanguageChanged);
+    };
+  }, [antdLocalesMap, i18n]);
 
   const antdThemesMap: Record<string, ThemeConfig> = useMemo(
     () => ({

ui/src/components/DrawerForm.tsx

@@ -46,7 +46,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
     trigger: "onOpenChange",
   });
 
-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
   const {
     form: formInst,
@@ -66,7 +66,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
     },
   });
   const mergedFormProps = {
-    preserve: drawerProps?.destroyOnClose ? false : undefined,
+    clearOnDestroy: drawerProps?.destroyOnClose ? true : undefined,
     ...formProps,
     ...props,
   };
@@ -86,11 +86,18 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
 
   return (
     <>
-      {triggerDom}
+      {triggerEl}
 
       <Drawer
+        afterOpenChange={(open) => {
+          if (!open && !mergedFormProps.preserve) {
+            formInst.resetFields();
+          }
+
+          drawerProps?.afterOpenChange?.(open);
+        }}
         footer={
-          <Space>
+          <Space className="w-full justify-end">
             <Button {...cancelButtonProps} onClick={handleCancelClick}>
               {cancelText || t("common.button.cancel")}
             </Button>

ui/src/components/ModalForm.tsx

@@ -57,7 +57,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
     trigger: "onOpenChange",
   });
 
-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
   const {
     form: formInst,
@@ -77,7 +77,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
     },
   });
   const mergedFormProps = {
-    preserve: modalProps?.destroyOnClose ? false : undefined,
+    clearOnDestroy: modalProps?.destroyOnClose ? true : undefined,
     ...formProps,
     ...props,
   };
@@ -97,9 +97,16 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
 
   return (
     <>
-      {triggerDom}
+      {triggerEl}
 
       <Modal
+        afterClose={() => {
+          if (!mergedFormProps.preserve) {
+            formInst.resetFields();
+          }
+
+          modalProps?.afterClose?.();
+        }}
         cancelButtonProps={cancelButtonProps}
         cancelText={cancelText}
         confirmLoading={formPending}

ui/src/components/access/AccessEditForm.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { forwardRef, useImperativeHandle, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
@@ -64,11 +64,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
     initialValues: initialValues,
   });
 
-  const [fieldProvider, setFieldProvider] = useState(initialValues?.provider);
+  const configProvider = Form.useWatch("provider", formInst);
-  useEffect(() => {
-    setFieldProvider(initialValues?.provider);
-  }, [initialValues?.provider]);
-
   const [configFormInst] = Form.useForm();
   const configFormName = useAntdFormName({ form: configFormInst, name: "accessEditConfigForm" });
   const configFormComponent = useMemo(() => {
@@ -77,7 +73,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
       NOTICE: If you add new child component, please keep ASCII order.
      */
     const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, initialValues: initialValues?.config };
-    switch (fieldProvider) {
+    switch (configProvider) {
       case ACCESS_PROVIDERS.ACMEHTTPREQ:
         return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
       case ACCESS_PROVIDERS.ALIYUN:
@@ -117,7 +113,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
       case ACCESS_PROVIDERS.WEBHOOK:
         return <AccessEditFormWebhookConfig {...configFormProps} />;
     }
-  }, [disabled, initialValues, fieldProvider, configFormInst, configFormName]);
+  }, [disabled, initialValues, configProvider, configFormInst, configFormName]);
 
   const handleFormProviderChange = (name: string) => {
     if (name === configFormName) {
@@ -127,8 +123,8 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   };
 
   const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
-    if (values.provider !== fieldProvider) {
+    if (values.provider !== configProvider) {
-      setFieldProvider(values.provider);
+      formInst.setFieldValue("provider", values.provider);
     }
 
     onValuesChange?.(values);
@@ -153,7 +149,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   return (
     <Form.Provider onFormChange={handleFormProviderChange}>
       <div className={className} style={style}>
-        <Form {...formProps} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
+        <Form {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
           <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
             <Input placeholder={t("access.form.name.placeholder")} />
           </Form.Item>

ui/src/components/access/AccessEditFormKubernetesConfig.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { flushSync } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
 import { useDeepCompareEffect } from "ahooks";
@@ -55,7 +54,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
       setFieldKubeFileList([]);
     }
 
-    flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
   };
 
   return (

ui/src/components/access/AccessEditFormSSHConfig.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { flushSync } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
 import { useDeepCompareEffect } from "ahooks";
@@ -33,8 +32,14 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
   const { t } = useTranslation();
 
   const formSchema = z.object({
-    host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
+    host: z
-    port: z.number().int().gte(1, t("common.errmsg.port_invalid")).lte(65535, t("common.errmsg.port_invalid")),
+      .string({ message: t("access.form.ssh_host.placeholder") })
+      .refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
+    port: z
+      .number({ message: t("access.form.ssh_port.placeholder") })
+      .int()
+      .gte(1, t("common.errmsg.port_invalid"))
+      .lte(65535, t("common.errmsg.port_invalid")),
     username: z
       .string()
       .min(1, "access.form.ssh_username.placeholder")
@@ -74,7 +79,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
       setFieldKeyFileList([]);
     }
 
-    flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
   };
 
   return (

ui/src/components/access/AccessEditModal.tsx

@@ -34,7 +34,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
     trigger: "onOpenChange",
   });
 
-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
   const formRef = useRef<AccessEditFormInstance>(null);
   const [formPending, setFormPending] = useState(false);
@@ -86,7 +86,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
     <>
       {NotificationContextHolder}
 
-      {triggerDom}
+      {triggerEl}
 
       <Modal
         afterClose={() => setOpen(false)}

ui/src/components/certificate/CertificateDetailDrawer.tsx

@@ -21,11 +21,11 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
     trigger: "onOpenChange",
   });
 
-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
   return (
     <>
-      {triggerDom}
+      {triggerEl}
 
       <Drawer
         afterOpenChange={setOpen}
@@ -34,7 +34,7 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
         open={open}
         loading={loading}
         placement="right"
-        title={`certimate-${data?.id}`}
+        title={`Certificate #${data?.id}`}
         width={640}
         onClose={() => setOpen(false)}
       >

ui/src/components/notification/NotifyChannelEditForm.tsx

@@ -80,7 +80,16 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
     });
 
     return (
-      <Form {...formProps} className={className} style={style} form={formInst} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
+      <Form
+        {...formProps}
+        className={className}
+        style={style}
+        form={formInst}
+        disabled={disabled}
+        layout="vertical"
+        scrollToFirstError
+        onValuesChange={handleFormChange}
+      >
         {formFieldsComponent}
       </Form>
     );

ui/src/components/provider/DeployProviderPicker.tsx

@@ -1,6 +1,5 @@
 import { memo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDebounceEffect } from "ahooks";
 import { Avatar, Card, Col, Empty, Flex, Input, Row, Typography } from "antd";
 
 import Show from "@/components/Show";
@@ -15,25 +14,17 @@ export type DeployProviderPickerProps = {
 const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPickerProps) => {
   const { t } = useTranslation();
 
-  const allProviders = Array.from(deployProvidersMap.values());
-  const [providers, setProviders] = useState(allProviders);
   const [keyword, setKeyword] = useState<string>();
-  useDebounceEffect(
+
-    () => {
+  const providers = Array.from(deployProvidersMap.values());
-      if (keyword) {
+  const filteredProviders = providers.filter((provider) => {
-        setProviders(
+    if (keyword) {
-          allProviders.filter((provider) => {
+      const value = keyword.toLowerCase();
-            const value = keyword.toLowerCase();
+      return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
-            return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
+    }
-          })
+
-        );
+    return true;
-      } else {
+  });
-        setProviders(allProviders);
-      }
-    },
-    [keyword],
-    { wait: 300 }
-  );
 
   const handleProviderTypeSelect = (value: string) => {
     onSelect?.(value);
@@ -44,9 +35,9 @@ const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPick
       <Input.Search placeholder={t("workflow_node.deploy.search.provider.placeholder")} onChange={(e) => setKeyword(e.target.value.trim())} />
 
       <div className="mt-4">
-        <Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
+        <Show when={filteredProviders.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
           <Row gutter={[16, 16]}>
-            {providers.map((provider, index) => {
+            {filteredProviders.map((provider, index) => {
               return (
                 <Col key={index} span={12}>
                   <Card

ui/src/components/workflow/WorkflowRunDetailDrawer.tsx

@@ -24,13 +24,13 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR
     trigger: "onOpenChange",
   });
 
-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
   return (
     <>
-      {triggerDom}
+      {triggerEl}
 
-      <Drawer destroyOnClose open={open} loading={loading} placement="right" title={`runlog-${data?.id}`} width={640} onClose={() => setOpen(false)}>
+      <Drawer destroyOnClose open={open} loading={loading} placement="right" title={`WorkflowRun #${data?.id}`} width={640} onClose={() => setOpen(false)}>
         <Show when={!!data}>
           <Show when={data!.status === WORKFLOW_RUN_STATUSES.SUCCEEDED}>
             <Alert showIcon type="success" message={<Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>} />

ui/src/domain/workflow.ts

@@ -152,14 +152,14 @@ export const initWorkflow = (options: InitWorkflowOptions = {}): WorkflowModel =
   root.config = { trigger: WORKFLOW_TRIGGERS.MANUAL };
 
   if (options.template === "standard") {
-    let temp = root;
+    let current = root;
-    temp.next = newNode(WorkflowNodeType.Apply, {});
+    current.next = newNode(WorkflowNodeType.Apply, {});
 
-    temp = temp.next;
+    current = current.next;
-    temp.next = newNode(WorkflowNodeType.Deploy, {});
+    current.next = newNode(WorkflowNodeType.Deploy, {});
 
-    temp = temp.next;
+    current = current.next;
-    temp.next = newNode(WorkflowNodeType.Notify, {});
+    current.next = newNode(WorkflowNodeType.Notify, {});
   }
 
   return {

ui/src/hooks/useAntdForm.ts

@@ -19,7 +19,8 @@ export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> {
 }
 
 /**
- *
+ * 生成并获取一个 antd 表单的实例、属性等。
+ * 通常为配合 Form 组件使用，以减少样板代码。
  * @param {UseAntdFormOptions} options
  * @returns {UseAntdFormReturns}
  */
@@ -74,9 +75,9 @@ const useAntdForm = <T extends NonNullable<unknown> = any>({ form, initialValues
         .then(() => {
           resolve(
             Promise.resolve(onSubmit?.(values))
-              .then((data) => {
+              .then((ret) => {
                 setFormPending(false);
-                return data;
+                return ret;
               })
               .catch((err) => {
                 setFormPending(false);

ui/src/hooks/useAntdFormName.ts

@@ -6,6 +6,12 @@ export interface UseAntdFormNameOptions<T extends NonNullable<unknown> = any> {
   name?: string;
 }
 
+/**
+ * 生成并获取一个 antd 表单的唯一名称。
+ * 通常为配合 Form 组件使用，避免页面上同时存在多个表单时若有同名的 FormItem 会产生冲突。
+ * @param {UseAntdFormNameOptions} options
+ * @returns {string}
+ */
 const useAntdFormName = <T extends NonNullable<unknown> = any>(options: UseAntdFormNameOptions<T>) => {
   const formName = useCreation(() => `${options.name}_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, [options.name, options.form]);
   return formName;

ui/src/hooks/useTriggerElement.ts

@@ -5,7 +5,8 @@ export type UseTriggerElementOptions = {
 };
 
 /**
- * 获取一个触发器元素。通常为配合 Drawer、Modal 等组件使用。
+ * 获取一个触发器元素。
+ * 通常为配合 Drawer、Modal 等组件使用。
  * @param {React.ReactNode} trigger
  * @param {UseTriggerElementOptions} [options]
  * @returns {React.ReactElement}

ui/src/main.tsx

@@ -1,8 +1,7 @@
-import React from "react";
+import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import dayjs from "dayjs";
 import dayjsUtc from "dayjs/plugin/utc";
-import "dayjs/locale/zh-cn";
 
 import App from "./App";
 import "./i18n";
@@ -11,7 +10,7 @@ import "./global.css";
 dayjs.extend(dayjsUtc);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );

ui/src/pages/ConsoleLayout.tsx

@@ -1,6 +1,6 @@
 import { memo, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
   CloudServerOutlined as CloudServerOutlinedIcon,
   GlobalOutlined as GlobalOutlinedIcon,
@@ -16,7 +16,7 @@ import {
 import { Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd";
 
 import Version from "@/components/Version";
-import { useBrowserTheme } from "@/hooks";
+import { useBrowserTheme, useTriggerElement } from "@/hooks";
 import { getPocketBase } from "@/repository/pocketbase";
 
 const ConsoleLayout = () => {
@@ -26,16 +26,6 @@ const ConsoleLayout = () => {
 
   const { token: themeToken } = theme.useToken();
 
-  const [siderOpen, setSiderOpen] = useState(false);
-
-  const handleSiderOpen = () => {
-    setSiderOpen(true);
-  };
-
-  const handleSiderClose = () => {
-    setSiderOpen(false);
-  };
-
   const handleLogoutClick = () => {
     auth.clear();
     navigate("/login");
@@ -67,20 +57,7 @@ const ConsoleLayout = () => {
         <Layout.Header className="sticky inset-x-0 top-0 z-[19] p-0 shadow-sm" style={{ background: themeToken.colorBgContainer }}>
           <div className="flex size-full items-center justify-between overflow-hidden px-4">
             <div className="flex items-center gap-4">
-              <Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} />
+              <SiderMenuDrawer trigger={<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" />} />
-              <Drawer
-                closable={false}
-                destroyOnClose
-                open={siderOpen}
-                placement="left"
-                styles={{
-                  content: { paddingTop: themeToken.paddingSM, paddingBottom: themeToken.paddingSM },
-                  body: { padding: 0 },
-                }}
-                onClose={handleSiderClose}
-              >
-                <SiderMenu onSelect={() => handleSiderClose()} />
-              </Drawer>
             </div>
             <div className="flex size-full grow items-center justify-end gap-4 overflow-hidden">
               <Tooltip title={t("common.menu.theme")} mouseEnterDelay={2}>
@@ -159,10 +136,10 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
 
   return (
     <>
-      <Link to="/" className="flex w-full items-center gap-2 overflow-hidden px-4 font-semibold">
+      <div className="flex w-full items-center gap-2 overflow-hidden px-4 font-semibold">
         <img src="/logo.svg" className="size-[36px]" />
         <span className="h-[64px] w-[74px] truncate leading-[64px] dark:text-white">Certimate</span>
-      </Link>
+      </div>
       <div className="w-full grow overflow-y-auto overflow-x-hidden">
         <Menu
           items={menuItems}
@@ -177,6 +154,34 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
   );
 });
 
+const SiderMenuDrawer = memo(({ trigger }: { trigger: React.ReactNode }) => {
+  const { token: themeToken } = theme.useToken();
+
+  const [siderOpen, setSiderOpen] = useState(false);
+
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setSiderOpen(true) });
+
+  return (
+    <>
+      {triggerEl}
+
+      <Drawer
+        closable={false}
+        destroyOnClose
+        open={siderOpen}
+        placement="left"
+        styles={{
+          content: { paddingTop: themeToken.paddingSM, paddingBottom: themeToken.paddingSM },
+          body: { padding: 0 },
+        }}
+        onClose={() => setSiderOpen(false)}
+      >
+        <SiderMenu onSelect={() => setSiderOpen(false)} />
+      </Drawer>
+    </>
+  );
+});
+
 const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
   const { t } = useTranslation();
 

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -23,7 +23,7 @@ import ModalForm from "@/components/ModalForm";
 import Show from "@/components/Show";
 import WorkflowElements from "@/components/workflow/WorkflowElements";
 import WorkflowRuns from "@/components/workflow/WorkflowRuns";
-import { type WorkflowModel, isAllNodesValidated } from "@/domain/workflow";
+import { isAllNodesValidated } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
 import { remove as removeWorkflow } from "@/repository/workflow";
 import { useWorkflowStore } from "@/stores/workflow";
@@ -40,7 +40,7 @@ const WorkflowDetail = () => {
 
   const { id: workflowId } = useParams();
   const { workflow, initialized, ...workflowState } = useWorkflowStore(
-    useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setBaseInfo", "setEnabled", "release", "discard"])
+    useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setEnabled", "release", "discard"])
   );
   useEffect(() => {
     // TODO: loading & error
@@ -66,16 +66,6 @@ const WorkflowDetail = () => {
     setAllowRun(hasReleased);
   }, [workflow.content, workflow.draft, workflow.hasDraft, isRunning]);
 
-  const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => {
-    try {
-      await workflowState.setBaseInfo(values.name!, values.description!);
-    } catch (err) {
-      console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
-      return false;
-    }
-  };
-
   const handleEnableChange = async () => {
     if (!workflow.enabled && (!workflow.content || !isAllNodesValidated(workflow.content))) {
       messageApi.warning(t("workflow.action.enable.failed.uncompleted"));
@@ -194,12 +184,7 @@ const WorkflowDetail = () => {
           extra={
             initialized
               ? [
-                  <WorkflowBaseInfoModalForm
+                  <WorkflowBaseInfoModal key="edit" trigger={<Button>{t("common.button.edit")}</Button>} />,
-                    key="edit"
-                    data={workflow}
-                    trigger={<Button>{t("common.button.edit")}</Button>}
-                    onFinish={handleBaseInfoFormFinish}
-                  />,
 
                   <Button key="enable" onClick={handleEnableChange}>
                     {workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")}
@@ -301,17 +286,13 @@ const WorkflowDetail = () => {
   );
 };
 
-const WorkflowBaseInfoModalForm = ({
+const WorkflowBaseInfoModal = ({ trigger }: { trigger?: React.ReactNode }) => {
-  data,
-  trigger,
-  onFinish,
-}: {
-  data: Pick<WorkflowModel, "name" | "description">;
-  trigger?: React.ReactNode;
-  onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
-}) => {
   const { t } = useTranslation();
 
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const { workflow, ...workflowState } = useWorkflowStore(useZustandShallowSelector(["workflow", "setBaseInfo"]));
+
   const formSchema = z.object({
     name: z
       .string({ message: t("workflow.detail.baseinfo.form.name.placeholder") })
@@ -331,11 +312,15 @@ const WorkflowBaseInfoModalForm = ({
     formProps,
     ...formApi
   } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: data,
+    initialValues: { name: workflow.name, description: workflow.description },
-    onSubmit: async () => {
+    onSubmit: async (values) => {
-      const ret = await onFinish?.(formInst.getFieldsValue(true));
+      try {
-      if (ret != null && !ret) return false;
+        await workflowState.setBaseInfo(values.name!, values.description!);
-      return true;
+      } catch (err) {
+        console.error(err);
+        notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
+        return false;
+      }
     },
   });
 
@@ -344,26 +329,30 @@ const WorkflowBaseInfoModalForm = ({
   };
 
   return (
-    <ModalForm
+    <>
-      disabled={formPending}
+      {NotificationContextHolder}
-      layout="vertical"
-      form={formInst}
-      modalProps={{ destroyOnClose: true }}
-      okText={t("common.button.save")}
-      title={t(`workflow.detail.baseinfo.modal.title`)}
-      trigger={trigger}
-      width={480}
-      {...formProps}
-      onFinish={handleFormFinish}
-    >
-      <Form.Item name="name" label={t("workflow.detail.baseinfo.form.name.label")} rules={[formRule]}>
-        <Input placeholder={t("workflow.detail.baseinfo.form.name.placeholder")} />
-      </Form.Item>
 
-      <Form.Item name="description" label={t("workflow.detail.baseinfo.form.description.label")} rules={[formRule]}>
+      <ModalForm
-        <Input placeholder={t("workflow.detail.baseinfo.form.description.placeholder")} />
+        disabled={formPending}
-      </Form.Item>
+        layout="vertical"
-    </ModalForm>
+        form={formInst}
+        modalProps={{ destroyOnClose: true }}
+        okText={t("common.button.save")}
+        title={t(`workflow.detail.baseinfo.modal.title`)}
+        trigger={trigger}
+        width={480}
+        {...formProps}
+        onFinish={handleFormFinish}
+      >
+        <Form.Item name="name" label={t("workflow.detail.baseinfo.form.name.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow.detail.baseinfo.form.name.placeholder")} />
+        </Form.Item>
+
+        <Form.Item name="description" label={t("workflow.detail.baseinfo.form.description.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow.detail.baseinfo.form.description.placeholder")} />
+        </Form.Item>
+      </ModalForm>
+    </>
   );
 };