@tmagic/editor 1.7.13 → 1.7.14-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.13",
+  "version": "1.7.14-beta.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/form": "1.7.13",
-    "@tmagic/stage": "1.7.13",
-    "@tmagic/design": "1.7.13",
-    "@tmagic/table": "1.7.13",
-    "@tmagic/utils": "1.7.13"
+    "@tmagic/design": "1.7.14-beta.1",
+    "@tmagic/form": "1.7.14-beta.1",
+    "@tmagic/table": "1.7.14-beta.1",
+    "@tmagic/stage": "1.7.14-beta.1",
+    "@tmagic/utils": "1.7.14-beta.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.33",
-    "@tmagic/core": "1.7.13"
+    "@tmagic/core": "1.7.14-beta.1"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -26,6 +26,10 @@
           :custom-content-menu="customContentMenu"
           :indent="treeIndent"
           :next-level-indent-increment="treeNextLevelIndentIncrement"
+          :layer-node-is-expandable="layerNodeIsExpandable"
+          :can-drop-in="canDropIn"
+          :before-layer-node-dblclick="beforeLayerNodeDblclick"
+          @layer-node-dblclick="layerNodeDblclickHandler"
         >
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
@@ -85,6 +89,7 @@
           :stage-content-menu="stageContentMenu"
           :custom-content-menu="customContentMenu"
         >
+          <template #stage-top><slot name="stage-top"></slot></template>
           <template #stage><slot name="stage"></slot></template>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
         </Workspace>
@@ -154,6 +159,7 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
+import type { TreeNodeData } from './type';
 import type { EditorSlots, EventBus, Services, StageOptions } from './type';
 
 defineSlots<EditorSlots>();
@@ -168,6 +174,7 @@ const emit = defineEmits<{
   'update:modelValue': [value: MApp | null];
   'props-form-error': [e: any];
   'props-submit-error': [e: any];
+  'layer-node-dblclick': [event: MouseEvent, data: TreeNodeData];
 }>();
 
 const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);
@@ -200,6 +207,11 @@ const stageOptions: StageOptions = {
   canSelect: props.canSelect,
   updateDragEl: props.updateDragEl,
   isContainer: props.isContainer,
+  // sourceIds 为空表示从组件列表新增（尚无 id），否则是画布上拖动已有组件
+  canDropIn: props.canDropIn
+    ? (sourceIds, targetId) =>
+        props.canDropIn!(sourceIds, targetId, sourceIds.length === 0 ? 'stage-add' : 'stage-drag')
+    : undefined,
   containerHighlightClassName: props.containerHighlightClassName,
   containerHighlightDuration: props.containerHighlightDuration,
   containerHighlightType: props.containerHighlightType,
@@ -207,6 +219,7 @@ const stageOptions: StageOptions = {
   renderType: props.renderType,
   guidesOptions: props.guidesOptions,
   disabledMultiSelect: props.disabledMultiSelect,
+  alwaysMultiSelect: props.alwaysMultiSelect,
   beforeDblclick: props.beforeDblclick,
 };
 
@@ -234,5 +247,9 @@ const propsPanelFormErrorHandler = (e: any) => {
   emit('props-form-error', e);
 };
 
+const layerNodeDblclickHandler = (event: MouseEvent, data: TreeNodeData) => {
+  emit('layer-node-dblclick', event, data);
+};
+
 defineExpose(services);
 </script>

package/src/components/ScrollViewer.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="m-editor-scroll-viewer-container" ref="container">
     <div ref="target" :style="style">
+      <slot name="before"></slot>
       <slot></slot>
     </div>
 
@@ -29,7 +30,7 @@ import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from
 
 import { isNumber } from '@tmagic/utils';
 
-import type { ScrollViewerEvent } from '@editor/type';
+import type { ScrollViewerEvent, ScrollViewerSlots } from '@editor/type';
 import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
 import ScrollBar from './ScrollBar.vue';
@@ -38,6 +39,8 @@ defineOptions({
   name: 'MEditorScrollViewer',
 });
 
+defineSlots<ScrollViewerSlots>();
+
 const props = withDefaults(
   defineProps<{
     width?: number | string;

package/src/components/Tree.vue

@@ -8,6 +8,7 @@
         :indent="indent"
         :next-level-indent-increment="nextLevelIndentIncrement"
         :node-status-map="nodeStatusMap"
+        :is-expandable="isExpandable"
       >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
@@ -33,7 +34,7 @@ import { provide } from 'vue';
 
 import type { Id } from '@tmagic/core';
 
-import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
+import type { IsExpandableFunction, LayerNodeStatus, TreeNodeData } from '@editor/type';
 
 import TreeNode from './TreeNode.vue';
 
@@ -55,6 +56,7 @@ const emit = defineEmits<{
   'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
   'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
   'node-click': [event: MouseEvent, data: TreeNodeData];
+  'node-dblclick': [event: MouseEvent, data: TreeNodeData];
 }>();
 
 provide('treeEmit', emit);
@@ -66,6 +68,8 @@ withDefaults(
     indent?: number;
     nextLevelIndentIncrement?: number;
     emptyText?: string;
+    /** 自定义判断节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+    isExpandable?: IsExpandableFunction;
   }>(),
   {
     indent: 0,

package/src/components/TreeNode.vue

@@ -20,12 +20,12 @@
     >
       <MIcon
         class="expand-icon"
-        :style="hasChildren ? '' : 'color: transparent; cursor: default'"
+        :style="isExpandable(data, nodeStatusMap) ? '' : 'color: transparent; cursor: default'"
         :icon="expanded ? ArrowDown : ArrowRight"
         @click="expandHandler"
       ></MIcon>
 
-      <div class="tree-node-content" @click="nodeClickHandler">
+      <div class="tree-node-content" @click="nodeClickHandler" @dblclick="nodeDblclickHandler">
         <slot name="tree-node-content" :data="data">
           <div class="tree-node-label">
             <slot name="tree-node-label" :data="data">{{ `${data.name} (${data.id})` }}</slot>
@@ -37,7 +37,7 @@
       </div>
     </div>
 
-    <div v-if="hasChildren && expanded" class="m-editor-tree-node-children">
+    <div v-if="isExpandable(data, nodeStatusMap) && expanded" class="m-editor-tree-node-children">
       <TreeNode
         v-for="item in data.items"
         :key="item.id"
@@ -46,6 +46,7 @@
         :parentsId="[...parentsId, data.id]"
         :node-status-map="nodeStatusMap"
         :indent="indent + nextLevelIndentIncrement"
+        :is-expandable="isExpandable"
       >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
@@ -68,8 +69,8 @@ import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 import type { Id } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { updateStatus } from '@editor/utils/tree';
+import type { IsExpandableFunction, LayerNodeStatus, TreeNodeData } from '@editor/type';
+import { defaultIsExpandable, updateStatus } from '@editor/utils/tree';
 
 defineSlots<{
   'tree-node-label'(_props: { data: TreeNodeData }): any;
@@ -88,6 +89,7 @@ const emit = defineEmits<{
   'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
   'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
   'node-click': [event: MouseEvent, data: TreeNodeData];
+  'node-dblclick': [event: MouseEvent, data: TreeNodeData];
 }>();
 
 const treeEmit = inject<typeof emit>('treeEmit');
@@ -100,11 +102,14 @@ const props = withDefaults(
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
     nextLevelIndentIncrement?: number;
+    /** 自定义判断节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+    isExpandable?: IsExpandableFunction;
   }>(),
   {
     indent: 0,
     nextLevelIndentIncrement: 11,
     parentsId: () => [],
+    isExpandable: defaultIsExpandable,
   },
 );
 
@@ -123,10 +128,6 @@ const selected = computed(() => nodeStatus.value.selected);
 const visible = computed(() => nodeStatus.value.visible);
 const draggable = computed(() => nodeStatus.value.draggable);
 
-const hasChildren = computed(
-  () => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible),
-);
-
 const handleDragStart = (event: DragEvent) => {
   treeEmit?.('node-dragstart', event, props.data);
 };
@@ -156,4 +157,8 @@ const expandHandler = () => {
 const nodeClickHandler = (event: MouseEvent) => {
   treeEmit?.('node-click', event, props.data);
 };
+
+const nodeDblclickHandler = (event: MouseEvent) => {
+  treeEmit?.('node-dblclick', event, props.data);
+};
 </script>

package/src/editorProps.ts

@@ -11,15 +11,18 @@ import StageCore, {
 import { getIdFromEl } from '@tmagic/utils';
 
 import type {
+  CanDropInFunction,
   ComponentGroup,
   CustomContentMenuFunction,
   DatasourceTypeOption,
+  IsExpandableFunction,
   MenuBarData,
   MenuButton,
   MenuComponent,
   PageBarSortOptions,
   SideBarData,
   StageRect,
+  TreeNodeData,
 } from './type';
 
 export interface EditorProps {
@@ -74,6 +77,11 @@ export interface EditorProps {
   guidesOptions?: Partial<GuidesOptions>;
   /** 禁止多选 */
   disabledMultiSelect?: boolean;
+  /**
+   * 始终启用多选模式：开启后无需按住 Ctrl/Meta，点击即多选；
+   * 默认 false。当 `disabledMultiSelect` 为 true 时本配置失效
+   */
+  alwaysMultiSelect?: boolean;
   /** 禁用页面片 */
   disabledPageFragment?: boolean;
   /** 禁用双击在浮层中单独编辑选中组件 */
@@ -98,8 +106,22 @@ export interface EditorProps {
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
   /** 用于自定义组件树与画布的右键菜单 */
   customContentMenu?: CustomContentMenuFunction;
+  /** 用于自定义判断组件树节点是否可展开（即是否要展示为拥有子节点的形态） */
+  layerNodeIsExpandable?: IsExpandableFunction;
+  /**
+   * 用于自定义判断当前正在拖动的源是否可以拖入目标节点内部
+   *
+   * 同时覆盖以下两类场景，通过第三个参数 scene 区分：
+   * - `'layer'` ："已选组件"面板组件树拖动（返回 false 时仅禁用 inner，不影响 before/after）
+   * - `'stage'`：画布拖入组件（返回 false 时阻止该容器被高亮命中；适用于"组件列表拖入新组件"和"画布上拖动已有组件"两种细分情况）
+   *
+   * 注意：layer 场景目前只识别同步返回值；返回 Promise 时会按 true 处理（即允许）
+   */
+  canDropIn?: CanDropInFunction;
   /** 画布双击前的钩子函数，返回 false 则阻止默认的双击行为 */
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
+  /** 组件树节点双击前的钩子函数，返回 false 则阻止默认的双击行为 */
+  beforeLayerNodeDblclick?: (event: MouseEvent, data: TreeNodeData) => Promise<boolean | void> | boolean | void;
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 页面顺序拖拽配置参数 */
   pageBarSortOptions?: PageBarSortOptions;
@@ -110,6 +132,7 @@ export interface EditorProps {
 export const defaultEditorProps = {
   renderType: RenderType.IFRAME,
   disabledMultiSelect: false,
+  alwaysMultiSelect: false,
   disabledPageFragment: false,
   disabledStageOverlay: false,
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,

package/src/fields/StyleSetter/Index.vue

@@ -74,7 +74,11 @@ const collapseValue = shallowRef(
 
 const change = (v: any, eventData: ContainerChangeEventData) => {
   eventData.changeRecords?.forEach((record) => {
-    record.propPath = `${props.name}.${record.propPath}`;
+    if (props.prop) {
+      record.propPath = `${props.prop}.${record.propPath}`;
+    } else if (props.name) {
+      record.propPath = `${props.name}.${record.propPath}`;
+    }
   });
   emit('change', v, eventData);
 };

package/src/hooks/use-stage.ts

@@ -24,6 +24,7 @@ export const useStage = (stageOptions: StageOptions) => {
     zoom: stageOptions.zoom ?? zoom.value,
     autoScrollIntoView: stageOptions.autoScrollIntoView,
     isContainer: stageOptions.isContainer,
+    canDropIn: stageOptions.canDropIn,
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
@@ -45,6 +46,7 @@ export const useStage = (stageOptions: StageOptions) => {
     updateDragEl: stageOptions.updateDragEl,
     guidesOptions: stageOptions.guidesOptions,
     disabledMultiSelect: stageOptions.disabledMultiSelect,
+    alwaysMultiSelect: stageOptions.alwaysMultiSelect,
     disabledRule: stageOptions.disabledRule,
   });
 
@@ -59,6 +61,13 @@ export const useStage = (stageOptions: StageOptions) => {
     },
   );
 
+  watch(
+    () => editorService.get('alwaysMultiSelect'),
+    (alwaysMultiSelect) => {
+      stage.setAlwaysMultiSelect(Boolean(alwaysMultiSelect));
+    },
+  );
+
   const hGuidesCache = getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY));
   const vGuidesCache = getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY));
 

package/src/initService.ts

@@ -72,6 +72,16 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.alwaysMultiSelect,
+    (alwaysMultiSelect) => {
+      editorService.set('alwaysMultiSelect', alwaysMultiSelect || false);
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.componentGroupList,
     (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),

package/src/layouts/props-panel/PropsPanel.vue

@@ -115,7 +115,7 @@ const init = async () => {
   }
 
   const type = node.value.type || (node.value.items ? 'container' : 'text');
-  curFormConfig.value = await propsService.getPropsConfig(type);
+  curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
   values.value = node.value;
 };
 

package/src/layouts/sidebar/Sidebar.vue

@@ -162,8 +162,10 @@ import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height'
 import { useFloatBox } from '@editor/hooks/use-float-box';
 import { useServices } from '@editor/hooks/use-services';
 import {
+  type CanDropInFunction,
   ColumnLayout,
   CustomContentMenuFunction,
+  type IsExpandableFunction,
   type MenuButton,
   type MenuComponent,
   type SideBarData,
@@ -171,6 +173,7 @@ import {
   type SideComponent,
   type SideItem,
   SideItemKey,
+  type TreeNodeData,
 } from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
@@ -184,6 +187,10 @@ defineOptions({
   name: 'MEditorSidebar',
 });
 
+const emit = defineEmits<{
+  'layer-node-dblclick': [event: MouseEvent, data: TreeNodeData];
+}>();
+
 const props = withDefaults(
   defineProps<{
     data?: SideBarData;
@@ -191,6 +198,12 @@ const props = withDefaults(
     indent?: number;
     nextLevelIndentIncrement?: number;
     customContentMenu: CustomContentMenuFunction;
+    /** 自定义判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+    layerNodeIsExpandable?: IsExpandableFunction;
+    /** 自定义判断当前正在拖动的源是否可以拖入目标节点内部，详见 EditorProps.canDropIn */
+    canDropIn?: CanDropInFunction;
+    /** 组件树节点双击前的钩子函数，返回 false 则阻止默认的双击行为 */
+    beforeLayerNodeDblclick?: (_event: MouseEvent, _data: TreeNodeData) => Promise<boolean | void> | boolean | void;
   }>(),
   {
     data: () => ({
@@ -248,6 +261,12 @@ const getItemConfig = (data: SideItem): SideComponent => {
         customContentMenu: props.customContentMenu,
         indent: props.indent,
         nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+        isExpandable: props.layerNodeIsExpandable,
+        canDropIn: props.canDropIn,
+        beforeNodeDblclick: props.beforeLayerNodeDblclick,
+      },
+      listeners: {
+        'node-dblclick': (event: MouseEvent, nodeData: TreeNodeData) => emit('layer-node-dblclick', event, nodeData),
       },
       component: LayerPanel,
       slots: {},

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -12,6 +12,7 @@
       :node-status-map="nodeStatusMap"
       :indent="indent"
       :next-level-indent-increment="nextLevelIndentIncrement"
+      :is-expandable="isExpandable"
       @node-dragover="handleDragOver"
       @node-dragstart="handleDragStart"
       @node-dragleave="handleDragLeave"
@@ -19,6 +20,7 @@
       @node-contextmenu="nodeContentMenuHandler"
       @node-mouseenter="mouseenterHandler"
       @node-click="nodeClickHandler"
+      @node-dblclick="dblclickHandler"
     >
       <template #tree-node-content="{ data: nodeData }">
         <slot name="layer-node-content" :data="nodeData"> </slot>
@@ -56,7 +58,15 @@ import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
 import { useServices } from '@editor/hooks/use-services';
-import type { CustomContentMenuFunction, LayerPanelSlots, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
+import type {
+  CanDropInFunction,
+  CustomContentMenuFunction,
+  IsExpandableFunction,
+  LayerPanelSlots,
+  MenuButton,
+  MenuComponent,
+  TreeNodeData,
+} from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
@@ -71,11 +81,21 @@ defineOptions({
   name: 'MEditorLayerPanel',
 });
 
-defineProps<{
+const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
   indent?: number;
   nextLevelIndentIncrement?: number;
   customContentMenu: CustomContentMenuFunction;
+  /** 自定义判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+  isExpandable?: IsExpandableFunction;
+  /** 自定义判断当前拖动节点是否可以拖入目标节点内部的函数，返回 false 则禁止拖入 */
+  canDropIn?: CanDropInFunction;
+  /** 组件树节点双击前的钩子函数，返回 false 则阻止默认的双击行为 */
+  beforeNodeDblclick?: (_event: MouseEvent, _data: TreeNodeData) => Promise<boolean | void> | boolean | void;
+}>();
+
+const emit = defineEmits<{
+  'node-dblclick': [event: MouseEvent, data: TreeNodeData];
 }>();
 
 const services = useServices();
@@ -113,13 +133,27 @@ const collapseAllHandler = () => {
   }
 };
 
-const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
+const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services, {
+  canDropIn: (sourceIds, targetId) => props.canDropIn?.(sourceIds, targetId, 'layer'),
+});
 
 // 右键菜单
 const menuRef = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
 const {
   nodeClickHandler,
+  nodeDblclickHandler,
   nodeContentMenuHandler,
   highlightHandler: mouseenterHandler,
 } = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
+
+const dblclickHandler = async (event: MouseEvent, data: TreeNodeData) => {
+  if (props.beforeNodeDblclick) {
+    const result = await props.beforeNodeDblclick(event, data);
+    if (result === false) return;
+  }
+
+  nodeDblclickHandler(event, data);
+
+  emit('node-dblclick', event, data);
+};
 </script>

package/src/layouts/sidebar/layer/use-click.ts

@@ -2,7 +2,7 @@ import { computed, type ComputedRef, nextTick, type Ref, type ShallowRef } from
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
-import { isPage, isPageFragment } from '@tmagic/utils';
+import { getElById, isPage, isPageFragment } from '@tmagic/utils';
 
 import type { LayerNodeStatus, Services, TreeNodeData } from '@editor/type';
 import { UI_SELECT_MODE_EVENT_NAME } from '@editor/utils/const';
@@ -16,7 +16,9 @@ export const useClick = (
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
   menuRef: ShallowRef<InstanceType<typeof LayerMenu> | null>,
 ) => {
-  const isMultiSelect = computed(() => isCtrlKeyDown.value && !editorService.get('disabledMultiSelect'));
+  const isMultiSelect = computed(
+    () => !editorService.get('disabledMultiSelect') && (isCtrlKeyDown.value || editorService.get('alwaysMultiSelect')),
+  );
 
   // 触发画布选中
   const select = async (data: MNode) => {
@@ -81,6 +83,19 @@ export const useClick = (
     stageOverlayService.get('stage')?.highlight(data.id);
   };
 
+  const isNodeCanSelect = async (data: TreeNodeData) => {
+    const canSelect = stageOverlayService.get('stageOptions')?.canSelect;
+    if (!canSelect) return true;
+
+    const doc = editorService.get('stage')?.renderer?.contentWindow?.document;
+    if (!doc) return true;
+
+    const el = getElById()(doc, data.id);
+    if (!el) return true;
+
+    return Boolean(await canSelect(el));
+  };
+
   const nodeClickHandler = (event: MouseEvent, data: TreeNodeData): void => {
     if (!nodeStatusMap?.value) return;
 
@@ -95,16 +110,34 @@ export const useClick = (
       });
     }
 
-    nextTick(() => {
+    nextTick(async () => {
+      if (!(await isNodeCanSelect(data))) return;
+
       select(data);
     });
   };
 
+  const nodeDblclickHandler = (event: MouseEvent, data: TreeNodeData): void => {
+    if (!nodeStatusMap?.value) return;
+
+    if (uiService.get('uiSelectMode')) return;
+
+    // 双击切换展开/收起状态
+    if (data.items && data.items.length > 0) {
+      const status = nodeStatusMap.value.get(data.id);
+      updateStatus(nodeStatusMap.value, data.id, {
+        expand: !status?.expand,
+      });
+    }
+  };
+
   return {
     menuRef,
 
     nodeClickHandler,
 
+    nodeDblclickHandler,
+
     nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData): void {
       event.preventDefault();