perf: entity-list改版

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1628479878175') format('woff2'),
+  src: url('iconfont.woff2?t=1628497043863') format('woff2'),
-       url('iconfont.woff?t=1628479878175') format('woff'),
+       url('iconfont.woff?t=1628497043863') format('woff'),
-       url('iconfont.ttf?t=1628479878175') format('truetype');
+       url('iconfont.ttf?t=1628497043863') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-country:before {
+  content: "\e742";
+}
+
 .cn-icon-arrow-left-circle:before {
   content: "\e741";
 }

src/assets/css/theme.scss

@@ -13,6 +13,8 @@ $--menu-hover-background-color: #000C18; // menu背景色
 $--menu-item-font-color: #BEBEBE; // menu字色
 $--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景色
 
+$--tree-node-hover-background-color: #F5F7FA;
+
 $--collapse-header-height: 42px;
 $--collapse-border-color: #EFF2F5;
 

src/components/entities/EntityList.vue

@@ -4,14 +4,12 @@
       <div class="cn-entity" v-for="d in listData" :key="d.id">
         <div class="cn-entity__header">
           <div class="header__icon"><i :class="iconClass"></i></div>
-          <div class="header__content">
+          <div class="header__content" :title="d.ip||d.domainName||d.appName">
-            <div class="content__title" :title="d.ip||d.domainName||d.appName">
             <template v-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template>
             <template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template>
             <template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
           </div>
         </div>
-        </div>
         <div class="cn-entity__body" style="position: relative;">
           <div class="content__desc" v-if="entityType !== 'ip'" style="color: #999999; width: 200px; position: absolute; top: 33px;right: -9px ;font-size: 12px;">
             <template v-if="entityType === 'domain'" style="color: #999999; width: 200px;">

src/components/entities/LeftFilter.vue

@@ -6,9 +6,11 @@
         <el-collapse-item
             v-for="(f, i) in filterData"
             :key="i"
-            :title="f.title"
             :name="`${i}`"
         >
+          <template #title>
+            <div class="collapse-header"><i :class="f.icon" class="collapse-header__icon"></i><span>{{f.title}}</span></div>
+          </template>
           <el-tree
               :data="f.data"
               :load="(node, resolve) => loadFilter(node, resolve, f)"
@@ -97,17 +99,19 @@ export default {
 .entity-left-filter {
   display: flex;
   flex-direction: column;
+  margin-top: 10px;
   width: 100%;
   height: 100%;
-  border: 1px solid $--right-box-border-color;
+  // border: 1px solid $--right-box-border-color;
   overflow: auto;
 
   .filter__header {
-    background-color: #FAFAFA;
+    background-color: #E1E6ED;
+    margin-bottom: 10px;
     padding-left: 8px;
     height: 36px;
     line-height: 36px;
-    color: #333;
+    color: #666;
     font-size: 14px;
   }
   .filter__body {
@@ -117,20 +121,41 @@ export default {
     overflow: auto;
 
     .filter__collapse {
-      .el-collapse-item__header {
+      .el-collapse-item {
-        padding-left: 10px;
+        margin-bottom: 10px;
-        padding-top: 8px;
-        font-weight: bold;
-
-        &.is-active {
-          border-bottom: 1px solid $--right-box-border-color;
       }
+      .el-collapse-item__header {
+        padding-left: 15px;
+        padding-top: 8px;
+        color: #8FA1BE;
+        border-bottom: none !important;
+      }
+      .collapse-header {
+        display: flex;
+        width: 100%;
+        border-bottom: 1px solid $--content-right-background-color;
+      }
+      .collapse-header__icon {
+        padding-right: 6px;
+        font-size: 14px;
       }
       .el-collapse-item__wrap {
-        padding-top: 6px !important;
+        padding-top: 14px !important;
 
         .el-collapse-item__content {
           padding-bottom: 15px;
+
+          .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+            background-color: $--tree-node-hover-background-color;
+          }
+          .el-tree-node.is-expanded, .el-tree-node.is-current {
+            &>.el-tree-node__content>.filter-item {
+              font-weight: bold;
+            }
+          }
+          .el-tree-node__content {
+            height: 30px;
+          }
         }
         .filter-item {
           display: flex;
@@ -147,11 +172,11 @@ export default {
         .filter__more {
           padding-left: 24px;
           line-height: 36px;
-          color: $--color-primary;
+          color: #8FA1BE;
           cursor: pointer;
         }
         .filter__more.filter__more--disabled {
-          color: #999;
+          color: #ccc;
           cursor: default;
         }
       }

src/components/entities/entities.scss

@@ -1,9 +1,9 @@
 .cn-entities {
   display: grid;
-  grid-template-rows: 32px auto;
+  grid-template-rows: 40px auto;
   grid-template-columns: 250px auto;
   grid-gap: 10px 20px;
-  padding: 20px;
+  padding: 10px;
   height: 100%;
   width: 100%;
 
@@ -24,8 +24,9 @@
       justify-content: space-between;
       border-radius: 2px;
       height: calc(100% - 67px);
-      width: 100%;
+      margin: 10px 0 0 10px;
-      overflow: auto;
+      width: calc(100% - 10px);
+      overflow: hidden auto;
 
       .cn-entity:hover{
           box-shadow:  0 0 10px #ccc;
@@ -41,22 +42,23 @@
         }
       }
       .cn-entity {
-      /* display: grid;
-        grid-template-rows: 44% 56%;*/
         box-sizing: border-box;
-        margin: 14px 13px;
+        margin-bottom: 30px;
         width: 240px;
         height: 315px;
         background: #FFFFFF;
         border-radius: 2px;
-        border: 1px solid $--right-box-border-color;
         transition: all .2s;
 
+        &:hover .cn-entity__header .header__content {
+          color: white;
+        }
         .cn-entity__header {
           position: relative;
-          background: #E1E6ED;
+          background-color: #E1E6ED;
           display: flex;
           align-items: center;
+          justify-content: center;
           padding: 20px;
           width: 240px;
           height: 96.61px;
@@ -84,36 +86,12 @@
             }
           }
           .header__content {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            padding-left: 10px;
-
-            .content__title {
-              font-family: Roboto-Medium;
-              margin-left: 24px;
-              text-align: center;
             font-size: 20px;
             color: #828790;
-              font-weight: 500;
-              width: 125px;
             overflow: hidden;
             text-overflow: ellipsis;
-              -o-text-overflow: ellipsis;
             white-space: nowrap;
           }
-            .content__desc {
-              font-size: 14px;
-              color: #999999 !important;
-              padding-top: 3px;
-
-              .desc__label {
-                color: #aaa;
-                padding-right: 10px;
-
-              }
-            }
-          }
         }
         .cn-entity__body {
           overflow: hidden;
@@ -163,7 +141,7 @@
       display: flex;
       justify-content: center;
       align-items: flex-end;
-      height: 67px;
+      margin-top: 23px;
 
       .el-pager {
         li:last-of-type {

src/views/entities/EntityExplorer.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="outer-box" v-if="!showDetail">
-    <div class="cn-entities">
     <el-select
         size="small"
-          style="width: 100%"
         v-model="filterType"
+        style="position: fixed; top: 9px; width: 130px; left:260px;"
     >
       <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
     </el-select>
+    <div class="cn-entities">
       <el-input
           v-model="searchContent"
-          size="small"
+          style="width: 100%; grid-area: 1 / 1 / 1 / 3;"
-          style="width: 100%"
           type="text"
       >
         <template #prefix>
@@ -24,6 +23,7 @@
           @select="select"
           @showMore="showMore"
           @loadFilter="loadFilter"
+          style="grid-area: 2 / 1 / 3 / 2;"
       ></left-filter>
       <!-- 内容区域 -->
       <entity-list
@@ -33,6 +33,7 @@
           @showDetail="entityDetail"
           @pageSize="pageSizeRight"
           @pageNo="pageNoRight"
+          style="grid-area: 2 / 2 / 3 / 3;"
       ></entity-list>
     </div>
   </div>
@@ -146,8 +147,8 @@ export default {
         case 'ip': {
           requests.push(this.loadFilterData(n, 'country'))
           requests.push(this.loadFilterData(n, 'asn'))
-          data.push({ filterType: n, title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region' })
+          data.push({ filterType: n, title: this.$t('entities.countryOrRegion'), icon: 'cn-icon cn-icon-country', key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region' })
-          data.push({ filterType: n, title: this.$t('entities.asn'), key: 'asn', type: 'asn' })
+          data.push({ filterType: n, title: this.$t('entities.asn'), icon: 'cn-icon cn-icon-cloud', key: 'asn', type: 'asn' })
           getEntityIpList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -157,8 +158,8 @@ export default {
         case 'domain': {
           requests.push(this.loadFilterData(n, 'categoryGroup'))
           requests.push(this.loadFilterData(n, 'reputationLevel'))
-          data.push({ filterType: n, title: this.$t('entities.groupAndName'), key: 'categoryGroup', childrenKey: 'categoryName' })
+          data.push({ filterType: n, title: this.$t('entities.groupAndName'), icon: 'cn-icon cn-icon-category', key: 'categoryGroup', childrenKey: 'categoryName' })
-          data.push({ filterType: n, title: this.$t('entities.creditLevel'), key: 'reputationLevel' })
+          data.push({ filterType: n, title: this.$t('entities.creditLevel'), icon: 'cn-icon cn-icon-risk', key: 'reputationLevel' })
           getEntityDomainList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -168,8 +169,8 @@ export default {
         case 'app': {
           requests.push(this.loadFilterData(n, 'appCategory'))
           requests.push(this.loadFilterData(n, 'appRisk'))
-          data.push({ filterType: n, title: this.$t('entities.categoryAndSub'), key: 'appCategory', childrenKey: 'appSubcategory' })
+          data.push({ filterType: n, title: this.$t('entities.categoryAndSub'), icon: 'cn-icon cn-icon-category', key: 'appCategory', childrenKey: 'appSubcategory' })
-          data.push({ filterType: n, title: this.$t('entities.riskLevel'), key: 'appRisk' })
+          data.push({ filterType: n, title: this.$t('entities.riskLevel'), icon: 'cn-icon cn-icon-risk', key: 'appRisk' })
           getEntityAppList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -274,6 +275,7 @@ export default {
       title: this.$t('entities.countryOrRegion'),
       key: 'country',
       childrenKey: 'region',
+      icon: 'cn-icon cn-icon-country',
       data: country,
       hasnotMore: this.$_.isEmpty(country) || country.length < 10,
       filterType: this.filterType
@@ -282,6 +284,7 @@ export default {
       title: this.$t('entities.asn'),
       key: 'asn',
       data: asn,
+      icon: 'cn-icon cn-icon-cloud',
       hasnotMore: this.$_.isEmpty(asn) || asn.length < 10,
       filterType: this.filterType
     })