feat：CN-84 添加面包屑功能

src/components/layout/Header.vue

@@ -2,7 +2,11 @@
   <div class="cn-header">
 <!--    <div class="left-menu&#45;&#45;pin" :class="false ? 'left-menu&#45;&#45;pin-normal' : 'left-menu&#45;&#45;pin-reverse'" @click="shrink"><i :class="{'icon-reverse': false}" class="el-icon-s-fold"></i></div>-->
     <!--导航面包屑-->
-    <div style="flex-grow: 1"></div>
+    <div style="flex-grow: 1;display: flex;padding: 17px 70px;">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{item}}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <!--个人操作-->
     <div class="personal">
       <el-dropdown>
@@ -37,6 +41,7 @@
 </template>
 
 <script>
+import { useRoute } from 'vue-router'
 export default {
   name: 'Header',
   data () {
@@ -44,7 +49,54 @@ export default {
       username: 'admin', // sessionStorage.getItem('cn-username'),
       language: localStorage.getItem('cn-language') ? localStorage.getItem('cn-language') : 'en',
 
-      showChangePin: false
+      showChangePin: false,
+
+      breadcrumbMap: [
+        {
+          path: '/panel/trafficSummary',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('trafficSummary.trafficSummary')
+        },
+        {
+          path: '/panel/networkAppPerformance',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('networkAppPerformance.networkAppPerformance')
+        }, {
+          path: '/panel/dnsServiceInsights',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('dnsServiceInsights')
+        }, {
+          path: '/entityExplorer',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('overall.entityExplorer')
+        }, {
+          path: '/user',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('user')
+        }, {
+          path: '/role',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('role')
+        }, {
+          path: '/operationLog',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('overall.operationLog')
+        }, {
+          path: '/i18n',
+          parentName: this.$t('overall.dashboard'),
+          name: this.$t('l18n')
+        }
+      ]
+    }
+  },
+  computed: {
+    breadcrumb () {
+      const breadcrumb = this.breadcrumbMap.find(b => this.path === b.path)
+      return breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
+    },
+    path () {
+      const { path } = useRoute()
+      return path
     }
   },
   methods: {

src/components/layout/LeftMenu.vue

@@ -26,7 +26,7 @@
             :index="`${index}`">
           <template #title>
             <i :class="menu.icon"></i>
-            <span>{{menu.i18n ? $t(menu.i18n) : menu.name}}</span>
+            <span :title="menu.name">{{menu.i18n ? $t(menu.i18n) : menu.name}}</span>
           </template>
           <template v-for="(secondMenu, secondIndex) in menu.children">
             <el-submenu
@@ -38,6 +38,7 @@
               </template>
               <template v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`">
                 <el-menu-item
+                    :title="thirdMenu.name"
                     v-if="thirdMenu.state === 1"
                     :index="thirdMenu.route">
                   {{thirdMenu.i18n ? $t(thirdMenu.i18n) : thirdMenu.name}}
@@ -45,6 +46,7 @@
               </template>
             </el-submenu>
             <el-menu-item
+                :title="secondMenu.name"
                 v-else-if="secondMenu.state === 1"
                 :key="secondIndex * 100"
                 :index="secondMenu.route">
@@ -53,6 +55,7 @@
           </template>
         </el-submenu>
         <el-menu-item
+            :title="menu.name"
             v-else-if="menu.state === 1"
             :key="index + 'a'"
             :index="menu.route">