diff --git a/src/app/[locale]/agent/components/styles.ts b/src/app/[locale]/agent/components/styles.ts index 046dacb..65f27da 100644 --- a/src/app/[locale]/agent/components/styles.ts +++ b/src/app/[locale]/agent/components/styles.ts @@ -1,6 +1,6 @@ import { createStyles } from 'antd-style'; -export const useStyles = createStyles(({ token, isDarkMode }) => ({ +export const useStyles = createStyles(({ token }) => ({ agentContainer: { 'width': '100%', 'position': 'relative', @@ -31,7 +31,6 @@ export const useStyles = createStyles(({ token, isDarkMode }) => ({ backgroundColor: token.colorBgLayout, padding: 16, borderRadius: '16px', - border: `${isDarkMode ? '1px solid' + token.colorBorder : null}`, cursor: 'pointer', }, left: { @@ -50,7 +49,7 @@ export const useStyles = createStyles(({ token, isDarkMode }) => ({ overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: 700, - color: `${isDarkMode ? '#fff' : '#000'}`, + color: token.colorTextBase, }, desc: { color: token.colorTextDescription, diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 6d054cc..38173b8 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -1,6 +1,7 @@ import type { Viewport } from 'next'; import { NextIntlClientProvider, useMessages } from 'next-intl'; import { cookies } from 'next/headers'; +import Script from 'next/script'; import React from 'react'; import AppLayoutTemplate from '@/layout/AppLayoutTemplate'; @@ -30,13 +31,41 @@ export default function RootLayout({ // dir === ltr | rtl return ( + + + - + {children} diff --git a/src/layout/AppLayout/SideBar/Chats/Item.tsx b/src/layout/AppLayout/SideBar/Chats/Item.tsx index 151399c..2aa267c 100644 --- a/src/layout/AppLayout/SideBar/Chats/Item.tsx +++ b/src/layout/AppLayout/SideBar/Chats/Item.tsx @@ -103,6 +103,7 @@ export const useStyles = createStyles(({ token }) => { interface Props { data: { id: string; + icon: string; // img base64 = = title: string; desc: string; app_namespace: string; @@ -187,7 +188,7 @@ const ChatItem: any = (props: Props) => { }} >
- default_chat + default_chat
diff --git a/src/layout/AppLayout/SideBar/UserInfoBottom.tsx b/src/layout/AppLayout/SideBar/UserInfoBottom.tsx index 8eb9216..cd5512d 100644 --- a/src/layout/AppLayout/SideBar/UserInfoBottom.tsx +++ b/src/layout/AppLayout/SideBar/UserInfoBottom.tsx @@ -159,7 +159,7 @@ export default function UserInfoBottom() { onClick: ({ key }) => { if (theme === key) return; dispatch({ - type: 'TRIGGER_SHEME', + type: 'TRIGGER_THEME', theme: key, }); }, @@ -176,7 +176,7 @@ export default function UserInfoBottom() { onClick={() => { if (theme === 'auto') return; dispatch({ - type: 'TRIGGER_SHEME', + type: 'TRIGGER_THEME', theme: theme === 'light' ? 'dark' : 'light', }); }} diff --git a/src/layout/GlobalLayout/ThemeLayout/index.tsx b/src/layout/GlobalLayout/ThemeLayout/index.tsx index ede526e..ec7c6aa 100644 --- a/src/layout/GlobalLayout/ThemeLayout/index.tsx +++ b/src/layout/GlobalLayout/ThemeLayout/index.tsx @@ -14,22 +14,25 @@ import { useAuthContext } from '@/layout/AuthLayout'; import { GlobalStyle } from '@/styles'; import { dark, default_theme, light } from '@/theme/themeConfig'; import { initAxiosHooks } from '@/utils/axios'; -import { isTokenExpired } from '@/utils/client'; +import { isTokenExpired, setCookie } from '@/utils/client'; import { AUTH_DATA } from '@/utils/constants'; import { useAxiosConfig } from '../../AxiosConfigLayout'; interface Props extends PropsWithChildren { theme?: ThemeMode; // 刷新页面时, 从 cookie 获取保存的 theme, 作为初始值 + client_theme?: 'dark' | 'light' | undefined; // client theme antdLocale: Locale; locale: string; } const ThemeLayout = React.memo( - ({ children, theme: init_page_theme, antdLocale, locale }) => { + ({ children, theme: init_page_theme, client_theme, antdLocale, locale }) => { const { setAxiosConfigured, isAxiosConfigured } = useAxiosConfig(); const { setAuthed } = useAuthContext(); - const [theme, setTheme] = React.useState(init_page_theme); + const [theme, setTheme] = React.useState( + init_page_theme === 'auto' ? client_theme || 'auto' : init_page_theme + ); const [mediaQuery, setMediaQuery] = React.useState(); const theme_from_store = useSelector((store: any) => store.theme); const pathname = usePathname(); @@ -71,9 +74,11 @@ const ThemeLayout = React.memo( if (theme_from_store !== 'auto') return; if (e.matches) { // console.log('系统为: 暗黑模式'); + setCookie('client_theme', 'dark'); setTheme('dark'); } else { // console.log('系统为: 正常（亮色）模式'); + setCookie('client_theme', 'light'); setTheme('light'); } }, @@ -92,7 +97,7 @@ const ThemeLayout = React.memo( } }, [mediaQuery, handleThemeChange]); React.useEffect(() => { - if (theme_from_store !== theme) { + if (theme_from_store !== 'auto' && theme_from_store !== theme) { setTheme(theme_from_store); } if (theme_from_store === 'auto' && mediaQuery) { @@ -100,10 +105,13 @@ const ThemeLayout = React.memo( return; } }, [theme_from_store, mediaQuery]); - const themeConfig = - theme === 'auto' - ? default_theme - : merge(cloneDeep(default_theme), theme === 'dark' ? dark : light); + const themeConfig = React.useMemo( + () => + theme === 'auto' + ? default_theme + : merge(cloneDeep(default_theme), theme === 'dark' ? dark : light), + [theme] + ); return ( (({ children, theme, locale }) => { +const GlobalLayout = React.memo(({ children, theme, locale, client_theme }) => { const store = useStore({ theme, }); @@ -23,6 +24,7 @@ const GlobalLayout = React.memo(({ children, theme, locale }) diff --git a/src/store/index.ts b/src/store/index.ts index 2079f18..c35023d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -10,7 +10,7 @@ let store: any; const reducer = (state = {}, action: any) => { switch (action.type) { - case 'TRIGGER_SHEME': { + case 'TRIGGER_THEME': { setCookie('theme', action.theme); // todo remove, use user profile by bff ? return { ...state, diff --git a/src/theme/themeConfig.ts b/src/theme/themeConfig.ts index 24301b3..69dd6c6 100644 --- a/src/theme/themeConfig.ts +++ b/src/theme/themeConfig.ts @@ -30,7 +30,7 @@ const light_theme_props: ThemeProviderProps = Object.freeze({ }, }); -const datk_theme_props: ThemeProviderProps = Object.freeze({ +const dark_theme_props: ThemeProviderProps = Object.freeze({ theme: { token: { colorBgBase: '#000', @@ -46,5 +46,5 @@ const datk_theme_props: ThemeProviderProps = Object.freeze({ }); export const light = light_theme_props; -export const dark = datk_theme_props; +export const dark = dark_theme_props; export const default_theme = default_theme_props;