feat: add a language switch button on the web page (#447)

console/atest-ui/src/App.vue

@@ -4,6 +4,7 @@ import {
   Menu as IconMenu,
   Location,
   Share,
+  ArrowDown
 } from '@element-plus/icons-vue'
 import { ref, watch } from 'vue'
 import { API } from './views/net'
@@ -15,7 +16,7 @@ import SecretManager from './views/SecretManager.vue'
 import WelcomePage from './views/WelcomePage.vue'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { t, locale: i18nLocale } = useI18n()
 
 import setAsDarkTheme from './theme'
 
@@ -60,6 +61,26 @@ const handleSelect = (key: string) => {
   panelName.value = 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>
 
 <template>
@@ -99,6 +120,20 @@ const handleSelect = (key: string) => {
     </el-aside>
 
     <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'" />
       <MockManager v-else-if="panelName === 'mock'" />
       <StoreManager v-else-if="panelName === 'store'" />

console/atest-ui/src/locales/en.json

@@ -1,4 +1,5 @@
 {
+    "language": "English",
     "button": {
         "import": "Import",
         "export": "Export",

console/atest-ui/src/locales/zh.json

@@ -1,4 +1,5 @@
 {
+    "language": "中文",
     "button": {
         "import": "导入",
         "export": "导出",

console/atest-ui/src/views/cache.ts

@@ -72,8 +72,10 @@ export function GetPreference() {
     if (val && val !== '') {
         return JSON.parse(val)
     } else {
+        const navLanguage = navigator.language != null ? navigator.language : 'zh-CN';
         return {
             darkTheme: false,
+            language: navLanguage,
             requestActiveTab: "body",
             responseActiveTab: "body"
         } as Preference
@@ -135,6 +137,12 @@ function SetStores(stores: Stores | Store[]) {
     return
 }
 
+function WatchLocale(locale: string) {
+    const preference = GetPreference()
+    preference.language = locale
+    SetPreference(preference)
+}
+
 export const Cache = {
     GetTestCaseResponseCache,
     SetTestCaseResponseCache,
@@ -144,5 +152,6 @@ export const Cache = {
     WatchRequestActiveTab,
     WatchResponseActiveTab,
     WatchDarkTheme,
+    WatchLocale,
     GetCurrentStore, SetStores, SetCurrentStore
 }