add locale changer

web/i18n/messages/cn.json

@@ -1,4 +1,5 @@
 {
+  "lang": "中文",
   "app_name": "Vue FastAPI Admin",
   "header": {
     "label_profile": "个人信息",

web/i18n/messages/en.json

@@ -1,4 +1,5 @@
 {
+  "lang": "English",
   "app_name": "Vue FastAPI Admin",
   "header": {
     "label_profile": "Profile",

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

@@ -0,0 +1,25 @@
+<template>
+  <n-dropdown :options="options" @select="handleChangeLocale" v-model="locale">
+    <n-icon mr-20 size="18" style="cursor: pointer">
+      <icon-mdi:globe/>
+    </n-icon>
+  </n-dropdown>
+</template>
+
+<script setup>
+import {useI18n} from 'vue-i18n'
+
+const {availableLocales, locale,} = useI18n()
+
+const options = []
+availableLocales.forEach(locale => {
+  options.push({
+    label: locale,
+    key: locale
+  })
+})
+
+const handleChangeLocale = (value) => {
+  locale.value = value
+}
+</script>

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

@@ -4,6 +4,7 @@
     <BreadCrumb ml-15 hidden sm:block />
   </div>
   <div ml-auto flex items-center>
+    <Languages />
     <ThemeMode />
     <GithubSite />
     <FullScreen />
@@ -18,4 +19,5 @@ import FullScreen from './components/FullScreen.vue'
 import UserAvatar from './components/UserAvatar.vue'
 import GithubSite from './components/GithubSite.vue'
 import ThemeMode from './components/ThemeMode.vue'
+import Languages from './components/Languages.vue';
 </script>

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

@@ -11,6 +11,7 @@ export const useAppStore = defineStore('app', {
       /** keepAlive路由的key，重新赋值可重置keepAlive */
       aliveKeys: {},
       isDark,
+      locale: 'en'
     }
   },
   actions: {
@@ -45,5 +46,8 @@ export const useAppStore = defineStore('app', {
     toggleDark() {
       this.isDark = !this.isDark
     },
+    setLocale(locale) {
+      this.locale = locale
+    }
   },
 })