* Update filer style.

ui/src/components/Button.vue

@@ -9,7 +9,7 @@
     <slot>
       <span class="btn-label" :class="labelClass" v-if="label">{{label}}</span>
     </slot>
-    <Icon v-if="suffixIcon" class="btn-suffix-icon" :class="suffixIconClass ?? (isOnlyIcon ? '' : 'muted')" :icon="suffixIcon" :color="suffixIconColor" :size="suffixIconSize" />
+    <Icon v-if="suffixIcon" class="btn-suffix-icon" :class="suffixIconClass ?? (isOnlyIcon ? '' : 'muted')" :icon="suffixIcon" :color="suffixIconColor" :size="suffixIconSize" @click.stop="_handleSuffixClick" />
   </button>
 </template>
 
@@ -42,7 +42,10 @@ const slots = useSlots();
 
 const isOnlyIcon = computed(() => (!props.label && !slots.default && props.icon && !props.suffixIcon));
 
-const emit = defineEmits<{(type: 'click', event: {originalEvent: Event, key: string | number | symbol | null}) : void}>();
+const emit = defineEmits<{
+    (type: 'click', event: {originalEvent: Event, key: string | number | symbol | null}) : void,
+    (type: 'suffixClick', event: {originalEvent: Event, key: string | number | symbol | null}) : void,
+    }>();
 const attrs = useAttrs();
 
 function _handleClick(originalEvent) {
@@ -53,6 +56,15 @@ function _handleClick(originalEvent) {
     const event = {originalEvent, key: attrs['data-key'] as (string | number | symbol | null)};
     emit('click', event);
 }
+
+function _handleSuffixClick(originalEvent) {
+    if (props.disabled) {
+        return;
+    }
+
+    const event = {originalEvent, key: attrs['data-key'] as (string | number | symbol | null)};
+    emit('suffixClick', event);
+}
 </script>
 
 <style scoped>

ui/src/views/script/WorkDirPanel.vue

@@ -33,7 +33,15 @@
         triggerEvent="click">
       </FilterModal>
       
-      <Button id="filterBtn" :label="filerLabel" v-show="currSite.id != 1 && filerType != ''" class="rounded pure" icon="filter" ref="filterBtnRef" />
+      <Button 
+      id="filterBtn" 
+      :label="filerLabel" 
+      v-show="currSite.id != 1" 
+      :class="filerLabel == '' ? 'rounded pure' : 'btn state rounded border primary-pale'" 
+      icon="filter" ref="filterBtnRef" 
+      :suffixIcon="filerLabel == '' ? '' : 'close'" 
+      @suffixClick="clearFiler"
+      />
       <Button class="rounded pure" :hint="t('create_workspace')" @click="showModal=!showModal" icon="folder-add" />
       <Button class="rounded pure" :hint="t('batch_select')" icon="select-all-on" @click="_handleBatchSelectBtnClick" :active="workDirRef?.isCheckable" />
       <Button @click="_handleToggleAllBtnClick" class="rounded pure" :hint="workDirRef?.isAllCollapsed ? t('collapse') : t('expand_all')" :icon="workDirRef?.isAllCollapsed ? 'add-square-multiple' : 'subtract-square-multiple'" iconSize="1.4em" />
@@ -82,10 +90,10 @@ const currProduct = computed<any>(() => store.state.Zentao.currProduct);
 
 let displayBy = ref('workspace')
 let isExpand = ref(false);
-const filerType = ref('')
+const filerType = ref('workspace')
 const filerValue = ref('')
 const oldFilerType = ref('')
-const oldFilerValue = ref('')
+const oldFilerValue = ref('' as any)
 const filerLabel = ref('');
 
 const displayTypes = ref([
@@ -165,8 +173,9 @@ const getFilerValueLabel = () => {
 const loadFilterItems = async (useCache = true) => {
     const data = await getScriptFilters(displayBy.value, currSite.value.id, currProduct.value.id, useCache ? '' : filerType.value)
     if(useCache){
-      filerType.value = !data.val ? '' : data.by
-      filerValue.value = data.val
+      oldFilerType.value = filerType.value = !data.val ? '' : data.by
+      if(filerType.value == '') filerType.value = 'workspace'
+      oldFilerValue.value = filerValue.value = data.val
     }
 
     if (!currProduct.value.id && (filerType.value !== 'workspace' || oldFilerType.value != 'workspace')) {
@@ -178,7 +187,7 @@ const loadFilterItems = async (useCache = true) => {
     const result = await listFilterItems(filerType.value)
 
     if(filerType.value === 'workspace'){
-      result.data = result.data == undefined ?[{label: t('all'), value: -1}] : [{label: t('all'), value: -1}, ...result.data];
+      result.data = result.data == undefined ?[] :  result.data;
     }
     filerItems.value = result.data
 
@@ -193,11 +202,7 @@ const loadFilterItems = async (useCache = true) => {
     if (!found) filerValue.value = ''
     }
 
-    if(oldFilerValue.value == ''){
-      oldFilerType.value = filerType.value;
-      oldFilerValue.value = filerValue.value;
-    }
-    if(oldFilerType.value == filerType.value && te('by_' + oldFilerType.value)){
+    if(oldFilerType.value == filerType.value && filerType.value != '' && te('by_' + oldFilerType.value)){
         filerLabel.value = t('by_' + oldFilerType.value) + ':' + getFilerValueLabel();
     }
 }
@@ -226,7 +231,7 @@ const onFilterTypeChanged = async (item) => {
   filerItems.value = [];
   if(filerType.value == ''){
     oldFilerType.value = '';
-	oldFilerValue.value = -1;
+	oldFilerValue.value = '';
     await setScriptFilters(displayBy.value, currSite.value.id, currProduct.value.id, filerType.value, filerValue.value)
     await loadScripts()
   }else{
@@ -246,7 +251,7 @@ const onFilterValueChanged = async (item, key) => {
 const loadScripts = async () => {
   console.log(`filerType: ${filerType.value}, filerValue: ${filerValue.value}`)
 
-  const params = {displayBy: displayBy.value, filerType: filerType.value, filerValue: filerValue.value == -1 ? 0 : filerValue.value} as any
+  const params = {displayBy: displayBy.value, filerType: filerType.value, filerValue: filerValue.value} as any
   store.dispatch('Script/listScript', params)
 }
 
@@ -268,6 +273,17 @@ const createWorkSpace = (formData) => {
     })
 };
 
+const clearFiler = async () => {
+    console.log('clear filer');
+    filerType.value = '';
+    filerValue.value = '';
+    oldFilerType.value = '';
+	oldFilerValue.value = '';
+    filerLabel.value = '';
+    await setScriptFilters(displayBy.value, currSite.value.id, currProduct.value.id, filerType.value, filerValue.value)
+    await loadScripts()
+}
+
 function _handleBatchSelectBtnClick() {
     if (workDirRef.value) {
         workDirRef.value.toggleCheckable();