基本国际化处理

src/components/LeftMenu.vue

@@ -1,3 +1,11 @@
+<script setup>
+defineProps({
+  collapseLeft: {
+    type: Boolean
+  }
+})
+</script>
+
 <template>
   <el-scrollbar>
     <el-menu
@@ -13,57 +21,46 @@
       <el-sub-menu index="1">
         <template #title>
           <el-icon><setting /></el-icon>
-          <span>系统管理</span>
+          <span>{{ $t('menu.label.systemManagement') }}</span>
         </template>
         <el-menu-item index="1-1">
           <el-icon><user /></el-icon>
-          <span>用户管理</span>
+          <span>{{ $t('menu.label.userManagement') }}</span>
         </el-menu-item>
         <el-menu-item index="1-2">
           <el-icon><Menu /></el-icon>
-          <span>角色管理</span>
+          <span>{{ $t('menu.label.roleManagement') }}</span>
         </el-menu-item>
         <el-menu-item index="1-3">
           <el-icon><lock /></el-icon>
-          <span>权限管理</span>
+          <span>{{ $t('menu.label.authorityManagement') }}</span>
         </el-menu-item>
         <el-menu-item index="1-4">
           <el-icon><Menu /></el-icon>
-          <span>菜单管理</span>
+          <span>{{ $t('menu.label.menuManagement') }}</span>
         </el-menu-item>
       </el-sub-menu>
       <el-sub-menu index="2">
         <template #title>
           <el-icon><WarningFilled /></el-icon>
-          <span>错误页面</span>
+          <span>{{ $t('menu.label.errorPage') }}</span>
         </template>
-        <el-menu-item index="1-1">
+        <el-menu-item index="2-1">
           <el-icon><Warning /></el-icon>
-          <span>客户端错误</span>
+          <span>{{ $t('menu.label.errorPage404') }}</span>
         </el-menu-item>
-        <el-menu-item index="1-2">
+        <el-menu-item index="2-2">
           <el-icon><Warning /></el-icon>
-          <span>没有权限页面</span>
+          <span>{{ $t('menu.label.errorPage403') }}</span>
         </el-menu-item>
-        <el-menu-item index="1-3">
+        <el-menu-item index="2-3">
           <el-icon><Warning /></el-icon>
-          <span>服务器错误</span>
+          <span>{{ $t('menu.label.errorPage500') }}</span>
         </el-menu-item>
       </el-sub-menu>
     </el-menu>
   </el-scrollbar>
 </template>
 
-<script>
-export default {
-  name: 'LeftMenu',
-  props: {
-    collapseLeft: {
-      type: Boolean
-    }
-  }
-}
-</script>
-
 <style scoped>
 </style>

src/components/TopNav.vue

@@ -1,3 +1,21 @@
+<script setup>
+
+import { ref } from 'vue'
+
+const isCollapseLeft = ref(false)
+
+const emit = defineEmits(['update:collapseLeft'])
+const updateCollapseLeft = () => {
+  isCollapseLeft.value = !isCollapseLeft.value
+  emit('update:collapseLeft', isCollapseLeft.value)
+}
+
+defineProps({
+  collapseLeft: {
+    type: Boolean
+  }
+})
+</script>
 <template>
   <el-menu
     mode="horizontal"
@@ -17,74 +35,52 @@
     <div class="flex-grow" />
     <el-sub-menu index="1">
       <template #title>
-        <el-icon v-if="isCollapseLeft">
-          <Expand />
-        </el-icon>
-        <span>语言</span>
+        <span>{{ $t('common.label.language') }}</span>
       </template>
-      <el-menu-item index="2-1">
-        中文
+      <el-menu-item
+        index="1-1"
+        @click="$changeLocale('zh-CN')"
+      >
+        {{ $t('common.label.langCn') }}
       </el-menu-item>
-      <el-menu-item index="2-2">
-        英文
+      <el-menu-item
+        index="1-2"
+        @click="$changeLocale('en-US')"
+      >
+        {{ $t('common.label.langEn') }}
       </el-menu-item>
     </el-sub-menu>
     <el-sub-menu index="2">
       <template #title>
-        主题
+        {{ $t('common.label.theme') }}
       </template>
       <el-menu-item index="2-1">
-        默认
+        {{ $t('common.label.themeDefault') }}
       </el-menu-item>
       <el-menu-item index="2-2">
-        黑色
+        {{ $t('common.label.themeDark') }}
       </el-menu-item>
       <el-menu-item index="2-3">
-        紫色
+        {{ $t('common.label.themePurple') }}
       </el-menu-item>
     </el-sub-menu>
     <el-sub-menu index="3">
       <template #title>
-        个人中心
+        {{ $t('common.label.personalCenter') }}
       </template>
-      <el-menu-item index="2-4-1">
-        个人资料
+      <el-menu-item index="3-1">
+        {{ $t('common.label.personalInfo') }}
       </el-menu-item>
-      <el-menu-item index="2-4-2">
-        关于
+      <el-menu-item index="3-2">
+        {{ $t('common.label.about') }}
       </el-menu-item>
-      <el-menu-item index="2-4-3">
-        退出
+      <el-menu-item index="3-3">
+        {{ $t('common.label.logout') }}
       </el-menu-item>
     </el-sub-menu>
   </el-menu>
 </template>
 
-<script>
-export default {
-  name: 'TopNav',
-  props: {
-    collapseLeft: {
-      type: Boolean
-    }
-  },
-  data () {
-    const isCollapseLeft = this.$props.collapseLeft
-    return {
-      isCollapseLeft
-    }
-  },
-  methods: {
-    updateCollapseLeft () {
-      this.isCollapseLeft = !this.isCollapseLeft
-      this.$emit('update:collapseLeft', this.isCollapseLeft)
-    }
-  }
-}
-</script>
-
 <style scoped>
-.flex-grow {
-  flex-grow: 1;
-}
+
 </style>