diff --git a/src/assets/css/common/cover-element-plus.scss b/src/assets/css/common/cover-element-plus.scss
index d1450d49..bec0b6c0 100644
--- a/src/assets/css/common/cover-element-plus.scss
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -80,7 +80,6 @@
 }
 .el-switch {
   --el-switch-on-color: #38ACD2;
-  --el-switch-off-color: #C0CEDB;
 }
 //.el-button:hover {
 //  color: $--color-primary !important;
diff --git a/src/assets/css/components/components/entities/entities.scss b/src/assets/css/components/components/entities/entities.scss
index 635aafc8..cb0f7fba 100644
--- a/src/assets/css/components/components/entities/entities.scss
+++ b/src/assets/css/components/components/entities/entities.scss
@@ -1,3 +1,6 @@
+$color-white: var(--el-fill-color-blank);
+$color-primary: var(--el-text-color-primary); // 老版为#8FA1BE
+
 .cn-entities {
   display: grid;
   grid-template-rows: 40px auto;
@@ -13,20 +16,6 @@
     overflow: hidden;
     position: relative;
 
-    .entity__loading {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      z-index: 1;
-
-      i {
-        position: absolute;
-        left: calc(50% - 15px);
-        top: calc(50% - 15px);
-        font-size: 30px;
-        color: #aaa;
-      }
-    }
     .entity-list__content {
       display: flex;
       flex-wrap: wrap;
@@ -38,34 +27,35 @@
       width: calc(100% - 10px);
       overflow: hidden auto;
 
-      .cn-entity:hover{
-          box-shadow:  0 0 10px #ccc;
-        .content__title{
-          color: #ffffff !important;
+      .cn-entity:hover {
+        box-shadow: 0 0 10px var(--el-color-info-light-5);
+
+        .content__title {
+          color: $color-white !important;
         }
-        .cn-entity__header{
-          background: #FFFFFF;
+
+        .cn-entity__header {
+          background: $color-white;
         }
-        .header__icon{
-          background: #8FA1BE;
-          border: 2px solid #FFFFFF;
+
+        .header__icon {
+          background: $color-primary;
+          border: 2px solid $color-white;
         }
       }
+
       .cn-entity {
         box-sizing: border-box;
         margin: 0 10px 30px;
         width: 328px;
         height: 329px;
-        background: #FFFFFF;
+        background: $color-white;
         border-radius: 2px;
-        transition: all .2s;
+        transition: all var(--el-border-radius-base);
 
-        &:hover .cn-entity__header .header__content {
-
-        }
         .cn-entity__header {
           position: relative;
-          background-color: #FFFFFF;
+          background-color: $color-white;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -76,16 +66,16 @@
           transition: all var(--el-transition-duration-fast);
 
           .header__bottom__line {
-            width:288px;
-            height:1px;
-            border-top:solid 1px #eff2f5;
+            width: 288px;
+            height: 1px;
+            border-top: solid 1px var(--el-bg-color-page);
             position: absolute;
             top: 88px;
           }
 
           .header__icon {
-            overflow: hidden;
             position: absolute;
+            overflow: hidden;
             top: 20px;
             left: 20px;
             display: flex;
@@ -95,23 +85,24 @@
             width: 52px;
             height: 52px;
             border-radius: 50%;
-            background: #e8fbf9;
-            border: 2px solid #e8fbf9;
+            background: var(--el-color-primary-light-9);
+            border: 2px solid var(--el-color-primary-light-9);
 
             i {
               font-size: 22px;
             }
           }
+
           .header__content {
             font-size: 22px;
-            color: #333333;
+            color: var(--el-text-color-primary);
             font-weight: 500;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 
-            .content__desc{
-              color: #999999;
+            .content__desc {
+              color: var(--el-color-info);
               width: 200px;
               font-size: 12px;
               margin-top: 3px;
@@ -130,29 +121,33 @@
             }
           }
         }
+
         .cn-entity__body {
           overflow: hidden;
-          padding-top:10px;
+          padding-top: 10px;
           font-size: 14px;
           position: relative;
-          height:240px;
+          height: 240px;
 
           .body__row {
             display: flex;
             align-items: center;
             margin: 0 30px;
-            color: #666666;
+            color: var(--el-text-color-regular);
             padding: 5px 0;
             justify-content: left;
           }
+
           .body__drawing-box {
             position: relative;
             height: 100px;
+
             .chart__loading {
               top: 0;
               height: 100%;
             }
           }
+
           .body__drawing {
             position: absolute;
             padding: 10px 30px;
@@ -161,27 +156,30 @@
           }
 
           .body__row-label {
-            padding-right: 0px;
-            color: #999999;
+            padding-right: 0;
+            color: var(--el-color-info);
             font-size: 14px;
             font-weight: 400;
             white-space: nowrap;
             line-height: 16px;
+
             i {
               font-size: 13px;
-              color:#8FA1BE;
+              color: $color-primary;
               margin-right: 9px;
             }
           }
+
           .body__row-value {
             width: calc(100% - 69px);
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
             font-size: 14px;
-            color: #666666;
+            color: var(--el-text-color-regular);
             font-weight: 400;
           }
+
           .body__statics {
             position: absolute;
             bottom: 20px;
@@ -189,32 +187,34 @@
             width: 100%;
             padding: 0 30px;
             font-size: 14px;
-            color: #666666;
-            .entity-statics-down{
+            color: var(--el-text-color-regular);
+
+            .entity-statics-down {
               padding-right: 20px;
               min-width: 80px;
 
               i {
-                color:#5881B7;
-                font-size:14px;
-                padding-right:6px;
+                color: #5881B7; // card.vue里所带的样式，暂时保留，后续删除card.vue再将样式删除
+                font-size: 14px;
+                padding-right: 6px;
               }
             }
 
-            .entity-statics-up{
+            .entity-statics-up {
               padding-right: 20px;
               min-width: 80px;;
+
               i {
                 color: #62B16C;
                 font-size: 14px;
                 padding-right: 6px;
               }
-
             }
+
             .body__detail {
               cursor: pointer;
               font-size: 14px;
-              color: #8FA1BE;
+              color: $color-primary;
               position: absolute;
               right: 30px;
             }
@@ -222,6 +222,7 @@
         }
       }
     }
+
     .entity-list__pagination {
       display: flex;
       justify-content: center;
@@ -236,15 +237,6 @@
     }
   }
 }
-.ip-green {
-  color: #23BF9A;
-}
-.domain-blue {
-  color: #0290FF;
-}
-.app-orange {
-  color: #FFA200;
-}
 
 .entity-left-filter {
   display: flex;
@@ -252,18 +244,18 @@
   margin-top: 10px;
   width: 100%;
   height: 100%;
-  // border: 1px solid $--right-box-border-color;
   overflow: auto;
 
   .filter__header {
-    background-color: #E1E6ED;
+    background-color: var(--el-fill-color-darker);
     margin-bottom: 10px;
     padding-left: 8px;
     height: 36px;
     line-height: 36px;
-    color: #666;
+    color: var(--el-text-color-regular);
     font-size: 14px;
   }
+
   .filter__body {
     display: flex;
     flex-direction: column;
@@ -274,21 +266,25 @@
       .el-collapse-item {
         margin-bottom: 10px;
       }
+
       .el-collapse-item__header {
         padding-left: 15px;
         padding-top: 8px;
-        color: #8FA1BE;
+        color: $color-primary;
         border-bottom: none !important;
       }
+
       .collapse-header {
         display: flex;
         width: 100%;
-        border-bottom: 1px solid $--content-right-background-color;
+        border-bottom: 1px solid var(--el-bg-color-page);
       }
+
       .collapse-header__icon {
         padding-right: 6px;
         font-size: 14px;
       }
+
       .el-collapse-item__wrap {
         padding-top: 14px !important;
 
@@ -296,18 +292,21 @@
           padding-bottom: 15px;
 
           .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-            background-color: $--tree-node-hover-background-color;
+            background-color: var(--el-bg-color-page);
           }
+
           .el-tree-node.is-expanded, .el-tree-node.is-current {
-            &>.el-tree-node__content>.filter-item {
+            & > .el-tree-node__content > .filter-item {
               font-weight: bold;
             }
           }
+
           .el-tree-node__content {
             height: 30px;
             padding-right: 10px;
           }
         }
+
         .filter-item {
           display: flex;
           justify-content: space-between;
@@ -320,14 +319,16 @@
             text-overflow: ellipsis;
           }
         }
+
         .filter__more {
           padding-left: 24px;
           line-height: 36px;
-          color: #8FA1BE;
+          color: $color-primary;
           cursor: pointer;
         }
+
         .filter__more.filter__more--disabled {
-          color: #ccc;
+          color: var(--el-color-info-light-5);
           cursor: default;
         }
       }
diff --git a/src/assets/css/components/components/rightBox/administration/chart-box.scss b/src/assets/css/components/components/rightBox/administration/chart-box.scss
index e1c6362f..a4b7efdd 100644
--- a/src/assets/css/components/components/rightBox/administration/chart-box.scss
+++ b/src/assets/css/components/components/rightBox/administration/chart-box.scss
@@ -1,6 +1,6 @@
 .my-editor {
   margin-top: 4px;
-  border: 1px solid $--right-box-border-color;
+  border: 1px solid var(--el-border-color-light);
 
   .prism-editor__textarea {
     outline: none;
diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 3879a517..d0d64286 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -103,3 +103,5 @@
 @import "views/detections/detection-table";
 @import "views/detections/detection-create/detection-form";
 @import "views/detections/detection-create/detection-form-setting";
+
+@import "views/entityExplorer/helper-info";
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 2443dc8e..9b9d4246 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,3 +1,10 @@
+$color-primary: var(--el-text-color-primary);
+$fill-color-light: var(--el-fill-color-light);
+$color-regular: var(--el-text-color-regular);
+$border-color-light: var(--el-border-color-light);
+$fill-color-blank: var(--el-fill-color-blank);
+$color-info-light: var(--el-color-info-light-7);
+
 .form-setting__block {
   width: 620px;
 
@@ -5,13 +12,16 @@
     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;
+    color: $color-primary;
   }
+
   .el-form-item__label {
     height: 14px;
     line-height: 14px;
@@ -19,7 +29,7 @@
     margin-bottom: 12px;
     font-family: NotoSansHans-Medium;
     font-size: 14px;
-    color: #333333;
+    color: $color-primary;
     font-weight: 500;
   }
 
@@ -32,8 +42,8 @@
     width: 300px;
     height: 125px;
     padding: 16px;
-    background: #FFFFFF;
-    border: 1px solid rgba(226, 229, 236, 1);
+    background: $fill-color-blank;
+    border: 1px solid $border-color-light;
     border-radius: 2px;
     margin-right: 20px;
     display: flex;
@@ -59,7 +69,7 @@
       .block-mode-title {
         font-family: NotoSansSChineseRegular;
         font-size: 14px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         line-height: 14px;
       }
@@ -67,7 +77,7 @@
       .block-mode-content {
         font-family: NotoSansSChineseRegular;
         font-size: 12px;
-        color: #717171;
+        color: $color-regular;
         line-height: 15px;
         font-weight: 400;
         margin: 10px 0;
@@ -78,19 +88,19 @@
         height: 28px;
         line-height: 28px;
         text-align: center;
-        background: #F5F6F7;
+        background: $fill-color-light;
         border-radius: 2px;
         font-family: NotoSansHans-Medium;
         font-size: 12px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 500;
         cursor: pointer;
-        transition: all 0.2s;
+        transition: all var(--el-transition-duration-fast);
       }
 
       .block-mode-btn-active {
-        background: #7E9F54;
-        color: #FFFFFF;
+        background: var(--el-color-success);
+        color: $fill-color-blank;
       }
     }
   }
@@ -99,7 +109,7 @@
     font-family: NotoSansHans-Medium;
     font-size: 14px;
     line-height: 14px;
-    color: #333333;
+    color: $color-primary;
     font-weight: 500;
     margin-bottom: 12px;
   }
@@ -108,7 +118,7 @@
     font-family: NotoSansHans-Medium;
     font-size: 12px;
     line-height: 12px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 500;
     margin-bottom: 12px;
   }
@@ -143,7 +153,7 @@
   .el-switch__label, .form-setting__block .el-switch__label {
     font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 400;
   }
 
@@ -151,7 +161,7 @@
     width: 620px;
     height: 24px;
     line-height: 24px;
-    border: 1px solid #e2e5ec;
+    border: 1px solid $border-color-light;
     display: flex;
     align-items: center;
 
@@ -159,12 +169,12 @@
       width: auto;
       height: 19px;
       line-height: 19px;
-      background: #E5E8EB;
+      background: var(--el-fill-color-darker);
       border-radius: 2px;
       opacity: 0.6;
       font-family: NotoSansSChineseRegular;
       font-size: 12px;
-      color: #353636;
+      color: $color-primary;
       font-weight: 400;
       margin-right: 4px;
     }
@@ -183,13 +193,13 @@
 
   .block-key {
     height: 28px;
-    background: #F5F8FA;
-    border: 1px solid rgba(222, 222, 222, 1);
+    background: $fill-color-light;
+    border: 1px solid $color-info-light;
     box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
     border-radius: 2px;
     font-family: NotoSansHans-Medium;
     font-size: 12px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 500;
     margin-left: 12px;
     display: flex;
@@ -200,7 +210,7 @@
     i {
       font-size: 12px;
       margin-right: 4px;
-      color: #575757;
+      color: $color-regular;
     }
   }
 }
@@ -215,25 +225,27 @@
     height: 30px !important;
     min-height: 30px !important;
     line-height: 30px !important;
-    background: #38ACD2;
-    border: 1px solid rgba(46, 136, 166, 1);
+    background: var(--el-color-business);
+    border: 1px solid var(--el-color-business-dark-1);
     border-radius: 2px;
     font-family: NotoSansHans-Medium;
     font-size: 12px;
-    color: #FFFFFF;
+    color: $fill-color-blank;
     font-weight: 500;
     padding: 0 14px;
   }
 
   .btn1 {
     margin-right: 10px;
+
     .el-button {
-      background: #F5F6F7;
-      border: 1px solid rgba(215,215,215,1);
-      color: #353636;
+      background: $fill-color-light;
+      border: 1px solid var(--el-border-color-dark);
+      color: $color-primary;
     }
   }
 }
+
 .policy-form__footer__btn {
   justify-content: center;
   margin-top: 8px;
@@ -242,6 +254,7 @@
     margin-right: 16px;
   }
 }
+
 .form-setting__btn1, .policy-form__footer__btn {
   .el-button {
     padding: 0 11px !important;
@@ -254,12 +267,12 @@
   right: 0;
 
   .el-input__inner {
-    border-color: #DEDEDE !important;
+    border-color: $color-info-light !important;
   }
 }
 
 .definition-filter-block {
-  border: 1px #E2E5EC solid;
+  border: 1px $border-color-light solid;
   min-height: 196px;
   display: flex;
   flex-direction: column;
@@ -288,7 +301,7 @@
     i {
       font-size: 12px !important;
       font-variant-caps: all-small-caps;
-      color: #575757;
+      color: $color-regular;
       cursor: pointer;
     }
   }
@@ -304,7 +317,7 @@
     i {
       font-size: 12px;
       font-variant-caps: all-small-caps;
-      color: #575757;
+      color: $color-regular;
       cursor: pointer;
     }
   }
@@ -313,11 +326,11 @@
 .block-filter-add {
   height: 24px;
   line-height: 24px;
-  background: #F5F8FA;
-  border: 1px solid rgba(222, 222, 222, 1);
+  background: $fill-color-light;
+  border: 1px solid $color-info-light;
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
   border-radius: 2px;
-  color: #575757;
+  color: $color-regular;
   text-align: center;
   cursor: pointer;
 }
@@ -326,7 +339,7 @@
   width: 396px;
 
   .el-drawer__body {
-    border: 1px #E2E5EC solid;
+    border: 1px $border-color-light solid;
   }
 
   .el-overlay {
@@ -348,8 +361,8 @@
       font-family: NotoSansHans-Medium;
       font-weight: 500;
       padding: 0 0 0 12px;
-      color: #353636;
-      background: #F9F9F9;
+      color: $color-primary;
+      background: var(--el-fill-color-lighter);
       height: 30px;
       border: 0 !important;
     }
@@ -359,26 +372,26 @@
       font-weight: 400;
       padding: 0 0 0 12px;
       font-size: 14px;
-      color: #353636;
+      color: $color-primary;
       height: 28px;
       border: 0 !important;
     }
 
     .el-table::before {
-      background-color: #FFFFFF;
+      background-color: $fill-color-blank;
     }
   }
 }
 
 .definition-condition-block {
-  border: 1px #E2E5EC solid;
+  border: 1px $border-color-light solid;
   padding: 20px;
   margin-bottom: 10px;
 
   .condition-title {
     font-family: NotoSansHans-Medium;
     font-size: 14px;
-    color: #333333;
+    color: $color-primary;
     font-weight: 500;
     margin-bottom: 12px;
     height: 14px;
@@ -405,7 +418,7 @@
   .condition-metric {
     font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 400;
     display: flex;
     flex-direction: column;
@@ -420,7 +433,7 @@
         height: 24px;
         font-family: NotoSansSChineseRegular;
         font-size: 14px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         display: flex;
       }
@@ -432,12 +445,12 @@
       }
 
       .metric-item1-close {
-        color: #E26154;
+        color: var(--el-color-danger);
         margin-left: 12px;
       }
 
       .metric-item1-close-disable {
-        color: #ecb2ad;
+        color: var(--el-color-error-light-5);
         margin-left: 12px;
         cursor: no-drop;
       }
@@ -497,13 +510,13 @@
 .condition-add {
   width: 100%;
   height: 24px;
-  background: #F5F8FA;
-  border: 1px solid rgba(222, 222, 222, 1);
+  background: $fill-color-light;
+  border: 1px solid $color-info-light;
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
   border-radius: 2px;
   font-family: NotoSansHans-Medium;
   font-size: 12px;
-  color: #353636;
+  color: $color-primary;
   font-weight: 500;
   cursor: pointer;
   display: flex;
@@ -519,13 +532,13 @@
 }
 
 .condition-divider {
-  border: 1px #ECECEC dashed;
+  border: 1px var(--el-color-info-light-8) dashed;
 
   .el-divider__text {
     padding: 0 4px;
     font-family: NotoSansSChineseRegular;
     font-size: 12px;
-    color: #BEBEBE;
+    color: var(--el-text-color-disabled);
     font-weight: 400;
   }
 }
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 f8917956..ac586dec 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
@@ -191,106 +191,5 @@ $bg-color-page: var(--el-bg-color-page);
 
   .el-switch {
     --el-switch-on-color: var(--el-color-business);
-    --el-switch-off-color: #C0CEDB;
-  }
-
-  .del-model {
-    &.el-message-box {
-      max-width: 480px !important;
-    }
-
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 0 !important;
-    width: 480px !important;
-    height: 190px;
-
-    .el-message-box__header {
-      display: flex;
-      flex-direction: row;
-      border-bottom: 1px solid var(--el-border-color-lighter);
-      height: 42px;
-      background: var(--cn-bg-color-lighter);
-      box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
-      padding-left: 21px;
-      padding-top: 10px;
-      padding-bottom: 14px;
-
-      .el-message-box__headerbtn {
-        display: flex !important;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
-        font-size: 10px;
-        line-height: 10px;
-        padding-right: 10px !important;
-
-        i {
-          width: 10px;
-          height: 10px;
-        }
-      }
-
-      .el-message-box__title {
-        font-size: 14px !important;
-        color: $text-color-primary;
-        letter-spacing: 0;
-        font-weight: 400;
-      }
-    }
-
-    .el-message-box__content {
-      height: 96px;
-      font-size: 14px;
-      color: $text-color-primary;
-      letter-spacing: 0;
-      line-height: 22px;
-      font-weight: 400;
-      padding-top: 9px;
-      padding-right: 20px;
-      padding-left: 21px;
-
-      .el-message-box__message {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-      }
-    }
-
-    .el-message-box__btns {
-      height: 52px;
-      border-top: 1px solid var(--el-border-color-lighter);
-      box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
-      padding: 13px 1px 12px 0 !important;
-
-      .el-button {
-        font-size: 12px;
-      }
-
-      .el-button--small {
-        padding: 8px 21px !important;
-        line-height: 12px;
-        font-size: 12px;
-        font-weight: 500;
-        min-height: 28px;
-      }
-
-      .el-button:nth-child(1) {
-        margin-right: 20px;
-        width: 80px;
-        height: 28px;
-        color: $text-color-primary;
-      }
-
-      .el-button:nth-child(2) {
-        width: 80px;
-        height: 28px;
-        margin-right: 20px;
-        margin-left: 0 !important;
-        //background-color: #2d8cf0;
-        //border-color: #2d8cf0;
-        background-color: var(--el-color-business);
-        border-color: var(--el-color-business);
-      }
-    }
   }
 }
diff --git a/src/assets/css/components/views/detections/detection-drawer.scss b/src/assets/css/components/views/detections/detection-drawer.scss
index ac5fa316..beb6afbf 100644
--- a/src/assets/css/components/views/detections/detection-drawer.scss
+++ b/src/assets/css/components/views/detections/detection-drawer.scss
@@ -114,7 +114,7 @@ $text-color-primary: var(--el-text-color-primary);
         margin-bottom: 20px;
 
         .trigger__value {
-          color: #046ECA;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/src/assets/css/components/views/detections/detection-list/detection-list.scss b/src/assets/css/components/views/detections/detection-list/detection-list.scss
index e19a8e86..f707e33e 100644
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/src/assets/css/components/views/detections/detection-list/detection-list.scss
@@ -4,21 +4,6 @@
   flex: 1;
   position: relative;
 
-  .detection__loading {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-
-    i {
-      position: absolute;
-      left: calc(50% - 15px);
-      top: calc(50% - 15px);
-      font-size: 30px;
-      color: #aaa;
-    }
-  }
-
   .detection-list__content {
     height: 100%;
     width: 100%;
@@ -34,6 +19,7 @@
       height: 100%;
       overflow: auto;
     }
+
     .detection-list--list {
       display: flex;
       flex-direction: column;
@@ -43,7 +29,7 @@
       .cn-detection__shadow, .new-cn-detection__shadow {
         position: fixed;
         height: 100vh;
-        width:100vw;
+        width: 100vw;
         left: 0;
         top: 0;
         z-index: 1;
@@ -56,8 +42,7 @@
     }
   }
 
-
-  .detection__pagination{
+  .detection__pagination {
     position: absolute;
     bottom: 9px;
     height: 40px;
diff --git a/src/assets/css/components/views/detections/detection-overview.scss b/src/assets/css/components/views/detections/detection-overview.scss
index 4fef00aa..6e6fae63 100644
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -1,7 +1,6 @@
 $color-primary: var(--el-color-primary);
-$color-primary1: #1890FF;
 $color-regular: var(--el-text-color-regular);
-//$color-primary: var(--el-color-primary);
+
 .detection-detail-overview {
   display: flex;
   position: relative;
@@ -78,13 +77,13 @@ $color-regular: var(--el-text-color-regular);
         &.row__content--link {
           font-style: italic;
           text-decoration: underline;
-          color: $color-primary1;
+          color: $color-primary;
           cursor: pointer;
         }
         .row__content--link{
           font-style: italic;
           text-decoration: underline;
-          color: $color-primary1;
+          color: $color-primary;
           cursor: pointer;
         }
         span{
@@ -93,13 +92,13 @@ $color-regular: var(--el-text-color-regular);
         }
         .row__content--span {
           font-style: italic;
-          color: $color-primary1;
+          color: $color-primary;
         }
 
         .row__content__icon {
           font-size: 14px;
           margin-right: 5px;
-          color: $color-primary1;
+          color: $color-primary;
         }
 
         .row__content__svg {
diff --git a/src/assets/css/components/views/entityExplorer/entity-detail.scss b/src/assets/css/components/views/entityExplorer/entity-detail.scss
index b38eb36f..c3061f3b 100644
--- a/src/assets/css/components/views/entityExplorer/entity-detail.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-detail.scss
@@ -15,158 +15,59 @@
       padding: 0 6px;
       font-size: 12px;
     }
-    $normal-color: #778391;
-    $normal-light-color: #F7F8F9;
-    $negative-color: #E26154;
+
+    $normal-color: #778391; // 颜色暂时保留
+    $normal-light-color: var(--el-fill-color-light);
+    $negative-color: var(--el-color-danger);
     $negative-light-color: #FEF6F5;
-    $positive-color: #749F4D;
+    $positive-color: var(--el-color-success);
     $positive-light-color: #F7FAF5;
+    $color-white: var(--el-color-white);
+
     &.entity-tag--level-one-normal {
       border-color: $normal-color;
-      color: white;
+      color: $color-white;
       background-color: $normal-color;
     }
+
     &.entity-tag--level-one-negative {
       border-color: $negative-color;
-      color: white;
+      color: $color-white;
       background-color: $negative-color;
     }
+
     &.entity-tag--level-one-positive {
       border-color: $positive-color;
-      color: white;
+      color: $color-white;
       background-color: $positive-color;
     }
+
     &.entity-tag--level-two-normal {
       border-color: $normal-color;
       color: $normal-color;
       background-color: $normal-light-color;
     }
+
     &.entity-tag--level-two-negative {
       border-color: $negative-color;
       color: $negative-color;
       background-color: $negative-light-color;
     }
+
     &.entity-tag--level-two-positive {
       border-color: $positive-color;
       color: $positive-color;
       background-color: $positive-light-color;
     }
+
     &.entity-tag--level-two-negative-no-background {
       border-color: $negative-color;
       color: $negative-color;
     }
+
     &.entity-tag--level-two-positive-no-background {
       border-color: $positive-color;
       color: $positive-color;
     }
   }
 }
-/*
-.entity-detail.cn-home {
-  .panel-chart {
-    width: 100%;
-  }
-
-  flex-direction: column;
-
-  .entity-detail__header {
-    flex: 0 0 80px;
-    display: flex;
-    align-items: center;
-
-    .cn-entity__name {
-      font-size: 20px;
-      color: #333333;
-      font-weight: bold;
-    }
-    .cn-entity__icon {
-      margin-left: 26px;
-      margin-right: 10px;
-      overflow: hidden;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 52px;
-      height: 52px;
-      border-radius: 50%;
-      background-color: #F3F7FA;
-
-      i {
-        font-size: 26px;
-        color: #4E84B4;
-      }
-    }
-  }
-  &>.entity-detail__body {
-    width: 100%;
-    height: calc(100% - 52px);
-    display: flex;
-    flex-direction: row;
-
-    .cn-panel2 .chart-list {
-      .vue-grid-layout .vue-grid-item {
-        .panel-chart-group.panel-chart {
-          .panel-chart {
-            border: none;
-            box-shadow: none;
-            .chart-header {
-              border: none;
-            }
-          }
-        }
-      }
-    }
-
-    .entity-detail__menu {
-      flex: 0 0 240px;
-      display: flex;
-      flex-direction: column;
-      padding-top: 23px;
-      border-top: 1px solid $--content-right-background-color;
-
-      .menu-item {
-        display: flex;
-        align-items: center;
-        padding: 7px 0 7px 30px;
-        font-size: 14px;
-        color: #666666;
-
-        span {
-          padding-left: 10px;
-          cursor: pointer;
-        }
-
-        &.menu-item--active {
-          color: #1890FF;
-
-          span {
-            border-left: 2px solid #1890FF;
-          }
-        }
-      }
-    }
-    .entity-detail__content {
-      height: calc(100% - 28px);
-      flex: 1;
-      padding: 10px;
-      overflow: auto;
-      //background-color: $--content-right-background-color;
-      background-color: rgb(239, 242, 245);
-
-      &>.cn-entity-detail .entity-detail__body>.cn-panel2 {
-        .panel-chart {
-          .chart-header.panel-chart-block {
-            border: none;
-          }
-        }
-        .panel-chart-table.panel-chart {
-          .cn-chart {
-            height: calc(100% - 47px) !important;
-          }
-        }
-      }
-    }
-  }
-}
-*/
diff --git a/src/assets/css/components/views/entityExplorer/helper-info.scss b/src/assets/css/components/views/entityExplorer/helper-info.scss
new file mode 100644
index 00000000..0c9f4d5f
--- /dev/null
+++ b/src/assets/css/components/views/entityExplorer/helper-info.scss
@@ -0,0 +1,50 @@
+.helper-info {
+  min-width: 450px;
+  background-color: var(--el-fill-color-blank);
+  height: 294px;
+  box-sizing: border-box;
+  overflow: auto;
+  z-index: 99;
+
+  .tips-container {
+    padding: 12px;
+
+    ul li {
+      list-style: inside;
+      line-height: 20px;
+    }
+
+    h3 {
+      margin: 8px 0;
+      line-height: 22px;
+    }
+
+    p {
+      line-height: 22px;
+      word-break: break-all;
+    }
+
+    code, .code {
+      background: initial;
+      border: 1px solid var(--el-color-info-light-7);
+      height: 24px;
+      line-height: 24px;
+      padding: 0 12px;
+      margin: 6px 0;
+      display: block;
+    }
+
+    .sub-url {
+      padding-left: 18px;
+    }
+
+    .sub-url li {
+      list-style: inside circle;
+    }
+
+    i.ref-txt {
+      line-height: 20px;
+      color: var(--el-text-color-placeholder);
+    }
+  }
+}
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 00fa5654..decc6ae9 100644
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -106,47 +106,6 @@
         border-radius: 2px;
         background-color: var(--el-fill-color-blank);
 
-        /* .history__items {
-          max-height: 300px;
-          overflow: auto;
-          .history__item {
-            height: 35px;
-            display: flex;
-            align-items: center;
-            padding-left: 30px;
-            font-weight: normal;
-            font-size: 14px;
-            flex-shrink: 0;
-
-            &.clear-all span {
-              cursor: pointer;
-            }
-            div {
-              color: #999;
-              border: 1px red solid;
-            }
-            .item-date {
-              color: #bbb;
-              padding: 0 20px 0 0;
-            }
-            .item-value {
-              flex-basis: calc(100% - 200px);
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              word-break: break-all;
-              color: #444;
-            }
-          }
-          .history__item {
-            cursor: pointer;
-          }
-          .history__item:hover {
-            background-color: #ecf5ff;
-            color: #66b1ff;
-          }
-        } */
-
         .history__items-new {
           max-height: 300px;
           overflow: auto;
diff --git a/src/components/advancedSearch/showhint/Hint/HelperInfo.vue b/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
index 4a105daf..ee3b2976 100644
--- a/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
+++ b/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="HelperInfo">
+  <div class="helper-info">
     <div class="tips-container">
       <Renderer ref="renderVm" :renderProps="renderProps" :renderFun="helperDataFun"></Renderer>
     </div>
@@ -12,7 +12,6 @@ import defaultTips from '@/components/advancedSearch/showhint/const/defaultTips.
 import sqlTips from '@/components/advancedSearch/showhint/const/sqlTips.js'
 import functionTips from '@/components/advancedSearch/showhint/const/functionTips.js'
 import filterTips from '@/components/advancedSearch/showhint/const/filterTips.js'
-import varTips from '@/components/advancedSearch/showhint/const/varTips.js'
 
 import { fieldRender } from '@/components/advancedSearch/showhint/const/fieldTips.js'
 import { EN, storageKey, ZH } from '@/utils/constants'
@@ -115,57 +114,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .HelperInfo {
-    min-width: 450px;
-    background-color: #fff;
-    height: 294px;
-    box-sizing: border-box;
-    overflow: auto;
-    z-index: 99;
-  }
-
-  .tips-container {
-    padding: 12px;
-  }
-
-  /deep/ ul li {
-    list-style: inside;
-    line-height: 20px;
-  }
-
-  /deep/ h3 {
-    margin: 8px 0;
-    line-height: 22px;
-  }
-
-  /deep/ p {
-    line-height: 22px;
-    word-break: break-all;
-  }
-
-  /deep/ code,
-  .code {
-    background: initial;
-    border: 1px solid #DEDEDE;
-    height: 24px;
-    line-height: 24px;
-    padding: 0 12px;
-    margin: 6px 0;
-    display: block;
-  }
-
-  /deep/ .sub-url {
-    padding-left: 18px;
-  }
-
-  /deep/ .sub-url li {
-    list-style: inside circle;
-  }
-
-  /deep/ i.ref-txt {
-    line-height: 20px;
-    color: #aaa;
-  }
-</style>