feat: update block filters UI in materials (#914)

opentiny · Dec 10, 2024 · 0c3c989 · 0c3c989
1 parent d45eb4b
commit 0c3c989
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 23 deletions.
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
@@ -70,6 +70,7 @@ export default {
   justify-content: center;
 }
 .footer-toolbar {
+  margin-right: -12px;
   .icon-wrap {
     width: 20px;
     height: 20px;

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -4,25 +4,48 @@
       <div class="block-filters-item-label">{{ filter.name }}</div>
       <div class="block-filters-item-value">
         <tiny-checkbox-group
-          v-model="state.checkGroup"
+          v-if="!filter.usingSelect"
+          v-model="state.checkGroup[filter.id]"
           type="checkbox"
-          @change="getFilters(filter.id, filter.children)"
+          @change="getFilters($event, filter.id)"
         >
-          <tiny-checkbox v-for="item in filter.children" :key="item.name" :label="item.name"></tiny-checkbox>
+          <tiny-checkbox
+            v-for="item in selectOptions[filter.id]"
+            :key="item.value"
+            :text="item.name"
+            :label="item.value"
+          ></tiny-checkbox>
         </tiny-checkbox-group>
+        <tiny-select
+          v-else
+          v-model="state.checkGroup[filter.id]"
+          size="mini"
+          multiple
+          is-drop-inherit-width
+          @change="getFilters($event, filter.id)"
+        >
+          <tiny-option
+            v-for="item in selectOptions[filter.id]"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          ></tiny-option>
+        </tiny-select>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { reactive } from 'vue'
-import { CheckboxGroup, Checkbox } from '@opentiny/vue'
+import { computed, reactive } from 'vue'
+import { CheckboxGroup, Checkbox, Select, Option } from '@opentiny/vue'
 
 export default {
   components: {
     TinyCheckboxGroup: CheckboxGroup,
-    TinyCheckbox: Checkbox
+    TinyCheckbox: Checkbox,
+    TinySelect: Select,
+    TinyOption: Option
   },
   props: {
     filters: {
@@ -33,25 +56,38 @@ export default {
   setup(props, { emit }) {
     const filters = {}
     const state = reactive({
-      checkGroup: []
+      checkGroup: props.filters.reduce(
+        (result, filter) => ({
+          ...result,
+          [filter.id]: []
+        }),
+        {}
+      )
     })
 
-    const getFilters = (id, child) => {
-      filters[id] = []
-      if (id === 'tag') {
-        filters[id] = state.checkGroup
-      } else {
-        child.forEach((item) => {
-          if (state.checkGroup.includes(item.name)) {
-            filters[id].push(item.id)
-          }
-        })
-      }
+    // 不同的filter，值所在的字段可能是id或者name。这里把实际的值都映射到value字段
+    const selectOptions = computed(() => {
+      return props.filters.reduce(
+        (result, filter) => ({
+          ...result,
+          [filter.id]: filter.children.map((item) => ({
+            ...item,
+            value: item.id || item.name
+          }))
+        }),
+        {}
+      )
+    })
+
+    const getFilters = (checked, id) => {
+      filters[id] = checked
+
       emit('search', null, filters)
     }
 
     return {
       state,
+      selectOptions,
       getFilters
     }
   }
@@ -61,6 +97,12 @@ export default {
 <style lang="less" scoped>
 .block-add-filters {
   color: var(--ti-lowcode-materials-block-filter-text-color);
+  & > div {
+    min-height: 24px;
+  }
+  & > div + div {
+    margin-top: 12px;
+  }
 
   .block-add-filters-item {
     display: flex;
@@ -73,13 +115,11 @@ export default {
       align-items: center;
       justify-content: flex-start;
       width: 76px;
-      height: 28px;
       color: var(--te-common-text-secondary);
       border-radius: 2px;
     }
 
     .block-filters-item-value {
-      align-items: center;
       flex: 1;
       color: var(--te-common-text-primary);
       .block-filters-value-item {
@@ -94,6 +134,12 @@ export default {
           display: none;
         }
       }
+      :deep(.tiny-select.tiny-select .tiny-select__tags) {
+        max-width: calc(100% - 24px) !important;
+        .tiny-tag {
+          background-color: var(--te-common-bg-disabled);
+        }
+      }
     }
   }
 }

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -97,12 +97,14 @@ export default {
         {
           id: 'author',
           name: '按作者',
-          children: []
+          children: [],
+          usingSelect: true
         },
         {
           id: 'tag',
           name: '按标签',
-          children: []
+          children: [],
+          usingSelect: true
         }
       ]
     })

diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
@@ -17,9 +17,11 @@
     .tiny-tag {
       color: var(--te-common-text-weaken);
       background-color: var(--te-common-bg-tag); // 选择框
+      border-radius: var(--te-base-border-radius-normal);
 
       .tiny-tag__close {
         color: var(--te-common-text-primary);
+        font-size: 12px;
         &:hover {
           color: var(--te-common-text-primary);
         }
@@ -28,7 +30,8 @@
   }
 }
 
-.tiny-select-dropdown.tiny-select-dropdown {
+.tiny-select-dropdown.tiny-select-dropdown,
+.tiny-select-dropdown.tiny-select-dropdown.is-multiple {
   background-color: var(--te-common-bg-default);
   // 下拉新增列
   .tiny-select__top-create {