From 5fc46f15b59949886d3a571a9f0e63ad91e83ec0 Mon Sep 17 00:00:00 2001
From: 0xJacky <me@jackyu.cn>
Date: Sat, 19 Feb 2022 10:58:59 +0800
Subject: [PATCH] add language selector

---
 .../components/SetLanguage/SetLanguage.vue    | 32 +++++++++++++++++++
 frontend/src/layouts/HeaderLayout.vue         | 10 +++++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/SetLanguage/SetLanguage.vue

diff --git a/frontend/src/components/SetLanguage/SetLanguage.vue b/frontend/src/components/SetLanguage/SetLanguage.vue
new file mode 100644
index 00000000..4b76ff82
--- /dev/null
+++ b/frontend/src/components/SetLanguage/SetLanguage.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <a-select v-model="current" size="small" style="width: 50px">
+            <a-select-option v-for="(language, key) in $language.available" :value="key" :key="key">
+                {{ language }}
+            </a-select-option>
+        </a-select>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SetLanguage',
+    data() {
+        return {
+            current: this.$language.current,
+        }
+    },
+    watch: {
+        current() {
+            this.$store.commit('set_language', this.current)
+            this.$nextTick(() => {
+                location.reload()
+            })
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/frontend/src/layouts/HeaderLayout.vue b/frontend/src/layouts/HeaderLayout.vue
index bf45fc54..c2d66ea3 100644
--- a/frontend/src/layouts/HeaderLayout.vue
+++ b/frontend/src/layouts/HeaderLayout.vue
@@ -4,6 +4,8 @@
             <a-icon type="menu-unfold" @click="$emit('clickUnFold')"/>
         </div>
         <div class="user-wrapper">
+            <set-language class="set_lang" />
+
             <a href="/">
                 <a-icon type="home"/>
             </a>
@@ -16,9 +18,10 @@
 </template>
 
 <script>
+import SetLanguage from '@/components/SetLanguage/SetLanguage'
 export default {
     name: 'HeaderComponent',
-    components: {},
+    components: {SetLanguage},
     methods: {
         logout() {
             this.$api.auth.logout().then(() => {
@@ -59,4 +62,9 @@ export default {
     position: fixed;
     right: 20px;
 }
+
+.set_lang {
+    display: inline;
+    margin-right: 25px;
+}
 </style>