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

CN-1592 feat: 部分css重构内容

Browse Source
This commit is contained in:
chenjinsong
2024-03-26 17:06:32 +08:00
parent 19d50f45c6
commit 2e83fd893e
25 changed files with 600 additions and 1746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1794
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -28,11 +28,10 @@
"maplibre-gl": "3.6.2",
"mockjs": "^1.1.0",
"moment-timezone": "^0.5.33",
"node-sass": "~4.14.0",
"postcss-plugin-px2rem": "~0.8.1",
"postcss-px2rem-exclude": "0.0.6",
"sass": "^1.72.0",
"sass-loader": "~8.0.2",
"sass-resources-loader": "~2.2.5",
"tiny-emitter": "^2.1.0",
"vue": "~3.3.0",
"vue-grid-layout": "^3.0.0-beta1",

1
src/assets/css/common.scss
View File

@@ -17,6 +17,7 @@ body {
cursor: default !important;
overflow: hidden;
}
// 在计算文本实际宽度的逻辑中使用到的临时dom
.temp-dom {
visibility: hidden;
position: fixed;

22
src/assets/css/common/part-select.scss
View File

@@ -1,23 +1,19 @@
// 部分 select 通用样式
/* 部分 select 通用样式 */
// small下拉框的输入框中字体大小
/*.el-select--small .el-select__wrapper {
font-size: 14px;
}
.el-select-dropdown {
.el-scrollbar {
.el-select-dropdown__wrap {
.el-scrollbar__view.el-select-dropdown__list {
.el-select-dropdown__item {
padding: 0 8px;
height: 24px;
line-height: 24px;
font-size: 12px;
font-weight: 400;
}
.el-select-dropdown__item.selected {
color: #2C72C6;
}
.el-select-dropdown__item:hover {
color: #2C72C6;
background: #F7F7F7;
height: 28px;
line-height: 28px;
font-size: 14px;
}
}
}
}
}
}*/

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

@@ -224,11 +224,6 @@
}
.el-switch {
height: auto;
--el-switch-on-color: #38ACD2;
--el-switch-off-color: #C0CEDB;
}
.el-checkbox__input {
--el-checkbox-checked-bg-color: #38ACD2;
}
}
}

79
src/assets/css/components/components/common/TimeRange/date-time-range.scss
View File

@@ -1,9 +1,10 @@
@use 'element-plus/theme-chalk/src/select.scss' as *;
.date-range-box {
font-size: 14px;
border-radius: 2px;
//margin-right: 10px;
border-radius: var(--el-border-radius-base);
display: flex;
cursor: pointer;
transition: var(--el-transition-duration);
.date-range-refresh {
margin-left: 10px;
@@ -32,15 +33,18 @@
padding: 0 10px;
display: flex;
justify-content: space-around;
//background: #FFFFFF;
background: var(--el-fill-color-blank);
//border: 1px solid #DEDEDE;
border: 1px solid var(--el-border-color);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
@include mixed-input-border(var(--el-border-color));
border-radius: var(--el-border-radius-base);
height: 28px;
line-height: 28px;
transition: width .3s;
transition: all var(--el-transition-duration);
&:hover {
@include mixed-input-border(var(--el-border-color-hover));
}
&:focus {
@include mixed-input-border(var(--el-color-primary));
}
.cn-icon {
font-size: 14px;
@@ -58,8 +62,7 @@
.date-range-title {
font-size: 14px;
//color: #666666;
color: $--text-color-4;
color: var(--el-text-color-regular);
font-weight: 600;
padding: 14px 0 7px 8px;
}
@@ -74,10 +77,9 @@
white-space: nowrap;
display: inline-block;
margin: 0 5px;
//color: #353636;
color: $--text-color-1;
color: var(--el-text-color-primary);
.cn-icon-Data {
color: #575757;
color: var(--el-text-color-regular);
}
}
@@ -92,9 +94,8 @@
.date-range-panel {
height: 426px;
width: 500px;
//background: #FFFFFF;
background: $--select-bg-color-1;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
background-color: var(--el-fill-color-blank);
box-shadow: var(--el-box-shadow-light);
position: absolute;
right: 10px !important;
z-index: 2;
@@ -106,25 +107,24 @@
.content-title {
font-size: 14px;
//color: #666666;
color: var(--el-text-color-primary);
color: var(--el-text-color-regular);
font-weight: 400;
margin-bottom: 12px;
}
.content-input {
border: 1px solid #E7EAED;
border-radius: 2px;
border: 1px solid var(--el-border-color);
color: var(--el-text-color-primary);
border-radius: var(--el-border-radius-base);
width: 230px;
padding: 0 8px;
height: 30px;
line-height: 30px;
margin-bottom: 12px;
outline: #169AFF;
}
.content-input:focus {
border: 1px solid #169AFF;
border: 1px solid var(--el-border-color-hover);
}
.date-range-history {
@@ -133,14 +133,13 @@
overflow-y: auto;
.date-range-history-item {
color: var(--el-text-color-regular);
padding: 5px 0;
cursor: pointer;
}
.date-range-history-item:hover {
/*font-weight: 600;*/
//background: #f9f9f9;
background: $--select-bg-color-hover-1;
background-color: var(--el-fill-color-light);
}
}
.el-range-editor.el-input__wrapper{
@@ -151,6 +150,7 @@
.date-range-panel-content-right {
display: flex;
flex-direction: column;
border-left: 1px solid var(--el-border-color-light);
ul {
flex: 1;
@@ -165,33 +165,26 @@
display: flex;
flex-direction: column;
justify-content: center;
//color: #333333;
color: var(--el-text-color-primary);
font-weight: 400;
color: var(--el-text-color-regular);
padding: 0 10px;
cursor: pointer;
}
li:hover {
background-color: var(--el-fill-color-light);
color: var(--el-text-color-regular);
}
li.active {
//background: #F2F9FF;
//color: #0091FF;
background: $--select-bg-color-1;
color: var(--el-color-primary);
font-weight: 400;
font-weight: bold;
.cn-icon-check {
color: #0091FF;
color: var(--el-color-primary);
position: absolute;
right: 7px;
}
}
li:hover {
//background: #F2F9FF;
background: var(--el-color-primary-light-9);
//color: #0091FF;
color: var(--el-color-primary);
}
}
}
}
@@ -203,7 +196,7 @@
.date-range-panel-bottom {
height: 44px;
line-height: 44px;
border-top: 1px solid rgba(0, 0, 0, 0.09);
border-top: 1px solid var(--el-border-color-light);
padding: 0 10px;
display: flex;
justify-content: space-between;
@@ -234,6 +227,6 @@
left: -6px !important;
}
.el-popper__arrow::before {
border: 1px solid #E7EAED !important;
border: 1px solid var(--el-border-color-light) !important;
}
}

41
src/assets/css/components/components/common/TimeRange/time-refresh.scss
View File

@@ -2,13 +2,12 @@
position: relative;
font-size: 14px;
.cn-icon-refresh{
.cn-icon-refresh1 {
font-size: 14px;
color: #575757;
}
.cn-icon-dropdown {
font-size: 14px;
transition: all .3s;
transition: all var(--el-transition-duration);
display: inline-block;
}
.cn-icon-dropdown.active{
@@ -17,53 +16,55 @@
.refresh-list{
position: absolute;
z-index: 2;
//background: #FFFFFF;
background: $--select-bg-color-1;
border: 1px solid var(--el-border-color);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
background-color: var(--el-fill-color-blank);
box-shadow: var(--el-box-shadow-light);
border-radius: var(--el-border-radius-base);
top: 30px;
right: 0;
.refresh-list-item{
width: 82px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
color: $--text-color-5;
color: var(--el-text-color-regular);
cursor: pointer;
position: relative;
padding: 8px 0 8px 12px;
}
.refresh-list-item.active{
background: $--select-bg-color-1;
color: #0091FF;
font-weight: 400;
color: var(--el-color-primary);
font-weight: bold;
.cn-icon-check{
color: #0091FF;
color: var(--el-color-primary);
position: absolute;
right: 7px;
}
}
.refresh-list-item:hover{
//background: #F2F9FF;
background: $--select-bg-color-hover-1;
color: #0091FF;
background-color: var(--el-fill-color-light);
}
}
.el-button--small.cn-button {
.el-button--small.el-button--icon {
span {
font-size: 14px;
color: #2C72C6;
font-weight: 400;
.cn-button-label {
color: var(--el-color-primary);
.button-label {
padding: 0 8px 0 3px;
}
i {
font-size: 14px;
color: #575757;
color: var(--el-text-color-regular);
}
}
&:hover span i {
color: var(--el-button-hover-text-color);
}
}
.el-button--small{
padding: 4px 6px !important;

115
src/assets/css/components/components/layout/layout.scss
View File

@@ -37,7 +37,7 @@
color: #F7F7F7;
cursor: pointer;
background-color: transparent;
transition: all linear .2s;
transition: all linear var(--el-transition-duration);
&.shrink-button--collapse {
background-color: #334355;
@@ -50,22 +50,22 @@
display: flex;
align-items: center;
height: 40px;
//background-color: #f7f7f7;
background-color: var(--el-bg-color-overlay);
border-bottom: 1px solid $--border-color;
border-bottom: 1px solid var(--el-border-color-light);
.cn-icon-a-NetworkAnalytics {
margin-left: 20px;
margin-right: 10px;
font-size: 17px;
color: #046ECA;
color: var(--el-color-primary);
}
.header__left-breadcrumb{
display:flex;
align-items:center;
display: flex;
align-items: center;
.route-menu:hover{
cursor: pointer;
color: #2C72C6;
color: var(--el-color-primary);
}
.header__left-breadcrumb-item-select{
display:flex;
@@ -87,17 +87,17 @@
flex: 1;
padding: 12px 10px 10px 20px;
max-width: 290px;
border-right: 1px solid #D8D8D8;
border-right: 1px solid var(--el-border-color);
.left-menu {
padding: 8px 0;
font-size: 14px;
color: #575757;
transition: all linear .2s;
color: var(--el-text-color-regular);
transition: all linear var(--el-transition-duration);
&:hover {
cursor: pointer;
color: #157FF3;
color: var(--el-color-primary);
}
.cn-icon:first-of-type {
font-size: 17px;
@@ -125,7 +125,7 @@
padding: 8px 0;
font-size: 14px;
font-weight: bolder;
color: #353636;
color: var(--el-text-color-primary);
border-bottom: 1px dashed #D8D8D8;
}
.middle-menus__body {
@@ -134,7 +134,7 @@
.middle-menu {
padding: 5px 0;
font-size: 14px;
color: #353636;
color: var(--el-text-color-primary);
&:hover {
cursor: pointer;
@@ -156,6 +156,7 @@
.personal {
display: flex;
.el-dropdown {
color: #fff;
height: 40px;
@@ -170,29 +171,15 @@
font-size: 12px;
}
}
.header-menu--item {
.header-menu__item {
outline-style: initial;
}
}
.left-menu--pin {
width: 20px;
font-size: 20px;
font-weight: 100;
color: #999999;
transition: all .4s;
height: 100%;
line-height: 50px;
margin-left: 10px;
i {
transform: rotateY(0);
transition: transform .4s;
}
i.icon-reverse {
transform: rotateY(180deg);
}
}
}
.personal-dropdown-item.is-active {
color: var(--el-color-primary);
font-weight: bold;
}
.cn-home {
display: flex;
flex-direction: column;
@@ -211,12 +198,10 @@
width:10px;
}
#breadcrumbSelectDropdown::-webkit-scrollbar-track-piece {
background: #ECECEC;
border-radius: 0 0 2px 0;
}
#breadcrumbSelectDropdown::-webkit-scrollbar-thumb {
background-clip: content-box !important;
background: #C5C5C5;
border-radius: 4px;
border: 2px solid transparent;
}
@@ -225,57 +210,52 @@
top: 96px !important;
width: 180px !important;
min-width: 180px;
max-height:206px;
overflow:hidden;
max-height: 206px;
overflow: hidden;
padding: 0 !important;
background: #963131;
border:1px solid #C5C5C5 !important;
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
border-radius: 2px !important;
.el-row {
width: 100% !important;
}
.selected {
color: #0091ff;
font-weight: bold;
}
.el-popper {
max-height: 405px;
}
.select-dropdown {
max-height:172px;
width:100%;
margin: 1px 0px;
overflow:auto;
max-height: 172px;
width: 100%;
margin: 1px 0;
overflow: auto;
list-style: none;
padding:4px 0px;
padding: 4px 0;
box-sizing: border-box;
.select-dropdown__item:hover{
background-color: #F5F7FA !important;
}
.select-dropdown__item{
width:100%;
height:30px;
padding:0px 11px;
line-height:30px;
width: 100%;
height: 30px;
padding: 0 11px;
line-height: 30px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #666665;
display: list-item;
text-align: -webkit-match-parent;
box-sizing: border-box;
cursor: pointer;
font-size: 12px;
font-weight: 400;
&:hover {
background-color: var(--el-fill-color-light);
}
&.is-active {
color: var(--el-color-primary);
font-weight: bold;
}
}
}
}
.search-input{
width:100%;
padding: 4px 4px 0px 4px;
width: 100%;
padding: 4px 4px 0 4px;
.el-input__inner{
border-radius: 2px;
font-size: 12px;
@@ -289,14 +269,17 @@
height: 24px;
justify-content: center;
line-height: 24px;
padding: 0px 6px;
padding: 0 6px;
span {
margin-right: 6px;
}
i {
font-size: 12px;
}
}
.breadcrumb-button:hover,.breadcrumb-button__active {
cursor:pointer;
background: rgba(113,113,113,0.10);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
cursor: pointer;
background-color: var(--el-fill-color);
border-radius: 2px;
}

10
src/assets/css/components/views/charts2/entityDetailLine.scss
View File

@@ -13,13 +13,13 @@
.select-prefix {
font-size: 14px;
color: #999;
color: var(--el-text-color-secondary);
padding: 0 6px 0 3px;
}
.el-input__inner {
font-size: 14px;
color: #353636;
color: var(--el-text-color-regular);
}
.common-select {
@@ -41,10 +41,9 @@
min-height: 24px !important;
padding-left: 4px;
font-size: 12px;
font-weight: 400;
border-radius: 2px;
border-radius: var(--el-border-radius-base);
.el-select__placeholder {
color: #2C72C6 !important;
color: var(--el-color-primary) !important;
margin-left: 1px;
}
.el-select__suffix {
@@ -71,7 +70,6 @@
margin-right: 10px;
height: 24px;
line-height: 24px;
border: 1px solid #DCDFE6;
}
}
}

7
src/assets/css/components/views/charts2/linkBlock.scss
View File

@@ -1,7 +1,4 @@
.link-blocks {
$blue: #046ECA;
$grey: #353636;
display: flex;
justify-content: space-between;
height: 100%;
@@ -18,7 +15,7 @@
.block-list__title {
position: absolute;
font-size: 14px;
color: #046ECA;
color: var(--el-color-primary);
top: 16px;
left: 20px;
}
@@ -66,7 +63,7 @@
}
}
/*.link-blocks {
$blue: #046ECA;
$blue: var(--el-color-primary);
$grey: #353636;
border: 1px solid #E2E5EC;

76
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

@@ -2,24 +2,29 @@
height: 100%;
width: 100%;
position: relative;
border: 1px solid $--border-color;
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
.chart-drawing {
height: 100%;
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;
}
@@ -31,25 +36,14 @@
display: flex;
justify-content: space-between;
height: 73px;
.line-select.line-header-right {
display: flex;
//flex: 1;
.line-select__operation {
.el-select__wrapper {
height: 24px !important;
min-height: 24px !important;
}
.el-input__inner {
width: 100px;
}
}
.line-select-reference-line {
margin-right: 20px;
.line-select__operation {
.el-select__wrapper {
height: 24px !important;
min-height: 24px !important;
}
.el-input__inner {
width: 127px;
}
@@ -61,47 +55,22 @@
.line-select-metric,.line-select-reference-line {
display: flex;
align-items: center;
.line-select__operation {
min-width: 127px;
height: 24px;
margin-left: 3px;
box-shadow: none;
border-radius: 2px;
.el-select__wrapper {
min-height: 24px !important;
//padding-left: 4px;
line-height: 24px !important;
height: 24px;
font-size: 12px;
color: $--text-color-6;
color: var(--el-color-primary);
font-weight: 400;
padding: 5px 6px 4px 5px !important;
.el-select__placeholder {
color: $--text-color-6;
}
.el-select__suffix {
.el-icon {
color: #575757;
}
}
//.el-input__inner {
// padding-left: 4px;
// line-height: 24px;
// height: 24px;
// font-size: 12px;
// color: #2C72C6;
// font-weight: 400;
//}
}
.el-input__suffix {
display: flex;
.el-input__suffix-inner {
line-height: 24px;
.el-select__caret {
line-height: 24px;
width: 16px;
color: #575757;
}
color: var(--el-color-primary);
}
}
}
@@ -116,43 +85,42 @@
position: absolute;
height: 3px;
border-radius: 4px 0 0 0;
background: #046ECA;
background: var(--el-color-primary);
top: 0;
z-index: 1;
transition: all linear .2s;
}
.line-value {
//position: absolute;
//top: 0;
//left: 0;
display: flex;
.line-value-tabs.mousemove-cursor {
border-top: 4px solid #D3D0D8;
border-top: 4px solid var(--el-border-color-dark);
z-index: 0;
}
.line-value-tabs {
cursor: pointer;
padding: 16px 0 0 20px;
border-top: 4px solid transparent;
.line-value-unit {
.line-value-unit-number {
font-family: Helvetica-Bold;
font-size: 28px;
color: $--text-color-1;
color: var(--el-text-color-primary);
margin-right: 4px;
}
.line-value-unit-number2 {
font-size: 0;
span {
font-size: 12px;
color: $--text-color-2;
font-weight: 400;
color: var(--el-text-color-regular);
}
}
}
.line-value-tabs-name {
position: relative;
display: flex;
.tabs-name {
flex: 1;
padding-left: 19px;

37
src/assets/css/components/views/charts2/networkOverviewTabs.scss
View File

@@ -1,22 +1,22 @@
.tabs {
$blue: #046ECA;
$grey: #353636;
height:calc(100% - 64px);
font-size:12px;
.tab-hide{
margin-top:42px;
height: calc(100% - 64px);
font-size: 12px;
.tab-hide {
margin-top: 42px;
}
.cn-chart__tabs {
height:100%;
height: 100%;
.tab-pane {
height:100%;
.title-search {
display:flex;
flex-direction:row;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width:100%;
height:36px;
width: 100%;
height: 36px;
.title-search__span {
margin-right:6px;
}
@@ -38,8 +38,7 @@
align-items: center;
height: 24px;
justify-content: center;
line-height: 24px;
//padding: 0px 7px;
line-height: 27px; // 使搜索图标与header文本齐平
span {
margin-right: 7px;
}
@@ -78,6 +77,7 @@
}
.tab-table {
border: 1px solid #E2E5EC;
border-bottom: none;
border-radius: 4px 4px 0 0;
padding: 1px;
@@ -85,13 +85,7 @@
cursor: pointer;
}
.el-table__inner-wrapper {
width: calc(100% + 2px);
}
.el-table__header {
width:100% !important;
}
.el-table__body {
width:100% !important;
width: calc(100% + 2px); // 防止横向出现滚动条
}
}
.dns-in-ex {
@@ -191,9 +185,6 @@
color: #E44D3E;
}
}
.el-table--group::after,.el-table--border::after, .el-table::before {
height: 0px;
}
.el-table thead {
color: $--text-color-1;
}
@@ -240,10 +231,6 @@
.el-table__border-left-patch {
width: 0;
}
.el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
width: 0;
height: 0;
}
}
.el-tabs__header {
margin-bottom: 10px;

2
src/assets/css/components/views/charts2/npmTrafficLine.scss
View File

@@ -90,7 +90,7 @@
}
.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;
}

19
src/assets/css/components/views/charts2/panel.scss
View File

@@ -77,7 +77,7 @@
display: flex;
&>.el-select {
width: 162px !important;
width: 175px !important;
margin-right: 10px;
.select-prefix {
@@ -94,21 +94,8 @@
.panel__time {
display: flex;
}
.el-select__wrapper {
height: 28px !important;
min-height: 20px !important;
padding: 5px 7px 4px 5px !important;
.el-select__prefix {
.select-prefix {
margin-right: -5px !important;
}
}
.el-select__suffix {
.el-icon {
margin-left: -17px !important;
margin-top: -2px !important;
}
}
.el-select__wrapper .el-select__prefix .select-prefix {
margin-right: -5px !important;
}
}
}

2
src/assets/css/components/views/setting/knowledgeBase.scss
View File

@@ -2062,7 +2062,7 @@
}
.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;
}

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

@@ -1,12 +1,57 @@
/*@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
font-family: 'element-icons';
src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), !* chrome, firefox *!
url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!
font-weight: normal;
font-display: auto;
font-style: normal;
@use 'sass:map';
@use './common.scss';
/* 主题 */
// 按需重写、新增element变量值
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
/* 颜色 */
$colors: (
'primary': (
'base': #046ECA
),
// 新增一个业务色，暂命名为business
'business': (
'base': #38ACD2
),
'success': (
'base': #7E9F54,
),
'danger': (
'base': #E26154,
),
'error': (
'base': #E26154,
)
),
/* select相关 */
// select input中的边距，控制select框的大小
$select-wrapper-padding: (
'large': 8px 16px,
'default': 2px 12px,
'small': 2px 8px,
),
$select-option: (
'height': 28px
),
// 通用尺寸
$common-component-size: (
'large': 32px,
'default': 28px,
'small': 24px
)
);
// 导出重写后的var.scss，暴露内部变量供别处使用
@use 'element-plus/theme-chalk/src/common/var.scss' as css-var;
// 引入element样式
@use 'element-plus/theme-chalk/src/index.scss' as *;
// 引入element定义的sass函数
@use 'element-plus/theme-chalk/src/mixins/_var' as var;
:root {
// 为新增的业务色设置css变量
@include var.set-css-var-value(('color', 'business'), map.get(css-var.$colors, 'business', 'base'));
--cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
}
$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错*/
@font-face {
font-family: 'NotoSansSChineseRegular';
@@ -23,9 +68,6 @@ $--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语
font-style: normal;
}
@import './common.scss';
/* 主题 */
$--color-text-primary: #303133 !default;
$--border-color: #E2E5EC;

2
src/assets/css/themes/theme-dark.scss
View File

@@ -78,5 +78,3 @@ $--border-color-2: #6C6E72;
$--select-bg-color-1: #1D1E1F;
$--select-bg-color-hover-1: #18222C;
$--select-bg-color-hover-2: #18222C;
$--block-bg-color-1: #181818;

2
src/assets/css/themes/theme-light.scss
View File

@@ -78,5 +78,3 @@ $--border-color-3: #DEDEDE;
$--select-bg-color-1: #FFFFFF;
$--select-bg-color-hover-1: #f9f9f9;
$--select-bg-color-hover-2: #F2F9FF;
$--block-bg-color-1: #F7F7F7;

4
src/components/common/TimeRange/DateTimeRange.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-ele-click-outside="changeDropdown" style="position: relative;" class="date-range-box">
<div @click="showDropdown" class="date-range-text" :class="myClass" :style="style">
<div @click="showDropdown" tabindex="1" class="date-range-text" :class="myClass" :style="style">
<div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
<div class="calendar-popover-text" style="display: flex" v-if="isCustom" :title="`${dateFormatByAppearance(getMillisecond(startTime))} -${dateFormatByAppearance(getMillisecond(endTime))}`">
<div class="calendar-popover-text" :style="showPosition === 'left' ? 'width: 90px;text-overflow: ellipsis;overflow: hidden;' : ''" >{{ dateFormatByAppearance(getMillisecond(startTime)) }}</div>
@@ -56,7 +56,7 @@
<el-col
:span="8"
class="date-range-panel-content date-range-panel-content-right"
style="border-left: 1px solid rgba(0,0,0,0.09);">
>
<div class="date-range-title">{{$t('dateTime.relativeTimeRanges')}}</div>
<ul class="date-range-item">
<li v-for="item in dateRangeArr"

38
src/components/common/TimeRange/TimeRefresh.vue
View File

@@ -1,23 +1,23 @@
<template>
<div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
<span>
<el-button-group size="small">
<el-button size="small" @click="$emit('change')"><i class="cn-icon cn-icon-refresh1"></i></el-button>
<el-button class="cn-button" size="small" @click="showRefreshList">
<span class="cn-button-label" v-if="interLabel">{{interLabel}}</span>
<i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
</el-button>
</el-button-group>
</span>
<transition name="el-zoom-in-top">
<div v-if="dropdownShow" class="refresh-list">
<div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
{{ item.label }}
<i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
</div>
</div>
</transition>
</div>
<div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
<span>
<el-button-group size="small">
<el-button size="small" @click="$emit('change')"><i class="cn-icon cn-icon-refresh1"></i></el-button>
<el-button class="el-button--icon" size="small" @click="showRefreshList">
<span class="button-label" v-if="interLabel">{{interLabel}}</span>
<i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
</el-button>
</el-button-group>
</span>
<transition name="el-zoom-in-top">
<div v-if="dropdownShow" class="refresh-list">
<div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
{{ item.label }}
<i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
</div>
</div>
</transition>
</div>
</template>
<script>

12
src/components/layout/Header.vue
View File

@@ -9,16 +9,16 @@
<!--个人操作-->
<div class="personal">
<el-dropdown>
<div class="header-menu--item"><i class="cn-icon cn-icon-language"></i></div>
<div class="header-menu__item"><i class="cn-icon cn-icon-language"></i></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<div id="header-to-english" :style="language === EN?'color:#0091ff':''" @click="changeLocal(EN)">
<div id="header-to-english" class="personal-dropdown-item" :class="language === EN ? 'is-active' : ''" @click="changeLocal(EN)">
English
</div>
</el-dropdown-item>
<el-dropdown-item>
<div id="header-to-chinese" :style="language === ZH?'color:#0091ff':''" @click="changeLocal(ZH)">
<div id="header-to-chinese" class="personal-dropdown-item" :class="language === ZH ? 'is-active' : ''" @click="changeLocal(ZH)">
中文
</div>
</el-dropdown-item>
@@ -26,7 +26,7 @@
</template>
</el-dropdown>
<el-dropdown>
<div class='login-user header-menu--item'>{{ nickName }}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
<div class='login-user header-menu__item'>{{ nickName }}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
@@ -601,9 +601,9 @@ export default {
itemName = this.dnsRcodeMapData.get(item)
}
if (itemName === currentValue) {
selectedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
selectedDom.classList.add('is-active')
} else {
selectedDom.style.cssText = ''
selectedDom.classList.remove('is-active')
}
}
})

2
src/main.js
View File

@@ -15,7 +15,6 @@ import 'highlight.js/styles/color-brewer.css'
import '@/assets/css/main.scss' // 样式入口
import VueGridLayout from 'vue-grid-layout'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import bus from 'tiny-emitter'
import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
@@ -24,7 +23,6 @@ import PanelChartList from '@/views/charts/PanelChartList'
import Error from '@/components/common/Error'
import Renderer from '@/components/advancedSearch/showhint/Hint/Renderer'
import 'lib-flexible'
import 'element-plus/theme-chalk/dark/css-vars.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const emitter = new bus()

1
src/views/charts2/Panel.vue
View File

@@ -22,7 +22,6 @@
</div>
<div class="panel__tools">
<el-select
size="small"
v-model="metric"
placeholder=" "
v-if="showMetric"

2
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -58,7 +58,7 @@
>
<template #reference>
<div :ref="`tabSearchRef${tab.prop}`">
<div class="tab-search-button" :id="`tabSearchButton${tab.prop}`" v-show="showSearchButton"
<div class="tab-search-button" :id="`tabSearchButton${tab.prop}`"
@click="handlePopoverShow(item.prop,tab.prop)">
<el-icon style="color:#575757;"><Search /></el-icon>
<!--<i class="el-icon-search" style="color:#575757;" ></i>-->

6
vue.config.js
View File

@@ -6,12 +6,6 @@ function resolve (dir) {
module.exports = {
transpileDependencies: ['/@intlify'],
css: {
/* loaderOptions: {
// scss变量全局应用
scss: {
prependData: '@import "~@/assets/css/main.scss";'
}
}, */
sourceMap: false // 开启浏览器调试css定位
},
chainWebpack: (config) => {