feat(i18n): Implement dynamic language loading

Author: Ayideyia

frontend/.env

@@ -2,5 +2,6 @@ VITE_APP_TITLE = GUI.for.Clash
 VITE_APP_VERSION = v1.9.10
 VITE_APP_PROJECT_URL = https://github.com/GUI-for-Cores
 VITE_APP_VERSION_API = https://api.github.com/repos/GUI-for-Cores/GUI.for.Clash/releases/latest
+VITE_APP_LOCALES_URL = https://github.com/GUI-for-Cores/GUI-for-Cores.github.io/tree/main/app-resources/locales/gfc
 VITE_APP_TG_GROUP = https://t.me/GUI_for_Cores
 VITE_APP_TG_CHANNEL = https://t.me/GUI_for_Cores_Channel

frontend/env.d.ts

@@ -4,6 +4,7 @@ interface ImportMetaEnv {
   readonly VITE_APP_TITLE: string
   readonly VITE_APP_VERSION: string
   readonly VITE_APP_PROJECT_URL: string
+  readonly VITE_APP_LOCALES_URL: string
   readonly VITE_APP_TG_GROUP: string
   readonly VITE_APP_TG_CHANNEL: string
   readonly VITE_APP_VERSION_API: string

frontend/src/components/Dropdown/index.vue

@@ -97,6 +97,7 @@ watch(show, async (isVisible) => {
 
 const open = () => (show.value = true)
 const close = () => (show.value = false)
+const toggle = () => (show.value = !show.value)
 const hasTrigger = (t: TriggerType) => props.trigger.includes(t)
 
 const onMouseEnter = () => {
@@ -146,7 +147,7 @@ onUnmounted(() => {
     @click="onClick"
     class="gui-dropdown relative flex flex-col items-center"
   >
-    <slot :="{ open, close }"></slot>
+    <slot v-bind="{ open, close, toggle }"></slot>
     <Transition name="overlay">
       <div
         v-show="show"
@@ -155,7 +156,7 @@ onUnmounted(() => {
         class="gui-dropdown-overlay fixed z-99 rounded-8 backdrop-blur-sm shadow overflow-y-auto"
         @click.stop
       >
-        <slot name="overlay" :="{ open, close }"></slot>
+        <slot name="overlay" v-bind="{ open, close, toggle }"></slot>
       </div>
     </Transition>
   </div>

frontend/src/components/Radio/index.vue

@@ -24,13 +24,14 @@ const handleSelect = (val: string | number | boolean) => {
 </script>
 
 <template>
-  <div :class="[size]" class="gui-radio inline-flex rounded-8 text-12 overflow-hidden">
+  <div :class="[size]" class="gui-radio inline-flex rounded-full text-12 overflow-hidden">
     <div
       v-for="o in options"
       :key="o.value.toString()"
+      v-tips.slow="o.label"
       @click="handleSelect(o.value)"
       :class="{ active: o.value === model }"
-      class="gui-radio-button cursor-pointer px-12 py-6 duration-200"
+      class="gui-radio-button cursor-pointer px-12 py-6 duration-200 line-clamp-1 break-all"
     >
       {{ t(o.label) }}
     </div>

frontend/src/components/Select/index.vue

@@ -40,15 +40,17 @@ const handleClear = () => {
 
 <template>
   <Dropdown :trigger="['click']">
-    <template #default="{ open }">
+    <template #default="{ toggle }">
       <div
         :class="{ border, [size]: true, 'auto-size': autoSize }"
         class="gui-select cursor-pointer min-h-30 inline-flex items-center min-w-128 rounded-4 px-8"
       >
-        {{ t(displayLabel) }}
+        <span class="line-clamp-1 break-all">
+          {{ t(displayLabel) }}
+        </span>
         <Button
           :icon="clearable && model ? 'close' : 'arrowDown'"
-          @click.stop="() => (clearable && model ? handleClear() : open())"
+          @click.stop="() => (clearable && model ? handleClear() : toggle())"
           type="text"
           size="small"
           class="ml-auto"

frontend/src/constant/app.ts

@@ -7,6 +7,8 @@ import {
   View,
 } from '@/enums/app'
 
+export const LocalesFilePath = 'data/locales'
+
 export const UserFilePath = 'data/user.yaml'
 
 export const ProfilesFilePath = 'data/profiles.yaml'

frontend/src/lang/index.ts

@@ -1,9 +1,12 @@
 import { createI18n } from 'vue-i18n'
 
+import { ReadFile } from '@/bridge'
+import { LocalesFilePath } from '@/constant/app'
+
 import en from './locale/en'
 import zh from './locale/zh'
 
-const messages = {
+const messages: { [key: string]: Recordable } = {
   zh,
   en,
 }
@@ -16,4 +19,11 @@ const i18n = createI18n({
   messages,
 })
 
+export const loadLocaleMessages = async (locale: string) => {
+  if (!i18n.global.availableLocales.includes(locale)) {
+    const messages = await ReadFile(`${LocalesFilePath}/${locale}.json`)
+    i18n.global.setLocaleMessage(locale, JSON.parse(messages))
+  }
+}
+
 export default i18n

frontend/src/lang/locale/en.ts

@@ -569,6 +569,7 @@ export default {
     },
     lang: {
       name: 'Language',
+      load: 'Load language files',
       zh: '简体中文',
       en: 'English',
     },

frontend/src/lang/locale/zh.ts

@@ -568,6 +568,7 @@ export default {
     },
     lang: {
       name: '语言',
+      load: '加载语言文件',
       zh: '简体中文',
       en: 'English',
     },

frontend/src/stores/appSettings.ts

@@ -3,6 +3,7 @@ import { ref, watch } from 'vue'
 import { parse, stringify } from 'yaml'
 
 import {
+  ReadDir,
   ReadFile,
   WriteFile,
   WindowSetSystemDefaultTheme,
@@ -17,6 +18,7 @@ import {
   DefaultFontFamily,
   DefaultTestURL,
   UserFilePath,
+  LocalesFilePath,
 } from '@/constant/app'
 import { CorePidFilePath, DefaultConnections, DefaultCoreConfig } from '@/constant/kernel'
 import {
@@ -29,15 +31,12 @@ import {
   ControllerCloseMode,
   Branch,
 } from '@/enums/app'
-import i18n from '@/lang'
-import { debounce, updateTrayMenus, APP_TITLE, ignoredError, APP_VERSION } from '@/utils'
+import i18n, { loadLocaleMessages } from '@/lang'
+import { debounce, updateTrayMenus, APP_TITLE, ignoredError, APP_VERSION, sleep } from '@/utils'
 
 import type { AppSettings } from '@/types/app'
 
 export const useAppSettingsStore = defineStore('app-settings', () => {
-  let firstOpen = true
-  let latestUserConfig = ''
-
   const themeMode = ref<Theme.Dark | Theme.Light>(Theme.Light)
 
   const app = ref<AppSettings>({
@@ -91,9 +90,46 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     WriteFile(UserFilePath, config)
   }, 500)
 
+  const localesLoading = ref(false)
+  const locales = ref<{ label: string; value: string }[]>([])
+  const loadLocales = async (delay = false) => {
+    localesLoading.value = true
+    locales.value = [
+      {
+        label: 'settings.lang.zh',
+        value: Lang.ZH,
+      },
+      {
+        label: 'settings.lang.en',
+        value: Lang.EN,
+      },
+    ]
+    const dirs = await ignoredError(ReadDir, LocalesFilePath)
+    if (dirs) {
+      const files = dirs.flatMap((file) => {
+        if (file.isDir) return []
+        const [name, ext] = file.name.split('.')
+        return name && ext === 'json' ? { label: name, value: name } : []
+      })
+      locales.value.push(...files)
+    }
+    delay && (await sleep(200))
+    localesLoading.value = false
+  }
+
+  let latestUserSettings: string
+
   const setupAppSettings = async () => {
     const data = await ignoredError(ReadFile, UserFilePath)
-    data && (app.value = Object.assign(app.value, parse(data)))
+    if (data) {
+      const settings = parse(data)
+      latestUserSettings = stringify(settings)
+      app.value = Object.assign(app.value, settings)
+    } else {
+      latestUserSettings = ''
+    }
+
+    await loadLocales()
 
     if (!app.value.kernel.main) {
       app.value.kernel.main = DefaultCoreConfig()
@@ -132,10 +168,6 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
       // @ts-expect-error(Deprecated)
       delete app.value.kernel.pid
     }
-
-    firstOpen = !!data
-
-    updateAppSettings(app.value)
   }
 
   const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
@@ -157,6 +189,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
   }
 
   const updateAppSettings = (settings: AppSettings) => {
+    loadLocaleMessages(settings.lang)
     i18n.global.locale.value = settings.lang
     themeMode.value =
       settings.theme === Theme.Auto
@@ -177,20 +210,16 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     (settings) => {
       updateAppSettings(settings)
 
-      if (!firstOpen) {
-        const lastModifiedConfig = stringify(settings)
-        if (latestUserConfig !== lastModifiedConfig) {
-          saveAppSettings(lastModifiedConfig).then(() => {
-            latestUserConfig = lastModifiedConfig
-          })
-        } else {
-          saveAppSettings.cancel()
-        }
+      const lastModifiedSettings = stringify(settings)
+      if (latestUserSettings !== undefined && latestUserSettings !== lastModifiedSettings) {
+        saveAppSettings(lastModifiedSettings).then(() => {
+          latestUserSettings = lastModifiedSettings
+        })
+      } else {
+        saveAppSettings.cancel()
       }
-
-      firstOpen = false
     },
-    { deep: true },
+    { deep: true, immediate: true },
   )
 
   window.addEventListener(
@@ -208,11 +237,16 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
   )
 
   watch(
-    [themeMode, () => app.value.color, () => app.value.lang, () => app.value.addPluginToMenu],
+    [
+      themeMode,
+      locales,
+      () => app.value.color,
+      () => app.value.lang,
+      () => app.value.addPluginToMenu,
+    ],
     updateTrayMenus,
   )
-
   watch(themeMode, setAppTheme, { immediate: true })
 
-  return { setupAppSettings, app, themeMode }
+  return { setupAppSettings, app, themeMode, locales, localesLoading, loadLocales }
 })