Fix jitter of filter items (#110)

Author: sheepzh

src/app/components/common/switch-filter-item.ts

@@ -21,7 +21,7 @@ const _default = defineComponent({
     emits: ["change"],
     setup(props, ctx) {
         const modelValue: Ref<boolean> = ref(props.defaultValue)
-        return () => h("span", {}, [
+        return () => h("span", { class: "filter-switch" }, [
             h('a', { class: 'filter-name' }, props.label),
             h(ElSwitch, {
                 class: 'filter-item',

src/app/components/report/filter/index.ts

@@ -120,7 +120,7 @@ const _default = defineComponent({
                 }
             }),
             // Float right
-            h("div", { style: { float: "right" } }, [
+            h("div", { class: "filter-item-right-group" }, [
                 h(ElButton, {
                     class: "batch-delete-button",
                     disabled: mergeHost.value,

src/app/components/trend/components/filter.ts

@@ -78,13 +78,18 @@ const _default = defineComponent({
             placeholder: HOST_PLACEHOLDER,
             class: 'filter-item',
             modelValue: domainKey.value,
+            clearable: true,
             filterable: true,
             remote: true,
             loading: trendSearching.value,
             remoteMethod: (query: string) => handleRemoteSearch(query, trendDomainOptions, trendSearching),
             onChange: (key: string) => {
                 domainKey.value = key
                 handleChange()
+            },
+            onClear: () => {
+                domainKey.value = ''
+                handleChange()
             }
         }, () => trendDomainOptions.value?.map(renderOption) || []),
         h(DateRangeFilterItem, {

src/app/styles/index.sass

@@ -55,19 +55,17 @@ a
   .el-card__body
     padding-bottom: 10px
     padding-top: 18px
+    margin-bottom: 10px
+    display: flex
 
 .filter-name
   margin-right: 4px
 
 .filter-item
-  display: inline-block
-  vertical-align: middle
-  margin-bottom: 10px
   padding-right: 20px
 
-  &
   .el-input__suffix
-    right: 30px !important
+    width: 20px
 
   .el-picker-panel__sidebar
     width: 130px !important
@@ -80,19 +78,25 @@ a
 
 .filter-item.el-switch
   display: inline-flex !important
-  margin-bottom: 7px
 
-.filter-name
-  color: #909399
-  font-weight: bold
-  font-size: 14px
-  pointer-events: none
+.filter-switch
+  display: inline-flex
+  align-items: center
+  .filter-name
+    display: inline-flex
+    color: #909399
+    font-weight: bold
+    font-size: 14px
+    pointer-events: none
 
-.filter-item-right
-  float: right
+.filter-item-right,.filter-item-right-group
+  display: inline-flex
+  margin-left: auto
 
 .filter-item.el-input
   width: 225px
+.el-select.filter-item
+  display: inline-flex
 
 .pagination-container
   display: flex