diff --git a/ui/src/components/access/AccessEditDrawer.tsx b/ui/src/components/access/AccessEditDrawer.tsx
index 6792dfebd..29c02c12f 100644
--- a/ui/src/components/access/AccessEditDrawer.tsx
+++ b/ui/src/components/access/AccessEditDrawer.tsx
@@ -1,25 +1,28 @@
-import { startTransition, useCallback, useEffect, useRef, useState } from "react";
+import { startTransition, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconX } from "@tabler/icons-react";
 import { useControllableValue, useGetState } from "ahooks";
-import { App, Button, Drawer, Flex } from "antd";
+import { App, Button, Drawer, Flex, Form } from "antd";
 
+import AccessProviderPicker from "@/components/provider/AccessProviderPicker";
+import Show from "@/components/Show";
 import { type AccessModel } from "@/domain/access";
+import { ACCESS_USAGES } from "@/domain/provider";
 import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
 
-import AccessForm, { type AccessFormInstance, type AccessFormProps } from "./AccessForm";
+import AccessForm, { type AccessFormModes, type AccessFormProps, type AccessFormUsages } from "./AccessForm";
 
 export interface AccessEditDrawerProps {
   afterClose?: () => void;
   afterSubmit?: (record: AccessModel) => void;
   data?: AccessFormProps["initialValues"];
   loading?: boolean;
-  mode: AccessFormProps["mode"];
+  mode: AccessFormModes;
   open?: boolean;
   trigger?: React.ReactNode;
-  usage?: AccessFormProps["usage"];
+  usage?: AccessFormUsages;
   onOpenChange?: (open: boolean) => void;
 }
 
@@ -38,25 +41,29 @@ const AccessEditDrawer = ({ afterClose, afterSubmit, mode, data, loading, trigge
 
   const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
-  const formRef = useRef<AccessFormInstance>(null);
+  const providerFilter = AccessForm.useProviderFilterByUsage(usage);
+
+  const [formInst] = Form.useForm();
   const [formPending, setFormPending] = useState(false);
 
-  const [footerShow, setFooterShow] = useState(!!data?.provider);
-  useEffect(() => {
-    setFooterShow(!!data?.provider);
-  }, [data?.provider]);
+  const fieldProvider = Form.useWatch<string>("provider", { form: formInst, preserve: true });
+
+  const handleProviderPick = (value: string) => {
+    formInst.setFieldValue("provider", value);
+  };
 
   const handleOkClick = async () => {
     setFormPending(true);
     try {
-      await formRef.current!.validateFields();
+      await formInst.validateFields();
     } catch (err) {
       setFormPending(false);
       throw err;
     }
 
     try {
-      let values: AccessModel = formRef.current!.getFieldsValue();
+      let values: AccessModel = formInst.getFieldsValue(true);
+      values.reserve = usage === "ca" ? "ca" : usage === "notification" ? "notif" : void 0;
 
       if (mode === "create") {
         if (data?.id) {
@@ -91,10 +98,6 @@ const AccessEditDrawer = ({ afterClose, afterSubmit, mode, data, loading, trigge
     setOpen(false);
   };
 
-  const handleFormValuesChange: AccessFormProps["onValuesChange"] = (values) => {
-    setFooterShow(!!values.provider);
-  };
-
   return (
     <>
       {triggerEl}
@@ -105,7 +108,7 @@ const AccessEditDrawer = ({ afterClose, afterSubmit, mode, data, loading, trigge
         closeIcon={false}
         destroyOnHidden
         footer={
-          footerShow ? (
+          fieldProvider ? (
             <Flex className="px-2" justify="end" gap="small">
               <Button onClick={handleCancelClick}>{t("common.button.cancel")}</Button>
               <Button loading={formPending} type="primary" onClick={handleOkClick}>
@@ -137,7 +140,20 @@ const AccessEditDrawer = ({ afterClose, afterSubmit, mode, data, loading, trigge
         }
         onClose={handleCancelClick}
       >
-        <AccessForm ref={formRef} disabled={formPending} initialValues={data} mode={mode} usage={usage} onValuesChange={handleFormValuesChange} />
+        <Show when={!fieldProvider && !data?.provider}>
+          <AccessProviderPicker
+            autoFocus
+            gap="large"
+            placeholder={t("access.form.provider.search.placeholder")}
+            showOptionTags={usage == null || (usage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
+            onFilter={providerFilter}
+            onSelect={handleProviderPick}
+          />
+        </Show>
+
+        <div style={{ display: fieldProvider || data?.provider ? "block" : "none" }}>
+          <AccessForm form={formInst} disabled={formPending} initialValues={data} mode={mode} usage={usage} />
+        </div>
       </Drawer>
     </>
   );
diff --git a/ui/src/components/access/AccessForm.tsx b/ui/src/components/access/AccessForm.tsx
index 9978e2733..a339ed3fd 100644
--- a/ui/src/components/access/AccessForm.tsx
+++ b/ui/src/components/access/AccessForm.tsx
@@ -1,111 +1,104 @@
-import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import AccessProviderPicker from "@/components/provider/AccessProviderPicker";
 import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
-import Show from "@/components/Show";
 import { type AccessModel } from "@/domain/access";
-import { ACCESS_PROVIDERS, ACCESS_USAGES, type AccessProvider } from "@/domain/provider";
-import { useAntdForm, useAntdFormName } from "@/hooks";
+import { ACCESS_PROVIDERS, ACCESS_USAGES } from "@/domain/provider";
+import { useAntdForm } from "@/hooks";
 
-import AccessForm1PanelConfig from "./AccessForm1PanelConfig";
-import AccessFormACMECAConfig from "./AccessFormACMECAConfig";
-import AccessFormACMEHttpReqConfig from "./AccessFormACMEHttpReqConfig";
-import AccessFormAliyunConfig from "./AccessFormAliyunConfig";
-import AccessFormAPISIXConfig from "./AccessFormAPISIXConfig";
-import AccessFormAWSConfig from "./AccessFormAWSConfig";
-import AccessFormAzureConfig from "./AccessFormAzureConfig";
-import AccessFormBaiduCloudConfig from "./AccessFormBaiduCloudConfig";
-import AccessFormBaishanConfig from "./AccessFormBaishanConfig";
-import AccessFormBaotaPanelConfig from "./AccessFormBaotaPanelConfig";
-import AccessFormBaotaWAFConfig from "./AccessFormBaotaWAFConfig";
-import AccessFormBunnyConfig from "./AccessFormBunnyConfig";
-import AccessFormBytePlusConfig from "./AccessFormBytePlusConfig";
-import AccessFormCacheFlyConfig from "./AccessFormCacheFlyConfig";
-import AccessFormCdnflyConfig from "./AccessFormCdnflyConfig";
-import AccessFormCloudflareConfig from "./AccessFormCloudflareConfig";
-import AccessFormClouDNSConfig from "./AccessFormClouDNSConfig";
-import AccessFormCMCCCloudConfig from "./AccessFormCMCCCloudConfig";
-import AccessFormConstellixConfig from "./AccessFormConstellixConfig";
-import AccessFormCTCCCloudConfig from "./AccessFormCTCCCloudConfig";
-import AccessFormDeSECConfig from "./AccessFormDeSECConfig";
-import AccessFormDigitalOceanConfig from "./AccessFormDigitalOceanConfig";
-import AccessFormDingTalkBotConfig from "./AccessFormDingTalkBotConfig";
-import AccessFormDiscordBotConfig from "./AccessFormDiscordBotConfig";
-import AccessFormDNSLAConfig from "./AccessFormDNSLAConfig";
-import AccessFormDogeCloudConfig from "./AccessFormDogeCloudConfig";
-import AccessFormDuckDNSConfig from "./AccessFormDuckDNSConfig";
-import AccessFormDynv6Config from "./AccessFormDynv6Config";
-import AccessFormEdgioConfig from "./AccessFormEdgioConfig";
-import AccessFormEmailConfig from "./AccessFormEmailConfig";
-import AccessFormFlexCDNConfig from "./AccessFormFlexCDNConfig";
-import AccessFormGcoreConfig from "./AccessFormGcoreConfig";
-import AccessFormGnameConfig from "./AccessFormGnameConfig";
-import AccessFormGoDaddyConfig from "./AccessFormGoDaddyConfig";
-import AccessFormGoEdgeConfig from "./AccessFormGoEdgeConfig";
-import AccessFormGoogleTrustServicesConfig from "./AccessFormGoogleTrustServicesConfig";
-import AccessFormHetznerConfig from "./AccessFormHetznerConfig";
-import AccessFormHuaweiCloudConfig from "./AccessFormHuaweiCloudConfig";
-import AccessFormJDCloudConfig from "./AccessFormJDCloudConfig";
-import AccessFormKongConfig from "./AccessFormKongConfig";
-import AccessFormKubernetesConfig from "./AccessFormKubernetesConfig";
-import AccessFormLarkBotConfig from "./AccessFormLarkBotConfig";
-import AccessFormLeCDNConfig from "./AccessFormLeCDNConfig";
-import AccessFormMattermostConfig from "./AccessFormMattermostConfig";
-import AccessFormNamecheapConfig from "./AccessFormNamecheapConfig";
-import AccessFormNameDotComConfig from "./AccessFormNameDotComConfig";
-import AccessFormNameSiloConfig from "./AccessFormNameSiloConfig";
-import AccessFormNetcupConfig from "./AccessFormNetcupConfig";
-import AccessFormNetlifyConfig from "./AccessFormNetlifyConfig";
-import AccessFormNS1Config from "./AccessFormNS1Config";
-import AccessFormPorkbunConfig from "./AccessFormPorkbunConfig";
-import AccessFormPowerDNSConfig from "./AccessFormPowerDNSConfig";
-import AccessFormProxmoxVEConfig from "./AccessFormProxmoxVEConfig";
-import AccessFormQiniuConfig from "./AccessFormQiniuConfig";
-import AccessFormRainYunConfig from "./AccessFormRainYunConfig";
-import AccessFormRatPanelConfig from "./AccessFormRatPanelConfig";
-import AccessFormSafeLineConfig from "./AccessFormSafeLineConfig";
-import AccessFormSlackBotConfig from "./AccessFormSlackBotConfig";
-import AccessFormSpaceshipConfig from "./AccessFormSpaceshipConfig";
-import AccessFormSSHConfig from "./AccessFormSSHConfig";
-import AccessFormSSLComConfig from "./AccessFormSSLComConfig";
-import AccessFormTelegramBotConfig from "./AccessFormTelegramBotConfig";
-import AccessFormTencentCloudConfig from "./AccessFormTencentCloudConfig";
-import AccessFormUCloudConfig from "./AccessFormUCloudConfig";
-import AccessFormUniCloudConfig from "./AccessFormUniCloudConfig";
-import AccessFormUpyunConfig from "./AccessFormUpyunConfig";
-import AccessFormVercelConfig from "./AccessFormVercelConfig";
-import AccessFormVolcEngineConfig from "./AccessFormVolcEngineConfig";
-import AccessFormWangsuConfig from "./AccessFormWangsuConfig";
-import AccessFormWebhookConfig from "./AccessFormWebhookConfig";
-import AccessFormWeComBotConfig from "./AccessFormWeComBotConfig";
-import AccessFormWestcnConfig from "./AccessFormWestcnConfig";
-import AccessFormZeroSSLConfig from "./AccessFormZeroSSLConfig";
+import { FormNestedFieldsContextProvider } from "./forms/_context";
+import { useProviderFilterByUsage } from "./forms/_hooks";
+import AccessConfigFieldsProvider1Panel from "./forms/AccessConfigFieldsProvider1Panel";
+import AccessConfigFieldsProviderACMECA from "./forms/AccessConfigFieldsProviderACMECA";
+import AccessConfigFieldsProviderACMEHttpReq from "./forms/AccessConfigFieldsProviderACMEHttpReq";
+import AccessConfigFieldsProviderAliyun from "./forms/AccessConfigFieldsProviderAliyun";
+import AccessConfigFieldsProviderAPISIX from "./forms/AccessConfigFieldsProviderAPISIX";
+import AccessConfigFieldsProviderAWS from "./forms/AccessConfigFieldsProviderAWS";
+import AccessConfigFieldsProviderAzure from "./forms/AccessConfigFieldsProviderAzure";
+import AccessConfigFieldsProviderBaiduCloud from "./forms/AccessConfigFieldsProviderBaiduCloud";
+import AccessConfigFieldsProviderBaishan from "./forms/AccessConfigFieldsProviderBaishan";
+import AccessConfigFieldsProviderBaotaPanel from "./forms/AccessConfigFieldsProviderBaotaPanel";
+import AccessConfigFieldsProviderBaotaWAF from "./forms/AccessConfigFieldsProviderBaotaWAF";
+import AccessConfigFieldsProviderBunny from "./forms/AccessConfigFieldsProviderBunny";
+import AccessConfigFieldsProviderBytePlus from "./forms/AccessConfigFieldsProviderBytePlus";
+import AccessConfigFieldsProviderCacheFly from "./forms/AccessConfigFieldsProviderCacheFly";
+import AccessConfigFieldsProviderCdnfly from "./forms/AccessConfigFieldsProviderCdnfly";
+import AccessConfigFieldsProviderCloudflare from "./forms/AccessConfigFieldsProviderCloudflare";
+import AccessConfigFieldsProviderClouDNS from "./forms/AccessConfigFieldsProviderClouDNS";
+import AccessConfigFieldsProviderCMCCCloud from "./forms/AccessConfigFieldsProviderCMCCCloud";
+import AccessConfigFieldsProviderConstellix from "./forms/AccessConfigFieldsProviderConstellix";
+import AccessConfigFieldsProviderCTCCCloud from "./forms/AccessConfigFieldsProviderCTCCCloud";
+import AccessConfigFieldsProviderDeSEC from "./forms/AccessConfigFieldsProviderDeSEC";
+import AccessConfigFieldsProviderDigitalOcean from "./forms/AccessConfigFieldsProviderDigitalOcean";
+import AccessConfigFieldsProviderDingTalkBot from "./forms/AccessConfigFieldsProviderDingTalkBot";
+import AccessConfigFieldsProviderDiscordBot from "./forms/AccessConfigFieldsProviderDiscordBot";
+import AccessConfigFieldsProviderDNSLA from "./forms/AccessConfigFieldsProviderDNSLA";
+import AccessConfigFieldsProviderDogeCloud from "./forms/AccessConfigFieldsProviderDogeCloud";
+import AccessConfigFieldsProviderDuckDNS from "./forms/AccessConfigFieldsProviderDuckDNS";
+import AccessConfigFieldsProviderDynv6 from "./forms/AccessConfigFieldsProviderDynv6";
+import AccessConfigFieldsProviderEdgio from "./forms/AccessConfigFieldsProviderEdgio";
+import AccessConfigFieldsProviderEmail from "./forms/AccessConfigFieldsProviderEmail";
+import AccessConfigFieldsProviderFlexCDN from "./forms/AccessConfigFieldsProviderFlexCDN";
+import AccessConfigFieldsProviderGcore from "./forms/AccessConfigFieldsProviderGcore";
+import AccessConfigFieldsProviderGname from "./forms/AccessConfigFieldsProviderGname";
+import AccessConfigFieldsProviderGoDaddy from "./forms/AccessConfigFieldsProviderGoDaddy";
+import AccessConfigFieldsProviderGoEdge from "./forms/AccessConfigFieldsProviderGoEdge";
+import AccessConfigFieldsProviderGoogleTrustServices from "./forms/AccessConfigFieldsProviderGoogleTrustServices";
+import AccessConfigFieldsProviderHetzner from "./forms/AccessConfigFieldsProviderHetzner";
+import AccessConfigFieldsProviderHuaweiCloud from "./forms/AccessConfigFieldsProviderHuaweiCloud";
+import AccessConfigFieldsProviderJDCloud from "./forms/AccessConfigFieldsProviderJDCloud";
+import AccessConfigFieldsProviderKong from "./forms/AccessConfigFieldsProviderKong";
+import AccessConfigFieldsProviderKubernetes from "./forms/AccessConfigFieldsProviderKubernetes";
+import AccessConfigFieldsProviderLarkBot from "./forms/AccessConfigFieldsProviderLarkBot";
+import AccessConfigFieldsProviderLeCDN from "./forms/AccessConfigFieldsProviderLeCDN";
+import AccessConfigFieldsProviderMattermost from "./forms/AccessConfigFieldsProviderMattermost";
+import AccessConfigFieldsProviderNamecheap from "./forms/AccessConfigFieldsProviderNamecheap";
+import AccessConfigFieldsProviderNameDotCom from "./forms/AccessConfigFieldsProviderNameDotCom";
+import AccessConfigFieldsProviderNameSilo from "./forms/AccessConfigFieldsProviderNameSilo";
+import AccessConfigFieldsProviderNetcup from "./forms/AccessConfigFieldsProviderNetcup";
+import AccessConfigFieldsProviderNetlify from "./forms/AccessConfigFieldsProviderNetlify";
+import AccessConfigFieldsProviderNS1 from "./forms/AccessConfigFieldsProviderNS1";
+import AccessConfigFieldsProviderPorkbun from "./forms/AccessConfigFieldsProviderPorkbun";
+import AccessConfigFieldsProviderPowerDNS from "./forms/AccessConfigFieldsProviderPowerDNS";
+import AccessConfigFieldsProviderProxmoxVE from "./forms/AccessConfigFieldsProviderProxmoxVE";
+import AccessConfigFieldsProviderQiniu from "./forms/AccessConfigFieldsProviderQiniu";
+import AccessConfigFieldsProviderRainYun from "./forms/AccessConfigFieldsProviderRainYun";
+import AccessConfigFieldsProviderRatPanel from "./forms/AccessConfigFieldsProviderRatPanel";
+import AccessConfigFieldsProviderSafeLine from "./forms/AccessConfigFieldsProviderSafeLine";
+import AccessConfigFieldsProviderSlackBot from "./forms/AccessConfigFieldsProviderSlackBot";
+import AccessConfigFieldsProviderSpaceship from "./forms/AccessConfigFieldsProviderSpaceship";
+import AccessConfigFieldsProviderSSH from "./forms/AccessConfigFieldsProviderSSH";
+import AccessConfigFieldsProviderSSLCom from "./forms/AccessConfigFieldsProviderSSLCom";
+import AccessConfigFieldsProviderTelegramBot from "./forms/AccessConfigFieldsProviderTelegramBot";
+import AccessConfigFieldsProviderTencentCloud from "./forms/AccessConfigFieldsProviderTencentCloud";
+import AccessConfigFieldsProviderUCloud from "./forms/AccessConfigFieldsProviderUCloud";
+import AccessConfigFieldsProviderUniCloud from "./forms/AccessConfigFieldsProviderUniCloud";
+import AccessConfigFieldsProviderUpyun from "./forms/AccessConfigFieldsProviderUpyun";
+import AccessConfigFieldsProviderVercel from "./forms/AccessConfigFieldsProviderVercel";
+import AccessConfigFieldsProviderVolcEngine from "./forms/AccessConfigFieldsProviderVolcEngine";
+import AccessConfigFieldsProviderWangsu from "./forms/AccessConfigFieldsProviderWangsu";
+import AccessConfigFieldsProviderWebhook from "./forms/AccessConfigFieldsProviderWebhook";
+import AccessConfigFieldsProviderWeComBot from "./forms/AccessConfigFieldsProviderWeComBot";
+import AccessConfigFieldsProviderWestcn from "./forms/AccessConfigFieldsProviderWestcn";
+import AccessConfigFieldsProviderZeroSSL from "./forms/AccessConfigFieldsProviderZeroSSL";
 
-type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
-type AccessFormModes = "create" | "edit";
-type AccessFormUsages = "dns" | "hosting" | "dns-hosting" | "ca" | "notification";
+export type AccessFormModes = "create" | "edit";
+export type AccessFormUsages = "dns" | "hosting" | "dns-hosting" | "ca" | "notification";
 
 export interface AccessFormProps {
   className?: string;
   style?: React.CSSProperties;
-  mode: AccessFormModes;
   disabled?: boolean;
-  initialValues?: AccessFormFieldValues;
+  initialValues?: Nullish<MaybeModelRecord<AccessModel>>;
+  form: FormInstance;
+  mode: AccessFormModes;
   usage?: AccessFormUsages;
-  onValuesChange?: (values: AccessFormFieldValues) => void;
 }
 
-export interface AccessFormInstance {
-  getFieldsValue: () => ReturnType<FormInstance<AccessFormFieldValues>["getFieldsValue"]>;
-  resetFields: FormInstance<AccessFormFieldValues>["resetFields"];
-  validateFields: FormInstance<AccessFormFieldValues>["validateFields"];
-}
-
-const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className, style, mode, disabled, initialValues, usage, onValuesChange }, ref) => {
+const AccessForm = ({ className, style, disabled, initialValues, mode, usage, ...props }: AccessFormProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -119,280 +112,282 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
   });
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm({
+    form: props.form,
     name: "accessForm",
     initialValues: initialValues,
   });
 
-  const providerFilter = useMemo(() => {
-    switch (usage) {
-      case "dns":
-        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.DNS);
-      case "hosting":
-        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.HOSTING);
-      case "dns-hosting":
-        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.DNS) || option.usages.includes(ACCESS_USAGES.HOSTING);
-      case "ca":
-        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.CA);
-      case "notification":
-        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.NOTIFICATION);
-      default:
-        console.warn(`[certimate] unsupported provider usage: '${usage}'`);
-    }
-  }, [usage]);
+  const providerFilter = useProviderFilterByUsage(usage);
 
-  const fieldProvider = Form.useWatch<z.infer<typeof formSchema>["provider"]>("provider", formInst);
-  const [fieldProviderPicked, setFieldProviderPicked] = useState<string>(initialValues?.provider); // bugfix: Form.useWatch 在条件渲染下不生效，这里用单独的变量存放 Picker 组件选择的值
-
-  const [nestedFormInst] = Form.useForm();
-  const nestedFormName = useAntdFormName({ form: nestedFormInst, name: "accessConfigForm" });
-  const nestedFormEl = useMemo(() => {
-    const nestedFormProps = {
-      form: nestedFormInst,
-      formName: nestedFormName,
-      disabled: disabled,
-      initialValues: initialValues?.config,
-    };
+  const fieldProvider = Form.useWatch<string>("provider", { form: formInst, preserve: true });
 
+  const nestedProviderConfigFields = useMemo(() => {
     /*
-      注意：如果追加新的子组件，请保持以 ASCII 排序。
-      NOTICE: If you add new child component, please keep ASCII order.
-     */
+        注意：如果追加新的子组件，请保持以 ASCII 排序。
+        NOTICE: If you add new child component, please keep ASCII order.
+       */
     switch (fieldProvider) {
-      case ACCESS_PROVIDERS["1PANEL"]:
-        return <AccessForm1PanelConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.ACMECA:
-        return <AccessFormACMECAConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.ACMEHTTPREQ:
-        return <AccessFormACMEHttpReqConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.ALIYUN:
-        return <AccessFormAliyunConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.APISIX:
-        return <AccessFormAPISIXConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.AWS:
-        return <AccessFormAWSConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.AZURE:
-        return <AccessFormAzureConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.BAIDUCLOUD:
-        return <AccessFormBaiduCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.BAISHAN:
-        return <AccessFormBaishanConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.BAOTAPANEL:
-        return <AccessFormBaotaPanelConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.BAOTAWAF:
-        return <AccessFormBaotaWAFConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.BUNNY:
-        return <AccessFormBunnyConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.BYTEPLUS:
-        return <AccessFormBytePlusConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.CACHEFLY:
-        return <AccessFormCacheFlyConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.CDNFLY:
-        return <AccessFormCdnflyConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.CLOUDFLARE:
-        return <AccessFormCloudflareConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.CLOUDNS:
-        return <AccessFormClouDNSConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.CMCCCLOUD:
-        return <AccessFormCMCCCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.CONSTELLIX:
-        return <AccessFormConstellixConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.CTCCCLOUD:
-        return <AccessFormCTCCCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DESEC:
-        return <AccessFormDeSECConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DIGITALOCEAN:
-        return <AccessFormDigitalOceanConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DINGTALKBOT:
-        return <AccessFormDingTalkBotConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DISCORDBOT:
-        return <AccessFormDiscordBotConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DNSLA:
-        return <AccessFormDNSLAConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DOGECLOUD:
-        return <AccessFormDogeCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DUCKDNS:
-        return <AccessFormDuckDNSConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.DYNV6:
-        return <AccessFormDynv6Config {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.EDGIO:
-        return <AccessFormEdgioConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.EMAIL:
-        return <AccessFormEmailConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.FLEXCDN:
-        return <AccessFormFlexCDNConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.GCORE:
-        return <AccessFormGcoreConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.GNAME:
-        return <AccessFormGnameConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.GODADDY:
-        return <AccessFormGoDaddyConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.GOEDGE:
-        return <AccessFormGoEdgeConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.GOOGLETRUSTSERVICES:
-        return <AccessFormGoogleTrustServicesConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.HETZNER:
-        return <AccessFormHetznerConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.HUAWEICLOUD:
-        return <AccessFormHuaweiCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.JDCLOUD:
-        return <AccessFormJDCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.KONG:
-        return <AccessFormKongConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.KUBERNETES:
-        return <AccessFormKubernetesConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.LARKBOT:
-        return <AccessFormLarkBotConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.LECDN:
-        return <AccessFormLeCDNConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.MATTERMOST:
-        return <AccessFormMattermostConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.NAMECHEAP:
-        return <AccessFormNamecheapConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.NAMEDOTCOM:
-        return <AccessFormNameDotComConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.NAMESILO:
-        return <AccessFormNameSiloConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.NETCUP:
-        return <AccessFormNetcupConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.NETLIFY:
-        return <AccessFormNetlifyConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.NS1:
-        return <AccessFormNS1Config {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.PORKBUN:
-        return <AccessFormPorkbunConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.POWERDNS:
-        return <AccessFormPowerDNSConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.PROXMOXVE:
-        return <AccessFormProxmoxVEConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.QINIU:
-        return <AccessFormQiniuConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.RAINYUN:
-        return <AccessFormRainYunConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.RATPANEL:
-        return <AccessFormRatPanelConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.SAFELINE:
-        return <AccessFormSafeLineConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.SLACKBOT:
-        return <AccessFormSlackBotConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.SPACESHIP:
-        return <AccessFormSpaceshipConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.SSH:
-        return <AccessFormSSHConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.TELEGRAMBOT:
-        return <AccessFormTelegramBotConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.SSLCOM:
-        return <AccessFormSSLComConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.TENCENTCLOUD:
-        return <AccessFormTencentCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.UCLOUD:
-        return <AccessFormUCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.UNICLOUD:
-        return <AccessFormUniCloudConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.UPYUN:
-        return <AccessFormUpyunConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.VERCEL:
-        return <AccessFormVercelConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.VOLCENGINE:
-        return <AccessFormVolcEngineConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.WANGSU:
-        return <AccessFormWangsuConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.WEBHOOK:
-        return (
-          <AccessFormWebhookConfig
-            usage={usage === "notification" ? "notification" : usage === "hosting" || usage === "dns-hosting" ? "deployment" : "none"}
-            {...nestedFormProps}
-          />
-        );
-      case ACCESS_PROVIDERS.WECOMBOT:
-        return <AccessFormWeComBotConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.WESTCN:
-        return <AccessFormWestcnConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.ZEROSSL:
-        return <AccessFormZeroSSLConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS["1PANEL"]: {
+        return <AccessConfigFieldsProvider1Panel />;
+      }
+      case ACCESS_PROVIDERS.ACMECA: {
+        return <AccessConfigFieldsProviderACMECA />;
+      }
+      case ACCESS_PROVIDERS.ACMEHTTPREQ: {
+        return <AccessConfigFieldsProviderACMEHttpReq />;
+      }
+      case ACCESS_PROVIDERS.ALIYUN: {
+        return <AccessConfigFieldsProviderAliyun />;
+      }
+      case ACCESS_PROVIDERS.APISIX: {
+        return <AccessConfigFieldsProviderAPISIX />;
+      }
+      case ACCESS_PROVIDERS.AWS: {
+        return <AccessConfigFieldsProviderAWS />;
+      }
+      case ACCESS_PROVIDERS.AZURE: {
+        return <AccessConfigFieldsProviderAzure />;
+      }
+      case ACCESS_PROVIDERS.BAIDUCLOUD: {
+        return <AccessConfigFieldsProviderBaiduCloud />;
+      }
+      case ACCESS_PROVIDERS.BAISHAN: {
+        return <AccessConfigFieldsProviderBaishan />;
+      }
+      case ACCESS_PROVIDERS.BAOTAPANEL: {
+        return <AccessConfigFieldsProviderBaotaPanel />;
+      }
+      case ACCESS_PROVIDERS.BAOTAWAF: {
+        return <AccessConfigFieldsProviderBaotaWAF />;
+      }
+      case ACCESS_PROVIDERS.BUNNY: {
+        return <AccessConfigFieldsProviderBunny />;
+      }
+      case ACCESS_PROVIDERS.BYTEPLUS: {
+        return <AccessConfigFieldsProviderBytePlus />;
+      }
+      case ACCESS_PROVIDERS.CACHEFLY: {
+        return <AccessConfigFieldsProviderCacheFly />;
+      }
+      case ACCESS_PROVIDERS.CDNFLY: {
+        return <AccessConfigFieldsProviderCdnfly />;
+      }
+      case ACCESS_PROVIDERS.CLOUDFLARE: {
+        return <AccessConfigFieldsProviderCloudflare />;
+      }
+      case ACCESS_PROVIDERS.CLOUDNS: {
+        return <AccessConfigFieldsProviderClouDNS />;
+      }
+      case ACCESS_PROVIDERS.CMCCCLOUD: {
+        return <AccessConfigFieldsProviderCMCCCloud />;
+      }
+      case ACCESS_PROVIDERS.CONSTELLIX: {
+        return <AccessConfigFieldsProviderConstellix />;
+      }
+      case ACCESS_PROVIDERS.CTCCCLOUD: {
+        return <AccessConfigFieldsProviderCTCCCloud />;
+      }
+      case ACCESS_PROVIDERS.DESEC: {
+        return <AccessConfigFieldsProviderDeSEC />;
+      }
+      case ACCESS_PROVIDERS.DIGITALOCEAN: {
+        return <AccessConfigFieldsProviderDigitalOcean />;
+      }
+      case ACCESS_PROVIDERS.DINGTALKBOT: {
+        return <AccessConfigFieldsProviderDingTalkBot />;
+      }
+      case ACCESS_PROVIDERS.DISCORDBOT: {
+        return <AccessConfigFieldsProviderDiscordBot />;
+      }
+      case ACCESS_PROVIDERS.DNSLA: {
+        return <AccessConfigFieldsProviderDNSLA />;
+      }
+      case ACCESS_PROVIDERS.DOGECLOUD: {
+        return <AccessConfigFieldsProviderDogeCloud />;
+      }
+      case ACCESS_PROVIDERS.DUCKDNS: {
+        return <AccessConfigFieldsProviderDuckDNS />;
+      }
+      case ACCESS_PROVIDERS.DYNV6: {
+        return <AccessConfigFieldsProviderDynv6 />;
+      }
+      case ACCESS_PROVIDERS.EDGIO: {
+        return <AccessConfigFieldsProviderEdgio />;
+      }
+      case ACCESS_PROVIDERS.EMAIL: {
+        return <AccessConfigFieldsProviderEmail />;
+      }
+      case ACCESS_PROVIDERS.FLEXCDN: {
+        return <AccessConfigFieldsProviderFlexCDN />;
+      }
+      case ACCESS_PROVIDERS.GCORE: {
+        return <AccessConfigFieldsProviderGcore />;
+      }
+      case ACCESS_PROVIDERS.GNAME: {
+        return <AccessConfigFieldsProviderGname />;
+      }
+      case ACCESS_PROVIDERS.GODADDY: {
+        return <AccessConfigFieldsProviderGoDaddy />;
+      }
+      case ACCESS_PROVIDERS.GOEDGE: {
+        return <AccessConfigFieldsProviderGoEdge />;
+      }
+      case ACCESS_PROVIDERS.GOOGLETRUSTSERVICES: {
+        return <AccessConfigFieldsProviderGoogleTrustServices />;
+      }
+      case ACCESS_PROVIDERS.HETZNER: {
+        return <AccessConfigFieldsProviderHetzner />;
+      }
+      case ACCESS_PROVIDERS.HUAWEICLOUD: {
+        return <AccessConfigFieldsProviderHuaweiCloud />;
+      }
+      case ACCESS_PROVIDERS.JDCLOUD: {
+        return <AccessConfigFieldsProviderJDCloud />;
+      }
+      case ACCESS_PROVIDERS.KONG: {
+        return <AccessConfigFieldsProviderKong />;
+      }
+      case ACCESS_PROVIDERS.KUBERNETES: {
+        return <AccessConfigFieldsProviderKubernetes />;
+      }
+      case ACCESS_PROVIDERS.LARKBOT: {
+        return <AccessConfigFieldsProviderLarkBot />;
+      }
+      case ACCESS_PROVIDERS.LECDN: {
+        return <AccessConfigFieldsProviderLeCDN />;
+      }
+      case ACCESS_PROVIDERS.MATTERMOST: {
+        return <AccessConfigFieldsProviderMattermost />;
+      }
+      case ACCESS_PROVIDERS.NAMECHEAP: {
+        return <AccessConfigFieldsProviderNamecheap />;
+      }
+      case ACCESS_PROVIDERS.NAMEDOTCOM: {
+        return <AccessConfigFieldsProviderNameDotCom />;
+      }
+      case ACCESS_PROVIDERS.NAMESILO: {
+        return <AccessConfigFieldsProviderNameSilo />;
+      }
+      case ACCESS_PROVIDERS.NETCUP: {
+        return <AccessConfigFieldsProviderNetcup />;
+      }
+      case ACCESS_PROVIDERS.NETLIFY: {
+        return <AccessConfigFieldsProviderNetlify />;
+      }
+      case ACCESS_PROVIDERS.NS1: {
+        return <AccessConfigFieldsProviderNS1 />;
+      }
+      case ACCESS_PROVIDERS.PORKBUN: {
+        return <AccessConfigFieldsProviderPorkbun />;
+      }
+      case ACCESS_PROVIDERS.POWERDNS: {
+        return <AccessConfigFieldsProviderPowerDNS />;
+      }
+      case ACCESS_PROVIDERS.PROXMOXVE: {
+        return <AccessConfigFieldsProviderProxmoxVE />;
+      }
+      case ACCESS_PROVIDERS.QINIU: {
+        return <AccessConfigFieldsProviderQiniu />;
+      }
+      case ACCESS_PROVIDERS.RAINYUN: {
+        return <AccessConfigFieldsProviderRainYun />;
+      }
+      case ACCESS_PROVIDERS.RATPANEL: {
+        return <AccessConfigFieldsProviderRatPanel />;
+      }
+      case ACCESS_PROVIDERS.SAFELINE: {
+        return <AccessConfigFieldsProviderSafeLine />;
+      }
+      case ACCESS_PROVIDERS.SLACKBOT: {
+        return <AccessConfigFieldsProviderSlackBot />;
+      }
+      case ACCESS_PROVIDERS.SPACESHIP: {
+        return <AccessConfigFieldsProviderSpaceship />;
+      }
+      case ACCESS_PROVIDERS.SSH: {
+        return <AccessConfigFieldsProviderSSH disabled={disabled} />;
+      }
+      case ACCESS_PROVIDERS.TELEGRAMBOT: {
+        return <AccessConfigFieldsProviderTelegramBot />;
+      }
+      case ACCESS_PROVIDERS.SSLCOM: {
+        return <AccessConfigFieldsProviderSSLCom />;
+      }
+      case ACCESS_PROVIDERS.TENCENTCLOUD: {
+        return <AccessConfigFieldsProviderTencentCloud />;
+      }
+      case ACCESS_PROVIDERS.UCLOUD: {
+        return <AccessConfigFieldsProviderUCloud />;
+      }
+      case ACCESS_PROVIDERS.UNICLOUD: {
+        return <AccessConfigFieldsProviderUniCloud />;
+      }
+      case ACCESS_PROVIDERS.UPYUN: {
+        return <AccessConfigFieldsProviderUpyun />;
+      }
+      case ACCESS_PROVIDERS.VERCEL: {
+        return <AccessConfigFieldsProviderVercel />;
+      }
+      case ACCESS_PROVIDERS.VOLCENGINE: {
+        return <AccessConfigFieldsProviderVolcEngine />;
+      }
+      case ACCESS_PROVIDERS.WANGSU: {
+        return <AccessConfigFieldsProviderWangsu />;
+      }
+      case ACCESS_PROVIDERS.WEBHOOK: {
+        const webhookUsage = usage === "notification" ? "notification" : usage === "hosting" || usage === "dns-hosting" ? "deployment" : "none";
+        return <AccessConfigFieldsProviderWebhook usage={webhookUsage} />;
+      }
+      case ACCESS_PROVIDERS.WECOMBOT: {
+        return <AccessConfigFieldsProviderWeComBot />;
+      }
+      case ACCESS_PROVIDERS.WESTCN: {
+        return <AccessConfigFieldsProviderWestcn />;
+      }
+      case ACCESS_PROVIDERS.ZEROSSL: {
+        return <AccessConfigFieldsProviderZeroSSL />;
+      }
     }
-  }, [usage, disabled, initialValues?.config, fieldProvider, nestedFormInst, nestedFormName]);
-
-  const handleProviderPick = (value: string) => {
-    setFieldProviderPicked(value);
-    formInst.setFieldValue("provider", value);
-    onValuesChange?.(formInst.getFieldsValue(true));
-  };
-
-  const handleFormProviderChange = (name: string) => {
-    if (name === nestedFormName) {
-      formInst.setFieldValue("config", nestedFormInst.getFieldsValue());
-      onValuesChange?.(formInst.getFieldsValue(true));
-    }
-  };
-
-  const handleFormChange = (_: unknown, values: AccessFormFieldValues) => {
-    onValuesChange?.(values);
-  };
-
-  useImperativeHandle(ref, () => {
-    return {
-      getFieldsValue: () => {
-        const values = formInst.getFieldsValue(true);
-        values.config = nestedFormInst.getFieldsValue();
-        values.reserve = usage === "ca" ? "ca" : usage === "notification" ? "notif" : void 0;
-        return values;
-      },
-      resetFields: (fields) => {
-        formInst.resetFields(fields);
-
-        if (!!fields && fields.includes("config")) {
-          nestedFormInst.resetFields(fields);
-        }
-      },
-      validateFields: (nameList, config) => {
-        const t1 = formInst.validateFields(nameList, config);
-        const t2 = nestedFormInst.validateFields(void 0, config);
-        return Promise.all([t1, t2]).then(() => t1);
-      },
-    } as AccessFormInstance;
-  });
+  }, [disabled, usage, fieldProvider]);
 
   return (
-    <Form.Provider onFormChange={handleFormProviderChange}>
-      <div className={className} style={style}>
-        <Form {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-          <Show
-            when={!!fieldProvider || !!fieldProviderPicked}
-            fallback={
-              <AccessProviderPicker
-                autoFocus
-                placeholder={t("access.form.provider.search.placeholder")}
-                showOptionTags={usage == null || (usage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
-                onFilter={providerFilter}
-                onSelect={handleProviderPick}
-              />
-            }
-          >
-            <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
-              <Input placeholder={t("access.form.name.placeholder")} />
-            </Form.Item>
+    <Form
+      className={className}
+      style={style}
+      {...formProps}
+      clearOnDestroy={true}
+      disabled={disabled}
+      form={formInst}
+      layout="vertical"
+      preserve={false}
+      scrollToFirstError
+    >
+      <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
+        <Input placeholder={t("access.form.name.placeholder")} />
+      </Form.Item>
 
-            <Form.Item
-              name="provider"
-              label={t("access.form.provider.label")}
-              extra={usage === "dns-hosting" ? <span dangerouslySetInnerHTML={{ __html: t("access.form.provider.help") }}></span> : null}
-              rules={[formRule]}
-            >
-              <AccessProviderSelect
-                disabled={mode !== "create"}
-                placeholder={t("access.form.provider.placeholder")}
-                showOptionTags={usage == null || (usage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
-                showSearch={!disabled}
-                onFilter={providerFilter}
-              />
-            </Form.Item>
-          </Show>
-        </Form>
+      <Form.Item
+        name="provider"
+        label={t("access.form.provider.label")}
+        extra={usage === "dns-hosting" ? <span dangerouslySetInnerHTML={{ __html: t("access.form.provider.help") }}></span> : null}
+        rules={[formRule]}
+      >
+        <AccessProviderSelect
+          disabled={mode !== "create"}
+          placeholder={t("access.form.provider.placeholder")}
+          showOptionTags={usage == null || (usage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
+          showSearch={!disabled}
+          onFilter={providerFilter}
+        />
+      </Form.Item>
 
-        {nestedFormEl}
-      </div>
-    </Form.Provider>
+      <FormNestedFieldsContextProvider value={{ parentNamePath: "config" }}>{nestedProviderConfigFields}</FormNestedFieldsContextProvider>
+    </Form>
   );
+};
+
+const _default = Object.assign(AccessForm, {
+  useProviderFilterByUsage,
 });
 
-export default AccessForm;
+export default _default;
diff --git a/ui/src/components/access/AccessForm1PanelConfig.tsx b/ui/src/components/access/AccessForm1PanelConfig.tsx
deleted file mode 100644
index da9504dbb..000000000
--- a/ui/src/components/access/AccessForm1PanelConfig.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Select, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigFor1Panel } from "@/domain/access";
-
-type AccessForm1PanelConfigFieldValues = Nullish<AccessConfigFor1Panel>;
-
-export interface AccessForm1PanelConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessForm1PanelConfigFieldValues;
-  onValuesChange?: (values: AccessForm1PanelConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessForm1PanelConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:20410/",
-    apiVersion: "v1",
-    apiKey: "",
-  };
-};
-
-const AccessForm1PanelConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessForm1PanelConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiVersion: z.string().nonempty(t("access.form.1panel_api_version.placeholder")),
-    apiKey: z
-      .string()
-      .min(1, t("access.form.1panel_api_key.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.1panel_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.1panel_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="apiVersion" label={t("access.form.1panel_api_version.label")} rules={[formRule]}>
-        <Select options={["v1", "v2"].map((s) => ({ label: s, value: s }))} placeholder={t("access.form.1panel_api_version.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.1panel_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.1panel_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.1panel_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessForm1PanelConfig;
diff --git a/ui/src/components/access/AccessFormAPISIXConfig.tsx b/ui/src/components/access/AccessFormAPISIXConfig.tsx
deleted file mode 100644
index f45f6586b..000000000
--- a/ui/src/components/access/AccessFormAPISIXConfig.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForAPISIX } from "@/domain/access";
-
-type AccessFormAPISIXConfigFieldValues = Nullish<AccessConfigForAPISIX>;
-
-export interface AccessFormAPISIXConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormAPISIXConfigFieldValues;
-  onValuesChange?: (values: AccessFormAPISIXConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormAPISIXConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:9180/",
-    apiKey: "",
-  };
-};
-
-const AccessFormAPISIXConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormAPISIXConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiKey: z.string().nonempty(t("access.form.apisix_api_key.placeholder")),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.apisix_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.apisix_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.apisix_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.apisix_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.apisix_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormAPISIXConfig;
diff --git a/ui/src/components/access/AccessFormBaishanConfig.tsx b/ui/src/components/access/AccessFormBaishanConfig.tsx
deleted file mode 100644
index 090616b9b..000000000
--- a/ui/src/components/access/AccessFormBaishanConfig.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForBaishan } from "@/domain/access";
-
-type AccessFormBaishanConfigFieldValues = Nullish<AccessConfigForBaishan>;
-
-export interface AccessFormBaishanConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormBaishanConfigFieldValues;
-  onValuesChange?: (values: AccessFormBaishanConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormBaishanConfigFieldValues => {
-  return {
-    apiToken: "",
-  };
-};
-
-const AccessFormBaishanConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBaishanConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiToken: z
-      .string()
-      .min(1, t("access.form.baishan_api_token.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-  });
-  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="apiToken" label={t("access.form.baishan_api_token.label")} rules={[formRule]}>
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.baishan_api_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormBaishanConfig;
diff --git a/ui/src/components/access/AccessFormBaotaPanelConfig.tsx b/ui/src/components/access/AccessFormBaotaPanelConfig.tsx
deleted file mode 100644
index 423f34863..000000000
--- a/ui/src/components/access/AccessFormBaotaPanelConfig.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForBaotaPanel } from "@/domain/access";
-
-type AccessFormBaotaPanelConfigFieldValues = Nullish<AccessConfigForBaotaPanel>;
-
-export interface AccessFormBaotaPanelConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormBaotaPanelConfigFieldValues;
-  onValuesChange?: (values: AccessFormBaotaPanelConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormBaotaPanelConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8888/",
-    apiKey: "",
-  };
-};
-
-const AccessFormBaotaPanelConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBaotaPanelConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiKey: z.string().nonempty(t("access.form.baotapanel_api_key.placeholder")),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.baotapanel_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.baotapanel_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.baotapanel_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baotapanel_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.baotapanel_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormBaotaPanelConfig;
diff --git a/ui/src/components/access/AccessFormBaotaWAFConfig.tsx b/ui/src/components/access/AccessFormBaotaWAFConfig.tsx
deleted file mode 100644
index 78f5d9607..000000000
--- a/ui/src/components/access/AccessFormBaotaWAFConfig.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForBaotaWAF } from "@/domain/access";
-
-type AccessFormBaotaWAFConfigFieldValues = Nullish<AccessConfigForBaotaWAF>;
-
-export interface AccessFormBaotaWAFConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormBaotaWAFConfigFieldValues;
-  onValuesChange?: (values: AccessFormBaotaWAFConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormBaotaWAFConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8379/",
-    apiKey: "",
-  };
-};
-
-const AccessFormBaotaWAFConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBaotaWAFConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiKey: z.string().nonempty(t("access.form.baotawaf_api_key.placeholder")),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.baotawaf_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.baotawaf_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.baotawaf_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baotawaf_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.baotawaf_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormBaotaWAFConfig;
diff --git a/ui/src/components/access/AccessFormBunnyConfig.tsx b/ui/src/components/access/AccessFormBunnyConfig.tsx
deleted file mode 100644
index 1f801f8cc..000000000
--- a/ui/src/components/access/AccessFormBunnyConfig.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForBunny } from "@/domain/access";
-
-type AccessFormBunnyConfigFieldValues = Nullish<AccessConfigForBunny>;
-
-export interface AccessFormBunnyConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormBunnyConfigFieldValues;
-  onValuesChange?: (values: AccessFormBunnyConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormBunnyConfigFieldValues => {
-  return {
-    apiKey: "",
-  };
-};
-
-const AccessFormBunnyConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBunnyConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiKey: z.string().nonempty(t("access.form.bunny_api_key.placeholder")),
-  });
-  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="apiKey"
-        label={t("access.form.bunny_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.bunny_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.bunny_api_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormBunnyConfig;
diff --git a/ui/src/components/access/AccessFormCacheFlyConfig.tsx b/ui/src/components/access/AccessFormCacheFlyConfig.tsx
deleted file mode 100644
index c9b65a237..000000000
--- a/ui/src/components/access/AccessFormCacheFlyConfig.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForCacheFly } from "@/domain/access";
-
-type AccessFormCacheFlyConfigFieldValues = Nullish<AccessConfigForCacheFly>;
-
-export interface AccessFormCacheFlyConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormCacheFlyConfigFieldValues;
-  onValuesChange?: (values: AccessFormCacheFlyConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormCacheFlyConfigFieldValues => {
-  return {
-    apiToken: "",
-  };
-};
-
-const AccessFormCacheFlyConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormCacheFlyConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiToken: z.string().nonempty(t("access.form.cachefly_api_token.placeholder")),
-  });
-  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="apiToken" label={t("access.form.cachefly_api_token.label")} rules={[formRule]}>
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.cachefly_api_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormCacheFlyConfig;
diff --git a/ui/src/components/access/AccessFormConstellixConfig.tsx b/ui/src/components/access/AccessFormConstellixConfig.tsx
deleted file mode 100644
index 92c3430f0..000000000
--- a/ui/src/components/access/AccessFormConstellixConfig.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-import { type AccessConfigForConstellix } from "@/domain/access";
-
-type AccessFormConstellixConfigFieldValues = Nullish<AccessConfigForConstellix>;
-
-export interface AccessFormConstellixConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormConstellixConfigFieldValues;
-  onValuesChange?: (values: AccessFormConstellixConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormConstellixConfigFieldValues => {
-  return {
-    apiKey: "",
-    secretKey: "",
-  };
-};
-
-const AccessFormConstellixConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormConstellixConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiKey: z.string().nonempty(t("access.form.constellix_api_key.placeholder")),
-    secretKey: z.string().nonempty(t("access.form.constellix_secret_key.placeholder")),
-  });
-  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="apiKey"
-        label={t("access.form.constellix_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.constellix_api_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.constellix_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretKey"
-        label={t("access.form.constellix_secret_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.constellix_secret_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.constellix_secret_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormConstellixConfig;
diff --git a/ui/src/components/access/AccessFormDeSECConfig.tsx b/ui/src/components/access/AccessFormDeSECConfig.tsx
deleted file mode 100644
index d3e90fc57..000000000
--- a/ui/src/components/access/AccessFormDeSECConfig.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForDeSEC } from "@/domain/access";
-
-type AccessFormDeSECConfigFieldValues = Nullish<AccessConfigForDeSEC>;
-
-export interface AccessFormDeSECConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDeSECConfigFieldValues;
-  onValuesChange?: (values: AccessFormDeSECConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormDeSECConfigFieldValues => {
-  return {
-    token: "",
-  };
-};
-
-const AccessFormDeSECConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDeSECConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    token: z
-      .string()
-      .min(1, t("access.form.desec_token.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  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="token"
-        label={t("access.form.desec_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.desec_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.desec_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormDeSECConfig;
diff --git a/ui/src/components/access/AccessFormDigitalOceanConfig.tsx b/ui/src/components/access/AccessFormDigitalOceanConfig.tsx
deleted file mode 100644
index 4cad2068c..000000000
--- a/ui/src/components/access/AccessFormDigitalOceanConfig.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForDigitalOcean } from "@/domain/access";
-
-type AccessFormDigitalOceanConfigFieldValues = Nullish<AccessConfigForDigitalOcean>;
-
-export interface AccessFormDigitalOceanConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDigitalOceanConfigFieldValues;
-  onValuesChange?: (values: AccessFormDigitalOceanConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormDigitalOceanConfigFieldValues => {
-  return {
-    accessToken: "",
-  };
-};
-
-const AccessFormDigitalOceanConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDigitalOceanConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    accessToken: z.string().nonempty(t("access.form.digitalocean_access_token.placeholder")),
-  });
-  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="accessToken"
-        label={t("access.form.digitalocean_access_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.digitalocean_access_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.digitalocean_access_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormDigitalOceanConfig;
diff --git a/ui/src/components/access/AccessFormDingTalkBotConfig.tsx b/ui/src/components/access/AccessFormDingTalkBotConfig.tsx
deleted file mode 100644
index 6a8498bc0..000000000
--- a/ui/src/components/access/AccessFormDingTalkBotConfig.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForDingTalkBot } from "@/domain/access";
-
-type AccessFormDingTalkBotConfigFieldValues = Nullish<AccessConfigForDingTalkBot>;
-
-export interface AccessFormDingTalkBotConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDingTalkBotConfigFieldValues;
-  onValuesChange?: (values: AccessFormDingTalkBotConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormDingTalkBotConfigFieldValues => {
-  return {
-    webhookUrl: "",
-    secret: "",
-  };
-};
-
-const AccessFormDingTalkBotConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDingTalkBotConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    webhookUrl: z.url(t("common.errmsg.url_invalid")),
-    secret: z.string().nonempty(t("access.form.dingtalkbot_secret.placeholder")),
-  });
-  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="webhookUrl"
-        label={t("access.form.dingtalkbot_webhook_url.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dingtalkbot_webhook_url.tooltip") }}></span>}
-      >
-        <Input placeholder={t("access.form.dingtalkbot_webhook_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secret"
-        label={t("access.form.dingtalkbot_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dingtalkbot_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.dingtalkbot_secret.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormDingTalkBotConfig;
diff --git a/ui/src/components/access/AccessFormDuckDNSConfig.tsx b/ui/src/components/access/AccessFormDuckDNSConfig.tsx
deleted file mode 100644
index 758a132f5..000000000
--- a/ui/src/components/access/AccessFormDuckDNSConfig.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForDuckDNS } from "@/domain/access";
-
-type AccessFormDuckDNSConfigFieldValues = Nullish<AccessConfigForDuckDNS>;
-
-export interface AccessFormDuckDNSConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDuckDNSConfigFieldValues;
-  onValuesChange?: (values: AccessFormDuckDNSConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormDuckDNSConfigFieldValues => {
-  return {
-    token: "",
-  };
-};
-
-const AccessFormDuckDNSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDuckDNSConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    token: z.string().nonempty(t("access.form.duckdns_token.placeholder")),
-  });
-  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="token"
-        label={t("access.form.duckdns_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.duckdns_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.duckdns_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormDuckDNSConfig;
diff --git a/ui/src/components/access/AccessFormDynv6Config.tsx b/ui/src/components/access/AccessFormDynv6Config.tsx
deleted file mode 100644
index 1ecc1a99b..000000000
--- a/ui/src/components/access/AccessFormDynv6Config.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForDynv6 } from "@/domain/access";
-
-type AccessFormDynv6ConfigFieldValues = Nullish<AccessConfigForDynv6>;
-
-export interface AccessFormDynv6ConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDynv6ConfigFieldValues;
-  onValuesChange?: (values: AccessFormDynv6ConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormDynv6ConfigFieldValues => {
-  return {
-    httpToken: "",
-  };
-};
-
-const AccessFormDynv6Config = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDynv6ConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    httpToken: z
-      .string()
-      .min(1, t("access.form.dynv6_http_token.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  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="httpToken"
-        label={t("access.form.dynv6_http_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dynv6_http_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.dynv6_http_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormDynv6Config;
diff --git a/ui/src/components/access/AccessFormGcoreConfig.tsx b/ui/src/components/access/AccessFormGcoreConfig.tsx
deleted file mode 100644
index 30316323f..000000000
--- a/ui/src/components/access/AccessFormGcoreConfig.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForGcore } from "@/domain/access";
-
-type AccessFormGcoreConfigFieldValues = Nullish<AccessConfigForGcore>;
-
-export interface AccessFormGcoreConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormGcoreConfigFieldValues;
-  onValuesChange?: (values: AccessFormGcoreConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormGcoreConfigFieldValues => {
-  return {
-    apiToken: "",
-  };
-};
-
-const AccessFormGcoreConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormGcoreConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiToken: z
-      .string()
-      .min(1, t("access.form.gcore_api_token.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  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="apiToken"
-        label={t("access.form.gcore_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.gcore_api_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.gcore_api_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormGcoreConfig;
diff --git a/ui/src/components/access/AccessFormHetznerConfig.tsx b/ui/src/components/access/AccessFormHetznerConfig.tsx
deleted file mode 100644
index 762788c0a..000000000
--- a/ui/src/components/access/AccessFormHetznerConfig.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForHetzner } from "@/domain/access";
-
-type AccessFormHetznerConfigFieldValues = Nullish<AccessConfigForHetzner>;
-
-export interface AccessFormHetznerConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormHetznerConfigFieldValues;
-  onValuesChange?: (values: AccessFormHetznerConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormHetznerConfigFieldValues => {
-  return {
-    apiToken: "",
-  };
-};
-
-const AccessFormHetznerConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormHetznerConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiToken: z.string().nonempty(t("access.form.hetzner_api_token.placeholder")),
-  });
-  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="apiToken"
-        label={t("access.form.hetzner_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.hetzner_api_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.hetzner_api_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormHetznerConfig;
diff --git a/ui/src/components/access/AccessFormKongConfig.tsx b/ui/src/components/access/AccessFormKongConfig.tsx
deleted file mode 100644
index cbdeded4d..000000000
--- a/ui/src/components/access/AccessFormKongConfig.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForKong } from "@/domain/access";
-
-type AccessFormKongConfigFieldValues = Nullish<AccessConfigForKong>;
-
-export interface AccessFormKongConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormKongConfigFieldValues;
-  onValuesChange?: (values: AccessFormKongConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormKongConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8001/",
-    apiToken: "",
-  };
-};
-
-const AccessFormKongConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormKongConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiToken: z.string().nullish(),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.kong_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.kong_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiToken"
-        label={t("access.form.kong_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.kong_api_token.tooltip") }}></span>}
-      >
-        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.kong_api_token.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormKongConfig;
diff --git a/ui/src/components/access/AccessFormKubernetesConfig.tsx b/ui/src/components/access/AccessFormKubernetesConfig.tsx
deleted file mode 100644
index 520e89aa7..000000000
--- a/ui/src/components/access/AccessFormKubernetesConfig.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import TextFileInput from "@/components/TextFileInput";
-import { type AccessConfigForKubernetes } from "@/domain/access";
-
-type AccessFormKubernetesConfigFieldValues = Nullish<AccessConfigForKubernetes>;
-
-export interface AccessFormKubernetesConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormKubernetesConfigFieldValues;
-  onValuesChange?: (values: AccessFormKubernetesConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormKubernetesConfigFieldValues => {
-  return {};
-};
-
-const AccessFormKubernetesConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormKubernetesConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    kubeConfig: z
-      .string()
-      .max(20480, t("common.errmsg.string_max", { max: 20480 }))
-      .nullish(),
-  });
-  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="kubeConfig"
-        label={t("access.form.k8s_kubeconfig.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.k8s_kubeconfig.tooltip") }}></span>}
-      >
-        <TextFileInput allowClear autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.k8s_kubeconfig.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormKubernetesConfig;
diff --git a/ui/src/components/access/AccessFormLarkBotConfig.tsx b/ui/src/components/access/AccessFormLarkBotConfig.tsx
deleted file mode 100644
index c237df5c5..000000000
--- a/ui/src/components/access/AccessFormLarkBotConfig.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForLarkBot } from "@/domain/access";
-
-type AccessFormLarkBotConfigFieldValues = Nullish<AccessConfigForLarkBot>;
-
-export interface AccessFormLarkBotConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormLarkBotConfigFieldValues;
-  onValuesChange?: (values: AccessFormLarkBotConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormLarkBotConfigFieldValues => {
-  return {
-    webhookUrl: "",
-  };
-};
-
-const AccessFormLarkBotConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormLarkBotConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    webhookUrl: z.url(t("common.errmsg.url_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="webhookUrl"
-        label={t("access.form.larkbot_webhook_url.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.larkbot_webhook_url.tooltip") }}></span>}
-      >
-        <Input placeholder={t("access.form.larkbot_webhook_url.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormLarkBotConfig;
diff --git a/ui/src/components/access/AccessFormLeCDNConfig.tsx b/ui/src/components/access/AccessFormLeCDNConfig.tsx
deleted file mode 100644
index 88399eecc..000000000
--- a/ui/src/components/access/AccessFormLeCDNConfig.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Radio, Select, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForLeCDN } from "@/domain/access";
-
-type AccessFormLeCDNConfigFieldValues = Nullish<AccessConfigForLeCDN>;
-
-export interface AccessFormLeCDNConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormLeCDNConfigFieldValues;
-  onValuesChange?: (values: AccessFormLeCDNConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormLeCDNConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:5090/",
-    apiVersion: "v3",
-    apiRole: "user",
-    username: "",
-    password: "",
-  };
-};
-
-const AccessFormLeCDNConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormLeCDNConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    role: z.literal(["client", "master"], t("access.form.lecdn_api_role.placeholder")),
-    username: z.string().nonempty(t("access.form.lecdn_username.placeholder")),
-    password: z.string().nonempty(t("access.form.lecdn_password.placeholder")),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.lecdn_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.lecdn_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="apiVersion" label={t("access.form.lecdn_api_version.label")} rules={[formRule]}>
-        <Select options={["v3"].map((s) => ({ label: s, value: s }))} placeholder={t("access.form.lecdn_api_version.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="apiRole" label={t("access.form.lecdn_api_role.label")} rules={[formRule]}>
-        <Radio.Group options={["user", "master"].map((s) => ({ label: t(`access.form.lecdn_api_role.option.${s}.label`), value: s }))} />
-      </Form.Item>
-
-      <Form.Item name="username" label={t("access.form.lecdn_username.label")} rules={[formRule]}>
-        <Input autoComplete="new-password" placeholder={t("access.form.lecdn_username.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="password" label={t("access.form.lecdn_password.label")} rules={[formRule]}>
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.lecdn_password.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormLeCDNConfig;
diff --git a/ui/src/components/access/AccessFormNS1Config.tsx b/ui/src/components/access/AccessFormNS1Config.tsx
deleted file mode 100644
index f06bfaf76..000000000
--- a/ui/src/components/access/AccessFormNS1Config.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForNS1 } from "@/domain/access";
-
-type AccessFormNS1ConfigFieldValues = Nullish<AccessConfigForNS1>;
-
-export interface AccessFormNS1ConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormNS1ConfigFieldValues;
-  onValuesChange?: (values: AccessFormNS1ConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormNS1ConfigFieldValues => {
-  return {
-    apiKey: "",
-  };
-};
-
-const AccessFormNS1Config = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNS1ConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiKey: z
-      .string()
-      .min(1, t("access.form.ns1_api_key.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-  });
-  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="apiKey"
-        label={t("access.form.ns1_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ns1_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.ns1_api_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormNS1Config;
diff --git a/ui/src/components/access/AccessFormNameSiloConfig.tsx b/ui/src/components/access/AccessFormNameSiloConfig.tsx
deleted file mode 100644
index 4e21d9329..000000000
--- a/ui/src/components/access/AccessFormNameSiloConfig.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForNameSilo } from "@/domain/access";
-
-type AccessFormNameSiloConfigFieldValues = Nullish<AccessConfigForNameSilo>;
-
-export interface AccessFormNameSiloConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormNameSiloConfigFieldValues;
-  onValuesChange?: (values: AccessFormNameSiloConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormNameSiloConfigFieldValues => {
-  return {
-    apiKey: "",
-  };
-};
-
-const AccessFormNameSiloConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNameSiloConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiKey: z
-      .string()
-      .min(1, t("access.form.namesilo_api_key.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-  });
-  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="apiKey"
-        label={t("access.form.namesilo_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namesilo_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.namesilo_api_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormNameSiloConfig;
diff --git a/ui/src/components/access/AccessFormNetlifyConfig.tsx b/ui/src/components/access/AccessFormNetlifyConfig.tsx
deleted file mode 100644
index 8b194f544..000000000
--- a/ui/src/components/access/AccessFormNetlifyConfig.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForNetlify } from "@/domain/access";
-
-type AccessFormNetlifyConfigFieldValues = Nullish<AccessConfigForNetlify>;
-
-export interface AccessFormNetlifyConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormNetlifyConfigFieldValues;
-  onValuesChange?: (values: AccessFormNetlifyConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormNetlifyConfigFieldValues => {
-  return {
-    apiToken: "",
-  };
-};
-
-const AccessFormNetlifyConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNetlifyConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiToken: z.string().nonempty(t("access.form.netlify_api_token.placeholder")),
-  });
-  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="apiToken"
-        label={t("access.form.netlify_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.netlify_api_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.netlify_api_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormNetlifyConfig;
diff --git a/ui/src/components/access/AccessFormPowerDNSConfig.tsx b/ui/src/components/access/AccessFormPowerDNSConfig.tsx
deleted file mode 100644
index ea813a3be..000000000
--- a/ui/src/components/access/AccessFormPowerDNSConfig.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForPowerDNS } from "@/domain/access";
-
-type AccessFormPowerDNSConfigFieldValues = Nullish<AccessConfigForPowerDNS>;
-
-export interface AccessFormPowerDNSConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormPowerDNSConfigFieldValues;
-  onValuesChange?: (values: AccessFormPowerDNSConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormPowerDNSConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8082/",
-    apiKey: "",
-  };
-};
-
-const AccessFormPowerDNSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormPowerDNSConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiKey: z
-      .string()
-      .min(1, t("access.form.powerdns_api_key.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.powerdns_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.powerdns_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.powerdns_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.powerdns_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.powerdns_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormPowerDNSConfig;
diff --git a/ui/src/components/access/AccessFormRainYunConfig.tsx b/ui/src/components/access/AccessFormRainYunConfig.tsx
deleted file mode 100644
index 5bcd12f76..000000000
--- a/ui/src/components/access/AccessFormRainYunConfig.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForRainYun } from "@/domain/access";
-
-type AccessFormRainYunConfigFieldValues = Nullish<AccessConfigForRainYun>;
-
-export interface AccessFormRainYunConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormRainYunConfigFieldValues;
-  onValuesChange?: (values: AccessFormRainYunConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormRainYunConfigFieldValues => {
-  return {
-    apiKey: "",
-  };
-};
-
-const AccessFormRainYunConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormRainYunConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiKey: z
-      .string()
-      .min(1, t("access.form.rainyun_api_key.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-  });
-  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="apiKey"
-        label={t("access.form.rainyun_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.rainyun_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.rainyun_api_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormRainYunConfig;
diff --git a/ui/src/components/access/AccessFormSSHConfig.tsx b/ui/src/components/access/AccessFormSSHConfig.tsx
deleted file mode 100644
index 0f232011a..000000000
--- a/ui/src/components/access/AccessFormSSHConfig.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { IconCircleArrowDown, IconCircleArrowUp, IconCircleMinus, IconCirclePlus } from "@tabler/icons-react";
-import { Button, Collapse, Form, type FormInstance, Input, InputNumber, Radio } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import Show from "@/components/Show";
-import TextFileInput from "@/components/TextFileInput";
-import { type AccessConfigForSSH } from "@/domain/access";
-import { validDomainName, validIPv4Address, validIPv6Address, validPortNumber } from "@/utils/validators";
-
-type AccessFormSSHConfigFieldValues = Nullish<AccessConfigForSSH>;
-
-export interface AccessFormSSHConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormSSHConfigFieldValues;
-  onValuesChange?: (values: AccessFormSSHConfigFieldValues) => void;
-}
-
-const AUTH_METHOD_NONE = "none" as const;
-const AUTH_METHOD_PASSWORD = "password" as const;
-const AUTH_METHOD_KEY = "key" as const;
-
-const initFormModel = (): AccessFormSSHConfigFieldValues => {
-  return {
-    host: "127.0.0.1",
-    port: 22,
-    authMethod: AUTH_METHOD_PASSWORD,
-    username: "root",
-  };
-};
-
-const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSSHConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
-    port: z.preprocess(
-      (v) => Number(v),
-      z
-        .number()
-        .int(t("access.form.ssh_port.placeholder"))
-        .refine((v) => validPortNumber(v), t("common.errmsg.port_invalid"))
-    ),
-    authMethod: z.literal([AUTH_METHOD_NONE, AUTH_METHOD_PASSWORD, AUTH_METHOD_KEY], t("access.form.ssh_auth_method.placeholder")),
-    username: z
-      .string()
-      .min(1, t("access.form.ssh_username.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    password: z
-      .string()
-      .max(64, t("common.errmsg.string_max", { max: 64 }))
-      .nullish()
-      .refine((v) => {
-        if (fieldAuthMethod !== AUTH_METHOD_PASSWORD) return true;
-        return !!v?.trim();
-      }, t("access.form.ssh_password.placeholder")),
-    key: z
-      .string()
-      .max(20480, t("common.errmsg.string_max", { max: 20480 }))
-      .nullish()
-      .refine((v) => {
-        if (fieldAuthMethod !== AUTH_METHOD_KEY) return true;
-        return !!v?.trim();
-      }, t("access.form.ssh_key.placeholder")),
-    keyPassphrase: z
-      .string()
-      .max(20480, t("common.errmsg.string_max", { max: 20480 }))
-      .nullish()
-      .refine((v) => !v || formInst.getFieldValue("key"), t("access.form.ssh_key.placeholder")),
-    jumpServers: z
-      .array(
-        z.object({
-          host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
-          port: z.preprocess(
-            (v) => Number(v),
-            z
-              .number()
-              .int(t("access.form.ssh_port.placeholder"))
-              .refine((v) => validPortNumber(v), t("common.errmsg.port_invalid"))
-          ),
-          authMethod: z.literal([AUTH_METHOD_NONE, AUTH_METHOD_PASSWORD, AUTH_METHOD_KEY], t("access.form.ssh_auth_method.placeholder")),
-          username: z
-            .string()
-            .min(1, t("access.form.ssh_username.placeholder"))
-            .max(64, t("common.errmsg.string_max", { max: 64 })),
-          password: z
-            .string()
-            .max(64, t("common.errmsg.string_max", { max: 64 }))
-            .nullish(),
-          key: z
-            .string()
-            .max(20480, t("common.errmsg.string_max", { max: 20480 }))
-            .nullish(),
-          keyPassphrase: z
-            .string()
-            .max(20480, t("common.errmsg.string_max", { max: 20480 }))
-            .nullish(),
-        }),
-        { error: t("access.form.ssh_jump_servers.errmsg.invalid") }
-      )
-      .nullish(),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  const fieldAuthMethod = Form.useWatch("authMethod", 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}
-    >
-      <div className="flex space-x-2">
-        <div className="w-2/3">
-          <Form.Item name="host" label={t("access.form.ssh_host.label")} rules={[formRule]}>
-            <Input placeholder={t("access.form.ssh_host.placeholder")} />
-          </Form.Item>
-        </div>
-
-        <div className="w-1/3">
-          <Form.Item name="port" label={t("access.form.ssh_port.label")} rules={[formRule]}>
-            <InputNumber style={{ width: "100%" }} min={1} max={65535} placeholder={t("access.form.ssh_port.placeholder")} />
-          </Form.Item>
-        </div>
-      </div>
-
-      <Form.Item name="authMethod" label={t("access.form.ssh_auth_method.label")} rules={[formRule]}>
-        <Radio.Group
-          options={[AUTH_METHOD_NONE, AUTH_METHOD_PASSWORD, AUTH_METHOD_KEY].map((s) => ({
-            key: s,
-            label: t(`access.form.ssh_auth_method.option.${s}.label`),
-            value: s,
-          }))}
-        />
-      </Form.Item>
-
-      <Form.Item name="username" label={t("access.form.ssh_username.label")} rules={[formRule]}>
-        <Input autoComplete="new-password" placeholder={t("access.form.ssh_username.placeholder")} />
-      </Form.Item>
-
-      <Show when={fieldAuthMethod === AUTH_METHOD_PASSWORD}>
-        <Form.Item name="password" label={t("access.form.ssh_password.label")} rules={[formRule]}>
-          <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_password.placeholder")} />
-        </Form.Item>
-      </Show>
-
-      <Show when={fieldAuthMethod === AUTH_METHOD_KEY}>
-        <Form.Item name="key" label={t("access.form.ssh_key.label")} rules={[formRule]}>
-          <TextFileInput allowClear autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
-        </Form.Item>
-
-        <Form.Item name="keyPassphrase" label={t("access.form.ssh_key_passphrase.label")} rules={[formRule]}>
-          <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_key_passphrase.placeholder")} />
-        </Form.Item>
-      </Show>
-
-      <Form.Item name="jumpServers" label={t("access.form.ssh_jump_servers.label")} rules={[formRule]}>
-        <Form.List name="jumpServers">
-          {(fields, { add, remove, move }) => (
-            <div className="flex flex-col gap-2">
-              {fields?.length > 0 ? (
-                <Collapse
-                  items={fields.map((field, index) => {
-                    const Label = () => {
-                      const host = Form.useWatch(["jumpServers", field.name, "host"], formInst);
-                      const port = Form.useWatch(["jumpServers", field.name, "port"], formInst);
-                      const addr = !!host && !!port ? `${host}:${port}` : host ? host : port ? `:${port}` : "unknown";
-                      return (
-                        <span className="select-none">
-                          [{t("access.form.ssh_jump_servers.item.label")} {field.name + 1}] {addr}
-                        </span>
-                      );
-                    };
-
-                    const Fields = () => {
-                      const authMethod = Form.useWatch(["jumpServers", field.name, "authMethod"], formInst);
-                      return (
-                        <>
-                          <div className="flex space-x-2">
-                            <div className="w-2/3">
-                              <Form.Item name={[field.name, "host"]} label={t("access.form.ssh_host.label")} rules={[formRule]}>
-                                <Input placeholder={t("access.form.ssh_host.placeholder")} />
-                              </Form.Item>
-                            </div>
-                            <div className="w-1/3">
-                              <Form.Item name={[field.name, "port"]} label={t("access.form.ssh_port.label")} rules={[formRule]}>
-                                <InputNumber style={{ width: "100%" }} placeholder={t("access.form.ssh_port.placeholder")} min={1} max={65535} />
-                              </Form.Item>
-                            </div>
-                          </div>
-
-                          <Form.Item name={[field.name, "authMethod"]} label={t("access.form.ssh_auth_method.label")} rules={[formRule]}>
-                            <Radio.Group
-                              options={[AUTH_METHOD_NONE, AUTH_METHOD_PASSWORD, AUTH_METHOD_KEY].map((s) => ({
-                                key: s,
-                                label: t(`access.form.ssh_auth_method.option.${s}.label`),
-                                value: s,
-                              }))}
-                            />
-                          </Form.Item>
-
-                          <Form.Item name={[field.name, "username"]} label={t("access.form.ssh_username.label")} rules={[formRule]}>
-                            <Input autoComplete="new-password" placeholder={t("access.form.ssh_username.placeholder")} />
-                          </Form.Item>
-
-                          <Show when={authMethod === AUTH_METHOD_PASSWORD}>
-                            <Form.Item name={[field.name, "password"]} label={t("access.form.ssh_password.label")} rules={[formRule]}>
-                              <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_password.placeholder")} />
-                            </Form.Item>
-                          </Show>
-
-                          <Show when={authMethod === AUTH_METHOD_KEY}>
-                            <Form.Item name={[field.name, "key"]} label={t("access.form.ssh_key.label")} rules={[formRule]}>
-                              <TextFileInput allowClear autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
-                            </Form.Item>
-
-                            <Form.Item name={[field.name, "keyPassphrase"]} label={t("access.form.ssh_key_passphrase.label")} rules={[formRule]}>
-                              <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_key_passphrase.placeholder")} />
-                            </Form.Item>
-                          </Show>
-                        </>
-                      );
-                    };
-
-                    return {
-                      key: field.key,
-                      label: <Label />,
-                      extra: (
-                        <div className="flex items-center justify-end">
-                          <Button
-                            icon={<IconCircleArrowUp size="1.25em" />}
-                            color="default"
-                            disabled={disabled || index === 0}
-                            size="small"
-                            type="text"
-                            onClick={(e) => {
-                              move(index, index - 1);
-                              e.stopPropagation();
-                            }}
-                          />
-                          <Button
-                            icon={<IconCircleArrowDown size="1.25em" />}
-                            color="default"
-                            disabled={disabled || index === fields.length - 1}
-                            size="small"
-                            type="text"
-                            onClick={(e) => {
-                              move(index, index + 1);
-                              e.stopPropagation();
-                            }}
-                          />
-                          <Button
-                            icon={<IconCircleMinus size="1.25em" />}
-                            color="default"
-                            disabled={disabled}
-                            size="small"
-                            type="text"
-                            onClick={(e) => {
-                              remove(field.name);
-                              e.stopPropagation();
-                            }}
-                          />
-                        </div>
-                      ),
-                      children: <Fields />,
-                    };
-                  })}
-                />
-              ) : null}
-              <Button className="w-full" type="dashed" icon={<IconCirclePlus size="1.25em" />} onClick={() => add(initFormModel())}>
-                {t("access.form.ssh_jump_servers.add")}
-              </Button>
-            </div>
-          )}
-        </Form.List>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormSSHConfig;
diff --git a/ui/src/components/access/AccessFormSafeLineConfig.tsx b/ui/src/components/access/AccessFormSafeLineConfig.tsx
deleted file mode 100644
index 909a2b7a2..000000000
--- a/ui/src/components/access/AccessFormSafeLineConfig.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForSafeLine } from "@/domain/access";
-
-type AccessFormSafeLineConfigFieldValues = Nullish<AccessConfigForSafeLine>;
-
-export interface AccessFormSafeLineConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormSafeLineConfigFieldValues;
-  onValuesChange?: (values: AccessFormSafeLineConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormSafeLineConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:9443/",
-    apiToken: "",
-  };
-};
-
-const AccessFormSafeLineConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSafeLineConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiToken: z
-      .string()
-      .min(1, t("access.form.safeline_api_token.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    allowInsecureConnections: z.boolean().nullish(),
-  });
-  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="serverUrl" label={t("access.form.safeline_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.safeline_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiToken"
-        label={t("access.form.safeline_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.safeline_api_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.safeline_api_token.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormSafeLineConfig;
diff --git a/ui/src/components/access/AccessFormSpaceshipConfig.tsx b/ui/src/components/access/AccessFormSpaceshipConfig.tsx
deleted file mode 100644
index a3b57625c..000000000
--- a/ui/src/components/access/AccessFormSpaceshipConfig.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForSpaceship } from "@/domain/access";
-
-type AccessFormSpaceshipConfigFieldValues = Nullish<AccessConfigForSpaceship>;
-
-export interface AccessFormSpaceshipConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormSpaceshipConfigFieldValues;
-  onValuesChange?: (values: AccessFormSpaceshipConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormSpaceshipConfigFieldValues => {
-  return {
-    apiKey: "",
-    apiSecret: "",
-  };
-};
-
-const AccessFormSpaceshipConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSpaceshipConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    apiKey: z.string().nonempty(t("access.form.spaceship_api_key.placeholder")),
-    apiSecret: z.string().nonempty(t("access.form.spaceship_api_secret.placeholder")),
-  });
-  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="apiKey"
-        label={t("access.form.spaceship_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.spaceship_api_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.spaceship_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiSecret"
-        label={t("access.form.spaceship_api_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.spaceship_api_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.spaceship_api_secret.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormSpaceshipConfig;
diff --git a/ui/src/components/access/AccessFormUniCloudConfig.tsx b/ui/src/components/access/AccessFormUniCloudConfig.tsx
deleted file mode 100644
index ec01b7666..000000000
--- a/ui/src/components/access/AccessFormUniCloudConfig.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForUniCloud } from "@/domain/access";
-
-type AccessFormUniCloudConfigFieldValues = Nullish<AccessConfigForUniCloud>;
-
-export interface AccessFormUniCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormUniCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormUniCloudConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormUniCloudConfigFieldValues => {
-  return {
-    username: "",
-    password: "",
-  };
-};
-
-const AccessFormUniCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormUniCloudConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    username: z.string().nonempty(t("access.form.unicloud_username.placeholder")),
-    password: z.string().nonempty(t("access.form.unicloud_password.placeholder")),
-  });
-  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="username"
-        label={t("access.form.unicloud_username.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.unicloud_username.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.unicloud_username.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="password"
-        label={t("access.form.unicloud_password.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.unicloud_password.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.unicloud_password.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormUniCloudConfig;
diff --git a/ui/src/components/access/AccessFormWeComBotConfig.tsx b/ui/src/components/access/AccessFormWeComBotConfig.tsx
deleted file mode 100644
index befd2c7b2..000000000
--- a/ui/src/components/access/AccessFormWeComBotConfig.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type AccessConfigForWeComBot } from "@/domain/access";
-
-type AccessFormWeComBotConfigFieldValues = Nullish<AccessConfigForWeComBot>;
-
-export interface AccessFormWeComBotConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormWeComBotConfigFieldValues;
-  onValuesChange?: (values: AccessFormWeComBotConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormWeComBotConfigFieldValues => {
-  return {
-    webhookUrl: "",
-  };
-};
-
-const AccessFormWeComBotConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormWeComBotConfigProps) => {
-  const { t } = useTranslation();
-
-  const formSchema = z.object({
-    webhookUrl: z.url(t("common.errmsg.url_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="webhookUrl"
-        label={t("access.form.wecombot_webhook_url.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wecombot_webhook_url.tooltip") }}></span>}
-      >
-        <Input placeholder={t("access.form.wecombot_webhook_url.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default AccessFormWeComBotConfig;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProvider1Panel.tsx b/ui/src/components/access/forms/AccessConfigFieldsProvider1Panel.tsx
new file mode 100644
index 000000000..c2e79e451
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProvider1Panel.tsx
@@ -0,0 +1,90 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Select, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProvider1Panel = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.1panel_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.1panel_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiVersion"]}
+        initialValue={initialValues.apiVersion}
+        label={t("access.form.1panel_api_version.label")}
+        rules={[formRule]}
+      >
+        <Select options={["v1", "v2"].map((s) => ({ label: s, value: s }))} placeholder={t("access.form.1panel_api_version.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.1panel_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.1panel_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.1panel_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:20410/",
+    apiVersion: "v1",
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiVersion: z.string().nonempty(t("access.form.1panel_api_version.placeholder")),
+    apiKey: z
+      .string()
+      .min(1, t("access.form.1panel_api_key.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProvider1Panel, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormACMECAConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderACMECA.tsx
similarity index 55%
rename from ui/src/components/access/AccessFormACMECAConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderACMECA.tsx
index 88e1610c7..22523232e 100644
--- a/ui/src/components/access/AccessFormACMECAConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderACMECA.tsx
@@ -1,51 +1,25 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForACMECA } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormACMECAConfigFieldValues = Nullish<AccessConfigForACMECA>;
-
-export interface AccessFormACMECAConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormACMECAConfigFieldValues;
-  onValuesChange?: (values: AccessFormACMECAConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormACMECAConfigFieldValues => {
-  return {
-    endpoint: "https://example.com/acme/directory",
-  };
-};
-
-const AccessFormACMECAConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormACMECAConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderACMECA = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    endpoint: z.url(t("common.errmsg.url_invalid")),
-    eabKid: z.string().nullish(),
-    eabHmacKey: z.string().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
+    <>
       <Form.Item
-        name="endpoint"
+        name={[parentNamePath, "endpoint"]}
+        initialValue={initialValues.endpoint}
         label={t("access.form.acmeca_endpoint.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_endpoint.tooltip") }}></span>}
@@ -54,7 +28,8 @@ const AccessFormACMECAConfig = ({ form: formInst, formName, disabled, initialVal
       </Form.Item>
 
       <Form.Item
-        name="eabKid"
+        name={[parentNamePath, "eabKid"]}
+        initialValue={initialValues.eabKid}
         label={t("access.form.acmeca_eab_kid.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_eab_kid.tooltip") }}></span>}
@@ -63,15 +38,37 @@ const AccessFormACMECAConfig = ({ form: formInst, formName, disabled, initialVal
       </Form.Item>
 
       <Form.Item
-        name="eabHmacKey"
+        name={[parentNamePath, "eabHmacKey"]}
+        initialValue={initialValues.eabHmacKey}
         label={t("access.form.acmeca_eab_hmac_key.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_eab_hmac_key.tooltip") }}></span>}
       >
         <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.acmeca_eab_hmac_key.placeholder")} />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormACMECAConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    endpoint: "https://example.com/acme/directory",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    endpoint: z.url(t("common.errmsg.url_invalid")),
+    eabKid: z.string().nullish(),
+    eabHmacKey: z.string().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderACMECA, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderACMEHttpReq.tsx
similarity index 63%
rename from ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderACMEHttpReq.tsx
index cce452b6b..98cf694f5 100644
--- a/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderACMEHttpReq.tsx
@@ -1,59 +1,25 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Select } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForACMEHttpReq } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormACMEHttpReqConfigFieldValues = Nullish<AccessConfigForACMEHttpReq>;
-
-export interface AccessFormACMEHttpReqConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormACMEHttpReqConfigFieldValues;
-  onValuesChange?: (values: AccessFormACMEHttpReqConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormACMEHttpReqConfigFieldValues => {
-  return {
-    endpoint: "https://example.com/api/",
-    mode: "",
-  };
-};
-
-const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormACMEHttpReqConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderACMEHttpReq = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    endpoint: z.url(t("common.errmsg.url_invalid")),
-    mode: z.string().nullish(),
-    username: z
-      .string()
-      .max(256, t("common.errmsg.string_max", { max: 256 }))
-      .nullish(),
-    password: z
-      .string()
-      .max(256, t("common.errmsg.string_max", { max: 256 }))
-      .nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
+    <>
       <Form.Item
-        name="endpoint"
+        name={[parentNamePath, "endpoint"]}
+        initialValue={initialValues.endpoint}
         label={t("access.form.acmehttpreq_endpoint.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_endpoint.tooltip") }}></span>}
@@ -62,7 +28,8 @@ const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initi
       </Form.Item>
 
       <Form.Item
-        name="mode"
+        name={[parentNamePath, "mode"]}
+        initialValue={initialValues.mode}
         label={t("access.form.acmehttpreq_mode.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_mode.tooltip") }}></span>}
@@ -77,7 +44,8 @@ const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initi
       </Form.Item>
 
       <Form.Item
-        name="username"
+        name={[parentNamePath, "username"]}
+        initialValue={initialValues.username}
         label={t("access.form.acmehttpreq_username.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_username.tooltip") }}></span>}
@@ -86,15 +54,45 @@ const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initi
       </Form.Item>
 
       <Form.Item
-        name="password"
+        name={[parentNamePath, "password"]}
+        initialValue={initialValues.password}
         label={t("access.form.acmehttpreq_password.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_password.tooltip") }}></span>}
       >
         <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.acmehttpreq_password.placeholder")} />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormACMEHttpReqConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    endpoint: "https://example.com/api/",
+    mode: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    endpoint: z.url(t("common.errmsg.url_invalid")),
+    mode: z.string().nullish(),
+    username: z
+      .string()
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .nullish(),
+    password: z
+      .string()
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderACMEHttpReq, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderAPISIX.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderAPISIX.tsx
new file mode 100644
index 000000000..d6146cb66
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderAPISIX.tsx
@@ -0,0 +1,76 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderAPISIX = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.apisix_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.apisix_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.apisix_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.apisix_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.apisix_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:9180/",
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiKey: z.string().nonempty(t("access.form.apisix_api_key.placeholder")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderAPISIX, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormAWSConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderAWS.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormAWSConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderAWS.tsx
index 15ea5e9fe..9b1685f7c 100644
--- a/ui/src/components/access/AccessFormAWSConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderAWS.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForAWS } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormAWSConfigFieldValues = Nullish<AccessConfigForAWS>;
+const AccessConfigFormFieldsProviderAWS = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormAWSConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormAWSConfigFieldValues;
-  onValuesChange?: (values: AccessFormAWSConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormAWSConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.aws_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aws_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.aws_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretAccessKey"]}
+        initialValue={initialValues.secretAccessKey}
+        label={t("access.form.aws_secret_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aws_secret_access_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.aws_secret_access_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessFormAWSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormAWSConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.aws_access_key_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormAWSConfig = ({ form: formInst, formName, disabled, initialValues
       .min(1, t("access.form.aws_secret_access_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKeyId"
-        label={t("access.form.aws_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aws_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.aws_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretAccessKey"
-        label={t("access.form.aws_secret_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aws_secret_access_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.aws_secret_access_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormAWSConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderAWS, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormAliyunConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderAliyun.tsx
similarity index 59%
rename from ui/src/components/access/AccessFormAliyunConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderAliyun.tsx
index 5abfaf463..74fda3517 100644
--- a/ui/src/components/access/AccessFormAliyunConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderAliyun.tsx
@@ -1,31 +1,66 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForAliyun } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormAliyunConfigFieldValues = Nullish<AccessConfigForAliyun>;
+const AccessConfigFormFieldsProviderAliyun = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormAliyunConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormAliyunConfigFieldValues;
-  onValuesChange?: (values: AccessFormAliyunConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormAliyunConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.aliyun_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aliyun_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.aliyun_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "accessKeySecret"]}
+        initialValue={initialValues.accessKeySecret}
+        label={t("access.form.aliyun_access_key_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aliyun_access_key_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.aliyun_access_key_secret.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "resourceGroupId"]}
+        initialValue={initialValues.resourceGroupId}
+        label={t("access.form.aliyun_resource_group_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aliyun_resource_group_id.tooltip") }}></span>}
+      >
+        <Input allowClear autoComplete="new-password" placeholder={t("access.form.aliyun_resource_group_id.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     accessKeySecret: "",
   };
 };
 
-const AccessFormAliyunConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormAliyunConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.aliyun_access_key_id.placeholder"))
@@ -36,49 +71,11 @@ const AccessFormAliyunConfig = ({ form: formInst, formName, disabled, initialVal
       .max(64, t("common.errmsg.string_max", { max: 64 })),
     resourceGroupId: z.string().nullish(),
   });
-  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="accessKeyId"
-        label={t("access.form.aliyun_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aliyun_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.aliyun_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="accessKeySecret"
-        label={t("access.form.aliyun_access_key_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aliyun_access_key_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.aliyun_access_key_secret.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="resourceGroupId"
-        label={t("access.form.aliyun_resource_group_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.aliyun_resource_group_id.tooltip") }}></span>}
-      >
-        <Input allowClear autoComplete="new-password" placeholder={t("access.form.aliyun_resource_group_id.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormAliyunConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderAliyun, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormAzureConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx
similarity index 66%
rename from ui/src/components/access/AccessFormAzureConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx
index e6c8bfcd3..375123097 100644
--- a/ui/src/components/access/AccessFormAzureConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx
@@ -1,21 +1,70 @@
-import { useTranslation } from "react-i18next";
-import { AutoComplete, Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { AutoComplete, Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForAzure } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormAzureConfigFieldValues = Nullish<AccessConfigForAzure>;
+const AccessConfigFormFieldsProviderAzure = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormAzureConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormAzureConfigFieldValues;
-  onValuesChange?: (values: AccessFormAzureConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormAzureConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "tenantId"]}
+        initialValue={initialValues.tenantId}
+        label={t("access.form.azure_tenant_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_tenant_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.azure_tenant_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "clientId"]}
+        initialValue={initialValues.clientId}
+        label={t("access.form.azure_client_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_client_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.azure_client_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "clientSecret"]}
+        initialValue={initialValues.clientSecret}
+        label={t("access.form.azure_client_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_client_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.azure_client_secret.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "cloudName"]}
+        initialValue={initialValues.cloudName}
+        label={t("access.form.azure_cloud_name.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_cloud_name.tooltip") }}></span>}
+      >
+        <AutoComplete
+          options={["public", "azureusgovernment", "azurechina"].map((value) => ({ value }))}
+          placeholder={t("access.form.azure_cloud_name.placeholder")}
+          filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     tenantId: "",
     clientId: "",
@@ -23,10 +72,10 @@ const initFormModel = (): AccessFormAzureConfigFieldValues => {
   };
 };
 
-const AccessFormAzureConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormAzureConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     tenantId: z
       .string()
       .min(1, t("access.form.azure_tenant_id.placeholder"))
@@ -41,62 +90,11 @@ const AccessFormAzureConfig = ({ form: formInst, formName, disabled, initialValu
       .max(64, t("common.errmsg.string_max", { max: 64 })),
     cloudName: z.string().nullish(),
   });
-  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="tenantId"
-        label={t("access.form.azure_tenant_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_tenant_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.azure_tenant_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="clientId"
-        label={t("access.form.azure_client_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_client_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.azure_client_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="clientSecret"
-        label={t("access.form.azure_client_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_client_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.azure_client_secret.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="cloudName"
-        label={t("access.form.azure_cloud_name.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.azure_cloud_name.tooltip") }}></span>}
-      >
-        <AutoComplete
-          options={["public", "azureusgovernment", "azurechina"].map((value) => ({ value }))}
-          placeholder={t("access.form.azure_cloud_name.placeholder")}
-          filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
-        />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormAzureConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderAzure, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormBaiduCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderBaiduCloud.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormBaiduCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderBaiduCloud.tsx
index 49b555d93..2a4221b6a 100644
--- a/ui/src/components/access/AccessFormBaiduCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderBaiduCloud.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForBaiduCloud } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormBaiduCloudConfigFieldValues = Nullish<AccessConfigForBaiduCloud>;
+const AccessConfigFormFieldsProviderBaiduCloud = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormBaiduCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormBaiduCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormBaiduCloudConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormBaiduCloudConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.baiducloud_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baiducloud_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.baiducloud_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretAccessKey"]}
+        initialValue={initialValues.secretAccessKey}
+        label={t("access.form.baiducloud_secret_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baiducloud_secret_access_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.baiducloud_secret_access_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessFormBaiduCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBaiduCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.baiducloud_access_key_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormBaiduCloudConfig = ({ form: formInst, formName, disabled, initia
       .min(1, t("access.form.baiducloud_secret_access_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKeyId"
-        label={t("access.form.baiducloud_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baiducloud_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.baiducloud_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretAccessKey"
-        label={t("access.form.baiducloud_secret_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baiducloud_secret_access_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.baiducloud_secret_access_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormBaiduCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderBaiduCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderBaishan.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderBaishan.tsx
new file mode 100644
index 000000000..93aff79e9
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderBaishan.tsx
@@ -0,0 +1,49 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderBaishan = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item name={[parentNamePath, "apiToken"]} initialValue={initialValues.apiToken} label={t("access.form.baishan_api_token.label")} rules={[formRule]}>
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.baishan_api_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiToken: z
+      .string()
+      .min(1, t("access.form.baishan_api_token.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderBaishan, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderBaotaPanel.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderBaotaPanel.tsx
new file mode 100644
index 000000000..c5eca4b5f
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderBaotaPanel.tsx
@@ -0,0 +1,76 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderBaotaPanel = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.baotapanel_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.baotapanel_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.baotapanel_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baotapanel_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.baotapanel_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8888/",
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiKey: z.string().nonempty(t("access.form.baotapanel_api_key.placeholder")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderBaotaPanel, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderBaotaWAF.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderBaotaWAF.tsx
new file mode 100644
index 000000000..dc4cd4229
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderBaotaWAF.tsx
@@ -0,0 +1,76 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderBaotaWAF = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.baotawaf_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.baotawaf_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.baotawaf_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.baotawaf_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.baotawaf_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8379/",
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiKey: z.string().nonempty(t("access.form.baotawaf_api_key.placeholder")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderBaotaWAF, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderBunny.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderBunny.tsx
new file mode 100644
index 000000000..208af0396
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderBunny.tsx
@@ -0,0 +1,52 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderBunny = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.bunny_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.bunny_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.bunny_api_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiKey: z.string().nonempty(t("access.form.bunny_api_key.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderBunny, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormBytePlusConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderBytePlus.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormBytePlusConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderBytePlus.tsx
index dea9fd62e..daf88ca54 100644
--- a/ui/src/components/access/AccessFormBytePlusConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderBytePlus.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForBytePlus } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormBytePlusConfigFieldValues = Nullish<AccessConfigForBytePlus>;
+const AccessConfigFormFieldsProviderBytePlus = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormBytePlusConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormBytePlusConfigFieldValues;
-  onValuesChange?: (values: AccessFormBytePlusConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormBytePlusConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKey"]}
+        initialValue={initialValues.accessKey}
+        label={t("access.form.byteplus_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.byteplus_access_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.byteplus_access_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretKey"]}
+        initialValue={initialValues.secretKey}
+        label={t("access.form.byteplus_secret_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.byteplus_secret_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.byteplus_secret_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessFormBytePlusConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBytePlusConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKey: z
       .string()
       .min(1, t("access.form.byteplus_access_key.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormBytePlusConfig = ({ form: formInst, formName, disabled, initialV
       .min(1, t("access.form.byteplus_secret_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKey"
-        label={t("access.form.byteplus_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.byteplus_access_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.byteplus_access_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretKey"
-        label={t("access.form.byteplus_secret_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.byteplus_secret_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.byteplus_secret_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormBytePlusConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderBytePlus, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormCMCCCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderCMCCCloud.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormCMCCCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderCMCCCloud.tsx
index 9d2912fed..280c90672 100644
--- a/ui/src/components/access/AccessFormCMCCCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderCMCCCloud.tsx
@@ -1,30 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
-import { type AccessConfigForCMCCCloud } from "@/domain/access";
 
-type AccessFormCMCCCloudConfigFieldValues = Nullish<AccessConfigForCMCCCloud>;
+import { useFormNestedFieldsContext } from "./_context";
 
-export interface AccessFormCMCCCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormCMCCCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormCMCCCloudConfigFieldValues) => void;
-}
+const AccessConfigFormFieldsProviderCMCCCloud = () => {
+  const { i18n, t } = useTranslation();
 
-const initFormModel = (): AccessFormCMCCCloudConfigFieldValues => {
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.cmcccloud_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cmcccloud_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.cmcccloud_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "accessKeySecret"]}
+        initialValue={initialValues.accessKeySecret}
+        label={t("access.form.cmcccloud_access_key_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cmcccloud_access_key_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.cmcccloud_access_key_secret.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     accessKeySecret: "",
   };
 };
 
-const AccessFormCMCCCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormCMCCCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.cmcccloud_access_key_id.placeholder"))
@@ -34,40 +60,11 @@ const AccessFormCMCCCloudConfig = ({ form: formInst, formName, disabled, initial
       .min(1, t("access.form.cmcccloud_access_key_secret.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKeyId"
-        label={t("access.form.cmcccloud_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cmcccloud_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.cmcccloud_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="accessKeySecret"
-        label={t("access.form.cmcccloud_access_key_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cmcccloud_access_key_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.cmcccloud_access_key_secret.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormCMCCCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderCMCCCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormCTCCCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderCTCCCloud.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormCTCCCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderCTCCCloud.tsx
index 9284e17bf..7beb283e3 100644
--- a/ui/src/components/access/AccessFormCTCCCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderCTCCCloud.tsx
@@ -1,30 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
-import { type AccessConfigForCTCCCloud } from "@/domain/access";
 
-type AccessFormCTCCCloudConfigFieldValues = Nullish<AccessConfigForCTCCCloud>;
+import { useFormNestedFieldsContext } from "./_context";
 
-export interface AccessFormCTCCCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormCTCCCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormCTCCCloudConfigFieldValues) => void;
-}
+const AccessConfigFormFieldsProviderCTCCCloud = () => {
+  const { i18n, t } = useTranslation();
 
-const initFormModel = (): AccessFormCTCCCloudConfigFieldValues => {
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.ctcccloud_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ctcccloud_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.ctcccloud_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretAccessKey"]}
+        initialValue={initialValues.secretAccessKey}
+        label={t("access.form.ctcccloud_secret_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ctcccloud_secret_access_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.ctcccloud_secret_access_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessFormCTCCCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormCTCCCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.ctcccloud_access_key_id.placeholder"))
@@ -34,40 +60,11 @@ const AccessFormCTCCCloudConfig = ({ form: formInst, formName, disabled, initial
       .min(1, t("access.form.ctcccloud_secret_access_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKeyId"
-        label={t("access.form.ctcccloud_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ctcccloud_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.ctcccloud_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretAccessKey"
-        label={t("access.form.ctcccloud_secret_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ctcccloud_secret_access_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.ctcccloud_secret_access_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormCTCCCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderCTCCCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderCacheFly.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderCacheFly.tsx
new file mode 100644
index 000000000..769001718
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderCacheFly.tsx
@@ -0,0 +1,46 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderCacheFly = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item name={[parentNamePath, "apiToken"]} initialValue={initialValues.apiToken} label={t("access.form.cachefly_api_token.label")} rules={[formRule]}>
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.cachefly_api_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiToken: z.string().nonempty(t("access.form.cachefly_api_token.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderCacheFly, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormCdnflyConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderCdnfly.tsx
similarity index 55%
rename from ui/src/components/access/AccessFormCdnflyConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderCdnfly.tsx
index 43fdade8a..7877b2ac6 100644
--- a/ui/src/components/access/AccessFormCdnflyConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderCdnfly.tsx
@@ -1,21 +1,67 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForCdnfly } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormCdnflyConfigFieldValues = Nullish<AccessConfigForCdnfly>;
+const AccessConfigFormFieldsProviderCdnfly = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormCdnflyConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormCdnflyConfigFieldValues;
-  onValuesChange?: (values: AccessFormCdnflyConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormCdnflyConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.cdnfly_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.cdnfly_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.cdnfly_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cdnfly_api_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.cdnfly_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiSecret"]}
+        initialValue={initialValues.apiSecret}
+        label={t("access.form.cdnfly_api_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cdnfly_api_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.cdnfly_api_secret.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     serverUrl: "http://<your-host-addr>:88/",
     apiKey: "",
@@ -23,10 +69,10 @@ const initFormModel = (): AccessFormCdnflyConfigFieldValues => {
   };
 };
 
-const AccessFormCdnflyConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormCdnflyConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     serverUrl: z.url(t("common.errmsg.url_invalid")),
     apiKey: z
       .string()
@@ -38,51 +84,11 @@ const AccessFormCdnflyConfig = ({ form: formInst, formName, disabled, initialVal
       .max(64, t("common.errmsg.string_max", { max: 64 })),
     allowInsecureConnections: z.boolean().nullish(),
   });
-  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="serverUrl" label={t("access.form.cdnfly_server_url.label")} rules={[formRule]}>
-        <Input placeholder={t("access.form.cdnfly_server_url.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.cdnfly_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cdnfly_api_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.cdnfly_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiSecret"
-        label={t("access.form.cdnfly_api_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cdnfly_api_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.cdnfly_api_secret.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
-        <Switch
-          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
-          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
-        />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormCdnflyConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderCdnfly, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormClouDNSConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderClouDNS.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormClouDNSConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderClouDNS.tsx
index d8048ec4e..0efdf49ce 100644
--- a/ui/src/components/access/AccessFormClouDNSConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderClouDNS.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForClouDNS } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormClouDNSConfigFieldValues = Nullish<AccessConfigForClouDNS>;
+const AccessConfigFormFieldsProviderClouDNS = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormClouDNSConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormClouDNSConfigFieldValues;
-  onValuesChange?: (values: AccessFormClouDNSConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormClouDNSConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "authId"]}
+        initialValue={initialValues.authId}
+        label={t("access.form.cloudns_auth_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudns_auth_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.cloudns_auth_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "authPassword"]}
+        initialValue={initialValues.authPassword}
+        label={t("access.form.cloudns_auth_password.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudns_auth_password.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.cloudns_auth_password.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     authId: "",
     authPassword: "",
   };
 };
 
-const AccessFormClouDNSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormClouDNSConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     authId: z
       .string()
       .min(1, t("access.form.cloudns_auth_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormClouDNSConfig = ({ form: formInst, formName, disabled, initialVa
       .min(1, t("access.form.cloudns_auth_password.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="authId"
-        label={t("access.form.cloudns_auth_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudns_auth_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.cloudns_auth_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="authPassword"
-        label={t("access.form.cloudns_auth_password.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudns_auth_password.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.cloudns_auth_password.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormClouDNSConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderClouDNS, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormCloudflareConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderCloudflare.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormCloudflareConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderCloudflare.tsx
index 14e384cfa..cbb72b75f 100644
--- a/ui/src/components/access/AccessFormCloudflareConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderCloudflare.tsx
@@ -1,30 +1,55 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForCloudflare } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormCloudflareConfigFieldValues = Nullish<AccessConfigForCloudflare>;
+const AccessConfigFormFieldsProviderCloudflare = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormCloudflareConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormCloudflareConfigFieldValues;
-  onValuesChange?: (values: AccessFormCloudflareConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormCloudflareConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "dnsApiToken"]}
+        initialValue={initialValues.dnsApiToken}
+        label={t("access.form.cloudflare_dns_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudflare_dns_api_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.cloudflare_dns_api_token.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "zoneApiToken"]}
+        initialValue={initialValues.zoneApiToken}
+        label={t("access.form.cloudflare_zone_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudflare_zone_api_token.tooltip") }}></span>}
+      >
+        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.cloudflare_zone_api_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     dnsApiToken: "",
   };
 };
 
-const AccessFormCloudflareConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormCloudflareConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     dnsApiToken: z
       .string()
       .min(1, t("access.form.cloudflare_dns_api_token.placeholder"))
@@ -34,40 +59,11 @@ const AccessFormCloudflareConfig = ({ form: formInst, formName, disabled, initia
       .max(64, t("common.errmsg.string_max", { max: 64 }))
       .nullish(),
   });
-  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="dnsApiToken"
-        label={t("access.form.cloudflare_dns_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudflare_dns_api_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.cloudflare_dns_api_token.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="zoneApiToken"
-        label={t("access.form.cloudflare_zone_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudflare_zone_api_token.tooltip") }}></span>}
-      >
-        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.cloudflare_zone_api_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormCloudflareConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderCloudflare, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderConstellix.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderConstellix.tsx
new file mode 100644
index 000000000..4ca6c1132
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderConstellix.tsx
@@ -0,0 +1,64 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderConstellix = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.constellix_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.constellix_api_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.constellix_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretKey"]}
+        initialValue={initialValues.secretKey}
+        label={t("access.form.constellix_secret_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.constellix_secret_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.constellix_secret_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiKey: "",
+    secretKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiKey: z.string().nonempty(t("access.form.constellix_api_key.placeholder")),
+    secretKey: z.string().nonempty(t("access.form.constellix_secret_key.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderConstellix, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormDNSLAConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDNSLA.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormDNSLAConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderDNSLA.tsx
index c3fc6d80b..dce2b407f 100644
--- a/ui/src/components/access/AccessFormDNSLAConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDNSLA.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForDNSLA } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormDNSLAConfigFieldValues = Nullish<AccessConfigForDNSLA>;
+const AccessConfigFormFieldsProviderDNSLA = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormDNSLAConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDNSLAConfigFieldValues;
-  onValuesChange?: (values: AccessFormDNSLAConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormDNSLAConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiId"]}
+        initialValue={initialValues.apiId}
+        label={t("access.form.dnsla_api_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dnsla_api_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.dnsla_api_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiSecret"]}
+        initialValue={initialValues.apiSecret}
+        label={t("access.form.dnsla_api_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dnsla_api_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.dnsla_api_secret.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     apiId: "",
     apiSecret: "",
   };
 };
 
-const AccessFormDNSLAConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormDNSLAConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     apiId: z
       .string()
       .min(1, t("access.form.dnsla_api_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormDNSLAConfig = ({ form: formInst, formName, disabled, initialValu
       .min(1, t("access.form.dnsla_api_secret.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="apiId"
-        label={t("access.form.dnsla_api_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dnsla_api_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.dnsla_api_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiSecret"
-        label={t("access.form.dnsla_api_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dnsla_api_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.dnsla_api_secret.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormDNSLAConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderDNSLA, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderDeSEC.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDeSEC.tsx
new file mode 100644
index 000000000..8a8110fd3
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDeSEC.tsx
@@ -0,0 +1,55 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderDeSEC = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "token"]}
+        initialValue={initialValues.token}
+        label={t("access.form.desec_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.desec_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.desec_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    token: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    token: z
+      .string()
+      .min(1, t("access.form.desec_token.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderDeSEC, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderDigitalOcean.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDigitalOcean.tsx
new file mode 100644
index 000000000..22f9c3bef
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDigitalOcean.tsx
@@ -0,0 +1,52 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderDigitalOcean = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessToken"]}
+        initialValue={initialValues.accessToken}
+        label={t("access.form.digitalocean_access_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.digitalocean_access_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.digitalocean_access_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    accessToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    accessToken: z.string().nonempty(t("access.form.digitalocean_access_token.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderDigitalOcean, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderDingTalkBot.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDingTalkBot.tsx
new file mode 100644
index 000000000..c9c8591d9
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDingTalkBot.tsx
@@ -0,0 +1,64 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderDingTalkBot = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "webhookUrl"]}
+        initialValue={initialValues.webhookUrl}
+        label={t("access.form.dingtalkbot_webhook_url.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dingtalkbot_webhook_url.tooltip") }}></span>}
+      >
+        <Input placeholder={t("access.form.dingtalkbot_webhook_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secret"]}
+        initialValue={initialValues.secret}
+        label={t("access.form.dingtalkbot_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dingtalkbot_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.dingtalkbot_secret.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    webhookUrl: "",
+    secret: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    webhookUrl: z.url(t("common.errmsg.url_invalid")),
+    secret: z.string().nonempty(t("access.form.dingtalkbot_secret.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderDingTalkBot, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormDiscordBotConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDiscordBot.tsx
similarity index 50%
rename from ui/src/components/access/AccessFormDiscordBotConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderDiscordBot.tsx
index bef914805..8abfbc021 100644
--- a/ui/src/components/access/AccessFormDiscordBotConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDiscordBot.tsx
@@ -1,53 +1,25 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForDiscordBot } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormDiscordBotConfigFieldValues = Nullish<AccessConfigForDiscordBot>;
-
-export interface AccessFormDiscordBotConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDiscordBotConfigFieldValues;
-  onValuesChange?: (values: AccessFormDiscordBotConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormDiscordBotConfigFieldValues => {
-  return {
-    botToken: "",
-  };
-};
-
-const AccessFormDiscordBotConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDiscordBotConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderDiscordBot = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    botToken: z
-      .string()
-      .min(1, t("access.form.discordbot_token.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-    channelId: z.string().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
+    <>
       <Form.Item
-        name="botToken"
+        name={[parentNamePath, "botToken"]}
+        initialValue={initialValues.botToken}
         label={t("access.form.discordbot_token.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.discordbot_token.tooltip") }}></span>}
@@ -56,7 +28,8 @@ const AccessFormDiscordBotConfig = ({ form: formInst, formName, disabled, initia
       </Form.Item>
 
       <Form.Item
-        name="channelId"
+        name={[parentNamePath, "channelId"]}
+        initialValue={initialValues.channelId}
         label={t("access.form.discordbot_channel_id.label")}
         extra={t("access.form.discordbot_channel_id.help")}
         rules={[formRule]}
@@ -64,8 +37,31 @@ const AccessFormDiscordBotConfig = ({ form: formInst, formName, disabled, initia
       >
         <Input allowClear placeholder={t("access.form.discordbot_channel_id.placeholder")} />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormDiscordBotConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    botToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    botToken: z
+      .string()
+      .min(1, t("access.form.discordbot_token.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+    channelId: z.string().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderDiscordBot, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormDogeCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDogeCloud.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormDogeCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderDogeCloud.tsx
index b23a399d8..69fa743b7 100644
--- a/ui/src/components/access/AccessFormDogeCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDogeCloud.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForDogeCloud } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormDogeCloudConfigFieldValues = Nullish<AccessConfigForDogeCloud>;
+const AccessConfigFormFieldsProviderDogeCloud = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormDogeCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormDogeCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormDogeCloudConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormDogeCloudConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKey"]}
+        initialValue={initialValues.accessKey}
+        label={t("access.form.dogecloud_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dogecloud_access_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.dogecloud_access_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretKey"]}
+        initialValue={initialValues.secretKey}
+        label={t("access.form.dogecloud_secret_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dogecloud_secret_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.dogecloud_secret_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessFormDogeCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDogeCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKey: z
       .string()
       .min(1, t("access.form.dogecloud_access_key.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormDogeCloudConfig = ({ form: formInst, formName, disabled, initial
       .min(1, t("access.form.dogecloud_secret_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKey"
-        label={t("access.form.dogecloud_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dogecloud_access_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.dogecloud_access_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretKey"
-        label={t("access.form.dogecloud_secret_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dogecloud_secret_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.dogecloud_secret_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormDogeCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderDogeCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderDuckDNS.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDuckDNS.tsx
new file mode 100644
index 000000000..a685a31d6
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDuckDNS.tsx
@@ -0,0 +1,52 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderDuckDNS = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "token"]}
+        initialValue={initialValues.token}
+        label={t("access.form.duckdns_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.duckdns_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.duckdns_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    token: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    token: z.string().nonempty(t("access.form.duckdns_token.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderDuckDNS, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderDynv6.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderDynv6.tsx
new file mode 100644
index 000000000..3b23629a4
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderDynv6.tsx
@@ -0,0 +1,55 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderDynv6 = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "httpToken"]}
+        initialValue={initialValues.httpToken}
+        label={t("access.form.dynv6_http_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.dynv6_http_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.dynv6_http_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    httpToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    httpToken: z
+      .string()
+      .min(1, t("access.form.dynv6_http_token.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderDynv6, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormEdgioConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderEdgio.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormEdgioConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderEdgio.tsx
index d97430db0..036b7f468 100644
--- a/ui/src/components/access/AccessFormEdgioConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderEdgio.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForEdgio } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormEdgioConfigFieldValues = Nullish<AccessConfigForEdgio>;
+const AccessConfigFormFieldsProviderEdgio = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormEdgioConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormEdgioConfigFieldValues;
-  onValuesChange?: (values: AccessFormEdgioConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormEdgioConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "clientId"]}
+        initialValue={initialValues.clientId}
+        label={t("access.form.edgio_client_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.edgio_client_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.edgio_client_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "clientSecret"]}
+        initialValue={initialValues.clientSecret}
+        label={t("access.form.edgio_client_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.edgio_client_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.edgio_client_secret.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     clientId: "",
     clientSecret: "",
   };
 };
 
-const AccessFormEdgioConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormEdgioConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     clientId: z
       .string()
       .min(1, t("access.form.edgio_client_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormEdgioConfig = ({ form: formInst, formName, disabled, initialValu
       .min(1, t("access.form.edgio_client_secret.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="clientId"
-        label={t("access.form.edgio_client_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.edgio_client_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.edgio_client_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="clientSecret"
-        label={t("access.form.edgio_client_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.edgio_client_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.edgio_client_secret.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormEdgioConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderEdgio, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormEmailConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderEmail.tsx
similarity index 57%
rename from ui/src/components/access/AccessFormEmailConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderEmail.tsx
index 95148f793..378f0d3c5 100644
--- a/ui/src/components/access/AccessFormEmailConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderEmail.tsx
@@ -1,22 +1,101 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, InputNumber, Switch } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, InputNumber, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForEmail } from "@/domain/access";
 import { validEmailAddress, validPortNumber } from "@/utils/validators";
 
-type AccessFormEmailConfigFieldValues = Nullish<AccessConfigForEmail>;
+import { useFormNestedFieldsContext } from "./_context";
 
-export interface AccessFormEmailConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormEmailConfigFieldValues;
-  onValuesChange?: (values: AccessFormEmailConfigFieldValues) => void;
-}
+const AccessConfigFormFieldsProviderEmail = () => {
+  const { i18n, t } = useTranslation();
 
-const initFormModel = (): AccessFormEmailConfigFieldValues => {
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const formInst = Form.useFormInstance();
+  const initialValues = getInitialValues();
+
+  const handleTlsSwitchChange = (checked: boolean) => {
+    const oldPort = formInst.getFieldValue("smtpPort");
+    const newPort = checked && (oldPort == null || oldPort === 25) ? 465 : !checked && (oldPort == null || oldPort === 465) ? 25 : oldPort;
+    if (newPort !== oldPort) {
+      formInst.setFieldValue("smtpPort", newPort);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex space-x-2">
+        <div className="w-3/5">
+          <Form.Item
+            name={[parentNamePath, "smtpHost"]}
+            initialValue={initialValues.smtpHost}
+            label={t("access.form.email_smtp_host.label")}
+            rules={[formRule]}
+          >
+            <Input placeholder={t("access.form.email_smtp_host.placeholder")} />
+          </Form.Item>
+        </div>
+
+        <div className="w-2/5">
+          <Form.Item
+            name={[parentNamePath, "smtpPort"]}
+            initialValue={initialValues.smtpPort}
+            label={t("access.form.email_smtp_port.label")}
+            rules={[formRule]}
+          >
+            <InputNumber style={{ width: "100%" }} placeholder={t("access.form.email_smtp_port.placeholder")} min={1} max={65535} />
+          </Form.Item>
+        </div>
+      </div>
+
+      <Form.Item name={[parentNamePath, "smtpTls"]} initialValue={initialValues.smtpTls} label={t("access.form.email_smtp_tls.label")} rules={[formRule]}>
+        <Switch onChange={handleTlsSwitchChange} />
+      </Form.Item>
+
+      <Form.Item name={[parentNamePath, "username"]} initialValue={initialValues.username} label={t("access.form.email_username.label")} rules={[formRule]}>
+        <Input autoComplete="new-password" placeholder={t("access.form.email_username.placeholder")} />
+      </Form.Item>
+
+      <Form.Item name={[parentNamePath, "password"]} initialValue={initialValues.password} label={t("access.form.email_password.label")} rules={[formRule]}>
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.email_password.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "senderAddress"]}
+        initialValue={initialValues.senderAddress}
+        label={t("access.form.email_sender_address.label")}
+        rules={[formRule]}
+      >
+        <Input type="email" allowClear placeholder={t("access.form.email_sender_address.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "senderName"]}
+        initialValue={initialValues.senderName}
+        label={t("access.form.email_sender_name.label")}
+        rules={[formRule]}
+      >
+        <Input allowClear placeholder={t("access.form.email_sender_name.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "receiverAddress"]}
+        initialValue={initialValues.receiverAddress}
+        label={t("access.form.email_receiver_address.label")}
+        extra={t("access.form.email_receiver_address.help")}
+        rules={[formRule]}
+      >
+        <Input type="email" allowClear placeholder={t("access.form.email_receiver_address.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     smtpHost: "",
     smtpPort: 465,
@@ -29,10 +108,10 @@ const initFormModel = (): AccessFormEmailConfigFieldValues => {
   };
 };
 
-const AccessFormEmailConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormEmailConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     smtpHost: z
       .string()
       .min(1, t("access.form.email_smtp_host.placeholder"))
@@ -60,73 +139,11 @@ const AccessFormEmailConfig = ({ form: formInst, formName, disabled, initialValu
         return validEmailAddress(v);
       }, t("common.errmsg.email_invalid")),
   });
-  const formRule = createSchemaFieldRule(formSchema);
-
-  const handleTlsSwitchChange = (checked: boolean) => {
-    const oldPort = formInst.getFieldValue("smtpPort");
-    const newPort = checked && (oldPort == null || oldPort === 25) ? 465 : !checked && (oldPort == null || oldPort === 465) ? 25 : oldPort;
-    if (newPort !== oldPort) {
-      formInst.setFieldValue("smtpPort", newPort);
-    }
-  };
-
-  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}
-    >
-      <div className="flex space-x-2">
-        <div className="w-3/5">
-          <Form.Item name="smtpHost" label={t("access.form.email_smtp_host.label")} rules={[formRule]}>
-            <Input placeholder={t("access.form.email_smtp_host.placeholder")} />
-          </Form.Item>
-        </div>
-
-        <div className="w-2/5">
-          <Form.Item name="smtpPort" label={t("access.form.email_smtp_port.label")} rules={[formRule]}>
-            <InputNumber style={{ width: "100%" }} placeholder={t("access.form.email_smtp_port.placeholder")} min={1} max={65535} />
-          </Form.Item>
-        </div>
-      </div>
-
-      <Form.Item name="smtpTls" label={t("access.form.email_smtp_tls.label")} rules={[formRule]}>
-        <Switch onChange={handleTlsSwitchChange} />
-      </Form.Item>
-
-      <Form.Item name="username" label={t("access.form.email_username.label")} rules={[formRule]}>
-        <Input autoComplete="new-password" placeholder={t("access.form.email_username.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="password" label={t("access.form.email_password.label")} rules={[formRule]}>
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.email_password.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="senderAddress" label={t("access.form.email_sender_address.label")} rules={[formRule]}>
-        <Input type="email" allowClear placeholder={t("access.form.email_sender_address.placeholder")} />
-      </Form.Item>
-
-      <Form.Item name="senderName" label={t("access.form.email_sender_name.label")} rules={[formRule]}>
-        <Input allowClear placeholder={t("access.form.email_sender_name.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="receiverAddress"
-        label={t("access.form.email_receiver_address.label")}
-        extra={t("access.form.email_receiver_address.help")}
-        rules={[formRule]}
-      >
-        <Input type="email" allowClear placeholder={t("access.form.email_receiver_address.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormEmailConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderEmail, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormFlexCDNConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderFlexCDN.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormFlexCDNConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderFlexCDN.tsx
index 59ff94111..898f483e6 100644
--- a/ui/src/components/access/AccessFormFlexCDNConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderFlexCDN.tsx
@@ -1,64 +1,38 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Radio, Switch } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Radio, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForFlexCDN } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormFlexCDNConfigFieldValues = Nullish<AccessConfigForFlexCDN>;
-
-export interface AccessFormFlexCDNConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormFlexCDNConfigFieldValues;
-  onValuesChange?: (values: AccessFormFlexCDNConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormFlexCDNConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8000/",
-    apiRole: "user",
-    accessKeyId: "",
-    accessKey: "",
-  };
-};
-
-const AccessFormFlexCDNConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormFlexCDNConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderFlexCDN = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    role: z.literal(["user", "admin"], t("access.form.flexcdn_api_role.placeholder")),
-    accessKeyId: z.string().nonempty(t("access.form.flexcdn_access_key_id.placeholder")),
-    accessKey: z.string().nonempty(t("access.form.flexcdn_access_key.placeholder")),
-    allowInsecureConnections: z.boolean().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
-      <Form.Item name="serverUrl" label={t("access.form.flexcdn_server_url.label")} rules={[formRule]}>
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.flexcdn_server_url.label")}
+        rules={[formRule]}
+      >
         <Input placeholder={t("access.form.flexcdn_server_url.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="apiRole" label={t("access.form.flexcdn_api_role.label")} rules={[formRule]}>
+      <Form.Item name={[parentNamePath, "apiRole"]} initialValue={initialValues.apiRole} label={t("access.form.flexcdn_api_role.label")} rules={[formRule]}>
         <Radio.Group options={["user", "admin"].map((s) => ({ label: t(`access.form.flexcdn_api_role.option.${s}.label`), value: s }))} />
       </Form.Item>
 
       <Form.Item
-        name="accessKeyId"
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
         label={t("access.form.flexcdn_access_key_id.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.flexcdn_access_key_id.tooltip") }}></span>}
@@ -67,7 +41,8 @@ const AccessFormFlexCDNConfig = ({ form: formInst, formName, disabled, initialVa
       </Form.Item>
 
       <Form.Item
-        name="accessKey"
+        name={[parentNamePath, "accessKey"]}
+        initialValue={initialValues.accessKey}
         label={t("access.form.flexcdn_access_key.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.flexcdn_access_key.tooltip") }}></span>}
@@ -75,14 +50,45 @@ const AccessFormFlexCDNConfig = ({ form: formInst, formName, disabled, initialVa
         <Input.Password autoComplete="new-password" placeholder={t("access.form.flexcdn_access_key.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
         <Switch
           checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
           unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
         />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormFlexCDNConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8000/",
+    apiRole: "user",
+    accessKeyId: "",
+    accessKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiRole: z.literal(["user", "admin"], t("access.form.flexcdn_api_role.placeholder")),
+    accessKeyId: z.string().nonempty(t("access.form.flexcdn_access_key_id.placeholder")),
+    accessKey: z.string().nonempty(t("access.form.flexcdn_access_key.placeholder")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderFlexCDN, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderGcore.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderGcore.tsx
new file mode 100644
index 000000000..e39ac98bc
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderGcore.tsx
@@ -0,0 +1,55 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderGcore = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiToken"]}
+        initialValue={initialValues.apiToken}
+        label={t("access.form.gcore_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.gcore_api_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.gcore_api_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiToken: z
+      .string()
+      .min(1, t("access.form.gcore_api_token.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderGcore, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormGnameConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderGname.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormGnameConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderGname.tsx
index 1cf716a10..746187601 100644
--- a/ui/src/components/access/AccessFormGnameConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderGname.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForGname } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormGnameConfigFieldValues = Nullish<AccessConfigForGname>;
+const AccessConfigFormFieldsProviderGname = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormGnameConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormGnameConfigFieldValues;
-  onValuesChange?: (values: AccessFormGnameConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormGnameConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "appId"]}
+        initialValue={initialValues.appId}
+        label={t("access.form.gname_app_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.gname_app_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.gname_app_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "appKey"]}
+        initialValue={initialValues.appKey}
+        label={t("access.form.gname_app_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.gname_app_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.gname_app_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     appId: "",
     appKey: "",
   };
 };
 
-const AccessFormGnameConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormGnameConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     appId: z
       .string()
       .min(1, t("access.form.gname_app_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormGnameConfig = ({ form: formInst, formName, disabled, initialValu
       .min(1, t("access.form.gname_app_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="appId"
-        label={t("access.form.gname_app_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.gname_app_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.gname_app_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="appKey"
-        label={t("access.form.gname_app_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.gname_app_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.gname_app_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormGnameConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderGname, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormGoDaddyConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderGoDaddy.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormGoDaddyConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderGoDaddy.tsx
index f71d1e854..3dd30815c 100644
--- a/ui/src/components/access/AccessFormGoDaddyConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderGoDaddy.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForGoDaddy } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormGoDaddyConfigFieldValues = Nullish<AccessConfigForGoDaddy>;
+const AccessConfigFormFieldsProviderGoDaddy = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormGoDaddyConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormGoDaddyConfigFieldValues;
-  onValuesChange?: (values: AccessFormGoDaddyConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormGoDaddyConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.godaddy_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.godaddy_api_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.godaddy_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiSecret"]}
+        initialValue={initialValues.apiSecret}
+        label={t("access.form.godaddy_api_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.godaddy_api_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.godaddy_api_secret.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     apiKey: "",
     apiSecret: "",
   };
 };
 
-const AccessFormGoDaddyConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormGoDaddyConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     apiKey: z
       .string()
       .min(1, t("access.form.godaddy_api_key.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormGoDaddyConfig = ({ form: formInst, formName, disabled, initialVa
       .min(1, t("access.form.godaddy_api_secret.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="apiKey"
-        label={t("access.form.godaddy_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.godaddy_api_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.godaddy_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiSecret"
-        label={t("access.form.godaddy_api_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.godaddy_api_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.godaddy_api_secret.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormGoDaddyConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderGoDaddy, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormGoEdgeConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderGoEdge.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormGoEdgeConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderGoEdge.tsx
index affc32822..5f285f6a3 100644
--- a/ui/src/components/access/AccessFormGoEdgeConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderGoEdge.tsx
@@ -1,64 +1,38 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Radio, Switch } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Radio, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForGoEdge } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormGoEdgeConfigFieldValues = Nullish<AccessConfigForGoEdge>;
-
-export interface AccessFormGoEdgeConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormGoEdgeConfigFieldValues;
-  onValuesChange?: (values: AccessFormGoEdgeConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormGoEdgeConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:7788/",
-    apiRole: "user",
-    accessKeyId: "",
-    accessKey: "",
-  };
-};
-
-const AccessFormGoEdgeConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormGoEdgeConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderGoEdge = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    role: z.literal(["user", "admin"], t("access.form.goedge_api_role.placeholder")),
-    accessKeyId: z.string().nonempty(t("access.form.goedge_access_key_id.placeholder")),
-    accessKey: z.string().nonempty(t("access.form.goedge_access_key.placeholder")),
-    allowInsecureConnections: z.boolean().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
-      <Form.Item name="serverUrl" label={t("access.form.goedge_server_url.label")} rules={[formRule]}>
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.goedge_server_url.label")}
+        rules={[formRule]}
+      >
         <Input placeholder={t("access.form.goedge_server_url.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="apiRole" label={t("access.form.goedge_api_role.label")} rules={[formRule]}>
+      <Form.Item name={[parentNamePath, "apiRole"]} initialValue={initialValues.apiRole} label={t("access.form.goedge_api_role.label")} rules={[formRule]}>
         <Radio.Group options={["user", "admin"].map((s) => ({ label: t(`access.form.goedge_api_role.option.${s}.label`), value: s }))} />
       </Form.Item>
 
       <Form.Item
-        name="accessKeyId"
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
         label={t("access.form.goedge_access_key_id.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.goedge_access_key_id.tooltip") }}></span>}
@@ -67,7 +41,8 @@ const AccessFormGoEdgeConfig = ({ form: formInst, formName, disabled, initialVal
       </Form.Item>
 
       <Form.Item
-        name="accessKey"
+        name={[parentNamePath, "accessKey"]}
+        initialValue={initialValues.accessKey}
         label={t("access.form.goedge_access_key.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.goedge_access_key.tooltip") }}></span>}
@@ -75,14 +50,45 @@ const AccessFormGoEdgeConfig = ({ form: formInst, formName, disabled, initialVal
         <Input.Password autoComplete="new-password" placeholder={t("access.form.goedge_access_key.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
         <Switch
           checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
           unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
         />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormGoEdgeConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:7788/",
+    apiRole: "user",
+    accessKeyId: "",
+    accessKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiRole: z.literal(["user", "admin"], t("access.form.goedge_api_role.placeholder")),
+    accessKeyId: z.string().nonempty(t("access.form.goedge_access_key_id.placeholder")),
+    accessKey: z.string().nonempty(t("access.form.goedge_access_key.placeholder")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderGoEdge, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormGoogleTrustServicesConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderGoogleTrustServices.tsx
similarity index 51%
rename from ui/src/components/access/AccessFormGoogleTrustServicesConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderGoogleTrustServices.tsx
index 36d576a1c..4f5da5b5d 100644
--- a/ui/src/components/access/AccessFormGoogleTrustServicesConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderGoogleTrustServices.tsx
@@ -1,37 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForGoogleTrustServices } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormGoogleTrustServicesConfigFieldValues = Nullish<AccessConfigForGoogleTrustServices>;
+const AccessConfigFormFieldsProviderGoogleTrustServices = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormGoogleTrustServicesConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormGoogleTrustServicesConfigFieldValues;
-  onValuesChange?: (values: AccessFormGoogleTrustServicesConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormGoogleTrustServicesConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "eabKid"]}
+        initialValue={initialValues.eabKid}
+        label={t("access.form.googletrustservices_eab_kid.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.googletrustservices_eab_kid.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.googletrustservices_eab_kid.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "eabHmacKey"]}
+        initialValue={initialValues.eabHmacKey}
+        label={t("access.form.googletrustservices_eab_hmac_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.googletrustservices_eab_hmac_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.googletrustservices_eab_hmac_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     eabKid: "",
     eabHmacKey: "",
   };
 };
 
-const AccessFormGoogleTrustServicesConfig = ({
-  form: formInst,
-  formName,
-  disabled,
-  initialValues,
-  onValuesChange,
-}: AccessFormGoogleTrustServicesConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     eabKid: z
       .string()
       .min(1, t("access.form.googletrustservices_eab_kid.placeholder"))
@@ -41,40 +60,11 @@ const AccessFormGoogleTrustServicesConfig = ({
       .min(1, t("access.form.googletrustservices_eab_hmac_key.placeholder"))
       .max(256, t("common.errmsg.string_max", { max: 256 })),
   });
-  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="eabKid"
-        label={t("access.form.googletrustservices_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.googletrustservices_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.googletrustservices_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.googletrustservices_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.googletrustservices_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.googletrustservices_eab_hmac_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormGoogleTrustServicesConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderGoogleTrustServices, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderHetzner.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderHetzner.tsx
new file mode 100644
index 000000000..b4e275fe9
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderHetzner.tsx
@@ -0,0 +1,52 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderHetzner = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiToken"]}
+        initialValue={initialValues.apiToken}
+        label={t("access.form.hetzner_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.hetzner_api_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.hetzner_api_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiToken: z.string().nonempty(t("access.form.hetzner_api_token.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderHetzner, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormHuaweiCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderHuaweiCloud.tsx
similarity index 59%
rename from ui/src/components/access/AccessFormHuaweiCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderHuaweiCloud.tsx
index 82486ae12..279703835 100644
--- a/ui/src/components/access/AccessFormHuaweiCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderHuaweiCloud.tsx
@@ -1,31 +1,66 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForHuaweiCloud } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormHuaweiCloudConfigFieldValues = Nullish<AccessConfigForHuaweiCloud>;
+const AccessConfigFormFieldsProviderHuaweiCloud = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormHuaweiCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormHuaweiCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormHuaweiCloudConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormHuaweiCloudConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.huaweicloud_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.huaweicloud_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.huaweicloud_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretAccessKey"]}
+        initialValue={initialValues.secretAccessKey}
+        label={t("access.form.huaweicloud_secret_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.huaweicloud_secret_access_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.huaweicloud_secret_access_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "enterpriseProjectId"]}
+        initialValue={initialValues.enterpriseProjectId}
+        label={t("access.form.huaweicloud_enterprise_project_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.huaweicloud_enterprise_project_id.tooltip") }}></span>}
+      >
+        <Input allowClear autoComplete="new-password" placeholder={t("access.form.huaweicloud_enterprise_project_id.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessFormHuaweiCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormHuaweiCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.huaweicloud_access_key_id.placeholder"))
@@ -36,49 +71,11 @@ const AccessFormHuaweiCloudConfig = ({ form: formInst, formName, disabled, initi
       .max(64, t("common.errmsg.string_max", { max: 64 })),
     enterpriseProjectId: z.string().nullish(),
   });
-  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="accessKeyId"
-        label={t("access.form.huaweicloud_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.huaweicloud_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.huaweicloud_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretAccessKey"
-        label={t("access.form.huaweicloud_secret_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.huaweicloud_secret_access_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.huaweicloud_secret_access_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="enterpriseProjectId"
-        label={t("access.form.huaweicloud_enterprise_project_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.huaweicloud_enterprise_project_id.tooltip") }}></span>}
-      >
-        <Input allowClear autoComplete="new-password" placeholder={t("access.form.huaweicloud_enterprise_project_id.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormHuaweiCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderHuaweiCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormJDCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderJDCloud.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormJDCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderJDCloud.tsx
index ca1bdcc93..4a58c29ce 100644
--- a/ui/src/components/access/AccessFormJDCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderJDCloud.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForJDCloud } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormJDCloudConfigFieldValues = Nullish<AccessConfigForJDCloud>;
+const AccessConfigFormFieldsProviderJDCloud = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormJDCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormJDCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormJDCloudConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormJDCloudConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.jdcloud_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.jdcloud_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.jdcloud_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "accessKeySecret"]}
+        initialValue={initialValues.accessKeySecret}
+        label={t("access.form.jdcloud_access_key_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.jdcloud_access_key_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.jdcloud_access_key_secret.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     accessKeySecret: "",
   };
 };
 
-const AccessFormJDCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormJDCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.jdcloud_access_key_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormJDCloudConfig = ({ form: formInst, formName, disabled, initialVa
       .min(1, t("access.form.jdcloud_access_key_secret.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKeyId"
-        label={t("access.form.jdcloud_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.jdcloud_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.jdcloud_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="accessKeySecret"
-        label={t("access.form.jdcloud_access_key_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.jdcloud_access_key_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.jdcloud_access_key_secret.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormJDCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderJDCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderKong.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderKong.tsx
new file mode 100644
index 000000000..1b84b385b
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderKong.tsx
@@ -0,0 +1,71 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderKong = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item name={[parentNamePath, "serverUrl"]} initialValue={initialValues.serverUrl} label={t("access.form.kong_server_url.label")} rules={[formRule]}>
+        <Input placeholder={t("access.form.kong_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiToken"]}
+        initialValue={initialValues.apiToken}
+        label={t("access.form.kong_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.kong_api_token.tooltip") }}></span>}
+      >
+        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.kong_api_token.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8001/",
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiToken: z.string().nullish(),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderKong, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderKubernetes.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderKubernetes.tsx
new file mode 100644
index 000000000..cb2167c69
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderKubernetes.tsx
@@ -0,0 +1,56 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import TextFileInput from "@/components/TextFileInput";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderKubernetes = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "kubeConfig"]}
+        initialValue={initialValues.kubeConfig}
+        label={t("access.form.k8s_kubeconfig.label")}
+        extra={t("access.form.k8s_kubeconfig.help")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.k8s_kubeconfig.tooltip") }}></span>}
+      >
+        <TextFileInput allowClear autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.k8s_kubeconfig.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {};
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    kubeConfig: z
+      .string()
+      .max(20480, t("common.errmsg.string_max", { max: 20480 }))
+      .nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderKubernetes, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderLarkBot.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderLarkBot.tsx
new file mode 100644
index 000000000..6966a978f
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderLarkBot.tsx
@@ -0,0 +1,52 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderLarkBot = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "webhookUrl"]}
+        initialValue={initialValues.webhookUrl}
+        label={t("access.form.larkbot_webhook_url.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.larkbot_webhook_url.tooltip") }}></span>}
+      >
+        <Input placeholder={t("access.form.larkbot_webhook_url.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    webhookUrl: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    webhookUrl: z.url(t("common.errmsg.url_invalid")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderLarkBot, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderLeCDN.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderLeCDN.tsx
new file mode 100644
index 000000000..e008b4a04
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderLeCDN.tsx
@@ -0,0 +1,88 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Radio, Select, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderLeCDN = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item name={[parentNamePath, "serverUrl"]} initialValue={initialValues.serverUrl} label={t("access.form.lecdn_server_url.label")} rules={[formRule]}>
+        <Input placeholder={t("access.form.lecdn_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiVersion"]}
+        initialValue={initialValues.apiVersion}
+        label={t("access.form.lecdn_api_version.label")}
+        rules={[formRule]}
+      >
+        <Select options={["v3"].map((s) => ({ label: s, value: s }))} placeholder={t("access.form.lecdn_api_version.placeholder")} />
+      </Form.Item>
+
+      <Form.Item name={[parentNamePath, "apiRole"]} initialValue={initialValues.apiRole} label={t("access.form.lecdn_api_role.label")} rules={[formRule]}>
+        <Radio.Group options={["user", "master"].map((s) => ({ label: t(`access.form.lecdn_api_role.option.${s}.label`), value: s }))} />
+      </Form.Item>
+
+      <Form.Item name={[parentNamePath, "username"]} initialValue={initialValues.username} label={t("access.form.lecdn_username.label")} rules={[formRule]}>
+        <Input autoComplete="new-password" placeholder={t("access.form.lecdn_username.placeholder")} />
+      </Form.Item>
+
+      <Form.Item name={[parentNamePath, "password"]} initialValue={initialValues.password} label={t("access.form.lecdn_password.label")} rules={[formRule]}>
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.lecdn_password.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:5090/",
+    apiVersion: "v3",
+    apiRole: "client",
+    username: "",
+    password: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiVersion: z.literal(["v3"], t("access.form.lecdn_api_version.placeholder")),
+    apiRole: z.literal(["client", "master"], t("access.form.lecdn_api_role.placeholder")),
+    username: z.string().nonempty(t("access.form.lecdn_username.placeholder")),
+    password: z.string().nonempty(t("access.form.lecdn_password.placeholder")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderLeCDN, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormMattermostConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderMattermost.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormMattermostConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderMattermost.tsx
index 881b43b40..05323e4f0 100644
--- a/ui/src/components/access/AccessFormMattermostConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderMattermost.tsx
@@ -1,54 +1,25 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForMattermost } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormMattermostConfigFieldValues = Nullish<AccessConfigForMattermost>;
-
-export interface AccessFormMattermostConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormMattermostConfigFieldValues;
-  onValuesChange?: (values: AccessFormMattermostConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormMattermostConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8065/",
-    username: "",
-    password: "",
-  };
-};
-
-const AccessFormMattermostConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormMattermostConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderMattermost = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    username: z.string().nonempty(t("access.form.mattermost_username.placeholder")),
-    password: z.string().nonempty(t("access.form.mattermost_password.placeholder")),
-    channelId: z.string().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
+    <>
       <Form.Item
-        name="serverUrl"
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
         label={t("access.form.mattermost_server_url.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.mattermost_server_url.tooltip") }}></span>}
@@ -56,16 +27,27 @@ const AccessFormMattermostConfig = ({ form: formInst, formName, disabled, initia
         <Input placeholder={t("access.form.mattermost_server_url.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="username" label={t("access.form.mattermost_username.label")} rules={[formRule]}>
+      <Form.Item
+        name={[parentNamePath, "username"]}
+        initialValue={initialValues.username}
+        label={t("access.form.mattermost_username.label")}
+        rules={[formRule]}
+      >
         <Input placeholder={t("access.form.mattermost_username.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="password" label={t("access.form.mattermost_password.label")} rules={[formRule]}>
+      <Form.Item
+        name={[parentNamePath, "password"]}
+        initialValue={initialValues.password}
+        label={t("access.form.mattermost_password.label")}
+        rules={[formRule]}
+      >
         <Input.Password placeholder={t("access.form.mattermost_password.placeholder")} />
       </Form.Item>
 
       <Form.Item
-        name="channelId"
+        name={[parentNamePath, "channelId"]}
+        initialValue={initialValues.channelId}
         label={t("access.form.mattermost_channel_id.label")}
         extra={t("access.form.mattermost_channel_id.help")}
         rules={[formRule]}
@@ -73,8 +55,32 @@ const AccessFormMattermostConfig = ({ form: formInst, formName, disabled, initia
       >
         <Input allowClear placeholder={t("access.form.mattermost_channel_id.placeholder")} />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormMattermostConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8065/",
+    username: "",
+    password: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    username: z.string().nonempty(t("access.form.mattermost_username.placeholder")),
+    password: z.string().nonempty(t("access.form.mattermost_password.placeholder")),
+    channelId: z.string().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderMattermost, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderNS1.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderNS1.tsx
new file mode 100644
index 000000000..b60f766d4
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderNS1.tsx
@@ -0,0 +1,55 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderNS1 = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.ns1_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ns1_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.ns1_api_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiKey: z
+      .string()
+      .min(1, t("access.form.ns1_api_key.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderNS1, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormNameDotComConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderNameDotCom.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormNameDotComConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderNameDotCom.tsx
index 5adba9376..1efbf2b2d 100644
--- a/ui/src/components/access/AccessFormNameDotComConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderNameDotCom.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForNameDotCom } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormNameDotComConfigFieldValues = Nullish<AccessConfigForNameDotCom>;
+const AccessConfigFormFieldsProviderNameDotCom = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormNameDotComConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormNameDotComConfigFieldValues;
-  onValuesChange?: (values: AccessFormNameDotComConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormNameDotComConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "username"]}
+        initialValue={initialValues.username}
+        label={t("access.form.namedotcom_username.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namedotcom_username.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.namedotcom_username.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiToken"]}
+        initialValue={initialValues.apiToken}
+        label={t("access.form.namedotcom_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namedotcom_api_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.namedotcom_api_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     username: "",
     apiToken: "",
   };
 };
 
-const AccessFormNameDotComConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNameDotComConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     username: z
       .string()
       .min(1, t("access.form.namedotcom_username.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormNameDotComConfig = ({ form: formInst, formName, disabled, initia
       .min(1, t("access.form.namedotcom_api_token.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="username"
-        label={t("access.form.namedotcom_username.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namedotcom_username.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.namedotcom_username.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiToken"
-        label={t("access.form.namedotcom_api_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namedotcom_api_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.namedotcom_api_token.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormNameDotComConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderNameDotCom, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderNameSilo.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderNameSilo.tsx
new file mode 100644
index 000000000..aba5bf4b1
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderNameSilo.tsx
@@ -0,0 +1,55 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderNameSilo = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.namesilo_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namesilo_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.namesilo_api_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiKey: z
+      .string()
+      .min(1, t("access.form.namesilo_api_key.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderNameSilo, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormNamecheapConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderNamecheap.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormNamecheapConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderNamecheap.tsx
index 761cccc0f..0b3018a5e 100644
--- a/ui/src/components/access/AccessFormNamecheapConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderNamecheap.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForNamecheap } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormNamecheapConfigFieldValues = Nullish<AccessConfigForNamecheap>;
+const AccessConfigFormFieldsProviderNamecheap = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormNamecheapConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormNamecheapConfigFieldValues;
-  onValuesChange?: (values: AccessFormNamecheapConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormNamecheapConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "username"]}
+        initialValue={initialValues.username}
+        label={t("access.form.namecheap_username.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namecheap_username.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.namecheap_username.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.namecheap_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namecheap_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.namecheap_api_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     username: "",
     apiKey: "",
   };
 };
 
-const AccessFormNamecheapConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNamecheapConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     username: z
       .string()
       .min(1, t("access.form.namecheap_username.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormNamecheapConfig = ({ form: formInst, formName, disabled, initial
       .min(1, t("access.form.namecheap_api_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="username"
-        label={t("access.form.namecheap_username.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namecheap_username.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.namecheap_username.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.namecheap_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.namecheap_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.namecheap_api_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormNamecheapConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderNamecheap, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormNetcupConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderNetcup.tsx
similarity index 58%
rename from ui/src/components/access/AccessFormNetcupConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderNetcup.tsx
index bcd7ca26e..cfbe6b547 100644
--- a/ui/src/components/access/AccessFormNetcupConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderNetcup.tsx
@@ -1,53 +1,25 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForNetcup } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormNetcupConfigFieldValues = Nullish<AccessConfigForNetcup>;
-
-export interface AccessFormNetcupConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormNetcupConfigFieldValues;
-  onValuesChange?: (values: AccessFormNetcupConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormNetcupConfigFieldValues => {
-  return {
-    customerNumber: "",
-    apiKey: "",
-    apiPassword: "",
-  };
-};
-
-const AccessFormNetcupConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNetcupConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderNetcup = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    customerNumber: z.string().nonempty(t("access.form.netcup_customer_number.placeholder")),
-    apiKey: z.string().nonempty(t("access.form.netcup_api_key.placeholder")),
-    apiPassword: z.string().nonempty(t("access.form.netcup_api_password.placeholder")),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
+    <>
       <Form.Item
-        name="customerNumber"
+        name={[parentNamePath, "customerNumber"]}
+        initialValue={initialValues.customerNumber}
         label={t("access.form.netcup_customer_number.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.netcup_customer_number.tooltip") }}></span>}
@@ -56,7 +28,8 @@ const AccessFormNetcupConfig = ({ form: formInst, formName, disabled, initialVal
       </Form.Item>
 
       <Form.Item
-        name="apiKey"
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
         label={t("access.form.netcup_api_key.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.netcup_api_key.tooltip") }}></span>}
@@ -65,15 +38,39 @@ const AccessFormNetcupConfig = ({ form: formInst, formName, disabled, initialVal
       </Form.Item>
 
       <Form.Item
-        name="apiPassword"
+        name={[parentNamePath, "apiPassword"]}
+        initialValue={initialValues.apiPassword}
         label={t("access.form.netcup_api_password.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.netcup_api_password.tooltip") }}></span>}
       >
         <Input.Password autoComplete="new-password" placeholder={t("access.form.netcup_api_password.placeholder")} />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormNetcupConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    customerNumber: "",
+    apiKey: "",
+    apiPassword: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    customerNumber: z.string().nonempty(t("access.form.netcup_customer_number.placeholder")),
+    apiKey: z.string().nonempty(t("access.form.netcup_api_key.placeholder")),
+    apiPassword: z.string().nonempty(t("access.form.netcup_api_password.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderNetcup, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderNetlify.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderNetlify.tsx
new file mode 100644
index 000000000..9aa2ac191
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderNetlify.tsx
@@ -0,0 +1,52 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderNetlify = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiToken"]}
+        initialValue={initialValues.apiToken}
+        label={t("access.form.netlify_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.netlify_api_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.netlify_api_token.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiToken: z.string().nonempty(t("access.form.netlify_api_token.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderNetlify, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormPorkbunConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderPorkbun.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormPorkbunConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderPorkbun.tsx
index b4db53a05..881d32325 100644
--- a/ui/src/components/access/AccessFormPorkbunConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderPorkbun.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForPorkbun } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormPorkbunConfigFieldValues = Nullish<AccessConfigForPorkbun>;
+const AccessConfigFormFieldsProviderPorkbun = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormPorkbunConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormPorkbunConfigFieldValues;
-  onValuesChange?: (values: AccessFormPorkbunConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormPorkbunConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.porkbun_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.porkbun_api_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.porkbun_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretApiKey"]}
+        initialValue={initialValues.secretApiKey}
+        label={t("access.form.porkbun_secret_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.porkbun_secret_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.porkbun_secret_api_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     apiKey: "",
     secretApiKey: "",
   };
 };
 
-const AccessFormPorkbunConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormPorkbunConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     apiKey: z
       .string()
       .min(1, t("access.form.porkbun_api_key.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormPorkbunConfig = ({ form: formInst, formName, disabled, initialVa
       .min(1, t("access.form.porkbun_secret_api_key.placeholder"))
       .max(256, t("common.errmsg.string_max", { max: 256 })),
   });
-  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="apiKey"
-        label={t("access.form.porkbun_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.porkbun_api_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.porkbun_api_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretApiKey"
-        label={t("access.form.porkbun_secret_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.porkbun_secret_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.porkbun_secret_api_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormPorkbunConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderPorkbun, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderPowerDNS.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderPowerDNS.tsx
new file mode 100644
index 000000000..37d0d8cc6
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderPowerDNS.tsx
@@ -0,0 +1,79 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderPowerDNS = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.powerdns_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.powerdns_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.powerdns_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.powerdns_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.powerdns_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8082/",
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiKey: z
+      .string()
+      .min(1, t("access.form.powerdns_api_key.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderPowerDNS, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormProxmoxVEConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderProxmoxVE.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormProxmoxVEConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderProxmoxVE.tsx
index 2158f431f..5767da947 100644
--- a/ui/src/components/access/AccessFormProxmoxVEConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderProxmoxVE.tsx
@@ -1,57 +1,34 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForProxmoxVE } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormProxmoxVEConfigFieldValues = Nullish<AccessConfigForProxmoxVE>;
-
-export interface AccessFormProxmoxVEConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormProxmoxVEConfigFieldValues;
-  onValuesChange?: (values: AccessFormProxmoxVEConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormProxmoxVEConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8006/",
-    apiToken: "",
-  };
-};
-
-const AccessFormProxmoxVEConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormProxmoxVEConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderProxmoxVE = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    apiToken: z.string().nonempty(t("access.form.proxmoxve_api_token.placeholder")),
-    apiTokenSecret: z.string().nullish(),
-    allowInsecureConnections: z.boolean().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
-      <Form.Item name="serverUrl" label={t("access.form.proxmoxve_server_url.label")} rules={[formRule]}>
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.proxmoxve_server_url.label")}
+        rules={[formRule]}
+      >
         <Input placeholder={t("access.form.proxmoxve_server_url.placeholder")} />
       </Form.Item>
 
       <Form.Item
-        name="apiToken"
+        name={[parentNamePath, "apiToken"]}
+        initialValue={initialValues.apiToken}
         label={t("access.form.proxmoxve_api_token.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.proxmoxve_api_token.tooltip") }}></span>}
@@ -60,7 +37,8 @@ const AccessFormProxmoxVEConfig = ({ form: formInst, formName, disabled, initial
       </Form.Item>
 
       <Form.Item
-        name="apiTokenSecret"
+        name={[parentNamePath, "apiTokenSecret"]}
+        initialValue={initialValues.apiTokenSecret}
         label={t("access.form.proxmoxve_api_token_secret.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.proxmoxve_api_token_secret.tooltip") }}></span>}
@@ -68,14 +46,42 @@ const AccessFormProxmoxVEConfig = ({ form: formInst, formName, disabled, initial
         <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.proxmoxve_api_token_secret.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
         <Switch
           checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
           unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
         />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormProxmoxVEConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8006/",
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiToken: z.string().nonempty(t("access.form.proxmoxve_api_token.placeholder")),
+    apiTokenSecret: z.string().nullish(),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderProxmoxVE, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormQiniuConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderQiniu.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormQiniuConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderQiniu.tsx
index c6faeb1c2..940740c62 100644
--- a/ui/src/components/access/AccessFormQiniuConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderQiniu.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForQiniu } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormQiniuConfigFieldValues = Nullish<AccessConfigForQiniu>;
+const AccessConfigFormFieldsProviderQiniu = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormQiniuConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormQiniuConfigFieldValues;
-  onValuesChange?: (values: AccessFormQiniuConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormQiniuConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKey"]}
+        initialValue={initialValues.accessKey}
+        label={t("access.form.qiniu_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.qiniu_access_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.qiniu_access_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretKey"]}
+        initialValue={initialValues.secretKey}
+        label={t("access.form.qiniu_secret_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.qiniu_secret_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.qiniu_secret_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessFormQiniuConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormQiniuConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKey: z
       .string()
       .min(1, t("access.form.qiniu_access_key.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormQiniuConfig = ({ form: formInst, formName, disabled, initialValu
       .min(1, t("access.form.qiniu_secret_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKey"
-        label={t("access.form.qiniu_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.qiniu_access_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.qiniu_access_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretKey"
-        label={t("access.form.qiniu_secret_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.qiniu_secret_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.qiniu_secret_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormQiniuConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderQiniu, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderRainYun.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderRainYun.tsx
new file mode 100644
index 000000000..e06b3d10c
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderRainYun.tsx
@@ -0,0 +1,55 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderRainYun = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.rainyun_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.rainyun_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.rainyun_api_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiKey: z
+      .string()
+      .min(1, t("access.form.rainyun_api_key.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderRainYun, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormRatPanelConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderRatPanel.tsx
similarity index 54%
rename from ui/src/components/access/AccessFormRatPanelConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderRatPanel.tsx
index bfac4ed29..09c4d156b 100644
--- a/ui/src/components/access/AccessFormRatPanelConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderRatPanel.tsx
@@ -1,58 +1,34 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForRatPanel } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormRatPanelConfigFieldValues = Nullish<AccessConfigForRatPanel>;
-
-export interface AccessFormRatPanelConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormRatPanelConfigFieldValues;
-  onValuesChange?: (values: AccessFormRatPanelConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormRatPanelConfigFieldValues => {
-  return {
-    serverUrl: "http://<your-host-addr>:8888/",
-    accessTokenId: 1,
-    accessToken: "",
-  };
-};
-
-const AccessFormRatPanelConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormRatPanelConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderRatPanel = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    serverUrl: z.url(t("common.errmsg.url_invalid")),
-    accessTokenId: z.preprocess((v) => Number(v), z.number().positive(t("access.form.ratpanel_access_token_id.placeholder"))),
-    accessToken: z.string().nonempty(t("access.form.ratpanel_access_token.placeholder")),
-    allowInsecureConnections: z.boolean().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
-      <Form.Item name="serverUrl" label={t("access.form.ratpanel_server_url.label")} rules={[formRule]}>
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.ratpanel_server_url.label")}
+        rules={[formRule]}
+      >
         <Input placeholder={t("access.form.ratpanel_server_url.placeholder")} />
       </Form.Item>
 
       <Form.Item
-        name="accessTokenId"
+        name={[parentNamePath, "accessTokenId"]}
+        initialValue={initialValues.accessTokenId}
         label={t("access.form.ratpanel_access_token_id.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ratpanel_access_token_id.tooltip") }}></span>}
@@ -61,7 +37,8 @@ const AccessFormRatPanelConfig = ({ form: formInst, formName, disabled, initialV
       </Form.Item>
 
       <Form.Item
-        name="accessToken"
+        name={[parentNamePath, "accessToken"]}
+        initialValue={initialValues.accessToken}
         label={t("access.form.ratpanel_access_token.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ratpanel_access_token.tooltip") }}></span>}
@@ -69,14 +46,43 @@ const AccessFormRatPanelConfig = ({ form: formInst, formName, disabled, initialV
         <Input.Password autoComplete="new-password" placeholder={t("access.form.ratpanel_access_token.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
         <Switch
           checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
           unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
         />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormRatPanelConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:8888/",
+    accessTokenId: 1,
+    accessToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    accessTokenId: z.preprocess((v) => Number(v), z.number().positive(t("access.form.ratpanel_access_token_id.placeholder"))),
+    accessToken: z.string().nonempty(t("access.form.ratpanel_access_token.placeholder")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderRatPanel, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderSSH.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderSSH.tsx
new file mode 100644
index 000000000..28c1e4bcf
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderSSH.tsx
@@ -0,0 +1,309 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { IconCircleArrowDown, IconCircleArrowUp, IconCircleMinus, IconCirclePlus } from "@tabler/icons-react";
+import { Button, Collapse, Form, Input, InputNumber, Radio } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import Show from "@/components/Show";
+import TextFileInput from "@/components/TextFileInput";
+import { validDomainName, validIPv4Address, validIPv6Address, validPortNumber } from "@/utils/validators";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AUTH_METHOD_NONE = "none" as const;
+const AUTH_METHOD_PASSWORD = "password" as const;
+const AUTH_METHOD_KEY = "key" as const;
+
+const AccessConfigFormFieldsProviderSSH = ({ disabled }: { disabled?: boolean }) => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const formInst = Form.useFormInstance();
+  const initialValues = getInitialValues();
+
+  const fieldAuthMethod = Form.useWatch([parentNamePath, "authMethod"], formInst);
+  const fieldJumpServers = Form.useWatch([parentNamePath, "jumpServers"], formInst);
+
+  return (
+    <>
+      <div className="flex space-x-2">
+        <div className="w-2/3">
+          <Form.Item name={[parentNamePath, "host"]} initialValue={initialValues.host} label={t("access.form.ssh_host.label")} rules={[formRule]}>
+            <Input placeholder={t("access.form.ssh_host.placeholder")} />
+          </Form.Item>
+        </div>
+
+        <div className="w-1/3">
+          <Form.Item name={[parentNamePath, "port"]} initialValue={initialValues.port} label={t("access.form.ssh_port.label")} rules={[formRule]}>
+            <InputNumber style={{ width: "100%" }} min={1} max={65535} placeholder={t("access.form.ssh_port.placeholder")} />
+          </Form.Item>
+        </div>
+      </div>
+
+      <Form.Item
+        name={[parentNamePath, "authMethod"]}
+        initialValue={initialValues.authMethod}
+        label={t("access.form.ssh_auth_method.label")}
+        rules={[formRule]}
+      >
+        <Radio.Group
+          options={[AUTH_METHOD_NONE, AUTH_METHOD_PASSWORD, AUTH_METHOD_KEY].map((s) => ({
+            key: s,
+            label: t(`access.form.ssh_auth_method.option.${s}.label`),
+            value: s,
+          }))}
+        />
+      </Form.Item>
+
+      <Form.Item name={[parentNamePath, "username"]} initialValue={initialValues.username} label={t("access.form.ssh_username.label")} rules={[formRule]}>
+        <Input autoComplete="new-password" placeholder={t("access.form.ssh_username.placeholder")} />
+      </Form.Item>
+
+      <Show when={fieldAuthMethod === AUTH_METHOD_PASSWORD}>
+        <Form.Item name={[parentNamePath, "password"]} initialValue={initialValues.password} label={t("access.form.ssh_password.label")} rules={[formRule]}>
+          <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_password.placeholder")} />
+        </Form.Item>
+      </Show>
+
+      <Show when={fieldAuthMethod === AUTH_METHOD_KEY}>
+        <Form.Item name={[parentNamePath, "key"]} initialValue={initialValues.key} label={t("access.form.ssh_key.label")} rules={[formRule]}>
+          <TextFileInput allowClear autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
+        </Form.Item>
+
+        <Form.Item
+          name={[parentNamePath, "keyPassphrase"]}
+          initialValue={initialValues.keyPassphrase}
+          label={t("access.form.ssh_key_passphrase.label")}
+          rules={[formRule]}
+        >
+          <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_key_passphrase.placeholder")} />
+        </Form.Item>
+      </Show>
+
+      <Form.Item label={t("access.form.ssh_jump_servers.label")}>
+        <Form.List name={[parentNamePath, "jumpServers"]}>
+          {(fields, { add, remove, move }) => (
+            <div className="flex flex-col gap-2">
+              {fields?.length > 0 ? (
+                <Collapse
+                  items={fields.map(({ key, name: index }) => {
+                    const subfieldHost = fieldJumpServers?.[index]?.host;
+                    const subfieldPort = fieldJumpServers?.[index]?.post;
+                    const subfieldAuthMethod = fieldJumpServers?.[index]?.authMethod;
+
+                    const subfieldHostAndPort =
+                      !!subfieldHost && !!subfieldPort
+                        ? `${subfieldHost}:${subfieldPort}`
+                        : subfieldHost
+                          ? subfieldHost
+                          : subfieldPort
+                            ? `:${subfieldPort}`
+                            : "unknown";
+
+                    return {
+                      key: key,
+                      forceRender: true,
+                      label: (
+                        <span className="select-none">
+                          [{t("access.form.ssh_jump_servers.item.label")} {index + 1}] {subfieldHostAndPort}
+                        </span>
+                      ),
+                      extra: !disabled && (
+                        <div className="flex items-center justify-end">
+                          <Button
+                            icon={<IconCircleArrowUp size="1.25em" />}
+                            color="default"
+                            disabled={index === 0}
+                            size="small"
+                            type="text"
+                            onClick={(e) => {
+                              move(index, index - 1);
+                              e.stopPropagation();
+                            }}
+                          />
+                          <Button
+                            icon={<IconCircleArrowDown size="1.25em" />}
+                            color="default"
+                            disabled={index === fields.length - 1}
+                            size="small"
+                            type="text"
+                            onClick={(e) => {
+                              move(index, index + 1);
+                              e.stopPropagation();
+                            }}
+                          />
+                          <Button
+                            icon={<IconCircleMinus size="1.25em" />}
+                            color="default"
+                            size="small"
+                            type="text"
+                            onClick={(e) => {
+                              remove(index);
+                              e.stopPropagation();
+                            }}
+                          />
+                        </div>
+                      ),
+                      children: (
+                        <>
+                          <div className="flex space-x-2">
+                            <div className="w-2/3">
+                              <Form.Item name={[index, "host"]} label={t("access.form.ssh_host.label")} shouldUpdate rules={[formRule]}>
+                                <Input placeholder={t("access.form.ssh_host.placeholder")} />
+                              </Form.Item>
+                            </div>
+                            <div className="w-1/3">
+                              <Form.Item name={[index, "port"]} label={t("access.form.ssh_port.label")} shouldUpdate rules={[formRule]}>
+                                <InputNumber style={{ width: "100%" }} placeholder={t("access.form.ssh_port.placeholder")} min={1} max={65535} />
+                              </Form.Item>
+                            </div>
+                          </div>
+
+                          <Form.Item name={[index, "authMethod"]} label={t("access.form.ssh_auth_method.label")} shouldUpdate rules={[formRule]}>
+                            <Radio.Group
+                              options={[AUTH_METHOD_NONE, AUTH_METHOD_PASSWORD, AUTH_METHOD_KEY].map((s) => ({
+                                key: s,
+                                label: t(`access.form.ssh_auth_method.option.${s}.label`),
+                                value: s,
+                              }))}
+                            />
+                          </Form.Item>
+
+                          <Form.Item name={[index, "username"]} label={t("access.form.ssh_username.label")} shouldUpdate rules={[formRule]}>
+                            <Input autoComplete="new-password" placeholder={t("access.form.ssh_username.placeholder")} />
+                          </Form.Item>
+
+                          <Show when={subfieldAuthMethod === AUTH_METHOD_PASSWORD}>
+                            <Form.Item name={[index, "password"]} label={t("access.form.ssh_password.label")} shouldUpdate rules={[formRule]}>
+                              <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_password.placeholder")} />
+                            </Form.Item>
+                          </Show>
+
+                          <Show when={subfieldAuthMethod === AUTH_METHOD_KEY}>
+                            <Form.Item name={[index, "key"]} label={t("access.form.ssh_key.label")} shouldUpdate rules={[formRule]}>
+                              <TextFileInput allowClear autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
+                            </Form.Item>
+
+                            <Form.Item name={[index, "keyPassphrase"]} label={t("access.form.ssh_key_passphrase.label")} shouldUpdate rules={[formRule]}>
+                              <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_key_passphrase.placeholder")} />
+                            </Form.Item>
+                          </Show>
+                        </>
+                      ),
+                    };
+                  })}
+                />
+              ) : null}
+              <Button
+                className="w-full"
+                type="dashed"
+                icon={<IconCirclePlus size="1.25em" />}
+                onClick={() => {
+                  add();
+                  setTimeout(() => {
+                    const jumpServer = getInitialValues();
+                    delete jumpServer.jumpServers;
+                    formInst.setFieldValue([parentNamePath, "jumpServers", (fieldJumpServers?.length ?? 0) + 1 - 1], jumpServer);
+                  }, 0);
+                }}
+              >
+                {t("access.form.ssh_jump_servers.add")}
+              </Button>
+            </div>
+          )}
+        </Form.List>
+        <Form.Item name={[parentNamePath, "jumpServers"]} noStyle rules={[formRule]} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    host: "127.0.0.1",
+    port: 22,
+    authMethod: AUTH_METHOD_PASSWORD,
+    username: "root",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  const baseSchema = z
+    .object({
+      host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
+      port: z.preprocess(
+        (v) => Number(v),
+        z
+          .number()
+          .int(t("access.form.ssh_port.placeholder"))
+          .refine((v) => validPortNumber(v), t("common.errmsg.port_invalid"))
+      ),
+      authMethod: z.literal([AUTH_METHOD_NONE, AUTH_METHOD_PASSWORD, AUTH_METHOD_KEY], t("access.form.ssh_auth_method.placeholder")),
+      username: z
+        .string()
+        .min(1, t("access.form.ssh_username.placeholder"))
+        .max(64, t("common.errmsg.string_max", { max: 64 })),
+      password: z
+        .string()
+        .max(64, t("common.errmsg.string_max", { max: 64 }))
+        .nullish(),
+      key: z
+        .string()
+        .max(20480, t("common.errmsg.string_max", { max: 20480 }))
+        .nullish(),
+      keyPassphrase: z
+        .string()
+        .max(20480, t("common.errmsg.string_max", { max: 20480 }))
+        .nullish(),
+    })
+    .superRefine((values, ctx) => {
+      switch (values.authMethod) {
+        case AUTH_METHOD_PASSWORD:
+          {
+            if (!values.password?.trim()) {
+              ctx.addIssue({
+                code: "custom",
+                message: t("access.form.ssh_password.placeholder"),
+                path: ["password"],
+              });
+            }
+          }
+          break;
+
+        case AUTH_METHOD_KEY:
+          {
+            if (!values.key?.trim()) {
+              ctx.addIssue({
+                code: "custom",
+                message: t("access.form.ssh_key.placeholder"),
+                path: ["key"],
+              });
+            }
+          }
+          break;
+      }
+    });
+
+  return baseSchema.safeExtend({
+    jumpServers: z
+      .array(baseSchema, t("access.form.ssh_jump_servers.errmsg.invalid"))
+      .nullish()
+      .refine((v) => {
+        if (v == null) return true;
+        return v.every((item) => baseSchema.safeParse(item).success);
+      }, t("access.form.ssh_jump_servers.errmsg.invalid")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderSSH, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormSSLComConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderSSLCom.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormSSLComConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderSSLCom.tsx
index 33cd05b9e..036c5571a 100644
--- a/ui/src/components/access/AccessFormSSLComConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderSSLCom.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForSSLCom } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormSSLComConfigFieldValues = Nullish<AccessConfigForSSLCom>;
+const AccessConfigFormFieldsProviderSSLCom = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormSSLComConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormSSLComConfigFieldValues;
-  onValuesChange?: (values: AccessFormSSLComConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormSSLComConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "eabKid"]}
+        initialValue={initialValues.eabKid}
+        label={t("access.form.sslcom_eab_kid.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.sslcom_eab_kid.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.sslcom_eab_kid.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "eabHmacKey"]}
+        initialValue={initialValues.eabHmacKey}
+        label={t("access.form.sslcom_eab_hmac_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.sslcom_eab_hmac_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.sslcom_eab_hmac_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     eabKid: "",
     eabHmacKey: "",
   };
 };
 
-const AccessFormSSLComConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSSLComConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     eabKid: z
       .string()
       .min(1, t("access.form.sslcom_eab_kid.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormSSLComConfig = ({ form: formInst, formName, disabled, initialVal
       .min(1, t("access.form.sslcom_eab_hmac_key.placeholder"))
       .max(256, t("common.errmsg.string_max", { max: 256 })),
   });
-  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="eabKid"
-        label={t("access.form.sslcom_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.sslcom_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.sslcom_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.sslcom_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.sslcom_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.sslcom_eab_hmac_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormSSLComConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderSSLCom, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderSafeLine.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderSafeLine.tsx
new file mode 100644
index 000000000..815b2f63b
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderSafeLine.tsx
@@ -0,0 +1,79 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderSafeLine = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.safeline_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.safeline_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiToken"]}
+        initialValue={initialValues.apiToken}
+        label={t("access.form.safeline_api_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.safeline_api_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.safeline_api_token.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:9443/",
+    apiToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiToken: z
+      .string()
+      .min(1, t("access.form.safeline_api_token.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderSafeLine, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormSlackBotConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderSlackBot.tsx
similarity index 50%
rename from ui/src/components/access/AccessFormSlackBotConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderSlackBot.tsx
index 1de93876a..142e9d314 100644
--- a/ui/src/components/access/AccessFormSlackBotConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderSlackBot.tsx
@@ -1,53 +1,25 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForSlackBot } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormSlackBotConfigFieldValues = Nullish<AccessConfigForSlackBot>;
-
-export interface AccessFormSlackBotConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormSlackBotConfigFieldValues;
-  onValuesChange?: (values: AccessFormSlackBotConfigFieldValues) => void;
-}
-
-const initFormModel = (): AccessFormSlackBotConfigFieldValues => {
-  return {
-    botToken: "",
-  };
-};
-
-const AccessFormSlackBotConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSlackBotConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderSlackBot = () => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    botToken: z
-      .string()
-      .min(1, t("access.form.slackbot_token.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-    channelId: z.string().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
-
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values);
-  };
+  const initialValues = getInitialValues();
 
   return (
-    <Form
-      form={formInst}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    >
+    <>
       <Form.Item
-        name="botToken"
+        name={[parentNamePath, "botToken"]}
+        initialValue={initialValues.botToken}
         label={t("access.form.slackbot_token.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.slackbot_token.tooltip") }}></span>}
@@ -56,7 +28,8 @@ const AccessFormSlackBotConfig = ({ form: formInst, formName, disabled, initialV
       </Form.Item>
 
       <Form.Item
-        name="channelId"
+        name={[parentNamePath, "channelId"]}
+        initialValue={initialValues.channelId}
         label={t("access.form.slackbot_channel_id.label")}
         extra={t("access.form.slackbot_channel_id.help")}
         rules={[formRule]}
@@ -64,8 +37,31 @@ const AccessFormSlackBotConfig = ({ form: formInst, formName, disabled, initialV
       >
         <Input allowClear placeholder={t("access.form.slackbot_channel_id.placeholder")} />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormSlackBotConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    botToken: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    botToken: z
+      .string()
+      .min(1, t("access.form.slackbot_token.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+    channelId: z.string().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderSlackBot, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderSpaceship.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderSpaceship.tsx
new file mode 100644
index 000000000..2653c921a
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderSpaceship.tsx
@@ -0,0 +1,64 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderSpaceship = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.spaceship_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.spaceship_api_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.spaceship_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiSecret"]}
+        initialValue={initialValues.apiSecret}
+        label={t("access.form.spaceship_api_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.spaceship_api_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.spaceship_api_secret.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    apiKey: "",
+    apiSecret: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    apiKey: z.string().nonempty(t("access.form.spaceship_api_key.placeholder")),
+    apiSecret: z.string().nonempty(t("access.form.spaceship_api_secret.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderSpaceship, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormTelegramBotConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderTelegramBot.tsx
similarity index 54%
rename from ui/src/components/access/AccessFormTelegramBotConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderTelegramBot.tsx
index 34ea894f8..1f1f4aa3e 100644
--- a/ui/src/components/access/AccessFormTelegramBotConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderTelegramBot.tsx
@@ -1,30 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForTelegramBot } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormTelegramBotConfigFieldValues = Nullish<AccessConfigForTelegramBot>;
+const AccessConfigFormFieldsProviderTelegramBot = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormTelegramBotConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormTelegramBotConfigFieldValues;
-  onValuesChange?: (values: AccessFormTelegramBotConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormTelegramBotConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "botToken"]}
+        initialValue={initialValues.botToken}
+        label={t("access.form.telegrambot_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.telegrambot_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.telegrambot_token.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "chatId"]}
+        initialValue={initialValues.chatId}
+        label={t("access.form.telegrambot_chat_id.label")}
+        extra={t("access.form.telegrambot_chat_id.help")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.telegrambot_chat_id.tooltip") }}></span>}
+      >
+        <Input allowClear placeholder={t("access.form.telegrambot_chat_id.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     botToken: "",
   };
 };
 
-const AccessFormTelegramBotConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormTelegramBotConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     botToken: z
       .string()
       .min(1, t("access.form.telegrambot_token.placeholder"))
@@ -38,41 +64,11 @@ const AccessFormTelegramBotConfig = ({ form: formInst, formName, disabled, initi
       )
       .nullish(),
   });
-  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="botToken"
-        label={t("access.form.telegrambot_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.telegrambot_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.telegrambot_token.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="chatId"
-        label={t("access.form.telegrambot_chat_id.label")}
-        extra={t("access.form.telegrambot_chat_id.help")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.telegrambot_chat_id.tooltip") }}></span>}
-      >
-        <Input allowClear placeholder={t("access.form.telegrambot_chat_id.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormTelegramBotConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderTelegramBot, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormTencentCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderTencentCloud.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormTencentCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderTencentCloud.tsx
index e876c1c62..f57e93487 100644
--- a/ui/src/components/access/AccessFormTencentCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderTencentCloud.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForTencentCloud } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormTencentCloudConfigFieldValues = Nullish<AccessConfigForTencentCloud>;
+const AccessConfigFormFieldsProviderTencentCloud = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormTencentCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormTencentCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormTencentCloudConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormTencentCloudConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "secretId"]}
+        initialValue={initialValues.secretId}
+        label={t("access.form.tencentcloud_secret_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.tencentcloud_secret_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.tencentcloud_secret_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretKey"]}
+        initialValue={initialValues.secretKey}
+        label={t("access.form.tencentcloud_secret_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.tencentcloud_secret_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.tencentcloud_secret_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     secretId: "",
     secretKey: "",
   };
 };
 
-const AccessFormTencentCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormTencentCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     secretId: z
       .string()
       .min(1, t("access.form.tencentcloud_secret_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormTencentCloudConfig = ({ form: formInst, formName, disabled, init
       .min(1, t("access.form.tencentcloud_secret_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="secretId"
-        label={t("access.form.tencentcloud_secret_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.tencentcloud_secret_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.tencentcloud_secret_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretKey"
-        label={t("access.form.tencentcloud_secret_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.tencentcloud_secret_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.tencentcloud_secret_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormTencentCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderTencentCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormUCloudConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderUCloud.tsx
similarity index 60%
rename from ui/src/components/access/AccessFormUCloudConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderUCloud.tsx
index 4604c5306..3b506bdb7 100644
--- a/ui/src/components/access/AccessFormUCloudConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderUCloud.tsx
@@ -1,31 +1,66 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForUCloud } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormUCloudConfigFieldValues = Nullish<AccessConfigForUCloud>;
+const AccessConfigFormFieldsProviderUCloud = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormUCloudConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormUCloudConfigFieldValues;
-  onValuesChange?: (values: AccessFormUCloudConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormUCloudConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "privateKey"]}
+        initialValue={initialValues.privateKey}
+        label={t("access.form.ucloud_private_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_private_key.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.ucloud_private_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "publicKey"]}
+        initialValue={initialValues.publicKey}
+        label={t("access.form.ucloud_public_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_public_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.ucloud_public_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "projectId"]}
+        initialValue={initialValues.projectId}
+        label={t("access.form.ucloud_project_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_project_id.tooltip") }}></span>}
+      >
+        <Input allowClear autoComplete="new-password" placeholder={t("access.form.ucloud_project_id.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     privateKey: "",
     publicKey: "",
   };
 };
 
-const AccessFormUCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormUCloudConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     privateKey: z
       .string()
       .min(1, t("access.form.ucloud_private_key.placeholder"))
@@ -39,49 +74,11 @@ const AccessFormUCloudConfig = ({ form: formInst, formName, disabled, initialVal
       .max(64, t("common.errmsg.string_max", { max: 64 }))
       .nullish(),
   });
-  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="privateKey"
-        label={t("access.form.ucloud_private_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_private_key.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.ucloud_private_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="publicKey"
-        label={t("access.form.ucloud_public_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_public_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.ucloud_public_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="projectId"
-        label={t("access.form.ucloud_project_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_project_id.tooltip") }}></span>}
-      >
-        <Input allowClear autoComplete="new-password" placeholder={t("access.form.ucloud_project_id.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormUCloudConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderUCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderUniCloud.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderUniCloud.tsx
new file mode 100644
index 000000000..56953c3c8
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderUniCloud.tsx
@@ -0,0 +1,64 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderUniCloud = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "username"]}
+        initialValue={initialValues.username}
+        label={t("access.form.unicloud_username.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.unicloud_username.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.unicloud_username.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "password"]}
+        initialValue={initialValues.password}
+        label={t("access.form.unicloud_password.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.unicloud_password.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.unicloud_password.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    username: "",
+    password: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    username: z.string().nonempty(t("access.form.unicloud_username.placeholder")),
+    password: z.string().nonempty(t("access.form.unicloud_password.placeholder")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderUniCloud, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormUpyunConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderUpyun.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormUpyunConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderUpyun.tsx
index 10aad03f6..11c18ff45 100644
--- a/ui/src/components/access/AccessFormUpyunConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderUpyun.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForUpyun } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormUpyunConfigFieldValues = Nullish<AccessConfigForUpyun>;
+const AccessConfigFormFieldsProviderUpyun = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormUpyunConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormUpyunConfigFieldValues;
-  onValuesChange?: (values: AccessFormUpyunConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormUpyunConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "username"]}
+        initialValue={initialValues.username}
+        label={t("access.form.upyun_username.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.upyun_username.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.upyun_username.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "password"]}
+        initialValue={initialValues.password}
+        label={t("access.form.upyun_password.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.upyun_password.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.upyun_password.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     username: "",
     password: "",
   };
 };
 
-const AccessFormUpyunConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormUpyunConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     username: z
       .string()
       .min(1, t("access.form.upyun_username.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormUpyunConfig = ({ form: formInst, formName, disabled, initialValu
       .min(1, t("access.form.upyun_password.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="username"
-        label={t("access.form.upyun_username.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.upyun_username.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.upyun_username.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="password"
-        label={t("access.form.upyun_password.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.upyun_password.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.upyun_password.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormUpyunConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderUpyun, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormVercelConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderVercel.tsx
similarity index 51%
rename from ui/src/components/access/AccessFormVercelConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderVercel.tsx
index d982d74e4..4963cfdf3 100644
--- a/ui/src/components/access/AccessFormVercelConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderVercel.tsx
@@ -1,30 +1,55 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForVercel } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormVercelConfigFieldValues = Nullish<AccessConfigForVercel>;
+const AccessConfigFormFieldsProviderVercel = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormVercelConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormVercelConfigFieldValues;
-  onValuesChange?: (values: AccessFormVercelConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormVercelConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "apiAccessToken"]}
+        initialValue={initialValues.apiAccessToken}
+        label={t("access.form.vercel_api_access_token.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.vercel_api_access_token.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.vercel_api_access_token.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "teamId"]}
+        initialValue={initialValues.teamId}
+        label={t("access.form.vercel_team_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.vercel_team_id.tooltip") }}></span>}
+      >
+        <Input allowClear placeholder={t("access.form.vercel_team_id.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     apiAccessToken: "",
   };
 };
 
-const AccessFormVercelConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormVercelConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     apiAccessToken: z
       .string()
       .min(1, t("access.form.vercel_api_access_token.placeholder"))
@@ -34,40 +59,11 @@ const AccessFormVercelConfig = ({ form: formInst, formName, disabled, initialVal
       .max(256, t("common.errmsg.string_max", { max: 256 }))
       .nullish(),
   });
-  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="apiAccessToken"
-        label={t("access.form.vercel_api_access_token.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.vercel_api_access_token.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.vercel_api_access_token.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="teamId"
-        label={t("access.form.vercel_team_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.vercel_team_id.tooltip") }}></span>}
-      >
-        <Input allowClear placeholder={t("access.form.vercel_team_id.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormVercelConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderVercel, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormVolcEngineConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderVolcEngine.tsx
similarity index 53%
rename from ui/src/components/access/AccessFormVolcEngineConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderVolcEngine.tsx
index c495420bb..a8330ff62 100644
--- a/ui/src/components/access/AccessFormVolcEngineConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderVolcEngine.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForVolcEngine } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormVolcEngineConfigFieldValues = Nullish<AccessConfigForVolcEngine>;
+const AccessConfigFormFieldsProviderVolcEngine = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormVolcEngineConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormVolcEngineConfigFieldValues;
-  onValuesChange?: (values: AccessFormVolcEngineConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormVolcEngineConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.volcengine_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.volcengine_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.volcengine_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "secretAccessKey"]}
+        initialValue={initialValues.secretAccessKey}
+        label={t("access.form.volcengine_secret_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.volcengine_secret_access_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.volcengine_secret_access_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessFormVolcEngineConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormVolcEngineConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.volcengine_access_key_id.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormVolcEngineConfig = ({ form: formInst, formName, disabled, initia
       .min(1, t("access.form.volcengine_secret_access_key.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="accessKeyId"
-        label={t("access.form.volcengine_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.volcengine_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.volcengine_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="secretAccessKey"
-        label={t("access.form.volcengine_secret_access_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.volcengine_secret_access_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.volcengine_secret_access_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormVolcEngineConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderVolcEngine, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormWangsuConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderWangsu.tsx
similarity index 60%
rename from ui/src/components/access/AccessFormWangsuConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderWangsu.tsx
index 23b5fb142..803fb3c44 100644
--- a/ui/src/components/access/AccessFormWangsuConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderWangsu.tsx
@@ -1,21 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForWangsu } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormWangsuConfigFieldValues = Nullish<AccessConfigForWangsu>;
+const AccessConfigFormFieldsProviderWangsu = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormWangsuConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormWangsuConfigFieldValues;
-  onValuesChange?: (values: AccessFormWangsuConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormWangsuConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "accessKeyId"]}
+        initialValue={initialValues.accessKeyId}
+        label={t("access.form.wangsu_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wangsu_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.wangsu_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "accessKeySecret"]}
+        initialValue={initialValues.accessKeySecret}
+        label={t("access.form.wangsu_access_key_secret.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wangsu_access_key_secret.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.wangsu_access_key_secret.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.wangsu_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wangsu_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.wangsu_api_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     accessKeyId: "",
     accessKeySecret: "",
@@ -23,10 +58,10 @@ const initFormModel = (): AccessFormWangsuConfigFieldValues => {
   };
 };
 
-const AccessFormWangsuConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormWangsuConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     accessKeyId: z
       .string()
       .min(1, t("access.form.wangsu_access_key_id.placeholder"))
@@ -40,49 +75,11 @@ const AccessFormWangsuConfig = ({ form: formInst, formName, disabled, initialVal
       .min(1, t("access.form.wangsu_api_key.placeholder"))
       .max(256, t("common.errmsg.string_max", { max: 256 })),
   });
-  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="accessKeyId"
-        label={t("access.form.wangsu_access_key_id.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wangsu_access_key_id.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.wangsu_access_key_id.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="accessKeySecret"
-        label={t("access.form.wangsu_access_key_secret.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wangsu_access_key_secret.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.wangsu_access_key_secret.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiKey"
-        label={t("access.form.wangsu_api_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wangsu_api_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.wangsu_api_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormWangsuConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderWangsu, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderWeComBot.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderWeComBot.tsx
new file mode 100644
index 000000000..bea9d04d5
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderWeComBot.tsx
@@ -0,0 +1,52 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProviderWeComBot = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "webhookUrl"]}
+        initialValue={initialValues.webhookUrl}
+        label={t("access.form.wecombot_webhook_url.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.wecombot_webhook_url.tooltip") }}></span>}
+      >
+        <Input placeholder={t("access.form.wecombot_webhook_url.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    webhookUrl: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    webhookUrl: z.url(t("common.errmsg.url_invalid")),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderWeComBot, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormWebhookConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderWebhook.tsx
similarity index 80%
rename from ui/src/components/access/AccessFormWebhookConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderWebhook.tsx
index 7661d95b6..10bda9eee 100644
--- a/ui/src/components/access/AccessFormWebhookConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderWebhook.tsx
@@ -1,102 +1,29 @@
-import { useTranslation } from "react-i18next";
+import { getI18n, useTranslation } from "react-i18next";
 import { IconChevronDown } from "@tabler/icons-react";
-import { Button, Dropdown, Form, type FormInstance, Input, Select, Switch } from "antd";
+import { Button, Dropdown, Form, Input, Select, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import CodeInput from "@/components/CodeInput";
 import Show from "@/components/Show";
 import Tips from "@/components/Tips";
-import { type AccessConfigForWebhook } from "@/domain/access";
 
-type AccessFormWebhookConfigFieldValues = Nullish<AccessConfigForWebhook>;
+import { useFormNestedFieldsContext } from "./_context";
 
-export interface AccessFormWebhookConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormWebhookConfigFieldValues;
+export interface AccessConfigFormFieldsWebhookProps {
   usage?: "deployment" | "notification" | "none";
-  onValuesChange?: (values: AccessFormWebhookConfigFieldValues) => void;
 }
 
-const initFormModel = (): AccessFormWebhookConfigFieldValues => {
-  return {
-    url: "",
-    method: "POST",
-    headers: "Content-Type: application/json",
-    allowInsecureConnections: false,
-    dataForDeployment: JSON.stringify(
-      {
-        name: "${DOMAINS}",
-        cert: "${CERTIFICATE}",
-        privkey: "${PRIVATE_KEY}",
-      },
-      null,
-      2
-    ),
-    dataForNotification: JSON.stringify(
-      {
-        subject: "${SUBJECT}",
-        message: "${MESSAGE}",
-      },
-      null,
-      2
-    ),
-  };
-};
-
-const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, usage, onValuesChange }: AccessFormWebhookConfigProps) => {
-  const { t } = useTranslation();
+const AccessConfigFormFieldsProviderWebhook = ({ usage = "none" }: AccessConfigFormFieldsWebhookProps) => {
+  const { i18n, t } = useTranslation();
 
+  const { parentNamePath } = useFormNestedFieldsContext();
   const formSchema = z.object({
-    url: z.url(t("common.errmsg.url_invalid")),
-    method: z.literal(["GET", "POST", "PUT", "PATCH", "DELETE"], t("access.form.webhook_method.placeholder")),
-    headers: z
-      .string()
-      .nullish()
-      .refine((v) => {
-        if (!v) return true;
-
-        const lines = v.split(/\r?\n/);
-        for (const line of lines) {
-          if (line.split(":").length < 2) {
-            return false;
-          }
-        }
-        return true;
-      }, t("access.form.webhook_headers.errmsg.invalid")),
-    dataForDeployment: z
-      .string()
-      .nullish()
-      .refine((v) => {
-        if (usage && usage !== "deployment") return true;
-        if (!v) return true;
-
-        try {
-          const obj = JSON.parse(v);
-          return typeof obj === "object" && !Array.isArray(obj);
-        } catch {
-          return false;
-        }
-      }, t("access.form.webhook_data.errmsg.json_invalid")),
-    dataForNotification: z
-      .string()
-      .nullish()
-      .refine((v) => {
-        if (usage && usage !== "notification") return true;
-        if (!v) return true;
-
-        try {
-          const obj = JSON.parse(v);
-          return typeof obj === "object" && !Array.isArray(obj);
-        } catch {
-          return false;
-        }
-      }, t("access.form.webhook_data.errmsg.json_invalid")),
-    allowInsecureConnections: z.boolean().nullish(),
+    [parentNamePath]: getSchema({ i18n }),
   });
   const formRule = createSchemaFieldRule(formSchema);
+  const formInst = Form.useFormInstance();
+  const initialValues = getInitialValues();
 
   const handleWebhookHeadersBlur = () => {
     let value = formInst.getFieldValue("headers");
@@ -126,7 +53,7 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
   };
 
   const handlePresetDataForDeploymentClick = () => {
-    formInst.setFieldValue("dataForDeployment", initFormModel().dataForDeployment);
+    formInst.setFieldValue("dataForDeployment", getInitialValues().dataForDeployment);
   };
 
   const handlePresetDataForNotificationClick = (key: string) => {
@@ -260,29 +187,18 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       default:
         formInst.setFieldValue("method", "POST");
         formInst.setFieldValue("headers", "Content-Type: application/json");
-        formInst.setFieldValue("dataForNotification", initFormModel().dataForNotification);
+        formInst.setFieldValue("dataForNotification", getInitialValues().dataForNotification);
         break;
     }
   };
 
-  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="url" label={t("access.form.webhook_url.label")} rules={[formRule]}>
+    <>
+      <Form.Item name={[parentNamePath, "url"]} initialValue={initialValues.url} label={t("access.form.webhook_url.label")} rules={[formRule]}>
         <Input placeholder={t("access.form.webhook_url.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="method" label={t("access.form.webhook_method.label")} rules={[formRule]}>
+      <Form.Item name={[parentNamePath, "method"]} initialValue={initialValues.method} label={t("access.form.webhook_method.label")} rules={[formRule]}>
         <Select
           options={["GET", "POST", "PUT", "PATCH", "DELETE"].map((s) => ({ label: s, value: s }))}
           placeholder={t("access.form.webhook_method.placeholder")}
@@ -290,7 +206,8 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       </Form.Item>
 
       <Form.Item
-        name="headers"
+        name={[parentNamePath, "headers"]}
+        initialValue={initialValues.headers}
         label={t("access.form.webhook_headers.label")}
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.webhook_headers.tooltip") }}></span>}
@@ -307,11 +224,25 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       <Show when={!usage || usage === "deployment"}>
         <Form.Item className="relative" label={t("access.form.webhook_data.label")} extra={t("access.form.webhook_data.help")}>
           <div className="absolute -top-[6px] right-0 -translate-y-full">
-            <Button size="small" type="link" onClick={handlePresetDataForDeploymentClick}>
-              {t("access.form.webhook_preset_data.button")}
-            </Button>
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    key: "certimate",
+                    label: "Certimate",
+                    onClick: handlePresetDataForDeploymentClick,
+                  },
+                ],
+              }}
+              trigger={["click"]}
+            >
+              <Button size="small" type="link">
+                {t("access.form.webhook_preset_data.button")}
+                <IconChevronDown size="1.25em" />
+              </Button>
+            </Dropdown>
           </div>
-          <Form.Item name="dataForDeployment" noStyle rules={[formRule]}>
+          <Form.Item name={[parentNamePath, "dataForDeployment"]} initialValue={initialValues.dataForDeployment} noStyle rules={[formRule]}>
             <CodeInput
               height="auto"
               minHeight="64px"
@@ -347,7 +278,7 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
               </Button>
             </Dropdown>
           </div>
-          <Form.Item name="dataForNotification" noStyle rules={[formRule]}>
+          <Form.Item name={[parentNamePath, "dataForNotification"]} initialValue={initialValues.dataForNotification} noStyle rules={[formRule]}>
             <CodeInput
               height="auto"
               minHeight="64px"
@@ -364,14 +295,100 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
         </Form.Item>
       </Show>
 
-      <Form.Item name="allowInsecureConnections" label={t("access.form.common_allow_insecure_conns.label")} rules={[formRule]}>
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
         <Switch
           checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
           unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
         />
       </Form.Item>
-    </Form>
+    </>
   );
 };
 
-export default AccessFormWebhookConfig;
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    url: "",
+    method: "POST",
+    headers: "Content-Type: application/json",
+    allowInsecureConnections: false,
+    dataForDeployment: JSON.stringify(
+      {
+        name: "${DOMAINS}",
+        cert: "${CERTIFICATE}",
+        privkey: "${PRIVATE_KEY}",
+      },
+      null,
+      2
+    ),
+    dataForNotification: JSON.stringify(
+      {
+        subject: "${SUBJECT}",
+        message: "${MESSAGE}",
+      },
+      null,
+      2
+    ),
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    url: z.url(t("common.errmsg.url_invalid")),
+    method: z.literal(["GET", "POST", "PUT", "PATCH", "DELETE"], t("access.form.webhook_method.placeholder")),
+    headers: z
+      .string()
+      .nullish()
+      .refine((v) => {
+        if (!v) return true;
+
+        const lines = v.split(/\r?\n/);
+        for (const line of lines) {
+          if (line.split(":").length < 2) {
+            return false;
+          }
+        }
+        return true;
+      }, t("access.form.webhook_headers.errmsg.invalid")),
+    dataForDeployment: z
+      .string()
+      .nullish()
+      .refine((v) => {
+        if (!v) return true;
+
+        try {
+          const obj = JSON.parse(v);
+          return typeof obj === "object" && !Array.isArray(obj);
+        } catch {
+          return false;
+        }
+      }, t("access.form.webhook_data.errmsg.json_invalid")),
+    dataForNotification: z
+      .string()
+      .nullish()
+      .refine((v) => {
+        if (!v) return true;
+
+        try {
+          const obj = JSON.parse(v);
+          return typeof obj === "object" && !Array.isArray(obj);
+        } catch {
+          return false;
+        }
+      }, t("access.form.webhook_data.errmsg.json_invalid")),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProviderWebhook, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormWestcnConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderWestcn.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormWestcnConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderWestcn.tsx
index a9136bb34..4b17fcc2b 100644
--- a/ui/src/components/access/AccessFormWestcnConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderWestcn.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForWestcn } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormWestcnConfigFieldValues = Nullish<AccessConfigForWestcn>;
+const AccessConfigFormFieldsProviderWestcn = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormWestcnConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormWestcnConfigFieldValues;
-  onValuesChange?: (values: AccessFormWestcnConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormWestcnConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "username"]}
+        initialValue={initialValues.username}
+        label={t("access.form.westcn_username.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.westcn_username.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.westcn_username.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiPassword"]}
+        initialValue={initialValues.apiPassword}
+        label={t("access.form.westcn_api_password.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.westcn_api_password.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.westcn_api_password.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     username: "",
     apiPassword: "",
   };
 };
 
-const AccessFormWestcnConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormWestcnConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     username: z
       .string()
       .min(1, t("access.form.westcn_username.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormWestcnConfig = ({ form: formInst, formName, disabled, initialVal
       .min(1, t("access.form.westcn_api_password.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
-  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="username"
-        label={t("access.form.westcn_username.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.westcn_username.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.westcn_username.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="apiPassword"
-        label={t("access.form.westcn_api_password.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.westcn_api_password.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.westcn_api_password.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormWestcnConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderWestcn, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/AccessFormZeroSSLConfig.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderZeroSSL.tsx
similarity index 52%
rename from ui/src/components/access/AccessFormZeroSSLConfig.tsx
rename to ui/src/components/access/forms/AccessConfigFieldsProviderZeroSSL.tsx
index 37e3b7b61..5d8b75fef 100644
--- a/ui/src/components/access/AccessFormZeroSSLConfig.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderZeroSSL.tsx
@@ -1,31 +1,56 @@
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import { type AccessConfigForZeroSSL } from "@/domain/access";
+import { useFormNestedFieldsContext } from "./_context";
 
-type AccessFormZeroSSLConfigFieldValues = Nullish<AccessConfigForZeroSSL>;
+const AccessConfigFormFieldsProviderZeroSSL = () => {
+  const { i18n, t } = useTranslation();
 
-export interface AccessFormZeroSSLConfigProps {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessFormZeroSSLConfigFieldValues;
-  onValuesChange?: (values: AccessFormZeroSSLConfigFieldValues) => void;
-}
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
 
-const initFormModel = (): AccessFormZeroSSLConfigFieldValues => {
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "eabKid"]}
+        initialValue={initialValues.eabKid}
+        label={t("access.form.zerossl_eab_kid.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_kid.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.zerossl_eab_kid.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "eabHmacKey"]}
+        initialValue={initialValues.eabHmacKey}
+        label={t("access.form.zerossl_eab_hmac_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_hmac_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.zerossl_eab_hmac_key.placeholder")} />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
   return {
     eabKid: "",
     eabHmacKey: "",
   };
 };
 
-const AccessFormZeroSSLConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormZeroSSLConfigProps) => {
-  const { t } = useTranslation();
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
 
-  const formSchema = z.object({
+  return z.object({
     eabKid: z
       .string()
       .min(1, t("access.form.zerossl_eab_kid.placeholder"))
@@ -35,40 +60,11 @@ const AccessFormZeroSSLConfig = ({ form: formInst, formName, disabled, initialVa
       .min(1, t("access.form.zerossl_eab_hmac_key.placeholder"))
       .max(256, t("common.errmsg.string_max", { max: 256 })),
   });
-  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="eabKid"
-        label={t("access.form.zerossl_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.zerossl_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.zerossl_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.zerossl_eab_hmac_key.placeholder")} />
-      </Form.Item>
-    </Form>
-  );
 };
 
-export default AccessFormZeroSSLConfig;
+const _default = Object.assign(AccessConfigFormFieldsProviderZeroSSL, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/AccessConfigFormProvider1Panel.tsx b/ui/src/components/access/forms/AccessConfigFormProvider1Panel.tsx
new file mode 100644
index 000000000..c2e79e451
--- /dev/null
+++ b/ui/src/components/access/forms/AccessConfigFormProvider1Panel.tsx
@@ -0,0 +1,90 @@
+import { getI18n, useTranslation } from "react-i18next";
+import { Form, Input, Select, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { useFormNestedFieldsContext } from "./_context";
+
+const AccessConfigFormFieldsProvider1Panel = () => {
+  const { i18n, t } = useTranslation();
+
+  const { parentNamePath } = useFormNestedFieldsContext();
+  const formSchema = z.object({
+    [parentNamePath]: getSchema({ i18n }),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const initialValues = getInitialValues();
+
+  return (
+    <>
+      <Form.Item
+        name={[parentNamePath, "serverUrl"]}
+        initialValue={initialValues.serverUrl}
+        label={t("access.form.1panel_server_url.label")}
+        rules={[formRule]}
+      >
+        <Input placeholder={t("access.form.1panel_server_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiVersion"]}
+        initialValue={initialValues.apiVersion}
+        label={t("access.form.1panel_api_version.label")}
+        rules={[formRule]}
+      >
+        <Select options={["v1", "v2"].map((s) => ({ label: s, value: s }))} placeholder={t("access.form.1panel_api_version.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "apiKey"]}
+        initialValue={initialValues.apiKey}
+        label={t("access.form.1panel_api_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.1panel_api_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.1panel_api_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name={[parentNamePath, "allowInsecureConnections"]}
+        initialValue={initialValues.allowInsecureConnections}
+        label={t("access.form.common_allow_insecure_conns.label")}
+        rules={[formRule]}
+      >
+        <Switch
+          checkedChildren={t("access.form.common_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.common_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </>
+  );
+};
+
+const getInitialValues = (): Nullish<z.infer<ReturnType<typeof getSchema>>> => {
+  return {
+    serverUrl: "http://<your-host-addr>:20410/",
+    apiVersion: "v1",
+    apiKey: "",
+  };
+};
+
+const getSchema = ({ i18n = getI18n() }: { i18n: ReturnType<typeof getI18n> }) => {
+  const { t } = i18n;
+
+  return z.object({
+    serverUrl: z.url(t("common.errmsg.url_invalid")),
+    apiVersion: z.string().nonempty(t("access.form.1panel_api_version.placeholder")),
+    apiKey: z
+      .string()
+      .min(1, t("access.form.1panel_api_key.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+};
+
+const _default = Object.assign(AccessConfigFormFieldsProvider1Panel, {
+  getInitialValues,
+  getSchema,
+});
+
+export default _default;
diff --git a/ui/src/components/access/forms/_context.ts b/ui/src/components/access/forms/_context.ts
new file mode 100644
index 000000000..7a8081ac2
--- /dev/null
+++ b/ui/src/components/access/forms/_context.ts
@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+
+// #region FormNestedFieldsContext
+export type FormNestedFieldsContextType = {
+  parentNamePath: string;
+};
+
+export const FormNestedFieldsContext = createContext<FormNestedFieldsContextType>({
+  parentNamePath: "",
+});
+
+export const FormNestedFieldsContextProvider = FormNestedFieldsContext.Provider;
+
+export const useFormNestedFieldsContext = () => {
+  const context = useContext(FormNestedFieldsContext);
+  if (!context) {
+    throw new Error("`FormNestedFieldsContext` must be used within a `FormNestedFieldsContextProvider`");
+  }
+  return context;
+};
+// #endregion
diff --git a/ui/src/components/access/forms/_hooks.ts b/ui/src/components/access/forms/_hooks.ts
new file mode 100644
index 000000000..a90ad564b
--- /dev/null
+++ b/ui/src/components/access/forms/_hooks.ts
@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+
+import { ACCESS_USAGES, type AccessProvider } from "@/domain/provider";
+
+export const useProviderFilterByUsage = (usage?: "dns" | "hosting" | "dns-hosting" | "ca" | "notification") => {
+  return useMemo(() => {
+    if (usage == null) return;
+
+    switch (usage) {
+      case "dns":
+        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.DNS);
+      case "hosting":
+        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.HOSTING);
+      case "dns-hosting":
+        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.DNS) || option.usages.includes(ACCESS_USAGES.HOSTING);
+      case "ca":
+        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.CA);
+      case "notification":
+        return (_: string, option: AccessProvider) => option.usages.includes(ACCESS_USAGES.NOTIFICATION);
+      default:
+        console.warn(`[certimate] unsupported provider usage: '${usage}'`);
+    }
+  }, [usage]);
+};
diff --git a/ui/src/components/provider/AccessProviderPicker.tsx b/ui/src/components/provider/AccessProviderPicker.tsx
index b3508d372..a4d1c109f 100644
--- a/ui/src/components/provider/AccessProviderPicker.tsx
+++ b/ui/src/components/provider/AccessProviderPicker.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useSize } from "ahooks";
+import { useMount, useSize } from "ahooks";
 import { Avatar, Card, Empty, Input, type InputRef, Tag, Tooltip, Typography } from "antd";
 
 import Show from "@/components/Show";
@@ -26,11 +26,11 @@ const AccessProviderPicker = ({ className, style, autoFocus, gap = "middle", pla
 
   const [keyword, setKeyword] = useState<string>();
   const keywordInputRef = useRef<InputRef>(null);
-  useEffect(() => {
+  useMount(() => {
     if (autoFocus) {
       setTimeout(() => keywordInputRef.current?.focus(), 1);
     }
-  }, []);
+  });
 
   const showOptionTagForDNS = useMemo(() => {
     return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.DNS] : !!showOptionTags;
diff --git a/ui/src/components/provider/DeploymentProviderPicker.tsx b/ui/src/components/provider/DeploymentProviderPicker.tsx
index ae2e5122e..236b50002 100644
--- a/ui/src/components/provider/DeploymentProviderPicker.tsx
+++ b/ui/src/components/provider/DeploymentProviderPicker.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useAsyncEffect, useSize } from "ahooks";
+import { useAsyncEffect, useMount, useSize } from "ahooks";
 import { Avatar, Card, Checkbox, Empty, Flex, Input, type InputRef, Tabs, Tooltip, Typography } from "antd";
 
 import Show from "@/components/Show";
@@ -34,11 +34,11 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, gap = "middle",
 
   const [keyword, setKeyword] = useState<string>();
   const keywordInputRef = useRef<InputRef>(null);
-  useEffect(() => {
+  useMount(() => {
     if (autoFocus) {
       setTimeout(() => keywordInputRef.current?.focus(), 1);
     }
-  }, []);
+  });
 
   const providers = useMemo(() => {
     return Array.from(deploymentProvidersMap.values())
diff --git a/ui/src/components/workflow/designer/Designer.tsx b/ui/src/components/workflow/designer/Designer.tsx
index a93b1710b..52b7483ab 100644
--- a/ui/src/components/workflow/designer/Designer.tsx
+++ b/ui/src/components/workflow/designer/Designer.tsx
@@ -15,7 +15,7 @@ import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin";
 import "@flowgram.ai/fixed-layout-editor/index.css";
 import { theme } from "antd";
 
-import { DegisnerContextProvider } from "./DesignerContext";
+import { DegisnerContextProvider } from "./_context";
 import { getAllElements } from "./elements";
 import NodeRender from "./NodeRender";
 import { getAllNodeRegistries } from "./nodes";
diff --git a/ui/src/components/workflow/designer/NodeRender.tsx b/ui/src/components/workflow/designer/NodeRender.tsx
index 9969aa03b..a6df559f2 100644
--- a/ui/src/components/workflow/designer/NodeRender.tsx
+++ b/ui/src/components/workflow/designer/NodeRender.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { type NodeRenderProps, useClientContext, useNodeRender, useRefresh } from "@flowgram.ai/fixed-layout-editor";
 
-import { useDesignerContext } from "./DesignerContext";
+import { useDesignerContext } from "./_context";
 import { NodeRenderContextProvider } from "./NodeRenderContext";
 import { type NodeRegistry } from "./nodes/typings";
 
diff --git a/ui/src/components/workflow/designer/DesignerContext.ts b/ui/src/components/workflow/designer/_context.ts
similarity index 100%
rename from ui/src/components/workflow/designer/DesignerContext.ts
rename to ui/src/components/workflow/designer/_context.ts
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderAWSRoute53.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderAWSRoute53.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderAWSRoute53.tsx
rename to ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderAWSRoute53.tsx
index a55a80c3c..10b5a3ff4 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderAWSRoute53.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderAWSRoute53.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizApplyNodeConfigFormProviderAWSRoute53 = () => {
+const BizApplyNodeConfigFieldsProviderAWSRoute53 = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -56,7 +56,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizApplyNodeConfigFormProviderAWSRoute53, {
+const _default = Object.assign(BizApplyNodeConfigFieldsProviderAWSRoute53, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderAliyunESA.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderAliyunESA.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderAliyunESA.tsx
rename to ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderAliyunESA.tsx
index 87b4eae32..3aa6ac9f7 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderAliyunESA.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderAliyunESA.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizApplyNodeConfigFormProviderAliyunESA = () => {
+const BizApplyNodeConfigFieldsProviderAliyunESA = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizApplyNodeConfigFormProviderAliyunESA, {
+const _default = Object.assign(BizApplyNodeConfigFieldsProviderAliyunESA, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderHuaweiCloudDNS.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderHuaweiCloudDNS.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderHuaweiCloudDNS.tsx
rename to ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderHuaweiCloudDNS.tsx
index a00f8565d..caaeadcd9 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderHuaweiCloudDNS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderHuaweiCloudDNS.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizApplyNodeConfigFormProviderHuaweiCloudDNS = () => {
+const BizApplyNodeConfigFieldsProviderHuaweiCloudDNS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizApplyNodeConfigFormProviderHuaweiCloudDNS, {
+const _default = Object.assign(BizApplyNodeConfigFieldsProviderHuaweiCloudDNS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderJDCloudDNS.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderJDCloudDNS.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderJDCloudDNS.tsx
rename to ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderJDCloudDNS.tsx
index b0a310abf..3fde9e500 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderJDCloudDNS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderJDCloudDNS.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizApplyNodeConfigFormProviderJDCloudDNS = () => {
+const BizApplyNodeConfigFieldsProviderJDCloudDNS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizApplyNodeConfigFormProviderJDCloudDNS, {
+const _default = Object.assign(BizApplyNodeConfigFieldsProviderJDCloudDNS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderTencentCloudEO.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderTencentCloudEO.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderTencentCloudEO.tsx
rename to ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderTencentCloudEO.tsx
index 0eca6763c..f705d6941 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFormProviderTencentCloudEO.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigFieldsProviderTencentCloudEO.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizApplyNodeConfigFormProviderTencentCloudEO = () => {
+const BizApplyNodeConfigFieldsProviderTencentCloudEO = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizApplyNodeConfigFormProviderTencentCloudEO, {
+const _default = Object.assign(BizApplyNodeConfigFieldsProviderTencentCloudEO, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
index 7c21001b8..88a5ae759 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
@@ -22,11 +22,11 @@ import { useContactEmailsStore } from "@/stores/contact";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
 
 import { FormNestedFieldsContextProvider, NodeFormContextProvider } from "./_context";
-import BizApplyNodeConfigFormProviderAliyunESA from "./BizApplyNodeConfigFormProviderAliyunESA";
-import BizApplyNodeConfigFormProviderAWSRoute53 from "./BizApplyNodeConfigFormProviderAWSRoute53";
-import BizApplyNodeConfigFormProviderHuaweiCloudDNS from "./BizApplyNodeConfigFormProviderHuaweiCloudDNS";
-import BizApplyNodeConfigFormProviderJDCloudDNS from "./BizApplyNodeConfigFormProviderJDCloudDNS";
-import BizApplyNodeConfigFormProviderTencentCloudEO from "./BizApplyNodeConfigFormProviderTencentCloudEO";
+import BizApplyNodeConfigFieldsProviderAliyunESA from "./BizApplyNodeConfigFieldsProviderAliyunESA";
+import BizApplyNodeConfigFieldsProviderAWSRoute53 from "./BizApplyNodeConfigFieldsProviderAWSRoute53";
+import BizApplyNodeConfigFieldsProviderHuaweiCloudDNS from "./BizApplyNodeConfigFieldsProviderHuaweiCloudDNS";
+import BizApplyNodeConfigFieldsProviderJDCloudDNS from "./BizApplyNodeConfigFieldsProviderJDCloudDNS";
+import BizApplyNodeConfigFieldsProviderTencentCloudEO from "./BizApplyNodeConfigFieldsProviderTencentCloudEO";
 import { NodeType } from "../nodes/typings";
 
 const MULTIPLE_INPUT_SEPARATOR = ";";
@@ -67,19 +67,24 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
       NOTICE: If you add new child component, please keep ASCII order.
       */
     switch (fieldProvider) {
-      case ACME_DNS01_PROVIDERS.ALIYUN_ESA:
-        return BizApplyNodeConfigFormProviderAliyunESA;
+      case ACME_DNS01_PROVIDERS.ALIYUN_ESA: {
+        return BizApplyNodeConfigFieldsProviderAliyunESA;
+      }
       case ACME_DNS01_PROVIDERS.AWS:
-      case ACME_DNS01_PROVIDERS.AWS_ROUTE53:
-        return BizApplyNodeConfigFormProviderAWSRoute53;
+      case ACME_DNS01_PROVIDERS.AWS_ROUTE53: {
+        return BizApplyNodeConfigFieldsProviderAWSRoute53;
+      }
       case ACME_DNS01_PROVIDERS.HUAWEICLOUD:
-      case ACME_DNS01_PROVIDERS.HUAWEICLOUD_DNS:
-        return BizApplyNodeConfigFormProviderHuaweiCloudDNS;
+      case ACME_DNS01_PROVIDERS.HUAWEICLOUD_DNS: {
+        return BizApplyNodeConfigFieldsProviderHuaweiCloudDNS;
+      }
       case ACME_DNS01_PROVIDERS.JDCLOUD:
-      case ACME_DNS01_PROVIDERS.JDCLOUD_DNS:
-        return BizApplyNodeConfigFormProviderJDCloudDNS;
-      case ACME_DNS01_PROVIDERS.TENCENTCLOUD_EO:
-        return BizApplyNodeConfigFormProviderTencentCloudEO;
+      case ACME_DNS01_PROVIDERS.JDCLOUD_DNS: {
+        return BizApplyNodeConfigFieldsProviderJDCloudDNS;
+      }
+      case ACME_DNS01_PROVIDERS.TENCENTCLOUD_EO: {
+        return BizApplyNodeConfigFieldsProviderTencentCloudEO;
+      }
     }
   }, [fieldProvider]);
 
@@ -135,7 +140,7 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
       setTimeout(() => {
         formInst.setFieldValue("caProvider", void 0);
         formInst.setFieldValue("caProviderAccessId", void 0);
-      }, 1);
+      }, 0);
     } else if (initialValues?.caProvider === value) {
       formInst.setFieldValue("caProviderAccessId", initialValues?.caProviderAccessId);
     } else {
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProvider1PanelConsole.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProvider1PanelConsole.tsx
similarity index 89%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProvider1PanelConsole.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProvider1PanelConsole.tsx
index 7e04d8bf2..bd377a341 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProvider1PanelConsole.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProvider1PanelConsole.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProvider1PanelConsole = () => {
+const BizDeployNodeConfigFieldsProvider1PanelConsole = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -43,7 +43,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProvider1PanelConsole, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProvider1PanelConsole, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProvider1PanelSite.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProvider1PanelSite.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProvider1PanelSite.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProvider1PanelSite.tsx
index 9f4f3c70c..98d09fb7e 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProvider1PanelSite.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProvider1PanelSite.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_WEBSITE = "website" as const;
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProvider1PanelSite = () => {
+const BizDeployNodeConfigFieldsProvider1PanelSite = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -126,7 +126,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProvider1PanelSite, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProvider1PanelSite, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAPISIX.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAPISIX.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAPISIX.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAPISIX.tsx
index 199c057a9..2e6e36a2e 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAPISIX.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAPISIX.tsx
@@ -9,7 +9,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProviderAPISIX = () => {
+const BizDeployNodeConfigFieldsProviderAPISIX = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -83,7 +83,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAPISIX, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAPISIX, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSACM.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSACM.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSACM.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSACM.tsx
index 07d02555e..d1e82eb84 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSACM.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSACM.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAWSACM = () => {
+const BizDeployNodeConfigFieldsProviderAWSACM = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -55,7 +55,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAWSACM, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAWSACM, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSCloudFront.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSCloudFront.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSCloudFront.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSCloudFront.tsx
index 8a50fe4c6..649f189f7 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSCloudFront.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSCloudFront.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAWSCloudFront = () => {
+const BizDeployNodeConfigFieldsProviderAWSCloudFront = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -72,7 +72,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAWSCloudFront, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAWSCloudFront, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSIAM.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSIAM.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSIAM.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSIAM.tsx
index 217d2ce46..5b7d86a0c 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAWSIAM.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAWSIAM.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAWSIAM = () => {
+const BizDeployNodeConfigFieldsProviderAWSIAM = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -62,7 +62,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAWSIAM, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAWSIAM, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunALB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunALB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunALB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunALB.tsx
index 0eb29d008..92c17fd00 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunALB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunALB.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderAliyunALB = () => {
+const BizDeployNodeConfigFieldsProviderAliyunALB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -146,7 +146,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunALB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunALB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunAPIGW.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunAPIGW.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunAPIGW.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunAPIGW.tsx
index b038bcc88..0521e7ee7 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunAPIGW.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunAPIGW.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const SERVICE_TYPE_CLOUDNATIVE = "cloudnative" as const;
 const SERVICE_TYPE_TRADITIONAL = "traditional" as const;
 
-const BizDeployNodeConfigFormProviderAliyunAPIGW = () => {
+const BizDeployNodeConfigFieldsProviderAliyunAPIGW = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -138,7 +138,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunAPIGW, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunAPIGW, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCAS.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCAS.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCAS.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCAS.tsx
index 91dccef8d..099819f87 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCAS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCAS.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunCAS = () => {
+const BizDeployNodeConfigFieldsProviderAliyunCAS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunCAS, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunCAS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCASDeploy.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCASDeploy.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCASDeploy.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCASDeploy.tsx
index 211c2abae..986035654 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCASDeploy.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCASDeploy.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const MULTIPLE_INPUT_SEPARATOR = ";";
 
-const BizDeployNodeConfigFormProviderAliyunCASDeploy = () => {
+const BizDeployNodeConfigFieldsProviderAliyunCASDeploy = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -103,7 +103,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunCASDeploy, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunCASDeploy, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCDN.tsx
index ba4c19aed..bb8d68f1e 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunCDN = () => {
+const BizDeployNodeConfigFieldsProviderAliyunCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCLB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCLB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCLB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCLB.tsx
index f3f1ee94f..5e0c24482 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunCLB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunCLB.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderAliyunCLB = () => {
+const BizDeployNodeConfigFieldsProviderAliyunCLB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -132,7 +132,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunCLB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunCLB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunDCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunDCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunDCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunDCDN.tsx
index 98093efdc..4a871f2b3 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunDCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunDCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunDCDN = () => {
+const BizDeployNodeConfigFieldsProviderAliyunDCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunDCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunDCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunDDoS.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunDDoS.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunDDoS.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunDDoS.tsx
index abff96501..91cc9c3a2 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunDDoS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunDDoS.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunDDoS = () => {
+const BizDeployNodeConfigFieldsProviderAliyunDDoS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -58,7 +58,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunDDoS, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunDDoS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunESA.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunESA.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunESA.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunESA.tsx
index 52bc48eff..9c4078a83 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunESA.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunESA.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunESA = () => {
+const BizDeployNodeConfigFieldsProviderAliyunESA = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -58,7 +58,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunESA, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunESA, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunFC.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunFC.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunFC.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunFC.tsx
index 307811f9c..2414368cf 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunFC.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunFC.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunFC = () => {
+const BizDeployNodeConfigFieldsProviderAliyunFC = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -76,7 +76,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunFC, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunFC, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunGA.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunGA.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunGA.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunGA.tsx
index 599d4e582..41f0ec964 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunGA.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunGA.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_ACCELERATOR = "accelerator" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderAliyunGA = () => {
+const BizDeployNodeConfigFieldsProviderAliyunGA = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -119,7 +119,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunGA, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunGA, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunLive.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunLive.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunLive.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunLive.tsx
index b81eb76cd..0230bf061 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunLive.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunLive.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunLive = () => {
+const BizDeployNodeConfigFieldsProviderAliyunLive = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -58,7 +58,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunLive, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunLive, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunNLB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunNLB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunNLB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunNLB.tsx
index b33a282b6..5d18644ea 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunNLB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunNLB.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderAliyunNLB = () => {
+const BizDeployNodeConfigFieldsProviderAliyunNLB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -124,7 +124,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunNLB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunNLB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunOSS.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunOSS.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunOSS.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunOSS.tsx
index f370cbd46..499a1c0e3 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunOSS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunOSS.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunOSS = () => {
+const BizDeployNodeConfigFieldsProviderAliyunOSS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -70,7 +70,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunOSS, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunOSS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunVOD.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunVOD.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunVOD.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunVOD.tsx
index 3c3a232f8..a3baf67fb 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunVOD.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunVOD.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunVOD = () => {
+const BizDeployNodeConfigFieldsProviderAliyunVOD = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -58,7 +58,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunVOD, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunVOD, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunWAF.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunWAF.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunWAF.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunWAF.tsx
index ce78fc994..d5c00b642 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAliyunWAF.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAliyunWAF.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAliyunWAF = () => {
+const BizDeployNodeConfigFieldsProviderAliyunWAF = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -90,7 +90,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAliyunWAF, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAliyunWAF, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAzureKeyVault.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAzureKeyVault.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAzureKeyVault.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAzureKeyVault.tsx
index 3d432c090..b120929ab 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderAzureKeyVault.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderAzureKeyVault.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderAzureKeyVault = () => {
+const BizDeployNodeConfigFieldsProviderAzureKeyVault = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -61,7 +61,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderAzureKeyVault, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderAzureKeyVault, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudAppBLB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudAppBLB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB.tsx
index bace7c3a9..d30b3cdc7 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudAppBLB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderBaiduCloudAppBLB = () => {
+const BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -132,7 +132,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBaiduCloudAppBLB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudBLB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudBLB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudBLB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudBLB.tsx
index c4663e9ff..e88ecf732 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudBLB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudBLB.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderBaiduCloudBLB = () => {
+const BizDeployNodeConfigFieldsProviderBaiduCloudBLB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -132,7 +132,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBaiduCloudBLB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBaiduCloudBLB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudCDN.tsx
index 0e95de8d2..95ef0aeba 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaiduCloudCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaiduCloudCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderBaiduCloudCDN = () => {
+const BizDeployNodeConfigFieldsProviderBaiduCloudCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBaiduCloudCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBaiduCloudCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaishanCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaishanCDN.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaishanCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaishanCDN.tsx
index 531ccc184..3305072e5 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaishanCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaishanCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderBaishanCDN = () => {
+const BizDeployNodeConfigFieldsProviderBaishanCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -64,7 +64,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBaishanCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBaishanCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaPanelConsole.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaPanelConsole.tsx
similarity index 88%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaPanelConsole.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaPanelConsole.tsx
index 2a098ac60..6ffd565a6 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaPanelConsole.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaPanelConsole.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderBaotaPanelConsole = () => {
+const BizDeployNodeConfigFieldsProviderBaotaPanelConsole = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -43,7 +43,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBaotaPanelConsole, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBaotaPanelConsole, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaPanelSite.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaPanelSite.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaPanelSite.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaPanelSite.tsx
index ce0519c73..715689ce7 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaPanelSite.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaPanelSite.tsx
@@ -13,7 +13,7 @@ const SITE_TYPE_OTHER = "other";
 
 const MULTIPLE_INPUT_SEPARATOR = ";";
 
-const BizDeployNodeConfigFormProviderBaotaPanelSite = () => {
+const BizDeployNodeConfigFieldsProviderBaotaPanelSite = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -122,7 +122,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBaotaPanelSite, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBaotaPanelSite, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaWAFSite.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaWAFSite.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaWAFSite.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaWAFSite.tsx
index 5cc8b0d15..d604dc111 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBaotaWAFSite.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBaotaWAFSite.tsx
@@ -7,7 +7,7 @@ import { validPortNumber } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderBaotaWAFSite = () => {
+const BizDeployNodeConfigFieldsProviderBaotaWAFSite = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -63,7 +63,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBaotaWAFSite, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBaotaWAFSite, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBunnyCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBunnyCDN.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBunnyCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBunnyCDN.tsx
index 29277abb6..72c471296 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBunnyCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBunnyCDN.tsx
@@ -6,7 +6,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderBunnyCDN = () => {
+const BizDeployNodeConfigFieldsProviderBunnyCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -64,7 +64,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBunnyCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBunnyCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBytePlusCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBytePlusCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBytePlusCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBytePlusCDN.tsx
index 569929fa1..775943c30 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderBytePlusCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderBytePlusCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderBytePlusCDN = () => {
+const BizDeployNodeConfigFieldsProviderBytePlusCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderBytePlusCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderBytePlusCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudAO.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudAO.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudAO.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudAO.tsx
index 98b3ae3dd..04610d617 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudAO.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudAO.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderCTCCCloudAO = () => {
+const BizDeployNodeConfigFieldsProviderCTCCCloudAO = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderCTCCCloudAO, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderCTCCCloudAO, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudCDN.tsx
index d914834d9..0ef063de7 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderCTCCCloudCDN = () => {
+const BizDeployNodeConfigFieldsProviderCTCCCloudCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderCTCCCloudCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderCTCCCloudCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudELB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudELB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudELB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudELB.tsx
index b65e8a3a6..c4df747ac 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudELB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudELB.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderCTCCCloudELB = () => {
+const BizDeployNodeConfigFieldsProviderCTCCCloudELB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -124,7 +124,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderCTCCCloudELB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderCTCCCloudELB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudICDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudICDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudICDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudICDN.tsx
index 03a1dc190..7670a3d3f 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudICDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudICDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderCTCCCloudICDN = () => {
+const BizDeployNodeConfigFieldsProviderCTCCCloudICDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderCTCCCloudICDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderCTCCCloudICDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudLVDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudLVDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudLVDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudLVDN.tsx
index 08ecb0f92..37fc630b1 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCTCCCloudLVDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCTCCCloudLVDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderCTCCCloudLVDN = () => {
+const BizDeployNodeConfigFieldsProviderCTCCCloudLVDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderCTCCCloudLVDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderCTCCCloudLVDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCdnfly.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCdnfly.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCdnfly.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCdnfly.tsx
index 8f69b9dbb..a322701a4 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderCdnfly.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderCdnfly.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_SITE = "site" as const;
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProviderCdnfly = () => {
+const BizDeployNodeConfigFieldsProviderCdnfly = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -114,7 +114,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderCdnfly, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderCdnfly, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderDogeCloudCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderDogeCloudCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderDogeCloudCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderDogeCloudCDN.tsx
index 0b21bcac5..dade5b0be 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderDogeCloudCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderDogeCloudCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderDogeCloudCDN = () => {
+const BizDeployNodeConfigFieldsProviderDogeCloudCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderDogeCloudCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderDogeCloudCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderEdgioApplications.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderEdgioApplications.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderEdgioApplications.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderEdgioApplications.tsx
index abbeaf345..b8e2f624b 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderEdgioApplications.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderEdgioApplications.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderEdgioApplications = () => {
+const BizDeployNodeConfigFieldsProviderEdgioApplications = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderEdgioApplications, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderEdgioApplications, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderFlexCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderFlexCDN.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderFlexCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderFlexCDN.tsx
index 167a2b844..03230e81d 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderFlexCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderFlexCDN.tsx
@@ -9,7 +9,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProviderFlexCDN = () => {
+const BizDeployNodeConfigFieldsProviderFlexCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -84,7 +84,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderFlexCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderFlexCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderGcoreCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderGcoreCDN.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderGcoreCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderGcoreCDN.tsx
index 820d5da33..35333105c 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderGcoreCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderGcoreCDN.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderGcoreCDN = () => {
+const BizDeployNodeConfigFieldsProviderGcoreCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -64,7 +64,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderGcoreCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderGcoreCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderGoEdge.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderGoEdge.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderGoEdge.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderGoEdge.tsx
index 057c2241c..f69905421 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderGoEdge.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderGoEdge.tsx
@@ -9,7 +9,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProviderGoEdge = () => {
+const BizDeployNodeConfigFieldsProviderGoEdge = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -84,7 +84,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderGoEdge, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderGoEdge, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudCDN.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudCDN.tsx
index ce809e9c0..51134bba8 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderHuaweiCloudCDN = () => {
+const BizDeployNodeConfigFieldsProviderHuaweiCloudCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -58,7 +58,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderHuaweiCloudCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderHuaweiCloudCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudELB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudELB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudELB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudELB.tsx
index 72647f536..1de4088ff 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudELB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudELB.tsx
@@ -11,7 +11,7 @@ const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderHuaweiCloudELB = () => {
+const BizDeployNodeConfigFieldsProviderHuaweiCloudELB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -156,7 +156,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderHuaweiCloudELB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderHuaweiCloudELB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudWAF.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudWAF.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudWAF.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudWAF.tsx
index ee1a993fa..a8ac38552 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderHuaweiCloudWAF.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderHuaweiCloudWAF.tsx
@@ -12,7 +12,7 @@ const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 const RESOURCE_TYPE_CLOUDSERVER = "cloudserver" as const;
 const RESOURCE_TYPE_PREMIUMHOST = "premiumhost" as const;
 
-const BizDeployNodeConfigFormProviderHuaweiCloudWAF = () => {
+const BizDeployNodeConfigFieldsProviderHuaweiCloudWAF = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -132,7 +132,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderHuaweiCloudWAF, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderHuaweiCloudWAF, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudALB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudALB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudALB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudALB.tsx
index 835eb0f9d..ed6da11fd 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudALB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudALB.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderJDCloudALB = () => {
+const BizDeployNodeConfigFieldsProviderJDCloudALB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -144,7 +144,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderJDCloudALB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderJDCloudALB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudCDN.tsx
index 27de540f7..131c9397e 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderJDCloudCDN = () => {
+const BizDeployNodeConfigFieldsProviderJDCloudCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderJDCloudCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderJDCloudCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudLive.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudLive.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudLive.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudLive.tsx
index d1e12f8d4..7001f19d6 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudLive.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudLive.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderJDCloudLive = () => {
+const BizDeployNodeConfigFieldsProviderJDCloudLive = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderJDCloudLive, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderJDCloudLive, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudVOD.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudVOD.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudVOD.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudVOD.tsx
index 8154790eb..e593c3651 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderJDCloudVOD.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderJDCloudVOD.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderJDCloudVOD = () => {
+const BizDeployNodeConfigFieldsProviderJDCloudVOD = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderJDCloudVOD, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderJDCloudVOD, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderKong.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderKong.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderKong.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderKong.tsx
index f2d01ca31..343723993 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderKong.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderKong.tsx
@@ -9,7 +9,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProviderKong = () => {
+const BizDeployNodeConfigFieldsProviderKong = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -94,7 +94,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderKong, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderKong, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderKubernetesSecret.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderKubernetesSecret.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderKubernetesSecret.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderKubernetesSecret.tsx
index a7dc610cd..6730b4d81 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderKubernetesSecret.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderKubernetesSecret.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderKubernetesSecret = () => {
+const BizDeployNodeConfigFieldsProviderKubernetesSecret = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -91,7 +91,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderKubernetesSecret, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderKubernetesSecret, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLeCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderLeCDN.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLeCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderLeCDN.tsx
index 17819ee19..0d999b561 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLeCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderLeCDN.tsx
@@ -9,7 +9,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProviderLeCDN = () => {
+const BizDeployNodeConfigFieldsProviderLeCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -95,7 +95,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderLeCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderLeCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLocal.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderLocal.tsx
similarity index 99%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLocal.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderLocal.tsx
index f70147b78..8bbd6fc8e 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLocal.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderLocal.tsx
@@ -127,7 +127,7 @@ Set-ItemProperty -Path $rdpCertPath -Name "SSLCertificateSHA1Hash" -Value "$thum
   }
 };
 
-const BizDeployNodeConfigFormProviderLocal = () => {
+const BizDeployNodeConfigFieldsProviderLocal = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -510,7 +510,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderLocal, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderLocal, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderNetlifySite.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderNetlifySite.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderNetlifySite.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderNetlifySite.tsx
index 6f34bd212..19f395c11 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderNetlifySite.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderNetlifySite.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderNetlifySite = () => {
+const BizDeployNodeConfigFieldsProviderNetlifySite = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderNetlifySite, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderNetlifySite, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderProxmoxVE.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderProxmoxVE.tsx
similarity index 92%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderProxmoxVE.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderProxmoxVE.tsx
index c797953c6..ebf01ec6b 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderProxmoxVE.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderProxmoxVE.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderProxmoxVE = () => {
+const BizDeployNodeConfigFieldsProviderProxmoxVE = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -54,7 +54,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderProxmoxVE, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderProxmoxVE, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuCDN.tsx
index 97d94456f..0ed1728dc 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderQiniuCDN = () => {
+const BizDeployNodeConfigFieldsProviderQiniuCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderQiniuCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderQiniuCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuKodo.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuKodo.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuKodo.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuKodo.tsx
index 7a302efa9..8400c79b0 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuKodo.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuKodo.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderQiniuKodo = () => {
+const BizDeployNodeConfigFieldsProviderQiniuKodo = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderQiniuKodo, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderQiniuKodo, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuPili.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuPili.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuPili.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuPili.tsx
index 28f75cb08..6a774ce82 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderQiniuPili.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderQiniuPili.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderQiniuPili = () => {
+const BizDeployNodeConfigFieldsProviderQiniuPili = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -58,7 +58,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderQiniuPili, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderQiniuPili, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderRainYunRCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderRainYunRCDN.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderRainYunRCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderRainYunRCDN.tsx
index 7ffda6632..d7f3f9877 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderRainYunRCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderRainYunRCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderRainYunRCDN = () => {
+const BizDeployNodeConfigFieldsProviderRainYunRCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -60,7 +60,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderRainYunRCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderRainYunRCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderRatPanelSite.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderRatPanelSite.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderRatPanelSite.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderRatPanelSite.tsx
index 9b7864c82..3caf6096a 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderRatPanelSite.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderRatPanelSite.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderRatPanelSite = () => {
+const BizDeployNodeConfigFieldsProviderRatPanelSite = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderRatPanelSite, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderRatPanelSite, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSSH.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderSSH.tsx
similarity index 99%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSSH.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderSSH.tsx
index dd8e351a3..b29e74ab1 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSSH.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderSSH.tsx
@@ -9,7 +9,7 @@ import Show from "@/components/Show";
 import { CERTIFICATE_FORMATS } from "@/domain/certificate";
 
 import { useFormNestedFieldsContext } from "./_context";
-import { initPresetScript as _initPresetScript } from "./BizDeployNodeConfigFormProviderLocal";
+import { initPresetScript as _initPresetScript } from "./BizDeployNodeConfigFieldsProviderLocal";
 
 const FORMAT_PEM = CERTIFICATE_FORMATS.PEM;
 const FORMAT_PFX = CERTIFICATE_FORMATS.PFX;
@@ -160,7 +160,7 @@ chmod 600 /etc/stunnel/stunnel.pem
   return _initPresetScript(key as Parameters<typeof _initPresetScript>[0], params);
 };
 
-const BizDeployNodeConfigFormProviderSSH = () => {
+const BizDeployNodeConfigFieldsProviderSSH = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -552,7 +552,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderSSH, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderSSH, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSafeLine.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderSafeLine.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSafeLine.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderSafeLine.tsx
index 20562dedc..c0b07c481 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSafeLine.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderSafeLine.tsx
@@ -9,7 +9,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
 
-const BizDeployNodeConfigFormProviderSafeLine = () => {
+const BizDeployNodeConfigFieldsProviderSafeLine = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -84,7 +84,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderSafeLine, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderSafeLine, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCDN.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCDN.tsx
index df1f05274..d989a003d 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudCDN = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -57,7 +57,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCLB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCLB.tsx
similarity index 98%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCLB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCLB.tsx
index dca1df778..a075b7903 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCLB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCLB.tsx
@@ -13,7 +13,7 @@ const RESOURCE_TYPE_LISTENER = "listener" as const;
 const RESOURCE_TYPE_RULEDOMAIN = "ruledomain" as const;
 const RESOURCE_TYPE_VIA_SSLDEPLOY = "ssl-deploy" as const;
 
-const BizDeployNodeConfigFormProviderTencentCloudCLB = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudCLB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -196,7 +196,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudCLB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudCLB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCOS.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCOS.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCOS.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCOS.tsx
index 8dd31bb6c..175350db3 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCOS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCOS.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudCOS = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudCOS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -70,7 +70,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudCOS, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudCOS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCSS.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCSS.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCSS.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCSS.tsx
index 06069b23d..ab0429731 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudCSS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudCSS.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudCSS = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudCSS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -57,7 +57,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudCSS, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudCSS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudECDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudECDN.tsx
similarity index 93%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudECDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudECDN.tsx
index 516231fd6..57cf9705c 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudECDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudECDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudECDN = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudECDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -57,7 +57,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudECDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudECDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudEO.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudEO.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudEO.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudEO.tsx
index 75c62115c..0fe7317ac 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudEO.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudEO.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const MULTIPLE_INPUT_SEPARATOR = ";";
 
-const BizDeployNodeConfigFormProviderTencentCloudEO = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudEO = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -83,7 +83,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudEO, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudEO, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudGAAP.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudGAAP.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudGAAP.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudGAAP.tsx
index fae72c29c..8b9ab2b81 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudGAAP.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudGAAP.tsx
@@ -9,7 +9,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderTencentCloudGAAP = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudGAAP = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -105,7 +105,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudGAAP, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudGAAP, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSCF.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSCF.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSCF.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSCF.tsx
index 91cb9007d..b0a0ab69f 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSCF.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSCF.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudSCF = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudSCF = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -69,7 +69,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudSCF, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudSCF, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSL.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSL.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSL.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSL.tsx
index aa5a990b4..1984ea1b1 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSL.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSL.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudSSL = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudSSL = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -42,7 +42,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudSSL, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudSSL, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSLDeploy.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSLDeploy.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy.tsx
index 86b9ba53e..e5c9a2d31 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSLDeploy.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const MULTIPLE_INPUT_SEPARATOR = ";";
 
-const BizDeployNodeConfigFormProviderTencentCloudSSLDeploy = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -104,7 +104,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudSSLDeploy, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSLUpdate.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSLUpdate.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate.tsx
index f7bd0d97f..b43e2b2a0 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudSSLUpdate.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const MULTIPLE_INPUT_SEPARATOR = ";";
 
-const BizDeployNodeConfigFormProviderTencentCloudSSLUpdate = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -125,7 +125,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudSSLUpdate, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudVOD.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudVOD.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudVOD.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudVOD.tsx
index 8cab2b71c..bfeaab275 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudVOD.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudVOD.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudVOD = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudVOD = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -74,7 +74,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudVOD, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudVOD, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudWAF.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudWAF.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudWAF.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudWAF.tsx
index e26b5b795..4d8c2ca71 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderTencentCloudWAF.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderTencentCloudWAF.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderTencentCloudWAF = () => {
+const BizDeployNodeConfigFieldsProviderTencentCloudWAF = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -93,7 +93,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderTencentCloudWAF, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderTencentCloudWAF, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUCloudUCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUCloudUCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUCloudUCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUCloudUCDN.tsx
index 44471c43f..0f4f2bdb5 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUCloudUCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUCloudUCDN.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderUCloudUCDN = () => {
+const BizDeployNodeConfigFieldsProviderUCloudUCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -44,7 +44,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderUCloudUCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderUCloudUCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUCloudUS3.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUCloudUS3.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUCloudUS3.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUCloudUS3.tsx
index 33d87b546..9cc95b9f3 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUCloudUS3.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUCloudUS3.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderUCloudUS3 = () => {
+const BizDeployNodeConfigFieldsProviderUCloudUS3 = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -70,7 +70,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderUCloudUS3, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderUCloudUS3, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUniCloudWebHost.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUniCloudWebHost.tsx
similarity index 95%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUniCloudWebHost.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUniCloudWebHost.tsx
index 07c306ee8..59aadb56d 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUniCloudWebHost.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUniCloudWebHost.tsx
@@ -8,7 +8,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderUniCloudWebHost = () => {
+const BizDeployNodeConfigFieldsProviderUniCloudWebHost = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -79,7 +79,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderUniCloudWebHost, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderUniCloudWebHost, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUpyunCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUpyunCDN.tsx
similarity index 92%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUpyunCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUpyunCDN.tsx
index 4d641a9d1..8b6b31bea 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUpyunCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUpyunCDN.tsx
@@ -8,7 +8,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderUpyunCDN = () => {
+const BizDeployNodeConfigFieldsProviderUpyunCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -51,7 +51,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderUpyunCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderUpyunCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUpyunFile.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUpyunFile.tsx
similarity index 92%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUpyunFile.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUpyunFile.tsx
index b4ec73c00..e7afa5ba1 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderUpyunFile.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderUpyunFile.tsx
@@ -8,7 +8,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderUpyunFile = () => {
+const BizDeployNodeConfigFieldsProviderUpyunFile = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -51,7 +51,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderUpyunFile, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderUpyunFile, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineALB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineALB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineALB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineALB.tsx
index ad7fee727..73757da84 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineALB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineALB.tsx
@@ -11,7 +11,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderVolcEngineALB = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineALB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -144,7 +144,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineALB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineALB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCDN.tsx
index c463a0560..423d201cc 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderVolcEngineCDN = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCLB.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCLB.tsx
similarity index 97%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCLB.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCLB.tsx
index c19c4e6a2..37086e806 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCLB.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCLB.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const RESOURCE_TYPE_LOADBALANCER = "loadbalancer" as const;
 const RESOURCE_TYPE_LISTENER = "listener" as const;
 
-const BizDeployNodeConfigFormProviderVolcEngineCLB = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineCLB = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -126,7 +126,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
     });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineCLB, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineCLB, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCertCenter.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCertCenter.tsx
similarity index 89%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCertCenter.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCertCenter.tsx
index 3741275cf..63a7a957e 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineCertCenter.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineCertCenter.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderVolcEngineCertCenter = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineCertCenter = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -43,7 +43,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineCertCenter, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineCertCenter, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineDCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineDCDN.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineDCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineDCDN.tsx
index a13ce96a3..0492ac638 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineDCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineDCDN.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderVolcEngineDCDN = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineDCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineDCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineDCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineImageX.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineImageX.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineImageX.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineImageX.tsx
index 3361d988d..4b78cd517 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineImageX.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineImageX.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderVolcEngineImageX = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineImageX = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -70,7 +70,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineImageX, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineImageX, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineLive.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineLive.tsx
similarity index 91%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineLive.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineLive.tsx
index 25a6127de..d9030d5a8 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineLive.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineLive.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderVolcEngineLive = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineLive = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -46,7 +46,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineLive, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineLive, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineTOS.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineTOS.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineTOS.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineTOS.tsx
index a8d338edb..0b6d0cb51 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderVolcEngineTOS.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderVolcEngineTOS.tsx
@@ -7,7 +7,7 @@ import { validDomainName } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderVolcEngineTOS = () => {
+const BizDeployNodeConfigFieldsProviderVolcEngineTOS = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -70,7 +70,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderVolcEngineTOS, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderVolcEngineTOS, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCDN.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCDN.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCDN.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCDN.tsx
index 54da6bfeb..63a74b6a2 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCDN.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCDN.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 
 const MULTIPLE_INPUT_SEPARATOR = ";";
 
-const BizDeployNodeConfigFormProviderWangsuCDN = () => {
+const BizDeployNodeConfigFieldsProviderWangsuCDN = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -61,7 +61,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderWangsuCDN, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderWangsuCDN, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCDNPro.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCDNPro.tsx
similarity index 96%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCDNPro.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCDNPro.tsx
index 584a6ad79..7e8a0323c 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCDNPro.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCDNPro.tsx
@@ -10,7 +10,7 @@ import { useFormNestedFieldsContext } from "./_context";
 const ENVIRONMENT_PRODUCTION = "production" as const;
 const ENVIRONMENT_STAGING = "stating" as const;
 
-const BizDeployNodeConfigFormProviderWangsuCDNPro = () => {
+const BizDeployNodeConfigFieldsProviderWangsuCDNPro = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -90,7 +90,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderWangsuCDNPro, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderWangsuCDNPro, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCertificate.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCertificate.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCertificate.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCertificate.tsx
index e0e25c018..aa49dea43 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWangsuCertificate.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWangsuCertificate.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderWangsuCertificate = () => {
+const BizDeployNodeConfigFieldsProviderWangsuCertificate = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -43,7 +43,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderWangsuCertificate, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderWangsuCertificate, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWebhook.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWebhook.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWebhook.tsx
rename to ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWebhook.tsx
index 2014aa507..d6d111b9c 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWebhook.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWebhook.tsx
@@ -8,7 +8,7 @@ import Tips from "@/components/Tips";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizDeployNodeConfigFormProviderWebhook = () => {
+const BizDeployNodeConfigFieldsProviderWebhook = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -79,7 +79,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizDeployNodeConfigFormProviderWebhook, {
+const _default = Object.assign(BizDeployNodeConfigFieldsProviderWebhook, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx
index f9d90cd88..5e4a6ae5c 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx
@@ -17,99 +17,99 @@ import { useAntdForm } from "@/hooks";
 
 import { getAllPreviousNodes } from "../_util";
 import { FormNestedFieldsContextProvider, NodeFormContextProvider } from "./_context";
-import BizDeployNodeConfigFormProvider1PanelConsole from "./BizDeployNodeConfigFormProvider1PanelConsole";
-import BizDeployNodeConfigFormProvider1PanelSite from "./BizDeployNodeConfigFormProvider1PanelSite";
-import BizDeployNodeConfigFormProviderAliyunALB from "./BizDeployNodeConfigFormProviderAliyunALB";
-import BizDeployNodeConfigFormProviderAliyunAPIGW from "./BizDeployNodeConfigFormProviderAliyunAPIGW";
-import BizDeployNodeConfigFormProviderAliyunCAS from "./BizDeployNodeConfigFormProviderAliyunCAS";
-import BizDeployNodeConfigFormProviderAliyunCASDeploy from "./BizDeployNodeConfigFormProviderAliyunCASDeploy";
-import BizDeployNodeConfigFormProviderAliyunCDN from "./BizDeployNodeConfigFormProviderAliyunCDN";
-import BizDeployNodeConfigFormProviderAliyunCLB from "./BizDeployNodeConfigFormProviderAliyunCLB";
-import BizDeployNodeConfigFormProviderAliyunDCDN from "./BizDeployNodeConfigFormProviderAliyunDCDN";
-import BizDeployNodeConfigFormProviderAliyunDDoS from "./BizDeployNodeConfigFormProviderAliyunDDoS";
-import BizDeployNodeConfigFormProviderAliyunESA from "./BizDeployNodeConfigFormProviderAliyunESA";
-import BizDeployNodeConfigFormProviderAliyunFC from "./BizDeployNodeConfigFormProviderAliyunFC";
-import BizDeployNodeConfigFormProviderAliyunGA from "./BizDeployNodeConfigFormProviderAliyunGA";
-import BizDeployNodeConfigFormProviderAliyunLive from "./BizDeployNodeConfigFormProviderAliyunLive";
-import BizDeployNodeConfigFormProviderAliyunNLB from "./BizDeployNodeConfigFormProviderAliyunNLB";
-import BizDeployNodeConfigFormProviderAliyunOSS from "./BizDeployNodeConfigFormProviderAliyunOSS";
-import BizDeployNodeConfigFormProviderAliyunVOD from "./BizDeployNodeConfigFormProviderAliyunVOD";
-import BizDeployNodeConfigFormProviderAliyunWAF from "./BizDeployNodeConfigFormProviderAliyunWAF";
-import BizDeployNodeConfigFormProviderAPISIX from "./BizDeployNodeConfigFormProviderAPISIX";
-import BizDeployNodeConfigFormProviderAWSACM from "./BizDeployNodeConfigFormProviderAWSACM";
-import BizDeployNodeConfigFormProviderAWSCloudFront from "./BizDeployNodeConfigFormProviderAWSCloudFront";
-import BizDeployNodeConfigFormProviderAWSIAM from "./BizDeployNodeConfigFormProviderAWSIAM";
-import BizDeployNodeConfigFormProviderAzureKeyVault from "./BizDeployNodeConfigFormProviderAzureKeyVault";
-import BizDeployNodeConfigFormProviderBaiduCloudAppBLB from "./BizDeployNodeConfigFormProviderBaiduCloudAppBLB";
-import BizDeployNodeConfigFormProviderBaiduCloudBLB from "./BizDeployNodeConfigFormProviderBaiduCloudBLB";
-import BizDeployNodeConfigFormProviderBaiduCloudCDN from "./BizDeployNodeConfigFormProviderBaiduCloudCDN";
-import BizDeployNodeConfigFormProviderBaishanCDN from "./BizDeployNodeConfigFormProviderBaishanCDN";
-import BizDeployNodeConfigFormProviderBaotaPanelConsole from "./BizDeployNodeConfigFormProviderBaotaPanelConsole";
-import BizDeployNodeConfigFormProviderBaotaPanelSite from "./BizDeployNodeConfigFormProviderBaotaPanelSite";
-import BizDeployNodeConfigFormProviderBaotaWAFSite from "./BizDeployNodeConfigFormProviderBaotaWAFSite";
-import BizDeployNodeConfigFormProviderBunnyCDN from "./BizDeployNodeConfigFormProviderBunnyCDN";
-import BizDeployNodeConfigFormProviderBytePlusCDN from "./BizDeployNodeConfigFormProviderBytePlusCDN";
-import BizDeployNodeConfigFormProviderCdnfly from "./BizDeployNodeConfigFormProviderCdnfly";
-import BizDeployNodeConfigFormProviderCTCCCloudAO from "./BizDeployNodeConfigFormProviderCTCCCloudAO";
-import BizDeployNodeConfigFormProviderCTCCCloudCDN from "./BizDeployNodeConfigFormProviderCTCCCloudCDN";
-import BizDeployNodeConfigFormProviderCTCCCloudELB from "./BizDeployNodeConfigFormProviderCTCCCloudELB";
-import BizDeployNodeConfigFormProviderCTCCCloudICDN from "./BizDeployNodeConfigFormProviderCTCCCloudICDN";
-import BizDeployNodeConfigFormProviderCTCCCloudLVDN from "./BizDeployNodeConfigFormProviderCTCCCloudLVDN";
-import BizDeployNodeConfigFormProviderDogeCloudCDN from "./BizDeployNodeConfigFormProviderDogeCloudCDN";
-import BizDeployNodeConfigFormProviderEdgioApplications from "./BizDeployNodeConfigFormProviderEdgioApplications";
-import BizDeployNodeConfigFormProviderFlexCDN from "./BizDeployNodeConfigFormProviderFlexCDN";
-import BizDeployNodeConfigFormProviderGcoreCDN from "./BizDeployNodeConfigFormProviderGcoreCDN";
-import BizDeployNodeConfigFormProviderGoEdge from "./BizDeployNodeConfigFormProviderGoEdge";
-import BizDeployNodeConfigFormProviderHuaweiCloudCDN from "./BizDeployNodeConfigFormProviderHuaweiCloudCDN";
-import BizDeployNodeConfigFormProviderHuaweiCloudELB from "./BizDeployNodeConfigFormProviderHuaweiCloudELB";
-import BizDeployNodeConfigFormProviderHuaweiCloudWAF from "./BizDeployNodeConfigFormProviderHuaweiCloudWAF";
-import BizDeployNodeConfigFormProviderJDCloudALB from "./BizDeployNodeConfigFormProviderJDCloudALB";
-import BizDeployNodeConfigFormProviderJDCloudCDN from "./BizDeployNodeConfigFormProviderJDCloudCDN";
-import BizDeployNodeConfigFormProviderJDCloudLive from "./BizDeployNodeConfigFormProviderJDCloudLive";
-import BizDeployNodeConfigFormProviderJDCloudVOD from "./BizDeployNodeConfigFormProviderJDCloudVOD";
-import BizDeployNodeConfigFormProviderKong from "./BizDeployNodeConfigFormProviderKong";
-import BizDeployNodeConfigFormProviderKubernetesSecret from "./BizDeployNodeConfigFormProviderKubernetesSecret";
-import BizDeployNodeConfigFormProviderLeCDN from "./BizDeployNodeConfigFormProviderLeCDN";
-import BizDeployNodeConfigFormProviderLocal from "./BizDeployNodeConfigFormProviderLocal";
-import BizDeployNodeConfigFormProviderNetlifySite from "./BizDeployNodeConfigFormProviderNetlifySite";
-import BizDeployNodeConfigFormProviderProxmoxVE from "./BizDeployNodeConfigFormProviderProxmoxVE";
-import BizDeployNodeConfigFormProviderQiniuCDN from "./BizDeployNodeConfigFormProviderQiniuCDN";
-import BizDeployNodeConfigFormProviderQiniuKodo from "./BizDeployNodeConfigFormProviderQiniuKodo";
-import BizDeployNodeConfigFormProviderQiniuPili from "./BizDeployNodeConfigFormProviderQiniuPili";
-import BizDeployNodeConfigFormProviderRainYunRCDN from "./BizDeployNodeConfigFormProviderRainYunRCDN";
-import BizDeployNodeConfigFormProviderRatPanelSite from "./BizDeployNodeConfigFormProviderRatPanelSite";
-import BizDeployNodeConfigFormProviderSafeLine from "./BizDeployNodeConfigFormProviderSafeLine";
-import BizDeployNodeConfigFormProviderSSH from "./BizDeployNodeConfigFormProviderSSH";
-import BizDeployNodeConfigFormProviderTencentCloudCDN from "./BizDeployNodeConfigFormProviderTencentCloudCDN";
-import BizDeployNodeConfigFormProviderTencentCloudCLB from "./BizDeployNodeConfigFormProviderTencentCloudCLB";
-import BizDeployNodeConfigFormProviderTencentCloudCOS from "./BizDeployNodeConfigFormProviderTencentCloudCOS";
-import BizDeployNodeConfigFormProviderTencentCloudCSS from "./BizDeployNodeConfigFormProviderTencentCloudCSS";
-import BizDeployNodeConfigFormProviderTencentCloudECDN from "./BizDeployNodeConfigFormProviderTencentCloudECDN";
-import BizDeployNodeConfigFormProviderTencentCloudEO from "./BizDeployNodeConfigFormProviderTencentCloudEO";
-import BizDeployNodeConfigFormProviderTencentCloudGAAP from "./BizDeployNodeConfigFormProviderTencentCloudGAAP";
-import BizDeployNodeConfigFormProviderTencentCloudSCF from "./BizDeployNodeConfigFormProviderTencentCloudSCF";
-import BizDeployNodeConfigFormProviderTencentCloudSSL from "./BizDeployNodeConfigFormProviderTencentCloudSSL";
-import BizDeployNodeConfigFormProviderTencentCloudSSLDeploy from "./BizDeployNodeConfigFormProviderTencentCloudSSLDeploy";
-import BizDeployNodeConfigFormProviderTencentCloudSSLUpdate from "./BizDeployNodeConfigFormProviderTencentCloudSSLUpdate";
-import BizDeployNodeConfigFormProviderTencentCloudVOD from "./BizDeployNodeConfigFormProviderTencentCloudVOD";
-import BizDeployNodeConfigFormProviderTencentCloudWAF from "./BizDeployNodeConfigFormProviderTencentCloudWAF";
-import BizDeployNodeConfigFormProviderUCloudUCDN from "./BizDeployNodeConfigFormProviderUCloudUCDN";
-import BizDeployNodeConfigFormProviderUCloudUS3 from "./BizDeployNodeConfigFormProviderUCloudUS3";
-import BizDeployNodeConfigFormProviderUniCloudWebHost from "./BizDeployNodeConfigFormProviderUniCloudWebHost";
-import BizDeployNodeConfigFormProviderUpyunCDN from "./BizDeployNodeConfigFormProviderUpyunCDN";
-import BizDeployNodeConfigFormProviderUpyunFile from "./BizDeployNodeConfigFormProviderUpyunFile";
-import BizDeployNodeConfigFormProviderVolcEngineALB from "./BizDeployNodeConfigFormProviderVolcEngineALB";
-import BizDeployNodeConfigFormProviderVolcEngineCDN from "./BizDeployNodeConfigFormProviderVolcEngineCDN";
-import BizDeployNodeConfigFormProviderVolcEngineCertCenter from "./BizDeployNodeConfigFormProviderVolcEngineCertCenter";
-import BizDeployNodeConfigFormProviderVolcEngineCLB from "./BizDeployNodeConfigFormProviderVolcEngineCLB";
-import BizDeployNodeConfigFormProviderVolcEngineDCDN from "./BizDeployNodeConfigFormProviderVolcEngineDCDN";
-import BizDeployNodeConfigFormProviderVolcEngineImageX from "./BizDeployNodeConfigFormProviderVolcEngineImageX";
-import BizDeployNodeConfigFormProviderVolcEngineLive from "./BizDeployNodeConfigFormProviderVolcEngineLive";
-import BizDeployNodeConfigFormProviderVolcEngineTOS from "./BizDeployNodeConfigFormProviderVolcEngineTOS";
-import BizDeployNodeConfigFormProviderWangsuCDN from "./BizDeployNodeConfigFormProviderWangsuCDN";
-import BizDeployNodeConfigFormProviderWangsuCDNPro from "./BizDeployNodeConfigFormProviderWangsuCDNPro";
-import BizDeployNodeConfigFormProviderWangsuCertificate from "./BizDeployNodeConfigFormProviderWangsuCertificate";
-import BizDeployNodeConfigFormProviderWebhook from "./BizDeployNodeConfigFormProviderWebhook";
+import BizDeployNodeConfigFieldsProvider1PanelConsole from "./BizDeployNodeConfigFieldsProvider1PanelConsole";
+import BizDeployNodeConfigFieldsProvider1PanelSite from "./BizDeployNodeConfigFieldsProvider1PanelSite";
+import BizDeployNodeConfigFieldsProviderAliyunALB from "./BizDeployNodeConfigFieldsProviderAliyunALB";
+import BizDeployNodeConfigFieldsProviderAliyunAPIGW from "./BizDeployNodeConfigFieldsProviderAliyunAPIGW";
+import BizDeployNodeConfigFieldsProviderAliyunCAS from "./BizDeployNodeConfigFieldsProviderAliyunCAS";
+import BizDeployNodeConfigFieldsProviderAliyunCASDeploy from "./BizDeployNodeConfigFieldsProviderAliyunCASDeploy";
+import BizDeployNodeConfigFieldsProviderAliyunCDN from "./BizDeployNodeConfigFieldsProviderAliyunCDN";
+import BizDeployNodeConfigFieldsProviderAliyunCLB from "./BizDeployNodeConfigFieldsProviderAliyunCLB";
+import BizDeployNodeConfigFieldsProviderAliyunDCDN from "./BizDeployNodeConfigFieldsProviderAliyunDCDN";
+import BizDeployNodeConfigFieldsProviderAliyunDDoS from "./BizDeployNodeConfigFieldsProviderAliyunDDoS";
+import BizDeployNodeConfigFieldsProviderAliyunESA from "./BizDeployNodeConfigFieldsProviderAliyunESA";
+import BizDeployNodeConfigFieldsProviderAliyunFC from "./BizDeployNodeConfigFieldsProviderAliyunFC";
+import BizDeployNodeConfigFieldsProviderAliyunGA from "./BizDeployNodeConfigFieldsProviderAliyunGA";
+import BizDeployNodeConfigFieldsProviderAliyunLive from "./BizDeployNodeConfigFieldsProviderAliyunLive";
+import BizDeployNodeConfigFieldsProviderAliyunNLB from "./BizDeployNodeConfigFieldsProviderAliyunNLB";
+import BizDeployNodeConfigFieldsProviderAliyunOSS from "./BizDeployNodeConfigFieldsProviderAliyunOSS";
+import BizDeployNodeConfigFieldsProviderAliyunVOD from "./BizDeployNodeConfigFieldsProviderAliyunVOD";
+import BizDeployNodeConfigFieldsProviderAliyunWAF from "./BizDeployNodeConfigFieldsProviderAliyunWAF";
+import BizDeployNodeConfigFieldsProviderAPISIX from "./BizDeployNodeConfigFieldsProviderAPISIX";
+import BizDeployNodeConfigFieldsProviderAWSACM from "./BizDeployNodeConfigFieldsProviderAWSACM";
+import BizDeployNodeConfigFieldsProviderAWSCloudFront from "./BizDeployNodeConfigFieldsProviderAWSCloudFront";
+import BizDeployNodeConfigFieldsProviderAWSIAM from "./BizDeployNodeConfigFieldsProviderAWSIAM";
+import BizDeployNodeConfigFieldsProviderAzureKeyVault from "./BizDeployNodeConfigFieldsProviderAzureKeyVault";
+import BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB from "./BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB";
+import BizDeployNodeConfigFieldsProviderBaiduCloudBLB from "./BizDeployNodeConfigFieldsProviderBaiduCloudBLB";
+import BizDeployNodeConfigFieldsProviderBaiduCloudCDN from "./BizDeployNodeConfigFieldsProviderBaiduCloudCDN";
+import BizDeployNodeConfigFieldsProviderBaishanCDN from "./BizDeployNodeConfigFieldsProviderBaishanCDN";
+import BizDeployNodeConfigFieldsProviderBaotaPanelConsole from "./BizDeployNodeConfigFieldsProviderBaotaPanelConsole";
+import BizDeployNodeConfigFieldsProviderBaotaPanelSite from "./BizDeployNodeConfigFieldsProviderBaotaPanelSite";
+import BizDeployNodeConfigFieldsProviderBaotaWAFSite from "./BizDeployNodeConfigFieldsProviderBaotaWAFSite";
+import BizDeployNodeConfigFieldsProviderBunnyCDN from "./BizDeployNodeConfigFieldsProviderBunnyCDN";
+import BizDeployNodeConfigFieldsProviderBytePlusCDN from "./BizDeployNodeConfigFieldsProviderBytePlusCDN";
+import BizDeployNodeConfigFieldsProviderCdnfly from "./BizDeployNodeConfigFieldsProviderCdnfly";
+import BizDeployNodeConfigFieldsProviderCTCCCloudAO from "./BizDeployNodeConfigFieldsProviderCTCCCloudAO";
+import BizDeployNodeConfigFieldsProviderCTCCCloudCDN from "./BizDeployNodeConfigFieldsProviderCTCCCloudCDN";
+import BizDeployNodeConfigFieldsProviderCTCCCloudELB from "./BizDeployNodeConfigFieldsProviderCTCCCloudELB";
+import BizDeployNodeConfigFieldsProviderCTCCCloudICDN from "./BizDeployNodeConfigFieldsProviderCTCCCloudICDN";
+import BizDeployNodeConfigFieldsProviderCTCCCloudLVDN from "./BizDeployNodeConfigFieldsProviderCTCCCloudLVDN";
+import BizDeployNodeConfigFieldsProviderDogeCloudCDN from "./BizDeployNodeConfigFieldsProviderDogeCloudCDN";
+import BizDeployNodeConfigFieldsProviderEdgioApplications from "./BizDeployNodeConfigFieldsProviderEdgioApplications";
+import BizDeployNodeConfigFieldsProviderFlexCDN from "./BizDeployNodeConfigFieldsProviderFlexCDN";
+import BizDeployNodeConfigFieldsProviderGcoreCDN from "./BizDeployNodeConfigFieldsProviderGcoreCDN";
+import BizDeployNodeConfigFieldsProviderGoEdge from "./BizDeployNodeConfigFieldsProviderGoEdge";
+import BizDeployNodeConfigFieldsProviderHuaweiCloudCDN from "./BizDeployNodeConfigFieldsProviderHuaweiCloudCDN";
+import BizDeployNodeConfigFieldsProviderHuaweiCloudELB from "./BizDeployNodeConfigFieldsProviderHuaweiCloudELB";
+import BizDeployNodeConfigFieldsProviderHuaweiCloudWAF from "./BizDeployNodeConfigFieldsProviderHuaweiCloudWAF";
+import BizDeployNodeConfigFieldsProviderJDCloudALB from "./BizDeployNodeConfigFieldsProviderJDCloudALB";
+import BizDeployNodeConfigFieldsProviderJDCloudCDN from "./BizDeployNodeConfigFieldsProviderJDCloudCDN";
+import BizDeployNodeConfigFieldsProviderJDCloudLive from "./BizDeployNodeConfigFieldsProviderJDCloudLive";
+import BizDeployNodeConfigFieldsProviderJDCloudVOD from "./BizDeployNodeConfigFieldsProviderJDCloudVOD";
+import BizDeployNodeConfigFieldsProviderKong from "./BizDeployNodeConfigFieldsProviderKong";
+import BizDeployNodeConfigFieldsProviderKubernetesSecret from "./BizDeployNodeConfigFieldsProviderKubernetesSecret";
+import BizDeployNodeConfigFieldsProviderLeCDN from "./BizDeployNodeConfigFieldsProviderLeCDN";
+import BizDeployNodeConfigFieldsProviderLocal from "./BizDeployNodeConfigFieldsProviderLocal";
+import BizDeployNodeConfigFieldsProviderNetlifySite from "./BizDeployNodeConfigFieldsProviderNetlifySite";
+import BizDeployNodeConfigFieldsProviderProxmoxVE from "./BizDeployNodeConfigFieldsProviderProxmoxVE";
+import BizDeployNodeConfigFieldsProviderQiniuCDN from "./BizDeployNodeConfigFieldsProviderQiniuCDN";
+import BizDeployNodeConfigFieldsProviderQiniuKodo from "./BizDeployNodeConfigFieldsProviderQiniuKodo";
+import BizDeployNodeConfigFieldsProviderQiniuPili from "./BizDeployNodeConfigFieldsProviderQiniuPili";
+import BizDeployNodeConfigFieldsProviderRainYunRCDN from "./BizDeployNodeConfigFieldsProviderRainYunRCDN";
+import BizDeployNodeConfigFieldsProviderRatPanelSite from "./BizDeployNodeConfigFieldsProviderRatPanelSite";
+import BizDeployNodeConfigFieldsProviderSafeLine from "./BizDeployNodeConfigFieldsProviderSafeLine";
+import BizDeployNodeConfigFieldsProviderSSH from "./BizDeployNodeConfigFieldsProviderSSH";
+import BizDeployNodeConfigFieldsProviderTencentCloudCDN from "./BizDeployNodeConfigFieldsProviderTencentCloudCDN";
+import BizDeployNodeConfigFieldsProviderTencentCloudCLB from "./BizDeployNodeConfigFieldsProviderTencentCloudCLB";
+import BizDeployNodeConfigFieldsProviderTencentCloudCOS from "./BizDeployNodeConfigFieldsProviderTencentCloudCOS";
+import BizDeployNodeConfigFieldsProviderTencentCloudCSS from "./BizDeployNodeConfigFieldsProviderTencentCloudCSS";
+import BizDeployNodeConfigFieldsProviderTencentCloudECDN from "./BizDeployNodeConfigFieldsProviderTencentCloudECDN";
+import BizDeployNodeConfigFieldsProviderTencentCloudEO from "./BizDeployNodeConfigFieldsProviderTencentCloudEO";
+import BizDeployNodeConfigFieldsProviderTencentCloudGAAP from "./BizDeployNodeConfigFieldsProviderTencentCloudGAAP";
+import BizDeployNodeConfigFieldsProviderTencentCloudSCF from "./BizDeployNodeConfigFieldsProviderTencentCloudSCF";
+import BizDeployNodeConfigFieldsProviderTencentCloudSSL from "./BizDeployNodeConfigFieldsProviderTencentCloudSSL";
+import BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy from "./BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy";
+import BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate from "./BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate";
+import BizDeployNodeConfigFieldsProviderTencentCloudVOD from "./BizDeployNodeConfigFieldsProviderTencentCloudVOD";
+import BizDeployNodeConfigFieldsProviderTencentCloudWAF from "./BizDeployNodeConfigFieldsProviderTencentCloudWAF";
+import BizDeployNodeConfigFieldsProviderUCloudUCDN from "./BizDeployNodeConfigFieldsProviderUCloudUCDN";
+import BizDeployNodeConfigFieldsProviderUCloudUS3 from "./BizDeployNodeConfigFieldsProviderUCloudUS3";
+import BizDeployNodeConfigFieldsProviderUniCloudWebHost from "./BizDeployNodeConfigFieldsProviderUniCloudWebHost";
+import BizDeployNodeConfigFieldsProviderUpyunCDN from "./BizDeployNodeConfigFieldsProviderUpyunCDN";
+import BizDeployNodeConfigFieldsProviderUpyunFile from "./BizDeployNodeConfigFieldsProviderUpyunFile";
+import BizDeployNodeConfigFieldsProviderVolcEngineALB from "./BizDeployNodeConfigFieldsProviderVolcEngineALB";
+import BizDeployNodeConfigFieldsProviderVolcEngineCDN from "./BizDeployNodeConfigFieldsProviderVolcEngineCDN";
+import BizDeployNodeConfigFieldsProviderVolcEngineCertCenter from "./BizDeployNodeConfigFieldsProviderVolcEngineCertCenter";
+import BizDeployNodeConfigFieldsProviderVolcEngineCLB from "./BizDeployNodeConfigFieldsProviderVolcEngineCLB";
+import BizDeployNodeConfigFieldsProviderVolcEngineDCDN from "./BizDeployNodeConfigFieldsProviderVolcEngineDCDN";
+import BizDeployNodeConfigFieldsProviderVolcEngineImageX from "./BizDeployNodeConfigFieldsProviderVolcEngineImageX";
+import BizDeployNodeConfigFieldsProviderVolcEngineLive from "./BizDeployNodeConfigFieldsProviderVolcEngineLive";
+import BizDeployNodeConfigFieldsProviderVolcEngineTOS from "./BizDeployNodeConfigFieldsProviderVolcEngineTOS";
+import BizDeployNodeConfigFieldsProviderWangsuCDN from "./BizDeployNodeConfigFieldsProviderWangsuCDN";
+import BizDeployNodeConfigFieldsProviderWangsuCDNPro from "./BizDeployNodeConfigFieldsProviderWangsuCDNPro";
+import BizDeployNodeConfigFieldsProviderWangsuCertificate from "./BizDeployNodeConfigFieldsProviderWangsuCertificate";
+import BizDeployNodeConfigFieldsProviderWebhook from "./BizDeployNodeConfigFieldsProviderWebhook";
 import { NodeType } from "../nodes/typings";
 
 export interface BizDeployNodeConfigFormProps {
@@ -174,196 +174,289 @@ const BizDeployNodeConfigForm = ({ node, ...props }: BizDeployNodeConfigFormProp
 
   const NestedProviderConfigFields = useMemo(() => {
     /*
-        注意：如果追加新的子组件，请保持以 ASCII 排序。
-        NOTICE: If you add new child component, please keep ASCII order.
-       */
+      注意：如果追加新的子组件，请保持以 ASCII 排序。
+      NOTICE: If you add new child component, please keep ASCII order.
+     */
     switch (fieldProvider) {
-      case DEPLOYMENT_PROVIDERS["1PANEL_CONSOLE"]:
-        return BizDeployNodeConfigFormProvider1PanelConsole;
-      case DEPLOYMENT_PROVIDERS["1PANEL_SITE"]:
-        return BizDeployNodeConfigFormProvider1PanelSite;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_ALB:
-        return BizDeployNodeConfigFormProviderAliyunALB;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_APIGW:
-        return BizDeployNodeConfigFormProviderAliyunAPIGW;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_CAS:
-        return BizDeployNodeConfigFormProviderAliyunCAS;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_CAS_DEPLOY:
-        return BizDeployNodeConfigFormProviderAliyunCASDeploy;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_CLB:
-        return BizDeployNodeConfigFormProviderAliyunCLB;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_CDN:
-        return BizDeployNodeConfigFormProviderAliyunCDN;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_DCDN:
-        return BizDeployNodeConfigFormProviderAliyunDCDN;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_DDOS:
-        return BizDeployNodeConfigFormProviderAliyunDDoS;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_ESA:
-        return BizDeployNodeConfigFormProviderAliyunESA;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_FC:
-        return BizDeployNodeConfigFormProviderAliyunFC;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_GA:
-        return BizDeployNodeConfigFormProviderAliyunGA;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_LIVE:
-        return BizDeployNodeConfigFormProviderAliyunLive;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_NLB:
-        return BizDeployNodeConfigFormProviderAliyunNLB;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_OSS:
-        return BizDeployNodeConfigFormProviderAliyunOSS;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_VOD:
-        return BizDeployNodeConfigFormProviderAliyunVOD;
-      case DEPLOYMENT_PROVIDERS.ALIYUN_WAF:
-        return BizDeployNodeConfigFormProviderAliyunWAF;
-      case DEPLOYMENT_PROVIDERS.APISIX:
-        return BizDeployNodeConfigFormProviderAPISIX;
-      case DEPLOYMENT_PROVIDERS.AWS_ACM:
-        return BizDeployNodeConfigFormProviderAWSACM;
-      case DEPLOYMENT_PROVIDERS.AWS_CLOUDFRONT:
-        return BizDeployNodeConfigFormProviderAWSCloudFront;
-      case DEPLOYMENT_PROVIDERS.AWS_IAM:
-        return BizDeployNodeConfigFormProviderAWSIAM;
-      case DEPLOYMENT_PROVIDERS.AZURE_KEYVAULT:
-        return BizDeployNodeConfigFormProviderAzureKeyVault;
-      case DEPLOYMENT_PROVIDERS.BAIDUCLOUD_APPBLB:
-        return BizDeployNodeConfigFormProviderBaiduCloudAppBLB;
-      case DEPLOYMENT_PROVIDERS.BAIDUCLOUD_BLB:
-        return BizDeployNodeConfigFormProviderBaiduCloudBLB;
-      case DEPLOYMENT_PROVIDERS.BAIDUCLOUD_CDN:
-        return BizDeployNodeConfigFormProviderBaiduCloudCDN;
-      case DEPLOYMENT_PROVIDERS.BAISHAN_CDN:
-        return BizDeployNodeConfigFormProviderBaishanCDN;
-      case DEPLOYMENT_PROVIDERS.BAOTAPANEL_CONSOLE:
-        return BizDeployNodeConfigFormProviderBaotaPanelConsole;
-      case DEPLOYMENT_PROVIDERS.BAOTAPANEL_SITE:
-        return BizDeployNodeConfigFormProviderBaotaPanelSite;
-      case DEPLOYMENT_PROVIDERS.BAOTAWAF_SITE:
-        return BizDeployNodeConfigFormProviderBaotaWAFSite;
-      case DEPLOYMENT_PROVIDERS.BUNNY_CDN:
-        return BizDeployNodeConfigFormProviderBunnyCDN;
-      case DEPLOYMENT_PROVIDERS.BYTEPLUS_CDN:
-        return BizDeployNodeConfigFormProviderBytePlusCDN;
-      case DEPLOYMENT_PROVIDERS.CDNFLY:
-        return BizDeployNodeConfigFormProviderCdnfly;
-      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_AO:
-        return BizDeployNodeConfigFormProviderCTCCCloudAO;
-      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_CDN:
-        return BizDeployNodeConfigFormProviderCTCCCloudCDN;
-      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_ELB:
-        return BizDeployNodeConfigFormProviderCTCCCloudELB;
-      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_ICDN:
-        return BizDeployNodeConfigFormProviderCTCCCloudICDN;
-      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_LVDN:
-        return BizDeployNodeConfigFormProviderCTCCCloudLVDN;
-      case DEPLOYMENT_PROVIDERS.DOGECLOUD_CDN:
-        return BizDeployNodeConfigFormProviderDogeCloudCDN;
-      case DEPLOYMENT_PROVIDERS.EDGIO_APPLICATIONS:
-        return BizDeployNodeConfigFormProviderEdgioApplications;
-      case DEPLOYMENT_PROVIDERS.FLEXCDN:
-        return BizDeployNodeConfigFormProviderFlexCDN;
-      case DEPLOYMENT_PROVIDERS.GCORE_CDN:
-        return BizDeployNodeConfigFormProviderGcoreCDN;
-      case DEPLOYMENT_PROVIDERS.GOEDGE:
-        return BizDeployNodeConfigFormProviderGoEdge;
-      case DEPLOYMENT_PROVIDERS.HUAWEICLOUD_CDN:
-        return BizDeployNodeConfigFormProviderHuaweiCloudCDN;
-      case DEPLOYMENT_PROVIDERS.HUAWEICLOUD_ELB:
-        return BizDeployNodeConfigFormProviderHuaweiCloudELB;
-      case DEPLOYMENT_PROVIDERS.HUAWEICLOUD_WAF:
-        return BizDeployNodeConfigFormProviderHuaweiCloudWAF;
-      case DEPLOYMENT_PROVIDERS.JDCLOUD_ALB:
-        return BizDeployNodeConfigFormProviderJDCloudALB;
-      case DEPLOYMENT_PROVIDERS.JDCLOUD_CDN:
-        return BizDeployNodeConfigFormProviderJDCloudCDN;
-      case DEPLOYMENT_PROVIDERS.JDCLOUD_LIVE:
-        return BizDeployNodeConfigFormProviderJDCloudLive;
-      case DEPLOYMENT_PROVIDERS.JDCLOUD_VOD:
-        return BizDeployNodeConfigFormProviderJDCloudVOD;
-      case DEPLOYMENT_PROVIDERS.KONG:
-        return BizDeployNodeConfigFormProviderKong;
-      case DEPLOYMENT_PROVIDERS.KUBERNETES_SECRET:
-        return BizDeployNodeConfigFormProviderKubernetesSecret;
-      case DEPLOYMENT_PROVIDERS.LECDN:
-        return BizDeployNodeConfigFormProviderLeCDN;
-      case DEPLOYMENT_PROVIDERS.LOCAL:
-        return BizDeployNodeConfigFormProviderLocal;
-      case DEPLOYMENT_PROVIDERS.NETLIFY_SITE:
-        return BizDeployNodeConfigFormProviderNetlifySite;
-      case DEPLOYMENT_PROVIDERS.PROXMOXVE:
-        return BizDeployNodeConfigFormProviderProxmoxVE;
-      case DEPLOYMENT_PROVIDERS.QINIU_CDN:
-        return BizDeployNodeConfigFormProviderQiniuCDN;
-      case DEPLOYMENT_PROVIDERS.QINIU_KODO:
-        return BizDeployNodeConfigFormProviderQiniuKodo;
-      case DEPLOYMENT_PROVIDERS.QINIU_PILI:
-        return BizDeployNodeConfigFormProviderQiniuPili;
-      case DEPLOYMENT_PROVIDERS.RAINYUN_RCDN:
-        return BizDeployNodeConfigFormProviderRainYunRCDN;
-      case DEPLOYMENT_PROVIDERS.RATPANEL_SITE:
-        return BizDeployNodeConfigFormProviderRatPanelSite;
-      case DEPLOYMENT_PROVIDERS.SAFELINE:
-        return BizDeployNodeConfigFormProviderSafeLine;
-      case DEPLOYMENT_PROVIDERS.SSH:
-        return BizDeployNodeConfigFormProviderSSH;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_CDN:
-        return BizDeployNodeConfigFormProviderTencentCloudCDN;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_CLB:
-        return BizDeployNodeConfigFormProviderTencentCloudCLB;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_COS:
-        return BizDeployNodeConfigFormProviderTencentCloudCOS;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_CSS:
-        return BizDeployNodeConfigFormProviderTencentCloudCSS;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_ECDN:
-        return BizDeployNodeConfigFormProviderTencentCloudECDN;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_EO:
-        return BizDeployNodeConfigFormProviderTencentCloudEO;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_GAAP:
-        return BizDeployNodeConfigFormProviderTencentCloudGAAP;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SCF:
-        return BizDeployNodeConfigFormProviderTencentCloudSCF;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SSL:
-        return BizDeployNodeConfigFormProviderTencentCloudSSL;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SSL_DEPLOY:
-        return BizDeployNodeConfigFormProviderTencentCloudSSLDeploy;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SSL_UPDATE:
-        return BizDeployNodeConfigFormProviderTencentCloudSSLUpdate;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_VOD:
-        return BizDeployNodeConfigFormProviderTencentCloudVOD;
-      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_WAF:
-        return BizDeployNodeConfigFormProviderTencentCloudWAF;
-      case DEPLOYMENT_PROVIDERS.UCLOUD_UCDN:
-        return BizDeployNodeConfigFormProviderUCloudUCDN;
-      case DEPLOYMENT_PROVIDERS.UCLOUD_US3:
-        return BizDeployNodeConfigFormProviderUCloudUS3;
-      case DEPLOYMENT_PROVIDERS.UNICLOUD_WEBHOST:
-        return BizDeployNodeConfigFormProviderUniCloudWebHost;
-      case DEPLOYMENT_PROVIDERS.UPYUN_CDN:
-        return BizDeployNodeConfigFormProviderUpyunCDN;
-      case DEPLOYMENT_PROVIDERS.UPYUN_FILE:
-        return BizDeployNodeConfigFormProviderUpyunFile;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_ALB:
-        return BizDeployNodeConfigFormProviderVolcEngineALB;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_CDN:
-        return BizDeployNodeConfigFormProviderVolcEngineCDN;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_CERTCENTER:
-        return BizDeployNodeConfigFormProviderVolcEngineCertCenter;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_CLB:
-        return BizDeployNodeConfigFormProviderVolcEngineCLB;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_DCDN:
-        return BizDeployNodeConfigFormProviderVolcEngineDCDN;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_IMAGEX:
-        return BizDeployNodeConfigFormProviderVolcEngineImageX;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_LIVE:
-        return BizDeployNodeConfigFormProviderVolcEngineLive;
-      case DEPLOYMENT_PROVIDERS.VOLCENGINE_TOS:
-        return BizDeployNodeConfigFormProviderVolcEngineTOS;
-      case DEPLOYMENT_PROVIDERS.WANGSU_CDN:
-        return BizDeployNodeConfigFormProviderWangsuCDN;
-      case DEPLOYMENT_PROVIDERS.WANGSU_CDNPRO:
-        return BizDeployNodeConfigFormProviderWangsuCDNPro;
-      case DEPLOYMENT_PROVIDERS.WANGSU_CERTIFICATE:
-        return BizDeployNodeConfigFormProviderWangsuCertificate;
-      case DEPLOYMENT_PROVIDERS.WEBHOOK:
-        return BizDeployNodeConfigFormProviderWebhook;
+      case DEPLOYMENT_PROVIDERS["1PANEL_CONSOLE"]: {
+        return BizDeployNodeConfigFieldsProvider1PanelConsole;
+      }
+      case DEPLOYMENT_PROVIDERS["1PANEL_SITE"]: {
+        return BizDeployNodeConfigFieldsProvider1PanelSite;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_ALB: {
+        return BizDeployNodeConfigFieldsProviderAliyunALB;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_APIGW: {
+        return BizDeployNodeConfigFieldsProviderAliyunAPIGW;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_CAS: {
+        return BizDeployNodeConfigFieldsProviderAliyunCAS;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_CAS_DEPLOY: {
+        return BizDeployNodeConfigFieldsProviderAliyunCASDeploy;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_CLB: {
+        return BizDeployNodeConfigFieldsProviderAliyunCLB;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_CDN: {
+        return BizDeployNodeConfigFieldsProviderAliyunCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_DCDN: {
+        return BizDeployNodeConfigFieldsProviderAliyunDCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_DDOS: {
+        return BizDeployNodeConfigFieldsProviderAliyunDDoS;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_ESA: {
+        return BizDeployNodeConfigFieldsProviderAliyunESA;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_FC: {
+        return BizDeployNodeConfigFieldsProviderAliyunFC;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_GA: {
+        return BizDeployNodeConfigFieldsProviderAliyunGA;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_LIVE: {
+        return BizDeployNodeConfigFieldsProviderAliyunLive;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_NLB: {
+        return BizDeployNodeConfigFieldsProviderAliyunNLB;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_OSS: {
+        return BizDeployNodeConfigFieldsProviderAliyunOSS;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_VOD: {
+        return BizDeployNodeConfigFieldsProviderAliyunVOD;
+      }
+      case DEPLOYMENT_PROVIDERS.ALIYUN_WAF: {
+        return BizDeployNodeConfigFieldsProviderAliyunWAF;
+      }
+      case DEPLOYMENT_PROVIDERS.APISIX: {
+        return BizDeployNodeConfigFieldsProviderAPISIX;
+      }
+      case DEPLOYMENT_PROVIDERS.AWS_ACM: {
+        return BizDeployNodeConfigFieldsProviderAWSACM;
+      }
+      case DEPLOYMENT_PROVIDERS.AWS_CLOUDFRONT: {
+        return BizDeployNodeConfigFieldsProviderAWSCloudFront;
+      }
+      case DEPLOYMENT_PROVIDERS.AWS_IAM: {
+        return BizDeployNodeConfigFieldsProviderAWSIAM;
+      }
+      case DEPLOYMENT_PROVIDERS.AZURE_KEYVAULT: {
+        return BizDeployNodeConfigFieldsProviderAzureKeyVault;
+      }
+      case DEPLOYMENT_PROVIDERS.BAIDUCLOUD_APPBLB: {
+        return BizDeployNodeConfigFieldsProviderBaiduCloudAppBLB;
+      }
+      case DEPLOYMENT_PROVIDERS.BAIDUCLOUD_BLB: {
+        return BizDeployNodeConfigFieldsProviderBaiduCloudBLB;
+      }
+      case DEPLOYMENT_PROVIDERS.BAIDUCLOUD_CDN: {
+        return BizDeployNodeConfigFieldsProviderBaiduCloudCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.BAISHAN_CDN: {
+        return BizDeployNodeConfigFieldsProviderBaishanCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.BAOTAPANEL_CONSOLE: {
+        return BizDeployNodeConfigFieldsProviderBaotaPanelConsole;
+      }
+      case DEPLOYMENT_PROVIDERS.BAOTAPANEL_SITE: {
+        return BizDeployNodeConfigFieldsProviderBaotaPanelSite;
+      }
+      case DEPLOYMENT_PROVIDERS.BAOTAWAF_SITE: {
+        return BizDeployNodeConfigFieldsProviderBaotaWAFSite;
+      }
+      case DEPLOYMENT_PROVIDERS.BUNNY_CDN: {
+        return BizDeployNodeConfigFieldsProviderBunnyCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.BYTEPLUS_CDN: {
+        return BizDeployNodeConfigFieldsProviderBytePlusCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.CDNFLY: {
+        return BizDeployNodeConfigFieldsProviderCdnfly;
+      }
+      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_AO: {
+        return BizDeployNodeConfigFieldsProviderCTCCCloudAO;
+      }
+      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_CDN: {
+        return BizDeployNodeConfigFieldsProviderCTCCCloudCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_ELB: {
+        return BizDeployNodeConfigFieldsProviderCTCCCloudELB;
+      }
+      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_ICDN: {
+        return BizDeployNodeConfigFieldsProviderCTCCCloudICDN;
+      }
+      case DEPLOYMENT_PROVIDERS.CTCCCLOUD_LVDN: {
+        return BizDeployNodeConfigFieldsProviderCTCCCloudLVDN;
+      }
+      case DEPLOYMENT_PROVIDERS.DOGECLOUD_CDN: {
+        return BizDeployNodeConfigFieldsProviderDogeCloudCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.EDGIO_APPLICATIONS: {
+        return BizDeployNodeConfigFieldsProviderEdgioApplications;
+      }
+      case DEPLOYMENT_PROVIDERS.FLEXCDN: {
+        return BizDeployNodeConfigFieldsProviderFlexCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.GCORE_CDN: {
+        return BizDeployNodeConfigFieldsProviderGcoreCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.GOEDGE: {
+        return BizDeployNodeConfigFieldsProviderGoEdge;
+      }
+      case DEPLOYMENT_PROVIDERS.HUAWEICLOUD_CDN: {
+        return BizDeployNodeConfigFieldsProviderHuaweiCloudCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.HUAWEICLOUD_ELB: {
+        return BizDeployNodeConfigFieldsProviderHuaweiCloudELB;
+      }
+      case DEPLOYMENT_PROVIDERS.HUAWEICLOUD_WAF: {
+        return BizDeployNodeConfigFieldsProviderHuaweiCloudWAF;
+      }
+      case DEPLOYMENT_PROVIDERS.JDCLOUD_ALB: {
+        return BizDeployNodeConfigFieldsProviderJDCloudALB;
+      }
+      case DEPLOYMENT_PROVIDERS.JDCLOUD_CDN: {
+        return BizDeployNodeConfigFieldsProviderJDCloudCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.JDCLOUD_LIVE: {
+        return BizDeployNodeConfigFieldsProviderJDCloudLive;
+      }
+      case DEPLOYMENT_PROVIDERS.JDCLOUD_VOD: {
+        return BizDeployNodeConfigFieldsProviderJDCloudVOD;
+      }
+      case DEPLOYMENT_PROVIDERS.KONG: {
+        return BizDeployNodeConfigFieldsProviderKong;
+      }
+      case DEPLOYMENT_PROVIDERS.KUBERNETES_SECRET: {
+        return BizDeployNodeConfigFieldsProviderKubernetesSecret;
+      }
+      case DEPLOYMENT_PROVIDERS.LECDN: {
+        return BizDeployNodeConfigFieldsProviderLeCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.LOCAL: {
+        return BizDeployNodeConfigFieldsProviderLocal;
+      }
+      case DEPLOYMENT_PROVIDERS.NETLIFY_SITE: {
+        return BizDeployNodeConfigFieldsProviderNetlifySite;
+      }
+      case DEPLOYMENT_PROVIDERS.PROXMOXVE: {
+        return BizDeployNodeConfigFieldsProviderProxmoxVE;
+      }
+      case DEPLOYMENT_PROVIDERS.QINIU_CDN: {
+        return BizDeployNodeConfigFieldsProviderQiniuCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.QINIU_KODO: {
+        return BizDeployNodeConfigFieldsProviderQiniuKodo;
+      }
+      case DEPLOYMENT_PROVIDERS.QINIU_PILI: {
+        return BizDeployNodeConfigFieldsProviderQiniuPili;
+      }
+      case DEPLOYMENT_PROVIDERS.RAINYUN_RCDN: {
+        return BizDeployNodeConfigFieldsProviderRainYunRCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.RATPANEL_SITE: {
+        return BizDeployNodeConfigFieldsProviderRatPanelSite;
+      }
+      case DEPLOYMENT_PROVIDERS.SAFELINE: {
+        return BizDeployNodeConfigFieldsProviderSafeLine;
+      }
+      case DEPLOYMENT_PROVIDERS.SSH: {
+        return BizDeployNodeConfigFieldsProviderSSH;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_CDN: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_CLB: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudCLB;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_COS: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudCOS;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_CSS: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudCSS;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_ECDN: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudECDN;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_EO: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudEO;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_GAAP: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudGAAP;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SCF: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudSCF;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SSL: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudSSL;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SSL_DEPLOY: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudSSLDeploy;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_SSL_UPDATE: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudSSLUpdate;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_VOD: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudVOD;
+      }
+      case DEPLOYMENT_PROVIDERS.TENCENTCLOUD_WAF: {
+        return BizDeployNodeConfigFieldsProviderTencentCloudWAF;
+      }
+      case DEPLOYMENT_PROVIDERS.UCLOUD_UCDN: {
+        return BizDeployNodeConfigFieldsProviderUCloudUCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.UCLOUD_US3: {
+        return BizDeployNodeConfigFieldsProviderUCloudUS3;
+      }
+      case DEPLOYMENT_PROVIDERS.UNICLOUD_WEBHOST: {
+        return BizDeployNodeConfigFieldsProviderUniCloudWebHost;
+      }
+      case DEPLOYMENT_PROVIDERS.UPYUN_CDN: {
+        return BizDeployNodeConfigFieldsProviderUpyunCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.UPYUN_FILE: {
+        return BizDeployNodeConfigFieldsProviderUpyunFile;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_ALB: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineALB;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_CDN: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_CERTCENTER: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineCertCenter;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_CLB: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineCLB;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_DCDN: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineDCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_IMAGEX: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineImageX;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_LIVE: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineLive;
+      }
+      case DEPLOYMENT_PROVIDERS.VOLCENGINE_TOS: {
+        return BizDeployNodeConfigFieldsProviderVolcEngineTOS;
+      }
+      case DEPLOYMENT_PROVIDERS.WANGSU_CDN: {
+        return BizDeployNodeConfigFieldsProviderWangsuCDN;
+      }
+      case DEPLOYMENT_PROVIDERS.WANGSU_CDNPRO: {
+        return BizDeployNodeConfigFieldsProviderWangsuCDNPro;
+      }
+      case DEPLOYMENT_PROVIDERS.WANGSU_CERTIFICATE: {
+        return BizDeployNodeConfigFieldsProviderWangsuCertificate;
+      }
+      case DEPLOYMENT_PROVIDERS.WEBHOOK: {
+        return BizDeployNodeConfigFieldsProviderWebhook;
+      }
     }
   }, [fieldProvider]);
 
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderDiscordBot.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderDiscordBot.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderDiscordBot.tsx
rename to ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderDiscordBot.tsx
index 3a395f382..6dbedc94b 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderDiscordBot.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderDiscordBot.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizNotifyNodeConfigFormProviderDiscordBot = () => {
+const BizNotifyNodeConfigFieldsProviderDiscordBot = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -42,7 +42,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizNotifyNodeConfigFormProviderDiscordBot, {
+const _default = Object.assign(BizNotifyNodeConfigFieldsProviderDiscordBot, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderEmail.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderEmail.tsx
similarity index 92%
rename from ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderEmail.tsx
rename to ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderEmail.tsx
index 65d5c848f..f5b3ef603 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderEmail.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderEmail.tsx
@@ -7,7 +7,7 @@ import { validEmailAddress } from "@/utils/validators";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizNotifyNodeConfigFormProviderEmail = () => {
+const BizNotifyNodeConfigFieldsProviderEmail = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -50,7 +50,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizNotifyNodeConfigFormProviderEmail, {
+const _default = Object.assign(BizNotifyNodeConfigFieldsProviderEmail, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderMattermost.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderMattermost.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderMattermost.tsx
rename to ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderMattermost.tsx
index 89f442778..68bda8336 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderMattermost.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderMattermost.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizNotifyNodeConfigFormProviderMattermost = () => {
+const BizNotifyNodeConfigFieldsProviderMattermost = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -42,7 +42,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizNotifyNodeConfigFormProviderMattermost, {
+const _default = Object.assign(BizNotifyNodeConfigFieldsProviderMattermost, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderSlackBot.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderSlackBot.tsx
similarity index 90%
rename from ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderSlackBot.tsx
rename to ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderSlackBot.tsx
index 286d5c40a..661016cce 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderSlackBot.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderSlackBot.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizNotifyNodeConfigFormProviderSlackBot = () => {
+const BizNotifyNodeConfigFieldsProviderSlackBot = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -42,7 +42,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizNotifyNodeConfigFormProviderSlackBot, {
+const _default = Object.assign(BizNotifyNodeConfigFieldsProviderSlackBot, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderTelegramBot.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderTelegramBot.tsx
similarity index 92%
rename from ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderTelegramBot.tsx
rename to ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderTelegramBot.tsx
index 2c4ba7ae7..9a0e387e1 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderTelegramBot.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderTelegramBot.tsx
@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizNotifyNodeConfigFormProviderTelegramBot = () => {
+const BizNotifyNodeConfigFieldsProviderTelegramBot = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -53,7 +53,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizNotifyNodeConfigFormProviderTelegramBot, {
+const _default = Object.assign(BizNotifyNodeConfigFieldsProviderTelegramBot, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderWebhook.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderWebhook.tsx
similarity index 94%
rename from ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderWebhook.tsx
rename to ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderWebhook.tsx
index 005e297b3..247f568f4 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderWebhook.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderWebhook.tsx
@@ -8,7 +8,7 @@ import Tips from "@/components/Tips";
 
 import { useFormNestedFieldsContext } from "./_context";
 
-const BizNotifyNodeConfigFormProviderWebhook = () => {
+const BizNotifyNodeConfigFieldsProviderWebhook = () => {
   const { i18n, t } = useTranslation();
 
   const { parentNamePath } = useFormNestedFieldsContext();
@@ -79,7 +79,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
   });
 };
 
-const _default = Object.assign(BizNotifyNodeConfigFormProviderWebhook, {
+const _default = Object.assign(BizNotifyNodeConfigFieldsProviderWebhook, {
   getInitialValues,
   getSchema,
 });
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx
index 881e075c3..a913e5986 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx
@@ -15,12 +15,12 @@ import { useAntdForm, useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 
 import { FormNestedFieldsContextProvider, NodeFormContextProvider } from "./_context";
-import BizNotifyNodeConfigFormProviderDiscordBot from "./BizNotifyNodeConfigFormProviderDiscordBot";
-import BizNotifyNodeConfigFormProviderEmail from "./BizNotifyNodeConfigFormProviderEmail";
-import BizNotifyNodeConfigFormProviderMattermost from "./BizNotifyNodeConfigFormProviderMattermost";
-import BizNotifyNodeConfigFormProviderSlackBot from "./BizNotifyNodeConfigFormProviderSlackBot";
-import BizNotifyNodeConfigFormProviderTelegramBot from "./BizNotifyNodeConfigFormProviderTelegramBot";
-import BizNotifyNodeConfigFormProviderWebhook from "./BizNotifyNodeConfigFormProviderWebhook";
+import BizNotifyNodeConfigFieldsProviderDiscordBot from "./BizNotifyNodeConfigFieldsProviderDiscordBot";
+import BizNotifyNodeConfigFieldsProviderEmail from "./BizNotifyNodeConfigFieldsProviderEmail";
+import BizNotifyNodeConfigFieldsProviderMattermost from "./BizNotifyNodeConfigFieldsProviderMattermost";
+import BizNotifyNodeConfigFieldsProviderSlackBot from "./BizNotifyNodeConfigFieldsProviderSlackBot";
+import BizNotifyNodeConfigFieldsProviderTelegramBot from "./BizNotifyNodeConfigFieldsProviderTelegramBot";
+import BizNotifyNodeConfigFieldsProviderWebhook from "./BizNotifyNodeConfigFieldsProviderWebhook";
 import { NodeType } from "../nodes/typings";
 
 export interface BizNotifyNodeConfigFormProps {
@@ -58,18 +58,24 @@ const BizNotifyNodeConfigForm = ({ node, ...props }: BizNotifyNodeConfigFormProp
       NOTICE: If you add new child component, please keep ASCII order.
       */
     switch (fieldProvider) {
-      case NOTIFICATION_PROVIDERS.DISCORDBOT:
-        return BizNotifyNodeConfigFormProviderDiscordBot;
-      case NOTIFICATION_PROVIDERS.EMAIL:
-        return BizNotifyNodeConfigFormProviderEmail;
-      case NOTIFICATION_PROVIDERS.MATTERMOST:
-        return BizNotifyNodeConfigFormProviderMattermost;
-      case NOTIFICATION_PROVIDERS.SLACKBOT:
-        return BizNotifyNodeConfigFormProviderSlackBot;
-      case NOTIFICATION_PROVIDERS.TELEGRAMBOT:
-        return BizNotifyNodeConfigFormProviderTelegramBot;
-      case NOTIFICATION_PROVIDERS.WEBHOOK:
-        return BizNotifyNodeConfigFormProviderWebhook;
+      case NOTIFICATION_PROVIDERS.DISCORDBOT: {
+        return BizNotifyNodeConfigFieldsProviderDiscordBot;
+      }
+      case NOTIFICATION_PROVIDERS.EMAIL: {
+        return BizNotifyNodeConfigFieldsProviderEmail;
+      }
+      case NOTIFICATION_PROVIDERS.MATTERMOST: {
+        return BizNotifyNodeConfigFieldsProviderMattermost;
+      }
+      case NOTIFICATION_PROVIDERS.SLACKBOT: {
+        return BizNotifyNodeConfigFieldsProviderSlackBot;
+      }
+      case NOTIFICATION_PROVIDERS.TELEGRAMBOT: {
+        return BizNotifyNodeConfigFieldsProviderTelegramBot;
+      }
+      case NOTIFICATION_PROVIDERS.WEBHOOK: {
+        return BizNotifyNodeConfigFieldsProviderWebhook;
+      }
     }
   }, [fieldProvider]);
 
diff --git a/ui/src/domain/access.ts b/ui/src/domain/access.ts
index 57fe86919..c38ac5e60 100644
--- a/ui/src/domain/access.ts
+++ b/ui/src/domain/access.ts
@@ -1,485 +1,6 @@
 export interface AccessModel extends BaseModel {
   name: string;
   provider: string;
-  config?: /*
-    注意：如果追加新的类型，请保持以 ASCII 排序。
-    NOTICE: If you add new type, please keep ASCII order.
-  */ Record<string, unknown> &
-    (
-      | AccessConfigFor1Panel
-      | AccessConfigForACMECA
-      | AccessConfigForACMEHttpReq
-      | AccessConfigForAliyun
-      | AccessConfigForAPISIX
-      | AccessConfigForAWS
-      | AccessConfigForAzure
-      | AccessConfigForBaiduCloud
-      | AccessConfigForBaishan
-      | AccessConfigForBaotaPanel
-      | AccessConfigForBaotaWAF
-      | AccessConfigForBunny
-      | AccessConfigForBytePlus
-      | AccessConfigForCacheFly
-      | AccessConfigForCdnfly
-      | AccessConfigForCloudflare
-      | AccessConfigForClouDNS
-      | AccessConfigForCMCCCloud
-      | AccessConfigForConstellix
-      | AccessConfigForCTCCCloud
-      | AccessConfigForDeSEC
-      | AccessConfigForDigitalOcean
-      | AccessConfigForDingTalkBot
-      | AccessConfigForDiscordBot
-      | AccessConfigForDNSLA
-      | AccessConfigForDogeCloud
-      | AccessConfigForDuckDNS
-      | AccessConfigForDynv6
-      | AccessConfigForEdgio
-      | AccessConfigForEmail
-      | AccessConfigForFlexCDN
-      | AccessConfigForGcore
-      | AccessConfigForGname
-      | AccessConfigForGoDaddy
-      | AccessConfigForGoEdge
-      | AccessConfigForGoogleTrustServices
-      | AccessConfigForHetzner
-      | AccessConfigForHuaweiCloud
-      | AccessConfigForJDCloud
-      | AccessConfigForKong
-      | AccessConfigForKubernetes
-      | AccessConfigForLarkBot
-      | AccessConfigForLeCDN
-      | AccessConfigForMattermost
-      | AccessConfigForNamecheap
-      | AccessConfigForNameDotCom
-      | AccessConfigForNameSilo
-      | AccessConfigForNetcup
-      | AccessConfigForNetlify
-      | AccessConfigForPorkbun
-      | AccessConfigForPowerDNS
-      | AccessConfigForProxmoxVE
-      | AccessConfigForQiniu
-      | AccessConfigForRainYun
-      | AccessConfigForRatPanel
-      | AccessConfigForSafeLine
-      | AccessConfigForSlackBot
-      | AccessConfigForSpaceship
-      | AccessConfigForSSH
-      | AccessConfigForSSLCom
-      | AccessConfigForTelegramBot
-      | AccessConfigForTencentCloud
-      | AccessConfigForUCloud
-      | AccessConfigForUniCloud
-      | AccessConfigForUpyun
-      | AccessConfigForVercel
-      | AccessConfigForVolcEngine
-      | AccessConfigForWangsu
-      | AccessConfigForWebhook
-      | AccessConfigForWeComBot
-      | AccessConfigForWestcn
-      | AccessConfigForZeroSSL
-    );
+  config?: Record<string, unknown>;
   reserve?: "ca" | "notif";
 }
-
-// #region AccessConfig
-export type AccessConfigFor1Panel = {
-  serverUrl: string;
-  apiVersion: string;
-  apiKey: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForACMECA = {
-  endpoint: string;
-  eabKid?: string;
-  eabHmacKey?: string;
-};
-
-export type AccessConfigForACMEHttpReq = {
-  endpoint: string;
-  mode?: string;
-  username?: string;
-  password?: string;
-};
-
-export type AccessConfigForAliyun = {
-  accessKeyId: string;
-  accessKeySecret: string;
-  resourceGroupId?: string;
-};
-
-export type AccessConfigForAPISIX = {
-  serverUrl: string;
-  apiKey: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForAWS = {
-  accessKeyId: string;
-  secretAccessKey: string;
-};
-
-export type AccessConfigForAzure = {
-  tenantId: string;
-  clientId: string;
-  clientSecret: string;
-  environment?: string;
-};
-
-export type AccessConfigForBaiduCloud = {
-  accessKeyId: string;
-  secretAccessKey: string;
-};
-
-export type AccessConfigForBaishan = {
-  apiToken: string;
-};
-
-export type AccessConfigForBaotaPanel = {
-  serverUrl: string;
-  apiKey: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForBaotaWAF = {
-  serverUrl: string;
-  apiKey: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForBunny = {
-  apiKey: string;
-};
-
-export type AccessConfigForBytePlus = {
-  accessKey: string;
-  secretKey: string;
-};
-
-export type AccessConfigForCacheFly = {
-  apiToken: string;
-};
-
-export type AccessConfigForCdnfly = {
-  serverUrl: string;
-  apiKey: string;
-  apiSecret: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForCloudflare = {
-  dnsApiToken: string;
-  zoneApiToken?: string;
-};
-
-export type AccessConfigForClouDNS = {
-  authId: string;
-  authPassword: string;
-};
-
-export type AccessConfigForCMCCCloud = {
-  accessKeyId: string;
-  accessKeySecret: string;
-};
-
-export type AccessConfigForConstellix = {
-  apiKey: string;
-  secretKey: string;
-};
-
-export type AccessConfigForCTCCCloud = {
-  accessKeyId: string;
-  secretAccessKey: string;
-};
-
-export type AccessConfigForDeSEC = {
-  token: string;
-};
-
-export type AccessConfigForDigitalOcean = {
-  accessToken: string;
-};
-
-export type AccessConfigForDingTalkBot = {
-  webhookUrl: string;
-  secret?: string;
-};
-
-export type AccessConfigForDiscordBot = {
-  botToken: string;
-  channelId?: string;
-};
-
-export type AccessConfigForDNSLA = {
-  apiId: string;
-  apiSecret: string;
-};
-
-export type AccessConfigForDogeCloud = {
-  accessKey: string;
-  secretKey: string;
-};
-
-export type AccessConfigForDuckDNS = {
-  token: string;
-};
-
-export type AccessConfigForDynv6 = {
-  httpToken: string;
-};
-
-export type AccessConfigForEdgio = {
-  clientId: string;
-  clientSecret: string;
-};
-
-export type AccessConfigForEmail = {
-  smtpHost: string;
-  smtpPort: number;
-  smtpTls: boolean;
-  username: string;
-  password: string;
-  senderAddress?: string;
-  senderName?: string;
-  receiverAddress?: string;
-};
-
-export type AccessConfigForFlexCDN = {
-  serverUrl: string;
-  apiRole: string;
-  accessKeyId: string;
-  accessKey: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForGcore = {
-  apiToken: string;
-};
-
-export type AccessConfigForGname = {
-  appId: string;
-  appKey: string;
-};
-
-export type AccessConfigForGoDaddy = {
-  apiKey: string;
-  apiSecret: string;
-};
-
-export type AccessConfigForGoEdge = {
-  serverUrl: string;
-  apiRole: string;
-  accessKeyId: string;
-  accessKey: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForGoogleTrustServices = {
-  eabKid: string;
-  eabHmacKey: string;
-};
-
-export type AccessConfigForHetzner = {
-  apiToken: string;
-};
-
-export type AccessConfigForHuaweiCloud = {
-  accessKeyId: string;
-  secretAccessKey: string;
-  enterpriseProjectId?: string;
-};
-
-export type AccessConfigForJDCloud = {
-  accessKeyId: string;
-  accessKeySecret: string;
-};
-
-export type AccessConfigForKong = {
-  serverUrl: string;
-  apiToken: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForKubernetes = {
-  kubeConfig?: string;
-};
-
-export type AccessConfigForLarkBot = {
-  webhookUrl: string;
-};
-
-export type AccessConfigForLeCDN = {
-  serverUrl: string;
-  apiVersion: string;
-  apiRole: string;
-  username: string;
-  password: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForMattermost = {
-  serverUrl: string;
-  username: string;
-  password: string;
-  channelId?: string;
-};
-
-export type AccessConfigForNamecheap = {
-  username: string;
-  apiKey: string;
-};
-
-export type AccessConfigForNameDotCom = {
-  username: string;
-  apiToken: string;
-};
-
-export type AccessConfigForNameSilo = {
-  apiKey: string;
-};
-
-export type AccessConfigForNetcup = {
-  customerNumber: string;
-  apiKey: string;
-  apiPassword: string;
-};
-
-export type AccessConfigForNetlify = {
-  apiToken: string;
-};
-
-export type AccessConfigForNS1 = {
-  apiKey: string;
-};
-
-export type AccessConfigForPorkbun = {
-  apiKey: string;
-  secretApiKey: string;
-};
-
-export type AccessConfigForPowerDNS = {
-  serverUrl: string;
-  apiKey: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForProxmoxVE = {
-  serverUrl: string;
-  apiToken: string;
-  apiTokenSecret?: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForQiniu = {
-  accessKey: string;
-  secretKey: string;
-};
-
-export type AccessConfigForRainYun = {
-  apiKey: string;
-};
-
-export type AccessConfigForRatPanel = {
-  serverUrl: string;
-  accessTokenId: number;
-  accessToken: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForSafeLine = {
-  serverUrl: string;
-  apiToken: string;
-  allowInsecureConnections?: boolean;
-};
-
-export type AccessConfigForSlackBot = {
-  botToken: string;
-  channelId?: string;
-};
-
-export type AccessConfigForSpaceship = {
-  apiKey: string;
-  apiSecret: string;
-};
-
-export type AccessConfigForSSH = {
-  host: string;
-  port: number;
-  authMethod?: string;
-  username?: string;
-  password?: string;
-  key?: string;
-  keyPassphrase?: string;
-};
-
-export type AccessConfigForSSLCom = {
-  eabKid: string;
-  eabHmacKey: string;
-};
-
-export type AccessConfigForTelegramBot = {
-  botToken: string;
-  chatId?: number;
-};
-
-export type AccessConfigForTencentCloud = {
-  secretId: string;
-  secretKey: string;
-};
-
-export type AccessConfigForUCloud = {
-  privateKey: string;
-  publicKey: string;
-  projectId?: string;
-};
-
-export type AccessConfigForUniCloud = {
-  username: string;
-  password: string;
-};
-
-export type AccessConfigForUpyun = {
-  username: string;
-  password: string;
-};
-
-export type AccessConfigForVercel = {
-  apiAccessToken: string;
-  teamId?: string;
-};
-
-export type AccessConfigForVolcEngine = {
-  accessKeyId: string;
-  secretAccessKey: string;
-};
-
-export type AccessConfigForWangsu = {
-  accessKeyId: string;
-  accessKeySecret: string;
-  apiKey: string;
-};
-
-export type AccessConfigForWebhook = {
-  url: string;
-  method: string;
-  headers?: string;
-  allowInsecureConnections?: boolean;
-  dataForDeployment?: string;
-  dataForNotification?: string;
-};
-
-export type AccessConfigForWeComBot = {
-  webhookUrl: string;
-};
-
-export type AccessConfigForWestcn = {
-  username: string;
-  apiPassword: string;
-};
-
-export type AccessConfigForZeroSSL = {
-  eabKid: string;
-  eabHmacKey: string;
-};
-// #endregion
diff --git a/ui/src/i18n/locales/en/nls.access.json b/ui/src/i18n/locales/en/nls.access.json
index 5370ae4ce..ced6122a8 100644
--- a/ui/src/i18n/locales/en/nls.access.json
+++ b/ui/src/i18n/locales/en/nls.access.json
@@ -146,7 +146,7 @@
   "access.form.cloudflare_dns_api_token.tooltip": "For more information, see <a href=\"https://developers.cloudflare.com/fundamentals/api/get-started/create-token/\" target=\"_blank\">https://developers.cloudflare.com/fundamentals/api/get-started/create-token/</a>",
   "access.form.cloudflare_zone_api_token.label": "Cloudflare Zone API token (Optional)",
   "access.form.cloudflare_zone_api_token.placeholder": "Please enter Cloudflare Zone API token",
-  "access.form.cloudflare_zone_api_token.tooltip": "For more information, see <a href=\"https://developers.cloudflare.com/fundamentals/api/get-started/create-token/\" target=\"_blank\">https://developers.cloudflare.com/fundamentals/api/get-started/create-token/</a><br>Only required when you scope the DNS API token to <b>specific zones</b>. PLease scope the Zone API token to <b>all zones</b> with <i>Zone/Zone/Read</i> permission.",
+  "access.form.cloudflare_zone_api_token.tooltip": "For more information, see <a href=\"https://developers.cloudflare.com/fundamentals/api/get-started/create-token/\" target=\"_blank\">https://developers.cloudflare.com/fundamentals/api/get-started/create-token/</a><br><br>Only required when you scope the DNS API token to <b>specific zones</b>. PLease scope the Zone API token to <b>all zones</b> with <i>Zone/Zone/Read</i> permission.",
   "access.form.cloudns_auth_id.label": "ClouDNS API user ID",
   "access.form.cloudns_auth_id.placeholder": "Please enter ClouDNS API user ID",
   "access.form.cloudns_auth_id.tooltip": "For more information, see <a href=\"https://www.cloudns.net/wiki/article/42/\" target=\"_blank\">https://www.cloudns.net/wiki/article/42/</a>",
@@ -295,7 +295,8 @@
   "access.form.jdcloud_access_key_secret.tooltip": "For more information, see <a href=\"https://docs.jdcloud.com/en/account-management/accesskey-management\" target=\"_blank\">https://docs.jdcloud.com/en/account-management/accesskey-management</a>",
   "access.form.k8s_kubeconfig.label": "KubeConfig",
   "access.form.k8s_kubeconfig.placeholder": "Please enter KubeConfig file",
-  "access.form.k8s_kubeconfig.tooltip": "For more information, see <a href=\"https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/\" target=\"_blank\">https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/</a><br>Leave it blank to use the Pod's ServiceAccount.",
+  "access.form.k8s_kubeconfig.help": "Notes: Leave it blank to use the Pod's ServiceAccount.",
+  "access.form.k8s_kubeconfig.tooltip": "For more information, see <a href=\"https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/\" target=\"_blank\">https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/</a>",
   "access.form.kong_server_url.label": "Kong admin API server URL",
   "access.form.kong_server_url.placeholder": "Please enter Kong admin API server URL",
   "access.form.kong_api_token.label": "Kong admin API token (Optional)",
@@ -427,8 +428,8 @@
   "access.form.ssh_key.placeholder": "Please enter SSH key",
   "access.form.ssh_key_passphrase.label": "SSH key passphrase (Optional)",
   "access.form.ssh_key_passphrase.placeholder": "Please enter SSH key passphrase",
-  "access.form.ssh_jump_servers.label": "SSH jump server (Optional)",
-  "access.form.ssh_jump_servers.errmsg.invalid": "Please configure a valid jump server",
+  "access.form.ssh_jump_servers.label": "Jump servers (Optional)",
+  "access.form.ssh_jump_servers.errmsg.invalid": "Please configure valid jump servers",
   "access.form.ssh_jump_servers.item.label": "Jump server",
   "access.form.ssh_jump_servers.add": "Add jump server",
   "access.form.sslcom_eab_kid.label": "ACME EAB KID",
diff --git a/ui/src/i18n/locales/zh/nls.access.json b/ui/src/i18n/locales/zh/nls.access.json
index 353fcabf5..8c156a4b2 100644
--- a/ui/src/i18n/locales/zh/nls.access.json
+++ b/ui/src/i18n/locales/zh/nls.access.json
@@ -145,7 +145,7 @@
   "access.form.cloudflare_dns_api_token.tooltip": "这是什么？请参阅 <a href=\"https://developers.cloudflare.com/fundamentals/api/get-started/create-token/\" target=\"_blank\">https://developers.cloudflare.com/fundamentals/api/get-started/create-token/</a>",
   "access.form.cloudflare_zone_api_token.label": "Cloudflare Zone API 令牌（可选）",
   "access.form.cloudflare_zone_api_token.placeholder": "请输入 Cloudflare Zone API 令牌",
-  "access.form.cloudflare_zone_api_token.tooltip": "这是什么？请参阅 <a href=\"https://developers.cloudflare.com/fundamentals/api/get-started/create-token/\" target=\"_blank\">https://developers.cloudflare.com/fundamentals/api/get-started/create-token/</a><br>仅当你将 DNS API 令牌范围指定为<b>特定域</b>时需要填写，请将 Zone API 令牌范围指定为<b>全部域</b>，并分配 <i>Zone/Zone/Read</i> 权限。",
+  "access.form.cloudflare_zone_api_token.tooltip": "这是什么？请参阅 <a href=\"https://developers.cloudflare.com/fundamentals/api/get-started/create-token/\" target=\"_blank\">https://developers.cloudflare.com/fundamentals/api/get-started/create-token/</a><br><br>仅当你将 DNS API 令牌范围指定为<b>特定域</b>时需要填写，请将 Zone API 令牌范围指定为<b>全部域</b>，并分配 <i>Zone/Zone/Read</i> 权限。",
   "access.form.cloudns_auth_id.label": "ClouDNS API 用户 ID",
   "access.form.cloudns_auth_id.placeholder": "请输入 ClouDNS API 用户 ID",
   "access.form.cloudns_auth_id.tooltip": "这是什么？请参阅 <a href=\"https://www.cloudns.net/wiki/article/42/\" target=\"_blank\">https://www.cloudns.net/wiki/article/42/</a>",
@@ -294,7 +294,8 @@
   "access.form.jdcloud_access_key_secret.tooltip": "这是什么？请参阅 <a href=\"https://docs.jdcloud.com/cn/account-management/accesskey-management\" target=\"_blank\">https://docs.jdcloud.com/cn/account-management/accesskey-management</a>",
   "access.form.k8s_kubeconfig.label": "KubeConfig",
   "access.form.k8s_kubeconfig.placeholder": "请输入 KubeConfig 文件内容",
-  "access.form.k8s_kubeconfig.tooltip": "这是什么？请参阅 <a href=\"https://kubernetes.io/zh-cn/docs/concepts/configuration/organize-cluster-access-kubeconfig/\" target=\"_blank\">https://kubernetes.io/zh-cn/docs/concepts/configuration/organize-cluster-access-kubeconfig/</a><br>为空时，将使用 Pod 的 ServiceAccount 作为凭证。",
+  "access.form.k8s_kubeconfig.help": "提示：不填写时，将使用 Pod 的 ServiceAccount 作为凭证。",
+  "access.form.k8s_kubeconfig.tooltip": "这是什么？请参阅 <a href=\"https://kubernetes.io/zh-cn/docs/concepts/configuration/organize-cluster-access-kubeconfig/\" target=\"_blank\">https://kubernetes.io/zh-cn/docs/concepts/configuration/organize-cluster-access-kubeconfig/</a>",
   "access.form.kong_server_url.label": "Kong Admin API 服务地址",
   "access.form.kong_server_url.placeholder": "请输入 Kong Admin API 服务地址",
   "access.form.kong_api_token.label": "Kong Admin API Token（可选）",
@@ -426,8 +427,8 @@
   "access.form.ssh_key.placeholder": "请输入 SSH 密钥文件内容",
   "access.form.ssh_key_passphrase.label": "SSH 密钥口令（可选）",
   "access.form.ssh_key_passphrase.placeholder": "请输入 SSH 密钥口令",
-  "access.form.ssh_jump_servers.label": "SSH 跳板机（可选）",
-  "access.form.ssh_jump_servers.errmsg.invalid": "请配置有效的 SSH 跳板机",
+  "access.form.ssh_jump_servers.label": "跳板机（可选）",
+  "access.form.ssh_jump_servers.errmsg.invalid": "请配置有效的跳板机信息",
   "access.form.ssh_jump_servers.item.label": "跳板机",
   "access.form.ssh_jump_servers.add": "添加跳板机",
   "access.form.sslcom_eab_kid.label": "ACME EAB KID",
diff --git a/ui/src/pages/accesses/AccessNew.tsx b/ui/src/pages/accesses/AccessNew.tsx
index c8c203cdd..750646087 100644
--- a/ui/src/pages/accesses/AccessNew.tsx
+++ b/ui/src/pages/accesses/AccessNew.tsx
@@ -1,13 +1,13 @@
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { App, Button, Flex } from "antd";
+import { App, Button, Flex, Form } from "antd";
 
-import AccessForm, { type AccessFormInstance, type AccessFormProps } from "@/components/access/AccessForm";
+import AccessForm, { type AccessFormUsages } from "@/components/access/AccessForm";
 import AccessProviderPicker from "@/components/provider/AccessProviderPicker";
 import Show from "@/components/Show";
 import { type AccessModel } from "@/domain/access";
-import { ACCESS_USAGES, type AccessProvider } from "@/domain/provider";
+import { ACCESS_USAGES } from "@/domain/provider";
 import { useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
@@ -22,49 +22,30 @@ const AccessNew = () => {
 
   const { createAccess } = useAccessesStore(useZustandShallowSelector(["createAccess"]));
 
-  const formRef = useRef<AccessFormInstance>(null);
-  const [formModel, setFormModel] = useState<MaybeModelRecord<AccessModel>>({});
+  const providerUsage = useMemo(() => searchParams.get("usage") as AccessFormUsages, [searchParams]);
+  const providerFilter = AccessForm.useProviderFilterByUsage(providerUsage);
+
+  const [formInst] = Form.useForm();
   const [formPending, setFormPending] = useState(false);
 
-  const providerUsage = useMemo(() => {
-    return searchParams.get("usage") as AccessFormProps["usage"];
-  }, [searchParams]);
-  const providerFilter = useMemo(() => {
-    switch (providerUsage) {
-      case "dns":
-        return (_: string, record: AccessProvider) => record.usages.includes(ACCESS_USAGES.DNS);
-      case "hosting":
-        return (_: string, record: AccessProvider) => record.usages.includes(ACCESS_USAGES.HOSTING);
-      case "dns-hosting":
-        return (_: string, record: AccessProvider) => record.usages.includes(ACCESS_USAGES.DNS) || record.usages.includes(ACCESS_USAGES.HOSTING);
-      case "ca":
-        return (_: string, record: AccessProvider) => record.usages.includes(ACCESS_USAGES.CA);
-      case "notification":
-        return (_: string, record: AccessProvider) => record.usages.includes(ACCESS_USAGES.NOTIFICATION);
-      default:
-        console.warn(`[certimate] unsupported provider usage: '${providerUsage}'`);
-    }
-
-    return () => false;
-  }, [providerUsage]);
+  const fieldProvider = Form.useWatch<string>("provider", { form: formInst, preserve: true });
 
   const handleProviderPick = (value: string) => {
-    setFormModel((prev) => {
-      return { ...prev, provider: value, config: void 0 };
-    });
+    formInst.setFieldValue("provider", value);
   };
 
   const handleSubmitClick = async () => {
     setFormPending(true);
     try {
-      await formRef.current!.validateFields();
+      await formInst.validateFields();
     } catch (err) {
       setFormPending(false);
       throw err;
     }
 
     try {
-      const values: AccessModel = formRef.current!.getFieldsValue();
+      const values: AccessModel = formInst.getFieldsValue(true);
+      values.reserve = providerUsage === "ca" ? "ca" : providerUsage === "notification" ? "notif" : void 0;
       await createAccess(values);
 
       navigate(`/accesses?usage=${providerUsage}`, { replace: true });
@@ -78,9 +59,7 @@ const AccessNew = () => {
   };
 
   const handleCancelClick = () => {
-    setFormModel((prev) => {
-      return { ...prev, provider: void 0, config: void 0, reserve: void 0 };
-    });
+    formInst.resetFields();
   };
 
   return (
@@ -91,35 +70,28 @@ const AccessNew = () => {
       </div>
 
       <div className="container">
-        <Show
-          when={!!formModel?.provider}
-          fallback={
-            <AccessProviderPicker
-              autoFocus
-              gap="large"
-              placeholder={t("access.form.provider.search.placeholder")}
-              showOptionTags={providerUsage == null || (providerUsage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
-              onFilter={providerFilter}
-              onSelect={handleProviderPick}
-            />
-          }
-        >
-          <AccessForm
-            className="md:max-w-160"
-            ref={formRef}
-            initialValues={formModel}
-            disabled={formPending}
-            mode="create"
-            usage={providerUsage}
-            onValuesChange={(values) => setFormModel(values)}
+        <Show when={!fieldProvider}>
+          <AccessProviderPicker
+            autoFocus
+            gap="large"
+            placeholder={t("access.form.provider.search.placeholder")}
+            showOptionTags={providerUsage == null || (providerUsage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
+            onFilter={providerFilter}
+            onSelect={handleProviderPick}
           />
+        </Show>
+
+        <div style={{ display: fieldProvider ? "block" : "none" }}>
+          <div className="md:max-w-160">
+            <AccessForm form={formInst} disabled={formPending} mode="create" usage={providerUsage} />
+          </div>
           <Flex gap="small">
             <Button type="primary" onClick={handleSubmitClick}>
               {t("common.button.submit")}
             </Button>
             <Button onClick={handleCancelClick}>{t("common.button.cancel")}</Button>
           </Flex>
-        </Show>
+        </div>
       </div>
     </div>
   );