github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-07 12:00:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): 🎨 Unified color theme, AntV light/dark theme switching, Antd first-screen style loading. (#1020)

Browse Source 
Co-authored-by: 黄振洪 <hzh01509324@alibaba-inc.com>
Co-authored-by: Aralhi <xiaoping0501@gmail.com>
This commit is contained in:
Hzh_97
2024-01-12 09:44:52 +08:00
committed by GitHub
parent 2706e27ae5
commit 99ea6ac1a4
99 changed files with 1125 additions and 1410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/pages/_app.tsx
View File

@@ -11,27 +11,26 @@ import '../styles/globals.css';
import '../nprogress.css';
import '../app/i18n';
import { STORAGE_LANG_KEY, STORAGE_THEME_KEY } from '@/utils';
import { ConfigProvider, theme } from 'antd';
import { ConfigProvider, MappingAlgorithm, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
type ThemeMode = ReturnType<typeof useColorScheme>['mode'];
function getDefaultTheme(): ThemeMode {
const theme = localStorage.getItem(STORAGE_THEME_KEY) as ThemeMode;
if (theme) return theme;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const antdDarkTheme: MappingAlgorithm = (seedToken, mapToken) => {
return {
...theme.darkAlgorithm(seedToken, mapToken),
colorBgBase: '#232734',
colorBorder: '#828282',
colorBgContainer: '#232734',
};
};
function CssWrapper({ children }: { children: React.ReactElement }) {
const { mode } = useContext(ChatContext);
const { i18n } = useTranslation();
const { mode, setMode } = useColorScheme();
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const themeMode = getDefaultTheme();
setMode(themeMode!);
}, []);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref?.current && mode) {
@@ -51,14 +50,13 @@ function CssWrapper({ children }: { children: React.ReactElement }) {
return (
<div ref={ref}>
<TopProgressBar />
<ChatContextProvider>{children}</ChatContextProvider>
{children}
</div>
);
}
function LayoutWrapper({ children }: { children: React.ReactNode }) {
const { isMenuExpand } = useContext(ChatContext);
const { mode } = useColorScheme();
const { isMenuExpand, mode } = useContext(ChatContext);
const { i18n } = useTranslation();
return (
@@ -66,13 +64,14 @@ function LayoutWrapper({ children }: { children: React.ReactNode }) {
locale={i18n.language === 'en' ? enUS : zhCN}
theme={{
token: {
colorPrimary: '#0069FE',
borderRadius: 4,
},
algorithm: mode === 'dark' ? theme.darkAlgorithm : undefined,
algorithm: mode === 'dark' ? antdDarkTheme : undefined,
}}
>
<div className="flex w-screen h-screen overflow-hidden">
<div className={classNames('transition-[width]', isMenuExpand ? 'w-64' : 'w-20', 'hidden', 'md:block')}>
<div className={classNames('transition-[width]', isMenuExpand ? 'w-60' : 'w-20', 'hidden', 'md:block')}>
<SideBar />
</div>
<div className="flex flex-col flex-1 relative overflow-hidden">{children}</div>
@@ -83,15 +82,13 @@ function LayoutWrapper({ children }: { children: React.ReactNode }) {
function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvider theme={joyTheme}>
<CssVarsProvider theme={joyTheme} defaultMode="light">
<CssWrapper>
<LayoutWrapper>
<Component {...pageProps} />
</LayoutWrapper>
</CssWrapper>
</CssVarsProvider>
</ThemeProvider>
<ChatContextProvider>
<CssWrapper>
<LayoutWrapper>
<Component {...pageProps} />
</LayoutWrapper>
</CssWrapper>
</ChatContextProvider>
);
}