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-face {
font-family: "cn-icon"; /* Project id 2614877 */ 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 { .cn-icon {
@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.cn-icon-country:before {
content: "\e742";
}
.cn-icon-arrow-left-circle:before { .cn-icon-arrow-left-circle:before {
content: "\e741"; 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-font-color: #BEBEBE; // menu字色
$--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景色 $--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景色
$--tree-node-hover-background-color: #F5F7FA;
$--collapse-header-height: 42px; $--collapse-header-height: 42px;
$--collapse-border-color: #EFF2F5; $--collapse-border-color: #EFF2F5;

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

@@ -4,12 +4,10 @@
<div class="cn-entity" v-for="d in listData" :key="d.id"> <div class="cn-entity" v-for="d in listData" :key="d.id">
<div class="cn-entity__header"> <div class="cn-entity__header">
<div class="header__icon"><i :class="iconClass"></i></div> <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-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template> <template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template>
<template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template> <template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
<template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
</div>
</div> </div>
</div> </div>
<div class="cn-entity__body" style="position: relative;"> <div class="cn-entity__body" style="position: relative;">

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

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

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

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

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

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