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

CN-1594 feat: npm的第二、三个tab

Browse Source
This commit is contained in:
chenjinsong
2024-04-08 17:42:48 +08:00
parent 36489d2aa8
commit cc36e47197
10 changed files with 122 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/assets/css/components/views/charts2/npmAppEventTable.scss
View File

@@ -1,54 +1,49 @@
.npm-app-event {
$blue:#046ECA;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.metric-select {
color:#575757;
color: var(--el-text-color-regular);
display: flex;
margin-bottom: 10px;
flex-direction: row-reverse;
align-items: center;
.el-scrollbar {
width:100%;
}
span {
font-size: 12px;
font-weight: 400;
}
.option__select.select-column {
border-radius: 2px;
.el-input__inner {
width: 100px;
height:24px;
height: 24px;
padding-left: 4px;
font-size: 12px;
color: #2C72C6;
font-weight:400;
}
}
.option-popper {
margin-bottom:0px;
.el-select-dropdown__item.selected {
span{
color: #2C72C6 !important;
}
}
margin-bottom: 0;
}
}
.npm-app-event-table {
height: calc(100% - 30px) !important;
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
padding: 1px;
.el-table__inner-wrapper::before {
height: 0; // 去掉底部的边框
}
.el-table__header-wrapper {
tr th {
padding: 4px 0;
.data-column__span {
font-size: 12px;
color: $--text-color-1;
font-weight: 600;
color: var(--el-text-color-primary);
font-weight: bold;
}
}
}
@@ -65,50 +60,48 @@
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.data-severity {
font-size: 12px;
color: #353636;
font-weight: 400;
margin-left:6px;
color: var(--el-text-color-primary);
margin-left: 6px;
}
.red-dot {
width:6px;
height:6px;
background: #E26154;
width: 6px;
height: 6px;
background: var(--el-color-error);
border-radius: 3px;
margin-right:4px;
}
.grey-dot {
opacity: 0.35;
background: #717171;
background: var(--el-text-color-regular);
border-radius: 3px;
width:6px;
height:6px;
margin-right:4px;
width: 6px;
height: 6px;
margin-right: 4px;
}
.data-applications {
font-size: 12px;
color: $blue;
font-weight: 400;
color: var(--el-color-primary);
}
.data-eventType {
padding: 0 6px;
font-size: 12px;
color: $blue;
font-weight: 600;
background: #EBF1F4;
color: var(--el-color-primary);
font-weight: bold;
background: var(--cn-bg-color-light);
border-radius: 4px;
min-width: fit-content;
}
.data-eventCount {
font-size: 12px;
color: #046ECA;
font-weight: 500;
width:200px;
color: var(--el-color-primary);
width: 200px;
}
}
.el-table--group::after,.el-table--border::after,.el-table::before {
height: 0px;
height: 0;
}
.table-error {
position: absolute;

30
src/assets/css/components/views/charts2/npmEventsByType.scss
View File

@@ -2,19 +2,21 @@
position: relative;
width: 100%;
height: 100%;
.npm-event-title {
display: flex;
font-size: 14px;
color: #353636;
font-weight: 600;
color: var(--el-text-color-primary);
font-weight: bold;
margin-bottom: 10px;
}
.npm-event-pie {
width: 100%;
height: calc(100% - 30px);
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
display: flex;
.panel-chart__no-data {
height: calc(100% - 30px);
}
@@ -23,6 +25,7 @@
width: 100%;
display: flex;
align-items: center;
.chart-drawing {
height: 100%;
width: 50%;
@@ -31,12 +34,12 @@
display: flex;
width: 40%;
justify-content: space-around;
.npm-event-pie-legend {
.npm-event-pie-legend-title {
font-size: 12px;
color: #575757;
color: var(--el-text-color-regular);
line-height: 12px;
font-weight: 400;
margin-bottom: 15px;
}
.npm-event-pie-legend-type {
@@ -51,31 +54,30 @@
.npm-event-pie-legend-type-severity {
font-size: 12px;
line-height: 12px;
color: #353636;
font-weight: 400;
color: var(--el-text-color-primary);
text-transform: capitalize;
}
.critical {
background: rgb(226,97,84);
background: var(--cn-color-critical);
}
.high {
background: rgb(228,142,77);
background: var(--cn-color-high);
}
.info {
background: rgb(136,175,101);
background: var(--cn-color-info);
}
.medium {
background: rgb(231,179,78);
background: var(--cn-color-medium);
}
.low {
background: rgb(218,199,75);
background: var(--cn-color-low);
}
}
.npm-event-pie-legend-total {
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
line-height: 12px;
font-weight: 600;
font-weight: bold;
margin-bottom: 11px;
}
}

25
src/assets/css/components/views/charts2/npmEventsHeader.scss
View File

@@ -1,6 +1,7 @@
.npm-header {
display: flex;
height: 100%;
.npm-header-body:nth-of-type(5) {
margin-right: 0;
}
@@ -8,16 +9,18 @@
height: 100%;
display: flex;
justify-content: space-between;
background: rgba(113,113,113,0.06);
border: 1px solid #E2E5EC;
background: var(--el-fill-color-lighter);
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
padding: 0 14px 0 16px;
margin-right: 12px;
align-items: center;
flex: 1;
.npm-header-body-severity {
display: flex;
align-items: center;
.npm-header-body-severity-icon {
border-radius: 6px;
width: 12px;
@@ -25,32 +28,32 @@
margin-right: 10px;
}
.critical {
background: rgb(226,97,84);
background: var(--cn-color-critical);
}
.high {
background: rgb(228,142,77);
background: var(--cn-color-high);
}
.info {
background: rgb(136,175,101);
background: var(--cn-color-info);
}
.medium {
background: rgb(231,179,78);
background: var(--cn-color-medium);
}
.low {
background: rgb(218,199,75);
background: var(--cn-color-low);
}
.npm-header-body-severity-value {
font-size: 12px;
color: #575757;
font-weight: 900;
color: var(--el-text-color-regular);
font-weight: bold;
text-transform: capitalize;
}
}
.npm-header-body-total {
font-family: Helvetica-Bold;
font-size: 16px;
color: #353636;
font-weight: 700;
color: var(--el-text-color-primary);
font-weight: bold;
}
}
}

31
src/assets/css/components/views/charts2/npmLine.scss
View File

@@ -2,26 +2,27 @@
position: relative;
height: 100%;
width: 100%;
border: 1px solid #f0f0f0;
border: 1px solid var(--el-border-color-lighter);
.npm-line-title {
display: flex;
font-size: 14px;
color: #353636;
font-weight: 500;
color: var(--el-text-color-primary);
margin: 20px 0 0 20px;
}
.npm-line-header {
display: flex;
margin: 20px 20px 0 20px;
justify-content: space-between;
.npm-line-header-title {
display: flex;
font-size: 14px;
color: #353636;
font-weight: 500;
color: var(--el-text-color-primary);
}
.npm-line-header-rights {
display: flex;
.npm-line-header-right {
display: flex;
margin-right: 10px;
@@ -33,10 +34,10 @@
}
.npm-line-header-right.active {
.npm-line-header-icon {
background: #ccc;
background: var(--el-color-info-light-5);
}
.npm-line-header-value {
color: #ccc;
color: var(--el-color-info-light-5);
}
}
.npm-line-header-icon {
@@ -46,39 +47,41 @@
margin-right: 4px;
}
.npm-line-header-icon.icon0 {
background: #749F4D;
background: var(--el-color-success);
}
.npm-line-header-icon.icon1 {
background: #98709B;
background: #98709B; // TODO 暂无变量
}
.npm-line-header-icon.icon2 {
background: #E5A219;
background: var(--el-color-warning);
}
.npm-line-header-value {
font-size: 12px;
color: #717171;
color: var(--el-text-color-regular);
line-height: 12px;
font-weight: 400;
}
}
.chart-drawing {
height: calc(100% - 41px);
width: 100%;
.echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body {
display: flex;
.cn-chart-tooltip {
display: flex;
flex-direction: column;
flex: 1;
.cn-chart-tooltip-box {
margin-right: 10px;
}
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
line-height: 21px;
font-weight: 600;
font-weight: bold;
}
}
}

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

@@ -1,7 +1,7 @@
.cn-chart__map-title {
display: flex;
font-size: 14px;
color: #353636;
color: var(--el-text-color-regular);
font-weight: 600;
margin-bottom: 10px;
}
@@ -18,7 +18,7 @@
.map-canvas {
height: 100%;
width: 100%;
background-color: #CAD2D3;
background-color: var(--cn-map-bg-color);
}
.map-filter {
position: absolute;
@@ -32,7 +32,7 @@
}
.el-select__placeholder {
padding-left: 16px;
color: #2c72c6;
color: var(--el-color-primary);
}
.el-select__prefix {
padding-left: 5px;
@@ -45,7 +45,7 @@
margin-left: 10px;
.el-input__inner {
color: #2C72C6;
color: var(--el-color-primary);
}
&.map-select__direction {
width: 110px;
@@ -60,7 +60,7 @@
height: 28px;
.el-select__placeholder {
padding-left: 4px;
color: #c0c4cc;
color: var(--el-color-info-light-5);
}
}
}
@@ -74,7 +74,7 @@
left: 10px;
position: absolute;
padding: 0 10px;
background-color: white;
background-color: var(--el-fill-color-blank);
.map-legend__row {
display: flex;
@@ -87,18 +87,18 @@
border-radius: 50%;
&.map-legend__symbol--green {
background-color: #7E9F54;
background-color: var(--el-color-success-dark-2);
}
&.map-legend__symbol--yellow {
background-color: #E5A219;
background-color: var(--el-color-warning);
}
&.map-legend__symbol--red {
background-color: #E26154;
background-color: var(--el-color-error);
}
}
.map-legend__desc {
padding-left: 5px;
color: #575757;
color: var(--el-text-color-regular);
}
}
}

66
src/assets/css/components/views/charts2/npmRecentEvents.scss
View File

@@ -1,11 +1,12 @@
.npm-recent {
height: 100%;
width: 100%;
.npm-recent-title {
display: flex;
font-size: 14px;
color: #353636;
font-weight: 600;
color: var(--el-text-color-primary);
font-weight: bold;
margin-bottom: 10px;
}
.npm-recent-table-ten.npm-recent-table {
@@ -17,21 +18,16 @@
}
.npm-recent-table {
height: calc(100% - 30px) !important;
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
padding: 1px;
.el-scrollbar__thumb {
background: rgba(0,0,0,0);
//width: calc(100% - 200px) !important;
}
.el-table__empty-block {
width: calc(100% - 2px) !important;
.el-table__inner-wrapper::before {
height: 0; // 去掉底部的边框
}
.el-table__empty-text {
line-height: 25px !important;
.table-no-data {
//margin-left: -2px !important;
.icon {
width: 30px;
height: 30px;
@@ -39,18 +35,18 @@
}
.table-no-data__title {
font-size: 14px;
color: #575757;
font-weight: 400;
color: var(--el-text-color-regular);
}
}
}
.el-table__header-wrapper {
tr th {
padding: 4px 0;
.data-column__span {
font-size: 12px;
color: $--text-color-1;
font-weight: 600;
color: var(--el-text-color-primary);
font-weight: bold;
}
}
}
@@ -64,59 +60,51 @@
display: flex !important;
height: 20px;
line-height: 20px;
.data-recent-table-severity {
font-size: 12px;
font-weight: 500;
border-radius: 4px;
padding: 0 6px;
text-transform: capitalize;
}
.critical {
color: #E26154;
background: rgba(226,97,84, .18);
color: var(--cn-color-critical);
background: rgba(var(--cn-color-critical-rgb), .18);
}
.high {
color: #E48E4D;
background: rgba(228,142,77, .18);
color: var(--cn-color-high);
background: rgba(var(--cn-color-high-rgb), .18);
}
.info {
color: #88AF65;
background: rgba(136,175,101, .18);
color: var(--cn-color-info);
background: rgba(var(--cn-color-info-rgb), .18);
}
.medium {
color: #E7B34E;
background: rgba(231,179,78, .18);
color: var(--cn-color-medium);
background: rgba(var(--cn-color-medium-rgb), .18);
}
.low {
color: #DAC74B;
background: rgba(218,199,75, .18);
color: var(--cn-color-low);
background: rgba(var(--cn-color-low-rgb), .18);
}
.data-recent-table-entity {
font-size: 12px;
color: #046ECA;
font-weight: 400
color: var(--el-color-primary);
}
.click-active {
cursor: pointer;
}
.data-recent-table-eventType {
font-size: 12px;
color: #046ECA;
font-weight: 600;
background: #EBF1F4;
color: var(--el-color-primary);
font-weight: bold;
background: var(--cn-bg-color-light);
border-radius: 4px;
padding: 0 6px;
}
span {
font-size: 12px;
color: #353636;
font-weight: 400;
color: var(--el-text-color-primary);
}
}
.el-table--group::after,.el-table--border::after, .el-table::before {
height: 0px;
}
.el-table .cell {
padding: 0 10px !important;
}
}

5
src/assets/css/components/views/entityExplorer/entityList/row.scss
View File

@@ -181,7 +181,7 @@
}
.basic-info__item1 {
span: {
span {
color: $color-regular;
}
@@ -195,14 +195,12 @@
}
.row-item-label {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: var(--el-text-color-regular);
font-weight: 400;
}
.row-item-value {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: var(--el-text-color-primary);
font-weight: 400;
@@ -240,7 +238,6 @@
font-size: 12px;
//color: #2C72C6;
color: var(--el-color-primary);
font-weight: 400;
display: flex;
flex-direction: column;
justify-content: space-around;

6
src/assets/css/main.scss
View File

@@ -71,10 +71,16 @@
--cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
--cn-bg-color-lighter: #F7F7F7; // 一个用得比较多的背景色
--cn-color-critical: #D84C4C; // critical 严重等级分布
--cn-color-critical-rgb: 216,76,76; // critical 严重等级分布
--cn-color-high: #FF9A79; // high
--cn-color-high-rgb: 255,154,121; // high
--cn-color-info: #D1BD50; // info
--cn-color-info-rgb: 209,189,80; // info
--cn-color-medium: #FFB65A; // medium
--cn-color-medium-rgb: 255,182,90; // medium
--cn-color-low: #FFD82D; // low
--cn-color-low-rgb: 255,216,45; // low
--cn-map-bg-color: #CAD2D3; // 地图底色
}
@font-face {

1
src/views/charts2/charts/npm/NpmAppEventTable.vue
View File

@@ -6,7 +6,6 @@
:data="tableData"
class="npm-app-event-table"
:row-class-name="rowClassName"
height="100%"
empty-text=""
>
<template v-for="(item, index) in customTableTitles" :key="index">

1
src/views/charts2/charts/npm/NpmRecentEvents.vue
View File

@@ -11,7 +11,6 @@
class="npm-recent-table"
:class="{'npm-recent-table-ten': tableData.length === 10}"
empty-text=""
height="100%"
>
<template v-for="(item, index) in customTableTitles" :key="index">
<el-table-column class="data-column">