perf: optimize language loading and switching timing.

backend/storage/preferences.go

@@ -79,6 +79,26 @@ func (p *PreferencesStorage) GetPreferences() (ret map[string]any) {
 	return
 }
 
+func (p *PreferencesStorage) Value(keys ...string) any {
+	kv := p.getPreferences()
+	var ok bool
+	var a any
+	total := len(keys)
+	for i, key := range keys {
+		if a, ok = kv[key]; !ok {
+			return nil
+		}
+		if i == total-1 {
+			// last key, return value
+			return a
+		}
+		if kv, ok = a.(map[string]any); !ok {
+			return nil
+		}
+	}
+	return nil
+}
+
 func (p *PreferencesStorage) setPreferences(pf map[string]any, key string, value any) error {
 	keyPath := strings.Split(key, ".")
 	if len(keyPath) <= 0 {

frontend/src/App.vue

@@ -30,7 +30,6 @@ const initializing = ref(false)
 onMounted(async () => {
     try {
         initializing.value = true
-        i18n.locale.value = prefStore.currentLanguage
         await connectionStore.initConnections()
         if (prefStore.autoCheckUpdate) {
             prefStore.checkForUpdate()
@@ -40,10 +39,17 @@ onMounted(async () => {
     }
 })
 
+// watch theme and dynamically switch
 watch(
     () => prefStore.isDark,
     (isDark) => (isDark ? WindowSetDarkTheme() : WindowSetLightTheme()),
 )
+
+// watch language and dynamically switch
+watch(
+    () => prefStore.general.language,
+    (lang) => (i18n.locale.value = prefStore.currentLanguage),
+)
 </script>
 
 <template>

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -44,12 +44,6 @@ const onSavePreferences = async () => {
     }
 }
 
-// Watch language and dynamically switch
-watch(
-    () => prefStore.general.language,
-    (lang) => (i18n.locale.value = prefStore.currentLanguage),
-)
-
 const onClose = () => {
     // restore to old preferences
     prefStore.resetToLastPreferences()

frontend/src/components/sidebar/NavMenu.vue

@@ -32,7 +32,7 @@ const emit = defineEmits(['update:value'])
 
 const iconSize = computed(() => Math.floor(props.width * 0.4))
 const renderIcon = (icon) => {
-    return () => h(NIcon, null, { default: () => h(icon) })
+    return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 4 }) })
 }
 
 const connectionStore = useConnectionStore()
@@ -122,7 +122,7 @@ const openGithub = () => {
                 :render-label="renderContextLabel"
                 trigger="click"
                 @select="onSelectPreferenceMenu">
-                <icon-button :icon="Config" :size="iconSize" class="nav-menu-button" />
+                <icon-button :icon="Config" :size="iconSize" stroke-width="4" class="nav-menu-button" />
             </n-dropdown>
             <icon-button :icon="Github" :size="iconSize" class="nav-menu-button" @click="openGithub" />
         </div>

frontend/src/langs/en.json

@@ -1,5 +1,5 @@
 {
-  "lang_name": "English",
+  "name": "English",
   "system_lang": "Use System Language",
   "confirm": "Confirm",
   "cancel": "Cancel",

frontend/src/langs/zh-cn.json

@@ -1,5 +1,5 @@
 {
-  "lang_name": "简体中文",
+  "name": "简体中文",
   "system_lang": "使用系统语言",
   "confirm": "确认",
   "cancel": "取消",

frontend/src/stores/preferences.js

@@ -75,7 +75,7 @@ const usePreferencesStore = defineStore('preferences', {
         langOption() {
             const options = Object.entries(lang).map(([key, value]) => ({
                 value: key,
-                label: value['lang_name'],
+                label: value['name'],
             }))
             options.splice(0, 0, {
                 value: 'auto',
@@ -162,6 +162,7 @@ const usePreferencesStore = defineStore('preferences', {
             if (success) {
                 this.lastPref = clone(data)
                 this._applyPreferences(data)
+                i18nGlobal.locale.value = this.currentLanguage
             }
         },