feat: 筛选组件微调

frontend/src/components/pure/ms-table/base-table.vue

@@ -54,7 +54,7 @@
           :tooltip="item.tooltip"
         >
           <template #title>
-            <div class="flex flex-row flex-nowrap items-center">
+            <div class="flex w-full flex-row flex-nowrap items-center">
               <slot :name="item.titleSlotName">
                 <div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div>
               </slot>
@@ -68,9 +68,10 @@
               />
               <slot v-else-if="item.filterConfig" :name="item.filterConfig.filterSlotName">
                 <DefaultFilter
+                  class="ml-[4px]"
                   :options="item.filterConfig.options"
                   :multiple="(item.filterConfig.multiple as boolean)"
-                  @handle-confirm="(v: (string | number)[]) => handleFilterConfirm(v, item.dataIndex as string)"
+                  @handle-confirm="(v) => handleFilterConfirm(v, item.dataIndex as string)"
                 />
               </slot>
             </div>
@@ -498,6 +499,9 @@
         }
       }
     }
+    :deep(.arco-table-th-title) {
+      width: 100%;
+    }
     .setting-icon {
       margin-left: 16px;
       color: var(--color-text-4);

frontend/src/components/pure/ms-table/comp/defaultFilter.vue

@@ -2,7 +2,7 @@
   <a-trigger v-model:popup-visible="visible" trigger="click">
     <a-button type="text" @click="visible = true">
       <template #icon>
-        <icon-filter />
+        <icon-filter class="text-[var(--color-text-4)]" />
       </template>
     </a-button>
     <template #content>
@@ -23,7 +23,7 @@
           <a-button size="mini" type="secondary" @click="handleFilterReset">
             {{ t('common.reset') }}
           </a-button>
-          <a-button size="mini" type="primary" @click="handleFilterSubmit(false)">
+          <a-button size="mini" type="primary" @click="handleFilterSubmit()">
             {{ t('common.confirm') }}
           </a-button>
         </div>
@@ -49,25 +49,22 @@
   const checkedList = ref<(string | number)[]>([]);
   const checkedValue = ref<string | number>('');
 
-  const handleFilterSubmit = (isReset = false) => {
-    if (props.multiple) {
-      emit('handleConfirm', checkedList.value);
-    } else {
-      emit('handleConfirm', [checkedValue.value]);
-    }
-    if (!isReset) {
-      checkedList.value = [];
-      checkedValue.value = '';
-    }
-    visible.value = false;
-  };
-
   const handleFilterReset = () => {
     if (props.multiple) {
       checkedList.value = [];
     } else {
       checkedValue.value = '';
     }
-    handleFilterSubmit(true);
+    emit('handleConfirm', []);
+    visible.value = false;
+  };
+
+  const handleFilterSubmit = () => {
+    if (props.multiple) {
+      emit('handleConfirm', checkedList.value);
+    } else {
+      emit('handleConfirm', checkedValue.value ? [checkedValue.value] : []);
+    }
+    visible.value = false;
   };
 </script>

frontend/src/components/pure/ms-table/useTable.ts

@@ -302,8 +302,11 @@ export default function useTableProps<T>(
 
     // 筛选触发
     filterChange: (dataIndex: string, filteredValues: (string | number)[]) => {
-      console.log('filterChange', dataIndex, filteredValues);
+      if (filteredValues.length > 0) {
         filterItem.value = { [dataIndex]: filteredValues };
+      } else {
+        filterItem.value = {};
+      }
       loadList();
     },
     // 分页触发

frontend/src/views/bug-management/index.vue

@@ -32,7 +32,7 @@
   import { Message } from '@arco-design/web-vue';
 
   import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
-  import { FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
+  import { FilterFormItem, FilterType } from '@/components/pure/ms-advance-filter/type';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsCard from '@/components/pure/ms-card/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
@@ -222,16 +222,6 @@
     console.log('create', record);
   };
 
-  const handleFilter = (filter: FilterResult) => {
-    // eslint-disable-next-line no-console
-    console.log('filter', filter);
-  };
-
-  const dataIndexChange = (dataIndex: string) => {
-    // eslint-disable-next-line no-console
-    console.log('dataIndexChange', dataIndex);
-  };
-
   const jumpToTestPlan = (record: BugListItem) => {
     router.push({
       name: 'testPlan',