Default language will be given according to the browse setting and al…

…so can be configured infiniflow#801 (infiniflow#823)

### What problem does this PR solve?

Default language will be given according to the browse setting and also
can be configured infiniflow#801
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/package.json

@@ -21,6 +21,7 @@
     "dayjs": "^1.11.10",
     "eventsource-parser": "^1.1.2",
     "i18next": "^23.7.16",
+    "i18next-browser-languagedetector": "^8.0.0",
     "js-base64": "^3.7.5",
     "jsencrypt": "^3.3.2",
     "lodash": "^4.17.21",

web/src/locales/config.ts

@@ -1,4 +1,5 @@
 import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
 import translation_en from './en';
@@ -11,13 +12,19 @@ const resources = {
   'zh-TRADITIONAL': translation_zh_traditional,
 };
 
-i18n.use(initReactI18next).init({
-  resources,
-  lng: 'en',
-  fallbackLng: 'en',
-  interpolation: {
-    escapeValue: false,
-  },
-});
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    detection: {
+      lookupLocalStorage: 'lng',
+    },
+    supportedLngs: ['en', 'zh', 'zh-TRADITIONAL'],
+    resources,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
 
 export default i18n;