diff --git a/core/frontend/src/components/elTreeSelect/index.vue b/core/frontend/src/components/elTreeSelect/index.vue
index e0472371bd..74be9e9a5e 100644
--- a/core/frontend/src/components/elTreeSelect/index.vue
+++ b/core/frontend/src/components/elTreeSelect/index.vue
@@ -41,11 +41,6 @@
         size="mini"
         class="input-with-select mb10"
       >
-        <el-button
-          slot="append"
-          icon="el-icon-search"
-          @click="_searchFun"
-        />
       </el-input>
       <p
         v-if="selectParams.multiple"
@@ -90,6 +85,7 @@
 <script>
 import { on, off } from './dom'
 import { each, guid } from './utils'
+import _ from 'lodash'
 export default {
   name: 'ElTreeSelect',
   components: {},
@@ -217,6 +213,9 @@ export default {
     }
   },
   watch: {
+    keywords() {
+      this.searchWithKey()
+    },
     ids: function(val) {
       if (val !== undefined) {
         this.$nextTick(() => {
@@ -312,6 +311,9 @@ export default {
       }
       this.$set(this.selectParams, 'multiple', multiple)
     },
+    searchWithKey: _.debounce(function() {
+      this._searchFun()
+    }, 300),
     _searchFun() {
       this.$emit('searchFun', this.keywords)
     },
diff --git a/core/frontend/src/components/widget/deWidget/DeRadio.vue b/core/frontend/src/components/widget/deWidget/DeRadio.vue
index 228d0a1af6..4639ae6096 100644
--- a/core/frontend/src/components/widget/deWidget/DeRadio.vue
+++ b/core/frontend/src/components/widget/deWidget/DeRadio.vue
@@ -1,26 +1,27 @@
 <template>
   <el-radio-group
-    style="height: 40px; line-height: 40px"
-    @change="visualChange"
     v-model="selectValue"
+    style="height: 40px; align-items: center; display: flex"
+    @change="visualChange"
   >
     <template v-for="item in options">
       <el-radio
+        v-if="radioStyle.showStyle === 'single'"
         :key="item.id + 'radio'"
         :label="item.id"
         class="is-custom-select"
-        v-if="radioStyle.showStyle === 'single'"
         :disabled="itemDisabled"
-        >{{ item.text }}</el-radio
       >
+        {{ item.text }}
+      </el-radio>
       <el-radio-button
         v-else
-        :disabled="itemDisabled"
         :key="item.id + 'tab'"
+        :disabled="itemDisabled"
         class="is-custom-select"
         :label="item.id"
-        >{{ item.text }}</el-radio-button
-      >
+      >{{ item.text }}
+      </el-radio-button>
     </template>
   </el-radio-group>
 </template>
diff --git a/core/frontend/src/views/panel/filter/FilterDialog.vue b/core/frontend/src/views/panel/filter/FilterDialog.vue
index 3b2f398fcb..757a4b9dae 100644
--- a/core/frontend/src/views/panel/filter/FilterDialog.vue
+++ b/core/frontend/src/views/panel/filter/FilterDialog.vue
@@ -269,7 +269,6 @@
         <filter-head
           :element="currentElement"
           @dataset-name="dataSetName"
-          @required-change="requiredChange"
         />
 
         <filter-control
@@ -279,6 +278,7 @@
           :child-views="childViews"
           :dataset-params="datasetParams"
           :active-name="activeName"
+          @required-change="requiredChange"
         />
 
         <filter-foot
diff --git a/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index 86d28efa15..bc7500e775 100644
--- a/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -1,34 +1,53 @@
 <template>
   <el-row>
-    <el-col :span="8">
+    <el-col :span="11">
       <div class="filter-options-left">
-        <el-switch
+        <el-checkbox
+          v-model="element.options.attrs.required"
+          @change="requiredChange"
+        >{{ $t('commons.required') }}</el-checkbox>
+        <el-checkbox
           v-if="widget.showSwitch"
           v-model="attrs.multiple"
-          :active-text="$t('panel.multiple_choice')"
           @change="multipleChange"
-        />
+        >{{ $t('panel.multiple_choice') }}</el-checkbox>
         <span
           v-if="widget.isSortWidget && widget.isSortWidget()"
-          style="padding-left: 10px;"
         >
-
           <filter-sort
             :widget="widget"
             :element="element"
             @sort-change="sortChange"
           />
-
         </span>
-
       </div>
     </el-col>
-
-    <el-col :span="16">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      append-to-body
+      :show-close="false"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+      :before-close="sureRequired"
+    >
+    {{ $t('time.dropdown_display_must') }}
+      <div style="text-align: end;margin-top: 16px;">
+        <span slot="footer">
+          <el-button
+            size="mini"
+            @click="dialogVisible = false"
+          >{{ $t('commons.cancel') }}</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="sureRequired"
+          >{{ $t('commons.confirm') }}</el-button>
+        </span>
+      </div>
+    </el-dialog>
+    <el-col :span="13">
       <div class="filter-options-right">
         <span style="padding-right: 10px;">
-          
-          
           <el-checkbox
             v-model="attrs.showTitle"
             @change="showTitleChange"
@@ -335,6 +354,7 @@ export default {
   data() {
     return {
       activeName: 'start',
+      dialogVisible: false,
       tabsOption: [
         { label: this.$t('dataset.start_time'), name: 'start' },
         { label: this.$t('dataset.end_time'), name: 'end' }
@@ -408,11 +428,6 @@ export default {
           }
         }
       }
-    },
-    'activeName': {
-      handler(newName, oldName) {
-
-      }
     }
   },
 
@@ -443,6 +458,21 @@ export default {
     }
   },
   methods: {
+    sureRequired() {
+      this.element.options.attrs.required = false
+      this.dialogVisible = false
+      this.$emit('required-change', false)
+    },
+    requiredChange(val) {
+      if (val === false && (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple)) { 
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          this.element.options.attrs.required = true
+        })
+        return
+      }
+      this.$emit('required-change', val)
+    },
     handlerVisibleEnableParameters() {
       if (this.attrs.showEmpty) {
         this.visibleEnableParameters = !this.visibleEnableParameters
@@ -532,6 +562,10 @@ export default {
   justify-content: flex-start;
   flex-wrap: nowrap;
   height: 50px;
+
+  .el-checkbox {
+    margin-right: 20px !important;
+  }
 }
 
 .filter-options-right {
@@ -541,7 +575,6 @@ export default {
   justify-content: flex-end;
   flex-wrap: nowrap;
   height: 50px;
-
   
   .more-select-btn {
     display: inline-flex;
diff --git a/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
index 7459d91fc8..9160f2fd5a 100644
--- a/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -45,39 +45,6 @@
         </div>
       </div>
     </el-col>
-    <el-col
-      class="filter-required-container"
-    >
-      <div class="de-filter-required">
-        <el-checkbox
-          v-model="element.options.attrs.required"
-          @change="requiredChange"
-        >{{ $t('commons.required') }}</el-checkbox>
-      </div>
-    </el-col>
-    <el-dialog
-      :visible.sync="dialogVisible"
-      append-to-body
-      :show-close="false"
-      :close-on-press-escape="false"
-      :close-on-click-modal="false"
-      :before-close="sureRequired"
-    >
-    {{ $t('time.dropdown_display_must') }}
-      <div style="text-align: end;margin-top: 16px;">
-        <span slot="footer">
-          <el-button
-            size="mini"
-            @click="dialogVisible = false"
-          >{{ $t('commons.cancel') }}</el-button>
-          <el-button
-            type="primary"
-            size="mini"
-            @click="sureRequired"
-          >{{ $t('commons.confirm') }}</el-button>
-        </span>
-      </div>
-    </el-dialog>
   </el-row>
 </template>
 
@@ -98,26 +65,7 @@ export default {
       }
     }
   },
-  data() {
-    return {
-      dialogVisible: false
-    }
-  },
   methods: {
-    sureRequired() {
-      this.element.options.attrs.required = false
-      this.dialogVisible = false
-    },
-    requiredChange(val) {
-      if (val === false && (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple)) { 
-        this.dialogVisible = true
-        this.$nextTick(() => {
-          this.element.options.attrs.required = true
-        })
-        return
-      }
-      this.$emit('required-change', val)
-    },
     getTableName(tableId) {
       let tableName = null
       this.$emit('dataset-name', tableId, t => { tableName = t })
@@ -145,7 +93,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .filter-field-container {
-  width: calc(100% - 70px);
   float: left;
 }
 .filter-required-container {
diff --git a/core/frontend/src/views/panel/filter/filterMain/FilterSort.vue b/core/frontend/src/views/panel/filter/filterMain/FilterSort.vue
index 586ccc3feb..6eeca019cf 100644
--- a/core/frontend/src/views/panel/filter/filterMain/FilterSort.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterSort.vue
@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div style="display: flex;align-items: center;">
+    <span class="filter-line"></span>
     <el-dropdown
       trigger="click"
       size="mini"
@@ -7,8 +8,8 @@
     >
 
       <span class="el-dropdown-link filter-sort-span">
-        {{ $t('chart.sort') }}
         <i class="el-icon-sort i-filter i-filter-active" />
+        {{ $t('chart.sort') }}
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item
@@ -434,13 +435,50 @@ export default {
   text-align: end;
 }
 
+.filter-line {
+  width: 1px;
+  height: 18px;
+  background: #BBBFC4;
+  display: inline-block;
+  margin-right: 20px;
+}
+
 .filter-sort-span {
-  color: #303133;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #1F2329;
+  height: 26px;
   cursor: pointer;
-  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &::after {
+    content: '';
+    width: 56px;
+    height: 26px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 4px;
+    transform: translate(-50%, -50%);
+  }
+  &:hover {
+    &::after {
+      background: #1F23291A;
+    }
+  }
+  &:active {
+    color: #3370FF;
+    &::after {
+      background: #3370FF1A;
+    }
+  }
   i {
-    margin-left: 1px;
+    font-size: 16px;
+    margin-right: 4px;
   }
 }
 .dialog-css ::v-deep .el-dialog__title {