perf: 优化 view switch 切换，增加提示

src/i18n/langs/en.json

@@ -249,6 +249,7 @@
     "ReLogin": "Re-Login"
   },
   "common": {
+    "ChangeViewHelpText": "Click to change view",
     "PrivateCloud": "Private cloud",
     "PublicCloud": "Public cloud",
     "Correlation": "Correlation",

src/i18n/langs/ja.json

@@ -254,6 +254,7 @@
     "ReLogin": "再ログイン"
   },
   "common": {
+    "ChangeViewHelpText": "クリックしてさまざまなビューにアクセス",
     "PrivateCloud": "プライベートクラウド",
     "PublicCloud": "パブリッククラウド",
     "Correlation": "関連",

src/i18n/langs/zh.json

@@ -254,6 +254,7 @@
     "ReLogin": "重新登录"
   },
   "common": {
+    "ChangeViewHelpText": "点击切换不同视图",
     "Component": "组件",
     "PrivateCloud": "私有云",
     "PublicCloud": "公有云",

src/layout/components/NavHeader/ViewSwitcher.vue

@@ -1,31 +1,40 @@
 <template>
-  <el-menu
+  <el-tooltip
-    :default-active="currentViewRoute.name"
+    v-model="iShowTip"
-    class="menu-main"
+    :manual="true"
-    :class="mode"
+    :content="tipText"
-    :mode="mode"
+    class="item"
-    @select="handleSelectView"
+    effect="dark"
+    placement="right"
   >
-    <el-submenu
+    <el-menu
-      index="2"
+      :default-active="currentViewRoute.name"
-      popper-class="view-switcher"
+      class="menu-main"
+      :class="mode"
+      :mode="mode"
+      @select="handleSelectView"
     >
-      <template slot="title">
+      <el-submenu
-        <span class="title-label">
+        index="2"
-          <i class="fa fa-bars" />
+        popper-class="view-switcher"
-          <span>{{ $t('common.nav.View') }}</span>
-        </span>
-      </template>
-      <el-menu-item
-        v-for="view of views"
-        :key="view.name"
-        :index="view.name"
       >
-        <i v-if="mode === 'horizontal'" class="icons" :class="view.meta.icon" />
+        <template slot="title">
-        <span slot="title" class="icons-title">{{ view.meta.title }}</span>
+          <span class="title-label">
-      </el-menu-item>
+            <i class="fa fa-bars" />
-    </el-submenu>
+            <span>{{ $t('common.nav.View') }}</span>
-  </el-menu>
+          </span>
+        </template>
+        <el-menu-item
+          v-for="view of views"
+          :key="view.name"
+          :index="view.name"
+        >
+          <i v-if="mode === 'horizontal'" class="icons" :class="view.meta.icon" />
+          <span slot="title" class="icons-title">{{ view.meta.title }}</span>
+        </el-menu-item>
+      </el-submenu>
+    </el-menu>
+  </el-tooltip>
 </template>
 
 <script>
@@ -46,6 +55,7 @@ export default {
   },
   data() {
     return {
+      tipText: this.$t('common.ChangeViewHelpText'),
       showTip: true
     }
   },
@@ -72,6 +82,31 @@ export default {
     },
     currentView() {
       return this.viewsMapper[this.currentViewRoute.name]
+    },
+    tipHasRead: {
+      set(val) {
+        localStorage.setItem('viewSwitcherTip', val)
+      },
+      get() {
+        return localStorage.getItem('viewSwitcherTip')
+      }
+    },
+    iShowTip: {
+      get() {
+        if (this.mode !== 'horizontal') {
+          return false
+        }
+        if (this.views.length < 2) {
+          return false
+        }
+        if (this.tipHasRead) {
+          return false
+        }
+        return this.showTip
+      },
+      set(val) {
+        this.showTip = val
+      }
     }
   },
   methods: {
@@ -80,6 +115,10 @@ export default {
       localStorage.setItem('PreView', key)
       // Next 之前要重置 init 状态，否则这些路由守卫就不走了
       await store.dispatch('app/reset')
+      if (!this.tipHasRead) {
+        this.tipHasRead = '1'
+        this.iShowTip = false
+      }
       this.$router.push(routeName)
     }
   }