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/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__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">
<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 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 class="cn-entity__body" style="position: relative;">

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

58
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,40 +86,16 @@
}
}
.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;
}
}
font-size: 20px;
color: #828790;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.cn-entity__body {
overflow: hidden;
padding-top:65px;
padding-top:65px;
font-size: 14px;
.body__row {
display: flex;
@@ -163,7 +141,7 @@
display: flex;
justify-content: center;
align-items: flex-end;
height: 67px;
margin-top: 23px;
.el-pager {
li:last-of-type {