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

CN-1594 feat: 部分css重构内容：实体详情tabs各模块

Browse Source
This commit is contained in:
刘洪洪
2024-03-29 16:03:48 +08:00
parent a0b44806bd
commit e8a9968e44
10 changed files with 165 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
src/assets/css/common/table-common.scss
View File

@@ -2,10 +2,13 @@
.list-page {
height: 100%;
width: 100%;
background-color: #f6f6f6;
background-color: var(--el-bg-color-page);
$border-color: var(--el-color-info-light-7);
$border-radius: 2px;
$color-white: var(--el-color-white);
.main-list {
background-color: white;
background-color: var(--el-fill-color-blank);
position: relative;
display: flex;
flex-direction: column;
@@ -13,16 +16,20 @@
width: 100%;
z-index: 0;
}
.main-container {
padding: 0;
height: 100%;
&>div {
background-color: white;
& > div {
background-color: var(--el-fill-color-blank);
}
}
.main-list.main-list-with-sub {
height: 50%;
}
.main-modal {
position: absolute;
height: 100%;
@@ -30,9 +37,10 @@
display: none;
z-index: 100;
}
.top-tools {
display: flex;
align-items : center;
align-items: center;
position: relative;
justify-content: space-between;
padding: 12px 20px;
@@ -41,41 +49,48 @@
align-items: center;
padding: 0 70px 0 15px;
height: 44px;
background-color: white;
border: 1px solid #E6EAED;
background-color: var(--el-fill-color-blank);
border: 1px solid var(--el-border-color-light);
}
.top-tool-search {
.top-tool-btn {
border-left: none;
}
.top-tool-btn--search {
width: 28px !important;
height:28px !important;
padding:unset !important;
height: 28px !important;
padding: unset !important;
display: flex;
align-items: center;
justify-content: center;
i {
font-size: 14px;
color: $--text-color-2;
margin-right:unset !important;
color: var(--el-text-color-regular);
margin-right: unset !important;
}
}
.top-tool-btn--search:hover {
border-left: none !important;
}
.top-tool-btn--search:focus {
border-left: none !important;
}
.el-input--small .el-input__wrapper {
height: 28px !important;
border-radius: 2px 0 0 2px !important;
}
.el-input--small{
.el-input--small {
width: 214px !important;
line-height: 27px;
}
.el-input--small .el-input__inner {
height: 28px;
border-radius: 2px 0 0 2px;
@@ -85,44 +100,52 @@
.top-tool-right {
display: flex;
}
.top-tool-left {
display: flex;
}
.top-tool-btn-group {
display: flex;
.top-tool-btn:not(:last-of-type):not(:first-of-type) {
border-left: none;
border-radius: 0;
}
.top-tool-btn:first-of-type:not(:last-of-type) {
border-radius: $--button-border-radius 0 0 $--button-border-radius;
border-radius: $border-radius 0 0 $border-radius;
}
.top-tool-btn:last-of-type:not(:first-of-type) {
border-radius: 0 $--button-border-radius $--button-border-radius 0;
border-radius: 0 $border-radius $border-radius 0;
border-left: none;
}
}
.top-tool-btn {
cursor: pointer;
height: 28px;
width: 72px;
border: 1px solid $--border-color-primary;
border: 1px solid $border-color;
outline: none;
border-radius: $--button-border-radius;
background-color: $--button-gray-background-color;
border-radius: 2px;
background-color: var(--el-fill-color-lighter);
transition: background-color linear .1s;
font-size:12px;
font-size: 12px;
font-weight: 500;
i {
font-size: 14px;
color: #575757;
margin-right:4px;
color: var(--el-text-color-regular);
margin-right: 4px;
}
}
.top-tool-btn:disabled {
cursor: not-allowed;
opacity: 0.66;
i {
}
@@ -131,75 +154,79 @@
.top-tool-btn.top-tool-btn--text {
padding: 0 8px;
width: unset;
color: #666;
color: var(--el-text-color-regular);
}
.top-tool-btn:hover:not(.cn-btn-disabled) {
border: 1px solid $--border-color-primary;
background-color: $--button-gray-hover-background-color;
border: 1px solid $border-color;
background-color: var(--cn-bg-color-light);
}
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
background-color: $--button-gray-active-background-color;
border: 1px solid $--border-color-primary;
i {
color: #575757;
}
}
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
background-color: $--button-gray-hover-background-color;
border-color: #FFC4B9;
border: 1px solid $border-color;
i {
color: #F0745A;
color: var(--el-text-color-regular);
}
}
.top-tool-btn--create {
background-color: #38ACD2 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important; // 涉及到表格样式，后续修改
color: $color-white;
i {
color: #FFFFFF;
color: $color-white;
}
}
.top-tool-btn--create:hover {
background-color: #57B8D9 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
color: $color-white;
i {
color: #FFFFFF;
color: $color-white;
}
}
.top-tool-btn--create:focus {
background-color: #31A5CD !important;
border-color: #2E88A6 !important;
color:#FFFFFF !important;
color: $color-white !important;
i {
color: #FFFFFF !important;
color: $color-white !important;
}
}
.top-tool-btn--create:disabled {
opacity: 0.66;
background-color: #38ACD2 !important;
background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
color: $color-white;
i {
color: #FFFFFF;
color: $color-white;
}
}
.btn-customize {
color: #2E88A6;
font-size: 12px;
.icon-gear{
.icon-gear {
color: #2E88A6;
width:12px;
height:12px;
margin-right:2px;
font-size:12px;
width: 12px;
height: 12px;
margin-right: 2px;
font-size: 12px;
}
}
.btn-customize:hover {
cursor:pointer;
cursor: pointer;
}
.top-tool-btn--dropdown {
@@ -220,183 +247,17 @@
border-bottom: none;
thead {
color: #333;
color: var(--el-text-color-primary);
}
.el-switch {
height: auto;
}
}
}
/*.cn-table {
position: relative;
padding: 0 20px;
width: 100%;
flex: auto;
height: calc(100% - 58px);
.el-table:not(.chart-table) {
position: absolute;
width: calc(100% - 40px);
// border: 1px solid $--right-box-border-color;
//border-bottom: none;
border-radius:4px;
.caret-wrapper {
height: 23px;
.sort-caret.ascending {
top: 1px;
}
.sort-caret.descending {
bottom: 0;
}
}
.el-switch {
height: auto;
--el-switch-on-color: #699DC9;
--el-switch-off-color: #C0CEDB;
}
.el-table-column--selection {
width: 55px !important;
}
td {
padding: 3px 0 4px 0;
border-bottom: 1px solid $--right-box-border-color;
}
th {
border-color: $--right-box-border-color;
padding: 8px 0;
background: #FFF;
border-right:0px;
}
.el-table__header th:first-of-type {
border-left: none;
}
.gutter {
position: fixed;
right: 31px;
height: 49px;
border-bottom: 1px solid $--right-box-border-color;
background-color: white;
}
thead {
color: #333;
}
.el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
background-color: lighten($--color-primary, 95%) !important;
}
.table-operation-title {
text-align: center;
}
.table-operation-items {
display: flex;
justify-content: center;
.table-operation-item {
display: flex;
height: 22px;
border-radius: $--button-border-radius;
outline: none;
transition: background-color linear .1s;
}
.table-operation-item.table-operation-item--disable{
border: 1px solid $--border-color-primary;
background-color: #DEDEDE;
opacity: 0.6;
outline: none;
i {
font-size: 14px;
color: #fff;
}
}
&>.table-operation-item {
justify-content: center;
align-items: center;
width: 30px;
margin-right: 10px;
border: none;
border-radius: $--button-border-radius;
background-color: $--button-primary-background-color;
opacity: 1;
cursor: pointer;
transition: all .2s;
i {
color: $--button-primary-color;
font-size: 12px;
}
}
&>.table-operation-item:hover {
opacity: .8;
}
.table-operation-item.table-operation-item--more {
justify-content: center;
align-items: center;
border: 1px solid $--border-color-primary;
width: 30px;
i {
color: #999;
font-size: 12px;
}
}
}
}
}
!* start--覆盖el-table边框、gutter等样式 *!
.el-table__body-wrapper, .el-table__fixed-body-wrapper {
box-shadow: 1px 0 $--right-box-border-color;
.cell {
color: #333;
}
}
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
visibility: hidden;
}
.cn-table {
.el-table--border td {
border-right: none !important;
}
!* 最后一列用box-shadow模拟边框 *!
!*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
//border-right: none !important;
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table__fixed-body-wrapper {
td:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
}
}
.el-table__fixed-header-wrapper {
th:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
}
th:last-of-type {
border-right: none !important;
}
}*!
.el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
// width: 0;
}
.el-table--border {
border-bottom: 1px solid #E7EAED;
.el-table__inner-wrapper {
height: 100% !important;
}
.el-table__inner-wrapper::before {
height: 0;
}
}
}*/
/* end--覆盖el-table边框、gutter等样式 */
.cn-pagination{
.cn-pagination {
position: absolute;
bottom: 8px;
height: 48px;
@@ -409,11 +270,13 @@
.el-scrollbar__view {
height: 100%;
}
// 令no data出现时table底部不出现滚动条
.el-table__empty-block {
width: calc(100% - 8px) !important;
}
}
/*.operation-dropdown-text {
display: inline-block;
font-size: 13px;
@@ -456,25 +319,36 @@
height: 100%;
cursor: col-resize;
}
.margin-r-10{
.margin-r-10 {
margin-right: 10px;
}
.margin-r-20{
.margin-r-20 {
margin-right: 20px;
}
.margin-l-10{
.margin-l-10 {
margin-left: 10px;
}
.margin-t-20{
.margin-t-20 {
margin-top: 20px;
}
.margin-r-3{
.margin-r-3 {
margin-right: 3px;
}
.margin-r-30 {
margin-right: 30px;
}
.margin-l-6 {
margin-left: 6px;
}
.tooltip-column-name {
color: #aeb0b9;
height:40px;
height: 40px;
}

20
src/assets/css/components/views/charts2/digitalCertificate.scss
View File

@@ -8,7 +8,7 @@
.digital-certificate-header__icon {
width: 4px;
height: 16px;
background: #38ACD2;
background: var(--el-color-business);
border-radius: 1px;
margin-right: 6px;
}
@@ -16,8 +16,8 @@
.digital-certificate-header-name {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #575757;
font-weight: 600;
color: var(--el-text-color-regular);
font-weight: bold;
}
}
@@ -25,9 +25,9 @@
height: auto;
min-height: 262px;
padding: 20px;
background: rgba(113, 113, 113, 0.04);
border: 1px solid #E2E5ECFF;
border-radius: 4px;
background: var(--el-fill-color-lighter);
border: 1px solid var(--el-border-color-light);
border-radius: var(--el-border-radius-base);
.digital-certificate-body-tags {
display: flex;
@@ -48,21 +48,19 @@
width: 176px;
font-family: $font-family;
font-size: 14px;
color: #717171;
font-weight: 400;
color: var(--el-text-color-regular);
}
.certificate-list-item__value, .certificate-list-item__value1 {
width: calc(100% - 176px - 75px);
font-family: $font-family;
font-size: 14px;
color: #353636;
font-weight: 400;
color: var(--el-text-color-primary);
}
.certificate-list-item__value1 {
padding-bottom: 2px;
border-bottom: 1px #353636 solid;
border-bottom: 1px var(--el-text-color-primary) solid;
word-break: break-word;
}
}

62
src/assets/css/components/views/charts2/domainNameResolution.scss
View File

@@ -1,69 +1,75 @@
.type-data__column {
display:flex;
display: flex;
flex-direction: column;
margin-left:5px;
margin-right:0px;
margin-top:0px;
margin-left: 5px;
margin-right: 0;
margin-top: 0;
.type-data {
display:flex;
flex-flow:row wrap;
margin-top:0px;
display: flex;
flex-flow: row wrap;
margin-top: 0;
.type-title {
display:flex;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom:15px;
margin-right:10px;
margin-bottom: 15px;
margin-right: 10px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #575757;
color: var(--el-text-color-regular);
line-height: 20px;
font-weight: 600;
.title-mark {
width: 4px;
height: 16px;
margin-left:0px;
margin-left: 0;
margin-right: 6px;
background: #38ACD2;
background: var(--el-color-business);
border-radius: 1px;
}
.type-title-word {
margin-right: 6px;
}
}
.more{
margin-bottom:20px;
.more {
margin-bottom: 20px;
.button {
color:#909399;
color: var(--el-color-info);
cursor: pointer;
}
}
.type-content {
margin-bottom:0px;
display:flex;
margin-bottom: 0;
display: flex;
flex-flow: row wrap;
width:100%;
width: 100%;
.data-item {
display: flex;
justify-content: center;
align-items: center;
background: rgba(119,131,145,0.06);
border: 1px solid rgba(119,131,145,0.36);
background: var(--cn-bg-color-lighter);
border: 1px solid var(--el-color-info-light-5);
border-radius: 2px;
height:28px;
padding:8px 15px;
margin-right:10px;
margin-bottom:15px;
height: 28px;
padding: 8px 15px;
margin-right: 10px;
margin-bottom: 15px;
font-size: 12px;
color: #353636;
font-weight: 400;
color: var(--el-text-color-primary);
}
}
.type-error-content {
width:100%;
width: 100%;
height: 40px;
margin-bottom: 12px;
position: relative;

4
src/assets/css/components/views/charts2/entityDetailTabs.scss
View File

@@ -144,7 +144,7 @@
position: absolute;
height: 0;
width: 195px;
border-bottom: 1px dashed var(--el-border-color-light);
border-bottom: 1px dashed #d3d3d3;
top: 319px;
left: 575px;
}
@@ -153,7 +153,7 @@
position: absolute;
height: 0;
width: 195px;
border-bottom: 1px dashed var(--el-border-color-light);
border-bottom: 1px dashed #d3d3d3;
top: 319px;
left: 830px;
}

2
src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
View File

@@ -1,5 +1,5 @@
<template>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-error v-if="showError" :content="errorMsg"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div v-if="!isNoData && !showError" class="entity-detail-event-block" style="height: 100%;width: 100%;position: relative;">

4
src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-error v-if="showError" :content="errorMsg"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div v-if="!isNoData && !showError && !loading" class="digital-certificate" :style="{width: moreCertificatesWidth}">
@@ -12,7 +12,7 @@
</div>
</div>
<div v-for="(item, index) in infoList" :key="index" style="margin-top: 20px">
<div v-for="(item, index) in infoList" :key="index" class="margin-t-20">
<div class="digital-certificate-body">
<div class="digital-certificate-body-tags">
<div :class="item.flag === '0' ? 'entity-tag entity-tag--level-two-negative-no-background' : 'entity-tag entity-tag--level-two-positive-no-background'">{{ this.$t(getTrusted(item.flag)) }}</div>

2
src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<!--初步方案：error提示替换table。后续若改为table内error提示，记得在此修改-->
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-error v-if="showError" :content="errorMsg"></chart-error>
<chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
<div v-if="!isNoData && !showError && !loading" class="information-aggregation__table">
<el-table

21
src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-error v-if="showError" :content="errorMsg"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div v-if="!showError && !isNoData && initFlag" class="type-data__column">
@@ -15,7 +15,12 @@
</div>
</div>
<div class="more" v-if="openPortList.length > entityDetailRelatedEntitiesShowSize">
<span class="button" :style="{'opacity': openPortList.length > showOpenPortListInfo.num ? 1 : 0.6}" @click="showMore(showOpenPortListInfo,openPortList)">{{ $t('overall.more') }} > </span>
<span
class="button"
:style="{'opacity': openPortList.length > showOpenPortListInfo.num ? 1 : 0.6}"
@click="showMore(showOpenPortListInfo,openPortList)">
{{ $t('overall.more') }} >
</span>
</div>
</div>
</div>
@@ -33,8 +38,7 @@ import { getNowTime } from '@/utils/date-util'
export default {
name: 'OpenPort',
mixins: [chartMixin],
props: {
},
props: {},
data () {
return {
openPortList: [],
@@ -98,9 +102,12 @@ export default {
},
getUrlByEntityType (type) {
switch (type) {
case 'ip': return api.entity.openPortOfIp
case 'domain': return api.entity.openPortOfDomain
case 'app': return api.entity.openPortOfApp
case 'ip':
return api.entity.openPortOfIp
case 'domain':
return api.entity.openPortOfDomain
case 'app':
return api.entity.openPortOfApp
}
}
}

4
src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
View File

@@ -1,5 +1,5 @@
<template>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-error v-if="showError" :content="errorMsg"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div v-if="!isNoData && !showError" class="entity-detail-event-block">
@@ -17,7 +17,7 @@
class="detection-event-severity-color-block"
:style="`background-color: ${eventSeverityColor[item.eventSeverity]}`">
</span>
<span class="detection-event-severity-block" style="margin-right: 30px">
<span class="detection-event-severity-block margin-r-30">
{{ toUpperCaseByString(item.eventType) || '-' }}
</span>
<div class="cn-detection__body">

2
src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
View File

@@ -1,5 +1,5 @@
<template>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-error v-if="showError" :content="errorMsg"></chart-error>
<chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
<div v-if="!isNoData && !showError" class="entity-detail-event-block">