NEZ-1875 feat：dashboard增加view mode切换功能

nezha-fronted/src/assets/css/components/layout/header.scss

@@ -4,6 +4,8 @@
   background-color: $--background-color-empty;
   box-sizing: border-box;
   border-bottom: 1px solid $--border-color-light;
+  padding-left: 20px;
+  box-sizing: border-box;
   .personal-avatar {
     cursor: pointer;
     span {
@@ -102,7 +104,7 @@
     transition: all .4s;
     height: 100%;
     line-height: 50px;
-    margin-left: 20px;
+    margin-right: 15px;
     i {
       transform: rotateY(0);
       transition: transform .4s;
@@ -125,9 +127,7 @@ a.link-title:hover{
   color: $--color-primary !important;
 }
 .nz-breakcrumb {
-  padding-left: 15px;
   line-height: 50px;
-
   .el-breadcrumb__item {
     .el-breadcrumb__inner, .el-breadcrumb__separator {
       color: $--color-text-secondary;

nezha-fronted/src/assets/css/components/layout/home.scss

@@ -3,7 +3,7 @@
   transition: all .2s;
   background-color: $--background-color-empty;
   .body {
-    flex: 1;
+    height: 100%;
     display: flex;
     flex-direction: column;
     width: calc(100% - 240px);
@@ -20,3 +20,37 @@
   font-size: 12px;
   position: fixed;
 }
+
+.home.tv,.home.se{
+  .left-menu{
+    display: none;
+  }
+  .body{
+    width: 100%;
+    .header{
+      display: none;
+    }
+    .container{
+      height: 100%;
+      .main-container{
+        &>.panel-top-tools{
+          padding-left: 10px;
+        }
+        &>.table-list{
+          padding-left: 0;
+        }
+      }
+    }
+  }
+}
+.home.se{
+  .main-container{
+    &>.panel-top-tools{
+      display: none;
+    }
+    &>.table-list{
+      height: 100%;
+      padding-left: 0;
+    }
+  }
+}

nezha-fronted/src/assets/css/components/page/dashboard/panel.scss

@@ -8,7 +8,7 @@
 }
 .panel.list-page {
   .table-list {
-    height: calc(100% - 58px);
+    height: calc(100% - 60px);
     padding-left: 10px;
   }
   .no-data {
@@ -126,6 +126,7 @@
 .select-panel-title{
   font-weight: bold;
   font-size: 14px;
+  color:$--color-text-primary;
 }
 /* end-chart list*/
 .panel-loading {
@@ -148,9 +149,3 @@
   vertical-align: bottom;
   color: $--color-text-primary;
 }
-
-.starred-pop{
-  padding: 8px 12px;
-  margin-bottom: 8px;
-  min-width: auto;
-}

nezha-fronted/src/components/chart/chartList.vue

@@ -533,8 +533,10 @@ export default {
 .chart-list {
   height: 100%;
   width: 100%;
+  border-top: 1px solid transparent;
+  box-sizing: border-box;
 }
-  .group-hide-header {
+.group-hide-header {
   height: 40px!important;
-  }
+}
 </style>

nezha-fronted/src/components/common/popBox/selectPanel.vue

@@ -303,9 +303,6 @@ export default {
 }
 </script>
 <style scoped>
-.theme-light .select-panel-title{
-  color: #333;
-}
 .starred-tree>>>.el-tree__empty-block{
   display: none;
 }

nezha-fronted/src/components/layout/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home" :class="mode">
     <left-menu @refresh="refresh"></left-menu>
     <div ref="body" class="body">
       <Header></Header>
@@ -38,6 +38,12 @@ export default {
       containerShow: true
     }
   },
+  computed: {
+    // 查看模式
+    mode () {
+      return this.$store.state.panel.mode
+    }
+  },
   methods: {
     refresh () {
       this.$store.commit('setIsRouteLive')

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -24,17 +24,8 @@
                 <template v-slot:trigger>
                   <i style="color: #BEBEBE" class="el-icon-menu"></i>
                   <span :title="showPanel.name  + ' (' + showPanel.chartNum +' charts）' " class="show-panel-name">{{showPanel.name}}</span>
-                  <el-popover
-                    placement="top-start"
-                    trigger="hover"
-                    :content="$t('tip.addFavorites')"
-                    popper-class="starred-pop"
-                    >
-                    <span slot="reference">
                   <i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="el-rate__icon el-icon-star-on"></i>
                   <i @click.stop="addStarred(showPanel)" v-else class="el-rate__icon el-icon-star-off"></i>
-                    </span>
-                  </el-popover>
                 </template>
                 <template v-slot:tail>
                   <div class="panel-select-tail">
@@ -50,6 +41,11 @@
 <!--                </el-input>-->
 <!--              </div>-->
 
+              <!-- 切换查看模式 -->
+              <button slot="reference" class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
+                <i class="el-icon-monitor"></i>
+              </button>
+
               <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
 
               <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
@@ -285,7 +281,9 @@ export default {
       nowTimeType: {},
       showTopLine: false,
       // 导出html 以及 pdf的弹窗
-      exportBoxShow: false
+      exportBoxShow: false,
+      // 查看模式
+      mode: ''
     }
   },
   components: {
@@ -909,6 +907,62 @@ export default {
       } else {
         this.exportToHtml(this.showPanel.name)
       }
+    },
+    // 切换查看模式
+    cycle () {
+      if (!this.mode) {
+        // TV模式（隐藏 menu，header）
+        this.mode = 'tv'
+      } else if (this.mode === 'tv') {
+        // 简易模式（隐藏 menu，header 和 操作栏）
+        this.mode = 'se'
+        this.$message({
+          type: 'success',
+          message: this.$t('overall.toExit')
+        })
+      } else if (this.mode === 'se') {
+        // 默认模式
+        this.mode = ''
+      }
+      this.$store.commit('setMode', this.mode)
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.$refs.chartList.resize()
+        })
+      }, 200)
+      const param = {
+        panelId: this.panelId,
+        nowTimeType: JSON.stringify(this.nowTimeType),
+        searchTime: JSON.stringify(this.searchTime),
+        mode: this.mode
+      }
+      const path = this.fromRoute.panel
+      this.updatePath(param, path)
+      this.$store.dispatch('dispatchPanelTime', {
+        time: this.searchTime,
+        nowTimeType: this.nowTimeType
+      })
+    },
+    // 按ESC退出查看模式
+    escExit (e) {
+      if (e.keyCode === 27 && this.mode) {
+        // 默认模式
+        this.mode = ''
+        this.$store.commit('setMode', this.mode)
+        setTimeout(() => {
+          this.$nextTick(() => {
+            this.$refs.chartList.resize()
+          })
+        }, 200)
+        const param = {
+          panelId: this.panelId,
+          nowTimeType: JSON.stringify(this.nowTimeType),
+          searchTime: JSON.stringify(this.searchTime),
+          mode: this.mode
+        }
+        const path = this.fromRoute.panel
+        this.updatePath(param, path)
+      }
     }
   },
   created () {
@@ -917,13 +971,21 @@ export default {
       // value: vue set 参数
       panelId: { target: this, propertyName: 'panelId', type: 'number' },
       searchTime: { target: this, propertyName: 'searchTime', type: 'jsonParse' },
-      nowTimeType: { target: this, propertyName: 'nowTimeType', type: 'jsonParse' }
+      nowTimeType: { target: this, propertyName: 'nowTimeType', type: 'jsonParse' },
+      mode: { target: this, propertyName: 'mode', type: 'string' }
     }
     this.initQueryFromPath(searchKeys)
     setTimeout(() => {
       this.showPanel.id = this.panelId
       this.filter.panelId = this.panelId
     })
+    // 设置查看模式
+    this.$store.commit('setMode', this.mode)
+    setTimeout(() => {
+      this.$nextTick(() => {
+        this.$refs.chartList.resize()
+      })
+    }, 200)
     if (this.nowTimeType.type) {
       this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
       this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
@@ -938,6 +1000,8 @@ export default {
     })
   },
   mounted () {
+    // 监听键盘ESC事件
+    document.addEventListener('keydown', this.escExit)
     bus.$on('refreshPanel', this.refreshPanel)
     this.scrollbarWrap = this.$refs.dashboardScrollbar
     this.onScroll()
@@ -1007,6 +1071,8 @@ export default {
     }
   },
   beforeDestroy () {
+    // 移除键盘ESC事件
+    document.removeEventListener('keydown', this.escExit)
     this.$store.dispatch('dispatchPanelLock', { flag: true })
     if (document.querySelector('#tableList')) {
       document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
@@ -1033,4 +1099,15 @@ export default {
   color:#FF9219 !important;
   transform: translateY(1px) scale(1.2);
 }
+.view-mode{
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.view-mode .el-icon-monitor{
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+}
 </style>

nezha-fronted/src/store/panel.js

@@ -17,7 +17,9 @@ const panel = {
       y: 0
     },
     topologyShow: false,
-    topologyChartInfo: {}
+    topologyChartInfo: {},
+    // 查看模式
+    mode: ''
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -67,6 +69,10 @@ const panel = {
     },
     setTopologyChartInfo (state, topologyChartInfo) {
       state.topologyChartInfo = topologyChartInfo
+    },
+    // 设置查看模式
+    setMode (state, mode) {
+      state.mode = mode
     }
   },
   getters: {