add i18n

src/layout/components/menu/item.vue

@@ -7,7 +7,7 @@
       <el-icon v-if="route.meta?.icon">
         <component :is="`el-icon-${route.meta.icon}`"></component>
       </el-icon>
-      <span>{{route.meta?.title||route.name}}</span>
+      <span>{{ T(route.meta?.title) || T(route.name) }}</span>
     </template>
     <menu-item v-for="(_route,_index) in route.children"
                :route="_route"
@@ -18,12 +18,13 @@
     <el-icon v-if="parseRoute(route).meta?.icon">
       <component :is="`el-icon-${parseRoute(route).meta.icon}`"></component>
     </el-icon>
-    <span>{{parseRoute(route).meta?.title||parseRoute(route).name}}</span>
+    <span>{{ T(parseRoute(route).meta?.title) || T(parseRoute(route).name) }}</span>
   </el-menu-item>
 </template>
 
 <script>
   import { defineComponent } from 'vue'
+  import { T } from '@/utils/i18n'
 
   export default defineComponent({
     name: 'MenuItem',
@@ -43,6 +44,7 @@
       }
       return {
         parseRoute,
+        T,
       }
     },
   })

src/layout/components/setting/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="setting">
+    <div>
+      <el-button size="small" @click="changeLang" style="width: 100px">{{ T('ChangeLang') }}</el-button>
+    </div>
     <el-dropdown class="menu-item">
       <div class="title">
         <!--        <el-image class="avatar" :src="user.avatar"></el-image>-->
@@ -7,12 +10,13 @@
         <el-icon>
           <el-icon-arrow-down/>
         </el-icon>
+
       </div>
 
       <template #dropdown>
         <el-dropdown-menu>
-          <el-dropdown-item @click="showChangePwd">修改密码</el-dropdown-item>
-          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+          <el-dropdown-item @click="showChangePwd">{{T('ChangePassword')}}</el-dropdown-item>
+          <el-dropdown-item @click="logout">{{ T('Logout')}}</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
@@ -22,11 +26,14 @@
 
 <script setup>
   import { useUserStore } from '@/store/user'
+  import { useAppStore } from '@/store/app'
   import changePwdDialog from '@/components/changePwdDialog.vue'
   import { ref } from 'vue'
+  import { T } from '@/utils/i18n'
 
   const userStore = useUserStore()
   const user = userStore
+  const appStore = useAppStore()
 
   const logout = () => {
     userStore.logout()
@@ -37,6 +44,9 @@
   const showChangePwd = () => {
     changePwdVisible.value = true
   }
+  const changeLang = () => {
+    appStore.changeLang()
+  }
 </script>
 
 <style lang="scss" scoped>

src/layout/components/tags/index.vue

@@ -7,7 +7,7 @@
           @click="toTag(t)"
           :type="t.active?'primary':'info'"
           :effect="t.active?'dark':'plain'">
-    {{t.title}}
+    {{ T(t.title) }}
   </el-tag>
 </template>
 
@@ -15,6 +15,7 @@
   import { defineComponent, ref, onMounted, watch } from 'vue'
   import { useTagsStore } from '@/store/tags'
   import { useRoute, useRouter } from 'vue-router'
+  import { T } from '@/utils/i18n'
 
   export default defineComponent({
     name: 'Index',
@@ -64,6 +65,7 @@
         close,
         toLastTag,
         toTag,
+        T,
       }
     },
   })
@@ -71,10 +73,11 @@
 
 <style lang="scss" scoped>
 
-  .tag {
-    border-radius: 0;
-    cursor: pointer;
-    &.active {
-    }
+.tag {
+  border-radius: 0;
+  cursor: pointer;
+
+  &.active {
   }
+}
 </style>