feat(ui): new workflow node panel

internal/applicant/acme-user.go

@@ -75,7 +75,7 @@ func (u *acmeUser) getPrivateKeyPEM() string {
 	return u.privkey
 }
 
-type AcmeAccountRepository interface {
+type acmeAccountRepository interface {
 	GetByCAAndEmail(ca, email string) (*domain.AcmeAccount, error)
 	Save(ca, email, key string, resource *registration.Resource) error
 }

internal/applicant/applicant.go

@@ -2,6 +2,7 @@ package applicant
 
 import (
 	"context"
+	"encoding/json"
 	"fmt"
 	"os"
 	"strconv"
@@ -13,7 +14,6 @@ import (
 	"github.com/go-acme/lego/v4/challenge/dns01"
 	"github.com/go-acme/lego/v4/lego"
 
-	"github.com/usual2970/certimate/internal/app"
 	"github.com/usual2970/certimate/internal/domain"
 	"github.com/usual2970/certimate/internal/repository"
 )
@@ -37,11 +37,11 @@ type ApplyCertResult struct {
 	CSR               string
 }
 
-type applicant interface {
+type Applicant interface {
 	Apply() (*ApplyCertResult, error)
 }
 
-func NewWithApplyNode(node *domain.WorkflowNode) (applicant, error) {
+func NewWithApplyNode(node *domain.WorkflowNode) (Applicant, error) {
 	if node.Type != domain.WorkflowNodeTypeApply {
 		return nil, fmt.Errorf("node type is not apply")
 	}
@@ -74,14 +74,15 @@ func NewWithApplyNode(node *domain.WorkflowNode) (applicant, error) {
 }
 
 func apply(challengeProvider challenge.Provider, applyConfig *applyConfig) (*ApplyCertResult, error) {
-	record, _ := app.GetApp().Dao().FindFirstRecordByFilter("settings", "name='sslProvider'")
+	settingsRepo := repository.NewSettingsRepository()
+	settings, _ := settingsRepo.GetByName(context.Background(), "sslProvider")
 
 	sslProvider := &acmeSSLProviderConfig{
 		Config:   acmeSSLProviderConfigContent{},
 		Provider: defaultSSLProvider,
 	}
-	if record != nil {
-		if err := record.UnmarshalJSONField("content", sslProvider); err != nil {
+	if settings != nil {
+		if err := json.Unmarshal([]byte(settings.Content), sslProvider); err != nil {
 			return nil, err
 		}
 	}

internal/notify/notify.go

@@ -2,14 +2,15 @@ package notify
 
 import (
 	"context"
+	"encoding/json"
 	"fmt"
 
 	"golang.org/x/sync/errgroup"
 
-	"github.com/usual2970/certimate/internal/app"
 	"github.com/usual2970/certimate/internal/domain"
 	"github.com/usual2970/certimate/internal/pkg/core/notifier"
 	"github.com/usual2970/certimate/internal/pkg/utils/maps"
+	"github.com/usual2970/certimate/internal/repository"
 )
 
 func SendToAllChannels(subject, message string) error {
@@ -48,13 +49,14 @@ func SendToChannel(subject, message string, channel string, channelConfig map[st
 }
 
 func getEnabledNotifiers() ([]notifier.Notifier, error) {
-	settings, err := app.GetApp().Dao().FindFirstRecordByFilter("settings", "name='notifyChannels'")
+	settingsRepo := repository.NewSettingsRepository()
+	settings, err := settingsRepo.GetByName(context.Background(), "notifyChannels")
 	if err != nil {
 		return nil, fmt.Errorf("find notifyChannels error: %w", err)
 	}
 
 	rs := make(map[string]map[string]any)
-	if err := settings.UnmarshalJSONField("content", &rs); err != nil {
+	if err := json.Unmarshal([]byte(settings.Content), &rs); err != nil {
 		return nil, fmt.Errorf("unmarshal notifyChannels error: %w", err)
 	}
 

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);
-  useEffect(() => {
-    setFieldProvider(initialValues?.provider);
-  }, [initialValues?.provider]);
-
+  const configProvider = Form.useWatch("provider", formInst);
   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) {
-      setFieldProvider(values.provider);
+    if (values.provider !== configProvider) {
+      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/AccessEditFormACMEHttpReqConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForACMEHttpReq } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormACMEHttpReqConfigFieldValues = Partial<AccessConfigForACMEHttpReq>;
 
@@ -41,17 +40,13 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValu
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormACMEHttpReqConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="endpoint"
         label={t("access.form.acmehttpreq_endpoint.label")}

ui/src/components/access/AccessEditFormAWSConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForAWS } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormAWSConfigFieldValues = Partial<AccessConfigForAWS>;
 
@@ -53,17 +52,13 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onVa
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormAWSConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKeyId"
         label={t("access.form.aws_access_key_id.label")}

ui/src/components/access/AccessEditFormAliyunConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForAliyun } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormAliyunConfigFieldValues = Partial<AccessConfigForAliyun>;
 
@@ -39,17 +38,13 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, o
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormAliyunConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKeyId"
         label={t("access.form.aliyun_access_key_id.label")}

ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForBaiduCloud } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormBaiduCloudConfigFieldValues = Partial<AccessConfigForBaiduCloud>;
 
@@ -39,17 +38,13 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValue
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormBaiduCloudConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKeyId"
         label={t("access.form.baiducloud_access_key_id.label")}

ui/src/components/access/AccessEditFormBytePlusConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForBytePlus } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormBytePlusConfigFieldValues = Partial<AccessConfigForBytePlus>;
 
@@ -39,17 +38,13 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues,
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormBytePlusConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKey"
         label={t("access.form.byteplus_access_key.label")}

ui/src/components/access/AccessEditFormCloudflareConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForCloudflare } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormCloudflareConfigFieldValues = Partial<AccessConfigForCloudflare>;
 
@@ -33,17 +32,13 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValue
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormCloudflareConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="dnsApiToken"
         label={t("access.form.cloudflare_dns_api_token.label")}

ui/src/components/access/AccessEditFormDogeCloudConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForDogeCloud } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormDogeCloudConfigFieldValues = Partial<AccessConfigForDogeCloud>;
 
@@ -39,17 +38,13 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormDogeCloudConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKey"
         label={t("access.form.dogecloud_access_key.label")}

ui/src/components/access/AccessEditFormGoDaddyConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForGoDaddy } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormGoDaddyConfigFieldValues = Partial<AccessConfigForGoDaddy>;
 
@@ -39,17 +38,13 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues,
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormGoDaddyConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="apiKey"
         label={t("access.form.godaddy_api_key.label")}

ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForHuaweiCloud } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormHuaweiCloudConfigFieldValues = Partial<AccessConfigForHuaweiCloud>;
 
@@ -46,17 +45,13 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValu
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormHuaweiCloudConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKeyId"
         label={t("access.form.huaweicloud_access_key_id.label")}

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";
@@ -8,7 +7,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForKubernetes } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 import { readFileContent } from "@/utils/file";
 
 type AccessEditFormKubernetesConfigFieldValues = Partial<AccessConfigForKubernetes>;
@@ -36,14 +34,11 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
-  const [kubeFileList, setKubeFileList] = useState<UploadFile[]>([]);
+  const fieldKubeConfig = Form.useWatch("kubeConfig", form);
+  const [fieldKubeFileList, setFieldKubeFileList] = useState<UploadFile[]>([]);
   useDeepCompareEffect(() => {
-    setKubeFileList(initialValues?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
+    setFieldKubeFileList(initialValues?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
   }, [initialValues]);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
@@ -52,31 +47,26 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
 
   const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      formInst.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
-      setKubeFileList([file]);
+      form.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
+      setFieldKubeFileList([file]);
     } else {
-      formInst.setFieldValue("kubeConfig", "");
-      setKubeFileList([]);
+      form.setFieldValue("kubeConfig", "");
+      setFieldKubeFileList([]);
     }
 
-    flushSync(() => onValuesChange?.(formInst.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item name="kubeConfig" noStyle rules={[formRule]}>
-        <Input.TextArea
-          autoComplete="new-password"
-          hidden
-          placeholder={t("access.form.k8s_kubeconfig.placeholder")}
-          value={formInst.getFieldValue("kubeConfig")}
-        />
+        <Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.k8s_kubeconfig.placeholder")} value={fieldKubeConfig} />
       </Form.Item>
       <Form.Item
         label={t("access.form.k8s_kubeconfig.label")}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.k8s_kubeconfig.tooltip") }}></span>}
       >
-        <Upload beforeUpload={() => false} fileList={kubeFileList} maxCount={1} onChange={handleKubeFileChange}>
+        <Upload beforeUpload={() => false} fileList={fieldKubeFileList} maxCount={1} onChange={handleKubeFileChange}>
           <Button icon={<UploadOutlinedIcon />}>{t("access.form.k8s_kubeconfig.upload")}</Button>
         </Upload>
       </Form.Item>

ui/src/components/access/AccessEditFormLocalConfig.tsx

@@ -1,7 +1,6 @@
 import { Form, type FormInstance } from "antd";
 
 import { type AccessConfigForLocal } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormLocalConfigFieldValues = Partial<AccessConfigForLocal>;
 
@@ -18,16 +17,20 @@ const initFormModel = (): AccessEditFormLocalConfigFieldValues => {
 };
 
 const AccessEditFormLocalConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormLocalConfigProps) => {
-  const { form: formInst, formProps } = useAntdForm({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
-
   const handleFormChange = (_: unknown, values: unknown) => {
     onValuesChange?.(values as AccessEditFormLocalConfigFieldValues);
   };
 
-  return <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}></Form>;
+  return (
+    <Form
+      form={form}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    ></Form>
+  );
 };
 
 export default AccessEditFormLocalConfig;

ui/src/components/access/AccessEditFormNameDotComConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForNameDotCom } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormNameDotComConfigFieldValues = Partial<AccessConfigForNameDotCom>;
 
@@ -39,17 +38,13 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValue
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormNameDotComConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="username"
         label={t("access.form.namedotcom_username.label")}

ui/src/components/access/AccessEditFormNameSiloConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForNameSilo } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormNameSiloConfigFieldValues = Partial<AccessConfigForNameSilo>;
 
@@ -33,17 +32,13 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues,
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormNameSiloConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="apiKey"
         label={t("access.form.namesilo_api_key.label")}

ui/src/components/access/AccessEditFormPowerDNSConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForPowerDNS } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormPowerDNSConfigFieldValues = Partial<AccessConfigForPowerDNS>;
 
@@ -35,17 +34,13 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues,
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormPowerDNSConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="apiUrl"
         label={t("access.form.powerdns_api_url.label")}

ui/src/components/access/AccessEditFormQiniuConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForQiniu } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormQiniuConfigFieldValues = Partial<AccessConfigForQiniu>;
 
@@ -39,17 +38,13 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, on
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormQiniuConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKey"
         label={t("access.form.qiniu_access_key.label")}

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";
@@ -8,7 +7,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForSSH } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 import { readFileContent } from "@/utils/file";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
 
@@ -34,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")),
-    port: z.number().int().gte(1, t("common.errmsg.port_invalid")).lte(65535, t("common.errmsg.port_invalid")),
+    host: z
+      .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")
@@ -55,14 +59,11 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
       .refine((v) => !v || form.getFieldValue("key"), t("access.form.ssh_key.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
-  const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
+  const fieldKey = Form.useWatch("key", form);
+  const [fieldKeyFileList, setFieldKeyFileList] = useState<UploadFile[]>([]);
   useDeepCompareEffect(() => {
-    setKeyFileList(initialValues?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
+    setFieldKeyFileList(initialValues?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
   }, [initialValues]);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
@@ -71,18 +72,18 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
 
   const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      formInst.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
-      setKeyFileList([file]);
+      form.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
+      setFieldKeyFileList([file]);
     } else {
-      formInst.setFieldValue("key", "");
-      setKeyFileList([]);
+      form.setFieldValue("key", "");
+      setFieldKeyFileList([]);
     }
 
-    flushSync(() => onValuesChange?.(formInst.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <div className="flex space-x-2">
         <div className="w-2/3">
           <Form.Item name="host" label={t("access.form.ssh_host.label")} rules={[formRule]}>
@@ -119,10 +120,10 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
       <div className="flex space-x-2">
         <div className="w-1/2">
           <Form.Item name="key" noStyle rules={[formRule]}>
-            <Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.ssh_key.placeholder")} value={formInst.getFieldValue("key")} />
+            <Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.ssh_key.placeholder")} value={fieldKey} />
           </Form.Item>
           <Form.Item label={t("access.form.ssh_key.label")} tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ssh_key.tooltip") }}></span>}>
-            <Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleKeyFileChange}>
+            <Upload beforeUpload={() => false} fileList={fieldKeyFileList} maxCount={1} onChange={handleKeyFileChange}>
               <Button icon={<UploadOutlinedIcon />}>{t("access.form.ssh_key.upload")}</Button>
             </Upload>
           </Form.Item>

ui/src/components/access/AccessEditFormTencentCloudConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForTencentCloud } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormTencentCloudConfigFieldValues = Partial<AccessConfigForTencentCloud>;
 
@@ -39,17 +38,13 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialVal
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormTencentCloudConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="secretId"
         label={t("access.form.tencentcloud_secret_id.label")}

ui/src/components/access/AccessEditFormVolcEngineConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForVolcEngine } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormVolcEngineConfigFieldValues = Partial<AccessConfigForVolcEngine>;
 
@@ -39,17 +38,13 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValue
       .trim(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormVolcEngineConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKeyId"
         label={t("access.form.volcengine_access_key_id.label")}

ui/src/components/access/AccessEditFormWebhookConfig.tsx

@@ -4,7 +4,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { type AccessConfigForWebhook } from "@/domain/access";
-import { useAntdForm } from "@/hooks";
 
 type AccessEditFormWebhookConfigFieldValues = Partial<AccessConfigForWebhook>;
 
@@ -29,17 +28,13 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues,
     url: z.string({ message: t("access.form.webhook_url.placeholder") }).url(t("common.errmsg.url_invalid")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    form: form,
-    initialValues: initialValues ?? initFormModel(),
-  });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values as AccessEditFormWebhookConfigFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item name="url" label={t("access.form.webhook_url.label")} rules={[formRule]}>
         <Input placeholder={t("access.form.webhook_url.placeholder")} />
       </Form.Item>

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());
+  const filteredProviders = providers.filter((provider) => {
     if (keyword) {
-        setProviders(
-          allProviders.filter((provider) => {
       const value = keyword.toLowerCase();
       return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
-          })
-        );
-      } else {
-        setProviders(allProviders);
     }
-    },
-    [keyword],
-    { wait: 300 }
-  );
+
+    return true;
+  });
 
   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/Panel.tsx

@@ -1,23 +0,0 @@
-import { useEffect } from "react";
-import { Drawer } from "antd";
-
-type AddNodePanelProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  children: React.ReactNode;
-  name: string;
-};
-
-const Panel = ({ open, onOpenChange, children, name }: AddNodePanelProps) => {
-  useEffect(() => {
-    onOpenChange(open);
-  }, [open, onOpenChange]);
-
-  return (
-    <Drawer destroyOnClose={true} open={open} title={name} width={640} onClose={() => onOpenChange(false)}>
-      {children}
-    </Drawer>
-  );
-};
-
-export default Panel;

ui/src/components/workflow/PanelBody.tsx

@@ -1,31 +0,0 @@
-import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
-
-import ApplyNodeForm from "./node/ApplyNodeForm";
-import DeployNodeForm from "./node/DeployNodeForm";
-import NotifyNodeForm from "./node/NotifyNodeForm";
-import StartNodeForm from "./node/StartNodeForm";
-
-type PanelBodyProps = {
-  data: WorkflowNode;
-};
-
-const PanelBody = ({ data }: PanelBodyProps) => {
-  const getBody = () => {
-    switch (data.type) {
-      case WorkflowNodeType.Start:
-        return <StartNodeForm node={data} />;
-      case WorkflowNodeType.Apply:
-        return <ApplyNodeForm node={data} />;
-      case WorkflowNodeType.Deploy:
-        return <DeployNodeForm node={data} />;
-      case WorkflowNodeType.Notify:
-        return <NotifyNodeForm node={data} />;
-      default:
-        return <> </>;
-    }
-  };
-
-  return <>{getBody()}</>;
-};
-
-export default PanelBody;

ui/src/components/workflow/PanelProvider.tsx

@@ -1,43 +0,0 @@
-import { createContext, useContext, useState } from "react";
-
-import Panel from "./Panel";
-
-type PanelContentProps = { name: string; children: React.ReactNode };
-
-type PanelContextProps = {
-  open: boolean;
-  showPanel: ({ name, children }: PanelContentProps) => void;
-  hidePanel: () => void;
-};
-
-const PanelContext = createContext<PanelContextProps | undefined>(undefined);
-
-export const PanelProvider = ({ children }: { children: React.ReactNode }) => {
-  const [open, setOpen] = useState(false);
-  const [panelContent, setPanelContent] = useState<PanelContentProps | null>(null);
-
-  const showPanel = (panelContent: PanelContentProps) => {
-    setOpen(true);
-    setPanelContent(panelContent);
-  };
-
-  const hidePanel = () => {
-    setOpen(false);
-    setPanelContent(null);
-  };
-
-  return (
-    <PanelContext.Provider value={{ open, showPanel, hidePanel }}>
-      {children}
-      <Panel open={open} onOpenChange={setOpen} children={panelContent?.children} name={panelContent?.name ?? ""} />
-    </PanelContext.Provider>
-  );
-};
-
-export const usePanel = () => {
-  const context = useContext(PanelContext);
-  if (!context) {
-    throw new Error("`usePanel` must be used within PanelProvider");
-  }
-  return context;
-};

ui/src/components/workflow/WorkflowElement.tsx

@@ -1,176 +1,44 @@
-import { useTranslation } from "react-i18next";
-import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
-import { Avatar, Button, Card, Dropdown, Popover, Space, Typography } from "antd";
-import { produce } from "immer";
+import { memo, useMemo } from "react";
 
-import Show from "@/components/Show";
-import { deployProvidersMap } from "@/domain/provider";
-import { notifyChannelsMap } from "@/domain/settings";
-import {
-  WORKFLOW_TRIGGERS,
-  type WorkflowNode,
-  type WorkflowNodeConfigForApply,
-  type WorkflowNodeConfigForDeploy,
-  type WorkflowNodeConfigForNotify,
-  type WorkflowNodeConfigForStart,
-  WorkflowNodeType,
-} from "@/domain/workflow";
-import { useZustandShallowSelector } from "@/hooks";
-import { useWorkflowStore } from "@/stores/workflow";
+import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 
-import PanelBody from "./PanelBody";
-import { usePanel } from "./PanelProvider";
-import AddNode from "./node/AddNode";
+import BranchNode from "./node/BranchNode";
+import CommonNode from "./node/CommonNode";
+import ConditionNode from "./node/ConditionNode";
+import EndNode from "./node/EndNode";
 
-export type NodeProps = {
+export type WorkflowElementProps = {
   node: WorkflowNode;
   disabled?: boolean;
+  branchId?: string;
+  branchIndex?: number;
 };
 
-const WorkflowElement = ({ node, disabled }: NodeProps) => {
-  const { t } = useTranslation();
-
-  const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
-  const { showPanel } = usePanel();
-
-  const renderNodeContent = () => {
-    if (!node.validated) {
-      return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
-    }
-
+const WorkflowElement = ({ node, disabled, ...props }: WorkflowElementProps) => {
+  const nodeComponent = useMemo(() => {
     switch (node.type) {
-      case WorkflowNodeType.Start: {
-        const config = (node.config as WorkflowNodeConfigForStart) ?? {};
-        return (
-          <div className="flex items-center justify-between space-x-2">
-            <Typography.Text className="truncate">
-              {config.trigger === WORKFLOW_TRIGGERS.AUTO
-                ? t("workflow.props.trigger.auto")
-                : config.trigger === WORKFLOW_TRIGGERS.MANUAL
-                  ? t("workflow.props.trigger.manual")
-                  : "　"}
-            </Typography.Text>
-            <Typography.Text className="truncate" type="secondary">
-              {config.trigger === WORKFLOW_TRIGGERS.AUTO ? config.triggerCron : ""}
-            </Typography.Text>
-          </div>
-        );
-      }
+      case WorkflowNodeType.Start:
+      case WorkflowNodeType.Apply:
+      case WorkflowNodeType.Deploy:
+      case WorkflowNodeType.Notify:
+        return <CommonNode node={node} disabled={disabled} />;
 
-      case WorkflowNodeType.Apply: {
-        const config = (node.config as WorkflowNodeConfigForApply) ?? {};
-        return <Typography.Text className="truncate">{config.domains || "　"}</Typography.Text>;
-      }
+      case WorkflowNodeType.Branch:
+        return <BranchNode node={node} disabled={disabled} />;
 
-      case WorkflowNodeType.Deploy: {
-        const config = (node.config as WorkflowNodeConfigForDeploy) ?? {};
-        const provider = deployProvidersMap.get(config.provider);
-        return (
-          <Space>
-            <Avatar src={provider?.icon} size="small" />
-            <Typography.Text className="truncate">{t(provider?.name ?? "")}</Typography.Text>
-          </Space>
-        );
-      }
+      case WorkflowNodeType.Condition:
+        return <ConditionNode node={node} disabled={disabled} branchId={props.branchId!} branchIndex={props.branchIndex!} />;
 
-      case WorkflowNodeType.Notify: {
-        const config = (node.config as WorkflowNodeConfigForNotify) ?? {};
-        const channel = notifyChannelsMap.get(config.channel as string);
-        return (
-          <div className="flex items-center justify-between space-x-2">
-            <Typography.Text className="truncate">{t(channel?.name ?? "　")}</Typography.Text>
-            <Typography.Text className="truncate" type="secondary">
-              {config.subject ?? ""}
-            </Typography.Text>
-          </div>
-        );
-      }
+      case WorkflowNodeType.End:
+        return <EndNode />;
 
-      default: {
+      default:
+        console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
         return <></>;
     }
-    }
-  };
+  }, [node, disabled, props]);
 
-  const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
-    const oldName = node.name;
-    const newName = e.target.innerText.trim();
-    if (oldName === newName) {
-      return;
-    }
-
-    updateNode(
-      produce(node, (draft) => {
-        draft.name = newName;
-      })
-    );
-  };
-
-  const handleNodeClick = () => {
-    if (disabled) return;
-
-    showPanel({
-      name: node.name,
-      children: <PanelBody data={node} />,
-    });
-  };
-
-  return (
-    <>
-      <Popover
-        arrow={false}
-        content={
-          <Show when={node.type !== WorkflowNodeType.Start}>
-            <Dropdown
-              menu={{
-                items: [
-                  {
-                    key: "delete",
-                    disabled: disabled,
-                    label: t("workflow_node.action.delete_node"),
-                    icon: <CloseCircleOutlinedIcon />,
-                    danger: true,
-                    onClick: () => {
-                      if (disabled) return;
-
-                      removeNode(node.id);
-                    },
-                  },
-                ],
-              }}
-              trigger={["click"]}
-            >
-              <Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
-            </Dropdown>
-          </Show>
-        }
-        overlayClassName="shadow-md"
-        overlayInnerStyle={{ padding: 0 }}
-        placement="rightTop"
-      >
-        <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable>
-          <div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
-            <div
-              className="focus:bg-background focus:text-foreground w-full overflow-hidden text-center outline-none focus:rounded-sm"
-              contentEditable
-              suppressContentEditableWarning
-              onBlur={handleNodeNameBlur}
-            >
-              {node.name}
-            </div>
-          </div>
-
-          <div className="flex flex-col justify-center px-4 py-2">
-            <div className="cursor-pointer text-sm" onClick={handleNodeClick}>
-              {renderNodeContent()}
-            </div>
-          </div>
-        </Card>
-      </Popover>
-
-      <AddNode node={node} disabled={disabled} />
-    </>
-  );
+  return <>{nodeComponent}</>;
 };
 
-export default WorkflowElement;
+export default memo(WorkflowElement);

ui/src/components/workflow/WorkflowElements.tsx

@@ -1,9 +1,8 @@
 import { useMemo } from "react";
 
+import WorkflowElement from "@/components/workflow/WorkflowElement";
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
-import EndNode from "@/components/workflow/node/EndNode";
-import NodeRender from "@/components/workflow/node/NodeRender";
-import { type WorkflowNode } from "@/domain/workflow";
+import { type WorkflowNode, WorkflowNodeType, newNode } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 
@@ -19,16 +18,16 @@ const WorkflowElements = ({ className, style, disabled }: WorkflowElementsProps)
   const elements = useMemo(() => {
     const nodes: JSX.Element[] = [];
 
-    let current = workflow.draft as WorkflowNode;
+    let current = workflow.draft as WorkflowNode | undefined;
     while (current) {
-      nodes.push(<NodeRender key={current.id} node={current} disabled={disabled} />);
-      current = current.next as WorkflowNode;
+      nodes.push(<WorkflowElement key={current.id} node={current} disabled={disabled} />);
+      current = current.next;
     }
 
-    nodes.push(<EndNode key="workflow-end" />);
+    nodes.push(<WorkflowElement key="end" node={newNode(WorkflowNodeType.End)} />);
 
     return nodes;
-  }, [workflow]);
+  }, [workflow, disabled]);
 
   return (
     <div className={className} style={style}>

ui/src/components/workflow/WorkflowProvider.tsx

@@ -1,6 +1,4 @@
-import React from "react";
-
-import { PanelProvider } from "./PanelProvider";
+import { PanelProvider } from "./panel/PanelProvider";
 
 const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
   return <PanelProvider>{children}</PanelProvider>;

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/components/workflow/node/AddNode.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
   CloudUploadOutlined as CloudUploadOutlinedIcon,
@@ -43,7 +43,7 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
         },
       };
     });
-  }, []);
+  }, [node.id, disabled]);
 
   return (
     <div className="relative py-6 before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']">
@@ -56,4 +56,4 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
   );
 };
 
-export default AddNode;
+export default memo(AddNode);

ui/src/components/workflow/node/ApplyNodeForm.tsx

@@ -2,9 +2,8 @@ import { memo, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FormOutlined as FormOutlinedIcon, PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
 import { useControllableValue } from "ahooks";
-import { AutoComplete, type AutoCompleteProps, Button, Divider, Form, Input, Select, Space, Switch, Tooltip, Typography } from "antd";
+import { AutoComplete, type AutoCompleteProps, Button, Divider, Form, type FormInstance, Input, Select, Space, Switch, Tooltip, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
-import { produce } from "immer";
 import { z } from "zod";
 
 import ModalForm from "@/components/ModalForm";
@@ -13,20 +12,22 @@ import AccessEditModal from "@/components/access/AccessEditModal";
 import AccessSelect from "@/components/access/AccessSelect";
 import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
 import { type WorkflowNode, type WorkflowNodeConfigForApply } from "@/domain/workflow";
-import { useAntdForm, useZustandShallowSelector } from "@/hooks";
-import { useAccessesStore } from "@/stores/access";
 import { useContactEmailsStore } from "@/stores/contact";
-import { useWorkflowStore } from "@/stores/workflow";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
-import { usePanel } from "../PanelProvider";
+
+type ApplyNodeFormFieldValues = Partial<WorkflowNodeConfigForApply>;
 
 export type ApplyNodeFormProps = {
-  node: WorkflowNode;
+  form: FormInstance;
+  formName?: string;
+  disabled?: boolean;
+  workflowNode: WorkflowNode;
+  onValuesChange?: (values: ApplyNodeFormFieldValues) => void;
 };
 
 const MULTIPLE_INPUT_DELIMITER = ";";
 
-const initFormModel = (): Partial<WorkflowNodeConfigForApply> => {
+const initFormModel = (): ApplyNodeFormFieldValues => {
   return {
     keyAlgorithm: "RSA2048",
     propagationTimeout: 60,
@@ -34,21 +35,16 @@ const initFormModel = (): Partial<WorkflowNodeConfigForApply> => {
   };
 };
 
-const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
+const ApplyNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: ApplyNodeFormProps) => {
   const { t } = useTranslation();
 
-  const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
-  const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
-  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
-  const { hidePanel } = usePanel();
-
   const formSchema = z.object({
     domains: z.string({ message: t("workflow_node.apply.form.domains.placeholder") }).refine((v) => {
       return String(v)
         .split(MULTIPLE_INPUT_DELIMITER)
         .every((e) => validDomainName(e, true));
     }, t("common.errmsg.domain_invalid")),
-    contactEmail: z.string({ message: t("workflow_node.apply.form.contact_email.placeholder") }).email("common.errmsg.email_invalid"),
+    contactEmail: z.string({ message: t("workflow_node.apply.form.contact_email.placeholder") }).email(t("common.errmsg.email_invalid")),
     providerAccessId: z
       .string({ message: t("workflow_node.apply.form.provider_access.placeholder") })
       .min(1, t("workflow_node.apply.form.provider_access.placeholder")),
@@ -73,46 +69,27 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
     disableFollowCNAME: z.boolean().nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const {
-    form: formInst,
-    formPending,
-    formProps,
-  } = useAntdForm<z.infer<typeof formSchema>>({
-    name: "workflowApplyNodeForm",
-    initialValues: (node?.config as WorkflowNodeConfigForApply) ?? initFormModel(),
-    onSubmit: async (values) => {
-      await formInst.validateFields();
-      await addEmail(values.contactEmail);
-      await updateNode(
-        produce(node, (draft) => {
-          draft.config = {
-            provider: accesses.find((e) => e.id === values.providerAccessId)?.provider,
-            ...values,
-          } as WorkflowNodeConfigForApply;
-          draft.validated = true;
-        })
-      );
-      hidePanel();
-    },
-  });
 
-  const [fieldDomains, setFieldDomains] = useState(node?.config?.domains as string);
-  const [fieldNameservers, setFieldNameservers] = useState(node?.config?.nameservers as string);
+  const initialValues: ApplyNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForApply) ?? initFormModel();
 
-  const handleFieldDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setFieldDomains(value);
-    formInst.setFieldValue("domains", value);
-  };
+  const fieldDomains = Form.useWatch<string>("domains", form);
+  const fieldNameservers = Form.useWatch<string>("nameservers", form);
 
-  const handleFieldNameserversChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setFieldNameservers(value);
-    formInst.setFieldValue("nameservers", value);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values as ApplyNodeFormFieldValues);
   };
 
   return (
-    <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
+    <Form
+      form={form}
+      disabled={disabled}
+      initialValues={initialValues}
+      layout="vertical"
+      name={formName}
+      preserve={false}
+      scrollToFirstError
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="domains"
         label={t("workflow_node.apply.form.domains.label")}
@@ -121,21 +98,22 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
       >
         <Space.Compact style={{ width: "100%" }}>
           <Input
-            disabled={formPending}
+            disabled={disabled}
             value={fieldDomains}
             placeholder={t("workflow_node.apply.form.domains.placeholder")}
-            onChange={handleFieldDomainsChange}
+            onChange={(e) => {
+              form.setFieldValue("domains", e.target.value);
+            }}
           />
           <FormFieldDomainsModalForm
             data={fieldDomains}
             trigger={
-              <Button disabled={formPending}>
+              <Button disabled={disabled}>
                 <FormOutlinedIcon />
               </Button>
             }
             onFinish={(v) => {
-              setFieldDomains(v);
-              formInst.setFieldValue("domains", v);
+              form.setFieldValue("domains", v);
             }}
           />
         </Space.Compact>
@@ -173,7 +151,7 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
                 onSubmit={(record) => {
                   const provider = accessProvidersMap.get(record.provider);
                   if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage) {
-                    formInst.setFieldValue("providerAccessId", record.id);
+                    form.setFieldValue("providerAccessId", record.id);
                   }
                 }}
               />
@@ -216,21 +194,22 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
         <Space.Compact style={{ width: "100%" }}>
           <Input
             allowClear
-            disabled={formPending}
+            disabled={disabled}
             value={fieldNameservers}
             placeholder={t("workflow_node.apply.form.nameservers.placeholder")}
-            onChange={handleFieldNameserversChange}
+            onChange={(e) => {
+              form.setFieldValue("nameservers", e.target.value);
+            }}
           />
           <FormFieldNameserversModalForm
             data={fieldNameservers}
             trigger={
-              <Button disabled={formPending}>
+              <Button disabled={disabled}>
                 <FormOutlinedIcon />
               </Button>
             }
             onFinish={(v) => {
-              setFieldNameservers(v);
-              formInst.setFieldValue("nameservers", v);
+              form.setFieldValue("nameservers", v);
             }}
           />
         </Space.Compact>
@@ -260,12 +239,6 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
       >
         <Switch />
       </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={formPending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
     </Form>
   );
 };
@@ -340,7 +313,7 @@ const FormFieldDomainsModalForm = ({
   trigger,
   onFinish,
 }: {
-  data: string;
+  data?: string;
   disabled?: boolean;
   trigger?: React.ReactNode;
   onFinish?: (data: string) => void;
@@ -353,7 +326,7 @@ const FormFieldDomainsModalForm = ({
     }, t("common.errmsg.domain_invalid")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const [formInst] = Form.useForm<z.infer<typeof formSchema>>();
+  const [form] = Form.useForm<z.infer<typeof formSchema>>();
 
   const [model, setModel] = useState<Partial<z.infer<typeof formSchema>>>({ domains: data?.split(MULTIPLE_INPUT_DELIMITER) });
   useEffect(() => {
@@ -372,7 +345,7 @@ const FormFieldDomainsModalForm = ({
   return (
     <ModalForm
       layout="vertical"
-      form={formInst}
+      form={form}
       initialValues={model}
       modalProps={{ destroyOnClose: true }}
       title={t("workflow_node.apply.form.domains.multiple_input_modal.title")}
@@ -388,7 +361,7 @@ const FormFieldDomainsModalForm = ({
   );
 };
 
-const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: string; trigger?: React.ReactNode; onFinish?: (data: string) => void }) => {
+const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data?: string; trigger?: React.ReactNode; onFinish?: (data: string) => void }) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -397,7 +370,7 @@ const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: stri
     }, t("common.errmsg.domain_invalid")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const [formInst] = Form.useForm<z.infer<typeof formSchema>>();
+  const [form] = Form.useForm<z.infer<typeof formSchema>>();
 
   const [model, setModel] = useState<Partial<z.infer<typeof formSchema>>>({ nameservers: data?.split(MULTIPLE_INPUT_DELIMITER) });
   useEffect(() => {
@@ -416,7 +389,7 @@ const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: stri
   return (
     <ModalForm
       layout="vertical"
-      form={formInst}
+      form={form}
       initialValues={model}
       modalProps={{ destroyOnClose: true }}
       title={t("workflow_node.apply.form.nameservers.multiple_input_modal.title")}

ui/src/components/workflow/node/BranchNode.tsx

@@ -7,7 +7,7 @@ import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 
 import AddNode from "./AddNode";
-import NodeRender from "./NodeRender";
+import WorkflowElement from "../WorkflowElement";
 
 export type BrandNodeProps = {
   node: WorkflowNode;
@@ -19,12 +19,12 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
 
   const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
 
-  const renderNodes = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
+  const renderBranch = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
     const elements: JSX.Element[] = [];
 
-    let current = node as WorkflowNode | undefined;
+    let current = node as typeof node | undefined;
     while (current) {
-      elements.push(<NodeRender key={current.id} node={current} branchId={branchNodeId} branchIndex={branchIndex} disabled={disabled} />);
+      elements.push(<WorkflowElement key={current.id} node={current} disabled={disabled} branchId={branchNodeId} branchIndex={branchIndex} />);
       current = current.next;
     }
 
@@ -47,12 +47,12 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
           {t("workflow_node.action.add_branch")}
         </Button>
 
-        {node.branches!.map((branch, index) => (
+        {node.branches?.map((branch, index) => (
           <div
             key={branch.id}
             className="relative flex flex-col items-center before:absolute  before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"
           >
-            <div className="relative flex flex-col items-center">{renderNodes(branch, node.id, index)}</div>
+            <div className="relative flex flex-col items-center">{renderBranch(branch, node.id, index)}</div>
           </div>
         ))}
       </div>

ui/src/components/workflow/node/CommonNode.tsx

@@ -0,0 +1,240 @@
+import { memo, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
+import { Avatar, Button, Card, Dropdown, Popover, Space, Typography } from "antd";
+import { produce } from "immer";
+
+import Show from "@/components/Show";
+import { deployProvidersMap } from "@/domain/provider";
+import { notifyChannelsMap } from "@/domain/settings";
+import {
+  WORKFLOW_TRIGGERS,
+  type WorkflowNode,
+  type WorkflowNodeConfigForApply,
+  type WorkflowNodeConfigForDeploy,
+  type WorkflowNodeConfigForNotify,
+  type WorkflowNodeConfigForStart,
+  WorkflowNodeType,
+} from "@/domain/workflow";
+import { useAntdForm, useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
+import { useContactEmailsStore } from "@/stores/contact";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import AddNode from "./AddNode";
+import ApplyNodeForm from "./ApplyNodeForm";
+import DeployNodeForm from "./DeployNodeForm";
+import NotifyNodeForm from "./NotifyNodeForm";
+import StartNodeForm from "./StartNodeForm";
+import { usePanelContext } from "../panel/PanelContext";
+
+export type CommonNodeProps = {
+  node: WorkflowNode;
+  disabled?: boolean;
+};
+
+const CommonNode = ({ node, disabled }: CommonNodeProps) => {
+  const { t } = useTranslation();
+
+  const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
+  const { addEmail } = useContactEmailsStore(useZustandShallowSelector(["addEmail"]));
+  const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
+  const { confirm: confirmPanel } = usePanelContext();
+
+  const {
+    form: formInst,
+    formPending,
+    formProps,
+    submit: submitForm,
+  } = useAntdForm({
+    name: "workflowNodeForm",
+    onSubmit: async (values) => {
+      if (node.type === WorkflowNodeType.Apply) {
+        await addEmail(values.contactEmail);
+        await updateNode(
+          produce(node, (draft) => {
+            draft.config = {
+              provider: accesses.find((e) => e.id === values.providerAccessId)?.provider,
+              ...values,
+            };
+            draft.validated = true;
+          })
+        );
+      } else {
+        await updateNode(
+          produce(node, (draft) => {
+            draft.config = { ...values };
+            draft.validated = true;
+          })
+        );
+      }
+    },
+  });
+
+  const nodeContentComponent = useMemo(() => {
+    if (!node.validated) {
+      return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
+    }
+
+    switch (node.type) {
+      case WorkflowNodeType.Start: {
+        const config = (node.config as WorkflowNodeConfigForStart) ?? {};
+        return (
+          <div className="flex items-center justify-between space-x-2">
+            <Typography.Text className="truncate">
+              {config.trigger === WORKFLOW_TRIGGERS.AUTO
+                ? t("workflow.props.trigger.auto")
+                : config.trigger === WORKFLOW_TRIGGERS.MANUAL
+                  ? t("workflow.props.trigger.manual")
+                  : "　"}
+            </Typography.Text>
+            <Typography.Text className="truncate" type="secondary">
+              {config.trigger === WORKFLOW_TRIGGERS.AUTO ? config.triggerCron : ""}
+            </Typography.Text>
+          </div>
+        );
+      }
+
+      case WorkflowNodeType.Apply: {
+        const config = (node.config as WorkflowNodeConfigForApply) ?? {};
+        return <Typography.Text className="truncate">{config.domains || "　"}</Typography.Text>;
+      }
+
+      case WorkflowNodeType.Deploy: {
+        const config = (node.config as WorkflowNodeConfigForDeploy) ?? {};
+        const provider = deployProvidersMap.get(config.provider);
+        return (
+          <Space>
+            <Avatar src={provider?.icon} size="small" />
+            <Typography.Text className="truncate">{t(provider?.name ?? "")}</Typography.Text>
+          </Space>
+        );
+      }
+
+      case WorkflowNodeType.Notify: {
+        const config = (node.config as WorkflowNodeConfigForNotify) ?? {};
+        const channel = notifyChannelsMap.get(config.channel as string);
+        return (
+          <div className="flex items-center justify-between space-x-2">
+            <Typography.Text className="truncate">{t(channel?.name ?? "　")}</Typography.Text>
+            <Typography.Text className="truncate" type="secondary">
+              {config.subject ?? ""}
+            </Typography.Text>
+          </div>
+        );
+      }
+
+      default: {
+        console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
+        return <></>;
+      }
+    }
+  }, [node]);
+
+  const panelBodyComponent = useMemo(() => {
+    const nodeFormProps = {
+      form: formInst,
+      formName: formProps.name,
+      disabled: disabled || formPending,
+      workflowNode: node,
+    };
+
+    switch (node.type) {
+      case WorkflowNodeType.Start:
+        return <StartNodeForm {...nodeFormProps} />;
+      case WorkflowNodeType.Apply:
+        return <ApplyNodeForm {...nodeFormProps} />;
+      case WorkflowNodeType.Deploy:
+        return <DeployNodeForm {...nodeFormProps} />;
+      case WorkflowNodeType.Notify:
+        return <NotifyNodeForm {...nodeFormProps} />;
+      default:
+        console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
+        return <> </>;
+    }
+  }, [node, disabled, formInst, formPending, formProps]);
+
+  const handleNodeClick = () => {
+    confirmPanel({
+      title: node.name,
+      children: panelBodyComponent,
+      okText: t("common.button.save"),
+      onOk: () => {
+        return submitForm();
+      },
+    });
+  };
+
+  const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    const oldName = node.name;
+    const newName = e.target.innerText.trim();
+    if (oldName === newName) {
+      return;
+    }
+
+    updateNode(
+      produce(node, (draft) => {
+        draft.name = newName;
+      })
+    );
+  };
+
+  return (
+    <>
+      <Popover
+        arrow={false}
+        content={
+          <Show when={node.type !== WorkflowNodeType.Start}>
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    key: "delete",
+                    disabled: disabled,
+                    label: t("workflow_node.action.delete_node"),
+                    icon: <CloseCircleOutlinedIcon />,
+                    danger: true,
+                    onClick: () => {
+                      if (disabled) return;
+
+                      removeNode(node.id);
+                    },
+                  },
+                ],
+              }}
+              trigger={["click"]}
+            >
+              <Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
+            </Dropdown>
+          </Show>
+        }
+        overlayClassName="shadow-md"
+        overlayInnerStyle={{ padding: 0 }}
+        placement="rightTop"
+      >
+        <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable>
+          <div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
+            <div
+              className="focus:bg-background focus:text-foreground w-full overflow-hidden text-center outline-none focus:rounded-sm"
+              contentEditable
+              suppressContentEditableWarning
+              onBlur={handleNodeNameBlur}
+            >
+              {node.name}
+            </div>
+          </div>
+
+          <div className="flex flex-col justify-center px-4 py-2">
+            <div className="cursor-pointer text-sm" onClick={handleNodeClick}>
+              {nodeContentComponent}
+            </div>
+          </div>
+        </Card>
+      </Popover>
+
+      <AddNode node={node} disabled={disabled} />
+    </>
+  );
+};
+
+export default memo(CommonNode);

ui/src/components/workflow/node/ConditionNode.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
 import { Button, Card, Dropdown, Popover } from "antd";
@@ -85,4 +86,4 @@ const ConditionNode = ({ node, branchId, branchIndex, disabled }: ConditionNodeP
   );
 };
 
-export default ConditionNode;
+export default memo(ConditionNode);

ui/src/components/workflow/node/DeployNodeForm.tsx

@@ -1,9 +1,9 @@
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
-import { Button, Divider, Form, Select, Tooltip, Typography } from "antd";
+import { Button, Divider, Form, type FormInstance, Select, Tooltip, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
-import { produce } from "immer";
+import { init } from "i18next";
 import { z } from "zod";
 
 import Show from "@/components/Show";
@@ -13,9 +13,9 @@ import DeployProviderPicker from "@/components/provider/DeployProviderPicker";
 import DeployProviderSelect from "@/components/provider/DeployProviderSelect";
 import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider";
 import { type WorkflowNode, type WorkflowNodeConfigForDeploy } from "@/domain/workflow";
-import { useAntdForm, useZustandShallowSelector } from "@/hooks";
+import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
-import { usePanel } from "../PanelProvider";
+
 import DeployNodeFormAliyunALBFields from "./DeployNodeFormAliyunALBFields";
 import DeployNodeFormAliyunCDNFields from "./DeployNodeFormAliyunCDNFields";
 import DeployNodeFormAliyunCLBFields from "./DeployNodeFormAliyunCLBFields";
@@ -40,19 +40,30 @@ import DeployNodeFormVolcEngineCDNFields from "./DeployNodeFormVolcEngineCDNFiel
 import DeployNodeFormVolcEngineLiveFields from "./DeployNodeFormVolcEngineLiveFields";
 import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields";
 
+type DeployNodeFormFieldValues = Partial<WorkflowNodeConfigForDeploy>;
+
 export type DeployFormProps = {
-  node: WorkflowNode;
+  form: FormInstance;
+  formName?: string;
+  disabled?: boolean;
+  workflowNode: WorkflowNode;
+  onValuesChange?: (values: DeployNodeFormFieldValues) => void;
 };
 
-const initFormModel = (): Partial<WorkflowNodeConfigForDeploy> => {
+const initFormModel = (): DeployNodeFormFieldValues => {
   return {};
 };
 
-const DeployNodeForm = ({ node }: DeployFormProps) => {
+const DeployNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: DeployFormProps) => {
   const { t } = useTranslation();
 
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
-  const { hidePanel } = usePanel();
+  const { getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
+
+  const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]);
+  useEffect(() => {
+    const rs = getWorkflowOuptutBeforeId(workflowNode.id, "certificate");
+    setPreviousOutput(rs);
+  }, [workflowNode.id, getWorkflowOuptutBeforeId]);
 
   const formSchema = z.object({
     provider: z.string({ message: t("workflow_node.deploy.form.provider.placeholder") }).nonempty(t("workflow_node.deploy.form.provider.placeholder")),
@@ -62,32 +73,10 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
     certificate: z.string({ message: t("workflow_node.deploy.form.certificate.placeholder") }).nonempty(t("workflow_node.deploy.form.certificate.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const {
-    form: formInst,
-    formPending,
-    formProps,
-  } = useAntdForm<z.infer<typeof formSchema>>({
-    name: "workflowDeployNodeForm",
-    initialValues: (node?.config as WorkflowNodeConfigForDeploy) ?? initFormModel(),
-    onSubmit: async (values) => {
-      await formInst.validateFields();
-      await updateNode(
-        produce(node, (draft) => {
-          draft.config = { ...values };
-          draft.validated = true;
-        })
-      );
-      hidePanel();
-    },
-  });
 
-  const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]);
-  useEffect(() => {
-    const rs = getWorkflowOuptutBeforeId(node.id, "certificate");
-    setPreviousOutput(rs);
-  }, [node, getWorkflowOuptutBeforeId]);
+  const initialValues: DeployNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForDeploy) ?? initFormModel();
 
-  const fieldProvider = Form.useWatch("provider", { form: formInst, preserve: true });
+  const fieldProvider = Form.useWatch("provider", { form: form, preserve: true });
 
   const formFieldsComponent = useMemo(() => {
     /*
@@ -146,9 +135,9 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
 
   const handleProviderPick = useCallback(
     (value: string) => {
-      formInst.setFieldValue("provider", value);
+      form.setFieldValue("provider", value);
     },
-    [formInst]
+    [form]
   );
 
   const handleProviderSelect = (value: string) => {
@@ -156,10 +145,10 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
 
     // TODO: 暂时不支持切换部署目标，需后端调整，否则之前若存在部署结果输出就不会再部署
     // 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标
-    if (node.config?.provider === value) {
-      formInst.resetFields();
+    if (initialValues?.provider === value) {
+      form.resetFields();
     } else {
-      const oldValues = formInst.getFieldsValue();
+      const oldValues = form.getFieldsValue();
       const newValues: Record<string, unknown> = {};
       for (const key in oldValues) {
         if (key === "provider" || key === "providerAccessId" || key === "certificate") {
@@ -168,16 +157,29 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
           newValues[key] = undefined;
         }
       }
-      formInst.setFieldsValue(newValues);
+      form.setFieldsValue(newValues);
 
       if (deployProvidersMap.get(fieldProvider)?.provider !== deployProvidersMap.get(value)?.provider) {
-        formInst.setFieldValue("providerAccessId", undefined);
+        form.setFieldValue("providerAccessId", undefined);
       }
     }
   };
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values as DeployNodeFormFieldValues);
+  };
+
   return (
-    <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
+    <Form
+      form={form}
+      disabled={disabled}
+      initialValues={initialValues}
+      layout="vertical"
+      name={formName}
+      preserve={false}
+      scrollToFirstError
+      onValuesChange={handleFormChange}
+    >
       <Show when={!!fieldProvider} fallback={<DeployProviderPicker onSelect={handleProviderPick} />}>
         <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
           <DeployProviderSelect
@@ -213,7 +215,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
                   onSubmit={(record) => {
                     const provider = accessProvidersMap.get(record.provider);
                     if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
-                      formInst.setFieldValue("providerAccessId", record.id);
+                      form.setFieldValue("providerAccessId", record.id);
                     }
                   }}
                 />
@@ -264,12 +266,6 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
         </Divider>
 
         {formFieldsComponent}
-
-        <Form.Item>
-          <Button type="primary" htmlType="submit" loading={formPending}>
-            {t("common.button.save")}
-          </Button>
-        </Form.Item>
       </Show>
     </Form>
   );

ui/src/components/workflow/node/EndNode.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { Typography } from "antd";
 
@@ -14,4 +15,4 @@ const EndNode = () => {
   );
 };
 
-export default EndNode;
+export default memo(EndNode);

ui/src/components/workflow/node/NodeRender.tsx

@@ -1,37 +0,0 @@
-import { memo } from "react";
-
-import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
-
-import WorkflowElement from "../WorkflowElement";
-import BranchNode from "./BranchNode";
-import ConditionNode from "./ConditionNode";
-import EndNode from "./EndNode";
-
-export type NodeRenderProps = {
-  node: WorkflowNode;
-  branchId?: string;
-  branchIndex?: number;
-  disabled?: boolean;
-};
-
-const NodeRender = ({ node: data, branchId, branchIndex, disabled }: NodeRenderProps) => {
-  const render = () => {
-    switch (data.type) {
-      case WorkflowNodeType.Start:
-      case WorkflowNodeType.Apply:
-      case WorkflowNodeType.Deploy:
-      case WorkflowNodeType.Notify:
-        return <WorkflowElement node={data} disabled={disabled} />;
-      case WorkflowNodeType.End:
-        return <EndNode />;
-      case WorkflowNodeType.Branch:
-        return <BranchNode node={data} disabled={disabled} />;
-      case WorkflowNodeType.Condition:
-        return <ConditionNode node={data as WorkflowNode} branchId={branchId!} branchIndex={branchIndex!} disabled={disabled} />;
-    }
-  };
-
-  return <>{render()}</>;
-};
-
-export default memo(NodeRender);

ui/src/components/workflow/node/NotifyNodeForm.tsx

@@ -2,30 +2,33 @@ import { memo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { RightOutlined as RightOutlinedIcon } from "@ant-design/icons";
-import { Button, Form, Input, Select } from "antd";
+import { Button, Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
-import { produce } from "immer";
 import { z } from "zod";
 
 import { notifyChannelsMap } from "@/domain/settings";
 import { type WorkflowNode, type WorkflowNodeConfigForNotify } from "@/domain/workflow";
-import { useAntdForm, useZustandShallowSelector } from "@/hooks";
+import { useZustandShallowSelector } from "@/hooks";
 import { useNotifyChannelsStore } from "@/stores/notify";
-import { useWorkflowStore } from "@/stores/workflow";
-import { usePanel } from "../PanelProvider";
+
+type NotifyNodeFormFieldValues = Partial<WorkflowNodeConfigForNotify>;
 
 export type NotifyNodeFormProps = {
-  node: WorkflowNode;
+  form: FormInstance;
+  formName?: string;
+  disabled?: boolean;
+  workflowNode: WorkflowNode;
+  onValuesChange?: (values: NotifyNodeFormFieldValues) => void;
 };
 
-const initFormModel = (): Partial<WorkflowNodeConfigForNotify> => {
+const initFormModel = (): NotifyNodeFormFieldValues => {
   return {
     subject: "Completed!",
     message: "Your workflow has been completed on Certimate.",
   };
 };
 
-const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
+const NotifyNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: NotifyNodeFormProps) => {
   const { t } = useTranslation();
 
   const {
@@ -37,9 +40,6 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
     fetchChannels();
   }, [fetchChannels]);
 
-  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
-  const { hidePanel } = usePanel();
-
   const formSchema = z.object({
     subject: z
       .string({ message: t("workflow_node.notify.form.subject.placeholder") })
@@ -52,27 +52,24 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
     channel: z.string({ message: t("workflow_node.notify.form.channel.placeholder") }).min(1, t("workflow_node.notify.form.channel.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const {
-    form: formInst,
-    formPending,
-    formProps,
-  } = useAntdForm<z.infer<typeof formSchema>>({
-    name: "workflowNotifyNodeForm",
-    initialValues: (node?.config as WorkflowNodeConfigForNotify) ?? initFormModel(),
-    onSubmit: async (values) => {
-      await formInst.validateFields();
-      await updateNode(
-        produce(node, (draft) => {
-          draft.config = { ...values };
-          draft.validated = true;
-        })
-      );
-      hidePanel();
-    },
-  });
+
+  const initialValues: NotifyNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForNotify) ?? initFormModel();
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values as NotifyNodeFormFieldValues);
+  };
 
   return (
-    <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
+    <Form
+      form={form}
+      disabled={disabled}
+      initialValues={initialValues}
+      layout="vertical"
+      name={formName}
+      preserve={false}
+      scrollToFirstError
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="subject" label={t("workflow_node.notify.form.subject.label")} rules={[formRule]}>
         <Input placeholder={t("workflow_node.notify.form.subject.placeholder")} />
       </Form.Item>
@@ -108,12 +105,6 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
           />
         </Form.Item>
       </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={formPending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
     </Form>
   );
 };

ui/src/components/workflow/node/StartNodeForm.tsx

@@ -1,35 +1,34 @@
 import { memo, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, Button, Form, Input, Radio } from "antd";
+import { Alert, Form, type FormInstance, Input, Radio } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import dayjs from "dayjs";
-import { produce } from "immer";
 import { z } from "zod";
 
 import Show from "@/components/Show";
-import { WORKFLOW_TRIGGERS, type WorkflowNode, type WorkflowNodeConfigForStart } from "@/domain/workflow";
-import { useAntdForm, useZustandShallowSelector } from "@/hooks";
-import { useWorkflowStore } from "@/stores/workflow";
+import { WORKFLOW_TRIGGERS, type WorkflowNode, type WorkflowNodeConfigForStart, type WorkflowTriggerType } from "@/domain/workflow";
 import { getNextCronExecutions, validCronExpression } from "@/utils/cron";
-import { usePanel } from "../PanelProvider";
+
+type StartNodeFormFieldValues = Partial<WorkflowNodeConfigForStart>;
 
 export type StartNodeFormProps = {
-  node: WorkflowNode;
+  form: FormInstance;
+  formName?: string;
+  disabled?: boolean;
+  workflowNode: WorkflowNode;
+  onValuesChange?: (values: StartNodeFormFieldValues) => void;
 };
 
-const initFormModel = (): WorkflowNodeConfigForStart => {
+const initFormModel = (): StartNodeFormFieldValues => {
   return {
     trigger: WORKFLOW_TRIGGERS.AUTO,
     triggerCron: "0 0 * * *",
   };
 };
 
-const StartNodeForm = ({ node }: StartNodeFormProps) => {
+const StartNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: StartNodeFormProps) => {
   const { t } = useTranslation();
 
-  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
-  const { hidePanel } = usePanel();
-
   const formSchema = z
     .object({
       trigger: z.string({ message: t("workflow_node.start.form.trigger.placeholder") }).min(1, t("workflow_node.start.form.trigger.placeholder")),
@@ -49,27 +48,11 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
       }
     });
   const formRule = createSchemaFieldRule(formSchema);
-  const {
-    form: formInst,
-    formPending,
-    formProps,
-  } = useAntdForm<z.infer<typeof formSchema>>({
-    name: "workflowStartNodeForm",
-    initialValues: (node?.config as WorkflowNodeConfigForStart) ?? initFormModel(),
-    onSubmit: async (values) => {
-      await formInst.validateFields();
-      await updateNode(
-        produce(node, (draft) => {
-          draft.config = { ...values };
-          draft.validated = true;
-        })
-      );
-      hidePanel();
-    },
-  });
 
-  const fieldTrigger = Form.useWatch<string>("trigger", formInst);
-  const fieldTriggerCron = Form.useWatch<string>("triggerCron", formInst);
+  const initialValues: StartNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForStart) ?? initFormModel();
+
+  const fieldTrigger = Form.useWatch<WorkflowTriggerType>("trigger", form);
+  const fieldTriggerCron = Form.useWatch<string>("triggerCron", form);
   const [fieldTriggerCronExpectedExecutions, setFieldTriggerCronExpectedExecutions] = useState<Date[]>([]);
   useEffect(() => {
     setFieldTriggerCronExpectedExecutions(getNextCronExecutions(fieldTriggerCron, 5));
@@ -77,12 +60,27 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
 
   const handleTriggerChange = (value: string) => {
     if (value === WORKFLOW_TRIGGERS.AUTO) {
-      formInst.setFieldValue("triggerCron", formInst.getFieldValue("triggerCron") || initFormModel().triggerCron);
+      form.setFieldValue("triggerCron", initialValues.triggerCron || initFormModel().triggerCron);
+    } else {
+      form.setFieldValue("triggerCron", undefined);
     }
   };
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values as StartNodeFormFieldValues);
+  };
+
   return (
-    <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
+    <Form
+      form={form}
+      disabled={disabled}
+      initialValues={initialValues}
+      layout="vertical"
+      name={formName}
+      preserve={false}
+      scrollToFirstError
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="trigger"
         label={t("workflow_node.start.form.trigger.label")}
@@ -124,12 +122,6 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
           <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.start.form.trigger_cron_alert.content") }}></span>} />
         </Form.Item>
       </Show>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={formPending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
     </Form>
   );
 };

ui/src/components/workflow/panel/Panel.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { useControllableValue } from "ahooks";
+import { Drawer } from "antd";
+
+export type PanelProps = {
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  extra?: React.ReactNode;
+  footer?: React.ReactNode;
+  open?: boolean;
+  title?: React.ReactNode;
+  onClose?: () => void | Promise<unknown>;
+  onOpenChange?: (open: boolean) => void;
+};
+
+const Panel = ({ children, extra, footer, title, onClose, ...props }: PanelProps) => {
+  const [open, setOpen] = useControllableValue<boolean>(props, {
+    valuePropName: "open",
+    defaultValuePropName: "defaultOpen",
+    trigger: "onOpenChange",
+  });
+
+  const handleClose = async () => {
+    try {
+      const ret = await onClose?.();
+      if (ret != null && !ret) return;
+
+      setOpen(false);
+    } catch {
+      return;
+    }
+  };
+
+  return (
+    <Drawer destroyOnClose extra={extra} footer={footer} open={open} title={title} width={640} onClose={handleClose}>
+      {children}
+    </Drawer>
+  );
+};
+
+export default Panel;

ui/src/components/workflow/panel/PanelContext.ts

@@ -0,0 +1,34 @@
+import { createContext, useContext } from "react";
+import { type ButtonProps } from "antd";
+
+import { type PanelProps } from "./Panel";
+
+export type ShowPanelOptions = Omit<PanelProps, "defaultOpen" | "open" | "onOpenChange">;
+export type ShowPanelWithConfirmOptions = Omit<ShowPanelOptions, "footer" | "onClose"> & {
+  cancelButtonProps?: ButtonProps;
+  cancelText?: React.ReactNode;
+  okButtonProps?: ButtonProps;
+  okText?: React.ReactNode;
+  onCancel?: () => void;
+  onOk?: () => void | Promise<unknown>;
+};
+
+export type PanelContextProps = {
+  open: boolean;
+  show: (options: ShowPanelOptions) => void;
+  confirm: (options: ShowPanelWithConfirmOptions) => void;
+  hide: () => void;
+};
+
+const PanelContext = createContext<PanelContextProps | undefined>(undefined);
+
+export const usePanelContext = () => {
+  const context = useContext(PanelContext);
+  if (!context) {
+    throw new Error("`usePanelContext` must be used within `PanelProvider`");
+  }
+
+  return context;
+};
+
+export default PanelContext;

ui/src/components/workflow/panel/PanelProvider.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Space } from "antd";
+
+import Panel from "./Panel";
+import PanelContext, { type ShowPanelOptions, type ShowPanelWithConfirmOptions } from "./PanelContext";
+
+export const PanelProvider = ({ children }: { children: React.ReactNode }) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+  const [options, setOptions] = useState<ShowPanelOptions>();
+
+  const showPanel = (options: ShowPanelOptions) => {
+    setOpen(true);
+    setOptions(options);
+  };
+
+  const showPanelWithConfirm = (options: ShowPanelWithConfirmOptions) => {
+    const updateOptionsFooter = (confirmLoading: boolean) => {
+      setOptions({
+        ...options,
+        footer: (
+          <Space className="w-full justify-end">
+            <Button
+              {...options.cancelButtonProps}
+              onClick={() => {
+                if (confirmLoading) return;
+
+                options.onCancel?.();
+
+                hidePanel();
+              }}
+            >
+              {options.cancelText ?? t("common.button.cancel")}
+            </Button>
+            <Button
+              loading={confirmLoading}
+              type={options.okButtonProps?.type ?? "primary"}
+              {...options.okButtonProps}
+              onClick={async () => {
+                updateOptionsFooter(true);
+
+                try {
+                  const ret = await options.onOk?.();
+                  if (ret != null && !ret) return;
+                } catch {
+                  return;
+                } finally {
+                  updateOptionsFooter(false);
+                }
+
+                hidePanel();
+              }}
+            >
+              {options.okText ?? t("common.button.ok")}
+            </Button>
+          </Space>
+        ),
+        onClose: () => Promise.resolve(!confirmLoading),
+      });
+    };
+
+    showPanel(options);
+    updateOptionsFooter(false);
+  };
+
+  const hidePanel = () => {
+    setOpen(false);
+    setOptions(undefined);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+
+    if (!open) {
+      setOptions(undefined);
+    }
+  };
+
+  return (
+    <PanelContext.Provider value={{ open, show: showPanel, confirm: showPanelWithConfirm, hide: hidePanel }}>
+      {children}
+
+      <Panel open={open} {...options} onOpenChange={handleOpenChange}>
+        {options?.children}
+      </Panel>
+    </PanelContext.Provider>
+  );
+};

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;
-    temp.next = newNode(WorkflowNodeType.Apply, {});
+    let current = root;
+    current.next = newNode(WorkflowNodeType.Apply, {});
 
-    temp = temp.next;
-    temp.next = newNode(WorkflowNodeType.Deploy, {});
+    current = current.next;
+    current.next = newNode(WorkflowNodeType.Deploy, {});
 
-    temp = temp.next;
-    temp.next = newNode(WorkflowNodeType.Notify, {});
+    current = current.next;
+    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}
  */
@@ -36,24 +37,24 @@ const useAntdForm = <T extends NonNullable<unknown> = any>({ form, initialValues
       return;
     }
 
-    let temp: Promise<Partial<T>>;
+    let p: Promise<Partial<T>>;
     if (typeof initialValues === "function") {
-      temp = Promise.resolve(initialValues());
+      p = Promise.resolve(initialValues());
     } else {
-      temp = Promise.resolve(initialValues);
+      p = Promise.resolve(initialValues);
     }
 
-    temp.then((temp) => {
+    p.then((res) => {
       if (!unmounted) {
         type FieldName = Parameters<FormInstance<T>["getFieldValue"]>[0];
         type FieldsValue = Parameters<FormInstance<T>["setFieldsValue"]>[0];
 
-        const obj = { ...temp };
-        Object.keys(temp).forEach((key) => {
-          obj[key as keyof T] = formInst!.isFieldTouched(key as FieldName) ? formInst!.getFieldValue(key as FieldName) : temp[key as keyof T];
+        const obj = { ...res };
+        Object.keys(res).forEach((key) => {
+          obj[key as keyof T] = formInst!.isFieldTouched(key as FieldName) ? formInst!.getFieldValue(key as FieldName) : res[key as keyof T];
         });
 
-        setFormInitialValues(temp);
+        setFormInitialValues(res);
         formInst!.setFieldsValue(obj as FieldsValue);
       }
     });
@@ -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}
@@ -17,12 +18,12 @@ const useTriggerElement = (trigger: React.ReactNode, options?: UseTriggerElement
       return null;
     }
 
-    const temp = isValidElement(trigger) ? trigger : createElement(Fragment, null, trigger);
-    return cloneElement(temp, {
-      ...temp.props,
+    const el = isValidElement(trigger) ? trigger : createElement(Fragment, null, trigger);
+    return cloneElement(el, {
+      ...el.props,
       onClick: (e: MouseEvent) => {
         onClick?.(e);
-        temp.props?.onClick?.(e);
+        el.props?.onClick?.(e);
       },
     });
   }, [trigger, onClick]);

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} />
-              <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>
+              <SiderMenuDrawer trigger={<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" />} />
             </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
-                    key="edit"
-                    data={workflow}
-                    trigger={<Button>{t("common.button.edit")}</Button>}
-                    onFinish={handleBaseInfoFormFinish}
-                  />,
+                  <WorkflowBaseInfoModal key="edit" trigger={<Button>{t("common.button.edit")}</Button>} />,
 
                   <Button key="enable" onClick={handleEnableChange}>
                     {workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")}
@@ -301,17 +286,13 @@ const WorkflowDetail = () => {
   );
 };
 
-const WorkflowBaseInfoModalForm = ({
-  data,
-  trigger,
-  onFinish,
-}: {
-  data: Pick<WorkflowModel, "name" | "description">;
-  trigger?: React.ReactNode;
-  onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
-}) => {
+const WorkflowBaseInfoModal = ({ trigger }: { trigger?: React.ReactNode }) => {
   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,
-    onSubmit: async () => {
-      const ret = await onFinish?.(formInst.getFieldsValue(true));
-      if (ret != null && !ret) return false;
-      return true;
+    initialValues: { name: workflow.name, description: workflow.description },
+    onSubmit: async (values) => {
+      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;
+      }
     },
   });
 
@@ -344,6 +329,9 @@ const WorkflowBaseInfoModalForm = ({
   };
 
   return (
+    <>
+      {NotificationContextHolder}
+
       <ModalForm
         disabled={formPending}
         layout="vertical"
@@ -364,6 +352,7 @@ const WorkflowBaseInfoModalForm = ({
           <Input placeholder={t("workflow.detail.baseinfo.form.description.placeholder")} />
         </Form.Item>
       </ModalForm>
+    </>
   );
 };