feat: improve workflow node configuration

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

@@ -22,7 +22,7 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
 
   const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     const oldName = node.name;
-    const newName = e.target.innerText.trim();
+    const newName = e.target.innerText.trim().substring(0, 64);
     if (oldName === newName) {
       return;
     }
@@ -34,6 +34,8 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
     );
   };
 
+  // TODO: 条件分支
+
   return (
     <>
       <Popover

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

@@ -12,32 +12,32 @@ 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 { useAntdForm, useAntdFormName, useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 
-import DeployNodeConfigFormAliyunALBFields from "./DeployNodeConfigFormAliyunALBFields";
-import DeployNodeConfigFormAliyunCDNFields from "./DeployNodeConfigFormAliyunCDNFields";
-import DeployNodeConfigFormAliyunCLBFields from "./DeployNodeConfigFormAliyunCLBFields";
-import DeployNodeConfigFormAliyunDCDNFields from "./DeployNodeConfigFormAliyunDCDNFields";
-import DeployNodeConfigFormAliyunNLBFields from "./DeployNodeConfigFormAliyunNLBFields";
-import DeployNodeConfigFormAliyunOSSFields from "./DeployNodeConfigFormAliyunOSSFields";
-import DeployNodeConfigFormBaiduCloudCDNFields from "./DeployNodeConfigFormBaiduCloudCDNFields";
-import DeployNodeConfigFormBytePlusCDNFields from "./DeployNodeConfigFormBytePlusCDNFields";
-import DeployNodeConfigFormDogeCloudCDNFields from "./DeployNodeConfigFormDogeCloudCDNFields";
-import DeployNodeConfigFormHuaweiCloudCDNFields from "./DeployNodeConfigFormHuaweiCloudCDNFields";
-import DeployNodeConfigFormHuaweiCloudELBFields from "./DeployNodeConfigFormHuaweiCloudELBFields";
-import DeployNodeConfigFormKubernetesSecretFields from "./DeployNodeConfigFormKubernetesSecretFields";
-import DeployNodeConfigFormLocalFields from "./DeployNodeConfigFormLocalFields";
-import DeployNodeConfigFormQiniuCDNFields from "./DeployNodeConfigFormQiniuCDNFields";
-import DeployNodeConfigFormSSHFields from "./DeployNodeConfigFormSSHFields";
-import DeployNodeConfigFormTencentCloudCDNFields from "./DeployNodeConfigFormTencentCloudCDNFields";
-import DeployNodeConfigFormTencentCloudCLBFields from "./DeployNodeConfigFormTencentCloudCLBFields";
-import DeployNodeConfigFormTencentCloudCOSFields from "./DeployNodeConfigFormTencentCloudCOSFields";
-import DeployNodeConfigFormTencentCloudECDNFields from "./DeployNodeConfigFormTencentCloudECDNFields";
-import DeployNodeConfigFormTencentCloudEOFields from "./DeployNodeConfigFormTencentCloudEOFields";
-import DeployNodeConfigFormVolcEngineCDNFields from "./DeployNodeConfigFormVolcEngineCDNFields";
-import DeployNodeConfigFormVolcEngineLiveFields from "./DeployNodeConfigFormVolcEngineLiveFields";
-import DeployNodeConfigFormWebhookFields from "./DeployNodeConfigFormWebhookFields";
+import DeployNodeConfigFormAliyunALBConfig from "./DeployNodeConfigFormAliyunALBConfig";
+import DeployNodeConfigFormAliyunCDNConfig from "./DeployNodeConfigFormAliyunCDNConfig";
+import DeployNodeConfigFormAliyunCLBConfig from "./DeployNodeConfigFormAliyunCLBConfig";
+import DeployNodeConfigFormAliyunDCDNConfig from "./DeployNodeConfigFormAliyunDCDNConfig";
+import DeployNodeConfigFormAliyunNLBConfig from "./DeployNodeConfigFormAliyunNLBConfig";
+import DeployNodeConfigFormAliyunOSSConfig from "./DeployNodeConfigFormAliyunOSSConfig";
+import DeployNodeConfigFormBaiduCloudCDNConfig from "./DeployNodeConfigFormBaiduCloudCDNConfig";
+import DeployNodeConfigFormBytePlusCDNConfig from "./DeployNodeConfigFormBytePlusCDNConfig";
+import DeployNodeConfigFormDogeCloudCDNConfig from "./DeployNodeConfigFormDogeCloudCDNConfig";
+import DeployNodeConfigFormHuaweiCloudCDNConfig from "./DeployNodeConfigFormHuaweiCloudCDNConfig";
+import DeployNodeConfigFormHuaweiCloudELBConfig from "./DeployNodeConfigFormHuaweiCloudELBConfig";
+import DeployNodeConfigFormKubernetesSecretConfig from "./DeployNodeConfigFormKubernetesSecretConfig";
+import DeployNodeConfigFormLocalConfig from "./DeployNodeConfigFormLocalConfig";
+import DeployNodeConfigFormQiniuCDNConfig from "./DeployNodeConfigFormQiniuCDNConfig";
+import DeployNodeConfigFormSSHConfig from "./DeployNodeConfigFormSSHConfig.tsx";
+import DeployNodeConfigFormTencentCloudCDNConfig from "./DeployNodeConfigFormTencentCloudCDNConfig.tsx";
+import DeployNodeConfigFormTencentCloudCLBConfig from "./DeployNodeConfigFormTencentCloudCLBConfig.tsx";
+import DeployNodeConfigFormTencentCloudCOSConfig from "./DeployNodeConfigFormTencentCloudCOSConfig.tsx";
+import DeployNodeConfigFormTencentCloudECDNConfig from "./DeployNodeConfigFormTencentCloudECDNConfig.tsx";
+import DeployNodeConfigFormTencentCloudEOConfig from "./DeployNodeConfigFormTencentCloudEOConfig.tsx";
+import DeployNodeConfigFormVolcEngineCDNConfig from "./DeployNodeConfigFormVolcEngineCDNConfig.tsx";
+import DeployNodeConfigFormVolcEngineLiveConfig from "./DeployNodeConfigFormVolcEngineLiveConfig.tsx";
+import DeployNodeConfigFormWebhookConfig from "./DeployNodeConfigFormWebhookConfig.tsx";
 
 type DeployNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForDeploy>;
 
@@ -74,75 +74,86 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
     }, [nodeId]);
 
     const formSchema = z.object({
+      certificate: z
+        .string({ message: t("workflow_node.deploy.form.certificate.placeholder") })
+        .nonempty(t("workflow_node.deploy.form.certificate.placeholder")),
       provider: z.string({ message: t("workflow_node.deploy.form.provider.placeholder") }).nonempty(t("workflow_node.deploy.form.provider.placeholder")),
       providerAccessId: z
         .string({ message: t("workflow_node.deploy.form.provider_access.placeholder") })
         .nonempty(t("workflow_node.deploy.form.provider_access.placeholder")),
-      certificate: z
-        .string({ message: t("workflow_node.deploy.form.certificate.placeholder") })
-        .nonempty(t("workflow_node.deploy.form.certificate.placeholder")),
+      providerConfig: z.any(),
     });
     const formRule = createSchemaFieldRule(formSchema);
     const { form: formInst, formProps } = useAntdForm({
+      name: "workflowNodeDeployConfigForm",
       initialValues: initialValues ?? initFormModel(),
     });
 
     const fieldProvider = Form.useWatch("provider", { form: formInst, preserve: true });
 
-    const formFieldsEl = useMemo(() => {
+    const [nestedFormInst] = Form.useForm();
+    const nestedFormName = useAntdFormName({ form: nestedFormInst, name: "workflowNodeDeployConfigFormProviderConfigForm" });
+    const nestedFormEl = useMemo(() => {
+      const nestedFormProps = {
+        form: nestedFormInst,
+        formName: nestedFormName,
+        disabled: disabled,
+        initialValues: initialValues?.providerConfig,
+      };
+
       /*
-      注意：如果追加新的子组件，请保持以 ASCII 排序。
-      NOTICE: If you add new child component, please keep ASCII order.
-     */
+        注意：如果追加新的子组件，请保持以 ASCII 排序。
+        NOTICE: If you add new child component, please keep ASCII order.
+       */
       switch (fieldProvider) {
         case DEPLOY_PROVIDERS.ALIYUN_ALB:
-          return <DeployNodeConfigFormAliyunALBFields />;
+          return <DeployNodeConfigFormAliyunALBConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.ALIYUN_CLB:
-          return <DeployNodeConfigFormAliyunCLBFields />;
+          return <DeployNodeConfigFormAliyunCLBConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.ALIYUN_CDN:
-          return <DeployNodeConfigFormAliyunCDNFields />;
+          return <DeployNodeConfigFormAliyunCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.ALIYUN_DCDN:
-          return <DeployNodeConfigFormAliyunDCDNFields />;
+          return <DeployNodeConfigFormAliyunDCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.ALIYUN_NLB:
-          return <DeployNodeConfigFormAliyunNLBFields />;
+          return <DeployNodeConfigFormAliyunNLBConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.ALIYUN_OSS:
-          return <DeployNodeConfigFormAliyunOSSFields />;
+          return <DeployNodeConfigFormAliyunOSSConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.BAIDUCLOUD_CDN:
-          return <DeployNodeConfigFormBaiduCloudCDNFields />;
+          return <DeployNodeConfigFormBaiduCloudCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.BYTEPLUS_CDN:
-          return <DeployNodeConfigFormBytePlusCDNFields />;
+          return <DeployNodeConfigFormBytePlusCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.DOGECLOUD_CDN:
-          return <DeployNodeConfigFormDogeCloudCDNFields />;
+          return <DeployNodeConfigFormDogeCloudCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.HUAWEICLOUD_CDN:
-          return <DeployNodeConfigFormHuaweiCloudCDNFields />;
+          return <DeployNodeConfigFormHuaweiCloudCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.HUAWEICLOUD_ELB:
-          return <DeployNodeConfigFormHuaweiCloudELBFields />;
+          return <DeployNodeConfigFormHuaweiCloudELBConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.KUBERNETES_SECRET:
-          return <DeployNodeConfigFormKubernetesSecretFields />;
+          return <DeployNodeConfigFormKubernetesSecretConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.LOCAL:
-          return <DeployNodeConfigFormLocalFields />;
+          return <DeployNodeConfigFormLocalConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.QINIU_CDN:
-          return <DeployNodeConfigFormQiniuCDNFields />;
+          return <DeployNodeConfigFormQiniuCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.SSH:
-          return <DeployNodeConfigFormSSHFields />;
+          return <DeployNodeConfigFormSSHConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.TENCENTCLOUD_CDN:
-          return <DeployNodeConfigFormTencentCloudCDNFields />;
+          return <DeployNodeConfigFormTencentCloudCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.TENCENTCLOUD_CLB:
-          return <DeployNodeConfigFormTencentCloudCLBFields />;
+          return <DeployNodeConfigFormTencentCloudCLBConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.TENCENTCLOUD_COS:
-          return <DeployNodeConfigFormTencentCloudCOSFields />;
+          return <DeployNodeConfigFormTencentCloudCOSConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.TENCENTCLOUD_ECDN:
-          return <DeployNodeConfigFormTencentCloudECDNFields />;
+          return <DeployNodeConfigFormTencentCloudECDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.TENCENTCLOUD_EO:
-          return <DeployNodeConfigFormTencentCloudEOFields />;
+          return <DeployNodeConfigFormTencentCloudEOConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.VOLCENGINE_CDN:
-          return <DeployNodeConfigFormVolcEngineCDNFields />;
+          return <DeployNodeConfigFormVolcEngineCDNConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.VOLCENGINE_LIVE:
-          return <DeployNodeConfigFormVolcEngineLiveFields />;
+          return <DeployNodeConfigFormVolcEngineLiveConfig {...nestedFormProps} />;
         case DEPLOY_PROVIDERS.WEBHOOK:
-          return <DeployNodeConfigFormWebhookFields />;
+          return <DeployNodeConfigFormWebhookConfig {...nestedFormProps} />;
       }
-    }, [fieldProvider]);
+    }, [disabled, initialValues?.providerConfig, fieldProvider, nestedFormInst, nestedFormName]);
 
     const handleProviderPick = (value: string) => {
       formInst.setFieldValue("provider", value);
@@ -175,6 +186,13 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
       }
     };
 
+    const handleFormProviderChange = (name: string) => {
+      if (name === nestedFormName) {
+        formInst.setFieldValue("providerConfig", nestedFormInst.getFieldsValue());
+        onValuesChange?.(formInst.getFieldsValue(true));
+      }
+    };
+
     const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
       onValuesChange?.(values as DeployNodeConfigFormFieldValues);
     };
@@ -188,101 +206,105 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
           return formInst.resetFields(fields);
         },
         validateFields: (nameList, config) => {
-          return formInst.validateFields(nameList, config);
+          const t1 = formInst.validateFields(nameList, config);
+          const t2 = nestedFormInst.validateFields(undefined, config);
+          return Promise.all([t1, t2]).then(() => t1);
         },
       } as DeployNodeConfigFormInstance;
     });
 
     return (
-      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" 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
-              allowClear
-              disabled
-              placeholder={t("workflow_node.deploy.form.provider.placeholder")}
-              showSearch
-              onSelect={handleProviderSelect}
-            />
-          </Form.Item>
-
-          <Form.Item className="mb-0">
-            <label className="mb-1 block">
-              <div className="flex w-full items-center justify-between gap-4">
-                <div className="max-w-full grow truncate">
-                  <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
-                  <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
-                    <Typography.Text className="ms-1" type="secondary">
-                      <QuestionCircleOutlinedIcon />
-                    </Typography.Text>
-                  </Tooltip>
-                </div>
-                <div className="text-right">
-                  <AccessEditModal
-                    data={{ provider: deployProvidersMap.get(fieldProvider!)?.provider }}
-                    preset="add"
-                    trigger={
-                      <Button size="small" type="link">
-                        <PlusOutlinedIcon />
-                        {t("workflow_node.deploy.form.provider_access.button")}
-                      </Button>
-                    }
-                    afterSubmit={(record) => {
-                      const provider = accessProvidersMap.get(record.provider);
-                      if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
-                        formInst.setFieldValue("providerAccessId", record.id);
-                      }
-                    }}
-                  />
-                </div>
-              </div>
-            </label>
-            <Form.Item name="providerAccessId" rules={[formRule]}>
-              <AccessSelect
-                placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
-                filter={(record) => {
-                  if (fieldProvider) {
-                    return deployProvidersMap.get(fieldProvider)?.provider === record.provider;
-                  }
-
-                  const provider = accessProvidersMap.get(record.provider);
-                  return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
-                }}
+      <Form.Provider onFormChange={handleFormProviderChange}>
+        <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" 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
+                allowClear
+                disabled
+                placeholder={t("workflow_node.deploy.form.provider.placeholder")}
+                showSearch
+                onSelect={handleProviderSelect}
               />
             </Form.Item>
-          </Form.Item>
 
-          <Form.Item
-            name="certificate"
-            label={t("workflow_node.deploy.form.certificate.label")}
-            rules={[formRule]}
-            tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
-          >
-            <Select
-              options={previousNodes.map((item) => {
-                return {
-                  label: item.name,
-                  options: item.outputs?.map((output) => {
-                    return {
-                      label: `${item.name} - ${output.label}`,
-                      value: `${item.id}#${output.name}`,
-                    };
-                  }),
-                };
-              })}
-              placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
-            />
-          </Form.Item>
+            <Form.Item className="mb-0">
+              <label className="mb-1 block">
+                <div className="flex w-full items-center justify-between gap-4">
+                  <div className="max-w-full grow truncate">
+                    <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
+                    <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
+                      <Typography.Text className="ms-1" type="secondary">
+                        <QuestionCircleOutlinedIcon />
+                      </Typography.Text>
+                    </Tooltip>
+                  </div>
+                  <div className="text-right">
+                    <AccessEditModal
+                      data={{ provider: deployProvidersMap.get(fieldProvider!)?.provider }}
+                      preset="add"
+                      trigger={
+                        <Button size="small" type="link">
+                          <PlusOutlinedIcon />
+                          {t("workflow_node.deploy.form.provider_access.button")}
+                        </Button>
+                      }
+                      afterSubmit={(record) => {
+                        const provider = accessProvidersMap.get(record.provider);
+                        if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
+                          formInst.setFieldValue("providerAccessId", record.id);
+                        }
+                      }}
+                    />
+                  </div>
+                </div>
+              </label>
+              <Form.Item name="providerAccessId" rules={[formRule]}>
+                <AccessSelect
+                  placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
+                  filter={(record) => {
+                    if (fieldProvider) {
+                      return deployProvidersMap.get(fieldProvider)?.provider === record.provider;
+                    }
 
-          <Divider className="my-1">
-            <Typography.Text className="text-xs font-normal" type="secondary">
-              {t("workflow_node.deploy.form.params_config.label")}
-            </Typography.Text>
-          </Divider>
+                    const provider = accessProvidersMap.get(record.provider);
+                    return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
+                  }}
+                />
+              </Form.Item>
+            </Form.Item>
 
-          {formFieldsEl}
-        </Show>
-      </Form>
+            <Form.Item
+              name="certificate"
+              label={t("workflow_node.deploy.form.certificate.label")}
+              rules={[formRule]}
+              tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
+            >
+              <Select
+                options={previousNodes.map((item) => {
+                  return {
+                    label: item.name,
+                    options: item.outputs?.map((output) => {
+                      return {
+                        label: `${item.name} - ${output.label}`,
+                        value: `${item.id}#${output.name}`,
+                      };
+                    }),
+                  };
+                })}
+                placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
+              />
+            </Form.Item>
+
+            <Divider className="my-1">
+              <Typography.Text className="text-xs font-normal" type="secondary">
+                {t("workflow_node.deploy.form.params_config.label")}
+              </Typography.Text>
+            </Divider>
+          </Show>
+        </Form>
+
+        <Show when={!!fieldProvider}>{nestedFormEl}</Show>
+      </Form.Provider>
     );
   }
 );

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

@@ -1,14 +1,39 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input, Select } from "antd";
+import { Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
 
+type DeployNodeConfigFormAliyunALBConfigFieldValues = Nullish<{
+  resourceType: string;
+  region: string;
+  loadbalancerId?: string;
+  listenerId?: string;
+}>;
+
+export type DeployNodeConfigFormAliyunALBConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormAliyunALBConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormAliyunALBConfigFieldValues) => void;
+};
+
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const DeployNodeFormAliyunALBFields = () => {
+const initFormModel = (): DeployNodeConfigFormAliyunALBConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormAliyunALBConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormAliyunALBConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -33,12 +58,22 @@ const DeployNodeFormAliyunALBFields = () => {
       .refine((v) => fieldResourceType !== RESOURCE_TYPE_LISTENER || !!v?.trim(), t("workflow_node.deploy.form.aliyun_alb_listener_id.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
 
   const fieldResourceType = Form.useWatch("resourceType", formInst);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="resourceType" label={t("workflow_node.deploy.form.aliyun_alb_resource_type.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.aliyun_alb_resource_type.placeholder")}>
           <Select.Option key={RESOURCE_TYPE_LOADBALANCER} value={RESOURCE_TYPE_LOADBALANCER}>
@@ -80,8 +115,8 @@ const DeployNodeFormAliyunALBFields = () => {
           <Input placeholder={t("workflow_node.deploy.form.aliyun_alb_listener_id.placeholder")} />
         </Form.Item>
       </Show>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormAliyunALBFields;
+export default DeployNodeConfigFormAliyunALBConfig;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormAliyunCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormAliyunCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormAliyunCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormAliyunCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormAliyunCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormAliyunCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormAliyunCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.aliyun_cdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.aliyun_cdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_cdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.aliyun_cdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormAliyunCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormAliyunCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.aliyun_cdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.aliyun_cdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_cdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.aliyun_cdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormAliyunCDNFields;

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

@@ -1,15 +1,42 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input, Select } from "antd";
+import { Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
 import { validPortNumber } from "@/utils/validators";
 
+type DeployNodeConfigFormAliyunCLBConfigFieldValues = Nullish<{
+  resourceType: string;
+  region: string;
+  loadbalancerId?: string;
+  listenerPort?: string | number;
+}>;
+
+export type DeployNodeConfigFormAliyunCLBConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormAliyunCLBConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormAliyunCLBConfigFieldValues) => void;
+};
+
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const DeployNodeFormAliyunCLBFields = () => {
+const initFormModel = (): DeployNodeConfigFormAliyunCLBConfigFieldValues => {
+  return {
+    listenerPort: 443,
+  };
+};
+
+const DeployNodeConfigFormAliyunCLBConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormAliyunCLBConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -43,16 +70,22 @@ const DeployNodeFormAliyunCLBFields = () => {
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
-
-  const initialValues: Partial<z.infer<typeof formSchema>> = {
-    listenerPort: 443,
-  };
 
   const fieldResourceType = Form.useWatch("resourceType", formInst);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="resourceType" label={t("workflow_node.deploy.form.aliyun_clb_resource_type.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.aliyun_clb_resource_type.placeholder")}>
           <Select.Option key={RESOURCE_TYPE_LOADBALANCER} value={RESOURCE_TYPE_LOADBALANCER}>
@@ -88,13 +121,12 @@ const DeployNodeFormAliyunCLBFields = () => {
           label={t("workflow_node.deploy.form.aliyun_clb_listener_port.label")}
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_clb_listener_port.tooltip") }}></span>}
-          initialValue={initialValues.listenerPort}
         >
           <Input type="number" min={1} max={65535} placeholder={t("workflow_node.deploy.form.aliyun_clb_listener_port.placeholder")} />
         </Form.Item>
       </Show>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormAliyunCLBFields;
+export default DeployNodeConfigFormAliyunCLBConfig;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormAliyunDCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormAliyunDCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormAliyunDCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormAliyunDCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormAliyunDCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormAliyunDCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormAliyunDCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.aliyun_dcdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.aliyun_dcdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_dcdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.aliyun_dcdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormAliyunDCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormAliyunDCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.aliyun_dcdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.aliyun_dcdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_dcdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.aliyun_dcdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormAliyunDCDNFields;

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

@@ -1,14 +1,39 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input, Select } from "antd";
+import { Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
 
+type DeployNodeConfigFormAliyunNLBConfigFieldValues = Nullish<{
+  resourceType: string;
+  region: string;
+  loadbalancerId?: string;
+  listenerId?: string;
+}>;
+
+export type DeployNodeConfigFormAliyunNLBConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormAliyunNLBConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormAliyunNLBConfigFieldValues) => void;
+};
+
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const DeployNodeFormAliyunNLBFields = () => {
+const initFormModel = (): DeployNodeConfigFormAliyunNLBConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormAliyunNLBConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormAliyunNLBConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -33,12 +58,22 @@ const DeployNodeFormAliyunNLBFields = () => {
       .refine((v) => fieldResourceType !== RESOURCE_TYPE_LISTENER || !!v?.trim(), t("workflow_node.deploy.form.aliyun_nlb_listener_id.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
 
   const fieldResourceType = Form.useWatch("resourceType", formInst);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="resourceType" label={t("workflow_node.deploy.form.aliyun_nlb_resource_type.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.aliyun_nlb_resource_type.placeholder")}>
           <Select.Option key={RESOURCE_TYPE_LOADBALANCER} value={RESOURCE_TYPE_LOADBALANCER}>
@@ -80,8 +115,8 @@ const DeployNodeFormAliyunNLBFields = () => {
           <Input placeholder={t("workflow_node.deploy.form.aliyun_nlb_listener_id.placeholder")} />
         </Form.Item>
       </Show>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormAliyunNLBFields;
+export default DeployNodeConfigFormAliyunNLBConfig;

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

@@ -1,11 +1,35 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
+import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { validDomainName } from "@/utils/validators";
 
-const DeployNodeFormAliyunOSSFields = () => {
+type DeployNodeConfigFormAliyunOSSConfigFieldValues = Nullish<{
+  endpoint: string;
+  bucket: string;
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormAliyunOSSConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormAliyunOSSConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormAliyunOSSConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormAliyunOSSConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormAliyunOSSConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormAliyunOSSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -23,8 +47,19 @@ const DeployNodeFormAliyunOSSFields = () => {
   });
   const formRule = createSchemaFieldRule(formSchema);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="endpoint"
         label={t("workflow_node.deploy.form.aliyun_oss_endpoint.label")}
@@ -51,8 +86,8 @@ const DeployNodeFormAliyunOSSFields = () => {
       >
         <Input placeholder={t("workflow_node.deploy.form.aliyun_oss_domain.placeholder")} />
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormAliyunOSSFields;
+export default DeployNodeConfigFormAliyunOSSConfig;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormBaiduCloudCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormBaiduCloudCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormBaiduCloudCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormBaiduCloudCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormBaiduCloudCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormBaiduCloudCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormBaiduCloudCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.baiducloud_cdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.baiducloud_cdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.baiducloud_cdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.baiducloud_cdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormBaiduCloudCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormBaiduCloudCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.baiducloud_cdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.baiducloud_cdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.baiducloud_cdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.baiducloud_cdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormBaiduCloudCDNFields;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormBytePlusCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormBytePlusCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormBytePlusCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormBytePlusCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormBytePlusCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormBytePlusCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormBytePlusCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.byteplus_cdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.byteplus_cdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.byteplus_cdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.byteplus_cdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormBytePlusCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormBytePlusCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.byteplus_cdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.byteplus_cdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.byteplus_cdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.byteplus_cdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormBytePlusCDNFields;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormDogeCloudCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormDogeCloudCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormDogeCloudCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormDogeCloudCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormDogeCloudCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormDogeCloudCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormDogeCloudCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.dogecloud_cdn_domain.placeholder") })
+      .refine((v) => validDomainName(v), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.dogecloud_cdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.dogecloud_cdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.dogecloud_cdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormDogeCloudCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormDogeCloudCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.dogecloud_cdn_domain.placeholder") })
-      .refine((v) => validDomainName(v), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.dogecloud_cdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.dogecloud_cdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.dogecloud_cdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormDogeCloudCDNFields;

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

@@ -1,11 +1,34 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
+import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { validDomainName } from "@/utils/validators";
 
-const DeployNodeFormHuaweiCloudCDNFields = () => {
+type DeployNodeConfigFormHuaweiCloudCDNConfigFieldValues = Nullish<{
+  region: string;
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormHuaweiCloudCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormHuaweiCloudCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormHuaweiCloudCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormHuaweiCloudCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormHuaweiCloudCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormHuaweiCloudCDNConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -19,8 +42,19 @@ const DeployNodeFormHuaweiCloudCDNFields = () => {
   });
   const formRule = createSchemaFieldRule(formSchema);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="region"
         label={t("workflow_node.deploy.form.huaweicloud_cdn_region.label")}
@@ -38,8 +72,8 @@ const DeployNodeFormHuaweiCloudCDNFields = () => {
       >
         <Input placeholder={t("workflow_node.deploy.form.huaweicloud_cdn_domain.placeholder")} />
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormHuaweiCloudCDNFields;
+export default DeployNodeConfigFormHuaweiCloudCDNConfig;

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

@@ -1,15 +1,41 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input, Select } from "antd";
+import { Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
 
+type DeployNodeConfigFormHuaweiCloudELBConfigFieldValues = Nullish<{
+  resourceType: string;
+  region: string;
+  certificateId?: string;
+  loadbalancerId?: string;
+  listenerId?: string;
+}>;
+
+export type DeployNodeConfigFormHuaweiCloudELBConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormHuaweiCloudELBConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormHuaweiCloudELBConfigFieldValues) => void;
+};
+
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const DeployNodeFormHuaweiCloudELBFields = () => {
+const initFormModel = (): DeployNodeConfigFormHuaweiCloudELBConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormHuaweiCloudELBConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormHuaweiCloudELBConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -43,12 +69,22 @@ const DeployNodeFormHuaweiCloudELBFields = () => {
       .refine((v) => fieldResourceType !== RESOURCE_TYPE_LISTENER || !!v?.trim(), t("workflow_node.deploy.form.huaweicloud_elb_listener_id.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
 
   const fieldResourceType = Form.useWatch("resourceType", formInst);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="resourceType" label={t("workflow_node.deploy.form.huaweicloud_elb_resource_type.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.huaweicloud_elb_resource_type.placeholder")}>
           <Select.Option key={RESOURCE_TYPE_CERTIFICATE} value={RESOURCE_TYPE_CERTIFICATE}>
@@ -104,8 +140,8 @@ const DeployNodeFormHuaweiCloudELBFields = () => {
           <Input placeholder={t("workflow_node.deploy.form.huaweicloud_elb_listener_id.placeholder")} />
         </Form.Item>
       </Show>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormHuaweiCloudELBFields;
+export default DeployNodeConfigFormHuaweiCloudELBConfig;

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

@@ -1,9 +1,40 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
+import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-const DeployNodeFormKubernetesSecretFields = () => {
+type DeployNodeConfigFormKubernetesSecretConfigFieldValues = Nullish<{
+  namespace: string;
+  secretName: string;
+  secretType: string;
+  secretDataKeyForCrt: string;
+  secretDataKeyForKey: string;
+}>;
+
+export type DeployNodeConfigFormKubernetesSecretConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormKubernetesSecretConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormKubernetesSecretConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormKubernetesSecretConfigFieldValues => {
+  return {
+    namespace: "default",
+    secretType: "kubernetes.io/tls",
+    secretDataKeyForCrt: "tls.crt",
+    secretDataKeyForKey: "tls.key",
+  };
+};
+
+const DeployNodeConfigFormKubernetesSecretConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormKubernetesSecretConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -35,21 +66,24 @@ const DeployNodeFormKubernetesSecretFields = () => {
   });
   const formRule = createSchemaFieldRule(formSchema);
 
-  const initialValues: Partial<z.infer<typeof formSchema>> = {
-    namespace: "default",
-    secretType: "kubernetes.io/tls",
-    secretDataKeyForCrt: "tls.crt",
-    secretDataKeyForKey: "tls.key",
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
   };
 
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="namespace"
         label={t("workflow_node.deploy.form.k8s_namespace.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.k8s_namespace.tooltip") }}></span>}
-        initialValue={initialValues.namespace}
       >
         <Input placeholder={t("workflow_node.deploy.form.k8s_namespace.placeholder")} />
       </Form.Item>
@@ -68,7 +102,6 @@ const DeployNodeFormKubernetesSecretFields = () => {
         label={t("workflow_node.deploy.form.k8s_secret_type.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.k8s_secret_type.tooltip") }}></span>}
-        initialValue={initialValues.secretType}
       >
         <Input placeholder={t("workflow_node.deploy.form.k8s_secret_type.placeholder")} />
       </Form.Item>
@@ -78,7 +111,6 @@ const DeployNodeFormKubernetesSecretFields = () => {
         label={t("workflow_node.deploy.form.k8s_secret_data_key_for_crt.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.k8s_secret_data_key_for_crt.tooltip") }}></span>}
-        initialValue={initialValues.secretDataKeyForCrt}
       >
         <Input placeholder={t("workflow_node.deploy.form.k8s_secret_data_key_for_crt.placeholder")} />
       </Form.Item>
@@ -88,12 +120,11 @@ const DeployNodeFormKubernetesSecretFields = () => {
         label={t("workflow_node.deploy.form.k8s_secret_data_key_for_key.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.k8s_secret_data_key_for_key.tooltip") }}></span>}
-        initialValue={initialValues.secretDataKeyForKey}
       >
         <Input placeholder={t("workflow_node.deploy.form.k8s_secret_data_key_for_key.placeholder")} />
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormKubernetesSecretFields;
+export default DeployNodeConfigFormKubernetesSecretConfig;

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

@@ -1,11 +1,32 @@
 import { useTranslation } from "react-i18next";
 import { DownOutlined as DownOutlinedIcon } from "@ant-design/icons";
-import { Button, Dropdown, Form, Input, Select } from "antd";
+import { Button, Dropdown, Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
 
+type DeployNodeConfigFormLocalConfigFieldValues = Nullish<{
+  format: string;
+  certPath: string;
+  keyPath?: string | null;
+  pfxPassword?: string | null;
+  jksAlias?: string | null;
+  jksKeypass?: string | null;
+  jksStorepass?: string | null;
+  shellEnv?: string | null;
+  preCommand?: string | null;
+  postCommand?: string | null;
+}>;
+
+export type DeployNodeConfigFormLocalConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormLocalConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormLocalConfigFieldValues) => void;
+};
+
 const FORMAT_PEM = "PEM" as const;
 const FORMAT_PFX = "PFX" as const;
 const FORMAT_JKS = "JKS" as const;
@@ -14,7 +35,16 @@ const SHELLENV_SH = "sh" as const;
 const SHELLENV_CMD = "cmd" as const;
 const SHELLENV_POWERSHELL = "powershell" as const;
 
-const DeployNodeFormLocalFields = () => {
+const initFormModel = (): DeployNodeConfigFormLocalConfigFieldValues => {
+  return {
+    format: FORMAT_PEM,
+    certPath: "/etc/ssl/certs/cert.crt",
+    keyPath: "/etc/ssl/certs/cert.key",
+    shellEnv: SHELLENV_SH,
+  };
+};
+
+const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: DeployNodeConfigFormLocalConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -69,14 +99,6 @@ const DeployNodeFormLocalFields = () => {
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
-
-  const initialValues: Partial<z.infer<typeof formSchema>> = {
-    format: FORMAT_PEM,
-    certPath: "/etc/ssl/certs/cert.crt",
-    keyPath: "/etc/ssl/certs/cert.key",
-    shellEnv: SHELLENV_SH,
-  };
 
   const fieldFormat = Form.useWatch("format", formInst);
   const fieldCertPath = Form.useWatch("certPath", formInst);
@@ -188,9 +210,20 @@ Remove-Item -Path "$pfxPath" -Force
     }
   };
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
-      <Form.Item name="format" label={t("workflow_node.deploy.form.local_format.label")} rules={[formRule]} initialValue={initialValues.format}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item name="format" label={t("workflow_node.deploy.form.local_format.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.local_format.placeholder")} onSelect={handleFormatSelect}>
           <Select.Option key={FORMAT_PEM} value={FORMAT_PEM}>
             {t("workflow_node.deploy.form.local_format.option.pem.label")}
@@ -209,7 +242,6 @@ Remove-Item -Path "$pfxPath" -Force
         label={t("workflow_node.deploy.form.local_cert_path.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.local_cert_path.tooltip") }}></span>}
-        initialValue={initialValues.certPath}
       >
         <Input placeholder={t("workflow_node.deploy.form.local_cert_path.placeholder")} />
       </Form.Item>
@@ -220,7 +252,6 @@ Remove-Item -Path "$pfxPath" -Force
           label={t("workflow_node.deploy.form.local_key_path.label")}
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.local_key_path.tooltip") }}></span>}
-          initialValue={initialValues.keyPath}
         >
           <Input placeholder={t("workflow_node.deploy.form.local_key_path.placeholder")} />
         </Form.Item>
@@ -266,7 +297,7 @@ Remove-Item -Path "$pfxPath" -Force
         </Form.Item>
       </Show>
 
-      <Form.Item name="shellEnv" label={t("workflow_node.deploy.form.local_shell_env.label")} rules={[formRule]} initialValue={initialValues.shellEnv}>
+      <Form.Item name="shellEnv" label={t("workflow_node.deploy.form.local_shell_env.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.local_shell_env.placeholder")}>
           <Select.Option key={SHELLENV_SH} value={SHELLENV_SH}>
             {t("workflow_node.deploy.form.local_shell_env.option.sh.label")}
@@ -325,8 +356,8 @@ Remove-Item -Path "$pfxPath" -Force
           <Input.TextArea autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("workflow_node.deploy.form.local_post_command.placeholder")} />
         </Form.Item>
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormLocalFields;
+export default DeployNodeConfigFormLocalConfig;

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

@@ -0,0 +1,59 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormQiniuCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormQiniuCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormQiniuCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormQiniuCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormQiniuCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormQiniuCDNConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: DeployNodeConfigFormQiniuCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.qiniu_cdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.qiniu_cdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.qiniu_cdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.qiniu_cdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormQiniuCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormQiniuCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.qiniu_cdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.qiniu_cdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.qiniu_cdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.qiniu_cdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormQiniuCDNFields;

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

@@ -1,16 +1,44 @@
 import { useTranslation } from "react-i18next";
 import { DownOutlined as DownOutlinedIcon } from "@ant-design/icons";
-import { Button, Dropdown, Form, Input, Select } from "antd";
+import { Button, Dropdown, Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
 
+type DeployNodeConfigFormSSHConfigFieldValues = Nullish<{
+  format: string;
+  certPath: string;
+  keyPath?: string | null;
+  pfxPassword?: string | null;
+  jksAlias?: string | null;
+  jksKeypass?: string | null;
+  jksStorepass?: string | null;
+  preCommand?: string | null;
+  postCommand?: string | null;
+}>;
+
+export type DeployNodeConfigFormSSHConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormSSHConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormSSHConfigFieldValues) => void;
+};
+
 const FORMAT_PEM = "PEM" as const;
 const FORMAT_PFX = "PFX" as const;
 const FORMAT_JKS = "JKS" as const;
 
-const DeployNodeFormSSHFields = () => {
+const initFormModel = (): DeployNodeConfigFormSSHConfigFieldValues => {
+  return {
+    format: FORMAT_PEM,
+    certPath: "/etc/ssl/certs/cert.crt",
+    keyPath: "/etc/ssl/certs/cert.key",
+  };
+};
+
+const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: DeployNodeConfigFormSSHConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -62,13 +90,6 @@ const DeployNodeFormSSHFields = () => {
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
-
-  const initialValues: Partial<z.infer<typeof formSchema>> = {
-    format: FORMAT_PEM,
-    certPath: "/etc/ssl/certs/cert.crt",
-    keyPath: "/etc/ssl/certs/cert.key",
-  };
 
   const fieldFormat = Form.useWatch("format", formInst);
   const fieldCertPath = Form.useWatch("certPath", formInst);
@@ -113,9 +134,20 @@ const DeployNodeFormSSHFields = () => {
     }
   };
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
-      <Form.Item name="format" label={t("workflow_node.deploy.form.ssh_format.label")} rules={[formRule]} initialValue={initialValues.format}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item name="format" label={t("workflow_node.deploy.form.ssh_format.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.ssh_format.placeholder")} onSelect={handleFormatSelect}>
           <Select.Option key={FORMAT_PEM} value={FORMAT_PEM}>
             {t("workflow_node.deploy.form.ssh_format.option.pem.label")}
@@ -134,7 +166,6 @@ const DeployNodeFormSSHFields = () => {
         label={t("workflow_node.deploy.form.ssh_cert_path.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.ssh_cert_path.tooltip") }}></span>}
-        initialValue={initialValues.certPath}
       >
         <Input placeholder={t("workflow_node.deploy.form.ssh_cert_path.placeholder")} />
       </Form.Item>
@@ -145,7 +176,6 @@ const DeployNodeFormSSHFields = () => {
           label={t("workflow_node.deploy.form.ssh_key_path.label")}
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.ssh_key_path.tooltip") }}></span>}
-          initialValue={initialValues.keyPath}
         >
           <Input placeholder={t("workflow_node.deploy.form.ssh_key_path.placeholder")} />
         </Form.Item>
@@ -230,8 +260,8 @@ const DeployNodeFormSSHFields = () => {
           <Input.TextArea autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("workflow_node.deploy.form.ssh_post_command.placeholder")} />
         </Form.Item>
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormSSHFields;
+export default DeployNodeConfigFormSSHConfig;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormTencentCloudCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormTencentCloudCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormTencentCloudCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormTencentCloudCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormTencentCloudCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormTencentCloudCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormTencentCloudCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.tencentcloud_cdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.tencentcloud_cdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.tencentcloud_cdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.tencentcloud_cdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormTencentCloudCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormTencentCloudCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.tencentcloud_cdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.tencentcloud_cdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.tencentcloud_cdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.tencentcloud_cdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormTencentCloudCDNFields;

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

@@ -1,17 +1,43 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input, Select } from "antd";
+import { Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
 import { validDomainName } from "@/utils/validators";
 
+type DeployNodeConfigFormTencentCloudCLBConfigFieldValues = Nullish<{
+  resourceType: string;
+  region: string;
+  loadbalancerId?: string;
+  listenerId?: string;
+  domain?: string;
+}>;
+
+export type DeployNodeConfigFormTencentCloudCLBConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormTencentCloudCLBConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormTencentCloudCLBConfigFieldValues) => void;
+};
+
 const RESOURCE_TYPE_SSLDEPLOY = "ssl-deploy" as const;
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 const RESOURCE_TYPE_RULEDOMAIN = "ruledomain" as const;
 
-const DeployNodeFormTencentCloudCLBFields = () => {
+const initFormModel = (): DeployNodeConfigFormTencentCloudCLBConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormTencentCloudCLBConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormTencentCloudCLBConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -43,12 +69,22 @@ const DeployNodeFormTencentCloudCLBFields = () => {
       .refine((v) => RESOURCE_TYPE_RULEDOMAIN !== fieldResourceType || validDomainName(v!, true), t("common.errmsg.domain_invalid")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
 
   const fieldResourceType = Form.useWatch("resourceType", formInst);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="resourceType" label={t("workflow_node.deploy.form.tencentcloud_clb_resource_type.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.tencentcloud_clb_resource_type.placeholder")}>
           <Select.Option key={RESOURCE_TYPE_SSLDEPLOY} value={RESOURCE_TYPE_SSLDEPLOY}>
@@ -118,8 +154,8 @@ const DeployNodeFormTencentCloudCLBFields = () => {
           <Input placeholder={t("workflow_node.deploy.form.tencentcloud_clb_ruledomain.placeholder")} />
         </Form.Item>
       </Show>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormTencentCloudCLBFields;
+export default DeployNodeConfigFormTencentCloudCLBConfig;

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

@@ -1,11 +1,35 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
+import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { validDomainName } from "@/utils/validators";
 
-const DeployNodeFormTencentCloudCOSFields = () => {
+type DeployNodeConfigFormTencentCloudCOSConfigFieldValues = Nullish<{
+  region: string;
+  bucket: string;
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormTencentCloudCOSConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormTencentCloudCOSConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormTencentCloudCOSConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormTencentCloudCOSConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormTencentCloudCOSConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormTencentCloudCOSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -23,8 +47,19 @@ const DeployNodeFormTencentCloudCOSFields = () => {
   });
   const formRule = createSchemaFieldRule(formSchema);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="region"
         label={t("workflow_node.deploy.form.tencentcloud_cos_region.label")}
@@ -51,8 +86,8 @@ const DeployNodeFormTencentCloudCOSFields = () => {
       >
         <Input placeholder={t("workflow_node.deploy.form.tencentcloud_cos_domain.placeholder")} />
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormTencentCloudCOSFields;
+export default DeployNodeConfigFormTencentCloudCOSConfig;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormTencentCloudECDNConfigFieldValues = Nullish<{
+  domain?: string;
+}>;
+
+export type DeployNodeConfigFormTencentCloudECDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormTencentCloudECDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormTencentCloudECDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormTencentCloudECDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormTencentCloudECDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormTencentCloudECDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.tencentcloud_ecdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.tencentcloud_ecdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.tencentcloud_ecdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.tencentcloud_ecdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormTencentCloudECDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormTencentCloudECDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.tencentcloud_ecdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.tencentcloud_ecdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.tencentcloud_ecdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.tencentcloud_ecdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormTencentCloudECDNFields;

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

@@ -1,11 +1,34 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
+import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { validDomainName } from "@/utils/validators";
 
-const DeployNodeFormTencentCloudEOFields = () => {
+type DeployNodeConfigFormTencentCloudEOConfigFieldValues = Nullish<{
+  zoneId: string;
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormTencentCloudEOConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormTencentCloudEOConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormTencentCloudEOConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormTencentCloudEOConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormTencentCloudEOConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormTencentCloudEOConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -19,8 +42,19 @@ const DeployNodeFormTencentCloudEOFields = () => {
   });
   const formRule = createSchemaFieldRule(formSchema);
 
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="zoneId"
         label={t("workflow_node.deploy.form.tencentcloud_eo_zone_id.label")}
@@ -38,8 +72,8 @@ const DeployNodeFormTencentCloudEOFields = () => {
       >
         <Input placeholder={t("workflow_node.deploy.form.tencentcloud_eo_domain.placeholder")} />
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormTencentCloudEOFields;
+export default DeployNodeConfigFormTencentCloudEOConfig;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormVolcEngineCDNConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormVolcEngineCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormVolcEngineCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormVolcEngineCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormVolcEngineCDNConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormVolcEngineCDNConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormVolcEngineCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.volcengine_cdn_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.volcengine_cdn_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.volcengine_cdn_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.volcengine_cdn_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormVolcEngineCDNConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormVolcEngineCDNFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.volcengine_cdn_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.volcengine_cdn_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.volcengine_cdn_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.volcengine_cdn_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormVolcEngineCDNFields;

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validDomainName } from "@/utils/validators";
+
+type DeployNodeConfigFormVolcEngineLiveConfigFieldValues = Nullish<{
+  domain: string;
+}>;
+
+export type DeployNodeConfigFormVolcEngineLiveConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormVolcEngineLiveConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormVolcEngineLiveConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormVolcEngineLiveConfigFieldValues => {
+  return {};
+};
+
+const DeployNodeConfigFormVolcEngineLiveConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: DeployNodeConfigFormVolcEngineLiveConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    domain: z
+      .string({ message: t("workflow_node.deploy.form.volcengine_live_domain.placeholder") })
+      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item
+        name="domain"
+        label={t("workflow_node.deploy.form.volcengine_live_domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.volcengine_live_domain.tooltip") }}></span>}
+      >
+        <Input placeholder={t("workflow_node.deploy.form.volcengine_live_domain.placeholder")} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormVolcEngineLiveConfig;

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

@@ -1,32 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { validDomainName } from "@/utils/validators";
-
-const DeployNodeFormVolcEngineLiveFields = () => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    domain: z
-      .string({ message: t("workflow_node.deploy.form.volcengine_live_domain.placeholder") })
-      .refine((v) => validDomainName(v, true), t("common.errmsg.domain_invalid")),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  return (
-    <>
-      <Form.Item
-        name="domain"
-        label={t("workflow_node.deploy.form.volcengine_live_domain.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.volcengine_live_domain.tooltip") }}></span>}
-      >
-        <Input placeholder={t("workflow_node.deploy.form.volcengine_live_domain.placeholder")} />
-      </Form.Item>
-    </>
-  );
-};
-
-export default DeployNodeFormVolcEngineLiveFields;

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

@@ -1,9 +1,35 @@
 import { useTranslation } from "react-i18next";
-import { Alert, Button, Form, Input } from "antd";
+import { Alert, Button, Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-const DeployNodeFormWebhookFields = () => {
+type DeployNodeConfigFormWebhookConfigFieldValues = Nullish<{
+  webhookData: string;
+}>;
+
+export type DeployNodeConfigFormWebhookConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormWebhookConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormWebhookConfigFieldValues) => void;
+};
+
+const initFormModel = (): DeployNodeConfigFormWebhookConfigFieldValues => {
+  return {
+    webhookData: JSON.stringify(
+      {
+        name: "${DOMAINS}",
+        cert: "${CERTIFICATE}",
+        privkey: "${PRIVATE_KEY}",
+      },
+      null,
+      2
+    ),
+  };
+};
+
+const DeployNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: DeployNodeConfigFormWebhookConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -17,19 +43,6 @@ const DeployNodeFormWebhookFields = () => {
     }, t("workflow_node.deploy.form.webhook_data.errmsg.json_invalid")),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const formInst = Form.useFormInstance();
-
-  const initialValues: Partial<z.infer<typeof formSchema>> = {
-    webhookData: JSON.stringify(
-      {
-        name: "${DOMAINS}",
-        cert: "${CERTIFICATE}",
-        privkey: "${PRIVATE_KEY}",
-      },
-      null,
-      2
-    ),
-  };
 
   const handleWebhookDataBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
@@ -42,11 +55,22 @@ const DeployNodeFormWebhookFields = () => {
   };
 
   const handlePresetDataClick = () => {
-    formInst.setFieldValue("webhookData", initialValues.webhookData);
+    formInst.setFieldValue("webhookData", initFormModel().webhookData);
+  };
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
   };
 
   return (
-    <>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item className="mb-0">
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
@@ -58,7 +82,7 @@ const DeployNodeFormWebhookFields = () => {
             </div>
           </div>
         </label>
-        <Form.Item name="webhookData" rules={[formRule]} initialValue={initialValues.webhookData}>
+        <Form.Item name="webhookData" rules={[formRule]}>
           <Input.TextArea
             autoSize={{ minRows: 3, maxRows: 10 }}
             placeholder={t("workflow_node.deploy.form.webhook_data.placeholder")}
@@ -70,8 +94,8 @@ const DeployNodeFormWebhookFields = () => {
       <Form.Item>
         <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.webhook_data.guide") }}></span>} />
       </Form.Item>
-    </>
+    </Form>
   );
 };
 
-export default DeployNodeFormWebhookFields;
+export default DeployNodeConfigFormWebhookConfig;

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

@@ -28,10 +28,7 @@ export type NotifyNodeConfigFormInstance = {
 };
 
 const initFormModel = (): NotifyNodeConfigFormFieldValues => {
-  return {
-    subject: "Completed!",
-    message: "Your workflow has been completed on Certimate.",
-  };
+  return {};
 };
 
 const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNodeConfigFormProps>(
@@ -60,6 +57,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
     });
     const formRule = createSchemaFieldRule(formSchema);
     const { form: formInst, formProps } = useAntdForm({
+      name: "workflowNodeNotifyConfigForm",
       initialValues: initialValues ?? initFormModel(),
     });
 

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

@@ -57,6 +57,7 @@ const StartNodeConfigForm = forwardRef<StartNodeConfigFormInstance, StartNodeCon
       });
     const formRule = createSchemaFieldRule(formSchema);
     const { form: formInst, formProps } = useAntdForm({
+      name: "workflowNodeStartConfigForm",
       initialValues: initialValues ?? initFormModel(),
     });
 

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

@@ -34,7 +34,7 @@ const SharedNodeWrapper = ({ children, node, disabled, onClick }: SharedNodeWrap
 
   const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     const oldName = node.name;
-    const newName = e.target.innerText.trim();
+    const newName = e.target.innerText.trim().substring(0, 64);
     if (oldName === newName) {
       return;
     }