Merge pull request #400 from actiontech/feature/sqle-issue-2543

[feature]: implement language preference switch based on browser settings

Author: anny1021

packages/base/src/App.tsx

@@ -5,12 +5,17 @@ import { IReduxState } from './store';
 import { useSelector } from 'react-redux';
 import { StyledEngineProvider, ThemeProvider } from '@mui/system';
 import { EmptyBox, HeaderProgress, SpinIndicator } from '@actiontech/shared';
-import zhCN from 'antd/locale/zh_CN';
+import antd_zh_CN from 'antd/locale/zh_CN';
+import antd_en_US from 'antd/locale/en_US';
 import {
   useChangeTheme,
   useNotificationContext
 } from '@actiontech/shared/lib/hooks';
-import { SupportTheme, UserRolesType } from '@actiontech/shared/lib/enum';
+import {
+  SupportLanguage,
+  SupportTheme,
+  UserRolesType
+} from '@actiontech/shared/lib/enum';
 import Nav from './page/Nav';
 import {
   useCurrentUser,
@@ -34,6 +39,7 @@ import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import { PermissionReduxState } from '@actiontech/shared/lib/types/common.type';
+import i18n, { getPreferredLanguages } from './locale';
 
 import './index.less';
 
@@ -69,6 +75,15 @@ function App() {
     token: state.user.token
   }));
 
+  const { currentLanguage, antdLanguage } = useMemo(() => {
+    const lang = getPreferredLanguages()?.[0] ?? SupportLanguage.zhCN;
+
+    return {
+      currentLanguage: lang,
+      antdLanguage: lang === SupportLanguage.enUS ? antd_en_US : antd_zh_CN
+    };
+  }, []);
+
   const { notificationContextHolder } = useNotificationContext();
 
   const { getUserBySession } = useSessionUser();
@@ -161,14 +176,18 @@ function App() {
     }
   }, [getUserBySession, token, updateDriverList, updateFeaturePermission]);
 
+  useEffect(() => {
+    i18n.changeLanguage(currentLanguage);
+  }, [currentLanguage]);
+
   return (
     <Wrapper>
       <StyleProvider
         hashPriority="high"
         transformers={[legacyLogicalPropertiesTransformer]}
       >
         <ConfigProvider
-          locale={zhCN}
+          locale={antdLanguage}
           theme={{
             algorithm:
               theme === SupportTheme.DARK

packages/base/src/locale/index.ts

@@ -1,6 +1,6 @@
 import { StorageKey, SupportLanguage } from '@actiontech/shared/lib/enum';
 import { initReactI18next } from 'react-i18next';
-import i18n from 'sqle/src/locale';
+import i18n from 'i18next';
 import sqleZhCN from 'sqle/src/locale/zh-CN';
 import sqleEnUS from 'sqle/src/locale/en-US';
 import commonZhCN from '@actiontech/shared/lib/locale/zh-CN';
@@ -34,7 +34,7 @@ if (en_dupKeys.length > 0) {
     `DMS EnUS_Locale error: The same key exists: ${en_dupKeys.toString()}`
   );
 }
-// endif
+// #endif
 
 const allZhCN = {
   translation: {
@@ -72,10 +72,17 @@ const initReactI18n = () => {
   });
 };
 
+const getPreferredLanguages = () => {
+  if (navigator.languages && navigator.languages.length) {
+    return Array.from(navigator.languages);
+  }
+  return [navigator.language];
+};
+
 const t = (key: I18nKey, opts: TOptions = {}) => {
   return i18n.t(key, opts);
 };
 
-export { t, initReactI18n };
+export { t, initReactI18n, getPreferredLanguages };
 
 export default i18n;