feat：dashboard收藏功能布局搭建

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -46,6 +46,16 @@
     }
     .top-tool-left {
       display: flex;
+      .nz-icon-xingzhuang{
+        color: $--color-text-regular;
+        cursor: pointer;
+        transform:translateY(2px)
+      }
+      .nz-icon-a-xingzhuang2{
+        color:#FF9219 !important;
+        cursor: pointer;
+        transform:translateY(2px) scale(1.2);
+      }
     }
   }
   .panel-top-tools{

nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss

@@ -70,3 +70,92 @@
 .panel-dropdown-btn-delete:hover {
   color: #D96D7A;
 }
+
+.panel-select-wrap{
+  width: 100%;
+  height: 402px;
+  display: flex;
+  justify-content: space-between;
+  .panel-select-left{
+    width: 170px;
+    height: 100%;
+    box-sizing: border-box;
+    border-right:1px solid $--border-color-base;
+    padding: 12px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .panel-select-list{
+      width: 100%;
+      .panel-select-item{
+        font-family: Roboto-Regular;
+        font-size: 14px;
+        font-weight: 400;
+        color: $--color-text-primary;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 36px;
+        cursor: pointer;
+        i{
+          margin-left: 20px;
+          margin-right: 6px;
+          width: 22px;
+          display: flex;
+          justify-content: center;
+          color: $--color-text-regular;
+        }
+      }
+      .panel-select-item:hover{
+        color: #FA901C; 
+        background: $--background-color-base;
+        i{
+          color: #FA901C;
+        }
+      }
+      .panel-select-item.active{
+        color: #FA901C;  
+        background: $--background-color-base;
+        i{
+          color: #FA901C;
+        }
+      }
+    }
+    .panel-select-tail{
+      border: none;
+      display: flex;
+      justify-content: center;
+      .panel-select-add{
+        width: 88%;
+        height: 30px;
+        background: #FF9219;
+        border-radius: 2px;
+        color: #fff;
+        display: flex;
+        font-size: 14px;
+        justify-content: center;
+        i{
+          color: #fff;
+          padding-left: 0;
+        }
+      }
+    }
+  }
+  .pop-item-wider{
+    flex: 1;
+    width: calc(100% - 170px);
+    padding-top: 0;
+    .panel-select-header{
+      margin-top: 12px;
+      margin-bottom: 8px;
+    }
+  }
+  .nz-icon-xingzhuang{
+    color: $--color-text-regular;
+    font-weight: normal;
+  }
+  .nz-icon-a-xingzhuang2{
+    color:#FF9219 !important;
+    transform: scale(1.2);
+  }
+}

nezha-fronted/src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1653383698922') format('woff2'),
-       url('iconfont.woff?t=1653383698922') format('woff'),
-       url('iconfont.ttf?t=1653383698922') format('truetype');
+  src: url('iconfont.woff2?t=1654150085783') format('woff2'),
+       url('iconfont.woff?t=1654150085783') format('woff'),
+       url('iconfont.ttf?t=1654150085783') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-moshiqiehuan:before {
+  content: "\e783";
+}
+
+.nz-icon-a-xingzhuang2:before {
+  content: "\e781";
+}
+
+.nz-icon-xingzhuang:before {
+  content: "\e782";
+}
+
+.nz-icon-liulanlishi:before {
+  content: "\e77e";
+}
+
+.nz-icon-a-leimucuquanbu:before {
+  content: "\e77f";
+}
+
+.nz-icon-wodechuangjian:before {
+  content: "\e780";
+}
+
+.nz-icon-kuaizhao:before {
+  content: "\e77d";
+}
+
 .nz-icon-shujubeifenhuifu:before {
   content: "\e6ba";
 }

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,55 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "30102525",
+      "name": "模式切换",
+      "font_class": "moshiqiehuan",
+      "unicode": "e783",
+      "unicode_decimal": 59267
+    },
+    {
+      "icon_id": "30097248",
+      "name": "形状 2",
+      "font_class": "a-xingzhuang2",
+      "unicode": "e781",
+      "unicode_decimal": 59265
+    },
+    {
+      "icon_id": "30097249",
+      "name": "形状",
+      "font_class": "xingzhuang",
+      "unicode": "e782",
+      "unicode_decimal": 59266
+    },
+    {
+      "icon_id": "30097042",
+      "name": "浏览历史",
+      "font_class": "liulanlishi",
+      "unicode": "e77e",
+      "unicode_decimal": 59262
+    },
+    {
+      "icon_id": "30097043",
+      "name": "类目－粗－全部",
+      "font_class": "a-leimucuquanbu",
+      "unicode": "e77f",
+      "unicode_decimal": 59263
+    },
+    {
+      "icon_id": "30097054",
+      "name": "我的创建",
+      "font_class": "wodechuangjian",
+      "unicode": "e780",
+      "unicode_decimal": 59264
+    },
+    {
+      "icon_id": "30091797",
+      "name": "快照",
+      "font_class": "kuaizhao",
+      "unicode": "e77d",
+      "unicode_decimal": 59261
+    },
     {
       "icon_id": "2781697",
       "name": "数据备份恢复",

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

@@ -144,7 +144,6 @@ export default {
     },
     // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
-      console.log(isRefresh)
       this.loading = true
       // TODO assetInfo、endpointInfo、echarts等进行不同的处理
       let startTime = ''

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

@@ -1,6 +1,27 @@
 <template>
-  <el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
-    <div>
+  <el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 500" :disabled="disabled">
+    <div class="panel-select-wrap">
+      <div class="panel-select-left">
+        <ul class="panel-select-list">
+          <li class="panel-select-item active">
+            <i class="nz-icon nz-icon-a-leimucuquanbu"></i>
+            <span>全部仪表盘</span>
+          </li>
+          <li class="panel-select-item">
+            <i class="nz-icon nz-icon-xingzhuang"></i>
+            <span>我的收藏</span>
+          </li>
+          <li class="panel-select-item">
+            <i class="nz-icon nz-icon-wodechuangjian"></i>
+            <span>我的创建</span>
+          </li>
+          <li class="panel-select-item">
+            <i class="nz-icon nz-icon-liulanlishi"></i>
+            <span>最近浏览</span>
+          </li>
+        </ul>
+        <slot name="tail"></slot>
+      </div>
       <div class="pop-item-wider">
         <slot name="header"></slot>
         <div :class="{'movable': !panelLock}" class="select-panel-tree">
@@ -33,8 +54,8 @@
                     </el-dropdown-menu>
                   </el-dropdown>
                   <template v-if="data.id">
-                    <i v-if="data.starred" class="el-rate__icon el-icon-star-on" @click.stop="delStarred(data)"></i>
-                    <i v-else class="el-rate__icon el-icon-star-off" @click.stop="addStarred(data)"></i>
+                    <i v-if="data.starred" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)"></i>
+                    <i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)"></i>
                   </template>
                 </el-col>
               </el-row>
@@ -70,8 +91,8 @@
                     </el-dropdown-menu>
                   </el-dropdown>
                   <template v-if="data.id">
-                    <i v-if="data.starred" class="el-rate__icon el-icon-star-on" @click.stop="delStarred(data)"></i>
-                    <i v-else class="el-rate__icon el-icon-star-off" @click.stop="addStarred(data)"></i>
+                    <i v-if="data.starred" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)"></i>
+                    <i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)"></i>
                   </template>
                 </el-col>
               </el-row>
@@ -83,9 +104,6 @@
     <div slot="reference">
       <slot name="trigger"></slot>
     </div>
-    <div slot="default">
-      <slot name="tail"></slot>
-    </div>
   </el-popover>
 </template>
 
@@ -172,7 +190,7 @@ export default {
       const response = await this.$get('/sys/user/starred', params)
       if (response.code === 200) {
         this.tempArr = []
-        this.recursionStarred(this.panelData, response.data)
+        this.recursionStarred(this.panelData, response.data.list)
         this.starredData[0].children = this.formatStarred(this.tempArr)
         if (type === 'tree') {
           // 刷新树形控件
@@ -302,17 +320,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-.starred-tree>>>.el-tree__empty-block{
-  display: none;
-}
-.el-rate__icon{
-  color: #C0C4CC !important;
-  cursor: pointer;
-  margin-right: 0px;
-}
-.el-icon-star-on{
-  color:#FF9219 !important;
-  transform: scale(1.2);
-}
-</style>

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -40,7 +40,7 @@
           <select-panel ref="selectPanel" :disabled="showPanel.type === 'dashboard'" :filter-panel="filterPanel" :chart-box="true" :panel-lock="true" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel">
             <template v-slot:header>
               <div class="panel-select-header">
-                <el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>
+                <el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="padding:0 12px"></el-input>
               </div>
             </template>
             <template v-slot:trigger>

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

@@ -27,19 +27,21 @@
                 @selectPanel="panelChange">
                 <template v-slot:header>
                   <div class="panel-select-header">
-                    <el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="mini" style="width: 286px;"></el-input>
+                    <el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="padding:0 12px"></el-input>
                     <!-- <span id="panel-list-toadd" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd"><i class="nz-icon nz-icon-plus"></i></span> -->
                   </div>
                 </template>
                 <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>
-                  <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>
+                  <i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="nz-icon nz-icon-a-xingzhuang2"></i>
+                  <i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang"></i>
                 </template>
                 <template v-slot:tail>
                   <div class="panel-select-tail">
-                    <span id="panel-list-toadd" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{ $t('overall.addProject') }}</span>
+                    <span id="panel-list-toadd" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd">
+                      <i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t('overall.addDashboard')}}
+                    </span>
                   </div>
                 </template>
               </select-panel>
@@ -51,15 +53,14 @@
 <!--                </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"
-                      type="button" @click="addChartBefore">
+              <!-- 切换查看模式 -->
+              <button slot="reference" class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
+                <i class="nz-icon nz-icon-moshiqiehuan"></i>
+              </button>
+
+              <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
                 <i class="nz-icon-create-square nz-icon"></i>
               </button>
 
@@ -1011,8 +1012,11 @@ export default {
     this.$store.commit('setMode', this.mode)
     this.$nextTick(() => {
       setTimeout(() => {
-        this.$refs.chartList.resize()
-      }, 200)
+        try {
+          this.$refs.chartList.resize()
+        } catch (error) {
+        }
+      }, 300)
     })
     if (this.nowTimeType.type) {
       this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
@@ -1117,16 +1121,6 @@ export default {
 }
 </script>
 <style scoped>
-.el-rate__icon{
-  color: #C0C4CC !important;
-  cursor: pointer;
-  margin-right: 0px;
-  transform: translateY(1px);
-}
-.el-icon-star-on{
-  color:#FF9219 !important;
-  transform: translateY(1px) scale(1.2);
-}
 .view-mode{
   margin-right: 10px;
   display: flex;