refactor: export global i18n config

frontend/src/App.vue

@@ -11,7 +11,7 @@ import AddFieldsDialog from './components/dialogs/AddFieldsDialog.vue'
 import AppContent from './AppContent.vue'
 import GroupDialog from './components/dialogs/GroupDialog.vue'
 import DeleteKeyDialog from './components/dialogs/DeleteKeyDialog.vue'
-import { computed, onBeforeMount, ref } from 'vue'
+import { computed, onBeforeMount, onMounted, ref } from 'vue'
 import usePreferencesStore from './stores/preferences.js'
 import useConnectionStore from './stores/connections.js'
 import { useI18n } from 'vue-i18n'

frontend/src/consts/tree_context_menu.js

@@ -1,6 +1,5 @@
 import { ConnectionType } from './connection_type.js'
 
-const i18n = useI18n()
 export const contextMenuKey = {
     [ConnectionType.Server]: {
         key: '',

frontend/src/main.js

@@ -1,27 +1,16 @@
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
 import App from './App.vue'
-import { lang } from './langs'
 import './styles/style.scss'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import { i18n } from '@/utils/i18n.js'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
 const app = createApp(App)
-app.use(
+app.use(i18n)
-    createI18n({
-        locale: 'en',
-        fallbackLocale: 'en',
-        globalInjection: true,
-        legacy: false,
-        messages: {
-            ...lang,
-        },
-    }),
-)
 app.use(createPinia())
 app.mount('#app')

frontend/src/stores/preferences.js

@@ -7,7 +7,10 @@ import {
     RestorePreferences,
     SetPreferences,
 } from 'wailsjs/go/services/preferencesService.js'
-import { useI18n } from 'vue-i18n'
+import { useMessage } from '@/utils/message.js'
+import { useConfirmDialog } from '@/utils/confirm_dialog.js'
+import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
+import { i18nGlobal } from '@/utils/i18n.js'
 
 const usePreferencesStore = defineStore('preferences', {
     /**
@@ -49,19 +52,18 @@ const usePreferencesStore = defineStore('preferences', {
         },
 
         themeOption() {
-            const i18n = useI18n()
             return [
                 {
                     value: 'light',
-                    label: i18n.t('theme_light'),
+                    label: i18nGlobal.t('theme_light'),
                 },
                 {
                     value: 'dark',
-                    label: i18n.t('theme_dark'),
+                    label: i18nGlobal.t('theme_dark'),
                 },
                 {
                     value: 'auto',
-                    label: i18n.t('theme_auto'),
+                    label: i18nGlobal.t('theme_auto'),
                 },
             ]
         },
@@ -71,14 +73,13 @@ const usePreferencesStore = defineStore('preferences', {
          * @returns {{label: string, value: string}[]}
          */
         langOption() {
-            const i18n = useI18n()
             const options = Object.entries(lang).map(([key, value]) => ({
                 value: key,
                 label: value['lang_name'],
             }))
             options.splice(0, 0, {
                 value: 'auto',
-                label: i18n.t('system_lang'),
+                label: i18nGlobal.t('system_lang'),
             })
             return options
         },
@@ -88,7 +89,6 @@ const usePreferencesStore = defineStore('preferences', {
          * @returns {{path: string, label: string, value: string}[]}
          */
         fontOption() {
-            const i18n = useI18n()
             const option = map(this.fontList, (font) => ({
                 value: font.name,
                 label: font.name,
@@ -96,7 +96,7 @@ const usePreferencesStore = defineStore('preferences', {
             }))
             option.splice(0, 0, {
                 value: '',
-                label: i18n.t('default'),
+                label: i18nGlobal.t('default'),
                 path: '',
             })
             return option

frontend/src/utils/confirm_dialog.js

@@ -1,24 +1,19 @@
 import { createDiscreteApi } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import { i18nGlobal } from '@/utils/i18n.js'
-import { onMounted } from 'vue'
 
 const { dialog } = createDiscreteApi(['dialog'])
 
 export function useConfirmDialog() {
-    let i18n
-    onMounted(() => {
-        i18n = useI18n()
-    })
     return {
         warning: (content, onConfirm) => {
             dialog.warning({
-                title: i18n.t('warning'),
+                title: i18nGlobal.t('warning'),
                 content: content,
                 closable: false,
                 autoFocus: false,
                 transformOrigin: 'center',
-                positiveText: i18n.t('confirm'),
+                positiveText: i18nGlobal.t('confirm'),
-                negativeText: i18n.t('cancel'),
+                negativeText: i18nGlobal.t('cancel'),
                 onPositiveClick: () => {
                     onConfirm && onConfirm()
                 },

frontend/src/utils/i18n.js

@@ -0,0 +1,14 @@
+import { createI18n } from 'vue-i18n'
+import { lang } from '@/langs/index.js'
+
+export const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    globalInjection: true,
+    legacy: false,
+    messages: {
+        ...lang,
+    },
+})
+
+export const i18nGlobal = i18n.global

frontend/src/utils/message.js

@@ -5,19 +5,19 @@ const { message } = createDiscreteApi(['message'])
 export function useMessage() {
     return {
         error: (content, option = null) => {
-            message.error(content, option)
+            return message.error(content, option)
         },
         info: (content, option = null) => {
-            message.info(content, option)
+            return message.info(content, option)
         },
         loading: (content, option = null) => {
-            message.loading(content, option)
+            return message.loading(content, option)
         },
         success: (content, option = null) => {
-            message.success(content, option)
+            return message.success(content, option)
         },
         warning: (content, option = null) => {
-            message.warning(content, option)
+            return message.warning(content, option)
         },
     }
 }