diff --git a/cmdb-ui/src/components/tools/TopMenu.vue b/cmdb-ui/src/components/tools/TopMenu.vue
index 3a59c1f..52a66be 100644
--- a/cmdb-ui/src/components/tools/TopMenu.vue
+++ b/cmdb-ui/src/components/tools/TopMenu.vue
@@ -119,7 +119,8 @@ export default {
     border-radius: 4px;
     color: @layout-header-font-color;
     height: @layout-header-height;
-    line-height: @layout-header-height;
+    display: inline-flex;
+    align-items: center;
     &:hover {
       background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
       color: @layout-header-font-selected-color;
diff --git a/cmdb-ui/src/modules/acl/views/resource_types.vue b/cmdb-ui/src/modules/acl/views/resource_types.vue
index 90784e9..15f0321 100644
--- a/cmdb-ui/src/modules/acl/views/resource_types.vue
+++ b/cmdb-ui/src/modules/acl/views/resource_types.vue
@@ -57,17 +57,20 @@
           </template>
         </vxe-table-column>
       </ops-table>
-      <vxe-pager
+      <a-pagination
         size="small"
-        :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
-        :current-page.sync="tablePage.currentPage"
-        :page-size.sync="tablePage.pageSize"
+        show-size-changer
+        show-quick-jumper
+        :current="tablePage.currentPage"
         :total="tablePage.total"
-        :page-sizes="pageSizeOptions"
-        @page-change="handlePageChange"
-        :style="{ marginTop: '10px' }"
-      >
-      </vxe-pager>
+        :show-total="(total, range) => `当前展示 ${range[0]}-${range[1]} 条数据, 共 ${total} 条`"
+        :page-size="tablePage.pageSize"
+        :default-current="1"
+        :page-size-options="pageSizeOptions"
+        @change="pageOrSizeChange"
+        @showSizeChange="pageOrSizeChange"
+        :style="{ marginTop: '10px', textAlign: 'right' }"
+      />
     </a-spin>
 
     <resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
@@ -89,7 +92,7 @@ export default {
       loading: false,
       groups: [],
       id2perms: {},
-      pageSizeOptions: [10, 25, 50, 100],
+      pageSizeOptions: ['20', '50', '100', '200'],
       tablePage: {
         total: 0,
         currentPage: 1,
@@ -176,7 +179,7 @@ export default {
         this.handleOk()
       })
     },
-    handlePageChange({ currentPage, pageSize }) {
+    pageOrSizeChange(currentPage, pageSize) {
       this.tablePage.currentPage = currentPage
       this.tablePage.pageSize = pageSize
       this.searchData()
diff --git a/cmdb-ui/src/modules/acl/views/resources.vue b/cmdb-ui/src/modules/acl/views/resources.vue
index 75f5d18..8ecd4fa 100644
--- a/cmdb-ui/src/modules/acl/views/resources.vue
+++ b/cmdb-ui/src/modules/acl/views/resources.vue
@@ -77,7 +77,7 @@
           <!-- 2 -->
 
           <vxe-table-column field="name" :title="$t('acl.resourceName')" :min-widh="150" fixed="left" show-overflow>
-            <template #title="{row}">
+            <template #title="{ row }">
               {{ row.isGroup ? $t('acl.groupName') : $t('acl.resourceName') }}
             </template>
           </vxe-table-column>
@@ -86,10 +86,12 @@
           <vxe-table-column field="user" :title="$t('acl.creator')" :min-widh="100"> </vxe-table-column>
 
           <!-- 4 -->
-          <vxe-table-column field="created_at" :title="$t('created_at')" :min-widh="220" align="center"> </vxe-table-column>
+          <vxe-table-column field="created_at" :title="$t('created_at')" :min-widh="220" align="center">
+          </vxe-table-column>
 
           <!-- 5 -->
-          <vxe-table-column field="updated_at" :title="$t('updated_at')" :min-widh="220" fixed="center"> </vxe-table-column>
+          <vxe-table-column field="updated_at" :title="$t('updated_at')" :min-widh="220" fixed="center">
+          </vxe-table-column>
 
           <!-- 6 -->
 
@@ -99,8 +101,9 @@
             :min-widh="200"
             fixed="right"
             align="center"
-            show-overflow>
-            <template #default="{row}">
+            show-overflow
+          >
+            <template #default="{ row }">
               <span v-show="isGroup">
                 <a @click="handleDisplayMember(row)">{{ $t('acl.member') }}</a>
                 <a-divider type="vertical" />
@@ -117,27 +120,36 @@
                 </a>
               </a-tooltip>
               <a-divider type="vertical" />
-              <a-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete(row)" @cancel="cancel" :okText="$t('yes')" :cancelText="$t('no')">
+              <a-popconfirm
+                :title="$t('confirmDelete')"
+                @confirm="handleDelete(row)"
+                @cancel="cancel"
+                :okText="$t('yes')"
+                :cancelText="$t('no')"
+              >
                 <a style="color: red"><a-icon type="delete"/></a>
               </a-popconfirm>
             </template>
           </vxe-table-column>
         </ops-table>
-        <vxe-pager
+        <a-pagination
           size="small"
-          :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
-          :current-page.sync="tablePage.currentPage"
-          :page-size.sync="tablePage.pageSize"
+          show-size-changer
+          show-quick-jumper
+          :current="tablePage.currentPage"
           :total="tablePage.total"
-          :page-sizes="pageSizeOptions"
-          @page-change="handlePageChange"
-          :style="{ marginTop: '10px' }"
-        >
-        </vxe-pager>
+          :show-total="(total, range) => `当前展示 ${range[0]}-${range[1]} 条数据, 共 ${total} 条`"
+          :page-size="tablePage.pageSize"
+          :default-current="1"
+          :page-size-options="pageSizeOptions"
+          @change="pageOrSizeChange"
+          @showSizeChange="pageOrSizeChange"
+          :style="{ marginTop: '10px', textAlign: 'right' }"
+        />
       </a-spin>
     </div>
-    <div v-else style="text-align: center;margin-top:20%">
-      <a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" />
+    <div v-else style="text-align: center; margin-top: 20%">
+      <a-icon style="font-size: 50px; margin-bottom: 20px; color: orange" type="info-circle" />
       <h3>{{ $t('acl.addTypeTips') }}</h3>
     </div>
     <resourceForm ref="resourceForm" @fresh="handleOk"> </resourceForm>
@@ -191,7 +203,7 @@ export default {
       isGroup: false,
       allResourceTypes: [],
       currentType: { id: 0 },
-      pageSizeOptions: [10, 25, 50, 100],
+      pageSizeOptions: ['20', '50', '100', '200'],
       searchName: '',
       selectedRows: [],
     }
@@ -291,7 +303,7 @@ export default {
       }
     },
     cancel() {},
-    handlePageChange({ currentPage, pageSize }) {
+    pageOrSizeChange(currentPage, pageSize) {
       this.tablePage.currentPage = currentPage
       this.tablePage.pageSize = pageSize
       this.searchData()
@@ -302,7 +314,6 @@ export default {
         .getVxetableRef()
         .getCheckboxRecords()
         .concat(this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords())
-        console.log(this.selectedRows)
     },
     onSelectRangeEnd({ records }) {
       this.selectedRows = records
diff --git a/cmdb-ui/src/modules/acl/views/roles.vue b/cmdb-ui/src/modules/acl/views/roles.vue
index 3604f34..abf18f7 100644
--- a/cmdb-ui/src/modules/acl/views/roles.vue
+++ b/cmdb-ui/src/modules/acl/views/roles.vue
@@ -42,13 +42,13 @@
 
         <!-- 2 -->
         <vxe-table-column field="is_app_admin" :title="$t('admin')" :min-width="100" align="center">
-          <template #default="{row}">
+          <template #default="{ row }">
             <a-icon type="check" v-if="row.is_app_admin" />
           </template>
         </vxe-table-column>
 
         <vxe-table-column field="id" :title="$t('acl.inheritedFrom')" :min-width="150">
-          <template #default="{row}">
+          <template #default="{ row }">
             <a-tag color="cyan" v-for="role in id2parents[row.id]" :key="role.id">{{ role.name }}</a-tag>
           </template>
         </vxe-table-column>
@@ -69,13 +69,13 @@
             }
           "
         >
-          <template #default="{row}">
+          <template #default="{ row }">
             {{ row.uid ? $t('no') : $t('yes') }}
           </template>
         </vxe-table-column>
 
         <vxe-table-column field="action" :title="$t('operation')" :width="120" fixed="right">
-          <template #default="{row}">
+          <template #default="{ row }">
             <a-space>
               <a-tooltip :title="$t('acl.resourceList')">
                 <a
@@ -104,17 +104,20 @@
           </template>
         </vxe-table-column>
       </ops-table>
-      <vxe-pager
+      <a-pagination
         size="small"
-        :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
-        :current-page.sync="tablePage.currentPage"
-        :page-size.sync="tablePage.pageSize"
+        show-size-changer
+        show-quick-jumper
+        :current="tablePage.currentPage"
         :total="tablePage.total"
-        :page-sizes="pageSizeOptions"
-        @page-change="handlePageChange"
-        :style="{ marginTop: '10px' }"
-      >
-      </vxe-pager>
+        :show-total="(total, range) => `当前展示 ${range[0]}-${range[1]} 条数据, 共 ${total} 条`"
+        :page-size="tablePage.pageSize"
+        :default-current="1"
+        :page-size-options="pageSizeOptions"
+        @change="pageOrSizeChange"
+        @showSizeChange="pageOrSizeChange"
+        :style="{ marginTop: '10px', textAlign: 'right' }"
+      />
     </a-spin>
 
     <roleForm ref="roleForm" :allRoles="allRoles" :id2parents="id2parents" :handleOk="handleOk"></roleForm>
@@ -149,7 +152,7 @@ export default {
       tableData: [],
       allRoles: [],
       id2parents: {},
-      pageSizeOptions: [10, 25, 50, 100],
+      pageSizeOptions: ['20', '50', '100', '200'],
       searchName: '',
       filterTableValue: { user_role: 1, user_only: 0 },
     }
@@ -254,7 +257,7 @@ export default {
     cancel(e) {
       return false
     },
-    handlePageChange({ currentPage, pageSize }) {
+    pageOrSizeChange(currentPage, pageSize) {
       this.tablePage.currentPage = currentPage
       this.tablePage.pageSize = pageSize
       this.loadData()
diff --git a/cmdb-ui/src/modules/cmdb/views/preference/index.vue b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
index da08e2a..31bc24f 100644
--- a/cmdb-ui/src/modules/cmdb/views/preference/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
@@ -43,7 +43,7 @@
             :class="{
               'cmdb-preference-avatar': true,
               'cmdb-preference-avatar-noicon': !ciType.icon,
-              'cmdb-preference-avatar-noicon-is_subscribed': !ciType.icon && ciType.is_subscribed,
+              'cmdb-preference-avatar-noicon-is_subscribed': !ciType.icon,
             }"
             :style="{ width: '30px', height: '30px', marginRight: '10px' }"
           >
diff --git a/cmdb-ui/src/style/global.less b/cmdb-ui/src/style/global.less
index 1d2790f..053bf67 100644
--- a/cmdb-ui/src/style/global.less
+++ b/cmdb-ui/src/style/global.less
@@ -12,13 +12,13 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(47, 122, 235, 0.2);
+  background-color: @scrollbar-color;
   background-clip: padding-box;
   border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(47, 122, 235, 0.2);
+  background-color: @scrollbar-color;
 }
 
 @import '~ant-design-vue/dist/antd.less';
@@ -35,7 +35,7 @@ body {
 }
 
 .ant-layout {
-  background-color: #f0f5ff;
+  background-color: #custom_colors() [color_2];
 }
 
 .layout.ant-layout {
@@ -99,12 +99,8 @@ body {
     height: @layout-header-icon-height;
     line-height: @layout-header-icon-height;
     display: inline-flex;
-    align-items: flex-end;
+    align-items: center;
     margin-right: 10px;
-    &:hover {
-      background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
-      color: @layout-header-font-selected-color;
-    }
   }
 
   .topmenu {
@@ -192,12 +188,6 @@ body {
         color: @layout-header-font-color;
         align-items: center;
         border-radius: 4px;
-
-        &:hover {
-          background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
-          color: @layout-header-font-selected-color;
-        }
-
         .avatar {
           margin-right: 5px;
           color: @layout-header-font-color;
@@ -349,8 +339,6 @@ body {
     }
 
     &.light {
-      background-color: #225686;
-
       .header-index-wide {
         .header-index-left {
           .logo {
@@ -425,7 +413,6 @@ body {
   min-height: 100vh;
 
   .ant-layout-sider-children {
-    background: #225686; //浅色系左边菜单栏 深色系需删除
     overflow-y: hidden;
     > .ant-menu {
       height: calc(100vh - 40px);
@@ -519,7 +506,7 @@ body {
 .ops-side-bar.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   // background-image: url('../assets/sidebar_selected.png') !important;
   // background-repeat: no-repeat !important;
-  background: #3e4a71;
+  background: @layout-sidebar-selected-color;
   // background-size: 228px 38px;
   // background-position-x: -10px;
   // background-position-y: center;
@@ -546,13 +533,13 @@ body {
   border-right-color: transparent;
   // background: @layout-background-light-color;
   // background: url('../assets/sidebar_background.png');
-  background: #1d264c;
+  background: @layout-sidebar-color;
   // background-position-x: center;
   // background-position-y: center;
   background-repeat: no-repeat !important;
   background-size: cover;
   .ant-menu-inline.ant-menu-sub {
-    background-color: #000c37;
+    background-color: @layout-sidebar-sub-color;
   }
   .ant-menu-submenu-content .ant-menu-item,
   .ant-menu-item {
@@ -560,7 +547,7 @@ body {
     > a {
       display: inline-flex;
       align-items: center;
-      color: rgba(255, 255, 255, 0.8);
+      color: @layout-sidebar-font-color;
     }
     &:hover {
       // background: #0000000a;
@@ -578,7 +565,7 @@ body {
       white-space: nowrap;
     }
     a:hover {
-      color: #fff;
+      color: @layout-sidebar-font-color;
       font-weight: 600;
     }
     &:hover .custom-menu-extra-ellipsis {
@@ -614,7 +601,7 @@ body {
   .ant-menu-item-selected {
     a,
     a:hover {
-      color: #fff;
+      color: @layout-sidebar-font-color;
       font-weight: 600;
     }
   }
@@ -624,20 +611,20 @@ body {
   }
 
   .ant-menu-submenu {
-    color: rgba(255, 255, 255, 0.8);
+    color: @layout-sidebar-font-color;
   }
   .ant-menu-submenu-title:hover {
-    color: #fff;
-    background: #0000000a;
+    color: @layout-sidebar-font-color;
+    background: @layout-sidebar-selected-color;
+    font-weight: 600;
     .ant-menu-submenu-arrow::before,
     .ant-menu-submenu-arrow::after {
-      background: #fff;
-      background-image: linear-gradient(to right, #2e2e2e, #2e2e2e);
+      background: @layout-sidebar-arrow-color;
     }
   }
   .ant-menu-submenu-selected {
     > .ant-menu-submenu-title {
-      color: #fff;
+      color: @layout-sidebar-font-color;
       font-weight: 800;
     }
   }
@@ -650,7 +637,7 @@ body {
     padding-left: 0 !important;
     > a {
       padding-left: 10px;
-      color: rgba(255, 255, 255, 0.6) !important;
+      color: @layout-sidebar-disabled-font-color !important;
       font-size: 12px;
     }
     &:hover {
@@ -659,8 +646,11 @@ body {
   }
   .ant-menu-submenu-arrow::after,
   .ant-menu-submenu-arrow::before {
-    background: rgba(255, 255, 255, 0.6);
-    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) !important;
+    background: @layout-sidebar-arrow-color;
+  }
+
+  .ant-menu-item.ant-menu-item-active:hover {
+    background: @layout-sidebar-selected-color;
   }
 }
 // 侧边栏折叠时
@@ -668,7 +658,7 @@ body {
   .ant-menu-submenu.ant-menu-submenu-placement-rightTop {
     > .ant-menu {
       // background: url('../assets/sidebar_background.png');
-      background: #1d264c;
+      background: @layout-sidebar-color;
       background-position-x: center;
       background-position-y: center;
       background-repeat: no-repeat !important;
@@ -830,14 +820,21 @@ body {
 .el-input__inner {
   border-radius: 2px !important;
 }
-.el-input__inner:hover {
-  border-color: #4596de !important;
+
+.el-input__inner:hover,
+.el-select .el-input.is-focus .el-input__inner,
+.el-select .el-input__inner:focus,
+.el-button.is-plain:focus,
+.el-button.is-plain:hover,
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+  border-color: #custom_colors() [color_1] !important;
 }
-.el-select .el-input.is-focus .el-input__inner {
-  border-color: #4596de !important;
-}
-.el-select-dropdown__item.selected {
-  color: #4596de !important;
+.el-button--text,
+.el-select-dropdown__item.selected,
+.el-button.is-plain:focus,
+.el-button.is-plain:hover {
+  color: #custom_colors() [color_1] !important;
 }
 
 .ant-tabs-nav .ant-tabs-tab {
@@ -897,7 +894,7 @@ body {
   }
 }
 
-.custom-vue-treeselect__control(@bgColor:#f0f5ff,@border:none) {
+.custom-vue-treeselect__control(@bgColor:#custom_colors()[color_2],@border:none) {
   background-color: @bgColor;
   border: @border;
 }
@@ -938,29 +935,29 @@ body {
 .vue-treeselect__option--highlight,
 .vue-treeselect__option--selected {
   color: #custom_colors[color_1];
-  background-color: #f0f5ff !important;
+  background-color: #custom_colors() [color_2] !important;
 }
 .vue-treeselect__checkbox--checked,
 .vue-treeselect__checkbox--indeterminate {
-  border-color: #2f54eb !important;
-  background: #2f54eb !important;
+  border-color: #custom_colors() [color_1] !important;
+  background: #custom_colors() [color_1] !important;
 }
 .vue-treeselect__label-container:hover {
   .vue-treeselect__checkbox--checked,
   .vue-treeselect__checkbox--indeterminate {
-    border-color: #2f54eb !important;
-    background: #2f54eb !important;
+    border-color: #custom_colors() [color_1] !important;
+    background: #custom_colors() [color_1] !important;
   }
 }
 .vue-treeselect__multi-value-item {
-  background: #f0f5ff !important;
-  color: #2f54eb !important;
+  background: #custom_colors() [color_2] !important;
+  color: #custom_colors() [color_1] !important;
 }
 .vue-treeselect__value-remove {
-  color: #2f54eb !important;
+  color: #custom_colors() [color_1] !important;
 }
 .vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked {
-  border-color: #2f54eb !important;
+  border-color: #custom_colors() [color_1] !important;
 }
 
 //表格样式
@@ -970,7 +967,7 @@ body {
     border: none !important;
   }
   .vxe-table--header-wrapper {
-    background-color: #f0f5ff !important;
+    background-color: #custom_colors() [color_2] !important;
   }
   .vxe-header--row .vxe-header--column:hover {
     background: #2f54eb1f !important;
@@ -994,7 +991,7 @@ body {
     border: none !important;
   }
   .vxe-table--header-wrapper {
-    background-color: #f0f5ff !important;
+    background-color: #custom_colors() [color_2] !important;
   }
   // .vxe-table--header-wrapper.body--wrapper {
   //   border-radius: 8px !important;
@@ -1088,8 +1085,34 @@ body {
 .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
 .is--filter-active .vxe-cell--filter .vxe-filter--btn,
 .vxe-table .vxe-sort--asc-btn.sort--active,
-.vxe-table .vxe-sort--desc-btn.sort--active {
-  color: #2f54eb !important;
+.vxe-table .vxe-sort--desc-btn.sort--active,
+.vxe-select-option.is--selected,
+.vxe-loading > .vxe-loading--chunk,
+.vxe-loading > .vxe-loading--warpper,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus,
+.vxe-button.type--text:not(.is--disabled):hover,
+.vxe-table--filter-footer > button:hover {
+  color: #custom_colors() [color_1] !important;
+}
+
+.vxe-cell .vxe-default-input:focus,
+.vxe-cell .vxe-default-select:focus,
+.vxe-cell .vxe-default-textarea:focus,
+.vxe-table--filter-wrapper .vxe-default-input:focus,
+.vxe-table--filter-wrapper .vxe-default-select:focus,
+.vxe-table--filter-wrapper .vxe-default-textarea:focus,
+.vxe-select.is--active:not(.is--filter) > .vxe-input .vxe-input--inner,
+.vxe-input:not(.is--disabled).is--active .vxe-input--inner {
+  border-color: #custom_colors() [color_1] !important;
 }
 
 //批量操作
@@ -1107,7 +1130,7 @@ body {
     }
   }
   > span:last-child {
-    color: rgba(47, 84, 235, 0.55);
+    color: #custom_colors[color_1];
     cursor: default;
   }
 }
@@ -1117,7 +1140,7 @@ body {
   .ant-tabs-card-bar {
     margin: 0;
     .ant-tabs-nav-container {
-      background-color: #custom_colors[color_2];
+      background-color: #fff;
       .ant-tabs-tab {
         border: none;
         border-top-left-radius: 4px;
@@ -1125,9 +1148,9 @@ body {
         background: rgba(255, 255, 255, 0.5);
         margin-right: 5px;
       }
-    }
-    .ant-tabs-tab-active {
-      background: #fff !important;
+      .ant-tabs-tab-active {
+        background: #custom_colors[color_2];
+      }
     }
   }
 }
@@ -1218,7 +1241,7 @@ body {
 
   .el-tabs__header {
     border-bottom: none;
-    background-color: #f0f5ff;
+    background-color: #custom_colors[color_2];
     border-radius: 8px 8px 0px 0px;
   }
 
@@ -1303,6 +1326,15 @@ body {
   }
 }
 
+// json editor
+.jsoneditor-vue {
+  div.jsoneditor {
+    border: none;
+  }
+  div.jsoneditor-menu {
+    border-bottom-color: #custom_colors[color_1];
+  }
+}
 // .ant-menu.ant-menu-light {
 //   &.ops-menu {
 //     background-color: white;
diff --git a/cmdb-ui/src/style/static.less b/cmdb-ui/src/style/static.less
index 94c2dc9..267faba 100644
--- a/cmdb-ui/src/style/static.less
+++ b/cmdb-ui/src/style/static.less
@@ -1,7 +1,7 @@
 @border-radius-base: 2px; // 组件/浮层圆角
 @primary-color: #2f54eb; // 全局主色
+@scrollbar-color: rgba(47, 122, 235, 0.2);
 
-// @layout-header-background: #1a3652;
 @layout-header-background: #fff;
 @layout-header-height: 40px;
 @layout-header-icon-height: 34px;
@@ -15,13 +15,20 @@
 @layout-background-light-color: #fafafa;
 @layout-background-light-color-light: #f0f0f0;
 
+@layout-sidebar-color: #1d264c; //bg
+@layout-sidebar-sub-color: #000c37; //bg
+@layout-sidebar-selected-color: #3e4a71; //selected bg
+@layout-sidebar-arrow-color: rgba(255, 255, 255, 0.6);
+@layout-sidebar-font-color: #fff;
+@layout-sidebar-disabled-font-color: rgba(255, 255, 255, 0.6);
+
 #custom_colors() {
-  color_1: #2f54eb;
-  color_2: #f0f5ff;
-  color_3: #D2E2FF;
+  color_1: #2f54eb; //primary color
+  color_2: #f0f5ff; //light background color
+  color_3: #d2e2ff;
 }
 
-.ops_display_wrapper(@backgroundColor:#f0f5ff) {
+.ops_display_wrapper(@backgroundColor:#custom_colors()[color_2]) {
   cursor: pointer;
   padding: 5px 8px;
   background-color: @backgroundColor;
diff --git a/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue b/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue
index a8bd09b..93c163e 100644
--- a/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue
@@ -60,34 +60,6 @@
       <vxe-column field="mobile" :title="$t('cs.companyStructure.mobile')" min-width="80"></vxe-column>
       <vxe-column field="position_name" :title="$t('cs.companyStructure.positionName')" min-width="80"></vxe-column>
       <vxe-column field="department_name" :title="$t('cs.companyStructure.departmentName')" min-width="80"></vxe-column>
-      <vxe-column field="current_company" v-if="useDFC" :title="$t('cs.companyStructure.currentCompany')" min-width="120"></vxe-column>
-      <vxe-column field="dfc_entry_date" v-if="useDFC" :title="$t('cs.companyStructure.dfcEntryDate')" min-width="120"></vxe-column>
-      <vxe-column field="entry_date" :title="$t('cs.companyStructure.entryDate')" min-width="120"></vxe-column>
-      <vxe-column field="is_internship" :title="$t('cs.companyStructure.isInternship')" min-width="120"></vxe-column>
-      <vxe-column field="leave_date" :title="$t('cs.companyStructure.leaveDate')" min-width="120"></vxe-column>
-      <vxe-column field="id_card" :title="$t('cs.companyStructure.idCard')" min-width="120"></vxe-column>
-      <vxe-column field="nation" :title="$t('cs.companyStructure.nation')" min-width="80"></vxe-column>
-      <vxe-column field="id_place" :title="$t('cs.companyStructure.idPlace')" min-width="80"></vxe-column>
-      <vxe-column field="party" :title="$t('cs.companyStructure.party')" min-width="80"></vxe-column>
-      <vxe-column field="household_registration_type" :title="$t('cs.companyStructure.householdRegistrationType')" min-width="80"></vxe-column>
-      <vxe-column field="hometown" :title="$t('cs.companyStructure.homewtown')" min-width="80"></vxe-column>
-      <vxe-column field="marry" :title="$t('cs.companyStructure.marry')" min-width="80"></vxe-column>
-      <vxe-column field="max_degree" :title="$t('cs.companyStructure.maxDegree')" min-width="80"></vxe-column>
-      <vxe-column field="emergency_person" :title="$t('cs.companyStructure.emergencyPerson')" min-width="120"></vxe-column>
-      <vxe-column field="emergency_phone" :title="$t('cs.companyStructure.emergencyPhone')" min-width="120"></vxe-column>
-      <vxe-column field="bank_card_number" :title="$t('cs.companyStructure.bankCardNumber')" min-width="120"></vxe-column>
-      <vxe-column field="bank_card_name" :title="$t('cs.companyStructure.bankCardName')" min-width="80"></vxe-column>
-      <vxe-column field="opening_bank" :title="$t('cs.companyStructure.openingBank')" min-width="80"></vxe-column>
-      <vxe-column field="account_opening_location" :title="$t('cs.companyStructure.accountOpeningLocation')" min-width="120"></vxe-column>
-      <vxe-column field="school" :title="$t('cs.companyStructure.school')" min-width="80"></vxe-column>
-      <vxe-column field="major" :title="$t('cs.companyStructure.major')" min-width="80"></vxe-column>
-      <vxe-column field="education" :title="$t('cs.companyStructure.education')" min-width="80"></vxe-column>
-      <vxe-column field="graduation_year" :title="$t('cs.companyStructure.graduationYear')" min-width="120"></vxe-column>
-      <vxe-column field="birth_date" :title="$t('cs.companyStructure.birthDate')" min-width="120"></vxe-column>
-      <vxe-column field="birth_place" :title="$t('cs.companyStructure.birthPlace')" min-width="120"></vxe-column>
-      <vxe-column field="nationality_region" :title="$t('cs.companyStructure.nationalityRegion')" min-width="120"></vxe-column>
-      <vxe-column field="first_entry_date" :title="$t('cs.companyStructure.firstEntryDate')" min-width="120"></vxe-column>
-      <vxe-column field="estimated_departure_date" :title="$t('cs.companyStructure.estimatedDepartureDate')" min-width="120"></vxe-column>
       <vxe-column v-if="has_error" field="err" :title="$t('cs.companyStructure.importFailedReason')" min-width="120" fixed="right">
         <template #default="{ row }">
           <span :style="{ color: '#D81E06' }">{{ row.err }}</span>
@@ -303,98 +275,6 @@ export default {
             v: '部门',
             t: 's',
           },
-          {
-            v: '目前所属主体',
-            t: 's',
-          },
-          {
-            v: '初始入职日期',
-            t: 's',
-          },
-          {
-            v: '目前主体入职日期',
-            t: 's',
-          },
-          {
-            v: '正式/实习生',
-            t: 's',
-          },
-          {
-            v: '离职日期',
-            t: 's',
-          },
-          {
-            v: '身份证号码',
-            t: 's',
-          },
-          {
-            v: '民族',
-            t: 's',
-          },
-          {
-            v: '籍贯',
-            t: 's',
-          },
-          {
-            v: '组织关系',
-            t: 's',
-          },
-          {
-            v: '户籍类型',
-            t: 's',
-          },
-          {
-            v: '户口所在地',
-            t: 's',
-          },
-          {
-            v: '婚姻情况',
-            t: 's',
-          },
-          {
-            v: '最高学历',
-            t: 's',
-          },
-          {
-            v: '紧急联系人',
-            t: 's',
-          },
-          {
-            v: '紧急联系电话',
-            t: 's',
-          },
-          {
-            v: '卡号',
-            t: 's',
-          },
-          {
-            v: '银行',
-            t: 's',
-          },
-          {
-            v: '开户行',
-            t: 's',
-          },
-          {
-            v: '开户地',
-            t: 's',
-          },
-          {
-            v: '学校',
-            t: 's',
-          },
-          {
-            v: '专业',
-            t: 's',
-          },
-          {
-            v: '学历',
-            t: 's',
-          },
-          {
-            v: '毕业年份',
-            t: 's',
-          },
         ],
       ]
       data[1] = data[1].filter((item) => item['v'] !== '目前所属主体')
diff --git a/cmdb-ui/src/views/setting/companyStructure/index.vue b/cmdb-ui/src/views/setting/companyStructure/index.vue
index 7097610..f4e7bbd 100644
--- a/cmdb-ui/src/views/setting/companyStructure/index.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/index.vue
@@ -372,7 +372,7 @@ export default {
         { label: this.$t('cs.companyStructure.mobile'), value: 'mobile' },
         { label: this.$t('cs.companyStructure.departmentName'), value: 'department_name' },
         { label: this.$t('cs.companyStructure.positionName'), value: 'position_name' },
-        { label: this.$t('cs.companyStructure.departmentDirector'), value: 'direct_supervisor_id' },
+        { label: this.$t('cs.companyStructure.supervisor'), value: 'direct_supervisor_id' },
       ]
     },
     sceneList () {