up i18n

src/layout/components/setting/index.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="setting">
     <div class="menu-item">
-      <el-button size="small" @click="changeLang" style="width: 100px">{{ T('ChangeLang') }}</el-button>
+      <el-dropdown>
+        <div class="title">
+          <i data-v-f414ea64="" class="el-icon el-tooltip__trigger" aria-label="请选择您的语言" id="el-id-1024-2" role="button" tabindex="0" aria-controls="el-id-1024-3" aria-expanded="false" aria-haspopup="navigation" style="font-size: 24px;"><svg data-v-f414ea64="" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg></i>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(v, k) in appStore.setting.langs" @click="changeLang(k)" :key="k">{{ v.name }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+
+      </el-dropdown>
     </div>
     <div class="menu-item">
         <el-switch
@@ -59,8 +69,8 @@
   const showChangePwd = () => {
     changePwdVisible.value = true
   }
-  const changeLang = () => {
-    appStore.changeLang()
+  const changeLang = (v) => {
+    appStore.changeLang(v)
   }
   const isDark = useDark();
   // const toggleDark = useToggle(isDark)
@@ -74,13 +84,18 @@
   justify-content: space-around;
   .menu-item {
     margin-left: 10px;
+    *{
+      outline: none;
+    }
   }
+
   .title {
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: space-around;
 
+
     .nickname {
       padding: 0 10px;
     }

src/store/app.js

@@ -2,8 +2,10 @@ import { defineStore, acceptHMRUpdate } from 'pinia'
 import logo from '@/assets/logo.png'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import en from 'element-plus/es/locale/lang/en'
+import ko from 'element-plus/es/locale/lang/ko'
 import { appConfig } from '@/api/rustdesk'
 
+const langs = { 'zh-CN': { name: '中文', value: zhCn }, 'en': { name: 'English', value: en }, 'ko': { name: '한국어', value: ko } }
 export const useAppStore = defineStore({
   id: 'App',
   state: () => ({
@@ -11,8 +13,9 @@ export const useAppStore = defineStore({
       title: 'Rustdesk-Api-Admin',
       sideIsCollapse: false,
       logo,
+      langs: langs,
       lang: localStorage.getItem('lang') || 'zh-CN',
-      locale: localStorage.getItem('lang') === 'en' ? en : zhCn,
+      locale: langs[(localStorage.getItem('lang') || 'zh-CN')].value,
       appConfig: {
         web_client: 1,
       },
@@ -24,12 +27,13 @@ export const useAppStore = defineStore({
       this.setting.sideIsCollapse = !this.setting.sideIsCollapse
     },
     setLang (lang) {
+      console.log('setLang', lang)
       this.setting.lang = lang
-      this.setting.locale = lang === 'zh-CN' ? zhCn : en
+      this.setting.locale = langs[lang].value
       localStorage.setItem('lang', lang)
     },
-    changeLang () {
-      this.setLang(this.setting.lang === 'zh-CN' ? 'en' : 'zh-CN')
+    changeLang (v) {
+      this.setLang(v)
     },
     getAppConfig () {
       console.log('getAppConfig')