From 6ec9fe61a3d1820fcc11d3d0d70c7b0a155795f2 Mon Sep 17 00:00:00 2001
From: 18317449825 <18317449825@163.com>
Date: Wed, 25 May 2022 14:56:46 +0800
Subject: [PATCH 01/11] =?UTF-8?q?NEZ-1868=20feat=EF=BC=9Apanel=20starred?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/popBox/selectPanel.vue  | 141 +++++++++++++++++-
 .../src/components/page/dashboard/panel.vue   |  41 ++++-
 2 files changed, 170 insertions(+), 12 deletions(-)

diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index e83036f50..6f79ab1c8 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -2,10 +2,43 @@
   <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>
       <div class="pop-item-wider">
-
         <slot name="header"></slot>
-
         <div :class="{'movable': !panelLock}" class="select-panel-tree">
+          <el-tree
+            v-if="starredData[0].children.length"
+            :data="starredData"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            :props="{label: 'name', children: 'children'}"
+            @node-click="selectPanel"
+            default-expand-all
+            node-key="id"
+            ref="starredTree"
+            style="margin-bottom:8px"
+            >
+            <div class="tree--node" slot-scope="{ node, data }">
+              <span :title="data.chartNum?node.label + ' (' + data.chartNum +' charts）':''">{{ 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">
+                    <span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
+                    <el-dropdown-menu class="right-box-select-top" slot="dropdown"  v-has="['main_edit', 'main_delete']">
+                      <el-dropdown-item>
+                        <div @click="editPanel(data)" v-has="'main_edit'"><i  class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
+                      </el-dropdown-item>
+                      <el-dropdown-item>
+                        <div @click="deletePanel(data)" v-has="'main_delete'"><i class="nz-icon nz-icon-delete"></i>{{$t('overall.delete')}}</div>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                  <template v-if="node.label!=='Starred'">
+                    <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>
+          </el-tree>
           <el-tree
             :data="panelData"
             :draggable="!panelLock"
@@ -22,9 +55,9 @@
             ref="panelTree">
             <div class="tree--node" slot-scope="{ node, data }">
               <span :title="node.label + ' (' + data.chartNum +' charts）' ">{{ node.label }}</span>
-              <el-row class="block-col-2" v-if="!panelLock"  style="width: 35px;">
+              <el-row class="block-col-2" style="margin-left:10px">
                 <el-col>
-                  <el-dropdown placement="bottom-end" trigger="click">
+                  <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
                     <span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
                     <el-dropdown-menu class="right-box-select-top" slot="dropdown"  v-has="['main_edit', 'main_delete']">
                       <el-dropdown-item>
@@ -35,6 +68,8 @@
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
+                  <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>
                 </el-col>
               </el-row>
             </div>
@@ -72,6 +107,7 @@ export default {
       immediate: true,
       handler (n) {
         this.$refs.panelTree && this.$refs.panelTree.filter(n)
+        // this.$refs.starredTree && this.$refs.starredTree.filter(n)
       }
     },
     showPanel: {
@@ -95,10 +131,88 @@ export default {
   data () {
     return {
       popBox: { show: false },
-      panel: { id: 0, name: '' }
+      panel: { id: 0, name: '' },
+      starredData: [
+        {
+          name: 'Starred',
+          children: []
+        }
+      ],
+      tempArr: []
     }
   },
   methods: {
+    // 获取收藏的列表
+    async getStarred () {
+      const params = {
+        type: 'panel'
+      }
+      const response = await this.$get('/sys/user/starred', params)
+      if (response.code === 200) {
+        this.tempArr = []
+        this.recursionStarred(this.panelData, response.data)
+        this.starredData[0].children = this.formatStarred(this.tempArr)
+        this.$emit('refreshStarred', this.panelData)
+      }
+    },
+    // 比对收藏的列表和全部列表 改变状态
+    recursionStarred (allList, starredList) {
+      allList.forEach((item) => {
+        item.starred = false
+        starredList.forEach((subItem) => {
+          // 判断全部列表每一项的id和收藏列表每一项的id是否相等
+          if (item.id === subItem.tid) {
+            if (this.tempArr.every(val => val.id !== item.id)) {
+              item.starred = true
+              this.tempArr.push({
+                ...item,
+                children: []
+              })
+            }
+          }
+        })
+        if (item.children && item.children.length) {
+          this.recursionStarred(item.children, starredList)
+        }
+      })
+    },
+    // 格式化收藏列表 (树形)
+    formatStarred (list) {
+      const arr = JSON.parse(JSON.stringify(list))
+      arr.reverse()
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].pid) {
+          // 找到父级所在下标
+          const parentIndex = arr.findIndex(subItem => subItem.id === arr[i].pid)
+          if (parentIndex > -1) {
+            arr[parentIndex].children.unshift(arr[i])
+            arr.splice(i, 1)
+            i--
+          }
+        }
+      }
+      return arr.reverse()
+    },
+    // 新增收藏
+    addStarred (data) {
+      const params = {
+        type: 'panel',
+        tid: data.id
+      }
+      this.$post('/sys/user/starred', params).then(response => {
+        if (response.code === 200) {
+          this.getStarred()
+        }
+      })
+    },
+    // 删除收藏
+    delStarred (data) {
+      this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(response => {
+        if (response.code === 200) {
+          this.getStarred()
+        }
+      })
+    },
     /*
         * node: 被拖的节点
         * relative: 发生关系的节点
@@ -119,8 +233,8 @@ export default {
     updateWeight () {
       const toUpdate = []
       let count = 0
-      handler(this.panelData)
 
+      handler(this.panelData)
       function handler (panelData) {
         panelData.forEach(panel => {
           panel.weight = count++
@@ -130,7 +244,7 @@ export default {
           }
         })
       }
-
+      this.getStarred()
       this.$put('visual/panel/tree', toUpdate)
     },
     deletePanel (data) {
@@ -144,6 +258,9 @@ export default {
     },
     // 确认选择某个节点，与父组件交互
     selectPanel (data, checked, child) {
+      if (data.name === 'Starred') {
+        return false
+      }
       this.$emit('selectPanel', data)
       this.$refs.panelTree.setCurrentKey(data)
       this.esc()
@@ -151,3 +268,13 @@ export default {
   }
 }
 </script>
+<style scoped>
+.el-rate__icon{
+  cursor: pointer;
+  margin-right: 0px;
+}
+.el-icon-star-on{
+ color:#FF9219;
+ transform: scale(1.2);
+}
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 83a2811cb..67598cdbb 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -13,7 +13,7 @@
           </div>
           <template v-else>
             <div class="top-tool-left" style="cursor: pointer;">
-              <select-panel ref="selectPanel" :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'"
+              <select-panel ref="selectPanel" @refreshStarred="refreshStarred" :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'"
                             :show-panel="showPanel" style="display: inline-block;padding: 0" @deletePanel="del" @editPanel="edit" @selectPanel="panelChange">
                 <template v-slot:header>
                   <div class="panel-select-header">
@@ -24,7 +24,9 @@
                 <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 style="font-size: 12px;color: #BEBEBE;" class="nz-icon nz-icon-arrow-down"></i>
+                  <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>
                 </template>
                 <template v-slot:tail>
                   <div class="panel-select-tail">
@@ -297,6 +299,21 @@ export default {
     }
   },
   methods: {
+    refreshStarred (value) {
+      // 重新赋值，否则树形菜单不更新
+      this.panelData = JSON.parse(JSON.stringify(value))
+      const starredArr = this.$refs.selectPanel.tempArr
+      // 判断当前页面收藏状态
+      this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
+    },
+    // 新增收藏
+    addStarred (data) {
+      this.$refs.selectPanel.addStarred(data)
+    },
+    // 删除收藏
+    delStarred (data) {
+      this.$refs.selectPanel.delStarred(data)
+    },
     // 刷新
     refreshPanel () {
       this.getData(this.filter)
@@ -357,12 +374,12 @@ export default {
         return
       }
       this.rightBox.panel.show = true
-      this.$refs.panelBox.show(true)
+      // this.$refs.panelBox.show(true)
       this.panel = {
         id: '',
         name: ''
       }
-      this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
+      // this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
     },
     panelReload (clearShowPanel) {
       this.getTableData(clearShowPanel)
@@ -639,8 +656,11 @@ export default {
       const vm = this
       this.$get('visual/panel?type=dashboard&pageSize=-1').then(response => {
         if (response.code === 200) {
-          this.panelData = JSON.parse(JSON.stringify(response.data.list))
           let isInitData = false
+          this.panelData = JSON.parse(JSON.stringify(response.data.list))
+          this.$nextTick(() => {
+            this.$refs.selectPanel.getStarred()
+          })
           if (response.data.list.length > 0) {
             if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
               this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel))
@@ -1032,3 +1052,14 @@ export default {
   }
 }
 </script>
+<style scoped>
+.el-rate__icon{
+  cursor: pointer;
+  margin-right: 0px;
+  transform: translateY(1px);
+}
+.el-icon-star-on{
+ color:#FF9219;
+ transform: translateY(1px) scale(1.2);
+}
+</style>

From 7ebcec68d51256d1b37a1825387d04128fb884a8 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 26 May 2022 10:25:32 +0800
Subject: [PATCH 02/11] =?UTF-8?q?NEZ-1856=20style=EF=BC=9A=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/tableCommon.scss    |  4 +--
 .../common/bottomBox/bottomBox.scss           |  8 +++--
 .../src/components/chart/panelChart.vue       | 35 ++++++++++---------
 .../common/bottomBox/nzBottomDataList.vue     |  4 +--
 nezha-fronted/src/entrance/app/App.vue        |  2 +-
 nezha-fronted/src/entrance/app/main.js        | 26 +++++++-------
 6 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 4c98131e7..11930d3fd 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -411,7 +411,7 @@
     margin-right: 20px;
     height: 22px;
     margin-top: 8px;
-    border: 1px solid $--click-search-items-border-color;
+    border: 1px solid $--explore-border-color-bottom;
     background: $--background-color-empty;
 
     .el-cascader {
@@ -461,7 +461,7 @@
     }
   }
   .nz-label-search:hover {
-    border-color: #C7C7C7;
+    border-color: $--explore-border-color-bottom;
   }
 }
 .click-search-dropdown {
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index cb1b713f1..007c8b3bf 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -33,7 +33,8 @@
   }
   &>.nz-table2 {
     height: 100%;
-    padding-top: 20px !important;
+    padding: 20px 20px 10px 20px !important;
+    box-sizing: border-box;
     .table-list {
       background-color: $--background-color-empty;
       .list-width {
@@ -44,6 +45,9 @@
       }
     }
   }
+  &>.bottom-panel{
+    padding: 15px 10px 10px 10px !important;
+  }
 }
 .sub-top-tools .top-tool-btn-txt .nz-icon{
   display: inline-block;
@@ -141,9 +145,7 @@
 }
 
 .bottom-panel {
-  padding-top: 15px;
   background-color: $--background-color-empty;
-  padding-bottom: 10px;
   height: calc(100% - 30px);
 }
 .bottom-log {
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 6c1213999..5a5e0f403 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -72,6 +72,7 @@ import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 
 export default {
+  // 该组件用于获取chart的具体数据
   name: 'panelChart',
   components: {
     chartHeader,
@@ -79,44 +80,44 @@ export default {
     ChartScreenHeader
   },
   props: {
-    chartInfo: Object, // 其中的param json串已转化为对象
+    chartInfo: Object, // 其中的param json串已转化为对象  // 当前chart的具体信息
     timeRange: Array, // 时间范围
-    isFullscreen: Boolean,
-    panelLock: Boolean,
+    isFullscreen: Boolean, // 是否全屏
+    panelLock: Boolean, // 是否被锁定
     chartDetailInfo: Object,
-    from: String,
+    from: String, // 使用该组件的位置
     filter: {},
-    showHeader: {
+    showHeader: { // 是否显示header
       type: Boolean,
       default: true
     },
-    isExportHtml: {
+    isExportHtml: { // 是否是导出的html
       type: Boolean,
       default: false
     },
-    dataJson: {
+    dataJson: { // 导出的html的数据
       type: Object
     }
   },
   data () {
     return {
-      chartData: [],
+      chartData: [], // 当前chart的数据
       loading: true,
       isError: false,
-      multipleTime: false,
-      minusTime: '',
-      showAllData: false,
+      multipleTime: false, // 是否开启对比
+      minusTime: '', // 是否开启对比相差的时间
+      showAllData: false, // 是否显示所有legend
       allDataLength: 0,
-      severityData: this.$store.getters.severityData,
+      severityData: this.$store.getters.severityData, // 告警级别的数据
       severityDataWeight: this.$store.getters.severityDataWeight
       // isExportData: false
     }
   },
   computed: {
-    headerH () {
+    headerH () { // 50px header所包含的高
       return this.$store.getters.getHeaderH
     },
-    headerHPadding () {
+    headerHPadding () { // 50px header + padding 主要用于展开的空group
       return this.$store.getters.getHeaderHPadding
     }
   },
@@ -142,7 +143,7 @@ export default {
       this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
     },
     // 参数 isRefresh 标识是否是刷新操作
-    getChartData (isRefresh, params) {
+    getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
       this.loading = true
       // TODO assetInfo、endpointInfo、echarts等进行不同的处理
       let startTime = ''
@@ -172,7 +173,7 @@ export default {
       }
       this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params)
     },
-    query (elements, startTime, endTime, step, params) {
+    query (elements, startTime, endTime, step, params) { // 获取chart的数据
       this.isError = false
       this.allDataLength = 0
       // this.chartData = this.chartInfo.chartData
@@ -419,7 +420,7 @@ export default {
         this.loading = false
       }
     },
-    queryData (elements, startTime, endTime, step, params) {
+    queryData (elements, startTime, endTime, step, params) { // 获取chart的数据主要用于导出的html
       this.isError = false
       this.allDataLength = 0
       // this.chartData = this.chartInfo.chartData
diff --git a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
index 9eabb34e6..294847c5c 100644
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -99,8 +99,8 @@ export default {
     subContentClass () {
       const className = []
       switch (this.targetTab) {
-        case 'panel':
-          className.push('bottom-panel')
+        case 'panelTab':
+          className.push('nz-table2 bottom-panel')
           break
         case 'log': {
           className.push('bottom-log')
diff --git a/nezha-fronted/src/entrance/app/App.vue b/nezha-fronted/src/entrance/app/App.vue
index 13caa42e9..9949d28d3 100644
--- a/nezha-fronted/src/entrance/app/App.vue
+++ b/nezha-fronted/src/entrance/app/App.vue
@@ -22,7 +22,7 @@ export default {
     }
     const Timestamp = new Date().getTime()
     const url = 'static/config.json?Timestamp=' + Timestamp
-    const result = await this.$http.get(url)
+    const result = await this.$http.get(url) // 获取本地的config.json 判断是否需要清空localStorage 以及设备的宽 和 axios的baseUrl
     this.$axios.defaults.baseURL = result.body.baseUrl
     const version = result.body.version
     const defaultWindowWidth = result.body.width || 1024
diff --git a/nezha-fronted/src/entrance/app/main.js b/nezha-fronted/src/entrance/app/main.js
index dc67b7271..00653f23a 100644
--- a/nezha-fronted/src/entrance/app/main.js
+++ b/nezha-fronted/src/entrance/app/main.js
@@ -50,14 +50,14 @@ Vue.use(vSelectPage, {
     })
   }
 })
-Vue.use(myDatePicker)
-Vue.component('Pagination', Pagination)
-Vue.component('searchInput', searchInput)
-Vue.component('element-set', elementSet)
-Vue.component('loading', loading)
-Vue.component('pick-time', pickTime)
+Vue.use(myDatePicker) // 对element-ui的时间组件进行二次重构
+Vue.component('Pagination', Pagination) // 公用分页组件
+Vue.component('searchInput', searchInput) // 公用搜索组件
+Vue.component('element-set', elementSet) // 公用设置表头
+Vue.component('loading', loading)// 公用loading 除特殊情况使用 正常使用自定义指令 v-my-loading
+Vue.component('pick-time', pickTime)// 时间组件 包含刷新 单位 同步等
 Vue.component('myDatePicker', myDatePicker)
-Vue.component('nzDataList', nzDataList)
+Vue.component('nzDataList', nzDataList) // 公用表格父组件
 Vue.component('chartList', chartList)
 
 Vue.prototype.$axios = axios
@@ -65,11 +65,11 @@ Vue.prototype.$post = post
 Vue.prototype.$get = get
 Vue.prototype.$put = put
 Vue.prototype.$delete = del
-Vue.prototype.$loadsh = loadsh
+Vue.prototype.$loadsh = loadsh // JavaScript 实用工具库  https://www.lodashjs.com/
 Vue.prototype.$CONSTANTS = constants
 Vue.prototype.$TOOLS = tools
 Vue.prototype.$bottomBoxWindow = bottomBoxWindow // 底部上滑框控制
-Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix
+Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix // 处理string类型的时间为时间戳 单位s
 Vue.prototype.$unixTimeParseToString = unixTimeParseToString
 Vue.prototype.$chartResizeTool = chartResizeTool
 Vue.prototype.$tableSet = tableSet
@@ -101,13 +101,13 @@ Vue.mixin({
     }
   },
   computed: {
-    timeFormatMain () {
+    timeFormatMain () { // 所有组件添加默认时间格式
       return this.$store.getters.getTimeFormatMain
     },
-    getMenuList () {
+    getMenuList () { // 所有的菜单权限
       return this.$store.state.user.menuList
     },
-    getButtonList () {
+    getButtonList () { // 所有的按钮权限
       return this.$store.state.buttonList
     },
     $routePath () {
@@ -115,7 +115,7 @@ Vue.mixin({
     }
   },
   methods: {
-    hasButton (code) {
+    hasButton (code) { // 同v-has 主要判断button的权限
       return hasButton(this.$store.getters.buttonList, code)
     },
     ...mainMixin.methods

From 2b034e839e70b938f44626336208cc0825cb1c81 Mon Sep 17 00:00:00 2001
From: 18317449825 <18317449825@163.com>
Date: Thu, 26 May 2022 10:39:06 +0800
Subject: [PATCH 03/11] =?UTF-8?q?NEZ-1868=20feat=EF=BC=9Apanel=20starred?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/popBox/selectPanel.vue       | 10 +++++++---
 nezha-fronted/src/components/page/dashboard/panel.vue  |  7 ++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index 6f79ab1c8..9f52d2012 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -5,7 +5,7 @@
         <slot name="header"></slot>
         <div :class="{'movable': !panelLock}" class="select-panel-tree">
           <el-tree
-            v-if="starredData[0].children.length"
+            v-show="starredData[0].children.length"
             :data="starredData"
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
@@ -14,7 +14,8 @@
             default-expand-all
             node-key="id"
             ref="starredTree"
-            style="margin-bottom:8px"
+            style="margin-bottom:5px"
+            class="starred-tree"
             >
             <div class="tree--node" slot-scope="{ node, data }">
               <span :title="data.chartNum?node.label + ' (' + data.chartNum +' charts）':''">{{ node.label }}</span>
@@ -107,7 +108,7 @@ export default {
       immediate: true,
       handler (n) {
         this.$refs.panelTree && this.$refs.panelTree.filter(n)
-        // this.$refs.starredTree && this.$refs.starredTree.filter(n)
+        this.$refs.starredTree && this.$refs.starredTree.filter(n)
       }
     },
     showPanel: {
@@ -269,6 +270,9 @@ export default {
 }
 </script>
 <style scoped>
+.starred-tree>>>.el-tree__empty-block{
+  display: none;
+}
 .el-rate__icon{
   cursor: pointer;
   margin-right: 0px;
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 67598cdbb..75d408643 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -302,8 +302,13 @@ export default {
     refreshStarred (value) {
       // 重新赋值，否则树形菜单不更新
       this.panelData = JSON.parse(JSON.stringify(value))
+      this.$nextTick(() => {
+        this.$refs.selectPanel.$refs.starredTree.filter(this.filterPanel)
+        this.$refs.selectPanel.$refs.panelTree.filter(this.filterPanel)
+        this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
+      })
+      // // 判断当前页面收藏状态
       const starredArr = this.$refs.selectPanel.tempArr
-      // 判断当前页面收藏状态
       this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
     },
     // 新增收藏

From c0c6076fdc65444d175bc88362d3206323060633 Mon Sep 17 00:00:00 2001
From: 18317449825 <18317449825@163.com>
Date: Thu, 26 May 2022 13:53:16 +0800
Subject: [PATCH 04/11] =?UTF-8?q?perf=EF=BC=9Apanel=20starred=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E5=87=BD=E6=95=B0=E9=98=B2=E6=8A=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/popBox/selectPanel.vue  |  8 ++++--
 nezha-fronted/src/libs/bus.js                 | 26 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index 9f52d2012..d1a3ec5a5 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -88,6 +88,7 @@
 </template>
 
 <script>
+import bus from '@/libs/bus'
 export default {
   name: 'selectPanel',
   props: {
@@ -195,7 +196,7 @@ export default {
       return arr.reverse()
     },
     // 新增收藏
-    addStarred (data) {
+    addStarred: bus.debounceFn(function (data) {
       const params = {
         type: 'panel',
         tid: data.id
@@ -206,14 +207,17 @@ export default {
         }
       })
     },
+    300, true),
+
     // 删除收藏
-    delStarred (data) {
+    delStarred: bus.debounceFn(function (data) {
       this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(response => {
         if (response.code === 200) {
           this.getStarred()
         }
       })
     },
+    300, true),
     /*
         * node: 被拖的节点
         * relative: 发生关系的节点
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index 64ace019b..b2101691a 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -248,6 +248,32 @@ export default new Vue({
         }, delay)
       }
     },
+    /**
+     * @desc 防抖函数
+     * @param {需要防抖的函数} func
+     * @param {延迟时间} wait
+     * @param {是否立即执行} immediate
+     */
+    debounceFn (func, wait, immediate) {
+      let timeout
+      return function (...args) {
+        const context = this
+        if (timeout) clearTimeout(timeout)
+
+        if (immediate) {
+          const callNow = !timeout
+          timeout = setTimeout(function () {
+            timeout = null
+          }, wait)
+          if (callNow) func.apply(context, args)
+        } else {
+          timeout = setTimeout(function () {
+            func.apply(context, args)
+          }, wait)
+        }
+      }
+    },
+
     UTCTimeToConfigTimezone (utcTime) {
       let offset = localStorage.getItem('nz-sys-timezone')
       offset = moment.tz(offset).format('Z')

From c525634e58d048515a221d568fd21214b15f2a5b Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 26 May 2022 16:32:20 +0800
Subject: [PATCH 05/11] =?UTF-8?q?NEZ-1856=20style=EF=BC=9A=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common/checkbox.scss             | 3 +++
 .../src/assets/css/components/common/project/topology.scss    | 2 +-
 .../src/assets/css/components/page/config/backups.scss        | 4 ++--
 .../assets/css/components/page/monitor/project/project.scss   | 2 +-
 nezha-fronted/src/components/page/config/backups.vue          | 2 +-
 nezha-fronted/src/components/page/monitor/project/index.vue   | 2 +-
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/checkbox.scss b/nezha-fronted/src/assets/css/common/checkbox.scss
index 30f0d6d90..93d1412b4 100644
--- a/nezha-fronted/src/assets/css/common/checkbox.scss
+++ b/nezha-fronted/src/assets/css/common/checkbox.scss
@@ -24,3 +24,6 @@
   border-color: $--checkbox-border-color;
   background-color: $--background-color-empty;
 }
+.el-input__inner {
+  border-color: $--border-color-light;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/project/topology.scss b/nezha-fronted/src/assets/css/components/common/project/topology.scss
index 3a2e7fb37..425c048e4 100644
--- a/nezha-fronted/src/assets/css/components/common/project/topology.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/topology.scss
@@ -61,7 +61,7 @@
   }
   .edit-topologyLine{
     background: rgba(196,196,196,0.4) !important;
-    box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.27);
+    border-bottom: 1px solid $--explore-border-color-bottom;
   }
   .topology-scroll{
     &.v{
diff --git a/nezha-fronted/src/assets/css/components/page/config/backups.scss b/nezha-fronted/src/assets/css/components/page/config/backups.scss
index 7462acc32..f0f1e49a6 100644
--- a/nezha-fronted/src/assets/css/components/page/config/backups.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/backups.scss
@@ -1,4 +1,4 @@
-.system {
+.system.backup {
   padding-top: 40px;
   .system-config-backup {
     width: 100% !important;
@@ -144,7 +144,7 @@
           }
         }
       }
-      
+
     }
   }
   .el-table_1_column_1 .cell{
diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 9260c41a9..df8cb759d 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -18,7 +18,7 @@
   .projectTopo{
     flex: 1;
     width: calc(50% - 10px);
-    margin-right: 10px;
+    //margin-right: 10px;
     min-width: 435px;
     //div.page {
     //  textarea {
diff --git a/nezha-fronted/src/components/page/config/backups.vue b/nezha-fronted/src/components/page/config/backups.vue
index 505cfc981..e85c62fdd 100644
--- a/nezha-fronted/src/components/page/config/backups.vue
+++ b/nezha-fronted/src/components/page/config/backups.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="system">
+  <div class="system backup">
     <div class="system-config-form system-config-backup">
       <div class="system-title">{{ $t("backup.configurations") }}</div>
       <nz-data-list
diff --git a/nezha-fronted/src/components/page/monitor/project/index.vue b/nezha-fronted/src/components/page/monitor/project/index.vue
index 8106ec7d2..ced496fbf 100644
--- a/nezha-fronted/src/components/page/monitor/project/index.vue
+++ b/nezha-fronted/src/components/page/monitor/project/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main-list main-list--project">
     <projectList ref="dataList" :class="showList?'projectList':'hide'" v-has="'project_view'"/>
-    <projectTopo :class="showList?'projectTopo':'projectTopo ml10'" v-has="'project_view'"/>
+    <projectTopo :class="showList?'projectTopo':'projectTopo'" v-has="'project_view'"/>
   </div>
 </template>
 

From 9781bf619c1f0abfcff4f9fa4d534ffdb3709e32 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 27 May 2022 09:29:59 +0800
Subject: [PATCH 06/11] =?UTF-8?q?fix=EF=BC=9A=E6=B7=BB=E5=8A=A0=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BAhtml=E7=9A=84=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/tabs/panelTabNew.vue     |  6 +++++
 .../common/popBox/topToolMoreOptions.vue      | 26 +++++++++----------
 .../src/components/page/dashboard/panel.vue   |  3 +++
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index af13d7524..8c91cc92a 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -43,6 +43,9 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'panel_view'">
+                <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -76,6 +79,9 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'panel_view'">
+                <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
index f083ad3cd..a316b09be 100644
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -500,19 +500,19 @@ export default {
         this.importBox.width = '600px'
       } else if (type == 2) { // export
         this.importBox.title = this.$t('overall.exportExcel')
-        this.importBox.width = this.exportBoxShow ? '850px' : '580px'
-        if (this.exportBoxShow) {
-          this.formatArr = [
-            { name: 'XLSX', value: 1 },
-            { name: 'CSV', value: 2 },
-            { name: 'JSON', value: 3 },
-            { name: 'PDF', value: 4 },
-            { name: 'Html', value: 5 }]
-        } else {
-          this.formatArr = [{ name: 'XLSX', value: 1 },
-            { name: 'CSV', value: 2 },
-            { name: 'JSON', value: 3 }]
-        }
+        this.importBox.width = '580px'
+        // if (this.exportBoxShow) {
+        //   this.formatArr = [
+        //     { name: 'XLSX', value: 1 },
+        //     { name: 'CSV', value: 2 },
+        //     { name: 'JSON', value: 3 },
+        //     { name: 'PDF', value: 4 },
+        //     { name: 'Html', value: 5 }]
+        // } else {
+        //   this.formatArr = [{ name: 'XLSX', value: 1 },
+        //     { name: 'CSV', value: 2 },
+        //     { name: 'JSON', value: 3 }]
+        // }
       }
     },
     getTimeString () {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 63fac9a6d..b40ca847c 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -77,6 +77,9 @@
                   <el-dropdown-item v-has="'panel_view'">
                     <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
                   </el-dropdown-item>
+                  <el-dropdown-item v-has="'panel_view'">
+                    <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+                  </el-dropdown-item>
                 </template>
               </top-tool-more-options>
             </div>

From b06f8bc962a6335de2c07fac683de7dff60225df Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 27 May 2022 09:37:57 +0800
Subject: [PATCH 07/11] =?UTF-8?q?fix=EF=BC=9A=E6=B7=BB=E5=8A=A0=E5=9B=BD?=
 =?UTF-8?q?=E9=99=85=E5=8C=96=20=E4=BB=A5=E5=8F=8A=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BAhtml=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/bottomBox/tabs/panelTabNew.vue      | 4 ++--
 nezha-fronted/src/components/page/dashboard/panel.vue         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 8c91cc92a..f726cd220 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -44,7 +44,7 @@
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
               <el-dropdown-item v-has="'panel_view'">
-                <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+                <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.snapshoot') }}</div>
               </el-dropdown-item>
             </template>
           </top-tool-more-options>
@@ -80,7 +80,7 @@
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
               <el-dropdown-item v-has="'panel_view'">
-                <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+                <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.snapshoot') }}</div>
               </el-dropdown-item>
             </template>
           </top-tool-more-options>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index a4a5129c0..e85bea43b 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -80,7 +80,7 @@
                     <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
                   </el-dropdown-item>
                   <el-dropdown-item v-has="'panel_view'">
-                    <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+                    <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.snapshoot') }}</div>
                   </el-dropdown-item>
                 </template>
               </top-tool-more-options>

From 010ec8e76bed5b03274b9567e486382625659edf Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 27 May 2022 09:50:27 +0800
Subject: [PATCH 08/11] =?UTF-8?q?NEZ-1871=20=20fix=EF=BC=9Achart-line=20?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=B6=85=E8=BF=87=E4=B8=80=E5=A4=A9=E6=9C=AA?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=20yy-mm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/chart/chart/chartTimeSeries.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 02151ec30..a68c38970 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -197,13 +197,13 @@ export default {
         let minute = tData.getMinutes()
         minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
         if (minTime !== null && maxTime !== null) {
-          const diffSec = (maxTime - minTime) / 1000
+          const diffSec = (maxTime - minTime)
           const secOneDay = 24 * 60 * 60// 1天的秒数
           const secOneMonth = secOneDay * 30// 30天的秒数
           if (diffSec <= secOneDay) { // 同一天
             return [hour, minute].join(':')
           } else if (diffSec < secOneMonth) { // 大于1天，小于30天
-            return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
+            return [tData.getMonth() + 1, tData.getDate()].join('/') + '\n' + [hour, minute].join(':')
           } else { // 大于等于30天
             return [tData.getMonth() + 1, tData.getDate()].join('/')
           }

From fa03e9a57483f42edee3e0e5cdff52b9a959e0b0 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 27 May 2022 13:13:00 +0800
Subject: [PATCH 09/11] =?UTF-8?q?NEZ-1868=20style=EF=BC=9A=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9starred=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/page/dashboard/panel.scss  |  8 +++-
 .../components/common/popBox/selectPanel.vue  | 48 +++++++++++++++----
 .../src/components/page/dashboard/panel.vue   | 19 ++++++--
 3 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
index 94351ddbe..0fc7d3f00 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index d1a3ec5a5..23e3a8528 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/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>
-                  <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 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;
- transform: scale(1.2);
+  color:#FF9219 !important;
+  transform: scale(1.2);
 }
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 75d408643..0c5f180a2 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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>
-                  <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>
+                  <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">
@@ -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;
- transform: translateY(1px) scale(1.2);
+  color:#FF9219 !important;
+  transform: translateY(1px) scale(1.2);
 }
 </style>

From 92b6ef84bbef3873e927b97b8835210157eda813 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 27 May 2022 14:01:57 +0800
Subject: [PATCH 10/11] =?UTF-8?q?fix=EF=BC=9Aping=20trance=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/rightBox/moduleBox.scss |  4 +-
 .../assets/css/components/page/tool/ping.scss | 43 ++++++----
 .../css/components/page/tool/trace.scss       | 43 ++++++----
 .../src/assets/css/themes/theme-dark.scss     |  2 +
 .../src/assets/css/themes/theme-light.scss    |  3 +-
 .../src/components/page/tool/ping.vue         | 84 ++++++++++++++++---
 .../src/components/page/tool/trace.vue        | 80 +++++++++++++++---
 7 files changed, 200 insertions(+), 59 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
index b1ff04c08..e59d2918a 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -269,8 +269,8 @@
   .ti-input {
     border: 1px solid $--border-color-light;
     .ti-tag.ti-valid {
-      background-color: $--value-background-color;
-      color: $--value-color;
+      background-color: $--label-background-color !important;;
+      color: $--color-text-primary !important;;
     }
     .ti-new-tag-input {
       color: $--color-text-regular !important;
diff --git a/nezha-fronted/src/assets/css/components/page/tool/ping.scss b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
index f812586b8..02181328e 100644
--- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
@@ -1,3 +1,7 @@
+.ping-popover.el-popover {
+  padding: 0;
+  margin-top: 5px;
+}
 .ping{
   .top-tool-left{
     // align-items: center;
@@ -20,8 +24,8 @@
       border-radius: 2px;
       border: 1px solid $--button-icon-border-color !important;
       .ti-tag.ti-valid {
-        background-color: $--value-background-color;
-        color: $--value-color;
+        background-color: $--label-background-color !important;;
+        color: $--color-text-primary !important;;
       }
       .ti-new-tag-input {
         color: $--color-text-regular !important;
@@ -35,20 +39,31 @@
     }
     .ti-input:hover{}
   }
-  .choose{
-    width: 50px !important;
-    height: 36px !important;
-    line-height: 36px !important;
-    padding: 0 !important;
-    border-radius: 2px 0px 0px 2px !important;
-    border-right: none !important;
-    span{
-      display: flex;
-      align-content: center;
-      justify-content: center;
+  .choose-box {
+    overflow: hidden;
+    width: calc(100% - 7px);
+    height: 30px;
+    border: 1px solid $--border-color-light;
+    padding-left: 5px;
+    display: flex;
+    //align-items: center;
+    .nz-icon-arrow-down6{
+      font-size: 12px;
+      color: $--color-text-secondary;
     }
+  }
+  .choose{
+    width: auto;
+    height: 26px !important;
+    line-height: 30px !important;
+    padding: 2px 4px !important;
+    border-radius: 2px !important;
+    border-right: none !important;
+    background: $--label-background-color;
+    margin-right: 5px;
+    color: $--color-text-primary;
     i{
-      font-size: 20px !important;
+      font-size: 14px !important;
     }
   }
   .btn{
diff --git a/nezha-fronted/src/assets/css/components/page/tool/trace.scss b/nezha-fronted/src/assets/css/components/page/tool/trace.scss
index e717af1f8..9ed19e8ea 100644
--- a/nezha-fronted/src/assets/css/components/page/tool/trace.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/trace.scss
@@ -19,8 +19,8 @@
       border-radius: 2px;
       border: 1px solid $--button-icon-border-color !important;
       .ti-tag.ti-valid {
-        background-color: $--value-background-color;
-        color: $--value-color;
+        background-color: $--label-background-color !important;;
+        color: $--color-text-primary !important;;
       }
       .ti-new-tag-input {
         color: $--color-text-regular !important;
@@ -33,20 +33,31 @@
     }
     .ti-input:hover{}
   }
-  .choose{
-    width: 50px !important;
-    height: 36px !important;
-    line-height: 36px !important;
-    padding: 0 !important;
-    border-radius: 2px 0px 0px 2px !important;
-    border-right: none !important;
-    span{
-      display: flex;
-      align-content: center;
-      justify-content: center;
+  .choose-box {
+    overflow: hidden;
+    width: calc(100% - 7px);
+    height: 30px;
+    border: 1px solid $--border-color-light;
+    padding-left: 5px;
+    display: flex;
+    //align-items: center;
+    .nz-icon-arrow-down6{
+      font-size: 12px;
+      color: $--color-text-secondary;
     }
+  }
+  .choose{
+    width: auto;
+    height: 26px !important;
+    line-height: 30px !important;
+    padding: 2px 4px !important;
+    border-radius: 2px !important;
+    border-right: none !important;
+    background: $--label-background-color;
+    margin-right: 5px;
+    color: $--color-text-primary;
     i{
-      font-size: 20px !important;
+      font-size: 14px !important;
     }
   }
   .btn{
@@ -103,7 +114,7 @@
       }
       .nz-icon-edit{
         font-size: 26px;
-      } 
+      }
       .el-icon-more{
         font-size: 22px;
       }
@@ -163,4 +174,4 @@
 .pop-list{
   max-height: 144px;
   overflow-y: auto;
-}
\ No newline at end of file
+}
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 86a16ff18..bd66a71b8 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -252,6 +252,8 @@ $--right-box-sub-title-border-color: $--border-color-light;
 /* 16.tooltip */
 $--tooltip-background-color: #222329;
 $--tooltip-border-color: rgba(112,116,122,0.6);
+/* 17.label*/
+$--label-background-color: #18171D;
 
 /*** themes/common.scss是与主题切换无关的变量 ***/
 @import './src/common/var.scss';
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 7fe14a84c..e5a1e8949 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -247,7 +247,8 @@ $--right-box-sub-title-border-color: $--right-box-sub-title-background-color;
 /* 16.tooltip */
 $--tooltip-background-color: #ffffff;
 $--tooltip-border-color: rgba(119,131,145,0.6);
-
+/* 17.label*/
+$--label-background-color: #D8d8d8;
 
 /*** themes/common.scss是与主题切换无关的变量 ***/
 @import './src/common/var.scss';
diff --git a/nezha-fronted/src/components/page/tool/ping.vue b/nezha-fronted/src/components/page/tool/ping.vue
index 9667a84c2..1089a23e5 100644
--- a/nezha-fronted/src/components/page/tool/ping.vue
+++ b/nezha-fronted/src/components/page/tool/ping.vue
@@ -25,14 +25,46 @@
         <div  class="tools-header-center">
           <el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px">
             <el-form-item style="margin-bottom:10px" :label="$t('ping.dcs')">
-            <el-select v-model="checked" multiple @change="checkedChange"  >
-              <el-option
-                :key="item.id"
-                v-for="item in dataCenter"
-                :label="item.name"
-                :value="item.id">
-              </el-option>
-            </el-select>
+<!--            <el-select v-model="checked" multiple @change="checkedChange"  >-->
+<!--              <el-option-->
+<!--                :key="item.id"-->
+<!--                v-for="item in dataCenter"-->
+<!--                :label="item.name"-->
+<!--                :value="item.id">-->
+<!--              </el-option>-->
+<!--            </el-select>-->
+              <el-popover
+                placement="bottom"
+                width="220"
+                trigger="manual"
+                v-model="visible"
+                v-clickoutside="close"
+                popper-class="no-style-class ping-popover"
+              >
+                <el-form-item style="margin-bottom:0px">
+                  <ul class="pop-list-wrap">
+                    <li class="el-dropdown-menu__item">
+                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">{{$t('overall.all')}}</el-checkbox>
+                    </li>
+                    <ul class="pop-list">
+                      <el-checkbox-group v-model="checked" @change="checkedChange">
+                        <li class="el-dropdown-menu__item" v-for="item in dataCenter" :key="item.id">
+                          <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
+                        </li>
+                      </el-checkbox-group>
+                    </ul>
+                  </ul>
+                </el-form-item>
+                <div slot="reference" class="choose-box"  @click="triggerVisible">
+                  <div v-if="checkAll" style="flex: 1">All</div>
+                  <div v-else style="flex: 1">
+                    <span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1">
+                      <span> {{item.name}} <i class="nz-icon nz-icon-close" @click="removeCheckedItem(item.id)"/></span>
+                    </span>
+                  </div>
+                  <i class="nz-icon nz-icon-arrow-down6"/>
+                </div>
+              </el-popover>
             </el-form-item>
             <el-form-item prop="timeout" style="margin-bottom:10px" :label="$t('ping.timeout')">
               <div class="wrap" style="height:32px">
@@ -78,10 +110,10 @@
             <span class="nz-icon nz-icon-edit" slot="icon"></span>
             <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP</p>
           </el-step>
-          <el-step>
-            <span class="el-icon-more" slot="icon"></span>
-            <p class="txt" slot="title">{{$t('ping.filter')}}</p>
-          </el-step>
+<!--          <el-step>-->
+<!--            <span class="el-icon-more" slot="icon"></span>-->
+<!--            <p class="txt" slot="title">{{$t('ping.filter')}}</p>-->
+<!--          </el-step>-->
           <el-step>
             <span class="msg" slot="icon">Ping</span>
             <p class="txt" slot="title">Ping {{$t('config.terminallog.cmd.cmd')}}</p>
@@ -156,7 +188,7 @@ export default {
       tableData: [],
       ruleForm: {
         // 超时时间
-        timeout: ''
+        timeout: 30
       },
       formRules: {
         timeout: [{ validator: positiveInteger, trigger: 'blur' }]
@@ -166,6 +198,22 @@ export default {
   created () {
     this.getDataCenter()
   },
+  mounted () {
+    const tiInput = document.getElementsByClassName('ti-input')[0]
+    tiInput.addEventListener('click', (e) => {
+      const event = e || window.event
+      if (event && event.stopPropagation) {
+        event.stopPropagation()
+      } else {
+        event.cancelBubble = true
+      }
+      if (event.path[0].className === 'ti-input') {
+        const tiInputBox = document.getElementsByClassName('ti-new-tag-input')[0]
+        console.log(tiInputBox)
+        tiInputBox.focus()
+      }
+    })
+  },
   methods: {
     // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
     validateHost: bus.debounce(function () {
@@ -217,6 +265,16 @@ export default {
       this.checkAll = checkedCount === this.dataCenter.length
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataCenter.length
     },
+    // 删除选中
+    removeCheckedItem (id, e) {
+      const event = e || window.event
+      if (event && event.stopPropagation) {
+        event.stopPropagation()
+      } else {
+        event.cancelBubble = true
+      }
+      this.checked = this.checked.filter(dcId => dcId !== id)
+    },
     // 开始任务
     startTask () {
       if (!this.flag) {
diff --git a/nezha-fronted/src/components/page/tool/trace.vue b/nezha-fronted/src/components/page/tool/trace.vue
index 2c3c67b47..a0ac50c1a 100644
--- a/nezha-fronted/src/components/page/tool/trace.vue
+++ b/nezha-fronted/src/components/page/tool/trace.vue
@@ -24,14 +24,46 @@
           <div  class="tools-header-center">
             <el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px">
               <el-form-item style="margin-bottom:10px" :label="$t('ping.dcs')">
-                <el-select v-model="checked" multiple @change="checkedChange"  >
-                  <el-option
-                    :key="item.id"
-                    v-for="item in dataCenter"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
+                <!--            <el-select v-model="checked" multiple @change="checkedChange"  >-->
+                <!--              <el-option-->
+                <!--                :key="item.id"-->
+                <!--                v-for="item in dataCenter"-->
+                <!--                :label="item.name"-->
+                <!--                :value="item.id">-->
+                <!--              </el-option>-->
+                <!--            </el-select>-->
+                <el-popover
+                  placement="bottom"
+                  width="220"
+                  trigger="manual"
+                  v-model="visible"
+                  v-clickoutside="close"
+                  popper-class="no-style-class ping-popover"
+                >
+                  <el-form-item style="margin-bottom:0px">
+                    <ul class="pop-list-wrap">
+                      <li class="el-dropdown-menu__item">
+                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">{{$t('overall.all')}}</el-checkbox>
+                      </li>
+                      <ul class="pop-list">
+                        <el-checkbox-group v-model="checked" @change="checkedChange">
+                          <li class="el-dropdown-menu__item" v-for="item in dataCenter" :key="item.id">
+                            <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
+                          </li>
+                        </el-checkbox-group>
+                      </ul>
+                    </ul>
+                  </el-form-item>
+                  <div slot="reference" class="choose-box"  @click="triggerVisible">
+                    <div v-if="checkAll" style="flex: 1">All</div>
+                    <div v-else style="width: 100%;flex: 1">
+                    <span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1">
+                      <span> {{item.name}} <i class="nz-icon nz-icon-close" @click="removeCheckedItem(item.id)"/></span>
+                    </span>
+                    </div>
+                    <i class="nz-icon nz-icon-arrow-down6"/>
+                  </div>
+                </el-popover>
               </el-form-item>
               <el-form-item prop="maxHops" style="margin-bottom:10px" :label="$t('trace.maxHops')">
                 <div class="wrap" style="height:32px">
@@ -81,10 +113,6 @@
             <span class="nz-icon nz-icon-edit" slot="icon"></span>
             <p class="txt" slot="title">{{$t('overall.placeHolder')}}IP</p>
           </el-step>
-          <el-step>
-            <span class="el-icon-more" slot="icon"></span>
-            <p class="txt" slot="title">{{$t('ping.filter')}}</p>
-          </el-step>
           <el-step>
             <span class="msg" slot="icon">Trace</span>
             <p class="txt" slot="title">Trace {{$t('config.terminallog.cmd.cmd')}}</p>
@@ -159,7 +187,7 @@ export default {
         // 最大跃点数
         maxHops: '',
         // 超时时间
-        timeout: ''
+        timeout: 30
       },
       formRules: {
         timeout: [{ validator: positiveInteger, trigger: 'blur' }],
@@ -170,6 +198,22 @@ export default {
   created () {
     this.getDataCenter()
   },
+  mounted () {
+    const tiInput = document.getElementsByClassName('ti-input')[0]
+    tiInput.addEventListener('click', (e) => {
+      const event = e || window.event
+      if (event && event.stopPropagation) {
+        event.stopPropagation()
+      } else {
+        event.cancelBubble = true
+      }
+      if (event.path[0].className === 'ti-input') {
+        const tiInputBox = document.getElementsByClassName('ti-new-tag-input')[0]
+        console.log(tiInputBox)
+        tiInputBox.focus()
+      }
+    })
+  },
   methods: {
     // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
     validateHost: bus.debounce(function () {
@@ -221,6 +265,16 @@ export default {
       this.checkAll = checkedCount === this.dataCenter.length
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataCenter.length
     },
+    // 删除选中
+    removeCheckedItem (id, e) {
+      const event = e || window.event
+      if (event && event.stopPropagation) {
+        event.stopPropagation()
+      } else {
+        event.cancelBubble = true
+      }
+      this.checked = this.checked.filter(dcId => dcId !== id)
+    },
     // 开始任务
     startTask () {
       if (!this.flag) {

From a668ea9bd0b77badd729d183d0baf5168140df7f Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 27 May 2022 16:54:02 +0800
Subject: [PATCH 11/11] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E6=AF=8F?=
 =?UTF-8?q?=E6=AC=A1=E7=82=B9=E5=87=BB=E9=83=BD=E5=88=B7=E6=96=B0=E6=A0=91?=
 =?UTF-8?q?=E5=BD=A2=E6=8E=A7=E4=BB=B6bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/popBox/selectPanel.vue  | 19 +++++++++++++------
 .../src/components/page/dashboard/panel.vue   | 12 +++++++-----
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index 23e3a8528..e6498bc71 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -165,7 +165,7 @@ export default {
   },
   methods: {
     // 获取收藏的列表
-    async getStarred () {
+    async getStarred (type) {
       const params = {
         type: 'panel'
       }
@@ -174,7 +174,12 @@ export default {
         this.tempArr = []
         this.recursionStarred(this.panelData, response.data)
         this.starredData[0].children = this.formatStarred(this.tempArr)
-        this.$emit('refreshStarred', this.panelData)
+        if (type === 'tree') {
+          // 刷新树形控件
+          this.$emit('refreshStarred', { data: this.panelData, type: 'tree' })
+        } else {
+          this.$emit('refreshStarred', { data: this.panelData })
+        }
       }
     },
     // 比对收藏的列表和全部列表 改变状态
@@ -221,9 +226,10 @@ export default {
         type: 'panel',
         tid: data.id
       }
-      this.$post('/sys/user/starred', params).then(response => {
+      this.$post('/sys/user/starred', params).then(async response => {
         if (response.code === 200) {
-          this.getStarred()
+          await this.getStarred()
+          data.starred = true
         }
       })
     },
@@ -231,9 +237,10 @@ export default {
 
     // 删除收藏
     delStarred: bus.debounceFn(function (data) {
-      this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(response => {
+      this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
         if (response.code === 200) {
-          this.getStarred()
+          await this.getStarred()
+          data.starred = false
         }
       })
     },
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 414e845c7..855825b96 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -308,15 +308,17 @@ export default {
     }
   },
   methods: {
-    refreshStarred (value) {
-      // 重新赋值，否则树形菜单不更新
-      this.panelData = JSON.parse(JSON.stringify(value))
+    // 刷新树形菜单视图
+    refreshStarred ({ data, type }) {
+      if (type === 'tree') {
+        this.panelData = JSON.parse(JSON.stringify(data))
+      }
       this.$nextTick(() => {
         this.$refs.selectPanel.$refs.starredTree.filter(this.filterPanel)
         this.$refs.selectPanel.$refs.panelTree.filter(this.filterPanel)
         this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
       })
-      // // 判断当前页面收藏状态
+      // 判断当前页面收藏状态
       const starredArr = this.$refs.selectPanel.tempArr
       this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
     },
@@ -673,7 +675,7 @@ export default {
           let isInitData = false
           this.panelData = JSON.parse(JSON.stringify(response.data.list))
           this.$nextTick(() => {
-            this.$refs.selectPanel.getStarred()
+            this.$refs.selectPanel.getStarred('tree')
           })
           if (response.data.list.length > 0) {
             if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {