feat: add navigator language detector

client/shared/i18n/index.ts

@@ -9,7 +9,7 @@ import {
   initReactI18next,
 } from 'react-i18next';
 import { crc32 } from 'crc';
-import { languageDetector } from './language';
+import { defaultLanguage, languageDetector } from './language';
 import { useState, useEffect } from 'react';
 import HttpApi from 'i18next-http-backend'; // https://github.com/i18next/i18next-http-backend
 
@@ -23,13 +23,13 @@ i18next
   .use(HttpApi)
   .use(initReactI18next)
   .init({
-    fallbackLng: 'zh-CN',
+    fallbackLng: defaultLanguage,
     load: 'currentOnly',
     backend: {
       loadPath: '/locales/{{lng}}/{{ns}}.json',
       allowMultiLoading: false,
       addPath: (...args: any[]) => {
-        console.log('缺少翻译:', ...args);
+        console.log('Lost translate:', ...args);
       },
     },
     react: {

client/shared/i18n/language.ts

@@ -5,17 +5,25 @@ import { AllowedLanguage, setLanguage as setI18NLanguage } from './index';
 import { getStorage, useStorage } from '../manager/storage';
 import { LANGUAGE_KEY } from '../utils/consts';
 
-const defaultLanguage = 'zh-CN';
+export const defaultLanguage = 'en-US';
+
+function getNavigatorLanguage(): AllowedLanguage {
+  if (!navigator.language) {
+    return defaultLanguage;
+  }
+
+  return navigator.language.startsWith('zh') ? 'zh-CN' : 'en-US';
+}
 
 /**
- * 获取当前语言
+ * Get current language
  */
 async function getLanguage(): Promise<string> {
-  return await getStorage().get(LANGUAGE_KEY, defaultLanguage);
+  return await getStorage().get(LANGUAGE_KEY, getNavigatorLanguage());
 }
 
 /**
- * 当前语言管理hook
+ * Current language management hook
  */
 export function useLanguage() {
   const [language, { save }] = useStorage<AllowedLanguage>(
@@ -49,15 +57,15 @@ export function useLanguage() {
 }
 
 /**
- * 存储语言
+ * Storage language
- * @param lang 语言代码
+ * @param lang Language Code
  */
 export async function saveLanguage(lang: string) {
   await getStorage().save(LANGUAGE_KEY, lang);
 }
 
 /**
- * i18n语言检测中间件
+ * i18n language detection middleware
  */
 export const languageDetector: LanguageDetectorAsyncModule = {
   type: 'languageDetector',