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

package.json

@@ -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",

src/assets/css/common.scss

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

src/assets/css/common/part-select.scss

@@ -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;
+          height: 28px;
-          line-height: 24px;
+          line-height: 28px;
-          font-size: 12px;
+          font-size: 14px;
-          font-weight: 400;
-        }
-        .el-select-dropdown__item.selected {
-          color: #2C72C6;
-        }
-        .el-select-dropdown__item:hover {
-          color: #2C72C6;
-          background: #F7F7F7;
         }
       }
     }
   }
-}
+}*/

src/assets/css/common/table-common.scss

@@ -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;
       }
     }
   }

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

@@ -1,9 +1,10 @@
+@use 'element-plus/theme-chalk/src/select.scss' as *;
 .date-range-box {
   font-size: 14px;
-  border-radius: 2px;
+  border-radius: var(--el-border-radius-base);
-  //margin-right: 10px;
   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;
+    @include mixed-input-border(var(--el-border-color));
-    background: var(--el-fill-color-blank);
+    border-radius: var(--el-border-radius-base);
-    //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;
     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: var(--el-text-color-regular);
-    color: $--text-color-4;
     font-weight: 600;
     padding: 14px 0 7px 8px;
   }
@@ -74,10 +77,9 @@
     white-space: nowrap;
     display: inline-block;
     margin: 0 5px;
-    //color: #353636;
+    color: var(--el-text-color-primary);
-    color: $--text-color-1;
     .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-color: var(--el-fill-color-blank);
-    background: $--select-bg-color-1;
+    box-shadow: var(--el-box-shadow-light);
-    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);
     position: absolute;
     right: 10px !important;
     z-index: 2;
@@ -106,25 +107,24 @@
 
       .content-title {
         font-size: 14px;
-        //color: #666666;
+        color: var(--el-text-color-regular);
-        color: var(--el-text-color-primary);
         font-weight: 400;
         margin-bottom: 12px;
       }
 
       .content-input {
-        border: 1px solid #E7EAED;
+        border: 1px solid var(--el-border-color);
-        border-radius: 2px;
+        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-color: var(--el-fill-color-light);
-          //background: #f9f9f9;
-          background: $--select-bg-color-hover-1;
         }
       }
       .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-regular);
-          color: var(--el-text-color-primary);
-          font-weight: 400;
           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;
   }
 }

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

@@ -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);
+    background-color: var(--el-fill-color-blank);
-    border-radius: 2px;
+    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: var(--el-color-primary);
-      color: #0091FF;
+      font-weight: bold;
-      font-weight: 400;
+
       .cn-icon-check{
-        color: #0091FF;
+        color: var(--el-color-primary);
         position: absolute;
         right: 7px;
       }
     }
     .refresh-list-item:hover{
-      //background: #F2F9FF;
+      background-color: var(--el-fill-color-light);
-      background: $--select-bg-color-hover-1;
-      color: #0091FF;
     }
   }
-  .el-button--small.cn-button {
+  .el-button--small.el-button--icon {
     span {
       font-size: 14px;
-      color: #2C72C6;
+      color: var(--el-color-primary);
-      font-weight: 400;
+
-      .cn-button-label {
+      .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;

src/assets/css/components/components/layout/layout.scss

@@ -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;
+      display: flex;
-      align-items:center;
+      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;
+          color: var(--el-text-color-regular);
-          transition: all linear .2s;
+          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;
+  max-height: 206px;
-  overflow:hidden;
+  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;
+    max-height: 172px;
-    width:100%;
+    width: 100%;
-    margin: 1px 0px;
+    margin: 1px 0;
-    overflow:auto;
+    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%;
+      width: 100%;
-      height:30px;
+      height: 30px;
-      padding:0px 11px;
+      padding: 0 11px;
-      line-height:30px;
+      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%;
+  width: 100%;
-  padding: 4px 4px 0px 4px;
+  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;
+  cursor: pointer;
-  background: rgba(113,113,113,0.10);
+  background-color: var(--el-fill-color);
-  box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
   border-radius: 2px;
 }

src/assets/css/components/views/charts2/entityDetailLine.scss

@@ -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: var(--el-border-radius-base);
-        border-radius: 2px;
         .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;
     }
   }
 }

src/assets/css/components/views/charts2/linkBlock.scss

@@ -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;

src/assets/css/components/views/charts2/networkOverviewLine.scss

@@ -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;
+              color: var(--el-color-primary);
-            }
-            .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;
-              }
             }
           }
         }
@@ -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;
+                color: var(--el-text-color-regular);
-                font-weight: 400;
               }
             }
           }
           .line-value-tabs-name {
             position: relative;
             display: flex;
+
             .tabs-name {
               flex: 1;
               padding-left: 19px;

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -1,22 +1,22 @@
 .tabs {
   $blue: #046ECA;
   $grey: #353636;
-  height:calc(100% - 64px);
+  height: calc(100% - 64px);
-  font-size:12px;
+  font-size: 12px;
-  .tab-hide{
+  .tab-hide {
-    margin-top:42px;
+    margin-top: 42px;
   }
   .cn-chart__tabs {
-    height:100%;
+    height: 100%;
     .tab-pane {
       height:100%;
       .title-search {
-        display:flex;
+        display: flex;
-        flex-direction:row;
+        flex-direction: row;
         align-items: center;
         justify-content: flex-start;
-        width:100%;
+        width: 100%;
-        height:36px;
+        height: 36px;
         .title-search__span {
           margin-right:6px;
         }
@@ -38,8 +38,7 @@
           align-items: center;
           height: 24px;
           justify-content: center;
-          line-height: 24px;
+          line-height: 27px; // 使搜索图标与header文本齐平
-          //padding: 0px 7px;
           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);
+          width: calc(100% + 2px); // 防止横向出现滚动条
-        }
-        .el-table__header {
-          width:100% !important;
-        }
-        .el-table__body {
-          width:100% !important;
         }
       }
       .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;

src/assets/css/components/views/charts2/npmTrafficLine.scss

@@ -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;
             }

src/assets/css/components/views/charts2/panel.scss

@@ -77,7 +77,7 @@
       display: flex;
 
       &>.el-select {
-        width: 162px !important;
+        width: 175px !important;
         margin-right: 10px;
 
         .select-prefix {
@@ -94,23 +94,10 @@
       .panel__time {
         display: flex;
       }
-      .el-select__wrapper {
+      .el-select__wrapper .el-select__prefix .select-prefix {
-        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;
-          }
-        }
-      }
-    }
   }
   .chart-list {
     height: calc(100% - 68px);

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -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;
               }

src/assets/css/main.scss

@@ -1,12 +1,57 @@
-/*@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
+@use 'sass:map';
-  font-family: 'element-icons';
+
-  src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), !* chrome, firefox *!
+@use './common.scss';
-  url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!
+/* 主题 */
-  font-weight: normal;
+// 按需重写、新增element变量值
-  font-display: auto;
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  font-style: normal;
+  /* 颜色 */
+  $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;

src/assets/css/themes/theme-dark.scss

@@ -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;

src/assets/css/themes/theme-light.scss

@@ -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;

src/components/common/TimeRange/DateTimeRange.vue

@@ -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"

src/components/common/TimeRange/TimeRefresh.vue

@@ -3,8 +3,8 @@
     <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">
+        <el-button class="el-button--icon" size="small" @click="showRefreshList">
-                  <span class="cn-button-label" v-if="interLabel">{{interLabel}}</span>
+          <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>

src/components/layout/Header.vue

@@ -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')
                 }
               }
             })

src/main.js

@@ -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()

src/views/charts2/Panel.vue

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

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -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>-->

vue.config.js

@@ -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) => {