gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1612 feat: 部分css重构内容：实体列表以及实体下拉详情

Browse Source
This commit is contained in:
刘洪洪
2024-04-02 12:00:49 +08:00
parent e8a9968e44
commit 8ddc0d95f5
14 changed files with 431 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/entityExplorer/entityList/Row.vue
View File

@@ -10,7 +10,7 @@
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
<div class="cn-entity__row">
<!--标签-->
<div class="cn-entity__header" style="display: flex;">
<div class="cn-entity__header my__display1">
<span class="cn-entity__header-title" v-high-light="keywordList">{{ entityData.entityValue || 'Unknown' }}</span>
<span v-show="entityData.isRelated">
<el-popover
@@ -150,7 +150,7 @@
</div>
<!--score分数-->
<div class="basic-info__item" style="display: flex;align-items: center;">
<div class="basic-info__item my__display">
<i class="cn-icon cn-icon-Score"></i>
<div class="row-item-label">
<span class="row-item-label">{{ $t('network.score') }}&nbsp;:&nbsp;&nbsp;</span>
@@ -158,7 +158,7 @@
<template v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
</template>
<span style="padding-left: 4px;">{{score}}</span>
<span class="padding-l-4">{{score}}</span>
<loading :loading="loadingNetworkQuality" size="small"></loading>
</span>
</div>
@@ -166,17 +166,14 @@
<!--事件数量，即Performance和security事件总和-->
<div class="basic-info__item" style="position: relative">
<div v-if="eventNum>0 && !loadingEvent" style="display: flex;align-items: center;">
<div v-if="eventNum>0 && !loadingEvent" class="my__display">
<i class="cn-icon cn-icon-Event1"></i>
<div class="row-item-label">
<span class="row-item-label">{{ $t('dnsInsight.event') }}&nbsp;:&nbsp;&nbsp;</span>
<span class="row-item-value">{{ eventNum }}</span>
</div>
</div>
<!-- <loading :loading="loadingEvent" size="small" style="width: 90px"></loading>-->
</div>
</div>
</div>
</div>
@@ -318,7 +315,7 @@ export default {
if (this.isCollapse) {
this.$refs.rowBlock.style.cssText = 'background-color: none'
} else {
this.$refs.rowBlock.style.cssText = 'background-color: #fff'
this.$refs.rowBlock.style.cssText = 'background-color: var(--el-fill-color-blank)'
}
this.$emit('switchCollapse', this.isCollapse, this.index)
},

22
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -29,7 +29,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -68,13 +68,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -87,8 +87,8 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedDomain')}}</div>
<div class="row__content overview__row-related">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -97,7 +97,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -111,8 +111,8 @@
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -121,7 +121,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -149,7 +149,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>

22
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -35,7 +35,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -74,13 +74,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -93,8 +93,8 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<div class="row__content overview__row-related">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -103,7 +103,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -116,8 +116,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
{{item.value}}
@@ -125,7 +125,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -153,7 +153,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>

30
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -5,7 +5,7 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.location')}}</div>
<div class="row__content">
<div v-if="entity.location" style="display: flex">
<div v-if="entity.location" class="row__content-display">
<div v-if="entity.location.country">
<img v-if="entity.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[entity.location.country]" src="../../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
<img v-else :src="require(`../../../../../public/images/flag/${countryNameIdMapping[entity.location.country]}.png`)" class="filter-country-flag" >
@@ -25,14 +25,14 @@
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.openPort')}}</div>
<div class="row__content high-location" style="word-break: break-word;" v-high-light="keywordList">{{ openPort }}</div>
<div class="row__content high-location row__content__word" v-high-light="keywordList">{{ openPort }}</div>
</div>
</div>
</div>
<div class="overview-item" v-if="entityData.dnsServerRole">
<div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
<div class="row__content">{{$_.get(entityData, 'dnsServerRole') || '-'}}</div>
@@ -71,7 +71,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
@@ -109,13 +109,13 @@
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
<div style="position: relative;">
<div class="entity-score__block">
<div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
<span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
<span style="padding-left: 4px;">{{score}}</span>
<span class="entity-score__padding">{{score}}</span>
</div>
<div class="entity-score" v-else>{{score}}</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
<loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
</div>
</div>
</div>
@@ -128,8 +128,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipOne" class="relationship-one__loading">
<loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -138,7 +138,7 @@
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
<div v-if="relationshipShowOne">
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -151,8 +151,8 @@
<div class="overview__row overview__row-related">
<div class="row__label row__label--width130">{{$t('entities.relatedDomain')}}</div>
<div class="row__content">
<div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
<loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
<div v-if="loadingRelationshipTwo" class="relationship-two__loading">
<loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
</div>
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -161,7 +161,7 @@
<div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
<div v-if="relationshipShowTwo">
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
<div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
<div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
<div v-for="(item, index) in relationshipDataTwo" :key="index">
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -189,7 +189,7 @@
<div class="row__content row__content--width90">
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
</div>
<div class="row__content-loading" style="position: relative;">
<div class="row__content-loading">
<div class="performance-event-remark">{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
@@ -201,7 +201,7 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content overview__content-loading">
<div class="overview__content overview__content-loading" style="position: relative">
<loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="securityData.length === 0">
<span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>