NEZ-1868 style：修改starred布局样式

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

@@ -135,7 +135,7 @@
 }
 .show-panel-name{
   display: inline-block;
-  padding: 0 7px;
+  padding: 0 5px;
   font-weight: bold;
   max-width: 310px;
   overflow:hidden;
@@ -144,3 +144,9 @@
   vertical-align: bottom;
   color: $--color-text-primary;
 }
+
+.starred-pop{
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  min-width: auto;
+}

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

@@ -18,7 +18,7 @@
             class="starred-tree"
             >
             <div class="tree--node" slot-scope="{ node, data }">
-              <span :title="data.chartNum?node.label + ' (' + data.chartNum +' charts）':''">{{ node.label }}</span>
+              <span :title="data.id?node.label + ' (' + data.chartNum +' charts）':''" :class="{'select-panel-title':data.id===0}">{{ node.label }}</span>
               <el-row class="block-col-2" style="margin-left:10px">
                 <el-col>
                   <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
@@ -32,7 +32,7 @@
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
-                  <template v-if="node.label!=='Starred'">
+                  <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>
                   </template>
@@ -41,7 +41,7 @@
             </div>
           </el-tree>
           <el-tree
-            :data="panelData"
+            :data="treeData"
             :draggable="!panelLock"
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
@@ -55,7 +55,7 @@
             node-key="id"
             ref="panelTree">
             <div class="tree--node" slot-scope="{ node, data }">
-              <span :title="node.label + ' (' + data.chartNum +' charts）' ">{{ node.label }}</span>
+              <span :title="data.id?node.label + ' (' + data.chartNum +' charts）':''" :class="{'select-panel-title':data.id===0}">{{ node.label }}</span>
               <el-row class="block-col-2" style="margin-left:10px">
                 <el-col>
                   <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
@@ -69,8 +69,10 @@
                       </el-dropdown-item>
                     </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>
+                  </template>
                 </el-col>
               </el-row>
             </div>
@@ -119,6 +121,14 @@ export default {
           this.panel = JSON.parse(JSON.stringify(n))
         }
       }
+    },
+    panelData: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.treeData[0].children = n
+        }
+      }
     }
     /* panel: {
           immediate: true,
@@ -134,9 +144,19 @@ export default {
     return {
       popBox: { show: false },
       panel: { id: 0, name: '' },
+      // 全部列表
+      treeData: [
+        {
+          id: 0,
+          name: 'All Panels',
+          children: []
+        }
+      ],
+      // 收藏夹列表
       starredData: [
         {
-          name: 'Starred',
+          id: 0,
+          name: 'Starred Panels',
           children: []
         }
       ],
@@ -263,7 +283,9 @@ export default {
     },
     // 确认选择某个节点，与父组件交互
     selectPanel (data, checked, child) {
-      if (data.name === 'Starred') {
+      // 判断是否点击的Starred Panels或All Panels
+      if (!data.id) {
+        this.$refs.panelTree.setCurrentKey(this.showPanel)
         return false
       }
       this.$emit('selectPanel', data)
@@ -277,12 +299,18 @@ export default {
 .starred-tree>>>.el-tree__empty-block{
   display: none;
 }
+.select-panel-title{
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
 .el-rate__icon{
+  color: #C0C4CC !important;
   cursor: pointer;
   margin-right: 0px;
 }
 .el-icon-star-on{
- color:#FF9219;
+  color:#FF9219 !important;
   transform: scale(1.2);
 }
 </style>

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

@@ -24,9 +24,17 @@
                 <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>
-                  <i  style="font-size: 12px;color: #BEBEBE;" class="nz-icon nz-icon-arrow-down"></i>
+                    </span>
+                  </el-popover>
                 </template>
                 <template v-slot:tail>
                   <div class="panel-select-tail">
@@ -1059,12 +1067,13 @@ 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;
+  color:#FF9219 !important;
   transform: translateY(1px) scale(1.2);
 }
 </style>