feat: Automatically switch language when first visit (#574)

packages/components/src/components/Layout/index.tsx

@@ -1,8 +1,14 @@
 import { PropsWithChildren, useContext, useEffect } from 'react';
 import { FloatButton, Layout as L } from 'antd';
-import { MAIN_BG, Size } from '../../constants';
+import { Language, MAIN_BG, Size } from '../../constants';
 import { Header } from './header';
-import { useLocale, useI18n } from '../../utils';
+import {
+  useLocale,
+  useI18n,
+  getFirstVisitFromStorage,
+  setFirstVisitToStorage,
+  getLanguage,
+} from '../../utils';
 import { Progress } from './progress';
 import { ConfigContext } from '../../config';
 
@@ -16,8 +22,21 @@ export const Layout = (props: PropsWithChildren<LayoutProps>): JSX.Element => {
   const { children } = props;
 
   useEffect(() => {
-    if (i18n.language !== locale) {
-      i18n.changeLanguage(locale);
+    let currentLocale = locale;
+    // Check if the user is visiting the site for the first time
+    const visited = getFirstVisitFromStorage();
+    if (!visited) {
+      setFirstVisitToStorage('1');
+      const targetLang = window.navigator.language.split('-')[0];
+      const userLang = getLanguage(targetLang);
+
+      if (Object.values(Language).includes(userLang)) {
+        currentLocale = userLang;
+      }
+    }
+
+    if (i18n.language !== currentLocale) {
+      i18n.changeLanguage(currentLocale);
     }
   }, [locale]);
 

packages/components/src/utils/locale.ts

@@ -1,8 +1,14 @@
 import cn from 'antd/es/locale/zh_CN';
 import en from 'antd/es/locale/en_GB';
 import type { Locale } from 'antd/es/locale';
+import { Language } from '../constants';
 
 export function getLocale(locale: string): Locale {
   const res = locale === 'cn' || locale === 'zh-CN' ? cn : en;
   return res;
 }
+
+export function getLanguage(locale: string): Language {
+  const res = locale === 'cn' || locale === 'zh' ? Language.Cn : Language.En;
+  return res;
+}

packages/components/src/utils/storage.tsx

@@ -7,6 +7,7 @@ enum Keys {
   Locale = 'LOCALE',
   ViewMode = 'VIEWMODE',
   APILoaderMode4Dev = 'APILOADERMODE_DEV',
+  FirstVisit = 'FIRST_VISIT'
 }
 
 export function getStorage(key: string): string | null {
@@ -67,3 +68,11 @@ export function setAPILoaderModeToStorage(mode: APILoaderMode4Dev) {
 export function getAPILoaderModeFromStorage() {
   return getStorage(Keys.APILoaderMode4Dev) || APILoaderMode4Dev.Default;
 }
+
+export function getFirstVisitFromStorage() {
+  return getStorage(Keys.FirstVisit);
+}
+
+export function setFirstVisitToStorage(value: '1') {
+  setStorage(Keys.FirstVisit, value);
+}