在节点上添加新节点

dashboard/src/components/anthology/EditableTocTree.tsx

@@ -2,11 +2,15 @@ import { Button, message } from "antd";
 import { useEffect, useState } from "react";
 import { FileAddOutlined } from "@ant-design/icons";
 
-import { get, put } from "../../request";
+import { get as getUiLang } from "../../locales";
+
+import { get, post, put } from "../../request";
 import {
+  IArticleCreateRequest,
   IArticleMapAddResponse,
   IArticleMapListResponse,
   IArticleMapUpdateRequest,
+  IArticleResponse,
 } from "../api/Article";
 import ArticleListModal from "../article/ArticleListModal";
 import EditableTree, {
@@ -100,6 +104,33 @@ const EditableTocTreeWidget = ({
             })
             .catch((e) => console.error(e));
         }}
+        onAppend={async (
+          node: TreeNodeData
+        ): Promise<TreeNodeData | undefined> => {
+          if (typeof studioName === "undefined") {
+            return;
+          }
+          const res = await post<IArticleCreateRequest, IArticleResponse>(
+            `/v2/article`,
+            {
+              title: "new article",
+              lang: getUiLang(),
+              studio: studioName,
+            }
+          );
+
+          console.log(res);
+          if (res.ok) {
+            return {
+              key: res.data.uid,
+              title: res.data.title,
+              children: [],
+              level: node.level + 1,
+            };
+          } else {
+            return;
+          }
+        }}
       />
     </div>
   );

dashboard/src/components/article/EditableTree.tsx

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
 import { useEffect } from "react";
-import { Tree, Typography } from "antd";
+import { message, Tree } from "antd";
 import type { DataNode, TreeProps } from "antd/es/tree";
 import { Key } from "antd/lib/table/interface";
 import { DeleteOutlined, SaveOutlined } from "@ant-design/icons";
 import { Button, Divider, Space } from "antd";
 import { useIntl } from "react-intl";
-
-const { Text } = Typography;
+import EditableTreeNode from "./EditableTreeNode";
 
 export interface TreeNodeData {
   key: string;
@@ -123,6 +122,7 @@ interface IWidget {
   onSelect?: Function;
   onSave?: Function;
   onAddFile?: Function;
+  onAppend?: Function;
 }
 const EditableTreeWidget = ({
   treeData,
@@ -132,6 +132,7 @@ const EditableTreeWidget = ({
   onSelect,
   onSave,
   onAddFile,
+  onAppend,
 }: IWidget) => {
   const intl = useIntl();
 
@@ -149,7 +150,7 @@ const EditableTreeWidget = ({
     setGData(newTreeData);
     const list = treeToList(newTreeData);
     setListTreeData(list);
-  }, [addOnArticle]);
+  }, [addOnArticle, gData]);
 
   useEffect(() => {
     const data = tocGetTreeData(treeData);
@@ -157,6 +158,27 @@ const EditableTreeWidget = ({
     setGData(data);
   }, [treeData]);
 
+  const appendNode = (key: string, node: TreeNodeData) => {
+    console.log("key", key);
+    const append = (_node: TreeNodeData[]) => {
+      _node.forEach((value, index, array) => {
+        if (value.key === key) {
+          array[index].children.push(node);
+          console.log("key found");
+          return;
+        } else {
+          append(array[index].children);
+        }
+        return;
+      });
+    };
+    const newTree = [...gData];
+    append(newTree);
+    setGData(newTree);
+    const list = treeToList(newTree);
+    setListTreeData(list);
+  };
+
   const onDragEnter: TreeProps["onDragEnter"] = (info) => {
     console.log(info);
     // expandedKeys 需要受控时设置
@@ -296,20 +318,31 @@ const EditableTreeWidget = ({
           } else {
             setKeys("");
           }
-
-          console.log(selectedKeys);
           if (typeof onSelect !== "undefined") {
             onSelect(selectedKeys);
           }
         }}
         treeData={gData}
         titleRender={(node: TreeNodeData) => {
-          return node.deletedAt ? (
-            <Text delete disabled>
-              {node.title}
-            </Text>
-          ) : (
-            <>{node.title}</>
+          return (
+            <EditableTreeNode
+              node={node}
+              onAdd={async () => {
+                if (typeof onAppend !== "undefined") {
+                  const newNode = await onAppend(node);
+                  console.log("newNode", newNode);
+                  if (newNode) {
+                    appendNode(node.key, newNode);
+                    return true;
+                  } else {
+                    message.error("添加失败");
+                    return false;
+                  }
+                } else {
+                  return false;
+                }
+              }}
+            />
           );
         }}
       />