Get the system language at startup.

src/common/default_configs.ts

@@ -3,6 +3,7 @@ import { FolderModeType } from './data.d'
 
 export type ThemeType = 'light' | 'dark' | 'system'
 export type ProtocolType = 'http' | 'https'
+export type DefaultLocaleType = LocaleName | undefined
 
 const configs = {
   // UI
@@ -11,7 +12,7 @@ const configs = {
 
   // preferences
   history_limit: 50,
-  locale: 'en' as LocaleName,
+  locale: undefined as DefaultLocaleType,
   theme: 'light' as ThemeType,
   choice_mode: 2 as FolderModeType,
   show_title_on_tray: false,

src/main/actions/config/all.ts

@@ -7,6 +7,10 @@ import { cfgdb } from '@main/data'
 import default_configs, { ConfigsType } from '@root/common/default_configs'
 
 export default async (): Promise<ConfigsType> => {
+  if (!default_configs.locale && global.system_locale) {
+    default_configs.locale = global.system_locale
+  }
+
   let cfgs: Partial<ConfigsType> = await cfgdb.dict.cfg.all()
   return Object.assign({}, default_configs, cfgs)
 }

src/main/main.ts

@@ -7,10 +7,11 @@ import * as http_api from '@main/http'
 import * as cron from '@main/libs/cron'
 import getIndex from '@main/libs/getIndex'
 import isDev from '@main/libs/isDev'
-import { makeMainMenu } from '@main/ui/menu'
 import Tracer from '@main/libs/tracer'
-import '@main/ui/tray'
+import checkSystemLocale from '@main/ui/checkSystemLocale'
 import * as find from '@main/ui/find'
+import { makeMainMenu } from '@main/ui/menu'
+import '@main/ui/tray'
 import version from '@root/version.json'
 import { app, BrowserWindow, ipcMain, nativeTheme } from 'electron'
 import windowStateKeeper from 'electron-window-state'
@@ -141,6 +142,8 @@ global.tracer = new Tracer()
 app.on('ready', async () => {
   console.log(`VERSION: ${version.join('.')}`)
   global.session_id = uuid4()
+  await checkSystemLocale()
+
   await createWindow()
   cron.start()
 

src/main/types.d.ts

@@ -5,6 +5,7 @@
  */
 
 import Tracer from '@main/libs/tracer'
+import { LocaleName } from '@root/common/i18n'
 import SwhDb from 'potdb'
 import { BrowserWindow } from 'electron'
 import * as actions from './actions'
@@ -35,6 +36,7 @@ declare global {
       last_path?: string // the last path opened by SwitchHosts
       tracer: Tracer
       is_will_quit?: boolean
+      system_locale?: LocaleName
     }
   }
 }

src/main/ui/checkSystemLocale.ts

@@ -0,0 +1,33 @@
+/**
+ * @author: oldj
+ * @homepage: https://oldj.net
+ */
+
+import { languages, LocaleName } from '@root/common/i18n'
+import { app } from 'electron'
+
+const isLocaleName = (locale: string): locale is LocaleName => {
+  return Object.keys(languages).includes(locale)
+}
+
+export default async () => {
+  let locale = app.getLocale()
+  if (!locale) {
+    return
+  }
+
+  console.log(`Systel locale: ${locale}`)
+  if (locale.startsWith('en')) {
+    locale = 'en'
+  } else if (locale.startsWith('zh')) {
+    locale = 'zh'
+  } else if (locale.startsWith('fr')) {
+    locale = 'fr'
+  }
+
+  if (!isLocaleName(locale)) {
+    return
+  }
+
+  global.system_locale = locale
+}

src/renderer/.umirc.ts

@@ -29,4 +29,5 @@ export default defineConfig({
     },
   },
   webpack5: {},
+  mfsu: {},
 })

src/renderer/components/About/AboutContent.less

@@ -1,6 +1,8 @@
 @import "../../styles/common";
 
 .root {
+  padding-bottom: 20px;
+
   a {
     color: var(--swh-primary-color);
 

src/renderer/models/useI18n.ts

@@ -14,7 +14,7 @@ export default function useI18n() {
 
   return {
     locale,
-    setLocale,
+    setLocale: (locale?: LocaleName) => setLocale(locale || 'en'),
     i18n,
     lang: i18n.lang,
   }

src/renderer/pages/index.tsx

@@ -38,6 +38,17 @@ export default () => {
   }
 
   const init = async () => {
+    let if_migrate = await actions.migrateCheck()
+    if (if_migrate) {
+      setShowMigration(true)
+      return
+    }
+
+    await loadHostsData()
+    setLoading(false)
+  }
+
+  const onConfigsUpdate = async () => {
     if (!configs) return
 
     setLocale(configs.locale)
@@ -49,20 +60,14 @@ export default () => {
     document.body.className = cls.replace(/\btheme-\w+/gi, '')
     document.body.classList.add(`platform-${agent.platform}`, `theme-${theme}`)
     await agent.darkModeToggle(theme)
-
-    let if_migrate = await actions.migrateCheck()
-    if (if_migrate) {
-      setShowMigration(true)
-      return
-    }
-
-    await loadHostsData()
-    setLoading(false)
   }
 
   useEffect(() => {
-    if (!configs) return
     init().catch((e) => console.error(e))
+  }, [])
+
+  useEffect(() => {
+    onConfigsUpdate().catch((e) => console.error(e))
   }, [configs])
 
   useOnBroadcast(events.toggle_left_pannel, (show: boolean) =>

src/renderer/styles/common.less

@@ -9,6 +9,13 @@ html, body {
   color: var(--swh-font-color);
 }
 
+button, a, input {
+  &:focus:not(:focus-visible) {
+    outline: 0;
+    box-shadow: none;
+  }
+}
+
 .win-drag {
   -webkit-app-region: drag;
 }

src/renderer/styles/themes/dark.less

@@ -3,8 +3,8 @@
   --swh-border-color-0: #464b52;
   --swh-border-color-1: #585858;
   --swh-input-bg: #dad8de;
-  --swh-font-color: #666;
-  --swh-font-color-weak: #999;
+  --swh-font-color: #aaa;
+  --swh-font-color-weak: #666;
   --swh-font-color-reverse: #a7a7a7;
   --swh-border-radius: 4px;
   --swh-highlight-bg: #993;

src/version.json

@@ -1 +1 @@
-[4, 0, 3, 6067]
+[4, 0, 3, 6068]