@tmagic/editor 1.3.0-alpha.8 → 1.3.0-beta.0

package/src/{utils/stage.ts → hooks/use-stage.ts}

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
 
+import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
 
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
 import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
-
-import { getGuideLineFromCache } from './editor';
+import { getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
 const page = computed(() => editorService.get('page'));
@@ -74,11 +74,8 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   stage.on('remove', (ev: RemoveEventData) => {
-    editorService.remove(
-      ev.data.map(({ el }) => ({
-        id: el.id,
-      })),
-    );
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
   });
 
   stage.on('select-parent', () => {

package/src/icons/CenterIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H21V6H2V4Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11H18V13H5V11Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 18H21V20H2V18Z" fill="black" fill-opacity="0.9" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCenterIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -1,7 +1,5 @@
 <template>
-  <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
   <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">

package/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>

package/src/index.ts

@@ -22,7 +22,11 @@ import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceMethods from './fields/DataSourceMethods.vue';
+import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
+import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -35,6 +39,7 @@ import './theme/index.scss';
 
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
+export * from './hooks';
 export * from './utils';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
@@ -52,10 +57,15 @@ export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
+export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
+export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
+export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
@@ -63,6 +73,7 @@ export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
+export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -87,5 +98,9 @@ export default {
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
   },
 };

package/src/initService.ts

@@ -7,9 +7,14 @@ import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from
 import { getNodes } from '@tmagic/utils';
 
 import type { Target } from './services/dep';
-import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
+import {
+  createCodeBlockTarget,
+  createDataSourceCondTarget,
+  createDataSourceMethodTarget,
+  createDataSourceTarget,
+} from './utils/dep';
 import editorProps from './editorProps';
-import type { Services } from './type';
+import { DepTargetType, Services } from './type';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -26,6 +31,7 @@ export const initServiceState = (
     uiService,
     codeBlockService,
     keybindingService,
+    dataSourceService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -47,6 +53,14 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceList,
+    (datasourceList) => dataSourceService.set('datasourceTypeList', datasourceList),
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.propsConfigs,
     (configs) => propsService.setPropsConfigs(configs),
@@ -82,6 +96,30 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceConfigs,
+    (configs) => {
+      Object.entries(configs).forEach(([key, value]) => {
+        dataSourceService.setFormConfig(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceValues,
+    (values) => {
+      Object.entries(values).forEach(([key, value]) => {
+        dataSourceService.setFormValue(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.defaultSelected,
     (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
@@ -139,6 +177,7 @@ export const initServiceEvents = (
 
     if (app.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
       app.dsl.dataSources = root.dataSources;
     }
 
@@ -159,23 +198,34 @@ export const initServiceEvents = (
   };
 
   const targetAddHandler = (target: Target) => {
-    if (target.type !== 'data-source') return;
-
     const root = editorService.get('root');
     if (!root) return;
 
-    if (!root.dataSourceDeps) {
-      root.dataSourceDeps = {};
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
     }
 
-    root.dataSourceDeps[target.id] = target.deps;
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
   };
 
   const targetRemoveHandler = (id: string | number) => {
     const root = editorService.get('root');
-    if (!root?.dataSourceDeps) return;
 
-    delete root.dataSourceDeps[id];
+    if (root?.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root?.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
   };
 
   const depUpdateHandler = (node: MNode) => {
@@ -191,6 +241,12 @@ export const initServiceEvents = (
   depService.on('dep-update', depUpdateHandler);
   depService.on('collected', collectedHandler);
 
+  const initDataSourceDepTarget = (ds: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(ds.id));
+    depService.addTarget(createDataSourceMethodTarget(ds.id));
+    depService.addTarget(createDataSourceCondTarget(ds.id));
+  };
+
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
     let node;
@@ -218,14 +274,14 @@ export const initServiceEvents = (
     codeBlockService.setCodeDsl(value.codeBlocks);
     dataSourceService.set('dataSources', value.dataSources);
 
-    depService.removeTargets('code-block');
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
 
     Object.entries(value.codeBlocks).forEach(([id, code]) => {
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
     value.dataSources.forEach((ds) => {
-      depService.addTarget(createDataSourceTarget(ds.id, ds));
+      initDataSourceDepTarget(ds);
     });
 
     if (value && Array.isArray(value.items)) {
@@ -236,18 +292,22 @@ export const initServiceEvents = (
     }
   };
 
+  // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点删除，清除对齐的依赖收集
   const nodeRemoveHandler = (nodes: MNode[]) => {
     depService.clear(nodes);
   };
 
+  // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage) => {
     depService.collect([page], true);
   };
@@ -275,17 +335,14 @@ export const initServiceEvents = (
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
   const dataSourceAddHandler = (config: DataSourceSchema) => {
-    depService.addTarget(createDataSourceTarget(config.id, config));
+    initDataSourceDepTarget(config);
     getApp()?.dataSourceManager?.addDataSource(config);
   };
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
-    if (config.title) {
-      depService.getTarget(config.id)!.name = config.title;
-    }
     const root = editorService.get('root');
 
-    const targets = depService.getTargets('data-source');
+    const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
 

package/src/layouts/CodeEditor.vue

@@ -1,26 +1,46 @@
 <template>
-  <div ref="codeEditor" class="magic-code-editor"></div>
+  <div :class="`magic-code-editor`">
+    <Teleport to="body" :disabled="!fullScreen">
+      <div
+        :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
+        :style="!fullScreen && height ? `height: ${height}` : '100%'"
+      >
+        <TMagicButton
+          class="magic-code-editor-full-screen-icon"
+          circle
+          size="small"
+          :icon="FullScreen"
+          @click="fullScreenHandler"
+        ></TMagicButton>
+        <div ref="codeEditor" class="magic-code-editor-content"></div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+import { TMagicButton } from '@tmagic/design';
+
 defineOptions({
   name: 'MEditorCodeEditor',
 });
 
 const props = withDefaults(
   defineProps<{
-    initValues?: string | Record<string | number, any> | null;
-    modifiedValues?: string | Record<string | number, any> | null;
+    initValues?: any;
+    modifiedValues?: any;
     type?: 'diff';
     language?: string;
     options?: {
       [key: string]: any;
     };
+    height?: string;
     autoSave?: boolean;
   }>(),
   {
@@ -37,10 +57,14 @@ const emit = defineEmits(['initd', 'save']);
 const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
-    value = serialize(v, {
-      space: 2,
-      unsafe: true,
-    }).replace(/"(\w+)":\s/g, '$1: ');
+    if (props.language.toLocaleLowerCase() === 'json') {
+      value = JSON.stringify(v, null, 2);
+    } else {
+      value = serialize(v, {
+        space: 2,
+        unsafe: true,
+      }).replace(/"(\w+)":\s/g, '$1: ');
+    }
   } else {
     value = v;
   }
@@ -81,7 +105,7 @@ const setEditorValue = (v: string | any, m: string | any) => {
 };
 
 const getEditorValue = () =>
-  props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+  (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
 const init = async () => {
   if (!codeEditor.value) return;
@@ -109,13 +133,19 @@ const init = async () => {
     if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
       e.preventDefault();
       e.stopPropagation();
-      emit('save', getEditorValue());
+      const newValue = getEditorValue();
+      values.value = newValue;
+      emit('save', newValue);
     }
   });
 
   if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
-      emit('save', getEditorValue());
+      const newValue = getEditorValue();
+      if (values.value !== newValue) {
+        values.value = newValue;
+        emit('save', newValue);
+      }
     });
   }
 
@@ -145,12 +175,34 @@ onUnmounted(() => {
   resizeObserver.disconnect();
 });
 
+const fullScreen = ref(false);
+const fullScreenHandler = () => {
+  fullScreen.value = !fullScreen.value;
+  setTimeout(() => {
+    vsEditor?.focus();
+    vsEditor?.layout();
+    vsDiffEditor?.focus();
+    vsDiffEditor?.layout();
+  });
+};
+
 defineExpose({
+  values,
+
   getEditor() {
     return vsEditor || vsDiffEditor;
   },
 
+  getVsEditor() {
+    return vsEditor;
+  },
+
+  getVsDiffEditor() {
+    return vsDiffEditor;
+  },
+
   setEditorValue,
+  getEditorValue,
 
   focus() {
     vsEditor?.focus();

package/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor">
+  <div class="m-editor" ref="content">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -67,6 +67,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
+const content = ref<HTMLDivElement>();
+
 const root = computed(() => editorService?.get('root'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
@@ -91,13 +93,15 @@ watch(
 
     columnWidth.value.left = left;
 
+    const container = content.value || document.body;
+
     if (length <= 0) {
       columnWidth.value.right = undefined;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+      columnWidth.value.center = container.clientWidth - left;
     } else {
       const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
       columnWidth.value.right = right;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+      columnWidth.value.center = container.clientWidth - left - right;
     }
 
     uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);

package/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel" v-if="nodes.length === 1">
+  <div class="m-editor-props-panel" v-show="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
@@ -8,6 +8,7 @@
       :size="propsPanelSize"
       :init-values="values"
       :config="curFormConfig"
+      :extend-state="extendState"
       @change="submit"
     ></MForm>
   </div>
@@ -17,7 +18,7 @@
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import type { FormValue } from '@tmagic/form';
+import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
@@ -26,6 +27,10 @@ defineOptions({
   name: 'MEditorPropsPanel',
 });
 
+defineProps<{
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();
@@ -78,5 +83,5 @@ const submit = async () => {
   }
 };
 
-defineExpose({ submit });
+defineExpose({ configForm, submit });
 </script>

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -18,11 +18,9 @@
             @drag="dragHandler"
           >
             <slot name="component-list-item" :component="item">
-              <MIcon :icon="item.icon"></MIcon>
+              <MIcon :title="item.text" :icon="item.icon"></MIcon>
 
-              <TMagicTooltip effect="dark" placement="bottom" :content="item.text">
-                <span>{{ item.text }}</span>
-              </TMagicTooltip>
+              <span :title="item.text">{{ item.text }}</span>
             </slot>
           </div>
         </TMagicCollapseItem>
@@ -36,7 +34,7 @@ import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
-import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -83,14 +81,13 @@ const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
   if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData(
-      'data',
+      'text/json',
       serialize({
         name: text,
         type,
         ...data,
-      }).replace(/"(\w+)":\s/g, '$1: '),
+      }),
     );
   }
 };
@@ -121,6 +118,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+  timeout = stage.value.delayedMarkContainer(e);
 };
 </script>

package/src/layouts/sidebar/LayerMenu.vue

@@ -4,12 +4,14 @@
 
 <script lang="ts" setup>
 import { computed, inject, markRaw, ref } from 'vue';
-import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
+import { Files, Plus } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+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';
 
 defineOptions({
   name: 'MEditorLayerMenu',
@@ -19,12 +21,14 @@ 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'));
 const nodes = computed(() => services?.editorService.get('nodes'));
-const isRoot = computed(() => node.value?.type === NodeType.ROOT);
-const isPage = computed(() => node.value?.type === NodeType.PAGE);
 const componentList = computed(() => services?.componentListService.getList() || []);
 
 const createMenuItems = (group: ComponentGroup): MenuButton[] =>
@@ -81,29 +85,24 @@ const getSubMenuData = computed<MenuButton[]>(() => {
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
-    text: '新增',
-    icon: markRaw(Plus),
-    display: () => node.value?.items && nodes.value?.length === 1,
-    items: getSubMenuData.value,
-  },
-  {
-    type: 'button',
-    text: '复制',
-    icon: markRaw(CopyDocument),
-    display: () => !isRoot.value,
+    text: '全部折叠',
+    icon: FolderMinusIcon,
+    display: () => isPage(node.value),
     handler: () => {
-      node.value && services?.editorService.copy(nodes.value || []);
+      emit('collapse-all');
     },
   },
   {
     type: 'button',
-    text: '删除',
-    icon: markRaw(Delete),
-    display: () => !isRoot.value && !isPage.value,
-    handler: () => {
-      node.value && services?.editorService.remove(nodes.value || []);
-    },
+    text: '新增',
+    icon: markRaw(Plus),
+    display: () => node.value?.items && nodes.value?.length === 1,
+    items: getSubMenuData.value,
   },
+  useCopyMenu(),
+  usePasteMenu(),
+  useDeleteMenu(),
+  useMoveToMenu(services),
   ...props.layerContentMenu,
 ]);