NEZ-1879 feat：dashboard搜索关键字高亮

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

@@ -107,17 +107,17 @@
         }
       }
       .panel-select-item:hover{
-        color: #FA901C; 
+        color: $--color-primary; 
         background: $--background-color-base;
         i{
-          color: #FA901C;
+          color: $--color-primary;
         }
       }
       .panel-select-item.active{
-        color: #FA901C;  
+        color: $--color-primary;  
         background: $--background-color-base;
         i{
-          color: #FA901C;
+          color: $--color-primary;
         }
       }
     }
@@ -161,4 +161,7 @@
     color:#FF9219 !important;
     cursor: pointer ;
   }
+  .highlight-keyword{
+    color:$--color-primary;
+  }
 }

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

@@ -8,8 +8,10 @@
             <span>{{item.name}}</span>
           </li>
         </ul>
-        <div slot="default">
-          <slot name="tail"></slot>
+        <div class="dashboard-select-tail">
+          <span class="dashboard-select-add" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd">
+            <i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t('overall.addDashboard')}}
+          </span>
         </div>
       </div>
       <div class="pop-item-wider">
@@ -28,11 +30,11 @@
             check-on-click-node
             check-strictly
             default-expand-all
-            highlight-current
+            :highlight-current="true"
             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="node.label + ' (' + data.chartNum +' charts）' " v-html="ruleTitle(node.label)"></span>
               <el-row class="block-col-2" style="margin-left:10px;margin-right:8px">
                 <el-col>
                   <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
@@ -123,6 +125,12 @@ export default {
     this.userId = localStorage.getItem('nz-user-id')
   },
   methods: {
+    // 新增仪表盘
+    toAdd () {
+      this.$parent.toAdd()
+      this.esc()
+    },
+
     // 左侧tab点击
     tabChange (value) {
       if (this.currentTab !== value) {
@@ -141,7 +149,7 @@ export default {
         const flatArr = this.flatten(this.panelData)
         this.treeData = flatArr.filter(item => item.createBy == this.userId)
       } else if (type === 'browse') { // 最近浏览
-        const browseArr = JSON.parse(localStorage.getItem(`nz-${this.userId}-browse`) || '[]')
+        const browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]')
         const flatArr = this.flatten(this.panelData)
         const tempArr = []
         // 比对id获取最近浏览的数据
@@ -215,7 +223,7 @@ export default {
     // 设置最近浏览的面板
     setBrowse () {
       // 获取最近浏览id数组
-      let browseArr = JSON.parse(localStorage.getItem(`nz-${this.userId}-browse`) || '[]')
+      let browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]')
       const flatArr = this.flatten(this.panelData)
       // 若最近浏览的数据已被删除 则截取掉
       for (let i = 0; i < browseArr.length; i++) {
@@ -236,7 +244,7 @@ export default {
       browseArr.unshift({ id: this.panel.id })
       // 如果数组长度大于10则截取
       browseArr.splice(10)
-      localStorage.setItem(`nz-${this.userId}-browse`, JSON.stringify(browseArr))
+      localStorage.setItem(`nz-view-dashboard-${this.userId}`, JSON.stringify(browseArr))
     },
     // 新增收藏
     addStarred: bus.debounceFn(function (data) {
@@ -281,6 +289,16 @@ export default {
       // 不区分大小写
       return data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
     },
+    // 高亮搜索的关键字
+    ruleTitle (title) {
+      const reg = new RegExp(this.filterPanel, 'ig')
+      const arr = title.match(reg)
+      let index = -1
+      return title.replace(reg, function () {
+        index++
+        return '<span class="highlight-keyword">' + arr[index] + '</span>'
+      })
+    },
     updateWeight (data) {
       const toUpdate = []
       let count = 0

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

@@ -30,13 +30,6 @@
                   <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="dashboard-select-tail">
-                    <span class="dashboard-select-add" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd">
-                      <i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t('overall.addDashboard')}}
-                    </span>
-                  </div>
-                </template>
               </select-dashboard>
             </div>