feat: improve workflow node configuration

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{

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
 	}

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"`

ui/src/components/access/AccessEditFormLocalConfig.tsx

@@ -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;

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>
     </>

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 AccessFormACMEHttpReqConfig from "./AccessFormACMEHttpReqConfig";
-import AccessEditFormAWSConfig from "./AccessEditFormAWSConfig";
+import AccessFormAWSConfig from "./AccessFormAWSConfig";
-import AccessEditFormAliyunConfig from "./AccessEditFormAliyunConfig";
+import AccessFormAliyunConfig from "./AccessFormAliyunConfig";
-import AccessEditFormBaiduCloudConfig from "./AccessEditFormBaiduCloudConfig";
+import AccessFormBaiduCloudConfig from "./AccessFormBaiduCloudConfig";
-import AccessEditFormBytePlusConfig from "./AccessEditFormBytePlusConfig";
+import AccessFormBytePlusConfig from "./AccessFormBytePlusConfig";
-import AccessEditFormCloudflareConfig from "./AccessEditFormCloudflareConfig";
+import AccessFormCloudflareConfig from "./AccessFormCloudflareConfig";
-import AccessEditFormDogeCloudConfig from "./AccessEditFormDogeCloudConfig";
+import AccessFormDogeCloudConfig from "./AccessFormDogeCloudConfig";
-import AccessEditFormGoDaddyConfig from "./AccessEditFormGoDaddyConfig";
+import AccessFormGoDaddyConfig from "./AccessFormGoDaddyConfig";
-import AccessEditFormHuaweiCloudConfig from "./AccessEditFormHuaweiCloudConfig";
+import AccessFormHuaweiCloudConfig from "./AccessFormHuaweiCloudConfig";
-import AccessEditFormKubernetesConfig from "./AccessEditFormKubernetesConfig";
+import AccessFormKubernetesConfig from "./AccessFormKubernetesConfig";
-import AccessEditFormLocalConfig from "./AccessEditFormLocalConfig";
+import AccessFormLocalConfig from "./AccessFormLocalConfig";
-import AccessEditFormNameDotComConfig from "./AccessEditFormNameDotComConfig";
+import AccessFormNameDotComConfig from "./AccessFormNameDotComConfig";
-import AccessEditFormNameSiloConfig from "./AccessEditFormNameSiloConfig";
+import AccessFormNameSiloConfig from "./AccessFormNameSiloConfig";
-import AccessEditFormPowerDNSConfig from "./AccessEditFormPowerDNSConfig";
+import AccessFormPowerDNSConfig from "./AccessFormPowerDNSConfig";
-import AccessEditFormQiniuConfig from "./AccessEditFormQiniuConfig";
+import AccessFormQiniuConfig from "./AccessFormQiniuConfig";
-import AccessEditFormSSHConfig from "./AccessEditFormSSHConfig";
+import AccessFormSSHConfig from "./AccessFormSSHConfig";
-import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig";
+import AccessFormTencentCloudConfig from "./AccessFormTencentCloudConfig";
-import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
+import AccessFormVolcEngineConfig from "./AccessFormVolcEngineConfig";
-import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
+import AccessFormWebhookConfig from "./AccessFormWebhookConfig";
 
-type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
+type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
-type AccessEditFormPresets = "add" | "edit";
+type AccessFormPresets = "add" | "edit";
 
-export type AccessEditFormProps = {
+export type AccessFormProps = {
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
-  initialValues?: AccessEditFormFieldValues;
+  initialValues?: AccessFormFieldValues;
-  preset: AccessEditFormPresets;
+  preset: AccessFormPresets;
-  onValuesChange?: (values: AccessEditFormFieldValues) => void;
+  onValuesChange?: (values: AccessFormFieldValues) => void;
 };
 
-export type AccessEditFormInstance = {
+export type AccessFormInstance = {
-  getFieldsValue: () => ReturnType<FormInstance<AccessEditFormFieldValues>["getFieldsValue"]>;
+  getFieldsValue: () => ReturnType<FormInstance<AccessFormFieldValues>["getFieldsValue"]>;
-  resetFields: FormInstance<AccessEditFormFieldValues>["resetFields"];
+  resetFields: FormInstance<AccessFormFieldValues>["resetFields"];
-  validateFields: FormInstance<AccessEditFormFieldValues>["validateFields"];
+  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;

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;
+  initialValues?: AccessFormACMEHttpReqConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormACMEHttpReqConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormAWSConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormAWSConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormAliyunConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormAliyunConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormBaiduCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormBaiduCloudConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormBytePlusConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormBytePlusConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormCloudflareConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormCloudflareConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormDogeCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormDogeCloudConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormGoDaddyConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormGoDaddyConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormHuaweiCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormHuaweiCloudConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormKubernetesConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormKubernetesConfigFieldValues) => void;
+  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;

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;

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;
+  initialValues?: AccessFormNameDotComConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormNameDotComConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormNameSiloConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormNameSiloConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormPowerDNSConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormPowerDNSConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormQiniuConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormQiniuConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormSSHConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormSSHConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormTencentCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormTencentCloudConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormVolcEngineConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormVolcEngineConfigFieldValues) => void;
+  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;

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;
+  initialValues?: AccessFormWebhookConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormWebhookConfigFieldValues) => void;
+  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;

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;

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

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

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

@@ -12,32 +12,32 @@ import DeployProviderPicker from "@/components/provider/DeployProviderPicker";
 import DeployProviderSelect from "@/components/provider/DeployProviderSelect";
 import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider";
 import { type WorkflowNode, type WorkflowNodeConfigForDeploy } from "@/domain/workflow";
-import { useAntdForm, useZustandShallowSelector } from "@/hooks";
+import { useAntdForm, useAntdFormName, useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 
-import DeployNodeConfigFormAliyunALBFields from "./DeployNodeConfigFormAliyunALBFields";
+import DeployNodeConfigFormAliyunALBConfig from "./DeployNodeConfigFormAliyunALBConfig";
-import DeployNodeConfigFormAliyunCDNFields from "./DeployNodeConfigFormAliyunCDNFields";
+import DeployNodeConfigFormAliyunCDNConfig from "./DeployNodeConfigFormAliyunCDNConfig";
-import DeployNodeConfigFormAliyunCLBFields from "./DeployNodeConfigFormAliyunCLBFields";
+import DeployNodeConfigFormAliyunCLBConfig from "./DeployNodeConfigFormAliyunCLBConfig";
-import DeployNodeConfigFormAliyunDCDNFields from "./DeployNodeConfigFormAliyunDCDNFields";
+import DeployNodeConfigFormAliyunDCDNConfig from "./DeployNodeConfigFormAliyunDCDNConfig";
-import DeployNodeConfigFormAliyunNLBFields from "./DeployNodeConfigFormAliyunNLBFields";
+import DeployNodeConfigFormAliyunNLBConfig from "./DeployNodeConfigFormAliyunNLBConfig";
-import DeployNodeConfigFormAliyunOSSFields from "./DeployNodeConfigFormAliyunOSSFields";
+import DeployNodeConfigFormAliyunOSSConfig from "./DeployNodeConfigFormAliyunOSSConfig";
-import DeployNodeConfigFormBaiduCloudCDNFields from "./DeployNodeConfigFormBaiduCloudCDNFields";
+import DeployNodeConfigFormBaiduCloudCDNConfig from "./DeployNodeConfigFormBaiduCloudCDNConfig";
-import DeployNodeConfigFormBytePlusCDNFields from "./DeployNodeConfigFormBytePlusCDNFields";
+import DeployNodeConfigFormBytePlusCDNConfig from "./DeployNodeConfigFormBytePlusCDNConfig";
-import DeployNodeConfigFormDogeCloudCDNFields from "./DeployNodeConfigFormDogeCloudCDNFields";
+import DeployNodeConfigFormDogeCloudCDNConfig from "./DeployNodeConfigFormDogeCloudCDNConfig";
-import DeployNodeConfigFormHuaweiCloudCDNFields from "./DeployNodeConfigFormHuaweiCloudCDNFields";
+import DeployNodeConfigFormHuaweiCloudCDNConfig from "./DeployNodeConfigFormHuaweiCloudCDNConfig";
-import DeployNodeConfigFormHuaweiCloudELBFields from "./DeployNodeConfigFormHuaweiCloudELBFields";
+import DeployNodeConfigFormHuaweiCloudELBConfig from "./DeployNodeConfigFormHuaweiCloudELBConfig";
-import DeployNodeConfigFormKubernetesSecretFields from "./DeployNodeConfigFormKubernetesSecretFields";
+import DeployNodeConfigFormKubernetesSecretConfig from "./DeployNodeConfigFormKubernetesSecretConfig";
-import DeployNodeConfigFormLocalFields from "./DeployNodeConfigFormLocalFields";
+import DeployNodeConfigFormLocalConfig from "./DeployNodeConfigFormLocalConfig";
-import DeployNodeConfigFormQiniuCDNFields from "./DeployNodeConfigFormQiniuCDNFields";
+import DeployNodeConfigFormQiniuCDNConfig from "./DeployNodeConfigFormQiniuCDNConfig";
-import DeployNodeConfigFormSSHFields from "./DeployNodeConfigFormSSHFields";
+import DeployNodeConfigFormSSHConfig from "./DeployNodeConfigFormSSHConfig.tsx";
-import DeployNodeConfigFormTencentCloudCDNFields from "./DeployNodeConfigFormTencentCloudCDNFields";
+import DeployNodeConfigFormTencentCloudCDNConfig from "./DeployNodeConfigFormTencentCloudCDNConfig.tsx";
-import DeployNodeConfigFormTencentCloudCLBFields from "./DeployNodeConfigFormTencentCloudCLBFields";
+import DeployNodeConfigFormTencentCloudCLBConfig from "./DeployNodeConfigFormTencentCloudCLBConfig.tsx";
-import DeployNodeConfigFormTencentCloudCOSFields from "./DeployNodeConfigFormTencentCloudCOSFields";
+import DeployNodeConfigFormTencentCloudCOSConfig from "./DeployNodeConfigFormTencentCloudCOSConfig.tsx";
-import DeployNodeConfigFormTencentCloudECDNFields from "./DeployNodeConfigFormTencentCloudECDNFields";
+import DeployNodeConfigFormTencentCloudECDNConfig from "./DeployNodeConfigFormTencentCloudECDNConfig.tsx";
-import DeployNodeConfigFormTencentCloudEOFields from "./DeployNodeConfigFormTencentCloudEOFields";
+import DeployNodeConfigFormTencentCloudEOConfig from "./DeployNodeConfigFormTencentCloudEOConfig.tsx";
-import DeployNodeConfigFormVolcEngineCDNFields from "./DeployNodeConfigFormVolcEngineCDNFields";
+import DeployNodeConfigFormVolcEngineCDNConfig from "./DeployNodeConfigFormVolcEngineCDNConfig.tsx";
-import DeployNodeConfigFormVolcEngineLiveFields from "./DeployNodeConfigFormVolcEngineLiveFields";
+import DeployNodeConfigFormVolcEngineLiveConfig from "./DeployNodeConfigFormVolcEngineLiveConfig.tsx";
-import DeployNodeConfigFormWebhookFields from "./DeployNodeConfigFormWebhookFields";
+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
+      providerConfig: z.any(),
-        .string({ message: t("workflow_node.deploy.form.certificate.placeholder") })
-        .nonempty(t("workflow_node.deploy.form.certificate.placeholder")),
     });
     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 排序。
+        注意：如果追加新的子组件，请保持以 ASCII 排序。
-      NOTICE: If you add new child component, please keep ASCII order.
+        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}>
+      <Form.Provider onFormChange={handleFormProviderChange}>
-        <Show when={!!fieldProvider} fallback={<DeployProviderPicker onSelect={handleProviderPick} />}>
+        <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-          <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
+          <Show when={!!fieldProvider} fallback={<DeployProviderPicker onSelect={handleProviderPick} />}>
-            <DeployProviderSelect
+            <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
-              allowClear
+              <DeployProviderSelect
-              disabled
+                allowClear
-              placeholder={t("workflow_node.deploy.form.provider.placeholder")}
+                disabled
-              showSearch
+                placeholder={t("workflow_node.deploy.form.provider.placeholder")}
-              onSelect={handleProviderSelect}
+                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.Item>
-          </Form.Item>
 
-          <Form.Item
+            <Form.Item className="mb-0">
-            name="certificate"
+              <label className="mb-1 block">
-            label={t("workflow_node.deploy.form.certificate.label")}
+                <div className="flex w-full items-center justify-between gap-4">
-            rules={[formRule]}
+                  <div className="max-w-full grow truncate">
-            tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
+                    <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
-          >
+                    <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
-            <Select
+                      <Typography.Text className="ms-1" type="secondary">
-              options={previousNodes.map((item) => {
+                        <QuestionCircleOutlinedIcon />
-                return {
+                      </Typography.Text>
-                  label: item.name,
+                    </Tooltip>
-                  options: item.outputs?.map((output) => {
+                  </div>
-                    return {
+                  <div className="text-right">
-                      label: `${item.name} - ${output.label}`,
+                    <AccessEditModal
-                      value: `${item.id}#${output.name}`,
+                      data={{ provider: deployProvidersMap.get(fieldProvider!)?.provider }}
-                    };
+                      preset="add"
-                  }),
+                      trigger={
-                };
+                        <Button size="small" type="link">
-              })}
+                          <PlusOutlinedIcon />
-              placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
+                          {t("workflow_node.deploy.form.provider_access.button")}
-            />
+                        </Button>
-          </Form.Item>
+                      }
+                      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">
+                    const provider = accessProvidersMap.get(record.provider);
-            <Typography.Text className="text-xs font-normal" type="secondary">
+                    return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
-              {t("workflow_node.deploy.form.params_config.label")}
+                  }}
-            </Typography.Text>
+                />
-          </Divider>
+              </Form.Item>
+            </Form.Item>
 
-          {formFieldsEl}
+            <Form.Item
-        </Show>
+              name="certificate"
-      </Form>
+              label={t("workflow_node.deploy.form.certificate.label")}
+              rules={[formRule]}
+              tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
+            >
+              <Select
+                options={previousNodes.map((item) => {
+                  return {
+                    label: item.name,
+                    options: item.outputs?.map((output) => {
+                      return {
+                        label: `${item.name} - ${output.label}`,
+                        value: `${item.id}#${output.name}`,
+                      };
+                    }),
+                  };
+                })}
+                placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
+              />
+            </Form.Item>
+
+            <Divider className="my-1">
+              <Typography.Text className="text-xs font-normal" type="secondary">
+                {t("workflow_node.deploy.form.params_config.label")}
+              </Typography.Text>
+            </Divider>
+          </Show>
+        </Form>
+
+        <Show when={!!fieldProvider}>{nestedFormEl}</Show>
+      </Form.Provider>
     );
   }
 );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ui/src/domain/workflow.ts

@@ -112,10 +112,10 @@ export type WorkflowNodeConfigForApply = {
 };
 
 export type WorkflowNodeConfigForDeploy = {
+  certificate: string;
   provider: string;
   providerAccessId: string;
-  certificate: string;
+  providerConfig: Record<string, unknown>;
-  [key: string]: unknown;
 };
 
 export type WorkflowNodeConfigForNotify = {

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.",

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": "当前编排有未发布的更改。",

ui/tsconfig.app.json

@@ -32,6 +32,7 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": [
-    "src"
+    "src",
+    "types"
   ]
 }

ui/types/global.utility.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  type Nullish<T> = {
+    [P in keyof T]?: T[P] | null | undefined;
+  };
+}
+
+export {};