92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import { useEffect, useMemo } 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";
|
|
|
|
export default function App() {
|
|
const { colorPrimary, themeMode, initTheme } = useThemeStore();
|
|
const { i18n } = useTranslation();
|
|
const antdLocale = useMemo(() => (i18n.language === "en-US" ? enUS : zhCN), [i18n.language]);
|
|
const isTechTheme = themeMode === "tech";
|
|
|
|
const antdTheme = useMemo(() => ({
|
|
algorithm: theme.defaultAlgorithm,
|
|
token: {
|
|
colorPrimary,
|
|
borderRadius: 4,
|
|
colorBgLayout: isTechTheme ? "#edf6ff" : "#f5f6fa",
|
|
colorBgContainer: isTechTheme ? "#ffffff" : "#ffffff",
|
|
colorBgElevated: isTechTheme ? "#ffffff" : "#ffffff",
|
|
colorBorder: isTechTheme ? "rgba(32, 111, 218, 0.18)" : "#e6e6e6",
|
|
colorText: isTechTheme ? "#102033" : "#333333",
|
|
colorTextSecondary: isTechTheme ? "#5f728f" : "#9095a1",
|
|
colorFillSecondary: isTechTheme ? "rgba(32, 111, 218, 0.08)" : "rgba(0, 0, 0, 0.04)",
|
|
},
|
|
components: {
|
|
Card: {
|
|
borderRadiusLG: 4
|
|
},
|
|
Button: {
|
|
borderRadius: 4
|
|
},
|
|
Input: {
|
|
borderRadius: 4
|
|
},
|
|
Select: {
|
|
borderRadius: 4
|
|
},
|
|
Modal: {
|
|
borderRadiusLG: 4
|
|
},
|
|
Drawer: {
|
|
colorBgElevated: "#ffffff"
|
|
},
|
|
Segmented: {
|
|
itemSelectedBg: isTechTheme ? "#ffffff" : "#ffffff",
|
|
itemSelectedColor: isTechTheme ? colorPrimary : "#333333"
|
|
}
|
|
}
|
|
}), [colorPrimary, isTechTheme]);
|
|
|
|
useEffect(() => {
|
|
initTheme();
|
|
const fetchConfig = async () => {
|
|
try {
|
|
const data = await getOpenPlatformConfig();
|
|
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={antdTheme}
|
|
>
|
|
<AntdApp>
|
|
<AppRoutes />
|
|
</AntdApp>
|
|
</ConfigProvider>
|
|
);
|
|
}
|