diff --git a/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss b/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss
index c87dc4a96..90d508e37 100644
--- a/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss
+++ b/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss
@@ -33,10 +33,13 @@
     border-radius: 6px;
     line-height: 72px;
     .nz-icon-search {
-      margin-left: 22px;
-      margin-right: 20px;
+      padding-left: 22px;
+      padding-right: 20px;
       font-size: 26px;
       color: $--color-text-primary;
+      .el-loading-mask{
+        transform: scale(0.7);
+      }
     }
     .el-input__inner {
       border: none !important;
@@ -80,6 +83,11 @@
       .global-search-content-left {
         box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
       }
+      .global-search-content-right{
+        .el-skeleton{
+          height: 100%;
+        }
+      }
       .list{
         height: 100%;
         width: 100%;
diff --git a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
index efea542e6..9e4a515b4 100644
--- a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
+++ b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
@@ -8,38 +8,64 @@
           Cancel
         </div>
       </div>
-      <div v-loading="loading" class="global-search-content" v-if="!firstShow">
-        <div class="global-search-content-content" v-if="tableData.length">
+      <div class="global-search-content" v-if="!firstShow">
+        <div class="global-search-content-content" v-if="!isNoData">
           <div class="global-search-content-left">
-            <ul
-              class="list"
-              ref="list"
-              v-infinite-scroll="load"
-              infinite-scroll-disabled="disabled">
-              <!-- 添加 tabindex 实现focus的效果 -1 - -4 已被使用 所以从-5 开始 -->
-              <li
-                v-for="(item,index) in tableData"
-                class="list-item"
-                :class="index === selectIndex ? 'lise-item-active' : ''"
-                :key="index"
-                :ref="'item'+ index"
-                @mouseenter="changeSelectIndex(index)"
-                :tabindex="(selectIndex+5) * -1"
-              >
-                <div class="list-item-content">
-                  <i class="nz-icon" :class="selectIcon(item)" />
-                  <HighlightText ref="searchStr" :queries="searchStr" :highlightClass="'list-item-highlight'" style="vertical-align: middle" :title="item.name">{{item.name}}</HighlightText>
-                </div>
-                <div class="list-item-sub" v-if="item.sub">
-                  {{ item.sub }}
-                </div>
-              </li>
-              <li class="list-item" v-if="nextLoading" v-loading="nextLoading"></li>
-<!--              <li  class="list-item" v-if="noMore&&!nextLoading">没有更多了</li>-->
-            </ul>
+            <el-skeleton :loading="loading" animated  class="list">
+              <template slot="template">
+                  <li
+                    v-for="(item,index) in skeletonArr"
+                    class="list-item"
+                    :key="index"
+                    :ref="'item'+ index"
+                  >
+                    <div class="list-item-content">
+<!--                      <i class="nz-icon" :class="selectIcon(item)" />-->
+                      <el-skeleton-item
+                        variant="image"
+                        style="width: 16px; height: 16px;display: inline-block"
+                      />
+                      <el-skeleton-item variant="h3" style="width: 50%;display: inline-block" />
+<!--                      <HighlightText ref="searchStr" :queries="searchStr" :highlightClass="'list-item-highlight'" style="vertical-align: middle" :title="item.name">{{item.name}}</HighlightText>-->
+                    </div>
+                    <div class="list-item-sub">
+<!--                      {{ item.sub }}-->
+                      <el-skeleton-item variant="text" style="margin-right: 16px;" />
+                    </div>
+                  </li>
+                  <li class="list-item" v-if="nextLoading" v-loading="nextLoading"></li>
+                  <!--              <li  class="list-item" v-if="noMore&&!nextLoading">没有更多了</li>-->
+              </template>
+              <template>
+                <ul
+                  class="list"
+                  ref="list"
+                  v-infinite-scroll="load"
+                  infinite-scroll-disabled="disabled">
+                  <li
+                    v-for="(item,index) in tableData"
+                    class="list-item"
+                    :class="index === selectIndex ? 'lise-item-active' : ''"
+                    :key="index"
+                    :ref="'item'+ index"
+                    @mouseenter="changeSelectIndex(index)"
+                  >
+                    <div class="list-item-content">
+                      <i class="nz-icon" :class="selectIcon(item)" />
+                      <HighlightText ref="searchStr" :queries="searchStr" :highlightClass="'list-item-highlight'" style="vertical-align: middle" :title="item.name">{{item.name}}</HighlightText>
+                    </div>
+                    <div class="list-item-sub" v-if="item.sub">
+                      {{ item.sub }}
+                    </div>
+                  </li>
+                  <li class="list-item" v-if="nextLoading" v-loading="nextLoading"></li>
+                  <!--              <li  class="list-item" v-if="noMore&&!nextLoading">没有更多了</li>-->
+                </ul>
+              </template>
+            </el-skeleton>
           </div>
           <div class="global-search-content-right">
-            <searchItemInfo v-if="tableData[selectIndex]" :obj="tableData[selectIndex]" :severityData="severityData"></searchItemInfo>
+            <searchItemInfo v-if="tableData[selectIndex] || loading" :obj="tableData[selectIndex]" :severityData="severityData" :faLoading="loading"></searchItemInfo>
           </div>
         </div>
         <div v-else class="global-search-content" style="justify-content: center">
@@ -95,7 +121,6 @@ export default {
       return this.$store.getters.getGlobalShow
     },
     noMore () {
-      console.log((this.pageObj.pageNo * this.pageObj.pageSize) >= this.pageObj.total)
       return (this.pageObj.pageNo * this.pageObj.pageSize) >= this.pageObj.total
     },
     disabled () {
@@ -110,6 +135,7 @@ export default {
       nextLoading: false,
       selectIndex: '',
       tableData: [],
+      isNoData: false,
       pageObj: {
         pageNo: 1,
         pageSize: 50,
@@ -139,6 +165,7 @@ export default {
           isSelect: true
         }
       ],
+      skeletonArr: 20,
       timer: null,
       searchTimer: null,
       scopeChangeTimer: null,
@@ -194,21 +221,21 @@ export default {
       window.removeEventListener('keyup', this.keyup)
     },
     scroll () {
-      // const ulBox = this.$refs.list
+      const ulBox = this.$refs.list
       const liBox = this.$refs['item' + this.selectIndex][0]
-      // const liHeight = liBox.clientHeight
-      // const height = ulBox.clientHeight - liHeight
-      // const offsetTop = liBox.offsetTop
-      liBox.focus()
-      // if ((this.selectIndex + 1) * liHeight > height) {
-      //   ulBox.scrollTop = (this.selectIndex + 1) * liHeight - height
-      // } else {
-      //   ulBox.scrollTop = 0
-      // }
-      // console.log(height, liHeight, offsetTop, ulBox.scrollTop)
+      const liHeight = liBox.clientHeight
+      const height = ulBox.clientHeight
+      const offsetTop = liBox.offsetTop - ulBox.offsetTop
+      const scrollTop = ulBox.scrollTop
+      // liBox.focus()
+      // console.log(height, liHeight, offsetTop, scrollTop)
+      if (offsetTop - scrollTop < 0) {
+        ulBox.scrollTop = offsetTop
+      } else if (offsetTop - scrollTop >= height - liHeight) {
+        ulBox.scrollTop = offsetTop - height + liHeight
+      }
     },
     changeSelectIndex (index) {
-      console.log('changeSelectIndex', this.isKeyDown)
       if (this.isKeyDown) {
         this.getItemInfo()
         return
@@ -217,7 +244,6 @@ export default {
       this.getItemInfo()
     },
     keyDown (e) {
-      console.log('keyDown')
       // console.log(e, e.target, e.keyCode)
       if (e.keyCode === 13) {
         this.jumpTo()
@@ -266,6 +292,7 @@ export default {
         this.searchTimer = null
       }
       this.loading = true
+      this.firstShow = false
       this.searchTimer = setTimeout(() => {
         this.selectIndex = 0
         this.pageObj.pageNo = 1
@@ -305,6 +332,7 @@ export default {
       }, 100)
     },
     getData () {
+      this.isNoData = false
       const param = {
         pageNo: this.pageObj.pageNo,
         pageSize: this.pageObj.pageSize,
@@ -316,12 +344,17 @@ export default {
         this.loading = false
         this.nextLoading = false
         return
+      } else {
+        this.firstShow = false
       }
       this.$get('/stat/search', param).then(res => {
         this.firstShow = false
         this.nextLoading = false
         if (res.code === 200) {
           this.tableData = this.tableData.concat(res.data.list)
+          if (!this.tableData.length) {
+            this.isNoData = true
+          }
           this.pageObj.total = res.data.total
           this.stat = res.stat
         } else {
diff --git a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue b/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
index 026d1c4cf..f1698f2d6 100644
--- a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
+++ b/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
@@ -1,16 +1,34 @@
 <template>
-  <div v-loading="loading" class="search-item-box">
-    <div class="search-item-title-icon">
-      <i class="nz-icon monitorColor" :class="selectIcon(obj)"/>
-    </div>
-    <div class="search-item-path" v-html="searchItemPath(obj)"></div>
-    <div class="search-item-name">{{obj.name}}</div>
-    <div v-for="item in dataKey[obj.type]" :key="item.key" class="search-item-info">
-      <div class="search-item-key">
-        {{item.label}}
+  <el-skeleton style="height: 100%;width: 100%" :loading="loading || faLoading" animated>
+    <template slot="template">
+      <div class="search-item-box">
+        <div class="search-item-title-icon">
+          <el-skeleton-item
+            variant="image"
+            style="width: 60px; height: 60px;"
+          />
+        </div>
+        <el-skeleton-item  class="search-item-path" search-item-path variant="h3" style="width: 50%;" />
+        <el-skeleton-item class="search-item-name" search-item-path variant="h3" style="width: 30%" />
+        <div v-for="item in skeletonArr" :key="item" class="search-item-info">
+          <el-skeleton-item class="search-item-key"/>
+          <el-skeleton-item class="search-item-value-box" style="margin-left: 20px"/>
+        </div>
       </div>
-      <div class="search-item-value-box" v-if="obj.type === 'endpoint'&&item.key==='state'">
-        <span style="width: auto">
+    </template>
+    <template>
+      <div class="search-item-box" v-if="alertLabelData.id&&obj&&obj.id">
+        <div class="search-item-title-icon">
+          <i class="nz-icon monitorColor" :class="selectIcon(obj)"/>
+        </div>
+        <div class="search-item-path" v-html="searchItemPath(obj)"></div>
+        <div class="search-item-name">{{obj.name}}</div>
+        <div v-for="item in dataKey[obj.type]" :key="item.key" class="search-item-info">
+          <div class="search-item-key">
+            {{item.label}}
+          </div>
+          <div class="search-item-value-box" v-if="obj.type === 'endpoint'&&item.key==='state'&&alertLabelData && alertLabelData.configs">
+            <span style="width: auto">
             <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
             <span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
               <span class="active-icon red-bg inline-block"></span>
@@ -22,7 +40,7 @@
               <span class="active-icon gray-bg inline-block"></span>
             </span>
           </span>
-        <span style="width: auto">
+            <span style="width: auto">
             <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
             <span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
               <span class="active-icon red-bg inline-block"></span>
@@ -34,20 +52,22 @@
               <span class="active-icon gray-bg inline-block"></span>
             </span>
           </span>
-      </div>
-      <div class="search-item-value-box" v-else-if="obj.type === 'datacenter'&&item.key==='state'">
-        <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon" style="margin-top: 20px;"></div>
-        <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
-        <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
-      </div>
-      <div class="search-item-value-box" v-else>
-        <i v-if="item.icon" class="nz-icon" :class="searchItemClass(item)"/>
-        <span class="search-item-value">
+          </div>
+          <div class="search-item-value-box" v-else-if="obj.type === 'datacenter'&&item.key==='state'">
+            <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon" style="margin-top: 20px;"></div>
+            <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
+            <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
+          </div>
+          <div class="search-item-value-box" v-else>
+            <i v-if="item.icon" class="nz-icon" :class="searchItemClass(item)"/>
+            <span class="search-item-value">
           {{getPathContent(item.key)}}
         </span>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </el-skeleton>
 </template>
 
 <script>
@@ -56,20 +76,22 @@ export default {
   name: 'searchItemInfo',
   props: {
     obj: {},
-    severityData: {}
+    severityData: {},
+    faLoading: {}
   },
   watch: {
     obj: {
       immediate: true,
       deep: true,
       handler (n) {
-        if (n.id) {
+        if (n && n.id) {
           this.loading = true
           if (this.timer) {
             clearTimeout(this.timer)
             this.timer = null
           }
           this.timer = setTimeout(() => {
+            this.alertLabelData = { }
             this.getInfo(n)
           }, 500)
         }
@@ -79,6 +101,7 @@ export default {
   data () {
     return {
       timer: null,
+      skeletonArr: 6,
       dataKey: {
         asset: [
           {
@@ -336,7 +359,6 @@ export default {
       return str || '--'
     },
     selectIcon (item) {
-      // console.log(item)
       switch (item.type) {
         case 'asset' : return 'nz-icon-overview-project'
         case 'datacenter' : return 'nz-icon-model'