imeeting/frontend/src/App.tsx

67 lines
2.1 KiB
TypeScript

import { useEffect, useMemo, useState } from "react";
import { ConfigProvider, theme, App as AntdApp } from "antd";
import zhCN from "antd/locale/zh_CN";
import enUS from "antd/locale/en_US";
import { useTranslation } from "react-i18next";
import AppRoutes from "./routes";
import { getOpenPlatformConfig } from "./api";
import { useThemeStore } from "./store/themeStore";
import type { SysPlatformConfig } from "./types";
export default function App() {
const [config, setConfig] = useState<SysPlatformConfig | null>(null);
const { colorPrimary, themeMode, initTheme } = useThemeStore();
const { i18n } = useTranslation();
const antdLocale = useMemo(() => (i18n.language === "en-US" ? enUS : zhCN), [i18n.language]);
useEffect(() => {
initTheme();
const fetchConfig = async () => {
try {
const data = await getOpenPlatformConfig();
setConfig(data);
if (data.projectName) {
document.title = data.projectName;
}
if (data.iconUrl) {
let link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = data.iconUrl;
}
// Save to sessionStorage for other components
sessionStorage.setItem("platformConfig", JSON.stringify(data));
} catch (e) {
console.error("Failed to load platform config", e);
}
};
fetchConfig();
}, [initTheme]);
return (
<ConfigProvider
locale={antdLocale}
theme={{
algorithm: themeMode === 'tech' ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
colorPrimary: colorPrimary,
borderRadius: 10,
colorBgLayout: 'transparent',
},
components: {
Card: {
borderRadiusLG: 16
}
}
}}
>
<AntdApp>
<AppRoutes />
</AntdApp>
</ConfigProvider>
);
}