feat(editor): 已选组件新增根节点右键菜单项：全部折叠

packages/editor/src/icons/FolderMinusIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    class="bi bi-folder-minus"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
+    />
+    <path fill-rule="evenodd" d="M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorFolderMinusIcon',
+});
+</script>

packages/editor/src/layouts/sidebar/LayerMenu.vue

@@ -6,7 +6,10 @@
 import { computed, inject, markRaw, ref } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
+import { isPage } from '@tmagic/utils';
+
 import ContentMenu from '@editor/components/ContentMenu.vue';
+import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
@@ -18,6 +21,10 @@ const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();
 
+const emit = defineEmits<{
+  'collapse-all': [];
+}>();
+
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const node = computed(() => services?.editorService.get('node'));
@@ -76,6 +83,15 @@ const getSubMenuData = computed<MenuButton[]>(() => {
 });
 
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
+  {
+    type: 'button',
+    text: '全部折叠',
+    icon: FolderMinusIcon,
+    display: () => isPage(node.value),
+    handler: () => {
+      emit('collapse-all');
+    },
+  },
   {
     type: 'button',
     text: '新增',

packages/editor/src/layouts/sidebar/LayerPanel.vue

@@ -42,7 +42,7 @@
     </TMagicTree>
 
     <Teleport to="body">
-      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
+      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
     </Teleport>
   </TMagicScrollbar>
 </template>
@@ -356,4 +356,14 @@ const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
 
   menu.value?.show(event);
 };
+
+const collapseAllHandler = () => {
+  const page = editorService?.get('page');
+  if (!tree.value || !page) return;
+  const rootNode = tree.value.getNode(page.id);
+  rootNode.childNodes.forEach((node: any) => {
+    node.collapse();
+    handleCollapse(node.data);
+  });
+};
 </script>