diff --git a/frontend/src/components/deCustomCm/deDatePick.vue b/frontend/src/components/deCustomCm/deDatePick.vue
new file mode 100644
index 0000000000..ce1f42316f
--- /dev/null
+++ b/frontend/src/components/deCustomCm/deDatePick.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="de-date-pick">
+    <el-date-picker
+      :value="value"
+      size="small"
+      :disabled="disabled"
+      type="daterange"
+      @input="handleChange"
+      range-separator="-"
+      :start-placeholder="$t('commons.date.start_date')"
+      :end-placeholder="$t('commons.date.end_date')"
+    >
+    </el-date-picker>
+    <svg-icon icon-class="icon_calendar_outlined" class="calendar-outlined" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeDatePick",
+  props: {
+    disabled: Boolean,
+    value: Array,
+  },
+  methods: {
+    handleChange(val) {
+      this.$emit("input", val);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.de-date-pick {
+  width: 256px;
+  position: relative;
+  .el-input__icon {
+    display: none;
+  }
+  .el-range-input {
+    text-align: left;
+  }
+
+  .el-date-editor {
+    padding-left: 12px;
+    width: 100%;
+  }
+
+  .calendar-outlined {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 13px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/deCustomCm/dePwd.vue b/frontend/src/components/deCustomCm/dePwd.vue
new file mode 100644
index 0000000000..48dc37697c
--- /dev/null
+++ b/frontend/src/components/deCustomCm/dePwd.vue
@@ -0,0 +1,76 @@
+<template>
+  <el-input
+    :value="value"
+    :placeholder="placeholder"
+    :type="type"
+    :disabled="disabled"
+    class="de-pwd-input"
+    @input="handleInput"
+    @change="handleChange"
+  >
+    <svg-icon
+      @click="handleClick"
+      v-if="!showPwd || buttonDisabled"
+      slot="suffix"
+      icon-class="de_pwd_invisible"
+    />
+    <svg-icon
+      @click="handleClick"
+      v-else
+      slot="suffix"
+      icon-class="de_pwd_visible"
+    />
+  </el-input>
+</template>
+
+<script>
+import { log } from "@antv/g2plot/lib/utils";
+export default {
+  name: "DePwd",
+  inject: {
+    elForm: {
+      default: "",
+    },
+  },
+  props: {
+    disabled: Boolean,
+    placeholder: String,
+    value: String,
+  },
+  data() {
+    return {
+      showPwd: false,
+    };
+  },
+  computed: {
+    buttonDisabled() {
+      return this.$options.propsData.hasOwnProperty("disabled")
+        ? this.disabled
+        : (this.elForm || {}).disabled;
+    },
+    type() {
+      return !this.showPwd || this.buttonDisabled ? "password" : "text";
+    },
+  },
+  methods: {
+    handleClick() {
+      if (this.buttonDisabled) return;
+      this.showPwd = !this.showPwd;
+    },
+    handleInput(val) {
+      this.$emit("input", val);
+    },
+    handleChange(val) {
+      this.$emit("change", val);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.de-pwd-input {
+  .el-input__suffix {
+    right: 12px;
+    font-size: 16px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index ab557e31cf..c78db79bfa 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -296,6 +296,16 @@ export default {
   border:1px solid var(--BrDateColor, #dfe4ed) !important;
   background: var(--BgDateColor, #FFFFFF) !important;
 
+  .el-picker-panel__sidebar {
+    background: var(--BgDateColor, #FFFFFF) !important;
+    border-right: 1px solid var(--BrDateColor, #dfe4ed) !important;
+
+    .el-picker-panel__shortcut {
+      color: var(--DateColor, #606266);
+    }
+  }
+  
+
   .popper__arrow,
   .popper__arrow::after {
     display: none !important;
@@ -310,6 +320,10 @@ export default {
     border-bottom:1px solid var(--BrDateColor, #e6ebf5) !important;
   }
 
+  .el-date-table td.in-range:not(.end-date):not(.start-date) div span {
+    color: #3370ff;
+  }
+
   .el-date-range-picker__header,
   .el-date-table th,
   .el-date-table__row,
diff --git a/frontend/src/icons/svg/de-search.svg b/frontend/src/icons/svg/de-search.svg
new file mode 100644
index 0000000000..0986c29cd5
--- /dev/null
+++ b/frontend/src/icons/svg/de-search.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9823 11.9244C9.89439 12.8051 8.50885 13.3327 7.00008 13.3327C3.50228 13.3327 0.666748 10.4972 0.666748 6.99935C0.666748 3.50155 3.50228 0.666016 7.00008 0.666016C10.4979 0.666016 13.3334 3.50155 13.3334 6.99935C13.3334 8.50811 12.8058 9.89365 11.9251 10.9816L14.6737 13.7301C14.8039 13.8603 14.8039 14.0714 14.6737 14.2015L14.2023 14.673C14.0721 14.8031 13.8611 14.8031 13.7309 14.673L10.9823 11.9244ZM12.0001 6.99935C12.0001 4.23793 9.7615 1.99935 7.00008 1.99935C4.23866 1.99935 2.00008 4.23793 2.00008 6.99935C2.00008 9.76077 4.23866 11.9993 7.00008 11.9993C9.7615 11.9993 12.0001 9.76077 12.0001 6.99935Z" fill="#646A73"/>
+</svg>
diff --git a/frontend/src/icons/svg/de_pwd_invisible.svg b/frontend/src/icons/svg/de_pwd_invisible.svg
new file mode 100644
index 0000000000..661ebba33e
--- /dev/null
+++ b/frontend/src/icons/svg/de_pwd_invisible.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00022 9.99975C7.56203 9.99975 7.13323 9.96523 6.71734 9.89921L6.38535 11.1382C6.33771 11.316 6.15493 11.4216 5.9771 11.3739L5.33315 11.2014C5.15533 11.1537 5.0498 10.9709 5.09745 10.7931L5.42255 9.57985C4.88013 9.39561 4.37096 9.15494 3.90491 8.86629L2.8454 9.9258C2.71522 10.056 2.50417 10.056 2.37399 9.9258L1.90259 9.4544C1.77242 9.32422 1.77242 9.11317 1.90259 8.98299L2.83565 8.04994C2.35424 7.59918 1.95209 7.0852 1.64812 6.52421C1.64492 6.51832 1.64162 6.51215 1.63823 6.50575C1.5136 6.27038 1.56023 5.97574 1.75709 5.79635C1.92051 5.64743 2.03596 5.5461 2.13639 5.44567C2.14538 5.43669 2.15521 5.42666 2.16569 5.41583C2.31108 5.2656 2.55902 5.32152 2.64417 5.51246C3.47427 7.37398 5.46211 8.66641 8.00022 8.66641C10.4321 8.66641 12.4664 7.40872 13.2829 5.68239C13.3042 5.63747 13.328 5.5809 13.3519 5.52084C13.4276 5.33064 13.6741 5.27325 13.8188 5.41801C13.9259 5.52508 14.0687 5.66784 14.2471 5.8463C14.4235 6.0227 14.4713 6.29211 14.356 6.51334C14.3279 6.56715 14.3006 6.61785 14.2774 6.65816C13.9638 7.20109 13.5572 7.69751 13.0754 8.1321L13.9263 8.98299C14.0565 9.11317 14.0565 9.32422 13.9263 9.4544L13.4549 9.9258C13.3247 10.056 13.1136 10.056 12.9835 9.9258L11.9888 8.93112C11.5521 9.19111 11.0792 9.40958 10.5779 9.57985L10.903 10.7931C10.9506 10.9709 10.8451 11.1537 10.6673 11.2014L10.0233 11.3739C9.84552 11.4216 9.66274 11.316 9.61509 11.1382L9.2831 9.89921C8.86721 9.96523 8.43842 9.99975 8.00022 9.99975Z" fill="#BBBFC4"/>
+</svg>
diff --git a/frontend/src/icons/svg/de_pwd_visible.svg b/frontend/src/icons/svg/de_pwd_visible.svg
new file mode 100644
index 0000000000..4e7ba5e799
--- /dev/null
+++ b/frontend/src/icons/svg/de_pwd_visible.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98994 12.333C10.1486 12.333 12.1472 10.9599 14.0001 7.99101C12.1949 5.03272 10.2008 3.66634 7.98994 3.66634C5.77984 3.66634 3.7929 5.0321 2.00009 7.99099C3.84053 10.9605 5.83206 12.333 7.98994 12.333ZM1.00172 8.59304C0.787049 8.22763 0.785596 7.77336 0.995302 7.40508C1.00277 7.39196 1.00993 7.37945 1.01672 7.36768C2.9521 4.01123 5.27627 2.33301 7.98923 2.33301C10.7133 2.33301 13.0518 4.02495 15.0049 7.40884C15.0107 7.41898 15.0168 7.42969 15.0232 7.44089C15.2208 7.7869 15.2193 8.21401 15.0172 8.55738C13.0127 11.9634 10.67 13.6663 7.98923 13.6663C5.31784 13.6663 2.98867 11.9752 1.00172 8.59304ZM8.00009 10.6663C6.52733 10.6663 5.33342 9.47243 5.33342 7.99967C5.33342 6.52692 6.52733 5.33301 8.00009 5.33301C9.47285 5.33301 10.6668 6.52692 10.6668 7.99967C10.6668 9.47243 9.47285 10.6663 8.00009 10.6663ZM8.00009 9.33301C8.73647 9.33301 9.33342 8.73605 9.33342 7.99967C9.33342 7.26329 8.73647 6.66634 8.00009 6.66634C7.26371 6.66634 6.66675 7.26329 6.66675 7.99967C6.66675 8.73605 7.26371 9.33301 8.00009 9.33301Z" fill="#BBBFC4"/>
+</svg>
diff --git a/frontend/src/icons/svg/pwd_invisible.svg b/frontend/src/icons/svg/pwd_invisible.svg
new file mode 100644
index 0000000000..661ebba33e
--- /dev/null
+++ b/frontend/src/icons/svg/pwd_invisible.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00022 9.99975C7.56203 9.99975 7.13323 9.96523 6.71734 9.89921L6.38535 11.1382C6.33771 11.316 6.15493 11.4216 5.9771 11.3739L5.33315 11.2014C5.15533 11.1537 5.0498 10.9709 5.09745 10.7931L5.42255 9.57985C4.88013 9.39561 4.37096 9.15494 3.90491 8.86629L2.8454 9.9258C2.71522 10.056 2.50417 10.056 2.37399 9.9258L1.90259 9.4544C1.77242 9.32422 1.77242 9.11317 1.90259 8.98299L2.83565 8.04994C2.35424 7.59918 1.95209 7.0852 1.64812 6.52421C1.64492 6.51832 1.64162 6.51215 1.63823 6.50575C1.5136 6.27038 1.56023 5.97574 1.75709 5.79635C1.92051 5.64743 2.03596 5.5461 2.13639 5.44567C2.14538 5.43669 2.15521 5.42666 2.16569 5.41583C2.31108 5.2656 2.55902 5.32152 2.64417 5.51246C3.47427 7.37398 5.46211 8.66641 8.00022 8.66641C10.4321 8.66641 12.4664 7.40872 13.2829 5.68239C13.3042 5.63747 13.328 5.5809 13.3519 5.52084C13.4276 5.33064 13.6741 5.27325 13.8188 5.41801C13.9259 5.52508 14.0687 5.66784 14.2471 5.8463C14.4235 6.0227 14.4713 6.29211 14.356 6.51334C14.3279 6.56715 14.3006 6.61785 14.2774 6.65816C13.9638 7.20109 13.5572 7.69751 13.0754 8.1321L13.9263 8.98299C14.0565 9.11317 14.0565 9.32422 13.9263 9.4544L13.4549 9.9258C13.3247 10.056 13.1136 10.056 12.9835 9.9258L11.9888 8.93112C11.5521 9.19111 11.0792 9.40958 10.5779 9.57985L10.903 10.7931C10.9506 10.9709 10.8451 11.1537 10.6673 11.2014L10.0233 11.3739C9.84552 11.4216 9.66274 11.316 9.61509 11.1382L9.2831 9.89921C8.86721 9.96523 8.43842 9.99975 8.00022 9.99975Z" fill="#BBBFC4"/>
+</svg>
diff --git a/frontend/src/icons/svg/pwd_visible.svg b/frontend/src/icons/svg/pwd_visible.svg
new file mode 100644
index 0000000000..4e7ba5e799
--- /dev/null
+++ b/frontend/src/icons/svg/pwd_visible.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98994 12.333C10.1486 12.333 12.1472 10.9599 14.0001 7.99101C12.1949 5.03272 10.2008 3.66634 7.98994 3.66634C5.77984 3.66634 3.7929 5.0321 2.00009 7.99099C3.84053 10.9605 5.83206 12.333 7.98994 12.333ZM1.00172 8.59304C0.787049 8.22763 0.785596 7.77336 0.995302 7.40508C1.00277 7.39196 1.00993 7.37945 1.01672 7.36768C2.9521 4.01123 5.27627 2.33301 7.98923 2.33301C10.7133 2.33301 13.0518 4.02495 15.0049 7.40884C15.0107 7.41898 15.0168 7.42969 15.0232 7.44089C15.2208 7.7869 15.2193 8.21401 15.0172 8.55738C13.0127 11.9634 10.67 13.6663 7.98923 13.6663C5.31784 13.6663 2.98867 11.9752 1.00172 8.59304ZM8.00009 10.6663C6.52733 10.6663 5.33342 9.47243 5.33342 7.99967C5.33342 6.52692 6.52733 5.33301 8.00009 5.33301C9.47285 5.33301 10.6668 6.52692 10.6668 7.99967C10.6668 9.47243 9.47285 10.6663 8.00009 10.6663ZM8.00009 9.33301C8.73647 9.33301 9.33342 8.73605 9.33342 7.99967C9.33342 7.26329 8.73647 6.66634 8.00009 6.66634C7.26371 6.66634 6.66675 7.26329 6.66675 7.99967C6.66675 8.73605 7.26371 9.33301 8.00009 9.33301Z" fill="#BBBFC4"/>
+</svg>
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index fa60246509..2cf79107b9 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -97,8 +97,8 @@ export default {
   font-family: PingFang SC;
   font-size: 14px;
   font-weight: 400;
-  color: #646a73;
-  background: #fff;
+  color: var(--SiderTextColor, #646a73);
+  background-color: var(--SiderBG, #ffffff);
   cursor: pointer;
 
   i {
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 8702b16346..c2925ce407 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1196,4 +1196,20 @@ div:focus {
   position: absolute;
   right: 12px;
   bottom: 12px;
+}
+
+
+.de-input-search {
+  .el-input__inner {
+    padding-left: 36px;
+  }
+  .el-input__prefix {
+    left: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      font-size: 16px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/views/panel/template/component/TemplateItem.vue b/frontend/src/views/panel/template/component/TemplateItem.vue
index c093e27048..dd7de4be51 100644
--- a/frontend/src/views/panel/template/component/TemplateItem.vue
+++ b/frontend/src/views/panel/template/component/TemplateItem.vue
@@ -72,7 +72,7 @@ export default {
   background: #ffffff;
   border: 1px solid var(--deCardStrokeColor, #dee0e3);
   border-radius: 4px;
-  margin: 0 12.5px 25px 12.5px;
+  margin: 0 24px 25px 0;
   .card-img-model {
     border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
     height: 144px;
diff --git a/frontend/src/views/panel/template/component/TemplateList.vue b/frontend/src/views/panel/template/component/TemplateList.vue
index c678e112ee..c17737d7b2 100644
--- a/frontend/src/views/panel/template/component/TemplateList.vue
+++ b/frontend/src/views/panel/template/component/TemplateList.vue
@@ -2,11 +2,13 @@
   <div class="de-template-list">
     <el-input
       v-model="templateFilterText"
-      :placeholder="$t('panel.filter_keywords')"
+      :placeholder="$t('system_parameter_setting.search_keywords')"
       size="small"
+      class="de-input-search"
       clearable
-      prefix-icon="el-icon-search"
-    />
+    >
+      <svg-icon slot="prefix" icon-class="de-search"></svg-icon>
+    </el-input>
     <el-empty
       :image="noneImg"
       v-if="!templateListComputed.length && templateFilterText === ''"
@@ -85,8 +87,8 @@ export default {
     return {
       templateFilterText: "",
       activeTemplate: "",
-      noneImg: require('@/assets/None.png'),
-      nothingImg: require('@/assets/nothing.png'),
+      noneImg: require("@/assets/None.png"),
+      nothingImg: require("@/assets/nothing.png"),
     };
   },
   computed: {
@@ -127,12 +129,12 @@ export default {
     },
     templateDelete(template) {
       const options = {
-          title: 'system_parameter_setting.delete_this_category',
-          content: 'system_parameter_setting.also_be_deleted',
-          type: "primary",
-          cb: () => this.$emit("templateDelete", template.id),
-        };
-        this.handlerConfirm(options);
+        title: "system_parameter_setting.delete_this_category",
+        content: "system_parameter_setting.also_be_deleted",
+        type: "primary",
+        cb: () => this.$emit("templateDelete", template.id),
+      };
+      this.handlerConfirm(options);
     },
     templateEdit(template) {
       this.$emit("templateEdit", template);
@@ -163,7 +165,7 @@ export default {
     display: flex;
     align-items: center;
     border-radius: 4px;
-    color: var(--deTextPrimary, #1F2329);
+    color: var(--deTextPrimary, #1f2329);
     font-family: "PingFang SC";
     font-style: normal;
     font-weight: 500;
diff --git a/frontend/src/views/panel/template/index.vue b/frontend/src/views/panel/template/index.vue
index 7ddfabdca4..49d7028e63 100644
--- a/frontend/src/views/panel/template/index.vue
+++ b/frontend/src/views/panel/template/index.vue
@@ -152,8 +152,8 @@ export default {
       currentTemplateLabel: "",
       currentTemplateId: "",
       templateList: [],
-      templateMiniWidth: 262,
-      templateCurWidth: 262,
+      templateMiniWidth: 286,
+      templateCurWidth: 286,
       formType: "",
       originName: "",
       templateDialog: {
@@ -187,9 +187,8 @@ export default {
         const curSeparator = Math.trunc(
           templateMainDom.offsetWidth / _this.templateMiniWidth
         );
-        console.log(1, curSeparator);
         _this.templateCurWidth =
-          Math.trunc(templateMainDom.offsetWidth / curSeparator) - 50;
+          Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator;
       });
     });
   },
@@ -387,7 +386,7 @@ export default {
   .de-tabs-right {
     flex: 1;
     background: #fff;
-    padding: 24px 12px 24px 12px;
+    padding: 24px 0 24px 24px;
     overflow: hidden;
 
     .template-box {
@@ -403,6 +402,7 @@ export default {
 
     .active-template {
       margin: 4px 0 20px 0;
+      padding-right: 24px;
       font-family: "PingFang SC";
       font-style: normal;
       font-weight: 500;
diff --git a/frontend/src/views/system/SysParam/BasicSetting.vue b/frontend/src/views/system/SysParam/BasicSetting.vue
index 4d7b2f0482..685b230111 100644
--- a/frontend/src/views/system/SysParam/BasicSetting.vue
+++ b/frontend/src/views/system/SysParam/BasicSetting.vue
@@ -15,9 +15,10 @@
     <!--基础配置表单-->
     <el-form ref="formInline" v-loading="loading" :model="formInline" :rules="rules"
       class="demo-form-inline de-form-item" :disabled="show" label-width="80px" label-position="right" size="small">
-      <el-form-item prop="frontTimeOut">
+      <el-form-item prop="frontTimeOut" class="de-i118">
         <template slot="label">
           {{ $t('system_parameter_setting.request_timeout')}}
+          <i class="is-require"></i>
           <el-tooltip class="item" effect="dark" :content="$t('system_parameter_setting.front_time_out')"
             placement="top">
             <i class="el-icon-warning-outline tips"></i>
@@ -253,9 +254,8 @@ export default {
 <style lang="scss" scoped>
 .demo-form-inline {
   .tips {
-    position: absolute;
-    left: 100px;
-    top: 5px;
+    margin-left: 2px;
+    position: relative;
     z-index: 10;
   }
 
@@ -265,3 +265,15 @@ export default {
     }
 }
 </style>
+<style lang="scss">
+.de-i118 {
+  .el-form-item__label::after {
+    display: none;
+  }
+  .is-require::after {
+    content: "*";
+    color: #f54a45;
+    margin-left: 2px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/SysParam/ClusterModeSetting.vue b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
index f87c81dc49..cc108c5b3c 100644
--- a/frontend/src/views/system/SysParam/ClusterModeSetting.vue
+++ b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
@@ -41,7 +41,7 @@
         <el-input v-model="form.configuration.username" />
       </el-form-item>
       <el-form-item :label="$t('datasource.password')">
-        <el-input v-model="form.configuration.password" show-password />
+        <dePwd v-model="form.configuration.password"/>
       </el-form-item>
       <el-form-item
         :label="$t('datasource.query_port')"
@@ -162,11 +162,13 @@ import { engineInfo, validate, save } from "@/api/system/engine";
 import i18n from "@/lang";
 import operater from "./operater";
 import msgCfm from '@/components/msgCfm'
+import dePwd from '@/components/deCustomCm/dePwd.vue'
 export default {
   name: "ClusterMode",
   mixins: [msgCfm],
   components: {
     operater,
+    dePwd
   },
   data() {
     return {
diff --git a/frontend/src/views/system/SysParam/EmailSetting.vue b/frontend/src/views/system/SysParam/EmailSetting.vue
index 75147b9384..d059650987 100644
--- a/frontend/src/views/system/SysParam/EmailSetting.vue
+++ b/frontend/src/views/system/SysParam/EmailSetting.vue
@@ -68,14 +68,9 @@
         :label="$t('system_parameter_setting.SMTP_password')"
         prop="password"
       >
-        <el-input
-          ref="input"
+        <dePwd
           v-model="formInline.password"
           :placeholder="$t('system_parameter_setting.SMTP_password')"
-          autocomplete="new-password"
-          show-password
-          type="text"
-          @focus="changeType"
         />
       </el-form-item>
       <el-form-item :label="$t('system_parameter_setting.test_recipients')">
@@ -90,13 +85,9 @@
             <i class="el-icon-warning-outline tips-not-absolute"></i>
           </el-tooltip>
         </template>
-        <el-input
-          ref="input"
+        <dePwd
           v-model="formInline.recipient"
           :placeholder="$t('system_parameter_setting.test_recipients')"
-          autocomplete="new-password"
-          show-password
-          type="text"
         />
       </el-form-item>
       <el-form-item label="邮箱服务器配置">
@@ -134,12 +125,13 @@
 import { emailInfo, updateInfo, validate } from "@/api/system/email";
 import operater from "./operater";
 import msgCfm from '@/components/msgCfm'
-
+import dePwd from '@/components/deCustomCm/dePwd.vue'
 export default {
   name: "EmailSetting",
   mixins: [msgCfm],
   components: {
     operater,
+    dePwd
   },
   data() {
     return {
@@ -183,9 +175,6 @@ export default {
     this.query();
   },
   methods: {
-    changeType() {
-      this.$refs.input = "password";
-    },
     query() {
       emailInfo().then((response) => {
         this.formInline = response.data;
diff --git a/frontend/src/views/system/SysParam/KettleSetting.vue b/frontend/src/views/system/SysParam/KettleSetting.vue
index 0787e3aca4..c7d32330f2 100644
--- a/frontend/src/views/system/SysParam/KettleSetting.vue
+++ b/frontend/src/views/system/SysParam/KettleSetting.vue
@@ -93,7 +93,7 @@
             :label="$t('kettle.passwd')"
             prop="configuration.passwd"
           >
-            <el-input :placeholder="$t('components.input_a_password')" v-model="form.configuration.passwd" show-password />
+            <dePwd :placeholder="$t('components.input_a_password')" v-model="form.configuration.passwd"/>
           </el-form-item>
         </el-form>
       </el-col>
@@ -122,11 +122,12 @@ import {
 } from "@/api/system/kettle";
 import i18n from "@/lang";
 import GridTable from "@/components/gridTable/index.vue";
+import dePwd from '@/components/deCustomCm/dePwd.vue'
 import msgCfm from '@/components/msgCfm'
 
 export default {
   name: "KettleSetting",
-  components: { GridTable },
+  components: { GridTable, dePwd },
   mixins: [msgCfm],
   data() {
     return {
@@ -339,7 +340,7 @@ export default {
   justify-content: center;
   align-items: center;
   border-radius: 2px;
-  width: 40px;
+  padding: 1px 6px;
   height: 24px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/system/log/filterUser.vue b/frontend/src/views/system/log/filterUser.vue
new file mode 100644
index 0000000000..88b9f22c42
--- /dev/null
+++ b/frontend/src/views/system/log/filterUser.vue
@@ -0,0 +1,403 @@
+<template>
+  <el-drawer
+    :title="$t('user.filter_method')"
+    :visible.sync="userDrawer"
+    custom-class="user-drawer-task"
+    size="680px"
+    v-closePress
+    direction="rtl"
+  >
+    <div class="filter">
+      <span>{{ $t("log.optype") }}</span>
+      <div class="filter-item">
+        <span
+          class="item"
+          @click="statusChange(item.value)"
+          :class="[activeType.includes(item.value) ? 'active' : '']"
+          :key="item.label"
+          v-for="item in types"
+          >{{ $t(item.label) }}</span
+        >
+      </div>
+    </div>
+    <div class="el-drawer__body-cont">
+      <div class="filter">
+        <span>{{ $t("log.user") }}</span>
+        <div class="filter-item">
+          <span
+            @click="activeUserChange(ele.id)"
+            class="item"
+            :class="[activeUser.includes(ele.id) ? 'active' : '']"
+            :key="ele.id"
+            v-for="ele in usersValueCopy"
+            >{{ ele.username }}</span
+          >
+          <el-popover
+            placement="bottom"
+            popper-class="user-popper"
+            width="200"
+            trigger="click"
+          >
+            <el-select
+              ref="userSelect"
+              v-model="usersValue"
+              multiple
+              filterable
+              :placeholder="$t('commons.please_select')"
+              @change="changeUser"
+              @remove-tag="changeUser"
+              value-key="id"
+            >
+              <el-option
+                v-for="item in usersComputed"
+                :key="item.username"
+                :label="item.username"
+                :value="item"
+              />
+            </el-select>
+            <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+          </el-popover>
+        </div>
+      </div>
+      <div class="filter">
+        <span>{{ $t("dedaterange.label") }}</span>
+        <div class="filter-item">
+          <DeDatePick  v-model="dataRange"></DeDatePick>
+        </div>
+      </div>
+    </div>
+    <div class="foot">
+      <el-button class="btn normal" @click="reset">{{
+        $t("commons.reset")
+      }}</el-button>
+      <el-button type="primary" class="btn" @click="search">{{
+        $t("commons.adv_search.search")
+      }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { dateFormat } from "@/views/system/task/options.js";
+import { opTypes } from "@/api/system/log";
+import { post } from "@/api/dataset/dataset";
+import DeDatePick from '@/components/deCustomCm/deDatePick.vue'
+export default {
+  components: {
+    DeDatePick
+  },
+  data() {
+    return {
+      types: [],
+      treeLoading: false,
+      filterTextMap: [],
+      dataRange: [],
+      usersValue: [],
+      activeUser: [],
+      users: [],
+      userCahe: [],
+      activeType: [],
+      userDrawer: false,
+    };
+  },
+  computed: {
+    usersComputed() {
+      return this.users.filter((ele) => !this.activeUser.includes(ele.id));
+    },
+    usersValueCopy() {
+      return this.userCahe.filter((ele) => this.activeUser.includes(ele.id));
+    },
+  },
+  mounted() {
+    this.loadUsers();
+    this.loadType();
+  },
+  methods: {
+    loadType() {
+      opTypes().then((res) => {
+        this.types = res.data.map((item) => {
+          return { label: item.name, value: item.id };
+        });
+      });
+    },
+    loadUsers() {
+      post("/api/user/userLists", {}, false).then((res) => {
+        this.users = res.data;
+      });
+    },
+    changeUser() {
+      if (
+        this.userCahe.length >
+        this.usersValue.length + this.activeUser.length
+      ) {
+        this.userCahe = this.userCahe.filter((ele) =>
+          this.usersValue
+            .map((ele) => ele.id)
+            .concat(this.activeUser)
+            .includes(ele.id)
+        );
+        return;
+      }
+      const userIdx = this.usersValue.findIndex(
+        (ele) =>
+          !this.userCahe
+            .map((ele) => ele.id)
+            .concat(this.activeUser)
+            .includes(ele.id)
+      );
+      if (userIdx === -1) return;
+      this.activeUser.push(this.usersValue[userIdx].id);
+      this.userCahe.push(this.usersValue[userIdx]);
+      this.usersValue.splice(userIdx, 1);
+    },
+    activeUserChange(id) {
+      const userIndex = this.activeUser.findIndex((ele) => ele === id);
+      if (userIndex === -1) {
+        this.activeUser.push(id);
+        this.usersValue = this.usersValue.filter((ele) => ele.id !== id);
+      } else {
+        this.activeUser.splice(userIndex, 1);
+        const user = this.userCahe.find((ele) => ele.id === id);
+        this.usersValue.push(user);
+      }
+    },
+    clearFilter() {
+      this.dataRange = [];
+      this.usersValue = [];
+      this.activeUser = [];
+      this.activeType = [];
+      this.userCahe = [];
+      this.$emit("search", [], []);
+    },
+    clearOneFilter(index) {
+      (this.filterTextMap[index] || []).forEach((ele) => {
+        this[ele] = [];
+      });
+    },
+    statusChange(value, type) {
+      const statusIndex = this.activeType.findIndex((ele) => ele === value);
+      if (statusIndex === -1) {
+        this.activeType.push(value);
+      } else {
+        this.activeType.splice(statusIndex, 1);
+      }
+    },
+    search() {
+      this.userDrawer = false;
+      this.$emit("search", this.formatCondition(), this.formatText());
+    },
+    formatText() {
+      this.filterTextMap = [];
+      const params = [];
+      if (this.activeType.length) {
+          params.push(
+            `${this.$t('log.optype')}:${this.activeType
+              .map((item) =>
+                this.types.find((itx) => itx.value === item).label
+              )
+              .join("、")}`
+          );
+          this.filterTextMap.push([`activeType`]);
+        }
+      if (this.activeUser.length) {
+        let str = `${this.$t("log.user")}:${this.activeUser.reduce(
+          (pre, next) =>
+            (this.users.find((ele) => ele.id === next) || {}).username +
+            "、" +
+            pre,
+          ""
+        )}`;
+        params.push(str.slice(0, str.length - 1));
+        this.filterTextMap.push([
+          "usersValue",
+          "activeUser",
+          "users",
+          "userCahe",
+        ]);
+      }
+      
+      if (this.dataRange.length) {
+        params.push(
+          `${this.$t("dedaterange.label")}:${this.dataRange
+            .map((ele) => {
+              return dateFormat("YYYY-mm-dd", ele);
+            })
+            .join("-")}`
+        );
+        this.filterTextMap.push(["dataRange"]);
+      }
+      return params;
+    },
+    formatCondition() {
+      const fildMap = {
+        optype: this.activeType,
+        "user_id": this.activeUser,
+      };
+      const conditions = [];
+      Object.keys(fildMap).forEach((ele) => {
+        if (fildMap[ele].length) {
+          conditions.push({
+            field: ele,
+            operator: "in",
+            value: fildMap[ele],
+          });
+        }
+      });
+      const [min, max] = this.dataRange;
+      if (min && max) {
+        conditions.push({
+          field: "time",
+          operator: "between",
+          value: [+min, +max],
+        });
+      }
+      return conditions;
+    },
+    init() {
+      this.userDrawer = true;
+    },
+    reset() {
+      this.clearFilter();
+      this.userDrawer = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.user-drawer-task {
+  .el-drawer__body-cont {
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 100%;
+    padding-bottom: 80px;
+  }
+  .el-drawer__header {
+    padding: 16px 24px;
+    margin: 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: #1f2329;
+    position: relative;
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
+    border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
+  }
+
+  .el-drawer__body {
+    padding: 12px 24px 24px 24px;
+    position: relative;
+  }
+
+  .filter {
+    display: flex;
+    min-height: 46px;
+    > :nth-child(1) {
+      color: #1f2329;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      white-space: nowrap;
+      width: 116px;
+    }
+    .filter-item {
+      flex: 1;
+      .item,
+      .more {
+        font-family: PingFang SC;
+        white-space: nowrap;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        margin-right: 12px;
+        text-align: center;
+        padding: 1px 6px;
+        background: #f5f6f7;
+        border-radius: 2px;
+        cursor: pointer;
+        display: inline-block;
+        margin-bottom: 12px;
+      }
+
+      .active,
+      .more:hover {
+        background: rgba(51, 112, 255, 0.1);
+        color: #0c296e;
+      }
+      .more {
+        white-space: nowrap;
+      }
+    }
+  }
+  .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: #ffffff;
+    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
+  }
+}
+.user-popper {
+  padding: 0;
+  background: #fff;
+  .popper__arrow {
+    display: none;
+  }
+}
+.tree-select {
+  .el-select-dropdown__empty,
+  .el-scrollbar__wrap,
+  .popper__arrow {
+    display: none !important;
+  }
+}
+
+.user-popper.dept {
+  height: 400px;
+  overflow: auto;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/log/index.vue b/frontend/src/views/system/log/index.vue
index 76f62fbb8b..33819ebe83 100644
--- a/frontend/src/views/system/log/index.vue
+++ b/frontend/src/views/system/log/index.vue
@@ -1,162 +1,393 @@
 <template>
-  <layout-content :header="$t('log.title')">
-    <complex-table
-      v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
-      :data="data"
-      :columns="columns"
-      :search-config="searchConfig"
-      :pagination-config="paginationConfig"
-      @select="select"
-      @search="search"
-      @sort-change="sortChange"
+  <de-layout-content :header="$t('log.title')">
+    <el-row class="top-operate">
+      <el-col :span="12">
+        <deBtn v-permission="['log:export']" secondary @click="exportConfirm">{{
+          $t("zip.export")
+        }}</deBtn>
+        &nbsp; &nbsp;
+      </el-col>
+      <el-col :span="12" class="right-user">
+        <el-input
+          :placeholder="$t('通过事件详情搜索')"
+          prefix-icon="el-icon-search"
+          class="name-email-search"
+          size="small"
+          clearable
+          ref="search"
+          v-model="nikeName"
+          @blur="initSearch"
+          @clear="initSearch"
+        >
+        </el-input>
+        <deBtn
+          :secondary="!cacheCondition.length"
+          :plain="!!cacheCondition.length"
+          icon="iconfont icon-icon-filter"
+          @click="filterShow"
+          >{{ $t("user.filter")
+          }}<template v-if="filterTexts.length">
+            ({{ cacheCondition.length }})
+          </template>
+        </deBtn>
+      </el-col>
+    </el-row>
+    <div class="filter-texts" v-if="filterTexts.length">
+      <span class="sum">{{ paginationConfig.total }}</span>
+      <span class="title">{{ $t("user.result_one") }}</span>
+      <el-divider direction="vertical"></el-divider>
+      <i
+        @click="scrollPre"
+        v-if="showScroll"
+        class="el-icon-arrow-left arrow-filter"
+      ></i>
+      <div class="filter-texts-container">
+        <p class="text" v-for="(ele, index) in filterTexts" :key="ele">
+          {{ ele }} <i @click="clearOneFilter(index)" class="el-icon-close"></i>
+        </p>
+      </div>
+      <i
+        @click="scrollNext"
+        v-if="showScroll"
+        class="el-icon-arrow-right arrow-filter"
+      ></i>
+      <el-button
+        type="text"
+        class="clear-btn"
+        icon="el-icon-delete"
+        @click="clearFilter"
+        >{{ $t("user.clear_filter") }}</el-button
+      >
+    </div>
+    <div
+      class="table-container"
+      id="resize-for-filter"
+      :class="[filterTexts.length ? 'table-container-filter' : '']"
     >
-      <template #toolbar>
-        <el-button v-permission="['log:export']" icon="el-icon-download" size="mini" @click="exportConfirm">{{ $t('log.export') }}</el-button>
-      </template>
-
-      <el-table-column :show-overflow-tooltip="true" prop="opType" :label="$t('log.optype')" width="140">
-        <template v-slot:default="{row}">
-          <span>{{ row.opType + row.sourceType }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" prop="detail" :label="$t('log.detail')" />
-      <el-table-column :show-overflow-tooltip="true" prop="user" :label="$t('log.user')" width="100" />
-      <el-table-column :show-overflow-tooltip="true" prop="time" sortable="custom" :label="$t('log.time')" width="180">
-        <template v-slot:default="scope">
-          <span>{{ scope.row.time | timestampFormatDate }}</span>
-        </template>
-      </el-table-column>
-    </complex-table>
-  </layout-content>
+      <grid-table
+        v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+        :tableData="data"
+        :columns="[]"
+        :pagination="paginationConfig"
+        @sort-change="sortChange"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <el-table-column
+          show-overflow-tooltip
+          prop="opType"
+          :label="$t('log.optype')"
+          width="140"
+        >
+          <template v-slot:default="{ row }">
+            <span>{{ row.opType + row.sourceType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          prop="detail"
+          :label="$t('log.detail')"
+        />
+        <el-table-column
+          show-overflow-tooltip
+          prop="user"
+          :label="$t('log.user')"
+          width="100"
+        />
+        <el-table-column
+          show-overflow-tooltip
+          prop="time"
+          sortable="custom"
+          :label="$t('log.time')"
+          width="180"
+        >
+          <template v-slot:default="scope">
+            <span>{{ scope.row.time | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+      </grid-table>
+    </div>
+    <keep-alive>
+        <filterUser ref="filterUser" @search="filterDraw"></filterUser>
+      </keep-alive>
+  </de-layout-content>
 </template>
 
 <script>
-import LayoutContent from '@/components/business/LayoutContent'
-import ComplexTable from '@/components/business/complex-table'
-import { formatCondition, formatQuickCondition, addOrder, formatOrders } from '@/utils/index'
-import { logGrid, opTypes, exportExcel } from '@/api/system/log'
+import DeLayoutContent from "@/components/business/DeLayoutContent";
+import GridTable from "@/components/gridTable/index.vue";
+import filterUser from './filterUser'
+import {
+  formatCondition,
+  formatQuickCondition,
+  addOrder,
+  formatOrders,
+} from "@/utils/index";
+import { logGrid, exportExcel } from "@/api/system/log";
 export default {
-
-  components: { ComplexTable, LayoutContent },
+  components: { GridTable, DeLayoutContent, filterUser },
   data() {
     return {
       columns: [],
-
-      searchConfig: {
-        useQuickSearch: false,
-        useComplexSearch: true,
-        quickPlaceholder: this.$t('log.search_by_key'),
-        components: [
-          {
-            field: 'optype',
-            label: this.$t('log.optype'),
-            component: 'FuComplexMixSelect',
-            options: [],
-            multiple: true,
-            class: 'de-log-filter',
-            defaultOperator: 'in',
-            filterable: true,
-            'reserve-keyword': true
-          },
-          { field: 'nick_name', label: this.$t('log.user'), component: 'DeComplexInput', class: 'de-log-filter' },
-
-          { field: 'time', label: this.$t('log.time'), component: 'FuComplexDateTime', defaultOperator: 'between', class: 'de-log-filter' }
-
-        ]
-      },
-
       paginationConfig: {
         currentPage: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       data: [],
-      types: [],
-
       orderConditions: [],
-      last_condition: null
-
-    }
+      nikeName: "",
+      showScroll: false,
+      filterTexts: [],
+      cacheCondition: [],
+    };
   },
-
-  created() {
-    this.types = []
-    opTypes().then(res => {
-      const datas = res.data
-      datas.forEach(item => {
-        this.types.push({ 'label': item.name, 'value': item.id })
-      })
-      this.searchConfig.components[0].options = this.types
-    })
+  watch: {
+    filterTexts: {
+      handler() {
+        this.getScrollStatus();
+      },
+      deep: true,
+    },
   },
   mounted() {
-    this.search()
+    this.search();
+    this.resizeObserver();
   },
-
   methods: {
-
     exportConfirm() {
-      this.$confirm(this.$t('log.confirm'), '', {
-        confirmButtonText: this.$t('commons.confirm'),
-        cancelButtonText: this.$t('commons.cancel'),
-        type: 'warning'
-      }).then(() => {
-        this.exportData()
-      }).catch(() => {
-        // this.$info(this.$t('commons.delete_cancel'))
+      this.$confirm(this.$t("log.confirm"), "", {
+        confirmButtonText: this.$t("commons.confirm"),
+        cancelButtonText: this.$t("commons.cancel"),
+        type: "warning",
       })
+        .then(() => {
+          this.exportData();
+        })
+        .catch(() => {
+          // this.$info(this.$t('commons.delete_cancel'))
+        });
     },
     exportData() {
-      let condition = this.last_condition
-      condition = formatQuickCondition(condition, 'key')
-      const temp = formatCondition(condition)
-      const param = temp || {}
-      param['orders'] = formatOrders(this.orderConditions)
+      let condition = this.last_condition;
+      condition = formatQuickCondition(condition, "key");
+      const temp = formatCondition(condition);
+      const param = temp || {};
+      param["orders"] = formatOrders(this.orderConditions);
 
-      exportExcel(param).then(res => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.href = URL.createObjectURL(blob)
-        link.download = 'DataEase操作日志.xls' // 下载的文件名
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-      })
+      exportExcel(param).then((res) => {
+        const blob = new Blob([res], { type: "application/vnd.ms-excel" });
+        const link = document.createElement("a");
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        link.download = "DataEase操作日志.xls"; // 下载的文件名
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      });
     },
 
     sortChange({ column, prop, order }) {
-      this.orderConditions = []
+      this.orderConditions = [];
       if (!order) {
-        this.search(this.last_condition)
-        return
+        this.initSearch();
+        return;
       }
 
-      this.orderConditions = []
-      addOrder({ field: prop, value: order }, this.orderConditions)
-      this.search(this.last_condition)
+      this.orderConditions = [];
+      addOrder({ field: prop, value: order }, this.orderConditions);
+      this.initSearch();
     },
-    select(selection) {
-
+    getScrollStatus() {
+      this.$nextTick(() => {
+        const dom = document.querySelector(".filter-texts-container");
+        this.showScroll = dom && dom.scrollWidth > dom.offsetWidth;
+      });
     },
+    resizeObserver() {
+      this.resizeForFilter = new ResizeObserver((entries) => {
+        if (!this.filterTexts.length) return;
+        this.layoutResize();
+      });
+      this.resizeForFilter.observe(
+        document.querySelector("#resize-for-filter")
+      );
+    },
+    layoutResize: _.debounce(function () {
+      this.getScrollStatus();
+    }, 200),
+    scrollPre() {
+      const dom = document.querySelector(".filter-texts-container");
+      dom.scrollLeft -= 10;
+      if (dom.scrollLeft <= 0) {
+        dom.scrollLeft = 0;
+      }
+    },
+    scrollNext() {
+      const dom = document.querySelector(".filter-texts-container");
+      dom.scrollLeft += 10;
+      const width = dom.scrollWidth - dom.offsetWidth;
+      if (dom.scrollLeft > width) {
+        dom.scrollLeft = width;
+      }
+    },
+    handleSizeChange(pageSize) {
+      this.paginationConfig.currentPage = 1;
+      this.paginationConfig.pageSize = pageSize;
+      this.search();
+    },
+    handleCurrentChange(currentPage) {
+      this.paginationConfig.currentPage = currentPage;
+      this.search();
+    },
+    initSearch() {
+      this.handleCurrentChange(1);
+    },
+    clearFilter() {
+      this.$refs.filterUser.clearFilter();
+    },
+    clearOneFilter(index) {
+      this.$refs.filterUser.clearOneFilter(index);
+      this.$refs.filterUser.search();
+    },
+    filterDraw(condition, filterTexts = []) {
+      this.cacheCondition = condition;
+      this.filterTexts = filterTexts;
+      this.initSearch();
+    },
+    filterShow() {
+      this.$refs.filterUser.init();
+    },
+    search() {
+      const param = {
+        orders: formatOrders(this.orderConditions),
+        conditions: [...this.cacheCondition],
+      };
+      if (this.nikeName) {
+        param.conditions.push({
+          field: `nick_name`,
+          operator: "like",
+          value: this.nikeName,
+        });
+      }
+      const { currentPage, pageSize } = this.paginationConfig;
+      logGrid(currentPage, pageSize, param).then((response) => {
+        this.data = response.data.listObject;
+        this.paginationConfig.total = response.data.itemCount;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.table-container {
+  height: calc(100% - 50px);
+}
 
-    search(condition) {
-      this.last_condition = condition
-      condition = formatQuickCondition(condition, 'key')
-      const temp = formatCondition(condition)
-      const param = temp || {}
-      param['orders'] = formatOrders(this.orderConditions)
-      const { currentPage, pageSize } = this.paginationConfig
-      logGrid(currentPage, pageSize, param).then(response => {
-        this.data = response.data.listObject
-        this.paginationConfig.total = response.data.itemCount
-      })
+.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;
   }
 }
-</script>
+.top-operate {
+  margin-bottom: 16px;
+  .right-user {
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 
-<style scoped>
+    .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/TaskRecord.vue b/frontend/src/views/system/task/TaskRecord.vue
index a9da44989e..6f8cce5cfe 100644
--- a/frontend/src/views/system/task/TaskRecord.vue
+++ b/frontend/src/views/system/task/TaskRecord.vue
@@ -13,8 +13,8 @@
           clearable
           ref="search"
           v-model="nikeName"
-          @blur="clearSearch"
-          @clear="clearSearch"
+          @blur="initSearch"
+          @clear="initSearch"
         >
         </el-input>
         <deBtn
@@ -200,11 +200,6 @@ export default {
     this.destroyTimer();
   },
   methods: {
-    clearSearch() {
-      this.cachId = "";
-      this.$emit("reset");
-      this.initSearch();
-    },
     exportConfirm() {
       this.$confirm(this.$t("log.confirm"), "", {
         confirmButtonText: this.$t("commons.confirm"),
diff --git a/frontend/src/views/system/task/filterUser.vue b/frontend/src/views/system/task/filterUser.vue
index b0e3427a53..664616d838 100644
--- a/frontend/src/views/system/task/filterUser.vue
+++ b/frontend/src/views/system/task/filterUser.vue
@@ -115,15 +115,7 @@
     <div class="filter">
       <span>{{ $t("dedaterange.label") }}</span>
       <div class="filter-item">
-        <el-date-picker
-          v-model="dataRange"
-          size="small"
-          type="daterange"
-          range-separator=""
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
-        </el-date-picker>
+        <DeDatePick  v-model="dataRange"></DeDatePick>
       </div>
     </div>
     </div>
@@ -143,8 +135,12 @@ import { filterDataset, dateFormat } from "./options";
 import { allRoles } from "@/api/system/user";
 import { getDatasetTree, treeByDatasetId } from "@/api/system/dept";
 import { queryAuthModel } from "@/api/authModel/authModel";
+import DeDatePick from '@/components/deCustomCm/deDatePick.vue'
 
 export default {
+  components: {
+    DeDatePick
+  },
   data() {
     return {
       treeLoading: false,
diff --git a/frontend/src/views/system/task/filterUserRecord.vue b/frontend/src/views/system/task/filterUserRecord.vue
index 186edc0a6e..d910d12974 100644
--- a/frontend/src/views/system/task/filterUserRecord.vue
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@@ -7,127 +7,120 @@
     v-closePress
     direction="rtl"
   >
-  <div class="el-drawer__body-cont">
-
-    <div class="filter">
-      <span>{{ $t("dataset.datalist") }}</span>
-      <div class="filter-item">
-        <span
-          class="item"
-          @click="activeDatasetChange(ele.id)"
-          :class="[activeDataset.includes(ele.id) ? 'active' : '']"
-          :key="ele.id"
-          v-for="ele in selectDatasetsCahe"
-          >{{ ele.name }}</span
-        >
-        <el-popover
-          placement="bottom"
-          popper-class="user-popper"
-          width="200"
-          trigger="click"
-        >
+    <div class="el-drawer__body-cont">
+      <div class="filter">
+        <span>{{ $t("dataset.datalist") }}</span>
+        <div class="filter-item">
+          <span
+            class="item"
+            @click="activeDatasetChange(ele.id)"
+            :class="[activeDataset.includes(ele.id) ? 'active' : '']"
+            :key="ele.id"
+            v-for="ele in selectDatasetsCahe"
+            >{{ ele.name }}</span
+          >
           <el-popover
             placement="bottom"
-            popper-class="user-popper dept"
+            popper-class="user-popper"
             width="200"
             trigger="click"
-            v-loading="treeLoading"
           >
-            <el-tree
-              ref="datasetTreeRef"
-              current-node-key="id"
-              :data="treeData"
-              node-key="id"
-              highlight-current
-              :filter-node-method="filterNode"
-              :expand-on-click-node="true"
-              @node-click="nodeClick"
+            <el-popover
+              placement="bottom"
+              popper-class="user-popper dept"
+              width="200"
+              trigger="click"
+              v-loading="treeLoading"
             >
-              <span slot-scope="{ data }" class="custom-tree-node">
-                <span v-if="data.modelInnerType === 'group'">
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
-                  <span
-                    style="
-                      margin-left: 6px;
-                      white-space: nowrap;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                    "
-                    :title="data.name"
-                    >{{ data.name }}</span
-                  >
-                </span>
-                <span v-else>
-                  <span>
-                    <svg-icon
-                      :icon-class="`ds-${data.modelInnerType}`"
-                      :class="`ds-icon-${data.modelInnerType}`"
-                    />
+              <el-tree
+                ref="datasetTreeRef"
+                current-node-key="id"
+                :data="treeData"
+                node-key="id"
+                highlight-current
+                :filter-node-method="filterNode"
+                :expand-on-click-node="true"
+                @node-click="nodeClick"
+              >
+                <span slot-scope="{ data }" class="custom-tree-node">
+                  <span v-if="data.modelInnerType === 'group'">
+                    <svg-icon icon-class="scene" class="ds-icon-scene" />
+                    <span
+                      style="
+                        margin-left: 6px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      "
+                      :title="data.name"
+                      >{{ data.name }}</span
+                    >
+                  </span>
+                  <span v-else>
+                    <span>
+                      <svg-icon
+                        :icon-class="`ds-${data.modelInnerType}`"
+                        :class="`ds-icon-${data.modelInnerType}`"
+                      />
+                    </span>
+                    <span
+                      style="
+                        margin-left: 6px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      "
+                      :title="data.name"
+                      >{{ data.name }}</span
+                    >
                   </span>
-                  <span
-                    style="
-                      margin-left: 6px;
-                      white-space: nowrap;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                    "
-                    :title="data.name"
-                    >{{ data.name }}</span
-                  >
                 </span>
-              </span>
-            </el-tree>
+              </el-tree>
 
-            <el-select
-              ref="datasetSelect"
-              v-model="selectDatasets"
-              slot="reference"
-              popper-class="tree-select"
-              multiple
-              :placeholder="$t('commons.please_select')"
-              value-key="id"
-            >
-              <el-option
-                v-for="item in selectDatasets"
-                :key="item.name"
-                :label="item.name"
-                :value="item"
-              />
-            </el-select>
+              <el-select
+                ref="datasetSelect"
+                v-model="selectDatasets"
+                slot="reference"
+                popper-class="tree-select"
+                multiple
+                :placeholder="$t('commons.please_select')"
+                value-key="id"
+              >
+                <el-option
+                  v-for="item in selectDatasets"
+                  :key="item.name"
+                  :label="item.name"
+                  :value="item"
+                />
+              </el-select>
+            </el-popover>
+            <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
           </el-popover>
-          <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
-        </el-popover>
+        </div>
       </div>
-    </div>
-    <div v-for="ele in filterDataset" :key="ele.name" class="filter">
-      <span>{{ $t(ele.name) }}</span>
-      <div class="filter-item">
-        <span
-          class="item"
-          @click="statusChange(item.value, ele.activeType)"
-          :class="[active[ele.activeType].includes(item.value) ? 'active' : '']"
-          :key="item.name"
-          v-for="item in ele.list"
-          >{{ $t(item.name) }}</span
-        >
+      <div v-for="ele in filterDataset" :key="ele.name" class="filter">
+        <span>{{ $t(ele.name) }}</span>
+        <div class="filter-item">
+          <span
+            class="item"
+            @click="statusChange(item.value, ele.activeType)"
+            :class="[
+              active[ele.activeType].includes(item.value) ? 'active' : '',
+            ]"
+            :key="item.name"
+            v-for="item in ele.list"
+            >{{ $t(item.name) }}</span
+          >
+        </div>
       </div>
-    </div>
 
-    <div class="filter">
-      <span>{{ $t("dedaterange.label") }}</span>
-      <div class="filter-item">
-        <el-date-picker
-          v-model="dataRange"
-          size="small"
-          type="daterange"
-          range-separator=""
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
-        </el-date-picker>
+      <div class="filter">
+        <span>{{ $t("dedaterange.label") }}</span>
+        <div class="filter-item">
+          <DeDatePick v-model="dataRange"></DeDatePick>
+        </div>
       </div>
     </div>
-  </div>
     <div class="foot">
       <el-button class="btn normal" @click="reset">{{
         $t("commons.reset")
@@ -142,8 +135,12 @@
 <script>
 import { filterDatasetRecord, dateFormat } from "./options";
 import { queryAuthModel } from "@/api/authModel/authModel";
+import DeDatePick from "@/components/deCustomCm/deDatePick.vue";
 
 export default {
+  components: {
+    DeDatePick,
+  },
   data() {
     return {
       treeLoading: false,
@@ -197,7 +194,7 @@ export default {
     clearFilter() {
       this.active = {
         execStatus: [],
-      }
+      };
       this.dataRange = [];
       this.activeDataset = [];
       this.selectDatasets = [];
@@ -206,15 +203,15 @@ export default {
       this.$emit("search", [], []);
     },
     clearOneFilter(index) {
-      (this.filterTextMap[index] || []).forEach(ele => {
-        const eleKey = ele.split('.');
+      (this.filterTextMap[index] || []).forEach((ele) => {
+        const eleKey = ele.split(".");
         if (eleKey.length === 2) {
-          const [p, c ] = eleKey;
-          this[p][c] = []
+          const [p, c] = eleKey;
+          this[p][c] = [];
         } else {
-          this[ele] = []
+          this[ele] = [];
         }
-      })
+      });
     },
     statusChange(value, type) {
       const statusIndex = this.active[type].findIndex((ele) => ele === value);
@@ -271,15 +268,14 @@ export default {
           "datasetCahe",
         ]);
       }
-      [
-        "dataset.task.last_exec_status",
-      ].forEach((ele, index) => {
-        const { activeType: type, list } =
-          this.filterDataset[index];
+      ["dataset.task.last_exec_status"].forEach((ele, index) => {
+        const { activeType: type, list } = this.filterDataset[index];
         if (this.active[type].length) {
           params.push(
             `${this.$t(ele)}:${this.active[type]
-              .map((item) => this.$t(list.find((itx) => itx.value === item).name))
+              .map((item) =>
+                this.$t(list.find((itx) => itx.value === item).name)
+              )
               .join("、")}`
           );
           this.filterTextMap.push([`active.${type}`]);
@@ -312,14 +308,14 @@ export default {
           });
         }
       });
-      const [ min, max ] = this.dataRange;
+      const [min, max] = this.dataRange;
       if (min && max) {
         console.log(1, +min, +max);
         conditions.push({
-            field: 'dataset_table_task.last_exec_time',
-            operator: "between",
-            value: [ +min, +max ],
-          })
+          field: "dataset_table_task.last_exec_time",
+          operator: "between",
+          value: [+min, +max],
+        });
       }
       return conditions;
     },
@@ -336,7 +332,6 @@ export default {
 
 <style lang="scss">
 .user-drawer-task {
-
   .el-drawer__body-cont {
     height: 100%;
     box-sizing: border-box;
@@ -344,7 +339,7 @@ export default {
     width: 100%;
     padding-bottom: 80px;
   }
-  
+
   .el-drawer__header {
     padding: 16px 24px;
     margin: 0;
@@ -449,7 +444,7 @@ export default {
     right: 0;
     bottom: 0;
     text-align: right;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
   }
 }