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>

src/layout/index.vue

@@ -1,85 +1,73 @@
 <template>
-  <el-container>
-    <el-aside :width="leftWidth" class="app-left">
-      <g-aside></g-aside>
-    </el-aside>
-    <el-container class="app-container ">
-      <el-header class="app-header">
-        <g-header></g-header>
-      </el-header>
-      <div class="header-tags">
-        <tags></tags>
-      </div>
+  <el-config-provider :locale="appStore.setting.locale">
+    <el-container>
+      <el-aside :width="leftWidth" class="app-left">
+        <g-aside></g-aside>
+      </el-aside>
+      <el-container class="app-container ">
+        <el-header class="app-header">
+          <g-header></g-header>
+        </el-header>
+        <div class="header-tags">
+          <tags></tags>
+        </div>
 
-      <el-main class="app-main">
-        <router-view v-slot="{ Component }">
-          <transition mode="out-in" name="el-fade-in-linear">
-            <keep-alive :include="[...cachedTags]">
-              <component :is="Component"/>
-            </keep-alive>
-          </transition>
-        </router-view>
-      </el-main>
+        <el-main class="app-main">
+          <router-view v-slot="{ Component }">
+            <transition mode="out-in" name="el-fade-in-linear">
+              <keep-alive :include="[...cachedTags]">
+                <component :is="Component"/>
+              </keep-alive>
+            </transition>
+          </router-view>
+        </el-main>
+      </el-container>
     </el-container>
-  </el-container>
+  </el-config-provider>
 </template>
 
-<script>
+<script setup>
   import { useUserStore } from '@/store/user'
-  import { useRouteStore } from '@/store/router'
   import { useAppStore } from '@/store/app'
   import { useTagsStore } from '@/store/tags'
-  import LayerHeader from '@/layout/components/header.vue'
-  import { defineComponent, ref, onMounted, watch, reactive, computed, toRef } from 'vue'
+  import { ref, computed } from 'vue'
   import Tags from '@/layout/components/tags/index.vue'
   import GAside from '@/layout/components/aside.vue'
   import GHeader from '@/layout/components/header.vue'
 
-  export default defineComponent({
-    name: 'Layout',
-    components: { LayerHeader, Tags, GAside, GHeader },
-    setup (props) {
-      const userStore = useUserStore()
-      const appStore = useAppStore()
-      const tagStore = useTagsStore()
+  const appStore = useAppStore()
+  const tagStore = useTagsStore()
 
-      const leftWidth = computed(() => appStore.setting.sideIsCollapse ? '64px' : '210px')
+  const leftWidth = computed(() => appStore.setting.sideIsCollapse ? '64px' : '210px')
 
-      const cachedTags = ref([])
+  const cachedTags = ref([])
 
-      cachedTags.value = tagStore.cached
-
-      return {
-        cachedTags,
-        leftWidth,
-      }
-    },
-  })
+  cachedTags.value = tagStore.cached
 </script>
 
 <style lang="scss" scoped>
-  .app-header {
-    background-color: #3f454b;
-    color: var(--basicWhite);
-    display: flex;
-    height: 50px;
-  }
+.app-header {
+  background-color: #3f454b;
+  color: var(--basicWhite);
+  display: flex;
+  height: 50px;
+}
 
-  .header-tags {
-    height: auto;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    padding: 0;
-  }
+.header-tags {
+  height: auto;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  padding: 0;
+}
 
-  .app-left {
-    height: 100%;
-    transition: width 0.5s;
-  }
+.app-left {
+  height: 100%;
+  transition: width 0.5s;
+}
 
-  .app-container {
-    min-height: 100vh;
-  }
+.app-container {
+  min-height: 100vh;
+}
 </style>