feat: add a language switch button on the web page (#447)
This commit is contained in:
parent
811047ada1
commit
e10bc5988c
|
@ -4,6 +4,7 @@ import {
|
||||||
Menu as IconMenu,
|
Menu as IconMenu,
|
||||||
Location,
|
Location,
|
||||||
Share,
|
Share,
|
||||||
|
ArrowDown
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
import { API } from './views/net'
|
import { API } from './views/net'
|
||||||
|
@ -15,7 +16,7 @@ import SecretManager from './views/SecretManager.vue'
|
||||||
import WelcomePage from './views/WelcomePage.vue'
|
import WelcomePage from './views/WelcomePage.vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t, locale: i18nLocale } = useI18n()
|
||||||
|
|
||||||
import setAsDarkTheme from './theme'
|
import setAsDarkTheme from './theme'
|
||||||
|
|
||||||
|
@ -60,6 +61,26 @@ const handleSelect = (key: string) => {
|
||||||
panelName.value = key
|
panelName.value = key
|
||||||
window.localStorage.setItem('activeMenu', key)
|
window.localStorage.setItem('activeMenu', key)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const locale = ref(Cache.GetPreference().language)
|
||||||
|
i18nLocale.value = locale.value
|
||||||
|
|
||||||
|
watch(locale, (value) =>{
|
||||||
|
Cache.WatchLocale(value)
|
||||||
|
i18nLocale.value = locale.value
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleChangeLan = (command: string) => {
|
||||||
|
switch (command) {
|
||||||
|
case "chinese":
|
||||||
|
locale.value = "zh-CN"
|
||||||
|
break;
|
||||||
|
case "english":
|
||||||
|
locale.value = "en-US"
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -99,6 +120,20 @@ const handleSelect = (key: string) => {
|
||||||
</el-aside>
|
</el-aside>
|
||||||
|
|
||||||
<el-main style="padding-top: 5px; padding-bottom: 5px;">
|
<el-main style="padding-top: 5px; padding-bottom: 5px;">
|
||||||
|
<div style="position: absolute; top: 10px; right: 20px;">
|
||||||
|
<el-col style="display: flex; align-items: center;">
|
||||||
|
<el-tag style="font-size: 18px;">{{ t('language') }}</el-tag>
|
||||||
|
<el-dropdown trigger="click" @command="(command: string) => handleChangeLan(command)">
|
||||||
|
<el-icon><arrow-down /></el-icon>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="chinese">中文</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="english">English</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
<TestingPanel v-if="panelName === 'testing'" />
|
<TestingPanel v-if="panelName === 'testing'" />
|
||||||
<MockManager v-else-if="panelName === 'mock'" />
|
<MockManager v-else-if="panelName === 'mock'" />
|
||||||
<StoreManager v-else-if="panelName === 'store'" />
|
<StoreManager v-else-if="panelName === 'store'" />
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
|
"language": "English",
|
||||||
"button": {
|
"button": {
|
||||||
"import": "Import",
|
"import": "Import",
|
||||||
"export": "Export",
|
"export": "Export",
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
|
"language": "中文",
|
||||||
"button": {
|
"button": {
|
||||||
"import": "导入",
|
"import": "导入",
|
||||||
"export": "导出",
|
"export": "导出",
|
||||||
|
|
|
@ -72,8 +72,10 @@ export function GetPreference() {
|
||||||
if (val && val !== '') {
|
if (val && val !== '') {
|
||||||
return JSON.parse(val)
|
return JSON.parse(val)
|
||||||
} else {
|
} else {
|
||||||
|
const navLanguage = navigator.language != null ? navigator.language : 'zh-CN';
|
||||||
return {
|
return {
|
||||||
darkTheme: false,
|
darkTheme: false,
|
||||||
|
language: navLanguage,
|
||||||
requestActiveTab: "body",
|
requestActiveTab: "body",
|
||||||
responseActiveTab: "body"
|
responseActiveTab: "body"
|
||||||
} as Preference
|
} as Preference
|
||||||
|
@ -135,6 +137,12 @@ function SetStores(stores: Stores | Store[]) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function WatchLocale(locale: string) {
|
||||||
|
const preference = GetPreference()
|
||||||
|
preference.language = locale
|
||||||
|
SetPreference(preference)
|
||||||
|
}
|
||||||
|
|
||||||
export const Cache = {
|
export const Cache = {
|
||||||
GetTestCaseResponseCache,
|
GetTestCaseResponseCache,
|
||||||
SetTestCaseResponseCache,
|
SetTestCaseResponseCache,
|
||||||
|
@ -144,5 +152,6 @@ export const Cache = {
|
||||||
WatchRequestActiveTab,
|
WatchRequestActiveTab,
|
||||||
WatchResponseActiveTab,
|
WatchResponseActiveTab,
|
||||||
WatchDarkTheme,
|
WatchDarkTheme,
|
||||||
|
WatchLocale,
|
||||||
GetCurrentStore, SetStores, SetCurrentStore
|
GetCurrentStore, SetStores, SetCurrentStore
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue