diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectDashboard.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectDashboard.scss
new file mode 100644
index 000000000..8da347867
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/popBox/selectDashboard.scss
@@ -0,0 +1,162 @@
+.movable {
+  .el-tree-node__content {
+    cursor: move;
+
+    .tree--node > span:first-of-type {
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-word;
+    }
+
+    .tree--node > span:last-of-type > span {
+      cursor: pointer;
+    }
+  }
+  .el-dropdown-menu__item {
+    padding: 0;
+    div {
+      padding: 0 20px;
+    }
+  }
+}
+.tree--node > span:last-of-type > span > i {
+  font-weight: normal !important;
+}
+.select-panel-tree {
+  height: 350px;
+  overflow: auto;
+}
+.select-panel-tree .el-tree-node__content {
+  height: 34px;
+  line-height: 34px;
+}
+.select-panel-tree .el-tree-node__content:hover {
+  color: $--color-primary;
+}
+.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: $--background-color-base;
+  font-weight: bold;
+  color: $--color-primary;
+}
+.tree--node {
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 28px);
+}
+.tree--node span:nth-of-type(1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
+}
+.tree--operation {
+  opacity: 0;
+}
+.tree--node:hover .tree--operation {
+  opacity: 1;
+}
+.panel-dropdown-btn {
+  color: #60BEFF;
+}
+.panel-dropdown-btn:hover {
+  color: #409EFF;
+}
+.panel-dropdown-btn-delete {
+  color: #F98D9A;
+}
+
+.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;
+        }
+      }
+    }
+    .dashboard-select-tail{
+      border: none;
+      display: flex;
+      justify-content: center;
+      .dashboard-select-add{
+        width: 88%;
+        height: 30px;
+        background: #FF9219;
+        border-radius: 2px;
+        color: #fff;
+        display: flex;
+        font-size: 14px;
+        justify-content: center;
+        align-items: 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);
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss
index 38dcafcae..7052c4762 100644
--- a/nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss
@@ -71,91 +71,3 @@
   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);
-  }
-}
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 518737a84..1f13dcb64 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -22,6 +22,7 @@
 @import './common/popBox/selectAssetMetaGroup.scss';
 @import './common/popBox/selectAssetType.scss';
 @import './common/popBox/selectPanel.scss';
+@import './common/popBox/selectDashboard.scss';
 @import './common/popBox/selectWalk.scss';
 @import './common/project/popData/Info.scss';
 @import './common/project/L5/popData/common.scss';
diff --git a/nezha-fronted/src/components/common/popBox/selectDashboard.vue b/nezha-fronted/src/components/common/popBox/selectDashboard.vue
new file mode 100644
index 000000000..5fb1c9473
--- /dev/null
+++ b/nezha-fronted/src/components/common/popBox/selectDashboard.vue
@@ -0,0 +1,255 @@
+<template>
+  <el-popover :placement="placement" popper-class="'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" transition="slide" v-model="popBox.show" :width="500" :disabled="disabled">
+    <div class="panel-select-wrap">
+      <div class="panel-select-left">
+        <ul class="panel-select-list">
+          <li class="panel-select-item" :class="{active:currentTab===item.value}" v-for="item in tabList" :key="item.value" @click="tabChange(item.value)">
+            <i class="nz-icon" :class="item.icon"></i>
+            <span>{{item.name}}</span>
+          </li>
+        </ul>
+        <div slot="default">
+          <slot name="tail"></slot>
+        </div>
+      </div>
+      <div class="pop-item-wider">
+        <div class="panel-select-header">
+          <el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="padding:0 12px"></el-input>
+        </div>
+        <div :class="{'movable': !panelLock}" class="select-panel-tree">
+          <el-tree
+            :data="panelData"
+            :draggable="!panelLock"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            :props="{label: 'name', children: 'children'}"
+            @node-click="selectDashboard"
+            @node-drop="nodeDrop"
+            check-on-click-node
+            check-strictly
+            default-expand-all
+            highlight-current
+            node-key="id"
+            ref="panelTree">
+            <div class="tree--node" slot-scope="{ node, data }">
+              <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">
+                    <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="data.id">
+                    <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>
+            </div>
+          </el-tree>
+        </div>
+      </div>
+    </div>
+    <div slot="reference">
+      <slot name="trigger"></slot>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+export default {
+  name: 'selectDashboard',
+  props: {
+    placement: { type: String },
+    panelData: { type: Array },
+    showPanel: { type: Object },
+    panelLock: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+  mounted () {
+    this.$refs.panelTree.setCurrentKey(this.panel)
+  },
+  watch: {
+    filterPanel: {
+      immediate: true,
+      handler (n) {
+        this.$refs.panelTree && this.$refs.panelTree.filter(n)
+        this.$refs.starredTree && this.$refs.starredTree.filter(n)
+      }
+    },
+    showPanel: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.panel = JSON.parse(JSON.stringify(n))
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      popBox: { show: false },
+      panel: { id: 0, name: '' },
+      tabList: [
+        { name: '全部仪表盘', icon: 'nz-icon-a-leimucuquanbu', value: 'all' },
+        { name: '我的收藏', icon: 'nz-icon-xingzhuang', value: 'starred' },
+        { name: '我的创建', icon: 'nz-icon-wodechuangjian', value: 'create' },
+        { name: '最近浏览', icon: 'nz-icon-liulanlishi', value: 'browse' }
+      ],
+      currentTab: 'all',
+      filterPanel: ''
+    }
+  },
+  methods: {
+    // 左侧tab点击
+    tabChange (value) {
+      if (this.currentTab !== value) {
+        this.currentTab = value
+        console.log(666)
+      }
+    },
+    // 获取收藏的列表
+    async getStarred (type) {
+      // 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.list)
+      //   if (type === 'tree') {
+      //     // 刷新树形控件
+      //     this.$emit('refreshStarred', { data: this.panelData, type: 'tree' })
+      //   } else {
+      //     this.$emit('refreshStarred', { data: 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: bus.debounceFn(function (data) {
+      const params = {
+        type: 'panel',
+        tid: data.id
+      }
+      this.$post('/sys/user/starred', params).then(async response => {
+        if (response.code === 200) {
+          await this.getStarred()
+          data.starred = true
+        }
+      })
+    },
+    300, true),
+
+    // 删除收藏
+    delStarred: bus.debounceFn(function (data) {
+      this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
+        if (response.code === 200) {
+          await this.getStarred()
+          data.starred = false
+        }
+      })
+    },
+    300, true),
+    /*
+        * node: 被拖的节点
+        * relative: 发生关系的节点
+        * position: ['before', 'after', 'inner'] 与relative节点的关系
+        * */
+    nodeDrop (node, relative, position, event) {
+      if (position === 'inner') {
+        node.data.pid = relative.data.id
+      } else {
+        node.data.pid = relative.data.pid
+      }
+      this.updateWeight()
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    updateWeight () {
+      const toUpdate = []
+      let count = 0
+
+      handler(this.panelData)
+      function handler (panelData) {
+        panelData.forEach(panel => {
+          panel.weight = count++
+          toUpdate.push({ id: panel.id, pid: panel.pid, weight: panel.weight })
+          if (panel.children && panel.children.length > 0) {
+            handler(panel.children)
+          }
+        })
+      }
+      this.getStarred()
+      this.$put('visual/panel/tree', toUpdate)
+    },
+    deletePanel (data) {
+      this.$emit('deletePanel', data)
+    },
+    editPanel (data) {
+      this.$emit('editPanel', data)
+    },
+    esc () {
+      this.popBox.show = false
+    },
+    // 确认选择某个节点，与父组件交互
+    selectDashboard (data, checked, child) {
+      // 判断是否点击的Starred Panels或All Panels
+      if (!data.id) {
+        this.$refs.panelTree.setCurrentKey(this.showPanel)
+        return false
+      }
+      this.$emit('selectDashboard', data)
+      this.$refs.panelTree.setCurrentKey(data)
+      this.esc()
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index fa6372587..02f91ab5b 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -1,68 +1,13 @@
 <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 : 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>
+  <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-show="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:5px"
-            class="starred-tree"
-            >
-            <div class="tree--node" slot-scope="{ node, data }">
-              <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">
-                    <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="data.id">
-                    <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>
-            </div>
-          </el-tree>
-          <el-tree
-            :data="treeData"
+            :data="panelData"
             :draggable="!panelLock"
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
@@ -76,24 +21,20 @@
             node-key="id"
             ref="panelTree">
             <div class="tree--node" slot-scope="{ node, data }">
-              <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">
+              <span :title="node.label + ' (' + data.chartNum +' charts）' ">{{ node.label }}</span>
+              <el-row class="block-col-2" v-if="!panelLock"  style="width: 35px;">
                 <el-col>
-                  <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
+                  <el-dropdown placement="bottom-end" trigger="click">
                     <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>
+                        <div @click="editPanel(data)"><i v-has="'panel_edit'" 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="data.id">
-                    <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>
             </div>
@@ -104,11 +45,13 @@
     <div slot="reference">
       <slot name="trigger"></slot>
     </div>
+    <div slot="default">
+      <slot name="tail"></slot>
+    </div>
   </el-popover>
 </template>
 
 <script>
-import bus from '@/libs/bus'
 export default {
   name: 'selectPanel',
   props: {
@@ -129,7 +72,6 @@ export default {
       immediate: true,
       handler (n) {
         this.$refs.panelTree && this.$refs.panelTree.filter(n)
-        this.$refs.starredTree && this.$refs.starredTree.filter(n)
       }
     },
     showPanel: {
@@ -139,14 +81,6 @@ export default {
           this.panel = JSON.parse(JSON.stringify(n))
         }
       }
-    },
-    panelData: {
-      immediate: true,
-      handler (n) {
-        if (n) {
-          this.treeData[0].children = n
-        }
-      }
     }
     /* panel: {
           immediate: true,
@@ -161,108 +95,10 @@ export default {
   data () {
     return {
       popBox: { show: false },
-      panel: { id: 0, name: '' },
-      // 全部列表
-      treeData: [
-        {
-          id: 0,
-          name: 'All Panels',
-          children: []
-        }
-      ],
-      // 收藏夹列表
-      starredData: [
-        {
-          id: 0,
-          name: 'Starred Panels',
-          children: []
-        }
-      ],
-      tempArr: []
+      panel: { id: 0, name: '' }
     }
   },
   methods: {
-    // 获取收藏的列表
-    async getStarred (type) {
-      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.list)
-        this.starredData[0].children = this.formatStarred(this.tempArr)
-        if (type === 'tree') {
-          // 刷新树形控件
-          this.$emit('refreshStarred', { data: this.panelData, type: 'tree' })
-        } else {
-          this.$emit('refreshStarred', { data: 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: bus.debounceFn(function (data) {
-      const params = {
-        type: 'panel',
-        tid: data.id
-      }
-      this.$post('/sys/user/starred', params).then(async response => {
-        if (response.code === 200) {
-          await this.getStarred()
-          data.starred = true
-        }
-      })
-    },
-    300, true),
-
-    // 删除收藏
-    delStarred: bus.debounceFn(function (data) {
-      this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
-        if (response.code === 200) {
-          await this.getStarred()
-          data.starred = false
-        }
-      })
-    },
-    300, true),
     /*
         * node: 被拖的节点
         * relative: 发生关系的节点
@@ -283,8 +119,8 @@ export default {
     updateWeight () {
       const toUpdate = []
       let count = 0
-
       handler(this.panelData)
+
       function handler (panelData) {
         panelData.forEach(panel => {
           panel.weight = count++
@@ -294,7 +130,7 @@ export default {
           }
         })
       }
-      this.getStarred()
+
       this.$put('visual/panel/tree', toUpdate)
     },
     deletePanel (data) {
@@ -308,11 +144,6 @@ export default {
     },
     // 确认选择某个节点，与父组件交互
     selectPanel (data, checked, child) {
-      // 判断是否点击的Starred Panels或All Panels
-      if (!data.id) {
-        this.$refs.panelTree.setCurrentKey(this.showPanel)
-        return false
-      }
       this.$emit('selectPanel', data)
       this.$refs.panelTree.setCurrentKey(data)
       this.esc()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index ec0282550..649e3d434 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/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="padding:0 12px"></el-input>
+                <el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>
               </div>
             </template>
             <template v-slot:trigger>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index abf7251ca..858121b5c 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -13,10 +13,9 @@
           </div>
           <template v-else>
             <div class="top-tool-left" style="cursor: pointer;">
-              <select-panel
-                ref="selectPanel"
+              <select-dashboard
+                ref="selectDashboard"
                 @refreshStarred="refreshStarred"
-                :filter-panel="filterPanel"
                 :panel-data="panelData"
                 :panel-lock="panelLock"
                 :placement="'bottom-start'"
@@ -24,13 +23,7 @@
                 style="display: inline-block;padding: 0"
                 @deletePanel="del"
                 @editPanel="edit"
-                @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="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>
+                @selectDashboard="panelChange">
                 <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>
@@ -38,14 +31,15 @@
                   <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">
+                  <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-panel>
+              </select-dashboard>
             </div>
+
             <div class="top-tool-right">
 <!--              <div class="top-tool-search margin-r-20">-->
 <!--                <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">-->
@@ -160,7 +154,7 @@
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
-import selectPanel from '../../common/popBox/selectPanel'
+import selectDashboard from '../../common/popBox/selectDashboard'
 import panelBox from '@/components/common/rightBox/panelBox'
 import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
@@ -285,7 +279,6 @@ export default {
         id: 4
       },
       panelId: 0,
-      filterPanel: '',
       // ---图表相关参数--end
       scrollbarWrap: null,
       batchDeleteObjs: [],
@@ -301,7 +294,7 @@ export default {
     'pick-time': pickTime,
     'panel-box': panelBox,
     topToolMoreOptions,
-    selectPanel,
+    selectDashboard,
     chartTempBox,
     chartRightBox
   },
@@ -319,25 +312,24 @@ export default {
   methods: {
     // 刷新树形菜单视图
     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)
+      // if (type === 'tree') {
+      //   this.panelData = JSON.parse(JSON.stringify(data))
+      // }
+      // this.$nextTick(() => {
+      //   // this.$refs.selectDashboard.$refs.panelTree.filter(this.filterPanel)
+      //   this.$refs.selectDashboard.$refs.panelTree.setCurrentKey(this.showPanel)
+      // })
+      // // 判断当前页面收藏状态
+      // const starredArr = this.$refs.selectDashboard.tempArr
+      // this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
     },
     // 新增收藏
     addStarred (data) {
-      this.$refs.selectPanel.addStarred(data)
+      this.$refs.selectDashboard.addStarred(data)
     },
     // 删除收藏
     delStarred (data) {
-      this.$refs.selectPanel.delStarred(data)
+      this.$refs.selectDashboard.delStarred(data)
     },
     // 刷新
     refreshPanel () {
@@ -693,7 +685,7 @@ export default {
           let isInitData = false
           this.panelData = JSON.parse(JSON.stringify(response.data.list))
           this.$nextTick(() => {
-            this.$refs.selectPanel.getStarred('tree')
+            this.$refs.selectDashboard.getStarred('tree')
           })
           if (response.data.list.length > 0) {
             if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
@@ -713,7 +705,7 @@ export default {
             }
             this.$nextTick(() => {
               try {
-                this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
+                this.$refs.selectDashboard.$refs.panelTree.setCurrentKey(this.showPanel)
               } catch (e) {}
             })
             this.isLoading = false