refactor(ui): clean code

ui/src/components/access/AccessEditForm.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useCreation } from "ahooks";
-import { Form, Input } from "antd";
+import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
@@ -28,25 +28,21 @@ import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig
 import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
 import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
 
-type AccessEditFormModelValues = Partial<MaybeModelRecord<AccessModel>>;
+type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
 type AccessEditFormPresets = "add" | "edit";
 
 export type AccessEditFormProps = {
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
-  model?: AccessEditFormModelValues;
+  initialValues?: AccessEditFormFieldValues;
   preset: AccessEditFormPresets;
-  onModelChange?: (model: AccessEditFormModelValues) => void;
+  onValuesChange?: (values: AccessEditFormFieldValues) => void;
 };
 
-export type AccessEditFormInstance = {
+export type AccessEditFormInstance = FormInstance<AccessEditFormFieldValues>;
-  getFieldsValue: () => AccessEditFormModelValues;
-  resetFields: () => void;
-  validateFields: () => Promise<AccessEditFormModelValues>;
-};
 
-const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, model, preset, onModelChange }, ref) => {
+const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -59,14 +55,14 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
     config: z.any(),
   });
   const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+  const { form: formInst, formProps } = useAntdForm({
-    initialValues: model as Partial<z.infer<typeof formSchema>>,
+    initialValues: initialValues,
   });
 
-  const [configType, setConfigType] = useState(model?.configType);
+  const [configType, setConfigType] = useState(initialValues?.configType);
   useEffect(() => {
-    setConfigType(model?.configType);
+    setConfigType(initialValues?.configType);
-  }, [model?.configType]);
+  }, [initialValues?.configType]);
 
   const [configFormInst] = Form.useForm();
   const configFormName = useCreation(() => `accessEditForm_config${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
@@ -75,7 +71,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
       注意：如果追加新的子组件，请保持以 ASCII 排序。
       NOTICE: If you add new child component, please keep ASCII order.
      */
-    const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, model: model?.config };
+    const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, initialValues: initialValues?.config };
     switch (configType) {
       case ACCESS_PROVIDER_TYPES.ACMEHTTPREQ:
         return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
@@ -116,36 +112,52 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
       case ACCESS_PROVIDER_TYPES.WEBHOOK:
         return <AccessEditFormWebhookConfig {...configFormProps} />;
     }
-  }, [disabled, model, configType, configFormInst, configFormName]);
+  }, [disabled, initialValues, configType, configFormInst, configFormName]);
 
   const handleFormProviderChange = (name: string) => {
     if (name === configFormName) {
       formInst.setFieldValue("config", configFormInst.getFieldsValue());
-      onModelChange?.(formInst.getFieldsValue(true));
+      onValuesChange?.(formInst.getFieldsValue(true));
     }
   };
 
-  const handleFormChange = (_: unknown, values: AccessEditFormModelValues) => {
+  const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
     if (values.configType !== configType) {
       setConfigType(values.configType);
     }
 
-    onModelChange?.(values);
+    onValuesChange?.(values);
   };
 
-  useImperativeHandle(ref, () => ({
+  useImperativeHandle(ref, () => {
-    getFieldsValue: () => {
+    return {
-      return formInst.getFieldsValue(true);
+      getFieldValue: (name) => formInst.getFieldValue(name),
-    },
+      getFieldsValue: (...args) => {
-    resetFields: () => {
+        if (Array.from(args).length === 0) {
-      return formInst.resetFields();
+          return formInst.getFieldsValue(true);
-    },
+        }
-    validateFields: () => {
+
-      const t1 = formInst.validateFields();
+        return formInst.getFieldsValue(args[0] as any, args[1] as any);
-      const t2 = configFormInst.validateFields();
+      },
-      return Promise.all([t1, t2]).then(() => t1);
+      getFieldError: (name) => formInst.getFieldError(name),
-    },
+      getFieldsError: (nameList) => formInst.getFieldsError(nameList),
-  }));
+      getFieldWarning: (name) => formInst.getFieldWarning(name),
+      isFieldsTouched: (nameList, allFieldsTouched) => formInst.isFieldsTouched(nameList, allFieldsTouched),
+      isFieldTouched: (name) => formInst.isFieldTouched(name),
+      isFieldValidating: (name) => formInst.isFieldValidating(name),
+      isFieldsValidating: (nameList) => formInst.isFieldsValidating(nameList),
+      resetFields: (fields) => formInst.resetFields(fields),
+      setFields: (fields) => formInst.setFields(fields),
+      setFieldValue: (name, value) => formInst.setFieldValue(name, value),
+      setFieldsValue: (values) => formInst.setFieldsValue(values),
+      submit: () => formInst.submit(),
+      validateFields: (nameList, config) => {
+        const t1 = formInst.validateFields(nameList, config);
+        const t2 = configFormInst.validateFields(undefined, config);
+        return Promise.all([t1, t2]).then(() => t1);
+      },
+    } as AccessEditFormInstance;
+  });
 
   return (
     <Form.Provider onFormChange={handleFormProviderChange}>

ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type ACMEHttpReqAccessConfig } from "@/domain/access";
 
-type AccessEditFormACMEHttpReqConfigModelValues = Partial<ACMEHttpReqAccessConfig>;
+type AccessEditFormACMEHttpReqConfigFieldValues = Partial<ACMEHttpReqAccessConfig>;
 
 export type AccessEditFormACMEHttpReqConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormACMEHttpReqConfigModelValues;
+  initialValues?: AccessEditFormACMEHttpReqConfigFieldValues;
-  onModelChange?: (model: AccessEditFormACMEHttpReqConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormACMEHttpReqConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormACMEHttpReqConfigModelValues => {
+const initFormModel = (): AccessEditFormACMEHttpReqConfigFieldValues => {
   return {
     endpoint: "https://example.com/api/",
     mode: "",
   };
 };
 
-const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormACMEHttpReqConfigProps) => {
+const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormACMEHttpReqConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -45,11 +45,11 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onMo
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormACMEHttpReqConfigModelValues);
+    onValuesChange?.(values as AccessEditFormACMEHttpReqConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormAWSConfig.tsx

@@ -6,17 +6,17 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type AWSAccessConfig } from "@/domain/access";
 
-type AccessEditFormAWSConfigModelValues = Partial<AWSAccessConfig>;
+type AccessEditFormAWSConfigFieldValues = Partial<AWSAccessConfig>;
 
 export type AccessEditFormAWSConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormAWSConfigModelValues;
+  initialValues?: AccessEditFormAWSConfigFieldValues;
-  onModelChange?: (model: AccessEditFormAWSConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormAWSConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormAWSConfigModelValues => {
+const initFormModel = (): AccessEditFormAWSConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
@@ -25,7 +25,7 @@ const initFormModel = (): AccessEditFormAWSConfigModelValues => {
   };
 };
 
-const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAWSConfigProps) => {
+const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormAWSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -57,11 +57,11 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChang
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormAWSConfigModelValues);
+    onValuesChange?.(values as AccessEditFormAWSConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormAliyunConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type AliyunAccessConfig } from "@/domain/access";
 
-type AccessEditFormAliyunConfigModelValues = Partial<AliyunAccessConfig>;
+type AccessEditFormAliyunConfigFieldValues = Partial<AliyunAccessConfig>;
 
 export type AccessEditFormAliyunConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormAliyunConfigModelValues;
+  initialValues?: AccessEditFormAliyunConfigFieldValues;
-  onModelChange?: (model: AccessEditFormAliyunConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormAliyunConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormAliyunConfigModelValues => {
+const initFormModel = (): AccessEditFormAliyunConfigFieldValues => {
   return {
     accessKeyId: "",
     accessKeySecret: "",
   };
 };
 
-const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAliyunConfigProps) => {
+const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessEditFormAliyunConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelCh
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormAliyunConfigModelValues);
+    onValuesChange?.(values as AccessEditFormAliyunConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type BaiduCloudAccessConfig } from "@/domain/access";
 
-type AccessEditFormBaiduCloudConfigModelValues = Partial<BaiduCloudAccessConfig>;
+type AccessEditFormBaiduCloudConfigFieldValues = Partial<BaiduCloudAccessConfig>;
 
 export type AccessEditFormBaiduCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormBaiduCloudConfigModelValues;
+  initialValues?: AccessEditFormBaiduCloudConfigFieldValues;
-  onModelChange?: (model: AccessEditFormBaiduCloudConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormBaiduCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormBaiduCloudConfigModelValues => {
+const initFormModel = (): AccessEditFormBaiduCloudConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBaiduCloudConfigProps) => {
+const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBaiduCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onMod
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormBaiduCloudConfigModelValues);
+    onValuesChange?.(values as AccessEditFormBaiduCloudConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormBytePlusConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type BytePlusAccessConfig } from "@/domain/access";
 
-type AccessEditFormBytePlusConfigModelValues = Partial<BytePlusAccessConfig>;
+type AccessEditFormBytePlusConfigFieldValues = Partial<BytePlusAccessConfig>;
 
 export type AccessEditFormBytePlusConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormBytePlusConfigModelValues;
+  initialValues?: AccessEditFormBytePlusConfigFieldValues;
-  onModelChange?: (model: AccessEditFormBytePlusConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormBytePlusConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormBytePlusConfigModelValues => {
+const initFormModel = (): AccessEditFormBytePlusConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBytePlusConfigProps) => {
+const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBytePlusConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModel
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormBytePlusConfigModelValues);
+    onValuesChange?.(values as AccessEditFormBytePlusConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormCloudflareConfig.tsx

@@ -6,23 +6,23 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type CloudflareAccessConfig } from "@/domain/access";
 
-type AccessEditFormCloudflareConfigModelValues = Partial<CloudflareAccessConfig>;
+type AccessEditFormCloudflareConfigFieldValues = Partial<CloudflareAccessConfig>;
 
 export type AccessEditFormCloudflareConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormCloudflareConfigModelValues;
+  initialValues?: AccessEditFormCloudflareConfigFieldValues;
-  onModelChange?: (model: AccessEditFormCloudflareConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormCloudflareConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormCloudflareConfigModelValues => {
+const initFormModel = (): AccessEditFormCloudflareConfigFieldValues => {
   return {
     dnsApiToken: "",
   };
 };
 
-const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormCloudflareConfigProps) => {
+const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormCloudflareConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -35,11 +35,11 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onMod
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormCloudflareConfigModelValues);
+    onValuesChange?.(values as AccessEditFormCloudflareConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormDogeCloudConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type DogeCloudAccessConfig } from "@/domain/access";
 
-type AccessEditFormDogeCloudConfigModelValues = Partial<DogeCloudAccessConfig>;
+type AccessEditFormDogeCloudConfigFieldValues = Partial<DogeCloudAccessConfig>;
 
 export type AccessEditFormDogeCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormDogeCloudConfigModelValues;
+  initialValues?: AccessEditFormDogeCloudConfigFieldValues;
-  onModelChange?: (model: AccessEditFormDogeCloudConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormDogeCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormDogeCloudConfigModelValues => {
+const initFormModel = (): AccessEditFormDogeCloudConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormDogeCloudConfigProps) => {
+const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormDogeCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onMode
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormDogeCloudConfigModelValues);
+    onValuesChange?.(values as AccessEditFormDogeCloudConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormGoDaddyConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type GoDaddyAccessConfig } from "@/domain/access";
 
-type AccessEditFormGoDaddyConfigModelValues = Partial<GoDaddyAccessConfig>;
+type AccessEditFormGoDaddyConfigFieldValues = Partial<GoDaddyAccessConfig>;
 
 export type AccessEditFormGoDaddyConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormGoDaddyConfigModelValues;
+  initialValues?: AccessEditFormGoDaddyConfigFieldValues;
-  onModelChange?: (model: AccessEditFormGoDaddyConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormGoDaddyConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormGoDaddyConfigModelValues => {
+const initFormModel = (): AccessEditFormGoDaddyConfigFieldValues => {
   return {
     apiKey: "",
     apiSecret: "",
   };
 };
 
-const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormGoDaddyConfigProps) => {
+const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormGoDaddyConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelC
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormGoDaddyConfigModelValues);
+    onValuesChange?.(values as AccessEditFormGoDaddyConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx

@@ -6,17 +6,17 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type HuaweiCloudAccessConfig } from "@/domain/access";
 
-type AccessEditFormHuaweiCloudConfigModelValues = Partial<HuaweiCloudAccessConfig>;
+type AccessEditFormHuaweiCloudConfigFieldValues = Partial<HuaweiCloudAccessConfig>;
 
 export type AccessEditFormHuaweiCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormHuaweiCloudConfigModelValues;
+  initialValues?: AccessEditFormHuaweiCloudConfigFieldValues;
-  onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormHuaweiCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormHuaweiCloudConfigModelValues => {
+const initFormModel = (): AccessEditFormHuaweiCloudConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
@@ -24,7 +24,7 @@ const initFormModel = (): AccessEditFormHuaweiCloudConfigModelValues => {
   };
 };
 
-const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormHuaweiCloudConfigProps) => {
+const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormHuaweiCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -49,11 +49,11 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onMo
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormHuaweiCloudConfigModelValues);
+    onValuesChange?.(values as AccessEditFormHuaweiCloudConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormKubernetesConfig.tsx

@@ -11,21 +11,21 @@ import { useAntdForm } from "@/hooks";
 import { type KubernetesAccessConfig } from "@/domain/access";
 import { readFileContent } from "@/utils/file";
 
-type AccessEditFormKubernetesConfigModelValues = Partial<KubernetesAccessConfig>;
+type AccessEditFormKubernetesConfigFieldValues = Partial<KubernetesAccessConfig>;
 
 export type AccessEditFormKubernetesConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormKubernetesConfigModelValues;
+  initialValues?: AccessEditFormKubernetesConfigFieldValues;
-  onModelChange?: (model: AccessEditFormKubernetesConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormKubernetesConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormKubernetesConfigModelValues => {
+const initFormModel = (): AccessEditFormKubernetesConfigFieldValues => {
   return {};
 };
 
-const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormKubernetesConfigProps) => {
+const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormKubernetesConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -39,16 +39,16 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const [kubeFileList, setKubeFileList] = useState<UploadFile[]>([]);
   useDeepCompareEffect(() => {
-    setKubeFileList(model?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
+    setKubeFileList(initialValues?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
-  }, [model]);
+  }, [initialValues]);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormKubernetesConfigModelValues);
+    onValuesChange?.(values as AccessEditFormKubernetesConfigFieldValues);
   };
 
   const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
@@ -60,7 +60,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
       setKubeFileList([]);
     }
 
-    flushSync(() => onModelChange?.(formInst.getFieldsValue(true)));
+    flushSync(() => onValuesChange?.(formInst.getFieldsValue(true)));
   };
 
   return (

ui/src/components/access/AccessEditFormLocalConfig.tsx

@@ -3,28 +3,28 @@ import { Form, type FormInstance } from "antd";
 import { useAntdForm } from "@/hooks";
 import { type LocalAccessConfig } from "@/domain/access";
 
-type AccessEditFormLocalConfigModelValues = Partial<LocalAccessConfig>;
+type AccessEditFormLocalConfigFieldValues = Partial<LocalAccessConfig>;
 
 export type AccessEditFormLocalConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormLocalConfigModelValues;
+  initialValues?: AccessEditFormLocalConfigFieldValues;
-  onModelChange?: (model: AccessEditFormLocalConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormLocalConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormLocalConfigModelValues => {
+const initFormModel = (): AccessEditFormLocalConfigFieldValues => {
   return {};
 };
 
-const AccessEditFormLocalConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormLocalConfigProps) => {
+const AccessEditFormLocalConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormLocalConfigProps) => {
   const { form: formInst, formProps } = useAntdForm({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: unknown) => {
-    onModelChange?.(values as AccessEditFormLocalConfigModelValues);
+    onValuesChange?.(values as AccessEditFormLocalConfigFieldValues);
   };
 
   return <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}></Form>;

ui/src/components/access/AccessEditFormNameDotComConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type NameDotComAccessConfig } from "@/domain/access";
 
-type AccessEditFormNameDotComConfigModelValues = Partial<NameDotComAccessConfig>;
+type AccessEditFormNameDotComConfigFieldValues = Partial<NameDotComAccessConfig>;
 
 export type AccessEditFormNameDotComConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormNameDotComConfigModelValues;
+  initialValues?: AccessEditFormNameDotComConfigFieldValues;
-  onModelChange?: (model: AccessEditFormNameDotComConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormNameDotComConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormNameDotComConfigModelValues => {
+const initFormModel = (): AccessEditFormNameDotComConfigFieldValues => {
   return {
     username: "",
     apiToken: "",
   };
 };
 
-const AccessEditFormNameDotComConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormNameDotComConfigProps) => {
+const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameDotComConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, model, onMod
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormNameDotComConfigModelValues);
+    onValuesChange?.(values as AccessEditFormNameDotComConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormNameSiloConfig.tsx

@@ -6,23 +6,23 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type NameSiloAccessConfig } from "@/domain/access";
 
-type AccessEditFormNameSiloConfigModelValues = Partial<NameSiloAccessConfig>;
+type AccessEditFormNameSiloConfigFieldValues = Partial<NameSiloAccessConfig>;
 
 export type AccessEditFormNameSiloConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormNameSiloConfigModelValues;
+  initialValues?: AccessEditFormNameSiloConfigFieldValues;
-  onModelChange?: (model: AccessEditFormNameSiloConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormNameSiloConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormNameSiloConfigModelValues => {
+const initFormModel = (): AccessEditFormNameSiloConfigFieldValues => {
   return {
     apiKey: "",
   };
 };
 
-const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormNameSiloConfigProps) => {
+const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameSiloConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -35,11 +35,11 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModel
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormNameSiloConfigModelValues);
+    onValuesChange?.(values as AccessEditFormNameSiloConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormPowerDNSConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type PowerDNSAccessConfig } from "@/domain/access";
 
-type AccessEditFormPowerDNSConfigModelValues = Partial<PowerDNSAccessConfig>;
+type AccessEditFormPowerDNSConfigFieldValues = Partial<PowerDNSAccessConfig>;
 
 export type AccessEditFormPowerDNSConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormPowerDNSConfigModelValues;
+  initialValues?: AccessEditFormPowerDNSConfigFieldValues;
-  onModelChange?: (model: AccessEditFormPowerDNSConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormPowerDNSConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormPowerDNSConfigModelValues => {
+const initFormModel = (): AccessEditFormPowerDNSConfigFieldValues => {
   return {
     apiUrl: "",
     apiKey: "",
   };
 };
 
-const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormPowerDNSConfigProps) => {
+const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormPowerDNSConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -37,11 +37,11 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModel
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormPowerDNSConfigModelValues);
+    onValuesChange?.(values as AccessEditFormPowerDNSConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormQiniuConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type QiniuAccessConfig } from "@/domain/access";
 
-type AccessEditFormQiniuConfigModelValues = Partial<QiniuAccessConfig>;
+type AccessEditFormQiniuConfigFieldValues = Partial<QiniuAccessConfig>;
 
 export type AccessEditFormQiniuConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormQiniuConfigModelValues;
+  initialValues?: AccessEditFormQiniuConfigFieldValues;
-  onModelChange?: (model: AccessEditFormQiniuConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormQiniuConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormQiniuConfigModelValues => {
+const initFormModel = (): AccessEditFormQiniuConfigFieldValues => {
   return {
     accessKey: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormQiniuConfigProps) => {
+const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormQiniuConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelCha
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormQiniuConfigModelValues);
+    onValuesChange?.(values as AccessEditFormQiniuConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormSSHConfig.tsx

@@ -11,17 +11,17 @@ import { useAntdForm } from "@/hooks";
 import { type SSHAccessConfig } from "@/domain/access";
 import { readFileContent } from "@/utils/file";
 
-type AccessEditFormSSHConfigModelValues = Partial<SSHAccessConfig>;
+type AccessEditFormSSHConfigFieldValues = Partial<SSHAccessConfig>;
 
 export type AccessEditFormSSHConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormSSHConfigModelValues;
+  initialValues?: AccessEditFormSSHConfigFieldValues;
-  onModelChange?: (model: AccessEditFormSSHConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormSSHConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormSSHConfigModelValues => {
+const initFormModel = (): AccessEditFormSSHConfigFieldValues => {
   return {
     host: "127.0.0.1",
     port: 22,
@@ -29,7 +29,7 @@ const initFormModel = (): AccessEditFormSSHConfigModelValues => {
   };
 };
 
-const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormSSHConfigProps) => {
+const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormSSHConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -74,16 +74,16 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
   useDeepCompareEffect(() => {
-    setKeyFileList(model?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
+    setKeyFileList(initialValues?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
-  }, [model]);
+  }, [initialValues]);
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormSSHConfigModelValues);
+    onValuesChange?.(values as AccessEditFormSSHConfigFieldValues);
   };
 
   const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
@@ -95,7 +95,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
       setKeyFileList([]);
     }
 
-    flushSync(() => onModelChange?.(formInst.getFieldsValue(true)));
+    flushSync(() => onValuesChange?.(formInst.getFieldsValue(true)));
   };
 
   return (

ui/src/components/access/AccessEditFormTencentCloudConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type TencentCloudAccessConfig } from "@/domain/access";
 
-type AccessEditFormTencentCloudConfigModelValues = Partial<TencentCloudAccessConfig>;
+type AccessEditFormTencentCloudConfigFieldValues = Partial<TencentCloudAccessConfig>;
 
 export type AccessEditFormTencentCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormTencentCloudConfigModelValues;
+  initialValues?: AccessEditFormTencentCloudConfigFieldValues;
-  onModelChange?: (model: AccessEditFormTencentCloudConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormTencentCloudConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormTencentCloudConfigModelValues => {
+const initFormModel = (): AccessEditFormTencentCloudConfigFieldValues => {
   return {
     secretId: "",
     secretKey: "",
   };
 };
 
-const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormTencentCloudConfigProps) => {
+const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormTencentCloudConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onM
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormTencentCloudConfigModelValues);
+    onValuesChange?.(values as AccessEditFormTencentCloudConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormVolcEngineConfig.tsx

@@ -6,24 +6,24 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type VolcEngineAccessConfig } from "@/domain/access";
 
-type AccessEditFormVolcEngineConfigModelValues = Partial<VolcEngineAccessConfig>;
+type AccessEditFormVolcEngineConfigFieldValues = Partial<VolcEngineAccessConfig>;
 
 export type AccessEditFormVolcEngineConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormVolcEngineConfigModelValues;
+  initialValues?: AccessEditFormVolcEngineConfigFieldValues;
-  onModelChange?: (model: AccessEditFormVolcEngineConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormVolcEngineConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormVolcEngineConfigModelValues => {
+const initFormModel = (): AccessEditFormVolcEngineConfigFieldValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
   };
 };
 
-const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormVolcEngineConfigProps) => {
+const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormVolcEngineConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,11 +41,11 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onMod
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormVolcEngineConfigModelValues);
+    onValuesChange?.(values as AccessEditFormVolcEngineConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditFormWebhookConfig.tsx

@@ -6,23 +6,23 @@ import { z } from "zod";
 import { useAntdForm } from "@/hooks";
 import { type WebhookAccessConfig } from "@/domain/access";
 
-type AccessEditFormWebhookConfigModelValues = Partial<WebhookAccessConfig>;
+type AccessEditFormWebhookConfigFieldValues = Partial<WebhookAccessConfig>;
 
 export type AccessEditFormWebhookConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormWebhookConfigModelValues;
+  initialValues?: AccessEditFormWebhookConfigFieldValues;
-  onModelChange?: (model: AccessEditFormWebhookConfigModelValues) => void;
+  onValuesChange?: (values: AccessEditFormWebhookConfigFieldValues) => void;
 };
 
-const initFormModel = (): AccessEditFormWebhookConfigModelValues => {
+const initFormModel = (): AccessEditFormWebhookConfigFieldValues => {
   return {
     url: "",
   };
 };
 
-const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormWebhookConfigProps) => {
+const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormWebhookConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -34,11 +34,11 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelC
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
     form: form,
-    initialValues: model ?? initFormModel(),
+    initialValues: initialValues ?? initFormModel(),
   });
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-    onModelChange?.(values as AccessEditFormWebhookConfigModelValues);
+    onValuesChange?.(values as AccessEditFormWebhookConfigFieldValues);
   };
 
   return (

ui/src/components/access/AccessEditModal.tsx

@@ -9,7 +9,7 @@ import { getErrMsg } from "@/utils/error";
 import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm";
 
 export type AccessEditModalProps = {
-  data?: AccessEditFormProps["model"];
+  data?: AccessEditFormProps["initialValues"];
   loading?: boolean;
   open?: boolean;
   preset: AccessEditFormProps["preset"];
@@ -62,13 +62,13 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
           throw "Invalid props: `data`";
         }
 
-        await createAccess(formRef.current!.getFieldsValue() as AccessModel);
+        await createAccess(formRef.current!.getFieldsValue(true) as AccessModel);
       } else if (preset === "edit") {
         if (!data?.id) {
           throw "Invalid props: `data`";
         }
 
-        await updateAccess({ ...data, ...formRef.current!.getFieldsValue() } as AccessModel);
+        await updateAccess({ ...data, ...formRef.current!.getFieldsValue(true) } as AccessModel);
       }
 
       setOpen(false);
@@ -106,7 +106,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
         onCancel={handleClickCancel}
       >
         <div className="pt-4 pb-2">
-          <AccessEditForm ref={formRef} preset={preset === "add" ? "add" : "edit"} model={data} />
+          <AccessEditForm ref={formRef} initialValues={data} preset={preset === "add" ? "add" : "edit"} />
         </div>
       </Modal>
     </>

ui/src/components/access/AccessTypeSelect.tsx

@@ -9,7 +9,7 @@ export type AccessTypeSelectProps = Omit<
   "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
 >;
 
-const AccessTypeSelect = memo((props: AccessTypeSelectProps) => {
+const AccessTypeSelect = (props: AccessTypeSelectProps) => {
   const { t } = useTranslation();
 
   const options = Array.from(accessProvidersMap.values()).map((item) => ({
@@ -66,6 +66,6 @@ const AccessTypeSelect = memo((props: AccessTypeSelectProps) => {
       optionRender={(option) => renderOption(option.data.value)}
     />
   );
-});
+};
 
-export default AccessTypeSelect;
+export default memo(AccessTypeSelect);

ui/src/components/core/MultipleInput.tsx

@@ -177,9 +177,9 @@ type MultipleInputItemProps = Omit<
 };
 
 type MultipleInputItemInstance = {
-  focus: () => void;
+  focus: InputRef["focus"];
-  blur: () => void;
+  blur: InputRef["blur"];
-  select: () => void;
+  select: InputRef["select"];
 };
 
 const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputItemProps>(
@@ -236,8 +236,8 @@ const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputIte
     };
 
     useImperativeHandle(ref, () => ({
-      focus: () => {
+      focus: (options) => {
-        inputRef.current?.focus();
+        inputRef.current?.focus(options);
       },
       blur: () => {
         inputRef.current?.blur();

ui/src/components/notification/NotifyChannelEditForm.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useImperativeHandle, useMemo } from "react";
 import { useCreation } from "ahooks";
-import { Form } from "antd";
+import { Form, type FormInstance } from "antd";
 
 import { useAntdForm } from "@/hooks";
 import { NOTIFY_CHANNELS, type NotifyChannelsSettingsContent } from "@/domain/settings";
@@ -13,27 +13,23 @@ import NotifyChannelEditFormTelegramFields from "./NotifyChannelEditFormTelegram
 import NotifyChannelEditFormWebhookFields from "./NotifyChannelEditFormWebhookFields";
 import NotifyChannelEditFormWeComFields from "./NotifyChannelEditFormWeComFields";
 
-type NotifyChannelEditFormModelValues = NotifyChannelsSettingsContent[keyof NotifyChannelsSettingsContent];
+type NotifyChannelEditFormFieldValues = NotifyChannelsSettingsContent[keyof NotifyChannelsSettingsContent];
 
 export type NotifyChannelEditFormProps = {
   className?: string;
   style?: React.CSSProperties;
   channel: string;
   disabled?: boolean;
-  model?: NotifyChannelEditFormModelValues;
+  initialValues?: NotifyChannelEditFormFieldValues;
-  onModelChange?: (model: NotifyChannelEditFormModelValues) => void;
+  onValuesChange?: (values: NotifyChannelEditFormFieldValues) => void;
 };
 
-export type NotifyChannelEditFormInstance = {
+export type NotifyChannelEditFormInstance = FormInstance;
-  getFieldsValue: () => NotifyChannelEditFormModelValues;
-  resetFields: () => void;
-  validateFields: () => Promise<NotifyChannelEditFormModelValues>;
-};
 
 const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyChannelEditFormProps>(
-  ({ className, style, channel, disabled, model, onModelChange }, ref) => {
+  ({ className, style, channel, disabled, initialValues, onValuesChange }, ref) => {
     const { form: formInst, formProps } = useAntdForm({
-      initialValues: model,
+      initialValues: initialValues,
     });
     const formName = useCreation(() => `notifyChannelEditForm_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
     const formFieldsComponent = useMemo(() => {
@@ -61,21 +57,35 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
       }
     }, [channel]);
 
-    const handleFormChange = (_: unknown, values: NotifyChannelEditFormModelValues) => {
+    const handleFormChange = (_: unknown, values: NotifyChannelEditFormFieldValues) => {
-      onModelChange?.(values);
+      onValuesChange?.(values);
     };
 
-    useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => {
-      getFieldsValue: () => {
+      return {
-        return formInst.getFieldsValue(true);
+        getFieldValue: (name) => formInst.getFieldValue(name),
-      },
+        getFieldsValue: (...args) => {
-      resetFields: () => {
+          if (Array.from(args).length === 0) {
-        return formInst.resetFields();
+            return formInst.getFieldsValue(true);
-      },
+          }
-      validateFields: () => {
+
-        return formInst.validateFields();
+          return formInst.getFieldsValue(args[0] as any, args[1] as any);
-      },
+        },
-    }));
+        getFieldError: (name) => formInst.getFieldError(name),
+        getFieldsError: (nameList) => formInst.getFieldsError(nameList),
+        getFieldWarning: (name) => formInst.getFieldWarning(name),
+        isFieldsTouched: (nameList, allFieldsTouched) => formInst.isFieldsTouched(nameList, allFieldsTouched),
+        isFieldTouched: (name) => formInst.isFieldTouched(name),
+        isFieldValidating: (name) => formInst.isFieldValidating(name),
+        isFieldsValidating: (nameList) => formInst.isFieldsValidating(nameList),
+        resetFields: (fields) => formInst.resetFields(fields),
+        setFields: (fields) => formInst.setFields(fields),
+        setFieldValue: (name, value) => formInst.setFieldValue(name, value),
+        setFieldsValue: (values) => formInst.setFieldsValue(values),
+        validateFields: (nameList, config) => formInst.validateFields(nameList, config),
+        submit: () => formInst.submit(),
+      } as NotifyChannelEditFormInstance;
+    });
 
     return (
       <Form

ui/src/components/notification/NotifyChannels.tsx

@@ -32,7 +32,7 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
     await channelFormRef.current!.validateFields();
 
     try {
-      setChannel(channel, channelFormRef.current!.getFieldsValue());
+      setChannel(channel, channelFormRef.current!.getFieldsValue(true));
       setChannelFormChanged(false);
 
       messageApi.success(t("common.text.operation_succeeded"));
@@ -46,7 +46,13 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
       {MessageContextHolder}
       {NotificationContextHolder}
 
-      <NotifyChannelEditForm ref={channelFormRef} className="mt-2" channel={channel} model={channelConfig} onModelChange={() => setChannelFormChanged(true)} />
+      <NotifyChannelEditForm
+        ref={channelFormRef}
+        className="mt-2"
+        channel={channel}
+        initialValues={channelConfig}
+        onValuesChange={() => setChannelFormChanged(true)}
+      />
 
       <Space className="mb-2">
         <Button type="primary" disabled={!channelFormChanged} onClick={handleSubmit}>

ui/src/components/workflow/Panel.tsx

@@ -14,7 +14,7 @@ const Panel = ({ open, onOpenChange, children, name }: AddNodePanelProps) => {
   }, [open, onOpenChange]);
 
   return (
-    <Drawer open={open} title={name} width={640} onClose={() => onOpenChange(false)}>
+    <Drawer destroyOnClose={true} open={open} title={name} width={640} onClose={() => onOpenChange(false)}>
       {children}
     </Drawer>
   );

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { Link } from "react-router";
 import { useTranslation } from "react-i18next";
 import { useDeepCompareEffect } from "ahooks";
@@ -18,11 +18,11 @@ export type NotifyNodeFormProps = {
   data: WorkflowNode;
 };
 
-const initFormModel = () => {
+const initFormModel = (): WorkflowNodeConfig => {
   return {
     subject: "",
     message: "",
-  } as WorkflowNodeConfig;
+  };
 };
 
 const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
@@ -115,4 +115,4 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
   );
 };
 
-export default NotifyNodeForm;
+export default memo(NotifyNodeForm);

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDeepCompareEffect } from "ahooks";
 import { Alert, Button, Form, Input, Radio } from "antd";
@@ -16,11 +16,11 @@ export type StartNodeFormProps = {
   data: WorkflowNode;
 };
 
-const initFormModel = () => {
+const initFormModel = (): WorkflowNodeConfig => {
   return {
     executionMethod: "auto",
     crontab: "0 0 * * *",
-  } as WorkflowNodeConfig;
+  };
 };
 
 const StartNodeForm = ({ data }: StartNodeFormProps) => {
@@ -110,16 +110,20 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow.nodes.start.form.trigger_cron.tooltip") }}></span>}
         extra={
-          <span>
+          triggerCronLastExecutions.length > 0 ? (
-            {t("workflow.nodes.start.form.trigger_cron.extra")}
+            <span>
-            <br />
+              {t("workflow.nodes.start.form.trigger_cron.extra")}
-            {triggerCronLastExecutions.map((d) => (
+              <br />
-              <>
+              {triggerCronLastExecutions.map((d) => (
-                {dayjs(d).format("YYYY-MM-DD HH:mm:ss")}
+                <>
-                <br />
+                  {dayjs(d).format("YYYY-MM-DD HH:mm:ss")}
-              </>
+                  <br />
-            ))}
+                </>
-          </span>
+              ))}
+            </span>
+          ) : (
+            <></>
+          )
         }
       >
         <Input placeholder={t("workflow.nodes.start.form.trigger_cron.placeholder")} onChange={(e) => handleTriggerCronChange(e.target.value)} />
@@ -138,4 +142,4 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
   );
 };
 
-export default StartNodeForm;
+export default memo(StartNodeForm);

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -125,7 +125,7 @@ const WorkflowDetail = () => {
           title={workflow.name}
           extra={[
             <Button.Group key="actions">
-              <WorkflowBaseInfoModalForm model={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />
+              <WorkflowBaseInfoModalForm initialValues={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />
 
               <Button onClick={handleEnableChange}>{workflow.enabled ? t("common.button.disable") : t("common.button.enable")}</Button>
 
@@ -183,11 +183,11 @@ const WorkflowDetail = () => {
 
 const WorkflowBaseInfoModalForm = memo(
   ({
-    model,
+    initialValues,
     trigger,
     onFinish,
   }: {
-    model: Pick<WorkflowModel, "name" | "description">;
+    initialValues: Pick<WorkflowModel, "name" | "description">;
     trigger?: React.ReactElement;
     onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
   }) => {
@@ -229,7 +229,7 @@ const WorkflowBaseInfoModalForm = memo(
       formProps,
       ...formApi
     } = useAntdForm<z.infer<typeof formSchema>>({
-      initialValues: model,
+      initialValues: initialValues,
       onSubmit: async () => {
         const ret = await onFinish?.(formInst.getFieldsValue(true));
         if (ret != null && !ret) return;

ui/src/utils/cron.ts

@@ -10,6 +10,8 @@ export const validCronExpression = (expr: string): boolean => {
 };
 
 export const getNextCronExecutions = (expr: string, times = 1): Date[] => {
+  if (!expr) return [];
+
   try {
     const now = new Date();
     const cron = parseExpression(expr, { currentDate: now, iterator: true });