From 2376e9bbc8a615f4d4d362ef8d9c3d52cb8a5198 Mon Sep 17 00:00:00 2001
From: QuangNN <nquang17@gmail.com>
Date: Tue, 31 Oct 2023 00:47:29 +0700
Subject: [PATCH] add locale changer

---
 web/i18n/messages/cn.json                     |  1 +
 web/i18n/messages/en.json                     |  1 +
 .../header/components/Languages.vue           | 25 +++++++++++++++++++
 web/src/layout/components/header/index.vue    |  2 ++
 web/src/store/modules/app/index.js            |  4 +++
 5 files changed, 33 insertions(+)
 create mode 100644 web/src/layout/components/header/components/Languages.vue

diff --git a/web/i18n/messages/cn.json b/web/i18n/messages/cn.json
index 4571ef1..a749450 100644
--- a/web/i18n/messages/cn.json
+++ b/web/i18n/messages/cn.json
@@ -1,4 +1,5 @@
 {
+  "lang": "中文",
   "app_name": "Vue FastAPI Admin",
   "header": {
     "label_profile": "个人信息",
diff --git a/web/i18n/messages/en.json b/web/i18n/messages/en.json
index 1f1783f..a6b5a87 100644
--- a/web/i18n/messages/en.json
+++ b/web/i18n/messages/en.json
@@ -1,4 +1,5 @@
 {
+  "lang": "English",
   "app_name": "Vue FastAPI Admin",
   "header": {
     "label_profile": "Profile",
diff --git a/web/src/layout/components/header/components/Languages.vue b/web/src/layout/components/header/components/Languages.vue
new file mode 100644
index 0000000..d9414b3
--- /dev/null
+++ b/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>
diff --git a/web/src/layout/components/header/index.vue b/web/src/layout/components/header/index.vue
index 0c0cec8..85ae328 100644
--- a/web/src/layout/components/header/index.vue
+++ b/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>
diff --git a/web/src/store/modules/app/index.js b/web/src/store/modules/app/index.js
index dfdfd8e..909474b 100644
--- a/web/src/store/modules/app/index.js
+++ b/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
+    }
   },
 })