expandedKey 改为 数组

dashboard/src/components/article/PaliTextToc.tsx

@@ -26,7 +26,7 @@ const Widget = ({ book, para, channel }: IWidget) => {
       setTocList(toc);
     });
   }, [book, para]);
-  return <TocTree treeData={tocList} expandedKey={`${book}-${para}`} />;
+  return <TocTree treeData={tocList} expandedKey={[`${book}-${para}`]} />;
 };
 
 export default Widget;

dashboard/src/components/article/TocTree.tsx

@@ -8,18 +8,17 @@ import PaliText from "../template/Wbw/PaliText";
 type TreeNodeData = {
   key: string;
   title: string;
-  children: TreeNodeData[];
+  children?: TreeNodeData[];
   level: number;
 };
 
 function tocGetTreeData(
   listData: ListNodeData[],
   active = ""
-): [TreeNodeData[], string] {
+): TreeNodeData[] | undefined {
   let treeData: TreeNodeData[] = [];
   let tocActivePath: TreeNodeData[] = [];
   let treeParents = [];
-  let defaultExpandedKey: string = "";
   let rootNode: TreeNodeData = {
     key: "0",
     title: "root",
@@ -36,21 +35,25 @@ function tocGetTreeData(
     let newNode: TreeNodeData = {
       key: element.key,
       title: element.title,
-      children: [],
       level: element.level,
     };
 
-    if (active === element.key) {
-      defaultExpandedKey = element.key;
-    }
-
     if (newNode.level > iCurrLevel) {
       //新的层级比较大，为上一个的子目录
       treeParents.push(lastInsNode);
+      if (typeof lastInsNode.children === "undefined") {
+        lastInsNode.children = [];
+      }
       lastInsNode.children.push(newNode);
     } else if (newNode.level === iCurrLevel) {
       //目录层级相同，为平级
-      treeParents[treeParents.length - 1].children.push(newNode);
+      const parentNode = treeParents[treeParents.length - 1];
+      if (typeof parentNode !== "undefined") {
+        if (typeof parentNode.children === "undefined") {
+          parentNode.children = [];
+        }
+        parentNode.children.push(newNode);
+      }
     } else {
       // 小于 挂在上一个层级
       while (treeParents.length > 1) {
@@ -59,7 +62,13 @@ function tocGetTreeData(
           break;
         }
       }
-      treeParents[treeParents.length - 1].children.push(newNode);
+      const parentNode = treeParents[treeParents.length - 1];
+      if (typeof parentNode !== "undefined") {
+        if (typeof parentNode.children === "undefined") {
+          parentNode.children = [];
+        }
+        parentNode.children.push(newNode);
+      }
     }
     lastInsNode = newNode;
     iCurrLevel = newNode.level;
@@ -72,25 +81,26 @@ function tocGetTreeData(
       }
     }
   }
-  return [treeData[0].children, defaultExpandedKey];
+
+  return treeData[0].children;
 }
 
 interface IWidgetTocTree {
   treeData: ListNodeData[];
-  expandedKey?: string;
+  expandedKey?: string[];
   onSelect?: Function;
 }
 
 const Widget = ({ treeData, expandedKey, onSelect }: IWidgetTocTree) => {
   const [tree, setTree] = useState<TreeNodeData[]>();
-  const [expanded, setExpanded] = useState<string>("");
+  const [expanded, setExpanded] = useState(expandedKey);
 
   useEffect(() => {
     if (treeData.length > 0) {
-      const [data, key] = tocGetTreeData(treeData, expandedKey);
+      const data = tocGetTreeData(treeData);
       setTree(data);
-      setExpanded(key);
-      console.log("create tree", treeData.length, expandedKey, key);
+      setExpanded(expandedKey);
+      console.log("create tree", treeData.length, expandedKey);
     }
   }, [treeData, expandedKey]);
   const onNodeSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
@@ -104,8 +114,8 @@ const Widget = ({ treeData, expandedKey, onSelect }: IWidgetTocTree) => {
     <Tree
       onSelect={onNodeSelect}
       treeData={tree}
-      defaultExpandedKeys={[expanded]}
-      defaultSelectedKeys={[expanded]}
+      defaultExpandedKeys={expanded}
+      defaultSelectedKeys={expanded}
       blockNode
       titleRender={(node: DataNode) => {
         if (typeof node.title === "string") {

dashboard/src/components/nut/TreeTest.tsx

@@ -1,37 +1,27 @@
-import React from "react";
-import { Tree } from "antd";
-import type { DataNode, TreeProps } from "antd/es/tree";
+import type { TreeProps } from "antd/es/tree";
+import TocTree from "../article/TocTree";
+import { ListNodeData } from "../article/EditableTree";
 
-const treeData: DataNode[] = [
+const treeData: ListNodeData[] = [
   {
-    title: "parent 1",
-    key: "0-0",
-    children: [
-      {
-        title: "parent 1-0",
-        key: "0-0-0",
-        children: [
-          {
-            title: "leaf",
-            key: "0-0-0-0",
-          },
-          {
-            title: "leaf",
-            key: "0-0-0-1",
-          },
-        ],
-      },
-      {
-        title: "parent 1-1",
-        key: "0-0-1",
-        children: [
-          {
-            title: <span style={{ color: "#1890ff" }}>sss</span>,
-            key: "0-0-1-0",
-          },
-        ],
-      },
-    ],
+    title: "title 1",
+    key: "0-1",
+    level: 1,
+  },
+  {
+    title: "title 2",
+    key: "0-2",
+    level: 2,
+  },
+  {
+    title: "title 1",
+    key: "0-3",
+    level: 2,
+  },
+  {
+    title: "title 1",
+    key: "1-0",
+    level: 1,
   },
 ];
 
@@ -41,11 +31,7 @@ const Widget = () => {
   };
 
   return (
-    <Tree
-      defaultExpandedKeys={["0-0-1-0"]}
-      onSelect={onSelect}
-      treeData={treeData}
-    />
+    <TocTree onSelect={onSelect} treeData={treeData} expandedKey={["0-3"]} />
   );
 };