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

perf: entity-list改版

Browse Source
This commit is contained in:
chenjinsong
2021-08-09 18:56:48 +08:00
parent c08b0b58c1
commit d55603399a
9 changed files with 87 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/css/font/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "cn-icon"; /* Project id 2614877 */
src: url('iconfont.woff2?t=1628479878175') format('woff2'),
url('iconfont.woff?t=1628479878175') format('woff'),
url('iconfont.ttf?t=1628479878175') format('truetype');
src: url('iconfont.woff2?t=1628497043863') format('woff2'),
url('iconfont.woff?t=1628497043863') format('woff'),
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";
}

BIN
src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

2
src/assets/css/theme.scss
View File

@@ -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;

4
src/components/entities/EntityList.vue
View File

@@ -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="content__title" :title="d.ip||d.domainName||d.appName">
<div class="header__content" :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;">

53
src/components/entities/LeftFilter.vue
View File

@@ -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 {
padding-left: 10px;
padding-top: 8px;
font-weight: bold;
&.is-active {
border-bottom: 1px solid $--right-box-border-color;
.el-collapse-item {
margin-bottom: 10px;
}
.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;
}
}

46
src/components/entities/entities.scss
View File

@@ -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%;
overflow: auto;
margin: 10px 0 0 10px;
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 {

23
src/views/entities/EntityExplorer.vue
View File

@@ -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%"
style="width: 100%; grid-area: 1 / 1 / 1 / 3;"
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.asn'), key: 'asn', type: 'asn' })
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'), 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.creditLevel'), key: 'reputationLevel' })
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'), 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.riskLevel'), key: 'appRisk' })
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'), 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
})