feat: support checking all blocks in material add block panel

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;

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>

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'

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,

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()
     }

packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="block-add-transfer">
     <div class="block-add-transfer-footer">
+      <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>
@@ -18,6 +26,8 @@
         :checked="selectedBlockArray"
         :grid-columns="6"
         @check="checkBlock"
+        @checkAll="checkAll"
+        @cancelCheckAll="cancelCheckAll"
       ></block-list>
     </div>
   </div>
@@ -26,6 +36,7 @@
 <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 { Select, Option } from '@opentiny/vue'
@@ -35,6 +46,7 @@ export default {
   components: {
     BlockList,
     BlockGroupArrange,
+    SelectAll,
     TinySelect: Select,
     TinyOption: Option
   },
@@ -45,7 +57,7 @@ export default {
     }
   },
   setup(props) {
-    const { cancelCheck, check, selectedBlockArray, sort } = useBlock()
+    const { check, cancelCheck, checkAll, cancelCheckAll, selectedBlockArray, sort } = useBlock()
 
     const sortList = [
       {
@@ -139,7 +151,9 @@ export default {
     return {
       state,
       selectedBlockArray,
-      checkBlock
+      checkBlock,
+      checkAll,
+      cancelCheckAll
     }
   }
 }
@@ -164,6 +178,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;

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
     }
   }
 }

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);
     }