Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n

# Conflicts:
#	src/routers/modules/other.ts

package-lock.json

@@ -40,6 +40,7 @@
         "vue-cropper": "^1.0.3",
         "vue-cropperjs": "^5.0.0",
         "vue-fuse": "^4.1.1",
+        "vue-i18n": "^9.2.2",
         "vue-mugen-scroll": "^0.2.6",
         "vue-qr": "^4.0.6",
         "vue-router": "^4.1.6",
@@ -646,6 +647,71 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://r2.cnpmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://r.cnpmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
@@ -3125,9 +3191,9 @@
       "integrity": "sha512-bMX/nPADfY8Mgs70kG+SGJ4vo7GCOsQaFVhUHG738gzRG6OrKCp2ZbV63LE5jsgEh8tDqxvXvLeslel5HF6lrA=="
     },
     "node_modules/element-plus": {
-      "version": "2.2.30",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.30.tgz",
-      "integrity": "sha512-HYSnmf2VMGa0gmw03evxevodPy3WimbAd4sfenOAhNs7Wl8IdT+YJjQyGAQjgEjRvhmujN4O/CZqhuEffRyOZg==",
+      "version": "2.2.28",
+      "resolved": "https://r.cnpmjs.org/element-plus/-/element-plus-2.2.28.tgz",
+      "integrity": "sha512-BsxF7iEaBydmRfw1Tt++EO9jRBjbtJr7ZRIrnEwz4J3Cwa1IzHCNCcx3ZwcYTlJq9CYFxv94JnbNr1EbkTou3A==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.0.6",
@@ -9136,6 +9202,23 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-mugen-scroll": {
       "version": "0.2.6",
       "resolved": "https://registry.npmmirror.com/vue-mugen-scroll/-/vue-mugen-scroll-0.2.6.tgz",
@@ -9961,6 +10044,55 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "requires": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "requires": {
+        "@intlify/shared": "9.2.2"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "requires": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://r2.cnpmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      }
+    },
     "@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://r.cnpmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
@@ -11941,9 +12073,9 @@
       "integrity": "sha512-bMX/nPADfY8Mgs70kG+SGJ4vo7GCOsQaFVhUHG738gzRG6OrKCp2ZbV63LE5jsgEh8tDqxvXvLeslel5HF6lrA=="
     },
     "element-plus": {
-      "version": "2.2.30",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.30.tgz",
-      "integrity": "sha512-HYSnmf2VMGa0gmw03evxevodPy3WimbAd4sfenOAhNs7Wl8IdT+YJjQyGAQjgEjRvhmujN4O/CZqhuEffRyOZg==",
+      "version": "2.2.28",
+      "resolved": "https://r.cnpmjs.org/element-plus/-/element-plus-2.2.28.tgz",
+      "integrity": "sha512-BsxF7iEaBydmRfw1Tt++EO9jRBjbtJr7ZRIrnEwz4J3Cwa1IzHCNCcx3ZwcYTlJq9CYFxv94JnbNr1EbkTou3A==",
       "requires": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.0.6",
@@ -16616,6 +16748,17 @@
         "vue-demi": "^0.11.4"
       }
     },
+    "vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://r.cnpmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      }
+    },
     "vue-mugen-scroll": {
       "version": "0.2.6",
       "resolved": "https://registry.npmmirror.com/vue-mugen-scroll/-/vue-mugen-scroll-0.2.6.tgz",

package.json

@@ -47,6 +47,7 @@
     "vue-cropper": "^1.0.3",
     "vue-cropperjs": "^5.0.0",
     "vue-fuse": "^4.1.1",
+    "vue-i18n": "^9.2.2",
     "vue-mugen-scroll": "^0.2.6",
     "vue-qr": "^4.0.6",
     "vue-router": "^4.1.6",

src/App.vue

@@ -30,8 +30,10 @@
   }
   .el-dropdown:focus {
     border: none;
+    outline: none!important;
   }
   .svg-icon:focus {
-    border: none;
+    border: none!important;
+    outline: none!important;
   }
 </style>

src/api/request.ts

@@ -6,6 +6,7 @@ const service = axios.create({
     // 默认请求地址，根据环境的不同可在.env 文件中进行修改
     baseURL: import.meta.env.VUE_APP_BASE_API,
     // 设置接口访问超时时间
+
     timeout: 3000000, // request timeout，
     // 跨域时候允许携带凭证
     withCredentials: true

src/icons/svg/language.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.742 36.8c2.398 7.2 5.595 12.8 11.19 18.4 4.795-4.8 7.992-11.2 10.39-18.4h-21.58zm-52.748 40h20.78l-10.39-28-10.39 28z"/><path d="M111.916 0H16.009C7.218 0 .025 7.2.025 16v96c0 8.8 7.193 16 15.984 16h95.907c8.791 0 15.984-7.2 15.984-16V16c0-8.8-6.394-16-15.984-16zM72.754 103.2c-1.598 1.6-3.197 1.6-4.795 1.6-.8 0-2.398 0-3.197-.8-.8-.8-1.599 0-1.599-.8s-.799-1.6-1.598-3.2c-.8-1.6-.8-2.4-1.599-4l-3.196-8.8H28.797L25.6 96c-1.598 3.2-2.398 5.6-3.197 7.2-.8 1.6-2.398 1.6-4.795 1.6-1.599 0-3.197-.8-4.796-1.6-1.598-1.6-2.397-2.4-2.397-4 0-.8 0-1.6.799-3.2.8-1.6.8-2.4 1.598-4l17.583-44.8c.8-1.6.8-3.2 1.599-4.8.799-1.6 1.598-3.2 2.397-4 .8-.8 1.599-2.4 3.197-3.2 1.599-.8 3.197-.8 4.796-.8 1.598 0 3.196 0 4.795.8 1.598.8 2.398 1.6 3.197 3.2.799.8 1.598 2.4 2.397 4 .8 1.6 1.599 3.2 2.398 5.6l17.583 44c1.598 3.2 2.398 5.6 2.398 7.2-.8.8-1.599 2.4-2.398 4zM116.711 72c-8.791-3.2-15.185-7.2-20.78-12-5.594 5.6-12.787 9.6-21.579 12l-2.397-4c8.791-2.4 15.984-5.6 21.579-11.2C87.939 51.2 83.144 44 81.545 36h-7.992v-3.2h21.58c-1.6-2.4-3.198-5.6-4.796-8l2.397-.8c1.599 2.4 3.997 5.6 5.595 8.8h19.98v4h-7.992c-2.397 8-6.393 15.2-11.189 20 5.595 4.8 11.988 8.8 20.78 11.2l-3.197 4z"/></svg>

src/language/index.ts

@@ -0,0 +1,15 @@
+import { createI18n } from "vue-i18n";
+import zh from "./modules/zh";
+import en from "./modules/en";
+
+const i18n = createI18n({
+	legacy: false, // 如果要支持 compositionAPI，此项必须设置为 false
+	locale: "zh", // 设置语言类型 通过切换locale的值来实现语言切换
+	globalInjection: true, // 全局注册$t方法
+	messages: {
+		zh,
+		en
+	}
+});
+
+export default i18n;

src/language/modules/en.ts

@@ -0,0 +1,53 @@
+export default {
+	home: {
+		nickName: "Nick name",
+		job: "Job",
+		company: "Company",
+		age: "Age",
+		sex: "Sex",
+		currentAddress: "Current address",
+		mail: "Mail",
+		WeChat: "WeChat",
+		technologyStack: "Technology stack",
+		PersonalityLabel: "Personality label",
+		favoriteSentence: "Favorite sentence",
+		happy: "Being happy is the most important",
+		male:'Man',
+		web:'Web',
+		Wolf:'Wolf',
+		trouble: "Afraid of trouble",
+		fitness: "Fitness",
+		sleep: "Sleep",
+		Marvel: "Marvel",
+		yearn: "Yearn",
+		impression:'If it helps you, please give me a star! Your encouragement is the motivation for me to continue to optimize~~'
+	},
+	route:{
+		home:'Home',
+		visualizationChart:'Visualization Chart',
+		superTable:'Super Table',
+		form:'Super Form',
+		dataScreen:'Data Screen',
+		chatBox:'Chat Box',
+		commonComponents:'Components',
+		functionPage:'Function Page',
+		nested: 'Nested Routes',
+		excel: 'Excel',
+		zip: 'Zip',
+		errorPages: 'Error Pages',
+		clipboardIndex: 'Clipboard',
+		systemManagement: 'System Management',
+		externalLink: 'External Link',
+	},
+	tagsView: {
+		refresh:'Refresh Current',
+		more: "More",
+		closeCurrent: "Close current",
+		closeOther: "Close other",
+		closeAll: "Close All"
+	},
+	header: {
+		changePassword: "Change Password",
+		logout: "Logout"
+	}
+};

src/language/modules/zh.ts

@@ -0,0 +1,53 @@
+export default {
+	home: {
+		nickName: "昵称",
+		job: "职业",
+		company: "公司",
+		age: "年龄",
+		sex: "性别",
+		currentAddress: "现住址",
+		mail: "邮箱",
+		WeChat: "微信",
+		technologyStack: "技术栈",
+		PersonalityLabel: "个性标签",
+		favoriteSentence: "最喜欢的一句话",
+		happy: "开心最重要",
+		male:'男',
+		web:'前端',
+		Wolf:'小狼',
+		trouble: "怕麻烦",
+		fitness: "健身运动",
+		sleep: "睡觉",
+		Marvel: "漫威",
+		yearn: "向往",
+		impression: "如果对你有帮助的话，可以麻烦点一颗 star、fork、watch! 你的鼓励是我继续优化的动力~~",
+	},
+	route:{
+		home:'首页',
+		visualizationChart:'可视化图表',
+		superTable:'超级表格',
+		form:'超级表单',
+		dataScreen:'可视化大屏',
+		chatBox:'聊天框',
+		commonComponents:'常用组件',
+		functionPage:'功能页面',
+		nested: '路由嵌套',
+		excel: 'Excel&Zip',
+		zip: 'Zip',
+		errorPages: '错误页面',
+		clipboardIndex: '剪贴板',
+		systemManagement: '系统管理',
+		externalLink: '外部链接',
+	},
+	tagsView: {
+		refresh:'刷新当页',
+		more: "更多",
+		closeCurrent: "关闭当前",
+		closeOther: "关闭其它",
+		closeAll: "关闭所有"
+	},
+	header: {
+		changePassword: "修改密码",
+		logout: "退出登录"
+	}
+};

src/layout/components/Header/ToolRight.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="m-tool-right">
+    <Language class="item-children"/>
     <GlobalComSize class="item-children"/>
     <HeaderSearch class="item-children"/>
     <Remind class="item-children"/>
@@ -10,6 +11,7 @@
 </template>
 
 <script lang="ts" setup>
+import Language from './components/Language.vue'
 import GlobalComSize from './components/globalComSize.vue'
 import HeaderSearch from './components/HeaderSearch.vue'
 import Remind from './components/Remind.vue'

src/layout/components/Header/components/Language.vue

@@ -0,0 +1,59 @@
+
+<template>
+  <el-dropdown trigger="hover" @command="setLanguage">
+    <svg-icon class-name="size-icon header-icon" icon-class="language" style="font-size: 22px;cursor: pointer"/>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-menu>
+          <el-dropdown-item :disabled="language && language === 'zh'" command="zh">简体中文</el-dropdown-item>
+          <el-dropdown-item :disabled="language === 'en'" command="en">English</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script lang="ts" setup>
+import {useSettingStore} from "@/store/modules/setting"
+import { useI18n } from "vue-i18n";
+import {computed, reactive} from "vue";
+
+const SettingStore = useSettingStore()
+const i18n = useI18n();
+const language = computed(():string=>SettingStore.themeConfig.language)
+
+const setLanguage = (val)=>{
+  i18n.locale.value = val;
+  SettingStore.setThemeConfig({key:'language', val})
+}
+
+</script>
+
+<style lang="scss" scoped>
+.m-setting {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  .item-info-pop {
+    display: flex;
+    align-items: center;
+  }
+  .bell{
+    color: black;
+  }
+  .item-child {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+  }
+}
+.transverseMenu {
+  .size-icon {
+    color: white;
+  }
+}
+
+
+</style>

src/layout/components/SubMenu/MenuItem.vue

@@ -6,13 +6,14 @@
       <component :is="subItem?.meta?.icon"></component>
     </el-icon>
     <template #title>
-      <span>{{ subItem?.meta?.title }}</span>
+      <span>{{ generateTitle(subItem) }}</span>
     </template>
   </el-menu-item>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { generateTitle } from '@/utils/i18n'
 import { useRouter } from "vue-router";
 import { isExternal } from "@/utils/validate";
 

src/layout/components/SubMenu/SubMenu.vue

@@ -11,7 +11,7 @@
           <el-icon>
             <component :is="subItem?.meta?.icon"></component>
           </el-icon>
-          <span>{{ subItem?.meta?.title }}</span>
+          <span>{{ generateTitle(subItem) }}</span>
         </template>
         <SubMenu :menuList="subItem.children" />
       </el-sub-menu>
@@ -22,6 +22,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import MenuItem from './MenuItem.vue'
+import { generateTitle } from '@/utils/i18n'
 
 let props = defineProps({
   menuList:{

src/layout/components/TagsView/components/MoreButton.vue

@@ -1,15 +1,15 @@
 <template>
   <el-dropdown trigger="hover">
     <el-button size="small" type="primary">
-      <span>更多</span>
+      <span>{{ $t("tagsView.more") }}</span>
       <el-icon class="el-icon--right"><arrow-down /></el-icon>
     </el-button>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item @click="refresh"><el-icon :size="14"><Refresh /></el-icon> 刷新当页</el-dropdown-item>
-        <el-dropdown-item @click="closeCurrentTab"><el-icon :size="14"><FolderRemove/></el-icon> 关闭当前</el-dropdown-item>
-        <el-dropdown-item @click="closeOtherTab"><el-icon :size="14"><Close /></el-icon>关闭其他</el-dropdown-item>
-        <el-dropdown-item @click="closeAllTab"><el-icon :size="14"><FolderDelete /></el-icon>关闭所有</el-dropdown-item>
+        <el-dropdown-item @click="refresh"><el-icon :size="14"><Refresh /></el-icon> {{ $t("tagsView.refresh") }}</el-dropdown-item>
+        <el-dropdown-item @click="closeCurrentTab"><el-icon :size="14"><FolderRemove/></el-icon> {{ $t("tagsView.closeCurrent") }}</el-dropdown-item>
+        <el-dropdown-item @click="closeOtherTab"><el-icon :size="14"><Close /></el-icon>{{ $t("tagsView.closeOther") }}</el-dropdown-item>
+        <el-dropdown-item @click="closeAllTab"><el-icon :size="14"><FolderDelete /></el-icon>{{ $t("tagsView.closeAll") }}</el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>

src/main.ts

@@ -21,6 +21,8 @@ import "@/styles/element-dark.scss";
 // 引入阿里图标库
 import "@/assets/iconfont/iconfont.css";
 import "@/assets/iconfont/iconfont.js";
+// i18n
+import I18n from "@/language/index";
 
 const app = createApp(App)
 registerElIcons(app)
@@ -28,6 +30,7 @@ registerElIcons(app)
 app.component('svg-icon',SvgIcon)
 app.component('PageWrapLayout',PageWrapLayout)
 
+app.use(I18n)
 app.use(pinia)
 app.use(router)
 app.use(ElementPlus).mount('#app')

src/mock/system.ts

@@ -284,7 +284,7 @@ export const menuData =[
             {
                 menuName:'菜单1',
                 menuType:'菜单',
-                menuRouter:'/charts',
+                menuRouter:'/echarts',
                 identification:'menu1:view',
                 parentId:1,
                 level:2,
@@ -294,7 +294,7 @@ export const menuData =[
                     {
                         menuName:'按钮1',
                         menuType:'按钮',
-                        menuRouter:'/charts',
+                        menuRouter:'/echarts',
                         identification:'menu1:view:btn1',
                         parentId:10,
                         id:20,
@@ -304,7 +304,7 @@ export const menuData =[
                     {
                         menuName:'按钮2',
                         menuType:'按钮',
-                        menuRouter:'/charts',
+                        menuRouter:'/echarts',
                         identification:'menu1:view:btn2',
                         parentId:10,
                         id:21,
@@ -314,7 +314,7 @@ export const menuData =[
                     {
                         menuName:'按钮3',
                         menuType:'按钮',
-                        menuRouter:'/charts',
+                        menuRouter:'/echarts',
                         identification:'menu1:view:btn2',
                         parentId:10,
                         id:22,

src/routers/modules/externalLink.ts

@@ -6,7 +6,7 @@ const externalLink = [{
     path: '/external-link',
     component: Layout,
     redirect: '/external-link/wechat',
-    name: 'external-link',
+    name: 'externalLink',
     meta: {
         title: '外部链接',
         icon: 'link'

src/routers/modules/functionPage.ts

@@ -7,7 +7,7 @@ const functionPageRouter = [{
     path: '/function-page',
     component: Layout,
     redirect: '/function-page/404',
-    name: 'function-page',
+    name: 'functionPage',
     meta: {
         title: '功能页面',
         icon: 'ElementPlus'

src/routers/modules/system.ts

@@ -6,7 +6,7 @@ const systemRouter = [{
     path: '/system',
     component: Layout,
     redirect: '/system/user',
-    name: 'system',
+    name: 'systemManagement',
     meta: {
         title: '系统管理',
         icon: 'Setting',

src/routers/modules/table.ts

@@ -7,7 +7,7 @@ const tableRouter = [
     path: '/table',
     component: Layout,
     redirect: '/table/comprehensive',
-    name: 'table',
+    name: 'superTable',
     meta: {
       title: '超级表格',
       icon: 'School',

src/store/modules/setting.ts

@@ -32,6 +32,8 @@ export const useSettingStore = defineStore({
             primary:PRIMARY_COLOR,
             // element组件大小
             globalComSize:'default',
+            // 中英文切换，默认中文
+            language:'zh',
             // 是否只保持一个子菜单的展开
             uniqueOpened:true,
             // 固定header

src/styles/element-dark.scss

@@ -149,6 +149,9 @@ html.dark {
   .footer-layout{
     border-top:var(--zb-border-light);
   }
+  .app-echarts{
+    background: black!important;
+  }
 
 
 

src/styles/sidebar.scss

@@ -80,19 +80,34 @@
 
     .is-active > .el-sub-menu__title {
       color: $subMenuActiveText !important;
+
     }
+    .el-menu-item.is-active:before{
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 4px;
+      content: "";
+      background: var(--el-color-primary);
+    }
+
 
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
 
-      &:hover {
-        background-color: $subMenuHover !important;
-      }
+    }
+    .el-menu-item:not(.is-active):hover {
+      background-color:  $subMenuHover !important;
+    }
+    .el-menu-item.is-active{
+      background-color:$subMenuHover !important;
     }
   }
 
+
   .hideSidebar {
     .sidebar-container {
       width: 60px !important;

src/utils/i18n.ts

@@ -0,0 +1,11 @@
+// translate router.meta.title, be used in breadcrumb sidebar tagsview
+import I18n from "@/language/index";
+export function generateTitle(route) {
+  // 检查 key 是否存在
+  const hasKey = I18n.global.te('route.' + route.name)
+  if (hasKey) {
+    const translatedTitle = I18n.global.t('route.' + route.name)
+    return translatedTitle
+  }
+  return route?.meta?.title
+}

src/views/home/index.vue

@@ -4,11 +4,11 @@
       <el-col :xs="24" :sm="12" :lg="8">
         <el-card class="box-card" style="height: 100%">
           <el-image
-              class="wechat"
-              :src="weLogo"
-              :preview-src-list="[weLogo]"
-              style="max-width: 200px"
-              :data-resid="Date.now()"
+            class="wechat"
+            :src="weLogo"
+            :preview-src-list="[weLogo]"
+            style="max-width: 200px"
+            :data-resid="Date.now()"
           />
           <div class="personal">
             <div>
@@ -17,31 +17,62 @@
             <div class="name"></div>
             <div class="description"></div>
             <div class="list">
-              <div>昵称：小狼</div>
-              <div>职业：前端</div>
-              <div>公司：小公司</div>
-              <div>年龄：~~</div>
-              <div>性别：男</div>
-              <div>现住址：中国-浙江-杭州</div>
-              <div>邮箱：1135957121@qq.com</div>
-              <div>微信：19550102670(欢迎加微信入群)</div>
-              <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
+              <div
+                ><span class="label">{{ $t('home.nickName') }}</span
+                >：{{ $t('home.Wolf') }}</div
+              >
+              <div
+                ><span class="label">{{ $t('home.job') }}</span
+                >：{{ $t('home.web') }}</div
+              >
+              <div
+                ><span class="label">{{ $t('home.company') }}</span
+                >：小公司</div
+              >
+              <div
+                ><span class="label">{{ $t('home.age') }}</span
+                >：~~</div
+              >
+              <div
+                ><span class="label">{{ $t('home.sex') }}</span
+                >：{{ $t('home.male') }}</div
+              >
+              <div
+                ><span class="label">{{ $t('home.currentAddress') }}</span
+                >：中国-浙江-杭州</div
+              >
+              <div
+                ><span class="label">{{ $t('home.mail') }}</span
+                >：1135957121@qq.com</div
+              >
+              <div
+                ><span class="label">{{ $t('home.WeChat') }}</span
+                >： 微信：19550102670(欢迎加微信入群)</div
+              >
+              <div
+                ><span class="label">{{ $t('home.technologyStack') }}</span
+                >：JavaScript、HTML、CSS、Vue、Node、React</div
+              >
             </div>
             <el-divider></el-divider>
-            <div style="margin-bottom: 15px"><h5>个性标签</h5></div>
+            <div style="margin-bottom: 15px"
+              ><h5>{{ $t('home.PersonalityLabel') }}</h5></div
+            >
             <div>
-              <el-tag style="margin-right: 10px">怕麻烦</el-tag>
-              <el-tag style="margin-right: 10px">健身运动</el-tag>
-              <el-tag style="margin-right: 10px">睡觉</el-tag>
-              <el-tag style="margin-right: 10px">漫威</el-tag>
+              <el-tag style="margin-right: 10px">{{ $t('home.trouble') }}</el-tag>
+              <el-tag style="margin-right: 10px">{{ $t('home.fitness') }}</el-tag>
+              <el-tag style="margin-right: 10px">{{ $t('home.sleep') }}</el-tag>
+              <el-tag style="margin-right: 10px">{{ $t('home.Marvel') }}</el-tag>
               <el-tag>向往</el-tag>
             </div>
             <el-divider></el-divider>
-            <div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
-            <div>---------- 开心最重要</div>
+            <div style="margin-bottom: 15px"
+              ><h5>{{ $t('home.favoriteSentence') }}</h5></div
+            >
+            <div>---------- {{ $t('home.happy') }}</div>
             <el-divider></el-divider>
             <div style="margin-bottom: 15px"
-            ><h5>如果对你有帮助的话，可以麻烦点一颗 Star、Fork、Watch! 你的鼓励是我继续优化的动力~~</h5></div
+              ><h5>{{ $t('home.impression') }}~~</h5></div
             >
           </div>
         </el-card>
@@ -52,18 +83,16 @@
             <el-card style="margin-bottom: 10px">
               <div class="grid-content">
                 <div class="left"
-                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
+                  ><el-icon style="font-size: 24px; color: white"><user /></el-icon
                 ></div>
                 <div class="right">
-                  <div
-                      class="h2"
-                      style="color: #2d8cf0"
-                  ><count-to
+                  <div class="h2" style="color: #2d8cf0">
+                    <count-to
                       :start-val="0"
                       :end-val="5268"
                       :duration="2000"
                       :autoplay="true"
-                  ></count-to
+                    ></count-to
                   ></div>
                   <div>用户访问量 </div>
                 </div>
@@ -74,18 +103,16 @@
             <el-card style="margin-bottom: 10px">
               <div class="grid-content">
                 <div class="left" style="background: #64d572"
-                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
+                  ><el-icon style="font-size: 24px; color: white"><user /></el-icon
                 ></div>
                 <div class="right">
-                  <div
-                      class="h2"
-                      style="color: #64d572"
-                  ><count-to
+                  <div class="h2" style="color: #64d572">
+                    <count-to
                       :start-val="0"
                       :end-val="9599"
                       :duration="2000"
                       :autoplay="true"
-                  ></count-to
+                    ></count-to
                   ></div>
                   <div>系统消息 </div>
                 </div>
@@ -96,18 +123,16 @@
             <el-card style="margin-bottom: 10px">
               <div class="grid-content">
                 <div class="left" style="background: #f25e43"
-                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
+                  ><el-icon style="font-size: 24px; color: white"><user /></el-icon
                 ></div>
                 <div class="right">
-                  <div
-                      class="h2"
-                      style="color: #f25e43"
-                  ><count-to
+                  <div class="h2" style="color: #f25e43"
+                    ><count-to
                       :start-val="0"
                       :end-val="595453"
                       :duration="2000"
                       :autoplay="true"
-                  ></count-to
+                    ></count-to
                   ></div>
                   <div>数量 </div>
                 </div>
@@ -123,24 +148,24 @@
           </template>
           <div style="display: flex">
             <el-card
-                style="flex: 1; margin-right: 20px; cursor: pointer"
-                class="card-item"
-                @click="goTo('https://ext.dcloud.net.cn/plugin?id=7511')"
+              style="flex: 1; margin-right: 20px; cursor: pointer"
+              class="card-item"
+              @click="goTo('https://ext.dcloud.net.cn/plugin?id=7511')"
             >
               <div style="color: white; margin-bottom: 10px"><h3>zb-table</h3></div>
               <div style="font-size: 12px; color: white"
-              >uniapp 表格组件
+                >uniapp 表格组件
                 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div
               >
             </el-card>
             <el-card
-                style="flex: 1; cursor: pointer"
-                class="card-item"
-                @click="goTo('https://github.com/zouzhibin/vue-admin-perfect')"
+              style="flex: 1; cursor: pointer"
+              class="card-item"
+              @click="goTo('https://github.com/zouzhibin/vue-admin-perfect')"
             >
               <div style="color: white; margin-bottom: 10px"><h3>vue-admin-perfect</h3></div>
               <div style="font-size: 12px; color: white"
-              >系统基于vue3+vuex+ element-plus+ts后台管理系统</div
+                >系统基于vue3+vuex+ element-plus+ts后台管理系统</div
               >
             </el-card>
           </div>
@@ -161,17 +186,14 @@
 </template>
 <script setup lang="ts">
   import { User } from '@element-plus/icons-vue'
-  import { ref } from 'vue'
   import AvatarLogo from '@/assets/image/avatar.png'
-  import weLogo from '@/assets/image/we.png'
   import CountTo from '@/components/CountTo/index.vue'
   import BarCharts from '@/views/echarts/simple/components/bar.vue'
-
+  import weLogo from '@/assets/image/we.png'
   const goTo = (url) => {
     window.open(url, '_blank')
-  }
-</script>
+  }</script>
 
 <style scoped lang="scss">
-@import "./index";
+  @import './index.scss';
 </style>