目录多的只获取第一层级

dashboard/src/components/anthology/AnthologyTocTree.tsx

@@ -24,7 +24,7 @@ const AnthologyTocTreeWidget = ({
     if (typeof anthologyId === "undefined") {
       return;
     }
-    let url = `/v2/article-map?view=anthology&id=${anthologyId}`;
+    let url = `/v2/article-map?view=anthology&id=${anthologyId}&lazy=1`;
     url += channels && channels.length > 0 ? "&channel=" + channels[0] : "";
     console.log("url", url);
     get<IArticleMapListResponse>(url).then((json) => {
@@ -34,18 +34,23 @@ const AnthologyTocTreeWidget = ({
             key: item.article_id ? item.article_id : item.title,
             title: item.title_text ? item.title_text : item.title,
             level: item.level,
+            children: item.children,
             deletedAt: item.deleted_at,
           };
         });
         setTocData(toc);
-        setExpandedKeys(
-          json.data.rows
-            .filter((value) => value.level === 1)
-            .map((item) => (item.article_id ? item.article_id : item.title))
-        );
+        if (json.data.rows.length === json.data.count) {
+          setExpandedKeys(
+            json.data.rows
+              .filter((value) => value.level === 1)
+              .map((item) => (item.article_id ? item.article_id : item.title))
+          );
+        } else {
+          setExpandedKeys(undefined);
+        }
       }
     });
-  }, [anthologyId]);
+  }, [anthologyId, channels]);
   return (
     <TocTree
       treeData={tocData}

dashboard/src/components/article/AddToAnthology.tsx

@@ -32,14 +32,13 @@ const AddToAnthologyWidget = ({
       onClose={(isOpen: boolean) => setIsModalOpen(isOpen)}
       onSelect={(id: string) => {
         if (typeof articleIds !== "undefined") {
-          post<IArticleMapAddRequest, IArticleMapAddResponse>(
-            "/v2/article-map",
-            {
-              anthology_id: id,
-              article_id: articleIds,
-              operation: "add",
-            }
-          )
+          const url = "/v2/article-map";
+          console.log("url", url);
+          post<IArticleMapAddRequest, IArticleMapAddResponse>(url, {
+            anthology_id: id,
+            article_id: articleIds,
+            operation: "add",
+          })
             .finally(() => {
               if (typeof onFinally !== "undefined") {
                 onFinally();

dashboard/src/components/article/TocTree.tsx

@@ -16,6 +16,7 @@ export interface TreeNodeData {
   key: string;
   id: string;
   title: string | React.ReactNode;
+  isLeaf?: boolean;
   children?: TreeNodeData[];
   level: number;
   deletedAt?: string | null;
@@ -45,6 +46,7 @@ function tocGetTreeData(
     let newNode: TreeNodeData = {
       key: randomString(),
       id: element.key,
+      isLeaf: element.children === 0,
       title: element.title,
       level: element.level,
       deletedAt: element.deletedAt,
@@ -100,6 +102,31 @@ function tocGetTreeData(
   return [treeData[0].children, idMap];
 }
 
+// It's just a lazy load simple demo. You can use tree map to optimize update perf.
+const updateTreeData = (
+  list: TreeNodeData[],
+  key: React.Key,
+  children: TreeNodeData[]
+): TreeNodeData[] => {
+  console.log("key", key);
+  return list.map((node) => {
+    if (node.key === key) {
+      console.log("found", node);
+      node.children = children;
+      return node;
+    }
+    /*
+    if (node.children) {
+      return {
+        ...node,
+        children: updateTreeData(node.children, key, children),
+      };
+    }
+    */
+    return node;
+  });
+};
+
 interface IWidgetTocTree {
   treeData?: ListNodeData[];
   expandedKeys?: Key[];
@@ -161,7 +188,37 @@ const TocTreeWidget = ({
     setExpanded(realKey);
   }, [expandedKeys, keyIdMap]);
 
-  console.log("selected", selected);
+  const onLoadData = ({ key, children }: any) =>
+    new Promise<void>((resolve) => {
+      if (children) {
+        resolve();
+        return;
+      }
+      setTimeout(() => {
+        setTree((origin) => {
+          if (!origin) {
+            return origin;
+          }
+          updateTreeData(origin, key, [
+            {
+              title: "Child Node",
+              key: randomString(),
+              id: `${key}-0`,
+              level: 2,
+            },
+            {
+              title: "Child Node",
+              key: randomString(),
+              id: `${key}-1`,
+              level: 2,
+            },
+          ]);
+        });
+
+        resolve();
+      }, 1000);
+    });
+
   return (
     <Tree
       treeData={tree}