diff --git a/frontend/src/components/canvas/components/Editor/CloseBar.vue b/frontend/src/components/canvas/components/Editor/CloseBar.vue
index 497c7edd97..6d0c2066f9 100644
--- a/frontend/src/components/canvas/components/Editor/CloseBar.vue
+++ b/frontend/src/components/canvas/components/Editor/CloseBar.vue
@@ -48,7 +48,7 @@ export default {
     padding-left: 3px;
     padding-right: 0px;
     cursor:pointer!important;
-    background-color: #3370ff;
+    background-color: var(--primary,#3370ff);
   }
   .bar-main i{
     color: white;
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index c1314fe9c3..ce6e4d4d2d 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -372,7 +372,7 @@ export default {
     padding-left: 3px;
     padding-right: 0px;
     cursor:pointer!important;
-    background-color: #3370ff;
+    background-color: var(--primary,#3370ff);
   }
   .bar-main i{
     color: white;
diff --git a/frontend/src/components/canvas/components/Editor/EditBarView.vue b/frontend/src/components/canvas/components/Editor/EditBarView.vue
index b9526d9bde..929181b3ea 100644
--- a/frontend/src/components/canvas/components/Editor/EditBarView.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBarView.vue
@@ -149,7 +149,7 @@ export default {
     padding-left: 3px!important;
     padding-right: 0px!important;
     cursor:pointer!important;
-    background-color: #3370ff;
+    background-color: var(--primary,#3370ff);
   }
   .bar-main i{
     color: white;
diff --git a/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue b/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
index 974ed5a6d6..fa5b521a1b 100644
--- a/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
+++ b/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
@@ -76,7 +76,7 @@ export default {
     padding-right: 1px;
     cursor:pointer!important;
     text-align: center;
-    background-color: #3370ff;
+    background-color: var(--primary,#3370ff);
   }
   .bar-main i{
     color: white;
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index e601d6a8e1..d824bb97ab 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1148,6 +1148,9 @@ div:focus {
   .el-input__prefix {
     display: none;
   }
+  .el-icon-circle-close {
+    margin-right: 20px;
+  }
 }
 
 .icon-calendar-outlined {
@@ -1172,12 +1175,55 @@ div:focus {
   }
 }
 
+.user-drawer,
 .user-drawer-task {
+  .el-drawer__body-cont {
+    height: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+    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: var(--deTextPrimary, #1f2329);
+    position: relative;
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
+    border-bottom: 1px solid var(--deComBorderColor50, 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;
+      color: var(--deTextSecondary, #1f2329);
       font-family: "PingFang SC";
       font-style: normal;
       font-weight: 400;
@@ -1187,19 +1233,82 @@ div:focus {
       width: 116px;
     }
     .filter-item {
+      flex: 1;
       .item,
       .more {
-        background: #f5f6f7;
+        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: var(--deTextPrimary5, #f5f6f7);
+        color: var(--deTextPrimary, #1f2329);
+        border-radius: 2px;
+        cursor: pointer;
+        display: inline-block;
+        margin-bottom: 12px;
       }
 
       .active,
-      .more:hover {
-        background: rgba(51, 112, 255, 0.1);
-        color: #0c296e;
+      .more:hover{
+        background: var(--primary10, rgba(51, 112, 255, 0.1));
+        color: var(--primaryselect, #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-color: #fff;
+    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;
 }
\ No newline at end of file
diff --git a/frontend/src/views/system/SysParam/BasicSetting.vue b/frontend/src/views/system/SysParam/BasicSetting.vue
index 685b230111..91309eaead 100644
--- a/frontend/src/views/system/SysParam/BasicSetting.vue
+++ b/frontend/src/views/system/SysParam/BasicSetting.vue
@@ -15,10 +15,9 @@
     <!--基础配置表单-->
     <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" class="de-i118">
+      <el-form-item prop="frontTimeOut">
         <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>
@@ -96,7 +95,6 @@ export default {
             pattern: "^([0-9]|\\b[1-9]\\d\\b|\\b[1-2]\\d\\d\\b|\\b300\\b)$", // 修改了正则表达式，让其正确匹配0-300的数值
             message: this.$t("system_parameter_setting.front_error"),
             trigger: "blur",
-            required: true,
           },
         ],
         msgTimeOut: [
@@ -104,7 +102,6 @@ export default {
             pattern: "^([1-9]|[1-9][0-9]|[1-2][0-9][0-9]|3[0-5][0-9]|36[0-5])$",
             message: this.$t("system_parameter_setting.msg_error"),
             trigger: "blur",
-            required: true,
           },
         ],
       },
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index 882fa131e2..d0cc852810 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -505,7 +505,7 @@
               row-key="jsonPath"
               ref="apiItemTable"
             >
-              <el-table-column prop="originName" :label="$t('dataset.parse_filed')" :show-overflow-tooltip="true"
+              <el-table-column class-name="checkbox-table" prop="originName" :label="$t('dataset.parse_filed')" :show-overflow-tooltip="true"
                                width="255">
                 <template slot-scope="scope">
                   <el-checkbox
@@ -1365,4 +1365,15 @@ export default {
     text-overflow: ellipsis;
   }
 }
+.checkbox-table {
+  .el-checkbox {
+    display: flex;
+    align-items: center;
+    .el-checkbox__input {
+      margin-top: 4px;
+    }
+  }
+}
 </style>
+
+
diff --git a/frontend/src/views/system/log/filterUser.vue b/frontend/src/views/system/log/filterUser.vue
index 1c91a745e8..80d759cd13 100644
--- a/frontend/src/views/system/log/filterUser.vue
+++ b/frontend/src/views/system/log/filterUser.vue
@@ -7,6 +7,7 @@
     v-closePress
     direction="rtl"
   >
+    <div class="el-drawer__body-cont">
     <div class="filter">
       <span>{{ $t("log.optype") }}</span>
       <div class="filter-item">
@@ -20,7 +21,6 @@
         >
       </div>
     </div>
-    <div class="el-drawer__body-cont">
       <div class="filter">
         <span>{{ $t("log.user") }}</span>
         <div class="filter-item">
@@ -243,8 +243,11 @@ export default {
           });
         }
       });
-      const [min, max] = this.dataRange;
+      let [min, max] = this.dataRange;
       if (min && max) {
+        if (+min === +max) {
+          max = +max + 24 * 3600 * 1000;
+        }
         conditions.push({
           field: "time",
           operator: "between",
@@ -262,142 +265,4 @@ export default {
     },
   },
 };
-</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-color: var(--MainBG, #fff);
-    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
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index 8cf5f32c71..76746d751e 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -124,6 +124,7 @@
         </el-table-column>
         <el-table-column
           min-width="178"
+          class-name="f14"
           key="datasetName"
           prop="datasetName"
           :label="$t('dataset.task.dataset')"
@@ -917,4 +918,9 @@ span {
     cursor: pointer;
   }
 }
+.f14 {
+  .cell {
+    font-size: 12px !important;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/filterUser.vue b/frontend/src/views/system/task/filterUser.vue
index 3f0d447f99..57755faafa 100644
--- a/frontend/src/views/system/task/filterUser.vue
+++ b/frontend/src/views/system/task/filterUser.vue
@@ -320,8 +320,11 @@ export default {
           });
         }
       });
-      const [min, max] = this.dataRange;
+      let [min, max] = this.dataRange;
       if (min && max) {
+        if (+min === +max) {
+          max = +max + 24 * 3600 * 1000;
+        }
         conditions.push({
           field: "dataset_table_task.last_exec_time",
           operator: "between",
@@ -339,143 +342,4 @@ export default {
     },
   },
 };
-</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-color: var(--MainBG, #fff);
-    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
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/filterUserRecord.vue b/frontend/src/views/system/task/filterUserRecord.vue
index 9a731e164b..2cacdf5af6 100644
--- a/frontend/src/views/system/task/filterUserRecord.vue
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@@ -308,8 +308,11 @@ export default {
           });
         }
       });
-      const [min, max] = this.dataRange;
+      let [min, max] = this.dataRange;
       if (min && max) {
+        if (+min === +max) {
+          max = +max + 24 * 3600 * 1000;
+        }
         conditions.push({
           field: "dataset_table_task.last_exec_time",
           operator: "between",
@@ -327,143 +330,4 @@ export default {
     },
   },
 };
-</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-color: var(--MainBG, #fff);
-    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
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/form.vue b/frontend/src/views/system/task/form.vue
index 3308408fb5..00e62591cc 100644
--- a/frontend/src/views/system/task/form.vue
+++ b/frontend/src/views/system/task/form.vue
@@ -652,4 +652,4 @@ export default {
     text-align: right;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue
index 8dec097357..af9e1ca03c 100644
--- a/frontend/src/views/system/user/filterUser.vue
+++ b/frontend/src/views/system/user/filterUser.vue
@@ -7,114 +7,118 @@
     v-closePress
     direction="rtl"
   >
-    <div class="filter">
-      <span>{{ $t('commons.status')}}</span>
-      <div class="filter-item">
-        <span
-          class="item"
-          @click="statusChange(ele.id)"
-          :class="[activeStatus.includes(ele.id) ? 'active' : '']"
-          :key="ele.id"
-          v-for="ele in status"
-          >{{ $t(ele.label) }}</span>
+    <div class="el-drawer__body-cont">
+      <div class="filter">
+        <span>{{ $t("commons.status") }}</span>
+        <div class="filter-item">
+          <span
+            class="item"
+            @click="statusChange(ele.id)"
+            :class="[activeStatus.includes(ele.id) ? 'active' : '']"
+            :key="ele.id"
+            v-for="ele in status"
+            >{{ $t(ele.label) }}</span
+          >
+        </div>
       </div>
-    </div>
-    <div class="filter">
-      <span>{{ $t('commons.organization')}}</span>
-      <div class="filter-item">
-        <span
-          class="item"
-          @click="activeDeptChange(ele.id)"
-          :class="[activeDept.includes(ele.id) ? 'active' : '']"
-          :key="ele.id"
-          v-for="ele in selectDeptsCahe"
-          >{{ ele.label }}</span>
-        <el-popover
-          placement="bottom"
-          popper-class="user-popper"
-          width="200"
-          trigger="click"
-        >
+      <div class="filter">
+        <span>{{ $t("commons.organization") }}</span>
+        <div class="filter-item">
+          <span
+            class="item"
+            @click="activeDeptChange(ele.id)"
+            :class="[activeDept.includes(ele.id) ? 'active' : '']"
+            :key="ele.id"
+            v-for="ele in selectDeptsCahe"
+            >{{ ele.label }}</span
+          >
           <el-popover
             placement="bottom"
-            popper-class="user-popper dept"
+            popper-class="user-popper"
             width="200"
             trigger="click"
           >
-            <el-tree
-              :load="loadNode"
-              :lazy="true"
-              :expand-on-click-node="false"
-              :data="deptsComputed"
-              :props="defaultProps"
-              @node-click="handleNodeClick"
-            ></el-tree>
+            <el-popover
+              placement="bottom"
+              popper-class="user-popper dept"
+              width="200"
+              trigger="click"
+            >
+              <el-tree
+                :load="loadNode"
+                :lazy="true"
+                :expand-on-click-node="false"
+                :data="deptsComputed"
+                :props="defaultProps"
+                @node-click="handleNodeClick"
+              ></el-tree>
 
+              <el-select
+                ref="roleSelect"
+                v-model="selectDepts"
+                slot="reference"
+                popper-class="tree-select"
+                multiple
+                :placeholder="$t('commons.please_select')"
+                value-key="id"
+              >
+                <el-option
+                  v-for="item in selectDepts"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item"
+                />
+              </el-select>
+            </el-popover>
+            <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+          </el-popover>
+        </div>
+      </div>
+      <div class="filter">
+        <span>{{ $t("panel.role") }}</span>
+        <div class="filter-item">
+          <span
+            @click="activeRoleChange(ele.id)"
+            class="item"
+            :class="[activeRole.includes(ele.id) ? 'active' : '']"
+            :key="ele.id"
+            v-for="ele in rolesValueCopy"
+            >{{ ele.name }}</span
+          >
+          <el-popover
+            placement="bottom"
+            popper-class="user-popper"
+            width="200"
+            trigger="click"
+          >
             <el-select
               ref="roleSelect"
-              v-model="selectDepts"
-              slot="reference"
-              popper-class="tree-select"
+              v-model="rolesValue"
               multiple
               :placeholder="$t('commons.please_select')"
+              @change="changeRole"
+              @remove-tag="changeRole"
               value-key="id"
             >
-            <el-option
-              v-for="item in selectDepts"
-              :key="item.label"
-              :label="item.label"
-              :value="item"
-            />
+              <el-option
+                v-for="item in rolesComputed"
+                :key="item.name"
+                :label="item.name"
+                :value="item"
+              />
             </el-select>
+            <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 class="filter">
-      <span>{{ $t('panel.role')}}</span>
-      <div class="filter-item">
-        <span
-          @click="activeRoleChange(ele.id)"
-          class="item"
-          :class="[activeRole.includes(ele.id) ? 'active' : '']"
-          :key="ele.id"
-          v-for="ele in rolesValueCopy"
-          >{{ ele.name }}</span
-        >
-        <el-popover
-          placement="bottom"
-          popper-class="user-popper"
-          width="200"
-          trigger="click"
-        >
-          <el-select
-            ref="roleSelect"
-            v-model="rolesValue"
-            multiple
-            :placeholder="$t('commons.please_select')"
-            @change="changeRole"
-            @remove-tag="changeRole"
-            value-key="id"
-          >
-            <el-option
-              v-for="item in rolesComputed"
-              :key="item.name"
-              :label="item.name"
-              :value="item"
-            />
-          </el-select>
-          <span class="more" slot="reference">+ {{ $t('panel.more')}}</span>
-        </el-popover>
+        </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>
+      <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>
@@ -131,13 +135,16 @@ export default {
       deptCahe: [],
       roles: [],
       filterTextMap: [],
-      status: [{
-        id: 1,
-        label: 'commons.enable'
-      },{
-        id: 0,
-        label: 'commons.disable'
-      }],
+      status: [
+        {
+          id: 1,
+          label: "commons.enable",
+        },
+        {
+          id: 0,
+          label: "commons.disable",
+        },
+      ],
       activeStatus: [],
       rolesValue: [],
       activeRole: [],
@@ -150,56 +157,72 @@ export default {
         label: "label",
         isLeaf: "leaf",
       },
-      userDrawer: false
+      userDrawer: false,
     };
   },
   computed: {
     rolesComputed() {
-      return this.roles.filter(ele => !this.activeRole.includes(ele.id))
+      return this.roles.filter((ele) => !this.activeRole.includes(ele.id));
     },
     rolesValueCopy() {
-      return this.roleCahe.filter(ele => this.activeRole.includes(ele.id))
+      return this.roleCahe.filter((ele) => this.activeRole.includes(ele.id));
     },
     deptsComputed() {
-      return this.depts.filter(ele => !this.activeDept.includes(ele.id))
-    }
+      return this.depts.filter((ele) => !this.activeDept.includes(ele.id));
+    },
   },
   mounted() {
     this.initRoles();
   },
   methods: {
     clearFilter() {
-     Array(3).fill(1).forEach((_, index) => {
-        this.clearOneFilter(index)
-      })
-      this.$emit('search', [], [])
+      Array(3)
+        .fill(1)
+        .forEach((_, index) => {
+          this.clearOneFilter(index);
+        });
+      this.$emit("search", [], []);
     },
     clearOneFilter(index) {
-      (this.filterTextMap[index] || []).forEach(ele => {
-        this[ele] = []
-      })
+      (this.filterTextMap[index] || []).forEach((ele) => {
+        this[ele] = [];
+      });
     },
     // 获取弹窗内部门数据
     treeByDeptId() {
       treeByDeptId(0).then((res) => {
-        this.depts =  (res.data || []).map(ele =>  {
-        return {
+        this.depts = (res.data || []).map((ele) => {
+          return {
             ...ele,
             leaf: !ele.hasChildren,
-          }
-        })
+          };
+        });
       });
     },
     changeRole() {
-      if (this.roleCahe.length > this.rolesValue.length + this.activeRole.length) {
-        this.roleCahe = this.roleCahe.filter(ele => this.rolesValue.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
+      if (
+        this.roleCahe.length >
+        this.rolesValue.length + this.activeRole.length
+      ) {
+        this.roleCahe = this.roleCahe.filter((ele) =>
+          this.rolesValue
+            .map((ele) => ele.id)
+            .concat(this.activeRole)
+            .includes(ele.id)
+        );
         return;
       }
-      const roleIdx = this.rolesValue.findIndex(ele => !this.roleCahe.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
-      if (roleIdx === -1) return
-      this.activeRole.push(this.rolesValue[roleIdx].id)
+      const roleIdx = this.rolesValue.findIndex(
+        (ele) =>
+          !this.roleCahe
+            .map((ele) => ele.id)
+            .concat(this.activeRole)
+            .includes(ele.id)
+      );
+      if (roleIdx === -1) return;
+      this.activeRole.push(this.rolesValue[roleIdx].id);
       this.roleCahe.push(this.rolesValue[roleIdx]);
-      this.rolesValue.splice(roleIdx, 1)
+      this.rolesValue.splice(roleIdx, 1);
     },
     activeRoleChange(id) {
       const roleIndex = this.activeRole.findIndex((ele) => ele === id);
@@ -216,22 +239,26 @@ export default {
       const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id);
       if (deptIdx !== -1) {
         this.selectDepts.splice(deptIdx, 1);
-        this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
-        this.deptCahe = this.deptCahe.filter(ele => ele.id !== id)
+        this.selectDeptsCahe = this.selectDeptsCahe.filter(
+          (ele) => ele.id !== id
+        );
+        this.deptCahe = this.deptCahe.filter((ele) => ele.id !== id);
         return;
       }
-      this.activeDept.push(id)
+      this.activeDept.push(id);
       this.selectDeptsCahe.push({ id, label });
       this.deptCahe.push({ id, label });
     },
     activeDeptChange(id) {
-      const dept = this.deptCahe.find((ele) => ele.id === id)
+      const dept = this.deptCahe.find((ele) => ele.id === id);
       this.selectDepts.push(dept);
-      this.activeDept = this.activeDept.filter(ele => ele !== id)
-      this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
+      this.activeDept = this.activeDept.filter((ele) => ele !== id);
+      this.selectDeptsCahe = this.selectDeptsCahe.filter(
+        (ele) => ele.id !== id
+      );
     },
     statusChange(id) {
-        const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
+      const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
       if (statusIndex === -1) {
         this.activeStatus.push(id);
       } else {
@@ -239,8 +266,8 @@ export default {
       }
     },
     changeDepts() {
-        const depts = this.selectDepts.map((item) => item.id);
-        this.activeDept = this.activeDept.filter((ele) => depts.includes(ele));
+      const depts = this.selectDepts.map((item) => item.id);
+      this.activeDept = this.activeDept.filter((ele) => depts.includes(ele));
     },
     loadNode(node, resolve) {
       if (!this.depts.length) {
@@ -248,7 +275,9 @@ export default {
         return;
       }
       getDeptTree(node.data.id).then((res) => {
-        const filterDept = (res.data || []).filter(ele => !this.activeDept.includes(ele.deptId))
+        const filterDept = (res.data || []).filter(
+          (ele) => !this.activeDept.includes(ele.deptId)
+        );
         resolve(
           filterDept.map((dept) => {
             return this.normalizer(dept);
@@ -270,38 +299,61 @@ export default {
     },
     search() {
       this.userDrawer = false;
-      this.$emit('search', this.formatCondition(), this.formatText())
+      this.$emit("search", this.formatCondition(), this.formatText());
     },
     formatText() {
       this.filterTextMap = [];
       const params = [];
       if (this.activeStatus.length) {
-        let str = `${this.$t('kettle.status')}:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
-        params.push(str.slice(0, str.length - 1 ))
-        this.filterTextMap.push(['activeStatus'])
+        let str = `${this.$t("kettle.status")}:${this.activeStatus.reduce(
+          (pre, next) =>
+            (this.status.find((ele) => ele.id === next) || {}).label +
+            "、" +
+            pre,
+          ""
+        )}`;
+        params.push(str.slice(0, str.length - 1));
+        this.filterTextMap.push(["activeStatus"]);
       }
       if (this.activeDept.length) {
-        params.push(`${this.$t('panel.org')}:${this.selectDeptsCahe.map(ele => ele.label).join('、')}`)
-        this.filterTextMap.push(['activeDept', 'selectDepts', 'selectDeptsCahe', 'deptCahe'])
+        params.push(
+          `${this.$t("panel.org")}:${this.selectDeptsCahe
+            .map((ele) => ele.label)
+            .join("、")}`
+        );
+        this.filterTextMap.push([
+          "activeDept",
+          "selectDepts",
+          "selectDeptsCahe",
+          "deptCahe",
+        ]);
       }
       if (this.activeRole.length) {
-        params.push(`${this.$t('panel.role')}:${this.rolesValueCopy.map(ele => ele.name).join('、')}`)
-        this.filterTextMap.push(['rolesValue', 'activeRole', 'roleCahe'])
+        params.push(
+          `${this.$t("panel.role")}:${this.rolesValueCopy
+            .map((ele) => ele.name)
+            .join("、")}`
+        );
+        this.filterTextMap.push(["rolesValue", "activeRole", "roleCahe"]);
       }
       return params;
     },
     formatCondition() {
-      const fildMap = {'r.role_id': this.activeRole, 'd.dept_id': this.activeDept, 'u.enabled': this.activeStatus}
-      const conditions = []
-      Object.keys(fildMap).forEach(ele => {
+      const fildMap = {
+        "r.role_id": this.activeRole,
+        "d.dept_id": this.activeDept,
+        "u.enabled": this.activeStatus,
+      };
+      const conditions = [];
+      Object.keys(fildMap).forEach((ele) => {
         if (fildMap[ele].length) {
           conditions.push({
             field: ele,
-            operator: 'in',
-            value: fildMap[ele]
-          })
+            operator: "in",
+            value: fildMap[ele],
+          });
         }
-      })
+      });
       return conditions;
     },
     init() {
@@ -309,134 +361,8 @@ export default {
     },
     reset() {
       this.userDrawer = false;
-      this.clearFilter()
+      this.clearFilter();
     },
   },
 };
-</script>
-
-<style lang="scss">
-.user-drawer {
-  .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;
-    right: 24px;
-    bottom: 24px;
-    text-align: right;
-  }
-}
-.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
+</script>
\ No newline at end of file