diff --git a/web/src/app.tsx b/web/src/app.tsx index 08161485c07..9b65d713f89 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -1,7 +1,7 @@ import i18n from '@/locales/config'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import { App, ConfigProvider, ConfigProviderProps } from 'antd'; +import { App, ConfigProvider, ConfigProviderProps, theme } from 'antd'; import enUS from 'antd/locale/en_US'; import vi_VN from 'antd/locale/vi_VN'; import zhCN from 'antd/locale/zh_CN'; @@ -14,7 +14,7 @@ import weekOfYear from 'dayjs/plugin/weekOfYear'; import weekYear from 'dayjs/plugin/weekYear'; import weekday from 'dayjs/plugin/weekday'; import React, { ReactNode, useEffect, useState } from 'react'; -import { ThemeProvider } from './components/theme-provider'; +import { ThemeProvider, useTheme } from './components/theme-provider'; import storage from './utils/authorization-util'; dayjs.extend(customParseFormat); @@ -35,7 +35,8 @@ const queryClient = new QueryClient(); type Locale = ConfigProviderProps['locale']; -const RootProvider = ({ children }: React.PropsWithChildren) => { +function Root({ children }: React.PropsWithChildren) { + const { theme: themeragflow } = useTheme(); const getLocale = (lng: string) => AntLanguageMap[lng as keyof typeof AntLanguageMap] ?? enUS; @@ -46,6 +47,29 @@ const RootProvider = ({ children }: React.PropsWithChildren) => { setLocal(getLocale(lng)); }); + return ( + <> + + {children} + + + + ); +} + +const RootProvider = ({ children }: React.PropsWithChildren) => { useEffect(() => { // Because the language is saved in the backend, a token is required to obtain the api. However, the login page cannot obtain the language through the getUserInfo api, so the language needs to be saved in localstorage. const lng = storage.getLanguage(); @@ -57,22 +81,11 @@ const RootProvider = ({ children }: React.PropsWithChildren) => { return ( - - {children} - - + {children} ); }; - export function rootContainer(container: ReactNode) { return {container}; } diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less index fc72c7d36e4..58da20e7095 100644 --- a/web/src/layouts/components/header/index.less +++ b/web/src/layouts/components/header/index.less @@ -35,7 +35,7 @@ height: 40px; line-height: 40px; border: 0 !important; - background-color: rgba(249, 249, 249, 1); + background-color: rgba(249, 249, 249, 0.3); font-weight: @fontWeight700; color: rgba(29, 25, 41, 1); &::before { @@ -55,6 +55,6 @@ } .radioButtonIcon { vertical-align: middle; - max-width: 16px; - max-height: 16px; + max-width: 15px; + max-height: 15px; } diff --git a/web/src/layouts/components/right-toolbar/index.less b/web/src/layouts/components/right-toolbar/index.less index 2749f19b4db..ff6f47093e5 100644 --- a/web/src/layouts/components/right-toolbar/index.less +++ b/web/src/layouts/components/right-toolbar/index.less @@ -11,9 +11,13 @@ text-align: center; height: 32px; border-radius: 50%; - background-color: rgba(242, 243, 245, 1); + background-color: rgba(242, 243, 245, 0.4); vertical-align: middle; cursor: pointer; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .language { diff --git a/web/src/layouts/components/right-toolbar/index.tsx b/web/src/layouts/components/right-toolbar/index.tsx index 267bc23c440..d720e4a3e0a 100644 --- a/web/src/layouts/components/right-toolbar/index.tsx +++ b/web/src/layouts/components/right-toolbar/index.tsx @@ -5,9 +5,11 @@ import camelCase from 'lodash/camelCase'; import React from 'react'; import User from '../user'; +import { useTheme } from '@/components/theme-provider'; import { LanguageList, LanguageMap } from '@/constants/common'; import { useChangeLanguage } from '@/hooks/logic-hooks'; import { useFetchUserInfo } from '@/hooks/user-setting-hooks'; +import { MoonIcon, SunIcon } from 'lucide-react'; import styled from './index.less'; const Circle = ({ children, ...restProps }: React.PropsWithChildren) => { @@ -25,6 +27,8 @@ const handleGithubCLick = () => { const RightToolBar = () => { const { t } = useTranslate('common'); const changeLanguage = useChangeLanguage(); + const { setTheme, theme } = useTheme(); + const { data: { language = 'English' }, } = useFetchUserInfo(); @@ -40,6 +44,13 @@ const RightToolBar = () => { return [...pre!, { type: 'divider' }, cur]; }, []); + const onMoonClick = React.useCallback(() => { + setTheme('light'); + }, [setTheme]); + const onSunClick = React.useCallback(() => { + setTheme('dark'); + }, [setTheme]); + return (
@@ -52,9 +63,13 @@ const RightToolBar = () => { - {/* - - */} + + {theme === 'dark' ? ( + + ) : ( + + )} +
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 58e49083213..fbb4ec78798 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -300,6 +300,7 @@ The above is the content you need to summarize.`, randomSeed: 'Random seed', randomSeedMessage: 'Random seed is required', entityTypes: 'Entity types', + vietnamese: 'Vietamese', }, chunk: { chunk: 'Chunk', diff --git a/web/src/locales/vi.ts b/web/src/locales/vi.ts index bb95ee6f61b..dbbbefb66b8 100644 --- a/web/src/locales/vi.ts +++ b/web/src/locales/vi.ts @@ -297,6 +297,7 @@ export default { randomSeed: 'Hạt giống ngẫu nhiên', randomSeedMessage: 'Hạt giống ngẫu nhiên là bắt buộc', entityTypes: 'Loại thực thể', + vietnamese: 'Tiếng Việt', }, chunk: { chunk: 'Khối', diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx index 8800b718420..ab5716e433a 100644 --- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx @@ -69,6 +69,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {