From 1124cca16dc45256afb962a67bd7a147efeb1ed1 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Tue, 27 Jun 2023 15:20:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E5=8C=85=E5=B1=91=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20&=20=E9=A1=B6=E9=83=A8=E8=8F=9C=E5=8D=95=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bussiness/ms-breadcrumb/index.vue         | 59 +++++++++++++++++++
 .../{pure => bussiness}/ms-top-menu/index.vue | 29 ++++++---
 frontend/src/components/pure/navbar/index.vue |  2 +-
 frontend/src/layout/default-layout.vue        |  2 +
 frontend/src/router/typings.d.ts              |  2 +
 frontend/src/store/modules/app/index.ts       | 23 +++++++-
 frontend/src/store/modules/app/types.ts       |  9 ++-
 7 files changed, 116 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/bussiness/ms-breadcrumb/index.vue
 rename frontend/src/components/{pure => bussiness}/ms-top-menu/index.vue (72%)

diff --git a/frontend/src/components/bussiness/ms-breadcrumb/index.vue b/frontend/src/components/bussiness/ms-breadcrumb/index.vue
new file mode 100644
index 0000000000..422bbfb00c
--- /dev/null
+++ b/frontend/src/components/bussiness/ms-breadcrumb/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <a-breadcrumb v-if="showBreadcrumb" class="z-10 mb-[-8px] mt-[8px]">
+    <a-breadcrumb-item v-for="crumb of appStore.breadcrumbList" :key="crumb.name" @click="jumpTo(crumb.name)">
+      {{ t(crumb.locale) }}
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useRouter, RouteRecordName } from 'vue-router';
+  import { useAppStore } from '@/store';
+  import { listenerRouteChange } from '@/utils/route-listener';
+  import { useI18n } from '@/hooks/useI18n';
+
+  const appStore = useAppStore();
+  const { t } = useI18n();
+  const router = useRouter();
+  const showBreadcrumb = computed(() => {
+    const b = appStore.getCurrentTopMenu.meta?.breadcrumbs;
+    return b && b.length > 0;
+  });
+
+  /**
+   * 监听路由变化，存储打开及选中的菜单
+   */
+  listenerRouteChange((newRoute) => {
+    const { name } = newRoute;
+    if (name === appStore.currentTopMenu.name) {
+      appStore.setBreadcrumbList(appStore.currentTopMenu?.meta?.breadcrumbs);
+    } else {
+      appStore.setBreadcrumbList([]);
+    }
+  }, true);
+
+  function jumpTo(name: RouteRecordName) {
+    router.push({ name });
+  }
+</script>
+
+<style lang="less">
+  /** 面包屑 **/
+  .arco-breadcrumb-item {
+    @apply cursor-pointer;
+
+    color: var(--color-text-4);
+    &:hover {
+      color: rgb(var(--primary-5));
+    }
+    &:disabled {
+      color: var(--color-text-brand);
+    }
+    &:last-child {
+      @apply cursor-auto;
+
+      color: var(--color-text-2);
+    }
+  }
+</style>
diff --git a/frontend/src/components/pure/ms-top-menu/index.vue b/frontend/src/components/bussiness/ms-top-menu/index.vue
similarity index 72%
rename from frontend/src/components/pure/ms-top-menu/index.vue
rename to frontend/src/components/bussiness/ms-top-menu/index.vue
index 544771c20b..634cf5cc2a 100644
--- a/frontend/src/components/pure/ms-top-menu/index.vue
+++ b/frontend/src/components/bussiness/ms-top-menu/index.vue
@@ -1,9 +1,10 @@
 <template>
   <a-menu
-    v-if="appStore.topMenus.length > 0"
+    v-show="appStore.topMenus.length > 0"
+    v-model:selected-keys="activeMenus"
     class="bg-transparent"
     mode="horizontal"
-    :default-selected-keys="[defaultActiveMenu]"
+    @menu-item-click="setCurrentTopMenu"
   >
     <a-menu-item v-for="menu of appStore.topMenus" :key="(menu.name as string)" @click="jumpPath(menu.name)">
       {{ t(menu.meta?.locale || '') }}
@@ -12,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { Ref, ref, watch } from 'vue';
   import { useRouter, RouteRecordRaw, RouteRecordNormalized, RouteRecordName } from 'vue-router';
   import { cloneDeep } from 'lodash-es';
   import { useAppStore } from '@/store';
@@ -26,11 +27,24 @@
   const appStore = useAppStore();
   const router = useRouter();
   const { t } = useI18n();
+  const activeMenus: Ref<RouteRecordName[]> = ref([]);
 
-  const defaultActiveMenu = computed(() => {
-    const { name } = router.currentRoute.value;
-    return name;
-  });
+  watch(
+    () => appStore.getCurrentTopMenu?.name,
+    (val) => {
+      activeMenus.value = [val || ''];
+    }
+  );
+
+  function setCurrentTopMenu(key: string) {
+    const secParent = appStore.topMenus.find((el: RouteRecordRaw) => {
+      return (el?.name as string).includes(key);
+    });
+
+    if (secParent) {
+      appStore.setCurrentTopMenu(secParent);
+    }
+  }
 
   /**
    * 监听路由变化，存储打开的三级子路由
@@ -45,6 +59,7 @@
             (item) => name && (name as string).includes((item?.name as string) || '')
           );
           appStore.setTopMenus(currentParent?.children?.filter((item) => item.meta?.isTopMenu));
+          setCurrentTopMenu(name as string);
         }
       }
     });
diff --git a/frontend/src/components/pure/navbar/index.vue b/frontend/src/components/pure/navbar/index.vue
index e91b79ec4f..3061f015e1 100644
--- a/frontend/src/components/pure/navbar/index.vue
+++ b/frontend/src/components/pure/navbar/index.vue
@@ -182,7 +182,7 @@
   import { LOCALE_OPTIONS } from '@/locale';
   import useLocale from '@/locale/useLocale';
   // import useUser from '@/hooks/useUser';
-  import TopMenu from '@/components/pure/ms-top-menu/index.vue';
+  import TopMenu from '@/components/bussiness/ms-top-menu/index.vue';
   import MessageBox from '../message-box/index.vue';
   import { NOT_SHOW_PROJECT_SELECT_MODULE } from '@/router/constants';
   import { getProjectList } from '@/api/modules/system/project';
diff --git a/frontend/src/layout/default-layout.vue b/frontend/src/layout/default-layout.vue
index d9e802d55d..5f1b95ee09 100644
--- a/frontend/src/layout/default-layout.vue
+++ b/frontend/src/layout/default-layout.vue
@@ -34,6 +34,7 @@
           <Menu />
         </a-drawer>
         <a-layout class="layout-content" :style="paddingStyle">
+          <MsBreadCrumb />
           <a-spin :loading="appStore.loading" :tip="appStore.loadingTip">
             <a-scrollbar
               :style="{
@@ -64,6 +65,7 @@
   import TabBar from '@/components/pure/tab-bar/index.vue';
   import usePermission from '@/hooks/usePermission';
   import PageLayout from './page-layout.vue';
+  import MsBreadCrumb from '@/components/bussiness/ms-breadcrumb/index.vue';
 
   const isInit = ref(false);
   const appStore = useAppStore();
diff --git a/frontend/src/router/typings.d.ts b/frontend/src/router/typings.d.ts
index 0f824a277f..8330852be4 100644
--- a/frontend/src/router/typings.d.ts
+++ b/frontend/src/router/typings.d.ts
@@ -12,5 +12,7 @@ declare module 'vue-router' {
     order?: number; // 排序权重
     noAffix?: boolean; // tab展示设置，设置为true则不在tab列表展示激活页面的tab
     ignoreCache?: boolean; // 缓存设置，true则不缓存
+    isTopMenu?: boolean; // 是否为顶部菜单
+    breadcrumbs?: BreadcrumbItem[]; // 面包屑
   }
 }
diff --git a/frontend/src/store/modules/app/index.ts b/frontend/src/store/modules/app/index.ts
index c8522efe0e..8f345218c7 100644
--- a/frontend/src/store/modules/app/index.ts
+++ b/frontend/src/store/modules/app/index.ts
@@ -3,8 +3,9 @@ import { Notification } from '@arco-design/web-vue';
 import defaultSettings from '@/config/settings.json';
 import { getMenuList } from '@/api/modules/user';
 import { useI18n } from '@/hooks/useI18n';
+import { cloneDeep } from 'lodash-es';
 
-import type { AppState } from './types';
+import type { AppState, BreadcrumbItem } from './types';
 import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface';
 import type { RouteRecordNormalized, RouteRecordRaw } from 'vue-router';
 
@@ -14,6 +15,8 @@ const useAppStore = defineStore('app', {
     loading: false,
     loadingTip: '',
     topMenus: [] as RouteRecordRaw[],
+    currentTopMenu: {} as RouteRecordRaw,
+    breadcrumbList: [] as BreadcrumbItem[],
     currentOrgId: '',
     currentProjectId: '',
   }),
@@ -37,6 +40,12 @@ const useAppStore = defineStore('app', {
     getTopMenus(state: AppState): RouteRecordRaw[] {
       return state.topMenus;
     },
+    getCurrentTopMenu(state: AppState): RouteRecordRaw {
+      return state.currentTopMenu;
+    },
+    getBreadcrumbList(state: AppState): BreadcrumbItem[] {
+      return cloneDeep(state.breadcrumbList);
+    },
     getCurrentOrgId(state: AppState): string {
       return state.currentOrgId;
     },
@@ -124,6 +133,18 @@ const useAppStore = defineStore('app', {
     setTopMenus(menus: RouteRecordRaw[] | undefined) {
       this.topMenus = menus ? [...menus] : [];
     },
+    /**
+     * 设置顶部菜单组
+     */
+    setCurrentTopMenu(menu: RouteRecordRaw) {
+      this.currentTopMenu = cloneDeep(menu);
+    },
+    /**
+     * 设置面包屑
+     */
+    setBreadcrumbList(breadcrumbs: BreadcrumbItem[] | undefined) {
+      this.breadcrumbList = breadcrumbs ? cloneDeep(breadcrumbs) : [];
+    },
     /**
      * 设置当前组织 ID
      */
diff --git a/frontend/src/store/modules/app/types.ts b/frontend/src/store/modules/app/types.ts
index 9a219f7c52..36dfd7fd5f 100644
--- a/frontend/src/store/modules/app/types.ts
+++ b/frontend/src/store/modules/app/types.ts
@@ -1,4 +1,9 @@
-import type { RouteRecordNormalized, RouteRecordRaw } from 'vue-router';
+import type { RouteRecordNormalized, RouteRecordRaw, RouteRecordName } from 'vue-router';
+
+export interface BreadcrumbItem {
+  name: RouteRecordName;
+  locale: string;
+}
 
 export interface AppState {
   theme: string;
@@ -17,6 +22,8 @@ export interface AppState {
   loading: boolean;
   loadingTip: string;
   topMenus: RouteRecordRaw[];
+  currentTopMenu: RouteRecordRaw;
+  breadcrumbList: BreadcrumbItem[];
   currentOrgId: string;
   currentProjectId: string;
   [key: string]: unknown;