From d143df3f9f9a8bd05235a006de50dd66bed6f95f Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Thu, 19 Dec 2024 21:34:17 +0800 Subject: [PATCH] fix(ui): deep compare when model change in AccessEditForm --- ui/src/App.tsx | 7 ++-- ui/src/components/access/AccessEditForm.tsx | 7 ++-- .../AccessEditFormACMEHttpReqConfig.tsx | 5 +-- .../access/AccessEditFormAWSConfig.tsx | 5 +-- .../access/AccessEditFormAliyunConfig.tsx | 5 +-- .../access/AccessEditFormBaiduCloudConfig.tsx | 5 +-- .../access/AccessEditFormBytePlusConfig.tsx | 5 +-- .../access/AccessEditFormCloudflareConfig.tsx | 5 +-- .../access/AccessEditFormDogeCloudConfig.tsx | 5 +-- .../access/AccessEditFormGoDaddyConfig.tsx | 5 +-- .../AccessEditFormHuaweiCloudConfig.tsx | 5 +-- .../access/AccessEditFormKubernetesConfig.tsx | 5 +-- .../access/AccessEditFormLocalConfig.tsx | 5 +-- .../access/AccessEditFormNameSiloConfig.tsx | 5 +-- .../access/AccessEditFormPowerDNSConfig.tsx | 5 +-- .../access/AccessEditFormQiniuConfig.tsx | 5 +-- .../access/AccessEditFormSSHConfig.tsx | 5 +-- .../AccessEditFormTencentCloudConfig.tsx | 5 +-- .../access/AccessEditFormVolcEngineConfig.tsx | 5 +-- .../access/AccessEditFormWebhookConfig.tsx | 5 ++- ui/src/components/access/AccessEditModal.tsx | 10 +++--- ui/src/domain/access.ts | 35 +++++++++++-------- ui/src/i18n/locales/zh/nls.access.json | 4 +-- ui/src/pages/ConsoleLayout.tsx | 6 ++-- ui/src/pages/accesses/AccessList.tsx | 6 ++-- ui/src/pages/certificates/CertificateList.tsx | 2 +- ui/src/pages/dashboard/Dashboard.tsx | 2 +- ui/src/pages/login/Login.tsx | 2 +- ui/src/pages/workflows/WorkflowList.tsx | 6 ++-- 29 files changed, 102 insertions(+), 75 deletions(-) diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 27c74480..481631ff 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,7 +1,6 @@ -import { useEffect, useLayoutEffect, useState } from "react"; +import { useEffect, useLayoutEffect, useMemo, useState } from "react"; import { RouterProvider } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import { useCreation } from "ahooks"; import { App, ConfigProvider, theme, type ThemeConfig } from "antd"; import { type Locale } from "antd/es/locale"; import AntdLocaleEnUs from "antd/locale/en_US"; @@ -18,7 +17,7 @@ const RootApp = () => { const { theme: browserTheme } = useBrowserTheme(); - const antdLocalesMap: Record = useCreation( + const antdLocalesMap: Record = useMemo( () => ({ [localeNames.ZH]: AntdLocaleZhCN, [localeNames.EN]: AntdLocaleEnUs, @@ -33,7 +32,7 @@ const RootApp = () => { i18n.on("languageChanged", handleLanguageChanged); useLayoutEffect(handleLanguageChanged, [antdLocalesMap, i18n]); - const antdThemesMap: Record = useCreation( + const antdThemesMap: Record = useMemo( () => ({ ["light"]: { algorithm: theme.defaultAlgorithm }, ["dark"]: { algorithm: theme.darkAlgorithm }, diff --git a/ui/src/components/access/AccessEditForm.tsx b/ui/src/components/access/AccessEditForm.tsx index 0a094839..b5d992bf 100644 --- a/ui/src/components/access/AccessEditForm.tsx +++ b/ui/src/components/access/AccessEditForm.tsx @@ -1,5 +1,6 @@ import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; +import { useDeepCompareEffect } from "ahooks"; import { Form, Input } from "antd"; import { createSchemaFieldRule } from "antd-zod"; import { z } from "zod"; @@ -80,7 +81,7 @@ const AccessEditForm = forwardRef(( const [form] = Form.useForm>(); const [initialValues, setInitialValues] = useState>>(model as Partial>); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model as Partial>); }, [model]); @@ -90,7 +91,7 @@ const AccessEditForm = forwardRef(( }, [model?.configType]); const [configFormInst] = Form.useForm(); - const configForm = useMemo(() => { + const configFormComponent = useMemo(() => { /* 注意：如果追加新的子组件，请保持以 ASCII 排序。 NOTICE: If you add new child component, please keep ASCII order. @@ -182,7 +183,7 @@ const AccessEditForm = forwardRef(( - {configForm} + {configFormComponent} ); diff --git a/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx b/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx index c67fe0be..53638be6 100644 --- a/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx +++ b/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -45,7 +46,7 @@ const AccessEditFormACMEHttpReqConfig = ({ form, disabled, loading, model, onMod const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormAWSConfig.tsx b/ui/src/components/access/AccessEditFormAWSConfig.tsx index 5884ebbe..55a4c42b 100644 --- a/ui/src/components/access/AccessEditFormAWSConfig.tsx +++ b/ui/src/components/access/AccessEditFormAWSConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -54,7 +55,7 @@ const AccessEditFormAWSConfig = ({ form, disabled, loading, model, onModelChange const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormAliyunConfig.tsx b/ui/src/components/access/AccessEditFormAliyunConfig.tsx index d9c37da5..249e1220 100644 --- a/ui/src/components/access/AccessEditFormAliyunConfig.tsx +++ b/ui/src/components/access/AccessEditFormAliyunConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormAliyunConfig = ({ form, disabled, loading, model, onModelCha const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx b/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx index f93dbc82..f05a061c 100644 --- a/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormBaiduCloudConfig = ({ form, disabled, loading, model, onMode const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormBytePlusConfig.tsx b/ui/src/components/access/AccessEditFormBytePlusConfig.tsx index 2cc4b9a8..67ffe4c3 100644 --- a/ui/src/components/access/AccessEditFormBytePlusConfig.tsx +++ b/ui/src/components/access/AccessEditFormBytePlusConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormBytePlusConfig = ({ form, disabled, loading, model, onModelC const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormCloudflareConfig.tsx b/ui/src/components/access/AccessEditFormCloudflareConfig.tsx index 266c917a..8a82ade4 100644 --- a/ui/src/components/access/AccessEditFormCloudflareConfig.tsx +++ b/ui/src/components/access/AccessEditFormCloudflareConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -33,7 +34,7 @@ const AccessEditFormCloudflareConfig = ({ form, disabled, loading, model, onMode const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx b/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx index 542d7dbc..1819db49 100644 --- a/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormDogeCloudConfig = ({ form, disabled, loading, model, onModel const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx b/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx index 99c9611e..cf7d0951 100644 --- a/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx +++ b/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormGoDaddyConfig = ({ form, disabled, loading, model, onModelCh const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx b/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx index e0b38400..17c83b60 100644 --- a/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -47,7 +48,7 @@ const AccessEditFormHuaweiCloudConfig = ({ form, disabled, loading, model, onMod const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx index 04adee75..67b9a070 100644 --- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx +++ b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx @@ -1,6 +1,7 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { flushSync } from "react-dom"; import { useTranslation } from "react-i18next"; +import { useDeepCompareEffect } from "ahooks"; import { Button, Form, Input, Upload, type FormInstance, type UploadFile, type UploadProps } from "antd"; import { createSchemaFieldRule } from "antd-zod"; import { z } from "zod"; @@ -36,7 +37,7 @@ const AccessEditFormKubernetesConfig = ({ form, disabled, loading, model, onMode const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); setKubeFileList(model?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []); }, [model]); diff --git a/ui/src/components/access/AccessEditFormLocalConfig.tsx b/ui/src/components/access/AccessEditFormLocalConfig.tsx index 918908a8..34cf992f 100644 --- a/ui/src/components/access/AccessEditFormLocalConfig.tsx +++ b/ui/src/components/access/AccessEditFormLocalConfig.tsx @@ -1,4 +1,5 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; +import { useDeepCompareEffect } from "ahooks"; import { Form, type FormInstance } from "antd"; import { type LocalAccessConfig } from "@/domain/access"; @@ -19,7 +20,7 @@ const initModel = () => { const AccessEditFormLocalConfig = ({ form, disabled, loading, model }: AccessEditFormLocalConfigProps) => { const [initialValues, setInitialValues] = useState(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormNameSiloConfig.tsx b/ui/src/components/access/AccessEditFormNameSiloConfig.tsx index 71df42ab..fbe90c6c 100644 --- a/ui/src/components/access/AccessEditFormNameSiloConfig.tsx +++ b/ui/src/components/access/AccessEditFormNameSiloConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -33,7 +34,7 @@ const AccessEditFormNameSiloConfig = ({ form, disabled, loading, model, onModelC const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx b/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx index 25dab60e..f711c083 100644 --- a/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx +++ b/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -34,7 +35,7 @@ const AccessEditFormPowerDNSConfig = ({ form, disabled, loading, model, onModelC const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormQiniuConfig.tsx b/ui/src/components/access/AccessEditFormQiniuConfig.tsx index 295fa935..29a1d688 100644 --- a/ui/src/components/access/AccessEditFormQiniuConfig.tsx +++ b/ui/src/components/access/AccessEditFormQiniuConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormQiniuConfig = ({ form, disabled, loading, model, onModelChan const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormSSHConfig.tsx b/ui/src/components/access/AccessEditFormSSHConfig.tsx index 82e4217f..98425c6f 100644 --- a/ui/src/components/access/AccessEditFormSSHConfig.tsx +++ b/ui/src/components/access/AccessEditFormSSHConfig.tsx @@ -1,6 +1,7 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { flushSync } from "react-dom"; import { useTranslation } from "react-i18next"; +import { useDeepCompareEffect } from "ahooks"; import { Button, Form, Input, InputNumber, Upload, type FormInstance, type UploadFile, type UploadProps } from "antd"; import { createSchemaFieldRule } from "antd-zod"; import { z } from "zod"; @@ -72,7 +73,7 @@ const AccessEditFormSSHConfig = ({ form, disabled, loading, model, onModelChange const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); setKeyFileList(model?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []); }, [model]); diff --git a/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx b/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx index 580cd158..7175e964 100644 --- a/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormTencentCloudConfig = ({ form, disabled, loading, model, onMo const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx b/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx index f4e9dd55..e9ce0dd4 100644 --- a/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx +++ b/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; +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"; @@ -38,7 +39,7 @@ const AccessEditFormVolcEngineConfig = ({ form, disabled, loading, model, onMode const formRule = createSchemaFieldRule(formSchema); const [initialValues, setInitialValues] = useState>>(model ?? initModel()); - useEffect(() => { + useDeepCompareEffect(() => { setInitialValues(model ?? initModel()); }, [model]); diff --git a/ui/src/components/access/AccessEditFormWebhookConfig.tsx b/ui/src/components/access/AccessEditFormWebhookConfig.tsx index 8b2649a5..b8736f35 100644 --- a/ui/src/components/access/AccessEditFormWebhookConfig.tsx +++ b/ui/src/components/access/AccessEditFormWebhookConfig.tsx @@ -24,7 +24,10 @@ const AccessEditFormWebhookConfig = ({ form, disabled, loading, model, onModelCh const { t } = useTranslation(); const formSchema = z.object({ - url: z.string().url(t("common.errmsg.url_invalid")), + url: z + .string() + .min(1, { message: t("access.form.webhook_url.placeholder") }) + .url({ message: t("common.errmsg.url_invalid") }), }); const formRule = createSchemaFieldRule(formSchema); diff --git a/ui/src/components/access/AccessEditModal.tsx b/ui/src/components/access/AccessEditModal.tsx index 4021333e..7e06cfb6 100644 --- a/ui/src/components/access/AccessEditModal.tsx +++ b/ui/src/components/access/AccessEditModal.tsx @@ -6,12 +6,12 @@ import { Modal, notification } from "antd"; import { type AccessModel } from "@/domain/access"; import { useAccessStore } from "@/stores/access"; import { getErrMsg } from "@/utils/error"; -import AccessEditForm, { type AccessEditFormInstance } from "./AccessEditForm"; +import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm"; export type AccessEditModalProps = { - data?: Partial>; + data?: AccessEditFormProps["model"]; loading?: boolean; - mode: "add" | "edit" | "copy"; + mode: AccessEditFormProps["mode"]; open?: boolean; trigger?: React.ReactElement; onOpenChange?: (open: boolean) => void; @@ -57,7 +57,7 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM } try { - if (mode === "add" || mode === "copy") { + if (mode === "add") { if (data?.id) { throw "Invalid props: `data`"; } @@ -73,7 +73,7 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM setOpen(false); } catch (err) { - notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)} }); + notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) }); throw err; } finally { diff --git a/ui/src/domain/access.ts b/ui/src/domain/access.ts index 915850a8..9419863b 100644 --- a/ui/src/domain/access.ts +++ b/ui/src/domain/access.ts @@ -41,15 +41,24 @@ export const ACCESS_PROVIDER_TYPES = Object.freeze({ WEBHOOK: ACCESS_PROVIDER_TYPE_WEBHOOK, } as const); +export const ACCESS_PROVIDER_USAGE_ALL = "all" as const; +export const ACCESS_PROVIDER_USAGE_APPLY = "apply" as const; +export const ACCESS_PROVIDER_USAGE_DEPLOY = "deploy" as const; +export const ACCESS_PROVIDER_USAGES = Object.freeze({ + ALL: ACCESS_PROVIDER_USAGE_ALL, + APPLY: ACCESS_PROVIDER_USAGE_APPLY, + DEPLOY: ACCESS_PROVIDER_USAGE_DEPLOY, +} as const); + +// #region AccessModel export interface AccessModel extends BaseModel { name: string; configType: string; usage: AccessUsages; config: /* - 注意：如果追加新的类型，请保持以 ASCII 排序。 - NOTICE: If you add new type, please keep ASCII order. - */ - Record & + 注意：如果追加新的类型，请保持以 ASCII 排序。 + NOTICE: If you add new type, please keep ASCII order. + */ Record & ( | ACMEHttpReqAccessConfig | AliyunAccessConfig @@ -71,7 +80,9 @@ export interface AccessModel extends BaseModel { | WebhookAccessConfig ); } +// #endregion +// #region AccessConfig export type ACMEHttpReqAccessConfig = { endpoint: string; mode?: string; @@ -163,19 +174,12 @@ export type VolcEngineAccessConfig = { export type WebhookAccessConfig = { url: string; }; +// #endregion -export const ACCESS_PROVIDER_USAGE_ALL = "all" as const; -export const ACCESS_PROVIDER_USAGE_APPLY = "apply" as const; -export const ACCESS_PROVIDER_USAGE_DEPLOY = "deploy" as const; -export const ACCESS_PROVIDER_USAGES = Object.freeze({ - ALL: ACCESS_PROVIDER_USAGE_ALL, - APPLY: ACCESS_PROVIDER_USAGE_APPLY, - DEPLOY: ACCESS_PROVIDER_USAGE_DEPLOY, -} as const); +// #region AccessProvider +export type AccessUsages = (typeof ACCESS_PROVIDER_USAGES)[keyof typeof ACCESS_PROVIDER_USAGES]; -type AccessUsages = (typeof ACCESS_PROVIDER_USAGES)[keyof typeof ACCESS_PROVIDER_USAGES]; - -type AccessProvider = { +export type AccessProvider = { type: string; name: string; icon: string; @@ -208,3 +212,4 @@ export const accessProvidersMap: Map = n [ACCESS_PROVIDER_TYPE_ACMEHTTPREQ, "common.provider.acmehttpreq", "/imgs/providers/acmehttpreq.svg", "apply"], ].map(([type, name, icon, usage]) => [type, { type, name, icon, usage: usage as AccessUsages }]) ); +// #endregion diff --git a/ui/src/i18n/locales/zh/nls.access.json b/ui/src/i18n/locales/zh/nls.access.json index 1bc4be92..cc23b779 100644 --- a/ui/src/i18n/locales/zh/nls.access.json +++ b/ui/src/i18n/locales/zh/nls.access.json @@ -118,8 +118,8 @@ "access.form.volcengine_secret_access_key.label": "火山引擎 Secret Access Key", "access.form.volcengine_secret_access_key.placeholder": "请输入火山引擎 Secret Access Key", "access.form.volcengine_secret_access_key.tooltip": "这是什么？请参阅 https://www.volcengine.com/docs/6291/216571", - "access.form.webhook_url.label": "Webhook URL", - "access.form.webhook_url.placeholder": "请输入 Webhook URL", + "access.form.webhook_url.label": "Webhook 回调地址", + "access.form.webhook_url.placeholder": "请输入 Webhook 回调地址", "access.form.ssh_host.label": "服务器地址", "access.form.ssh_host.placeholder": "请输入服务器地址", "access.form.ssh_port.label": "服务器端口", diff --git a/ui/src/pages/ConsoleLayout.tsx b/ui/src/pages/ConsoleLayout.tsx index 9afc6e9f..1451894e 100644 --- a/ui/src/pages/ConsoleLayout.tsx +++ b/ui/src/pages/ConsoleLayout.tsx @@ -182,7 +182,7 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => { const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => { const { t } = useTranslation(); - const { theme, setThemeMode } = useBrowserTheme(); + const { theme, themeMode, setThemeMode } = useBrowserTheme(); const items: Required["items"] = [ ["light", t("common.theme.light")], @@ -194,7 +194,9 @@ const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => { label: label, onClick: () => { setThemeMode(key as Parameters[0]); - window.location.reload(); + if (key !== themeMode) { + window.location.reload(); + } }, }; }); diff --git a/ui/src/pages/accesses/AccessList.tsx b/ui/src/pages/accesses/AccessList.tsx index 57f8a9ed..ac09f52b 100644 --- a/ui/src/pages/accesses/AccessList.tsx +++ b/ui/src/pages/accesses/AccessList.tsx @@ -83,7 +83,7 @@ const AccessList = () => {