gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev-3.1.1_theme' into dev-3.2

Browse Source
This commit is contained in:
chenjinsong
2021-11-29 15:43:27 +08:00
parent 4d30133907 fe1f7cf15c
commit 214003e9ca
53 changed files with 826 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
nezha-fronted/src/assets/css/common.scss
View File

@@ -146,7 +146,7 @@
text-transform: capitalize;
}
.personal-dropdown {
border-bottom: 1px solid #E7EAED;
border-bottom: 1px solid $--border-color-light;
padding: 0 20px;
.personal-dropdown__username {
max-width: 109px;
@@ -234,3 +234,97 @@ td .nz-icon-gear:before{
opacity: 1 !important;
}
}
.right-box .right-box-form-add,.right-box .right-box-form-minus-box{
padding:4px 6px;
background: $--background-color-copy;
border-radius: $--border-radius-small;
border: 1px solid $--span-nz-icon-border-color;
cursor: pointer;
.nz-icon-plus {
color: $--nz-icon-color;
}
}
.el-time-panel {
background-color: $--background-color-empty;
.el-time-panel__footer {
border: 1px solid $--border-color-light;
}
}
.el-scrollbar {
background-color: $--background-color-empty;
}
/* el-picker 下拉时间选择器 */
.el-picker-panel__footer {
border-top: 1px solid $--border-color-light !important;
span {
color: $--color-text-regular !important;
}
.el-button--text {
span {
color: $--color-primary !important;
}
}
.el-button--default {
margin-left: 10px;
color: $--button-primary-color !important;
background: $--picker-page-background-color !important;
border: 1px solid $--border-color-light !important;
}
.el-button.is-plain:hover {
background-color: $--picker-page-background-color !important;
border-color: $--picker-page-btn-border-color !important;
span {
color: $--picker-page-btn-color !important;
}
}
}
.el-date-range-picker__time-header {
border-bottom: 1px solid $--border-color-light;
}
.el-date-range-picker__content.is-left {
border-right: 1px solid $--border-color-light;
}
.el-date-table th {
border-bottom: 1px solid $--border-color-light !important;
}
.el-date-picker__time-header {
border-bottom: 1px solid $--picker-page-border-color !important;
}
.el-input-group.el-input-group--prepend,.query-input-inactive.el-input {
.el-input-group__prepend {
background-color: $--background-color-empty;
border: 1px solid $--border-color-light;
.el-input__inner:focus {
border-color: $--border-color-light-hover;
}
}
.el-input__inner:hover {
border-color: $--border-color-light-hover;
}
}
.sub-box.detail-view-sub-box {
.top-tools.top-tools--sub {
padding: 0 15px 0 0;
margin-right: 15px;
margin-left: 20px;
border: none;
border-bottom: 1px solid $--border-color-light;
}
}
//.editor-core {
// p {
// color: $--color-text-regular;
// }
//}
//.ql-toolbar.ql-snow,.ql-container.ql-snow {
// border: 1px solid $--border-color-light;
// .ql-header {
// color: $--color-text-primary;
// }
// .ql-stroke {
// stroke: $--color-text-primary;
// }
// .ql-picker-options {
// background-color: $--background-color-empty;
// }
//}

20
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -16,6 +16,9 @@
padding-left: 32px;
}
}
.el-form-item__label {
line-height: 16px !important;
}
}
.right-box__header {
@@ -119,13 +122,6 @@
.el-form-item {
margin-bottom: 16px;
.el-form-item__label{
padding-bottom: 6px;
font-size: 14px;
line-height: 16px;
color: #666;
}
.el-input__inner:hover {
border-color: $--border-color-light-hover;
}
@@ -167,7 +163,7 @@
justify-content: space-between;
.form__labels-label__span {
i {
color: $--asset-label-btn-icon-color;
color: $--nz-icon-color;
}
}
}
@@ -182,7 +178,7 @@
background-color: $--asset-label-btn-background-color;
i {
color: $--asset-label-btn-icon-color;
color: $--nz-icon-color;
}
}
.form__flex-container {
@@ -358,3 +354,9 @@
}
}
}
.right-box-sub-title {
background: $--right-box-sub-title-background-color !important;
}
.meta-option-box {
color: $--color-text-regular;
}

30
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -40,15 +40,6 @@
justify-content: space-between;
padding: 14px 20px;
&.top-tools--sub {
align-items: center;
padding: 0 70px 0 15px;
height: 44px;
background-color: $--background-color-empty;
border: 1px solid $--border-color-light;
box-sizing: border-box;
}
.top-tool-right {
display: flex;
flex-shrink: 0;
@@ -130,7 +121,7 @@
width: 200px;
line-height: 40px;
font-size: 16px;
color: #202F3F;
color: $--color-text-regular;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -275,19 +266,19 @@
outline: none;
transition:all .2s;
}
.el-dropdown {
border: 1px solid $--border-color-light;
}
.table-operation-item.table-operation-item--disable{
border: 1px solid $--border-color-base;
background-color: $--border-color-base;
border: 1px solid $--button-light-border-color;
background-color: $--background-color-disabled;
opacity: 0.6;
outline: none;
i {
font-size: 14px;
color: $--background-color-empty;
color: $--color-text-disabled;
}
}
.table-operation-item.table-operation-item--disable:hover {
background-color: $--background-color-disabled;
}
&>.table-operation-item {
justify-content: center;
align-items: center;
@@ -310,7 +301,7 @@
.table-operation-item.table-operation-item--more {
justify-content: center;
align-items: center;
border: 1px solid $--border-color-base;
border: 1px solid $--button-icon-border-color;
width: 30px;
i {
color: $--color-text-secondary;
@@ -324,6 +315,7 @@
.el-table__body-wrapper {
overflow: auto;
background-color: $--table-body-background-color;
height: 100% !important;
}
.el-table__fixed-body-wrapper {
top: 42px !important;
@@ -528,3 +520,7 @@
::-webkit-scrollbar-corner {
background-color: $--background-color-empty;
}
.full-width-height{
width: 100%;
height: 100%;
}

5
nezha-fronted/src/assets/css/components/charts/chart.scss
View File

@@ -35,6 +35,9 @@
line-height: 18px;
position: absolute;
padding-bottom:3px;
.legend-container__span,.legend-option-cell {
color: $--color-text-regular;
}
}
.legend-container .option-th{
color:#33a2e5;
@@ -498,7 +501,7 @@
overflow: hidden;
white-space: nowrap;
border-left: 1px solid $--border-color-light;
color: #1a1a1a;
color: $--color-text-regular;
width: 65%;
height: 99%;
}

6
nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
View File

@@ -10,6 +10,12 @@
border-bottom: none;
font-size: 13px;
line-height: 26px;
.active {
color: $--color-primary;
border-bottom: none;
cursor: default;
font-weight: bold;
}
}
.alert-label-box{
display: flex;

4
nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
View File

@@ -68,19 +68,17 @@
.alert-rule-box{
display: flex;
justify-content:space-between;
border-bottom: 1px solid $--border-color-light;
}
.alert-rule-title{
text-align: left;
width: 110px;
border-right: 1px solid $--border-color-light;
color: $--color-text-regular;
padding: 0 3px 0 13px;
}
.alert-rule-value{
text-align: left;
width: 150px;
color: #1a1a1a;
color: $--color-text-regular;
padding: 0 3px 0 13px;
word-wrap: break-word;
white-space: normal;

27
nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
View File

@@ -22,7 +22,6 @@
}
}
.bottom-data-list .sub-container {
padding: 10px;
height: calc(100% - 64px);
background-color: $--background-color-base;
overflow-y: auto;
@@ -32,6 +31,15 @@
&>.nz-table2 {
height: 100%;
padding-top: 20px !important;
.table-list {
background-color: $--background-color-empty;
.list-width {
width: 100%;
padding: 0 10px 5px;
box-sizing: border-box;
overflow: hidden;
}
}
}
}
.sub-top-tools .top-tool-btn-txt .nz-icon{
@@ -46,9 +54,23 @@
.has-sub-popper {
color: $--color-danger;
}
.sub-box {
.sub-box.detail-view-sub-box {
padding: 0 !important;
height: 100%;
.sub-list__tabs {
height: calc(100% - 12px);
border: 1px solid $--border-color-light;
}
}
.sub-box.bottom-box {
height: 50%;
position: relative;
padding: 0;
.bottom-data-list {
.sub-container {
padding: 10px;
}
}
}
.sub-list {
height: calc(100% - 9px);
@@ -74,6 +96,7 @@
.nz-table2 {
box-sizing: border-box;
padding: 0;
height: 100%;
}
}
}

9
nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
View File

@@ -26,6 +26,9 @@
flex: 1;
height: calc(100% - 100px);
}
.detail-row.selected {
background-color: $--detail-left-background-color;
}
.nz-detail-view-pagination {
height: 30px;
text-align: center;
@@ -68,17 +71,15 @@
color: $--color-text-regular;
vertical-align: middle;
}
/deep/ .bottom-log {
.bottom-log {
height: 100%;
overflow-y: auto;
padding-top: 15px;
}
}
.detail-view {
.list-page div.main-container{
.list-page div.main-container{
height: calc(100% - 20px);
width: calc(100% - 20px);
}
}
.nz-detail-view-no-data {
border-top: 1px solid $--border-color-light;

5
nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
View File

@@ -6,7 +6,7 @@
border-radius: 2px;
}
.search-detail-box:hover{
background: #F9F9F9;
background: $--background-color-base;
}
.search-detail-box.select-dropdown{
background: #F9F9F9;
@@ -51,6 +51,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
.el-checkbox{
width: calc(100% - 20px);
height: 36px;
@@ -79,7 +80,7 @@
}
.el-dropdown-menu__item:not(.is-disabled):hover{
color: $--color-text-secondary;
background: $--background-color-empty !important;
background: $--background-color-base !important;
}
}
.clear-all-select{

62
nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
View File

@@ -1,16 +1,32 @@
.detail-view-sub-box {
.detail-view-right-top {
height: 60px;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
margin-bottom: 10px
}
.detail-view.asset {
.nz-detail-view-right {
.sub-box {
height: 100%;
flex-direction: column;
}
.sub-box {
padding: 0;
}
.sub-box .sub-list__tabs .chart-list .nz-table2 {
padding: 20px;
height: 100%;
}
.sub-box .table-list {
padding: 0;
height: 100%;
background-color: $--background-color-empty;
}
.sub-box .pagination-bottom {
bottom: -3px;
}
.sub-box .sub-list-tab {
cursor: pointer;
}
.sub-list__tabs {
flex: 1;
background-color: $--background-color-empty;
@@ -41,34 +57,6 @@
background-color: $--background-color-empty;
overflow-y: hidden;
}
.sub-box .top-tools.top-tools--sub {
border: none;
padding: 0 15px 0 0;
margin-right: 15px;
margin-left: 20px;
border-bottom: 1px solid $--border-color-light;
}
.sub-box .list-width {
padding: 0;
}
.sub-box .nz-table2 {
padding: 20px;
height: 100%;
}
.sub-box .table-list {
padding: 0;
height: 100%;
}
.sub-box .pagination-bottom {
bottom: -3px;
}
.sub-box .sub-list-tab {
cursor: pointer;
}
}

5
nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss
View File

@@ -114,3 +114,8 @@
.search-content-box {
border-bottom: 1px solid $--click-search-items-border-bottom-color !important;
}
.el-skeleton {
.el-skeleton__item.el-skeleton__p.is-first {
background-color: $--background-color-base;
}
}

40
nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss Normal file
View File

@@ -0,0 +1,40 @@
/* start--param*/
.param-box, .tag-edit-box {
border: 1px solid #DCDFE6;
border-radius: 2px;
}
.param-box-endpoint {
height: 325px;
}
.param-box-module, .tag-edit-box {
height: 140px;
}
.param-box-row {
padding: 0;
position: relative;
}
.param-box-row>div {
display: inline-block;
}
.param-box-row-key, .param-box-row-value {
display: inline-block;
width: 43%;
}
.param-box-row-eq {
display: inline-block;
width: 22px;
text-align: center;
height: 32px;
line-height: 32px;
color: #c4c7cF;
}
.param-box-row-symbol {
display: inline-block;
padding-left: 3px;
font-size: 12px;
color: $--color-text-regular;
cursor: pointer;
}
.param-box .param-box-row .is-error {
padding-bottom: 10px;
}

26
nezha-fronted/src/assets/css/components/common/popBox/guide.scss
View File

@@ -38,7 +38,7 @@
top: -1px;
left: 0;
transition: all linear .3s;
border-bottom: 3px solid #101B27;
border-bottom: 3px solid $--guide-border-color;
background-color: $--background-color-base;
}
@@ -52,7 +52,7 @@
left: calc(50% - 6px);
bottom: -9px;
border-width: 6px 6px 0;
border-color: #424242 transparent transparent transparent;
border-color: $--guide-border-color transparent transparent transparent;
}
.guide-item {
@@ -62,8 +62,8 @@
&:not(:nth-of-type(2)):before {
top: 100px;
width: 50%;
height: 2px;
background-color: #d8d8d8;
height: 1px;
background-color: $--select-page-focus-color;
position: absolute;
left: 0;
content: "";
@@ -71,8 +71,8 @@
&:not(:last-of-type):after {
top: 100px;
width: 50%;
height: 2px;
background-color: #d8d8d8;
height: 1px;
background-color: $--select-page-focus-color;
position: absolute;
right: 0;
content: "";
@@ -80,15 +80,15 @@
&.guide-item--active{
.item__title {
color: #101B27;
color: $--color-text-regular;
font-weight: bold;
}
.item__icon {
border-color: #ABABAB;
background-color: $--background-color-empty;
border-color: $--guide-icon-border-color;
background-color: $--background-color-base;
cursor: pointer;
i {
color: #ABABAB;
color: $--guide-icon-color;
}
}
.item__icon.item__icon--disabled {
@@ -114,7 +114,7 @@
border: 1px solid $--border-color-light;
border-radius: 50%;
box-sizing: border-box;
background-color: $--background-color-base;
background-color: $--background-color-empty;
transition: all linear .3s;
z-index: 1;
@@ -137,7 +137,7 @@
height: 200px;
padding-bottom: 32px;
box-sizing: border-box;
border: 1px solid $--color-text-secondary;
border: 1px solid $--border-color-light;
.desc-text {
flex: auto;
@@ -145,7 +145,7 @@
display: flex;
align-items: center;
color: #101B27;
color: $--color-text-regular;
font-size: 18px;
word-break: keep-all;
}

3
nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
View File

@@ -58,3 +58,6 @@
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}
.el-popover__reference {
color: $--color-text-regular;
}

36
nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
View File

@@ -17,6 +17,11 @@
width: 100%;
}
}
.alert-box-duration.half-form-item {
.el-form-item__content {
line-height: 31px !important;
}
}
.right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{
width: 100%;
}
@@ -25,6 +30,8 @@
}
.el-input-group__prepend{
position: relative;
background: $--border-color-light;
border: $--border-color-light;
.hide-icon{
width: 38px;
.el-input__inner{
@@ -33,6 +40,10 @@
}
}
}
.el-input-group__append {
background: $--border-color-light;
border: $--border-color-light;
}
.alert-rule-split-title{
background: $--background-color-base;
font-size: 14px;
@@ -44,21 +55,22 @@
margin-bottom: 10px;
height: 24px;
}
.el-form-item__content .el-input-group{
.el-form-item__content .el-input-group.el-input-group--prepend {
vertical-align: middle;
}
.severity-item{
color: $--color-text-secondary;
font-size: 12px;
max-width: 120px;
overflow: hidden;
}
.text-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
width: 100%;
}
.query-row .metric-selector-input-box {
width: calc(100% - 120px);
}
}
.severity-item{
color: $--color-text-secondary;
font-size: 12px;
max-width: 120px;
overflow: hidden;
}
.text-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}

45
nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
View File

@@ -1,13 +1,22 @@
.range-time {
/deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group {
width: 100%
.el-radio-button--small .el-radio-button__inner,.el-radio-group {
width: 100%;
}
/deep/ .el-radio-button {
.el-radio-group {
border-left: 1px solid $--border-color-light;
}
.el-radio-button__inner {
border: 1px solid $--border-color-light;
border-left: 0;
background-color: $--background-color-empty;
}
.el-button.is-plain {
background-color: $--background-color-empty;
}
.el-radio-button {
width: 14.2%
}
/deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
width: 100%;
}
@@ -19,14 +28,15 @@
width: 48%;
flex: 1;
position: relative;
/deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{
.el-date-editor.el-input,.el-date-editor.el-input__inner{
width: 100%;
}
/deep/ .el-input__inner{
.el-input__inner{
text-align: center;
}
.datepicker-title{
position: absolute;
color: $--color-text-regular;
left: 15px;
z-index: 1;
}
@@ -34,10 +44,10 @@
}
}
.matchers{
/deep/ .el-input__prefix{
.el-input__prefix{
left: 0;
}
/deep/ .el-form-item__error{
.el-form-item__error{
left: 126px;
padding-top: 5px;
}
@@ -55,7 +65,7 @@
font-weight: 400;
text-align: center;
}
/deep/ .matchers-type-title.el-select--small .el-input__inner{
.matchers-type-title.el-select--small .el-input__inner{
background:$--border-color-light;
font-family: ArialMT;
font-size: 14px;
@@ -70,19 +80,19 @@
}
}
}
/deep/ .silence-matchers-value{
.silence-matchers-value{
width: calc(100% - 100px);
}
/deep/ .silence-matchers-key{
.silence-matchers-key{
width: 100%;
}
.silence-matchers-regex{
margin-left: 10px;
}
/deep/ .param-box-row-key{
.param-box-row-key{
width: 36%;
}
/deep/ .param-box-row-value{
.param-box-row-value{
width: 50%;
}
.module-add-label{
@@ -96,3 +106,8 @@
line-height: 18px;
margin-right: 80px;
}
.right-box-form-add.module-add-label {
.nz-icon-create-square {
color: $--nz-icon-color;
}
}

33
nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
View File

@@ -53,8 +53,8 @@
padding-left: 0;
}
.el-tabs__item{
width: 90px;
padding: 0;
min-width: 90px;
padding: 0 10px;
text-align: center;
}
.el-tabs__item.is-active{
@@ -96,13 +96,17 @@
border-radius: 2px;
height: 140px;
position: relative;
margin-top: 10px;
padding: 10px 0 10px 15px;
margin: 10px 0 16px 0;
padding: 10px 0px 10px 0;
width:100%;
margin-left: 0;
pre{
max-height: 300px;
min-height: 100px;
}
.configs-copy-value {
pre {
color: $--color-text-primary;
padding: 15px;
}
i {
color: $--color-text-regular;
}
}
.configs-copy-value .copy-value-content{
@@ -136,9 +140,10 @@
position: absolute;
right: 20px;
top: 15px;
background: rgba(236,127,102,0.1);
background: $--background-color-copy;
padding: 2px 6px;
color: #EC7F66;
border: 1px solid $--span-nz-icon-border-color;
color: $--nz-icon-color;
}
.endpoint-title{
border: 1px solid $--border-color-light;
@@ -167,13 +172,13 @@
}
}
.value-mapping-add {
background: rgba(250,144,28,0.1);
border: 1px solid #FFE0BD;
margin-bottom: 10px;
height: 24px;
line-height: 24px;
color: $--color-primary;
line-height: 23px;
box-sizing: border-box;
background: $--background-color-copy;
border: 1px solid $--span-nz-icon-border-color;
color: $--nz-icon-color;
}
#module-box-relabel .vue-tags-input{
max-width: unset;

52
nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
View File

@@ -53,7 +53,7 @@
padding-left: 0;
}
.el-tabs__item{
width: 90px;
min-width: 90px;
padding: 0 10px;
text-align: center;
}
@@ -98,13 +98,17 @@
border-radius: 2px;
height: 140px;
position: relative;
margin-top: 10px;
padding: 10px 0px 10px 15px;
margin: 10px 0 16px 0;
padding: 10px 0px 10px 0;
width:100%;
margin-left: 0px;
pre{
max-height: 300px;
min-height: 100px;
}
.configs-copy-value {
pre {
color: $--color-text-primary;
padding: 15px;
}
i {
color: $--color-text-regular;
}
}
.configs-copy-value .copy-value-content{
@@ -138,9 +142,10 @@
position: absolute;
right: 20px;
top: 15px;
background: rgba(236,127,102,0.1);
background: $--background-color-copy;
padding: 2px 6px;
color: #EC7F66;
border: 1px solid $--span-nz-icon-border-color;
color: $--nz-icon-color;
}
.endpoint-title{
border: 1px solid $--border-color-light;
@@ -169,13 +174,13 @@
}
}
.value-mapping-add {
background: rgba(250,144,28,0.1);
border: 1px solid #FFE0BD;
margin-bottom: 10px;
height: 24px;
line-height: 24px;
color: $--color-primary;
line-height: 23px;
box-sizing: border-box;
background: $--background-color-copy;
border: 1px solid $--span-nz-icon-border-color;
color: $--nz-icon-color;
}
#module-box-relabel .vue-tags-input{
max-width: unset;
@@ -227,7 +232,7 @@
border: none!important;
}
.param-box-row-symbol {
color: $--color-text-regular;
color: $--color-text-regular !important;
}
.module-form__label {
padding-bottom: 6px;
@@ -235,3 +240,22 @@
line-height: 16px;
color: $--color-text-regular;
}
.el-tooltip__popper.prevent-clickoutside {
background-color: $--background-color-empty;
}
.vue-tags-input,.ti-new-tag-input {
background-color: $--value-input-background-color !important;
.ti-input {
border: 1px solid $--border-color-light;
.ti-tag.ti-valid {
background-color: $--value-background-color;
color: $--value-color;
}
.ti-new-tag-input {
color: $--color-text-regular !important;
}
}
.ti-input:hover {
border: 1px solid $--border-color-light-hover;
}
}

4
nezha-fronted/src/assets/css/components/common/searchInput.scss
View File

@@ -4,7 +4,7 @@
border: none;
outline: none;
cursor: pointer;
border-left: 1px solid $--border-color-base;
border-left: 1px solid $--border-color-light;
background-color: lighten($--background-color-base, 10%);
i {
@@ -32,7 +32,7 @@
position: relative;
line-height: 25px;
border-radius: 2px;
border: 1px solid $--border-color-base;
border: 1px solid $--border-color-light;
}
.new-search .search-input-all{
width: 226px !important;

27
nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
View File

@@ -1,15 +1,17 @@
.pointer{
background: $--color-primary;
border-radius: 2px;
border: none;
width: 40px;
height: 22px;
box-sizing: border-box;
text-align:center;
color: #fff;
font-size: 12px;
margin-right: 20px;
}
//.alert-message-list {
// .pointer{
// background: $--color-primary;
// border-radius: 2px;
// border: none;
// width: 40px;
// height: 22px;
// box-sizing: border-box;
// text-align:center;
// color: #fff;
// font-size: 12px;
// margin-right: 20px;
// }
//}
.alertLabelInfo{
border: 1px solid $--border-color-light;
border-bottom: none;
@@ -94,7 +96,6 @@
}
.red,.green{
color: white;
padding: 2px 5px;
border-radius: 4px;
}
/deep/ .nz-message .el-textarea textarea{

9
nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
View File

@@ -22,4 +22,13 @@
margin-right: -5px;
padding: 0 5px;
}
.full-width-height{
width: 100%;
height: 100%;
}
.control-icon-unchecked {
color: #bcbec2;
cursor: not-allowed;
background-color: #f4f4f5;
}
}

5
nezha-fronted/src/assets/css/components/common/timePicker.scss
View File

@@ -19,9 +19,12 @@
line-height: 30px;
}
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
color: $--color-primary !important;
}
.nz-dashboard-dropdown-bg {
background: $--color-primary;
color: #fff !important;
color: $--time-picker-hover-color !important;
}
.calendar-dropdown-title {
white-space: nowrap;

46
nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
View File

@@ -1,8 +1,11 @@
.el-picker-panel,.sp-base.sp-inputs,.sp-search,.sp-result-area,.sp-pagination{
background: $--background-color-empty !important;
.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
background: $--input-background-color !important;
}
.el-date-table td.today span {
color: $--button-primary-color !important;
.sp-search,.sp-result-area,.sp-pagination {
background-color: $--background-color-empty !important;
}
.el-date-table td.today.available span {
color: $--select-page-color !important;
}
.sp-table {
th {
@@ -17,9 +20,15 @@
}
.sp-selected-tag {
color: $--color-text-regular !important;
background-color: $--background-color-base !important;
background-color: $--select-page-tag-background-color !important;
i {
color: #aaa !important;
color: $--color-text-regular !important;
}
}
.sp-selected-tag:hover {
background-color: $--background-color-empty !important;
i:hover {
color: $--color-text-primary !important;
}
}
.sp-search-input {
@@ -27,10 +36,10 @@
border: 1px solid $--border-color-light !important;
color: $--color-text-regular !important;
}
.sp-base.sp-inputs {
.sp-base.sp-inputs,.sp-base.sp-input {
border: 1px solid $--border-color-light !important;
}
.sp-base.sp-inputs:hover,.sp-base.sp-inputs:focus {
.sp-base.sp-inputs:hover,.sp-base.sp-input:hover,.sp-base.sp-inputs:focus,.sp-base.sp-input:focus {
border: 1px solid $--border-color-light-hover !important;
}
.v-dropdown-container.v-dropdown-no-border {
@@ -45,3 +54,24 @@ div.sp-result-area table.sp-table tbody tr.sp-selected td {
color: $--select-page-focus-color !important;
cursor: default;
}
div.sp-pagination ul li a:hover {
color: $--color-text-regular !important;
}
div.v-selectpage div.sp-input-container div.sp-input {
color: $--color-text-regular !important;
}
div.v-selectpage div.sp-input-container.sp-open div.sp-input {
border: 1px solid #aaa !important;
border-radius: 2px;
color: $--color-text-regular !important;
}
.sp-button {
.sp-caret {
color: $--color-text-regular !important;
}
}
.sp-button.open {
.sp-caret {
color: $--color-text-regular !important;
}
}

2
nezha-fronted/src/assets/css/components/index.scss
View File

@@ -88,3 +88,5 @@
@import './page/monitor/project/project.scss';
@import 'common/v-selectpagenew/selectpage.scss';
@import "common/paramBpx/paramBox";

4
nezha-fronted/src/assets/css/components/layout/header.scss
View File

@@ -9,9 +9,9 @@
height: 32px;
display: inline-block;
line-height: 32px;
background: rgba(60,146,241,0.10);
background: $--profile-span-background-color;
font-size: 14px;
color: #3C92F1;
color: $--profile-span-color;
letter-spacing: 0;
font-weight: 500;
text-transform: capitalize;

20
nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
View File

@@ -32,44 +32,44 @@
word-break: break-all;
display: inline-block;
}
.nz-alert-tag_normal {
}
.nz-alert-tag_normal {
border-color: $--color-text-link;
.nz-alert-tag__label {
border-right: 1px solid $--color-text-link;
background-color: $--color-text-link;
color: white;
}
}
.nz-alert-tag_success {
}
.nz-alert-tag_success {
border-color: #50d050;
.nz-alert-tag__label {
border-right: 1px solid #50d050;
background-color: #50d050;
color: white;
}
}
.nz-alert-tag_info {
}
.nz-alert-tag_info {
border-color: $--color-text-secondary;
.nz-alert-tag__label {
border-right: 1px solid $--color-text-secondary;
background-color: $--color-text-secondary;
color: white;
}
}
.nz-alert-tag_danger {
}
.nz-alert-tag_danger {
border-color: #d64f40;
.nz-alert-tag__label {
border-right: 1px solid #d64f40;
background-color: #d64f40;
color: white;
}
}
.nz-alert-tag_warning {
}
.nz-alert-tag_warning {
border-color: #e6a23c;
.nz-alert-tag__label {
border-right: 1px solid #e6a23c;
background-color: #e6a23c;
color: white;
}
}
}

2
nezha-fronted/src/assets/css/components/page/config/about.scss
View File

@@ -4,7 +4,7 @@
align-items: center;
justify-content: center;
height: 100%;
background-color: white;
background-color: $--background-color-empty;
border: 10px solid $--background-color-base;
box-sizing: border-box;

19
nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
View File

@@ -21,7 +21,7 @@
}
#browser-advanced {
border-radius: 0;
border-right: 1px solid $--border-color-base-focus;
border-right: 1px solid $--border-color-light;
}
.mib-browser-btn-group {
position: relative;
@@ -60,7 +60,7 @@
display: flex;
height: calc(100% - 55px);
width: 100%;
border: 1px solid $--border-color-base;
border: 1px solid $--border-color-light;
border-radius: 4px;
box-sizing: border-box;
}
@@ -90,14 +90,14 @@
width: 100%;
background-color: $--background-color-base;
cursor: ns-resize;
border: 1px solid $--border-color-base;
border: 1px solid $--border-color-light;
border-left: none;
border-right: none;
}
.mib-browser-detail-row {
line-height: 25px;
background-color: $--background-color-empty;
border-bottom: 1px solid $--border-color-base;
border-bottom: 1px solid $--border-color-light;
font-size: 14px;
display: flex;
}
@@ -122,11 +122,11 @@
/*第一列宽75%*/
.mib-browser-detail-row>div:last-of-type {
width: 75%;
border-left: 1px solid $--border-color-base;
border-left: 1px solid $--border-color-light;
word-break: break-all;
}
.mib-browser-detail-row:not(:last-of-type) {
border-bottom: 1px solid $--border-color-base;
border-bottom: 1px solid $--border-color-light;
height: 25px;
}
.mib-browser-detail-row:last-of-type {
@@ -144,7 +144,7 @@
}
.left-right-resize {
width: 2px;
border: 1px solid $--border-color-base;
border: 1px solid $--border-color-light;
background-color: $--background-color-base;
cursor: ew-resize;
height: 100%;
@@ -163,6 +163,9 @@
.el-table {
height: calc(100% - 20px) !important;
width: calc(100% - 20px) !important;
.el-table__header-wrapper th {
background-color: $--background-color-base;
}
}
.el-table__body-wrapper td {
padding: 2px 0 !important;
@@ -174,7 +177,7 @@
line-height: 30px;
color: $--color-text-primary;
font-size: 16px;
border-bottom: 1px solid $--border-color-base;
border-bottom: 1px solid $--border-color-light;
padding: 0 5px 0 8px;
display: flex;
justify-content: space-between;

16
nezha-fronted/src/assets/css/components/page/config/profile.scss
View File

@@ -25,12 +25,12 @@
margin-left: 20px;
span {
display: inline-block;
background: rgba(60,146,241,0.10);
background: $--profile-span-background-color;
text-transform: capitalize;
width: 100%;
height: 100%;
font-size: 30px;
color: #3C92F1;
color: $--profile-span-color;
letter-spacing: 0;
font-weight: 500;
border-radius: 100%;
@@ -74,18 +74,18 @@
line-height: 22px;
font-weight: 400;
}
.profile-left__header-username__span {
.profile-left__header-username-span {
display: inline-block;
text-align: center;
width: 42px;
height: 24px;
line-height: 25px;
margin-left: 10px;
background-color: #ecf5ff;
border-color: #d9ecff;
border-radius: 10px;
background-color: $--profile-2FA-background-color;
border: 1px solid $--profile-span-border-color;
border-radius: 25px;
font-size: 14px;
color: #409EFF;
color: $--profile-2FA-color;
letter-spacing: 0;
font-weight: 400;
}
@@ -173,7 +173,7 @@
}
.profile-left__button {
margin-left: 50px;
.profile-left__button-footer__btn {
.profile-left__button-footer-btn {
margin: 0 10px;
height: 30px;
min-width: 74px;

51
nezha-fronted/src/assets/css/components/page/config/system.scss
View File

@@ -2,6 +2,13 @@
height: 100%;
position: relative;
margin-top: 10px;
.el-tag.el-tag--info {
background-color: $--chart-title-hover-background-color;
border: 1px solid $--border-color-light;
i {
background-color: $--background-color-base;
}
}
}
.system-config-form{
width: 61.8% !important;
@@ -96,19 +103,19 @@
cursor: pointer;
color: $--color-text-primary;
}
/deep/ .el-form-item--small .el-form-item__error{
.el-form-item--small .el-form-item__error{
padding-top: 0;
}
.linkUrlTip{
width: 430px;
}
.system-config-form.terminal /deep/ .el-input-number--small{
.system-config-form.terminal .el-input-number--small{
width: 512px;
}
.system-config-form.basicForm /deep/ .el-input-number--small{
.system-config-form.basicForm .el-input-number--small{
width: 512px;
}
.system-config-form /deep/ .el-input input{
.system-config-form .el-input input{
text-align: left;
}
.utc-item {
@@ -195,6 +202,39 @@
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(:first-child) {
margin-left: 5px;
}
.el-input-group__prepend {
background-color: $--right-box-sub-title-background-color;
border: 1px solid $--border-color-light;
border-right: none;
}
.el-input-group__append {
background-color: $--right-box-sub-title-background-color;
border: 1px solid $--border-color-light;
border-left: none;
}
.el-input-number__decrease,.el-input-number__increase,.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled {
background-color: $--popover-background-color;
}
.el-input-number__decrease {
border-left: 1px solid $--border-color-light !important;
}
.el-input-number__increase {
border-left: 1px solid $--border-color-light;
border-bottom: 1px solid $--border-color-light !important;
}
.el-input-number__decrease.is-disabled {
border-left: 1px solid $--border-color-light;
}
.el-input-number__increase.is-disabled {
border-left: 1px solid $--border-color-light;
border-bottom: 1px solid $--border-color-light;
}
.el-input__inner:hover {
border-color: $--border-color-light-hover;
}
.el-input__inner:focus {
border-color: $--color-primary;
}
}
.system-config-form .el-form-item__content{
width: 512px;
@@ -210,12 +250,13 @@
border-top: unset;
height: 100%;
}
.system-tabs .el-tabs--border-card{
.system-tabs.el-tabs--border-card{
box-shadow: unset !important;
height: 100%;
width: 100%;
border-bottom: unset;
border-left: unset;
background-color: $--background-color-empty;
}
.reset-form .el-checkbox-group{
margin-left: -28px !important;

27
nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
View File

@@ -3,6 +3,19 @@
padding: 10px 0 10px 10px;
background-color: $--background-color-base;
box-sizing: border-box;
pre {
border: 1px solid $--border-color-base;
border-left: 4px solid #e6522c;
border-radius: 0;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
background-color: $--background-color-empty;
color: $--color-text-primary;
padding: 15px;
}
pre code {
white-space: pre;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
height: 0;
@@ -280,20 +293,6 @@
background-color: transparent;
}
pre {
border: 1px solid $--border-color-base;
border-left: 4px solid #e6522c;
border-radius: 0;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
background-color: $--background-color-empty;
color: $--color-text-primary;
padding: 15px;
}
pre code {
white-space: pre;
}
code {
color: $--color-text-primary;
}

3
nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
View File

@@ -4,6 +4,9 @@
display: flex;
.no-resize{
background: rgba(255,255,255,0);
.el-textarea__inner {
border: 1px solid $--border-color-light;
}
}
.query-row {

31
nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
View File

@@ -14,6 +14,7 @@
margin: 0;
position: absolute;
z-index: 1;
color: $--color-text-primary;
}
.el-carousel__indicator--horizontal .el-carousel__button{
background-color: #C0C4CC;
@@ -25,6 +26,9 @@
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
opacity: 1;
}
.nz-table2 {
height: 100% !important;
}
}
.overview-content-header{
display: flex;
@@ -282,12 +286,27 @@
font-size: 0.7rem;
font-style: italic;
}
.overview-to-alert__background {
background-color: $--overview-alert-icon-background-color;
}
.overview-to-asset__background {
background-color: $--overview-asset-icon-background-color;
}
.overview-to-project__background {
background-color: $--overview-project-icon-background-color;
}
.overview-to-module__background {
background-color: $--overview-module-icon-background-color;
}
.overview-to-endpoint__background {
background-color: $--overview-endpoint-icon-background-color;
}
.content-col-content-icon {
height: 3.75rem;
width: 3.75rem;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid #e5eaef;
border: 1px solid $--overview-border-color;
position: relative;
.nz-icon {
font-size: 1.75rem !important;
@@ -297,21 +316,21 @@
transform: translate(-50%, -50%);
}
.nz-icon-overview-project {
color: #80A7F4;
color: $--overview-asset-icon-color;
}
.nz-icon-project {
font-size: 1.75rem !important;
color: #F6B275;
color: $--overview-project-icon-color;
}
.nz-icon-overview-module {
color: #7AD0BC;
color: $--overview-module-icon-color;
}
.nz-icon-overview-endpoint {
color: #969DEA;
color: $--overview-endpoint-icon-color;
}
.nz-icon-overview-alert {
font-size: 1.75rem !important;
color: #EE9A87;
color: $--overview-alert-icon-color;
}
}
.content-num-box {

5
nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
View File

@@ -6,6 +6,11 @@
display: flex;
flex-direction:column;
}
.panel.list-page {
.table-list {
height: calc(100% - 58px);
}
}
.panel .el-table {
border-radius: 5px;

40
nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
View File

@@ -1,5 +1,4 @@
.main-list--project {
.main-list{
.main-list--project.main-list {
height: 100%;
width: 100%;
display: flex;
@@ -16,7 +15,36 @@
width: calc(50% - 10px);
margin-right: 10px;
min-width: 435px;
div.page {
textarea {
display: none;
}
}
.project-box.list-page {
width: 100%;
height: calc(100% - 8px)!important;
position: relative;
border-radius: 2px;
.main-list {
height: 100% !important;
overflow: visible;
.top-tools div:nth-of-type(1) {
color: $--color-text-primary;
}
//.nz-table2 {
// padding: 0 !important;
// border: 1px solid $--border-color-base !important;
//}
.right-bottom-zoom {
.zoom-option {
color: $--color-text-regular !important;
}
.zoom-option:hover {
color: $--color-text-regular !important;
}
}
}
}
}
.hide{
display: none;
@@ -24,9 +52,9 @@
.ml10{
margin-left: 10px;
}
}
.main-container{
padding-right: 0 !important;
width: calc(100% - 10px);
}
}
.project-calendar .el-input__inner {
@@ -61,7 +89,7 @@
}
}
.pagination-bottom{
width: calc(100% - 30px);
bottom: 18px;
width: calc(100% - 30px) !important;
bottom: 18px !important;
}
}

63
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -14,6 +14,8 @@ $--background-color-1: #444440;
$--background-color-2: #000;
// 背景色 copy
$--background-color-copy: #454545;
// 禁用背景色
$--background-color-disabled: #222329;
// 左侧菜单背景色
$--left-menu-background-color-base: #2D2E35;
@@ -33,6 +35,8 @@ $--color-text-regular: #BEBEBE;
$--color-text-secondary: #999998;
// 链接字色
$--color-text-link: #3C92F1;
// 禁用字色
$--color-text-disabled: #505050;
/* 4.边框色 */
// 普通边框色
@@ -127,7 +131,6 @@ $--button-icon-hover-border-color: $--button-icon-border-color; // hover边框
$--button-icon-active-border-color: $--color-text-primary; // focus边框色
/* Asset */
$--asset-label-btn-icon-color: $--button-primary-color; //icon
$--asset-label-btn-border-color: $--border-color-light; // border
$--asset-label-btn-background-color: #222329; // background
@@ -136,10 +139,66 @@ $--click-search-items-border-color: $--background-color-copy; // border
$--click-search-items-border-bottom-color: #2E2E2E; // border-BOTTOM
$--click-search-items-color: $--color-text-regular; // color
// selectPage
// 第三方插件 下拉多选搜索 selectPage 主题颜色
$--select-page-background-color: $--background-color-empty;
$--select-page-hover-background-color: $--button-light-hover-background-color;
$--select-page-focus-color: #666666;
$--select-page-color: $--button-primary-color;
$--select-page-tag-background-color: $--background-color-empty;
$--select-page-border-color: $--border-color-light;
/* el-picker 下拉时间选择器 */
$--picker-page-background-color: $--select-page-tag-background-color;
$--picker-page-border-color: $--select-page-border-color;
$--picker-page-btn-color: mix(#FFF, $--color-primary, 15%);
$--picker-page-btn-border-color: mix(#FFF, $--color-primary, 15%);
$--picker-page-btn-background-color: $--background-color-base;
// icon字色
$--nz-icon-color: $--button-primary-color;
$--span-nz-icon-border-color: $--border-color-light-hover;
// value
$--value-background-color: $--background-color-empty;
$--value-input-background-color: $--background-color-base;
$--value-color: $--table-header-font-color;
// time picker
$--time-picker-hover-color: #FFFFFF;
/* overview */
// color
$--overview-asset-icon-color: $--time-picker-hover-color;
$--overview-project-icon-color: $--time-picker-hover-color;
$--overview-module-icon-color: $--time-picker-hover-color;
$--overview-endpoint-icon-color: $--time-picker-hover-color;
$--overview-alert-icon-color: $--time-picker-hover-color;
// background
$--overview-module-icon-background-color: #5F80D5;
$--overview-endpoint-icon-background-color: #7F87EA;
$--overview-alert-icon-background-color: #EFA25D;
$--overview-asset-icon-background-color: #568FFF;
$--overview-project-icon-background-color: #4DB4FF;
// border
$--overview-border-color: $--background-color-empty;
/* system */
$--system-input-background-color: #C0C4CC;
/* profile */
$--profile-span-color: $--time-picker-hover-color;
$--profile-span-border-color: #87C0FF;
$--profile-span-background-color: $--overview-asset-icon-background-color;
$--profile-2FA-background-color: $--background-color-empty;
$--profile-2FA-color: #3C92F1;
/* guide */
$--guide-border-color: $--select-page-focus-color;
$--guide-icon-border-color: $--time-picker-hover-color;
$--guide-icon-color: $--time-picker-hover-color;
/* detail */
$--detail-left-background-color: $--background-color-base;
/* 13.panel */
$--chart-title-hover-background-color: #323238;

63
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -14,6 +14,8 @@ $--background-color-1: #EFEFEF;
$--background-color-2: #F9F9F9;
// 背景色 copy
$--background-color-copy: #fdf5e0;
// 禁用背景色
$--background-color-disabled: #DEDEDE;
// 左侧菜单背景色
$--left-menu-background-color-base: #202F3F;
@@ -33,6 +35,8 @@ $--color-text-regular: #666665;
$--color-text-secondary: #999998;
// 链接字色
$--color-text-link: #3C92F1;
// 禁用字色
$--color-text-disabled: #FFFFFF;
/* 4.边框色 */
// 普通边框色(覆盖element-ui内置变量)
@@ -125,7 +129,6 @@ $--button-icon-hover-border-color: $--border-color-base; // hover边框色
$--button-icon-active-border-color: mix(#FFF, $--color-primary, 10%); // focus边框色
/* Asset */
$--asset-label-btn-icon-color: $--color-primary; //icon
$--asset-label-btn-border-color: mix(#FFF, $--color-primary, 60%); // border
$--asset-label-btn-background-color: #FFF4E8; // background
@@ -135,9 +138,65 @@ $--click-search-items-border-bottom-color: $--border-color-base; // border
$--click-search-items-color: $--color-primary; // color
// selectPage
$--select-page-background-color: $--background-color-empty;
$--select-page-background-color: $--background-color-base;
$--select-page-hover-background-color: #f6f8fa;
$--select-page-focus-color: #CCCCCC;
$--select-page-color: #232F3E;
$--select-page-tag-background-color: #e4eaee;
$--select-page-border-color: $--border-color-base-focus;
/* el-picker 下拉时间选择器 */
$--picker-page-background-color: $--background-color-empty;
$--picker-page-border-color: $--select-page-border-color;
$--picker-page-btn-color: $--color-primary;
$--picker-page-btn-border-color: $--color-primary;
$--picker-page-btn-background-color: $--color-text-disabled;
// icon 字色
$--nz-icon-color: $--color-primary; //icon
$--span-nz-icon-border-color: $--asset-label-btn-border-color;
// value
$--value-background-color: #5C6BC0;
$--value-color: $--color-text-disabled;
$--value-input-background-color: $--value-color;
// time picker
$--time-picker-hover-color: $--value-color;
/* overview */
$--overview-asset-icon-color: #80A7F4;
$--overview-project-icon-color: #F6B275;
$--overview-module-icon-color: #7AD0BC;
$--overview-endpoint-icon-color: #969DEA;
$--overview-alert-icon-color: #EE9A87;
// background
$--overview-module-icon-background-color: $--value-color;
$--overview-endpoint-icon-background-color: $--value-color;
$--overview-alert-icon-background-color: $--value-color;
$--overview-asset-icon-background-color: $--value-color;
$--overview-project-icon-background-color: $--value-color;
// border
$--overview-border-color: #E5EAEF;
/* system */
$--system-input-background-color: $--background-color-empty;
/* profile */
$--profile-span-color: $--color-text-link;
$--profile-span-border-color: $--color-text-link;
$--profile-span-background-color: mix(#FFF, $--color-text-link, 90%);
$--profile-2FA-background-color: $--profile-span-background-color;
$--profile-2FA-color: $--color-text-link;
/* guide */
$--guide-border-color: #18171D;
$--guide-icon-border-color: #666666;
$--guide-icon-color: $--guide-icon-border-color;
/* detail */
$--detail-left-background-color: $--table-row-hover-background-color;
/* 13.panel */
$--chart-title-hover-background-color: $--background-color-1;

58
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -707,46 +707,6 @@ li {
.right-box-form-btns button {
margin-left: 10px;
}
/* start--param*/
.param-box, .tag-edit-box {
border: 1px solid #DCDFE6;
border-radius: 2px;
}
.param-box-endpoint {
height: 325px;
}
.param-box-module, .tag-edit-box {
height: 140px;
}
.param-box-row {
padding: 0;
position: relative;
}
.param-box-row>div {
display: inline-block;
}
.param-box-row-key, .param-box-row-value {
display: inline-block;
width: 43%;
}
.param-box-row-eq {
display: inline-block;
width: 22px;
text-align: center;
height: 32px;
line-height: 32px;
color: #c4c7cF;
}
.param-box-row-symbol {
display: inline-block;
padding-left: 3px;
font-size: 12px;
color: #DCDFE6;
cursor: pointer;
}
.param-box .param-box-row .is-error {
padding-bottom: 10px;
}
/* end--param*/
.right-box-form-content .el-select {
width: 100%;
@@ -1424,24 +1384,6 @@ li {
width: calc(50% - 30px);
margin-left: 0;
}
.right-box .right-box-form-add,.right-box .right-box-form-minus-box{
background: rgba(250,144,28,.1);
padding:4px 6px;
border-radius: 2px;
cursor: pointer;
}
.right-box .right-box-form-add .nz-icon-create-square{
color: $--color-primary;
cursor: pointer;
}
.right-box .right-box-form-add .nz-icon-plus{
color: $--color-primary;
cursor: pointer;
}
.right-box .right-box-form-minus-box .nz-icon-minus{
color: $--color-primary;
cursor: pointer;
}
.nz-icon-caret-right{
font-size: 12px;
}

4
nezha-fronted/src/components/charts/chart-bar-statistics.vue
View File

@@ -56,7 +56,7 @@
<div class="chart-no-data" v-show="noData">No Data</div>
<div class='legend-container' ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
</div>
</div>
<!--全屏-->
@@ -73,7 +73,7 @@
<div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
<div :id="'screenLegendArea'+chartIndex" class="legend-container legend-container-screen">
<div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
<br/><!--bgColorList[index]-->
</div>
</div>

4
nezha-fronted/src/components/charts/chart-pie.vue
View File

@@ -56,7 +56,7 @@
<div class="chart-no-data" v-show="noData">No Data</div>
<div class='legend-container' ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
</div>
</div>
<!--全屏-->
@@ -73,7 +73,7 @@
<div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
<div :id="'screenLegendArea'+chartIndex" class="legend-container legend-container-screen">
<div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
<br/><!--bgColorList[index]-->
</div>
</div>

4
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -60,7 +60,7 @@
<template v-if="!hasLegendOptions">
<div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
<br/><!--bgColorList[index]-->
</div>
</div>
@@ -79,7 +79,7 @@
<tr v-for="(item, index) in screenLegendList" :key="'legend_' + item.name+'_'+index">
<td>
<div :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
</div>
</td>
<template v-for="(legendOption, i) in screenLegendOptions">

8
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -78,7 +78,7 @@
<template v-if="!hasLegendOptions">
<div class='legend-container' ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
</div>
</div>
</template>
@@ -96,7 +96,7 @@
<tr v-for="(item, index) in legendListMore" :key="'legend_' + item.name+'_'+index">
<td>
<div :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" >
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
</div>
</td>
<template v-for="(legendOption, i) in legendOptions">
@@ -158,7 +158,7 @@
<template v-if="!hasLegendOptions">
<div :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
<div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
<br/><!--bgColorList[index]-->
</div>
</div>
@@ -177,7 +177,7 @@
<tr v-for="(item, index) in screenLegendListMore" :key="'legend_' + item.name+'_'+index">
<td>
<div :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
</div>
</td>
<template v-for="(legendOption, i) in screenLegendOptions">

5
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -814,7 +814,7 @@ export default {
// data = JSON.parse(localStorage.getItem('topoData'))
if (!res.data.topo || !data.pens) {
data = {
bkColor: '#FFFFFF',
bkColor: '#FFFFFF00',
gridSize: 10,
gridColor: '#ededed',
lineWidth: 1,
@@ -893,6 +893,9 @@ export default {
if (!data.bkImage) {
data.bkImage = undefined
}
if (data.bkColor === '#FFFFFF') {
data.bkColor = '#FFFFFF00'
}
resolve(data)
}, 100)
}

11
nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
View File

@@ -220,14 +220,3 @@ export default {
}
}
</script>
<style scoped>
.full-width-height{
width: 100%;
height: 100%;
}
.control-icon-unchecked {
color: #bcbec2;
cursor: not-allowed;
background-color: #f4f4f5;
}
</style>

11
nezha-fronted/src/components/common/nezhaColor.vue
View File

@@ -21,7 +21,7 @@
<el-row v-if="!single" class="color-tab">
<div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click="colorTabChange(item)">{{item.name}}</div>
</el-row>
<sketch v-model="colors" :disableAlpha="true" @input="updateValue" :presetColors="presetColors"/>
<sketch v-model="colors" :disableAlpha="disableAlpha" @input="updateValue" :presetColors="presetColors"/>
</div>
</span>
</template>
@@ -67,6 +67,10 @@ export default {
'#7C2EA3', '#8F3BB8', '#B877D9'
]
}
},
disableAlpha: {
type: Boolean,
default: false
}
},
watch: {},
@@ -89,7 +93,12 @@ export default {
methods: {
updateValue (color) {
this.colors = color.hex
if (!this.disableAlpha) {
this.colors = color.hex8
this.$emit('colorChange', color.hex8, this.keyName)
} else {
this.$emit('colorChange', color.hex, this.keyName)
}
},
changeColor () {
this.showColorPicker = !this.showColorPicker

2
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -1709,7 +1709,7 @@ export default {
return ''
}
;
if (color.length <= 7) {
if (color.indexOf('#') === 0) {
return color
}
const rgb = color.split(',')

7
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -152,7 +152,7 @@
</div>
</div>
<div :class="['page',fromOverView?'overview-page':'']" :style="{
border: fromOverView ? 'none' :`1px solid ${theme.borderColorLight}`
border: fromOverView ? 'none' :`1px solid $--color-text-regular`
}">
<!--画布部分-->
<div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>
@@ -805,7 +805,7 @@ export default {
// data = JSON.parse(localStorage.getItem('topoData'))
if (!res.data.topo || !data.pens) {
data = {
bkColor: '#FFFFFF',
bkColor: '#FFFFFF00',
gridSize: 10,
gridColor: '#ededed',
lineWidth: 1,
@@ -886,6 +886,9 @@ export default {
if (!data.bkImage) {
data.bkImage = undefined
}
if (data.bkColor === '#FFFFFF') {
data.bkColor = '#FFFFFF00'
}
Promise.all(promiseArr).then(res => {
res.forEach((response, index) => {
const item = data.pens[index]

4
nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
View File

@@ -87,7 +87,7 @@
<el-form-item
v-if="showSnmpTrap"
:label="$t('alert.config.threshold')"
prop="threshold" class="half-form-item"
prop="threshold" class="half-form-item alert-box-threshold"
style="display: inline-block;"
:rules="[
{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' },
@@ -115,7 +115,7 @@
<el-input id="alert-box-input-inr" v-model.number="editAlertRule.inr" :placeholder="$t('alert.config.inrPlaceholder')" size="small" type="text" :disabled="!showSnmpTrap"></el-input>
</el-form-item>
<!--last-->
<el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last" class="half-form-item" :rules=" [
<el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last" class="half-form-item alert-box-duration" :rules=" [
{ required: showSnmpTrap, message: this.$t('validate.required'), trigger: 'change' },
]">
<el-input id="alert-box-input-last" :controls="false" v-model.number="editAlertRule.last" placeholder="" size="small" :disabled="!showSnmpTrap" type="text">

2
nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
View File

@@ -81,7 +81,7 @@
<el-input v-model="item.value" class="silence-matchers-value" placeholder="value" size="mini"></el-input>
<el-checkbox v-model="item.regex" :false-label="0" :true-label="1" class="silence-matchers-regex" >Regex</el-checkbox>
</el-form-item>
<span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
<span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
</div>
<div class="" style="text-align: center;">
<span id="module-add-label" type="button" @click="addmatchers" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="">

4
nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
View File

@@ -561,9 +561,9 @@
{{$t('overall.preview')}}
</div>
<div class="right-box-line"></div>
<div class="configs-copy-value">
<div class="configs-copy-value" style="overflow: auto">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
<pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
<pre>{{configsCopyValue}}</pre>
</div>
</el-form>
</div>

4
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -427,7 +427,7 @@
>
<el-input v-model="item2.expressions[eindex].key" placeholder="key" size="mini" ></el-input>
</el-form-item>
=
<span class="param-box-row-eq">=</span>
<el-form-item
:prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.expressions.'+eindex+'.value'"
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
@@ -542,7 +542,7 @@
<div class="right-box-line"></div>
<div id="module-box-preview" ref="previewBoxScrollbar" class="configs-copy-value" style="overflow: auto;">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
<pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
<pre>{{configsCopyValue}}</pre>
</div>
</el-form>
</div>

2
nezha-fronted/src/components/page/config/profile.vue
View File

@@ -15,7 +15,7 @@
<span :class="(mfaEnable == '1' || mfaLevel > 0)?'MfaName':'name'">
{{userList.name}}
</span>
<span class="profile-left__header-username__span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
<span class="profile-left__header-username-span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
</div>
</el-popover>
<el-popover

10
nezha-fronted/src/components/page/dashboard/overview/overview.vue
View File

@@ -24,7 +24,7 @@
<div class="content-row-box">
<div class="content-col-box">
<div id="overview-to-asset" v-loading="assetLoading" class="content-col-content clickable" @click="jumpTo('asset')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
<div class="content-col-content-icon overview-to-asset__background"><i class="nz-icon nz-icon-overview-project"></i></div>
<div class="content-num-box">
<el-tooltip :content="`${assetData}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -40,7 +40,7 @@
</div>
<div class="content-col-box">
<div v-loading="projectLoading" class="content-col-content clickable" @click="jumpTo('project')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
<div class="content-col-content-icon overview-to-project__background"><i class="nz-icon nz-icon-project"></i></div>
<div class="content-num-box">
<el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -55,7 +55,7 @@
</div>
<div class="content-col-box">
<div v-loading="moduleLoading" class="content-col-content clickable" @click="jumpTo('module')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
<div class="content-col-content-icon overview-to-module__background"><i class="nz-icon nz-icon-overview-module"></i></div>
<div class="content-num-box">
<el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -70,7 +70,7 @@
</div>
<div class="content-col-box">
<div v-loading="endpointLoading" class="content-col-content clickable" @click="jumpTo('endpoint')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
<div class="content-col-content-icon overview-to-endpoint__background"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
<div class="content-num-box">
<el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -85,7 +85,7 @@
</div>
<div class="content-col-box">
<div id="overview-to-alertlist" v-loading="alertMessageLoading" class="content-col-content clickable" @click="jumpTo('alertList')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
<div class="content-col-content-icon overview-to-alert__background"><i class="nz-icon nz-icon-overview-alert"></i></div>
<div class="content-num-box">
<el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">