From 9f9cdfe884b4915474c9d4a6e6199ebbb00c72d6 Mon Sep 17 00:00:00 2001
From: lijisanxiong <1518062161@qq.com>
Date: Wed, 28 May 2025 21:02:59 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=A0=91=E9=83=A8=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=9C=A8=E6=A0=91=E8=8A=82=E7=82=B9=E5=86=85?=
 =?UTF-8?q?=E7=BB=98=E5=88=B6=E6=96=B0=E5=BB=BA=E7=BC=96=E8=BE=91=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md               |  1 +
 src/control/tree/tree.scss | 19 ++++++++++++++-----
 src/control/tree/tree.tsx  | 35 +++++++++++++++++++++++++++++++----
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c65a65d6..04bb7e02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 ### Changed
 
 - 文本域编辑器最小高度32,与输入框对齐
+- 树部件支持在树节点内绘制新建编辑框
 
 ### Changed
 
diff --git a/src/control/tree/tree.scss b/src/control/tree/tree.scss
index 53772f1f..e66d0465 100644
--- a/src/control/tree/tree.scss
+++ b/src/control/tree/tree.scss
@@ -128,11 +128,12 @@ $control-treeview-tree: (
 }
 
 @include b(control-treeview-new-node){
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-left: calc(1em + 12px);
-    font-size: #{getCssVar(control-treeview, font-size)}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: getCssVar(spacing, base);
+  padding-left: calc(1em + 12px);
+  font-size: #{getCssVar(control-treeview, font-size)};
 }
 
 @include b(control-treeview-context-menu-trigger) {
@@ -186,6 +187,14 @@ $control-treeview-tree: (
 
     padding: getCssVar(control-treeview-tree, padding);
     background-color: #{getCssVar(control-treeview, bg-color)};
+
+    .el-tree-node__content:has(.#{bem(control-treeview-new-node)}) {
+      .#{bem(control-treeview-new-node)} {
+        width: 100%;
+        padding-right: 0;
+        padding-left: 0;
+      }
+    } 
   }
 
 
diff --git a/src/control/tree/tree.tsx b/src/control/tree/tree.tsx
index d12a36f6..f5477051 100644
--- a/src/control/tree/tree.tsx
+++ b/src/control/tree/tree.tsx
@@ -151,12 +151,24 @@ export const TreeControl = defineComponent({
     const newTreeNodeText = ref<string | null>(null);
     const newNodeModel = ref<IDETreeNode | null>(null);
     const newDefaultValue = ref<IParams | null>(null);
+    const newNodeKey = ref<string>(`${createUUID()}-${createUUID()}`);
+    const newNodeData = ref<IData | null>(null);
     c.evt.on('onNewTreeNode', args => {
-      const { nodeModel, defaultValue } = args;
+      const { nodeModel, defaultValue, parentNodeData } = args;
       newNodeModel.value = nodeModel;
       newDefaultValue.value = defaultValue;
       editingNodeKey.value = null;
       editingNodeText.value = null;
+      if (parentNodeData && treeRef.value) {
+        const _newNodeData = {};
+        Object.assign(_newNodeData, {
+          _id: newNodeKey.value,
+          _text: '',
+          _leaf: true,
+        });
+        treeRef.value.append(_newNodeData, parentNodeData);
+        newNodeData.value = _newNodeData;
+      }
     });
 
     watch(
@@ -220,6 +232,8 @@ export const TreeControl = defineComponent({
         newNodeModel.value = null;
         newTreeNodeText.value = null;
         newDefaultValue.value = null;
+        if (newNodeData.value) treeRef.value?.remove(newNodeData.value);
+        newNodeData.value = null;
       }
     };
 
@@ -239,6 +253,8 @@ export const TreeControl = defineComponent({
         newNodeModel.value = null;
         newTreeNodeText.value = null;
         newDefaultValue.value = null;
+        if (newNodeData.value) treeRef.value?.remove(newNodeData.value);
+        newNodeData.value = null;
       }
     };
 
@@ -795,7 +811,13 @@ export const TreeControl = defineComponent({
         return null;
       }
       return (
-        <div class={[ns.b('new-node'), newNodeModel.value.sysCss?.cssName]}>
+        <div
+          class={[ns.b('new-node'), newNodeModel.value.sysCss?.cssName]}
+          onClick={_e => {
+            _e.preventDefault();
+            _e.stopPropagation();
+          }}
+        >
           {newNodeModel.value?.sysImage ? (
             <iBizIcon
               class={ns.be('node', 'icon')}
@@ -828,6 +850,8 @@ export const TreeControl = defineComponent({
       editingNodeKey,
       editingNodeText,
       cascadeSelect,
+      newNodeKey,
+      newNodeData,
       findNodeData,
       onCheck,
       onNodeClick,
@@ -908,7 +932,10 @@ export const TreeControl = defineComponent({
             {...this.$attrs}
           >
             {{
-              default: ({ data }: { node: IData; data: IData }) => {
+              default: ({ data, node }: { node: IData; data: IData }) => {
+                // 绘制新建项
+                if (this.newNodeKey === data._id) return this.renderNewNode();
+
                 const nodeData = this.findNodeData(data._uuid, this.c)!;
                 if (!nodeData) {
                   return null;
@@ -988,7 +1015,7 @@ export const TreeControl = defineComponent({
               },
             }}
           </el-tree>,
-          this.renderNewNode(),
+          !this.newNodeData && this.renderNewNode(),
           this.c.state.enableNavView && this.c.state.showNavIcon ? (
             !this.c.state.showNavView ? (
               <ion-icon
-- 
Gitee