diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 794033cc0..a6f894fdb 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -3,9 +3,11 @@ import { useTranslation } from "react-i18next"; import { RouterProvider } from "react-router-dom"; import { Alert, App, ConfigProvider, type ThemeConfig, theme } from "antd"; import { type Locale } from "antd/es/locale"; -import AntdLocaleEnUs from "antd/locale/en_US"; +import AntdLocaleEnUS from "antd/locale/en_US"; import AntdLocaleZhCN from "antd/locale/zh_CN"; import dayjs from "dayjs"; +import { z } from "zod"; +import { en as ZodLocaleEnUs, zhCN as ZodLocaleZhCN } from "zod/locales"; import "dayjs/locale/zh-cn"; import { useBrowserTheme } from "@/hooks"; @@ -13,14 +15,20 @@ import { localeNames } from "@/i18n"; import { router } from "@/routers"; const antdLocalesMap: Record = { + [localeNames.EN]: AntdLocaleEnUS, [localeNames.ZH]: AntdLocaleZhCN, - [localeNames.EN]: AntdLocaleEnUs, }; + const antdThemesMap: Record = { ["light"]: { algorithm: theme.defaultAlgorithm }, ["dark"]: { algorithm: theme.darkAlgorithm }, }; +const zodLocalesMap: Record = { + [localeNames.EN]: ZodLocaleEnUs, + [localeNames.ZH]: ZodLocaleZhCN, +}; + const RootApp = () => { const { i18n } = useTranslation(); @@ -32,13 +40,16 @@ const RootApp = () => { const handleLanguageChanged = () => { setAntdLocale(antdLocalesMap[i18n.language]); dayjs.locale(i18n.language); + z.config(zodLocalesMap[i18n.language]?.()); }; + i18n.on("initialized", handleLanguageChanged); i18n.on("languageChanged", handleLanguageChanged); useLayoutEffect(() => { handleLanguageChanged(); return () => { + i18n.off("initialized", handleLanguageChanged); i18n.off("languageChanged", handleLanguageChanged); }; }, [i18n]); diff --git a/ui/src/components/access/AccessSelect.tsx b/ui/src/components/access/AccessSelect.tsx index 0047be411..98360b2e5 100644 --- a/ui/src/components/access/AccessSelect.tsx +++ b/ui/src/components/access/AccessSelect.tsx @@ -6,6 +6,7 @@ import { type AccessModel } from "@/domain/access"; import { accessProvidersMap } from "@/domain/provider"; import { useZustandShallowSelector } from "@/hooks"; import { useAccessesStore } from "@/stores/access"; +import { matchSearchOption } from "@/utils/search"; export interface AccessTypeSelectProps extends Omit { onFilter?: (value: string, option: AccessModel) => boolean; @@ -56,12 +57,7 @@ const AccessSelect = ({ onFilter, ...props }: AccessTypeSelectProps) => {