From 01a2474951c666d786cec5323c1fc0a3373016d3 Mon Sep 17 00:00:00 2001
From: Frankie Huang <frankie@FrankiedeMacBook-Pro.local>
Date: Mon, 14 Apr 2025 04:13:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E6=A0=91=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95,=E5=92=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=88=A0=E8=8A=82=E7=82=B9=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FolderTree.vue | 106 +++++++++++++++++++++++++++++++---
 1 file changed, 99 insertions(+), 7 deletions(-)

diff --git a/src/components/FolderTree.vue b/src/components/FolderTree.vue
index 8088b65..5c49323 100644
--- a/src/components/FolderTree.vue
+++ b/src/components/FolderTree.vue
@@ -1,5 +1,12 @@
 <template>
-    <Tree ref="tree" :data="treeRenderData" :render="renderContent" expand-node></Tree>
+    <Tree ref="tree" :data="treeRenderData" :render="renderContent" @on-contextmenu="handleContextMenu" expand-node>
+        <template #contextMenu>
+            <DropdownItem v-for="item in currentMenuNode.contextMenuData" :key="item.name"
+                @click="item.handler(currentMenuNode)">
+                {{ item.name }}
+            </DropdownItem>
+        </template>
+    </Tree>
 </template>
 
 <script>
@@ -20,6 +27,16 @@ export default {
                     suffix: "txt",
                     directory: false,
                 }],
+                // 如果定义了 contextMenuData，则开启右键菜单
+                // 需要定义 name 和 handler，分别对应显示的文本和点击事件
+                contextMenuData: [
+                    {
+                        name: "新建目录",
+                        handler: (nodeRenderData) => {
+                            console.log(nodeRenderData);
+                        }
+                    }
+                ],
             },
         },
         selectedNode: {
@@ -46,7 +63,9 @@ export default {
     },
     data() {
         return {
+            root: null,
             treeRenderData: [],
+            currentMenuNode: {},
         }
     },
     mounted() {
@@ -58,17 +77,27 @@ export default {
         },
     },
     methods: {
-        // 以 treeData 为源数据，渲染文件树
+        // 以 treeData 为源数据，生成完整的文件树数据 treeRenderData
         renderTreeByTreeData(currentTreeData) {
             const renderNode = this.renderNodeByNodeData(currentTreeData, 0)
             this.treeRenderData = renderNode == null ? [] : [renderNode]
         },
-        // 渲染文件树节点。level 表示 nodeData 在文件树的层级（从 0 开始计数）
+        // 生成文件树节点数据。level 表示 nodeData 在文件树的层级（从 0 开始计数）
         renderNodeByNodeData(nodeData, level) {
             // 判断必须包含的字段，没有则返回 null
             if (nodeData == null || nodeData == undefined) {
                 return null
             }
+            // 如果 input 为 true，保留原 nodeData 数据，然后渲染成 input 框，并绑定输入完成事件
+            if (nodeData.input === true) {
+                let nodeRenderData = nodeData;
+                nodeRenderData.input = true;
+                nodeRenderData.completer = nodeData.completer ?
+                    nodeData.completer : (data, value) => {
+                        this.$Message.error("Input Node have no completer.");
+                    };
+                return nodeRenderData
+            }
             if (nodeData.path == undefined ||
                 nodeData.name == undefined ||
                 nodeData.directory == undefined ||
@@ -98,6 +127,12 @@ export default {
                 path: nodeData.path,
                 level: level,
             }
+            if (nodeData.contextMenuData && nodeData.contextMenuData.length > 0) {
+                // contextmenu = true 用于开启右键菜单
+                nodeRenderData.contextmenu = true
+                // contextMenuData 是渲染右键菜单的源数据
+                nodeRenderData.contextMenuData = nodeData.contextMenuData
+            }
             if (nodeData.directory) {
                 let childrenRenderData = []
                 nodeData.nodes.forEach(node => {
@@ -113,7 +148,47 @@ export default {
             }
             return nodeRenderData
         },
+        // 负责文件树每个节点的渲染，决策每个节点的样式
         renderContent(h, { root, node, data }) {
+            // 将 root 树存储起来，便于后续操作文件树增删节点
+            if (this.root === null) {
+                this.root = root;
+            }
+            // 给 data 绑定 nodeKey 和 parentKey，便于向上索引
+            data.nodeKey = node.nodeKey;
+            data.parentKey = node.parent;
+            // 将节点渲染为输入框，并绑定输入完成事件
+            if (data.input) {
+                return h('span', {
+                    style: {
+                        display: 'inline-block',
+                        width: '100%'
+                    },
+                }, [
+                    h('span', [
+                        // h(resolveComponent('Input'), {
+                        // 使用 resolveComponent 时 blur 事件失效，改用原生 input 框
+                        h('Input', {
+                            type: 'text',
+                            autofocus: true,
+                            autoCorrect: "off",
+                            spellCheck: "false",
+                            class: 'ivu-input ivu-input-default',
+                            style: { marginRight: '8px' },
+                            // 当 input 框触发 enter 或 blur 事件时，执行 completer 回调
+                            onKeyup: (event) => {
+                                if (event.key === "Enter") {
+                                    data.completer(data, event.target.value)
+                                }
+                            },
+                            onBlur: (event) => {
+                                data.completer(data, event.target.value)
+                            }
+                        }),
+                    ])
+                ]);
+            }
+            // 其他正常节点渲染事件
             return h('span', {
                 style: {
                     display: 'inline-block',
@@ -132,9 +207,10 @@ export default {
                 ])
             ]);
         },
-        selectNode(nodeData) {
+        // 当点击某个节点时，设置选中状态，并触发事件
+        selectNode(nodeRenderData) {
             // 文件夹不做任何动作
-            if (nodeData.directory) {
+            if (nodeRenderData.directory) {
                 return
             }
 
@@ -143,10 +219,26 @@ export default {
             selectedNodes.forEach(element => {
                 element.selected = false
             });
-            nodeData.selected = true
+            nodeRenderData.selected = true
 
             // 向父组件暴露当前选中的文件
-            this.$emit('file-selected', nodeData);
+            this.$emit('file-selected', nodeRenderData);
+        },
+        // 给一个节点增加子节点
+        appendTreeNode(parentRenderData, nodeData) {
+            const renderNode = this.renderNodeByNodeData(nodeData, parent.level + 1)
+            parentRenderData.children.push(renderNode)
+        },
+        // 删除文件树中某个子节点
+        removeTreeNode(nodeRenderData) {
+            const parentKey = this.root.find(el => el.nodeKey === nodeRenderData.nodeKey).parent;
+            const parent = this.root.find(el => el.nodeKey === parentKey).node;
+            const index = parent.children.indexOf(nodeRenderData);
+            parent.children.splice(index, 1);
+        },
+        // 对某个节点进行右键操作时，给 currentMenuNode 赋值，便于渲染右键菜单
+        handleContextMenu(nodeRenderData) {
+            this.currentMenuNode = nodeRenderData;
         },
     }
 }