fix: 优化左侧菜单和header逻辑

nezha-fronted/src/components/common/header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header">
-    <div class="logo link" @click="jumpTo('overview', 'dashboards')"><img height="45" src="../../assets/img/logo.png"/></div>
+    <div class="logo link" @click="jumpTo('/overview')"><img height="45" src="../../assets/img/logo.png"/></div>
     <el-menu
       class="nz-menu float-right"
       mode="horizontal"
@@ -40,31 +40,31 @@
       </el-menu-item>
       <el-submenu index="1" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('overview', 'dashboards')" :class ="(activeIndex == 'overview' ||activeIndex == 'panel' || activeIndex == 'explore') ? 'menu-active' :'' " >
+          <div @click="jumpTo('/overview')" :class ="(route == '/overview' ||route == '/panel' || route == '/explore') ? 'menu-active' :'' " >
             {{$t('overall.dashboard')}}
           </div>
         </template>
         <el-menu-item index="1-0">
-          <div @click="jumpTo('overview', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'overview'}" >{{$t('dashboard.overview.title')}}</div>
+          <div @click="jumpTo('/overview')" :class="{'menu-item-active' :route == '/overview'}" >{{$t('dashboard.overview.title')}}</div>
         </el-menu-item>
         <el-menu-item index="1-1">
-          <div @click="jumpTo('panel', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
+          <div @click="jumpTo('/panel')" :class="{'menu-item-active' :route == '/panel'}" >{{$t('dashboard.panel.title')}}</div>
         </el-menu-item>
         <el-menu-item index="1-2">
-          <div @click="jumpTo('explore', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
+          <div @click="jumpTo('/explore')" :class="{'menu-item-active' :route == '/explore'}">{{$t('dashboard.metricPreview.title')}}</div>
         </el-menu-item>
       </el-submenu>
 
       <el-submenu index="3" popper-class="nz-submenu">
         <template slot="title">
           <div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
-          <div v-else @click="jumpToAsset()" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
+          <div v-else @click="jumpToAsset()" :class="{'menu-active' : route == '/asset'}">{{$t('overall.asset')}}</div>
         </template>
         <template>
           <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
           <template v-else>
             <el-menu-item :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
-              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': activeIndex == 'asset' && activeItemIndex == item.id}">
+              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}">
                 <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
               </div>
             </el-menu-item>
@@ -74,13 +74,13 @@
       <el-submenu index="2" popper-class="nz-submenu">
         <template slot="title">
           <div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
-          <div v-else @click="jumpToProject(projectData[0])" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
+          <div v-else @click="jumpToProject(projectData[0])" :class ="route == '/project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
         </template>
         <template>
           <el-menu-item v-if="projectData.length == 0" index="2-0"><div @click="createBox({type: 1})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
           <template v-else>
             <el-menu-item :index="'2-' + index" v-for="(item, index) in projectData" :key="index">
-              <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': activeIndex == 'project' && activeItemIndex == item.id}">
+              <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}">
                 <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
                 <div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i class="nz-icon nz-icon-edit"></i></div>
               </div>
@@ -90,42 +90,42 @@
       </el-submenu>
       <el-submenu index="4" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('alertList', 'alerts')" :class ="activeIndex == 'alertList' || activeIndex == 'alertConfig' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
+          <div @click="jumpTo('/alertList')" :class ="route == '/alertList' || route == '/alertConfig' ? 'menu-active' : ''">{{$t('overall.alert')}}</div>
         </template>
         <el-menu-item index="4-1">
-          <div @click="jumpTo('alertList', 'alerts')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.message')}}</div>
+          <div @click="jumpTo('/alertList')" :class ="route == '/alertList' ? 'menu-item-active' : ''">{{$t('alert.message')}}</div>
         </el-menu-item>
         <el-menu-item index="4-2">
-          <div @click="jumpTo('alertConfig', 'alerts')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.rule')}}</div>
+          <div @click="jumpTo('/alertConfig')" :class ="route == '/alertConfig' ? 'menu-item-active' : ''">{{$t('alert.rule')}}</div>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="5" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('account', 'settings')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' || activeIndex == 'mib' || activeIndex == 'system' || activeIndex == 'terminallog' || activeIndex == 'operationlog' ? 'menu-active' :''">{{$t('overall.config')}}</div>
+          <div @click="jumpTo('/account')" :class ="route == '/account' || route == '/promServer' || route == '/dc' || route == '/model' || route == '/mib' || route == '/system' || route == '/terminallog' || route == '/operationlog' ? 'menu-active' : ''">{{$t('overall.config')}}</div>
         </template>
         <el-menu-item index="5-0">
-          <div @click="jumpTo('account', 'settings')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
+          <div @click="jumpTo('/account')" :class="{'menu-item-active' :(route == '/account' )}">{{$t('config.account.account')}}</div>
         </el-menu-item>
         <el-menu-item index="5-1">
-          <div @click="jumpTo('promServer', 'settings')" :class="{'menu-item-active' :(activeIndex == 'promServer' )}">{{$t('config.promServer.promServerList')}}</div>
+          <div @click="jumpTo('/promServer')" :class="{'menu-item-active' :(route == '/promServer' )}">{{$t('config.promServer.promServerList')}}</div>
         </el-menu-item>
         <el-menu-item index="5-2">
-          <div @click="jumpTo('dc', 'settings')" :class="{'menu-item-active' :(activeIndex == 'dc' )}">{{$t('config.dc.dc')}}</div>
+          <div @click="jumpTo('/dc')" :class="{'menu-item-active' :(route == '/dc' )}">{{$t('config.dc.dc')}}</div>
         </el-menu-item>
         <el-menu-item index="5-3">
-          <div @click="jumpTo('model', 'settings')" :class="{'menu-item-active' :(activeIndex == 'model' )}">{{$t('config.model.model')}}</div>
+          <div @click="jumpTo('/model')" :class="{'menu-item-active' :(route == '/model' )}">{{$t('config.model.model')}}</div>
         </el-menu-item>
         <el-menu-item index="5-4">
-          <div @click="jumpTo('mib', 'settings')" :class="{'menu-item-active' :(activeIndex == 'mib' )}">{{$t('config.mib.mib')}}</div>
+          <div @click="jumpTo('/mib')" :class="{'menu-item-active' :(route == '/mib' )}">{{$t('config.mib.mib')}}</div>
         </el-menu-item>
         <el-menu-item index="5-5">
-          <div @click="jumpTo('system', 'settings')" :class="{'menu-item-active' :(activeIndex == 'system' )}">{{$t('config.system.system')}}</div>
+          <div @click="jumpTo('/system')" :class="{'menu-item-active' :(route == '/system' )}">{{$t('config.system.system')}}</div>
         </el-menu-item>
         <el-menu-item index="5-6">
-          <div @click="jumpTo('terminallog', 'settings')" :class="{'menu-item-active' :(activeIndex == 'terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
+          <div @click="jumpTo('/terminallog')" :class="{'menu-item-active' :(route == '/terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
         </el-menu-item>
         <el-menu-item index="5-7">
-          <div @click="jumpTo('operationlog', 'settings')" :class="{'menu-item-active' :(activeIndex == 'operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
+          <div @click="jumpTo('/operationlog')" :class="{'menu-item-active' :(route == '/operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="6" popper-class="nz-submenu">
@@ -188,7 +188,7 @@
         language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
 
         //顶部菜单相关
-        activeIndex: '',
+        /*activeIndex: '',*/
         activeItemIndex: '',
         activeItemIndexes: [],
         hoverItemIndex: '',
@@ -301,23 +301,16 @@
        * @param route 路由地址
        * @param parentMenu 菜单大类
        * */
-      jumpTo(route, parentMenu) {
-        //通知leftMenu菜单改变了；使用localStorage缓存使得页面重新加载时leftMenu可以取到菜单
-        bus.$emit("parent-menu-change", parentMenu);
-        bus.$emit("menu-change", "/" + route);
-        localStorage.setItem("nz-parent-menu", parentMenu);
-        localStorage.setItem("nz-menu", "/" + route);
-
-        if (route != "asset") {
+      jumpTo(route) {
+        if (route != "/asset") {
           this.activeItemIndexes = [];
         }
         this.$router.push({
-          path: "/" + route,
+          path: route,
           query: {
             t: +new Date()
           }
         });
-        this.activeIndex = route;
       },
       getLinkData(){
         this.$get('link').then(response=>{
@@ -369,16 +362,17 @@
         if (dc) {
           this.activeItemIndex = dc.id;
           bus.$emit("header-dc-change", dc.id); //发送给leftMenu，顶部dc条件改变了
+        } else {
+          this.activeItemIndex = "";
+          bus.$emit("clear-asset-filter"); //清除leftMenu左侧菜单过滤条件
         }
-        this.jumpTo("asset", "assets");
+        this.jumpTo("/asset");
       },
       jumpToProject(p) {
         this.currentProject = p;
-        this.$store.commit('currentProjectChange', p);
-        bus.$emit("project-page-type", 'project');
 
         this.activeItemIndex = p.id;
-        this.jumpTo('project', 'projects');
+        this.jumpTo('/project');
       },
       getAssetData() {
         this.$get('idc', {pageSize:-1}).then(response => {
@@ -472,7 +466,7 @@
       logout() {
         localStorage.setItem("nz-parent-menu", "dashboards");
         this.$get('logout');
-        this.jumpTo('login');
+        this.jumpTo('/login');
       },
       refreshLang() {
         this.language = localStorage.getItem("nz-language");
@@ -488,17 +482,13 @@
         this.showChangePwd = false;
       },
       cancel() {
-        this.activeIndex = this.$route.path.slice(1, this.$route.path.length);
+        this.jumpTo(this.$route.path.slice(1, this.$route.path.length));
       },
 
       initEvent() {
-        bus.$on("menu-change", menu => {
-          this.activeIndex = menu.split("/")[1];
-        });
         bus.$on('login', () => {
           this.username = sessionStorage.getItem("nz-username");
           this.refreshLang();
-          this.activeIndex = 'overview';
         });
         bus.$on("dc-list-change", () => { //dc.vue增删改dc时刷新顶部菜单dc列表
           this.getAssetData();
@@ -521,13 +511,16 @@
       this.getProjectList();
       this.getLinkData();
       // 刷新后有高亮
-      let activePath = this.$route.path.slice(1);
-      this.activeIndex = activePath;
+      /*let activePath = this.$route.path.slice(1);
+      this.activeIndex = activePath;*/
     },
     computed: {
       linkData(){
         return this.$store.getters.getLinkData;
       },
+      route() {
+        return this.$route.path;
+      }
     },
     destroyed() {
       window.removeEventListener('popstate', this.cancel, false);

nezha-fronted/src/components/common/js/constants.js

@@ -1,5 +1,36 @@
 import i18n from "../i18n";
 
+export const staticMenus = {
+  settings: {
+    title: i18n.t('overall.config'),
+    menu: [
+      {route: '/account', name: i18n.t('config.account.account')},
+      {route: '/promServer', name: i18n.t('config.promServer.promServerList')},
+      {route: '/dc', name: i18n.t('config.dc.dc')},
+      {route: '/model', name: i18n.t('config.model.model')},
+      {route: '/mib', name: i18n.t('config.mib.mib')},
+      {route: '/system', name: i18n.t('config.system.system')},
+      {route: '/terminallog', name: i18n.t('config.terminallog.terminallog')},
+      {route: '/operationlog', name: i18n.t('config.operationlog.operationlog')},
+    ],
+  },
+  alerts: {
+    title: i18n.t('alert.alert'),
+      menu: [
+      {route: '/alertList', name: i18n.t('alert.alertList')},
+      {route: '/alertConfig', name: i18n.t('alert.alertConfig')},
+    ],
+  },
+  dashboards: {
+    title: i18n.t('dashboard.title'),
+      menu: [
+      {route: '/overview', name: i18n.t('dashboard.overview.title')},
+      {route: '/panel', name: i18n.t('dashboard.panel.title')},
+      {route: '/explore', name: i18n.t('dashboard.metricPreview.title')},
+    ],
+  },
+};
+
 export const promServer = {
   typeData: [
     {value: 1, label: 'Global'},

nezha-fronted/src/components/common/leftMenu.vue

@@ -2,13 +2,13 @@
   <div class="content">
     <div class="content-left left-slot" :class="{'left-slot-shrink': isShrink}">
       <div class="sidebar-title too-long-split">
-        <template v-if="parentMenu == 'projects'">{{$t("overall.project")}}</template>
-        <template v-else-if="parentMenu == 'assets'">{{$t("overall.asset")}}</template>
-        <template v-else>{{menus[parentMenu].title}}</template>
+        <template v-if="parentMenu == '/project'">{{$t("overall.project")}}</template>
+        <template v-else-if="parentMenu == '/asset'">{{$t("overall.asset")}}</template>
+        <template v-else>{{$CONSTANTS.staticMenus[parentMenu].title}}</template>
       </div>
       <div class="sidebar-info" style="height: 90%">
         <el-scrollbar style="height: 100%;">
-          <template v-if="parentMenu == 'projects'">
+          <template v-if="parentMenu == '/project'">
             <el-collapse class="left-menu-bg" accordion style="padding-top: 0;" ref="projectLeft">
               <el-collapse-item v-for="(item, index) in projectList" :key="item.id" :name="item.id + ''">
                 <template slot="title">
@@ -40,7 +40,7 @@
               </el-collapse-item>
             </el-collapse>
           </template>
-          <template v-else-if="parentMenu == 'assets'">
+          <template v-else-if="parentMenu == '/asset'">
             <el-collapse v-model="activeType" class="left-menu-bg">
               <el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
                 <el-checkbox-group v-model="dcCheckList" size="small">
@@ -103,7 +103,7 @@
             </el-collapse>
           </template>
           <template v-else>
-            <div v-for="menu in menus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == active}" @click="jumpTo(menu.route)">
+            <div v-for="menu in $CONSTANTS.staticMenus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)">
               {{menu.name}}
             </div>
           </template>
@@ -135,7 +135,7 @@
         return{
           isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
           parentMenu: "dashboards",
-          active: "/overview",
+          //active: "/overview",
 
           //project相关
           projectList: [],
@@ -159,37 +159,6 @@
           vendorCheckList: [],
           pingData: [],
           pingCheckList: [],
-
-          menus: {
-            settings: {
-              title: this.$t('overall.config'),
-              menu: [
-                {route: '/account', name: this.$t('config.account.account')},
-                {route: '/promServer', name: this.$t('config.promServer.promServerList')},
-                {route: '/dc', name: this.$t('config.dc.dc')},
-                {route: '/model', name: this.$t('config.model.model')},
-                {route: '/mib', name: this.$t('config.mib.mib')},
-                {route: '/system', name: this.$t('config.system.system')},
-                {route: '/terminallog', name: this.$t('config.terminallog.terminallog')},
-                {route: '/operationlog', name: this.$t('config.operationlog.operationlog')},
-              ],
-            },
-            alerts: {
-              title: this.$t('alert.alert'),
-              menu: [
-                {route: '/alertList', name: this.$t('alert.alertList')},
-                {route: '/alertConfig', name: this.$t('alert.alertConfig')},
-              ],
-            },
-            dashboards: {
-              title: this.$t('dashboard.title'),
-              menu: [
-                {route: '/overview', name: this.$t('dashboard.overview.title')},
-                {route: '/panel', name: this.$t('dashboard.panel.title')},
-                {route: '/explore', name: this.$t('dashboard.metricPreview.title')},
-              ],
-            },
-          }
         }
       },
       computed: {
@@ -222,7 +191,7 @@
           deep: true,
           immediate: true,
           handler(n) {
-            this.active = n;
+            this.parentMenu = this.getParentMenu(n);
           }
         },
         currentProjectChange: {
@@ -249,22 +218,7 @@
       },
       mounted() {
         Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => {
-          let cacheParentMenu = localStorage.getItem('nz-parent-menu');
-          let cacheMenu = localStorage.getItem('nz-menu');
-          if (cacheParentMenu) {
-            this.parentMenu = cacheParentMenu;
-          } else {
-            this.parentMenu = "dashboards";
-          }
-          if (cacheMenu) {
-            this.active = cacheMenu;
-          } else {
-            if (this.parentMenu != 'projects' && this.parentMenu != 'assets') {
-              this.active = this.menus[this.parentMenu].menu[0].route;
-            }
-          }
           this.initEvent(); //注册监听事件
-
           setTimeout(() => {
             this.ready = true;
           }, 300);
@@ -278,6 +232,26 @@
             this.resizeFunc();
           }
         },
+        //根据route获取父菜单，
+        getParentMenu(route) {
+          let parentMenu = "";
+          let end = false;
+          if (route != '/project' && route != '/asset') {
+            for (let r in this.$CONSTANTS.staticMenus) {
+              if (!end) {
+                this.$CONSTANTS.staticMenus[r].menu.forEach(menu => {
+                  if (route == menu.route) {
+                    parentMenu = r
+                    end = true;
+                  }
+                });
+              }
+            }
+          } else {
+            parentMenu = route;
+          }
+          return parentMenu;
+        },
         getProjectList() {
           return new Promise(resolve => {
             this.$get('project', {pageSize: -1}).then(response=>{
@@ -366,8 +340,8 @@
           this.$set(module, 'context_name', '');
         },
         changeCurrentProject(project) {
-          localStorage.setItem("nz-current-project", project.id);
-          this.$store.commit("currentProjectChange", project);
+          /*localStorage.setItem("nz-current-project", project.id);
+          this.$store.commit("currentProjectChange", project);*/
           this.currentProject = project;
         },
         changeCurrentModule(module) {
@@ -383,16 +357,22 @@
         },
 
         initEvent() {
-          bus.$on("parent-menu-change", parentMenu => {
+          /*bus.$on("parent-menu-change", parentMenu => {
             this.parentMenu = parentMenu;
           });
           bus.$on("menu-change", menu => {
             this.active = menu;
-          });
+          });*/
           bus.$on("header-dc-change", dcId => {
             this.dcCheckList = [dcId];
             bus.$emit("asset-filter-change", "idcIds", dcId);
           });
+          bus.$on("clear-asset-filter", dcId => {
+            this.dcCheckList = [];
+            this.assetTypeCheckList = [];
+            this.vendorCheckList = [];
+            this.pingCheckList = [];
+          });
           bus.$on("project-list-change", () => {
             this.getProjectList();
           });
@@ -422,6 +402,8 @@
             });
           });
         },
+        
+        //asset左侧菜单4个事件
         changeCheckBox() {
           this.assetClick = true;
         },
@@ -450,6 +432,7 @@
             bus.$emit("asset-filter-change", "pingStates", "");
           }
         },
+        
         indOf(a, b) {
           let c = [];
           for (let i = 0; i < a.length; i++) {
@@ -462,9 +445,9 @@
           }
         },
         jumpTo(route) {
-          bus.$emit("menu-change", route);
+          /*bus.$emit("menu-change", route);
           localStorage.setItem('nz-parent-menu', this.parentMenu);
-          localStorage.setItem('nz-menu-change', route);
+          localStorage.setItem('nz-menu-change', route);*/
           this.$router.push({
             path: route,
             query: {