From b02d8ecb8b5ae77639ab1e46fd3260b4da0b245f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 2 Feb 2024 18:13:11 +0800
Subject: [PATCH 1/5] =?UTF-8?q?CN-1551=20feat:=20=E5=8D=87=E7=BA=A7element?=
 =?UTF-8?q?-ui=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   9 +-
 public/index.html                             |   4 +-
 src/Login.vue                                 |  37 ++-
 src/assets/css/common/cover-element-plus.scss |  68 ++++
 src/assets/css/common/part-select.scss        |   2 +-
 src/assets/css/common/table-common.scss       |   7 +-
 .../advancedSearch/advanced-search2.scss      |  32 +-
 .../components/advancedSearch/codemirror.scss |  14 +-
 .../common/TimeRange/date-time-range.scss     |  36 +-
 .../common/TimeRange/time-refresh.scss        |  13 +-
 .../components/common/chart-tab.scss          |  10 +-
 .../components/common/pagination.scss         | 167 +++++++---
 .../components/components/layout/layout.scss  | 180 +++++-----
 .../components/rightBox/report/reportBox.scss |   3 +
 .../components/components/table/common.scss   |   5 +-
 .../views/charts2/dnsEventChart.scss          |   2 +-
 .../views/charts2/entityDetailBasicInfo.scss  |   4 +-
 .../views/charts2/entityDetailLine.scss       |  14 +-
 .../views/charts2/networkOverviewApps.scss    |  65 ++--
 .../charts2/networkOverviewDdosDetection.scss |  20 +-
 .../views/charts2/networkOverviewLine.scss    |  41 ++-
 .../networkOverviewPerformanceEvent.scss      |  20 +-
 .../views/charts2/networkOverviewTabs.scss    | 314 +++++++++---------
 .../views/charts2/npmAppCategoryScore.scss    |  10 +-
 .../views/charts2/npmAppEventTable.scss       |   5 +-
 .../css/components/views/charts2/npmMap.scss  |  30 ++
 .../views/charts2/npmRecentEvents.scss        |  43 ++-
 .../css/components/views/charts2/npmTabs.scss |   1 +
 .../views/charts2/npmTrafficLine.scss         |  26 +-
 .../css/components/views/charts2/panel.scss   |  21 +-
 .../detection-form-setting.scss               |  11 +
 .../detection-create/detection-form.scss      |  10 +
 .../views/detections/detection-filter.scss    |   9 +-
 .../views/detections/detection-table.scss     |   6 +
 .../views/entityExplorer/entity-explorer.scss |   2 +
 .../entityList/detail-overview.scss           |   1 +
 .../search/explorer-search.scss               |   3 +
 src/assets/css/main.scss                      |  20 +-
 src/assets/css/themes/THEME_README.md         |  18 +
 src/assets/css/themes/src/table-column.scss   |   2 +-
 src/assets/css/themes/theme-dark.scss         |  20 ++
 src/assets/css/themes/theme-light.scss        |  19 ++
 src/components/advancedSearch/TagMode.vue     |  12 +-
 src/components/advancedSearch/TextMode.vue    |   8 +-
 .../common/popBox/TopToolMoreOptions.vue      |   2 +-
 src/components/layout/Header.vue              |  19 +-
 src/components/rightBox/settings/RoleBox.vue  |   6 +-
 src/components/table/CnDataList.vue           |   5 +-
 .../table/administration/GalaxyProxyTable.vue |   4 +-
 src/main.js                                   |   7 +
 src/store/index.js                            |   3 +-
 src/views/charts/charts/ChartNoData.vue       |   4 +-
 .../networkOverview/NetworkOverviewApps.vue   |   2 +-
 .../networkOverview/NetworkOverviewLine.vue   |   5 +-
 .../networkOverview/NetworkOverviewTabs.vue   |  16 +-
 .../charts/npm/NpmAppCategoryScore.vue        |   2 +-
 .../charts2/charts/npm/NpmTrafficLine.vue     |   2 +-
 src/views/detections/DetectionFilter.vue      |   2 +-
 src/views/detections/Index.vue                |   5 +-
 .../detectionPolicies/PolicyForm.vue          |  19 +-
 .../detectionPolicies/PolicyTools.vue         |   3 +-
 src/views/entityExplorer/EntityExplorer.vue   |   8 +-
 .../entityList/detailOverview/App.vue         |   4 +-
 .../entityList/detailOverview/Domain.vue      |   4 +-
 .../entityList/detailOverview/Ip.vue          |   4 +-
 src/views/setting/KnowledgeBaseForm.vue       |   4 +-
 .../setting/KnowledgeBaseUserDefinedList.vue  |   5 +-
 webpack.config.js                             |  15 +
 68 files changed, 1015 insertions(+), 479 deletions(-)
 create mode 100644 src/assets/css/common/cover-element-plus.scss
 create mode 100644 webpack.config.js

diff --git a/package.json b/package.json
index 483de1ad..5d562842 100644
--- 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": [
diff --git a/public/index.html b/public/index.html
index d559de20..40c409e4 100644
--- 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>
diff --git a/src/Login.vue b/src/Login.vue
index a89429be..1dab0b6b 100644
--- 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>
diff --git a/src/assets/css/common/cover-element-plus.scss b/src/assets/css/common/cover-element-plus.scss
new file mode 100644
index 00000000..1704e55c
--- /dev/null
+++ 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;
+}
diff --git a/src/assets/css/common/part-select.scss b/src/assets/css/common/part-select.scss
index 1505d481..0f415909 100644
--- 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;
   }
diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 951e7fb2..3590af45 100644
--- 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;
diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
index 2bb692be..567076e2 100644
--- 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;
 }
diff --git a/src/assets/css/components/components/advancedSearch/codemirror.scss b/src/assets/css/components/components/advancedSearch/codemirror.scss
index 0b3fbee4..24a949c4 100644
--- 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;
 }
diff --git a/src/assets/css/components/components/common/TimeRange/date-time-range.scss b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
index bad3efc7..a5f3513e 100644
--- 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);
         }
       }
     }
diff --git a/src/assets/css/components/components/common/TimeRange/time-refresh.scss b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
index 8231bea5..c3194845 100644
--- 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;
   }
 }
diff --git a/src/assets/css/components/components/common/chart-tab.scss b/src/assets/css/components/components/common/chart-tab.scss
index 133dbdb4..df0019cd 100644
--- 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;
diff --git a/src/assets/css/components/components/common/pagination.scss b/src/assets/css/components/components/common/pagination.scss
index f7389ad5..5f88b388 100644
--- 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
 }
diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss
index 95777472..7182c06c 100644
--- 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;
+}
diff --git a/src/assets/css/components/components/rightBox/report/reportBox.scss b/src/assets/css/components/components/rightBox/report/reportBox.scss
index 0ab72d19..4ac674b8 100644
--- 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;
+}
diff --git a/src/assets/css/components/components/table/common.scss b/src/assets/css/components/components/table/common.scss
index 592aacac..3e15b4fb 100644
--- 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;
   }
 }
diff --git a/src/assets/css/components/views/charts2/dnsEventChart.scss b/src/assets/css/components/views/charts2/dnsEventChart.scss
index 7c3987fe..33ebec62 100644
--- 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;
diff --git a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
index a81dd3a2..c3984d3f 100644
--- 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);
 
diff --git a/src/assets/css/components/views/charts2/entityDetailLine.scss b/src/assets/css/components/views/charts2/entityDetailLine.scss
index 07fbb450..6bac0d7a 100644
--- 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;
+        }
       }
     }
 
diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
index 312bcaa0..20b564d0 100644
--- 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;
diff --git a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
index 7b2ec15b..14bcf362 100644
--- 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;
+      }
     }
   }
 }
diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss
index f4c92ae0..e7c736cf 100644
--- 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;
               }
             }
diff --git a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
index c04484dc..1a68dcb7 100644
--- 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;
+    }
   }
 }
diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index cde4eb35..92d14ef6 100644
--- 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;
-}
diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index 859eef28..492b7ebd 100644
--- 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 {
diff --git a/src/assets/css/components/views/charts2/npmAppEventTable.scss b/src/assets/css/components/views/charts2/npmAppEventTable.scss
index 67105ac2..cad88d6b 100644
--- 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;
+  }
 }
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
index 28a2a211..2b627720 100644
--- 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;
diff --git a/src/assets/css/components/views/charts2/npmRecentEvents.scss b/src/assets/css/components/views/charts2/npmRecentEvents.scss
index ea104dfb..c85bd123 100644
--- 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;
+  }
 }
diff --git a/src/assets/css/components/views/charts2/npmTabs.scss b/src/assets/css/components/views/charts2/npmTabs.scss
index d0daf613..af7618d9 100644
--- 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 {
diff --git a/src/assets/css/components/views/charts2/npmTrafficLine.scss b/src/assets/css/components/views/charts2/npmTrafficLine.scss
index 6ca3a0a0..9b4d08d8 100644
--- 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;
diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss
index 90390276..f1f9c018 100644
--- 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 {
diff --git 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
index 7b9ceef3..ebb9e73a 100644
--- 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;
diff --git a/src/assets/css/components/views/detections/detection-create/detection-form.scss b/src/assets/css/components/views/detections/detection-create/detection-form.scss
index f82c0da9..ecc9dc56 100644
--- 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;
+        }
       }
     }
 
diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 091fc8dc..45e64dc9 100644
--- 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;
       }
     }
   }
diff --git a/src/assets/css/components/views/detections/detection-table.scss b/src/assets/css/components/views/detections/detection-table.scss
index c65a0eea..ce5eb322 100644
--- 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;
diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index 7d5419bd..23f96654 100644
--- 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;
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
index 9dd56ea0..a6a06d4b 100644
--- 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;
           }
         }
 
diff --git a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
index 478b35e3..510c17f9 100644
--- 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;
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 02ab7b44..6c80af3a 100644
--- 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;
+  }
 }
diff --git a/src/assets/css/themes/THEME_README.md b/src/assets/css/themes/THEME_README.md
index bf66b293..0d022a63 100644
--- 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间距新版比旧版略大
+* 
diff --git a/src/assets/css/themes/src/table-column.scss b/src/assets/css/themes/src/table-column.scss
index fd786ead..31bbc429 100644
--- 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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/themes/theme-dark.scss b/src/assets/css/themes/theme-dark.scss
index 042c3d96..90484333 100644
--- 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;
diff --git a/src/assets/css/themes/theme-light.scss b/src/assets/css/themes/theme-light.scss
index ec0ca16c..cc08f726 100644
--- 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;
diff --git a/src/components/advancedSearch/TagMode.vue b/src/components/advancedSearch/TagMode.vue
index 007f6794..cc5296b8 100644
--- 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>
diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue
index 50cc0242..63fefde7 100644
--- 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>
 
diff --git a/src/components/common/popBox/TopToolMoreOptions.vue b/src/components/common/popBox/TopToolMoreOptions.vue
index 10d88712..c091b63d 100644
--- 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" >
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 6d5276c7..6da5b2b3 100644
--- 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
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
index b4392866..1ed5fa35 100644
--- 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>
diff --git a/src/components/table/CnDataList.vue b/src/components/table/CnDataList.vue
index d837edb4..ded77e71 100644
--- 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>
diff --git a/src/components/table/administration/GalaxyProxyTable.vue b/src/components/table/administration/GalaxyProxyTable.vue
index 0f4c3a52..0887f356 100644
--- 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]"
diff --git a/src/main.js b/src/main.js
index dfd64f4f..10630365 100644
--- 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
diff --git a/src/store/index.js b/src/store/index.js
index ff2511d1..7f83bef7 100644
--- 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: {
diff --git a/src/views/charts/charts/ChartNoData.vue b/src/views/charts/charts/ChartNoData.vue
index d2502929..7f184ed1 100644
--- 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>
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index b56aae16..ac5eea8c 100644
--- 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>
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 152c43cf..8ca39325 100644
--- 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({
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 49e90323..c7a0c0f7 100644
--- 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 () {
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index 678a56af..a6ea20d8 100644
--- 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">
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index 1efb2808..aa7b1cb3 100644
--- 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>
diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue
index bacce05b..6581af27 100644
--- 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)"
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index 87717355..5afb1661 100644
--- 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)
diff --git a/src/views/detections/detectionPolicies/PolicyForm.vue b/src/views/detections/detectionPolicies/PolicyForm.vue
index 733392b1..ec8a4396 100644
--- 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
diff --git a/src/views/detections/detectionPolicies/PolicyTools.vue b/src/views/detections/detectionPolicies/PolicyTools.vue
index a6ca754a..f2238fe3 100644
--- 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>
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index cfae1c83..c13873e2 100644
--- 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">
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index 8da6ddb9..4dbb3e0c 100644
--- 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>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index c70b2112..70de563b 100644
--- 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>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index 58c178af..139c889f 100644
--- 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>
diff --git a/src/views/setting/KnowledgeBaseForm.vue b/src/views/setting/KnowledgeBaseForm.vue
index 2701d4d0..af934867 100644
--- 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>
diff --git a/src/views/setting/KnowledgeBaseUserDefinedList.vue b/src/views/setting/KnowledgeBaseUserDefinedList.vue
index 911f1d4e..fe3be3d8 100644
--- 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>
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..4b6e1713
--- /dev/null
+++ 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()]
+    })
+  ]
+}

From 22c164d2f56f2457a7c5ee7e720c95cf123dac94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Sun, 18 Feb 2024 09:58:45 +0800
Subject: [PATCH 2/5] =?UTF-8?q?CN-1551=20feat:=20=E5=8D=87=E7=BA=A7element?=
 =?UTF-8?q?-ui=E7=89=88=E6=9C=AC=E7=9A=84=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common/cover-element-plus.scss | 26 ++++++++++-
 src/assets/css/common/right-box-common.scss   | 26 +++++++++++
 src/assets/css/common/table-common.scss       |  4 ++
 .../common/TimeRange/date-time-range.scss     |  3 ++
 .../components/rightBox/report/reportBox.scss | 36 ++++++++++++++-
 .../views/administration/Appearance.scss      | 18 ++++++++
 .../views/detections/detection-tools.scss     |  4 ++
 .../css/components/views/report/report.scss   | 32 ++++++++++++++
 .../views/setting/knowledgeBase.scss          | 37 +++++++++++++++-
 .../css/components/views/system/Plugin.scss   |  3 ++
 src/assets/css/themes/THEME_README.md         |  8 ++--
 src/components/layout/Header.vue              |  1 +
 src/components/rightBox/settings/RoleBox.vue  |  4 +-
 .../administration/OperationLogTable.vue      |  6 +++
 src/components/table/report/ReportTable.vue   | 12 ++++-
 .../setting/knowledgeBaseTableForCard.vue     | 32 +++++++++++---
 src/utils/tools.js                            |  4 ++
 src/views/administration/Appearance.vue       |  2 +-
 src/views/administration/I18n.vue             |  2 +-
 src/views/administration/Roles.vue            |  2 +-
 src/views/administration/User.vue             |  2 +-
 .../detectionPolicies/PolicyForm.vue          | 44 ++++++++++---------
 src/views/entityExplorer/EntityGraph.vue      |  1 +
 src/views/report/Report.vue                   |  1 +
 src/views/setting/KnowledgeBaseForm.vue       | 44 ++++++++++++++-----
 .../setting/KnowledgeBaseUserDefinedList.vue  |  1 +
 src/views/system/Plugin.vue                   |  2 +-
 27 files changed, 303 insertions(+), 54 deletions(-)

diff --git a/src/assets/css/common/cover-element-plus.scss b/src/assets/css/common/cover-element-plus.scss
index 1704e55c..3ece9d97 100644
--- a/src/assets/css/common/cover-element-plus.scss
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -8,10 +8,10 @@
 }
 
 .el-table--border::before, .el-table__border-left-patch {
-  //width: 0 !important;
+  width: 0 !important;
 }
 .el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
-  //height: 0 !important;
+  height: 0 !important;
 }
 
 .el-popper.is-pure {
@@ -66,3 +66,25 @@
 .el-popover.el-popper {
   padding: 0 !important;
 }
+.my-header-cell-class .el-checkbox__input{
+  display: none;
+}
+.el-dialog {
+  padding: 0 !important;
+}
+.el-switch.is-checked .el-switch__core {
+  background-color: $--color-primary !important;
+}
+.el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text {
+  background-color: $--color-primary !important;
+}
+.el-date-table td.available:hover {
+  color: $--color-primary !important;
+}
+.el-picker__popper.el-popper {
+  margin-top: 8px;
+}
+//.el-button:hover {
+//  color: $--color-primary !important;
+//  border-color: $--color-primary !important;
+//}
diff --git a/src/assets/css/common/right-box-common.scss b/src/assets/css/common/right-box-common.scss
index e7cd88f1..770b9a99 100644
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -64,6 +64,9 @@
           }
         }
       }
+    }
+    .container__form {
+
     }
     .el-form-item__content {
       .input-box {
@@ -136,6 +139,9 @@
         .el-input__inner:focus {
           border-color: darken($--right-box-border-color, 20%);
         }
+        .el-form-item__label {
+          padding-bottom: 2px;
+        }
       }
       .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
         border-color: #F56C6C
@@ -301,4 +307,24 @@
   .el-form-item__content .el-autocomplete .el-input-group {
     vertical-align: unset;
   }
+  .el-input__wrapper {
+    border-radius: 2px;
+    height: 32px !important;
+    line-height: 32px !important;
+    //box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
+    box-shadow: 0 0 0 1px #e7eaed inset;
+  }
+  .el-input__inner, .el-textarea__inner {
+    border: none !important;
+  }
+  .el-select__wrapper {
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-switch.is-checked .el-switch__core {
+    background-color: $--color-primary;
+  }
+  .el-textarea__inner {
+    font-size: 12px;
+  }
 }
diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 3590af45..169eb1a8 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -55,6 +55,10 @@
      .top-tool-btn--search:focus {
        border-left: none !important;
      }
+      .el-input--small .el-input__wrapper {
+        height: 28px !important;
+        border-radius: 2px 0 0 2px !important;
+      }
     }
 
     .top-tool-right {
diff --git a/src/assets/css/components/components/common/TimeRange/date-time-range.scss b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
index a5f3513e..e48b3c98 100644
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -144,6 +144,9 @@
           background: $--select-bg-color-hover-1;
         }
       }
+      .el-range-editor.el-input__wrapper{
+        opacity: 0;
+      }
     }
 
     .date-range-panel-content-right {
diff --git a/src/assets/css/components/components/rightBox/report/reportBox.scss b/src/assets/css/components/components/rightBox/report/reportBox.scss
index 4ac674b8..d7961f2b 100644
--- a/src/assets/css/components/components/rightBox/report/reportBox.scss
+++ b/src/assets/css/components/components/rightBox/report/reportBox.scss
@@ -4,6 +4,7 @@
       .el-checkbox {
         margin-right: 24px;
         line-height: 28px;
+        margin-top: -2px;
       }
       .el-checkbox-group {
         line-height: 28px;
@@ -108,10 +109,40 @@
         height: 32px;
         margin: 10px 0 0 10px;
       }
+      .el-input__wrapper {
+        height: 32px !important;
+        padding: 1px 11px !important;
+        border-radius: 2px;
+      }
+      .el-input__inner {
+        padding: 0;
+      }
+
+      .el-form-item__content {
+        line-height: 40px !important;
+      }
+    }
+    .el-input__inner {
+      border: none;
+    }
+    .el-select--small .el-select__wrapper {
+      padding: 0 10px;
+      min-height: 32px !important;
+      line-height: 32px !important;
+      margin-top: -2px;
+      border-radius: 2px;
     }
   }
   .right-box__select--param {
-    .el-input__prefix {
+    //.el-select--small .el-select__prefix {
+    //  left: 0;
+    //  background-color: #f5f7fa;
+    //  color: #999;
+    //  padding: 0 1.07143rem;
+    //  border: 1px solid #dcdfe6;
+    //  border-radius: 2px 0 0 2px;
+    //}
+    .el-select__prefix, .el-input__prefix {
       left: 0;
       background-color: #f5f7fa;
       color: #999;
@@ -119,6 +150,9 @@
       border: 1px solid #dcdfe6;
       border-radius: 2px 0 0 2px;
     }
+    .el-select__wrapper {
+      padding-left: 0 !important;
+    }
   }
 }
 .my-form-item .el-form-item__content {
diff --git a/src/assets/css/components/views/administration/Appearance.scss b/src/assets/css/components/views/administration/Appearance.scss
index af9a9b7c..79f08b22 100644
--- a/src/assets/css/components/views/administration/Appearance.scss
+++ b/src/assets/css/components/views/administration/Appearance.scss
@@ -10,6 +10,21 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    .el-form-item {
+      margin-bottom: 27px;
+    }
+    .el-form-item__content {
+      width: 600px;
+      .el-select__wrapper {
+        min-height: 32px !important;
+        line-height: 32px;
+        padding: 0 10px 0 16px;
+        font-size: 13px;
+      }
+    }
+    .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+      margin-bottom: 4px;
+    }
     .el-input {
       width:600px;
     }
@@ -60,3 +75,6 @@
     }
   }
 }
+.el-popper.is-pure {
+  margin-top: 0;
+}
diff --git a/src/assets/css/components/views/detections/detection-tools.scss b/src/assets/css/components/views/detections/detection-tools.scss
index a2f3b0f4..a5e97b10 100644
--- a/src/assets/css/components/views/detections/detection-tools.scss
+++ b/src/assets/css/components/views/detections/detection-tools.scss
@@ -129,6 +129,10 @@
 
     .el-input--small {
       line-height: 27px;
+      .el-input__wrapper {
+        height: 28px !important;
+        border-radius: 2px 0 0 2px !important;
+      }
 
       .el-input__inner {
         height: 28px;
diff --git a/src/assets/css/components/views/report/report.scss b/src/assets/css/components/views/report/report.scss
index 20db63d4..8761760a 100644
--- a/src/assets/css/components/views/report/report.scss
+++ b/src/assets/css/components/views/report/report.scss
@@ -78,11 +78,37 @@
               color: #1b2e3b;
               background: #ebeef5;
             }
+            .el-range-editor--small.el-input__wrapper {
+              height: 32px;
+              line-height: 32px;
+            }
             .cn-detection__footer {
               text-align: center;
+              display: flex;
+              justify-content: center;
               .el-pagination__jump {
                 margin-left: 3px;
               }
+              .el-pagination__goto {
+                display: none;
+              }
+              .el-input--small {
+                width: 46px !important;
+                .el-input__wrapper {
+                  height: 22px;
+                }
+              }
+              .el-pagination--small {
+                .btn-prev {
+                  margin-right: 10px;
+                }
+                .btn-next {
+                  margin-left: 10px;
+                }
+                &span {
+                  color: $--color-text-primary;
+                }
+              }
             }
           }
           .block.drop-down-time {
@@ -176,6 +202,12 @@
             }
           }
         }
+        .el-table__border-left-patch, .el-table--border::before {
+          width: 0;
+        }
+        .el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+          height: 0;
+        }
       }
     }
     .table-operation-all {
diff --git a/src/assets/css/components/views/setting/knowledgeBase.scss b/src/assets/css/components/views/setting/knowledgeBase.scss
index f3af03a8..44efdcea 100644
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -169,6 +169,8 @@
               align-items: center;
               .card-title-name {
                 width:100%;
+                height: 19.2px;
+                line-height: 19.2px;
                 overflow: hidden; //超出的文本隐藏
                 text-overflow: ellipsis; //溢出用省略号显示
                 white-space:nowrap;
@@ -996,6 +998,10 @@
     padding-left: 20px;
     overflow: auto;
 
+    .el-form--label-top .el-form-item .el-form-item__label {
+      margin-bottom: 3px !important;
+    }
+
     .enable-form__mt {
       .el-form {
         margin-top:6px;
@@ -1176,6 +1182,7 @@
         }
         .el-textarea__inner {
           padding-left: 8px;
+          font-size: 12px;
         }
 
         .form-select__disable {
@@ -1188,6 +1195,13 @@
         .form-select__enable {
           width: 100%;
 
+          .el-select__wrapper {
+            //padding-left: 22px !important;
+            .el-select__inner {
+              background-color: #521919 !important;
+              padding-left: 22px !important;
+            }
+          }
           .el-input__inner {
             background-color: white !important;
             padding-left: 22px !important;
@@ -1899,6 +1913,7 @@
     padding-top:0px;
     padding-right:30px;
     padding-left:30px;
+    padding-bottom:30px;
     .dialog-message {
       padding-left:0px !important;
       padding-right:0px !important;
@@ -1920,12 +1935,21 @@
       &.update-dialog__table--system-user {
         height: calc(100% - 139px);
       }
+      &.el-table .el-table__cell {
+        padding: 12px 0 !important;
+      }
+      &.el-table .el-table__row .el-table__cell {
+        padding: 8px 0 !important;
+      }
     }
     .update-knowledge-form {
       .el-upload {
         width:100%;
       }
       .form-input {
+        .el-input__wrapper {
+          padding: 1px 16px !important;
+        }
         .el-input__inner{
           padding-right: 50px !important;
           font-size: 14px;
@@ -1936,7 +1960,8 @@
         border: 1px solid rgba(222,222,222,1);
         box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
         border-radius: 2px;
-        width:100%;
+        //width:100%;
+        width: 1020px;
         height:28px;
         min-height:28px !important;
         color: #575757;
@@ -1962,6 +1987,16 @@
       }
       .knowledge-remark {
         margin-bottom:0px !important;
+        .el-textarea__inner {
+          font-size: 12px;
+          padding: 5px 15px;
+        }
+      }
+      .el-form--label-top .el-form-item .el-form-item__label {
+        margin-bottom: 0 !important;
+      }
+      .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+        line-height: 14px;
       }
     }
     .dialog-footer {
diff --git a/src/assets/css/components/views/system/Plugin.scss b/src/assets/css/components/views/system/Plugin.scss
index a8fe5573..a0f95128 100644
--- a/src/assets/css/components/views/system/Plugin.scss
+++ b/src/assets/css/components/views/system/Plugin.scss
@@ -43,4 +43,7 @@
     -webkit-line-clamp: 2; // 超出多少行
     -webkit-box-orient: vertical;
   }
+  .cn-table .el-table:not(.chart-table) td {
+    padding: 8px 0 !important;
+  }
 }
diff --git a/src/assets/css/themes/THEME_README.md b/src/assets/css/themes/THEME_README.md
index 0d022a63..837146ba 100644
--- a/src/assets/css/themes/THEME_README.md
+++ b/src/assets/css/themes/THEME_README.md
@@ -12,10 +12,10 @@
 -   // $arrow-selector: #{& + '__arrow'};   
     改为 $arrow-selector: '.el-popper__arrow';
 
-### 20240118element-plus升级
+### 20240118__element-plus升级
 #### 变动事项
 
-- elemen-plus由1.0.2-beta.71升级至2.5.1，旧版本是将element-plus源文件放到theme/src中进行部分修改使用，现在启用该方法，直接使用element-plus组件，部分组件有差异改动，对比界面进行调整并记录在xxx.scss
+- elemen-plus由1.0.2-beta.71升级至2.5.1，旧版本是将element-plus源文件放到theme/src中进行部分修改使用，现在弃用该方案，直接使用element-plus组件，部分组件有差异改动，对比界面进行调整并记录在cover-element.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下，否则样式错乱
@@ -28,4 +28,6 @@
 - icon图标：老版使用：<i class="el-icon-search" />。新版则是svg文件，需要单独引入封装成component的格式，使用时：<el-icon><Search /></el-icon>
 - select选择器：新版被el-select__wrapper的div包裹，与旧版顺序不同。
 - * input和select的右侧图标和maxlength间距新版比旧版略大
-* 
+- drawer抽屉：在header.vue中遇到，custom-class="cn-menu"，渲染后class中没有cn-menu，也许是按需引入导致的，额外标注
+- message-box弹窗：新版在旧版的el-message-box的外层包裹了一层父div el-overlay-message-box，导致原样式会错乱
+- dialog: custom在2.4版本后被移除，使用class替代，插槽中的title也在2.4版本后移除，使用header替代
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 6da5b2b3..3ccc4640 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -135,6 +135,7 @@
         direction="ttb"
         custom-class="cn-menu"
         modal-class="cn-menu-modal"
+        class="cn-menu"
         :with-header="false"
         :show-close="false"
     >
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
index 1ed5fa35..7f6ce74f 100644
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -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>
-                <el-icon v-if="data.type === 1"><Menu /></el-icon>
-                <el-icon v-if="data.type === 2"><Edit /></el-icon>
+                <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>
diff --git a/src/components/table/administration/OperationLogTable.vue b/src/components/table/administration/OperationLogTable.vue
index c2eb657d..2d8fc378 100644
--- a/src/components/table/administration/OperationLogTable.vue
+++ b/src/components/table/administration/OperationLogTable.vue
@@ -157,3 +157,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.list-page .cn-table .el-table:not(.chart-table) td {
+  padding: 8px 0;
+}
+</style>
diff --git a/src/components/table/report/ReportTable.vue b/src/components/table/report/ReportTable.vue
index 9eb3d7be..6176f68c 100644
--- a/src/components/table/report/ReportTable.vue
+++ b/src/components/table/report/ReportTable.vue
@@ -3,8 +3,9 @@
     <el-table
         id="reportTable"
         ref="dataTable"
+        :header-cell-class-name="headerCellClass"
         :data="tableData"
-        :height="height"
+        height="100%"
         :expand-row-keys="expandedIds"
         border
         empty-text=" "
@@ -213,7 +214,7 @@ import Loading from '@/components/common/Loading'
 import axios from 'axios'
 import { api } from '@/utils/api'
 import { storageKey, report } from '@/utils/constants'
-import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
 import { ref } from 'vue'
 import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
@@ -479,6 +480,7 @@ export default {
     })
   },
   methods: {
+    headerCellClass,
     /**
      * 进入页面判断是否需要展开表格
      * 即展开表格后刷新界面，保持展开效果
@@ -783,3 +785,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.list-page .cn-table .el-table:not(.chart-table) td {
+  padding: 7.5px 0;
+}
+</style>
diff --git a/src/components/table/setting/knowledgeBaseTableForCard.vue b/src/components/table/setting/knowledgeBaseTableForCard.vue
index ad3c98b2..e6108063 100644
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -32,7 +32,7 @@
   <div class="center-dialog">
     <el-dialog v-model="showUpdateDialog"
                :destroy-on-close="true"
-               :custom-class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
+               :class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
                :before-close="beforeClose"
                :after-close="handleClose">
       <div class="knowledge-update__top" >
@@ -107,9 +107,8 @@
                     'update-dialog__table--psiphon3': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning',
                     'update-dialog__table--system-user': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab !== 'intelligenceLearning'
                   }"
-                  :header-cell-style="{background:'#f5f7fa',color:'#353636',fontWeight: '400',fontSize: '12px',borderRight: 'none',borderBottom: 'none'}"
-                  cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;"
-                  header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;">
+                  :cell-style="myCellStyle"
+                  :header-cell-style="myHeaderCellStyle">
           <el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150" >
             <template #default="scope" :column="item">
               <span>{{scope.row.opTime ? dateFormatByAppearance(scope.row.opTime) : '-'}}</span>
@@ -202,6 +201,7 @@
                          :on-error="uploadError"
                          :class="uploadErrorTip ? 'el-upload--error' : ''"
                          :accept="fileTypeLimit"
+                         style="margin-bottom: -10px"
                          :auto-upload="false"
                          ref="knowledgeUpload"
                          id="knowledgeUpload"
@@ -228,7 +228,7 @@
     </el-dialog>
     <el-dialog v-model="showConfirmDialog"
                :title="$t('overall.tips')"
-               custom-class="update-knowledge-tip"
+               class="update-knowledge-tip"
                :width="480"
                :before-close="handleConfirmClose">
       <div class="dialog-message">{{$t('knowledge.updateTips')}}</div>
@@ -326,7 +326,27 @@
           { value: 10080, name: this.$t('dateTime.last7Days') },
           { value: 21600, name: this.$t('dateTime.last15Days') },
           { value: 43200, name: this.$t('dateTime.last30Days') }
-        ]
+        ],
+        myCellStyle: {
+          padding: '6px 0px',
+          'font-size': '12px',
+          color: '#353636',
+          'font-weight': 400,
+          'line-height': '20px',
+          'border-right': 'none'
+        },
+        myHeaderCellStyle: {
+          padding: '8px 0px',
+          'font-size': '12px',
+          color: '#353636',
+          'font-weight': 500,
+          'border-right': 'none',
+          background: '#f5f7fa',
+          fontWeight: '400',
+          fontSize: '12px',
+          borderRight: 'none',
+          borderBottom: 'none'
+        }
       }
     },
     setup () {
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 968f3eb7..a170addf 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1565,3 +1565,7 @@ const tagValueHandler = (value) => {
   const find = tagValueLabelMapping.find(t => t.value === value)
   return find ? find.name : value
 }
+
+export const headerCellClass = (row) => {
+  return 'my-header-cell-class'
+}
diff --git a/src/views/administration/Appearance.vue b/src/views/administration/Appearance.vue
index 24deb265..e5c4a0f2 100644
--- a/src/views/administration/Appearance.vue
+++ b/src/views/administration/Appearance.vue
@@ -51,7 +51,7 @@
         <button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save"
                 v-if="hasPermission('editAppearence')"
         >
-          <loading size="small" :loading="blockOperation.save"></loading>
+          <el-loading size="small" :loading="blockOperation.save"></el-loading>
           <span>{{$t('overall.save')}}</span>
         </button>
       </div>
diff --git a/src/views/administration/I18n.vue b/src/views/administration/I18n.vue
index 94b73ab1..c37f41cc 100644
--- a/src/views/administration/I18n.vue
+++ b/src/views/administration/I18n.vue
@@ -51,7 +51,7 @@
     <el-drawer
         v-model="rightBox.show"
         direction="rtl"
-        custom-class="common-right-box"
+        class="common-right-box"
         :size="700"
         :with-header="false"
         destroy-on-close>
diff --git a/src/views/administration/Roles.vue b/src/views/administration/Roles.vue
index b4eada0d..b749702f 100644
--- a/src/views/administration/Roles.vue
+++ b/src/views/administration/Roles.vue
@@ -55,7 +55,7 @@
     <el-drawer
             v-model="rightBox.show"
             direction="rtl"
-            custom-class="common-right-box"
+            class="common-right-box"
             :with-header="false"
             :size="700"
             destroy-on-close>
diff --git a/src/views/administration/User.vue b/src/views/administration/User.vue
index f54c2616..8ff4066b 100644
--- a/src/views/administration/User.vue
+++ b/src/views/administration/User.vue
@@ -52,7 +52,7 @@
     <el-drawer
             v-model="rightBox.show"
             direction="rtl"
-            custom-class="common-right-box"
+            class="common-right-box"
             :size="700"
             :with-header="false"
             destroy-on-close>
diff --git a/src/views/detections/detectionPolicies/PolicyForm.vue b/src/views/detections/detectionPolicies/PolicyForm.vue
index ec8a4396..dade6f5d 100644
--- a/src/views/detections/detectionPolicies/PolicyForm.vue
+++ b/src/views/detections/detectionPolicies/PolicyForm.vue
@@ -563,20 +563,6 @@ 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
@@ -586,7 +572,22 @@ export default {
 </script>
 
 <style lang="scss">
+.el-overlay-message-box, .el-message-box {
+  padding: 0 !important;
+}
+.el-overlay-message-box {
+  text-align: center !important;
+}
+.is-message-box .el-overlay-message-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .del-model {
+  &.el-message-box {
+    max-width: 480px !important;
+  }
   display: flex;
   flex-direction: column;
   padding-bottom: 0 !important;
@@ -600,8 +601,8 @@ export default {
     height: 42px;
     background: #F7F7F7;
     box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
-    padding-left: 20px;
-    padding-top: 14px;
+    padding-left: 21px;
+    padding-top: 10px;
     padding-bottom: 14px;
 
     .el-message-box__headerbtn {
@@ -611,7 +612,7 @@ export default {
       align-items: center;
       font-size: 10px;
       line-height: 10px;
-      padding-right: 5px !important;
+      padding-right: 10px !important;
 
       i {
         width: 10px;
@@ -634,9 +635,9 @@ export default {
     letter-spacing: 0;
     line-height: 22px;
     font-weight: 400;
-    padding-top: 8px;
+    padding-top: 9px;
     padding-right: 20px;
-    padding-left: 20px;
+    padding-left: 21px;
 
     .el-message-box__message {
       padding-left: 0 !important;
@@ -648,8 +649,11 @@ export default {
     height: 52px;
     border-top: 1px solid #eee;
     box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
-    padding: 11px 0 12px !important;
+    padding: 13px 1px 12px 0 !important;
 
+    .el-button {
+      font-size: 12px;
+    }
     .el-button--small {
       padding: 8px 21px !important;
       line-height: 12px;
diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue
index 442f2c23..b5f53d05 100644
--- a/src/views/entityExplorer/EntityGraph.vue
+++ b/src/views/entityExplorer/EntityGraph.vue
@@ -7,6 +7,7 @@
           v-model="rightBox.show"
           direction="rtl"
           custom-class="entity-graph__detail"
+          class="entity-graph__detail"
           :close-on-click-modal="true"
           :modal="false"
           :size="400"
diff --git a/src/views/report/Report.vue b/src/views/report/Report.vue
index d3ef4ff5..8324351a 100644
--- a/src/views/report/Report.vue
+++ b/src/views/report/Report.vue
@@ -70,6 +70,7 @@
           v-model="rightBox.show"
           direction="rtl"
           custom-class="common-right-box"
+          class="common-right-box"
           :size="700"
           :with-header="false"
           destroy-on-close>
diff --git a/src/views/setting/KnowledgeBaseForm.vue b/src/views/setting/KnowledgeBaseForm.vue
index af934867..192e36bb 100644
--- a/src/views/setting/KnowledgeBaseForm.vue
+++ b/src/views/setting/KnowledgeBaseForm.vue
@@ -244,6 +244,7 @@ import { api } from '@/utils/api'
 import { regular } from '@/utils/regular'
 import unitConvert from '@/utils/unit-convert'
 import Loading from '@/components/common/Loading'
+import { ElMessageBox } from 'element-plus'
 
 export default {
   name: 'CreateKnowledgeBase',
@@ -653,12 +654,12 @@ export default {
         this.isShowUploadTips = true
         const self = this
         if (this.importedData.length > 0) {
-          this.$confirm(this.$t('tip.uploadFile'), {
+          ElMessageBox.confirm(this.$t('tip.uploadFile'), {
             confirmButtonText: this.$t('tip.confirm'),
             cancelButtonText: this.$t('overall.cancel'),
             message: this.$t('tip.uploadFileTips'),
             title: this.$t('tip.uploadFile'),
-            type: 'warning',
+            // type: 'warning',
             iconClass: 'width:0px;height:0px;',
             customClass: 'del-model'
           }).then(() => {
@@ -670,6 +671,7 @@ export default {
         } else {
           this.isClick = true
           this.isShowUploadTips = false
+          self.$refs.upload.submit()
           self.$refs.upload.$refs.uploadRef.handleClick()
         }
       }
@@ -693,12 +695,12 @@ export default {
         } else {
           if (!this.isClick) {
             if (this.importedData.length > 0) {
-              this.$confirm(this.$t('tip.uploadFile'), {
+              ElMessageBox.confirm(this.$t('tip.uploadFile'), {
                 confirmButtonText: this.$t('tip.confirm'),
                 cancelButtonText: this.$t('overall.cancel'),
                 message: this.$t('tip.uploadFileTips'),
                 title: this.$t('tip.uploadFile'),
-                type: 'warning',
+                // type: 'warning',
                 iconClass: 'width:0px;height:0px;',
                 customClass: 'del-model'
               }).then(() => {
@@ -797,12 +799,12 @@ export default {
     cancel () {
       const self = this
       if (this.isPreviewChange) {
-        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(() => {
@@ -1441,7 +1443,22 @@ export default {
 </script>
 
 <style lang="scss">
+.el-overlay-message-box, .el-message-box {
+  padding: 0 !important;
+}
+.el-overlay-message-box {
+  text-align: center !important;
+}
+.is-message-box .el-overlay-message-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .del-model {
+  &.el-message-box {
+    max-width: 480px !important;
+  }
   display: flex;
   flex-direction: column;
   padding-bottom: 0 !important;
@@ -1455,8 +1472,8 @@ export default {
     height: 42px;
     background: #F7F7F7;
     box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
-    padding-left: 20px;
-    padding-top: 14px;
+    padding-left: 21px;
+    padding-top: 10px;
     padding-bottom: 14px;
 
     .el-message-box__headerbtn {
@@ -1466,7 +1483,7 @@ export default {
       align-items: center;
       font-size: 10px;
       line-height: 10px;
-      padding-right: 5px !important;
+      padding-right: 10px !important;
 
       i {
         width: 10px;
@@ -1489,9 +1506,9 @@ export default {
     letter-spacing: 0;
     line-height: 22px;
     font-weight: 400;
-    padding-top: 8px;
+    padding-top: 9px;
     padding-right: 20px;
-    padding-left: 20px;
+    padding-left: 21px;
 
     .el-message-box__message {
       padding-left: 0 !important;
@@ -1503,8 +1520,11 @@ export default {
     height: 52px;
     border-top: 1px solid #eee;
     box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
-    padding: 11px 0 12px !important;
+    padding: 13px 1px 12px 0;
 
+    .el-button {
+      font-size: 12px;
+    }
     .el-button--small {
       padding: 8px 21px !important;
       line-height: 12px;
diff --git a/src/views/setting/KnowledgeBaseUserDefinedList.vue b/src/views/setting/KnowledgeBaseUserDefinedList.vue
index fe3be3d8..51ead3be 100644
--- a/src/views/setting/KnowledgeBaseUserDefinedList.vue
+++ b/src/views/setting/KnowledgeBaseUserDefinedList.vue
@@ -68,6 +68,7 @@
              :title="$t('overall.hint')"
              width="480px"
              custom-class="del-model-hint"
+             class="del-model-hint"
              :before-close="handleClose">
     <div class="dialog-message">{{$t('knowledge.deleteDataHint')}}</div>
     <el-table v-model="delItemList"
diff --git a/src/views/system/Plugin.vue b/src/views/system/Plugin.vue
index fc5193e8..091c0404 100644
--- a/src/views/system/Plugin.vue
+++ b/src/views/system/Plugin.vue
@@ -71,7 +71,7 @@ export default {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       // this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.searchLabel = { ...this.searchLabel, jobGroup: 3 }
+      this.searchLabel = { ...this.searchLabel, jobGroup: 3, pageSize: -1 }
       this.isNoData = false
       this.toggleLoading(true)
       delete this.searchLabel.total

From 2a6f81454ea2e8bb11793e33f5399d3a0a77423a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 21 Feb 2024 10:42:24 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddetection=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9Epolicy=E6=97=B6=EF=BC=8C=E7=AC=AC=E4=B8=89=E6=AD=A5?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=97=B6=E9=97=B4=E4=B8=8B=E6=8B=89=E6=A1=86?=
 =?UTF-8?q?=E4=BC=9A=E6=8A=A5=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/detections/detectionPolicies/PolicyForm.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/detections/detectionPolicies/PolicyForm.vue b/src/views/detections/detectionPolicies/PolicyForm.vue
index dade6f5d..c19d3a66 100644
--- a/src/views/detections/detectionPolicies/PolicyForm.vue
+++ b/src/views/detections/detectionPolicies/PolicyForm.vue
@@ -170,7 +170,7 @@ export default {
   data () {
     const intervalValidator = (rule, value, callback) => {
       const obj = this.handleIntervalByDateType(rule, value, this.triggerObj.intervalVal)
-      if (!obj.flag && obj.msg) {
+      if (obj && !obj.flag && obj.msg) {
         callback(new Error(obj.msg))
       } else {
         callback()
@@ -178,7 +178,7 @@ export default {
     }
     const intervalValValidator = (rule, value, callback) => {
       const obj = this.handleIntervalByDateType(rule, this.triggerObj.intervalVal, value)
-      if (!obj.flag && obj.msg) {
+      if (obj && !obj.flag && obj.msg) {
         this.$refs.form3.validateField('interval')
         callback()
       } else {
@@ -187,7 +187,7 @@ export default {
     }
     const resetIntervalValidator = (rule, value, callback) => {
       const obj = this.handleIntervalByDateType(rule, value, this.triggerObj.resetIntervalVal)
-      if (!obj.flag && obj.msg) {
+      if (obj && !obj.flag && obj.msg) {
         callback(new Error(obj.msg))
       } else {
         callback()
@@ -195,7 +195,7 @@ export default {
     }
     const resetIntervalValValidator = (rule, value, callback) => {
       const obj = this.handleIntervalByDateType(rule, this.triggerObj.resetIntervalVal, value)
-      if (!obj.flag && obj.msg) {
+      if (obj && !obj.flag && obj.msg) {
         this.$refs.form3.validateField('resetInterval')
         callback()
       } else {

From 916ad6c387181e6ac74a9947f2091f462bd93474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Thu, 22 Feb 2024 16:47:53 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E6=9A=82=E6=97=B6=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98=E9=80=89=E9=A1=B9=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=B7=E6=96=B0=E6=97=B6=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=9A=82=E6=97=B6=E4=B8=BA=E9=BB=91=E8=89=B2=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                |  2 +-
 src/Login.vue                    |  1 +
 src/components/layout/Header.vue | 12 ++++++------
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 40c409e4..53327c82 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="" class="dark">
+<html lang="">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/Login.vue b/src/Login.vue
index 1dab0b6b..73597b8d 100644
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -242,6 +242,7 @@ export default {
 }
 .login--input {
   :deep .el-input__wrapper {
+    background-color: rgb(11, 50, 92) !important;
     box-shadow: none !important;
     //border-bottom: 1px solid rgba(103,179,245,0.65);
     border-bottom: 1px solid #295688;
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 3ccc4640..ac4010b5 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -35,12 +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-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>

From 7d9e8f27904e5fd5672380f0cf3cf0274f466e73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Thu, 22 Feb 2024 17:42:58 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dheader=E6=A0=8F?=
 =?UTF-8?q?=E7=9A=84=E5=88=87=E6=8D=A2=E8=AF=AD=E8=A8=80dropdown=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=8A=A8=E6=97=B6=E6=9C=89?=
 =?UTF-8?q?=E7=99=BD=E8=BE=B9=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/components/components/layout/layout.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss
index 7182c06c..54600cec 100644
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -166,6 +166,9 @@
         font-size: 12px;
       }
     }
+    .header-menu--item {
+      outline-style: initial;
+    }
   }
   .left-menu--pin {
     width: 20px;