fix：修改全局搜索 loading样式为骨架屏调整键盘事件

2022-01-17 10:43:26 +08:00
parent e2535b7f32
commit 109b8c64b5
3 changed files with 134 additions and 71 deletions
--- 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%;
--- a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
+++ b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
@@ -8,15 +8,40 @@
          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">
+            <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">
-              <!-- 添加 tabindex 实现focus的效果 -1 - -4 已被使用 所以从-5 开始 -->
                  <li
                    v-for="(item,index) in tableData"
                    class="list-item"
@@ -24,7 +49,6 @@
                    :key="index"
                    :ref="'item'+ index"
                    @mouseenter="changeSelectIndex(index)"
-                :tabindex="(selectIndex+5) * -1"
                  >
                    <div class="list-item-content">
                      <i class="nz-icon" :class="selectIcon(item)" />
@@ -35,11 +59,13 @@
                    </div>
                  </li>
                  <li class="list-item" v-if="nextLoading" v-loading="nextLoading"></li>
-<!--              <li  class="list-item" v-if="noMore&&!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 {
--- a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
+++ b/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
@@ -1,5 +1,23 @@
 <template>
-  <div v-loading="loading" class="search-item-box">
+  <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>
+    </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>
@@ -9,7 +27,7 @@
          <div class="search-item-key">
            {{item.label}}
          </div>
-      <div class="search-item-value-box" v-if="obj.type === 'endpoint'&&item.key==='state'">
+          <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">
@@ -48,6 +66,8 @@
          </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'