diff --git a/src/assets/css/common/right-box-common.scss b/src/assets/css/common/right-box-common.scss
index 79207849..3876f5a7 100644
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -73,10 +73,6 @@ $border-radius-small: 2px;
       }
     }
 
-    .container__form {
-
-    }
-
     .el-form-item__content {
       .input-box {
         .el-textarea {
@@ -369,7 +365,6 @@ $border-radius-small: 2px;
 
   .el-switch {
     --el-switch-on-color: #699DC9;
-    --el-switch-off-color: #C0CEDB;
   }
 
   .el-textarea__inner {
diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 0a401d4a..8479b537 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -54,6 +54,10 @@
     }
 
     .top-tool-search {
+      .top-tool-search__display {
+        display: flex;
+      }
+
       .top-tool-btn {
         border-left: none;
       }
@@ -73,6 +77,10 @@
         }
       }
 
+      .top-tool-btn__border {
+        border-radius: 0 2px 2px 0 !important;
+      }
+
       .top-tool-btn--search:hover {
         border-left: none !important;
       }
@@ -103,6 +111,7 @@
 
     .top-tool-left {
       display: flex;
+      min-width: 300px;
     }
 
     .top-tool-btn-group {
@@ -265,40 +274,6 @@
   }
 }
 
-/*.operation-dropdown-text {
-  display: inline-block;
-  font-size: 13px;
-}
-
-.search-box {
-  padding: 0 20px 20px;
-}
-.click-search-dropdown {
-  width: calc(100% - 300px) !important;
-  left: 270px !important;
-  margin-top: -3px !important;
-  box-shadow: none;
-
-  border-radius: 0;
-  border-color: #c7c7c7;
-
-  .popper__arrow {
-    display: none;
-  }
-  .el-cascader-menu__list {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    max-height: 120px;
-  }
-}
-.el-popper.el-cascader__dropdown.click-search-dropdown::after {
-  content: '';
-  position: absolute;
-  top: -1px;
-  height: 1px;
-  background-color: white;
-}*/
 .col-resize-area {
   position: absolute;
   top: 0;
@@ -341,10 +316,10 @@
 }
 
 .padding-r-20 {
-  padding-right: 20px
+  padding-right: 20px;
 }
 
 .tooltip-column-name {
-  color: #aeb0b9;
+  color: var(--el-color-info-light-3);
   height: 40px;
 }
diff --git a/src/assets/css/components/components/common/chart-tab.scss b/src/assets/css/components/components/common/chart-tab.scss
index df0019cd..e3036862 100644
--- a/src/assets/css/components/components/common/chart-tab.scss
+++ b/src/assets/css/components/components/common/chart-tab.scss
@@ -5,10 +5,11 @@
     position: absolute;
     height: 3px;
     top: 0;
-    background-color: #046EC9;
+    background-color: var(--el-color-primary);
     border-radius: 5px 5px 0 0;
-    transition: all linear .2s;
+    transition: all linear var(--el-transition-duration-fast);
   }
+
   .el-tabs.el-tabs--border-card {
     position: absolute;
     top: 3px;
@@ -16,22 +17,24 @@
     border: none;
     box-shadow: none;
 
-    &>.el-tabs__header {
-      //background-color: white;
-      background-color: $--select-bg-color-1;
-      border-color: $--border-color-2;
+    & > .el-tabs__header {
+      background-color: var(--el-fill-color-blank);
+      border-color: var(--el-border-color-light);
 
       .el-tabs__nav-wrap {
         padding-left: 27px;
       }
+
       .el-tabs__item:first-child {
         margin-left: 0;
       }
     }
+
     .el-tabs__content {
       display: none;
     }
   }
+
   .el-tabs__nav {
     z-index: 1;
     display: inline-block;
@@ -42,7 +45,7 @@
     line-height: 35px;
 
     .chart-tabs__label {
-      color: $--text-color-1;
+      color: var(--el-text-color-primary);
       font-size: 14px;
       font-weight: bold;
       box-sizing: border-box;
@@ -53,12 +56,13 @@
         font-weight: normal;
       }
     }
+
     &.is-active {
       .chart-tabs__label {
-        color: $--text-color-1;
+        color: var(--el-text-color-primary);
 
         i {
-          color: #046EC9;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/src/assets/css/components/components/common/pagination.scss b/src/assets/css/components/components/common/pagination.scss
index 0e47c661..21cbadfd 100644
--- a/src/assets/css/components/components/common/pagination.scss
+++ b/src/assets/css/components/components/common/pagination.scss
@@ -1,125 +1,56 @@
-//.pagination {
-//  padding-top: 8px;
-//  text-align: center;
-//  max-height: 42px;
-//
-//  .el-pagination {
-//    max-height: 42px;
-//    padding-right: 0;
-//  }
-//  .pagination-size-select .el-input--small .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;
-//  }
-//}
-
 .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;
+    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: 1px solid rgba(154, 154, 154, 0.20);
     border-radius: 2px;
   }
+
   .el-pagination .btn-prev {
-    background-color: $--content-right-background-color !important;
+    background-color: var(--el-bg-color-page) !important;
   }
+
   .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
-    color: #666666;
+    color: var(--el-text-color-regular);
     letter-spacing: 0;
-    font-weight:normal;
+    font-weight: normal;
   }
+
   .btn-next, .btn-prev {
-    background-color: $--content-right-background-color !important;
+    background-color: var(--el-bg-color-page) !important;
   }
+
   .el-pager li.is-active {
-    background-color: #699dc9;
-    color: #fff;
+    background-color: var(--el-color-business);
+    color: var(--el-color-white);
     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{
+
+  .pagination-size-select .el-select__wrapper {
     width: 100px;
     height: 20px;
     line-height: 20px;
@@ -129,11 +60,11 @@
     font-size: 12px;
     border-radius: 2px;
   }
+
   .el-select__suffix {
     svg {
       width: 12px;
       height: 12px;
     }
   }
-  //el-icon el-select__caret el-select__icon
 }
diff --git a/src/assets/css/components/views/administration/AdministrationTabs.scss b/src/assets/css/components/views/administration/AdministrationTabs.scss
index 2435b86b..28250d19 100644
--- a/src/assets/css/components/views/administration/AdministrationTabs.scss
+++ b/src/assets/css/components/views/administration/AdministrationTabs.scss
@@ -2,6 +2,12 @@
   .administration-tabs {
     height: 18px;
   }
+
+  .administration__tabs {
+    width: 100%;
+    padding-bottom: 26px;
+  }
+
   .administration-container {
     height: calc(100% - 86px);
     flex-direction: column;
@@ -10,10 +16,15 @@
     .list-page {
       .main-container {
         padding: 0;
+
         .cn-pagination {
           height: 34px;
         }
       }
     }
+
+    .administration-container__body {
+      height: 100%;
+    }
   }
 }
diff --git a/src/assets/css/components/views/administration/Appearance.scss b/src/assets/css/components/views/administration/Appearance.scss
index 2af45dcd..5714a740 100644
--- a/src/assets/css/components/views/administration/Appearance.scss
+++ b/src/assets/css/components/views/administration/Appearance.scss
@@ -1,20 +1,24 @@
-.appearance{
+.appearance {
   height: 100%;
-  display:flex;
-  flex-direction:column;
+  display: flex;
+  flex-direction: column;
+
   .appearance-form {
-    padding-top:40px;
-    padding-left:100px;
-    background-color: white;
+    padding-top: 40px;
+    padding-left: 100px;
+    background-color: var(--el-fill-color-blank);
     position: relative;
     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;
@@ -22,53 +26,66 @@
         font-size: 13px;
       }
     }
+
     .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
       margin-bottom: 4px;
     }
+
     .el-input {
-      width:600px;
+      width: 600px;
     }
+
     .el-form .el-form-item .el-form-item__label {
       padding-bottom: 6px;
       font-size: 14px;
       line-height: 16px;
     }
+
+    .appearance__option {
+      display: flex;
+      justify-content: space-between;
+    }
   }
+
   .edit-appearance-base__footer {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: 100px;
     margin-top: 3px;
-    padding-left:200px;
+    padding-left: 200px;
 
     .footer__btn {
       margin: 0 10px;
       height: 30px;
       min-width: 74px;
       padding: 0 15px;
-      color: white;
-      background-color: #38ACD2;
+      color: var(--el-color-white);
+      background-color: var(--el-color-business);
       border: none;
-      border-radius: 4px;
+      border-radius: var(--el-border-radius-base);
       outline: none;
       font-size: 14px;
       cursor: pointer;
-      transition: background-color linear .2s, color linear .1s;
+      transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
     }
+
     .footer__btn:hover:not(.footer__btn--disabled) {
       background-color: lighten(#38ACD2, 10%);
     }
+
     .footer__btn--light {
-      background-color: #F5F6F7;
-      border: 1px solid $--border-color-primary;
-      color: #333;
+      background-color: var(--el-fill-color-light);
+      border: 1px solid var(--el-color-info-light-7);
+      color: var(--el-text-color-primary);
     }
+
     .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-      background-color: white;
+      background-color: var(--el-fill-color-blank);
       border-color: lighten(#38ACD2, 40%);
-      color: #38ACD2;
+      color: var(--el-color-business);
     }
+
     .footer__btn--disabled {
       opacity: .6;
       cursor: default;
diff --git a/src/assets/css/components/views/administration/License.scss b/src/assets/css/components/views/administration/License.scss
index eb0a7975..558ee961 100644
--- a/src/assets/css/components/views/administration/License.scss
+++ b/src/assets/css/components/views/administration/License.scss
@@ -1,43 +1,50 @@
-.license{
+.license {
   height: 100%;
+
   .license-form {
-    padding-top:40px;
-    padding-left:100px;
-    background-color: white;
+    padding-top: 40px;
+    padding-left: 100px;
+    background-color: var(--el-fill-color-blank);
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
+
     .license-file {
       display: flex;
       flex-direction: row;
       height: 100%;
       margin-top: 3px;
+
       .license__btn {
         height: 30px;
         min-width: 74px;
-        color: white;
-        background-color: #38ACD2;
+        color: var(--el-color-white);
+        background-color: var(--el-color-business);
         border: none;
-        border-radius: 4px;
+        border-radius: var(--el-border-radius-base);
         outline: none;
         font-size: 14px;
         cursor: pointer;
-        transition: background-color linear .2s, color linear .1s;
+        transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
       }
+
       .license__btn:hover:not(.footer__btn--disabled) {
         background-color: lighten(#38ACD2, 10%);
       }
+
       .license__btn--light {
-        background-color: #F5F6F7;
-        border: 1px solid $--border-color-primary;
-        color: #333;
+        background-color: var(--el-fill-color-light);
+        border: 1px solid var(--el-color-info-light-7);
+        color: var(--el-text-color-primary);
       }
+
       .license__btn.license__btn--light:hover:not(.license__btn--disabled) {
-        background-color: white;
+        background-color: var(--el-fill-color-blank);
         border-color: lighten(#38ACD2, 40%);
-        color: #38ACD2;
+        color: var(--el-color-business);
       }
+
       .license__btn--disabled {
         opacity: .6;
         cursor: default;
@@ -46,15 +53,16 @@
 
     .el-form .el-form-item {
       margin-bottom: 0;
-      padding:4px 0;
+      padding: 4px 0;
 
       .el-form-item__label {
-        color: #262626 !important;
+        color: var(--el-text-color-primary) !important;
         font-weight: bold;
         font-size: 14px;
       }
+
       .el-form-item__content {
-        color: #262626 !important;
+        color: var(--el-text-color-primary) !important;
         font-weight: 400;
         font-size: 14px;
       }
diff --git a/src/assets/css/components/views/detections/detection-tools.scss b/src/assets/css/components/views/detections/detection-tools.scss
index 06a48b05..932d65dc 100644
--- a/src/assets/css/components/views/detections/detection-tools.scss
+++ b/src/assets/css/components/views/detections/detection-tools.scss
@@ -1,4 +1,5 @@
 $color-white: var(--el-color-white);
+$color-create: var(el-color-business-dark-2);
 
 .top-tools__left {
   display: flex;
@@ -49,18 +50,16 @@ $color-white: var(--el-color-white);
 
   .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
     background-color: var(--cn-bg-color-light);
-    //border-color: #FFC4B9;
     border-color: var(--el-color-danger-light-5);
 
     i {
-      //color: #F0745A;
       color: var(--el-color-danger);
     }
   }
 
   .top-tool-btn--create {
     background-color: var(--el-color-business) !important;
-    border-color: #2E88A6 !important;
+    border-color: $color-create !important;
     color: $color-white;
 
     i {
@@ -69,8 +68,8 @@ $color-white: var(--el-color-white);
   }
 
   .top-tool-btn--create:hover {
-    background-color: #57B8D9 !important;
-    border-color: #2E88A6 !important;
+    background-color: var(--el-color-business-light-2) !important;
+    border-color: $color-create !important;
     color: $color-white;
 
     i {
@@ -79,8 +78,8 @@ $color-white: var(--el-color-white);
   }
 
   .top-tool-btn--create:focus {
-    background-color: #31A5CD !important;
-    border-color: #2E88A6 !important;
+    background-color: var(--el-color-business) !important;
+    border-color: $color-create !important;
     color: $color-white !important;
 
     i {
@@ -91,7 +90,7 @@ $color-white: var(--el-color-white);
   .top-tool-btn--create:disabled {
     opacity: 0.66;
     background-color: var(--el-color-business) !important;
-    border-color: #2E88A6 !important;
+    border-color: $color-create !important;
     color: $color-white;
 
     i {
diff --git a/src/assets/css/components/views/report/report.scss b/src/assets/css/components/views/report/report.scss
index 7cb010f9..83495e5b 100644
--- a/src/assets/css/components/views/report/report.scss
+++ b/src/assets/css/components/views/report/report.scss
@@ -35,10 +35,8 @@ $bg-color-dark: var(--el-border-color-dark);
     }
 
     .cn-report-left-menu.cn-active {
-      //background: #F4FAFF;
-      background: var(--el-color-primary-light-9);
+      background: var(--el-color-business-light-9);
       border-radius: 2px;
-      //color: #0091FF;
       color: var(--el-color-business);
     }
   }
diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index 0a094cfc..a01828f4 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -31,7 +31,6 @@ import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { parseInt } from 'lodash'
-import ElConfigProvider from 'element-plus'
 import cn from 'element-plus/lib/locale/lang/zh-cn'
 import en from 'element-plus/lib/locale/lang/en'
 
diff --git a/src/components/rightBox/settings/UserBox.vue b/src/components/rightBox/settings/UserBox.vue
index a6cfa6c9..74282b42 100644
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="right-box right-box-user">
     <div class="right-box__header">
-      <div class="header__title">{{editObject.id ? $t('config.user.editUser') : $t('config.user.createUser')}}</div>
+      <div class="header__title">{{ editObject.id ? $t('config.user.editUser') : $t('config.user.createUser') }}</div>
       <div class="header__operation">
         <span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
       </div>
@@ -11,12 +11,14 @@
         <el-form ref="userForm" :model="editObject" :rules="editObject.id ? rules2 : rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('config.user.name')" prop="name">
-            <el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.username==='admin' && editObject.id === 1"
+            <el-input id="account-input-name" v-model="editObject.name"
+                      :disabled="editObject.username==='admin' && editObject.id === 1"
                       minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
           </el-form-item>
           <!--username-->
           <el-form-item :label="$t('config.user.username')" prop="username">
-            <el-input id="account-input-username" v-model="editObject.username" :disabled="editObject.username==='admin' && editObject.id === 1"
+            <el-input id="account-input-username" v-model="editObject.username"
+                      :disabled="editObject.username==='admin' && editObject.id === 1"
                       minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
           </el-form-item>
           <!--password-->
@@ -69,45 +71,28 @@
               </template>
             </el-select>
           </el-form-item>
-          <!--theme-->
-<!--          <el-form-item :label="$t('config.user.theme')" prop="i18n">
-            <el-select id="account-input-roleIds"
-                       v-model="editObject.theme"
-                       class="right-box__select"
-                       clearable
-                       collapse-tags
-                       placeholder=" "
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small">
-              <template v-for="theme in themeData" :key="theme.value">
-                <el-option :label="theme.label" :value="theme.value"></el-option>
-              </template>
-            </el-select>
-          </el-form-item>-->
-          <!--enable-->
           <el-form-item :label="$t('config.user.enable')">
             <el-switch
-               id="account-input-status"
-               v-model="editObject.status"
-               :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
-               :active-value="1"
-               :inactive-value="0">
+                id="account-input-status"
+                v-model="editObject.status"
+                :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
+                :active-value="1"
+                :inactive-value="0">
             </el-switch>
           </el-form-item>
 
           <el-form-item v-if="editObject.id" :label="$t('config.user.createTime')">
-            <div class="right-box-form-content-txt">{{editObject.ctime}}</div>
+            <div class="right-box-form-content-txt">{{ editObject.ctime }}</div>
           </el-form-item>
-
         </el-form>
       </div>
     </div>
     <div class="right-box__footer">
       <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
-        <span>{{$t('overall.cancel')}}</span>
+        <span>{{ $t('overall.cancel') }}</span>
       </button>
       <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
-        <span>{{$t('overall.save')}}</span>
+        <span>{{ $t('overall.save') }}</span>
       </button>
     </div>
   </div>
@@ -241,7 +226,9 @@ export default {
       }
     },
     save () {
-      if (this.blockOperation.save) { return }
+      if (this.blockOperation.save) {
+        return
+      }
       this.blockOperation.save = true
 
       this.$refs.userForm.validate((valid) => {
@@ -250,7 +237,11 @@ export default {
             axios.put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
               if (res.status === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$message({
+                  duration: 2000,
+                  type: 'success',
+                  message: this.$t('tip.saveSuccess')
+                })
                 if (this.editObject.lang && this.editObject.id == localStorage.getItem(storageKey.userId)) {
                   const currentLang = localStorage.getItem(storageKey.language)
                   if (currentLang !== this.editObject.lang) {
@@ -271,7 +262,11 @@ export default {
             axios.post(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
               if (res.status === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$message({
+                  duration: 2000,
+                  type: 'success',
+                  message: this.$t('tip.saveSuccess')
+                })
                 this.esc(true)
               } else {
                 this.$message.error(res.data.msg || res.data.message)
diff --git a/src/components/table/CnDataList.vue b/src/components/table/CnDataList.vue
index cbde0f95..f3f7d2aa 100644
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -5,23 +5,18 @@
       <div class="main-container">
         <!-- 顶部工具栏 -->
         <div class="top-tools">
-          <div class="top-tool-left" style="min-width: 300px">
+          <div class="top-tool-left">
             <slot name="top-tool-left"></slot>
             <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
-              <div style="display: flex">
+              <div class="top-tool-search__display">
                 <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">
+                <button class="top-tool-btn top-tool-btn--search top-tool-btn__border" @click="onSearch">
                   <el-icon><Search /></el-icon>
-                  <!--<i class="el-icon-search"></i>-->
                 </button>
               </div>
             </div>
           </div>
           <div class="top-tool-right">
-<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
-            <el-button @click="onSearch" icon="el-icon-search" type="info" size="small" style="margin-right: 10px"></el-button>-->
-
             <slot name="top-tool-right"></slot>
             <div  v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize"  @click="tools.showCustomTableTitle = true">
               <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
diff --git a/src/components/table/administration/RoleTable.vue b/src/components/table/administration/RoleTable.vue
index 73d94bd3..6261f2cc 100644
--- a/src/components/table/administration/RoleTable.vue
+++ b/src/components/table/administration/RoleTable.vue
@@ -1,55 +1,55 @@
 <template>
   <el-table
-    id="roleTable"
-    ref="dataTable"
-    :data="tableData"
-    tooltip-effect="light"
-    empty-text=" "
-    @header-dragend="dragend"
-    @sort-change="tableDataSort"
-    @selection-change="selectionChange"
+      id="roleTable"
+      ref="dataTable"
+      :data="tableData"
+      tooltip-effect="light"
+      empty-text=" "
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
   >
     <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      :selectable="checkSelectable"
-      width="55">
+        :resizable="false"
+        align="center"
+        type="selection"
+        :selectable="checkSelectable"
+        width="55">
     </el-table-column>
     <!--key只使用item.prop的话，拖拽后，界面无响应，添加index后问题解决-->
     <el-table-column
-      v-for="(item, index) in customTableTitles"
-      :key="item.prop+index"
-      :fixed="item.fixed"
-      :label="item.label"
-      :min-width="`${item.minWidth}`"
-      :prop="item.prop"
-      :resizable="true"
-      :sort-orders="['ascending', 'descending']"
-      :sortable="item.sortable"
-      :width="`${item.width}`"
-      class="data-column"
+        v-for="(item, index) in customTableTitles"
+        :key="item.prop+index"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sort-orders="['ascending', 'descending']"
+        :sortable="item.sortable"
+        :width="`${item.width}`"
+        class="data-column"
     >
       <template #header>
-        <span class="data-column__span">{{item.label}}</span>
+        <span class="data-column__span">{{ item.label }}</span>
         <div class="col-resize-area"></div>
       </template>
-      <template  #default="scope" :column="item">
+      <template #default="scope" :column="item">
         <template v-if="item.prop === 'name'">
           <template v-if="scope.row.name">
-            <span>{{$t(scope.row.name)}}</span>
+            <span>{{ $t(scope.row.name) }}</span>
           </template>
           <template v-else-if="scope.row.i18n">
-            <span>{{scope.row.i18n}}</span>
+            <span>{{ scope.row.i18n }}</span>
           </template>
           <template v-else>
             <span>-</span>
           </template>
         </template>
-        <span v-else>{{scope.row[item.prop] || '-'}}</span>
+        <span v-else>{{ scope.row[item.prop] || '-' }}</span>
       </template>
     </el-table-column>
-    <template v-slot:empty >
+    <template v-slot:empty>
       <div class="table-no-data" v-if="isNoData">
         <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
       </div>
@@ -59,6 +59,7 @@
 
 <script>
 import table from '@/mixins/table'
+
 export default {
   name: 'roleTable',
   mixins: [table],
diff --git a/src/views/administration/Appearance.vue b/src/views/administration/Appearance.vue
index e5c4a0f2..ba02d486 100644
--- a/src/views/administration/Appearance.vue
+++ b/src/views/administration/Appearance.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="appearance" :class="from">
     <div class="appearance-form">
-      <el-form ref="appearanceForm" :model="appearanceObject"  label-position="top" label-width="120px">
+      <el-form ref="appearanceForm" :model="appearanceObject" label-position="top" label-width="120px">
         <el-form-item :label="$t('config.appearance.dateFormat')" prop="date_format">
           <el-select id="appearance-dateFormat"
-                     v-model="appearanceObject.date_format"
-                     collapse-tags
-                     placeholder=" "
-                     popper-class="right-box-select-dropdown right-box-select-report "
-                     size="small">
+              v-model="appearanceObject.date_format"
+              collapse-tags
+              placeholder=" "
+              popper-class="right-box-select-dropdown right-box-select-report "
+              size="small">
             <template v-for="dateFormat in dateFormatList" :key="dateFormat.id">
-              <el-option :label="dateFormat.label" :value="dateFormat.value">
-                <span style="float: left">{{ dateFormat.label }}</span>
-                <span style="float: right;">{{ dateFormat.example }}</span>
+              <el-option :label="dateFormat.label" :value="dateFormat.value" class="appearance__option">
+                <span>{{ dateFormat.label }}</span>
+                <span>{{ dateFormat.example }}</span>
               </el-option>
             </template>
           </el-select>
@@ -40,7 +40,7 @@
             <template v-for="timezone in timezoneList" :key="timezone.id">
               <el-option :label="timezone.name" :value="timezone.name">
                 <span style="float: left">{{ timezone.name }}</span>
-                <span style="float: right;">{{ timezone.offset}}</span>
+                <span style="float: right;">{{ timezone.offset }}</span>
               </el-option>
             </template>
           </el-select>
@@ -48,11 +48,16 @@
         </el-form-item>
       </el-form>
       <div class="edit-appearance-base__footer">
-        <button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save"
-                v-if="hasPermission('editAppearence')"
+        <button
+            style="position: relative;"
+            :class="{'footer__btn--disabled': blockOperation.save}"
+            :disabled="blockOperation.save"
+            class="footer__btn"
+            @click="save"
+            v-if="hasPermission('editAppearence')"
         >
           <el-loading size="small" :loading="blockOperation.save"></el-loading>
-          <span>{{$t('overall.save')}}</span>
+          <span>{{ $t('overall.save') }}</span>
         </button>
       </div>
     </div>
diff --git a/src/views/administration/I18n.vue b/src/views/administration/I18n.vue
index c37f41cc..d7448a96 100644
--- a/src/views/administration/I18n.vue
+++ b/src/views/administration/I18n.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
         ref="dataList"
         :tableId="tableId"
@@ -10,21 +10,17 @@
         @search="search"
     >
       <template #top-tool-left>
-        <button id="i18n-add"
-                class="top-tool-btn margin-r-10 top-tool-btn--create"
-                @click="add">
+        <button id="i18n-add" class="top-tool-btn margin-r-10 top-tool-btn--create" @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="i18n-edit"  class="top-tool-btn margin-r-10"  :disabled="disableEdit"
-                @click="editSelectRecord">
+        <button id="i18n-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit" @click="editSelectRecord">
           <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="i18n-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
-                @click="delBatch">
+        <button id="i18n-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
         </button>
       </template>
       <template #default>
@@ -90,7 +86,6 @@ export default {
       tableId: 'i18nTable'
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
diff --git a/src/views/administration/Index.vue b/src/views/administration/Index.vue
index 8f9dab19..e2622dc7 100644
--- a/src/views/administration/Index.vue
+++ b/src/views/administration/Index.vue
@@ -2,14 +2,14 @@
   <div class="administration entity-explorer entity-explorer--show-list">
     <!-- 顶部工具栏，在列表页显示 -->
     <div class="explorer-top-tools explorer-detection-top-tools">
-      <div class="explorer-top-tools-title">{{$t('overall.administration')}}</div>
+      <div class="explorer-top-tools-title">{{ $t('overall.administration') }}</div>
     </div>
-    <div style="width: 100%;padding-bottom: 26px;">
+    <div class="administration__tabs">
       <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
     <!-- 内容区 -->
     <div class="explorer-container administration-container">
-      <router-view />
+      <router-view/>
     </div>
   </div>
 </template>
@@ -17,6 +17,7 @@
 <script>
 import ChartTabs from '@/components/common/ChartTabs'
 import { useStore } from 'vuex'
+
 export default {
   name: 'index',
   components: {
diff --git a/src/views/administration/License.vue b/src/views/administration/License.vue
index 371cefc2..fb898987 100644
--- a/src/views/administration/License.vue
+++ b/src/views/administration/License.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="license" :class="from">
     <div class="license-form">
-      <el-form ref="licenseForm" :model="licenseObject"  label-position="left" label-width="134px" size="small">
-        <el-form-item  :label="`${$t('license.type')}：`" prop="type">
-          {{licenseObject.type}}
+      <el-form ref="licenseForm" :model="licenseObject" label-position="left" label-width="134px" size="small">
+        <el-form-item :label="`${$t('license.type')}：`" prop="type">
+          {{ licenseObject.type }}
         </el-form-item>
         <el-form-item :label="`${$t('license.organization')}：`" prop="organization">
-          <div class="">{{licenseObject.organization}}</div>
+          <div class="">{{ licenseObject.organization }}</div>
         </el-form-item>
         <el-form-item :label="`${$t('license.supportId')}：`" prop="supportID">
-          <div class="">{{licenseObject.supportID}}</div>
+          <div class="">{{ licenseObject.supportID }}</div>
         </el-form-item>
         <el-form-item :label="`${$t('license.dateIssued')}：`" prop="dateIssued">
-          <div class="">{{licenseObject.dateIssued}}</div>
+          <div class="">{{ licenseObject.dateIssued }}</div>
         </el-form-item>
         <el-form-item :label="`${$t('license.dateExpires')}：`" prop="dateExpires">
-          <div class="">{{licenseObject.dateExpires}}</div>
+          <div class="">{{ licenseObject.dateExpires }}</div>
         </el-form-item>
-        <el-form-item :label="`${$t('license.licenseFile')}：`" >
+        <el-form-item :label="`${$t('license.licenseFile')}：`">
           <div class="license-file">
-            <button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile">
-              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{$t('license.download')}}</span>
+            <button class="license__btn margin-r-20" @click.prevent="downloadFile">
+              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{ $t('license.download') }}</span>
             </button>
             <el-upload :action="`${baseUrl}sys/license/upload`"
                        ref="licenseUpload"
@@ -34,13 +34,12 @@
                        :on-change="fileChange"
                        :on-success="uploadSuccess"
                        :on-error="uploadError">
-              <button style="position: relative;" class="license__btn" @click.prevent="">
-                <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{$t('license.upload')}}</span>
+              <button class="license__btn" @click.prevent="">
+                <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{ $t('license.upload') }}</span>
               </button>
             </el-upload>
           </div>
         </el-form-item>
-
       </el-form>
     </div>
   </div>
@@ -51,6 +50,7 @@ import { storageKey } from '@/utils/constants'
 import axios from 'axios'
 import { ref } from 'vue'
 import { dateFormat } from '@/utils/date-util'
+import _ from 'lodash'
 
 export default {
   name: 'License',
@@ -109,7 +109,7 @@ export default {
     downloadFile () {
       axios.get(this.downloadC2vUrl, { responseType: 'blob' }).then(res => {
         let fileName = ''
-        if(res.headers['content-disposition']) {
+        if (res.headers['content-disposition']) {
           fileName = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
         }
 
diff --git a/src/views/administration/OperationLog.vue b/src/views/administration/OperationLog.vue
index 3c18db94..80ad938b 100644
--- a/src/views/administration/OperationLog.vue
+++ b/src/views/administration/OperationLog.vue
@@ -1,29 +1,29 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
-      ref="dataList"
-      :api="url"
-      :tableId="tableId"
-      :layout="['search', 'elementSet','search']"
-      v-model:custom-table-title="tools.customTableTitle"
-      :from="fromRoute.operationLog"
-      @search="search">
+        ref="dataList"
+        :api="url"
+        :tableId="tableId"
+        :layout="['search', 'elementSet','search']"
+        v-model:custom-table-title="tools.customTableTitle"
+        :from="fromRoute.operationLog"
+        @search="search">
       <template v-slot:default>
         <loading :loading="loading"></loading>
         <operation-log-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
-          :table-data="tableData"
-          @del="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
-          @search="search"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @del="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @search="search"
+            @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
       </template>
       <!-- 分页组件 -->
       <template #pagination>
diff --git a/src/views/administration/Roles.vue b/src/views/administration/Roles.vue
index b749702f..3a86c255 100644
--- a/src/views/administration/Roles.vue
+++ b/src/views/administration/Roles.vue
@@ -1,32 +1,30 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
-            ref="dataList"
-            :tableId="tableId"
-            v-model:custom-table-title="tools.customTableTitle"
-            :api="url"
-            :from="fromRoute.roles"
-            :layout="['columnCustomize','elementSet','search']"
-            @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.roles"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
     >
       <template v-slot:top-tool-left>
-        <button id="roles-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
+        <button id="roles-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
                 v-if="hasPermission('createRole')"
                 @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="roles-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="roles-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
                 v-if="hasPermission('editRole')"
                 @click="edit">
           <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="roles-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
-                v-if="hasPermission('deleteRole')"
-                @click="delBatch">
+        <button id="roles-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
         </button>
 
         <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
@@ -34,17 +32,17 @@
       <template v-slot:default>
         <loading :loading="loading"></loading>
         <roles-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
-          :table-data="tableData"
-          @delete="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
         ></roles-table>
       </template>
       <!-- 分页组件 -->
@@ -53,12 +51,12 @@
       </template>
     </cn-data-list>
     <el-drawer
-            v-model="rightBox.show"
-            direction="rtl"
-            class="common-right-box"
-            :with-header="false"
-            :size="700"
-            destroy-on-close>
+        v-model="rightBox.show"
+        direction="rtl"
+        class="common-right-box"
+        :with-header="false"
+        :size="700"
+        destroy-on-close>
       <role-box :object="object" @close="closeRightBox"></role-box>
     </el-drawer>
   </div>
@@ -101,7 +99,8 @@ export default {
         this.$alert(this.$t('tip.pleaseSelectForEdit'), {
           confirmButtonText: this.$t('tip.yes'),
           type: 'warning'
-        }).catch(() => {})
+        }).catch(() => {
+        })
       } else {
         axios.get(`${this.url}`, { params: { ids: this.batchDeleteObjs[0].id } }).then(response => {
           if (response.status === 200) {
diff --git a/src/views/administration/User.vue b/src/views/administration/User.vue
index be65e22a..dfcfd680 100644
--- a/src/views/administration/User.vue
+++ b/src/views/administration/User.vue
@@ -1,47 +1,47 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
-      ref="dataList"
-      :tableId="tableId"
-      v-model:custom-table-title="tools.customTableTitle"
-      :api="url"
-      :from="fromRoute.user"
-      :layout="['columnCustomize','elementSet','search']"
-      @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.user"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
     >
       <template #top-tool-left>
         <button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
                 v-if="hasPermission('createUser')"
                 @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="account-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="account-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
                 v-if="hasPermission('editUser')"
                 @click="editSelectRecord">
           <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="account-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
+        <button id="account-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
                 v-if="hasPermission('deleteUser')"
                 @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
         </button>
       </template>
       <template #default>
         <loading :loading="loading"></loading>
         <user-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :table-data="tableData"
-          @delete="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
         />
       </template>
       <template #pagination>
@@ -49,16 +49,13 @@
       </template>
     </cn-data-list>
     <el-drawer
-            v-model="rightBox.show"
-            direction="rtl"
-            class="common-right-box"
-            :size="700"
-            :with-header="false"
-            destroy-on-close>
-      <user-box
-              :object="object"
-              @close="closeRightBox"
-      />
+        v-model="rightBox.show"
+        direction="rtl"
+        class="common-right-box"
+        :size="700"
+        :with-header="false"
+        destroy-on-close>
+      <user-box :object="object" @close="closeRightBox"/>
     </el-drawer>
   </div>
 </template>