Fixi18n (#453)

* feat: console i18n can not select issue

* docs: update CHANGELOG.MD

CHANGELOG.MD

@@ -7,6 +7,7 @@
 ## 新功能
 
 - web端多主题支持 #450
+- Console端支持切换语言到英文:
 
 ## 国际化
 

console/src/layouts/Header.vue

@@ -2,6 +2,7 @@
 import Hamburger from './components/Hamburger.vue';
 import Avatar from './components/Avatar.vue';
 import Breadcrumb from './components/Breadcrumb.vue';
+import LanguageSelect from './components/LanguageSelect.vue';
 </script>
 
 <template>
@@ -10,6 +11,8 @@ import Breadcrumb from './components/Breadcrumb.vue';
 		<Breadcrumb />
 
 		<div class="navbar-right">
+			<LanguageSelect />
+			&nbsp;&nbsp;&nbsp;&nbsp;
 			<Avatar class="navbar-item" />
 		</div>
 	</div>

console/src/layouts/components/Avatar.vue

@@ -18,7 +18,7 @@ const layoutStore = useLayoutStore();
 const { t } = useI18n();
 const userStore = useUserStore();
 
-const avatarSrcUrl = 'https://ikaros.run/logo.png';
+const avatarSrcUrl = 'https://docs.ikaros.run/img/favicon.ico';
 
 const router = useRouter();
 const toUserProfile = () => {

console/src/layouts/components/LanguageSelect.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ElSelect, ElOption } from 'element-plus';
+import { ref } from 'vue';
+import { locales, changeI18nLocal } from '@/locales';
+
+const { locale } = useI18n();
+const selectedLanguage = ref(locale);
+
+const changeLanguage = () => {
+	changeI18nLocal(selectedLanguage.value);
+};
+</script>
+
+<template>
+	<el-select
+		v-model="selectedLanguage"
+		:style="{ width: '100px' }"
+		@change="changeLanguage"
+	>
+		<el-option
+			v-for="language in locales.filter((ele) => ele.name)"
+			:key="language.code"
+			:label="language.name"
+			:value="language.code"
+		></el-option>
+	</el-select>
+</template>
+
+<style lang="scss" scoped></style>

console/src/locales/index.ts

@@ -45,8 +45,11 @@ export function getBrowserLanguage(): string {
 	const language = messages[browserLanguage]
 		? browserLanguage
 		: browserLanguage.split('-')[0];
-	// return language in messages ? language : 'zh-CN';
-	return 'en';
+	return language in messages ? language : 'zh-CN';
+}
+
+export function changeI18nLocal(val) {
+	i18n.global.locale = val;
 }
 
 export function setupI18n(app: App) {