搜索结果列表页面开发

src/components/FileTree/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <d-tree ref="treeRef" v-bind="$attrs">
+    <template #loading></template>
+    <template #icon></template>
+    <template #content="{ nodeData }">
+      <div>
+        <span class="inline-block w-5 mr-1">
+          <d-icon v-if="nodeData.loading" name="loading" class="spin" />
+          <Icon v-else :name="getIcon(nodeData)" />
+        </span>
+        <span :title="nodeData.name">{{ nodeData.name }}</span>
+      </div>
+    </template>
+  </d-tree>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useFile } from '@/utils/hooks/useFile';
+
+const { getIcon } = useFile();
+
+const treeRef = ref(null);
+const getTree = () => treeRef.value.treeFactory;
+const getTreeNodes = () => getTree().treeData.value;
+
+const getTreeNodeById = id => getTreeNodes().find(item => item.id === id);
+const appendChildrenById = (id, nodeList) => {
+  const parent = getTreeNodeById(id);
+  const tree = getTree();
+  nodeList?.forEach(node => {
+    tree.insertBefore(parent, node);
+  });
+};
+
+const getTreeNodeByPath = path => getTreeNodes().find(item => item.path === path);
+const appendChildrenByPath = (path, nodeList) => {
+  const parent = getTreeNodeByPath(path);
+  const tree = getTree();
+  nodeList?.forEach(node => {
+    tree.insertBefore(parent, node);
+  });
+};
+
+const removeNodeById = id => {
+  const node = getTreeNodeById(id);
+  getTree().removeNode(node);
+};
+
+const setNodeSelectedByPath = path => {
+  getTreeNodes().forEach(node => {
+    node.selected = node.path === path;
+  });
+};
+
+// 递归展开树
+const expandNodeByPath = path => {
+  if (!path) {
+    return;
+  }
+
+  const node = getTreeNodeByPath(path);
+  node && (node.expanded = true);
+
+  path = path.split('/');
+  path.pop();
+  expandNodeByPath(path.join('/'));
+};
+
+// 建议：如下暴露的树节点增删改查函数，需要在data赋值后、在setTimeout中执行
+defineExpose({
+  getTree,
+  getTreeNodes,
+  getTreeNodeById,
+  appendChildrenById,
+  getTreeNodeByPath,
+  appendChildrenByPath,
+  removeNodeById,
+  setNodeSelectedByPath,
+  expandNodeByPath
+});
+</script>