update language select dropdown

web/i18n/index.js

@@ -1,12 +1,14 @@
 import { createI18n } from 'vue-i18n'
+import { sStorage } from '@/utils'
 
 import messages from './messages'
 
+const currentLocale = sStorage.get('locale')
 
 const i18n = createI18n({
   legacy: false,
   globalInjection: true,
-  locale: 'en',
+  locale: currentLocale || 'en',
   fallbackLocale: 'en',
   messages: messages
 })

web/src/layout/components/header/components/Languages.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-dropdown :options="options" @select="handleChangeLocale" v-model="locale">
+  <n-dropdown :options="options" @select="handleChangeLocale">
     <n-icon mr-20 size="18" style="cursor: pointer">
       <icon-mdi:globe/>
     </n-icon>
@@ -8,18 +8,23 @@
 
 <script setup>
 import {useI18n} from 'vue-i18n'
+import {useAppStore} from "@/store";
 
-const {availableLocales, locale,} = useI18n()
+const store = useAppStore()
+const { availableLocales, t } = useI18n()
 
-const options = []
-availableLocales.forEach(locale => {
-  options.push({
-    label: locale,
-    key: locale
+const options = computed(() => {
+  let select = []
+  availableLocales.forEach(locale => {
+    select.push({
+      label: t('lang', 1, {'locale': locale}),
+      key: locale
+    })
   })
+  return select
 })
 
 const handleChangeLocale = (value) => {
-  locale.value = value
+  store.setLocale(value)
 }
 </script>

web/src/store/modules/app/index.js

@@ -1,5 +1,10 @@
 import { defineStore } from 'pinia'
 import { useDark } from '@vueuse/core'
+import { sStorage } from '@/utils'
+import i18n from '~/i18n'
+
+const currentLocale = sStorage.get('locale')
+const {locale} = i18n.global
 
 const isDark = useDark()
 export const useAppStore = defineStore('app', {
@@ -11,7 +16,7 @@ export const useAppStore = defineStore('app', {
       /** keepAlive路由的key，重新赋值可重置keepAlive */
       aliveKeys: {},
       isDark,
-      locale: 'en'
+      locale: currentLocale || 'en'
     }
   },
   actions: {
@@ -46,8 +51,10 @@ export const useAppStore = defineStore('app', {
     toggleDark() {
       this.isDark = !this.isDark
     },
-    setLocale(locale) {
-      this.locale = locale
+    setLocale(newLocale) {
+      this.locale = newLocale
+      locale.value = newLocale
+      sStorage.set('locale', newLocale)
     }
   },
 })