From d2bce3fcbe514d33eb930d33acf1f8db3fa22af9 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail>
Date: Tue, 18 Apr 2023 23:36:26 +0800
Subject: [PATCH] add i18n

---
 src/components/LangSelect/index.vue | 39 +++++++++++++++++++++++++++++
 src/components/Screenfull/index.vue | 11 --------
 src/lang/en.ts                      | 14 ++++++-----
 src/lang/index.ts                   |  6 ++---
 src/lang/zh-cn.ts                   | 14 ++++++-----
 src/layout/components/Navbar.vue    | 20 +++++++++------
 src/main.ts                         |  4 +++
 src/store/modules/app.ts            |  3 ++-
 8 files changed, 76 insertions(+), 35 deletions(-)
 create mode 100644 src/components/LangSelect/index.vue

diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
new file mode 100644
index 0000000..298e5dd
--- /dev/null
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-dropdown trigger="click" @command="handleLanguageChange">
+    <div class="lang-select--style">
+      <svg-icon icon-class="language" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item :disabled="appStore.language === 'zh-cn'" command="zh-cn"> 中文 </el-dropdown-item>
+        <el-dropdown-item :disabled="appStore.language === 'en'" command="en"> English </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useAppStore } from '@/store/modules/app';
+
+const appStore = useAppStore();
+const { locale } = useI18n();
+
+function handleLanguageChange(lang: string) {
+  locale.value = lang;
+  appStore.changeLanguage(lang);
+  if (lang == 'en') {
+    ElMessage.success('Switch Language Successful!');
+  } else {
+    ElMessage.success('切换语言成功！');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lang-select--style {
+  font-size: 18px;
+  line-height: 50px;
+}
+</style>
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 2089e30..ce0b373 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -7,14 +7,3 @@
 <script setup lang="ts">
 const { isFullscreen, toggle } = useFullscreen();
 </script>
-
-<style lang="scss" scoped>
-.screenfull-svg {
-  display: inline-block;
-  cursor: pointer;
-  fill: #5a5e66;
-  width: 20px;
-  height: 20px;
-  vertical-align: 10px;
-}
-</style>
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 64318e7..59df4ba 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -6,20 +6,22 @@ export default {
   },
   // 登录页面国际化
   login: {
-    title: 'vue3-element-admin',
     username: 'Username',
     password: 'Password',
     login: 'Login',
     code: 'Verification Code',
-    copyright: '',
-    icp: '',
-    thirdPartyLogin: 'third-party login'
+    copyright: ''
   },
   // 导航栏国际化
   navbar: {
+    full: 'Full Screen',
+    language: 'Language',
     dashboard: 'Dashboard',
-    logout: 'Logout',
     document: 'Document',
-    gitee: 'Gitee'
+    layoutSize: 'Layout Size',
+    selectTenant: 'Select Tenant',
+    layoutSetting: 'Layout Setting',
+    personalCenter: 'Personal Center',
+    logout: 'Logout'
   }
 };
diff --git a/src/lang/index.ts b/src/lang/index.ts
index 8ed51e9..8fdf19e 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -4,6 +4,7 @@ import { createI18n } from 'vue-i18n';
 // 本地语言包
 import enLocale from './en';
 import zhCnLocale from './zh-cn';
+import Cookies from 'js-cookie';
 
 const messages = {
   'zh-cn': {
@@ -16,12 +17,11 @@ const messages = {
 
 /**
  * 获取当前系统使用语言字符串
- *
  * @returns zh-cn|en ...
  */
 export const getLanguage = () => {
   // 本地缓存获取
-  let language = localStorage.getItem('language');
+  let language = Cookies.get('language');
   if (language) {
     return language;
   }
@@ -39,7 +39,7 @@ export const getLanguage = () => {
 const i18n = createI18n({
   legacy: false,
   locale: getLanguage(),
-  messages: messages
+  messages
 });
 
 export default i18n;
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 1c91526..d778f7d 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -6,19 +6,21 @@ export default {
   },
   // 登录页面国际化
   login: {
-    title: 'vue3-element-admin',
     username: '用户名',
     password: '密码',
     login: '登 录',
     code: '请输入验证码',
-    copyright: '',
-    icp: '',
-    thirdPartyLogin: '第三方登录'
+    copyright: ''
   },
   navbar: {
+    full: '全屏',
+    language: '语言',
     dashboard: '首页',
-    logout: '注销',
     document: '项目文档',
-    gitee: '码云'
+    layoutSize: '布局大小',
+    selectTenant: '选择租户',
+    layoutSetting: '布局设置',
+    personalCenter: '个人中心',
+    logout: '退出登录'
   }
 };
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 9e4f470..44250ca 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -11,7 +11,7 @@
           clearable
           filterable
           reserve-keyword
-          placeholder="请选择租户"
+          :placeholder="$t('navbar.selectTenant')"
           v-if="userId === 1 && tenantEnabled"
           @change="dynamicTenantEvent"
           @clear="dynamicClearEvent"
@@ -22,19 +22,23 @@
 
         <header-search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
+        <el-tooltip content="Github" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.document')" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip content="全屏" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
+          <lang-select id="lang-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template>
@@ -47,13 +51,13 @@
           <template #dropdown>
             <el-dropdown-menu>
               <router-link to="/user/profile" v-if="!dynamic">
-                <el-dropdown-item>个人中心</el-dropdown-item>
+                <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
               </router-link>
               <el-dropdown-item command="setLayout">
-                <span>布局设置</span>
+                <span>{{ $t('navbar.layoutSetting') }}</span>
               </el-dropdown-item>
               <el-dropdown-item divided command="logout">
-                <span>退出登录</span>
+                <span>{{ $t('navbar.logout') }}</span>
               </el-dropdown-item>
             </el-dropdown-menu>
           </template>
diff --git a/src/main.ts b/src/main.ts
index 32d2c45..0ad939a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -30,6 +30,9 @@ import { useDict } from '@/utils/dict';
 import { getConfigKey, updateConfigByKey } from '@/api/system/config';
 import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
 
+// 国际化
+import i18n from '@/lang/index';
+
 const app = createApp(App);
 // 全局方法挂载
 app.config.globalProperties.useDict = useDict;
@@ -46,6 +49,7 @@ app.config.globalProperties.animate = animate;
 app.use(ElementIcons);
 app.use(router);
 app.use(store);
+app.use(i18n);
 app.use(plugins);
 // 自定义指令
 directive(app);
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index fd47c82..1fb8337 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -14,7 +14,7 @@ export const useAppStore = defineStore('app', () => {
   // 语言
   const language = ref(Cookies.get('language'));
   const locale = computed(() => {
-    if (language?.value == 'en') {
+    if (language.value == 'en') {
       return en;
     } else {
       return zhCn;
@@ -53,6 +53,7 @@ export const useAppStore = defineStore('app', () => {
 
   const changeLanguage = (val: string): void => {
     language.value = val;
+    Cookies.set('language', val);
   };
 
   return {