CN-983 feat: 基本信息图

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1683361452726') format('woff2'),
+  src: url('iconfont.woff2?t=1683537147894') format('woff2'),
-       url('iconfont.woff?t=1683361452726') format('woff'),
+       url('iconfont.woff?t=1683537147894') format('woff'),
-       url('iconfont.ttf?t=1683361452726') format('truetype');
+       url('iconfont.ttf?t=1683537147894') format('truetype');
 }
 
 .cn-icon {
@@ -21,10 +21,6 @@
   content: "\e7f0";
 }
 
-.cn-icon-network-overview:before {
-  content: "\e7f1";
-}
-
 .cn-icon-copy:before {
   content: "\e7ee";
 }
@@ -45,7 +41,7 @@
   content: "\e7d4";
 }
 
-.cn-icon-register-email:before {
+.cn-icon-registry-email:before {
   content: "\e7d5";
 }
 
@@ -77,7 +73,7 @@
   content: "\e7dc";
 }
 
-.cn-icon-registration-agency:before {
+.cn-icon-registry:before {
   content: "\e7dd";
 }
 

src/views/charts2/ChartList.vue

@@ -61,7 +61,22 @@ export default {
       rowHeight: 40,
       rowMargin: 20,
       colMargin: 20,
-      debounceFunc: null
+      debounceFunc: null,
+      timeoutFunc: null,
+      // 需要动态处理高度的chart
+      dynamicHeightCharts: [
+        {
+          selector: '.app-cards',
+          // 需要额外修正的值
+          correctionHeight: 24,
+          chartType: typeMapping.networkOverview.appList
+        },
+        {
+          selector: '.entity-detail-info',
+          correctionHeight: 174,
+          chartType: typeMapping.entityDetail.basicInfo
+        }
+      ]
     }
   },
   components: {
@@ -123,26 +138,33 @@ export default {
     resizeLine () {
       this.$refs.chartGrid.resizeLine()
     },
-    resizeAppChart () {
+    // 动态处理chart高度
-      const appCardsDom = document.querySelector('.app-cards')
+    handleDynamicChartHeight () {
-      const layout = _.cloneDeep(this.layout)
+      this.dynamicHeightCharts.forEach(chart => {
-      const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
+        const dom = document.querySelector(chart.selector)
-      if (appCardsDom) {
+        if (dom) {
-        const cardsHeight = appCardsDom.offsetHeight
+          const layout = _.cloneDeep(this.layout)
-        if (cardsHeight) {
+          const destinationChart = layout.find(c => c.type === chart.chartType)
-          const headerHeight = 24
+          const domHeight = dom.offsetHeight
-          overviewAppChart.h = (cardsHeight + headerHeight + this.rowMargin) / (this.rowHeight + this.rowMargin)
+          if (domHeight) {
-          this.layout = layout
+            destinationChart.h = (domHeight + chart.correctionHeight + this.rowMargin) / (this.rowHeight + this.rowMargin)
+            this.layout = layout
+          }
         }
-      }
+      })
     }
   },
   mounted () {
-    this.debounceFunc = _.debounce(this.resizeAppChart, 400)
+    this.timeoutFunc = setTimeout(() => {
+      this.handleDynamicChartHeight()
+    }, 400)
+    this.handleDynamicChartHeight()
+    this.debounceFunc = _.debounce(this.handleDynamicChartHeight, 400)
     window.addEventListener('resize', this.debounceFunc)
   },
   beforeUnmount () {
     window.removeEventListener('resize', this.debounceFunc)
+    clearTimeout(this.timeoutFunc)
   }
 }
 </script>

src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue

@@ -40,7 +40,7 @@
         <i :class="card.icon"></i>
         <div class="detail-card__text">
           <div class="detail-card__label">{{card.label}}:</div>
-          <div class="detail-card__value">{{card.value}}</div>
+          <div class="detail-card__value" :title="card.value">{{card.value}}</div>
         </div>
       </div>
     </div>
@@ -118,7 +118,7 @@
 
   .dividing-line {
     position: absolute;
-    top: 169px;
+    top: 159px;
     left: 30px;
     height: 1px;
     width: calc(100% - 60px);
@@ -184,7 +184,7 @@
   .entity-tags {
     display: flex;
     align-items: center;
-    height: 70px;
+    height: 60px;
 
     .entity-tag {
       margin-right: 10px;
@@ -199,12 +199,12 @@
     flex-flow: row wrap;
     align-content: space-around;
     margin-top: 5px;
-    height: calc(100% - 135px);
 
     .detail-card {
       display: flex;
       padding: 0 12px;
       width: 298px;
+      height: 83px;
       align-items: center;
 
       i {
@@ -219,9 +219,13 @@
           color: #717171;
         }
         .detail-card__value {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          color: #222;
           line-height: 18px;
           font-size: 14px;
-          color: #222;
         }
       }
     }
@@ -339,6 +343,32 @@ export default {
           { icon: 'cn-icon cn-icon-geo-location', name: 'location', label: i18n.global.t('entities.geographicLocation'), value: '你好啊' },
           { icon: 'cn-icon cn-icon-dns-ptr', name: 'dnsPtr', label: 'DNS PTR', value: '-' }
         )
+        break
+      }
+      case 'domain': {
+        detailCards.value = _.concat(detailCards.value,
+          { icon: 'cn-icon cn-icon-category2', name: 'category', label: i18n.global.t('entities.category'), value: 'category' },
+          { icon: 'cn-icon cn-icon-sub-type', name: 'subcategory', label: i18n.global.t('entities.subcategory'), value: 'this is a long long long long long subcategory' },
+          { icon: 'cn-icon cn-icon-credit-rating', name: 'creditLevel', label: i18n.global.t('entities.creditLevel2'), value: 'a value of credit level' },
+          { icon: 'cn-icon cn-icon-expire-date', name: 'expirationDate', label: i18n.global.t('entities.expirationDate2'), value: '2022-02-22 22:22:22' },
+          { icon: 'cn-icon cn-icon-registrar', name: 'registrar', label: i18n.global.t('entities.registrar'), value: 'XX注册商' },
+          { icon: 'cn-icon cn-icon-registration-agency', name: 'registry', label: i18n.global.t('entities.registry'), value: 'XX注册机构' },
+          { icon: 'cn-icon cn-icon-registration-country', name: 'country', label: i18n.global.t('entities.registrationCountry'), value: 'China' },
+          { icon: 'cn-icon cn-icon-registration-date', name: 'registrationDate', label: i18n.global.t('entities.registrationDate'), value: '2011-11-11 11:11:11' },
+          { icon: 'cn-icon cn-icon-registry-email', name: 'registryEmail', label: i18n.global.t('entities.registryEmail'), value: '注册机构邮箱' }
+        )
+        break
+      }
+      case 'app': {
+        detailCards.value = _.concat(detailCards.value,
+          { icon: 'cn-icon cn-icon-category2', name: 'category', label: i18n.global.t('entities.category'), value: 'category' },
+          { icon: 'cn-icon cn-icon-sub-type', name: 'subcategory', label: i18n.global.t('entities.subcategory'), value: 'this is a long long long long long subcategory' },
+          { icon: 'cn-icon cn-icon-credit-rating', name: 'creditLevel', label: i18n.global.t('entities.creditLevel2'), value: 'a value of credit level' },
+          { icon: 'cn-icon cn-icon-technology', name: 'technology', label: i18n.global.t('overall.technology'), value: 'xx技术' },
+          { icon: 'cn-icon cn-icon-app-name', name: 'name', label: i18n.global.t('overall.appName2'), value: 'APP的名称' },
+          { icon: 'cn-icon cn-icon-app-full-name', name: 'fullName', label: i18n.global.t('overall.appFullName'), value: 'APP的全称' },
+          { icon: 'cn-icon cn-icon-description', name: 'description', label: i18n.global.t('config.dataSource.description'), value: 'A domain registry is an organization responsible for managing the top-level domain (TLD), such as .com, .net, .org, and more, for any given domain name. Domain registries can act as a database of available domains and work with registrars, such as DomainRegistry.com, to purchase a domain.' }
+        )
       }
     }
     return {