From 78742fcb2194923b44e924464fd4731892e9d672 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 4 Dec 2024 16:29:56 +0800
Subject: [PATCH 1/3] feat: support checking all blocks in material add block
 panel

---
 .../plugins/block/src/composable/useBlock.js  | 10 ++++++
 .../src/meta/block/src/BlockGroupPanel.vue    |  5 ++-
 .../src/meta/block/src/BlockGroupTransfer.vue | 32 +++++++++++++++++--
 packages/theme/base/src/component-common.less |  3 +-
 4 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js
index 09e67ac8a..b30e41f7c 100644
--- a/packages/plugins/block/src/composable/useBlock.js
+++ b/packages/plugins/block/src/composable/useBlock.js
@@ -699,6 +699,14 @@ const cancelCheck = (block) => {
   selectedBlockArray.value = selectedBlockArray.value.filter((item) => item.id !== block.id)
 }
 
+const checkAll = (blockList) => {
+  selectedBlockArray.value = blockList
+}
+
+const cancelCheckAll = () => {
+  selectedBlockArray.value = []
+}
+
 const getBlockAssetsByVersion = (block, version) => {
   let assets = block.assets
 
@@ -737,6 +745,8 @@ export default function () {
     sort,
     check,
     cancelCheck,
+    checkAll,
+    cancelCheckAll,
     getBlockList,
     setBlockList,
     getBlockI18n,
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 66015098b..9d4a951e1 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -77,7 +77,7 @@ export default {
     TinyIconSearch: iconSearch()
   },
   setup() {
-    const { isDefaultGroupId, isRefresh, selectedGroup, selectedBlockArray, getGroupList } = useBlock()
+    const { isDefaultGroupId, isRefresh, selectedGroup, selectedBlockArray, getGroupList, cancelCheckAll } = useBlock()
     const { panel, closePanel } = useGroupPanel()
     const { message } = useModal()
     const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
@@ -155,6 +155,9 @@ export default {
             status: 'error'
           })
         })
+        .finally(() => {
+          cancelCheckAll()
+        })
       panelState.isBlockGroupPanel = false
       closePanel()
     }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
index 3a76ac523..48424b530 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="block-add-transfer">
     <div class="block-add-transfer-footer">
+      <tiny-checkbox class="block-select-all" :indeterminate="isIndeterminate" v-model="selectedAll">
+        全选</tiny-checkbox
+      >
       <slot name="search"></slot>
       <tiny-select v-model="state.selectedSort" class="transfer-order-select" placeholder="请选择">
         <tiny-option v-for="item in state.sortList" :key="item.id" :label="item.text" :value="item.id"></tiny-option>
@@ -28,13 +31,14 @@ import { computed, onMounted, provide, reactive, watch } from 'vue'
 import { useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
 import BlockList from './BlockList.vue'
 import BlockGroupArrange from './BlockGroupArrange.vue'
-import { Select, Option } from '@opentiny/vue'
+import { Checkbox, Select, Option } from '@opentiny/vue'
 import { fetchBlockById } from './http.js'
 
 export default {
   components: {
     BlockList,
     BlockGroupArrange,
+    TinyCheckbox: Checkbox,
     TinySelect: Select,
     TinyOption: Option
   },
@@ -45,7 +49,7 @@ export default {
     }
   },
   setup(props) {
-    const { cancelCheck, check, selectedBlockArray, sort } = useBlock()
+    const { check, cancelCheck, checkAll, cancelCheckAll, selectedBlockArray, sort } = useBlock()
 
     const sortList = [
       {
@@ -94,6 +98,25 @@ export default {
       state.blockList = sort(state.blockList, type)
     }
 
+    const selectedAll = computed({
+      get() {
+        return state.blockList.length > 0 && state.blockList.length === selectedBlockArray.value.length
+      },
+      set(value) {
+        if (value) {
+          checkAll(state.blockList)
+        } else {
+          cancelCheckAll()
+        }
+      }
+    })
+
+    const isIndeterminate = computed({
+      get() {
+        return selectedBlockArray.value.length > 0 && selectedBlockArray.value.length !== state.blockList.length
+      }
+    })
+
     const checkBlock = (block) => {
       if (selectedBlockArray.value.some((item) => item.id === block.id)) {
         cancelCheck(block)
@@ -139,6 +162,8 @@ export default {
     return {
       state,
       selectedBlockArray,
+      selectedAll,
+      isIndeterminate,
       checkBlock
     }
   }
@@ -164,6 +189,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    .block-select-all {
+      margin-right: 20px;
+    }
     .transfer-order-select {
       width: 120px;
       margin-left: 8px;
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index ecd035194..9114318a6 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -521,7 +521,8 @@
 // 15、checkbox 复选框适配
 .tiny-checkbox.tiny-checkbox {
   .tiny-checkbox__input {
-    &.is-checked .tiny-checkbox__inner {
+    &.is-checked .tiny-checkbox__inner,
+    &.is-indeterminate .tiny-checkbox__inner {
       background-color: var(--te-common-bg-primary-checked);
       border-color: var(--te-common-border-checked);
     }

From 4c3ae20dc252a79aa037ad6d3a88fb0527be3ca2 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Thu, 5 Dec 2024 11:14:15 +0800
Subject: [PATCH 2/3] feat: extract SelectAll component

---
 packages/common/component/PluginBlockList.vue | 33 ++++++++++++--
 packages/common/component/SelectAll.vue       | 42 ++++++++++++++++++
 packages/common/component/index.js            |  1 +
 .../src/meta/block/src/BlockGroupTransfer.vue | 43 +++++++------------
 .../src/meta/block/src/BlockList.vue          | 16 ++++++-
 5 files changed, 102 insertions(+), 33 deletions(-)
 create mode 100644 packages/common/component/SelectAll.vue

diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index c1df2e4d2..5e1224a6e 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -1,6 +1,14 @@
 <template>
   <div v-if="blockStyle === BlockStyles.Mini" class="header">
-    <div class="col-checkbox"></div>
+    <div class="col-checkbox" v-if="showCheckbox">
+      <select-all
+        :items="data"
+        :selected="checked"
+        :hidden-label="true"
+        @select-all="(items) => handleSelectAll(items)"
+        @deselect-all="handleDeselectAll"
+      ></select-all>
+    </div>
     <div class="col-name">区块名称</div>
     <div class="col-time">创建时间</div>
     <div class="col-created-by">创建人</div>
@@ -143,6 +151,7 @@ import { Progress, Tooltip } from '@opentiny/vue'
 import PluginBlockItemImg from './PluginBlockItemImg.vue'
 import SearchEmpty from './SearchEmpty.vue'
 import SvgButton from './SvgButton.vue'
+import SelectAll from './SelectAll.vue'
 
 const BlockStyles = {
   Default: 'default',
@@ -160,7 +169,8 @@ export default {
     TinyTooltip: Tooltip,
     PluginBlockItemImg,
     SvgButton,
-    SearchEmpty
+    SearchEmpty,
+    SelectAll
   },
   props: {
     data: {
@@ -234,7 +244,7 @@ export default {
       default: 2
     }
   },
-  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock'],
+  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock', 'checkAll', 'cancelCheckAll'],
   setup(props, { emit }) {
     const panelState = inject('panelState', {})
     const blockUsers = inject('blockUsers')
@@ -361,6 +371,14 @@ export default {
       }
     )
 
+    const handleSelectAll = (items) => {
+      emit('checkAll', items)
+    }
+
+    const handleDeselectAll = () => {
+      emit('cancelCheckAll')
+    }
+
     return {
       BlockStyles,
       isShortcutPanel: panelState.isShortcutPanel,
@@ -379,7 +397,9 @@ export default {
       handleSettingMouseOver,
       handleShowVersionMenu,
       editBlock,
-      format
+      format,
+      handleSelectAll,
+      handleDeselectAll
     }
   }
 }
@@ -446,6 +466,11 @@ export default {
   }
 }
 
+.col-checkbox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .col-checkbox,
 .block-item-small-list:deep(.table-selection) {
   width: 40px;
diff --git a/packages/common/component/SelectAll.vue b/packages/common/component/SelectAll.vue
new file mode 100644
index 000000000..0f34275c4
--- /dev/null
+++ b/packages/common/component/SelectAll.vue
@@ -0,0 +1,42 @@
+<template>
+  <tiny-checkbox class="block-select-all" :indeterminate="isIndeterminate" v-model="selectedAll">
+    {{ hiddenLabel ? '' : '全选' }}
+  </tiny-checkbox>
+</template>
+
+<script setup lang="ts">
+import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { computed, defineEmits, defineProps } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  selected: {
+    type: Array,
+    default: () => []
+  },
+  hiddenLabel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['selectAll', 'deselectAll'])
+
+const selectedAll = computed({
+  get() {
+    return props.items.length > 0 && props.items.length === props.selected.length
+  },
+  set(value) {
+    if (value) {
+      emit('selectAll', props.items)
+    } else {
+      emit('deselectAll')
+    }
+  }
+})
+
+const isIndeterminate = computed(() => props.selected.length > 0 && props.selected.length !== props.items.length)
+</script>
diff --git a/packages/common/component/index.js b/packages/common/component/index.js
index c547ee4cd..3c507a743 100644
--- a/packages/common/component/index.js
+++ b/packages/common/component/index.js
@@ -35,6 +35,7 @@ export { default as BlockLinkField } from './BlockLinkField.vue'
 export { default as BlockLinkEvent } from './BlockLinkEvent.vue'
 export { default as BlockDescription } from './BlockDescription.vue'
 export { default as PluginBlockList } from './PluginBlockList.vue'
+export { default as SelectAll } from './SelectAll.vue'
 export { default as ButtonGroup } from './ButtonGroup.vue'
 export { default as CloseIcon } from './CloseIcon.vue'
 export { default as LifeCycles } from './LifeCycles.vue'
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
index 48424b530..c5695196c 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="block-add-transfer">
     <div class="block-add-transfer-footer">
-      <tiny-checkbox class="block-select-all" :indeterminate="isIndeterminate" v-model="selectedAll">
-        全选</tiny-checkbox
-      >
+      <select-all
+        v-if="state.displayType === 'grid'"
+        class="block-select-all"
+        :items="state.blockList"
+        :selected="selectedBlockArray"
+        @select-all="checkAll"
+        @deselect-all="cancelCheckAll"
+      ></select-all>
       <slot name="search"></slot>
       <tiny-select v-model="state.selectedSort" class="transfer-order-select" placeholder="请选择">
         <tiny-option v-for="item in state.sortList" :key="item.id" :label="item.text" :value="item.id"></tiny-option>
@@ -21,6 +26,8 @@
         :checked="selectedBlockArray"
         :grid-columns="6"
         @check="checkBlock"
+        @checkAll="checkAll"
+        @cancelCheckAll="cancelCheckAll"
       ></block-list>
     </div>
   </div>
@@ -29,16 +36,17 @@
 <script>
 import { computed, onMounted, provide, reactive, watch } from 'vue'
 import { useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
+import { SelectAll } from '@opentiny/tiny-engine-common'
 import BlockList from './BlockList.vue'
 import BlockGroupArrange from './BlockGroupArrange.vue'
-import { Checkbox, Select, Option } from '@opentiny/vue'
+import { Select, Option } from '@opentiny/vue'
 import { fetchBlockById } from './http.js'
 
 export default {
   components: {
     BlockList,
     BlockGroupArrange,
-    TinyCheckbox: Checkbox,
+    SelectAll,
     TinySelect: Select,
     TinyOption: Option
   },
@@ -98,25 +106,6 @@ export default {
       state.blockList = sort(state.blockList, type)
     }
 
-    const selectedAll = computed({
-      get() {
-        return state.blockList.length > 0 && state.blockList.length === selectedBlockArray.value.length
-      },
-      set(value) {
-        if (value) {
-          checkAll(state.blockList)
-        } else {
-          cancelCheckAll()
-        }
-      }
-    })
-
-    const isIndeterminate = computed({
-      get() {
-        return selectedBlockArray.value.length > 0 && selectedBlockArray.value.length !== state.blockList.length
-      }
-    })
-
     const checkBlock = (block) => {
       if (selectedBlockArray.value.some((item) => item.id === block.id)) {
         cancelCheck(block)
@@ -162,9 +151,9 @@ export default {
     return {
       state,
       selectedBlockArray,
-      selectedAll,
-      isIndeterminate,
-      checkBlock
+      checkBlock,
+      checkAll,
+      cancelCheckAll
     }
   }
 }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
index 9660f3d34..1cd41f5aa 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockList.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -16,6 +16,8 @@
     @openVersionPanel="openVersionPanel"
     @add="setBlockPanelVisible(true)"
     @deleteBlock="deleteBlock"
+    @checkAll="(items) => checkAll(items)"
+    @cancelCheckAll="cancelCheckAll"
   ></plugin-block-list>
 </template>
 
@@ -72,7 +74,7 @@ export default {
       default: 2
     }
   },
-  emits: ['check', 'close'],
+  emits: ['check', 'close', 'checkAll', 'cancelCheckAll'],
   setup(props, { emit }) {
     const { generateNode, registerBlock } = useMaterial()
     const { isDefaultGroupId, isAllGroupId, selectedBlock, selectedGroup, isRefresh, getBlockAssetsByVersion } =
@@ -196,6 +198,14 @@ export default {
       confirm({ title, status, message: messageRender, exec })
     }
 
+    const checkAll = (items) => {
+      emit('checkAll', items)
+    }
+
+    const cancelCheckAll = () => {
+      emit('cancelCheckAll')
+    }
+
     return {
       blockRef,
       state,
@@ -204,7 +214,9 @@ export default {
       closeDetail,
       setBlockPanelVisible,
       openVersionPanel,
-      deleteBlock
+      deleteBlock,
+      checkAll,
+      cancelCheckAll
     }
   }
 }

From a97dc7446e8a338d5b83b885c534a3e88df861ca Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 9 Dec 2024 15:46:55 +0800
Subject: [PATCH 3/3] simplify SelectAll component api

---
 packages/common/component/PluginBlockList.vue | 21 +++++++------------
 packages/common/component/SelectAll.vue       | 14 ++++++-------
 .../src/meta/block/src/BlockGroupTransfer.vue | 16 ++++++++++----
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index 5e1224a6e..401bef27d 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -1,13 +1,7 @@
 <template>
   <div v-if="blockStyle === BlockStyles.Mini" class="header">
     <div class="col-checkbox" v-if="showCheckbox">
-      <select-all
-        :items="data"
-        :selected="checked"
-        :hidden-label="true"
-        @select-all="(items) => handleSelectAll(items)"
-        @deselect-all="handleDeselectAll"
-      ></select-all>
+      <select-all :allItems="data" :selected="checked" :hidden-label="true" @select-all="handleSelectAll"></select-all>
     </div>
     <div class="col-name">区块名称</div>
     <div class="col-time">创建时间</div>
@@ -372,11 +366,11 @@ export default {
     )
 
     const handleSelectAll = (items) => {
-      emit('checkAll', items)
-    }
-
-    const handleDeselectAll = () => {
-      emit('cancelCheckAll')
+      if (Array.isArray(items)) {
+        emit('checkAll', items)
+      } else {
+        emit('cancelCheckAll')
+      }
     }
 
     return {
@@ -398,8 +392,7 @@ export default {
       handleShowVersionMenu,
       editBlock,
       format,
-      handleSelectAll,
-      handleDeselectAll
+      handleSelectAll
     }
   }
 }
diff --git a/packages/common/component/SelectAll.vue b/packages/common/component/SelectAll.vue
index 0f34275c4..3155c0db6 100644
--- a/packages/common/component/SelectAll.vue
+++ b/packages/common/component/SelectAll.vue
@@ -4,12 +4,12 @@
   </tiny-checkbox>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { Checkbox as TinyCheckbox } from '@opentiny/vue'
 import { computed, defineEmits, defineProps } from 'vue'
 
 const props = defineProps({
-  items: {
+  allItems: {
     type: Array,
     default: () => []
   },
@@ -23,20 +23,20 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['selectAll', 'deselectAll'])
+const emit = defineEmits(['selectAll'])
 
 const selectedAll = computed({
   get() {
-    return props.items.length > 0 && props.items.length === props.selected.length
+    return props.allItems.length > 0 && props.allItems.length === props.selected.length
   },
   set(value) {
     if (value) {
-      emit('selectAll', props.items)
+      emit('selectAll', props.allItems)
     } else {
-      emit('deselectAll')
+      emit('selectAll', null)
     }
   }
 })
 
-const isIndeterminate = computed(() => props.selected.length > 0 && props.selected.length !== props.items.length)
+const isIndeterminate = computed(() => props.selected.length > 0 && props.selected.length !== props.allItems.length)
 </script>
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
index c5695196c..38a71543e 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -4,10 +4,9 @@
       <select-all
         v-if="state.displayType === 'grid'"
         class="block-select-all"
-        :items="state.blockList"
+        :allItems="state.blockList"
         :selected="selectedBlockArray"
-        @select-all="checkAll"
-        @deselect-all="cancelCheckAll"
+        @select-all="handleSelectAll"
       ></select-all>
       <slot name="search"></slot>
       <tiny-select v-model="state.selectedSort" class="transfer-order-select" placeholder="请选择">
@@ -148,12 +147,21 @@ export default {
       blockSort(state.selectedSort)
     })
 
+    const handleSelectAll = (items) => {
+      if (Array.isArray(items)) {
+        checkAll(items)
+      } else {
+        cancelCheckAll()
+      }
+    }
+
     return {
       state,
       selectedBlockArray,
       checkBlock,
       checkAll,
-      cancelCheckAll
+      cancelCheckAll,
+      handleSelectAll
     }
   }
 }