refactor(ui): useAntdForm

2024-12-25 14:51:32 +08:00
parent c9024c5611
commit 4d0f7c2e02
43 changed files with 779 additions and 677 deletions
--- a/ui/src/components/access/AccessEditForm.tsx
+++ b/ui/src/components/access/AccessEditForm.tsx
@@ -1,10 +1,11 @@
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useCreation, useDeepCompareEffect } from "ahooks";
+import { useCreation } from "ahooks";
 import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { ACCESS_PROVIDER_TYPES, type AccessModel } from "@/domain/access";
 import AccessTypeSelect from "./AccessTypeSelect";
 import AccessEditFormACMEHttpReqConfig from "./AccessEditFormACMEHttpReqConfig";
@@ -26,22 +27,22 @@ import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig
 import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
 import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";

-type AccessEditFormModelType = Partial<MaybeModelRecord<AccessModel>>;
+type AccessEditFormModelValues = Partial<MaybeModelRecord<AccessModel>>;
 type AccessEditFormPresets = "add" | "edit";

 export type AccessEditFormProps = {
  className?: string;
  style?: React.CSSProperties;
  disabled?: boolean;
-  model?: AccessEditFormModelType;
+  model?: AccessEditFormModelValues;
  preset: AccessEditFormPresets;
-  onModelChange?: (model: AccessEditFormModelType) => void;
+  onModelChange?: (model: AccessEditFormModelValues) => void;
 };

 export type AccessEditFormInstance = {
-  getFieldsValue: () => AccessEditFormModelType;
+  getFieldsValue: () => AccessEditFormModelValues;
  resetFields: () => void;
-  validateFields: () => Promise<AccessEditFormModelType>;
+  validateFields: () => Promise<AccessEditFormModelValues>;
 };

 const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, model, preset, onModelChange }, ref) => {
@@ -57,12 +58,9 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
    config: z.any(),
  });
  const formRule = createSchemaFieldRule(formSchema);
-  const [form] = Form.useForm<z.infer<typeof formSchema>>();
-
-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
-  useDeepCompareEffect(() => {
-    setInitialValues(model as Partial<z.infer<typeof formSchema>>);
-  }, [model]);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    initialValues: model as Partial<z.infer<typeof formSchema>>,
+  });

  const [configType, setConfigType] = useState(model?.configType);
  useEffect(() => {
@@ -115,32 +113,32 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
      case ACCESS_PROVIDER_TYPES.WEBHOOK:
        return <AccessEditFormWebhookConfig {...configFormProps} />;
    }
-  }, [model, configType, configFormInst]);
+  }, [disabled, model, configType, configFormInst, configFormName]);

  const handleFormProviderChange = (name: string) => {
    if (name === configFormName) {
-      form.setFieldValue("config", configFormInst.getFieldsValue());
-      onModelChange?.(form.getFieldsValue(true));
+      formInst.setFieldValue("config", configFormInst.getFieldsValue());
+      onModelChange?.(formInst.getFieldsValue(true));
    }
  };

-  const handleFormChange = (_: unknown, fields: AccessEditFormModelType) => {
-    if (fields.configType !== configType) {
-      setConfigType(fields.configType);
+  const handleFormChange = (_: unknown, values: AccessEditFormModelValues) => {
+    if (values.configType !== configType) {
+      setConfigType(values.configType);
    }

-    onModelChange?.(fields);
+    onModelChange?.(values);
  };

  useImperativeHandle(ref, () => ({
    getFieldsValue: () => {
-      return form.getFieldsValue(true);
+      return formInst.getFieldsValue(true);
    },
    resetFields: () => {
-      return form.resetFields();
+      return formInst.resetFields();
    },
    validateFields: () => {
-      const t1 = form.validateFields();
+      const t1 = formInst.validateFields();
      const t2 = configFormInst.validateFields();
      return Promise.all([t1, t2]).then(() => t1);
    },
@@ -149,7 +147,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
  return (
    <Form.Provider onFormChange={handleFormProviderChange}>
      <div className={className} style={style}>
-        <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" onValuesChange={handleFormChange}>
+        <Form {...formProps} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
          <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
            <Input placeholder={t("access.form.name.placeholder")} />
          </Form.Item>
--- a/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx
+++ b/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, Select, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type ACMEHttpReqAccessConfig } from "@/domain/access";

-type AccessEditFormACMEHttpReqConfigModelType = Partial<ACMEHttpReqAccessConfig>;
+type AccessEditFormACMEHttpReqConfigModelValues = Partial<ACMEHttpReqAccessConfig>;

 export type AccessEditFormACMEHttpReqConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormACMEHttpReqConfigModelType;
-  onModelChange?: (model: AccessEditFormACMEHttpReqConfigModelType) => void;
+  model?: AccessEditFormACMEHttpReqConfigModelValues;
+  onModelChange?: (model: AccessEditFormACMEHttpReqConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormACMEHttpReqConfigModelValues => {
  return {
    endpoint: "https://example.com/api/",
    mode: "",
-  } as AccessEditFormACMEHttpReqConfigModelType;
+  };
 };

 const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormACMEHttpReqConfigProps) => {
@@ -44,18 +43,17 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onMo
      .nullish(),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormACMEHttpReqConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormACMEHttpReqConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="endpoint"
        label={t("access.form.acmehttpreq_endpoint.label")}
--- a/ui/src/components/access/AccessEditFormAWSConfig.tsx
+++ b/ui/src/components/access/AccessEditFormAWSConfig.tsx
@@ -1,29 +1,28 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type AWSAccessConfig } from "@/domain/access";

-type AccessEditFormAWSConfigModelType = Partial<AWSAccessConfig>;
+type AccessEditFormAWSConfigModelValues = Partial<AWSAccessConfig>;

 export type AccessEditFormAWSConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormAWSConfigModelType;
-  onModelChange?: (model: AccessEditFormAWSConfigModelType) => void;
+  model?: AccessEditFormAWSConfigModelValues;
+  onModelChange?: (model: AccessEditFormAWSConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormAWSConfigModelValues => {
  return {
    accessKeyId: "",
    secretAccessKey: "",
    region: "us-east-1",
    hostedZoneId: "",
-  } as AccessEditFormAWSConfigModelType;
+  };
 };

 const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAWSConfigProps) => {
@@ -56,18 +55,17 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChang
      .nullish(),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormAWSConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormAWSConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKeyId"
        label={t("access.form.aws_access_key_id.label")}
--- a/ui/src/components/access/AccessEditFormAliyunConfig.tsx
+++ b/ui/src/components/access/AccessEditFormAliyunConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type AliyunAccessConfig } from "@/domain/access";

-type AccessEditFormAliyunConfigModelType = Partial<AliyunAccessConfig>;
+type AccessEditFormAliyunConfigModelValues = Partial<AliyunAccessConfig>;

 export type AccessEditFormAliyunConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormAliyunConfigModelType;
-  onModelChange?: (model: AccessEditFormAliyunConfigModelType) => void;
+  model?: AccessEditFormAliyunConfigModelValues;
+  onModelChange?: (model: AccessEditFormAliyunConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormAliyunConfigModelValues => {
  return {
    accessKeyId: "",
    accessKeySecret: "",
-  } as AccessEditFormAliyunConfigModelType;
+  };
 };

 const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAliyunConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelCh
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormAliyunConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormAliyunConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKeyId"
        label={t("access.form.aliyun_access_key_id.label")}
--- a/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx
+++ b/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type BaiduCloudAccessConfig } from "@/domain/access";

-type AccessEditFormBaiduCloudConfigModelType = Partial<BaiduCloudAccessConfig>;
+type AccessEditFormBaiduCloudConfigModelValues = Partial<BaiduCloudAccessConfig>;

 export type AccessEditFormBaiduCloudConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormBaiduCloudConfigModelType;
-  onModelChange?: (model: AccessEditFormBaiduCloudConfigModelType) => void;
+  model?: AccessEditFormBaiduCloudConfigModelValues;
+  onModelChange?: (model: AccessEditFormBaiduCloudConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormBaiduCloudConfigModelValues => {
  return {
    accessKeyId: "",
    secretAccessKey: "",
-  } as AccessEditFormBaiduCloudConfigModelType;
+  };
 };

 const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBaiduCloudConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onMod
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormBaiduCloudConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormBaiduCloudConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKeyId"
        label={t("access.form.baiducloud_access_key_id.label")}
--- a/ui/src/components/access/AccessEditFormBytePlusConfig.tsx
+++ b/ui/src/components/access/AccessEditFormBytePlusConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type BytePlusAccessConfig } from "@/domain/access";

-type AccessEditFormBytePlusConfigModelType = Partial<BytePlusAccessConfig>;
+type AccessEditFormBytePlusConfigModelValues = Partial<BytePlusAccessConfig>;

 export type AccessEditFormBytePlusConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormBytePlusConfigModelType;
-  onModelChange?: (model: AccessEditFormBytePlusConfigModelType) => void;
+  model?: AccessEditFormBytePlusConfigModelValues;
+  onModelChange?: (model: AccessEditFormBytePlusConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormBytePlusConfigModelValues => {
  return {
    accessKey: "",
    secretKey: "",
-  } as AccessEditFormBytePlusConfigModelType;
+  };
 };

 const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBytePlusConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModel
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormBytePlusConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormBytePlusConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKey"
        label={t("access.form.byteplus_access_key.label")}
--- a/ui/src/components/access/AccessEditFormCloudflareConfig.tsx
+++ b/ui/src/components/access/AccessEditFormCloudflareConfig.tsx
@@ -1,26 +1,25 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type CloudflareAccessConfig } from "@/domain/access";

-type AccessEditFormCloudflareConfigModelType = Partial<CloudflareAccessConfig>;
+type AccessEditFormCloudflareConfigModelValues = Partial<CloudflareAccessConfig>;

 export type AccessEditFormCloudflareConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormCloudflareConfigModelType;
-  onModelChange?: (model: AccessEditFormCloudflareConfigModelType) => void;
+  model?: AccessEditFormCloudflareConfigModelValues;
+  onModelChange?: (model: AccessEditFormCloudflareConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormCloudflareConfigModelValues => {
  return {
    dnsApiToken: "",
-  } as AccessEditFormCloudflareConfigModelType;
+  };
 };

 const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormCloudflareConfigProps) => {
@@ -34,18 +33,17 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onMod
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormCloudflareConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormCloudflareConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="dnsApiToken"
        label={t("access.form.cloudflare_dns_api_token.label")}
--- a/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx
+++ b/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type DogeCloudAccessConfig } from "@/domain/access";

-type AccessEditFormDogeCloudConfigModelType = Partial<DogeCloudAccessConfig>;
+type AccessEditFormDogeCloudConfigModelValues = Partial<DogeCloudAccessConfig>;

 export type AccessEditFormDogeCloudConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormDogeCloudConfigModelType;
-  onModelChange?: (model: AccessEditFormDogeCloudConfigModelType) => void;
+  model?: AccessEditFormDogeCloudConfigModelValues;
+  onModelChange?: (model: AccessEditFormDogeCloudConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormDogeCloudConfigModelValues => {
  return {
    accessKey: "",
    secretKey: "",
-  } as AccessEditFormDogeCloudConfigModelType;
+  };
 };

 const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormDogeCloudConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onMode
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormDogeCloudConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormDogeCloudConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKey"
        label={t("access.form.dogecloud_access_key.label")}
--- a/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx
+++ b/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type GoDaddyAccessConfig } from "@/domain/access";

-type AccessEditFormGoDaddyConfigModelType = Partial<GoDaddyAccessConfig>;
+type AccessEditFormGoDaddyConfigModelValues = Partial<GoDaddyAccessConfig>;

 export type AccessEditFormGoDaddyConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormGoDaddyConfigModelType;
-  onModelChange?: (model: AccessEditFormGoDaddyConfigModelType) => void;
+  model?: AccessEditFormGoDaddyConfigModelValues;
+  onModelChange?: (model: AccessEditFormGoDaddyConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormGoDaddyConfigModelValues => {
  return {
    apiKey: "",
    apiSecret: "",
-  } as AccessEditFormGoDaddyConfigModelType;
+  };
 };

 const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormGoDaddyConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelC
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormGoDaddyConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormGoDaddyConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="apiKey"
        label={t("access.form.godaddy_api_key.label")}
--- a/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx
+++ b/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx
@@ -1,28 +1,27 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type HuaweiCloudAccessConfig } from "@/domain/access";

-type AccessEditFormHuaweiCloudConfigModelType = Partial<HuaweiCloudAccessConfig>;
+type AccessEditFormHuaweiCloudConfigModelValues = Partial<HuaweiCloudAccessConfig>;

 export type AccessEditFormHuaweiCloudConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormHuaweiCloudConfigModelType;
-  onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelType) => void;
+  model?: AccessEditFormHuaweiCloudConfigModelValues;
+  onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormHuaweiCloudConfigModelValues => {
  return {
    accessKeyId: "",
    secretAccessKey: "",
    region: "cn-north-1",
-  } as AccessEditFormHuaweiCloudConfigModelType;
+  };
 };

 const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormHuaweiCloudConfigProps) => {
@@ -48,18 +47,17 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onMo
      .nullish(),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormHuaweiCloudConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormHuaweiCloudConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKeyId"
        label={t("access.form.huaweicloud_access_key_id.label")}
--- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
+++ b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
@@ -7,21 +7,22 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 import { Upload as UploadIcon } from "lucide-react";

+import { useAntdForm } from "@/hooks";
 import { type KubernetesAccessConfig } from "@/domain/access";
 import { readFileContent } from "@/utils/file";

-type AccessEditFormKubernetesConfigModelType = Partial<KubernetesAccessConfig>;
+type AccessEditFormKubernetesConfigModelValues = Partial<KubernetesAccessConfig>;

 export type AccessEditFormKubernetesConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormKubernetesConfigModelType;
-  onModelChange?: (model: AccessEditFormKubernetesConfigModelType) => void;
+  model?: AccessEditFormKubernetesConfigModelValues;
+  onModelChange?: (model: AccessEditFormKubernetesConfigModelValues) => void;
 };

-const initModel = () => {
-  return {} as AccessEditFormKubernetesConfigModelType;
+const initFormModel = (): AccessEditFormKubernetesConfigModelValues => {
+  return {};
 };

 const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormKubernetesConfigProps) => {
@@ -36,21 +37,21 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
      .nullish(),
  });
  const formRule = createSchemaFieldRule(formSchema);
-  const formInst = form as FormInstance<z.infer<typeof formSchema>>;
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
+  const [kubeFileList, setKubeFileList] = useState<UploadFile[]>([]);
  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
    setKubeFileList(model?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
  }, [model]);

-  const [kubeFileList, setKubeFileList] = useState<UploadFile[]>([]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormKubernetesConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormKubernetesConfigModelValues);
  };

-  const handleUploadChange: UploadProps["onChange"] = async ({ file }) => {
+  const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
    if (file && file.status !== "removed") {
      formInst.setFieldValue("kubeConfig", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
      setKubeFileList([file]);
@@ -63,7 +64,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item name="kubeConfig" noStyle rules={[formRule]}>
        <Input.TextArea
          autoComplete="new-password"
@@ -76,7 +77,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
        label={t("access.form.k8s_kubeconfig.label")}
        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.k8s_kubeconfig.tooltip") }}></span>}
      >
-        <Upload beforeUpload={() => false} fileList={kubeFileList} maxCount={1} onChange={handleUploadChange}>
+        <Upload beforeUpload={() => false} fileList={kubeFileList} maxCount={1} onChange={handleKubeFileChange}>
          <Button icon={<UploadIcon size={16} />}>{t("access.form.k8s_kubeconfig.upload")}</Button>
        </Upload>
      </Form.Item>
--- a/ui/src/components/access/AccessEditFormLocalConfig.tsx
+++ b/ui/src/components/access/AccessEditFormLocalConfig.tsx
@@ -1,30 +1,33 @@
-import { useState } from "react";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, type FormInstance } from "antd";

+import { useAntdForm } from "@/hooks";
 import { type LocalAccessConfig } from "@/domain/access";

-type AccessEditFormLocalConfigModelType = Partial<LocalAccessConfig>;
+type AccessEditFormLocalConfigModelValues = Partial<LocalAccessConfig>;

 export type AccessEditFormLocalConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormLocalConfigModelType;
-  onModelChange?: (model: AccessEditFormLocalConfigModelType) => void;
+  model?: AccessEditFormLocalConfigModelValues;
+  onModelChange?: (model: AccessEditFormLocalConfigModelValues) => void;
 };

-const initModel = () => {
-  return {} as AccessEditFormLocalConfigModelType;
+const initFormModel = (): AccessEditFormLocalConfigModelValues => {
+  return {};
 };

-const AccessEditFormLocalConfig = ({ form, formName, disabled, model }: AccessEditFormLocalConfigProps) => {
-  const [initialValues, setInitialValues] = useState(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
+const AccessEditFormLocalConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormLocalConfigProps) => {
+  const { form: formInst, formProps } = useAntdForm({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  return <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName}></Form>;
+  const handleFormChange = (_: unknown, values: unknown) => {
+    onModelChange?.(values as AccessEditFormLocalConfigModelValues);
+  };
+
+  return <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}></Form>;
 };

 export default AccessEditFormLocalConfig;
--- a/ui/src/components/access/AccessEditFormNameSiloConfig.tsx
+++ b/ui/src/components/access/AccessEditFormNameSiloConfig.tsx
@@ -1,26 +1,25 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type NameSiloAccessConfig } from "@/domain/access";

-type AccessEditFormNameSiloConfigModelType = Partial<NameSiloAccessConfig>;
+type AccessEditFormNameSiloConfigModelValues = Partial<NameSiloAccessConfig>;

 export type AccessEditFormNameSiloConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormNameSiloConfigModelType;
-  onModelChange?: (model: AccessEditFormNameSiloConfigModelType) => void;
+  model?: AccessEditFormNameSiloConfigModelValues;
+  onModelChange?: (model: AccessEditFormNameSiloConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormNameSiloConfigModelValues => {
  return {
    apiKey: "",
-  } as AccessEditFormNameSiloConfigModelType;
+  };
 };

 const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormNameSiloConfigProps) => {
@@ -34,18 +33,17 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModel
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormNameSiloConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormNameSiloConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="apiKey"
        label={t("access.form.namesilo_api_key.label")}
--- a/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx
+++ b/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type PowerDNSAccessConfig } from "@/domain/access";

-type AccessEditFormPowerDNSConfigModelType = Partial<PowerDNSAccessConfig>;
+type AccessEditFormPowerDNSConfigModelValues = Partial<PowerDNSAccessConfig>;

 export type AccessEditFormPowerDNSConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormPowerDNSConfigModelType;
-  onModelChange?: (model: AccessEditFormPowerDNSConfigModelType) => void;
+  model?: AccessEditFormPowerDNSConfigModelValues;
+  onModelChange?: (model: AccessEditFormPowerDNSConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormPowerDNSConfigModelValues => {
  return {
    apiUrl: "",
    apiKey: "",
-  } as AccessEditFormPowerDNSConfigModelType;
+  };
 };

 const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormPowerDNSConfigProps) => {
@@ -36,18 +35,17 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModel
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormPowerDNSConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormPowerDNSConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="apiUrl"
        label={t("access.form.powerdns_api_url.label")}
--- a/ui/src/components/access/AccessEditFormQiniuConfig.tsx
+++ b/ui/src/components/access/AccessEditFormQiniuConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type QiniuAccessConfig } from "@/domain/access";

-type AccessEditFormQiniuConfigModelType = Partial<QiniuAccessConfig>;
+type AccessEditFormQiniuConfigModelValues = Partial<QiniuAccessConfig>;

 export type AccessEditFormQiniuConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormQiniuConfigModelType;
-  onModelChange?: (model: AccessEditFormQiniuConfigModelType) => void;
+  model?: AccessEditFormQiniuConfigModelValues;
+  onModelChange?: (model: AccessEditFormQiniuConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormQiniuConfigModelValues => {
  return {
    accessKey: "",
    secretKey: "",
-  } as AccessEditFormQiniuConfigModelType;
+  };
 };

 const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormQiniuConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelCha
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormQiniuConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormQiniuConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKey"
        label={t("access.form.qiniu_access_key.label")}
--- a/ui/src/components/access/AccessEditFormSSHConfig.tsx
+++ b/ui/src/components/access/AccessEditFormSSHConfig.tsx
@@ -7,25 +7,26 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 import { Upload as UploadIcon } from "lucide-react";

+import { useAntdForm } from "@/hooks";
 import { type SSHAccessConfig } from "@/domain/access";
 import { readFileContent } from "@/utils/file";

-type AccessEditFormSSHConfigModelType = Partial<SSHAccessConfig>;
+type AccessEditFormSSHConfigModelValues = Partial<SSHAccessConfig>;

 export type AccessEditFormSSHConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormSSHConfigModelType;
-  onModelChange?: (model: AccessEditFormSSHConfigModelType) => void;
+  model?: AccessEditFormSSHConfigModelValues;
+  onModelChange?: (model: AccessEditFormSSHConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormSSHConfigModelValues => {
  return {
    host: "127.0.0.1",
    port: 22,
    username: "root",
-  } as AccessEditFormSSHConfigModelType;
+  };
 };

 const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormSSHConfigProps) => {
@@ -71,21 +72,21 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
      .and(z.string().refine((v) => !v || form.getFieldValue("key"), { message: t("access.form.ssh_key.placeholder") })),
  });
  const formRule = createSchemaFieldRule(formSchema);
-  const formInst = form as FormInstance<z.infer<typeof formSchema>>;
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
+  const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
    setKeyFileList(model?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
  }, [model]);

-  const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormSSHConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormSSHConfigModelValues);
  };

-  const handleUploadChange: UploadProps["onChange"] = async ({ file }) => {
+  const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
    if (file && file.status !== "removed") {
      formInst.setFieldValue("key", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
      setKeyFileList([file]);
@@ -98,7 +99,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} 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]}>
@@ -138,7 +139,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
            <Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.ssh_key.placeholder")} value={formInst.getFieldValue("key")} />
          </Form.Item>
          <Form.Item label={t("access.form.ssh_key.label")} tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ssh_key.tooltip") }}></span>}>
-            <Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleUploadChange}>
+            <Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleKeyFileChange}>
              <Button icon={<UploadIcon size={16} />}>{t("access.form.ssh_key.upload")}</Button>
            </Upload>
          </Form.Item>
--- a/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx
+++ b/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type TencentCloudAccessConfig } from "@/domain/access";

-type AccessEditFormTencentCloudConfigModelType = Partial<TencentCloudAccessConfig>;
+type AccessEditFormTencentCloudConfigModelValues = Partial<TencentCloudAccessConfig>;

 export type AccessEditFormTencentCloudConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormTencentCloudConfigModelType;
-  onModelChange?: (model: AccessEditFormTencentCloudConfigModelType) => void;
+  model?: AccessEditFormTencentCloudConfigModelValues;
+  onModelChange?: (model: AccessEditFormTencentCloudConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormTencentCloudConfigModelValues => {
  return {
    secretId: "",
    secretKey: "",
-  } as AccessEditFormTencentCloudConfigModelType;
+  };
 };

 const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormTencentCloudConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onM
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormTencentCloudConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormTencentCloudConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="secretId"
        label={t("access.form.tencentcloud_secret_id.label")}
--- a/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx
+++ b/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx
@@ -1,27 +1,26 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type VolcEngineAccessConfig } from "@/domain/access";

-type AccessEditFormVolcEngineConfigModelType = Partial<VolcEngineAccessConfig>;
+type AccessEditFormVolcEngineConfigModelValues = Partial<VolcEngineAccessConfig>;

 export type AccessEditFormVolcEngineConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormVolcEngineConfigModelType;
-  onModelChange?: (model: AccessEditFormVolcEngineConfigModelType) => void;
+  model?: AccessEditFormVolcEngineConfigModelValues;
+  onModelChange?: (model: AccessEditFormVolcEngineConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormVolcEngineConfigModelValues => {
  return {
    accessKeyId: "",
    secretAccessKey: "",
-  } as AccessEditFormVolcEngineConfigModelType;
+  };
 };

 const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormVolcEngineConfigProps) => {
@@ -40,18 +39,17 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onMod
      .max(64, t("common.errmsg.string_max", { max: 64 })),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormVolcEngineConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormVolcEngineConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
      <Form.Item
        name="accessKeyId"
        label={t("access.form.volcengine_access_key_id.label")}
--- a/ui/src/components/access/AccessEditFormWebhookConfig.tsx
+++ b/ui/src/components/access/AccessEditFormWebhookConfig.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

+import { useAntdForm } from "@/hooks";
 import { type WebhookAccessConfig } from "@/domain/access";

-type AccessEditFormWebhookConfigModelType = Partial<WebhookAccessConfig>;
+type AccessEditFormWebhookConfigModelValues = Partial<WebhookAccessConfig>;

 export type AccessEditFormWebhookConfigProps = {
  form: FormInstance;
  formName: string;
  disabled?: boolean;
-  model?: AccessEditFormWebhookConfigModelType;
-  onModelChange?: (model: AccessEditFormWebhookConfigModelType) => void;
+  model?: AccessEditFormWebhookConfigModelValues;
+  onModelChange?: (model: AccessEditFormWebhookConfigModelValues) => void;
 };

-const initModel = () => {
+const initFormModel = (): AccessEditFormWebhookConfigModelValues => {
  return {
    url: "",
-  } as AccessEditFormWebhookConfigModelType;
+  };
 };

 const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormWebhookConfigProps) => {
@@ -32,18 +32,17 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelC
      .url({ message: t("common.errmsg.url_invalid") }),
  });
  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });

-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormWebhookConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormWebhookConfigModelValues);
  };

  return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} 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>
--- a/ui/src/components/access/AccessEditModal.tsx
+++ b/ui/src/components/access/AccessEditModal.tsx
@@ -53,7 +53,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
      await formRef.current!.validateFields();
    } catch (err) {
      setFormPending(false);
-      return Promise.reject();
+      return Promise.reject(err);
    }

    try {
@@ -74,8 +74,6 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
      setOpen(false);
    } catch (err) {
      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
-
-      throw err;
    } finally {
      setFormPending(false);
    }