@phelan/design 0.0.1

package/packages/components/src/table-head-editor/src/table-head-editor.vue

@@ -0,0 +1,780 @@
+<template>
+  <m-drawer
+    v-model="visible"
+    class="m-table-head-editor"
+    :title="title"
+    :size="size"
+    @close="handleCancel"
+  >
+    <div class="m-table-head-editor__content">
+      <div
+        class="m-table-head-editor__content-checkbox"
+        @click="handleSelectAllClick"
+      >
+        <m-checkbox
+          v-model="selectAllChecked"
+          :indeterminate="selectAllIndeterminate"
+          @click.stop
+        >
+          全选
+        </m-checkbox>
+      </div>
+      <m-tree
+        v-show="treeData.length > 0"
+        ref="treeRef"
+        :key="treeKey"
+        :data="treeData"
+        show-checkbox
+        node-key="id"
+        check-on-click-node
+        :expand-on-click-node="false"
+        :default-checked-keys="defaultCheckedKeys"
+        :default-expanded-keys="defaultExpandedKeys"
+        :auto-expand-parent="false"
+        :props="{ disabled: 'disabled' }"
+        :draggable="isDraggable"
+        :allow-drop="allowDrop"
+        @check="handleCheck"
+        @node-expand="handleNodeExpand"
+        @node-collapse="handleNodeCollapse"
+        @node-drop="handleNodeDrop"
+        @node-drag-enter="handleDragEnter"
+        @node-drag-leave="handleDragLeave"
+        @node-drag-over="handleDragOver"
+        :icon="ArrowRight"
+      >
+        <template #default="{ node }">
+          <div
+            class="m-table-head-editor__tree-node"
+            :data-node-id="(node.data || node).id || node.id"
+          >
+            <div>{{ node.label }}</div>
+            <div class="m-table-head-editor__content-item-icon">
+              <!-- 只有第一级节点显示固定按钮 -->
+              <template v-if="isFirstLevelNode(node)">
+                <m-icon
+                  v-if="(node.data || node).fixed === true"
+                  icon="Thumbtack"
+                  @click.stop="handleToggleFixed(node)"
+                ></m-icon>
+                <m-icon
+                  v-else
+                  icon="View"
+                  @click.stop="handleToggleFixed(node)"
+                ></m-icon>
+              </template>
+              <m-icon
+                icon="Drag"
+                class="m-table-head-editor__drag-handle"
+                @mousedown="handleDragIconMouseDown"
+              ></m-icon>
+            </div>
+          </div>
+        </template>
+      </m-tree>
+    </div>
+    <template #footer>
+      <div class="m-table-head-editor__footer">
+        <m-button
+          type="primary"
+          plain
+          @click="handleResetDefault"
+        >
+          恢复默认
+        </m-button>
+        <m-button
+          type="primary"
+          @click="handleConfirm"
+        >
+          确认
+        </m-button>
+      </div>
+    </template>
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { ArrowRight } from '@m-design/icons';
+import { tableHeadEditorProps, tableHeadEditorEmits, type TreeItem } from './table-head-editor';
+import { MDrawer } from '../../drawer';
+import { MButton } from '../../button';
+import { MCheckbox } from '../../checkbox';
+import { MTree } from '../../tree';
+import {
+  type TreeNode,
+  convertToTreeNodes,
+  convertToTreeItems,
+  resetIdCounter,
+  sortNodesByVisible,
+  hasIndeterminateState,
+} from './utils';
+
+const props = defineProps(tableHeadEditorProps);
+const emit = defineEmits(tableHeadEditorEmits);
+
+// Tree 组件的数据
+const treeData = ref<TreeNode[]>([]);
+const treeRef = ref();
+
+// 本地数据副本
+const localData = ref<TreeItem[]>([]);
+
+// 保存初始数据状态（用于恢复默认）
+const initialData = ref<TreeItem[]>([]);
+const initialExpandedKeys = ref<string[]>([]);
+const initialCheckedKeys = ref<string[]>([]);
+
+// 用于强制重新渲染 tree 组件的 key
+const treeKey = ref(0);
+
+// 默认展开的节点 keys
+const defaultExpandedKeys = ref<string[]>([]);
+
+// 默认选中的节点 keys
+const defaultCheckedKeys = ref<string[]>([]);
+
+// 是否可拖拽（控制 m-tree 的 draggable 属性）
+const isDraggable = ref(false);
+
+// 拖拽指示器状态
+const dragIndicator = ref<{
+  show: boolean;
+  nodeId: string | null;
+  position: 'before' | 'after' | null;
+}>({
+  show: false,
+  nodeId: null,
+  position: null,
+});
+
+// 收集所有节点的 keys（递归）
+const getAllNodeKeys = (nodes: TreeNode[]): string[] => {
+  const keys: string[] = [];
+  const collectKeys = (nodeList: TreeNode[]): void => {
+    nodeList.forEach((node) => {
+      keys.push(node.id);
+      if (node.children && node.children.length > 0) {
+        collectKeys(node.children);
+      }
+    });
+  };
+  collectKeys(nodes);
+  return keys;
+};
+
+// 计算已选中的 keys（根据 visible 状态）
+const checkedKeys = computed(() => {
+  const keys: string[] = [];
+  const collectKeys = (nodes: TreeNode[]): void => {
+    nodes.forEach((node) => {
+      if (node.visible) {
+        keys.push(node.id);
+      }
+      if (node.children && node.children.length > 0) {
+        collectKeys(node.children);
+      }
+    });
+  };
+  collectKeys(treeData.value);
+  return keys;
+});
+
+// 收集所有节点的 keys（用于默认展开）
+const getAllNodeKeysForExpand = (nodes: TreeNode[]): string[] => {
+  const keys: string[] = [];
+  const collectKeys = (nodeList: TreeNode[]): void => {
+    nodeList.forEach((node) => {
+      keys.push(node.id);
+      if (node.children && node.children.length > 0) {
+        collectKeys(node.children);
+      }
+    });
+  };
+  collectKeys(nodes);
+  return keys;
+};
+
+// 计算所有节点的 keys
+const allNodeKeys = computed(() => {
+  return getAllNodeKeys(treeData.value);
+});
+
+// 全选状态：是否全部选中
+const selectAllChecked = computed({
+  get() {
+    if (allNodeKeys.value.length === 0) {
+      return false;
+    }
+    return checkedKeys.value.length === allNodeKeys.value.length;
+  },
+  set(value: boolean) {
+    handleSelectAll(value);
+  },
+});
+
+// 全选状态：是否半选（部分选中）
+const selectAllIndeterminate = computed(() => {
+  const checkedCount = checkedKeys.value.length;
+  const totalCount = allNodeKeys.value.length;
+  return checkedCount > 0 && checkedCount < totalCount;
+});
+
+// 初始化数据
+const initData = () => {
+  if (props.data && props.data.length > 0) {
+    resetIdCounter();
+    const dataCopy = JSON.parse(JSON.stringify(props.data));
+    localData.value = dataCopy;
+
+    // 保存初始状态
+    initialData.value = JSON.parse(JSON.stringify(props.data));
+
+    const nodes = convertToTreeNodes(props.data);
+    // 初始化时也需要排序
+    treeData.value = sortNodesByVisible(nodes);
+
+    // 设置默认展开所有节点
+    const expandedKeys = getAllNodeKeysForExpand(treeData.value);
+    defaultExpandedKeys.value = expandedKeys;
+
+    // 保存初始展开状态
+    initialExpandedKeys.value = [...expandedKeys];
+
+    // 设置默认选中的节点（根据 visible 状态）
+    const checkedKeysValue = checkedKeys.value;
+    defaultCheckedKeys.value = checkedKeysValue;
+
+    // 保存初始选中状态
+    initialCheckedKeys.value = [...checkedKeysValue];
+
+    // 强制重新渲染 tree 组件，使 default-* 属性生效
+    treeKey.value += 1;
+  } else {
+    localData.value = [];
+    treeData.value = [];
+    defaultExpandedKeys.value = [];
+    defaultCheckedKeys.value = [];
+    initialData.value = [];
+    initialExpandedKeys.value = [];
+    initialCheckedKeys.value = [];
+    treeKey.value += 1;
+  }
+};
+
+// 监听 props.data 变化
+watch(
+  () => props.data,
+  () => {
+    if (props.modelValue) {
+      initData();
+    }
+  },
+  { deep: true },
+);
+
+// 监听 modelValue，当打开时初始化数据
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      initData();
+    }
+  },
+);
+
+// 更新 treeData 中节点的 visible 状态的辅助函数
+const updateNodeVisible = (nodes: TreeNode[], keys: string[]): TreeNode[] => {
+  const updatedNodes = nodes.map((node) => {
+    const newNode = { ...node };
+    newNode.visible = keys.includes(node.id);
+    if (newNode.children && newNode.children.length > 0) {
+      newNode.children = updateNodeVisible(newNode.children, keys);
+    }
+    return newNode;
+  });
+  // 更新 visible 状态后，对同层级进行排序
+  return sortNodesByVisible(updatedNodes);
+};
+
+// 收集所有可编辑节点的 keys（递归）
+const getEditableNodeKeys = (nodes: TreeNode[]): string[] => {
+  const keys: string[] = [];
+  const collectKeys = (nodeList: TreeNode[]): void => {
+    nodeList.forEach((node) => {
+      // 只收集 editable 为 true 的节点
+      if (node.editable === undefined || node.editable === true) {
+        keys.push(node.id);
+      }
+      if (node.children && node.children.length > 0) {
+        collectKeys(node.children);
+      }
+    });
+  };
+  collectKeys(nodes);
+  return keys;
+};
+
+// 全选/取消全选处理（change 事件）
+const handleSelectAll = (checked: boolean) => {
+  if (!treeRef.value) {
+    return;
+  }
+
+  // 保存当前的展开状态
+  const currentExpandedKeys = [...defaultExpandedKeys.value];
+
+  const allKeys = allNodeKeys.value;
+  if (checked) {
+    // 全选：选中所有节点
+    treeRef.value.setCheckedKeys(allKeys);
+    // 更新 treeData 中的 visible 状态
+    const updatedNodes = updateNodeVisible(treeData.value, allKeys);
+    treeData.value = updatedNodes;
+    localData.value = convertToTreeItems(treeData.value);
+
+    // 更新默认展开和选中状态，并强制重新渲染 tree 组件
+    defaultExpandedKeys.value = currentExpandedKeys;
+    defaultCheckedKeys.value = allKeys;
+    treeKey.value += 1;
+  } else {
+    // 取消全选：只取消选中 editable 为 true 的节点
+    // editable 为 false 的节点应该保持 visible = true
+    const editableKeys = getEditableNodeKeys(treeData.value);
+    const currentCheckedKeys = checkedKeys.value;
+    // 保留 editable 为 false 的节点（它们不在 editableKeys 中）
+    const keysToKeep = currentCheckedKeys.filter((key) => !editableKeys.includes(key));
+
+    treeRef.value.setCheckedKeys(keysToKeep);
+    // 更新 treeData 中的 visible 状态
+    const updatedNodes = updateNodeVisible(treeData.value, keysToKeep);
+    treeData.value = updatedNodes;
+    localData.value = convertToTreeItems(treeData.value);
+
+    // 更新默认展开和选中状态，并强制重新渲染 tree 组件
+    defaultExpandedKeys.value = currentExpandedKeys;
+    defaultCheckedKeys.value = keysToKeep;
+    treeKey.value += 1;
+  }
+};
+
+// 全选 checkbox 区域点击事件处理
+const handleSelectAllClick = (event: MouseEvent) => {
+  // 如果点击的是 checkbox 本身，不处理（让 checkbox 的 v-model 处理）
+  const target = event.target as HTMLElement;
+  const isCheckbox = target.closest('.el-checkbox') || target.closest('.m-checkbox');
+  if (isCheckbox) {
+    return;
+  }
+  // 点击的是 div 区域（非 checkbox），切换全选状态
+  handleSelectAll(!selectAllChecked.value);
+};
+
+// 判断节点是否为第一级节点
+const isFirstLevelNode = (node: any): boolean => {
+  // Element Plus Tree 的 node 对象可能包含 data 属性
+  const nodeData = node.data || node;
+
+  // 方法1: 检查 node.level，第一级节点 level 为 1
+  if (node.level !== undefined) {
+    return node.level === 1;
+  }
+  // 方法2: 检查 node.id，第一级节点的 id 不包含 '-'（没有 parentId 前缀）
+  // 根据我们的 id 生成规则：第一级节点 id = baseKey，子节点 id = `${parentId}-${baseKey}`
+  const nodeId = nodeData.id || node.id;
+  if (nodeId && typeof nodeId === 'string') {
+    return !nodeId.includes('-') || nodeId.split('-').length === 1;
+  }
+  // 方法3: 检查 node.parent，第一级节点没有 parent
+  if (node.parent === null || node.parent === undefined) {
+    return true;
+  }
+  return false;
+};
+
+// 节点展开事件处理
+const handleNodeExpand = (data: TreeNode) => {
+  if (data.id && !defaultExpandedKeys.value.includes(data.id)) {
+    defaultExpandedKeys.value = [...defaultExpandedKeys.value, data.id];
+  }
+};
+
+// 节点收起事件处理
+const handleNodeCollapse = (data: TreeNode) => {
+  if (data.id) {
+    defaultExpandedKeys.value = defaultExpandedKeys.value.filter((key) => key !== data.id);
+  }
+};
+
+// 检查节点是否被勾选（包含半选状态）
+const isNodeChecked = (node: TreeNode): boolean => {
+  return node.visible || hasIndeterminateState(node);
+};
+
+// 递归勾选节点及其所有子节点
+const checkNodeAndChildren = (node: TreeNode): TreeNode => {
+  const newNode = { ...node };
+  newNode.visible = true;
+  if (newNode.children && newNode.children.length > 0) {
+    newNode.children = newNode.children.map((child) => checkNodeAndChildren(child));
+  }
+  return newNode;
+};
+
+// 切换固定状态
+const handleToggleFixed = (node: any) => {
+  // 只有第一级节点才能固定
+  if (!isFirstLevelNode(node)) {
+    return;
+  }
+
+  // 获取节点的实际数据（Element Plus Tree 的 node 对象包含 data 属性）
+  const nodeData = node.data || node;
+  const nodeId = nodeData.id || node.id;
+
+  // 找到当前节点在 treeData 中的位置
+  let currentNode: TreeNode | null = null;
+  const findNode = (nodes: TreeNode[]): TreeNode | null => {
+    for (const n of nodes) {
+      if (n.id === nodeId) {
+        return n;
+      }
+      if (n.children && n.children.length > 0) {
+        const found = findNode(n.children);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  };
+  currentNode = findNode(treeData.value);
+
+  if (!currentNode) {
+    return;
+  }
+
+  // 更新 treeData 中对应节点的 fixed 状态
+  const updatedTreeData = treeData.value.map((n) => {
+    if (n.id === nodeId) {
+      const newNode = { ...n };
+      // 切换 fixed 状态
+      if (newNode.fixed === true) {
+        // 取消固定
+        newNode.fixed = false;
+      } else {
+        // 固定（fixed 为 undefined 或 false）
+        newNode.fixed = true;
+        // 如果节点没有被勾选（包含半选状态），则勾选上
+        if (!isNodeChecked(newNode)) {
+          // 勾选节点及其所有子节点
+          return checkNodeAndChildren(newNode);
+        }
+      }
+      return newNode;
+    }
+    if (n.children && n.children.length > 0) {
+      return {
+        ...n,
+        children: n.children.map((child) => {
+          if (child.id === nodeId) {
+            const newChild = { ...child };
+            if (newChild.fixed === true) {
+              newChild.fixed = false;
+            } else {
+              newChild.fixed = true;
+              // 如果节点没有被勾选（包含半选状态），则勾选上
+              if (!isNodeChecked(newChild)) {
+                // 勾选节点及其所有子节点
+                return checkNodeAndChildren(newChild);
+              }
+            }
+            return newChild;
+          }
+          return child;
+        }),
+      };
+    }
+    return n;
+  });
+
+  // 重新排序
+  treeData.value = sortNodesByVisible(updatedTreeData);
+
+  // 同步更新 localData
+  localData.value = convertToTreeItems(treeData.value);
+
+  // 保存当前的展开状态
+  const currentExpandedKeys = [...defaultExpandedKeys.value];
+
+  // 更新默认展开和选中状态，并强制重新渲染 tree 组件
+  defaultExpandedKeys.value = currentExpandedKeys;
+  defaultCheckedKeys.value = checkedKeys.value;
+  treeKey.value += 1;
+};
+
+// Tree 组件的 check 事件处理
+const handleCheck = (
+  _data: TreeNode,
+  checked: {
+    checkedNodes: TreeNode[];
+    checkedKeys: string[];
+    halfCheckedNodes: TreeNode[];
+    halfCheckedKeys: string[];
+  },
+) => {
+  // 保存当前的展开状态
+  const currentExpandedKeys = [...defaultExpandedKeys.value];
+
+  // 更新 treeData 中对应节点的 visible 状态
+  const updatedNodes = updateNodeVisible(treeData.value, checked.checkedKeys);
+  treeData.value = updatedNodes;
+
+  // 同步更新 localData
+  localData.value = convertToTreeItems(treeData.value);
+
+  // 更新默认展开和选中状态，并强制重新渲染 tree 组件以应用新的默认值
+  defaultExpandedKeys.value = currentExpandedKeys;
+  defaultCheckedKeys.value = checked.checkedKeys;
+  treeKey.value += 1;
+};
+
+// 控制抽屉显示隐藏
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+// 取消事件
+const handleCancel = () => {
+  // 恢复原始数据
+  initData();
+  emit('cancel');
+  visible.value = false;
+};
+
+// 确认事件
+const handleConfirm = () => {
+  // 直接使用 localData，它已经是 TreeItem 格式
+  emit('confirm', JSON.parse(JSON.stringify(localData.value)));
+  visible.value = false;
+};
+
+// 判断是否允许拖拽放置（只允许在同级别且同一父级下移动）
+const allowDrop = (draggingNode: any, dropNode: any, type: string) => {
+  // type: 'prev' | 'next' | 'inner'
+  // 'inner' 表示作为子节点，我们不允许跨级别，所以只允许 'prev' 和 'next'
+  if (type === 'inner') {
+    return false;
+  }
+
+  // 检查是否在同一层级
+  const draggingNodeData = draggingNode.data || draggingNode;
+  const dropNodeData = dropNode.data || dropNode;
+
+  const draggingNodeId = draggingNodeData.id || draggingNode.id;
+  const dropNodeId = dropNodeData.id || dropNode.id;
+
+  // 获取节点的父级 id
+  // id 格式：第一级为 baseKey，子级为 ${parentId}-${baseKey}
+  const getParentId = (nodeId: string): string | null => {
+    if (!nodeId || typeof nodeId !== 'string') {
+      return null;
+    }
+    const lastDashIndex = nodeId.lastIndexOf('-');
+    if (lastDashIndex === -1) {
+      // 第一级节点，父级是根节点（null）
+      return null;
+    }
+    // 返回最后一个 '-' 之前的部分作为父级 id
+    return nodeId.substring(0, lastDashIndex);
+  };
+
+  // 获取节点的层级（通过检查 id 中 '-' 的数量来判断层级）
+  const getNodeLevel = (nodeId: string): number => {
+    if (!nodeId || typeof nodeId !== 'string') {
+      return 0;
+    }
+    return nodeId.split('-').length - 1;
+  };
+
+  const draggingLevel = getNodeLevel(draggingNodeId);
+  const dropLevel = getNodeLevel(dropNodeId);
+
+  // 必须同一层级
+  if (draggingLevel !== dropLevel) {
+    return false;
+  }
+
+  // 必须同一父级
+  const draggingParentId = getParentId(draggingNodeId);
+  const dropParentId = getParentId(dropNodeId);
+
+  // 比较父级 id（null 表示根节点）
+  return draggingParentId === dropParentId;
+};
+
+// 处理 Drag 图标鼠标按下事件
+const handleDragIconMouseDown = () => {
+  // 设置 m-tree 的 draggable 为 true
+  isDraggable.value = true;
+
+  // 监听鼠标释放事件，恢复 draggable
+  const handleMouseUp = () => {
+    isDraggable.value = false;
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+  document.addEventListener('mouseup', handleMouseUp);
+};
+
+// 更新拖拽指示器的 DOM 类
+const updateDragIndicator = (nodeId: string | null, position: 'before' | 'after' | null) => {
+  // 清除所有现有的指示器类
+  const allContentElements = document.querySelectorAll(
+    '.m-table-head-editor .el-tree-node__content',
+  );
+  allContentElements.forEach((el) => {
+    el.classList.remove('is-drag-before', 'is-drag-after');
+  });
+
+  if (nodeId && position) {
+    // 找到对应的节点内容元素
+    const nodeElement = document.querySelector(
+      `.m-table-head-editor__tree-node[data-node-id="${nodeId}"]`,
+    );
+    if (nodeElement) {
+      // 找到父级的 el-tree-node__content
+      const contentElement = nodeElement.closest('.el-tree-node__content');
+      if (contentElement) {
+        contentElement.classList.add(`is-drag-${position}`);
+      }
+    }
+  }
+};
+
+// 处理拖拽进入事件
+const handleDragEnter = (_draggingNode: any, dropNode: any, _ev: DragEvent) => {
+  // 检查是否允许放置
+  const dropNodeData = dropNode.data || dropNode;
+  const dropNodeId = dropNodeData.id || dropNode.id;
+
+  // 检查是否允许放置（只检查 prev 和 next）
+  const canDropBefore = allowDrop(_draggingNode, dropNode, 'prev');
+  const canDropAfter = allowDrop(_draggingNode, dropNode, 'next');
+
+  if (canDropBefore || canDropAfter) {
+    // 默认显示在节点下方（after），具体位置由 handleDragOver 根据鼠标位置决定
+    dragIndicator.value = {
+      show: true,
+      nodeId: dropNodeId,
+      position: 'after',
+    };
+    updateDragIndicator(dropNodeId, 'after');
+  }
+};
+
+// 处理拖拽悬停事件（用于动态判断位置）
+const handleDragOver = (draggingNode: any, dropNode: any, ev: DragEvent) => {
+  // 检查是否允许放置
+  const dropNodeData = dropNode.data || dropNode;
+  const dropNodeId = dropNodeData.id || dropNode.id;
+
+  // 检查是否允许放置
+  const canDropBefore = allowDrop(draggingNode, dropNode, 'prev');
+  const canDropAfter = allowDrop(draggingNode, dropNode, 'next');
+
+  if (!canDropBefore && !canDropAfter) {
+    // 不允许放置，隐藏指示器
+    dragIndicator.value = {
+      show: false,
+      nodeId: null,
+      position: null,
+    };
+    updateDragIndicator(null, null);
+    return;
+  }
+
+  // 获取目标节点的 DOM 元素
+  const targetElement = ev.currentTarget as HTMLElement;
+  if (!targetElement) {
+    return;
+  }
+
+  // 获取鼠标在目标元素中的相对位置
+  const rect = targetElement.getBoundingClientRect();
+  const mouseY = ev.clientY;
+  const elementTop = rect.top;
+  const elementHeight = rect.height;
+  const elementCenter = elementTop + elementHeight / 2;
+
+  // 根据鼠标位置判断是 before 还是 after
+  // 鼠标在元素上半部分 -> before，下半部分 -> after
+  let position: 'before' | 'after' = mouseY < elementCenter ? 'before' : 'after';
+
+  // 如果只允许一种位置，则使用允许的位置
+  if (canDropBefore && !canDropAfter) {
+    position = 'before';
+  } else if (canDropAfter && !canDropBefore) {
+    position = 'after';
+  }
+
+  dragIndicator.value = {
+    show: true,
+    nodeId: dropNodeId,
+    position,
+  };
+  updateDragIndicator(dropNodeId, position);
+};
+
+// 处理拖拽离开事件
+const handleDragLeave = (_draggingNode: any, _dropNode: any, _ev: DragEvent) => {
+  // 隐藏指示器
+  dragIndicator.value = {
+    show: false,
+    nodeId: null,
+    position: null,
+  };
+  updateDragIndicator(null, null);
+};
+
+// 处理节点拖拽放置事件
+const handleNodeDrop = (_draggingNode: any, _dropNode: any, _dropType: string, _ev: DragEvent) => {
+  // dropType: 'before' | 'after' | 'inner'
+  // 由于 allowDrop 已经限制了只能 'before' 或 'after'，这里不需要再检查
+
+  // 隐藏指示器
+  dragIndicator.value = {
+    show: false,
+    nodeId: null,
+    position: null,
+  };
+  updateDragIndicator(null, null);
+
+  // 保存当前的展开状态
+  const currentExpandedKeys = [...defaultExpandedKeys.value];
+
+  // Tree 组件会自动更新 treeData，但我们需要重新应用排序规则
+  // 由于 Tree 组件已经更新了数据，我们需要从 treeRef 获取最新的数据
+  // 或者直接重新排序当前的 treeData
+
+  // 重新排序（应用排序规则）
+  treeData.value = sortNodesByVisible(treeData.value);
+
+  // 同步更新 localData
+  localData.value = convertToTreeItems(treeData.value);
+
+  // 更新默认展开和选中状态，并强制重新渲染 tree 组件
+  defaultExpandedKeys.value = currentExpandedKeys;
+  defaultCheckedKeys.value = checkedKeys.value;
+  treeKey.value += 1;
+};
+
+// 恢复默认事件（回调给外部处理）
+const handleResetDefault = () => {
+  emit('reset-default');
+};
+</script>