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

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

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

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

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

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

@@ -2,26 +2,27 @@
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
border: 1px solid #f0f0f0; border: 1px solid var(--el-border-color-lighter);
.npm-line-title { .npm-line-title {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 500;
margin: 20px 0 0 20px; margin: 20px 0 0 20px;
} }
.npm-line-header { .npm-line-header {
display: flex; display: flex;
margin: 20px 20px 0 20px; margin: 20px 20px 0 20px;
justify-content: space-between; justify-content: space-between;
.npm-line-header-title { .npm-line-header-title {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 500;
} }
.npm-line-header-rights { .npm-line-header-rights {
display: flex; display: flex;
.npm-line-header-right { .npm-line-header-right {
display: flex; display: flex;
margin-right: 10px; margin-right: 10px;
@@ -33,10 +34,10 @@
} }
.npm-line-header-right.active { .npm-line-header-right.active {
.npm-line-header-icon { .npm-line-header-icon {
background: #ccc; background: var(--el-color-info-light-5);
} }
.npm-line-header-value { .npm-line-header-value {
color: #ccc; color: var(--el-color-info-light-5);
} }
} }
.npm-line-header-icon { .npm-line-header-icon {
@@ -46,39 +47,41 @@
margin-right: 4px; margin-right: 4px;
} }
.npm-line-header-icon.icon0 { .npm-line-header-icon.icon0 {
background: #749F4D; background: var(--el-color-success);
} }
.npm-line-header-icon.icon1 { .npm-line-header-icon.icon1 {
background: #98709B; background: #98709B; // TODO 暂无变量
} }
.npm-line-header-icon.icon2 { .npm-line-header-icon.icon2 {
background: #E5A219; background: var(--el-color-warning);
} }
.npm-line-header-value { .npm-line-header-value {
font-size: 12px; font-size: 12px;
color: #717171; color: var(--el-text-color-regular);
line-height: 12px; line-height: 12px;
font-weight: 400;
} }
} }
.chart-drawing { .chart-drawing {
height: calc(100% - 41px); height: calc(100% - 41px);
width: 100%; width: 100%;
.echarts-tooltip.echarts-tooltip-dark { .echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body { .cn-chart-body {
display: flex; display: flex;
.cn-chart-tooltip { .cn-chart-tooltip {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
.cn-chart-tooltip-box { .cn-chart-tooltip-box {
margin-right: 10px; margin-right: 10px;
} }
.cn-chart-tooltip-value.cn-chart-tooltip__color { .cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px; font-size: 12px;
color: #353636; color: var(--el-text-color-primary);
line-height: 21px; 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 { .cn-chart__map-title {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: #353636; color: var(--el-text-color-regular);
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
} }
@@ -18,7 +18,7 @@
.map-canvas { .map-canvas {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #CAD2D3; background-color: var(--cn-map-bg-color);
} }
.map-filter { .map-filter {
position: absolute; position: absolute;
@@ -32,7 +32,7 @@
} }
.el-select__placeholder { .el-select__placeholder {
padding-left: 16px; padding-left: 16px;
color: #2c72c6; color: var(--el-color-primary);
} }
.el-select__prefix { .el-select__prefix {
padding-left: 5px; padding-left: 5px;
@@ -45,7 +45,7 @@
margin-left: 10px; margin-left: 10px;
.el-input__inner { .el-input__inner {
color: #2C72C6; color: var(--el-color-primary);
} }
&.map-select__direction { &.map-select__direction {
width: 110px; width: 110px;
@@ -60,7 +60,7 @@
height: 28px; height: 28px;
.el-select__placeholder { .el-select__placeholder {
padding-left: 4px; padding-left: 4px;
color: #c0c4cc; color: var(--el-color-info-light-5);
} }
} }
} }
@@ -74,7 +74,7 @@
left: 10px; left: 10px;
position: absolute; position: absolute;
padding: 0 10px; padding: 0 10px;
background-color: white; background-color: var(--el-fill-color-blank);
.map-legend__row { .map-legend__row {
display: flex; display: flex;
@@ -87,18 +87,18 @@
border-radius: 50%; border-radius: 50%;
&.map-legend__symbol--green { &.map-legend__symbol--green {
background-color: #7E9F54; background-color: var(--el-color-success-dark-2);
} }
&.map-legend__symbol--yellow { &.map-legend__symbol--yellow {
background-color: #E5A219; background-color: var(--el-color-warning);
} }
&.map-legend__symbol--red { &.map-legend__symbol--red {
background-color: #E26154; background-color: var(--el-color-error);
} }
} }
.map-legend__desc { .map-legend__desc {
padding-left: 5px; 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 { .npm-recent {
height: 100%; height: 100%;
width: 100%; width: 100%;
.npm-recent-title { .npm-recent-title {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 600; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
} }
.npm-recent-table-ten.npm-recent-table { .npm-recent-table-ten.npm-recent-table {
@@ -17,21 +18,16 @@
} }
.npm-recent-table { .npm-recent-table {
height: calc(100% - 30px) !important; height: calc(100% - 30px) !important;
border: 1px solid #E2E5EC; border: 1px solid var(--el-border-color-light);
border-radius: 4px; border-radius: 4px;
padding: 1px;
.el-scrollbar__thumb { .el-table__inner-wrapper::before {
background: rgba(0,0,0,0); height: 0; // 去掉底部的边框
//width: calc(100% - 200px) !important;
}
.el-table__empty-block {
width: calc(100% - 2px) !important;
} }
.el-table__empty-text { .el-table__empty-text {
line-height: 25px !important; line-height: 25px !important;
.table-no-data { .table-no-data {
//margin-left: -2px !important;
.icon { .icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
@@ -39,18 +35,18 @@
} }
.table-no-data__title { .table-no-data__title {
font-size: 14px; font-size: 14px;
color: #575757; color: var(--el-text-color-regular);
font-weight: 400;
} }
} }
} }
.el-table__header-wrapper { .el-table__header-wrapper {
tr th { tr th {
padding: 4px 0; padding: 4px 0;
.data-column__span { .data-column__span {
font-size: 12px; font-size: 12px;
color: $--text-color-1; color: var(--el-text-color-primary);
font-weight: 600; font-weight: bold;
} }
} }
} }
@@ -64,59 +60,51 @@
display: flex !important; display: flex !important;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
.data-recent-table-severity { .data-recent-table-severity {
font-size: 12px; font-size: 12px;
font-weight: 500;
border-radius: 4px; border-radius: 4px;
padding: 0 6px; padding: 0 6px;
text-transform: capitalize; text-transform: capitalize;
} }
.critical { .critical {
color: #E26154; color: var(--cn-color-critical);
background: rgba(226,97,84, .18); background: rgba(var(--cn-color-critical-rgb), .18);
} }
.high { .high {
color: #E48E4D; color: var(--cn-color-high);
background: rgba(228,142,77, .18); background: rgba(var(--cn-color-high-rgb), .18);
} }
.info { .info {
color: #88AF65; color: var(--cn-color-info);
background: rgba(136,175,101, .18); background: rgba(var(--cn-color-info-rgb), .18);
} }
.medium { .medium {
color: #E7B34E; color: var(--cn-color-medium);
background: rgba(231,179,78, .18); background: rgba(var(--cn-color-medium-rgb), .18);
} }
.low { .low {
color: #DAC74B; color: var(--cn-color-low);
background: rgba(218,199,75, .18); background: rgba(var(--cn-color-low-rgb), .18);
} }
.data-recent-table-entity { .data-recent-table-entity {
font-size: 12px; font-size: 12px;
color: #046ECA; color: var(--el-color-primary);
font-weight: 400
} }
.click-active { .click-active {
cursor: pointer; cursor: pointer;
} }
.data-recent-table-eventType { .data-recent-table-eventType {
font-size: 12px; font-size: 12px;
color: #046ECA; color: var(--el-color-primary);
font-weight: 600; font-weight: bold;
background: #EBF1F4; background: var(--cn-bg-color-light);
border-radius: 4px; border-radius: 4px;
padding: 0 6px; padding: 0 6px;
} }
span { span {
font-size: 12px; font-size: 12px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 400;
} }
} }
.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 { .basic-info__item1 {
span: { span {
color: $color-regular; color: $color-regular;
} }
@@ -195,14 +195,12 @@
} }
.row-item-label { .row-item-label {
font-family: NotoSansSChineseRegular;
font-size: 14px; font-size: 14px;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
font-weight: 400; font-weight: 400;
} }
.row-item-value { .row-item-value {
font-family: NotoSansSChineseRegular;
font-size: 14px; font-size: 14px;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
font-weight: 400; font-weight: 400;
@@ -240,7 +238,6 @@
font-size: 12px; font-size: 12px;
//color: #2C72C6; //color: #2C72C6;
color: var(--el-color-primary); color: var(--el-color-primary);
font-weight: 400;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;

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

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

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

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