CN-1551 feat: 升级element-ui版本

2024-02-02 18:13:11 +08:00
parent b286861137
commit b02d8ecb8b
68 changed files with 1015 additions and 479 deletions
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@amcharts/amcharts4": "~4.10.0",
    "@amcharts/amcharts4-geodata": "^4.1.20",
    "@antv/g6": "^4.8.17",
+    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^0.21.1",
    "babel-plugin-lodash": "~3.3.0",
    "codemirror": "^5.65.1",
@@ -20,7 +21,7 @@
    "dayjs": "^1.10.5",
    "dexie": "~3.2.0",
    "echarts": "^5.1.1",
-    "element-plus": "~1.0.2-beta.71",
+    "element-plus": "^2.5.1",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.21",
    "maplibre-gl": "3.6.2",
@@ -43,8 +44,8 @@
    "@babel/core": "~7.22.5",
    "@babel/plugin-proposal-class-properties": "~7.18.0",
    "@babel/plugin-proposal-private-methods": "~7.18.0",
-    "@babel/plugin-transform-runtime": "~7.22.0",
    "@babel/plugin-proposal-private-property-in-object": "~7.21.0",
+    "@babel/plugin-transform-runtime": "~7.22.0",
    "@babel/preset-env": "~7.22.0",
    "@babel/preset-typescript": "~7.22.0",
    "@commitlint/cli": "^9.1.2",
@@ -67,8 +68,8 @@
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "~3.3.0",
    "@vue/component-compiler-utils": "~3.3.0",
-    "@vue/test-utils": "~2.4.0",
    "@vue/server-renderer": "~3.3.0",
+    "@vue/test-utils": "~2.4.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.0.0",
    "compression-webpack-plugin": "^8.0.1",
@@ -82,6 +83,8 @@
    "jest": "~26.6.0",
    "ts-jest": "~26.5.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
    "vue-jest": "^5.0.0-alpha.10"
  },
  "browserslist": [
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="" class="dark">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,7 +8,7 @@
    <script src="config.js"></script>
    <title>Cyber Narrator</title>
  </head>
-  <body class="theme-light">
+  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -7,15 +7,18 @@
      <el-form class="login__box">
        <el-form-item>
          <el-input
-              prefix-icon="cn-icon cn-icon-user2"
              class="login--input login__input"
            v-model="username"
-          ></el-input>
+          >
+            <template #prefix>
+              <i class="cn-icon cn-icon-user2"></i>
+            </template>
+          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              class="login--input"
-              prefix-icon="el-icon-lock"
+              prefix-icon="Lock"
              type="password"
              @keyup.enter="login"
            v-model="pin"
@@ -89,6 +92,7 @@ export default {
            // localStorage.setItem(storageKey.userId, res.data.data.user.userId)
            localStorage.setItem(storageKey.userId, res.data.data.user.id)
            localStorage.setItem(storageKey.token, res.data.data.token)
+            // const theme =
            this.$i18n.locale = localStorage.getItem(storageKey.language)
          }
        }
@@ -140,7 +144,7 @@ export default {
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
 .logins {
  background-color: #000C18;
  background-size: auto;
@@ -153,12 +157,12 @@ export default {
 }

 :deep .el-input__inner {
-  background-color: #0B325C !important;
+  //background-color: #0B325C !important;
  border: none;
-  border-radius: 0px;
-  border-bottom: 1px solid #295688;
+  //border-radius: 0px;
+  //border-bottom: 1px solid #295688;
  font-size: 14px;
-  line-height: 14px;
+  //line-height: 14px;
 }
 :deep .el-input__inner:hover {
  border-color: #295688;
@@ -178,6 +182,7 @@ export default {
  -webkit-text-fill-color: rgba(231,234,237, .8) !important;
  transition: background-color 500000000000000000s ease-in-out 0s !important;
  caret-color: #fff ;
+  font-size: 14px;
 }
 .inside {
  width: 414px;
@@ -235,4 +240,20 @@ export default {
  width: 334px;
  height: 52px;
 }
+.login--input {
+  :deep .el-input__wrapper {
+    box-shadow: none !important;
+    //border-bottom: 1px solid rgba(103,179,245,0.65);
+    border-bottom: 1px solid #295688;
+    border-radius: 0;
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    padding: 1px 4px 2px 5px;
+  }
+
+  :deep .el-input__wrapper.is-focus {
+    box-shadow: none !important;
+  }
+}
 </style>
--- a/src/assets/css/common/cover-element-plus.scss
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -0,0 +1,68 @@
+.el-drawer__body {
+  padding: 0 !important;
+}
+.el-tabs__item {
+  display: inline-block !important;
+  height: var(--el-tabs-header-height);
+  line-height: var(--el-tabs-header-height);
+}
+
+.el-table--border::before, .el-table__border-left-patch {
+  //width: 0 !important;
+}
+.el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+  //height: 0 !important;
+}
+
+.el-popper.is-pure {
+  margin-top: -10px;
+}
+.el-select__wrapper {
+  min-height: 28px !important;
+}
+.el-input__wrapper {
+  height: 28px;
+}
+.el-input--mini .el-input__inner {
+  height: 28px !important;
+  line-height: 28px !important;
+}
+.el-table td.el-table__cell div {
+  margin-left: -1px;
+}
+.el-table .sort-caret.ascending {
+  border-bottom-color: #c0c4cc !important;
+}
+.el-table .ascending .sort-caret.ascending {
+  border-bottom-color: #699dc9 !important;
+}
+.el-table .sort-caret.descending {
+  border-top-color: #c0c4cc !important;
+}
+.el-table .descending .sort-caret.descending {
+  border-top-color: #699dc9 !important;
+}
+.el-radio.el-radio--large {
+  height: auto !important;
+}
+.el-radio {
+  height: auto !important;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: $--color-primary !important;
+}
+.el-radio__input.is-checked .el-radio__inner {
+  background: $--color-primary !important;
+  border-color: $--color-primary !important;
+}
+.el-radio__label {
+  padding-left: 10px !important;
+}
+.el-tag {
+  min-width: 24px;
+  height: 24px !important;
+  line-height: 24px !important;
+}
+.el-popover.el-popper {
+  padding: 0 !important;
+}
--- a/src/assets/css/common/part-select.scss
+++ b/src/assets/css/common/part-select.scss
@@ -1,6 +1,6 @@
 // 部分 select 通用样式
 .common-select.el-select__popper {
-  top: 27px !important;
+  //top: 27px !important;
  .el-popper__arrow {
    display: none;
  }
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -196,7 +196,7 @@
      position: absolute;
      width: calc(100% - 40px);
      border: 1px solid $--right-box-border-color;
-      border-bottom: none;
+      //border-bottom: none;
      border-radius:4px;

      .caret-wrapper {
@@ -214,7 +214,7 @@
      }

      td {
-        padding: 8px 0;
+        padding: 3px 0 4px 0;
        border-bottom: 1px solid $--right-box-border-color;
      }
      th {
@@ -399,6 +399,9 @@
 .margin-t-20{
  margin-top: 20px;
 }
+.margin-r-3{
+  margin-right: 3px;
+}
 .tooltip-column-name {
  color: #aeb0b9;
  height:40px;
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -16,7 +16,7 @@
          margin-right: 12px;
          background-color: transparent;

-          .el-icon-search {
+          i {
            color: #3976CB;
          }
        }
@@ -51,14 +51,14 @@
          line-height: 39px;
          background: #38ACD2;

-          .el-icon-search {
+          i {
            font-size: 22px;
            color: #fff;
          }
        }
      }
      .search__suffix-close {
-        .el-icon-error {
+        i {
          font-size: 17px;
          color: #C4C4C4;
          cursor: pointer;
@@ -87,7 +87,7 @@
  border-radius: 2px;
  padding-left: 10px;
  padding-right: 80px;
-  background-color: white;
+  background-color: $--select-bg-color-1;
  border: 1px solid #DEDEDE;

  &::-webkit-scrollbar {
@@ -151,6 +151,20 @@
        color: #333;
        font-weight: bold;
        cursor: text;
+        .el-select {
+          min-width: 210px !important;
+          min-height: 20px !important;
+          height: 20px;
+          cursor: pointer;
+        }
+        .el-select__wrapper {
+          height: 28px;
+          margin-top: -4px;
+          cursor: pointer;
+        }
+        .el-select__wrapper.is-focused {
+          box-shadow: 0 0 0 1px $--color-primary inset !important;
+        }
      }
      .condition__operator {
        color: #3976CB;
@@ -180,7 +194,13 @@
  padding-left: 65px;
 }

-.el-popover.my-popper-class {
+.my-popper-class {
  width: auto !important;
-  padding: 8px 12px !important;
+  padding: 8px 10px !important;
+}
+.el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px $--color-primary inset !important;
+}
+.el-select-dropdown__item.is-selected {
+  color: #2c72c6 !important;
 }
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -2,7 +2,7 @@

 .CodeMirror {
  /* Set height, width, borders, and global font properties here */
-  height: 40px;
+  height: 40px !important;
  color: black;
  direction: ltr;
  border: 1px solid #CECECE;
@@ -22,7 +22,7 @@
 /* PADDING */

 .CodeMirror-lines {
-  padding: 9px 5px; /* Vertical padding around content */
+  //padding: 9px 5px; /* Vertical padding around content */
 }
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
@@ -187,6 +187,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
  position: relative;
  border-right: 50px solid transparent;
  width: 3000px; // 避免搜索过长导致换行
+  height: 30px;
+  overflow-y: hidden;
 }

 /* The fake, visible scrollbars. Used to force redraw during scrolling
@@ -222,7 +224,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
 }
 .CodeMirror-gutter {
  white-space: normal;
-  height: 100%;
+  height: 100% !important;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
@@ -249,6 +251,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
 .CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
+  margin-top: 4px;
 }
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
@@ -391,11 +394,6 @@ span.CodeMirror-selectedtext { background: none; }
  //color: #D85512;
 }

-.CodeMirror-lines {
-  /*height: 20px;*/
-  //padding: 3px 0;
-}
-
 .in-coder-panel {
  margin-left: 2px;
 }
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -32,8 +32,10 @@
    padding: 0 10px;
    display: flex;
    justify-content: space-around;
-    background: #FFFFFF;
-    border: 1px solid #DEDEDE;
+    //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;
    height: 28px;
@@ -56,7 +58,8 @@

  .date-range-title {
    font-size: 14px;
-    color: #666666;
+    //color: #666666;
+    color: $--text-color-4;
    font-weight: 600;
    padding: 14px 0 7px 8px;
  }
@@ -71,7 +74,8 @@
    white-space: nowrap;
    display: inline-block;
    margin: 0 5px;
-    color: #353636;
+    //color: #353636;
+    color: $--text-color-1;
    .cn-icon-Data {
      color: #575757;
    }
@@ -88,7 +92,8 @@
  .date-range-panel {
    height: 426px;
    width: 500px;
-    background: #FFFFFF;
+    //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);
    position: absolute;
    right: 0;
@@ -102,7 +107,8 @@

      .content-title {
        font-size: 14px;
-        color: #666666;
+        //color: #666666;
+        color: var(--el-text-color-primary);
        font-weight: 400;
        margin-bottom: 12px;
      }
@@ -134,7 +140,8 @@

        .date-range-history-item:hover {
          /*font-weight: 600;*/
-          background: #f9f9f9;
+          //background: #f9f9f9;
+          background: $--select-bg-color-hover-1;
        }
      }
    }
@@ -156,15 +163,18 @@
          display: flex;
          flex-direction: column;
          justify-content: center;
-          color: #333333;
+          //color: #333333;
+          color: var(--el-text-color-primary);
          font-weight: 400;
          padding: 0 10px;
          cursor: pointer;
        }

        li.active {
-          background: #F2F9FF;
-          color: #0091FF;
+          //background: #F2F9FF;
+          //color: #0091FF;
+          background: $--select-bg-color-1;
+          color: var(--el-color-primary);
          font-weight: 400;

          .cn-icon-check {
@@ -175,8 +185,10 @@
        }

        li:hover {
-          background: #F2F9FF;
-          color: #0091FF;
+          //background: #F2F9FF;
+          background: var(--el-color-primary-light-9);
+          //color: #0091FF;
+          color: var(--el-color-primary);
        }
      }
    }
--- a/src/assets/css/components/components/common/TimeRange/time-refresh.scss
+++ b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
@@ -17,8 +17,9 @@
  .refresh-list{
    position: absolute;
    z-index: 2;
-    background: #FFFFFF;
-    border: 1px solid #DEDEDE;
+    //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;
    top: 30px;
@@ -29,13 +30,13 @@
      display: flex;
      flex-direction: column;
      justify-content: center;
-      color: #333333;
+      color: $--text-color-5;
      cursor: pointer;
      position: relative;
      padding: 8px 0 8px 12px;
    }
    .refresh-list-item.active{
-      background: #F2F9FF;
+      background: $--select-bg-color-1;
      color: #0091FF;
      font-weight: 400;
      .cn-icon-check{
@@ -45,7 +46,8 @@
      }
    }
    .refresh-list-item:hover{
-      background: #F2F9FF;
+      //background: #F2F9FF;
+      background: $--select-bg-color-hover-1;
      color: #0091FF;
    }
  }
@@ -66,5 +68,6 @@
  .el-button--mini{
    padding: 4px 6px !important;
    min-height: 28px !important;
+    height: 28px !important;
  }
 }
--- a/src/assets/css/components/components/common/chart-tab.scss
+++ b/src/assets/css/components/components/common/chart-tab.scss
@@ -17,8 +17,9 @@
    box-shadow: none;

    &>.el-tabs__header {
-      background-color: white;
-      border-color: #E2E5EC;
+      //background-color: white;
+      background-color: $--select-bg-color-1;
+      border-color: $--border-color-2;

      .el-tabs__nav-wrap {
        padding-left: 27px;
@@ -33,6 +34,7 @@
  }
  .el-tabs__nav {
    z-index: 1;
+    display: inline-block;
  }

  .el-tabs__item.is-top {
@@ -40,7 +42,7 @@
    line-height: 35px;

    .chart-tabs__label {
-      color: #353636;
+      color: $--text-color-1;
      font-size: 14px;
      font-weight: bold;
      box-sizing: border-box;
@@ -53,7 +55,7 @@
    }
    &.is-active {
      .chart-tabs__label {
-        color: #353636;
+        color: $--text-color-1;

        i {
          color: #046EC9;
--- a/src/assets/css/components/components/common/pagination.scss
+++ b/src/assets/css/components/components/common/pagination.scss
@@ -1,16 +1,89 @@
-.pagination {
-  padding-top: 8px;
-  text-align: center;
-  max-height: 42px;
+//.pagination {
+//  padding-top: 8px;
+//  text-align: center;
+//  max-height: 42px;
+//
+//  .el-pagination {
+//    max-height: 42px;
+//    padding-right: 0;
+//  }
+//  .pagination-size-select .el-input--mini .el-input__inner{
+//    height: 20px;
+//    line-height: 20px;
+//    margin: 5px 0 5px 5px;
+//  }
+//  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
+//    margin:5px 5px 0 5px;
+//    padding: 0 4px;
+//    font-size: 13px;
+//    min-width: 20px;
+//    height: 20px;
+//    line-height: 20px;
+//    text-align: center;
+//    border: 1px solid rgba(154,154,154,0.20);
+//    border-radius: 2px;
+//  }
+//  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
+//    line-height: 20px;
+//  }
+//  .el-pagination .el-pager .more::before {
+//    line-height: 20px;
+//  }
+//  .el-pagination .el-pager .more {
+//    background-color: $--content-right-background-color;
+//  }
+//  .btn-next, .btn-prev {
+//    background-color: $--content-right-background-color !important;
+//  }
+//  input {
+//    background-color: $--content-right-background-color !important;
+//  }
+//  .el-pager li.number {
+//    color: #666666;
+//    letter-spacing: 0;
+//    font-weight:normal;
+//    background-color: $--content-right-background-color;
+//  }
+//  .el-pager li.number.active {
+//    color: #FFFFFF;
+//    letter-spacing: 0;
+//  }
+//
+//  .el-pagination .el-pager li.active {
+//    background-color: $--color-primary;
+//    border-radius: 2px;
+//  }
+//  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
+//    color: #666666;
+//    letter-spacing: 0;
+//    font-weight:normal;
+//  }
+//  .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
+//    height: 20px;
+//    border-color: rgba(154,154,154,0.20);
+//  }
+//  .el-pagination__sizes .el-input .el-input__inner:hover {
+//    border-color: rgba(154,154,154,0.20);
+//  }
+//}
+//.entity__pagination .pagination {
+//  .el-pager li.more + li {
+//    display: none;
+//  }
+//  .el-pager li.number:not(:last-of-type) {
+//    display: inline-block !important;
+//  }
+//}

-  .el-pagination {
-    max-height: 42px;
-    padding-right: 0;
-  }
-  .pagination-size-select .el-input--mini .el-input__inner{
-    height: 20px;
-    line-height: 20px;
-    margin: 5px 0 5px 5px;
+.pagination {
+  //max-height: 42px;
+  padding-top: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-pagination__total {
+    margin-right: 10px;
+    font-size: 13px;
  }
  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
    margin:5px 5px 0 5px;
@@ -23,54 +96,44 @@
    border: 1px solid rgba(154,154,154,0.20);
    border-radius: 2px;
  }
-  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
-    line-height: 20px;
-  }
-  .el-pagination .el-pager .more::before {
-    line-height: 20px;
-  }
-  .el-pagination .el-pager .more {
-    background-color: $--content-right-background-color;
-  }
-  .btn-next, .btn-prev {
+  .el-pagination .btn-prev {
    background-color: $--content-right-background-color !important;
  }
-  input {
-    background-color: $--content-right-background-color !important;
-  }
-  .el-pager li.number {
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-    background-color: $--content-right-background-color;
-  }
-  .el-pager li.number.active {
-    color: #FFFFFF;
-    letter-spacing: 0;
-  }
-
-  .el-pagination .el-pager li.active {
-    background-color: $--color-primary;
-    border-radius: 2px;
-  }
  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
    color: #666666;
    letter-spacing: 0;
    font-weight:normal;
  }
-  .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
+  .btn-next, .btn-prev {
+    background-color: $--content-right-background-color !important;
+  }
+  .el-pager li.is-active {
+    background-color: #699dc9;
+    color: #fff;
+    font-weight: 500;
+  }
+  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
+    margin-top: 0;
+  }
+  .el-select {
+    width: 100px !important;
+    margin-left: 3px;
+  }
+  .pagination-size-select .el-select__wrapper{
+    width: 100px;
    height: 20px;
-    border-color: rgba(154,154,154,0.20);
+    line-height: 20px;
+    min-height: 20px !important;
+    margin: 5px 0 5px 5px;
+    padding: 4px 8px 4px 10px;
+    font-size: 12px;
+    border-radius: 2px;
  }
-  .el-pagination__sizes .el-input .el-input__inner:hover {
-    border-color: rgba(154,154,154,0.20);
-  }
-}
-.entity__pagination .pagination {
-  .el-pager li.more + li {
-    display: none;
-  }
-  .el-pager li.number:not(:last-of-type) {
-    display: inline-block !important;
+  .el-select__suffix {
+    svg {
+      width: 12px;
+      height: 12px;
+    }
  }
+  //el-icon el-select__caret el-select__icon
 }
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -1,6 +1,7 @@
 .cn-container {
  height: calc(100% - 100px);
-  background-color: $--content-right-background-color;
+  //background-color: $--content-right-background-color;
+  background-color: var(--bg-color);
  width: 100%;
  &>div {
    height: 100%;
@@ -49,8 +50,9 @@
    display: flex;
    align-items: center;
    height: 40px;
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #E2E5EC;
+    //background-color: #f7f7f7;
+    background-color: var(--el-bg-color-overlay);
+    border-bottom: 1px solid $--border-color;

    .cn-icon-a-NetworkAnalytics {
      margin-left: 20px;
@@ -68,88 +70,6 @@
      .header__left-breadcrumb-item-select{
        display:flex;
        align-items: center;
-        .search-input{
-          width:100%;
-          padding: 4px 4px 0px 4px;
-          .el-input__inner{
-            padding:0px 4px;
-            background: #FFFFFF;
-            border: 1px solid #C5C5C5;
-            box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
-            border-radius: 2px;
-            font-size: 12px;
-            /*color: rgba(87,87,87,0.60);*/
-            letter-spacing: 0;
-            font-weight: 400;
-          }
-        }
-        .breadcrumb-button{
-          align-items: center;
-          width: 100%;
-          height: 24px;
-          justify-content: center;
-          line-height: 24px;
-          padding: 0px 6px;
-          span {
-            margin-right: 6px;
-          }
-        }
-        .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);
-          border-radius: 2px;
-        }
-        .breadcrumb__popper{
-            top: -7px !important;
-            width:auto !important;
-            max-height:206px;
-            overflow:hidden;
-            padding: 0px !important;
-            background: #FFFFFF;
-            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;
-              list-style: none;
-              padding:4px 0px;
-              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;
-                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;
-              }
-            }
-        }
      }
    }
  }
@@ -293,3 +213,93 @@
  border-radius: 4px;
  border: 2px solid transparent;
 }
+
+.breadcrumb__popper{
+  top: 96px !important;
+  width: 180px !important;
+  min-width: 180px;
+  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;
+    list-style: none;
+    padding:4px 0px;
+    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;
+      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;
+    }
+  }
+}
+
+.search-input{
+  width:100%;
+  padding: 4px 4px 0px 4px;
+  .el-input__wrapper {
+    border: 1px solid #C5C5C5;
+    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+  }
+  .el-input__inner{
+    //padding:0px 4px;
+    //background: #FFFFFF;
+    //border: 1px solid #C5C5C5;
+    //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+    border-radius: 2px;
+    font-size: 12px;
+    /*color: rgba(87,87,87,0.60);*/
+    letter-spacing: 0;
+    font-weight: 400;
+    margin-left: -7px;
+  }
+}
+.breadcrumb-button{
+  align-items: center;
+  width: 100%;
+  height: 24px;
+  justify-content: center;
+  line-height: 24px;
+  padding: 0px 6px;
+  span {
+    margin-right: 6px;
+  }
+}
+.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);
+  border-radius: 2px;
+}
--- a/src/assets/css/components/components/rightBox/report/reportBox.scss
+++ b/src/assets/css/components/components/rightBox/report/reportBox.scss
@@ -121,3 +121,6 @@
    }
  }
 }
+.my-form-item .el-form-item__content {
+  display: block !important;
+}
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -86,9 +86,12 @@
  width:28px !important;
  height:28px !important;
  padding:unset !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  i {
    font-size: 14px;
-    color: #575757;
+    color: $--text-color-2;
    margin-right:unset !important;
  }
 }
--- a/src/assets/css/components/views/charts2/dnsEventChart.scss
+++ b/src/assets/css/components/views/charts2/dnsEventChart.scss
@@ -1,7 +1,7 @@
 .dns-event-chart {
  width: 100%;
  height: 100%;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -1,7 +1,7 @@
 .el-popper.analysis-popper {
-  top: -5px !important;
+  margin-top: -5px !important;
  padding: 0;
-  border: 1px solid #C5C5C5;
+  border: 1px solid #C5C5C5 !important;
  border-radius: 4px;
  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);

--- a/src/assets/css/components/views/charts2/entityDetailLine.scss
+++ b/src/assets/css/components/views/charts2/entityDetailLine.scss
@@ -8,7 +8,7 @@
      align-items: center;

      & > .el-select {
-        width: 162px;
+        width: 162px !important;
        margin-right: 10px;

        .select-prefix {
@@ -34,15 +34,23 @@
    .line-select-metric {
      margin-right: 20px;

-      .el-input__inner {
+      .el-select__wrapper {
        width: 127px;
        height: 24px;
        line-height: 24px;
+        min-height: 24px !important;
        padding-left: 4px;
        font-size: 12px;
-        color: #2C72C6;
        font-weight: 400;
        border-radius: 2px;
+        .el-select__placeholder {
+          color: #2C72C6 !important;
+          margin-left: 1px;
+        }
+        .el-select__suffix {
+          margin-right: -2px;
+          margin-top: 2px;
+        }
      }
    }

--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -7,7 +7,7 @@

    .network-overview-apps-title {
      font-size: 14px;
-      color: #353636;
+      color: $--text-color-1;
      font-weight: 600;
      display: flex;
      align-items: flex-end;
@@ -20,7 +20,7 @@

      &>span {
        font-size: 12px;
-        color: #575757;
+        color: $--text-color-2;
        font-weight: 400;
        margin-right: 3px;
      }
@@ -45,7 +45,7 @@
            .el-select__caret {
              line-height: 24px;
              width: 16px;
-              color: #575757;
+              color: $--text-color-2;
            }
          }
        }
@@ -62,14 +62,14 @@
    padding-top: 10px;

    .app-card {
-      border: 1px solid #E2E5EC;
+      border: 1px solid $--border-color;
      border-radius: 4px;
      display: flex;
      height: 100px;
      flex-direction: column;

      &.app-card--create {
-        background-color: #F7F7F7;
+        background-color: $--block-bg-color-1;
        justify-content: center;
        align-items: center;

@@ -81,7 +81,7 @@
        }
        span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          cursor: pointer;
        }
      }
@@ -119,12 +119,12 @@
            border-radius: 2px;
            font-size: 12px;
            padding-left: 6.8px;
-            color: #353636;
+            color: $--text-color-1;
            font-weight: 400;
            i {
              margin-right: 5.67px;
              font-size: 12px;
-              color: #575757;
+              color: $--text-color-2;
            }
          }
          .app-card-title-more-delete:hover {
@@ -155,7 +155,7 @@
          display: flex;
          .app-card__body-content-number {
            font-size: 14px;
-            color: #353636;
+            color: $--text-color-1;
            font-weight: 700;
            margin-right: 6px;
          }
@@ -171,7 +171,7 @@
          justify-content: center;
          position: relative;
          top: 50%;
-          color: #717171;
+          color: $--text-color-3;
          margin-top: -10px;
          background-color: rgba(113, 113, 113, 0.12);
        }
@@ -188,12 +188,12 @@
        margin-top: -2px;
        margin-bottom: 2px;
        font-size: 12px;
-        color: #778391;
+        color: $--text-color-3;
      }
      .app-card__body-previous {
        display: flex;
        font-size: 12px;
-        color: #353636;
+        color: $--text-color-1;
        font-weight: 400;
        div:nth-of-type(1) {
          margin-right: 5px;
@@ -207,6 +207,10 @@
  .add-app-drawer {
    height: 526px !important;

+    .el-drawer__body {
+      padding: 0 !important;
+    }
+
    .add-app {
      display: flex;
      flex-direction: column;
@@ -216,14 +220,14 @@
        display: flex;
        justify-content: space-between;
        height: 46px;
-        background-color: white;
+        background-color: $--select-bg-color-1;

        .header__title {
          padding-left: 20px;
          font-size: 16px;
          font-weight: bold;
          line-height: 46px;
-          color: #353636;
+          color: $--text-color-1;
        }
        .header__operations {
          display: flex;
@@ -261,6 +265,12 @@
          flex: 1;
          position: relative;
        }
+        .el-tabs__item {
+          display: inline-block;
+        }
+        .el-tabs__item:hover {
+          color: #046eca;
+        }
        .el-tabs__item.is-top {
          height: 50px;
          line-height: 60px;
@@ -280,18 +290,25 @@
          right: 28px;
          top: 11px;
          width: 280px;
-          .el-input.el-input--mini {
-            .el-input__inner {
-              background: #FFFFFF;
-              border: 1px solid #DEDEDE;
-              box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-              border-radius: 14px;
+          .el-input__wrapper {
+            border-radius: 14px;
+            font-size: 12px;
+            .el-input.el-input--mini {
+              .el-input__inner {
+                font-size: 12px !important;
+                //background: #FFFFFF;
+                //border: 1px solid #DEDEDE;
+                //box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                //border-radius: 14px;
+              }
            }
-            &.el-input--prefix {
+            .el-input__prefix-inner {
              i {
-                color: #575757;
+                color: $--text-color-2;
                font-size: 16px;
                font-weight: 600;
+                margin-left: -2px;
+                margin-right: 6px
              }
            }
          }
@@ -350,7 +367,7 @@
                .body__app-left-title {
                  font-family: Helvetica-Bold;
                  font-size: 16px;
-                  color: #353636;
+                  color: $--text-color-1;
                  font-weight: 700;
                  margin-bottom: 6px;
                }
@@ -375,7 +392,7 @@
            }
            .body__app-value {
              font-size: 12px;
-              color: #717171;
+              color: $--text-color-3;
              line-height: 18px;
              font-weight: 400;
              max-height: 54px;
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
@@ -1,11 +1,11 @@
 .ddos-detection {
  height: 100%;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  background: rgba(113,113,113,0.06);
  .ddos-detection-title {
    font-size: 14px;
-    color: #353636;
+    color: $--text-color-1;
    font-weight: 600;
    margin-top: 15px;
    i {
@@ -34,7 +34,7 @@
        flex-direction: column;
        .ddos-detection-type-value-name {
          font-size: 12px;
-          color: #575757;
+          color: $--text-color-2;
          line-height: 12px;
          font-weight: 400;
          margin-bottom: 12px;
@@ -53,23 +53,27 @@
    .el-button {
      margin-right: 20px;
      width: 117px;
+      height: 29.6px;
      min-height: 28px;
-      background: #FBFBFB;
-      border: 1px solid #C5C5C5;
+      background: $--button-color-1;
+      border: 1px solid $--border-color-1;
      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
      border-radius: 4px;
      padding: 8px 5px;
      span {
        font-size: 12px;
-        color: #575757;
+        color: $--text-color-2;
        font-weight: 500;
        i {
-          transform: rotate(-90deg);
-          color: #575757;
+          //transform: rotate(-90deg);
+          color: $--text-color-2;
          font-size: 12px;
          margin-left: 4px;
        }
      }
+      &:hover {
+        background: $--button-bg-color-1 !important;
+      }
    }
  }
 }
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -2,7 +2,7 @@
  height: 100%;
  width: 100%;
  position: relative;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  .chart-drawing {
    height: 100%;
@@ -35,6 +35,10 @@
      display: flex;
      //flex: 1;
      .line-select__operation {
+        .el-select__wrapper {
+          height: 24px !important;
+          min-height: 24px !important;
+        }
        .el-input__inner {
          width: 100px;
        }
@@ -42,6 +46,10 @@
      .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;
          }
@@ -54,17 +62,36 @@
        display: flex;
        align-items: center;
        .line-select__operation {
+          min-width: 127px;
          height: 24px;
          margin-left: 3px;
          box-shadow: none;
          border-radius: 2px;
-          .el-input__inner {
-            padding-left: 4px;
-            line-height: 24px;
+          .el-select__wrapper {
+            min-height: 24px !important;
+            //padding-left: 4px;
+            line-height: 24px !important;
            height: 24px;
            font-size: 12px;
-            color: #2C72C6;
+            color: $--text-color-6;
            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;
@@ -111,14 +138,14 @@
            .line-value-unit-number {
              font-family: Helvetica-Bold;
              font-size: 28px;
-              color: #353636;
+              color: $--text-color-1;
              margin-right: 4px;
            }
            .line-value-unit-number2 {
              font-size: 0;
              span {
                font-size: 12px;
-                color: #575757;
+                color: $--text-color-2;
                font-weight: 400;
              }
            }
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
@@ -1,12 +1,12 @@
 .performance-event {
  height: 100%;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  background: rgba(113,113,113,0.06);
  .performance-event-title {
    margin-top: 15px;
    font-size: 14px;
-    color: #353636;
+    color: $--text-color-1;
    font-weight: 600;
    line-height: 1;
    i {
@@ -24,7 +24,7 @@
      height: 1px;
      width: calc(100% - 40px);
      margin: auto;
-      background: #E2E5EC;
+      background: $--border-color;
    }
    .performance-event-pie {
      position: relative;
@@ -38,26 +38,30 @@
  }
  .pie-button.el-button {
    width: 96px;
+    height: 29.6px;
  }
  .el-button {
    width: 117px;
    min-height: 28px;
-    background: #FBFBFB;
-    border: 1px solid #C5C5C5;
+    background: $--button-color-1;
+    border: 1px solid $--border-color-1;
    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
    border-radius: 4px;
    padding: 8px 5px;
    margin-left: 30px;
    span {
      font-size: 12px;
-      color: #575757;
+      color: $--text-color-2;
      font-weight: 500;
      i {
-        transform: rotate(-90deg);
-        color: #575757;
+        //transform: rotate(-90deg);
+        color: $--text-color-2;
        font-size: 12px;
        margin-left: 4px;
      }
    }
+    &:hover {
+      background: $--button-bg-color-1 !important;
+    }
  }
 }
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -52,11 +52,11 @@
        display:flex;
        flex-direction:column;
        align-items: flex-start;
-        color: #778391;
+        color: $--text-color-3;
        font-weight: 400;
        .data-column__span {
          font-weight: bold;
-          color:#353636;
+          color: $--text-color-1;
        }
        .unit__span {
          color: #778391;
@@ -120,9 +120,9 @@
        }
      }
      .tab-table__average {
-        border: 1px solid #E2E5EC;
+        border: 1px solid $--border-color;
        border-radius: 4px 4px 0 0;
-        padding: 1px;
+        //padding: 1px;
        .data-click:hover{
          cursor: pointer;
        }
@@ -185,7 +185,7 @@
        height: 0px;
      }
      .el-table thead {
-        color: $grey;
+        color: $--text-color-1;
      }
      .el-table__empty-text{
        line-height:20px !important;
@@ -196,6 +196,7 @@
        justify-content: center;
        align-items: flex-start;
        line-height:18px;
+        padding: 1px 10px 0 11px !important;
        .caret-wrapper {
          margin-top:3px;
        }
@@ -226,6 +227,13 @@
          background: #749F4D;
        }
      }
+      .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;
@@ -243,8 +251,8 @@
      }
      .el-tabs__item {
        padding: 0 10px;
-        height: 33px;
-        color: $grey;
+        height: 40px;
+        color: $--text-color-1;
        font-size: 14px;

        &.el-tabs__item.is-top.is-active {
@@ -338,8 +346,153 @@
    }
  }
 }
+.customize-tab__popper{
+  max-height:405px;/*calc(100% - 136px);*/
+  overflow:hidden;
+  padding: 0px !important;
+  background: #FFFFFF;
+  /*border: 1px solid #C5C5C5;*/
+  border:1px solid #C5C5C5 !important;
+  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+  border-radius: 2px !important;
+  .el-popper {
+    max-height: 405px;
+  }
+  .el-tabs__header{
+    font-size: 12px;
+    color:green !important;
+    font-weight: 500;
+    margin: 0px ;
+    border-bottom: 1px solid #E2E5EC;
+    height: 30px !important;
+  }
+  .el-tabs__content {
+    max-height: 358px !important;
+    margin:8px 0 6px 0;
+  }
+  .el-tabs__nav{
+    width:100%;
+  }
+  .el-tabs__nav-wrap {
+    margin-bottom: 0px !important;
+  }
+  .el-tabs__item{
+    width:50%;
+    text-align:center;
+    padding:0px;
+    height:30px;
+    line-height: 30px;
+    font-size: 12px;
+    color: #353636;
+    font-weight: 500;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+    border-top: 3px solid #38ACD2;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
+    border-radius: 2.5px 0 0 0;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
+    border-radius: 0 2.5px 0 0 ;
+    border-left: 1px #E2E5EC solid !important;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item{
+    border-bottom: 0px ;
+    border-top: 3px solid white;
+    color: #353636;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__nav {
+    border:0px ;
+  }
+
+  .list {
+    list-style: none;
+    padding-inline-start: 0px !important;
+    /*height:375px;*/
+    max-height: 358px !important;
+    overflow:auto;
+    margin:0 0;
+    .drag-move {
+      transition: transform 0.3s;
+    }
+
+    .list-item:last-child {
+      margin-bottom: 6px;
+    }
+    .list-item {
+      width:100%;
+      color: #575757;
+      margin-bottom: 0px;
+      height: 24px;
+      line-height: 24px;
+      text-align: left;
+      font-weight:400;
+      font-size:12px;
+
+      .icon-drag{
+        cursor: move;
+        margin-left:6px;
+        margin-right:3px;
+      }
+
+      .el-checkbox__input.is-checked .el-checkbox__inner {
+        width: 14px;
+        height: 14px;
+        background-color: #38ACD2;
+        border-color: #38ACD2;
+        border-radius: 2px;
+      }
+      .el-checkbox__input .el-checkbox__inner {
+        width: 14px;
+        height: 14px;
+        background-color: #F2F7F9;
+        border: 1px solid rgba(0,0,0,0.15);
+        border-radius: 2px;
+      }
+      .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
+        font-size: 12px;
+        color: #575757;
+        font-weight: 400;
+      }
+    }
+  }
+  /*top:0px !important;
+  right:200px !important;
+  transform: translateY(126px) !important;*/
+}
+.fixed-row {
+  display:flex;
+  justify-content: flex-start;
+  align-items: center;
+  //background: white;
+  background: var(--el-bg-color);
+  width: 100%;
+  height:40px;
+  border:solid 1px $--border-color;
+  //border: 1px solid var(var(--el-border-color-lighter));
+  padding-left:10px !important;
+  text-align: left;
+  border-radius:0 0 4px 4px;
+  color:#046eca;
+  .fixed-button {
+    display:flex;
+    justify-content: center;
+    padding:7px 10px;
+    align-items: center;
+    height: 30px;
+  }
+  .fixed-button:hover {
+    cursor:pointer;
+    background: #e6f4ff;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 4px;
+  }
+}
+.btn-up{
+  margin-top:40px;
+}
 .tab-search__popper{
-  top: -7px !important;
+  margin-top: -7px;
  width:auto !important;
  max-height:206px;
  overflow:hidden;
@@ -352,10 +505,10 @@
    width:100%;
    padding: 4px 4px 0px 4px;
    .el-input__inner{
-      padding:0px 4px;
-      background: #FFFFFF;
-      border: 1px solid #C5C5C5;
-      box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+      //padding:0px 4px;
+      //background: #FFFFFF;
+      //border: 1px solid #C5C5C5;
+      //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
      border-radius: 2px;
      font-size: 12px;
      /*color: rgba(87,87,87,0.60);*/
@@ -403,140 +556,3 @@
    }
  }
 }
-.customize-tab__popper{
-  max-height:405px;/*calc(100% - 136px);*/
-  overflow:hidden;
-  padding: 0px !important;
-  background: #FFFFFF;
-  /*border: 1px solid #C5C5C5;*/
-  border:1px solid #C5C5C5 !important;
-  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
-  border-radius: 2px !important;
-  .el-popper {
-    max-height: 405px;
-  }
-  .el-tabs__header{
-    font-size: 12px;
-    color:green !important;
-    font-weight: 500;
-    margin: 0px ;
-    border-bottom: 1px solid #E2E5EC;
-  }
-  .el-tabs__content {
-    max-height: 358px !important;
-    margin:8px 0 6px 0;
-  }
-  .el-tabs__nav{
-    width:100%;
-  }
-  .el-tabs__nav-wrap {
-    margin-bottom: 0px !important;
-  }
-  .el-tabs__item{
-    width:50%;
-    text-align:center;
-    padding:0px;
-    height:30px;
-    line-height: 30px;
-    font-size: 12px;
-    color: #353636;
-    font-weight: 500;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
-    border-top: 3px solid #38ACD2;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
-    border-radius: 2.5px 0 0 0;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
-    border-radius: 0 2.5px 0 0 ;
-    border-left: 1px #E2E5EC solid !important;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item{
-    border-bottom: 0px ;
-    border-top: 3px solid white;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__nav {
-    border:0px ;
-  }
-
-  .list {
-    list-style: none;
-    padding-inline-start: 0px !important;
-    /*height:375px;*/
-    max-height: 358px !important;
-    overflow:auto;
-    margin:0 0;
-    .drag-move {
-      transition: transform 0.3s;
-    }
-
-    .list-item:last-child {
-      margin-bottom: 6px;
-    }
-    .list-item {
-      width:100%;
-      color: #575757;
-      margin-bottom: 0px;
-      height: 24px;
-      line-height: 24px;
-      text-align: left;
-      font-weight:400;
-      font-size:12px;
-
-      .icon-drag{
-        cursor: move;
-        margin-left:6px;
-        margin-right:3px;
-      }
-
-      .el-checkbox__input.is-checked .el-checkbox__inner {
-        background-color: #38ACD2;
-        border-color: #38ACD2;
-        border-radius: 2px;
-      }
-      .el-checkbox__input .el-checkbox__inner {
-        background-color: #F2F7F9;
-        border: 1px solid rgba(0,0,0,0.15);
-        border-radius: 2px;
-      }
-      .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
-        font-size: 12px;
-        color: #575757;
-        font-weight: 400;
-      }
-    }
-  }
-  /*top:0px !important;
-  right:200px !important;
-  transform: translateY(126px) !important;*/
-}
-.fixed-row {
-  display:flex;
-  justify-content: flex-start;
-  align-items: center;
-  background: white;
-  width: 100%;
-  height:40px;
-  border:solid 1px #E2E5EC;
-  padding-left:10px !important;
-  text-align: left;
-  border-radius:0 0 4px 4px;
-  color:#046eca;
-  .fixed-button {
-    display:flex;
-    justify-content: center;
-    padding:7px 10px;
-    align-items: center;
-    height: 30px;
-  }
-  .fixed-button:hover {
-    cursor:pointer;
-    background: #e6f4ff;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-    border-radius: 4px;
-  }
-}
-.btn-up{
-  margin-top:40px;
-}
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -73,11 +73,14 @@
        padding: 5px 0;
        .data-column__span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          font-weight: 600;
        }
      }
    }
+    .el-table__cell {
+      padding: 13px 0;
+    }
    .el-table__header-wrapper .el-table__header {
      tr th:nth-last-child(-n+3) {
        text-align: center;
@@ -86,7 +89,7 @@
    .el-table__body-wrapper.is-scrolling-none {
      height: 306px !important;
      tr td {
-        padding: 13px 0;
+        padding: 13px 0 !important;
      }
      tr td:nth-last-child(-n+3) {
        text-align: center;
@@ -99,6 +102,7 @@
  .data-total {
    display: flex !important;
    .data-total-category-icon {
+      margin-left: -2px;
      i {
        font-size: 16px;
        margin-right: 12px;
@@ -120,6 +124,7 @@
      width: 34px;
      line-height: 20px;
      text-align: center;
+      margin-left: -2px;
    }
    .data-score.data-score-red {
      background: #E26154;
@@ -133,6 +138,7 @@
    .data-score-no-data {
      width: 34px;
      text-align: center;
+      margin-left: -2px;
    }
  }
  .data-total-value {
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -47,7 +47,7 @@
        padding: 4px 0;
        .data-column__span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          font-weight: 600;
        }
      }
@@ -116,4 +116,7 @@
    left: 0;
    top: 32px;
  }
+  .el-table .cell {
+    padding: 0 10px !important;
+  }
 }
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -24,12 +24,29 @@
    position: absolute;
    right: 10px;
    top: 10px;
+    display: inline-block;
+
+    .el-select__wrapper {
+      font-size: 12px;
+      padding: 0;
+    }
    .el-select__popper.map-select-down {
      top: 32px !important;
      .el-popper__arrow {
        display: none;
      }
    }
+    .el-select__placeholder {
+      padding-left: 16px;
+      color: #2c72c6;
+    }
+    .el-select__prefix {
+      padding-left: 5px;
+    }
+    .el-select__suffix {
+      padding-right: 10px;
+      padding-bottom: 2px;
+    }
    .map-select {
      margin-left: 10px;

@@ -40,6 +57,19 @@
        width: 110px;
      }
    }
+    .map-select__location {
+      &.el-select {
+        width: 222px;
+      }
+      .el-select__wrapper {
+        min-height: 28px;
+        height: 28px;
+        .el-select__placeholder {
+          padding-left: 4px;
+          color: #c0c4cc;
+        }
+      }
+    }
  }
  .map-legend {
    display: flex;
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -20,12 +20,36 @@
    border: 1px solid #E2E5EC;
    border-radius: 4px;
    padding: 1px;
+
+    .el-scrollbar__thumb {
+      background: rgba(0,0,0,0);
+      //width: calc(100% - 200px) !important;
+    }
+    .el-table__empty-block {
+      width: calc(100% - 2px) !important;
+    }
+    .el-table__empty-text {
+      line-height: 25px !important;
+      .table-no-data {
+        //margin-left: -2px !important;
+        .icon {
+          width: 30px;
+          height: 30px;
+          margin-left: 1px;
+        }
+        .table-no-data__title {
+          font-size: 14px;
+          color: #575757;
+          font-weight: 400;
+        }
+      }
+    }
    .el-table__header-wrapper {
      tr th {
        padding: 4px 0;
        .data-column__span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          font-weight: 600;
        }
      }
@@ -34,20 +58,6 @@
      tr td {
        padding: 6.75px 0;
      }
-      .el-table__empty-block .el-table__empty-text {
-        line-height: 25px;
-        .table-no-data {
-          .icon {
-            width: 30px;
-            height: 30px;
-          }
-          .table-no-data__title {
-            font-size: 14px;
-            color: #575757;
-            font-weight: 400;
-          }
-        }
-      }
    }
  }
  .data-recent-table {
@@ -106,4 +116,7 @@
  .el-table--group::after,.el-table--border::after, .el-table::before {
    height: 0px;
  }
+  .el-table .cell {
+    padding: 0 10px !important;
+  }
 }
--- a/src/assets/css/components/views/charts2/npmTabs.scss
+++ b/src/assets/css/components/views/charts2/npmTabs.scss
@@ -18,6 +18,7 @@

    &>.el-tabs__header {
      background-color: white;
+      //background-color: #f00;
      border-color: #E2E5EC;

      .el-tabs__nav-wrap {
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -22,17 +22,37 @@
      }
      .line-select__operation {
        height: 24px;
+        min-height: 24px;
        margin-left: 3px;
        box-shadow: none;
        border-radius: 2px;
-        .el-input__inner {
+        .el-select__wrapper {
          width: 225px;
-          height: 24px;
+          height: 24px !important;
+          min-height: 24px !important;
          padding-left: 4px;
          line-height: 24px;
          font-size: 12px;
-          color: #2C72C6;
          font-weight: 400;
+          .el-select__placeholder {
+            color: #2C72C6;
+            margin-left: 1px;
+          }
+          .el-input__inner {
+            width: 225px;
+            height: 24px;
+            padding-left: 4px;
+            line-height: 24px;
+            font-size: 12px;
+            color: #2C72C6;
+            font-weight: 400;
+          }
+          .el-select__suffix {
+            margin-right: -7px;
+            i {
+              color: #575757 !important;
+            }
+          }
        }
        .el-input__suffix {
          display: flex;
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -21,7 +21,8 @@
      font-size: 24px;
      line-height: 24px;
      font-weight: 900;
-      color: #353636;
+      //color: #353636;
+      color: $--text-color-1;
      display:flex;
      .score {
        .circle-icon {
@@ -76,7 +77,7 @@
      display: flex;

      &>.el-select {
-        width: 162px;
+        width: 162px !important;
        margin-right: 10px;

        .select-prefix {
@@ -96,6 +97,22 @@
      .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;
+          }
+        }
+      }
    }
  }
  .chart-list {
--- a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
@@ -1,6 +1,17 @@
 .form-setting__block {
  width: 620px;

+  &.el-form-item {
+    margin-bottom: 20px;
+    margin-top: -4px;
+  }
+  .el-select__wrapper, .el-input__wrapper {
+    min-height: 24px !important;
+    height: 24px !important;
+  }
+  .el-switch__label.is-active {
+    color: $--text-color-1;
+  }
  .el-form-item__label {
    height: 14px;
    line-height: 14px;
--- a/src/assets/css/components/views/detections/detection-create/detection-form.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form.scss
@@ -135,6 +135,16 @@
        .el-collapse-item__content {
          padding-bottom: 0 !important;
        }
+        .el-input__wrapper, .el-select__wrapper {
+          height: 24px !important;
+          line-height: 24px !important;
+          min-height: 24px !important;
+          width: 112px;
+          margin: 0 12px;
+        }
+        .el-input__inner {
+          padding: 0 15px !important;
+        }
      }
    }

--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -130,7 +130,10 @@
 }
 .new-detection-filter-content {
  padding: 20px;
-
+  .el-checkbox {
+    display: inline-block !important;
+    height: auto !important;
+  }
  .new-filter-content-title {
    font-family: NotoSansHans-Medium;
    font-size: 14px;
@@ -145,11 +148,12 @@

    .new-filter-content-checkbox {
      line-height: 16px;
-      margin-bottom: 10px;
+      margin-bottom: 13.6px;
      font-family: NotoSansSChineseRegular;
      font-size: 14px;
      color: #353636;
      font-weight: 400;
+      display: flex !important;

      .el-checkbox__inner {
        width: 16px !important;
@@ -185,6 +189,7 @@
        font-size: 14px;
        color: #353636;
        font-weight: 400;
+        padding-left: 10px !important;
      }
    }
  }
--- a/src/assets/css/components/views/detections/detection-table.scss
+++ b/src/assets/css/components/views/detections/detection-table.scss
@@ -1,4 +1,10 @@
 .detection-table {
+  .el-table td, .el-table th {
+    padding: 12px 0;
+  }
+  .el-table .el-table__cell.is-center {
+    padding-top: 4px;
+  }
  .el-table th > .cell, .el-table .cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -90,6 +90,8 @@
    font-size: 14px;
    color: #353636;
    font-weight: 400;
+    height: 20.8px;
+    line-height: 20.8px;

    .entity-hide-entity {
      margin-left: 20px;
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -64,6 +64,7 @@
          i {
            color: #23BF9A;
            margin-right: 4px;
+            margin-top: 2px;
          }
        }

--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -161,6 +161,9 @@
              padding-left: 18px;
            }
          }
+          .el-scrollbar__bar {
+            visibility: hidden;
+          }
        }
        .clear-all {
          padding-left: 18px;
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -27,18 +27,20 @@ $--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语

 /* 主题 */

-.theme-light {
-  $--theme: light;
-  @import './themes/theme-light.scss'; // 加载主题变量
-  @import './themes/src/index.scss'; // 加载ele样式
-  @import './components/index'; // 加载cn组件样式
-  @import './common/index.scss'; // 加载通用样式
-}
+$--color-text-primary: #303133 !default;
+$--border-color: #E2E5EC;

-.theme-dark {
+@import './themes/theme-light.scss'; // 加载主题变量
+@import './components/index'; // 加载cn组件样式
+@import './common/index.scss'; // 加载通用样式
+@import "common/cover-element-plus"; // 覆盖新版elemen-plus样式
+
+.dark {
  $--theme: dark;
  @import './themes/theme-dark.scss'; // 加载主题变量
-  @import './themes/src/index.scss'; // 加载ele样式
  @import './components/index'; // 加载cn组件样式
  @import './common/index.scss'; // 加载通用样式
+  .fixed-button:hover {
+    background: #40474b !important;
+  }
 }
--- a/src/assets/css/themes/THEME_README.md
+++ b/src/assets/css/themes/THEME_README.md
@@ -11,3 +11,21 @@
 - theme-chalk/src/mixins/mixins.scss 改动较多，如需了解请比对文件差异
 -   // $arrow-selector: #{& + '__arrow'};   
    改为 $arrow-selector: '.el-popper__arrow';
+
+### 20240118element-plus升级
+#### 变动事项
+
+- elemen-plus由1.0.2-beta.71升级至2.5.1，旧版本是将element-plus源文件放到theme/src中进行部分修改使用，现在启用该方法，直接使用element-plus组件，部分组件有差异改动，对比界面进行调整并记录在xxx.scss
+- 弃用之前的主题写法，改为官网的主题切换方法。删除body上的class，在html上添加class="dark"。默认明亮主题light，暗黑主题dark，默认引入theme-light.scss样式文件，暗黑主题theme-dark.scss样式文件
+- 如需添加暗黑样式，先在theme-light.scss添加唯一样式名，再到theme-dark中添加同名样式。如在light中添加字体颜色$--text-color-1: #353636;，则需要在dark中添加$--text-color-1: #d8d8d8;
+- header.vue的第四级面包屑导航栏，以及NetworkOverviewTabs.vue第一列搜索的popover。原结构的popover被上一层div包裹，但在html中解析成两个div，原来的popper-class需要提出来，不要在原div的class下，否则样式错乱
+
+#### 新旧组件差异
+
+- table表格：自定义单元格样式cell-style。老版cell-style接受格式为string/object，新版疑似仅接受object，string格式会报错。表头格式header-cell-style同理。
+- input输入框1：老版el-input是包含class为el-input__inner的input，新版el-input在此基础上被class="el-input__wrapper"的div包裹。在老版的el-input__inner改动的样式，需要在el-input__wrapper上修改
+- input输入框2：老版给input添加icon，是给属性prefix-icon添加icon名。新版是在prefix插槽里添加icon标签
+- icon图标：老版使用：<i class="el-icon-search" />。新版则是svg文件，需要单独引入封装成component的格式，使用时：<el-icon><Search /></el-icon>
+- select选择器：新版被el-select__wrapper的div包裹，与旧版顺序不同。
+- * input和select的右侧图标和maxlength间距新版比旧版略大
+* 
--- a/src/assets/css/themes/src/table-column.scss
+++ b/src/assets/css/themes/src/table-column.scss
@@ -94,4 +94,4 @@
      margin-bottom: 0;
    }
  }
-}
+}
--- a/src/assets/css/themes/theme-dark.scss
+++ b/src/assets/css/themes/theme-dark.scss
@@ -60,3 +60,23 @@ $--border-color-light: #E7EAED;
 $--chart-box-border-color: $--border-color-light;
 $--chart-title-hover-background-color: #323238;
@import './common';
+
+
+$--border-color: #363637;
+$--text-color-1: #d8d8d8;
+$--text-color-2: #afafaf;
+$--text-color-3: #a4adb7;
+$--text-color-4: #BEBEBE;
+$--text-color-5: #D8D8D8;
+$--text-color-6: #2764ad;
+
+$--button-color-1: #1D1D1D;
+$--button-bg-color-1: #303030;
+$--border-color-1: var(--el-text-color-disabled);
+$--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;
--- a/src/assets/css/themes/theme-light.scss
+++ b/src/assets/css/themes/theme-light.scss
@@ -61,3 +61,22 @@ $--border-color-light: #E7EAED;
 $--chart-box-border-color: $--border-color-light;
 $--chart-title-hover-background-color: $--background-color-1;
@import './common';
+
+$--text-color-1: #353636;
+$--text-color-2: #575757;
+$--text-color-3: #778391;
+$--text-color-4: #666666;
+$--text-color-5: #333333;
+$--text-color-6: #2C72C6;
+
+$--button-color-1: #FBFBFB;
+$--button-bg-color-1: #EBF1F4;
+$--border-color-1: #C5C5C5;
+$--border-color-2: #E2E5EC;
+$--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;
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -7,9 +7,13 @@
    >
      <template v-if="meta.meta === condition">
        <!-- 删除按钮 -->
-        <div class="condition__delete" @click="removeCondition(index)"><i class="el-icon-error"></i></div>
+        <div class="condition__delete" @click="removeCondition(index)">
+          <el-icon><CircleCloseFilled /></el-icon>
+          <!--<i class="el-icon-error"></i>-->
+        </div>
        <!-- 字段选择 -->
        <div v-if="meta.column.show" class="condition__column">
+<!--          <div>-->
          <div v-show="meta.column.isEditing">
            <el-select
                allow-create
@@ -155,10 +159,12 @@
        </el-popover>
      </span>
      <span v-show="metaList.length>0" class="search__suffix search__suffix-close" @click="cleanMetaList">
-        <i class="el-icon-error"></i>
+        <el-icon><CircleCloseFilled /></el-icon>
+        <!--<i class="el-icon-error"></i>-->
      </span>
      <span test-id="tag-search" class="search__suffix" @click="search">
-        <i class="el-icon-search"></i>
+        <el-icon><Search /></el-icon>
+        <!--<i class="el-icon-search"></i>-->
      </span>
    </div>
  </div>
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -11,7 +11,7 @@
        <el-popover
            popper-class="my-popper-class"
            placement="top"
-            trigger="hover"
+            trigger="click"
            :content="$t('overall.switchToTag')"
        >
          <template #reference>
@@ -21,11 +21,13 @@
      </span>
      <!--删除图标-->
      <span v-show="isCloseIcon" class="search__suffix search__suffix-close" @click="cleanParams">
-        <i class="el-icon-error"></i>
+        <el-icon><CircleCloseFilled /></el-icon>
+        <!--<i class="el-icon-error"></i>-->
      </span>
      <!--搜索图标-->
      <span class="search__suffix" test-id="text-search" @click.stop="search">
-        <i class="el-icon-search"></i>
+        <el-icon><Search /></el-icon>
+        <!--<i class="el-icon-search"></i>-->
      </span>
    </div>

--- a/src/components/common/popBox/TopToolMoreOptions.vue
+++ b/src/components/common/popBox/TopToolMoreOptions.vue
@@ -29,7 +29,7 @@
                     action=""
                     class="upload-demo"
                     drag>
-            <i class="el-icon-upload"></i>
+            <el-icon><UploadFilled /></el-icon>
            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
            <template #tip>
              <div class="el-upload__tip" >
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -35,6 +35,12 @@
              <el-dropdown-item>
                <div id="header-to-logout" @click="logout">{{ $t('overall.logout') }}</div>
              </el-dropdown-item>
+              <el-dropdown-item>
+                <div id="header-to-theme" @click="switchTheme">
+                  <span>暗黑模式</span>
+                  <el-switch v-model="isDark" size="large" class="mt-2" style="margin-left: 24px" inline-prompt />
+                </div>
+              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
@@ -46,8 +52,9 @@
        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item.value}`" :title="index===3?item.value:''"
                            v-for="(item,index) in breadcrumb" :key="item.value">
          <template v-if="index===3" >
-            <div class="header__left-breadcrumb-item-select" >
+            <div class="header__left-breadcrumb-item-select" style="position: relative">
              <el-popover placement="bottom-start"
+                          style="position: absolute"
                          ref="breadcrumbPopover"
                          :show-arrow="false"
                          :append-to-body="false"
@@ -222,6 +229,7 @@ import {
 import { getNowTime, getSecond } from '@/utils/date-util'
 import _ from 'lodash'
 import { useRoute } from 'vue-router'
+import { useDark, useToggle } from '@vueuse/core'

 export default {
  name: 'Header',
@@ -307,7 +315,8 @@ export default {
      wholeScreenRouterMapping,
      logo: 'images/logo-header.svg',
      ZH,
-      EN
+      EN,
+      isDark: useDark()
    }
  },
  computed: {
@@ -474,10 +483,16 @@ export default {
      this.showChangePin = true
    },
    logout () {
+      //
      sessionStorage.removeItem(storageKey.tokenExpireCurrentPath)
      localStorage.removeItem(storageKey.token)
      axios.get(api.logout)
    },
+    switchTheme () {
+      useToggle(this.isDark)
+      const theme = this.isDark ? 'light' : 'dark'
+      localStorage.setItem(storageKey.theme, theme)
+    },
    refreshLang () {
      this.language = localStorage.getItem(storageKey.language)
      this.$i18n.locale = this.language
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -18,7 +18,7 @@
            <el-input maxlength="255" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
          </el-form-item>

-          <el-form-item :label="$t('config.roles.permission')">
+          <el-form-item :label="$t('config.roles.permission')" class="my-form-item">
            <!--<div class="tree-option">
              <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
              <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="cn-icon cn-icon-delete"></i></span></button>
@@ -27,8 +27,8 @@
            <el-tree :data="menus" :default-expand-all="expandAllFlag" check-strictly="true" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
              <template #default="{ data }">
              <span>
-                <i v-if="data.type === '1'" class="el-icon-menu"></i>
-                <i v-if="data.type === '2'" class="el-icon-edit"></i>
+                <el-icon v-if="data.type === 1"><Menu /></el-icon>
+                <el-icon v-if="data.type === 2"><Edit /></el-icon>
              </span>
                {{$t(data.i18n)}}
              </template>
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -11,8 +11,9 @@
              <div style="display: flex">
                <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
                <!--                <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
-                <button class="top-tool-btn  top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
-                  <i class="el-icon-search"></i>
+                <button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
+                  <el-icon><Search /></el-icon>
+                  <!--<i class="el-icon-search"></i>-->
                </button>
              </div>
            </div>
--- a/src/components/table/administration/GalaxyProxyTable.vue
+++ b/src/components/table/administration/GalaxyProxyTable.vue
@@ -48,7 +48,7 @@
                <span style="color: #41ABFD">{...}</span>
              </template>
              <div class="highlight-box">
-                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
+                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><el-icon><CopyDocument /></el-icon></span>
                <highlightjs
                    language="json"
                    :code="scope.row[item.prop]"
@@ -70,7 +70,7 @@
                <span style="color: #41ABFD">{...}</span>
              </template>
              <div class="highlight-box">
-                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
+                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><el-icon><CopyDocument /></el-icon></span>
                <highlightjs
                    language="js"
                    :code="scope.row[item.prop]"
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ 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'
@@ -23,6 +24,8 @@ 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()

@@ -51,6 +54,10 @@ app.component('panel-chart-list', PanelChartList)
 app.component('chart-error', Error)
 app.component('Renderer', Renderer)

+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
 app.mount('#app')

 app.config.globalProperties.emitter = emitter
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,7 +13,8 @@ const store = createStore({
      showEntityTypeSelector: false, // 在entity explore页面时，控制header显示实体类型选择框
      from: '', // entity type
      test: 'jest', // 用于单测的demo
-      i18nObj: {} // 存放i18n的值，用于搜索组件切换环境时参数包含其他语言时使用的
+      i18nObj: {}, // 存放i18n的值，用于搜索组件切换环境时参数包含其他语言时使用的
+      theme: 'light'
    }
  },
  getters: {
--- a/src/views/charts/charts/ChartNoData.vue
+++ b/src/views/charts/charts/ChartNoData.vue
@@ -1,8 +1,8 @@
 <template>
  <div v-if="activeTab !== 709 && activeTab !== 710" class="panel-chart__no-data">{{ $t('npm.noData') }}</div>
  <div v-else class="panel-chart__no-data all-clear">
-    <div class="no-recent-alerts">
-      <i class="el-icon-circle-check"></i>
+    <div class="no-recent-alerts" style="align-items: center">
+      <el-icon><CircleCheck /></el-icon>
      <span>{{$t('detection.allClear')}}</span>
    </div>
    <div class="no-detection">{{$t('detection.noDetection')}}</div>
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -111,7 +111,7 @@
            </el-tab-pane>
          </el-tabs>
          <div class="body__searcher">
-            <el-input v-model="searcherApp" @input="searcherAppChange" size="mini" :placeholder="$t('networkOverview.search')" prefix-icon="el-icon-search" test-id="search-input"></el-input>
+            <el-input v-model="searcherApp" @input="searcherAppChange" size="mini" :placeholder="$t('networkOverview.search')" prefix-icon="Search" test-id="search-input"></el-input>
          </div>
          <div class="body__loading"><loading :loading="loading"></loading></div>
        </div>
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -53,7 +53,7 @@
    </div>
    <div style="height: calc(100% - 74px); position: relative">
      <chart-no-data v-if="isNoData && !showError"></chart-no-data>
-      <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
+      <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart" id="overviewLineChart"></div>
    </div>
  </div>
 </template>
@@ -353,7 +353,8 @@ export default {
          if (this.myChart) {
            this.myChart.dispose()
          }
-          this.myChart = echarts.init(this.$refs.overviewLineChart)
+          // this.myChart = echarts.init(this.$refs.overviewLineChart)
+          this.myChart = echarts.init(document.getElementById('overviewLineChart'))
          this.myChart.setOption(this.chartOption)

          this.myChart.dispatchAction({
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -61,14 +61,14 @@
                        <div :ref="`tabSearchRef${tab.prop}`">
                          <div class="tab-search-button" :id="`tabSearchButton${tab.prop}`" v-show="showSearchButton"
                               @click="handlePopoverShow(item.prop,tab.prop)">
-                            <i class="el-icon-search" style="color:#575757;" ></i>
+                            <el-icon style="color:#575757;"><Search /></el-icon>
+                            <!--<i class="el-icon-search" style="color:#575757;" ></i>-->
                          </div>
                          <div class="tab-search-input"  v-show="showSearchInput">
                            <el-input :id="`tabSearchValue${tab.prop}`"
                                      name="tabSearchValue"
                                      size="mini"
                                      readonly
-                                      prefix-icon="cn-icon cn-icon-search"
                                      @click="showListPopover(item.prop)"
                            >
                              <template v-if="curTabProp === 'qtype'">
@@ -1854,20 +1854,18 @@ export default {
      this.activeCustomize = tab.paneName
    },
    tableCellStyle ({ row, column, rowIndex, columnIndex }) {
-      let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;height:39px !important;'
-      if (rowIndex === this.tableData.length - 1) {
-        // style = style + 'border-bottom:0px !important;'
-      }
+      // element-plus 2.5以上版本表头样式支持对象而不是字符串
+      let style = { 'border-right': '0px', 'font-size': '12px', padding: '7px 0 7px 1px !important', 'border-bottom': '1px solid var(--el-table-border-color)', height: '39.54px !important' }
      if (columnIndex === 0) {
-        style = style + 'color:#046ECA;text-align:left;'
+        style = { ...style, color: '#046ECA', 'text-align': 'left' }
      }
      return style
    },
    tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
-        return 'text-align:left;border-right:0px;font-size:12px;font-weight:500;padding:5px 0 !important;border-bottom: 1px solid #E2E5EC;'
+        return { 'text-align': 'left', 'border-right': '0px', 'font-size': '12px', 'font-weight': 500, padding: '5px 0 !important', 'border-bottom': '1px solid var(--el-table-border-color)' }
      } else {
-        return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
+        return { 'border-right': 0, 'font-size': '12px', 'font-weight': 500, padding: '4px 0 !important', 'border-bottom': '1px solid var(--el-table-border-color)' }
      }
    },
    getQueryCondition () {
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -27,7 +27,7 @@
      <template v-for="(item, index) in customTableTitles" :key="index">
        <el-table-column class="data-column">
          <template #header>
-            <span class="data-column__span">{{$t(item.label)}}</span>
+            <span class="data-column__span" style="margin-left: -2px;">{{$t(item.label)}}</span>
          </template>
          <template  #default="scope" :column="item">
            <div class="data-total">
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -13,7 +13,7 @@
              :popper-append-to-body="false"
              @change="metricChange"
          >
-            <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -7,7 +7,7 @@
        <div class="filter__header">{{filter.title}}</div>

        <div class="filter__body" style="position: relative">
-          <loading :loading="loadingLeft" style="top: -5px;"></loading>
+<!--          <loading :loading="false" style="top: -5px;"></loading>-->

          <div class="filter__body-item"
               v-for="(data, i) in filter.data.slice(0, filter.showIndex)"
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -38,7 +38,7 @@
         <div class="no-data detection__event-severity-bar" >{{ $t('npm.noData') }}</div>
      </template>
      <template v-if="!isEventSeverityNoData">
-        <div class="detection__event-severity-bar detection-border"  :id="`eventSeverityTrendBar${pageType}`">
+        <div class="detection__event-severity-bar detection-border"  :id="`eventSeverityTrendBar${pageType}`"  :ref="`eventSeverityTrendBar${pageType}`">
        </div>
      </template>
      <div style="display: flex; flex-grow: 1; height: 100%;">
@@ -322,7 +322,8 @@ export default {
            }
          })

-          const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
+          // const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
+          const chartDom = this.$refs.eventSeverityTrendBarsecurityEvent
          const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)

          const key = changeI18nOfSeverity(data[0].severity)
--- a/src/views/detections/detectionPolicies/PolicyForm.vue
+++ b/src/views/detections/detectionPolicies/PolicyForm.vue
@@ -163,6 +163,7 @@ import { ref } from 'vue'
 import { getDurationsTimeByType, getTimeByDurations } from '@/utils/date-util'
 import Loading from '@/components/common/Loading'
 import { storageKey, detectionUnitList, ZH, EN } from '@/utils/constants'
+import { ElMessageBox } from 'element-plus'

 export default {
  name: 'DetectionForm',
@@ -548,12 +549,12 @@ export default {
      }
    },
    confirmMessage (queryInfo) {
-      this.$confirm(this.$t('tip.leavePage'), {
+      ElMessageBox.confirm(this.$t('tip.leavePage'), {
        confirmButtonText: this.$t('tip.confirm'),
        cancelButtonText: this.$t('overall.cancel'),
        message: this.$t('tip.leavePageTips'),
        title: this.$t('tip.leavePage'),
-        type: 'warning',
+        // type: 'warning',
        iconClass: 'width:0px;height:0px;',
        customClass: 'del-model'
      }).then(() => {
@@ -562,6 +563,20 @@ export default {
          query: queryInfo
        })
      }).catch(() => {})
+      // this.$confirm(this.$t('tip.leavePage'), {
+      //   confirmButtonText: this.$t('tip.confirm'),
+      //   cancelButtonText: this.$t('overall.cancel'),
+      //   message: this.$t('tip.leavePageTips'),
+      //   title: this.$t('tip.leavePage'),
+      //   type: 'warning',
+      //   iconClass: 'width:0px;height:0px;',
+      //   customClass: 'del-model'
+      // }).then(() => {
+      //   this.$router.push({
+      //     path: '/detection/policy',
+      //     query: queryInfo
+      //   })
+      // }).catch(() => {})
    },
    resetEditFlag () {
      this.triggerObj.editFlag = true
--- a/src/views/detections/detectionPolicies/PolicyTools.vue
+++ b/src/views/detections/detectionPolicies/PolicyTools.vue
@@ -42,7 +42,8 @@
            class="top-tool-btn top-tool-btn--search"
            style="border-radius: 0 2px 2px 0 !important;"
            @click="onSearch">
-          <i class="el-icon-search"></i>
+          <el-icon><Search /></el-icon>
+<!--          <i class="el-icon-search"></i>-->
        </button>
      </div>
    </div>
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -41,11 +41,11 @@
        ></explorer-search>

        <div style="display: flex;flex-direction: column;height: calc(100% - 42px);">
-          <div class="explorer-result" v-if="showList" style="position: relative;">
+          <div class="explorer-result" v-if="showList" style="position: relative;display: flex">
            <loading :loading="loadingCount" style="width: 240px"></loading>
-            <span>{{ summaryCount.totalCount }}&nbsp;</span>{{$t('overall.results')}}，IP
-            <span>{{ summaryCount.ipCount }}</span>，{{$t('overall.domain')}}
-            <span>{{ summaryCount.domainCount }}</span>，APP
+            <span>{{ summaryCount.totalCount }}&nbsp;</span>{{$t('overall.results')}}，IP<span class="margin-r-3"></span>
+            <span>{{ summaryCount.ipCount }}</span>，{{$t('overall.domain')}}<span class="margin-r-3"></span>
+            <span>{{ summaryCount.domainCount }}</span>，APP<span class="margin-r-3"></span>
            <span>{{ summaryCount.appCount }}</span>

            <span class="entity-hide-entity" v-if="q">
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -138,7 +138,7 @@
    <div class="overview__content overview__content-loading">
      <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
      <div class="overview__row" v-if="performanceData.length === 0">
-        <span  class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
+        <span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>
      </div>
      <div class="overview__row" v-if="performanceData.length > 0">
        <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
@@ -164,7 +164,7 @@
    <div class="overview__content overview__content-loading">
      <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
      <div class="overview__row" v-if="securityData.length === 0">
-        <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
+        <span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>
      </div>
      <div class="overview__row" v-if="securityData.length > 0">
        <div class="row__label row__label--width130">{{$t('entities.recentSecurity')}}</div>
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -142,7 +142,7 @@
    <div class="overview__content overview__content-loading">
      <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
      <div class="overview__row" v-if="performanceData.length === 0">
-        <span  class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
+        <span  class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>
      </div>
      <div class="overview__row" v-if="performanceData.length > 0">
        <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
@@ -168,7 +168,7 @@
    <div class="overview__content overview__content-loading">
      <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
      <div class="overview__row" v-if="securityData.length === 0">
-        <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
+        <span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>
      </div>
      <div class="overview__row" v-if="securityData.length > 0">
        <div class="row__label row__label--width130">{{$t('entities.recentSecurity')}}</div>
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -178,7 +178,7 @@
    <div class="overview__content overview__content-loading">
      <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
      <div class="overview__row" v-if="performanceData.length === 0">
-        <span  class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
+        <span  class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>
      </div>
      <div class="overview__row" v-if="performanceData.length > 0">
        <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
@@ -204,7 +204,7 @@
    <div class="overview__content overview__content-loading">
      <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
      <div class="overview__row" v-if="securityData.length === 0">
-        <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
+        <span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>
      </div>
      <div class="overview__row" v-if="securityData.length > 0">
        <div class="row__label row__label--width130">{{$t('entities.recentSecurity')}}</div>
--- a/src/views/setting/KnowledgeBaseForm.vue
+++ b/src/views/setting/KnowledgeBaseForm.vue
@@ -170,13 +170,13 @@
                    <td v-else-if="(addEditFlag && editIndex === i) || (addEditFlag && d.tagName === '' && d.tagValue === '')" class="imported-data-btn">
                      <i class="cn-icon cn-icon-save imported-data-save" style="margin: 0 7px"
                         @click="saveImportedData(i)"></i>
-                      <i class="el-icon-close" @click="removeImportedData(i)"></i>
+                      <el-icon @click="removeImportedData(i)"><Close /></el-icon>
                    </td>
                    <!--编辑和删除按钮：进入修改记录状态-->
                    <td v-else class="imported-data-btn">
                      <i class="cn-icon cn-icon-edit1 imported-data-left-btn"
                         @click="editImportedData(i)"></i>
-                      <i class="el-icon-close" @click="removeImportedData(i)"></i>
+                      <el-icon @click="removeImportedData(i)"><Close /></el-icon>
                    </td>
                  </tr>
                </table>
--- a/src/views/setting/KnowledgeBaseUserDefinedList.vue
+++ b/src/views/setting/KnowledgeBaseUserDefinedList.vue
@@ -33,8 +33,9 @@
            </button>
            <div class="top-tool-search margin-l-10" >
              <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
-              <button class="top-tool-btn  top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
-                <i class="el-icon-search"></i>
+              <button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
+                <el-icon><Search /></el-icon>
+                <!--<i class="el-icon-search"></i>-->
              </button>
            </div>
          </div>
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,15 @@
+// webpack.config.js
+const AutoImport = require('unplugin-auto-import/webpack')
+const Components = require('unplugin-vue-components/webpack')
+const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
+
+module.exports = {
+  plugins: [
+    AutoImport({
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()]
+    })
+  ]
+}