From ea1cae79684850f26703273d7df4a73829ffde4b Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 11 Sep 2023 15:57:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=B7=B2=E9=80=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=E6=A0=B9=E8=8A=82=E7=82=B9=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E9=A1=B9=EF=BC=9A=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/icons/FolderMinusIcon.vue | 22 +++++++++++++++++++
 .../editor/src/layouts/sidebar/LayerMenu.vue  | 16 ++++++++++++++
 .../editor/src/layouts/sidebar/LayerPanel.vue | 12 +++++++++-
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 packages/editor/src/icons/FolderMinusIcon.vue

diff --git a/packages/editor/src/icons/FolderMinusIcon.vue b/packages/editor/src/icons/FolderMinusIcon.vue
new file mode 100644
index 00000000..1c694e17
--- /dev/null
+++ b/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>
diff --git a/packages/editor/src/layouts/sidebar/LayerMenu.vue b/packages/editor/src/layouts/sidebar/LayerMenu.vue
index 0b8ba8bf..ca5b55fd 100644
--- a/packages/editor/src/layouts/sidebar/LayerMenu.vue
+++ b/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: '新增',
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index 23497986..2567ce78 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/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>