feat: improve workflow node configuration

ui/src/components/access/AccessEditFormLocalConfig.tsx

@@ -1,36 +0,0 @@
-import { Form, type FormInstance } from "antd";
-
-import { type AccessConfigForLocal } from "@/domain/access";
-
-type AccessEditFormLocalConfigFieldValues = Partial<AccessConfigForLocal>;
-
-export type AccessEditFormLocalConfigProps = {
-  form: FormInstance;
-  formName: string;
-  disabled?: boolean;
-  initialValues?: AccessEditFormLocalConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormLocalConfigFieldValues) => void;
-};
-
-const initFormModel = (): AccessEditFormLocalConfigFieldValues => {
-  return {};
-};
-
-const AccessEditFormLocalConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormLocalConfigProps) => {
-  const handleFormChange = (_: unknown, values: unknown) => {
-    onValuesChange?.(values as AccessEditFormLocalConfigFieldValues);
-  };
-
-  return (
-    <Form
-      form={form}
-      disabled={disabled}
-      initialValues={initialValues ?? initFormModel()}
-      layout="vertical"
-      name={formName}
-      onValuesChange={handleFormChange}
-    ></Form>
-  );
-};
-
-export default AccessEditFormLocalConfig;

ui/src/components/access/AccessEditModal.tsx

@@ -9,13 +9,13 @@ import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
 
-import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm";
+import AccessForm, { type AccessFormInstance, type AccessFormProps } from "./AccessForm";
 
 export type AccessEditModalProps = {
-  data?: AccessEditFormProps["initialValues"];
+  data?: AccessFormProps["initialValues"];
   loading?: boolean;
   open?: boolean;
-  preset: AccessEditFormProps["preset"];
+  preset: AccessFormProps["preset"];
   trigger?: React.ReactNode;
   onOpenChange?: (open: boolean) => void;
   afterSubmit?: (record: AccessModel) => void;
@@ -36,7 +36,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
 
   const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
-  const formRef = useRef<AccessEditFormInstance>(null);
+  const formRef = useRef<AccessFormInstance>(null);
   const [formPending, setFormPending] = useState(false);
 
   const handleOkClick = async () => {
@@ -106,7 +106,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
         onCancel={handleCancelClick}
       >
         <div className="pb-2 pt-4">
-          <AccessEditForm ref={formRef} initialValues={data} preset={preset === "add" ? "add" : "edit"} />
+          <AccessForm ref={formRef} initialValues={data} preset={preset === "add" ? "add" : "edit"} />
         </div>
       </Modal>
     </>

ui/src/components/access/AccessForm.tsx

@@ -9,45 +9,45 @@ import { type AccessModel } from "@/domain/access";
 import { ACCESS_PROVIDERS } from "@/domain/provider";
 import { useAntdForm, useAntdFormName } from "@/hooks";
 
-import AccessEditFormACMEHttpReqConfig from "./AccessEditFormACMEHttpReqConfig";
-import AccessEditFormAWSConfig from "./AccessEditFormAWSConfig";
-import AccessEditFormAliyunConfig from "./AccessEditFormAliyunConfig";
-import AccessEditFormBaiduCloudConfig from "./AccessEditFormBaiduCloudConfig";
-import AccessEditFormBytePlusConfig from "./AccessEditFormBytePlusConfig";
-import AccessEditFormCloudflareConfig from "./AccessEditFormCloudflareConfig";
-import AccessEditFormDogeCloudConfig from "./AccessEditFormDogeCloudConfig";
-import AccessEditFormGoDaddyConfig from "./AccessEditFormGoDaddyConfig";
-import AccessEditFormHuaweiCloudConfig from "./AccessEditFormHuaweiCloudConfig";
-import AccessEditFormKubernetesConfig from "./AccessEditFormKubernetesConfig";
-import AccessEditFormLocalConfig from "./AccessEditFormLocalConfig";
-import AccessEditFormNameDotComConfig from "./AccessEditFormNameDotComConfig";
-import AccessEditFormNameSiloConfig from "./AccessEditFormNameSiloConfig";
-import AccessEditFormPowerDNSConfig from "./AccessEditFormPowerDNSConfig";
-import AccessEditFormQiniuConfig from "./AccessEditFormQiniuConfig";
-import AccessEditFormSSHConfig from "./AccessEditFormSSHConfig";
-import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig";
-import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
-import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
+import AccessFormACMEHttpReqConfig from "./AccessFormACMEHttpReqConfig";
+import AccessFormAWSConfig from "./AccessFormAWSConfig";
+import AccessFormAliyunConfig from "./AccessFormAliyunConfig";
+import AccessFormBaiduCloudConfig from "./AccessFormBaiduCloudConfig";
+import AccessFormBytePlusConfig from "./AccessFormBytePlusConfig";
+import AccessFormCloudflareConfig from "./AccessFormCloudflareConfig";
+import AccessFormDogeCloudConfig from "./AccessFormDogeCloudConfig";
+import AccessFormGoDaddyConfig from "./AccessFormGoDaddyConfig";
+import AccessFormHuaweiCloudConfig from "./AccessFormHuaweiCloudConfig";
+import AccessFormKubernetesConfig from "./AccessFormKubernetesConfig";
+import AccessFormLocalConfig from "./AccessFormLocalConfig";
+import AccessFormNameDotComConfig from "./AccessFormNameDotComConfig";
+import AccessFormNameSiloConfig from "./AccessFormNameSiloConfig";
+import AccessFormPowerDNSConfig from "./AccessFormPowerDNSConfig";
+import AccessFormQiniuConfig from "./AccessFormQiniuConfig";
+import AccessFormSSHConfig from "./AccessFormSSHConfig";
+import AccessFormTencentCloudConfig from "./AccessFormTencentCloudConfig";
+import AccessFormVolcEngineConfig from "./AccessFormVolcEngineConfig";
+import AccessFormWebhookConfig from "./AccessFormWebhookConfig";
 
-type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
-type AccessEditFormPresets = "add" | "edit";
+type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
+type AccessFormPresets = "add" | "edit";
 
-export type AccessEditFormProps = {
+export type AccessFormProps = {
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
-  initialValues?: AccessEditFormFieldValues;
-  preset: AccessEditFormPresets;
-  onValuesChange?: (values: AccessEditFormFieldValues) => void;
+  initialValues?: AccessFormFieldValues;
+  preset: AccessFormPresets;
+  onValuesChange?: (values: AccessFormFieldValues) => void;
 };
 
-export type AccessEditFormInstance = {
-  getFieldsValue: () => ReturnType<FormInstance<AccessEditFormFieldValues>["getFieldsValue"]>;
-  resetFields: FormInstance<AccessEditFormFieldValues>["resetFields"];
-  validateFields: FormInstance<AccessEditFormFieldValues>["validateFields"];
+export type AccessFormInstance = {
+  getFieldsValue: () => ReturnType<FormInstance<AccessFormFieldValues>["getFieldsValue"]>;
+  resetFields: FormInstance<AccessFormFieldValues>["resetFields"];
+  validateFields: FormInstance<AccessFormFieldValues>["validateFields"];
 };
 
-const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
+const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -69,7 +69,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   const [nestedFormInst] = Form.useForm();
   const nestedFormName = useAntdFormName({ form: nestedFormInst, name: "accessEditFormConfigForm" });
   const nestedFormEl = useMemo(() => {
-    const configFormProps = {
+    const nestedFormProps = {
       form: nestedFormInst,
       formName: nestedFormName,
       disabled: disabled,
@@ -82,45 +82,45 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
      */
     switch (fieldProvider) {
       case ACCESS_PROVIDERS.ACMEHTTPREQ:
-        return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
+        return <AccessFormACMEHttpReqConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.ALIYUN:
-        return <AccessEditFormAliyunConfig {...configFormProps} />;
+        return <AccessFormAliyunConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.AWS:
-        return <AccessEditFormAWSConfig {...configFormProps} />;
+        return <AccessFormAWSConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.BAIDUCLOUD:
-        return <AccessEditFormBaiduCloudConfig {...configFormProps} />;
+        return <AccessFormBaiduCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.BYTEPLUS:
-        return <AccessEditFormBytePlusConfig {...configFormProps} />;
+        return <AccessFormBytePlusConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.CLOUDFLARE:
-        return <AccessEditFormCloudflareConfig {...configFormProps} />;
+        return <AccessFormCloudflareConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.DOGECLOUD:
-        return <AccessEditFormDogeCloudConfig {...configFormProps} />;
+        return <AccessFormDogeCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.GODADDY:
-        return <AccessEditFormGoDaddyConfig {...configFormProps} />;
+        return <AccessFormGoDaddyConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.HUAWEICLOUD:
-        return <AccessEditFormHuaweiCloudConfig {...configFormProps} />;
+        return <AccessFormHuaweiCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.KUBERNETES:
-        return <AccessEditFormKubernetesConfig {...configFormProps} />;
+        return <AccessFormKubernetesConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.LOCAL:
-        return <AccessEditFormLocalConfig {...configFormProps} />;
+        return <AccessFormLocalConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.NAMEDOTCOM:
-        return <AccessEditFormNameDotComConfig {...configFormProps} />;
+        return <AccessFormNameDotComConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.NAMESILO:
-        return <AccessEditFormNameSiloConfig {...configFormProps} />;
+        return <AccessFormNameSiloConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.POWERDNS:
-        return <AccessEditFormPowerDNSConfig {...configFormProps} />;
+        return <AccessFormPowerDNSConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.QINIU:
-        return <AccessEditFormQiniuConfig {...configFormProps} />;
+        return <AccessFormQiniuConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.SSH:
-        return <AccessEditFormSSHConfig {...configFormProps} />;
+        return <AccessFormSSHConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.TENCENTCLOUD:
-        return <AccessEditFormTencentCloudConfig {...configFormProps} />;
+        return <AccessFormTencentCloudConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.VOLCENGINE:
-        return <AccessEditFormVolcEngineConfig {...configFormProps} />;
+        return <AccessFormVolcEngineConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.WEBHOOK:
-        return <AccessEditFormWebhookConfig {...configFormProps} />;
+        return <AccessFormWebhookConfig {...nestedFormProps} />;
     }
-  }, [disabled, initialValues, fieldProvider, nestedFormInst, nestedFormName]);
+  }, [disabled, initialValues?.config, fieldProvider, nestedFormInst, nestedFormName]);
 
   const handleFormProviderChange = (name: string) => {
     if (name === nestedFormName) {
@@ -129,7 +129,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
     }
   };
 
-  const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
+  const handleFormChange = (_: unknown, values: AccessFormFieldValues) => {
     if (values.provider !== fieldProvider) {
       formInst.setFieldValue("provider", values.provider);
     }
@@ -150,7 +150,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
         const t2 = nestedFormInst.validateFields(undefined, config);
         return Promise.all([t1, t2]).then(() => t1);
       },
-    } as AccessEditFormInstance;
+    } as AccessFormInstance;
   });
 
   return (
@@ -177,4 +177,4 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   );
 });
 
-export default AccessEditForm;
+export default AccessForm;

ui/src/components/access/AccessFormACMEHttpReqConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForACMEHttpReq } from "@/domain/access";
 
-type AccessEditFormACMEHttpReqConfigFieldValues = Partial<AccessConfigForACMEHttpReq>;
+type AccessFormACMEHttpReqConfigFieldValues = Nullish<AccessConfigForACMEHttpReq>;
 
-export type AccessEditFormACMEHttpReqConfigProps = {
+export type AccessFormACMEHttpReqConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormACMEHttpReqConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormACMEHttpReqConfigFieldValues) => void;
+  initialValues?: AccessFormACMEHttpReqConfigFieldValues;
+  onValuesChange?: (values: AccessFormACMEHttpReqConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormACMEHttpReqConfigFieldValues => {
+const initFormModel = (): AccessFormACMEHttpReqConfigFieldValues => {
   return {
     endpoint: "https://example.com/api/",
     mode: "",
   };
 };
 
-const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormACMEHttpReqConfigProps) => {
+const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormACMEHttpReqConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -42,11 +42,18 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValu
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormACMEHttpReqConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="endpoint"
         label={t("access.form.acmehttpreq_endpoint.label")}
@@ -92,4 +99,4 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValu
   );
 };
 
-export default AccessEditFormACMEHttpReqConfig;
+export default AccessFormACMEHttpReqConfig;

ui/src/components/access/AccessFormAWSConfig.tsx

@@ -5,17 +5,17 @@ import { z } from "zod";
 
 import { type AccessConfigForAWS } from "@/domain/access";
 
-type AccessEditFormAWSConfigFieldValues = Partial<AccessConfigForAWS>;
+type AccessFormAWSConfigFieldValues = Nullish<AccessConfigForAWS>;
 
-export type AccessEditFormAWSConfigProps = {
+export type AccessFormAWSConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormAWSConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormAWSConfigFieldValues) => void;
+  initialValues?: AccessFormAWSConfigFieldValues;
+  onValuesChange?: (values: AccessFormAWSConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormAWSConfigFieldValues => {
+const initFormModel = (): AccessFormAWSConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
@@ -24,7 +24,7 @@ const initFormModel = (): AccessEditFormAWSConfigFieldValues => {
   };
 };
 
-const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormAWSConfigProps) => {
+const AccessFormAWSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormAWSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -54,11 +54,18 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onVa
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormAWSConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.aws_access_key_id.label")}
@@ -98,4 +105,4 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onVa
   );
 };
 
-export default AccessEditFormAWSConfig;
+export default AccessFormAWSConfig;

ui/src/components/access/AccessFormAliyunConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForAliyun } from "@/domain/access";
 
-type AccessEditFormAliyunConfigFieldValues = Partial<AccessConfigForAliyun>;
+type AccessFormAliyunConfigFieldValues = Nullish<AccessConfigForAliyun>;
 
-export type AccessEditFormAliyunConfigProps = {
+export type AccessFormAliyunConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormAliyunConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormAliyunConfigFieldValues) => void;
+  initialValues?: AccessFormAliyunConfigFieldValues;
+  onValuesChange?: (values: AccessFormAliyunConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormAliyunConfigFieldValues => {
+const initFormModel = (): AccessFormAliyunConfigFieldValues => {
   return {
     accessKeyId: "",
     accessKeySecret: "",
   };
 };
 
-const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessEditFormAliyunConfigProps) => {
+const AccessFormAliyunConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessFormAliyunConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, o
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormAliyunConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.aliyun_access_key_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, o
   );
 };
 
-export default AccessEditFormAliyunConfig;
+export default AccessFormAliyunConfig;

ui/src/components/access/AccessFormBaiduCloudConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForBaiduCloud } from "@/domain/access";
 
-type AccessEditFormBaiduCloudConfigFieldValues = Partial<AccessConfigForBaiduCloud>;
+type AccessFormBaiduCloudConfigFieldValues = Nullish<AccessConfigForBaiduCloud>;
 
-export type AccessEditFormBaiduCloudConfigProps = {
+export type AccessFormBaiduCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormBaiduCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormBaiduCloudConfigFieldValues) => void;
+  initialValues?: AccessFormBaiduCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormBaiduCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormBaiduCloudConfigFieldValues => {
+const initFormModel = (): AccessFormBaiduCloudConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBaiduCloudConfigProps) => {
+const AccessFormBaiduCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBaiduCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormBaiduCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.baiducloud_access_key_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormBaiduCloudConfig;
+export default AccessFormBaiduCloudConfig;

ui/src/components/access/AccessFormBytePlusConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForBytePlus } from "@/domain/access";
 
-type AccessEditFormBytePlusConfigFieldValues = Partial<AccessConfigForBytePlus>;
+type AccessFormBytePlusConfigFieldValues = Nullish<AccessConfigForBytePlus>;
 
-export type AccessEditFormBytePlusConfigProps = {
+export type AccessFormBytePlusConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormBytePlusConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormBytePlusConfigFieldValues) => void;
+  initialValues?: AccessFormBytePlusConfigFieldValues;
+  onValuesChange?: (values: AccessFormBytePlusConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormBytePlusConfigFieldValues => {
+const initFormModel = (): AccessFormBytePlusConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBytePlusConfigProps) => {
+const AccessFormBytePlusConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormBytePlusConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormBytePlusConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKey"
         label={t("access.form.byteplus_access_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormBytePlusConfig;
+export default AccessFormBytePlusConfig;

ui/src/components/access/AccessFormCloudflareConfig.tsx

@@ -5,23 +5,23 @@ import { z } from "zod";
 
 import { type AccessConfigForCloudflare } from "@/domain/access";
 
-type AccessEditFormCloudflareConfigFieldValues = Partial<AccessConfigForCloudflare>;
+type AccessFormCloudflareConfigFieldValues = Nullish<AccessConfigForCloudflare>;
 
-export type AccessEditFormCloudflareConfigProps = {
+export type AccessFormCloudflareConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormCloudflareConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormCloudflareConfigFieldValues) => void;
+  initialValues?: AccessFormCloudflareConfigFieldValues;
+  onValuesChange?: (values: AccessFormCloudflareConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormCloudflareConfigFieldValues => {
+const initFormModel = (): AccessFormCloudflareConfigFieldValues => {
   return {
     dnsApiToken: "",
   };
 };
 
-const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormCloudflareConfigProps) => {
+const AccessFormCloudflareConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormCloudflareConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -34,11 +34,18 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormCloudflareConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="dnsApiToken"
         label={t("access.form.cloudflare_dns_api_token.label")}
@@ -51,4 +58,4 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormCloudflareConfig;
+export default AccessFormCloudflareConfig;

ui/src/components/access/AccessFormDogeCloudConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForDogeCloud } from "@/domain/access";
 
-type AccessEditFormDogeCloudConfigFieldValues = Partial<AccessConfigForDogeCloud>;
+type AccessFormDogeCloudConfigFieldValues = Nullish<AccessConfigForDogeCloud>;
 
-export type AccessEditFormDogeCloudConfigProps = {
+export type AccessFormDogeCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormDogeCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormDogeCloudConfigFieldValues) => void;
+  initialValues?: AccessFormDogeCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormDogeCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormDogeCloudConfigFieldValues => {
+const initFormModel = (): AccessFormDogeCloudConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormDogeCloudConfigProps) => {
+const AccessFormDogeCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormDogeCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormDogeCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKey"
         label={t("access.form.dogecloud_access_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues
   );
 };
 
-export default AccessEditFormDogeCloudConfig;
+export default AccessFormDogeCloudConfig;

ui/src/components/access/AccessFormGoDaddyConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForGoDaddy } from "@/domain/access";
 
-type AccessEditFormGoDaddyConfigFieldValues = Partial<AccessConfigForGoDaddy>;
+type AccessFormGoDaddyConfigFieldValues = Nullish<AccessConfigForGoDaddy>;
 
-export type AccessEditFormGoDaddyConfigProps = {
+export type AccessFormGoDaddyConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormGoDaddyConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormGoDaddyConfigFieldValues) => void;
+  initialValues?: AccessFormGoDaddyConfigFieldValues;
+  onValuesChange?: (values: AccessFormGoDaddyConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormGoDaddyConfigFieldValues => {
+const initFormModel = (): AccessFormGoDaddyConfigFieldValues => {
   return {
     apiKey: "",
     apiSecret: "",
   };
 };
 
-const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormGoDaddyConfigProps) => {
+const AccessFormGoDaddyConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormGoDaddyConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormGoDaddyConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="apiKey"
         label={t("access.form.godaddy_api_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormGoDaddyConfig;
+export default AccessFormGoDaddyConfig;

ui/src/components/access/AccessFormHuaweiCloudConfig.tsx

@@ -5,17 +5,17 @@ import { z } from "zod";
 
 import { type AccessConfigForHuaweiCloud } from "@/domain/access";
 
-type AccessEditFormHuaweiCloudConfigFieldValues = Partial<AccessConfigForHuaweiCloud>;
+type AccessFormHuaweiCloudConfigFieldValues = Nullish<AccessConfigForHuaweiCloud>;
 
-export type AccessEditFormHuaweiCloudConfigProps = {
+export type AccessFormHuaweiCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormHuaweiCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormHuaweiCloudConfigFieldValues) => void;
+  initialValues?: AccessFormHuaweiCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormHuaweiCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormHuaweiCloudConfigFieldValues => {
+const initFormModel = (): AccessFormHuaweiCloudConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
@@ -23,7 +23,7 @@ const initFormModel = (): AccessEditFormHuaweiCloudConfigFieldValues => {
   };
 };
 
-const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormHuaweiCloudConfigProps) => {
+const AccessFormHuaweiCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormHuaweiCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -47,11 +47,18 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValu
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormHuaweiCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.huaweicloud_access_key_id.label")}
@@ -82,4 +89,4 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValu
   );
 };
 
-export default AccessEditFormHuaweiCloudConfig;
+export default AccessFormHuaweiCloudConfig;

ui/src/components/access/AccessFormKubernetesConfig.tsx

@@ -8,21 +8,21 @@ import { z } from "zod";
 import { type AccessConfigForKubernetes } from "@/domain/access";
 import { readFileContent } from "@/utils/file";
 
-type AccessEditFormKubernetesConfigFieldValues = Partial<AccessConfigForKubernetes>;
+type AccessFormKubernetesConfigFieldValues = Nullish<AccessConfigForKubernetes>;
 
-export type AccessEditFormKubernetesConfigProps = {
+export type AccessFormKubernetesConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormKubernetesConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormKubernetesConfigFieldValues) => void;
+  initialValues?: AccessFormKubernetesConfigFieldValues;
+  onValuesChange?: (values: AccessFormKubernetesConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormKubernetesConfigFieldValues => {
+const initFormModel = (): AccessFormKubernetesConfigFieldValues => {
   return {};
 };
 
-const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormKubernetesConfigProps) => {
+const AccessFormKubernetesConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormKubernetesConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -34,30 +34,37 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
   });
   const formRule = createSchemaFieldRule(formSchema);
 
-  const fieldKubeConfig = Form.useWatch("kubeConfig", form);
+  const fieldKubeConfig = Form.useWatch("kubeConfig", formInst);
   const [fieldKubeFileList, setFieldKubeFileList] = useState<UploadFile[]>([]);
   useEffect(() => {
     setFieldKubeFileList(initialValues?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
   }, [initialValues?.kubeConfig]);
 
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormKubernetesConfigFieldValues);
-  };
-
   const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      form.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
+      formInst.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
       setFieldKubeFileList([file]);
     } else {
-      form.setFieldValue("kubeConfig", "");
+      formInst.setFieldValue("kubeConfig", "");
       setFieldKubeFileList([]);
     }
 
-    onValuesChange?.(form.getFieldsValue(true));
+    onValuesChange?.(formInst.getFieldsValue(true));
+  };
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="kubeConfig" noStyle rules={[formRule]}>
         <Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.k8s_kubeconfig.placeholder")} value={fieldKubeConfig} />
       </Form.Item>
@@ -73,4 +80,4 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormKubernetesConfig;
+export default AccessFormKubernetesConfig;

ui/src/components/access/AccessFormLocalConfig.tsx

@@ -0,0 +1,36 @@
+import { Form, type FormInstance } from "antd";
+
+import { type AccessConfigForLocal } from "@/domain/access";
+
+type AccessFormLocalConfigFieldValues = Nullish<AccessConfigForLocal>;
+
+export type AccessFormLocalConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: AccessFormLocalConfigFieldValues;
+  onValuesChange?: (values: AccessFormLocalConfigFieldValues) => void;
+};
+
+const initFormModel = (): AccessFormLocalConfigFieldValues => {
+  return {};
+};
+
+const AccessFormLocalConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormLocalConfigProps) => {
+  const handleFormChange = (_: unknown, values: any) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    ></Form>
+  );
+};
+
+export default AccessFormLocalConfig;

ui/src/components/access/AccessFormNameDotComConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForNameDotCom } from "@/domain/access";
 
-type AccessEditFormNameDotComConfigFieldValues = Partial<AccessConfigForNameDotCom>;
+type AccessFormNameDotComConfigFieldValues = Nullish<AccessConfigForNameDotCom>;
 
-export type AccessEditFormNameDotComConfigProps = {
+export type AccessFormNameDotComConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormNameDotComConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormNameDotComConfigFieldValues) => void;
+  initialValues?: AccessFormNameDotComConfigFieldValues;
+  onValuesChange?: (values: AccessFormNameDotComConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormNameDotComConfigFieldValues => {
+const initFormModel = (): AccessFormNameDotComConfigFieldValues => {
   return {
     username: "",
     apiToken: "",
   };
 };
 
-const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameDotComConfigProps) => {
+const AccessFormNameDotComConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNameDotComConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormNameDotComConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="username"
         label={t("access.form.namedotcom_username.label")}
@@ -66,4 +73,4 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormNameDotComConfig;
+export default AccessFormNameDotComConfig;

ui/src/components/access/AccessFormNameSiloConfig.tsx

@@ -5,23 +5,23 @@ import { z } from "zod";
 
 import { type AccessConfigForNameSilo } from "@/domain/access";
 
-type AccessEditFormNameSiloConfigFieldValues = Partial<AccessConfigForNameSilo>;
+type AccessFormNameSiloConfigFieldValues = Nullish<AccessConfigForNameSilo>;
 
-export type AccessEditFormNameSiloConfigProps = {
+export type AccessFormNameSiloConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormNameSiloConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormNameSiloConfigFieldValues) => void;
+  initialValues?: AccessFormNameSiloConfigFieldValues;
+  onValuesChange?: (values: AccessFormNameSiloConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormNameSiloConfigFieldValues => {
+const initFormModel = (): AccessFormNameSiloConfigFieldValues => {
   return {
     apiKey: "",
   };
 };
 
-const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameSiloConfigProps) => {
+const AccessFormNameSiloConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormNameSiloConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -34,11 +34,18 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormNameSiloConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="apiKey"
         label={t("access.form.namesilo_api_key.label")}
@@ -51,4 +58,4 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormNameSiloConfig;
+export default AccessFormNameSiloConfig;

ui/src/components/access/AccessFormPowerDNSConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForPowerDNS } from "@/domain/access";
 
-type AccessEditFormPowerDNSConfigFieldValues = Partial<AccessConfigForPowerDNS>;
+type AccessFormPowerDNSConfigFieldValues = Nullish<AccessConfigForPowerDNS>;
 
-export type AccessEditFormPowerDNSConfigProps = {
+export type AccessFormPowerDNSConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormPowerDNSConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormPowerDNSConfigFieldValues) => void;
+  initialValues?: AccessFormPowerDNSConfigFieldValues;
+  onValuesChange?: (values: AccessFormPowerDNSConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormPowerDNSConfigFieldValues => {
+const initFormModel = (): AccessFormPowerDNSConfigFieldValues => {
   return {
     apiUrl: "",
     apiKey: "",
   };
 };
 
-const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormPowerDNSConfigProps) => {
+const AccessFormPowerDNSConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormPowerDNSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -36,11 +36,18 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormPowerDNSConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="apiUrl"
         label={t("access.form.powerdns_api_url.label")}
@@ -62,4 +69,4 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormPowerDNSConfig;
+export default AccessFormPowerDNSConfig;

ui/src/components/access/AccessFormQiniuConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForQiniu } from "@/domain/access";
 
-type AccessEditFormQiniuConfigFieldValues = Partial<AccessConfigForQiniu>;
+type AccessFormQiniuConfigFieldValues = Nullish<AccessConfigForQiniu>;
 
-export type AccessEditFormQiniuConfigProps = {
+export type AccessFormQiniuConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormQiniuConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormQiniuConfigFieldValues) => void;
+  initialValues?: AccessFormQiniuConfigFieldValues;
+  onValuesChange?: (values: AccessFormQiniuConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormQiniuConfigFieldValues => {
+const initFormModel = (): AccessFormQiniuConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormQiniuConfigProps) => {
+const AccessFormQiniuConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormQiniuConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, on
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormQiniuConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKey"
         label={t("access.form.qiniu_access_key.label")}
@@ -66,4 +73,4 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, on
   );
 };
 
-export default AccessEditFormQiniuConfig;
+export default AccessFormQiniuConfig;

ui/src/components/access/AccessFormSSHConfig.tsx

@@ -9,17 +9,17 @@ import { type AccessConfigForSSH } from "@/domain/access";
 import { readFileContent } from "@/utils/file";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
 
-type AccessEditFormSSHConfigFieldValues = Partial<AccessConfigForSSH>;
+type AccessFormSSHConfigFieldValues = Nullish<AccessConfigForSSH>;
 
-export type AccessEditFormSSHConfigProps = {
+export type AccessFormSSHConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormSSHConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormSSHConfigFieldValues) => void;
+  initialValues?: AccessFormSSHConfigFieldValues;
+  onValuesChange?: (values: AccessFormSSHConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormSSHConfigFieldValues => {
+const initFormModel = (): AccessFormSSHConfigFieldValues => {
   return {
     host: "127.0.0.1",
     port: 22,
@@ -27,7 +27,7 @@ const initFormModel = (): AccessEditFormSSHConfigFieldValues => {
   };
 };
 
-const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormSSHConfigProps) => {
+const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSSHConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -55,34 +55,41 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
       .string()
       .max(20480, t("common.errmsg.string_max", { max: 20480 }))
       .nullish()
-      .refine((v) => !v || form.getFieldValue("key"), t("access.form.ssh_key.placeholder")),
+      .refine((v) => !v || formInst.getFieldValue("key"), t("access.form.ssh_key.placeholder")),
   });
   const formRule = createSchemaFieldRule(formSchema);
 
-  const fieldKey = Form.useWatch("key", form);
+  const fieldKey = Form.useWatch("key", formInst);
   const [fieldKeyFileList, setFieldKeyFileList] = useState<UploadFile[]>([]);
   useEffect(() => {
     setFieldKeyFileList(initialValues?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
   }, [initialValues?.key]);
 
-  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormSSHConfigFieldValues);
-  };
-
   const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      form.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
+      formInst.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
       setFieldKeyFileList([file]);
     } else {
-      form.setFieldValue("key", "");
+      formInst.setFieldValue("key", "");
       setFieldKeyFileList([]);
     }
 
-    onValuesChange?.(form.getFieldsValue(true));
+    onValuesChange?.(formInst.getFieldsValue(true));
+  };
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <div className="flex space-x-2">
         <div className="w-2/3">
           <Form.Item name="host" label={t("access.form.ssh_host.label")} rules={[formRule]}>
@@ -143,4 +150,4 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
   );
 };
 
-export default AccessEditFormSSHConfig;
+export default AccessFormSSHConfig;

ui/src/components/access/AccessFormTencentCloudConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForTencentCloud } from "@/domain/access";
 
-type AccessEditFormTencentCloudConfigFieldValues = Partial<AccessConfigForTencentCloud>;
+type AccessFormTencentCloudConfigFieldValues = Nullish<AccessConfigForTencentCloud>;
 
-export type AccessEditFormTencentCloudConfigProps = {
+export type AccessFormTencentCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormTencentCloudConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormTencentCloudConfigFieldValues) => void;
+  initialValues?: AccessFormTencentCloudConfigFieldValues;
+  onValuesChange?: (values: AccessFormTencentCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormTencentCloudConfigFieldValues => {
+const initFormModel = (): AccessFormTencentCloudConfigFieldValues => {
   return {
     secretId: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormTencentCloudConfigProps) => {
+const AccessFormTencentCloudConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormTencentCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialVal
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormTencentCloudConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="secretId"
         label={t("access.form.tencentcloud_secret_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialVal
   );
 };
 
-export default AccessEditFormTencentCloudConfig;
+export default AccessFormTencentCloudConfig;

ui/src/components/access/AccessFormVolcEngineConfig.tsx

@@ -5,24 +5,24 @@ import { z } from "zod";
 
 import { type AccessConfigForVolcEngine } from "@/domain/access";
 
-type AccessEditFormVolcEngineConfigFieldValues = Partial<AccessConfigForVolcEngine>;
+type AccessFormVolcEngineConfigFieldValues = Nullish<AccessConfigForVolcEngine>;
 
-export type AccessEditFormVolcEngineConfigProps = {
+export type AccessFormVolcEngineConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormVolcEngineConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormVolcEngineConfigFieldValues) => void;
+  initialValues?: AccessFormVolcEngineConfigFieldValues;
+  onValuesChange?: (values: AccessFormVolcEngineConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormVolcEngineConfigFieldValues => {
+const initFormModel = (): AccessFormVolcEngineConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormVolcEngineConfigProps) => {
+const AccessFormVolcEngineConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormVolcEngineConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -40,11 +40,18 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValue
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormVolcEngineConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item
         name="accessKeyId"
         label={t("access.form.volcengine_access_key_id.label")}
@@ -66,4 +73,4 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValue
   );
 };
 
-export default AccessEditFormVolcEngineConfig;
+export default AccessFormVolcEngineConfig;

ui/src/components/access/AccessFormWebhookConfig.tsx

@@ -5,23 +5,23 @@ import { z } from "zod";
 
 import { type AccessConfigForWebhook } from "@/domain/access";
 
-type AccessEditFormWebhookConfigFieldValues = Partial<AccessConfigForWebhook>;
+type AccessFormWebhookConfigFieldValues = Nullish<AccessConfigForWebhook>;
 
-export type AccessEditFormWebhookConfigProps = {
+export type AccessFormWebhookConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  initialValues?: AccessEditFormWebhookConfigFieldValues;
-  onValuesChange?: (values: AccessEditFormWebhookConfigFieldValues) => void;
+  initialValues?: AccessFormWebhookConfigFieldValues;
+  onValuesChange?: (values: AccessFormWebhookConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormWebhookConfigFieldValues => {
+const initFormModel = (): AccessFormWebhookConfigFieldValues => {
   return {
     url: "",
   };
 };
 
-const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormWebhookConfigProps) => {
+const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormWebhookConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -30,11 +30,18 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues,
   const formRule = createSchemaFieldRule(formSchema);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onValuesChange?.(values as AccessEditFormWebhookConfigFieldValues);
+    onValuesChange?.(values);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues ?? initFormModel()} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
       <Form.Item name="url" label={t("access.form.webhook_url.label")} rules={[formRule]}>
         <Input placeholder={t("access.form.webhook_url.placeholder")} />
       </Form.Item>
@@ -42,4 +49,4 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues,
   );
 };
 
-export default AccessEditFormWebhookConfig;
+export default AccessFormWebhookConfig;