From 0fdb30282c77bea14ee21c4543b14d5bcf1c1dda Mon Sep 17 00:00:00 2001
From: liweijie0812 <674416404@qq.com>
Date: Sun, 8 Oct 2023 18:52:46 +0800
Subject: [PATCH] fix: breadcrumb  i18n (#614)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: breadcrumb  i18n

* fix: 还原MenuRoute.title 类型

* Revert "fix: 还原MenuRoute.title 类型"

This reverts commit 5ae1e497371eb25e988bc455e3ae2863b61895e0.
---
 src/api/model/permissionModel.ts      | 14 ++------------
 src/layouts/components/Breadcrumb.vue | 19 ++++++++++++++++---
 src/types/interface.d.ts              | 17 +++++++++++++++--
 src/utils/route/index.ts              |  3 ++-
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/api/model/permissionModel.ts b/src/api/model/permissionModel.ts
index 2c6ed58..dad83b9 100644
--- a/src/api/model/permissionModel.ts
+++ b/src/api/model/permissionModel.ts
@@ -1,5 +1,7 @@
 import { defineComponent } from 'vue';
 
+import { RouteMeta } from '@/types/interface';
+
 export interface MenuListResult {
   list: Array<RouteItem>;
 }
@@ -18,15 +20,3 @@ export interface RouteItem {
   meta: RouteMeta;
   children?: Array<RouteItem>;
 }
-export interface RouteMeta {
-  title: string;
-  icon?: string;
-  expanded?: boolean;
-  orderNo?: number;
-  hidden?: boolean;
-  hiddenBreadcrumb?: boolean;
-  single?: boolean;
-  keepAlive?: boolean;
-  frameSrc?: string;
-  frameBlank?: boolean;
-}
diff --git a/src/layouts/components/Breadcrumb.vue b/src/layouts/components/Breadcrumb.vue
index 74ce022..2c48f79 100644
--- a/src/layouts/components/Breadcrumb.vue
+++ b/src/layouts/components/Breadcrumb.vue
@@ -10,6 +10,11 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { useLocale } from '@/locales/useLocale';
+import { RouteMeta } from '@/types/interface';
+
+const { locale } = useLocale();
+
 const crumbs = computed(() => {
   const route = useRoute();
 
@@ -18,14 +23,22 @@ const crumbs = computed(() => {
 
   const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
     // 如果路由下有hiddenBreadcrumb或当前遍历到参数则隐藏
-    if (route.matched[idx]?.meta?.hiddenBreadcrumb || Object.values(route.params).includes(path)) {
+    const meta = route.matched[idx]?.meta as RouteMeta;
+    if (meta?.hiddenBreadcrumb || Object.values(route.params).includes(path)) {
       return breadcrumbArray;
     }
-
+    let title = path;
+    if (meta?.title) {
+      if (typeof meta.title === 'string') {
+        title = meta.title;
+      } else {
+        title = meta.title[locale.value];
+      }
+    }
     breadcrumbArray.push({
       path,
       to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,
-      title: route.matched[idx]?.meta?.title ?? path,
+      title,
     });
     return breadcrumbArray;
   }, []);
diff --git a/src/types/interface.d.ts b/src/types/interface.d.ts
index ab8ac76..ef782ff 100644
--- a/src/types/interface.d.ts
+++ b/src/types/interface.d.ts
@@ -3,9 +3,22 @@ import { LocationQueryRaw, RouteRecordName } from 'vue-router';
 
 import STYLE_CONFIG from '@/config/style';
 
+export interface RouteMeta {
+  title?: string | Record<string, string>;
+  icon?: string;
+  expanded?: boolean;
+  orderNo?: number;
+  hidden?: boolean;
+  hiddenBreadcrumb?: boolean;
+  single?: boolean;
+  keepAlive?: boolean;
+  frameSrc?: string;
+  frameBlank?: boolean;
+}
+
 export interface MenuRoute {
   path: string;
-  title?: string;
+  title?: string | Record<string, string>;
   name?: string;
   icon?:
     | string
@@ -14,7 +27,7 @@ export interface MenuRoute {
       };
   redirect?: string;
   children: MenuRoute[];
-  meta: any;
+  meta: RouteMeta;
 }
 
 export type ModeType = 'dark' | 'light';
diff --git a/src/utils/route/index.ts b/src/utils/route/index.ts
index ae2fdf7..693c662 100644
--- a/src/utils/route/index.ts
+++ b/src/utils/route/index.ts
@@ -1,7 +1,8 @@
 import cloneDeep from 'lodash/cloneDeep';
 import { shallowRef } from 'vue';
 
-import { RouteItem, RouteMeta } from '@/api/model/permissionModel';
+import { RouteItem } from '@/api/model/permissionModel';
+import { RouteMeta } from '@/types/interface';
 import {
   BLANK_LAYOUT,
   EXCEPTION_COMPONENT,