From 3ae8a7c237a295c4dbdb00b4c4678744ef185401 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sat, 11 Nov 2023 11:44:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=99=E6=80=81=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=9B=BD=E9=99=85=E5=8C=96/=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useI18n.ts            |  1 +
 src/i18n/locales/en-US.ts       | 10 ++++++++++
 src/i18n/locales/zh-CN.ts       | 10 ++++++++++
 src/layouts/BasicLayout.vue     | 13 ++++++++++++-
 src/layouts/components/Tabs.vue | 12 +++++++++++-
 src/router/index.ts             | 14 ++++----------
 6 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useI18n.ts b/src/hooks/useI18n.ts
index fc76eba4..e15a044a 100644
--- a/src/hooks/useI18n.ts
+++ b/src/hooks/useI18n.ts
@@ -16,6 +16,7 @@ export default function useLocale() {
   const changeLocale = (value: string) => {
     i18n.locale.value = value;
     localSet(CACHE_LOCAL_I18N, value);
+    window.location.reload()
   };
 
   return {
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 154f150b..fb30e84c 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -121,6 +121,16 @@ export default {
     }
   },
 
+  // 静态路由
+  router: {
+    index: "Home",
+    account: {
+      index: "Personal Center",
+      profile: "Personal Info",
+      settings: "Personal Settings",
+    },
+  },
+
   // 校验
   valid: {
     userNameReg: 'The account cannot start with a number and can contain uppercase and lowercase letters, numbers, and no less than 5 digits.',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 3c26f03f..81943a7f 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -121,6 +121,16 @@ export default {
     }
   },
 
+  // 静态路由
+  router: {
+    index: "Home",
+    account: {
+      index: "个人中心",
+      profile: "个人信息",
+      settings: "个人设置",
+    },
+  },
+
   // 校验
   valid: {
     userNameReg: '账号不能以数字开头，可包含大写小写字母，数字，且不少于5位',
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 8cefdb7a..5d1f22d5 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -85,7 +85,7 @@ const breadcrumb = computed(() => {
     .map(item => {
       return {
         path: item.path,
-        breadcrumbName: item.meta.title || '-',
+        breadcrumbName: fnLocale(item.meta.title || '-'),
       };
     });
 });
@@ -120,6 +120,16 @@ function fnComponentSetName(component: any, to: any) {
 // 清空导航栏标签
 tabsStore.clear();
 
+/**
+ * 国际化翻译转换
+ */
+function fnLocale(title: string) {
+  if (title.indexOf('router.') !== -1) {
+    title = t(title);
+  }
+  return title;
+}
+
 //
 onMounted(() => {
   // fnGetServerTime();
@@ -186,6 +196,7 @@ document.addEventListener('visibilitychange', function () {
       v-bind="proConfig"
       :iconfont-url="scriptUrl"
       :sider-width="208"
+      :locale="(fnLocale as any)"
     >
       <!--插槽-菜单头-->
       <template #menuHeaderRender>
diff --git a/src/layouts/components/Tabs.vue b/src/layouts/components/Tabs.vue
index 371cac10..5e559703 100644
--- a/src/layouts/components/Tabs.vue
+++ b/src/layouts/components/Tabs.vue
@@ -92,6 +92,16 @@ function fnTabClose(path: string) {
   router.push(to);
 }
 
+/**
+ * 国际化翻译转换
+ */
+ function fnLocale(title: string) {
+  if (title.indexOf('router.') !== -1) {
+    title = t(title);
+  }
+  return title;
+}
+
 /**监听当前路由添加到导航标签列表 */
 watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
 </script>
@@ -120,7 +130,7 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
         <template #tab>
           <span>
             <IconFont :type="tab.icon" style="margin: 0"></IconFont>
-            {{ tab.title }}
+            {{ fnLocale(tab.title) }}
           </span>
         </template>
       </a-tab-pane>
diff --git a/src/router/index.ts b/src/router/index.ts
index dc6d10d8..f9406532 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -28,21 +28,20 @@ const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'Root',
-    meta: { title: '根节点' },
     component: BasicLayout,
     redirect: '/index',
     children: [
       {
         path: '/index',
         name: 'Index',
-        meta: { title: '首页', icon: 'icon-pcduan' },
+        meta: { title: 'router.index', icon: 'icon-pcduan' },
         component: () => import('@/views/index.vue'),
       },
       {
         path: '/account',
         name: 'Account',
         meta: {
-          title: '个人中心',
+          title: 'router.account.index',
           hideInMenu: true,
         },
         component: BlankLayout,
@@ -51,13 +50,13 @@ const constantRoutes: RouteRecordRaw[] = [
           {
             path: 'profile',
             name: 'Profile',
-            meta: { title: '个人信息', cache: true },
+            meta: { title: 'router.account.profile', cache: true },
             component: () => import('@/views/account/profile.vue'),
           },
           {
             path: 'settings',
             name: 'Settings',
-            meta: { title: '个人设置', cache: true },
+            meta: { title: 'router.account.settings', cache: true },
             component: () => import('@/views/account/settings.vue'),
           },
         ],
@@ -67,25 +66,21 @@ const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/login',
     name: 'Login',
-    meta: { title: '登录' },
     component: () => import('@/views/login.vue'),
   },
   {
     path: '/register',
     name: 'Register',
-    meta: { title: '注册' },
     component: () => import('@/views/register.vue'),
   },
   {
     path: '/403',
     name: 'NotPermission',
-    meta: { title: '没有访问权限' },
     component: () => import('@/views/error/403.vue'),
   },
   {
     path: '/redirect',
     name: 'Redirect',
-    meta: { title: '重定向' },
     component: BasicLayout,
     children: [
       {
@@ -96,7 +91,6 @@ const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '/:pathMatch(.*)*',
-    meta: { title: '找不到匹配页面' },
     component: () => import('@/views/error/404.vue'),
   },
 ];