workspace/code/fms/fms-vue/src/components/FmsTree.vue

<script setup>
import { computed, ref, useAttrs, watch } from "vue";

defineOptions({ inheritAttrs: false });

const attrs = useAttrs();
const handledEventAttrs = new Set([
  "onDrop",
  "onDragStart",
  "onDragstart",
  "onDragEnter",
  "onDragenter",
  "onDragLeave",
  "onDragleave",
  "onDragOver",
  "onDragover",
  "onDragEnd",
  "onDragend",
  "onRightClick",
  "onUpdate:expandedKeys",
]);

const treeAttrs = computed(() => {
  const result = {};
  for (const key in attrs) {
    if (!handledEventAttrs.has(key)) result[key] = attrs[key];
  }
  return result;
});

const props = defineProps({
  treeData: { type: Array, default: () => [] },
  expandedKeys: { type: Array, default: undefined },
  blockNode: { type: Boolean, default: true },
  virtual: { type: Boolean, default: true },
  draggable: { type: [Boolean, Function, Object], default: false },
  allowDrop: { type: Function, default: null },
  rootKey: { type: [String, Number], default: "__fms_tree_root__" },
  rootTitle: { type: String, default: "全部分类" },
  // 右键菜单生成函数：(node) => { items: [...] }
  contextMenu: { type: Function, default: null },
  contextMenuDisabled: { type: Boolean, default: false },
});

// 虚拟滚动与拖拽冲突：draggable 开启时强制关闭 virtual
const effectiveVirtual = computed(() => {
  if (props.draggable) return false;
  return props.virtual;
});

const effectiveTreeData = computed(() => {
  return [
    {
      key: props.rootKey,
      title: props.rootTitle,
      isFmsRoot: true,
      children: props.treeData,
    },
  ];
});

const emit = defineEmits([
  "menuClick",
  "drop",
  "dragStart",
  "dragEnter",
  "dragLeave",
  "dragOver",
  "dragEnd",
  "rightClick",
  "update:expandedKeys",
]);

let rootExpansionInitialized = false;
watch(
  () => props.expandedKeys,
  (keys) => {
    if (rootExpansionInitialized || !Array.isArray(keys)) return;
    rootExpansionInitialized = true;
    const hasRoot = keys.some((key) => String(key) === String(props.rootKey));
    if (!hasRoot) emit("update:expandedKeys", [props.rootKey, ...keys]);
  },
  { immediate: true },
);

const contextNode = ref(null);

function onTreeRightClick(info) {
  contextNode.value = info.node;
  emit("rightClick", info);
}

const contextMenuItems = computed(() => {
  if (!props.contextMenu || !contextNode.value) return undefined;
  const result = props.contextMenu(contextNode.value);
  if (!result) return undefined;
  return { ...result, onClick: onMenuClick };
});

function onMenuClick({ key }) {
  const node = contextNode.value;
  contextNode.value = null;
  if (node) emit("menuClick", { key, node });
}

function onExpandedKeysChange(keys) {
  emit("update:expandedKeys", keys);
}
</script>

<template>
  <a-dropdown
    v-if="contextMenu"
    :trigger="['contextmenu']"
    :menu="contextMenuItems"
    :disabled="contextMenuDisabled"
  >
    <div class="fms-tree-wrapper">
      <a-tree
        v-bind="treeAttrs"
        :tree-data="effectiveTreeData"
        :expanded-keys="expandedKeys"
        :default-expanded-keys="[rootKey]"
        :block-node="blockNode"
        :virtual="effectiveVirtual"
        show-line
        :draggable="draggable"
        :allow-drop="allowDrop"
        @right-click="onTreeRightClick"
        @drop="$emit('drop', $event)"
        @dragstart="$emit('dragStart', $event)"
        @dragenter="$emit('dragEnter', $event)"
        @dragleave="$emit('dragLeave', $event)"
        @dragover="$emit('dragOver', $event)"
        @dragend="$emit('dragEnd', $event)"
        @update:expanded-keys="onExpandedKeysChange"
      >
        <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
          <slot :name="name" v-bind="slotProps || {}" />
        </template>
      </a-tree>
    </div>
  </a-dropdown>
  <a-tree
    v-else
    v-bind="treeAttrs"
    :tree-data="effectiveTreeData"
    :expanded-keys="expandedKeys"
    :default-expanded-keys="[rootKey]"
    :block-node="blockNode"
    :virtual="effectiveVirtual"
    show-line
    :draggable="draggable"
    :allow-drop="allowDrop"
    @drop="$emit('drop', $event)"
    @dragstart="$emit('dragStart', $event)"
    @dragenter="$emit('dragEnter', $event)"
    @dragleave="$emit('dragLeave', $event)"
    @dragover="$emit('dragOver', $event)"
    @dragend="$emit('dragEnd', $event)"
    @update:expanded-keys="onExpandedKeysChange"
  >
    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps || {}" />
    </template>
  </a-tree>
</template>

<style scoped lang="scss">
.fms-tree-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}
</style>