diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 0854ff6332..8e4f24cc91 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1219,15 +1219,7 @@ div:focus {
   }
 }
 
-.user-drawer,
-.user-drawer-task {
-  .el-drawer__body-cont {
-    height: 100%;
-    box-sizing: border-box;
-    overflow: auto;
-    width: 100%;
-    padding-bottom: 80px;
-  }
+.de-user-drawer {
 
   .el-drawer__header {
     padding: 16px 24px;
@@ -1269,8 +1261,10 @@ div:focus {
   }
 
   .el-drawer__body {
-    padding: 12px 24px 24px 24px;
-    position: relative;
+    padding: 16px 24px;
+    position: unset;
+    overflow-y: auto;
+    padding-bottom: 80px;
   }
 
   .filter {
@@ -1320,37 +1314,6 @@ div:focus {
       }
     }
   }
-
-  .btn {
-    border-radius: 4px;
-    padding: 5px 26px 5px 26px;
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0px;
-    text-align: center;
-    border: none;
-    box-sizing: border-box;
-  }
-
-  .normal {
-    color: #1f2329;
-    border: 1px solid #bbbfc4;
-    margin-left: 12px;
-  }
-
-  .foot {
-    position: absolute;
-    height: 80px;
-    width: 100%;
-    padding: 24px;
-    right: 0;
-    bottom: 0;
-    text-align: right;
-    background-color: #fff;
-    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
-  }
 }
 
 .user-popper {
@@ -1586,4 +1549,87 @@ div:focus {
   margin-right: 9px;
   width: 16px !important;
   height: 12px !important;
+}
+
+.filter-texts {
+  display: flex;
+  align-items: center;
+  margin: 17px 0;
+  font-family: "PingFang SC";
+  font-weight: 400;
+
+  .sum {
+    color: #1f2329;
+  }
+
+  .title {
+    color: #999999;
+    margin-left: 8px;
+  }
+
+  .text {
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 1px 22px 1px 6px;
+    display: inline-block;
+    align-items: center;
+    color: #0c296e;
+    font-size: 14px;
+    line-height: 22px;
+    background: rgba(51, 112, 255, 0.1);
+    border-radius: 2px;
+    margin: 0;
+    margin-right: 8px;
+    position: relative;
+    i {
+      position: absolute;
+      right: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .clear-btn {
+    color: #646a73;
+  }
+
+  .clear-btn:hover {
+    color: #3370ff;
+  }
+
+  .filter-texts-container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .arrow-filter {
+    font-size: 16px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    color: #646a73;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .arrow-filter:hover {
+    background: rgba(31, 35, 41, 0.1);
+    border-radius: 4px;
+  }
+
+  .el-icon-arrow-right.arrow-filter {
+    margin-left: 5px;
+  }
+
+  .el-icon-arrow-left.arrow-filter {
+    margin-right: 5px;
+  }
+  .filter-texts-container {
+    flex: 1;
+    overflow-x: auto;
+    white-space: nowrap;
+    height: 24px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js
index 1a5e06c06f..8bc6cba4b7 100644
--- a/frontend/src/views/chart/chart/table/table-info.js
+++ b/frontend/src/views/chart/chart/table/table-info.js
@@ -3,7 +3,7 @@ import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table
 import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-
+import Vue from 'vue'
 export function baseTableInfo(s2, container, chart, action, tableData) {
   const containerDom = document.getElementById(container)
 
@@ -12,6 +12,7 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
   if (!fields || fields.length === 0) {
     if (s2) {
       s2.destroy()
+      destroyS2()
     }
     return
   }
@@ -130,6 +131,7 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
   // 开始渲染
   if (s2) {
     s2.destroy()
+    destroyS2
   }
   s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
 
@@ -152,6 +154,7 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
   if (!fields || fields.length === 0) {
     if (s2) {
       s2.destroy()
+      destroyS2
     }
     return
   }
@@ -257,6 +260,7 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
   // 开始渲染
   if (s2) {
     s2.destroy()
+    destroyS2()
   }
   s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
 
@@ -293,6 +297,7 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
   if (!fields || fields.length === 0) {
     if (s2) {
       s2.destroy()
+      destroyS2()
     }
     return
   }
@@ -414,6 +419,7 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
   // 开始渲染
   if (s2) {
     s2.destroy()
+    destroyS2()
   }
   s2 = new PivotSheet(containerDom, s2DataConfig, s2Options)
 
@@ -427,6 +433,13 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
   return s2
 }
 
+function destroyS2(s2) {
+  for (const i in s2) {
+    Vue.$delete(s2, i)
+  }
+  s2 = null
+}
+
 function getCurrentField(valueFieldList, field) {
   let list = []
   let res = null
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 0f43df2011..d99553a2c6 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -220,6 +220,7 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.scrollTimer)
+    this.destroyS2()
   },
   methods: {
     initData() {
@@ -262,6 +263,13 @@ export default {
         })
       }
     },
+    destroyS2() {
+      if (!this.myChart) return
+      for (const i in this.myChart) {
+        this.$delete(this.myChart, i)
+      }
+      this.myChart = null
+    },
     drawView() {
       const chart = this.chart
       // type
@@ -287,6 +295,7 @@ export default {
         if (this.myChart) {
           this.antVRenderStatus = false
           this.myChart.destroy()
+          this.destroyS2()
         }
       }
 
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index b044d5f267..b349980f0b 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -125,7 +125,10 @@
             v-if="dataSource"
             style="margin-top: 16px"
           >
-            <span>
+            <span
+              :title="(showTable && dataTable) || selectedDatasource.name"
+              class="grey-name"
+            >
               <svg-icon icon-class="db-de" />
               {{ (showTable && dataTable) || selectedDatasource.name }}
             </span>
@@ -154,7 +157,17 @@
             class="table-or-field"
             @click="typeSwitch(ele)"
           >
-            {{ ele.name }}
+            <span
+              :title="ele.name"
+              class="name"
+            >{{ ele.name }}</span>
+            <i
+              v-clipboard:copy="ele.name"
+              v-clipboard:success="onCopy"
+              v-clipboard:error="onError"
+              class="el-icon-document-copy"
+              @click.stop
+            />
           </div>
         </div>
         <div
@@ -164,9 +177,19 @@
           <div
             v-for="ele in fieldData"
             :key="ele.fieldName"
-            class="table-or-field"
+            class="table-or-field field"
           >
-            {{ ele.fieldName }}
+            <span
+              :title="ele.fieldName"
+              class="name"
+            >{{ ele.fieldName }}</span>
+            <i
+              v-clipboard:copy="ele.fieldName"
+              v-clipboard:success="onCopy"
+              v-clipboard:error="onError"
+              class="el-icon-document-copy"
+              @click.stop
+            />
           </div>
         </div>
       </div>
@@ -238,7 +261,7 @@
             v-closePress
             :title="dialogTitle"
             :visible.sync="showVariableMgm"
-            custom-class="user-drawer sql-dataset-drawer"
+            custom-class="de-user-drawer sql-dataset-drawer"
             size="840px"
             direction="rtl"
           >
@@ -735,6 +758,10 @@ export default {
           this.loading = false
         })
     },
+    onCopy(e) {
+      this.openMessageSuccess('commons.copy_success')
+    },
+    onError(e) {},
     showSQL(val) {
       this.sql = val || ''
     },
@@ -902,9 +929,13 @@ export default {
           margin: 0;
         }
 
-        :nth-child(2)p {
-          margin-top: 16px;
+        .grey-name {
+          max-width: 80%;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
+
         .grey {
           font-size: 14px;
           font-weight: 400;
@@ -928,6 +959,23 @@ export default {
           display: flex;
           align-items: center;
           padding-left: 4px;
+          padding-right: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          i {
+            display: none;
+            cursor: pointer;
+          }
+
+          .name {
+            cursor: pointer;
+            width: 90%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
 
           &.field {
             color: var(--deTextPrimary, #1f2329);
@@ -938,6 +986,9 @@ export default {
           }
 
           &:hover {
+            i {
+              display: block;
+            }
             background: rgba(31, 35, 41, 0.1);
           }
         }
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index 0fdbf49928..b0e28a66fe 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -80,7 +80,7 @@
       v-closePress
       :title="$t('chart.select_dataset')"
       :visible.sync="selectDsDialog"
-      custom-class="user-drawer sql-dataset-drawer"
+      custom-class="de-user-drawer sql-dataset-drawer"
       size="600px"
       direction="rtl"
     >
@@ -116,7 +116,7 @@
           : $t('dataset.edit_union_relation')
       "
       :visible.sync="editUnion"
-      custom-class="user-drawer union-dataset-drawer"
+      custom-class="de-user-drawer union-dataset-drawer"
       size="840px"
       direction="rtl"
     >
diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index 9e998010f2..f47e74416e 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -82,7 +82,7 @@
       v-closePress
       :title="$t('chart.select_dataset')"
       :visible.sync="selectDsDialog"
-      custom-class="user-drawer sql-dataset-drawer"
+      custom-class="de-user-drawer sql-dataset-drawer"
       size="600px"
       direction="rtl"
     >
@@ -114,7 +114,7 @@
       v-if="editField"
       :title="$t('dataset.field_select')"
       :visible.sync="editField"
-      custom-class="user-drawer sql-dataset-drawer"
+      custom-class="de-user-drawer sql-dataset-drawer"
       size="840px"
       v-closePress
       direction="rtl"
diff --git a/frontend/src/views/dataset/add/union/UnionNode.vue b/frontend/src/views/dataset/add/union/UnionNode.vue
index 80bca5ae6a..ddcf84a85c 100644
--- a/frontend/src/views/dataset/add/union/UnionNode.vue
+++ b/frontend/src/views/dataset/add/union/UnionNode.vue
@@ -72,7 +72,7 @@
           : $t('dataset.edit_union_relation')
       "
       :visible.sync="editUnion"
-      custom-class="user-drawer union-dataset-drawer"
+      custom-class="de-user-drawer union-dataset-drawer"
       size="840px"
       direction="rtl"
     >
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index 2db667f6bd..cfe09c7f03 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -213,7 +213,7 @@
       v-closePress
       :title="$t('dataset.task.record')"
       :visible.sync="userDrawer"
-      custom-class="user-drawer-task"
+      custom-class="de-user-drawer"
       size="840px"
       direction="rtl"
     >
@@ -285,7 +285,7 @@
       v-closePress
       :title="header"
       :visible.sync="update_task"
-      custom-class="user-drawer update-drawer-task"
+      custom-class="de-user-drawer update-drawer-task"
       size="680px"
       direction="rtl"
     >
@@ -1139,7 +1139,7 @@ export default {
 }
 </style>
 <style lang="scss">
-.user-drawer-task {
+.de-user-drawer {
   .el-table::before {
     content: '';
     position: absolute;
diff --git a/frontend/src/views/dataset/form.vue b/frontend/src/views/dataset/form.vue
index c09fbe78f2..2db205a59d 100644
--- a/frontend/src/views/dataset/form.vue
+++ b/frontend/src/views/dataset/form.vue
@@ -12,6 +12,7 @@
         />
         <template v-if="showInput">
           <el-input
+            ref="editerName"
             v-model="table.name"
             @blur="nameBlur"
           />
@@ -23,11 +24,15 @@
             {{ $t('deDataset.already_exists') }}
           </div>
         </template>
-        <span
-          v-else
-          :class="[{ 'show-point': ['sql', 'union'].includes(datasetType) }]"
-          @click="handleClick"
-        >{{ datasetName }}</span>
+        <template v-else>
+          <span>{{ datasetName }}</span>
+          <i
+            v-if="['sql', 'union'].includes(datasetType)"
+            style="margin-left: 5px"
+            class="el-icon-edit"
+            @click="handleClick"
+          />
+        </template>
       </span>
       <span class="oprate">
         <span
@@ -184,6 +189,9 @@ export default {
     handleClick() {
       if (['sql', 'union'].includes(this.datasetType)) {
         this.showInput = true
+        this.$nextTick(() => {
+          this.$refs.editerName.focus()
+        })
       }
     },
     nameRepeat(value) {
@@ -261,10 +269,6 @@ export default {
     padding: 0 24px;
     box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);
 
-    .show-point {
-      cursor: pointer;
-    }
-
     .name {
       font-family: PingFang SC;
       font-size: 16px;
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index c9cde4c2e3..fa8891f02d 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -457,7 +457,7 @@
     <!--移动分组-->
     <el-drawer
       :visible.sync="moveGroup"
-      custom-class="user-drawer sql-dataset-drawer"
+      custom-class="de-user-drawer sql-dataset-drawer"
       size="600px"
       direction="rtl"
     >
@@ -495,7 +495,7 @@
     <!--移动数据集-->
     <el-drawer
       :visible.sync="moveDs"
-      custom-class="user-drawer sql-dataset-drawer"
+      custom-class="de-user-drawer sql-dataset-drawer"
       size="600px"
       direction="rtl"
     >
diff --git a/frontend/src/views/msg/all.vue b/frontend/src/views/msg/all.vue
index f2f7ec46c5..0a625ec2f0 100644
--- a/frontend/src/views/msg/all.vue
+++ b/frontend/src/views/msg/all.vue
@@ -22,7 +22,7 @@
         />
       </el-tabs>
       <div class="tabs-container">
-        <div class="msg-cont">
+        <div class="msg-cont de-serach-table">
           <el-row class="top-operate">
             <el-col :span="12">
               <template v-if="tabActive === 'unread'">
@@ -324,18 +324,6 @@ export default {
 .table-container {
   height: calc(100% - 50px);
 }
-.top-operate {
-  margin-bottom: 16px;
-  .right-user {
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-  .name-email-search {
-    width: 240px;
-  }
-}
 </style>
 <style scoped lang="scss">
 .organization {
diff --git a/frontend/src/views/panel/appTemplate/component/TemplateList.vue b/frontend/src/views/panel/appTemplate/component/TemplateList.vue
index b2dfe50280..e560e177f2 100644
--- a/frontend/src/views/panel/appTemplate/component/TemplateList.vue
+++ b/frontend/src/views/panel/appTemplate/component/TemplateList.vue
@@ -29,7 +29,10 @@
         :class="[{ select: activeTemplate === ele.id }]"
         @click="nodeClick(ele)"
       >
-        <svg-icon icon-class="scene" />
+        <svg-icon
+          style="margin-right: 9px"
+          icon-class="scene"
+        />
         <span>{{ ele.name }}</span>
         <span
           class="more"
diff --git a/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue b/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue
index 8678e83424..46b325ffbd 100644
--- a/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue
+++ b/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue
@@ -3,7 +3,7 @@
     v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
-    custom-class="user-drawer-task"
+    custom-class="de-user-drawer"
     size="680px"
     direction="rtl"
   >
diff --git a/frontend/src/views/panel/appTemplateMarket/log/index.vue b/frontend/src/views/panel/appTemplateMarket/log/index.vue
index 795d645ea4..6f3b296e31 100644
--- a/frontend/src/views/panel/appTemplateMarket/log/index.vue
+++ b/frontend/src/views/panel/appTemplateMarket/log/index.vue
@@ -1,14 +1,16 @@
 <template>
-  <el-row style="text-align: left">
+  <el-row
+    style="text-align: left"
+    class="de-serach-table"
+  >
     <el-row class="top-operate">
       <el-col :span="12">
-        <el-button
+        <deBtn
           v-show="position==='templateLog'"
-          class="btn"
           type="primary"
           icon="el-icon-plus"
           @click="applyNew()"
-        >{{ $t('commons.create') }}</el-button>
+        >{{ $t('commons.create') }}</deBtn>
         <span>&nbsp;</span>
       </el-col>
       <el-col
@@ -300,107 +302,4 @@ export default {
 .table-container-filter {
   height: calc(100% - 110px);
 }
-.filter-texts {
-  display: flex;
-  align-items: center;
-  margin: 17px 0;
-  font-family: "PingFang SC";
-  font-weight: 400;
-
-  .sum {
-    color: #1f2329;
-  }
-
-  .title {
-    color: #999999;
-    margin-left: 8px;
-  }
-
-  .text {
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 1px 22px 1px 6px;
-    display: inline-block;
-    align-items: center;
-    color: #0c296e;
-    font-size: 14px;
-    line-height: 22px;
-    background: rgba(51, 112, 255, 0.1);
-    border-radius: 2px;
-    margin: 0;
-    margin-right: 8px;
-    position: relative;
-    i {
-      position: absolute;
-      right: 2px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-  }
-
-  .clear-btn {
-    color: #646a73;
-  }
-
-  .clear-btn:hover {
-    color: #3370ff;
-  }
-
-  .filter-texts-container::-webkit-scrollbar {
-    display: none;
-  }
-
-  .arrow-filter {
-    font-size: 16px;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    color: #646a73;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .arrow-filter:hover {
-    background: rgba(31, 35, 41, 0.1);
-    border-radius: 4px;
-  }
-
-  .el-icon-arrow-right.arrow-filter {
-    margin-left: 5px;
-  }
-
-  .el-icon-arrow-left.arrow-filter {
-    margin-right: 5px;
-  }
-  .filter-texts-container {
-    flex: 1;
-    overflow-x: auto;
-    white-space: nowrap;
-    height: 24px;
-  }
-}
-.top-operate {
-  margin-bottom: 16px;
-  .right-user {
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    .de-button {
-      margin-left: 12px;
-    }
-
-    .el-input--medium .el-input__icon {
-      line-height: 32px;
-    }
-  }
-
-  .name-email-search {
-    width: 240px;
-  }
-}
 </style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 2bbe586aec..0b32bcd0b3 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -1,33 +1,34 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col style="padding: 0 5px 0 5px;">
+  <el-col style="padding: 1px 24px 16px 24px">
     <el-col>
       <el-row style="margin-bottom: 10px">
-        <el-col :span="16">
+        <el-col :span="24">
           <el-input
             v-model="filterText"
-            size="mini"
+            size="small"
             :placeholder="$t('commons.search')"
             prefix-icon="el-icon-search"
             clearable
             class="main-area-input"
-          />
-        </el-col>
-        <el-col :span="8">
-          <el-dropdown>
-            <el-button
-              size="mini"
-              type="primary"
+          >
+            <el-select
+              slot="append"
+              v-model="searchType"
+              :placeholder="searchMap[searchType]"
             >
-              {{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="searchTypeClick('all')">全部</el-dropdown-item>
-              <el-dropdown-item @click.native="searchTypeClick('folder')">目录</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+              <el-option
+                :label="$t('commons.all')"
+                value="all"
+              />
+              <el-option
+                :label="$t('commons.folder')"
+                value="folder"
+              />
+            </el-select>
+          </el-input>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row class="de-tree">
         <span class="header-title">{{ $t('panel.default_panel') }}</span>
         <div class="block">
           <el-tree
@@ -111,7 +112,7 @@
           />
         </span>
       </el-row>
-      <el-col class="custom-tree-container">
+      <el-col class="custom-tree-container de-tree">
         <div class="block">
           <el-tree
             ref="panel_list_tree"
@@ -1049,6 +1050,15 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.main-area-input {
+  ::v-deep.el-input-group__append {
+    width: 70px;
+    background: transparent;
+    .el-input__inner {
+      padding-left: 12px;
+    }
+  }
+}
   .header-title {
     font-size: 14px;
     flex: 1;
@@ -1092,12 +1102,4 @@ export default {
     /*display: inline;*/
     visibility: visible;
   }
-
-  .unpublished {
-    color: #b2b2b2
-  }
-
-  .publish {
-  }
-
 </style>
diff --git a/frontend/src/views/system/SysParam/BasicSetting.vue b/frontend/src/views/system/SysParam/BasicSetting.vue
index 4d7b7bc4a2..0eb42544d9 100644
--- a/frontend/src/views/system/SysParam/BasicSetting.vue
+++ b/frontend/src/views/system/SysParam/BasicSetting.vue
@@ -193,7 +193,7 @@
 import { basicInfo, updateInfo } from '@/api/system/basic'
 import { ldapStatus, oidcStatus, casStatus } from '@/api/user'
 import bus from '@/utils/bus'
-import operater from './operater'
+import operater from './Operater'
 import msgCfm from '@/components/msgCfm'
 import PluginCom from '@/views/system/plugin/PluginCom'
 export default {
diff --git a/frontend/src/views/system/SysParam/ClusterModeSetting.vue b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
index 85047f1575..2b02318f2f 100644
--- a/frontend/src/views/system/SysParam/ClusterModeSetting.vue
+++ b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
@@ -182,7 +182,7 @@
 <script>
 import { engineInfo, validate, save } from '@/api/system/engine'
 import i18n from '@/lang'
-import operater from './operater'
+import operater from './Operater'
 import msgCfm from '@/components/msgCfm'
 import dePwd from '@/components/deCustomCm/dePwd.vue'
 export default {
diff --git a/frontend/src/views/system/SysParam/EmailSetting.vue b/frontend/src/views/system/SysParam/EmailSetting.vue
index 74607ad699..a27c1c4e37 100644
--- a/frontend/src/views/system/SysParam/EmailSetting.vue
+++ b/frontend/src/views/system/SysParam/EmailSetting.vue
@@ -130,7 +130,7 @@
 
 <script>
 import { emailInfo, updateInfo, validate } from '@/api/system/email'
-import operater from './operater'
+import operater from './Operater'
 import msgCfm from '@/components/msgCfm'
 import dePwd from '@/components/deCustomCm/dePwd.vue'
 export default {
diff --git a/frontend/src/views/system/log/filterUser.vue b/frontend/src/views/system/log/filterUser.vue
index 1ca62575f0..b538340655 100644
--- a/frontend/src/views/system/log/filterUser.vue
+++ b/frontend/src/views/system/log/filterUser.vue
@@ -3,7 +3,7 @@
     v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
-    custom-class="user-drawer-task"
+    custom-class="de-user-drawer"
     size="680px"
     direction="rtl"
   >
diff --git a/frontend/src/views/system/log/index.vue b/frontend/src/views/system/log/index.vue
index 23b665fd3f..86eed7697a 100644
--- a/frontend/src/views/system/log/index.vue
+++ b/frontend/src/views/system/log/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <de-layout-content :header="$t('log.title')">
+  <de-layout-content
+    class="de-serach-table"
+    :header="$t('log.title')"
+  >
     <el-row class="top-operate">
       <el-col :span="12">
         <deBtn
@@ -304,107 +307,4 @@ export default {
 .table-container-filter {
   height: calc(100% - 110px);
 }
-.filter-texts {
-  display: flex;
-  align-items: center;
-  margin: 17px 0;
-  font-family: "PingFang SC";
-  font-weight: 400;
-
-  .sum {
-    color: #1f2329;
-  }
-
-  .title {
-    color: #999999;
-    margin-left: 8px;
-  }
-
-  .text {
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 1px 22px 1px 6px;
-    display: inline-block;
-    align-items: center;
-    color: #0c296e;
-    font-size: 14px;
-    line-height: 22px;
-    background: rgba(51, 112, 255, 0.1);
-    border-radius: 2px;
-    margin: 0;
-    margin-right: 8px;
-    position: relative;
-    i {
-      position: absolute;
-      right: 2px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-  }
-
-  .clear-btn {
-    color: #646a73;
-  }
-
-  .clear-btn:hover {
-    color: #3370ff;
-  }
-
-  .filter-texts-container::-webkit-scrollbar {
-    display: none;
-  }
-
-  .arrow-filter {
-    font-size: 16px;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    color: #646a73;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .arrow-filter:hover {
-    background: rgba(31, 35, 41, 0.1);
-    border-radius: 4px;
-  }
-
-  .el-icon-arrow-right.arrow-filter {
-    margin-left: 5px;
-  }
-
-  .el-icon-arrow-left.arrow-filter {
-    margin-right: 5px;
-  }
-  .filter-texts-container {
-    flex: 1;
-    overflow-x: auto;
-    white-space: nowrap;
-    height: 24px;
-  }
-}
-.top-operate {
-  margin-bottom: 16px;
-  .right-user {
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    .de-button {
-      margin-left: 12px;
-    }
-
-    .el-input--medium .el-input__icon {
-      line-height: 32px;
-    }
-  }
-
-  .name-email-search {
-    width: 240px;
-  }
-}
 </style>
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index 17bcfb3d88..90a6a03146 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dataset-on-time">
+  <div class="dataset-on-time de-serach-table">
     <el-row class="top-operate">
       <el-col :span="10">
         <deBtn
@@ -244,11 +244,11 @@
           key="__operation"
           :label="$t('commons.operating')"
           fixed="right"
-          width="84"
+          width="100"
         >
           <template slot-scope="scope">
             <el-button
-              class="text-btn mar3 mar6"
+              class="de-text-btn mar3 mar6"
               type="text"
               @click="selectDataset(scope.row)"
             >{{
@@ -367,7 +367,7 @@ import { formatOrders } from '@/utils/index'
 import { datasetTaskList, post } from '@/api/dataset/dataset'
 import { hasDataPermission } from '@/utils/permission'
 import GridTable from '@/components/gridTable/index.vue'
-import filterUser from './filterUser.vue'
+import filterUser from './FilterUser.vue'
 import msgCfm from '@/components/msgCfm/index'
 import _ from 'lodash'
 import keyEnter from '@/components/msgCfm/keyEnter.js'
@@ -743,22 +743,6 @@ export default {
 .table-container {
   height: calc(100% - 50px);
 
-  .text-btn {
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: 0px;
-    text-align: center;
-    margin-left: 2px;
-    border: none;
-    padding: 2px 4px;
-  }
-
-  .text-btn:hover {
-    background: rgba(51, 112, 255, 0.1);
-  }
-
   .mar6 {
     margin-right: 6px;
   }
@@ -771,109 +755,6 @@ export default {
 .table-container-filter {
   height: calc(100% - 110px);
 }
-.filter-texts {
-  display: flex;
-  align-items: center;
-  margin: 17px 0;
-  font-family: "PingFang SC";
-  font-weight: 400;
-
-  .sum {
-    color: #1f2329;
-  }
-
-  .title {
-    color: #999999;
-    margin-left: 8px;
-  }
-
-  .text {
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 1px 22px 1px 6px;
-    display: inline-block;
-    align-items: center;
-    color: #0c296e;
-    font-size: 14px;
-    line-height: 22px;
-    background: rgba(51, 112, 255, 0.1);
-    border-radius: 2px;
-    margin: 0;
-    margin-right: 8px;
-    position: relative;
-    i {
-      position: absolute;
-      right: 2px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-  }
-
-  .clear-btn {
-    color: #646a73;
-  }
-
-  .clear-btn:hover {
-    color: #3370ff;
-  }
-
-  .filter-texts-container::-webkit-scrollbar {
-    display: none;
-  }
-
-  .arrow-filter {
-    font-size: 16px;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    color: #646a73;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .arrow-filter:hover {
-    background: rgba(31, 35, 41, 0.1);
-    border-radius: 4px;
-  }
-
-  .el-icon-arrow-right.arrow-filter {
-    margin-left: 5px;
-  }
-
-  .el-icon-arrow-left.arrow-filter {
-    margin-right: 5px;
-  }
-  .filter-texts-container {
-    flex: 1;
-    overflow-x: auto;
-    white-space: nowrap;
-    height: 24px;
-  }
-}
-.top-operate {
-  margin-bottom: 16px;
-  .right-user {
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    .de-button {
-      margin-left: 12px;
-    }
-
-    .el-input--medium .el-input__icon {
-      line-height: 32px;
-    }
-  }
-
-  .name-email-search {
-    width: 240px;
-  }
-}
 </style>
 <style lang="scss">
 .list-colums-slect {
diff --git a/frontend/src/views/system/task/TaskRecord.vue b/frontend/src/views/system/task/TaskRecord.vue
index 1dab58a3aa..3048288932 100644
--- a/frontend/src/views/system/task/TaskRecord.vue
+++ b/frontend/src/views/system/task/TaskRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dataset-on-time">
+  <div class="dataset-on-time de-serach-table">
     <el-row class="top-operate">
       <el-col :span="10">
         <deBtn
@@ -176,7 +176,7 @@ import {
 } from '@/utils/index'
 import { exportExcel, post } from '@/api/dataset/dataset'
 import GridTable from '@/components/gridTable/index.vue'
-import filterUser from './filterUserRecord.vue'
+import filterUser from './FilterUserRecord.vue'
 import _ from 'lodash'
 import keyEnter from '@/components/msgCfm/keyEnter.js'
 
@@ -453,29 +453,6 @@ export default {
 </script>
 
 <style scoped>
-.el-divider--horizontal {
-  margin: 12px 0;
-}
-
-.el-radio {
-  margin-right: 10px;
-}
-.el-radio ::v-deep .el-radio__label {
-  font-size: 12px;
-}
-
-.dialog-css ::v-deep .el-dialog__header {
-  padding: 20px 20px 0;
-}
-
-.dialog-css ::v-deep .el-dialog__body {
-  padding: 10px 20px 20px;
-}
-
-.el-form-item {
-  margin-bottom: 10px;
-}
-
 .err-msg {
   font-size: 12px;
   word-break: normal;
@@ -485,10 +462,6 @@ export default {
   word-wrap: break-word;
   overflow: hidden;
 }
-
-span {
-  font-size: 12px;
-}
 </style>
 <style lang="scss" scoped>
 .dataset-on-time {
@@ -501,136 +474,9 @@ span {
 }
 .table-container {
   height: calc(100% - 50px);
-
-  .text-btn {
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: 0px;
-    text-align: center;
-    margin-left: 2px;
-    border: none;
-    padding: 2px 4px;
-  }
-
-  .text-btn:hover {
-    background: rgba(51, 112, 255, 0.1);
-  }
-
-  .mar6 {
-    margin-right: 6px;
-  }
-
-  .mar3 {
-    margin-left: -3px;
-  }
 }
 
 .table-container-filter {
   height: calc(100% - 110px);
 }
-.filter-texts {
-  display: flex;
-  align-items: center;
-  margin: 17px 0;
-  font-family: "PingFang SC";
-  font-weight: 400;
-
-  .sum {
-    color: #1f2329;
-  }
-
-  .title {
-    color: #999999;
-    margin-left: 8px;
-  }
-
-  .text {
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 1px 22px 1px 6px;
-    display: inline-block;
-    align-items: center;
-    color: #0c296e;
-    font-size: 14px;
-    line-height: 22px;
-    background: rgba(51, 112, 255, 0.1);
-    border-radius: 2px;
-    margin: 0;
-    margin-right: 8px;
-    position: relative;
-    i {
-      position: absolute;
-      right: 2px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-  }
-
-  .clear-btn {
-    color: #646a73;
-  }
-
-  .clear-btn:hover {
-    color: #3370ff;
-  }
-
-  .filter-texts-container::-webkit-scrollbar {
-    display: none;
-  }
-
-  .arrow-filter {
-    font-size: 16px;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    color: #646a73;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .arrow-filter:hover {
-    background: rgba(31, 35, 41, 0.1);
-    border-radius: 4px;
-  }
-
-  .el-icon-arrow-right.arrow-filter {
-    margin-left: 5px;
-  }
-
-  .el-icon-arrow-left.arrow-filter {
-    margin-right: 5px;
-  }
-  .filter-texts-container {
-    flex: 1;
-    overflow-x: auto;
-    white-space: nowrap;
-    height: 24px;
-  }
-}
-.top-operate {
-  margin-bottom: 16px;
-  .right-user {
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    .de-button {
-      margin-left: 12px;
-    }
-
-    .el-input--medium .el-input__icon {
-      line-height: 32px;
-    }
-  }
-
-  .name-email-search {
-    width: 240px;
-  }
-}
 </style>
diff --git a/frontend/src/views/system/task/filterUser.vue b/frontend/src/views/system/task/filterUser.vue
index 0aba1d4ae3..771a78a64f 100644
--- a/frontend/src/views/system/task/filterUser.vue
+++ b/frontend/src/views/system/task/filterUser.vue
@@ -3,7 +3,7 @@
     v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
-    custom-class="user-drawer-task"
+    custom-class="de-user-drawer"
     size="680px"
     direction="rtl"
   >
diff --git a/frontend/src/views/system/task/filterUserRecord.vue b/frontend/src/views/system/task/filterUserRecord.vue
index f5059bbcd6..1e8dc9a2aa 100644
--- a/frontend/src/views/system/task/filterUserRecord.vue
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@@ -3,7 +3,7 @@
     v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
-    custom-class="user-drawer-task"
+    custom-class="de-user-drawer"
     size="680px"
     direction="rtl"
   >
diff --git a/frontend/src/views/system/user/CustomCondtion.vue b/frontend/src/views/system/user/CustomCondtion.vue
deleted file mode 100644
index 7d7d848a13..0000000000
--- a/frontend/src/views/system/user/CustomCondtion.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <el-switch
-      v-model="value"
-      active-text="当前用户"
-    />
-  </div>
-</template>
-
-<script>
-import { ComplexCondition } from 'fit2cloud-ui/src/components/search-bar/model'
-
-export default {
-  name: 'CustomCondition',
-  props: {
-    // eslint-disable-next-line vue/require-default-prop
-    field: String,
-    // eslint-disable-next-line vue/require-default-prop
-    label: String,
-    // eslint-disable-next-line vue/require-default-prop
-    defaultOperator: String,
-    // eslint-disable-next-line vue/require-default-prop
-    options: Array
-  },
-  data() {
-    return {
-      value: undefined,
-      operator: 'isCurrentUser',
-      operatorLabel: '是当前用户'
-    }
-  },
-  computed: {
-    valueLabel() {
-      return this.value ? '是' : '否'
-    }
-  },
-  // 自定义搜索控件的2个方法
-  methods: {
-    init() { // 初始化方法，在打开复合搜索界面时会被调用
-      // 例如清空之前填写的内容
-      this.value = undefined
-    },
-    getCondition() { // 点击确认时调用
-      const { field, label, operator, operatorLabel, value, valueLabel } = this
-      // 必须返回ComplexCondition类型的对象
-      return new ComplexCondition({ field, label, operator, operatorLabel, value, valueLabel })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue
index d851f170a6..dd8383038a 100644
--- a/frontend/src/views/system/user/filterUser.vue
+++ b/frontend/src/views/system/user/filterUser.vue
@@ -3,7 +3,7 @@
     v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
-    custom-class="user-drawer"
+    custom-class="de-user-drawer"
     size="680px"
     direction="rtl"
   >
@@ -115,20 +115,19 @@
         </div>
       </div>
     </div>
-    <div class="foot">
-      <el-button
-        class="btn normal"
+    <div class="de-foot">
+      <deBtn
+        secondary
         @click="reset"
       >{{
         $t("commons.reset")
-      }}</el-button>
-      <el-button
+      }}</deBtn>
+      <deBtn
         type="primary"
-        class="btn"
         @click="search"
       >{{
         $t("commons.adv_search.search")
-      }}</el-button>
+      }}</deBtn>
     </div>
   </el-drawer>
 </template>
diff --git a/frontend/src/views/system/user/imp-ldap.vue b/frontend/src/views/system/user/imp-ldap.vue
deleted file mode 100644
index de077f627e..0000000000
--- a/frontend/src/views/system/user/imp-ldap.vue
+++ /dev/null
@@ -1,298 +0,0 @@
-<template>
-  <layout-content
-    :header="$t('user.import_ldap') "
-    back-name="system-user"
-  >
-    <el-form
-      ref="importUserForm"
-      :model="form"
-      :rules="rule"
-      size="small"
-      label-width="auto"
-      label-position="right"
-    >
-
-      <el-form-item
-        :label="$t('commons.user')"
-        prop="userIds"
-      >
-        <el-select
-          ref="userSelect"
-          v-model="form.userIds"
-          filterable
-          style="width: 100%"
-          multiple
-          :placeholder="$t('commons.please_select')"
-          @change="changeUser"
-        >
-          <el-option
-            v-for="item in users"
-            :key="item.userName"
-            :disabled="item.disabled"
-            :label="item.nickName"
-            :value="item.userName"
-          >
-            <span>{{ item.nickName + (item.disabled ? '(已存在)':'') }}</span>
-            <!-- <span><el-checkbox v-model="item.checked">{{ item.nickName }}</el-checkbox></span> -->
-
-          </el-option>
-        </el-select>
-      </el-form-item>
-
-      <el-form-item
-        :label="$t('commons.organization')"
-        prop="deptId"
-      >
-        <treeselect
-          ref="deptTreeSelect"
-          v-model="form.deptId"
-          :options="depts"
-          :load-options="loadDepts"
-          :auto-load-root-options="false"
-          :placeholder="$t('user.choose_org')"
-          :no-children-text="$t('commons.treeselect.no_children_text')"
-          :no-options-text="$t('commons.treeselect.no_options_text')"
-          :no-results-text="$t('commons.treeselect.no_results_text')"
-          @open="filterData"
-        />
-      </el-form-item>
-      <el-form-item
-        :label="$t('commons.role')"
-        prop="roleIds"
-      >
-        <el-select
-          ref="roleSelect"
-          v-model="form.roleIds"
-          filterable
-          style="width: 100%"
-          multiple
-          :placeholder="$t('commons.please_select')"
-          @remove-tag="deleteTag"
-          @change="changeRole"
-        >
-          <el-option
-            v-for="item in roles"
-            :key="item.name"
-
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item
-        :label="$t('commons.status')"
-        prop="enabled"
-      >
-        <el-radio-group
-          v-model="form.enabled"
-          style="width: 140px"
-        >
-          <el-radio :label="1">{{ $t('commons.enable') }}</el-radio>
-          <el-radio :label="0">{{ $t('commons.disable') }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item>
-        <el-button
-          type="primary"
-          @click="save"
-        >{{ $t('commons.confirm') }}</el-button>
-        <el-button @click="cancel">{{ $t('commons.cancel') }}</el-button>
-      </el-form-item>
-    </el-form>
-
-  </layout-content>
-</template>
-
-<script>
-import LayoutContent from '@/components/business/LayoutContent'
-import { getDeptTree, treeByDeptId } from '@/api/system/dept'
-import { allRoles, ldapUsers, saveLdapUser, existLdapUsers } from '@/api/system/user'
-export default {
-
-  components: { LayoutContent },
-  data() {
-    return {
-      form: {
-        roles: [{
-          id: ''
-        }]
-      },
-      rule: {
-        userIds: [{ required: true, message: this.$t('user.select_users'), trigger: 'change' }],
-        roleIds: [{ required: true, message: this.$t('user.input_roles'), trigger: 'change' }],
-        deptId: [],
-        enable: []
-
-      },
-      defaultForm: { deptId: null, enabled: 1, roleIds: [2] },
-      depts: null,
-      roles: [],
-      roleDatas: [],
-      userRoles: [],
-      users: [],
-      exitsUsers: []
-    }
-  },
-
-  created() {
-    this.initRoles()
-    this.remoteMethod()
-    this.getExistUsers()
-    this.create()
-  },
-  mounted() {
-    this.bindKey()
-  },
-  destroyed() {
-    this.unBindKey()
-  },
-  methods: {
-    entryKey(event) {
-      const keyCode = event.keyCode
-      if (keyCode === 13) {
-        this.save()
-      }
-    },
-    bindKey() {
-      document.addEventListener('keypress', this.entryKey)
-    },
-    unBindKey() {
-      document.removeEventListener('keypress', this.entryKey)
-    },
-
-    create() {
-      this.depts = null
-      this.form = Object.assign({}, this.defaultForm)
-    },
-
-    initRoles() {
-      allRoles().then(res => {
-        this.roles = res.data
-      })
-    },
-
-    // 获取弹窗内部门数据
-    loadDepts({ action, parentNode, callback }) {
-      if (action === 'LOAD_ROOT_OPTIONS' && !this.form.deptId) {
-        const _self = this
-        treeByDeptId(0).then(res => {
-          const results = res.data.map(node => {
-            if (node.hasChildren && !node.children) {
-              node.children = null
-            }
-            return node
-          })
-          _self.depts = results
-          callback()
-        })
-      }
-
-      if (action === 'LOAD_CHILDREN_OPTIONS') {
-        const _self = this
-        getDeptTree(parentNode.id).then(res => {
-          parentNode.children = res.data.map(function(obj) {
-            return _self.normalizer(obj)
-          })
-          callback()
-        })
-      }
-    },
-    normalizer(node) {
-      if (node.hasChildren) {
-        node.children = null
-      }
-      return {
-        id: node.deptId,
-        label: node.name,
-        children: node.children
-      }
-    },
-    deleteTag(value) {
-      this.userRoles.forEach(function(data, index) {
-        if (data.id === value) {
-          this.userRoles.splice(index, value)
-        }
-      }.bind(this))
-    },
-    changeRole(value) {
-      this.userRoles = []
-      value.forEach(function(data, index) {
-        const role = { id: data }
-        this.userRoles.push(role)
-      }.bind(this))
-    },
-    cancel() {
-      this.$refs.importUserForm.resetFields()
-    },
-    save() {
-      this.$refs.importUserForm.validate(valid => {
-        if (valid) {
-          const checkedUsers = this.users.filter(user => user.checked)
-          const param = {
-            users: checkedUsers,
-            deptId: this.form.deptId,
-            roleIds: this.form.roleIds,
-            enabled: this.form.enabled
-          }
-          const method = saveLdapUser
-          method(param).then(res => {
-            this.$success(this.$t('commons.save_success'))
-            this.backToList()
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    backToList() {
-      this.$router.push({ name: 'system-user' })
-    },
-    filterData(instanceId) {
-      this.$refs.roleSelect && this.$refs.roleSelect.blur && this.$refs.roleSelect.blur()
-      if (!this.depts) {
-        return
-      }
-      const results = this.depts.map(node => {
-        if (node.hasChildren) {
-          node.children = null
-        }
-        return node
-      })
-      this.depts = results
-    },
-    remoteMethod() {
-      this.users = []
-      existLdapUsers().then(resout => {
-        this.exitsUsers = resout.data
-        ldapUsers().then(res => {
-          if (res && res.data) {
-            this.users = res.data.map(item => {
-              if (this.exitsUsers.some(existUser => existUser.username === item.userName)) {
-                item.disabled = true
-              }
-              return item
-            })
-          }
-        })
-      })
-    },
-    changeUser(values) {
-      this.users.forEach(user => {
-        user.checked = false
-        if (values.includes(user.userName)) {
-          user.checked = true
-        }
-      })
-    },
-
-    getExistUsers() {
-      /* existLdapUsers().then(res => {
-        this.exitsUsers = res.data
-      }) */
-    }
-
-  }
-}
-</script>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 9a60366e0e..168f75c1bc 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -1,14 +1,13 @@
 <template>
-  <de-layout-content>
+  <de-layout-content class="de-serach-table">
     <el-row class="top-operate">
       <el-col :span="12">
-        <el-button
+        <deBtn
           v-permission="['user:add']"
-          class="btn"
           type="primary"
           icon="el-icon-plus"
           @click="create"
-        >{{ $t("user.create") }}</el-button>
+        >{{ $t("user.create") }}</deBtn>
 
         <plugin-com
           v-if="isPluginLoaded"
@@ -32,25 +31,23 @@
           @blur="initSearch"
           @clear="initSearch"
         />
-        <el-button
-          v-btnPress="filterColor"
-          class="normal btn"
-          :class="[filterTexts.length ? 'active-btn filter-not-null' : 'filter-zero']"
+        <deBtn
+          :secondary="!cacheCondition.length"
+          :plain="!!cacheCondition.length"
           icon="iconfont icon-icon-filter"
           @click="filterShow"
         >{{ $t('user.filter') }}<template v-if="filterTexts.length">
           ({{ filterTexts.length }})
         </template>
-        </el-button>
+        </deBtn>
         <el-dropdown
           trigger="click"
           :hide-on-click="false"
         >
-          <el-button
-            v-btnPress
-            class="normal btn filter-zero"
+          <deBtn
+            secondary
             icon="el-icon-setting"
-          >{{ $t('user.list') }}</el-button>
+          >{{ $t('user.list') }}</deBtn>
           <el-dropdown-menu
             slot="dropdown"
             class="list-colums-slect"
@@ -246,7 +243,7 @@
           <template slot-scope="scope">
             <el-button
               v-permission="['user:edit']"
-              class="text-btn mr2"
+              class="de-text-btn mr2"
               type="text"
               @click="edit(scope.row)"
             >{{ $t("commons.edit") }}</el-button>
@@ -277,34 +274,30 @@
                 </el-button>
               </div>
               <div class="foot">
-                <!-- <el-button class="btn normal">{{
-                  $t("fu.search_bar.cancel")
-                }}</el-button> -->
-                <el-button
+                <deBtn
                   type="primary"
-                  class="btn"
                   @click="resetPwd(scope.row.userId)"
-                >{{ $t("fu.search_bar.ok") }}</el-button>
+                >{{ $t("fu.search_bar.ok") }}</deBtn>
               </div>
 
               <el-button
                 slot="reference"
                 v-permission="['user:editPwd']"
-                class="text-btn mar16"
+                class="de-text-btn mar16"
                 type="text"
               >{{ $t("member.edit_password") }}</el-button>
             </el-popover>
             <el-button
               v-if="scope.row.id !== 1"
               v-permission="['user:del']"
-              class="text-btn"
+              class="de-text-btn"
               type="text"
               @click="del(scope.row)"
             >{{ $t("commons.delete") }}</el-button>
             <el-button
               v-if="scope.row.locked"
               v-permission="['user:edit']"
-              class="text-btn"
+              class="de-text-btn"
               type="text"
               @click="unlock(scope.row)"
             >{{ $t("commons.unlock") }}</el-button>
@@ -326,41 +319,8 @@
 </template>
 
 <script>
-import userEditer from './userEditer.vue'
-const columnOptions = [
-  {
-    label: 'ID',
-    props: 'username'
-  },
-  {
-    label: 'commons.nick_name',
-    props: 'nickName'
-  },
-  {
-    label: 'user.source',
-    props: 'from'
-  },
-  {
-    label: 'commons.email',
-    props: 'email'
-  },
-  {
-    label: 'commons.organization',
-    props: 'dept'
-  },
-  {
-    label: 'commons.role',
-    props: 'roles'
-  },
-  {
-    label: 'commons.status',
-    props: 'status'
-  },
-  {
-    label: 'commons.create_time',
-    props: 'createTime'
-  }
-]
+import userEditer from './UserEditer.vue'
+import { columnOptions } from './options'
 import DeLayoutContent from '@/components/business/DeLayoutContent'
 import { addOrder, formatOrders } from '@/utils/index'
 import { pluginLoaded, defaultPwd } from '@/api/user'
@@ -375,7 +335,7 @@ import {
   unLock
 } from '@/api/system/user'
 import { mapGetters } from 'vuex'
-import filterUser from './filterUser.vue'
+import filterUser from './FilterUser.vue'
 import GridTable from '@/components/gridTable/index.vue'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import _ from 'lodash'
@@ -433,10 +393,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['user']),
-    filterColor() {
-      return this.filterTexts.length ? 'rgba(51, 112, 255, 0.15)' : '#EFF0F1'
-    }
+    ...mapGetters(['user'])
   },
   watch: {
     filterTexts: {
@@ -691,25 +648,6 @@ export default {
 .table-container {
   height: calc(100% - 50px);
 
-  .text-btn {
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: 0px;
-    text-align: center;
-    margin-left: 2px;
-    border: none;
-    padding: 2px 4px;
-  }
-
-  .text-btn:hover {
-    background: rgba(51, 112, 255, 0.1);
-  }
-  .disable-btn {
-    color: #bbbfc4;
-  }
-
   .mar16 {
     margin: 0 -2px 0 4px;
   }
@@ -722,149 +660,6 @@ export default {
 .table-container-filter {
   height: calc(100% - 110px);
 }
-.filter-texts {
-  display: flex;
-  align-items: center;
-  margin: 17px 0;
-  font-family: "PingFang SC";
-  font-weight: 400;
-
-  .sum {
-    color: #1f2329;
-  }
-
-  .title {
-    color: #999999;
-    margin-left: 8px;
-  }
-
-  .text {
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 1px 22px 1px 6px;
-    display: inline-block;
-    align-items: center;
-    color: #0c296e;
-    font-size: 14px;
-    line-height: 22px;
-    background: rgba(51, 112, 255, 0.1);
-    border-radius: 2px;
-    margin: 0;
-    margin-right: 8px;
-    position: relative;
-    i {
-      position: absolute;
-      right: 2px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-  }
-
-  .clear-btn {
-    color: #646a73;
-  }
-
-  .clear-btn:hover {
-    color: #3370ff;
-  }
-
-  .filter-texts-container::-webkit-scrollbar { display: none; }
-
-  .arrow-filter {
-    font-size: 16px;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    color: #646A73;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .arrow-filter:hover {
-    background: rgba(31, 35, 41, 0.1);
-    border-radius: 4px;
-  }
-
-  .el-icon-arrow-right.arrow-filter {
-    margin-left: 5px;
-  }
-
-  .el-icon-arrow-left.arrow-filter {
-    margin-right: 5px;
-  }
-  .filter-texts-container {
-    flex: 1;
-    overflow-x: auto;
-    white-space: nowrap;
-    height: 24px;
-  }
-}
-.top-operate {
-  margin-bottom: 16px;
-
-  .btn {
-    border-radius: 4px;
-    padding: 5px 12px;
-    //styleName: 中文/桌面端/正文 14 22 Regular;
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0px;
-    text-align: center;
-    border: none;
-    box-sizing: border-box;
-
-    ::v-deep span {
-      margin-left: 5px;
-    }
-  }
-
-  .normal {
-    color: var(----deTextPrimary, #1F2329);
-    border: 1px solid var(--deBorderBase, #BBBFC4);
-    margin-left: 12px;
-  }
-
-  .filter-not-null:focus {
-    background: rgba(51, 112, 255, 0.1);
-  }
-
-  .filter-not-null:hover {
-    background: rgba(51, 112, 255, 0.1) !important;
-  }
-
-  .filter-zero:focus {
-    background: #F5F6F7;
-  }
-
-  .filter-zero:hover {
-    background: #F5F6F7 !important;
-  }
-
-  .right-user {
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    .el-input--medium .el-input__icon {
-      line-height: 32px;
-    }
-  }
-
-  .name-email-search {
-    width: 240px;
-  }
-
-  .active-btn {
-    border-color: #3370ff;
-    color: #3370ff;
-  }
-}
 </style>
 <style lang="scss">
 .reset-pwd {
diff --git a/frontend/src/views/system/user/options.js b/frontend/src/views/system/user/options.js
new file mode 100644
index 0000000000..299d61e996
--- /dev/null
+++ b/frontend/src/views/system/user/options.js
@@ -0,0 +1,34 @@
+export const columnOptions = [
+  {
+    label: 'ID',
+    props: 'username'
+  },
+  {
+    label: 'commons.nick_name',
+    props: 'nickName'
+  },
+  {
+    label: 'user.source',
+    props: 'from'
+  },
+  {
+    label: 'commons.email',
+    props: 'email'
+  },
+  {
+    label: 'commons.organization',
+    props: 'dept'
+  },
+  {
+    label: 'commons.role',
+    props: 'roles'
+  },
+  {
+    label: 'commons.status',
+    props: 'status'
+  },
+  {
+    label: 'commons.create_time',
+    props: 'createTime'
+  }
+]
diff --git a/frontend/src/views/system/user/privateForm.vue b/frontend/src/views/system/user/privateForm.vue
deleted file mode 100644
index 38b61c6a85..0000000000
--- a/frontend/src/views/system/user/privateForm.vue
+++ /dev/null
@@ -1,390 +0,0 @@
-<template>
-  <layout-content>
-    <div style="width: 100%;display: flex;justify-content: center;">
-      <el-card class="box-card about-card">
-        <div class="form-header">
-          <span>{{ $t('commons.personal_info') }}</span>
-        </div>
-        <el-form
-          ref="createUserForm"
-          :model="form"
-          :rules="rule"
-          size="small"
-          label-width="auto"
-          label-position="right"
-        >
-          <el-form-item
-            label="ID"
-            prop="username"
-          >
-            <el-input
-              v-model="form.username"
-              disabled
-            />
-          </el-form-item>
-          <el-form-item
-            :label="$t('commons.phone')"
-            prop="phone"
-          >
-            <el-input
-              v-model="form.phone"
-              :disabled="formType!=='modify'"
-            />
-          </el-form-item>
-          <el-form-item
-            :label="$t('commons.nick_name')"
-            prop="nickName"
-          >
-            <el-input
-              v-model="form.nickName"
-              :disabled="formType!=='modify'"
-            />
-          </el-form-item>
-          <el-form-item
-            :label="$t('commons.email')"
-            prop="email"
-          >
-            <el-input
-              v-model="form.email"
-              :disabled="formType!=='modify'"
-            />
-          </el-form-item>
-
-          <el-form-item :label="$t('commons.status')">
-            <el-radio-group
-              v-model="form.enabled"
-              disabled
-              style="width: 140px"
-            >
-              <el-radio :label="1">{{ $t('commons.enable') }}</el-radio>
-              <el-radio :label="0">{{ $t('commons.disable') }}</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item
-            disabled
-            :label="$t('commons.organization')"
-            prop="dept"
-          >
-            <treeselect
-              v-model="form.deptId"
-              disabled
-              :options="depts"
-              :load-options="loadDepts"
-              :auto-load-root-options="false"
-              :placeholder="$t('user.choose_org')"
-              :no-children-text="$t('commons.treeselect.no_children_text')"
-              :no-options-text="$t('commons.treeselect.no_options_text')"
-              :no-results-text="$t('commons.treeselect.no_results_text')"
-            />
-          </el-form-item>
-          <el-form-item
-            :label="$t('commons.role')"
-            prop="roleIds"
-          >
-            <el-select
-              v-model="form.roleIds"
-              disabled
-              style="width: 100%"
-              multiple
-              :placeholder="$t('commons.please_select')"
-              @remove-tag="deleteTag"
-              @change="changeRole"
-            >
-              <el-option
-                v-for="item in roles"
-                :key="item.name"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-
-          <plugin-com
-            v-if="isPluginLoaded"
-            ref="AuthenticationBind"
-            :user-id="form.userId"
-            :form-type="formType"
-            component-name="AuthenticationBind"
-          />
-
-          <!--提供修改个人电话，邮箱和昵称的功能-->
-          <el-form-item v-if="formType!=='modify'">
-            <el-button @click="formType = 'modify'">修改个人信息</el-button>
-          </el-form-item>
-          <el-form-item v-else>
-            <el-button
-              v-if="formType==='modify'"
-              type="primary"
-              @click="save"
-            >保存</el-button>
-            <el-button
-              v-if="formType==='modify'"
-              @click="reset"
-            >取消</el-button>
-          </el-form-item>
-        </el-form>
-
-        <div
-          slot="footer"
-          style="margin-left: 30px;"
-          class="dialog-footer"
-        >
-          <el-button
-            v-if="formType==='modify'"
-            type="text"
-            @click="reset"
-          >{{ $t('commons.cancel') }}</el-button>
-          <el-button
-            v-if="formType==='modify'"
-            type="primary"
-            @click="save"
-          >{{ $t('commons.confirm') }}</el-button>
-          <el-button
-            v-if="formType!=='modify'"
-            type="primary"
-            @click="edit"
-          >{{ $t('commons.edit') }}</el-button>
-        </div>
-      </el-card>
-    </div>
-
-  </layout-content>
-</template>
-
-<script>
-import LayoutContent from '@/components/business/LayoutContent'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { PHONE_REGEX } from '@/utils/validate'
-import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
-import { getDeptTree, treeByDeptId } from '@/api/system/dept'
-import { allRoles } from '@/api/system/user'
-import { updatePerson, personInfo } from '@/api/system/user'
-import { pluginLoaded } from '@/api/user'
-import PluginCom from '@/views/system/plugin/PluginCom'
-import Cookies from 'js-cookie'
-export default {
-
-  components: { LayoutContent, Treeselect, PluginCom },
-  data() {
-    return {
-      form: {
-        roles: [{
-          id: ''
-        }]
-      },
-      rule: {
-        username: [
-          { required: true, message: this.$t('user.input_id'), trigger: 'blur' },
-          { min: 1, max: 50, message: this.$t('commons.input_limit', [1, 50]), trigger: 'blur' },
-          {
-            required: true,
-            pattern: '^[^\u4e00-\u9fa5]+$',
-            message: this.$t('user.special_characters_are_not_supported'),
-            trigger: 'blur'
-          }
-        ],
-        nickName: [
-          { required: true, message: this.$t('user.input_name'), trigger: 'blur' },
-          { min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur' },
-          {
-            required: true,
-            message: this.$t('user.special_characters_are_not_supported'),
-            trigger: 'blur'
-          }
-        ],
-        phone: [
-          {
-            pattern: PHONE_REGEX,
-            message: this.$t('user.mobile_number_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        email: [
-          { required: true, message: this.$t('user.input_email'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-            message: this.$t('user.email_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        password: [
-          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t('member.password_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        newPassword: [
-          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t('member.password_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ]
-
-      },
-      defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null, roleIds: [] },
-      depts: null,
-      roles: [],
-      roleDatas: [],
-      userRoles: [],
-      formType: 'add',
-      isPluginLoaded: false
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.$store.dispatch('app/toggleSideBarHide', true)
-    })
-  },
-  created() {
-    this.$store.dispatch('app/toggleSideBarHide', true)
-    this.showError()
-    this.queryPerson()
-    this.initRoles()
-  },
-  beforeCreate() {
-    pluginLoaded().then(res => {
-      this.isPluginLoaded = res.success && res.data
-    }).catch(() => {
-    })
-  },
-  methods: {
-    showError() {
-      const errKeys = ['WecomError', 'DingtalkError', 'LarkError']
-      errKeys.forEach(key => {
-        const msg = Cookies.get(key)
-        if (msg) {
-          this.$error(msg)
-          Cookies.remove(key)
-        }
-      })
-    },
-    queryPerson() {
-      personInfo().then(res => {
-        const info = res.data
-        this.form = info
-        const roles = info.roles
-        this.form['roleIds'] = roles.map(role => role.id)
-        if (this.form.deptId === 0) {
-          this.form.deptId = null
-        }
-        this.initDeptTree()
-      })
-    },
-
-    edit() {
-      this.formType = 'modify'
-    },
-    initRoles() {
-      allRoles().then(res => {
-        this.roles = res.data
-      })
-    },
-    initDeptTree() {
-      treeByDeptId(this.form.deptId || 0).then(res => {
-        const results = res.data.map(node => {
-          if (node.hasChildren && !node.children) {
-            node.children = null
-            // delete node.children
-          }
-          return node
-        })
-        this.depts = results
-      })
-    },
-    // 获取弹窗内部门数据
-    loadDepts({ action, parentNode, callback }) {
-      if (action === LOAD_ROOT_OPTIONS && !this.form.deptId) {
-        const _self = this
-        treeByDeptId(0).then(res => {
-          const results = res.data.map(node => {
-            if (node.hasChildren && !node.children) {
-              node.children = null
-            }
-            return node
-          })
-          _self.depts = results
-          callback()
-        })
-      }
-
-      if (action === LOAD_CHILDREN_OPTIONS) {
-        const _self = this
-        getDeptTree(parentNode.id).then(res => {
-          parentNode.children = res.data.map(function(obj) {
-            return _self.normalizer(obj)
-          })
-          callback()
-        })
-      }
-    },
-    normalizer(node) {
-      if (node.hasChildren) {
-        node.children = null
-      }
-      return {
-        id: node.deptId,
-        label: node.name,
-        children: node.children
-      }
-    },
-    deleteTag(value) {
-      this.userRoles.forEach(function(data, index) {
-        if (data.id === value) {
-          this.userRoles.splice(index, value)
-        }
-      }.bind(this))
-    },
-    changeRole(value) {
-      this.userRoles = []
-      value.forEach(function(data, index) {
-        const role = { id: data }
-        this.userRoles.push(role)
-      }.bind(this))
-    },
-    reset() {
-      this.formType = 'add'
-      this.queryPerson()
-      // 清空表单提示
-      this.$refs.createUserForm.clearValidate()
-    },
-    save() {
-      this.$refs.createUserForm.validate(valid => {
-        if (valid) {
-          updatePerson(this.form).then(res => {
-            this.$success(this.$t('commons.save_success'))
-            this.reset()
-          })
-        } else {
-          return false
-        }
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.about-card {
-  background: inherit;
-  margin-top: 5%;
-  flex-direction: row;
-  width: 640px;
-  min-width: 640px;
-  height: auto;
-  position: relative;
-  ::v-deep div.el-card__header {
-    padding: 0;
-  }
-}
-.form-header {
-    line-height: 60px;
-    font-size: 18px;
-}
-</style>
diff --git a/frontend/src/views/system/user/userEditer.vue b/frontend/src/views/system/user/userEditer.vue
index b0d1c25015..e47bf0b602 100644
--- a/frontend/src/views/system/user/userEditer.vue
+++ b/frontend/src/views/system/user/userEditer.vue
@@ -214,19 +214,18 @@
       slot="footer"
       class="dialog-footer"
     >
-      <el-button
-        class="btn normal"
+      <deBtn
+        secondary
         @click="reset"
       >{{
         $t("commons.cancel")
-      }}</el-button>
-      <el-button
-        class="btn"
+      }}</deBtn>
+      <deBtn
         type="primary"
         @click="save"
       >{{
         $t("commons.confirm")
-      }}</el-button>
+      }}</deBtn>
     </span>
   </el-dialog>
 </template>
@@ -636,25 +635,6 @@ export default {
     }
   }
 
-  .btn {
-    border-radius: 4px;
-    padding: 5px 26px 5px 26px;
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0px;
-    text-align: center;
-    border: none;
-    box-sizing: border-box;
-  }
-
-  .normal {
-    color: #1f2329;
-    border: 1px solid #bbbfc4;
-    margin-left: 12px;
-  }
-
   .form-gender-select {
     width: 100%;
   }