feat: 优化 SelectFolder 组件,支持为 node 节点自定义返回数据

src/App.vue

@@ -104,6 +104,15 @@ function changeRootPath(newRootPath) {
     localStorage.setItem('rootPathOfFolderTree', newRootPath)
     rootPathOfFolderTree.value = newRootPath
 }
+// <SelectFolder> 返回的文件树数据，增加自定义数据，便于传给 <FolderTree> 进行渲染
+function appendDataForNode(nodeData) {
+    if (!nodeData.directory) {
+        // 给文件节点，增加 suffix 字段，用于表示文件后缀，便于 <FolderTree> 过滤文件
+        let splitResult = nodeData.name.split('.');
+        let fileSuffix = splitResult.length > 1 ? splitResult.pop() : '';
+        nodeData.suffix = fileSuffix;
+    }
+}
 
 // <SelectFolder> 选择目录后赋值给 folderTreeData，然后再传递给 <FolderTree>
 const folderTreeData = ref(null)
@@ -158,7 +167,8 @@ onUnmounted(() => {
             <template #left>
                 <div class="split-left">
                     <SelectFolder :class="hiddenSplitRight" :rootPath="rootPathOfFolderTree"
-                        @update:rootPath="changeRootPath" @folder-selected="showFileTree" />
+                        :nodeDataCallback="appendDataForNode" @update:rootPath="changeRootPath"
+                        @folder-selected="showFileTree" />
                     <FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" :expandLevel="1"
                         :selectedNode="[currentFilePath]" :specifyFileSuffix="['md']" @file-selected="fileSelected" />
                 </div>

src/components/SelectFolder.vue

@@ -15,7 +15,6 @@
                 {
                     "path": "root-path/root/folder1/folder1-file2",
                     "name": "folder1-file2.txt.md",
-                    "suffix": "md",
                     "directory": false,
                 },
             ]
@@ -23,7 +22,6 @@
         {
             "path": "root-path/root/file3",
             "name": "file3.txt",
-            "suffix": "txt",
             "directory": false,
         },
     ]
@@ -45,6 +43,15 @@ export default {
             required: false,
             default: ''
         },
+        // 生成 node 数据时，支持执行自定义操作
+        nodeDataCallback: {
+            type: Function,
+            required: false,
+            default: (node) => {
+                // 操作 node 数据，可以增加自定义字段
+                return;
+            }
+        },
     },
     mounted() {
         // 如果父组件已指定了初始目录，则遍历返回对应文件树
@@ -79,6 +86,7 @@ export default {
                 "nodes": [],
                 "directory": true,
             }
+            this.nodeDataCallback(folderTreeNode);
 
             // 尝试读取 folderPath 目录下所有实体
             let entries;
@@ -104,14 +112,13 @@ export default {
                 if (entry.isDirectory) {
                     folderTreeNode.nodes.push(await this.readDirRecursively(entryPath))
                 } else {
-                    let splitResult = entry.name.split('.')
+                    let subTreeNode = {
-                    let fileSuffix = splitResult.length > 1 ? splitResult.pop() : ''
-                    folderTreeNode.nodes.push({
                         "path": entryPath,
                         "name": entry.name,
-                        "suffix": fileSuffix,
                         "directory": false,
-                    })
+                    }
+                    this.nodeDataCallback(subTreeNode)
+                    folderTreeNode.nodes.push(subTreeNode)
                 }
             }
             return folderTreeNode