Merge pull request #65 from Vsion/main

fix: theme bug, add client_theme
kubeagi · Mar 29, 2024 · 82671aa · 82671aa
2 parents cc3d5f4 + 1936d50
commit 82671aa
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 19 deletions.
diff --git 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
@@ -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 (
     <html dir={'ltr'} lang={locale}>
+      <head>
+        <Script id="theme-script" strategy="beforeInteractive">
+          {`(function() {
+  const setCookie = (name, value, days, path) => {
+    let expires = '';
+  
+    if (days) {
+      const date = new Date();
+      date.setTime(date.getTime() + (days || 1) * 24 * 60 * 60 * 1000);
+      expires = "; expires=" + date.toUTCString();
+    }
+    if (typeof window.document === 'object') {
+      // eslint-disable-next-line unicorn/no-document-cookie
+      window.document.cookie = name + "=" + value + expires + "; path=" + (path || '/');
+    }
+  };
+  if (window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    setCookie('client_theme', 'dark');
+  } else {
+    setCookie('client_theme', 'light');
+  }
+})();`}
+        </Script>
+      </head>
       <body>
         <PWAHandlerLayout>
           <AxiosConfigLayout>
             <AuthLayout>
               <StyleRegistry>
                 <NextIntlClientProvider locale={locale} messages={messages}>
-                  <GlobalLayout locale={locale} theme={cookies().get('theme')?.value || 'auto'}>
+                  <GlobalLayout
+                    client_theme={cookies().get('client_theme')?.value}
+                    locale={locale}
+                    theme={cookies().get('theme')?.value || 'auto'}
+                  >
                     <AppLayoutTemplate>{children}</AppLayoutTemplate>
                   </GlobalLayout>
                 </NextIntlClientProvider>

diff --git 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) => {
         }}
       >
         <div className={styles.icon}>
-          <Image alt="default_chat" height={42} src="/default_chat.png" width={42} />
+          <Image alt="default_chat" height={42} src={data.icon || '/default_chat.png'} width={42} />
         </div>
         <div className={styles.content}>
           <Typography.Paragraph className={styles.title} ellipsis>

diff --git 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
@@ -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<Props>(
-  ({ 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<ThemeMode | undefined>(init_page_theme);
+    const [theme, setTheme] = React.useState<ThemeMode | undefined>(
+      init_page_theme === 'auto' ? client_theme || 'auto' : init_page_theme
+    );
     const [mediaQuery, setMediaQuery] = React.useState<any>();
     const theme_from_store = useSelector((store: any) => store.theme);
     const pathname = usePathname();
@@ -71,9 +74,11 @@ const ThemeLayout = React.memo<Props>(
         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,18 +97,21 @@ const ThemeLayout = React.memo<Props>(
       }
     }, [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) {
         handleThemeChange(mediaQuery);
         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 (
       <ThemeProvider
         themeMode={theme} // 主题模式; ps: themeMode 和 appearance 都可以实现效果, themeMode 更贴合目前功能的含义

diff --git a/src/layout/GlobalLayout/index.tsx b/src/layout/GlobalLayout/index.tsx
@@ -12,17 +12,19 @@ import ThemeLayout from './ThemeLayout';
 
 interface GlobalLayoutProps extends PropsWithChildren {
   theme: ThemeMode | undefined; // theme from cookie;
+  client_theme: 'dark' | 'light' | undefined;
   locale: string;
 }
 
-const GlobalLayout = React.memo<GlobalLayoutProps>(({ children, theme, locale }) => {
+const GlobalLayout = React.memo<GlobalLayoutProps>(({ children, theme, locale, client_theme }) => {
   const store = useStore({
     theme,
   });
   return (
     <Provider store={store}>
       <ThemeLayout
         antdLocale={locale?.startsWith('zh') ? zhCN : enUS}
+        client_theme={client_theme}
         locale={locale}
         theme={theme}
       >

diff --git 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
@@ -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;