mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-09 14:09:52 +00:00
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { useEffect, useLayoutEffect, useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { RouterProvider } from "react-router-dom";
|
|
import { App, ConfigProvider, type ThemeConfig, theme } from "antd";
|
|
import { type Locale } from "antd/es/locale";
|
|
import AntdLocaleEnUs from "antd/locale/en_US";
|
|
import AntdLocaleZhCN from "antd/locale/zh_CN";
|
|
import dayjs from "dayjs";
|
|
import "dayjs/locale/zh-cn";
|
|
|
|
import { useBrowserTheme } from "@/hooks";
|
|
import { localeNames } from "@/i18n";
|
|
import { router } from "@/router.tsx";
|
|
|
|
const RootApp = () => {
|
|
const { i18n } = useTranslation();
|
|
|
|
const { theme: browserTheme } = useBrowserTheme();
|
|
|
|
const antdLocalesMap: Record<string, Locale> = useMemo(
|
|
() => ({
|
|
[localeNames.ZH]: AntdLocaleZhCN,
|
|
[localeNames.EN]: AntdLocaleEnUs,
|
|
}),
|
|
[]
|
|
);
|
|
const [antdLocale, setAntdLocale] = useState(antdLocalesMap[i18n.language]);
|
|
const handleLanguageChanged = () => {
|
|
setAntdLocale(antdLocalesMap[i18n.language]);
|
|
dayjs.locale(i18n.language);
|
|
};
|
|
i18n.on("languageChanged", handleLanguageChanged);
|
|
useLayoutEffect(() => {
|
|
handleLanguageChanged();
|
|
|
|
return () => {
|
|
i18n.off("languageChanged", handleLanguageChanged);
|
|
};
|
|
}, [antdLocalesMap, i18n]);
|
|
|
|
const antdThemesMap: Record<string, ThemeConfig> = useMemo(
|
|
() => ({
|
|
["light"]: { algorithm: theme.defaultAlgorithm },
|
|
["dark"]: { algorithm: theme.darkAlgorithm },
|
|
}),
|
|
[]
|
|
);
|
|
const [antdTheme, setAntdTheme] = useState(antdThemesMap[browserTheme]);
|
|
useEffect(() => {
|
|
setAntdTheme(antdThemesMap[browserTheme]);
|
|
|
|
const root = window.document.documentElement;
|
|
root.classList.remove("light", "dark");
|
|
root.classList.add(browserTheme);
|
|
}, [antdThemesMap, browserTheme]);
|
|
|
|
return (
|
|
<ConfigProvider
|
|
locale={antdLocale}
|
|
theme={{
|
|
...antdTheme,
|
|
token: {
|
|
/* @see tailwind.config.js */
|
|
colorPrimary: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
|
|
colorLink: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
|
|
},
|
|
}}
|
|
>
|
|
<App>
|
|
<RouterProvider router={router} />
|
|
</App>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default RootApp;
|