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

CN-1612 feat: 部分css重构内容：实体关系graph

Browse Source
This commit is contained in:
刘洪洪
2024-04-02 15:38:06 +08:00
parent 8ddc0d95f5
commit 66d8a1d4a7
5 changed files with 113 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/assets/css/components/views/entityExplorer/entity-graph.scss
View File

@@ -1,3 +1,6 @@
$color-business: var(--el-color-business);
$color-primary: var(--el-text-color-primary);
$color-regular: var(--el-text-color-regular);
.graph-toolbar { .graph-toolbar {
position: fixed; position: fixed;
top: 100px; top: 100px;
@@ -15,12 +18,13 @@
cursor: pointer; cursor: pointer;
i { i {
color: #575757; color: $color-regular;
font-size: 18px; font-size: 18px;
} }
&.toolbar--unactivated { &.toolbar--unactivated {
cursor: default; cursor: default;
i { i {
opacity: .4; opacity: .4;
} }
@@ -28,6 +32,7 @@
} }
} }
} }
.entity-graph { .entity-graph {
display: flex; display: flex;
@@ -44,7 +49,7 @@
.graph-node__text { .graph-node__text {
width: 120px; width: 120px;
font-size: 12px; font-size: 12px;
color: #353636; color: $color-primary;
} }
&.graph-node--root { &.graph-node--root {
@@ -57,30 +62,38 @@
box-shadow: none; box-shadow: none;
animation: none; animation: none;
} }
&.graph-node--ip { &.graph-node--ip {
border-color: #CBD9BB !important; border-color: var(--el-color-success-light-5) !important;
box-shadow: 0 0 0 8px rgba(126,159,84,0.14); box-shadow: 0 0 0 8px rgba(126, 159, 84, 0.14);
i { i {
color: #7E9F54; color: var(--el-color-success);
} }
} }
&.graph-node--domain { &.graph-node--domain {
border-color: #AFDEED !important; border-color: var(--el-color-primary-light-7) !important;
box-shadow: 0 0 0 8px rgba(56,172,210,0.14); box-shadow: 0 0 0 8px rgba(56, 172, 210, 0.14);
i { i {
color: #38ACD2; color: $color-business;
} }
} }
&.graph-node--app { &.graph-node--app {
border-color: #F5DAA3 !important; border-color: var(--el-color-warning-light-5) !important;
box-shadow: 0 0 0 8px rgba(229,162,25,0.14); box-shadow: 0 0 0 8px rgba(229, 162, 25, 0.14);
i { i {
color: #E5A219; color: var(--el-color-warning);
} }
} }
i { i {
font-size: 36px; font-size: 36px;
} }
.graph-node__text { .graph-node__text {
padding-top: 30px; padding-top: 30px;
} }
@@ -90,19 +103,21 @@
padding-top: 20px; padding-top: 20px;
width: 66px; width: 66px;
height: 66px; height: 66px;
border: 1px solid #A7B0B9 !important; border: 1px solid #A7B0B9 !important; // 该class并未使用到
box-shadow: none; box-shadow: none;
// 覆盖自带的node点击效果 // 覆盖自带的node点击效果
&.rel-node-checked { &.rel-node-checked {
box-shadow: 0 0 0 5px rgba(151,151,151,0.21); box-shadow: 0 0 0 5px rgba(151, 151, 151, 0.21);
animation: none; animation: none;
border-color: #778391 !important; border-color: $color-regular !important;
} }
i { i {
font-size: 24px; font-size: 24px;
color: #778391; color: $color-regular;
} }
.graph-node__text { .graph-node__text {
padding-top: 24px; padding-top: 24px;
} }
@@ -116,19 +131,22 @@
&.graph-node--ip { &.graph-node--ip {
i { i {
color: #7E9F54; color: var(--el-color-success);
} }
} }
&.graph-node--domain { &.graph-node--domain {
i { i {
color: #38ACD2; color: $color-business;
} }
} }
&.graph-node--app { &.graph-node--app {
i { i {
color: #E5A219; color: var(--el-color-warning);
} }
} }
i { i {
font-size: 21px; font-size: 21px;
} }
@@ -141,6 +159,7 @@
left: unset !important; left: unset !important;
right: 0 !important; right: 0 !important;
} }
.entity-graph__detail { .entity-graph__detail {
height: calc(100% - 100px) !important; height: calc(100% - 100px) !important;
top: 100px !important; top: 100px !important;
@@ -151,7 +170,7 @@
} }
.g6-component-tooltip { .g6-component-tooltip {
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85); box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
.primary-node-tooltip { .primary-node-tooltip {
padding: 5px; padding: 5px;
@@ -161,19 +180,21 @@
align-items: center; align-items: center;
i { i {
color: #717171; color: $color-regular;
font-size: 14px; font-size: 14px;
} }
.tooltip__title { .tooltip__title {
padding-left: 6px; padding-left: 6px;
font-size: 15px; font-size: 15px;
line-height: 15px; line-height: 15px;
color: #111; color: $color-primary;
} }
} }
.tooltip__content { .tooltip__content {
padding-top: 10px; padding-top: 10px;
color: #222; color: $color-primary;
font-size: 12px; font-size: 12px;
span:first-of-type { span:first-of-type {
@@ -181,6 +202,7 @@
} }
} }
} }
.entity-node-tooltip { .entity-node-tooltip {
width: 300px; width: 300px;
padding: 5px; padding: 5px;
@@ -193,7 +215,7 @@
.tooltip__title { .tooltip__title {
font-size: 15px; font-size: 15px;
line-height: 15px; line-height: 15px;
color: #111; color: $color-primary;
} }
} }
@@ -208,11 +230,12 @@
.header-icon { .header-icon {
width: 3px !important; width: 3px !important;
height: 12px !important; height: 12px !important;
background: #38ACD2; background: $color-business;
border-radius: 1px; border-radius: 1px;
margin-right: 6px; margin-right: 6px;
} }
} }
.content-tag-list { .content-tag-list {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -226,22 +249,25 @@
border: 1px solid; border: 1px solid;
border-radius: 2px; border-radius: 2px;
$normal-color: #778391; $normal-color: $color-regular;
$normal-light-color: #F7F8F9; $normal-light-color: var(--el-fill-color-light);
$negative-color: #E26154; $negative-color: var(--el-color-danger);
$negative-light-color: #FEF6F5; $negative-light-color: var(--el-color-danger-light-9);
$positive-color: #749F4D; $positive-color: var(--el-color-success);
$positive-light-color: #F7FAF5; $positive-light-color: var(--el-color-success-light-9);
&.entity-tag--level-two-normal { &.entity-tag--level-two-normal {
border-color: $normal-color; border-color: $normal-color;
color: $normal-color; color: $normal-color;
background-color: $normal-light-color; background-color: $normal-light-color;
} }
&.entity-tag--level-two-negative { &.entity-tag--level-two-negative {
border-color: $negative-color; border-color: $negative-color;
color: $negative-color; color: $negative-color;
background-color: $negative-light-color; background-color: $negative-light-color;
} }
&.entity-tag--level-two-positive { &.entity-tag--level-two-positive {
border-color: $positive-color; border-color: $positive-color;
color: $positive-color; color: $positive-color;

42
src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss
View File

@@ -1,4 +1,6 @@
$font-size: 12px; $font-size: 12px;
$color-regular: var(--el-text-color-regular);
$color-primary: var(--el-text-color-primary);
.graph-detail-basic-info { .graph-detail-basic-info {
position: relative; position: relative;
padding-bottom: 12px; padding-bottom: 12px;
@@ -6,19 +8,23 @@ $font-size: 12px;
justify-content: space-between; justify-content: space-between;
//height: 100%; //height: 100%;
.graph-detail-basic-info__block {
display: flex;
}
.graph-detail-header { .graph-detail-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.entity-graph-type { .entity-graph-type {
font-size: 12px; font-size: 12px;
color: #717171; color: $color-regular;
font-weight: 400; font-weight: 400;
} }
} }
.entity-type { .entity-type {
color: #717171; color: $color-regular;
} }
.graph-basic-info { .graph-basic-info {
@@ -34,7 +40,7 @@ $font-size: 12px;
padding-right: 10px; padding-right: 10px;
max-width: 260px; max-width: 260px;
font-size: 20px; font-size: 20px;
color: #353636; color: $color-primary;
font-weight: 700; font-weight: 700;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -48,12 +54,12 @@ $font-size: 12px;
height: 18px; height: 18px;
width: 18px; width: 18px;
border-radius: 50%; border-radius: 50%;
background-color: #EFF1F4; background-color: var(--el-bg-color-page);
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
i { i {
color: #717171; color: $color-regular;
font-size: 10px; font-size: 10px;
-webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果 -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
} }
@@ -71,17 +77,17 @@ $font-size: 12px;
align-items: center; align-items: center;
margin-right: 10px; margin-right: 10px;
border-radius: 50%; border-radius: 50%;
background-color: #F3F7FA; background-color: var(--el-fill-color-light);
i { i {
font-size: 26px; font-size: 26px;
color: #4E84B4; color: #4E84B4; // todo 待确定
} }
} }
} }
.graph-close { .graph-close {
color: #575757; color: $color-regular;
font-size: 8px; font-size: 8px;
cursor: pointer; cursor: pointer;
} }
@@ -108,7 +114,7 @@ $font-size: 12px;
width: 130px; width: 130px;
font-family: NotoSansSChineseRegular; font-family: NotoSansSChineseRegular;
font-size: $font-size; font-size: $font-size;
color: #717171; color: $color-regular;
font-weight: 400; font-weight: 400;
padding-right: 10px; padding-right: 10px;
flex-shrink: 0; flex-shrink: 0;
@@ -116,7 +122,7 @@ $font-size: 12px;
.graph-content-item-value { .graph-content-item-value {
width: 230px; width: 230px;
color: #353636; color: $color-primary;
font-weight: 400; font-weight: 400;
overflow-wrap: break-word; overflow-wrap: break-word;
line-height: normal; line-height: normal;
@@ -130,7 +136,7 @@ $font-size: 12px;
.graph-relationship-item-label, .graph-relationship-item-value { .graph-relationship-item-label, .graph-relationship-item-value {
font-size: $font-size; font-size: $font-size;
color: #353636; color: $color-primary;
font-weight: 400; font-weight: 400;
//height: 40px; //height: 40px;
display: flex; display: flex;
@@ -143,7 +149,7 @@ $font-size: 12px;
} }
.graph-relationship-item-value { .graph-relationship-item-value {
color: #717171; color: $color-regular;
i { i {
cursor: pointer; cursor: pointer;
@@ -152,6 +158,10 @@ $font-size: 12px;
} }
} }
.margin-t--4 {
margin-top: -4px;
}
.graph-tag-list { .graph-tag-list {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -184,14 +194,14 @@ $font-size: 12px;
//修改popover样式 //修改popover样式
.graph-popover { .graph-popover {
width: auto !important; width: auto !important;
background: #303133 !important; background: $color-primary !important;
color: #fff !important; color: var(--el-color-white) !important;
font-size: 12px !important; font-size: 12px !important;
padding: 10px !important; padding: 10px !important;
} }
.graph-popover .el-popper__arrow::before { .graph-popover .el-popper__arrow::before {
background: #303133 !important; background: $color-primary !important;
} }
.graph-expand-relationship__icon { .graph-expand-relationship__icon {
@@ -200,6 +210,6 @@ $font-size: 12px;
.graph-basic-info__block-title { .graph-basic-info__block-title {
font-size: 13px; font-size: 13px;
color: #353636; color: $color-primary;
font-weight: 600; font-weight: 600;
} }

41
src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
View File

@@ -1,4 +1,6 @@
$font-size: 12px; $font-size: 12px;
$color-primary: var(--el-text-color-primary);
$color-regular: var(--el-text-color-regular);
.graph-list-header { .graph-list-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -10,21 +12,21 @@ $font-size: 12px;
span { span {
font-size: 16px; font-size: 16px;
color: #353636; color: $color-primary;
line-height: 21px; line-height: 21px;
font-weight: 600; font-weight: 600;
} }
.graph-list-header-icon { .graph-list-header-icon {
font-size: 21px; font-size: 21px;
color: #717171; color: $color-regular;
margin-right: 9px; margin-right: 9px;
} }
} }
.graph-list-header-number { .graph-list-header-number {
font-size: 12px; font-size: 12px;
color: #717171; color: $color-regular;
font-weight: 400; font-weight: 400;
span { span {
@@ -37,20 +39,24 @@ $font-size: 12px;
margin-top: 16px; margin-top: 16px;
margin-bottom: 24px; margin-bottom: 24px;
.graph-list-expand-btn__display {
display: inline-flex;
}
.graph-list-expand-btn { .graph-list-expand-btn {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
background: #38ACD2; background: var(--el-color-business);
border-radius: 3px; border-radius: 3px;
font-size: 12px; font-size: 12px;
color: #FFFFFF; color: var(--el-color-white);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 500;
padding: 14px 10px; padding: 14px 10px;
cursor: pointer; cursor: pointer;
border: 1px solid rgba(46,136,166,0.85); border: 1px solid rgba(46, 136, 166, 0.85);
i { i {
font-size: 16px; font-size: 16px;
@@ -66,7 +72,7 @@ $font-size: 12px;
.graph-list-content-header { .graph-list-content-header {
font-size: 14px; font-size: 14px;
color: #353636; color: $color-primary;
font-weight: 500; font-weight: 500;
} }
@@ -76,14 +82,14 @@ $font-size: 12px;
.graph-list-item-ip { .graph-list-item-ip {
margin-bottom: 10px; margin-bottom: 10px;
font-size: $font-size; font-size: $font-size;
color: #353636; color: $color-primary;
font-weight: 400; font-weight: 400;
} }
.graph-list-item-block { .graph-list-item-block {
width: 100%; width: 100%;
background: rgba(247, 247, 247, 1); background: var(--el-fill-color-light);
border: 1px solid rgba(226, 229, 236, 1); border: 1px solid var(--el-border-color-light);
border-radius: 2px; border-radius: 2px;
padding: 10px 15px; padding: 10px 15px;
@@ -94,7 +100,7 @@ $font-size: 12px;
width: 72px; width: 72px;
//margin-right: 15px; //margin-right: 15px;
font-size: $font-size; font-size: $font-size;
color: #717171; color: $color-regular;
font-weight: 400; font-weight: 400;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -110,12 +116,12 @@ $font-size: 12px;
width: 14px; width: 14px;
height: 10px; height: 10px;
margin-right: 5px; margin-right: 5px;
border: 1px solid #E8E8E8; border: 1px solid var(--el-color-info-light-8);
} }
.graph-list-item-value { .graph-list-item-value {
font-size: $font-size; font-size: $font-size;
color: #353636; color: $color-primary;
font-weight: 400; font-weight: 400;
line-height: 18px; line-height: 18px;
display: flex; display: flex;
@@ -125,7 +131,12 @@ $font-size: 12px;
.graph-list-item-value1 { .graph-list-item-value1 {
display: flex; display: flex;
align-content: center; align-items: center;
line-height: 14px;
div {
line-height: 10px;
}
} }
} }
@@ -150,6 +161,6 @@ $font-size: 12px;
.graph-list-dividing-line { .graph-list-dividing-line {
width: 300px; width: 300px;
height: 1px; height: 1px;
background: #ECECEC; background: var(--el-color-info-light-8);
margin: 11px 0; margin: 11px 0;
} }

4
src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<!--title--> <!--title-->
<div class="graph-detail-basic-info"> <div class="graph-detail-basic-info">
<div style="display: flex"> <div class="graph-detail-basic-info__block">
<div class="graph-detail__icon"><i :class="iconClass"></i></div> <div class="graph-detail__icon"><i :class="iconClass"></i></div>
<div class="graph-detail-header"> <div class="graph-detail-header">
@@ -47,7 +47,7 @@
</div> </div>
</div> </div>
<div class="graph-basic-info__block-content" style="margin-top: -4px;"> <div class="graph-basic-info__block-content margin-t--4">
<div v-for="item in relationList" :key="item.name"> <div v-for="item in relationList" :key="item.name">
<div class="graph-content-item graph-content-relationship-item" v-if="item.value === item.total"> <div class="graph-content-item graph-content-relationship-item" v-if="item.value === item.total">
<div class="graph-relationship-item-label"> <div class="graph-relationship-item-label">

6
src/views/entityExplorer/entityGraph/GraphEntityList.vue
View File

@@ -16,7 +16,7 @@
</div> </div>
<div class="graph-list-expand-btn-block"> <div class="graph-list-expand-btn-block">
<div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList"> <div class="graph-list-expand-btn graph-list-expand-btn__display" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" @click="expandList">
<i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i> <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
{{ $t('entity.graph.continueToExpand') }} {{ $t('entity.graph.continueToExpand') }}
</div> </div>
@@ -39,8 +39,8 @@
<div class="graph-list-item-block"> <div class="graph-list-item-block">
<div class="graph-list-item padding-b-4"> <div class="graph-list-item padding-b-4">
<div class="graph-list-item-label">{{ $t('overall.location') }}:</div> <div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
<div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;line-height: 14px;"> <div class="graph-list-item-value graph-list-item-value1">
<div style="line-height: 10px"> <div>
<img v-if="getCountry(item.detail)===countryNameIdMapping.Unknown || !countryNameIdMapping[getCountry(item.detail)]" src="../../../../public/images/flag/Unknown.svg" class="graph-list-country-flag"> <img v-if="getCountry(item.detail)===countryNameIdMapping.Unknown || !countryNameIdMapping[getCountry(item.detail)]" src="../../../../public/images/flag/Unknown.svg" class="graph-list-country-flag">
<img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[getCountry(item.detail)]}.png`)" class="graph-list-country-flag" > <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[getCountry(item.detail)]}.png`)" class="graph-list-country-flag" >
</div> </div>