From 88cef0b66e2a8bc3fd27cc573a4a4a9a04272f2b Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Thu, 28 Nov 2024 15:25:54 +0800
Subject: [PATCH 1/8] feat: update block filters UI in materials

---
 .../src/meta/block/src/BlockGroupFilters.vue  | 81 +++++++++++++++----
 .../src/meta/block/src/BlockGroupPanel.vue    |  6 +-
 2 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
index 53e0a77b2..e0f05e7f3 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -4,25 +4,43 @@
       <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, filter.children)"
         >
-          <tiny-checkbox v-for="item in filter.children" :key="item.name" :label="item.name"></tiny-checkbox>
+          <tiny-checkbox v-for="item in filter.children" :key="item.value" :label="item.name"></tiny-checkbox>
         </tiny-checkbox-group>
+        <tiny-select
+          v-else
+          v-model="state.checkGroup[filter.id]"
+          size="mini"
+          multiple
+          hover-expand
+          @change="getFilters($event, filter.id)"
+        >
+          <tiny-option
+            v-for="item in selectOptions[filter.id]"
+            :key="item.name"
+            :label="item.name"
+            :value="item"
+          ></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 +51,48 @@ export default {
   setup(props, { emit }) {
     const filters = {}
     const state = reactive({
-      checkGroup: []
+      checkGroup: props.filters.reduce(
+        (result, filter) => ({
+          ...result,
+          [filter.id]: []
+        }),
+        {}
+      )
+    })
+
+    // 这里重新计算selectOptions的原因：tiny-option的value属性如果是一个对象，那么此对象内部需要有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 = (id, child) => {
+    const getFilters = (checked, id, child) => {
       filters[id] = []
-      if (id === 'tag') {
-        filters[id] = state.checkGroup
-      } else {
+
+      // tiny-checkbox-group的选中值是一个字符串数组
+      if (typeof checked.at(0) === 'string') {
         child.forEach((item) => {
-          if (state.checkGroup.includes(item.name)) {
+          if (checked.includes(item.name)) {
             filters[id].push(item.id)
           }
         })
+      } else {
+        filters[id] = checked.map((item) => item.value)
       }
       emit('search', null, filters)
     }
 
     return {
       state,
+      selectOptions,
       getFilters
     }
   }
@@ -61,6 +102,12 @@ export default {
 <style lang="less" scoped>
 .block-add-filters {
   color: var(--ti-lowcode-materials-block-filter-text-color);
+  & > div {
+    height: 24px;
+  }
+  & > div + div {
+    margin-top: 12px;
+  }
 
   .block-add-filters-item {
     display: flex;
@@ -73,13 +120,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 +139,14 @@ export default {
           display: none;
         }
       }
+      &:has(.tiny-select) {
+        align-self: flex-start;
+      }
+      :deep(.tiny-select.tiny-select .tiny-select__tags .tiny-tag) {
+        height: 20px;
+        line-height: 20px;
+        background-color: var(--te-common-bg-container);
+      }
     }
   }
 }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 66015098b..4daf9adb1 100644
--- 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
         }
       ]
     })

From 0133742120d271b316479bd85747a67cbf11dc85 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Fri, 29 Nov 2024 16:19:22 +0800
Subject: [PATCH 2/8] feat: update block filters UI

---
 .../materials/src/meta/block/src/BlockGroupArrange.vue       | 1 +
 .../materials/src/meta/block/src/BlockGroupFilters.vue       | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
index 20b1fa6bc..e9c73d8c6 100644
--- 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
index e0f05e7f3..b5fa62066 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -16,7 +16,6 @@
           v-model="state.checkGroup[filter.id]"
           size="mini"
           multiple
-          hover-expand
           @change="getFilters($event, filter.id)"
         >
           <tiny-option
@@ -103,7 +102,7 @@ export default {
 .block-add-filters {
   color: var(--ti-lowcode-materials-block-filter-text-color);
   & > div {
-    height: 24px;
+    min-height: 24px;
   }
   & > div + div {
     margin-top: 12px;
@@ -143,8 +142,6 @@ export default {
         align-self: flex-start;
       }
       :deep(.tiny-select.tiny-select .tiny-select__tags .tiny-tag) {
-        height: 20px;
-        line-height: 20px;
         background-color: var(--te-common-bg-container);
       }
     }

From 62c7bdee3e8ccbbbcd477c450bdb95eb089638df Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Fri, 29 Nov 2024 16:30:01 +0800
Subject: [PATCH 3/8] fix: remove redundant styles

---
 .../plugins/materials/src/meta/block/src/BlockGroupFilters.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
index b5fa62066..137b8d46b 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -138,9 +138,6 @@ export default {
           display: none;
         }
       }
-      &:has(.tiny-select) {
-        align-self: flex-start;
-      }
       :deep(.tiny-select.tiny-select .tiny-select__tags .tiny-tag) {
         background-color: var(--te-common-bg-container);
       }

From 05fe9225dd2d14bb591fb534af9aa018d53fa571 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Sat, 30 Nov 2024 10:03:13 +0800
Subject: [PATCH 4/8] fix: add select arrow padding

---
 .../materials/src/meta/block/src/BlockGroupFilters.vue     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
index 137b8d46b..3a9e0ec9c 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -138,8 +138,11 @@ export default {
           display: none;
         }
       }
-      :deep(.tiny-select.tiny-select .tiny-select__tags .tiny-tag) {
-        background-color: var(--te-common-bg-container);
+      :deep(.tiny-select.tiny-select .tiny-select__tags) {
+        max-width: calc(100% - 24px) !important;
+        .tiny-tag {
+          background-color: var(--te-common-bg-container);
+        }
       }
     }
   }

From 679397f56dd5fcd301dbf95849da9144aebc9a63 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Thu, 5 Dec 2024 19:52:20 +0800
Subject: [PATCH 5/8] fix: simplify code logic

---
 .../src/meta/block/src/BlockGroupFilters.vue  | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
index 3a9e0ec9c..e8a883e7c 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -7,9 +7,14 @@
           v-if="!filter.usingSelect"
           v-model="state.checkGroup[filter.id]"
           type="checkbox"
-          @change="getFilters($event, filter.id, filter.children)"
+          @change="getFilters($event, filter.id)"
         >
-          <tiny-checkbox v-for="item in filter.children" :key="item.value" :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
@@ -20,9 +25,9 @@
         >
           <tiny-option
             v-for="item in selectOptions[filter.id]"
-            :key="item.name"
+            :key="item.value"
             :label="item.name"
-            :value="item"
+            :value="item.value"
           ></tiny-option>
         </tiny-select>
       </div>
@@ -59,7 +64,7 @@ export default {
       )
     })
 
-    // 这里重新计算selectOptions的原因：tiny-option的value属性如果是一个对象，那么此对象内部需要有value属性
+    // 不同的filter，值所在的字段可能是id或者name。这里把实际的值都映射到value字段
     const selectOptions = computed(() => {
       return props.filters.reduce(
         (result, filter) => ({
@@ -73,19 +78,9 @@ export default {
       )
     })
 
-    const getFilters = (checked, id, child) => {
-      filters[id] = []
+    const getFilters = (checked, id) => {
+      filters[id] = checked
 
-      // tiny-checkbox-group的选中值是一个字符串数组
-      if (typeof checked.at(0) === 'string') {
-        child.forEach((item) => {
-          if (checked.includes(item.name)) {
-            filters[id].push(item.id)
-          }
-        })
-      } else {
-        filters[id] = checked.map((item) => item.value)
-      }
       emit('search', null, filters)
     }
 

From f8712ced643e1b35e817176773a9c3a819165257 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 9 Dec 2024 11:48:02 +0800
Subject: [PATCH 6/8] fix: fix panel width when select option is too long

---
 .../plugins/materials/src/meta/block/src/BlockGroupFilters.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
index e8a883e7c..43789545f 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -21,6 +21,7 @@
           v-model="state.checkGroup[filter.id]"
           size="mini"
           multiple
+          is-drop-inherit-width
           @change="getFilters($event, filter.id)"
         >
           <tiny-option

From 9e475f603fadc2380b277db9d2aa5139683162c1 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 9 Dec 2024 16:23:24 +0800
Subject: [PATCH 7/8] change tag background color

---
 .../plugins/materials/src/meta/block/src/BlockGroupFilters.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
index 43789545f..58520ed59 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -137,7 +137,7 @@ export default {
       :deep(.tiny-select.tiny-select .tiny-select__tags) {
         max-width: calc(100% - 24px) !important;
         .tiny-tag {
-          background-color: var(--te-common-bg-container);
+          background-color: var(--te-common-bg-disabled);
         }
       }
     }

From ab1cff823da0e21259b2ba6e551945bae5cad768 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 9 Dec 2024 17:50:39 +0800
Subject: [PATCH 8/8] fix some styles

---
 packages/theme/base/src/component-common.less | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index ecd035194..37ae1da8c 100644
--- 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 {
   // 下拉新增列
   .tiny-select__top-create {
     margin: 8px 12px 4px 12px;