From 84c36a4eec9036dafd39a09d8c9ef639f63ef171 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Mon, 6 Jan 2025 23:46:14 +0800
Subject: [PATCH] feat: improve workflow node configuration

---
 internal/applicant/applicant.go               |   5 +-
 internal/deployer/deployer.go                 |  11 +-
 internal/domain/workflow.go                   |  12 +-
 .../access/AccessEditFormLocalConfig.tsx      |  36 ---
 ui/src/components/access/AccessEditModal.tsx  |  10 +-
 .../{AccessEditForm.tsx => AccessForm.tsx}    | 108 +++----
 ...ig.tsx => AccessFormACMEHttpReqConfig.tsx} |  25 +-
 ...mAWSConfig.tsx => AccessFormAWSConfig.tsx} |  25 +-
 ...nConfig.tsx => AccessFormAliyunConfig.tsx} |  25 +-
 ...fig.tsx => AccessFormBaiduCloudConfig.tsx} |  25 +-
 ...onfig.tsx => AccessFormBytePlusConfig.tsx} |  25 +-
 ...fig.tsx => AccessFormCloudflareConfig.tsx} |  25 +-
 ...nfig.tsx => AccessFormDogeCloudConfig.tsx} |  25 +-
 ...Config.tsx => AccessFormGoDaddyConfig.tsx} |  25 +-
 ...ig.tsx => AccessFormHuaweiCloudConfig.tsx} |  25 +-
 ...fig.tsx => AccessFormKubernetesConfig.tsx} |  39 ++-
 .../access/AccessFormLocalConfig.tsx          |  36 +++
 ...fig.tsx => AccessFormNameDotComConfig.tsx} |  25 +-
 ...onfig.tsx => AccessFormNameSiloConfig.tsx} |  25 +-
 ...onfig.tsx => AccessFormPowerDNSConfig.tsx} |  25 +-
 ...iuConfig.tsx => AccessFormQiniuConfig.tsx} |  25 +-
 ...mSSHConfig.tsx => AccessFormSSHConfig.tsx} |  41 ++-
 ...g.tsx => AccessFormTencentCloudConfig.tsx} |  25 +-
 ...fig.tsx => AccessFormVolcEngineConfig.tsx} |  25 +-
 ...Config.tsx => AccessFormWebhookConfig.tsx} |  25 +-
 .../components/workflow/WorkflowElements.tsx  |   5 +-
 .../workflow/node/ConditionNode.tsx           |   4 +-
 .../workflow/node/DeployNodeConfigForm.tsx    | 302 ++++++++++--------
 ...> DeployNodeConfigFormAliyunALBConfig.tsx} |  47 ++-
 .../DeployNodeConfigFormAliyunCDNConfig.tsx   |  65 ++++
 .../DeployNodeConfigFormAliyunCDNFields.tsx   |  32 --
 ...> DeployNodeConfigFormAliyunCLBConfig.tsx} |  54 +++-
 .../DeployNodeConfigFormAliyunDCDNConfig.tsx  |  65 ++++
 .../DeployNodeConfigFormAliyunDCDNFields.tsx  |  32 --
 ...> DeployNodeConfigFormAliyunNLBConfig.tsx} |  47 ++-
 ...> DeployNodeConfigFormAliyunOSSConfig.tsx} |  45 ++-
 ...eployNodeConfigFormBaiduCloudCDNConfig.tsx |  65 ++++
 ...eployNodeConfigFormBaiduCloudCDNFields.tsx |  32 --
 .../DeployNodeConfigFormBytePlusCDNConfig.tsx |  65 ++++
 .../DeployNodeConfigFormBytePlusCDNFields.tsx |  32 --
 ...DeployNodeConfigFormDogeCloudCDNConfig.tsx |  65 ++++
 ...DeployNodeConfigFormDogeCloudCDNFields.tsx |  32 --
 ...loyNodeConfigFormHuaweiCloudCDNConfig.tsx} |  44 ++-
 ...loyNodeConfigFormHuaweiCloudELBConfig.tsx} |  48 ++-
 ...yNodeConfigFormKubernetesSecretConfig.tsx} |  59 +++-
 ...sx => DeployNodeConfigFormLocalConfig.tsx} |  65 +++-
 .../DeployNodeConfigFormQiniuCDNConfig.tsx    |  59 ++++
 .../DeployNodeConfigFormQiniuCDNFields.tsx    |  32 --
 ....tsx => DeployNodeConfigFormSSHConfig.tsx} |  60 +++-
 ...loyNodeConfigFormTencentCloudCDNConfig.tsx |  65 ++++
 ...loyNodeConfigFormTencentCloudCDNFields.tsx |  32 --
 ...oyNodeConfigFormTencentCloudCLBConfig.tsx} |  48 ++-
 ...oyNodeConfigFormTencentCloudCOSConfig.tsx} |  45 ++-
 ...oyNodeConfigFormTencentCloudECDNConfig.tsx |  65 ++++
 ...oyNodeConfigFormTencentCloudECDNFields.tsx |  32 --
 ...loyNodeConfigFormTencentCloudEOConfig.tsx} |  44 ++-
 ...eployNodeConfigFormVolcEngineCDNConfig.tsx |  65 ++++
 ...eployNodeConfigFormVolcEngineCDNFields.tsx |  32 --
 ...ployNodeConfigFormVolcEngineLiveConfig.tsx |  65 ++++
 ...ployNodeConfigFormVolcEngineLiveFields.tsx |  32 --
 ... => DeployNodeConfigFormWebhookConfig.tsx} |  64 ++--
 .../workflow/node/NotifyNodeConfigForm.tsx    |   6 +-
 .../workflow/node/StartNodeConfigForm.tsx     |   1 +
 .../components/workflow/node/_SharedNode.tsx  |   2 +-
 ui/src/domain/workflow.ts                     |   4 +-
 ui/src/i18n/locales/en/nls.workflow.json      |   4 +-
 ui/src/i18n/locales/zh/nls.workflow.json      |   4 +-
 ui/tsconfig.app.json                          |   3 +-
 ui/{src => types}/global.d.ts                 |   0
 ui/types/global.utility.d.ts                  |   7 +
 70 files changed, 1799 insertions(+), 875 deletions(-)
 delete mode 100644 ui/src/components/access/AccessEditFormLocalConfig.tsx
 rename ui/src/components/access/{AccessEditForm.tsx => AccessForm.tsx} (53%)
 rename ui/src/components/access/{AccessEditFormACMEHttpReqConfig.tsx => AccessFormACMEHttpReqConfig.tsx} (76%)
 rename ui/src/components/access/{AccessEditFormAWSConfig.tsx => AccessFormAWSConfig.tsx} (80%)
 rename ui/src/components/access/{AccessEditFormAliyunConfig.tsx => AccessFormAliyunConfig.tsx} (70%)
 rename ui/src/components/access/{AccessEditFormBaiduCloudConfig.tsx => AccessFormBaiduCloudConfig.tsx} (69%)
 rename ui/src/components/access/{AccessEditFormBytePlusConfig.tsx => AccessFormBytePlusConfig.tsx} (69%)
 rename ui/src/components/access/{AccessEditFormCloudflareConfig.tsx => AccessFormCloudflareConfig.tsx} (60%)
 rename ui/src/components/access/{AccessEditFormDogeCloudConfig.tsx => AccessFormDogeCloudConfig.tsx} (69%)
 rename ui/src/components/access/{AccessEditFormGoDaddyConfig.tsx => AccessFormGoDaddyConfig.tsx} (69%)
 rename ui/src/components/access/{AccessEditFormHuaweiCloudConfig.tsx => AccessFormHuaweiCloudConfig.tsx} (75%)
 rename ui/src/components/access/{AccessEditFormKubernetesConfig.tsx => AccessFormKubernetesConfig.tsx} (66%)
 create mode 100644 ui/src/components/access/AccessFormLocalConfig.tsx
 rename ui/src/components/access/{AccessEditFormNameDotComConfig.tsx => AccessFormNameDotComConfig.tsx} (69%)
 rename ui/src/components/access/{AccessEditFormNameSiloConfig.tsx => AccessFormNameSiloConfig.tsx} (60%)
 rename ui/src/components/access/{AccessEditFormPowerDNSConfig.tsx => AccessFormPowerDNSConfig.tsx} (67%)
 rename ui/src/components/access/{AccessEditFormQiniuConfig.tsx => AccessFormQiniuConfig.tsx} (70%)
 rename ui/src/components/access/{AccessEditFormSSHConfig.tsx => AccessFormSSHConfig.tsx} (82%)
 rename ui/src/components/access/{AccessEditFormTencentCloudConfig.tsx => AccessFormTencentCloudConfig.tsx} (68%)
 rename ui/src/components/access/{AccessEditFormVolcEngineConfig.tsx => AccessFormVolcEngineConfig.tsx} (69%)
 rename ui/src/components/access/{AccessEditFormWebhookConfig.tsx => AccessFormWebhookConfig.tsx} (54%)
 rename ui/src/components/workflow/node/{DeployNodeConfigFormAliyunALBFields.tsx => DeployNodeConfigFormAliyunALBConfig.tsx} (75%)
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormAliyunCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormAliyunCDNFields.tsx
 rename ui/src/components/workflow/node/{DeployNodeConfigFormAliyunCLBFields.tsx => DeployNodeConfigFormAliyunCLBConfig.tsx} (76%)
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormAliyunDCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormAliyunDCDNFields.tsx
 rename ui/src/components/workflow/node/{DeployNodeConfigFormAliyunNLBFields.tsx => DeployNodeConfigFormAliyunNLBConfig.tsx} (75%)
 rename ui/src/components/workflow/node/{DeployNodeConfigFormAliyunOSSFields.tsx => DeployNodeConfigFormAliyunOSSConfig.tsx} (64%)
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudCDNFields.tsx
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormBytePlusCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormBytePlusCDNFields.tsx
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormDogeCloudCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormDogeCloudCDNFields.tsx
 rename ui/src/components/workflow/node/{DeployNodeConfigFormHuaweiCloudCDNFields.tsx => DeployNodeConfigFormHuaweiCloudCDNConfig.tsx} (57%)
 rename ui/src/components/workflow/node/{DeployNodeConfigFormHuaweiCloudELBFields.tsx => DeployNodeConfigFormHuaweiCloudELBConfig.tsx} (79%)
 rename ui/src/components/workflow/node/{DeployNodeConfigFormKubernetesSecretFields.tsx => DeployNodeConfigFormKubernetesSecretConfig.tsx} (75%)
 rename ui/src/components/workflow/node/{DeployNodeConfigFormLocalFields.tsx => DeployNodeConfigFormLocalConfig.tsx} (90%)
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormQiniuCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormQiniuCDNFields.tsx
 rename ui/src/components/workflow/node/{DeployNodeConfigFormSSHFields.tsx => DeployNodeConfigFormSSHConfig.tsx} (86%)
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCDNFields.tsx
 rename ui/src/components/workflow/node/{DeployNodeConfigFormTencentCloudCLBFields.tsx => DeployNodeConfigFormTencentCloudCLBConfig.tsx} (82%)
 rename ui/src/components/workflow/node/{DeployNodeConfigFormTencentCloudCOSFields.tsx => DeployNodeConfigFormTencentCloudCOSConfig.tsx} (64%)
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudECDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudECDNFields.tsx
 rename ui/src/components/workflow/node/{DeployNodeConfigFormTencentCloudEOFields.tsx => DeployNodeConfigFormTencentCloudEOConfig.tsx} (57%)
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineCDNConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineCDNFields.tsx
 create mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineLiveConfig.tsx
 delete mode 100644 ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineLiveFields.tsx
 rename ui/src/components/workflow/node/{DeployNodeConfigFormWebhookFields.tsx => DeployNodeConfigFormWebhookConfig.tsx} (62%)
 rename ui/{src => types}/global.d.ts (100%)
 create mode 100644 ui/types/global.utility.d.ts

diff --git a/internal/applicant/applicant.go b/internal/applicant/applicant.go
index 8f32766e..2f2f411f 100644
--- a/internal/applicant/applicant.go
+++ b/internal/applicant/applicant.go
@@ -47,9 +47,10 @@ func NewWithApplyNode(node *domain.WorkflowNode) (Applicant, error) {
 	}
 
 	accessRepo := repository.NewAccessRepository()
-	access, err := accessRepo.GetById(context.Background(), node.GetConfigString("providerAccessId"))
+	accessId := node.GetConfigString("providerAccessId")
+	access, err := accessRepo.GetById(context.Background(), accessId)
 	if err != nil {
-		return nil, fmt.Errorf("access record not found: %w", err)
+		return nil, fmt.Errorf("failed to get access #%s record: %w", accessId, err)
 	}
 
 	applyConfig := &applyConfig{
diff --git a/internal/deployer/deployer.go b/internal/deployer/deployer.go
index ea1ebb66..5ad5d6ce 100644
--- a/internal/deployer/deployer.go
+++ b/internal/deployer/deployer.go
@@ -19,17 +19,20 @@ func NewWithDeployNode(node *domain.WorkflowNode, certdata struct {
 	PrivateKey  string
 },
 ) (Deployer, error) {
-	if node.Type != domain.WorkflowNodeTypeApply {
+	if node.Type != domain.WorkflowNodeTypeDeploy {
 		return nil, fmt.Errorf("node type is not deploy")
 	}
 
 	accessRepo := repository.NewAccessRepository()
-	access, err := accessRepo.GetById(context.Background(), node.GetConfigString("providerAccessId"))
+	accessId := node.GetConfigString("providerAccessId")
+	access, err := accessRepo.GetById(context.Background(), accessId)
 	if err != nil {
-		return nil, fmt.Errorf("access record not found: %w", err)
+		return nil, fmt.Errorf("failed to get access #%s record: %w", accessId, err)
 	}
 
-	deployer, logger, err := createDeployer(domain.DeployProviderType(node.GetConfigString("provider")), access.Config, node.Config)
+	deployProvider := node.GetConfigString("provider")
+	deployConfig := node.GetConfigMap("providerConfig")
+	deployer, logger, err := createDeployer(domain.DeployProviderType(deployProvider), access.Config, deployConfig)
 	if err != nil {
 		return nil, err
 	}
diff --git a/internal/domain/workflow.go b/internal/domain/workflow.go
index 4f18594a..2657b8a6 100644
--- a/internal/domain/workflow.go
+++ b/internal/domain/workflow.go
@@ -45,7 +45,7 @@ type WorkflowNode struct {
 	Type WorkflowNodeType `json:"type"`
 	Name string           `json:"name"`
 
-	Config  map[string]any   `json:"data"`
+	Config  map[string]any   `json:"config"`
 	Inputs  []WorkflowNodeIO `json:"inputs"`
 	Outputs []WorkflowNodeIO `json:"outputs"`
 
@@ -71,6 +71,16 @@ func (n *WorkflowNode) GetConfigInt64(key string) int64 {
 	return maps.GetValueAsInt64(n.Config, key)
 }
 
+func (n *WorkflowNode) GetConfigMap(key string) map[string]any {
+	if val, ok := n.Config[key]; ok {
+		if result, ok := val.(map[string]any); ok {
+			return result
+		}
+	}
+
+	return make(map[string]any)
+}
+
 type WorkflowNodeIO struct {
 	Label         string                      `json:"label"`
 	Name          string                      `json:"name"`
diff --git a/ui/src/components/access/AccessEditFormLocalConfig.tsx b/ui/src/components/access/AccessEditFormLocalConfig.tsx
deleted file mode 100644
index 540c2951..00000000
--- a/ui/src/components/access/AccessEditFormLocalConfig.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Form, type FormInstance } from "antd";
-
-import { type AccessConfigForLocal } from "@/domain/access";
-
-type AccessEditFormLocalConfigFieldValues = Partial<AccessConfigForLocal>;
-
-export type AccessEditFormLocalConfigProps = {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessEditFormLocalConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormLocalConfigFieldValues) => void;
-};
-
-const initFormModel = (): AccessEditFormLocalConfigFieldValues => {
-  return {};
-};
-
-const AccessEditFormLocalConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormLocalConfigProps) => {
-  const handleFormChange = (_: unknown, values: unknown) => {
-    onValuesChange?.(values as AccessEditFormLocalConfigFieldValues);
-  };
-
-  return (
-    <Form
-      form={form}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    ></Form>
-  );
-};
-
-export default AccessEditFormLocalConfig;
diff --git a/ui/src/components/access/AccessEditModal.tsx b/ui/src/components/access/AccessEditModal.tsx
index 6d9bc7ad..067dc339 100644
--- a/ui/src/components/access/AccessEditModal.tsx
+++ b/ui/src/components/access/AccessEditModal.tsx
@@ -9,13 +9,13 @@ import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
 
-import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm";
+import AccessForm, { type AccessFormInstance, type AccessFormProps } from "./AccessForm";
 
 export type AccessEditModalProps = {
-  data?: AccessEditFormProps["initialValues"];
+  data?: AccessFormProps["initialValues"];
   loading?: boolean;
   open?: boolean;
-  preset: AccessEditFormProps["preset"];
+  preset: AccessFormProps["preset"];
   trigger?: React.ReactNode;
   onOpenChange?: (open: boolean) => void;
   afterSubmit?: (record: AccessModel) => void;
@@ -36,7 +36,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
 
   const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
-  const formRef = useRef<AccessEditFormInstance>(null);
+  const formRef = useRef<AccessFormInstance>(null);
   const [formPending, setFormPending] = useState(false);
 
   const handleOkClick = async () => {
@@ -106,7 +106,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
         onCancel={handleCancelClick}
       >
         <div className="pb-2 pt-4">
-          <AccessEditForm ref={formRef} initialValues={data} preset={preset === "add" ? "add" : "edit"} />
+          <AccessForm ref={formRef} initialValues={data} preset={preset === "add" ? "add" : "edit"} />
         </div>
       </Modal>
     </>
diff --git a/ui/src/components/access/AccessEditForm.tsx b/ui/src/components/access/AccessForm.tsx
similarity index 53%
rename from ui/src/components/access/AccessEditForm.tsx
rename to ui/src/components/access/AccessForm.tsx
index 8b967244..d5bdf7ad 100644
--- a/ui/src/components/access/AccessEditForm.tsx
+++ b/ui/src/components/access/AccessForm.tsx
@@ -9,45 +9,45 @@ import { type AccessModel } from "@/domain/access";
 import { ACCESS_PROVIDERS } from "@/domain/provider";
 import { useAntdForm, useAntdFormName } from "@/hooks";
 
-import AccessEditFormACMEHttpReqConfig from "./AccessEditFormACMEHttpReqConfig";
-import AccessEditFormAWSConfig from "./AccessEditFormAWSConfig";
-import AccessEditFormAliyunConfig from "./AccessEditFormAliyunConfig";
-import AccessEditFormBaiduCloudConfig from "./AccessEditFormBaiduCloudConfig";
-import AccessEditFormBytePlusConfig from "./AccessEditFormBytePlusConfig";
-import AccessEditFormCloudflareConfig from "./AccessEditFormCloudflareConfig";
-import AccessEditFormDogeCloudConfig from "./AccessEditFormDogeCloudConfig";
-import AccessEditFormGoDaddyConfig from "./AccessEditFormGoDaddyConfig";
-import AccessEditFormHuaweiCloudConfig from "./AccessEditFormHuaweiCloudConfig";
-import AccessEditFormKubernetesConfig from "./AccessEditFormKubernetesConfig";
-import AccessEditFormLocalConfig from "./AccessEditFormLocalConfig";
-import AccessEditFormNameDotComConfig from "./AccessEditFormNameDotComConfig";
-import AccessEditFormNameSiloConfig from "./AccessEditFormNameSiloConfig";
-import AccessEditFormPowerDNSConfig from "./AccessEditFormPowerDNSConfig";
-import AccessEditFormQiniuConfig from "./AccessEditFormQiniuConfig";
-import AccessEditFormSSHConfig from "./AccessEditFormSSHConfig";
-import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig";
-import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
-import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
+import AccessFormACMEHttpReqConfig from "./AccessFormACMEHttpReqConfig";
+import AccessFormAWSConfig from "./AccessFormAWSConfig";
+import AccessFormAliyunConfig from "./AccessFormAliyunConfig";
+import AccessFormBaiduCloudConfig from "./AccessFormBaiduCloudConfig";
+import AccessFormBytePlusConfig from "./AccessFormBytePlusConfig";
+import AccessFormCloudflareConfig from "./AccessFormCloudflareConfig";
+import AccessFormDogeCloudConfig from "./AccessFormDogeCloudConfig";
+import AccessFormGoDaddyConfig from "./AccessFormGoDaddyConfig";
+import AccessFormHuaweiCloudConfig from "./AccessFormHuaweiCloudConfig";
+import AccessFormKubernetesConfig from "./AccessFormKubernetesConfig";
+import AccessFormLocalConfig from "./AccessFormLocalConfig";
+import AccessFormNameDotComConfig from "./AccessFormNameDotComConfig";
+import AccessFormNameSiloConfig from "./AccessFormNameSiloConfig";
+import AccessFormPowerDNSConfig from "./AccessFormPowerDNSConfig";
+import AccessFormQiniuConfig from "./AccessFormQiniuConfig";
+import AccessFormSSHConfig from "./AccessFormSSHConfig";
+import AccessFormTencentCloudConfig from "./AccessFormTencentCloudConfig";
+import AccessFormVolcEngineConfig from "./AccessFormVolcEngineConfig";
+import AccessFormWebhookConfig from "./AccessFormWebhookConfig";
 
-type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
-type AccessEditFormPresets = "add" | "edit";
+type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
+type AccessFormPresets = "add" | "edit";
 
-export type AccessEditFormProps = {
+export type AccessFormProps = {
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
-  initialValues?: AccessEditFormFieldValues;
-  preset: AccessEditFormPresets;
-  onValuesChange?: (values: AccessEditFormFieldValues) => void;
+  initialValues?: AccessFormFieldValues;
+  preset: AccessFormPresets;
+  onValuesChange?: (values: AccessFormFieldValues) => void;
 };
 
-export type AccessEditFormInstance = {
-  getFieldsValue: () => ReturnType<FormInstance<AccessEditFormFieldValues>["getFieldsValue"]>;
-  resetFields: FormInstance<AccessEditFormFieldValues>["resetFields"];
-  validateFields: FormInstance<AccessEditFormFieldValues>["validateFields"];
+export type AccessFormInstance = {
+  getFieldsValue: () => ReturnType<FormInstance<AccessFormFieldValues>["getFieldsValue"]>;
+  resetFields: FormInstance<AccessFormFieldValues>["resetFields"];
+  validateFields: FormInstance<AccessFormFieldValues>["validateFields"];
 };
 
-const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
+const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -69,7 +69,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   const [nestedFormInst] = Form.useForm();
   const nestedFormName = useAntdFormName({ form: nestedFormInst, name: "accessEditFormConfigForm" });
   const nestedFormEl = useMemo(() => {
-    const configFormProps = {
+    const nestedFormProps = {
       form: nestedFormInst,
       formName: nestedFormName,
       disabled: disabled,
@@ -82,45 +82,45 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
      */
     switch (fieldProvider) {
       case ACCESS_PROVIDERS.ACMEHTTPREQ:
-        return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
+        return <AccessFormACMEHttpReqConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.ALIYUN:
-        return <AccessEditFormAliyunConfig {...configFormProps} />;
+        return <AccessFormAliyunConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.AWS:
-        return <AccessEditFormAWSConfig {...configFormProps} />;
+        return <AccessFormAWSConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.BAIDUCLOUD:
-        return <AccessEditFormBaiduCloudConfig {...configFormProps} />;
+        return <AccessFormBaiduCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.BYTEPLUS:
-        return <AccessEditFormBytePlusConfig {...configFormProps} />;
+        return <AccessFormBytePlusConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.CLOUDFLARE:
-        return <AccessEditFormCloudflareConfig {...configFormProps} />;
+        return <AccessFormCloudflareConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.DOGECLOUD:
-        return <AccessEditFormDogeCloudConfig {...configFormProps} />;
+        return <AccessFormDogeCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.GODADDY:
-        return <AccessEditFormGoDaddyConfig {...configFormProps} />;
+        return <AccessFormGoDaddyConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.HUAWEICLOUD:
-        return <AccessEditFormHuaweiCloudConfig {...configFormProps} />;
+        return <AccessFormHuaweiCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.KUBERNETES:
-        return <AccessEditFormKubernetesConfig {...configFormProps} />;
+        return <AccessFormKubernetesConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.LOCAL:
-        return <AccessEditFormLocalConfig {...configFormProps} />;
+        return <AccessFormLocalConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.NAMEDOTCOM:
-        return <AccessEditFormNameDotComConfig {...configFormProps} />;
+        return <AccessFormNameDotComConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.NAMESILO:
-        return <AccessEditFormNameSiloConfig {...configFormProps} />;
+        return <AccessFormNameSiloConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.POWERDNS:
-        return <AccessEditFormPowerDNSConfig {...configFormProps} />;
+        return <AccessFormPowerDNSConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.QINIU:
-        return <AccessEditFormQiniuConfig {...configFormProps} />;
+        return <AccessFormQiniuConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.SSH:
-        return <AccessEditFormSSHConfig {...configFormProps} />;
+        return <AccessFormSSHConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.TENCENTCLOUD:
-        return <AccessEditFormTencentCloudConfig {...configFormProps} />;
+        return <AccessFormTencentCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.VOLCENGINE:
-        return <AccessEditFormVolcEngineConfig {...configFormProps} />;
+        return <AccessFormVolcEngineConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.WEBHOOK:
-        return <AccessEditFormWebhookConfig {...configFormProps} />;
+        return <AccessFormWebhookConfig {...nestedFormProps} />;
     }
-  }, [disabled, initialValues, fieldProvider, nestedFormInst, nestedFormName]);
+  }, [disabled, initialValues?.config, fieldProvider, nestedFormInst, nestedFormName]);
 
   const handleFormProviderChange = (name: string) => {
     if (name === nestedFormName) {
@@ -129,7 +129,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
     }
   };
 
-  const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
+  const handleFormChange = (_: unknown, values: AccessFormFieldValues) => {
     if (values.provider !== fieldProvider) {
       formInst.setFieldValue("provider", values.provider);
     }
@@ -150,7 +150,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
         const t2 = nestedFormInst.validateFields(undefined, config);
         return Promise.all([t1, t2]).then(() => t1);
       },
-    } as AccessEditFormInstance;
+    } as AccessFormInstance;
   });
 
   return (
@@ -177,4 +177,4 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   );
 });
 
-export default AccessEditForm;
+export default AccessForm;
diff --git a/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx b/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
similarity index 76%
rename from ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx
rename to ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
index 8c23b39b..03cf163a 100644
--- a/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx
+++ b/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForACMEHttpReq } from "@/domain/access";
 
-type AccessEditFormACMEHttpReqConfigFieldValues = Partial<AccessConfigForACMEHttpReq>;
+type AccessFormACMEHttpReqConfigFieldValues = Nullish<AccessConfigForACMEHttpReq>;
 
-export type AccessEditFormACMEHttpReqConfigProps = {
+export type AccessFormACMEHttpReqConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormACMEHttpReqConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormACMEHttpReqConfigFieldValues) => void;
+  initialValues?: AccessFormACMEHttpReqConfigFieldValues;
+  onValuesChange?: (values: AccessFormACMEHttpReqConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormACMEHttpReqConfigFieldValues => {
+const initFormModel = (): AccessFormACMEHttpReqConfigFieldValues => {
   return {
     endpoint: "https://example.com/api/",
     mode: "",
   };
 };
 
-const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormACMEHttpReqConfigProps) => {
+const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormACMEHttpReqConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -42,11 +42,18 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValu
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormACMEHttpReqConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="endpoint"
         label={t("access.form.acmehttpreq_endpoint.label")}
@@ -92,4 +99,4 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValu
   );
 };
 
-export default AccessEditFormACMEHttpReqConfig;
+export default AccessFormACMEHttpReqConfig;
diff --git a/ui/src/components/access/AccessEditFormAWSConfig.tsx b/ui/src/components/access/AccessFormAWSConfig.tsx
similarity index 80%
rename from ui/src/components/access/AccessEditFormAWSConfig.tsx
rename to ui/src/components/access/AccessFormAWSConfig.tsx
index 2e4365a8..5ca88099 100644
--- a/ui/src/components/access/AccessEditFormAWSConfig.tsx
+++ b/ui/src/components/access/AccessFormAWSConfig.tsx
@@ -5,17 +5,17 @@ import { z } from "zod";
 
 import { type AccessConfigForAWS } from "@/domain/access";
 
-type AccessEditFormAWSConfigFieldValues = Partial<AccessConfigForAWS>;
+type AccessFormAWSConfigFieldValues = Nullish<AccessConfigForAWS>;
 
-export type AccessEditFormAWSConfigProps = {
+export type AccessFormAWSConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormAWSConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormAWSConfigFieldValues) => void;
+  initialValues?: AccessFormAWSConfigFieldValues;
+  onValuesChange?: (values: AccessFormAWSConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormAWSConfigFieldValues => {
+const initFormModel = (): AccessFormAWSConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
@@ -24,7 +24,7 @@ const initFormModel = (): AccessEditFormAWSConfigFieldValues => {
   };
 };
 
-const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormAWSConfigProps) => {
+const AccessFormAWSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormAWSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -54,11 +54,18 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onVa
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormAWSConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.aws_access_key_id.label")}
@@ -98,4 +105,4 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onVa
   );
 };
 
-export default AccessEditFormAWSConfig;
+export default AccessFormAWSConfig;
diff --git a/ui/src/components/access/AccessEditFormAliyunConfig.tsx b/ui/src/components/access/AccessFormAliyunConfig.tsx
similarity index 70%
rename from ui/src/components/access/AccessEditFormAliyunConfig.tsx
rename to ui/src/components/access/AccessFormAliyunConfig.tsx
index 5d69d5a1..b3c0fbd0 100644
--- a/ui/src/components/access/AccessEditFormAliyunConfig.tsx
+++ b/ui/src/components/access/AccessFormAliyunConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForAliyun } from "@/domain/access";
 
-type AccessEditFormAliyunConfigFieldValues = Partial<AccessConfigForAliyun>;
+type AccessFormAliyunConfigFieldValues = Nullish<AccessConfigForAliyun>;
 
-export type AccessEditFormAliyunConfigProps = {
+export type AccessFormAliyunConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormAliyunConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormAliyunConfigFieldValues) => void;
+  initialValues?: AccessFormAliyunConfigFieldValues;
+  onValuesChange?: (values: AccessFormAliyunConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormAliyunConfigFieldValues => {
+const initFormModel = (): AccessFormAliyunConfigFieldValues => {
   return {
     accessKeyId: "",
     accessKeySecret: "",
   };
 };
 
-const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessEditFormAliyunConfigProps) => {
+const AccessFormAliyunConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormAliyunConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, o
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormAliyunConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.aliyun_access_key_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, o
   );
 };
 
-export default AccessEditFormAliyunConfig;
+export default AccessFormAliyunConfig;
diff --git a/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx b/ui/src/components/access/AccessFormBaiduCloudConfig.tsx
similarity index 69%
rename from ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx
rename to ui/src/components/access/AccessFormBaiduCloudConfig.tsx
index ec6687f1..f72473de 100644
--- a/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx
+++ b/ui/src/components/access/AccessFormBaiduCloudConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForBaiduCloud } from "@/domain/access";
 
-type AccessEditFormBaiduCloudConfigFieldValues = Partial<AccessConfigForBaiduCloud>;
+type AccessFormBaiduCloudConfigFieldValues = Nullish<AccessConfigForBaiduCloud>;
 
-export type AccessEditFormBaiduCloudConfigProps = {
+export type AccessFormBaiduCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormBaiduCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormBaiduCloudConfigFieldValues) => void;
+  initialValues?: AccessFormBaiduCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormBaiduCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormBaiduCloudConfigFieldValues => {
+const initFormModel = (): AccessFormBaiduCloudConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBaiduCloudConfigProps) => {
+const AccessFormBaiduCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBaiduCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormBaiduCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.baiducloud_access_key_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormBaiduCloudConfig;
+export default AccessFormBaiduCloudConfig;
diff --git a/ui/src/components/access/AccessEditFormBytePlusConfig.tsx b/ui/src/components/access/AccessFormBytePlusConfig.tsx
similarity index 69%
rename from ui/src/components/access/AccessEditFormBytePlusConfig.tsx
rename to ui/src/components/access/AccessFormBytePlusConfig.tsx
index a1a9a674..184e0189 100644
--- a/ui/src/components/access/AccessEditFormBytePlusConfig.tsx
+++ b/ui/src/components/access/AccessFormBytePlusConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForBytePlus } from "@/domain/access";
 
-type AccessEditFormBytePlusConfigFieldValues = Partial<AccessConfigForBytePlus>;
+type AccessFormBytePlusConfigFieldValues = Nullish<AccessConfigForBytePlus>;
 
-export type AccessEditFormBytePlusConfigProps = {
+export type AccessFormBytePlusConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormBytePlusConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormBytePlusConfigFieldValues) => void;
+  initialValues?: AccessFormBytePlusConfigFieldValues;
+  onValuesChange?: (values: AccessFormBytePlusConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormBytePlusConfigFieldValues => {
+const initFormModel = (): AccessFormBytePlusConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBytePlusConfigProps) => {
+const AccessFormBytePlusConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBytePlusConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormBytePlusConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKey"
         label={t("access.form.byteplus_access_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormBytePlusConfig;
+export default AccessFormBytePlusConfig;
diff --git a/ui/src/components/access/AccessEditFormCloudflareConfig.tsx b/ui/src/components/access/AccessFormCloudflareConfig.tsx
similarity index 60%
rename from ui/src/components/access/AccessEditFormCloudflareConfig.tsx
rename to ui/src/components/access/AccessFormCloudflareConfig.tsx
index 18c0d650..cd760ed6 100644
--- a/ui/src/components/access/AccessEditFormCloudflareConfig.tsx
+++ b/ui/src/components/access/AccessFormCloudflareConfig.tsx
@@ -5,23 +5,23 @@ import { z } from "zod";
 
 import { type AccessConfigForCloudflare } from "@/domain/access";
 
-type AccessEditFormCloudflareConfigFieldValues = Partial<AccessConfigForCloudflare>;
+type AccessFormCloudflareConfigFieldValues = Nullish<AccessConfigForCloudflare>;
 
-export type AccessEditFormCloudflareConfigProps = {
+export type AccessFormCloudflareConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormCloudflareConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormCloudflareConfigFieldValues) => void;
+  initialValues?: AccessFormCloudflareConfigFieldValues;
+  onValuesChange?: (values: AccessFormCloudflareConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormCloudflareConfigFieldValues => {
+const initFormModel = (): AccessFormCloudflareConfigFieldValues => {
   return {
     dnsApiToken: "",
   };
 };
 
-const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormCloudflareConfigProps) => {
+const AccessFormCloudflareConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormCloudflareConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -34,11 +34,18 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormCloudflareConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="dnsApiToken"
         label={t("access.form.cloudflare_dns_api_token.label")}
@@ -51,4 +58,4 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormCloudflareConfig;
+export default AccessFormCloudflareConfig;
diff --git a/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx b/ui/src/components/access/AccessFormDogeCloudConfig.tsx
similarity index 69%
rename from ui/src/components/access/AccessEditFormDogeCloudConfig.tsx
rename to ui/src/components/access/AccessFormDogeCloudConfig.tsx
index da663945..36b73f9f 100644
--- a/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx
+++ b/ui/src/components/access/AccessFormDogeCloudConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForDogeCloud } from "@/domain/access";
 
-type AccessEditFormDogeCloudConfigFieldValues = Partial<AccessConfigForDogeCloud>;
+type AccessFormDogeCloudConfigFieldValues = Nullish<AccessConfigForDogeCloud>;
 
-export type AccessEditFormDogeCloudConfigProps = {
+export type AccessFormDogeCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormDogeCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormDogeCloudConfigFieldValues) => void;
+  initialValues?: AccessFormDogeCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormDogeCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormDogeCloudConfigFieldValues => {
+const initFormModel = (): AccessFormDogeCloudConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormDogeCloudConfigProps) => {
+const AccessFormDogeCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDogeCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormDogeCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKey"
         label={t("access.form.dogecloud_access_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues
   );
 };
 
-export default AccessEditFormDogeCloudConfig;
+export default AccessFormDogeCloudConfig;
diff --git a/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx b/ui/src/components/access/AccessFormGoDaddyConfig.tsx
similarity index 69%
rename from ui/src/components/access/AccessEditFormGoDaddyConfig.tsx
rename to ui/src/components/access/AccessFormGoDaddyConfig.tsx
index bf3cd53c..9e8989e9 100644
--- a/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx
+++ b/ui/src/components/access/AccessFormGoDaddyConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForGoDaddy } from "@/domain/access";
 
-type AccessEditFormGoDaddyConfigFieldValues = Partial<AccessConfigForGoDaddy>;
+type AccessFormGoDaddyConfigFieldValues = Nullish<AccessConfigForGoDaddy>;
 
-export type AccessEditFormGoDaddyConfigProps = {
+export type AccessFormGoDaddyConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormGoDaddyConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormGoDaddyConfigFieldValues) => void;
+  initialValues?: AccessFormGoDaddyConfigFieldValues;
+  onValuesChange?: (values: AccessFormGoDaddyConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormGoDaddyConfigFieldValues => {
+const initFormModel = (): AccessFormGoDaddyConfigFieldValues => {
   return {
     apiKey: "",
     apiSecret: "",
   };
 };
 
-const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormGoDaddyConfigProps) => {
+const AccessFormGoDaddyConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormGoDaddyConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormGoDaddyConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="apiKey"
         label={t("access.form.godaddy_api_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormGoDaddyConfig;
+export default AccessFormGoDaddyConfig;
diff --git a/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx b/ui/src/components/access/AccessFormHuaweiCloudConfig.tsx
similarity index 75%
rename from ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx
rename to ui/src/components/access/AccessFormHuaweiCloudConfig.tsx
index 36e9717e..d4765e81 100644
--- a/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx
+++ b/ui/src/components/access/AccessFormHuaweiCloudConfig.tsx
@@ -5,17 +5,17 @@ import { z } from "zod";
 
 import { type AccessConfigForHuaweiCloud } from "@/domain/access";
 
-type AccessEditFormHuaweiCloudConfigFieldValues = Partial<AccessConfigForHuaweiCloud>;
+type AccessFormHuaweiCloudConfigFieldValues = Nullish<AccessConfigForHuaweiCloud>;
 
-export type AccessEditFormHuaweiCloudConfigProps = {
+export type AccessFormHuaweiCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormHuaweiCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormHuaweiCloudConfigFieldValues) => void;
+  initialValues?: AccessFormHuaweiCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormHuaweiCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormHuaweiCloudConfigFieldValues => {
+const initFormModel = (): AccessFormHuaweiCloudConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
@@ -23,7 +23,7 @@ const initFormModel = (): AccessEditFormHuaweiCloudConfigFieldValues => {
   };
 };
 
-const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormHuaweiCloudConfigProps) => {
+const AccessFormHuaweiCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormHuaweiCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -47,11 +47,18 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValu
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormHuaweiCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.huaweicloud_access_key_id.label")}
@@ -82,4 +89,4 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValu
   );
 };
 
-export default AccessEditFormHuaweiCloudConfig;
+export default AccessFormHuaweiCloudConfig;
diff --git a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx b/ui/src/components/access/AccessFormKubernetesConfig.tsx
similarity index 66%
rename from ui/src/components/access/AccessEditFormKubernetesConfig.tsx
rename to ui/src/components/access/AccessFormKubernetesConfig.tsx
index b5b4a74a..bfb93ce4 100644
--- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
+++ b/ui/src/components/access/AccessFormKubernetesConfig.tsx
@@ -8,21 +8,21 @@ import { z } from "zod";
 import { type AccessConfigForKubernetes } from "@/domain/access";
 import { readFileContent } from "@/utils/file";
 
-type AccessEditFormKubernetesConfigFieldValues = Partial<AccessConfigForKubernetes>;
+type AccessFormKubernetesConfigFieldValues = Nullish<AccessConfigForKubernetes>;
 
-export type AccessEditFormKubernetesConfigProps = {
+export type AccessFormKubernetesConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormKubernetesConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormKubernetesConfigFieldValues) => void;
+  initialValues?: AccessFormKubernetesConfigFieldValues;
+  onValuesChange?: (values: AccessFormKubernetesConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormKubernetesConfigFieldValues => {
+const initFormModel = (): AccessFormKubernetesConfigFieldValues => {
   return {};
 };
 
-const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormKubernetesConfigProps) => {
+const AccessFormKubernetesConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormKubernetesConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -34,30 +34,37 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
   });
   const formRule = createSchemaFieldRule(formSchema);
 
-  const fieldKubeConfig = Form.useWatch("kubeConfig", form);
+  const fieldKubeConfig = Form.useWatch("kubeConfig", formInst);
   const [fieldKubeFileList, setFieldKubeFileList] = useState<UploadFile[]>([]);
   useEffect(() => {
     setFieldKubeFileList(initialValues?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
   }, [initialValues?.kubeConfig]);
 
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormKubernetesConfigFieldValues);
-  };
-
   const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      form.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
+      formInst.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
       setFieldKubeFileList([file]);
     } else {
-      form.setFieldValue("kubeConfig", "");
+      formInst.setFieldValue("kubeConfig", "");
       setFieldKubeFileList([]);
     }
 
-    onValuesChange?.(form.getFieldsValue(true));
+    onValuesChange?.(formInst.getFieldsValue(true));
+  };
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="kubeConfig" noStyle rules={[formRule]}>
         <Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.k8s_kubeconfig.placeholder")} value={fieldKubeConfig} />
       </Form.Item>
@@ -73,4 +80,4 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormKubernetesConfig;
+export default AccessFormKubernetesConfig;
diff --git a/ui/src/components/access/AccessFormLocalConfig.tsx b/ui/src/components/access/AccessFormLocalConfig.tsx
new file mode 100644
index 00000000..cde72374
--- /dev/null
+++ b/ui/src/components/access/AccessFormLocalConfig.tsx
@@ -0,0 +1,36 @@
+import { Form, type FormInstance } from "antd";
+
+import { type AccessConfigForLocal } from "@/domain/access";
+
+type AccessFormLocalConfigFieldValues = Nullish<AccessConfigForLocal>;
+
+export type AccessFormLocalConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: AccessFormLocalConfigFieldValues;
+  onValuesChange?: (values: AccessFormLocalConfigFieldValues) => void;
+};
+
+const initFormModel = (): AccessFormLocalConfigFieldValues => {
+  return {};
+};
+
+const AccessFormLocalConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormLocalConfigProps) => {
+  const handleFormChange = (_: unknown, values: any) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    ></Form>
+  );
+};
+
+export default AccessFormLocalConfig;
diff --git a/ui/src/components/access/AccessEditFormNameDotComConfig.tsx b/ui/src/components/access/AccessFormNameDotComConfig.tsx
similarity index 69%
rename from ui/src/components/access/AccessEditFormNameDotComConfig.tsx
rename to ui/src/components/access/AccessFormNameDotComConfig.tsx
index 9a01c9a6..0048de52 100644
--- a/ui/src/components/access/AccessEditFormNameDotComConfig.tsx
+++ b/ui/src/components/access/AccessFormNameDotComConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForNameDotCom } from "@/domain/access";
 
-type AccessEditFormNameDotComConfigFieldValues = Partial<AccessConfigForNameDotCom>;
+type AccessFormNameDotComConfigFieldValues = Nullish<AccessConfigForNameDotCom>;
 
-export type AccessEditFormNameDotComConfigProps = {
+export type AccessFormNameDotComConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormNameDotComConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormNameDotComConfigFieldValues) => void;
+  initialValues?: AccessFormNameDotComConfigFieldValues;
+  onValuesChange?: (values: AccessFormNameDotComConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormNameDotComConfigFieldValues => {
+const initFormModel = (): AccessFormNameDotComConfigFieldValues => {
   return {
     username: "",
     apiToken: "",
   };
 };
 
-const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameDotComConfigProps) => {
+const AccessFormNameDotComConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNameDotComConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormNameDotComConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="username"
         label={t("access.form.namedotcom_username.label")}
@@ -66,4 +73,4 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormNameDotComConfig;
+export default AccessFormNameDotComConfig;
diff --git a/ui/src/components/access/AccessEditFormNameSiloConfig.tsx b/ui/src/components/access/AccessFormNameSiloConfig.tsx
similarity index 60%
rename from ui/src/components/access/AccessEditFormNameSiloConfig.tsx
rename to ui/src/components/access/AccessFormNameSiloConfig.tsx
index 09b6ff05..1e8e2d8e 100644
--- a/ui/src/components/access/AccessEditFormNameSiloConfig.tsx
+++ b/ui/src/components/access/AccessFormNameSiloConfig.tsx
@@ -5,23 +5,23 @@ import { z } from "zod";
 
 import { type AccessConfigForNameSilo } from "@/domain/access";
 
-type AccessEditFormNameSiloConfigFieldValues = Partial<AccessConfigForNameSilo>;
+type AccessFormNameSiloConfigFieldValues = Nullish<AccessConfigForNameSilo>;
 
-export type AccessEditFormNameSiloConfigProps = {
+export type AccessFormNameSiloConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormNameSiloConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormNameSiloConfigFieldValues) => void;
+  initialValues?: AccessFormNameSiloConfigFieldValues;
+  onValuesChange?: (values: AccessFormNameSiloConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormNameSiloConfigFieldValues => {
+const initFormModel = (): AccessFormNameSiloConfigFieldValues => {
   return {
     apiKey: "",
   };
 };
 
-const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameSiloConfigProps) => {
+const AccessFormNameSiloConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNameSiloConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -34,11 +34,18 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormNameSiloConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="apiKey"
         label={t("access.form.namesilo_api_key.label")}
@@ -51,4 +58,4 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormNameSiloConfig;
+export default AccessFormNameSiloConfig;
diff --git a/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx b/ui/src/components/access/AccessFormPowerDNSConfig.tsx
similarity index 67%
rename from ui/src/components/access/AccessEditFormPowerDNSConfig.tsx
rename to ui/src/components/access/AccessFormPowerDNSConfig.tsx
index 337dbbf4..83a22b9b 100644
--- a/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx
+++ b/ui/src/components/access/AccessFormPowerDNSConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForPowerDNS } from "@/domain/access";
 
-type AccessEditFormPowerDNSConfigFieldValues = Partial<AccessConfigForPowerDNS>;
+type AccessFormPowerDNSConfigFieldValues = Nullish<AccessConfigForPowerDNS>;
 
-export type AccessEditFormPowerDNSConfigProps = {
+export type AccessFormPowerDNSConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormPowerDNSConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormPowerDNSConfigFieldValues) => void;
+  initialValues?: AccessFormPowerDNSConfigFieldValues;
+  onValuesChange?: (values: AccessFormPowerDNSConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormPowerDNSConfigFieldValues => {
+const initFormModel = (): AccessFormPowerDNSConfigFieldValues => {
   return {
     apiUrl: "",
     apiKey: "",
   };
 };
 
-const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormPowerDNSConfigProps) => {
+const AccessFormPowerDNSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormPowerDNSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -36,11 +36,18 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormPowerDNSConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="apiUrl"
         label={t("access.form.powerdns_api_url.label")}
@@ -62,4 +69,4 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormPowerDNSConfig;
+export default AccessFormPowerDNSConfig;
diff --git a/ui/src/components/access/AccessEditFormQiniuConfig.tsx b/ui/src/components/access/AccessFormQiniuConfig.tsx
similarity index 70%
rename from ui/src/components/access/AccessEditFormQiniuConfig.tsx
rename to ui/src/components/access/AccessFormQiniuConfig.tsx
index 5325ce8e..40517184 100644
--- a/ui/src/components/access/AccessEditFormQiniuConfig.tsx
+++ b/ui/src/components/access/AccessFormQiniuConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForQiniu } from "@/domain/access";
 
-type AccessEditFormQiniuConfigFieldValues = Partial<AccessConfigForQiniu>;
+type AccessFormQiniuConfigFieldValues = Nullish<AccessConfigForQiniu>;
 
-export type AccessEditFormQiniuConfigProps = {
+export type AccessFormQiniuConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormQiniuConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormQiniuConfigFieldValues) => void;
+  initialValues?: AccessFormQiniuConfigFieldValues;
+  onValuesChange?: (values: AccessFormQiniuConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormQiniuConfigFieldValues => {
+const initFormModel = (): AccessFormQiniuConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormQiniuConfigProps) => {
+const AccessFormQiniuConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormQiniuConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, on
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormQiniuConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKey"
         label={t("access.form.qiniu_access_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, on
   );
 };
 
-export default AccessEditFormQiniuConfig;
+export default AccessFormQiniuConfig;
diff --git a/ui/src/components/access/AccessEditFormSSHConfig.tsx b/ui/src/components/access/AccessFormSSHConfig.tsx
similarity index 82%
rename from ui/src/components/access/AccessEditFormSSHConfig.tsx
rename to ui/src/components/access/AccessFormSSHConfig.tsx
index bee5f3e8..d455a5fa 100644
--- a/ui/src/components/access/AccessEditFormSSHConfig.tsx
+++ b/ui/src/components/access/AccessFormSSHConfig.tsx
@@ -9,17 +9,17 @@ import { type AccessConfigForSSH } from "@/domain/access";
 import { readFileContent } from "@/utils/file";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
 
-type AccessEditFormSSHConfigFieldValues = Partial<AccessConfigForSSH>;
+type AccessFormSSHConfigFieldValues = Nullish<AccessConfigForSSH>;
 
-export type AccessEditFormSSHConfigProps = {
+export type AccessFormSSHConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormSSHConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormSSHConfigFieldValues) => void;
+  initialValues?: AccessFormSSHConfigFieldValues;
+  onValuesChange?: (values: AccessFormSSHConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormSSHConfigFieldValues => {
+const initFormModel = (): AccessFormSSHConfigFieldValues => {
   return {
     host: "127.0.0.1",
     port: 22,
@@ -27,7 +27,7 @@ const initFormModel = (): AccessEditFormSSHConfigFieldValues => {
   };
 };
 
-const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormSSHConfigProps) => {
+const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSSHConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -55,34 +55,41 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
       .string()
       .max(20480, t("common.errmsg.string_max", { max: 20480 }))
       .nullish()
-      .refine((v) => !v || form.getFieldValue("key"), t("access.form.ssh_key.placeholder")),
+      .refine((v) => !v || formInst.getFieldValue("key"), t("access.form.ssh_key.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
 
-  const fieldKey = Form.useWatch("key", form);
+  const fieldKey = Form.useWatch("key", formInst);
   const [fieldKeyFileList, setFieldKeyFileList] = useState<UploadFile[]>([]);
   useEffect(() => {
     setFieldKeyFileList(initialValues?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
   }, [initialValues?.key]);
 
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormSSHConfigFieldValues);
-  };
-
   const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      form.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
+      formInst.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
       setFieldKeyFileList([file]);
     } else {
-      form.setFieldValue("key", "");
+      formInst.setFieldValue("key", "");
       setFieldKeyFileList([]);
     }
 
-    onValuesChange?.(form.getFieldsValue(true));
+    onValuesChange?.(formInst.getFieldsValue(true));
+  };
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <div className="flex space-x-2">
         <div className="w-2/3">
           <Form.Item name="host" label={t("access.form.ssh_host.label")} rules={[formRule]}>
@@ -143,4 +150,4 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
   );
 };
 
-export default AccessEditFormSSHConfig;
+export default AccessFormSSHConfig;
diff --git a/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx b/ui/src/components/access/AccessFormTencentCloudConfig.tsx
similarity index 68%
rename from ui/src/components/access/AccessEditFormTencentCloudConfig.tsx
rename to ui/src/components/access/AccessFormTencentCloudConfig.tsx
index c6adbb1b..11de6d6d 100644
--- a/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx
+++ b/ui/src/components/access/AccessFormTencentCloudConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForTencentCloud } from "@/domain/access";
 
-type AccessEditFormTencentCloudConfigFieldValues = Partial<AccessConfigForTencentCloud>;
+type AccessFormTencentCloudConfigFieldValues = Nullish<AccessConfigForTencentCloud>;
 
-export type AccessEditFormTencentCloudConfigProps = {
+export type AccessFormTencentCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormTencentCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormTencentCloudConfigFieldValues) => void;
+  initialValues?: AccessFormTencentCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormTencentCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormTencentCloudConfigFieldValues => {
+const initFormModel = (): AccessFormTencentCloudConfigFieldValues => {
   return {
     secretId: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormTencentCloudConfigProps) => {
+const AccessFormTencentCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormTencentCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialVal
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormTencentCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="secretId"
         label={t("access.form.tencentcloud_secret_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialVal
   );
 };
 
-export default AccessEditFormTencentCloudConfig;
+export default AccessFormTencentCloudConfig;
diff --git a/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx b/ui/src/components/access/AccessFormVolcEngineConfig.tsx
similarity index 69%
rename from ui/src/components/access/AccessEditFormVolcEngineConfig.tsx
rename to ui/src/components/access/AccessFormVolcEngineConfig.tsx
index f10b4faf..02a693b0 100644
--- a/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx
+++ b/ui/src/components/access/AccessFormVolcEngineConfig.tsx
@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForVolcEngine } from "@/domain/access";
 
-type AccessEditFormVolcEngineConfigFieldValues = Partial<AccessConfigForVolcEngine>;
+type AccessFormVolcEngineConfigFieldValues = Nullish<AccessConfigForVolcEngine>;
 
-export type AccessEditFormVolcEngineConfigProps = {
+export type AccessFormVolcEngineConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormVolcEngineConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormVolcEngineConfigFieldValues) => void;
+  initialValues?: AccessFormVolcEngineConfigFieldValues;
+  onValuesChange?: (values: AccessFormVolcEngineConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormVolcEngineConfigFieldValues => {
+const initFormModel = (): AccessFormVolcEngineConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormVolcEngineConfigProps) => {
+const AccessFormVolcEngineConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormVolcEngineConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormVolcEngineConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.volcengine_access_key_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormVolcEngineConfig;
+export default AccessFormVolcEngineConfig;
diff --git a/ui/src/components/access/AccessEditFormWebhookConfig.tsx b/ui/src/components/access/AccessFormWebhookConfig.tsx
similarity index 54%
rename from ui/src/components/access/AccessEditFormWebhookConfig.tsx
rename to ui/src/components/access/AccessFormWebhookConfig.tsx
index 9eef9ce0..60f55fe6 100644
--- a/ui/src/components/access/AccessEditFormWebhookConfig.tsx
+++ b/ui/src/components/access/AccessFormWebhookConfig.tsx
@@ -5,23 +5,23 @@ import { z } from "zod";
 
 import { type AccessConfigForWebhook } from "@/domain/access";
 
-type AccessEditFormWebhookConfigFieldValues = Partial<AccessConfigForWebhook>;
+type AccessFormWebhookConfigFieldValues = Nullish<AccessConfigForWebhook>;
 
-export type AccessEditFormWebhookConfigProps = {
+export type AccessFormWebhookConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormWebhookConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormWebhookConfigFieldValues) => void;
+  initialValues?: AccessFormWebhookConfigFieldValues;
+  onValuesChange?: (values: AccessFormWebhookConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormWebhookConfigFieldValues => {
+const initFormModel = (): AccessFormWebhookConfigFieldValues => {
   return {
     url: "",
   };
 };
 
-const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormWebhookConfigProps) => {
+const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormWebhookConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -30,11 +30,18 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormWebhookConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="url" label={t("access.form.webhook_url.label")} rules={[formRule]}>
         <Input placeholder={t("access.form.webhook_url.placeholder")} />
       </Form.Item>
@@ -42,4 +49,4 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormWebhookConfig;
+export default AccessFormWebhookConfig;
diff --git a/ui/src/components/workflow/WorkflowElements.tsx b/ui/src/components/workflow/WorkflowElements.tsx
index 3969b7fb..c66748f4 100644
--- a/ui/src/components/workflow/WorkflowElements.tsx
+++ b/ui/src/components/workflow/WorkflowElements.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import WorkflowElement from "@/components/workflow/WorkflowElement";
-import { type WorkflowNode, WorkflowNodeType, newNode } from "@/domain/workflow";
+import { WorkflowNodeType, newNode } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 
@@ -15,9 +15,10 @@ const WorkflowElements = ({ className, style, disabled }: WorkflowElementsProps)
   const { workflow } = useWorkflowStore(useZustandShallowSelector(["workflow"]));
 
   const elements = useMemo(() => {
+    const root = workflow.draft;
     const nodes: JSX.Element[] = [];
 
-    let current = workflow.draft as WorkflowNode | undefined;
+    let current = root as typeof root | undefined;
     while (current) {
       nodes.push(<WorkflowElement key={current.id} node={current} disabled={disabled} />);
       current = current.next;
diff --git a/ui/src/components/workflow/node/ConditionNode.tsx b/ui/src/components/workflow/node/ConditionNode.tsx
index 9b536c2b..1cdbfcda 100644
--- a/ui/src/components/workflow/node/ConditionNode.tsx
+++ b/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
diff --git a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
index b73f079c..5462eebb 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
+++ b/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>
     );
   }
 );
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBConfig.tsx
similarity index 75%
rename from ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBConfig.tsx
index 1e69763a..9560028b 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCDNConfig.tsx
new file mode 100644
index 00000000..c5da5df5
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCDNFields.tsx
deleted file mode 100644
index 7c54de0f..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBConfig.tsx
similarity index 76%
rename from ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBConfig.tsx
index 6140bcc2..be56600b 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunDCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunDCDNConfig.tsx
new file mode 100644
index 00000000..7a701dda
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunDCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunDCDNFields.tsx
deleted file mode 100644
index e3138017..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunDCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunNLBFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunNLBConfig.tsx
similarity index 75%
rename from ui/src/components/workflow/node/DeployNodeConfigFormAliyunNLBFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormAliyunNLBConfig.tsx
index 427ad97a..c37b97db 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunNLBFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunOSSFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunOSSConfig.tsx
similarity index 64%
rename from ui/src/components/workflow/node/DeployNodeConfigFormAliyunOSSFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormAliyunOSSConfig.tsx
index 74f89427..89e4e315 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunOSSFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudCDNConfig.tsx
new file mode 100644
index 00000000..dd62594b
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudCDNFields.tsx
deleted file mode 100644
index 4b6702ef..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBytePlusCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBytePlusCDNConfig.tsx
new file mode 100644
index 00000000..b3ed4ac2
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBytePlusCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBytePlusCDNFields.tsx
deleted file mode 100644
index 3b494dc2..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormBytePlusCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormDogeCloudCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormDogeCloudCDNConfig.tsx
new file mode 100644
index 00000000..ebe832bc
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormDogeCloudCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormDogeCloudCDNFields.tsx
deleted file mode 100644
index ff3cd3c4..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormDogeCloudCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudCDNConfig.tsx
similarity index 57%
rename from ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudCDNFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudCDNConfig.tsx
index 5b40e1eb..92d4efee 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudCDNFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudELBFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudELBConfig.tsx
similarity index 79%
rename from ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudELBFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudELBConfig.tsx
index be6fbe3d..259e1f44 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormHuaweiCloudELBFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormKubernetesSecretFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormKubernetesSecretConfig.tsx
similarity index 75%
rename from ui/src/components/workflow/node/DeployNodeConfigFormKubernetesSecretFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormKubernetesSecretConfig.tsx
index f0a234b0..f6efd4d0 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormKubernetesSecretFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormLocalFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
similarity index 90%
rename from ui/src/components/workflow/node/DeployNodeConfigFormLocalFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
index 1628cbfa..c217ae68 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormLocalFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormQiniuCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormQiniuCDNConfig.tsx
new file mode 100644
index 00000000..f8e4faae
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormQiniuCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormQiniuCDNFields.tsx
deleted file mode 100644
index b7ab41df..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormQiniuCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormSSHFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
similarity index 86%
rename from ui/src/components/workflow/node/DeployNodeConfigFormSSHFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
index 7d10e998..77da315b 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormSSHFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCDNConfig.tsx
new file mode 100644
index 00000000..63c9c024
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCDNFields.tsx
deleted file mode 100644
index 3eb146c2..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBConfig.tsx
similarity index 82%
rename from ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBConfig.tsx
index bc42c108..a3f32aa9 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCOSFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCOSConfig.tsx
similarity index 64%
rename from ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCOSFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCOSConfig.tsx
index bde2b13f..26b70048 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCOSFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudECDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudECDNConfig.tsx
new file mode 100644
index 00000000..ae4fd858
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudECDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudECDNFields.tsx
deleted file mode 100644
index 7114b9f9..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudECDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudEOFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudEOConfig.tsx
similarity index 57%
rename from ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudEOFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudEOConfig.tsx
index c3e472c7..5c93600c 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudEOFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineCDNConfig.tsx
new file mode 100644
index 00000000..d73cb40c
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineCDNFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineCDNFields.tsx
deleted file mode 100644
index 20771c44..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineCDNFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineLiveConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineLiveConfig.tsx
new file mode 100644
index 00000000..7d6afed9
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineLiveFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineLiveFields.tsx
deleted file mode 100644
index 06410a88..00000000
--- a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineLiveFields.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormWebhookFields.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormWebhookConfig.tsx
similarity index 62%
rename from ui/src/components/workflow/node/DeployNodeConfigFormWebhookFields.tsx
rename to ui/src/components/workflow/node/DeployNodeConfigFormWebhookConfig.tsx
index 550520bb..b916abf1 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormWebhookFields.tsx
+++ b/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;
diff --git a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx b/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
index 8afb6ec2..5c6ea85f 100644
--- a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
+++ b/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(),
     });
 
diff --git a/ui/src/components/workflow/node/StartNodeConfigForm.tsx b/ui/src/components/workflow/node/StartNodeConfigForm.tsx
index 12da7006..aeda59e2 100644
--- a/ui/src/components/workflow/node/StartNodeConfigForm.tsx
+++ b/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(),
     });
 
diff --git a/ui/src/components/workflow/node/_SharedNode.tsx b/ui/src/components/workflow/node/_SharedNode.tsx
index 09ad9b1a..174b154e 100644
--- a/ui/src/components/workflow/node/_SharedNode.tsx
+++ b/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;
     }
diff --git a/ui/src/domain/workflow.ts b/ui/src/domain/workflow.ts
index 6328e972..01d7b8b2 100644
--- a/ui/src/domain/workflow.ts
+++ b/ui/src/domain/workflow.ts
@@ -112,10 +112,10 @@ export type WorkflowNodeConfigForApply = {
 };
 
 export type WorkflowNodeConfigForDeploy = {
+  certificate: string;
   provider: string;
   providerAccessId: string;
-  certificate: string;
-  [key: string]: unknown;
+  providerConfig: Record<string, unknown>;
 };
 
 export type WorkflowNodeConfigForNotify = {
diff --git a/ui/src/i18n/locales/en/nls.workflow.json b/ui/src/i18n/locales/en/nls.workflow.json
index 27e5eb5e..d59fb3ae 100644
--- a/ui/src/i18n/locales/en/nls.workflow.json
+++ b/ui/src/i18n/locales/en/nls.workflow.json
@@ -33,13 +33,13 @@
   "workflow.new.modal.title": "Create workflow",
   "workflow.new.modal.form.name.label": "Name",
   "workflow.new.modal.form.name.placeholder": "Please enter workflow name",
-  "workflow.new.modal.form.description.label": "Description",
+  "workflow.new.modal.form.description.label": "Description (Optional)",
   "workflow.new.modal.form.description.placeholder": "Please enter workflow description",
 
   "workflow.detail.baseinfo.modal.title": "Workflow base information",
   "workflow.detail.baseinfo.form.name.label": "Name",
   "workflow.detail.baseinfo.form.name.placeholder": "Please enter workflow name",
-  "workflow.detail.baseinfo.form.description.label": "Description",
+  "workflow.detail.baseinfo.form.description.label": "Description (Optional)",
   "workflow.detail.baseinfo.form.description.placeholder": "Please enter workflow description",
   "workflow.detail.orchestration.tab": "Orchestration",
   "workflow.detail.orchestration.draft.alert": "The orchestration is not released yet.",
diff --git a/ui/src/i18n/locales/zh/nls.workflow.json b/ui/src/i18n/locales/zh/nls.workflow.json
index 80a8c2b4..fe2644cb 100644
--- a/ui/src/i18n/locales/zh/nls.workflow.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.json
@@ -33,13 +33,13 @@
   "workflow.new.modal.title": "新建工作流",
   "workflow.new.modal.form.name.label": "名称",
   "workflow.new.modal.form.name.placeholder": "请输入工作流名称",
-  "workflow.new.modal.form.description.label": "描述",
+  "workflow.new.modal.form.description.label": "描述（可选）",
   "workflow.new.modal.form.description.placeholder": "请输入工作流描述",
 
   "workflow.detail.baseinfo.modal.title": "编辑基本信息",
   "workflow.detail.baseinfo.form.name.label": "名称",
   "workflow.detail.baseinfo.form.name.placeholder": "请输入工作流名称",
-  "workflow.detail.baseinfo.form.description.label": "描述",
+  "workflow.detail.baseinfo.form.description.label": "描述（可选）",
   "workflow.detail.baseinfo.form.description.placeholder": "请输入工作流描述",
   "workflow.detail.orchestration.tab": "流程编排",
   "workflow.detail.orchestration.draft.alert": "当前编排有未发布的更改。",
diff --git a/ui/tsconfig.app.json b/ui/tsconfig.app.json
index 954989fb..9865cd96 100644
--- a/ui/tsconfig.app.json
+++ b/ui/tsconfig.app.json
@@ -32,6 +32,7 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": [
-    "src"
+    "src",
+    "types"
   ]
 }
diff --git a/ui/src/global.d.ts b/ui/types/global.d.ts
similarity index 100%
rename from ui/src/global.d.ts
rename to ui/types/global.d.ts
diff --git a/ui/types/global.utility.d.ts b/ui/types/global.utility.d.ts
new file mode 100644
index 00000000..e7c8b65b
--- /dev/null
+++ b/ui/types/global.utility.d.ts
@@ -0,0 +1,7 @@
+declare global {
+  type Nullish<T> = {
+    [P in keyof T]?: T[P] | null | undefined;
+  };
+}
+
+export {};